/* ═══════════════════════════════════════════════════════════════
   VOLTI — Premium Landing Page
   Deep navy tone — not black, not white
   ═══════════════════════════════════════════════════════════════ */

:root {
    --teal: #2dd4bf;
    --blue: #38bdf8;
    --indigo: #818cf8;
    --purple: #a78bfa;
    --pink: #f472b6;
    --amber: #fbbf24;
    --green: #34d399;
    --g1: linear-gradient(135deg, #2dd4bf, #38bdf8, #818cf8);
    --g2: linear-gradient(135deg, #fbbf24, #f472b6);
    --g3: linear-gradient(135deg, #818cf8, #a78bfa, #f472b6);
    --g4: linear-gradient(135deg, #2dd4bf, #38bdf8);
    --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

[data-theme="dark"] {
    --bg: #121318;
    --surface: #1a1b23;
    --surface-2: #22232e;
    --surface-3: #2a2b38;
    --border: rgba(255,255,255,0.06);
    --text: #e4e4e8;
    --text-sec: #9394a0;
    --text-dim: #6c6d7a;
    --nav-bg: rgba(18,19,24,0.85);
    --nav-text: rgba(255,255,255,0.7);
    --nav-text-hover: #e4e4e8;
}

[data-theme="light"] {
    --bg: #ffffff;
    --surface: #f5f5f7;
    --surface-2: #ebebed;
    --surface-3: #e2e2e5;
    --border: rgba(0,0,0,0.07);
    --text: #1d1d1f;
    --text-sec: #6e6e73;
    --text-dim: #86868b;
    --nav-bg: rgba(255,255,255,0.82);
    --nav-text: rgba(0,0,0,0.55);
    --nav-text-hover: #1d1d1f;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body.landing-body {
    font-family: -apple-system, 'SF Pro Display', 'Inter', sans-serif;
    color: var(--text);background: var(--bg);overflow-x: hidden;
    transition: background 0.3s, color 0.3s;
}

/* theme toggle btn */
.theme-btn {
    width:30px;height:30px;border-radius:8px;border:1px solid var(--border);
    background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;
    font-size:14px;color:var(--text-sec);transition:0.3s var(--ease);
}
.theme-btn:hover { border-color:var(--teal); }

/* ═══ NAV ═══ */
.nav {
    position: fixed;top:0;left:0;right:0;z-index:1000;height: 56px;
    background: var(--nav-bg);
    backdrop-filter: saturate(180%) blur(20px);-webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--border);
    display: flex;align-items: center;justify-content: center;
}
.nav-inner { width:100%;max-width:980px;padding:0 22px;display:flex;align-items:center;justify-content:space-between; }
.nav-brand { display:flex;align-items:center;gap:8px;text-decoration:none; }
.nav-logo {
    width:28px;height:28px;border-radius:7px;background:var(--g4);
    display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:800;color:white;
}
.nav-brand span { font-size:18px;font-weight:600;color:var(--text); }
.nav-links { display:flex;gap:28px;list-style:none;align-items:center; }
.nav-links a { font-size:14px;color:var(--nav-text);text-decoration:none;transition:0.3s var(--ease); }
.nav-links a:hover { color:var(--nav-text-hover); }
.nav-cta { background:var(--g4)!important;color:white!important;padding:6px 16px;border-radius:980px;font-weight:500;font-size:14px; }
.nav-hamburger { display:none;background:none;border:none;cursor:pointer;padding:6px;position:relative;z-index:1001; }
.nav-hamburger span {
    display:block;width:18px;height:1.5px;background:var(--text);margin:4px 0;
    border-radius:2px;transition:0.3s var(--ease);transform-origin:center;
}
/* hamburger → X animation */
.nav-hamburger.active span { background:var(--text); }
.nav-hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(4px,4px); }
.nav-hamburger.active span:nth-child(2) { opacity:0; }
.nav-hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(4px,-4px); }

/* nav hides bg when menu open */
.nav.menu-open { background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none; }

/* mobile overlay menu */
.mobile-overlay {
    display:none;position:fixed;inset:0;z-index:999;
    background:var(--bg);
    flex-direction:column;align-items:center;justify-content:center;
    gap:8px;opacity:0;transition:opacity 0.3s var(--ease);
}
.mobile-overlay.open { display:flex;opacity:1; }

.mobile-overlay a {
    font-size:28px;font-weight:600;color:var(--text);text-decoration:none;
    padding:12px 0;transition:0.3s var(--ease);letter-spacing:-0.02em;
}
.mobile-overlay a:hover { color:var(--teal); }

.mobile-overlay .mob-cta {
    margin-top:20px;
    padding:14px 40px;border-radius:980px;font-size:17px;font-weight:600;
    background:var(--g4);color:white;text-decoration:none;
    transition:0.3s var(--ease);
}
.mobile-overlay .mob-cta:hover { filter:brightness(1.1); }

.mobile-overlay .mob-theme {
    margin-top:12px;
    width:40px;height:40px;border-radius:10px;border:1px solid var(--border);
    background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;
    font-size:18px;color:var(--text-sec);transition:0.3s var(--ease);
}

.mobile-overlay .mob-bottom {
    position:absolute;bottom:32px;font-size:12px;color:var(--text-dim);
}

/* ═══ HERO ═══ */
.hero {
    min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:120px 24px 80px;position:relative;overflow:hidden;
}
.hero>*{position:relative;z-index:2}
#hero-canvas{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-over {
    font-size:clamp(14px,1.5vw,17px);font-weight:600;margin-bottom:20px;
    background:var(--g1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero h1 {
    font-size:clamp(48px,9vw,96px);font-weight:700;letter-spacing:-0.05em;line-height:1.0;
    color:var(--text);max-width:1000px;margin-bottom:24px;
}
.hero h1 em {
    font-style:normal;
    background:var(--g1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-sub { font-size:clamp(16px,2vw,21px);color:var(--text-sec);max-width:480px;line-height:1.4;margin-bottom:40px; }
.hero-btns { display:flex;gap:12px;flex-wrap:wrap;justify-content:center; }

.btn-fill {
    padding:12px 28px;border-radius:980px;font-size:17px;font-weight:500;
    text-decoration:none;display:inline-flex;align-items:center;gap:6px;
    transition:0.3s var(--ease);font-family:inherit;border:none;cursor:pointer;
    background:var(--g4);color:white;
}
.btn-fill:hover { filter:brightness(1.15); }

.btn-ghost {
    padding:12px 28px;border-radius:980px;font-size:17px;font-weight:500;
    text-decoration:none;display:inline-flex;align-items:center;gap:6px;
    transition:0.3s var(--ease);font-family:inherit;cursor:pointer;
    background:transparent;color:var(--blue);border:none;
}
.btn-ghost:hover { opacity:0.8; }

/* ═══ RIBBON ═══ */
.ribbon {
    display:flex;justify-content:center;gap:64px;padding:64px 24px;
    border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.ribbon-item { text-align:center; }
.ribbon-num {
    font-size:48px;font-weight:700;letter-spacing:-0.03em;
    background:var(--g1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.ribbon-label { font-size:13px;color:var(--text-dim);margin-top:4px; }

/* ═══ TILE ═══ */
.tile { padding:100px 24px;text-align:center; }
.tile-a { background:var(--bg); }
.tile-b { background:var(--surface); }
.tile-inner { max-width:980px;margin:0 auto; }

.tile-over {
    font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:8px;
    background:var(--g1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.tile-title {
    font-size:clamp(32px,5vw,56px);font-weight:700;letter-spacing:-0.04em;line-height:1.07;
    color:var(--text);margin-bottom:12px;
}
.tile-desc { font-size:19px;line-height:1.5;color:var(--text-sec);max-width:520px;margin:0 auto 60px; }

/* ═══ FEATURES ═══ */
.f-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:left; }
.f-card {
    padding:32px 24px;border-radius:18px;background:var(--surface-2);
    border:1px solid var(--border);transition:0.4s var(--ease);
}
.f-card:hover { transform:translateY(-4px);border-color:rgba(45,212,191,0.2);box-shadow:0 8px 30px rgba(0,0,0,0.2); }

.f-icon {
    width:42px;height:42px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:16px;
}
.fi-1 { background:rgba(45,212,191,0.1);color:var(--teal); }
.fi-2 { background:rgba(129,140,248,0.1);color:var(--indigo); }
.fi-3 { background:rgba(251,191,36,0.1);color:var(--amber); }
.fi-4 { background:rgba(244,114,182,0.1);color:var(--pink); }
.fi-5 { background:rgba(52,211,153,0.1);color:var(--green); }
.fi-6 { background:rgba(167,139,250,0.1);color:var(--purple); }

.f-card h3 { font-size:18px;font-weight:700;letter-spacing:-0.02em;margin-bottom:6px;color:var(--text); }
.f-card p { font-size:14px;color:var(--text-sec);line-height:1.6; }

/* ═══ TECH ═══ */
.t-label {
    font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;
    color:var(--text-dim);margin:48px 0 14px;text-align:left;
}
.t-label:first-of-type { margin-top:0; }
.t-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px; }
.t-pill {
    display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;
    background:var(--surface-2);border:1px solid var(--border);transition:0.3s var(--ease);
}
.t-pill:hover { border-color:rgba(45,212,191,0.25);box-shadow:0 4px 16px rgba(0,0,0,0.15); }
.t-dot {
    width:32px;height:32px;min-width:32px;border-radius:9px;
    display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:800;
}
.t-dot.c1{background:rgba(56,189,248,.12);color:#38bdf8}
.t-dot.c2{background:rgba(45,212,191,.12);color:#2dd4bf}
.t-dot.c3{background:rgba(129,140,248,.12);color:#818cf8}
.t-dot.c4{background:rgba(52,211,153,.12);color:#34d399}
.t-dot.c5{background:rgba(251,191,36,.12);color:#fbbf24}
.t-dot.c6{background:rgba(45,212,191,.12);color:#2dd4bf}
.t-dot.c7{background:rgba(167,139,250,.12);color:#a78bfa}
.t-dot.c8{background:rgba(244,114,182,.12);color:#f472b6}
.t-dot.c9{background:rgba(56,189,248,.12);color:#38bdf8}
.t-dot.c10{background:rgba(52,211,153,.12);color:#34d399}
.t-dot.c11{background:rgba(129,140,248,.12);color:#818cf8}
.t-dot.c12{background:rgba(251,191,36,.12);color:#fbbf24}
.t-dot.c13{background:rgba(167,139,250,.12);color:#a78bfa}
.t-dot.c14{background:rgba(244,114,182,.12);color:#f472b6}
.t-dot.c15{background:rgba(56,189,248,.12);color:#38bdf8}
.t-dot.c16{background:rgba(45,212,191,.12);color:#2dd4bf}
.t-dot.c17{background:rgba(56,132,244,.12);color:#3884f4}
.t-dot.c18{background:rgba(239,68,68,.12);color:#ef4444}
.t-name { font-size:14px;font-weight:600;color:var(--text); }
.t-sub { font-size:11px;color:var(--text-dim);margin-top:1px; }

/* ═══ APP PREVIEW ═══ */
.app-row {
    display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center;
    text-align:left;margin-top:48px;
}
.app-row-reverse { grid-template-columns:auto 1fr; }
.app-row-reverse .phone-frame { order:-1; }

.app-text { max-width:440px; }
.app-title {
    font-size:clamp(28px,4vw,44px);font-weight:700;letter-spacing:-0.04em;
    line-height:1.1;color:var(--text);margin-bottom:14px;
}
.app-desc { font-size:16px;color:var(--text-sec);line-height:1.6;margin-bottom:28px; }

.app-bullets { display:flex;flex-direction:column;gap:10px; }
.app-bullet {
    display:flex;align-items:center;gap:10px;
    font-size:14px;color:var(--text);font-weight:500;
}
.ab-dot { font-size:16px;width:20px;text-align:center;flex-shrink:0; }

/* Duo layout — iki telefon yan yana */
.app-duo {
    display:grid;grid-template-columns:1fr 1fr;gap:40px;
    margin-top:48px;text-align:center;
}
.app-duo-item { display:flex;flex-direction:column;align-items:center;gap:20px; }
.app-duo-info { text-align:left; }
.app-duo-info h3 { font-size:17px;font-weight:700;color:var(--text);margin-bottom:10px; }
.app-duo-info .app-bullets { gap:6px; }
.app-duo-info .app-bullet { font-size:13px; }

.phone-frame {
    width:260px;height:540px;
    background:var(--surface-2);border:3px solid var(--surface-3);
    border-radius:40px;overflow:hidden;position:relative;flex-shrink:0;
    box-shadow:0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.04);
}
.phone-video {
    width:100%;height:100%;object-fit:cover;display:block;
}

@media(max-width:768px){
    .app-row, .app-row-reverse { grid-template-columns:1fr;gap:32px;justify-items:center;text-align:center; }
    .app-row-reverse .phone-frame { order:0; }
    .app-text { max-width:100%; }
    .app-bullets { align-items:center; }
    .phone-frame { width:220px;height:460px;border-radius:32px; }
    .app-duo { grid-template-columns:1fr;gap:48px; }
}

/* ═══ ADMIN PANEL PREVIEW ═══ */
.browser-frame {
    margin-top:40px;border-radius:14px;overflow:hidden;
    background:var(--surface-2);border:1px solid var(--border);
    box-shadow:0 20px 60px rgba(0,0,0,0.3);
}
.browser-bar {
    display:flex;align-items:center;gap:14px;
    padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--border);
}
.browser-dots { display:flex;gap:6px; }
.browser-dots i { display:block;width:10px;height:10px;border-radius:50%; }
.browser-dots i:nth-child(1){background:#ff5f57}
.browser-dots i:nth-child(2){background:#febc2e}
.browser-dots i:nth-child(3){background:#28c840}
.browser-url {
    flex:1;text-align:center;font-size:12px;font-family:'SF Mono',monospace;
    color:var(--text-dim);background:var(--surface-2);
    padding:5px 14px;border-radius:6px;
}
.browser-video { width:100%;display:block; }

.admin-features {
    display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px;
}
.admin-feat {
    display:flex;align-items:center;gap:7px;
    padding:8px 16px;background:var(--surface-2);border:1px solid var(--border);
    border-radius:980px;font-size:13px;font-weight:500;color:var(--text);
    transition:0.3s var(--ease);
}
.admin-feat:hover { border-color:rgba(45,212,191,0.25); }
.admin-feat span { font-size:15px; }

/* ═══ ARCH ═══ */
.a-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px; }
.a-card {
    background:var(--surface-2);border:1px solid var(--border);
    border-radius:18px;padding:32px 24px;text-align:center;transition:0.4s var(--ease);
}
.a-card:hover { transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,0,0,0.2); }
.a-badge {
    display:inline-block;padding:4px 12px;border-radius:980px;
    font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:14px;
}
.a-badge.b1 { background:rgba(45,212,191,0.1);color:var(--teal); }
.a-badge.b2 { background:rgba(129,140,248,0.1);color:var(--indigo); }
.a-badge.b3 { background:rgba(251,191,36,0.1);color:var(--amber); }
.a-card h3 { font-size:18px;font-weight:700;color:var(--text);margin-bottom:14px; }
.a-list { list-style:none;text-align:left; }
.a-list li { font-size:14px;color:var(--text-sec);padding:5px 0;border-bottom:1px solid var(--border); }
.a-list li:last-child { border-bottom:none; }

/* ═══ API ═══ */
.api-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;text-align:left; }
.api-card {
    padding:18px;border-radius:14px;background:var(--surface-2);
    border:1px solid var(--border);transition:0.3s var(--ease);
}
.api-card:hover { border-color:rgba(56,189,248,0.25);box-shadow:0 4px 16px rgba(0,0,0,0.15); }
.api-m {
    display:inline-block;padding:2px 7px;border-radius:5px;
    font-size:10px;font-weight:800;font-family:'SF Mono',monospace;margin-right:6px;
}
.mg { background:rgba(52,211,153,0.1);color:var(--green); }
.mp { background:rgba(56,189,248,0.1);color:var(--blue); }
.mu { background:rgba(251,191,36,0.1);color:var(--amber); }
.api-ep { font-size:13px;font-weight:600;font-family:'SF Mono',monospace;color:var(--text); }
.api-card p { font-size:13px;color:var(--text-sec);margin-top:6px; }

/* ═══ ADMIN ═══ */
.admin-split { display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;text-align:left;margin-top:60px; }
.admin-item { display:flex;align-items:center;gap:12px;padding:7px 0; }
.admin-dot {
    width:22px;height:22px;min-width:22px;border-radius:6px;
    background:rgba(52,211,153,0.1);color:var(--green);
    display:flex;align-items:center;justify-content:center;font-size:11px;
}
.admin-item span { font-size:15px;color:var(--text); }
.admin-box {
    background:var(--surface-2);border:1px solid var(--border);
    border-radius:16px;padding:20px;
}
.admin-bar { display:flex;gap:5px;margin-bottom:14px; }
.admin-bar i { width:9px;height:9px;border-radius:50%;display:block; }
.admin-bar i:nth-child(1){background:#ff5f57}
.admin-bar i:nth-child(2){background:#febc2e}
.admin-bar i:nth-child(3){background:#28c840}
.admin-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.admin-cell { background:var(--surface-3);border-radius:12px;padding:16px; }
.admin-val { font-size:26px;font-weight:800;margin-bottom:2px; }
.admin-cell:nth-child(1) .admin-val { color:var(--teal); }
.admin-cell:nth-child(2) .admin-val { color:var(--green); }
.admin-cell:nth-child(3) .admin-val { color:var(--amber); }
.admin-cell:nth-child(4) .admin-val { color:var(--indigo); }
.admin-lbl { font-size:11px;color:var(--text-dim); }

/* ═══ ABOUT ═══ */
.about-split {
    display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;
    margin-top:48px;text-align:left;
}
.about-card { max-width:520px; }
.about-av {
    width:64px;height:64px;border-radius:50%;background:var(--g1);
    display:flex;align-items:center;justify-content:center;
    font-size:20px;font-weight:800;color:white;margin-bottom:18px;
}
.about-bio { font-size:15px;color:var(--text-sec);line-height:1.6;margin-bottom:20px; }
.about-techs { display:flex;flex-wrap:wrap;gap:6px; }
.about-stats { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.about-stat {
    background:var(--surface-2);border:1px solid var(--border);
    border-radius:16px;padding:20px;text-align:center;
    transition:0.3s var(--ease);
}
.about-stat:hover { border-color:rgba(45,212,191,0.2);transform:translateY(-3px); }
.about-stat-num { font-size:28px;font-weight:800;letter-spacing:-0.03em; }
.about-stat-label { font-size:12px;color:var(--text-dim);margin-top:2px; }

/* ═══ PORTFOLIO ═══ */
.port-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px; }
.port-card {
    background:var(--surface-2);border:1px solid var(--border);
    border-radius:18px;padding:24px;transition:0.4s var(--ease);
    display:flex;flex-direction:column;
}
.port-card:hover { transform:translateY(-4px);border-color:rgba(45,212,191,0.2);box-shadow:0 8px 30px rgba(0,0,0,0.2); }
.port-card-highlight { border-color:rgba(45,212,191,0.25);background:linear-gradient(135deg,var(--surface-2),rgba(45,212,191,0.04)); }

.port-head { display:flex;align-items:center;gap:10px;margin-bottom:12px; }
.port-emoji { font-size:28px;flex-shrink:0; }
.port-name { font-size:16px;font-weight:700;color:var(--text); }
.port-plat { font-size:11px;color:var(--text-dim); }

.port-badge {
    margin-left:auto;padding:3px 10px;border-radius:980px;
    font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;flex-shrink:0;
}
.port-badge-live { background:rgba(52,211,153,0.1);color:var(--green); }
.port-badge-current { background:rgba(45,212,191,0.1);color:var(--teal); }

.port-desc { font-size:13px;color:var(--text-sec);line-height:1.5;margin-bottom:14px;flex:1; }
.port-tags { display:flex;flex-wrap:wrap;gap:5px; }
.port-tags span {
    padding:3px 10px;background:var(--surface-3);border-radius:980px;
    font-size:11px;font-weight:600;color:var(--text-sec);
}

a.port-card { text-decoration:none;color:inherit;cursor:pointer; }

.port-link {
    display:inline-flex;align-items:center;gap:6px;
    margin-top:14px;padding:8px 18px;
    background:rgba(52,211,153,0.1);color:var(--green);
    border:1px solid rgba(52,211,153,0.2);
    border-radius:980px;font-size:12px;font-weight:600;
    transition:0.3s var(--ease);
}
a.port-card:hover .port-link { background:rgba(52,211,153,0.18);border-color:rgba(52,211,153,0.35); }

.port-links-row { display:flex;gap:6px;margin-top:14px;flex-wrap:wrap; }
.port-link-mini {
    display:inline-flex;align-items:center;gap:4px;
    font-size:11px;font-weight:600;color:var(--green);
    padding:6px 14px;background:rgba(52,211,153,0.1);
    border:1px solid rgba(52,211,153,0.2);border-radius:980px;
    text-decoration:none;transition:0.3s var(--ease);
}
.port-link-mini:hover { background:rgba(52,211,153,0.18);border-color:rgba(52,211,153,0.35); }

@media(max-width:768px){
    .about-split { grid-template-columns:1fr;text-align:center; }
    .about-av { margin:0 auto 18px; }
    .about-techs { justify-content:center; }
    .about-stats { grid-template-columns:1fr 1fr; }
    .port-grid { grid-template-columns:1fr; }
}

/* ═══ BETA ═══ */
.beta-wrap { margin-top:48px;max-width:640px;margin-left:auto;margin-right:auto; }

.beta-platforms { display:flex;gap:10px;justify-content:center;margin-bottom:32px; }
.beta-plat {
    display:flex;align-items:center;gap:10px;
    padding:14px 18px;background:var(--surface-2);border:1.5px solid var(--border);
    border-radius:14px;flex:1;max-width:220px;transition:0.3s var(--ease);color:var(--text-sec);cursor:pointer;
}
.beta-plat:hover { border-color:rgba(45,212,191,0.2); }
.beta-plat-active { border-color:var(--teal)!important;background:rgba(45,212,191,0.06)!important; }
.beta-plat-active .beta-plat-name { color:var(--teal); }
.beta-plat svg { flex-shrink:0; }
.beta-plat-name { font-size:16px;font-weight:700;color:var(--text); }
.beta-plat-sub { font-size:12px;color:var(--text-dim); }

.beta-form { display:flex;flex-direction:column;gap:14px; }
.beta-row { display:flex;gap:12px; }

.beta-field { flex:1;position:relative; }
.beta-input {
    width:100%;height:54px;padding:22px 16px 8px;
    font-family:inherit;font-size:15px;color:var(--text);
    background:var(--surface-2);border:1.5px solid var(--border);
    border-radius:14px;outline:none;transition:0.3s var(--ease);
}
.beta-input::placeholder { color:transparent; }
.beta-input:focus { border-color:var(--teal);box-shadow:0 0 0 3px rgba(45,212,191,0.08); }
.beta-label {
    position:absolute;left:16px;top:50%;transform:translateY(-50%);
    font-size:14px;color:var(--text-dim);pointer-events:none;
    transition:0.2s var(--ease);
}
.beta-input:focus ~ .beta-label,
.beta-input:not(:placeholder-shown) ~ .beta-label {
    top:10px;transform:translateY(0);font-size:10px;font-weight:600;color:var(--teal);
}
.beta-select {
    width:100%;height:54px;padding:16px;
    font-family:inherit;font-size:15px;color:var(--text);
    background:var(--surface-2);border:1.5px solid var(--border);
    border-radius:14px;outline:none;cursor:pointer;
    transition:0.3s var(--ease);
    -webkit-appearance:none;-moz-appearance:none;appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236c6d7a' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 16px center;
    position:relative;
}
.beta-select:focus { border-color:var(--teal);box-shadow:0 0 0 3px rgba(45,212,191,0.08); }
.beta-select option {
    background:var(--surface-2);color:var(--text);
    padding:12px;font-size:14px;
}

.beta-btn {
    height:54px;margin-top:6px;
    background:var(--g4);color:white;border:none;border-radius:980px;
    font-family:inherit;font-size:16px;font-weight:600;cursor:pointer;
    transition:0.3s var(--ease);letter-spacing:0.01em;
}
.beta-btn:hover { filter:brightness(1.15);box-shadow:0 4px 20px rgba(45,212,191,0.2); }
.beta-btn:disabled { opacity:0.6;cursor:not-allowed; }

.beta-msg { text-align:center;font-size:14px;margin-top:8px;font-weight:500; }
.beta-msg-ok { color:var(--green); }
.beta-msg-err { color:var(--red,#f87171); }

@media(max-width:768px){
    .beta-platforms { flex-direction:row;flex-wrap:nowrap;gap:8px;overflow-x:auto;justify-content:stretch; }
    .beta-plat { flex:1;min-width:0;max-width:none;flex-direction:column;text-align:center;gap:6px;padding:12px 8px; }
    .beta-plat svg,.beta-plat img,.beta-plat span { margin:0 auto; }
    .beta-plat-name { font-size:13px; }
    .beta-plat-sub { font-size:10px; }
    .beta-row { flex-direction:column; }
    .beta-input { height:56px;font-size:16px; }
    .beta-btn { height:56px;font-size:17px; }
}

/* ═══ DOCS ═══ */
.docs-banner { padding:80px 24px;text-align:center;border-top:1px solid var(--border); }
.docs-banner h2 { font-size:clamp(28px,4vw,44px);font-weight:700;letter-spacing:-0.03em;color:var(--text);margin-bottom:10px; }
.docs-banner p { font-size:17px;color:var(--text-sec);max-width:460px;margin:0 auto 28px; }

/* ═══ AUTHOR ═══ */
.author { padding:80px 24px;text-align:center;border-top:1px solid var(--border); }
.author-av {
    width:68px;height:68px;border-radius:50%;background:var(--g1);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 18px;font-size:22px;font-weight:800;color:white;
}
.author-name { font-size:22px;font-weight:700;color:var(--text);letter-spacing:-0.02em; }
.author-role {
    font-size:15px;font-weight:600;margin:4px 0 14px;
    background:var(--g1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.author-bio { font-size:15px;color:var(--text-sec);line-height:1.6;max-width:460px;margin:0 auto 20px; }
.author-tags { display:flex;flex-wrap:wrap;gap:6px;justify-content:center; }
.author-tag { padding:5px 12px;background:var(--surface-2);border-radius:980px;font-size:12px;font-weight:600;color:var(--text-sec); }

/* ═══ CTA ═══ */
.cta { padding:120px 24px;text-align:center;border-top:1px solid var(--border); }
.cta h2 {
    font-size:clamp(36px,6vw,64px);font-weight:700;letter-spacing:-0.04em;margin-bottom:12px;
    background:var(--g3);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.cta p { font-size:19px;color:var(--text-sec);max-width:440px;margin:0 auto 36px; }
.cta-btns { display:flex;gap:12px;justify-content:center;flex-wrap:wrap; }
.btn-w {
    padding:12px 28px;border-radius:980px;font-size:17px;font-weight:500;
    background:var(--text);color:var(--bg);text-decoration:none;
    display:inline-flex;align-items:center;gap:6px;transition:0.3s var(--ease);
    font-family:inherit;border:none;cursor:pointer;
}
.btn-w:hover { opacity:0.85; }
.btn-o {
    padding:12px 28px;border-radius:980px;font-size:17px;font-weight:500;
    background:transparent;color:var(--text-sec);text-decoration:none;
    border:1px solid var(--border);display:inline-flex;align-items:center;gap:6px;
    transition:0.3s var(--ease);font-family:inherit;cursor:pointer;
}
.btn-o:hover { color:var(--text);border-color:rgba(255,255,255,0.15); }

/* ═══ FOOTER ═══ */
.foot { padding:20px 24px;border-top:1px solid var(--border); }
.foot-inner { max-width:980px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px; }
.foot-copy { font-size:12px;color:var(--text-dim); }
.foot-copy strong { color:var(--text-sec);font-weight:600; }
.foot-author { font-size:11px;color:var(--text-dim);margin-top:4px; }
.foot-author strong { color:var(--text-sec); }
.foot-links { display:flex;gap:18px;list-style:none; }
.foot-links a { font-size:12px;color:var(--text-dim);text-decoration:none;transition:0.3s; }
.foot-links a:hover { color:var(--text); }

/* ═══ REVEAL ═══ */
.rv { opacity:0;transform:translateY(24px);transition:opacity 0.8s ease, transform 0.8s ease; }
.rv.vis { opacity:1;transform:translateY(0); }

/* ═══ RESPONSIVE ═══ */
@media (max-width:768px) {
    .nav-links { display:none !important; }
    .nav-hamburger { display:block; }
    .hero { min-height:100svh;padding:100px 20px 60px; }
    .hero h1 { font-size:48px; }
    .hero-over { font-size:17px; }
    .hero-sub { font-size:19px; }
    .ribbon { gap:0;padding:0;flex-wrap:wrap;border:none; }
    .ribbon-item { flex:1 1 50%;padding:24px 16px;border-bottom:1px solid var(--border); }
    .ribbon-item:nth-child(odd) { border-right:1px solid var(--border); }
    .ribbon-num { font-size:32px; }
    .ribbon-label { font-size:12px; }
    .f-grid,.a-grid { grid-template-columns:1fr; }
    .t-grid { grid-template-columns:1fr 1fr; }
    .api-grid { grid-template-columns:1fr; }
    .admin-split { grid-template-columns:1fr;gap:32px; }
    .tile { padding:64px 16px; }
    .tile-title { font-size:36px; }
    .tile-desc { font-size:18px;margin-bottom:40px; }
    .docs-banner { padding:60px 16px; }
    .author { padding:60px 16px; }
    .cta { padding:80px 16px; }
    .cta h2 { font-size:32px; }
    .foot-inner { flex-direction:column;text-align:center; }
    .foot-links { justify-content:center; }
    .btn-fill,.btn-ghost { font-size:15px;padding:11px 24px; }
    .btn-w,.btn-o { font-size:15px;padding:11px 24px; }
}

@media (max-width:480px) {
    .hero h1 { font-size:40px; }
    .hero-over { font-size:16px; }
    .hero-btns { flex-direction:column;width:100%;gap:10px; }
    .hero-btns a { width:100%;justify-content:center; }
    .t-grid { grid-template-columns:1fr 1fr;gap:6px; }
    .t-pill { padding:10px 10px;gap:8px;border-radius:10px; }
    .t-dot { width:24px;height:24px;min-width:24px;border-radius:6px;font-size:10px; }
    .t-name { font-size:12px; }
    .t-sub { display:none; }
    .cta-btns { flex-direction:column;width:100%; }
    .cta-btns a { width:100%;justify-content:center; }
    .ribbon-item { flex:1 1 50%; }
    .admin-grid { grid-template-columns:1fr; }
}