/* ============================================================
   LearnWithOliver — logged-out / landing stylesheet
   THEME: house style. Inter throughout, soft blue-tinted
   gradient ground, rounded cards, pill buttons, one accent
   blue carrying the emphasis. Clean, modern, unfussy — the
   same visual language as the logged-in app so the landing
   page and the product feel like one thing.
   Drop-in replacement: identical selectors + custom properties.
   Requires in <head>: Font Awesome 6 (icons).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ================= tokens ================= */
:root{
    --cream:#f4f6fb; --cream-2:#f8fafc;
    --ink:#0f172a; --ink-soft:#475569;
    --accent:#2f80ed; --accent-2:#06b6d4;
    --forest:#059669; --teal:#06b6d4;
    --line:#b1c2d7;

    --text:#0f172a; --text-2:#475569; --text-3:#94a3b8;
    --surface:#F7F7F7; --surface-2:#f8fafc; --border:var(--line);
    --accent-soft:#e8f1ff; --accent-text:#1763cc;
    --amber:#d97706; --green:#059669;

    --font:'Inter', system-ui, -apple-system, sans-serif;

    --radius:16px; --radius-sm:10px;
    --shadow:0 1px 3px rgba(15,23,42,.06), 0 8px 24px -8px rgba(15,23,42,.10);
    --shadow-lg:0 4px 12px rgba(15,23,42,.08), 0 20px 40px -12px rgba(15,23,42,.18);
    --transition:.25s cubic-bezier(.4,0,.2,1);
}
html[data-theme="dark"]{
    --cream:#0b1020; --cream-2:#131a2e;
    --ink:#e6eaf4; --ink-soft:#9aa6c3;
    --accent:#5b9bf5; --accent-2:#34d399;
    --forest:#34d399; --teal:#34d399;
    --line:#3f4760;

    --text:#e6eaf4; --text-2:#9aa6c3; --text-3:#5d6a8c;
    --surface:#131a2e; --surface-2:#1a2238; --border:var(--line);
    --accent-soft:rgba(91,155,245,.14); --accent-text:#a8ccf5;
    --amber:#fbbf24; --green:#34d399;

    --shadow:0 1px 3px rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.5);
    --shadow-lg:0 4px 12px rgba(0,0,0,.45), 0 20px 40px -12px rgba(0,0,0,.6);
}

/* ================= base ================= */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
    margin:0;
    font-family:var(--font);
    font-size:16px;
    background:var(--cream);
    background-image:
            radial-gradient(1200px 600px at 80% -10%, #dbeafe 0%, transparent 60%),
            radial-gradient(900px 500px at -10% 30%, #e0e7ff 0%, transparent 55%);
    background-attachment:fixed;
    color:var(--text);
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}
html[data-theme="dark"] body{
    background-image:
            radial-gradient(1200px 600px at 80% -10%, rgba(79,70,229,.18) 0%, transparent 60%),
            radial-gradient(900px 500px at -10% 30%, rgba(16,185,129,.10) 0%, transparent 55%);
}
/* no overlay texture — the gradient ground is the whole effect */
body::before{ content:none; }

h1,h2{ font-weight:800; letter-spacing:-.02em; }
h1,h2,h3,h4,p,ul{ margin:0 0 0.6em; }
a{ color:var(--accent-text); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; }
button{ font-family:inherit; }

/* generic form elements (contact / login / password pages) */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], select, textarea{
    width:100%; padding:11px 14px; border-radius:var(--radius-sm);
    border:1px solid var(--border); background:var(--surface-2); color:var(--text);
    font-family:var(--font); font-size:14px; outline:none;
    transition:border var(--transition);
}
input:focus, select:focus, textarea:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft);
}
input[type="checkbox"], input[type="radio"]{ width:auto; accent-color:var(--accent); }
label{ font-size:13px; font-weight:600; color:var(--text-2); }

/* ================= layout ================= */
.d-container{
    max-width:1100px; margin:0 auto;
    padding:0 20px 28px;
}
.d-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:26px;
    margin:24px 0;
    transition:background var(--transition), border var(--transition);
}

/* ================= buttons ================= */
.d-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:9px 18px; border-radius:999px;
    border:1px solid var(--border);
    background:var(--surface-2); color:var(--text);
    font-family:var(--font); font-size:14px; font-weight:600;
    text-decoration:none; cursor:pointer;
    transition:all var(--transition);
}
.d-btn:hover{ border-color:var(--accent); color:var(--accent-text); text-decoration:none; transform:translateY(-1px); }
.d-btn-sm{ padding:6px 14px; font-size:13px; }
.d-btn-primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.d-btn-primary:hover{ filter:brightness(1.1); background:var(--accent); color:#fff; }
.d-btn-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.d-btn-block{ width:100%; justify-content:center; }

.d-btn-hero{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--accent); color:#fff;
    padding:15px 28px; border-radius:999px;
    text-decoration:none; font-family:var(--font); font-weight:700; font-size:15px;
    border:1px solid var(--accent); cursor:pointer;
    box-shadow:var(--shadow);
    transition:all var(--transition);
}
.d-btn-hero:hover{
    transform:translateY(-2px); filter:brightness(1.1);
    color:#fff; text-decoration:none;
    box-shadow:var(--shadow-lg);
}
.d-btn-hero i{ transition:transform var(--transition); }
.d-btn-hero:hover i{ transform:translateX(4px); }

/* ================= topbar ================= */
.topbar{
    position:sticky; top:0; z-index:500;
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    background:color-mix(in srgb, var(--surface) 78%, transparent);
    border-bottom:1px solid var(--border);
    transition:background var(--transition);
}
.topbar-inner{
    max-width:1100px; margin:0 auto; padding:12px 20px;
    display:flex; align-items:center; gap:14px;
}
.topbar-inner .spacer{ flex:1; }

.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); }
.brand:hover{ text-decoration:none; }
.brand .logo{
    width:38px; height:38px; flex-shrink:0; border-radius:12px;
    background:linear-gradient(135deg, var(--accent), #06b6d4);
    display:grid; place-items:center; overflow:hidden;
    box-shadow:var(--shadow);
}
.brand .logo img{ width:30px; height:auto; display:block; }
.brand .logo .logo-dark{ display:none; }
html[data-theme="dark"] .brand .logo .logo-light{ display:none; }
html[data-theme="dark"] .brand .logo .logo-dark{ display:block; }
.brand-name{ font-weight:800; font-size:17px; letter-spacing:-.01em; color:var(--text); }
.brand-name em{ font-style:normal; font-weight:600; color:var(--accent-text); }

.d-nav{ display:none; gap:4px; align-items:center; }
@media (min-width:880px){ .d-nav{ display:flex; } }

.d-nav-link{
    padding:8px 14px; border-radius:999px;
    font-family:var(--font); font-size:14px; font-weight:600;
    color:var(--text-2); text-decoration:none;
    transition:all var(--transition);
}
.d-nav-link:hover{ color:var(--accent-text); background:var(--accent-soft); text-decoration:none; }
.d-nav-link.d-nav-active{ color:var(--accent-text); background:var(--accent-soft); }
.topbar .d-btn.d-nav-active{ border-color:var(--accent); }

.menu-switch{
    display:grid; place-items:center; gap:5px;
    width:44px; height:44px; border-radius:12px;
    border:1px solid var(--border);
    background:var(--surface);
    padding:11px; cursor:pointer;
    transition:all var(--transition);
}
.menu-switch:hover{ border-color:var(--accent); transform:translateY(-1px); }
.menu-switch span{ display:block; width:19px; height:2px; background:var(--text); border-radius:2px; }
@media (min-width:880px){ .menu-switch{ display:none; } }

.d-nav-mobile{
    display:none; flex-direction:column; gap:4px;
    padding:12px 20px 16px;
    border-top:1px solid var(--border);
    background:var(--surface);
}
body.nav-active .d-nav-mobile{ display:flex; }
.d-nav-mobile .d-nav-link{ text-align:left; padding:12px 14px; font-size:16px; }

@media (max-width:879px){
    .topbar-inner > .d-btn{ display:none; }
}

/* ================= theme toggle ================= */
.d-theme-btn{
    position:fixed; right:24px; bottom:24px; z-index:600;
    width:48px; height:48px; border-radius:50%;
    border:1px solid var(--border);
    background:var(--surface); color:var(--text);
    font-size:20px; cursor:pointer;
    display:grid; place-items:center;
    box-shadow:var(--shadow-lg);
    transition:all var(--transition);
}
.d-theme-btn:hover{ transform:translateY(-2px); border-color:var(--accent); }

/* ================= index hero ================= */
.d-hero{
    position:relative; overflow:hidden;
    margin:0 calc(50% - 50vw);
    padding:76px 32px 60px;
    border-bottom:1px solid var(--border);
}
.d-hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.d-blob{
    position:absolute; border-radius:50%;
    filter:blur(80px); opacity:.45;
    animation:d-float 20s ease-in-out infinite;
}
.d-blob-1{ width:500px; height:500px; background:#dbeafe; top:-120px; right:-80px; }
.d-blob-2{ width:380px; height:380px; background:#e0e7ff; bottom:-130px; left:-80px; animation-delay:-7s; }
.d-blob-3{ width:300px; height:300px; background:#cffafe; top:40%; left:36%; animation-delay:-14s; opacity:.3; }
html[data-theme="dark"] .d-blob-1{ background:rgba(79,70,229,.5); opacity:.28; }
html[data-theme="dark"] .d-blob-2{ background:rgba(16,185,129,.4); opacity:.22; }
html[data-theme="dark"] .d-blob-3{ background:rgba(91,155,245,.4); opacity:.16; }
@keyframes d-float{
    0%,100%{ transform:translate(0,0) scale(1) }
    33%{ transform:translate(26px,-24px) scale(1.07) }
    66%{ transform:translate(-18px,18px) scale(.96) }
}
.d-hero-inner{
    max-width:1100px; margin:0 auto; position:relative; z-index:2;
    display:grid; grid-template-columns:1.6fr 1fr; gap:48px; align-items:center;
}

/* per-language photo, softened behind the gradient wash */
.d-hero-photo::before{
    content:""; position:absolute; inset:0; z-index:0;
    background:var(--hero-photo) no-repeat center; background-size:cover;
    opacity:.22;
}
.d-hero-photo::after{
    content:""; position:absolute; inset:0; z-index:0;
    background:linear-gradient(180deg, color-mix(in srgb, var(--cream) 70%, transparent), var(--cream) 94%);
}
html[data-theme="dark"] .d-hero-photo::before{ opacity:.14; }

.d-eyebrow{
    display:inline-flex; align-items:center; gap:9px;
    font-family:var(--font);
    font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    color:var(--accent-text);
    background:var(--accent-soft);
    border:none;
    padding:5px 14px; border-radius:999px;
    margin-bottom:24px;
}
.d-eyebrow .dot{
    width:6px; height:6px; border-radius:999px; background:var(--accent);
    animation:d-pulse 2.4s ease-in-out infinite;
}
@keyframes d-pulse{ 50%{ opacity:.4 } }

.d-hero-title{
    font-family:var(--font);
    font-size:clamp(38px,5.4vw,62px);
    line-height:1.1; letter-spacing:-.035em; font-weight:800;
    color:var(--text); margin-bottom:20px;
}
.d-hero-title .ital{
    font-style:normal; font-weight:800;
    color:var(--accent);
    background:none; -webkit-text-fill-color:currentColor;
}
.d-hero-lead{
    font-size:18px; line-height:1.6; color:var(--text-2);
    max-width:560px; margin-bottom:32px;
}

/* one-line feature list (main-site hero) */
.d-hero-feats{ display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; margin-bottom:34px; }
.d-hf{
    display:flex; align-items:center; gap:11px;
    font-size:14.5px; color:var(--text-2); font-weight:500;
}
.d-hf-icon{
    flex-shrink:0; width:26px; height:26px; border-radius:8px;
    display:grid; place-items:center; font-size:11px; color:#fff;
    background:var(--accent);
}
.d-hf:nth-child(even) .d-hf-icon{ background:var(--green); }

/* pitch list with titles (per-language hero) */
.d-pitch{ list-style:none; display:flex; flex-direction:column; gap:16px; margin:0 0 32px; padding:0; }
.d-pitch li{ display:flex; gap:14px; align-items:flex-start; }
.d-pitch-icon{
    flex-shrink:0; width:38px; height:38px; border-radius:var(--radius-sm);
    display:grid; place-items:center;
    background:var(--accent-soft); color:var(--accent-text); font-size:15px;
}
.d-pitch-title{ font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--text); margin-bottom:3px; }
.d-pitch-copy{ font-size:14.5px; color:var(--text-2); line-height:1.55; }
.d-pitch-copy a{ color:var(--accent-text); }

.d-hero-cta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:26px; }

.d-hero-trust{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--text-2); }
.d-hero-trust .stars{ color:var(--amber); font-size:14px; letter-spacing:2px; }
.d-hero-trust b{ color:var(--text); font-weight:700; font-variant-numeric:tabular-nums; }
.d-hero-trust a{ color:var(--text-2); text-decoration:underline; text-underline-offset:3px; }

/* ================= panel (language grid / signup form) ================= */
.d-lang-panel{
    position:relative;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius); padding:26px;
    box-shadow:var(--shadow-lg);
}
.d-lang-panel-label{
    font-size:13px; font-weight:700; text-transform:uppercase;
    letter-spacing:.1em; color:var(--text-3);
    margin-bottom:16px; display:flex; align-items:center; gap:10px;
}
.d-lang-panel-label::after{ content:""; flex:1; height:1px; background:var(--border); }
.d-lang-panel-label::before{ content:none; }

.d-langs{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.d-lang-card{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:7px; padding:16px 8px; border-radius:var(--radius-sm);
    text-decoration:none; color:var(--text);
    background:var(--surface-2);
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    transition:all var(--transition);
    position:relative; overflow:hidden;
}
.d-lang-card::before{ content:none; }
.d-lang-card:hover{
    transform:translateY(-3px); color:var(--accent-text); text-decoration:none;
    border-color:var(--accent); box-shadow:var(--shadow-lg);
}
.d-lang-flag{ font-size:23px; transition:transform var(--transition); }
.d-lang-card:hover .d-lang-flag{ transform:scale(1.12); }
.d-lang-name{ font-size:12.5px; font-weight:600; }
.d-lang-card-more{ background:var(--accent-soft); border-color:var(--accent-soft); color:var(--accent-text); font-weight:700; }
.d-lang-card-more:hover{ border-color:var(--accent); }
.d-lang-panel-foot{
    margin-top:18px; padding-top:16px; border-top:1px solid var(--border);
    display:flex; justify-content:space-between; align-items:center;
    font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
    color:var(--text-3);
}
.d-lang-panel-foot b{ color:var(--accent-text); font-weight:700; font-variant-numeric:tabular-nums; }

/* signup / login form inside the panel */
.d-signup-panel label{ display:block; margin-bottom:14px; font-size:13px; font-weight:600; color:var(--text-2); }
.d-signup-panel label span{ display:block; margin-bottom:5px; }
.d-signup-panel .d-btn-hero{ margin-top:6px; }
.d-signup-panel .d-form-sub{ margin-bottom:16px; }

/* ================= marquee ================= */
.d-marquee{
    margin:0 calc(50% - 50vw);
    background:var(--surface); color:var(--text-2);
    padding:14px 0; overflow:hidden;
    border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.d-marquee-track{
    display:flex; gap:56px; white-space:nowrap;
    animation:d-scroll 46s linear infinite;
    font-family:var(--font); font-size:14px; font-weight:600;
}
.d-marquee-track span{ display:inline-flex; align-items:center; gap:16px; }
.d-marquee-track em{ font-style:normal; font-weight:700; color:var(--accent-text); }
.d-marquee-track i{ color:var(--text-3); font-size:9px; font-style:normal; }
@keyframes d-scroll{ to{ transform:translateX(-50%) } }

/* ================= section heads ================= */
.d-section-head{
    display:flex; justify-content:space-between; align-items:flex-end; gap:44px;
    margin:72px 0 36px; flex-wrap:wrap;
}
.d-section-head h2{
    font-family:var(--font);
    font-size:clamp(28px,3.6vw,42px);
    font-weight:800; line-height:1.15; letter-spacing:-.03em;
    max-width:660px; margin:0;
}
.d-section-head h2 em{ font-style:normal; color:var(--accent); }
.d-section-head p{
    max-width:330px; color:var(--text-2); font-size:15px; margin:0; line-height:1.6;
}

/* ================= bento feature cards ================= */
.d-fc-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px; margin-bottom:20px; }
.d-fc{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius); padding:26px;
    position:relative; overflow:hidden;
    box-shadow:var(--shadow);
    transition:all var(--transition);
}
.d-fc:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--accent); }
.d-fc-1{ grid-column:span 5; background:linear-gradient(135deg, var(--accent), #06b6d4); border-color:transparent; color:#fff; }
.d-fc-2{ grid-column:span 4; }
.d-fc-3{ grid-column:span 3; }
.d-fc-4{ grid-column:span 4; }
.d-fc-5{ grid-column:span 4; background:var(--accent-soft); border-color:transparent; }
.d-fc-6{ grid-column:span 4; }
.d-fc-1:hover, .d-fc-5:hover{ border-color:transparent; }
.d-fc-num{
    font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
    color:var(--text-3); opacity:1; margin-bottom:14px;
    font-variant-numeric:tabular-nums;
}
.d-fc-1 .d-fc-num{ color:rgba(255,255,255,.75); }
.d-fc-icon{
    width:46px; height:46px; border-radius:12px;
    display:grid; place-items:center; font-size:19px;
    background:var(--accent-soft); color:var(--accent-text);
    margin-bottom:16px;
}
.d-fc-1 .d-fc-icon{ background:rgba(255,255,255,.18); color:#fff; }
.d-fc-5 .d-fc-icon{ background:#fff; color:var(--accent-text); }
html[data-theme="dark"] .d-fc-5 .d-fc-icon{ background:var(--surface); }
.d-fc h3{
    font-size:20px; font-weight:700; letter-spacing:-.015em;
    line-height:1.3; margin-bottom:9px;
}
.d-fc p{ font-size:14.5px; color:var(--text-2); line-height:1.55; margin-bottom:0; }
.d-fc-1 p{ color:rgba(255,255,255,.9); }
.d-fc img{
    width:100%; height:auto; border-radius:var(--radius-sm);
    border:1px solid var(--border); margin-bottom:16px; display:block;
}
.d-fc-1 img{ border-color:rgba(255,255,255,.2); }
.d-fc a{ color:var(--accent-text); }
.d-fc-1 a{ color:#fff; }
.d-fc p a{ text-decoration:underline; text-underline-offset:2px; }
.d-fc-deco{
    position:absolute; right:-10px; bottom:-40px;
    font-family:var(--font); font-size:140px; font-weight:800;
    color:var(--accent);
    opacity:.05; line-height:1; pointer-events:none;
}
.d-fc-1 .d-fc-deco{ color:#fff; opacity:.12; }

/* ================= process steps ================= */
.d-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; margin-bottom:30px; }
.d-steps::before{
    content:""; position:absolute; top:29px; left:6%; right:6%; height:1px;
    background:var(--border);
}
.d-step{ position:relative; }
.d-step-num{
    width:58px; height:58px; border-radius:50%;
    background:var(--surface); border:1px solid var(--border);
    display:grid; place-items:center;
    font-size:20px; font-weight:800; color:var(--accent-text);
    box-shadow:var(--shadow);
    margin-bottom:16px; position:relative; z-index:1;
    font-variant-numeric:tabular-nums;
    transition:all var(--transition);
}
.d-step:hover .d-step-num{
    background:var(--accent); color:#fff; border-color:var(--accent);
    transform:translateY(-2px); box-shadow:var(--shadow-lg);
}
.d-step h4{ font-size:16px; font-weight:700; letter-spacing:-.01em; margin-bottom:7px; }
.d-step p{ font-size:14px; color:var(--text-2); line-height:1.55; }

/* ================= about / stats row ================= */
.d-about{ display:grid; gap:28px; grid-template-columns:1fr; align-items:center; margin-top:72px; }
.d-card > .d-about:first-child{ margin-top:0; padding-top:0; border-top:0; }
.d-card > .d-card:only-child{ margin:0; padding:0; background:none; border:0; box-shadow:none; }

@media (min-width:720px){ .d-about{ grid-template-columns:1fr auto; } }
.d-about-copy{
    font-size:clamp(20px,2.6vw,28px); font-weight:600;
    line-height:1.4; letter-spacing:-.02em; max-width:640px;
    color:var(--text-2);
}
.d-about-copy strong{ color:var(--text); font-weight:800; }
.d-about-note{
    font-size:12px; color:var(--text-3); margin-top:18px; font-weight:600;
    text-transform:uppercase; letter-spacing:.06em;
    display:flex; align-items:center; gap:10px;
}
.d-about-note img{ height:24px; }
.d-about-video{ display:grid; place-items:center; }

/* ================= final CTA band ================= */
.d-cta-final{
    background:linear-gradient(135deg, var(--accent), #06b6d4);
    border-radius:var(--radius); padding:52px 44px;
    color:#fff; position:relative; overflow:hidden;
    box-shadow:var(--shadow-lg);
    display:flex; justify-content:space-between; align-items:center; gap:44px; flex-wrap:wrap;
    margin:72px 0 24px;
}
.d-cta-final::before{
    content:""; position:absolute; top:-45%; right:-8%; width:540px; height:540px;
    background:radial-gradient(circle, rgba(255,255,255,.18), transparent 62%);
    pointer-events:none;
}
.d-cta-final h2{
    font-size:clamp(26px,3.4vw,40px);
    font-weight:800; line-height:1.15; letter-spacing:-.03em;
    max-width:620px; position:relative; z-index:1; margin:0; color:#fff;
}
.d-cta-final h2 em{ font-style:normal; color:rgba(255,255,255,.72); }
.d-cta-final p{
    position:relative; z-index:1; font-size:16px;
    color:rgba(255,255,255,.9); margin:12px 0 0; max-width:560px; line-height:1.55;
}
.d-cta-final-btn{
    background:#fff; color:var(--accent-text);
    border:1px solid #fff;
    padding:15px 32px; border-radius:999px; text-decoration:none;
    font-family:var(--font); font-weight:700; font-size:15px;
    display:inline-flex; gap:10px; align-items:center;
    box-shadow:var(--shadow);
    transition:all var(--transition);
    position:relative; z-index:1;
}
.d-cta-final-btn:hover{
    transform:translateY(-2px); text-decoration:none; color:var(--accent-text);
    box-shadow:var(--shadow-lg);
}

/* ================= reveal on scroll ================= */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    .d-blob, .d-marquee-track, .d-eyebrow .dot{ animation:none; }
}

/* ================= other logged-out pages (forms etc.) ================= */
.d-landing-hero{ text-align:center; padding:48px 26px; }
.d-hero-bird{ display:block; margin-bottom:16px; }
.d-hero-bird img{ width:92px; height:auto; display:inline-block; }
.d-hero-bird .logo-dark{ display:none; }
html[data-theme="dark"] .d-hero-bird .logo-light{ display:none; }
html[data-theme="dark"] .d-hero-bird .logo-dark{ display:inline-block; }
.d-landing-hero h1{
    font-size:36px; font-weight:800; letter-spacing:-.03em; line-height:1.15;
    margin-bottom:12px;
}
.d-landing-hero .d-sub{
    font-size:17px; color:var(--text-2); max-width:560px; margin:0 auto 22px; line-height:1.6;
}
.d-landing-hero .d-btn-row{ justify-content:center; }

.d-trust{
    display:flex; align-items:center; justify-content:center; gap:12px;
    flex-wrap:wrap; margin-top:24px;
    font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
    color:var(--text-3);
}
.d-trust img{ height:24px; }

.d-features{
    display:grid; gap:14px;
    grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
    margin-bottom:20px;
}
.d-feature{
    display:flex; gap:14px; align-items:flex-start;
    padding:20px; border-radius:var(--radius-sm);
    background:var(--surface); border:1px solid var(--border);
    box-shadow:var(--shadow);
    transition:all var(--transition);
}
.d-feature:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--accent); }
.d-feature .d-emoji{ font-size:22px; line-height:1.3; }
.d-feature h3{ font-size:15px; font-weight:700; color:var(--text); margin-bottom:5px; }
.d-feature p{ font-size:14px; color:var(--text-2); line-height:1.5; }

.d-lang-grid{
    display:grid; gap:10px;
    grid-template-columns:repeat(auto-fill, minmax(155px, 1fr));
    margin-bottom:20px;
}
.d-lang{
    display:flex; align-items:center; gap:10px;
    padding:12px 16px; border-radius:999px;
    background:var(--surface); border:1px solid var(--border);
    font-weight:600; font-size:14px; color:var(--text);
    text-decoration:none; box-shadow:var(--shadow);
    transition:all var(--transition);
}
.d-lang:hover{
    transform:translateY(-2px); border-color:var(--accent);
    color:var(--accent-text); text-decoration:none; box-shadow:var(--shadow-lg);
}
.d-lang .d-flag{ font-size:19px; }

.d-cta{ text-align:center; background:linear-gradient(135deg, var(--accent-soft), transparent); }
.d-cta h2{ font-size:22px; font-weight:800; letter-spacing:-.02em; margin-bottom:8px; }
.d-cta p{ font-size:15px; color:var(--text-2); margin-bottom:18px; }
.d-cta .d-btn-row{ justify-content:center; margin-top:0; }

.d-signup-card{ margin-bottom:0; }
.d-form-title{ font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--text); }
.d-form-sub{ font-size:14px; color:var(--text-2); margin-top:5px; margin-bottom:6px; line-height:1.55; }
.d-form-alt{ font-size:13.5px; color:var(--text-2); margin-top:16px; text-align:center; }
.d-disclaimer{
    font-size:12.5px; color:var(--text-3); line-height:1.5;
    margin-top:16px; padding-top:14px;
    border-top:1px solid var(--border);
}
.d-asterisk{ color:var(--amber); font-weight:700; }

.d-oauth{ margin-top:22px; text-align:center; }
.d-oauth-divider{
    display:block; position:relative;
    font-size:11px; font-weight:700; text-transform:uppercase;
    letter-spacing:.1em; color:var(--text-3); margin-bottom:16px;
}
.d-oauth-divider::before,
.d-oauth-divider::after{
    content:""; position:absolute; top:50%; width:calc(50% - 26px);
    height:1px; background:var(--border);
}
.d-oauth-divider::before{ left:0; }
.d-oauth-divider::after{ right:0; }
.d-oauth-btn{
    display:inline-block; border:1px solid var(--border); border-radius:var(--radius-sm);
    background:var(--surface-2); padding:4px;
    box-shadow:var(--shadow);
    transition:all var(--transition);
}
.d-oauth-btn:hover{ transform:translateY(-2px); border-color:var(--accent); box-shadow:var(--shadow-lg); }
.d-oauth-btn img{ max-width:215px; height:auto; display:block; }

/* ================= footer ================= */
.d-footer{
    text-align:center; margin-top:60px; padding-top:30px;
    border-top:1px solid var(--border);
    font-size:13px; color:var(--text-3); line-height:1.7;
}
.d-footer a{ color:var(--text-2); }
.d-social{ display:flex; justify-content:center; gap:10px; margin-bottom:20px; }
.d-social a{
    width:42px; height:42px; border-radius:12px;
    display:grid; place-items:center;
    background:var(--surface); border:1px solid var(--border);
    color:var(--text-2); font-size:15px; text-decoration:none;
    box-shadow:var(--shadow);
    transition:all var(--transition);
}
.d-social a:hover{
    background:var(--accent); color:#fff; border-color:var(--accent);
    transform:translateY(-2px); box-shadow:var(--shadow-lg);
}

/* ================= responsive ================= */
@media (max-width:980px){
    .d-hero-inner{ grid-template-columns:1fr; gap:40px; }
    .d-hero-feats{ grid-template-columns:1fr; }
    .d-fc-1,.d-fc-2,.d-fc-3,.d-fc-4,.d-fc-5,.d-fc-6{ grid-column:span 12; }
    .d-steps{ grid-template-columns:repeat(2,1fr); gap:30px; }
    .d-steps::before{ display:none; }
    .d-cta-final{ padding:40px 28px; flex-direction:column; align-items:flex-start; gap:26px; }
}
@media (max-width:560px){
    .d-langs{ grid-template-columns:repeat(2,1fr); }
    .d-hero{ padding:44px 20px 36px; }
    .d-hero-title{ font-size:clamp(32px,9vw,44px); }
    .d-hero-lead{ font-size:17px; }
    .d-section-head{ margin:52px 0 30px; gap:20px; }
    .d-landing-hero h1{ font-size:29px; }
    .d-landing-hero .d-sub{ font-size:16px; }
}
@media (max-width:480px){
    .d-btn, .d-btn-hero, .d-cta-final-btn{
        font-size:18px; padding:16px 30px; min-height:58px;
    }
    .d-btn-sm{ font-size:16px; padding:14px 24px; min-height:50px; }
}

.fs60 {font-size:60px}
.fs50 {font-size:50px}
.fs40 {font-size:40px}
.fs30 {font-size:30px}
.fs28 {font-size:28px}
.fs26 {font-size:26px}
.fs25 {font-size:25px}
.fs22 {font-size:22px}
.fs20 {font-size:20px}
.fs18 {font-size:18px}
.fs17 {font-size:17px}
.fs16 {font-size:16px}
.fs15 {font-size:15px}
.fs14 {font-size:14px}

.pages{
    clear:left;
    display:flex; flex-wrap:wrap; align-items:center; gap:6px;
    margin:24px 0; padding:0;
    font-size:14px;
}
.pages a,
.pages span.current,
.pages span.dots{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:38px; height:38px; padding:0 12px;
    border-radius:var(--radius-sm);
    font-weight:600; line-height:1;
    text-decoration:none;
}
.pages a{
    background:var(--surface);
    border:1px solid var(--border);
    color:var(--text);
    box-shadow:var(--shadow);
    transition:all var(--transition);
}
.pages a:hover{
    border-color:var(--accent);
    color:var(--accent-text);
    text-decoration:none;
    transform:translateY(-2px);
    box-shadow:var(--shadow-lg);
}
.pages span.current{
    background:var(--accent);
    border:1px solid var(--accent);
    color:#fff;
    box-shadow:var(--shadow);
}
.pages span.dots{
    background:transparent;
    border:1px solid transparent;
    color:var(--text-3);
}