/* ─── Reset ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ─── CSS Variables ──────────────────────── */
:root {
    --bg:              #fafafa;
    --bg-raised:       #ffffff;
    --text-primary:    #1a1a1a;
    --text-secondary:  #555555;
    --text-muted:      #999999;
    --border:          rgba(0,0,0,0.09);
    --border-strong:   rgba(0,0,0,0.18);
    --accent:          #009383;
    --accent-soft:     rgba(0,147,131,0.10);
    --accent-dark:     #007a6c;
    --tone:            #f5f0e8;
    --shadow:          0 1px 2px rgba(0,0,0,.04), 0 8px 24px -8px rgba(0,0,0,.12);
    --shadow-lg:       0 4px 8px rgba(0,0,0,.06), 0 16px 48px -12px rgba(0,0,0,.18);
    --radius:          16px;
    --radius-lg:       24px;
    --radius-full:     9999px;
    --glass-bg:        rgba(250,250,250,0.82);
    --glass-border:    rgba(0,0,0,0.08);
    --glass-blur:      blur(20px);
    --font-display:    'DM Serif Display', serif;
    --font-body:       'DM Sans', system-ui, sans-serif;
    --font-mono:       'JetBrains Mono', monospace;
    --ease:            cubic-bezier(.4,0,.2,1);
    --duration:        300ms;

    /* z-index scale */
    --z-content:       10;
    --z-sticky:        50;
    --z-overlay:       9998;
    --z-drawer:        9999;
    --z-toast:         10000;
    --z-modal:         10001;
    --z-grain:         10002;
}

.dark {
    --bg:              #0a0a0a;
    --bg-raised:       #1a1a1a;
    --text-primary:    #f0f0f0;
    --text-secondary:  #aaaaaa;
    --text-muted:      #666666;
    --border:          rgba(255,255,255,0.09);
    --border-strong:   rgba(255,255,255,0.18);
    --shadow:          0 1px 2px rgba(0,0,0,.2), 0 8px 24px -8px rgba(0,0,0,.4);
    --glass-bg:        rgba(26,26,26,0.72);
    --glass-border:    rgba(255,255,255,0.10);
}

/* ─── Base ───────────────────────────────── */
body {
    font-family: var(--font-body);
    background-color: var(--bg);
    color: var(--text-primary);
    overflow-x: hidden;
    transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

/* ─── Text hierarchy ─────────────────────── */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }

/* ─── Selection ──────────────────────────── */
::selection { background: var(--accent); color: #fff; }

/* ─── Grain overlay via body::after ─────── */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-grain);
    opacity: 0.18;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 300px 300px;
}
.dark body::after {
    opacity: 0.08;
    mix-blend-mode: soft-light;
}
@media (max-width: 640px) {
    body::after { opacity: 0.10; }
}

/* ─── Animations ─────────────────────────── */
@keyframes fadeUp  { from { opacity:0; transform:translateY(24px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeIn  { from { opacity:0 } to { opacity:1 } }
@keyframes pulseDot{ 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes float   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes draw    { to{stroke-dashoffset:0} }
@keyframes shake   { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-5px)} 40%,80%{transform:translateX(5px)} }

.anim-up { animation: fadeUp .7s var(--ease) both; }
.anim-in { animation: fadeIn .5s var(--ease) both; }
.d1 { animation-delay:.1s } .d2 { animation-delay:.2s } .d3 { animation-delay:.35s }
.d4 { animation-delay:.5s } .d5 { animation-delay:.65s } .d6 { animation-delay:.8s }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .anim-up, .anim-in { animation: none; opacity: 1; }
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ─── Glass surface ──────────────────────── */
.glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

/* ─── Mono label ─────────────────────────── */
.label-mono {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
}

/* ─── Live dot ───────────────────────────── */
.live-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #059669;
    animation: pulseDot 2s infinite;
    display: inline-block;
    flex-shrink: 0;
}

/* ─── Buttons ────────────────────────────── */
.btn-primary {
    background: var(--text-primary);
    color: var(--bg);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all var(--duration) var(--ease);
}
.btn-primary:hover { background: #333; }
.dark .btn-primary { background: var(--text-primary); color: var(--bg); }
.dark .btn-primary:hover { background: #d0d0d0; }

.btn-primary::after {
    content:'';
    position:absolute; inset:0;
    pointer-events:none;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
    background-size:200% 100%;
    animation: shimmer 3s infinite;
}

/* ─── Feature cards ──────────────────────── */
.feature-card {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-strong);
}

/* Icon colors */
.icon-bg-cta     { background: var(--accent-soft); }
.icon-text-cta   { color: var(--accent); }
.icon-bg-amber   { background: rgba(251,191,36,.12); }
.icon-text-amber { color: #d97706; }
.dark .icon-text-amber { color: #fbbf24; }
.icon-bg-emerald { background: rgba(16,185,129,.10); }
.icon-text-emerald { color: #059669; }
.dark .icon-text-emerald { color: #34d399; }
.icon-bg-violet  { background: rgba(139,92,246,.10); }
.icon-text-violet { color: #7c3aed; }
.dark .icon-text-violet { color: #a78bfa; }

/* ─── Language pills ─────────────────────── */
.lang-pill {
    transition: all .25s var(--ease);
    cursor: pointer;
    border: 1px solid var(--border-strong);
    background: var(--bg-raised);
    color: var(--text-secondary);
}
.lang-pill:hover, .lang-pill.active {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
    transform: scale(1.04);
}

/* ─── Form input ─────────────────────────── */
.form-input {
    background: var(--bg-raised);
    border: 2px solid var(--border-strong);
    color: var(--text-primary);
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.form-input::placeholder { color: var(--text-muted); }
.form-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

/* ─── FAQ ────────────────────────────────── */
.faq-item {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    transition: border-color var(--duration) var(--ease);
}
.faq-item:hover { border-color: var(--border-strong); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq-icon { transition: transform .3s var(--ease); }

/* ─── Success ring ───────────────────────── */
.success-ring {
    width: 64px; height: 64px;
    border-radius: 50%;
    border: 2.5px solid #059669;
    display: flex; align-items: center; justify-content: center;
}
.checkmark { stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .6s var(--ease) .2s forwards; }

/* ─── Scroll arrow ───────────────────────── */
.scroll-arrow { animation: float 2.2s ease-in-out infinite; }

/* ─── Toast ──────────────────────────────── */
.toast {
    position: fixed;
    bottom: 2rem; left: 50%;
    transform: translateX(-50%) translateY(100px);
    opacity: 0;
    transition: all .4s var(--ease);
    z-index: var(--z-toast);
    background: var(--text-primary);
    color: var(--bg);
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ─── Dark mode dividers / sections ─────── */
.section-dark {
    background-color: #161616;
}
.dark .section-dark { background-color: #111111; }

/* ─── Gradient divider ───────────────────── */
.grad-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.3;
    border: none;
}

/* ─── Orbs ───────────────────────────────── */
.orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
}
@media (max-width: 1024px) { .orb { display: none; } }

/* ─── Focus visible ──────────────────────── */
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ─── Theme toggle ───────────────────────── */
.theme-toggle {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--bg-raised);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all var(--duration) var(--ease);
    color: var(--text-secondary);
}
.theme-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ─── PR Points badge ────────────────────── */
.pr-badge {
    background: rgba(251,191,36,.12);
    border: 1px solid rgba(251,191,36,.3);
}
.dark .pr-badge {
    background: rgba(251,191,36,.08);
    border-color: rgba(251,191,36,.2);
}

/* ─── Steps section ──────────────────────── */
.step-num {
    border: 2px solid rgba(0,147,131,.35);
    color: #6ee7cd;
    font-family: var(--font-display);
}