/* ============================================================
   LAYQO.COM — Complete Stylesheet v8
   Font: Bricolage Grotesque (display) + Plus Jakarta Sans (body)
   Color: Emerald #1A6847 on warm paper #FAF9F6
   ============================================================ */

/* ============ TOKENS ============ */
:root {
    --bg: #FAF9F6;
    --bg-warm: #F3F1EB;
    --bg-muted: #EBE8E2;
    --surface: #FFFFFF;
    --ink: #1C1917;
    --ink-2: #57534E;
    --ink-3: #A8A29E;
    --ink-inv: #FAF9F6;
    --accent: #1A6847;
    --accent-h: #15553A;
    --accent-l: #E8F5EE;
    --accent-glow: rgba(26,104,71,.10);
    --dark: #1C1917;
    --dark-2: #292524;
    --dark-ink: #F5F3EE;
    --dark-ink-2: #A8A29E;
    --dark-brd: #3D3A36;
    --border: #E7E5E0;
    --border-h: #D6D3CD;
    --success: #16a34a;
    --error: #dc2626;
    --warning: #d97706;
    --fd: 'Bricolage Grotesque', system-ui, sans-serif;
    --fb: 'Plus Jakarta Sans', system-ui, sans-serif;
    --nav-h: 72px;
    --max-w: 1200px;
    --ease: cubic-bezier(.25,.8,.25,1);
    --dur: .3s;
}

/* ============ RESET ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); -webkit-font-smoothing: antialiased; }
body { font-family: var(--fb); background: var(--bg); color: var(--ink); line-height: 1.65; font-size: 1rem; }
a { color: var(--accent); text-decoration: none; transition: color var(--dur); }
a:hover { color: var(--accent-h); }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--accent-l); color: var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ============ TYPOGRAPHY ============ */
h1, h2, h3, h4 { font-family: var(--fd); font-weight: 700; line-height: 1.15; color: var(--ink); }
h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.25rem; }
.label { font-family: var(--fb); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }

/* ============ LAYOUT ============ */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.container--wide { max-width: 1320px; }
.container--narrow { max-width: 800px; }
.section { padding: 96px 0; }
.section--warm, .section--alt { background: var(--bg-warm); }
.section--dark { background: var(--dark); color: var(--dark-ink); }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .label { color: var(--accent-l); }
.section--dark .section__subtitle { color: var(--dark-ink-2); }
.text-center { text-align: center; }
.section__header { text-align: center; max-width: 560px; margin: 0 auto 64px; }
.section__header h2 { margin-bottom: 12px; }
.section__header p { font-size: 1.1rem; color: var(--ink-2); line-height: 1.7; }
.section__title { font-family: var(--fd); font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 700; margin-bottom: 12px; }
.section__subtitle { font-size: 1.1rem; color: var(--ink-2); line-height: 1.7; }

/* ============ BUTTONS ============ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 32px; font-family: var(--fb); font-size: 13px; font-weight: 700; letter-spacing: .03em; border: 2px solid transparent; border-radius: 9999px; transition: all var(--dur) var(--ease); white-space: nowrap; }
.btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-h); border-color: var(--accent-h); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26,104,71,.2); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--border); }
.btn--outline:hover { border-color: var(--accent); color: var(--accent); }
.btn--ghost { background: transparent; color: var(--ink); border-color: transparent; }
.btn--ghost:hover { color: var(--accent); }
.btn--dark { background: transparent; color: var(--ink); border-color: var(--border); }
.btn--dark:hover { border-color: var(--accent); color: var(--accent); }
.btn--sm { padding: 10px 20px; font-size: 12px; }
.btn--lg { padding: 17px 40px; font-size: 14px; }
.btn--full { width: 100%; }
.section--dark .btn--outline, .section--dark .btn--dark { color: var(--dark-ink); border-color: rgba(255,255,255,.2); }
.section--dark .btn--outline:hover, .section--dark .btn--dark:hover { border-color: #fff; color: #fff; }

/* ============ NAVIGATION ============ */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: all var(--dur); }
.site-header.scrolled { background: rgba(250,249,246,.95); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); }
.nav { height: var(--nav-h); display: flex; align-items: center; }
.nav__container, .nav__inner { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.nav__logo { font-family: var(--fd); font-size: 24px; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.nav__logo-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: var(--accent); color: #fff; border-radius: 8px; font-size: 16px; font-weight: 800; font-family: var(--fb); }
.nav__logo-text { font-family: var(--fd); font-size: 22px; font-weight: 700; }
.nav__menu, .nav__links { display: flex; gap: 28px; list-style: none; align-items: center; }
.nav__link { font-size: 13px; font-weight: 600; color: var(--ink-2); letter-spacing: .02em; position: relative; }
.nav__link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--accent); border-radius: 9999px; transition: width var(--dur); }
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { width: 100%; }
.nav__link--ghost { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.nav__actions { display: flex; align-items: center; gap: 12px; }
.nav__lang-toggle { font-size: 12px; font-weight: 700; color: var(--ink-3); padding: 6px 10px; border-radius: 8px; }
.nav__lang-toggle:hover { background: var(--bg-warm); color: var(--ink); }
.nav__hamburger { display: none; background: none; border: none; padding: 6px; }
.nav__hamburger span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 1px; }
.nav__user-menu { position: relative; }
.nav__user-btn { display: flex; align-items: center; gap: 8px; background: none; border: none; padding: 6px; font-family: var(--fb); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.nav__avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-l); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.nav__user-name { font-size: 13px; }
.nav__chevron { width: 14px; height: 14px; }
.nav__dropdown { position: absolute; right: 0; top: calc(100% + 8px); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 6px; min-width: 200px; display: none; box-shadow: 0 8px 32px rgba(0,0,0,.08); }
.nav__dropdown.is-open { display: block; }
.nav__dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); transition: all var(--dur); }
.nav__dropdown-item:hover { background: var(--bg-warm); color: var(--ink); }
.nav__dropdown-item--danger:hover { background: #fef2f2; color: var(--error); }
.nav__dropdown-divider { border: none; border-top: 1px solid var(--border); margin: 4px 0; }
.nav__mobile-overlay { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(28,25,23,.5); backdrop-filter: blur(8px); }
.nav__mobile-overlay.is-open { display: flex; }
.nav__mobile-menu { background: var(--surface); width: 300px; max-width: 85vw; margin-left: auto; padding: 32px 24px; display: flex; flex-direction: column; gap: 12px; height: 100%; overflow-y: auto; }
.nav__mobile-link { font-size: 16px; font-weight: 600; color: var(--ink); padding: 12px 0; border-bottom: 1px solid var(--border); }

/* ============ FLASH MESSAGES ============ */
.flash { display: flex; align-items: center; gap: 12px; max-width: var(--max-w); margin: 16px auto; padding: 14px 24px; border-radius: 12px; font-size: .875rem; font-weight: 500; }
.flash--success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.flash--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.flash__close { margin-left: auto; background: none; border: none; font-size: 18px; color: inherit; opacity: .5; }

/* ============ HERO ============ */
.hero { min-height: 92vh; display: flex; align-items: center; padding: calc(var(--nav-h) + 48px) 0 64px; background: var(--bg); position: relative; overflow: hidden; }
.hero__glow { position: absolute; top: -20%; right: -10%; width: 700px; height: 700px; background: radial-gradient(circle, var(--accent) 0%, transparent 70%); opacity: .04; border-radius: 50%; pointer-events: none; }
.hero__glow-2 { position: absolute; bottom: -15%; left: -5%; width: 500px; height: 500px; background: radial-gradient(circle, #d97706 0%, transparent 70%); opacity: .03; border-radius: 50%; pointer-events: none; }
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.hero__content { position: relative; z-index: 1; }
.hero__badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 9999px; background: var(--accent-l); color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .04em; margin-bottom: 24px; animation: fadeUp .7s var(--ease) both; }
.hero__badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }
.hero__title { font-weight: 800; color: var(--ink); line-height: 1.08; letter-spacing: -.02em; margin-bottom: 20px; animation: fadeUp .7s .08s var(--ease) both; }
.hero__title em, .hero__title span { color: var(--accent); font-style: normal; font-weight: 700; }
.hero__desc, .hero__subtitle { font-size: 1.1rem; color: var(--ink-2); max-width: 440px; line-height: 1.75; margin-bottom: 32px; animation: fadeUp .7s .16s var(--ease) both; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; animation: fadeUp .7s .24s var(--ease) both; }
.hero__visual { position: relative; z-index: 1; animation: fadeUp .8s .2s var(--ease) both; }
.hero__browser { background: var(--surface); border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,.10); overflow: hidden; border: 1px solid var(--border); transform: perspective(1200px) rotateY(-6deg) rotateX(2deg); transition: transform .5s var(--ease); }
.hero__browser:hover { transform: perspective(1200px) rotateY(-2deg) rotateX(1deg); }
.hero__browser-bar { height: 36px; background: var(--bg-warm); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.hero__browser-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.hero__browser-url { flex: 1; height: 20px; background: var(--surface); border-radius: 6px; margin-left: 8px; }
.hero__browser-content { aspect-ratio: 16/10; position: relative; overflow: hidden; background: var(--bg-muted); }
.hero__browser-content iframe { width: 1440px; height: 900px; border: none; transform-origin: top left; transform: scale(.347); pointer-events: none; position: absolute; top: 0; left: 0; }
.hero__stats { display: flex; gap: 40px; margin-top: 48px; animation: fadeUp .7s .32s var(--ease) both; }
.hero__stat-num, .hero__stat-number { font-family: var(--fd); font-size: 1.5rem; font-weight: 800; color: var(--ink); }
.hero__stat-label { font-size: .75rem; color: var(--ink-3); margin-top: 2px; }
@keyframes fadeUp { from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:translateY(0);} }

/* ============ TRUST BAR ============ */
.trust-bar { padding: 20px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.trust-bar__inner { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.trust-bar__item { display: flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 600; color: var(--ink-2); }
.trust-bar__item i { width: 16px; height: 16px; color: var(--accent); }

/* ============ CATALOG ============ */
.catalog__search { max-width: 480px; margin: 0 auto 32px; position: relative; }
.catalog__search-icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.catalog__search-input { width: 100%; padding: 14px 20px 14px 48px; background: var(--surface); border: 1px solid var(--border); border-radius: 9999px; font-family: var(--fb); font-size: .875rem; color: var(--ink); outline: none; transition: border-color var(--dur); }
.catalog__search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.catalog__search-input::placeholder { color: var(--ink-3); }
.catalog__filters { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; }
.catalog__filter-btn, .filter-pill { padding: 8px 16px; border-radius: 9999px; font-size: 13px; font-weight: 600; color: var(--ink-2); background: transparent; border: 1px solid var(--border); transition: all var(--dur); cursor: pointer; }
.catalog__filter-btn:hover, .filter-pill:hover { border-color: var(--accent); color: var(--accent); }
.catalog__filter-btn.is-active, .filter-pill.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ============ TEMPLATE CARDS ============ */
.templates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 24px; }
.template-card { background: var(--surface); border-radius: 16px; overflow: hidden; border: 1px solid var(--border); transition: all var(--dur) var(--ease); box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.template-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.10); transform: translateY(-4px); }
.template-card__preview { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--bg-muted); }
.template-card__iframe { width: 1280px; height: 800px; border: none; pointer-events: none; transform-origin: top left; transform: scale(0.27); position: absolute; top: 0; left: 0; }
.template-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: .875rem; font-weight: 600; }
.template-card__overlay { position: absolute; inset: 0; background: rgba(28,25,23,.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; gap: 12px; opacity: 0; transition: opacity var(--dur); }
.template-card:hover .template-card__overlay { opacity: 1; }
.template-card__overlay .btn { color: #fff; border-color: rgba(255,255,255,.4); }
.template-card__overlay .btn:hover { background: #fff; color: var(--ink); border-color: #fff; }
.template-card__overlay .btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.template-card__badge { position: absolute; top: 12px; left: 12px; padding: 4px 12px; font-size: 11px; font-weight: 700; font-family: var(--fb); letter-spacing: .04em; text-transform: uppercase; border-radius: 6px; z-index: 1; }
.template-card__badge--popular { background: var(--accent); color: #fff; }
.template-card__badge--new { background: var(--success); color: #fff; }
.template-card__badge--premium { background: linear-gradient(135deg, #d97706, #b45309); color: #fff; }
.template-card__info { padding: 20px; }
.template-card__title { font-family: var(--fd); font-size: 1.125rem; font-weight: 700; margin-bottom: 2px; }
.template-card__category { font-size: .875rem; color: var(--ink-3); margin-bottom: 12px; }
.template-card__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; }
.template-card__tag, .tag { padding: 3px 10px; font-size: 11px; font-weight: 600; background: var(--bg-warm); color: var(--ink-2); border-radius: 9999px; border: 1px solid var(--border); }
.template-card__footer { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--border); }
.template-card__price { font-size: .875rem; color: var(--ink-2); }
.template-card__price strong { font-family: var(--fd); font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.template-card__rating { font-size: .875rem; color: var(--ink-3); font-weight: 600; }
.template-card__rating span { color: var(--warning); }

/* ============ HOW IT WORKS ============ */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.step-card { text-align: center; padding: 32px 20px; counter-increment: step; }
.step-card::before { content: counter(step); display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 auto 20px; font-family: var(--fd); font-size: 1.25rem; font-weight: 700; color: var(--accent); background: var(--accent-l); border-radius: 50%; }
.step-card h3, .step-card__title { font-size: 1.125rem; margin-bottom: 8px; }
.step-card p, .step-card__desc { font-size: .875rem; color: var(--ink-2); line-height: 1.7; }
.step-card__number { display: none; }

/* ============ PRICING ============ */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 960px; margin: 0 auto; }
.pricing-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 32px; position: relative; transition: all var(--dur); }
.pricing-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.08); }
.pricing-card--featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); transform: scale(1.02); }
.pricing-card--featured:hover { transform: scale(1.03); }
.pricing-card__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 4px 16px; font-size: 11px; font-weight: 700; background: var(--accent); color: #fff; border-radius: 9999px; letter-spacing: .04em; white-space: nowrap; }
.pricing-card__name { font-family: var(--fd); font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; }
.pricing-card__price { font-family: var(--fd); font-size: 1.875rem; font-weight: 800; color: var(--ink); }
.pricing-card__price-suffix { font-family: var(--fb); font-size: .875rem; font-weight: 400; color: var(--ink-3); }
.pricing-card__vat { font-size: .75rem; color: var(--ink-3); margin-bottom: 24px; }
.pricing-card__features { list-style: none; margin-bottom: 24px; }
.pricing-card__features li { font-size: .875rem; color: var(--ink-2); padding: 8px 0 8px 24px; border-bottom: 1px solid var(--border); position: relative; }
.pricing-card__features li::before { content: ''; position: absolute; left: 0; top: 12px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%231A6847' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / 10px; }

/* ============ WIZARD / KREATOR ============ */
.wizard { padding-top: calc(var(--nav-h) + 24px); padding-bottom: 64px; }
.wizard__container { max-width: 860px; margin: 0 auto; padding: 0 24px; }
.wizard__nav, .wizard__progress { display: flex; justify-content: center; gap: 8px; margin-bottom: 40px; padding: 0; list-style: none; }
.wizard__step, .wizard__step-indicator { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; max-width: 160px; opacity: .4; transition: opacity var(--dur); }
.wizard__step.active, .wizard__step-indicator.active { opacity: 1; }
.wizard__step-num { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-muted); display: flex; align-items: center; justify-content: center; font-size: .875rem; font-weight: 700; color: var(--ink-2); }
.wizard__step.active .wizard__step-num { background: var(--accent); color: #fff; }
.wizard__step-label, .wizard__step-title { font-size: .75rem; font-weight: 600; color: var(--ink-2); text-align: center; }

/* Forms */
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: .875rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.form-input, .form-textarea, .form-select,
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"],
select, textarea {
    width: 100%; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; font-family: var(--fb); font-size: .875rem; color: var(--ink);
    outline: none; transition: border-color var(--dur);
}
.form-input:focus, .form-textarea:focus, input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.form-input::placeholder, input::placeholder, textarea::placeholder { color: var(--ink-3); }
.form-textarea, textarea { min-height: 120px; resize: vertical; }
.form-hint { font-size: .75rem; color: var(--ink-3); margin-top: 4px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-select, select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A8A29E' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }

/* Upload zones */
.upload-zone { border: 2px dashed var(--border); border-radius: 12px; padding: 32px; text-align: center; cursor: pointer; transition: all var(--dur); background: var(--bg-warm); }
.upload-zone:hover { border-color: var(--accent); background: var(--accent-l); }
.upload-zone__icon { font-size: 32px; margin-bottom: 8px; color: var(--ink-3); }
.upload-zone__text { font-size: .875rem; color: var(--ink-2); font-weight: 600; }
.upload-zone__hint { font-size: .75rem; color: var(--ink-3); margin-top: 4px; }
.upload-preview { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.upload-preview img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }

/* Palette & font pickers */
.palette-grid, .font-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }
.palette-option, .font-option { border: 2px solid var(--border); border-radius: 12px; padding: 16px; cursor: pointer; transition: all var(--dur); }
.palette-option:hover, .font-option:hover { border-color: var(--accent); }
.palette-option.is-selected, .font-option.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }
.palette-option__name, .font-option__label { font-size: .875rem; font-weight: 600; margin-bottom: 8px; }
.palette-option__colors { display: flex; gap: 4px; }
.palette-option__color { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); }
.font-option__heading { font-size: 1.125rem; font-weight: 700; margin-bottom: 4px; }
.font-option__body { font-size: .875rem; color: var(--ink-2); }

/* Section toggles */
.sections-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.section-toggle { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: all var(--dur); }
.section-toggle:hover { border-color: var(--accent); }
.section-toggle__check { width: 20px; height: 20px; border: 2px solid var(--border); border-radius: 4px; transition: all var(--dur); flex-shrink: 0; }
.section-toggle__check.checked { background: var(--accent); border-color: var(--accent); }
.section-toggle__label { font-size: .875rem; font-weight: 600; }

/* Summary table */
.summary-table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.summary-table td { padding: 10px 0; font-size: .875rem; border-bottom: 1px solid var(--border); }
.summary-table td:last-child { text-align: right; font-weight: 600; }
.summary-total { font-family: var(--fd); font-size: 1.5rem; font-weight: 700; text-align: right; margin-top: 16px; }

/* ============ AUTH PAGES ============ */
.auth-card { max-width: 420px; margin: calc(var(--nav-h) + 48px) auto 48px; padding: 40px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,.04); }
.auth-card__title { font-family: var(--fd); font-size: 1.75rem; font-weight: 700; margin-bottom: 6px; text-align: center; }
.auth-card__subtitle { font-size: .875rem; color: var(--ink-2); text-align: center; margin-bottom: 28px; }
.auth-card__footer { text-align: center; margin-top: 20px; font-size: .875rem; color: var(--ink-2); }
.auth-card__errors { margin-bottom: 16px; }
.auth-card__error { padding: 10px 14px; background: #fef2f2; color: var(--error); border-radius: 8px; font-size: .875rem; margin-bottom: 8px; }

/* ============ ACCOUNT PAGE ============ */
.account-page { padding-top: calc(var(--nav-h) + 24px); padding-bottom: 48px; min-height: 80vh; }
.account-container { max-width: 800px; margin: 0 auto; padding: 0 24px; }
.account-header { margin-bottom: 32px; }
.account-header__title { font-family: var(--fd); font-size: 2rem; font-weight: 700; margin-bottom: 4px; }
.account-header__email { font-size: .875rem; color: var(--ink-2); }
.account-tabs { display: flex; gap: 8px; margin-bottom: 32px; border-bottom: 1px solid var(--border); }
.account-tab { padding: 10px 16px; font-size: .875rem; font-weight: 600; color: var(--ink-2); border-bottom: 2px solid transparent; transition: all var(--dur); }
.account-tab:hover { color: var(--ink); }
.account-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Order table */
.order-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }

/* ============ TEMPLATE DETAIL (szablon.php) ============ */
.template-detail { padding-top: calc(var(--nav-h) + 32px); padding-bottom: 64px; }
.template-detail__hero { display: grid; grid-template-columns: 3fr 2fr; gap: 48px; padding: 0 24px; max-width: var(--max-w); margin: 0 auto; }
.template-detail__preview { position: relative; border-radius: 16px; overflow: hidden; background: var(--bg-muted); border: 1px solid var(--border); aspect-ratio: 16/10; }
.template-detail__iframe { width: 1440px; height: 900px; border: none; pointer-events: none; transform-origin: top left; transform: scale(0.45); position: absolute; top: 0; left: 0; }
.template-detail__preview-actions { position: absolute; bottom: 16px; left: 16px; display: flex; gap: 12px; }
.template-detail__meta { position: sticky; top: calc(var(--nav-h) + 24px); }
.template-detail__badge-row { display: flex; gap: 8px; margin-bottom: 16px; }
.template-detail__name { font-family: var(--fd); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; margin-bottom: 8px; }
.template-detail__category { font-size: 1rem; color: var(--ink-2); margin-bottom: 24px; }
.template-detail__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.template-detail__desc { font-size: 1rem; color: var(--ink-2); line-height: 1.7; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.template-detail__plans { margin-bottom: 24px; }

/* Plan selector */
.plan-option { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border: 2px solid var(--border); border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: all var(--dur); }
.plan-option:hover { border-color: var(--accent); }
.plan-option.is-selected { border-color: var(--accent); background: var(--accent-l); }
.plan-option__name { font-weight: 700; font-size: .875rem; }
.plan-option__price { font-family: var(--fd); font-weight: 700; color: var(--accent); }

/* ============ ADMIN ============ */
.admin { padding-top: calc(var(--nav-h) + 24px); padding-bottom: 48px; }
.admin__header { margin-bottom: 32px; }
.admin__title { font-family: var(--fd); font-size: 2rem; font-weight: 700; }
.admin__subtitle { font-size: 1rem; color: var(--ink-2); }
.admin__main { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.admin-card, .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; }
.stat-card__value { font-family: var(--fd); font-size: 2rem; font-weight: 700; color: var(--accent); }
.stat-card__label { font-size: .875rem; color: var(--ink-2); margin-top: 4px; }

/* ============ PAYMENT PAGE ============ */
.payment-methods { max-width: 500px; margin: 0 auto; }
.payment-method { display: flex; align-items: center; gap: 16px; padding: 20px; border: 2px solid var(--border); border-radius: 12px; margin-bottom: 12px; cursor: pointer; transition: all var(--dur); }
.payment-method:hover { border-color: var(--accent); }
.payment-method.is-selected { border-color: var(--accent); background: var(--accent-l); }

/* ============ REVEAL ============ */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============ FOOTER ============ */
.site-footer { background: var(--dark); color: var(--dark-ink-2); padding: 64px 0 32px; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer__logo { font-family: var(--fd); font-size: 22px; font-weight: 700; color: var(--dark-ink); display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.footer__logo .nav__logo-mark { width: 28px; height: 28px; font-size: 15px; }
.footer__desc { font-size: .875rem; color: var(--dark-ink-2); line-height: 1.7; max-width: 280px; margin-bottom: 16px; }
.footer__email { font-size: .875rem; color: var(--accent-l); }
.footer__heading, .footer__col h4 { font-family: var(--fb); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dark-ink); margin-bottom: 16px; }
.footer__links { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer__links a, .footer__links li a { font-size: .875rem; color: var(--dark-ink-2); }
.footer__links a:hover { color: var(--dark-ink); }
.footer__text { font-size: .875rem; color: var(--dark-ink-2); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--dark-brd); font-size: .75rem; color: var(--dark-ink-2); }
.footer__lang { display: flex; gap: 12px; }
.footer__lang a { color: var(--dark-ink-2); font-weight: 600; }
.footer__lang a.active { color: var(--dark-ink); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
    .hero__grid { grid-template-columns: 1fr; gap: 40px; }
    .hero__visual { order: -1; max-width: 500px; margin: 0 auto; }
    .hero__browser { transform: none; }
    .hero__browser:hover { transform: none; }
    .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .template-detail__hero { grid-template-columns: 1fr; }
    .template-detail__iframe { transform: scale(0.35); }
}
@media (max-width: 768px) {
    .nav__menu, .nav__links, .nav__link--ghost { display: none; }
    .nav__hamburger { display: block; }
    .nav__user-name { display: none; }
    .hero { min-height: auto; padding-top: calc(var(--nav-h) + 32px); }
    .hero__stats { gap: 24px; }
    .templates-grid { grid-template-columns: 1fr; }
    .steps-grid { grid-template-columns: 1fr 1fr; }
    .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
    .pricing-card--featured { transform: none; }
    .footer__grid { grid-template-columns: 1fr; gap: 32px; }
    .catalog__filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 12px; -webkit-overflow-scrolling: touch; }
    .catalog__filter-btn, .filter-pill { white-space: nowrap; flex-shrink: 0; }
    .form-row { grid-template-columns: 1fr; }
    .auth-card { margin: calc(var(--nav-h) + 16px) 16px 16px; padding: 28px; }
    .template-detail__iframe { transform: scale(0.28); }
}
@media (max-width: 480px) {
    .steps-grid { grid-template-columns: 1fr; }
    .hero__stats { flex-direction: column; gap: 16px; }
    .hero__actions { flex-direction: column; }
    .hero__actions .btn { width: 100%; }
}

/* mt utilities */
.mt-12 { margin-top: 48px; }