:root{
  --paper:#FAF9F4;--paper-2:#F2F0E8;--card:#FFFFFF;
  --ink:#152233;--muted:#6B7A8C;--line:#E3E0D6;
  --bench:#0D1B2A;--bench-2:#13273B;--bench-line:#24405C;
  --led:#FFB020;--ready:#2FBF71;--danger:#B4462F;--hero-t:#C4CFDB;
  --disp:'Space Grotesk',system-ui,sans-serif;
  --body:'Manrope',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
[data-theme="dark"]{
  --paper:#0D1B2A;--paper-2:#0A1522;--card:#13273B;
  --ink:#E8EFF6;--muted:#93A6BA;--line:#24405C;
  --bench:#08121D;--bench-2:#0F2032;--bench-line:#1E3450;--hero-t:#AABACB;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.65;transition:background .3s,color .3s}
a{color:inherit}
::selection{background:var(--led);color:#0D1B2A}

/* NAV */
nav{position:sticky;top:0;z-index:50;background:rgba(13,27,42,.94);backdrop-filter:blur(10px);color:#fff;border-bottom:1px solid rgba(255,255,255,.06)}
[data-theme="dark"] nav{background:rgba(6,14,23,.94)}
.nav-in{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:24px;padding:11px 24px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo img{width:40px;height:40px;border-radius:11px;box-shadow:0 0 14px rgba(0,230,118,.35)}
.logo .nm{font-family:var(--disp);font-weight:700;font-size:1.06rem;letter-spacing:.03em}
.logo .nm b{color:var(--led)}
.nav-links{display:flex;gap:18px;margin-left:auto;font-size:.88rem}
.nav-links a{text-decoration:none;opacity:.72;transition:opacity .2s;padding:4px 2px;border-bottom:2px solid transparent}
.nav-links a:hover{opacity:1}
.nav-links a.on{opacity:1;color:var(--led);border-bottom-color:var(--led)}
.theme-btn{width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font-size:1rem;cursor:pointer;display:grid;place-items:center}
.theme-btn:hover{background:rgba(255,255,255,.14)}
.nav-cta{background:var(--led);color:#0D1B2A;font-weight:800;font-size:.84rem;padding:9px 16px;border-radius:9px;text-decoration:none;white-space:nowrap}
@media(max-width:860px){.nav-links{display:none}}

/* PAGE HEAD (subsahifalar) */
.page-head{background:var(--bench);color:#fff;padding:56px 24px;transition:background .3s;position:relative;overflow:hidden}
.page-head::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 64px)}
.page-head .wrap{position:relative}
.page-head .eyebrow{color:var(--led)}
.page-head h1{font-family:var(--disp);font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:-.01em}
.page-head p{color:#9FB0C2;max-width:38rem;margin-top:12px}
.crumb{font-family:var(--mono);font-size:.72rem;color:#7E93A9;margin-bottom:14px}
.crumb a{color:var(--led);text-decoration:none}

/* HERO (bosh sahifa) */
.hero{background:var(--bench);color:#fff;overflow:hidden;position:relative;transition:background .3s}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(700px 380px at 76% 32%,rgba(255,176,32,.10),transparent 65%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 64px)}
.hero-in{position:relative;max-width:1120px;margin:0 auto;padding:70px 24px 80px;display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center}
.eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#9A6A00;margin-bottom:12px}
.hero .eyebrow{color:var(--led)}
[data-theme="dark"] .eyebrow{color:var(--led)}
h1.big{font-family:var(--disp);font-weight:700;font-size:clamp(2rem,4.4vw,3.3rem);line-height:1.09;letter-spacing:-.015em}
h1.big em{font-style:normal;color:var(--led)}
.hero p.lead{margin:20px 0 28px;font-size:1.06rem;color:var(--hero-t);max-width:33rem}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.btn{font-weight:800;font-size:.94rem;padding:13px 24px;border-radius:11px;text-decoration:none;transition:transform .15s;display:inline-block}
.btn:hover{transform:translateY(-2px)}
.btn-led{background:var(--led);color:#0D1B2A}
.btn-ghost{border:1.5px solid rgba(255,255,255,.3);color:#fff}
.btn-line{border:1.5px solid var(--line);color:var(--ink)}
.hero-stats{display:flex;gap:32px;margin-top:40px;flex-wrap:wrap}
.hstat b{font-family:var(--disp);font-size:1.4rem;display:block;color:var(--led)}
.hstat span{font-size:.78rem;color:#8FA0B3}
@media(max-width:900px){.hero-in{grid-template-columns:1fr;padding:50px 24px 58px}}

/* iPhone 15 Pro maketi + splash */
.iphone{justify-self:center;width:290px;height:596px;border-radius:52px;position:relative;
  background:linear-gradient(145deg,#5b5e63,#2c2e31 40%,#494c50);
  padding:11px;box-shadow:0 30px 70px rgba(0,0,0,.55),inset 0 0 4px rgba(255,255,255,.25)}
.iphone::before{content:"";position:absolute;left:-3px;top:120px;width:3px;height:30px;border-radius:2px;background:#3a3c40}
.iphone::after{content:"";position:absolute;left:-3px;top:165px;width:3px;height:56px;border-radius:2px;background:#3a3c40;box-shadow:0 66px 0 #3a3c40, 176px -60px 0 #3a3c40}
.screen{width:100%;height:100%;border-radius:42px;background:#08150E;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}
.di{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:96px;height:26px;border-radius:16px;background:#000}
.splash-logo{width:120px;height:120px;border-radius:28px;animation:logoIn .9s cubic-bezier(.2,.8,.3,1.2) both,glow 2.6s ease-in-out 1s infinite}
@keyframes logoIn{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 10px rgba(0,230,118,.35))}50%{filter:drop-shadow(0 0 26px rgba(0,230,118,.75))}}
.splash-name{margin-top:22px;font-family:var(--disp);font-weight:700;font-size:1.15rem;color:#E9F6EE;letter-spacing:.04em;opacity:0;animation:nameIn .7s ease .7s both}
.splash-name b{color:#00E676}
@keyframes nameIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dots{display:flex;gap:8px;margin-top:26px}
.dots i{width:7px;height:7px;border-radius:50%;background:#00E676;opacity:.25;animation:dot 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,100%{opacity:.25}50%{opacity:1}}
.splash-ver{position:absolute;bottom:26px;font-family:var(--mono);font-size:.6rem;color:#3E6B50}
@media(prefers-reduced-motion:reduce){
  .splash-logo,.splash-name,.dots i{animation:none;opacity:1}
  .rv{opacity:1 !important;transform:none !important;transition:none}
  .btn:hover{transform:none}html{scroll-behavior:auto}
}

/* SECTIONS */
section{padding:72px 24px}
.wrap{max-width:1120px;margin:0 auto}
h2{font-family:var(--disp);font-weight:700;font-size:clamp(1.5rem,2.9vw,2.15rem);letter-spacing:-.01em;margin-bottom:13px}
.sec-lead{color:var(--muted);max-width:39rem;margin-bottom:40px}
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}

/* SKRINSHOT ramkasi */
.shot{margin:34px 0 8px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bench);box-shadow:0 20px 46px rgba(13,27,42,.16)}
.shot img{display:block;width:100%;height:auto}
.shot-bar{display:flex;align-items:center;gap:7px;padding:10px 16px;background:var(--bench-2);border-bottom:1px solid var(--bench-line)}
.shot-bar i{width:10px;height:10px;border-radius:50%;background:#3E5A78}
.shot-bar i:first-child{background:var(--danger)}
.shot-bar i:nth-child(2){background:var(--led)}
.shot-bar i:nth-child(3){background:var(--ready)}
.shot-bar span{font-family:var(--mono);font-size:.68rem;color:#8FA0B3;margin-left:8px}
.shot-cap{font-family:var(--mono);font-size:.7rem;color:var(--muted);margin:10px 2px 0}
.shot-pair{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.shot-phone{max-width:330px;margin:34px auto 8px}
@media(max-width:760px){.shot-pair{grid-template-columns:1fr}}

/* COMPARE */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:760px){.compare{grid-template-columns:1fr}}
.cmp{border-radius:14px;padding:28px}
.cmp h3{font-family:var(--disp);font-size:1.05rem;margin-bottom:14px}
.cmp ul{list-style:none;display:grid;gap:10px;font-size:.93rem}
.cmp li{padding-left:24px;position:relative}
.cmp-old{background:var(--paper-2);border:1px solid var(--line);color:var(--muted)}
.cmp-old li::before{content:"✕";position:absolute;left:0;color:var(--danger);font-weight:700}
.cmp-new{background:var(--bench);color:#DCE6F0}
.cmp-new h3{color:#fff}
.cmp-new li::before{content:"✓";position:absolute;left:0;color:var(--ready);font-weight:700}

/* CARDS */
.band{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .3s}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.grid3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid3{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:25px 23px;transition:transform .18s,box-shadow .18s,background .3s}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(21,34,51,.1)}
.card .ic{width:44px;height:44px;border-radius:11px;background:var(--bench);color:var(--led);display:grid;place-items:center;font-size:1.15rem;margin-bottom:15px;font-family:var(--mono)}
.card h3{font-family:var(--disp);font-size:1rem;margin-bottom:7px}
.card p{font-size:.88rem;color:var(--muted)}

/* ROLES */
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:860px){.roles{grid-template-columns:1fr}}
.role{border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}
.role .rt{padding:13px 18px;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;display:flex;justify-content:space-between}
.role .rt small{opacity:.7;text-transform:none;letter-spacing:0}
.r1 .rt{background:#274B72}.r2 .rt{background:#8A5A00}.r3 .rt{background:#1E7A4E}
.role .rb{padding:19px 18px}
.role h3{font-family:var(--disp);font-size:1.04rem;margin-bottom:9px}
.role ul{list-style:none;display:grid;gap:7px;font-size:.86rem;color:var(--muted)}
.role li::before{content:"— ";color:var(--led)}

/* STEPS */
.dark-sec{background:var(--bench);color:#E6EDF5;transition:background .3s}
.dark-sec h2{color:#fff}
.dark-sec .sec-lead{color:#9FB0C2}
.steps{display:grid;gap:15px;counter-reset:step}
.step{display:grid;grid-template-columns:60px 1fr;gap:20px;background:var(--bench-2);border:1px solid var(--bench-line);border-radius:14px;padding:23px 25px}
.step .num{counter-increment:step;font-family:var(--mono);font-size:1.4rem;color:var(--led)}
.step .num::before{content:"0" counter(step)}
.step h3{font-family:var(--disp);font-size:1.06rem;color:#fff;margin-bottom:7px}
.step p{font-size:.91rem;color:#B7C5D4}
.step code{font-family:var(--mono);font-size:.8rem;background:#0A1420;border:1px solid #2A4560;padding:2px 8px;border-radius:6px;color:var(--led)}
@media(max-width:560px){.step{grid-template-columns:1fr;gap:8px}}
.wizard{margin-top:30px;background:var(--bench-2);border:1px solid var(--bench-line);border-radius:14px;padding:21px 24px}
.wizard h3{font-family:var(--disp);font-size:.96rem;color:#fff;margin-bottom:13px}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{font-family:var(--mono);font-size:.69rem;padding:6px 12px;border-radius:8px;background:#0A1420;border:1px solid #2A4560;color:#B7C5D4}
.chip.hi{border-color:var(--led);color:var(--led)}
.chips .sep{color:#4E6A88;font-size:.8rem}
.flow{display:flex;align-items:center;flex-wrap:wrap;margin-top:32px;justify-content:center;gap:2px}
.fn{font-family:var(--mono);font-size:.72rem;padding:8px 15px;border-radius:30px;border:1.5px solid #33506F;color:#C9D6E4;background:#10202F;white-space:nowrap}
.fn.on{border-color:var(--ready);color:var(--ready)}
.fa{color:#4E6A88;padding:0 9px}

/* FAQ */
details{border:1px solid var(--line);border-radius:12px;background:var(--card);margin-bottom:12px}
summary{cursor:pointer;padding:17px 22px;font-weight:700;font-family:var(--disp);font-size:.96rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.3rem;color:var(--led);flex-shrink:0;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 22px 19px;font-size:.91rem;color:var(--muted)}

/* CTA */
.cta-sec{background:var(--bench);color:#fff;text-align:center;transition:background .3s}
.cta-sec h2{color:#fff}
.cta-sec .sec-lead{margin:0 auto 28px;text-align:center;color:#9FB0C2}
.next{display:flex;justify-content:space-between;gap:14px;max-width:1120px;margin:0 auto;padding:26px 24px;flex-wrap:wrap}
.next a{text-decoration:none;font-family:var(--disp);font-weight:700;color:var(--muted)}
.next a b{color:var(--led)}

footer{background:#0A1522;color:#8FA0B3;padding:32px 24px;font-size:.82rem}
.foot-in{max-width:1120px;margin:0 auto;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.foot-in .fl{display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--disp);font-weight:700}
.foot-in img{width:30px;height:30px;border-radius:8px}
.foot-nav{display:flex;gap:16px;font-size:.78rem}
.foot-nav a{text-decoration:none;opacity:.7}
.foot-nav a:hover{opacity:1}