:root{
    --bg:#0b1016; --bg2:#0a1320; --bg-a:#0b1016; --bg-b:#0a1320; --card:#0f1520;
    --ink:#e6e9ed; --muted:#9aa3ad;
    --accent:#0ea5e9; --accent2:#22d3ee; --accent3:#86efac;
    --ring:0 0 0 8px rgba(14,165,233,.2);
    --br:22px; --br-md:18px; --br-sm:12px;
    --brandColor:#ffffff; --link:#cbd5e1
}
html[data-theme="light"]{
    --bg:#ffffff; --bg2:#f6f8fb; --bg-a:#ffffff; --bg-b:#f8fafc; --card:#ffffff;
    --ink:#0b1016; --muted:#526070;
    --accent:#0ea5e9; --accent2:#06b6d4; --accent3:#22c55e;
    --ring:0 0 0 8px rgba(14,165,233,.25);
    --brandColor:#0b1016; --link:#334155
}

*{box-sizing:border-box}
html,body{height:100%;color-scheme:light dark}
body{
    margin:0;
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink);
    background:
            radial-gradient(ellipse 1200px 600px at 20% -10%, #0e1420 0%, transparent 60%),
            radial-gradient(ellipse 900px 500px at 100% 0%, #07121a 0%, transparent 60%),
            var(--bg);
    line-height:1.6;overflow-x:hidden
}
html[data-theme="light"] body{
    background:
            radial-gradient(ellipse 1200px 600px at 20% -10%, #eef6ff 0%, transparent 60%),
            radial-gradient(ellipse 900px 500px at 100% 0%, #f1f8ff 0%, transparent 60%),
            var(--bg)
}
body::before,body::after{content:"";position:fixed;inset:auto;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(80px)}
html[data-theme="dark"] body::before{width:60vw;height:60vw;left:-12vw;top:-12vw;background:radial-gradient(closest-side, rgba(14,165,233,.18), transparent 60%)}
html[data-theme="dark"] body::after{width:52vw;height:52vw;right:-10vw;bottom:-10vw;background:radial-gradient(closest-side, rgba(134,239,172,.12), transparent 60%)}
html[data-theme="light"] body::before{width:62vw;height:62vw;left:-12vw;top:-12vw;background:radial-gradient(closest-side, rgba(34,211,238,.18), transparent 62%)}
html[data-theme="light"] body::after{width:48vw;height:48vw;right:-10vw;bottom:-10vw;background:radial-gradient(closest-side, rgba(167,243,208,.18), transparent 62%)}

.nowrap{white-space:nowrap}
.hide-sm{display:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.section{padding:100px 0;background:var(--bg-a)}
.section.alt{padding:100px 0;background:var(--bg-b);border-block:1px solid rgba(255,255,255,.06)}
.section.contrast{padding:100px 0;background:linear-gradient(180deg, rgba(14,165,233,.08), rgba(255,255,255,.02)), var(--bg-a)}
html[data-theme="light"] .section{background:linear-gradient(180deg,#ffffff 0%,#f9fbff 55%,#ffffff 100%)}
html[data-theme="light"] .section.alt{background:linear-gradient(180deg,#f8fafc 0%,#eef3f9 55%,#f8fafc 100%);border-color:rgba(2,6,23,.08)}
.section-title{font-size:clamp(28px,4vw,42px);line-height:1.2;letter-spacing:-.02em;margin:0 0 8px}
.section-subtitle{color:var(--muted);margin:0 auto 24px;max-width:780px}
.lead{color:var(--muted);font-size:18px}
.center{text-align:center}
.grid{display:grid;gap:22px}
.muted{color:var(--muted)}
.xs{font-size:12px}
.mt-2{margin-top:8px}
.blur{backdrop-filter:saturate(180%) blur(10px)}

.nav{
    position:sticky;top:0;z-index:60;
    background:rgba(10,13,17,.6);
    border-bottom:1px solid rgba(255,255,255,.06);
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:12px 20px
}
html[data-theme="light"] .nav{background:rgba(255,255,255,.85);border-bottom:1px solid rgba(2,6,23,.08)}
.nav .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--brandColor);font-weight:800;letter-spacing:.2px}
:root{--brandLogoH:clamp(34px,5.5vw,56px)}
.nav .logo{height:var(--brandLogoH);width:auto;display:block}
.nav-links{display:flex;align-items:center;justify-content:space-evenly;flex:1;margin-left:60px}
.nav-links a{flex:1;text-align:center;color:var(--link);text-decoration:none;opacity:.85;padding:10px 0;transition:opacity .2s ease}
.nav-links a.btn.ghost{flex:0;padding:6px 12px;font-size:14px;border-radius:10px}

#progress{position:fixed;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg, var(--accent), var(--accent3));transform-origin:0 50%;transform:scaleX(0);z-index:70}

.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:12px 18px;border-radius:14px;font-weight:700;text-decoration:none;
    border:0;cursor:pointer
}
.btn.primary{
    --btn-from: var(--accent3);
    --btn-mid:  var(--accent2);
    --btn-to:   var(--accent);
    color:#061008;
    background:linear-gradient(90deg, var(--btn-from), var(--btn-mid), var(--btn-to));
    background-size:160% 100%;
    background-position:0% 50%;
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 8px 18px rgba(14,165,233,.18);
    transition:transform .12s ease, box-shadow .18s ease, background-position .35s ease;
}
.btn.primary:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 28px rgba(14,165,233,.22);
    background-position:100% 50%;
}
.btn.primary:active{ transform:translateY(0); box-shadow:0 6px 14px rgba(14,165,233,.18) }
.btn.primary:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(34,211,238,.45) }
.btn:disabled{ opacity:.6; pointer-events:none }
html[data-theme="light"] .btn.primary{
    --btn-from:#34d399; --btn-mid:#22d3ee; --btn-to:#0ea5e9;
    color:#062016;
    border-color:rgba(2,6,23,.10);
    box-shadow:0 8px 18px rgba(2,132,199,.16);
}
.btn.ghost{
    border:1px solid rgba(255,255,255,.18); color:var(--ink); background:rgba(255,255,255,.05)
}
html[data-theme="light"] .btn.ghost{ background:rgba(2,6,23,.04); border-color:rgba(2,6,23,.14) }
@media (prefers-reduced-motion:reduce){
    .btn.primary{ transition:none; background-position:50% 50% }
    .btn.primary:hover{ transform:none }
}

:root{--vh:1vh}
.hero{
    position:relative;min-height:calc(var(--vh)*88);padding:140px 0 80px;
    isolation:isolate;overflow:clip;background:var(--bg-a)
}
html[data-theme="light"] .hero{
    background:
            radial-gradient(900px 420px at 10% -10%, rgba(34,211,238,.18), transparent 60%),
            radial-gradient(900px 420px at 100% 0%, rgba(14,165,233,.12), transparent 60%),
            linear-gradient(180deg, #ffffff 0%, #f6f9ff 65%, #ffffff 100%);
}
html[data-theme="light"] .hero .devices::after{ background:none !important }
html[data-theme="light"] .hero .devices .device{ opacity:.95; filter:brightness(1) saturate(1) !important }
html[data-theme="light"] .d1{ filter:drop-shadow(0 18px 36px rgba(15,23,42,.10)) !important }
.hero-inner{max-width:1000px;margin:0 auto;text-align:center;padding:0 20px}
.badge{display:inline-block;padding:8px 12px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#d7dde5;background:rgba(255,255,255,.06);font-size:12px;font-weight:700;letter-spacing:.2px;margin-bottom:12px}
html[data-theme="light"] .badge{color:#0b1016;background:rgba(2,6,23,.06);border-color:rgba(2,6,23,.12)}
.headline{font-size:clamp(36px,6vw,76px);letter-spacing:-.04em;margin:0 0 10px;line-height:1.05;text-shadow:0 8px 40px rgba(0,0,0,.2)}
.gradient{background:linear-gradient(90deg,var(--accent3) 0%, var(--accent) 55%, var(--accent2) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.subhead{color:var(--muted);margin:0 auto 24px;max-width:760px}
.cta-group{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.kpi-row{display:flex;gap:12px;justify-content:center;margin:28px 0 8px;flex-wrap:wrap}
.kpi{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:10px 14px;border-radius:999px;font-weight:700}
html[data-theme="light"] .kpi{background:rgba(2,6,23,.04);border-color:rgba(2,6,23,.12)}
.kpi .num{font-variant-numeric:tabular-nums}

.devices{position:absolute;inset:auto 0 0 0;display:grid;place-items:center;pointer-events:none;z-index:-1}
.d1{width:min(1200px,95vw);filter:drop-shadow(0 30px 60px rgba(0,0,0,.25));opacity:.9}
.hero .devices::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top, rgba(11,16,22,.35) 0%, rgba(11,16,22,.18) 22%, rgba(11,16,22,.08) 48%, rgba(11,16,22,0) 70%)}
.hero .devices .device{opacity:.75;filter:brightness(1.05) saturate(1.05)}
.scroll-down{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;width:28px;height:28px;opacity:.7}
.scroll-down span{display:block;width:2px;height:18px;background:#a7f3d0;margin:0 auto;border-radius:1px;animation:scroll 1.2s infinite}
@keyframes scroll{0%{transform:translateY(0)}50%{transform:translateY(6px)}100%{transform:translateY(0)}}

.split .split-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.card-img{width:100%;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);box-shadow:0 18px 60px rgba(0,0,0,.12)}
html[data-theme="light"] .card-img{background:rgba(2,6,23,.03);border-color:rgba(2,6,23,.12)}

.pill-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}
.pill-list li{
    list-style:none;display:flex;align-items:center;gap:10px;
    padding:12px 14px;border-radius:14px;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.12);color:var(--ink);position:relative
}
html[data-theme="light"] .pill-list li{background:linear-gradient(180deg, rgba(2,6,23,.04), rgba(2,6,23,.02));border-color:rgba(2,6,23,.12)}
.pill-list li::before{
    content:"";flex:0 0 10px;height:10px;border-radius:50%;
    background:radial-gradient(100% 100% at 30% 30%, var(--accent3), var(--accent));
    box-shadow:0 0 0 4px rgba(14,165,233,.12), 0 0 18px rgba(34,211,238,.25)
}
@media (max-width:900px){.pill-list{grid-template-columns:1fr}}
.pill-list li:hover{border-color:rgba(14,165,233,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 30px rgba(14,165,233,.10)}
html[data-theme="light"] .pill-list li:hover{box-shadow:inset 0 1px 0 rgba(2,6,23,.06), 0 10px 30px rgba(14,165,233,.08)}

.module-grid{grid-template-columns:repeat(auto-fit, minmax(240px,1fr));margin-top:24px}
.mcard{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:18px;min-height:160px;transition:transform .2s}
html[data-theme="light"] .mcard{background:linear-gradient(180deg, rgba(2,6,23,.04), rgba(2,6,23,.02));border-color:rgba(2,6,23,.10)}
.mcard h3{margin:0 0 6px}
.mcard p{margin:4px 0 0;color:var(--muted)}

.segment{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:16px 0 18px}
.segment .seg{
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--ink);
    padding:8px 12px;border-radius:999px;cursor:pointer;font-weight:700;letter-spacing:.2px;transition:.18s ease
}
html[data-theme="light"] .segment .seg{background:rgba(2,6,23,.04);border-color:rgba(2,6,23,.12)}
.segment .seg:hover{border-color:rgba(14,165,233,.22)}
.segment .seg.active,.segment .seg:focus{border-color:rgba(14,165,233,.5);box-shadow:0 0 0 3px rgba(14,165,233,.2);outline:none}

.iframe-wrap{border-radius:18px;border:1px solid rgba(255,255,255,.10);background:#0b0f14;box-shadow:0 18px 60px rgba(0,0,0,.18);overflow:hidden}
html[data-theme="light"] .iframe-wrap{background:#0f172a0f;border-color:rgba(2,6,23,.12)}
#mock{display:block;width:100%;height:620px;max-height:90vh;border:0;background:#0b0f14}
@media (max-width:960px){#mock{height:520px;max-height:85vh}}
.iframe-actions{margin-top:10px;display:flex;gap:12px;align-items:center;justify-content:center}
body.noscroll{overflow:hidden}
.iframe-wrap.is-theater{position:fixed;inset:1.5% 1.5%;width:97vw;height:97vh;z-index:1000;border-radius:18px;box-shadow:0 30px 120px rgba(0,0,0,.45);background:#0b0f14;border:1px solid rgba(255,255,255,.12)}
.iframe-wrap.is-theater>iframe{width:100%;height:calc(100vh - 0px)!important;border:0}

.pricing-horizontal{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:48px 0;border:1px solid rgba(255,255,255,.1);border-radius:24px;background:rgba(255,255,255,.02);overflow:hidden;clip-path:inset(0 round 24px)}
html[data-theme="light"] .pricing-horizontal{border-color:rgba(2,6,23,.10);background:rgba(2,6,23,.02)}
.price-col{position:relative;padding:32px 24px;display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease}
html[data-theme="light"] .price-col{border-right:1px solid rgba(2,6,23,.08);background:linear-gradient(180deg, rgba(2,6,23,.04), rgba(2,6,23,.02))}
.price-col:last-child{border-right:none}
.price-col:hover,.price-col:focus-within{border-color:rgba(14,165,233,.28);box-shadow:0 10px 40px rgba(14,165,233,.08) inset}
.price-header{text-align:center;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.08)}
html[data-theme="light"] .price-header{border-bottom:1px solid rgba(2,6,23,.08)}
.price-header h3{margin:0 0 16px;font-size:20px;letter-spacing:-.01em}
.price-amount{display:flex;align-items:baseline;justify-content:center;gap:8px}
.price-value{font-size:32px;font-weight:700;letter-spacing:-.02em}
.price-period{font-size:14px;color:var(--muted)}
.price-monthly{margin-top:8px;font-size:16px;color:var(--muted);font-weight:600}
.price-features{flex:1;padding:24px 0}
.price-desc{text-align:center;color:var(--muted);font-size:14px;margin:0 0 20px}
.price-features ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.price-features li{font-size:14px;color:var(--ink);padding-left:20px;position:relative}
.price-features li::before{content:"✓";position:absolute;left:0;color:var(--accent3);font-weight:700}
.price-action{padding-top:24px;text-align:center}
@media (max-width:1200px){.pricing-horizontal{grid-template-columns:repeat(2,1fr)} .price-col:nth-child(2n){border-right:none}}
@media (max-width:768px){.pricing-horizontal{grid-template-columns:1fr;margin:32px 0} .price-col{border-right:none;border-bottom:1px solid rgba(255,255,255,.08);padding:24px 16px} html[data-theme="light"] .price-col{border-bottom:1px solid rgba(2,6,23,.08)} .price-col:last-child{border-bottom:none}}

.comparison-table{margin-top:64px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:32px}
html[data-theme="light"] .comparison-table{background:rgba(2,6,23,.03);border-color:rgba(2,6,23,.10)}
.comparison-title{text-align:center;margin:0 0 32px;font-size:24px;font-weight:600;letter-spacing:-.01em}
.comparison-table table{width:100%;border-collapse:separate;border-spacing:0}
.comparison-table th{padding:16px 12px;text-align:center;font-size:14px;font-weight:600;border-bottom:2px solid rgba(255,255,255,.1);color:var(--ink)}
html[data-theme="light"] .comparison-table th{border-bottom:2px solid rgba(2,6,23,.10)}
.comparison-table th.feature-col{text-align:left;padding-left:0}
.comparison-table td{padding:16px 12px;text-align:center;font-size:14px;border-bottom:1px solid rgba(255,255,255,.05)}
html[data-theme="light"] .comparison-table td{border-bottom:1px solid rgba(2,6,23,.08)}
.comparison-table td.feature-name{text-align:left;padding-left:0;color:var(--muted);font-weight:500}
.comparison-table .check{color:var(--accent3);font-weight:700;font-size:18px}
.comparison-table .not{color:var(--muted);opacity:.6}
.comparison-note{text-align:center;margin-top:24px;font-size:13px;color:var(--muted)}
@media (max-width:768px){.comparison-table{padding:20px;overflow-x:auto} .comparison-table table{min-width:600px}}

.process-apple .wrap{text-align:center}
.process-apple .rail{position:relative;margin-top:40px;padding:22px 0 10px}
.process-apple .stages{display:grid;grid-template-columns:repeat(5,minmax(160px,1fr));gap:34px;align-items:start}
.process-apple .stage{text-align:left;margin-inline:auto;max-width:240px}
.process-apple .orb{
    width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-weight:800;
    color:#061008;background:radial-gradient(140% 140% at 28% 22%,var(--accent3),var(--accent));
    box-shadow:0 10px 30px rgba(14,165,233,.35), inset 0 1px 0 rgba(255,255,255,.25);
    transform:translateY(-12px);transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s
}
html[data-theme="light"] .process-apple .orb{
    color:#ffffff;background:radial-gradient(140% 140% at 28% 22%, var(--accent), var(--accent2));
    box-shadow:0 10px 26px rgba(2,132,199,.26), inset 0 1px 0 rgba(255,255,255,.35)
}
.process-apple .stage:hover .orb{transform:translateY(-16px);box-shadow:0 18px 50px rgba(14,165,233,.35), inset 0 1px 0 rgba(255,255,255,.3)}
.process-apple h3{margin:6px 0 6px;font-size:18px;letter-spacing:-.01em}
.process-apple .tag{display:inline-block;margin-bottom:8px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;color:#a7f3d0;background:#062131;border:1px solid rgba(167,243,208,.35)}
html[data-theme="light"] .process-apple .tag{color:#0b3b29;background:#d1fae524;border-color:#86efac80}
.process-apple .stage p{margin:0;color:var(--muted)}
.process-apple .security-callout{margin:28px auto 0;max-width:920px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:var(--ink);display:inline-flex;align-items:center;gap:10px}
html[data-theme="light"] .process-apple .security-callout{background:rgba(2,6,23,.04);border-color:rgba(2,6,23,.10)}
.process-apple .security-callout svg{width:18px;height:18px;color:var(--accent2);flex:0 0 auto}
.process-apple .stage.reveal{opacity:0;transform:translateY(14px)}
.process-apple .stage.reveal.visible{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--i,1)*.05s)}
@media (max-width:1280px){.process-apple .stages{grid-template-columns:repeat(3,minmax(200px,1fr));gap:28px}}
@media (max-width:1024px){.process-apple .stages{grid-template-columns:repeat(2,minmax(220px,1fr));gap:26px}}
@media (max-width:960px){
    .process-apple .stages{grid-template-columns:1fr;gap:28px}
    html[data-theme="light"] .process-apple .rail::before{background:linear-gradient(180deg,rgba(2,6,23,.04),rgba(14,165,233,.28),rgba(2,6,23,.04))}
    .process-apple .stage{max-width:560px;padding-left:88px;position:relative}
    .process-apple .stage .orb{position:absolute;left:4px;top:-2px;transform:none}
}
@media (max-width:420px){
    .process-apple .stage{padding-left:76px}
    .process-apple .stage .orb{width:48px;height:48px}
    .process-apple h3{font-size:17px;line-height:1.25}
    .process-apple .tag{font-size:11px;padding:3px 9px}
    .process-apple .stage p{font-size:14.5px}
}

.cta{padding:100px 0;background:var(--bg-a)}
.cta-box{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:28px;text-align:center;box-shadow:0 18px 60px rgba(0,0,0,.18)}
html[data-theme="light"] .cta-box{background:linear-gradient(180deg, rgba(2,6,23,.04), rgba(2,6,23,.02));border-color:rgba(2,6,23,.10)}
.inline-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:14px 0}
.inline-form input{background:var(--card);border:1px solid rgba(255,255,255,.18);color:var(--ink);border-radius:12px;padding:12px 14px;min-width:260px;outline:none}
html[data-theme="light"] .inline-form input{border-color:rgba(2,6,23,.18)}
.inline-form input:focus{box-shadow:var(--ring);border-color:#a7f3d0}

.faq-apple{
    position:relative;
    background:
            radial-gradient(ellipse 900px 420px at 8% -10%, rgba(134,239,172,.10), transparent 60%),
            radial-gradient(ellipse 900px 420px at 100% 10%, rgba(34,211,238,.10), transparent 60%),
            var(--bg-b);
    color:var(--ink);padding:96px 0;border-block:1px solid rgba(255,255,255,.06)
}
html[data-theme="light"] .faq-apple{border-block:1px solid rgba(2,6,23,.08)}
.faq-apple .section-title{letter-spacing:-.02em}
.faq-apple .section-subtitle{color:var(--muted)}
.faq-grid{margin-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr}}
.faq-item{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:0 14px;transition:border-color .25s ease, box-shadow .25s ease, transform .2s ease}
html[data-theme="light"] .faq-item{background:linear-gradient(180deg, rgba(2,6,23,.04), rgba(2,6,23,.02));border-color:rgba(2,6,23,.10)}
.faq-item:hover{border-color:rgba(255,255,255,.18);box-shadow:0 18px 60px rgba(0,0,0,.22);transform:translateY(-1px)}
html[data-theme="light"] .faq-item:hover{border-color:rgba(2,6,23,.20);box-shadow:0 18px 60px rgba(2,6,23,.08)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 4px;font-weight:600;outline:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{box-shadow:0 0 0 3px rgba(14,165,233,.35);border-radius:14px}
.faq-item .q{letter-spacing:.01em}
.faq-item .chev{flex:0 0 28px;width:28px;height:28px;display:grid;place-items:center;color:var(--muted);border:1px solid rgba(255,255,255,.14);border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));transition:transform .22s ease, background .22s ease, border-color .22s ease, color .22s ease}
html[data-theme="light"] .faq-item .chev{border-color:rgba(2,6,23,.14);background:linear-gradient(180deg, rgba(2,6,23,.05), rgba(2,6,23,.02))}
.faq-item .chev::before{content:"";width:12px;height:12px;background:currentColor;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.7 9.3a1 1 0 0 1 1.4 0L12 13.2l3.9-3.9a1 1 0 1 1 1.4 1.4l-4.6 4.6a1 1 0 0 1-1.4 0L6.7 10.7a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E");mask-repeat:no-repeat;mask-position:center;mask-size:contain;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.7 9.3a1 1 0 0 1 1.4 0L12 13.2l3.9-3.9a1 1 0 1 1 1.4 1.4l-4.6 4.6a1 1 0 0 1-1.4 0L6.7 10.7a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain}
.faq-item summary:hover .chev{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22);color:var(--ink)}
html[data-theme="light"] .faq-item summary:hover .chev{background:rgba(2,6,23,.07);border-color:rgba(2,6,23,.22)}
.faq-item[open] .chev{transform:rotate(180deg);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:var(--ink)}
html[data-theme="light"] .faq-item[open] .chev{background:rgba(2,6,23,.08);border-color:rgba(2,6,23,.28)}
.faq-item p{margin:0 0 16px;color:var(--muted);padding:0 4px 10px;border-top:1px solid rgba(255,255,255,.06)}
html[data-theme="light"] .faq-item p{border-top:1px solid rgba(2,6,23,.08)}
.faq-apple .btn.primary{background:linear-gradient(90deg,#86efac 0%, #22d3ee 50%, #a7f3d0 100%);color:#041106;box-shadow:0 10px 30px rgba(14,165,233,.18)}
.faq-cta{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

.modal{position:fixed;inset:0;display:none;z-index:80}
.modal[aria-hidden="false"]{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:saturate(120%) blur(8px);opacity:0;animation:fadeIn .25s ease forwards}

.modal-panel{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-46%) scale(.98);
    width:min(900px,92vw);max-height:84vh;overflow:auto;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.10);border-radius:var(--br);
    box-shadow:0 30px 120px rgba(0,0,0,.45);padding:24px 22px;opacity:0;
    animation:panelIn .28s cubic-bezier(.2,.6,.2,1) forwards;color:var(--ink)
}
html[data-theme="light"] .modal-panel{
    background:linear-gradient(180deg, rgba(2,6,23,.04), rgba(2,6,23,.02));
    border-color:rgba(2,6,23,.10);
    box-shadow:0 30px 120px rgba(2,6,23,.15)
}

.modal-header{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 10px;border-bottom:1px solid rgba(255,255,255,.06);margin:0 0 10px}
html[data-theme="light"] .modal-header{border-bottom:1px solid rgba(2,6,23,.08)}
.modal-header h2{margin:0;font-size:22px;letter-spacing:-.01em}

.modal-close{
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.06);
    color:var(--ink);
    border-radius:12px;cursor:pointer;padding:8px 12px;font-weight:700;line-height:1
}
html[data-theme="light"] .modal-close{border-color:rgba(2,6,23,.14);background:rgba(2,6,23,.05)}
.modal-close:hover{border-color:rgba(255,255,255,.24)}
html[data-theme="light"] .modal-close:hover{border-color:rgba(2,6,23,.24)}

.modal-content{color:var(--muted);font-size:14px;line-height:1.8;padding:8px 4px 6px}
.modal-content a{color:var(--accent);text-decoration:none}
.modal-content a:hover{text-decoration:underline}

@keyframes fadeIn{to{opacity:1}}
@keyframes panelIn{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

#modal-brief .modal-panel{
    width:min(980px,92vw);border-radius:24px;border:1px solid rgba(255,255,255,.12);
    background:
            radial-gradient(900px 320px at 6% -10%, rgba(134,239,172,.10), transparent 60%),
            radial-gradient(700px 280px at 100% 0%, rgba(34,211,238,.08), transparent 60%),
            linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    box-shadow:0 30px 120px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
    padding:22px 22px 18px
}
html[data-theme="light"] #modal-brief .modal-panel{
    border-color:rgba(2,6,23,.12);
    background:
            radial-gradient(900px 320px at 6% -10%, rgba(14,165,233,.08), transparent 60%),
            radial-gradient(700px 280px at 100% 0%, rgba(2,132,199,.08), transparent 60%),
            linear-gradient(180deg, rgba(2,6,23,.04), rgba(2,6,23,.02));
    box-shadow:0 30px 120px rgba(2,6,23,.25), inset 0 1px 0 rgba(255,255,255,.04)
}

#modal-brief .modal-header{border-bottom:1px solid rgba(255,255,255,.06);margin:0 0 14px;padding:8px 6px 12px 6px}
html[data-theme="light"] #modal-brief .modal-header{border-bottom:1px solid rgba(2,6,23,.08)}
#modal-brief .modal-header h2{margin:0;font-size:24px;letter-spacing:-.01em}

.brief-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.brief-intro{color:var(--muted);margin:6px 0 16px}

#brief-form{display:grid;gap:16px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:900px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field .lbl{font-weight:700;color:var(--ink);font-size:13px}
.span-2{grid-column:1 / -1}

#modal-brief .ctrl,
#modal-brief .input,
#modal-brief .select,
#modal-brief .textarea{
    width:100%;background:var(--card);
    border:1px solid rgba(255,255,255,.18);color:var(--ink);
    border-radius:12px;padding:12px 12px;outline:none;transition:border-color .2s, box-shadow .2s, background .2s
}
html[data-theme="light"] #modal-brief .ctrl,
html[data-theme="light"] #modal-brief .input,
html[data-theme="light"] #modal-brief .select,
html[data-theme="light"] #modal-brief .textarea{border-color:rgba(2,6,23,.18)}
#modal-brief .ctrl:focus,
#modal-brief .input:focus,
#modal-brief .select:focus,
#modal-brief .textarea:focus{box-shadow:var(--ring);border-color:#a7f3d0}
#modal-brief .textarea{min-height:110px;resize:vertical}
#modal-brief select.ctrl{
    appearance:none;padding-right:38px;
    background-image:linear-gradient(45deg, transparent 46%, #94a3b8 46%), linear-gradient(-45deg, transparent 46%, #94a3b8 46%);
    background-position:right 16px center, right 8px center;background-size:10px 10px;background-repeat:no-repeat
}

.chips,.chipset{display:flex;flex-wrap:wrap;gap:8px}
.chip-check,.chip-radio{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.chip-check input,.chip-radio input{position:absolute;opacity:0;pointer-events:none}
.chip-check span,.chip-radio span{
    display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--ink);transition:.18s ease
}
html[data-theme="light"] .chip-check span,
html[data-theme="light"] .chip-radio span{background:rgba(2,6,23,.04);border-color:rgba(2,6,23,.12)}
.chip-check input:focus-visible + span,.chip-radio input:focus-visible + span{box-shadow:0 0 0 3px rgba(14,165,233,.35)}
.chip-check input:checked + span,.chip-radio input:checked + span{border-color:rgba(14,165,233,.55);background:linear-gradient(180deg, rgba(14,165,233,.18), rgba(255,255,255,.04));color:var(--ink)}

#modal-brief .check{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:12px;color:var(--muted)}
html[data-theme="light"] #modal-brief .check{background:rgba(2,6,23,.04);border-color:rgba(2,6,23,.10)}

#modal-brief .actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;padding-top:14px;margin-top:4px;border-top:1px solid rgba(255,255,255,.06)}
html[data-theme="light"] #modal-brief .actions{border-top:1px solid rgba(2,6,23,.08)}
#modal-brief .actions .btn{min-width:180px}
#modal-brief .hp{position:absolute;left:-9999px}


.footer{border-top:1px solid rgba(255,255,255,.06);padding:28px 0;color:var(--muted);background:rgba(255,255,255,.02)}
html[data-theme="light"] .footer{border-top:1px solid rgba(2,6,23,.08);background:rgba(2,6,23,.02)}
.footer-inner{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.footer .brand-row{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--ink)}
.footer .logo{width:22px;height:22px}
.footer-links a{color:var(--link);margin-right:14px;text-decoration:none}
.footer-links a:hover{color:var(--ink)}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease, transform .7s ease}
.reveal.visible{opacity:1;transform:none}
.tilt{transition:transform .12s ease, box-shadow .2s}
.tilt:hover{transform:perspective(800px) rotateX(2deg) rotateY(-2deg) translateY(-2px)}

@media (max-width:960px){
    .hide-sm{display:initial}
    .split .split-grid{grid-template-columns:1fr}
    .hero .devices .device{opacity:.28;transform:translateY(22px)}
}

.bad-vs-good{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.bad-vs-good li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 14px}
html[data-theme="light"] .bad-vs-good li{background:rgba(2,6,23,.04);border-color:rgba(2,6,23,.10)}
.bad-vs-good li span{display:inline-block;background:#2a1717;border:1px solid rgba(255,255,255,.1);color:#fecaca;padding:2px 8px;border-radius:999px;margin-right:8px}
html[data-theme="light"] .bad-vs-good li span{background:#fee2e2;color:#7f1d1d;border-color:#fecaca}

.brand-epilogue{padding-top:40px;padding-bottom:60px}
.brand-epilogue .epilogue{max-width:920px;margin:0 auto;text-align:center;color:var(--muted);font-size:14.5px;line-height:1.7;background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(14,165,233,.25), rgba(255,255,255,.06));-webkit-background-clip:text;background-clip:text}
.brand-epilogue .epilogue .spark{display:inline-block;margin-right:8px;transform:translateY(-1px);color:var(--accent2);filter:drop-shadow(0 2px 8px rgba(34,211,238,.35))}

.container{padding-inline:clamp(14px,3vw,24px)}
.section{padding-block:clamp(56px,10vw,100px)}
@media (max-width:980px){
    header.nav#nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 2000;
    }

    .nav .nav-links{
        display:none !important;
    }

    .nav.open .nav-links{
        display:flex !important;
        position:fixed; left:0; right:0; top:var(--navH,64px);
        margin:0 12px; padding:12px; flex-direction:column; gap:6px;
        background:var(--card,#fff);
        border:1px solid rgba(2,6,23,.06);
        border-radius:16px;
        box-shadow:0 14px 40px rgba(2,6,23,.14);
        max-height:min(70vh, calc(100vh - var(--navH,64px) - 12px));
        overflow:auto; -webkit-overflow-scrolling:touch;
        z-index:2100;
    }
}

@media (max-width:420px){
    .nav.open .nav-links{ margin-inline:8px; padding:10px }
}
@media (max-width:1024px){.split .split-grid{grid-template-columns:1fr;gap:20px} .split .art{order:2;text-align:center} .split .art .card-img{max-width:760px;margin-inline:auto}}
.module-grid{grid-template-columns:repeat(auto-fit, minmax(220px,1fr))}
@media (max-width:360px){.module-grid{grid-template-columns:1fr}}
#mock{height:clamp(420px,65vh,700px)}
@media (max-width:960px){#mock{height:clamp(420px,72vh,640px)}}
@media (max-width:1200px){.price-col{padding:28px 18px}}
@media (max-width:768px){.price-col{padding:22px 16px}}
@media (max-width:420px){.comparison-table{padding:16px} .comparison-table table{min-width:560px}}
@media (max-width:420px){.inline-form{gap:8px} .inline-form input{min-width:200px;width:100%} .inline-form .btn{width:100%}}
@media (max-width:480px){.faq-item summary{padding:16px 2px}}
.footer .footer-inner{row-gap:10px}
.footer .footer-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
img,svg,video{max-width:100%;height:auto}
iframe{max-width:100%}

.nav-toggle{appearance:none;border:0;background:transparent;cursor:pointer;width:44px;height:44px;display:none;place-items:center;border-radius:12px}
.nav-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.nav-toggle .bars{position:relative;width:22px;height:16px}
.nav-toggle .bars::before,.nav-toggle .bars::after,.nav-toggle .bar{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s ease, opacity .2s ease, top .25s ease}
.nav-toggle .bar{top:7px}
.nav-toggle .bars::before{top:0}
.nav-toggle .bars::after{top:14px}
.nav.open .nav-toggle .bars::before{top:7px;transform:rotate(45deg)}
.nav.open .nav-toggle .bars::after{top:7px;transform:rotate(-45deg)}
.nav.open .nav-toggle .bar{opacity:0}
@media (max-width:980px){
    .nav-toggle{display:grid}
    header.nav#nav{
        display:flex;align-items:center;justify-content:space-between;
        position:sticky;top:0;z-index:2000;overflow:visible
    }
    .nav .nav-links{
        position:fixed;left:0;right:0;top:var(--navH,64px);margin:0 12px;
        display:flex;flex-direction:column;gap:6px;
        border:1px solid rgba(2,6,23,.06);border-radius:16px;background:var(--card,#fff);
        box-shadow:0 14px 40px rgba(2,6,23,.14);
        max-height:0;overflow:hidden;transition:max-height .28s ease;z-index:2100;padding:12px
    }
    .nav .nav-links a{padding:10px 12px;border-radius:10px;display:block}
    .nav .nav-links a.btn{text-align:center}
    .nav.open .nav-links{
        max-height:min(70vh, calc(100vh - var(--navH,64px) - 12px));
        overflow:auto;-webkit-overflow-scrolling:touch
    }
    body.menu-open{overflow:hidden}
}
@media (max-width:420px){
    .nav .nav-links{margin-inline:8px;padding:10px}
}
.theme-toggle{
    appearance:none;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
    color:var(--ink);border-radius:12px;cursor:pointer;width:40px;height:40px;
    display:grid;place-items:center;transition:.2s;margin-left:8px
}
html[data-theme="light"] .theme-toggle{
    border-color:rgba(2,6,23,.14);background:rgba(2,6,23,.05)
}
.theme-toggle .icon-sun,.theme-toggle .icon-moon{width:18px;height:18px;display:none}
html[data-theme="light"] .theme-toggle .icon-sun{display:block}
html[data-theme="dark"]  .theme-toggle .icon-moon{display:block}

.aud-grid{
    list-style:none;margin:20px 0 10px;padding:0;
    display:grid;gap:14px;grid-template-columns:repeat(2,minmax(260px,1fr))
}
@media (max-width:900px){ .aud-grid{grid-template-columns:1fr} }
.aud-card{
    position:relative; display:flex; gap:12px; align-items:flex-start;
    padding:14px; border-radius:16px;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.12);
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
html[data-theme="light"] .aud-card{
    background:linear-gradient(180deg, rgba(2,6,23,.04), rgba(2,6,23,.02));
    border-color:rgba(2,6,23,.12);
}
.aud-card:hover{
    transform:translateY(-2px);
    border-color:rgba(14,165,233,.35);
    box-shadow:0 10px 30px rgba(14,165,233,.10);
}
.aud-icon{
    flex:0 0 38px; width:38px; height:38px; border-radius:12px;
    display:grid; place-items:center; color:#062016;
    background:linear-gradient(135deg, var(--accent3), var(--accent2));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 6px 18px rgba(14,165,233,.25);
}
html[data-theme="dark"] .aud-icon{ color:#061008 }
.aud-icon svg{ width:20px; height:20px }
.aud-copy strong{ display:block; font-weight:800; letter-spacing:-.01em; margin-top:1px }
.aud-copy span{ display:block; color:var(--muted); font-size:14.5px; margin-top:2px }
.aud-illustration{
    width:100%; border-radius:20px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.04);
    box-shadow:0 18px 50px rgba(0,0,0,.16)
}
html[data-theme="light"] .aud-illustration{
    background:rgba(2,6,23,.03); border-color:rgba(2,6,23,.12)
}
.mini-note{ margin-top:10px; color:var(--muted); font-size:14px }

.aud-card{ opacity:0; transform:translateY(18px) }
.aud-card.reveal-visible{
    opacity:1; transform:translateY(0);
    transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1)
}

@media (max-width: 820px){
    html[data-theme="light"] .nav.blur{
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(255,255,255,.96);
    }
    html[data-theme="light"] body::before,
    html[data-theme="light"] body::after{ display:none }
    .hero .devices::after{ background:none !important }
    html[data-theme="light"] .hero{ overflow:visible }
}

header.nav{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
}

@media (min-width:981px){
    .nav-links{ margin-left:auto; }
}

@media (max-width:980px){
    .nav-links{ display:none !important; }

    #theme-toggle{ margin-left:auto; }

    .nav-toggle{ margin-left:8px; }
}

html[data-theme="light"] .modal-backdrop{
    background: rgba(2, 6, 23, .28);
}

html[data-theme="light"] .modal-panel{
    background: #ffffff !important;
    border: 1px solid rgba(2, 6, 23, .10) !important;
    box-shadow: 0 24px 96px rgba(2, 6, 23, .18) !important;
    color: #0b1016 !important;
    mix-blend-mode: normal !important;
    filter: none !important;
    isolation: isolate;
}

html[data-theme="light"] .modal-header h2{ color:#0b1016 }
html[data-theme="light"] .modal-content{ color:#334155 }
html[data-theme="light"] .modal-content a{ color:#0ea5e9 }

html[data-theme="light"] .modal-close{
    background: rgba(2,6,23,.04);
    border-color: rgba(2,6,23,.14);
    color: #0b1016;
}
html[data-theme="light"] .modal-close:hover{
    border-color: rgba(2,6,23,.24);
}

html[data-theme="light"] #modal-brief .modal-panel{
    position: relative;
    background:
            radial-gradient(900px 320px at 6% -10%, rgba(14,165,233,.08), transparent 60%),
            radial-gradient(700px 280px at 100% 0%, rgba(2,132,199,.08), transparent 60%),
            #ffffff !important;
}
html[data-theme="light"] #modal-brief .modal-panel::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0));
    border-radius: inherit;
}