:root {
--bg: #090c12;
--bg-soft: #11151d;
--card: #141a23;
--card-2: #171e29;
--text: #f7f4ee;
--text-soft: #bcc4cf;
--text-mid: #d5dbe4;
--accent: #ff6a3d;
--accent-hover: #ff5722;
--accent-soft: rgba(255, 106, 61, 0.12);
--accent-glow: rgba(255, 106, 61, 0.15);
--border: rgba(255,255,255,0.08);
--border-strong: rgba(255,255,255,0.14);
--border-focus: rgba(255,106,61,0.42);
--shadow-sm: 0 8px 20px rgba(0,0,0,0.16);
--shadow-md: 0 18px 40px rgba(0,0,0,0.22);
--shadow-lg: 0 28px 70px rgba(0,0,0,0.32);
--container: 1280px;
--radius-sm: 12px;
--radius-md: 18px;
--radius-lg: 26px;
--radius-xl: 34px;
--radius-pill: 999px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-9: 40px;
--space-10: 48px;
--space-11: 56px;
--space-12: 64px;
--space-13: 72px;
--space-14: 80px;
--space-15: 96px;
--t-fast: 160ms ease;
--t-med: 280ms ease;
--t-slow: 420ms ease;
}
* { box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: 110px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
margin: 0;
background:
radial-gradient(900px 420px at 90% -10%, rgba(255,106,61,0.06), transparent 60%),
var(--bg);
color: var(--text);
font-family: 'Inter', sans-serif;
line-height: 1.65;
overflow-x: hidden;
}
img {
max-width: 100%;
display: block;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
h1, h2, h3, h4 {
font-family: 'Sora', sans-serif;
line-height: 1.03;
letter-spacing: -0.03em;
margin: 0 0 var(--space-4);
}
h1 { font-size: clamp(44px, 7vw, 84px); }
h2 { font-size: clamp(30px, 4.5vw, 52px); }
h3 { font-size: clamp(22px, 2.4vw, 28px); }
p {
margin: 0 0 var(--space-4);
color: var(--text-soft);
max-width: 64ch;
}
.lead {
font-size: clamp(18px, 1.6vw, 21px);
color: var(--text-mid);
line-height: 1.7;
}
.container {
width: min(calc(100% - 40px), var(--container));
margin: 0 auto;
}
.section { padding: var(--space-15) 0; }
.section-tight { padding: var(--space-12) 0; }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}

/* ===== EYEBROW ===== */
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 10px 16px;
border-radius: var(--radius-pill);
border: 1px solid var(--border-strong);
background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
color: var(--text-mid);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
box-shadow: var(--shadow-sm);
backdrop-filter: blur(10px);
}
.section .eyebrow,
.section-tight .eyebrow {
margin-bottom: var(--space-3);
}
.eyebrow::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 14px var(--accent-glow);
flex-shrink: 0;
}

/* ===== BUTTONS ===== */
.btn-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-7);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 56px;
padding: 0 var(--space-6);
border-radius: var(--radius-md);
border: 1px solid transparent;
font-size: 15px;
font-weight: 700;
transition: transform var(--t-med), background var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
white-space: nowrap;
cursor: pointer;
}
.btn-primary {
background: linear-gradient(135deg, var(--accent), var(--accent-hover));
color: #fff;
box-shadow: 0 10px 24px rgba(255,106,61,0.18);
animation: pulseGlow 4s ease-in-out infinite;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(255,106,61,0.25);
}
.btn-secondary {
background: rgba(255,255,255,0.04);
border-color: var(--border-strong);
color: var(--text);
}
.btn-secondary:hover {
transform: translateY(-2px);
border-color: var(--border-focus);
background: rgba(255,255,255,0.07);
}
@keyframes pulseGlow {
0%,100% { box-shadow: 0 8px 20px rgba(255,106,61,0.15); }
50% { box-shadow: 0 12px 28px rgba(255,106,61,0.22); }
}

/* ===== CARDS ===== */
.card {
position: relative;
background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-7);
box-shadow: var(--shadow-md);
overflow: hidden;
transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
}
.card::before {
content: "";
position: absolute;
inset: 0 auto auto 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, rgba(255,106,61,0.20), transparent 35%);
pointer-events: none;
}
.card:hover {
transform: translateY(-4px);
border-color: var(--border-focus);
box-shadow: var(--shadow-lg);
}

/* ===== HEADER ===== */
.site-header {
position: sticky;
top: 0;
z-index: 100;
padding: 12px 0 0;
}
.nav-shell {
width: min(calc(100% - 40px), var(--container));
margin: 0 auto;
border-radius: var(--radius-lg);
border: 1px solid var(--border);
background: linear-gradient(180deg, rgba(14,18,27,0.95), rgba(9,12,18,0.90));
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: var(--shadow-md);
position: relative;
}
.nav {
min-height: 92px;
display: grid;
grid-template-columns: 190px minmax(0,1fr) 190px;
align-items: center;
gap: var(--space-4);
padding: 0 var(--space-4);
}
.brand img {
height: 46px;
width: auto;
}
.nav-links {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(12px, 1.5vw, 24px);
min-width: 0;
}
.nav-links a {
position: relative;
color: var(--text-mid);
font-size: 13px;
font-weight: 600;
white-space: nowrap;
padding: 8px 4px;
transition: color var(--t-fast);
}
.nav-links a::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 0;
height: 2px;
background: var(--accent);
border-radius: var(--radius-pill);
transform: translateX(-50%);
transition: width var(--t-fast);
}
.nav-links a:hover {
color: var(--text);
}
.nav-links a:hover::after {
width: 70%;
}
.nav-links a.active {
color: var(--text);
}
.nav-links a.active::after {
width: 70%;
}
.nav-cta {
display: flex;
justify-content: flex-end;
}
.menu-toggle {
display: none;
width: 44px;
height: 44px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-strong);
background: rgba(255,255,255,0.06);
color: #ff6a3d;
font-size: 22px;
align-items: center;
justify-content: center;
cursor: pointer;
}
.menu-toggle span {
color: #ff6a3d;
line-height: 1;
}

/* ===== SCROLL PROGRESS BAR ===== */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 3px;
background: linear-gradient(90deg, #ff6a3d, #ff8a5f);
z-index: 9999;
transition: width 0.1s ease;
}

/* ===== LIST ===== */
.list-clean {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: var(--space-3);
}
.list-clean li {
position: relative;
padding-left: 30px;
color: var(--text-mid);
font-weight: 600;
}
.list-clean li::before {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 12px var(--accent-glow);
}

/* ===== CTA BOX ===== */
.cta-box {
text-align: center;
padding: var(--space-11) var(--space-7);
border-radius: var(--radius-xl);
border: 1px solid var(--border-strong);
background:
radial-gradient(520px 220px at top center, rgba(255,106,61,0.12), transparent 45%),
linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
box-shadow: var(--shadow-md);
}
.cta-box .btn-row {
justify-content: center;
}

/* ===== FOOTER ===== */
.footer {
padding: var(--space-7) 0 var(--space-9);
border-top: 1px solid var(--border);
text-align: center;
color: var(--text-soft);
background: linear-gradient(180deg, transparent, rgba(0,0,0,0.18));
}
.footer .container {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
}
.footer-links {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-5);
list-style: none;
padding: 0;
margin: 0 0 var(--space-2);
flex-wrap: wrap;
}
.footer-links a {
color: var(--text-mid);
padding: 4px 8px;
border-radius: var(--radius-sm);
font-weight: 500;
}
.footer-links a:hover {
color: var(--accent);
}

/* ===== ANIMATIONS ===== */
[data-animate] {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.55s ease, transform 0.55s ease;
}
[data-animate].in-view {
opacity: 1;
transform: translateY(0);
}
.delay-1 { transition-delay: 0.08s; }
.delay-2 { transition-delay: 0.16s; }
.delay-3 { transition-delay: 0.24s; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1180px) {
.nav {
grid-template-columns: 180px minmax(0,1fr) 170px;
gap: var(--space-3);
}
.nav-links {
gap: clamp(8px, 1vw, 14px);
}
.nav-links a {
font-size: 12px;
padding: 8px 3px;
}
}
@media (max-width: 920px) {
.site-header {
padding-top: 10px;
}
.nav-shell,
.container {
width: min(calc(100% - 24px), var(--container));
}
.nav {
min-height: 76px;
grid-template-columns: 1fr auto;
gap: var(--space-3);
padding: 0 var(--space-4);
}
.brand img {
height: 42px;
}
.menu-toggle {
display: inline-flex;
}
.nav-links {
display: none;
position: absolute;
top: calc(100% + 10px);
left: 12px;
right: 12px;
flex-direction: column;
align-items: stretch;
gap: var(--space-2);
background: var(--bg-soft);
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
padding: var(--space-4);
box-shadow: var(--shadow-md);
z-index: 200;
}
.nav-links.open {
display: flex;
}
.nav-links a {
width: 100%;
padding: var(--space-3);
}
.nav-cta {
display: none;
}
.card {
padding: var(--space-6);
}
.btn {
width: 100%;
}
.btn-row {
flex-direction: column;
align-items: stretch;
}
.cta-box {
padding: var(--space-8) var(--space-5);
}
}
@media (max-width: 480px) {
h1 { font-size: clamp(38px, 12vw, 56px); }
h2 { font-size: clamp(28px, 8vw, 36px); }
h3 { font-size: clamp(21px, 6vw, 26px); }
.eyebrow {
font-size: 11px;
}
.footer-links {
flex-direction: column;
gap: var(--space-2);
}
}

/* ===== BLOG OLDAL ===== */
.blog-hero {
padding: var(--space-13) 0 var(--space-4);
}
.blog-hero h1 {
font-size: clamp(36px, 5.5vw, 64px);
margin-top: var(--space-5);
margin-bottom: var(--space-5);
max-width: 860px;
}
.post-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-6);
margin-top: var(--space-8);
}
.post-card {
padding: 0;
display: flex;
flex-direction: column;
}
.post-thumb {
aspect-ratio: 16 / 10;
background-color: var(--card-2);
background-size: cover;
background-position: center;
position: relative;
}
.post-thumb::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.45));
}
.post-body {
padding: var(--space-5) var(--space-6) var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-2);
flex: 1;
}
.post-tag {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--accent);
}
.post-card h3 {
font-size: 22px;
line-height: 1.2;
margin: 0;
}
.post-card h3 a::after {
content: "";
position: absolute;
inset: 0;
}
.post-card p {
font-size: 15px;
margin: 0;
}
.post-meta {
margin-top: auto;
padding-top: var(--space-3);
font-size: 13px;
color: var(--text-soft);
}
.empty-state {
text-align: center;
padding: var(--space-11) var(--space-7);
margin-top: var(--space-8);
}
.empty-state .btn-row {
justify-content: center;
}
.empty-state p {
margin-left: auto;
margin-right: auto;
}
@media (max-width: 1100px) {
.post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
.blog-hero { padding: var(--space-10) 0 var(--space-2); }
.post-grid { grid-template-columns: 1fr; }
}

/* ===== CIKK OLDAL ===== */
.article-wrap {
width: min(calc(100% - 40px), 820px);
margin: 0 auto;
}
.article-header {
padding: var(--space-13) 0 var(--space-6);
}
.back-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--text-mid);
font-size: 14px;
font-weight: 600;
margin-bottom: var(--space-6);
transition: color var(--t-fast);
}
.back-link:hover {
color: var(--accent);
}
.article-header h1 {
font-size: clamp(32px, 5vw, 56px);
margin-top: var(--space-5);
margin-bottom: var(--space-4);
}
.article-meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
color: var(--text-soft);
font-size: 14px;
}
.article-cover {
aspect-ratio: 16 / 9;
border-radius: var(--radius-xl);
border: 1px solid var(--border-strong);
box-shadow: var(--shadow-lg);
background:
linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.35)),
url('https://domove.hu/wp-content/uploads/2026/03/huzo.png') center center / cover no-repeat;
margin: var(--space-6) 0 var(--space-10);
}
.article-body p {
font-size: 18px;
line-height: 1.8;
color: var(--text-mid);
max-width: none;
margin-bottom: var(--space-6);
}
.article-body p.lead {
font-size: 21px;
color: var(--text);
}
.article-body h2 {
font-size: clamp(24px, 3vw, 32px);
margin-top: var(--space-11);
margin-bottom: var(--space-4);
}
.article-body h3 {
font-size: clamp(20px, 2.2vw, 24px);
margin-top: var(--space-8);
margin-bottom: var(--space-3);
}
.article-body ul,
.article-body ol {
margin: 0 0 var(--space-6);
padding-left: 24px;
color: var(--text-mid);
font-size: 18px;
line-height: 1.8;
}
.article-body li {
margin-bottom: var(--space-2);
}
.article-body li::marker {
color: var(--accent);
}
.article-body blockquote {
margin: var(--space-8) 0;
padding: var(--space-5) var(--space-6);
border-radius: var(--radius-md);
border: 1px solid var(--border-strong);
border-left: 3px solid var(--accent);
background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}
.article-body blockquote p {
font-style: italic;
margin: 0;
}
.article-body a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 3px;
}
.article-body img {
border-radius: var(--radius-lg);
margin: var(--space-8) 0;
}
@media (max-width: 920px) {
.article-wrap { width: min(calc(100% - 24px), 820px); }
.article-header { padding: var(--space-10) 0 var(--space-4); }
.article-body p,
.article-body ul,
.article-body ol { font-size: 17px; }
}