/* 03 Dark Blue: deep navy, cold reflections, cinematic light, dark glass; Manrope 300–500 (from the approved hero). */
.s-dark-blue{
  --bg:#030711; --ink:#f7f9ff; --mute:#9fabc2; --dim:#6f7d97; --blue:#72a8ff; --deep:#0a1430;
  --glass:rgba(16,26,48,.42); --gline:rgba(210,228,255,.14);
  --f:"Manrope",-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
  --pad:max(clamp(16px,4.5vw,72px),env(safe-area-inset-left,0px)); --padr:max(clamp(16px,4.5vw,72px),env(safe-area-inset-right,0px));
  background:var(--bg);color:var(--ink);font-family:var(--f);letter-spacing:-.01em;
}
.s-dark-blue :focus-visible{outline:2px solid #9cc5ff;outline-offset:4px;border-radius:8px}

/* nav (approved) */
.db-nav{position:fixed;inset:0 0 auto;z-index:50;padding-top:env(safe-area-inset-top,0px);background:rgba(11,18,32,.76);border-bottom:1px solid rgba(210,228,255,.15);backdrop-filter:blur(28px) saturate(145%);-webkit-backdrop-filter:blur(28px) saturate(145%);box-shadow:0 8px 32px rgba(0,0,0,.14),inset 0 1px rgba(255,255,255,.035)}
.db-nav-in{height:62px;display:flex;align-items:center;gap:32px;padding-left:var(--pad);padding-right:var(--padr)}
.db-brand{margin-right:auto;color:#fff}
.db-brand .logo{height:20px}
.db-links{display:flex;gap:32px;font-size:12px;color:#c7cfdf}
.db-links button{position:relative;padding:12px 0;transition:color .25s}
.db-links button::after{content:"";position:absolute;bottom:5px;left:0;right:0;height:1px;background:#a6c7ff;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.db-links button:hover{color:#fff}
.db-links button:hover::after{transform:scaleX(1)}
.db-links i{display:inline-block;width:4px;height:4px;margin:0 0 3px 5px;border-radius:50%;background:#8ebcff;box-shadow:0 0 9px #71a6ff}
.db-nav-cta{display:inline-flex;align-items:center;gap:14px;height:38px;padding:0 15px;border:1px solid rgba(219,233,255,.21);border-radius:10px;background:linear-gradient(115deg,rgba(177,208,255,.13),rgba(255,255,255,.03));font-size:12px;white-space:nowrap;transition:background .25s,border-color .25s}
.db-nav-cta:hover{background:rgba(167,202,255,.14);border-color:rgba(170,203,255,.4)}

/* hero (approved composition, new copy) */
.db-hero{position:relative;height:100svh;min-height:680px;max-height:1200px;overflow:hidden;isolation:isolate}
.db-pan,.db-shade,.db-particles{position:absolute;inset:0;pointer-events:none}
.db-pan{inset:-2%;z-index:-3;transform:translate3d(var(--sx,0px),var(--sy,0px),0);transition:transform 1.8s var(--ease);animation:dbScene 2.5s var(--ease) both}
.db-pan img{width:100%;height:100%;object-fit:cover;filter:saturate(.92)}
.db-shade{z-index:-2;background:radial-gradient(ellipse at 69% 32%,transparent 20%,rgba(1,4,12,.24) 100%),linear-gradient(90deg,rgba(2,5,13,.7) 0%,rgba(2,5,13,.42) 32%,rgba(2,5,13,.04) 70%),linear-gradient(0deg,#030711 1%,rgba(3,7,17,.88) 12%,rgba(3,7,17,.28) 47%,rgba(3,7,17,.02) 73%,rgba(3,7,17,.22) 100%)}
.db-particles{z-index:-1;width:100%;height:100%;opacity:.7}
.db-hero-content{position:absolute;left:4.5%;right:4.5%;bottom:clamp(120px,14vh,154px);max-width:1600px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.62fr);align-items:center;column-gap:clamp(40px,5vw,90px)}
.db-hero h1{font-size:clamp(56px,6.6vw,108px);line-height:1.04;letter-spacing:-.07em;font-weight:450;margin-left:-5px}
.db-tl{display:block}
.db-tl>span{display:block;width:fit-content;white-space:nowrap;padding-bottom:.17em;margin-bottom:-.17em;transform-origin:0 100%;animation:dbTitle 1.5s var(--ease) var(--d) both}
.db-grad{background:linear-gradient(110deg,#f8fbff 0%,#e5edff 35%,#afc4e9 72%,#7eacec 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.db-grad em{font-style:normal;color:#85b1ff;-webkit-text-fill-color:#85b1ff;text-shadow:0 0 35px rgba(85,149,255,.21)}
.db-detail{max-width:450px;translate:clamp(20px,3vw,48px) 82px}
.db-detail p{max-width:420px;margin-bottom:24px;font-size:14px;line-height:1.9;letter-spacing:-.15px;color:#d0d7e5}
.db-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.db-primary,.db-secondary{display:inline-flex;align-items:center;min-height:48px;border-radius:9px;font-size:11px;white-space:nowrap}
.db-primary{position:relative;isolation:isolate;gap:13px;padding:6px 6px 6px 18px;background:linear-gradient(115deg,#f4f7fe,#dce8fd);border:1px solid #d9e6ff;color:#142139;font-weight:650;box-shadow:0 0 28px rgba(90,145,237,.13),inset 0 1px #fff;transition:box-shadow .4s,transform .4s}
.db-primary::before{content:"";position:absolute;inset:-2px;border-radius:11px;padding:1px;background:conic-gradient(from var(--dba),transparent 0deg,transparent 200deg,#639aff 260deg,#e0f3ff 290deg,transparent 330deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:dbOrbitB 5s linear infinite;pointer-events:none}
.db-primary:hover{box-shadow:0 0 45px rgba(107,158,255,.25);transform:translateY(-3px)}
.db-primary i{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(20,33,57,.09);border-radius:7px}
.db-secondary{gap:10px;padding:0 16px;color:#d8e1f2;border:1px solid rgba(219,233,255,.2);background:rgba(20,30,48,.36);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);transition:background .25s,border-color .25s}
.db-secondary:hover{background:rgba(165,196,245,.12);border-color:rgba(180,207,249,.42)}
.db-hero-foot{position:absolute;left:4.5%;right:4.5%;bottom:28px;max-width:1600px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:24px;border-top:1px solid rgba(169,201,255,.13);font-size:9px;letter-spacing:1.35px;color:#7f8da6}
.db-caps{display:flex;align-items:center;gap:18px;font-size:10px;letter-spacing:.3px;color:#a1afc7}
.db-caps i{width:3px;height:3px;border-radius:50%;background:#57759f}
.db-live{display:flex;align-items:center;gap:8px}
.db-live::before{content:"";width:4px;height:4px;border-radius:50%;background:#8fb8f5;box-shadow:0 0 9px #6097fa}
.db-reveal{animation:dbReveal 1.35s var(--ease) var(--d,0ms) both}
@property --dba{syntax:'<angle>';initial-value:0deg;inherits:false}

/* chaos → beams */
.db-simple{height:260vh}
.db-pin{position:sticky;top:0;height:100vh;overflow:hidden}
.db-field{position:absolute;inset:0;width:100%;height:100%}
.db-simple-copy{position:absolute;left:var(--pad);right:var(--padr);top:clamp(96px,16vh,170px)}
.db-simple-copy h2{font-size:clamp(40px,5.6vw,96px);line-height:1.02;letter-spacing:-.055em;font-weight:400;max-width:11ch;margin-bottom:28px}
.db-pills{display:flex;flex-wrap:wrap;gap:10px}
.db-pills span{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 18px 0 14px;border-radius:999px;background:var(--glass);border:1px solid var(--gline);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:14px;color:var(--mute);opacity:.35;transform:translateY(10px);transition:opacity .7s,transform .7s var(--ease),color .7s}
.db-pills b{width:8px;height:8px;border-radius:50%;background:#3a4a6b;transition:background .6s,box-shadow .6s}
.db-pills span.on{opacity:1;transform:none;color:var(--ink)}
.db-pills span.on b{background:#cfe0ff;box-shadow:0 0 12px #6fa2ff}

/* horizontal film */
.db-eco{position:relative}
.db-eco-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding-top:62px}
.db-track{display:flex;gap:24px;padding-left:var(--pad);padding-right:var(--padr);will-change:transform;align-items:stretch}
.db-panel{position:relative;flex:none;width:min(1120px,80vw);height:min(70vh,700px);border-radius:32px;overflow:hidden;isolation:isolate;border:1px solid var(--gline)}
.db-intro{width:min(520px,46vw);border:0;display:flex;flex-direction:column;justify-content:center;gap:16px;padding-right:20px}
.db-intro h2{font-size:clamp(38px,4.4vw,74px);line-height:1.02;letter-spacing:-.055em;font-weight:400;margin-bottom:12px}
.db-intro h2 span{color:var(--blue)}
.db-intro p{color:var(--mute);font-size:16px;line-height:1.7;max-width:420px}
.db-ghost{align-self:flex-start;display:inline-flex;align-items:center;gap:12px;height:46px;padding:0 18px;margin-top:10px;border-radius:999px;border:1px solid var(--gline);background:var(--glass);font-size:13px;transition:background .3s}
.db-ghost:hover{background:rgba(114,168,255,.16)}
.db-panel-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.85}
.db-prod::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(3,7,17,.9) 0%,rgba(3,7,17,.55) 38%,rgba(3,7,17,.1) 70%),linear-gradient(0deg,rgba(3,7,17,.6),transparent 40%)}
.db-info{position:absolute;left:clamp(20px,3vw,44px);top:50%;translate:0 -50%;width:min(360px,40%);display:grid;gap:12px}
.db-tag{display:inline-flex;align-items:center;gap:9px;justify-self:start;height:32px;padding:0 14px 0 11px;border-radius:999px;background:var(--glass);border:1px solid var(--gline);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:12px;color:#d6e2f7}
.db-tag b{width:6px;height:6px;border-radius:50%;background:#cfe0ff;box-shadow:0 0 10px #6fa2ff}
.db-info h3{font-size:clamp(34px,3.4vw,56px);letter-spacing:-.05em;font-weight:400;line-height:1}
.db-info p{color:#c6d0e2;font-size:16px;line-height:1.6}
.db-info ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.db-info li{font-size:13px;color:var(--mute);padding-left:18px;position:relative}
.db-info li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:1px;background:var(--blue)}
.db-devices{position:absolute;right:clamp(20px,4vw,60px);top:50%;width:52%;translate:0 -50%;transition:transform .9s var(--ease);transform-style:preserve-3d}
.db-mac{width:100%}
.db-mac .mac-base{background:linear-gradient(#5d6271,#2a2d36)}
.db-ph{position:absolute;width:21%;right:-4%;bottom:-12%}
.db-pay{width:100%;aspect-ratio:16/10;border-radius:22px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.7),0 0 0 1px var(--gline)}
.db-pay img{width:100%;height:100%;object-fit:cover}
.db-duo{display:flex;justify-content:center;gap:6%}
.db-duo .phone{width:32%}
.db-duo .phone:nth-child(2){translate:0 10%}
.db-count{position:absolute;right:24px;top:20px;font-size:11px;letter-spacing:.14em;color:var(--dim);font-variant-numeric:tabular-nums}
.db-rail{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:28px var(--padr) 0 var(--pad);font-size:12px;color:var(--dim);position:relative;padding-top:16px}
.db-rail span{transition:color .4s}
.db-rail span.on{color:#fff}
.db-rail i{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(169,201,255,.14)}
.db-rail b{display:block;height:100%;background:linear-gradient(90deg,#3d6dff,#cfe0ff);transform-origin:left;transform:scaleX(0)}

/* less */
.db-less{position:relative;min-height:100vh;display:grid;place-items:center;overflow:hidden;isolation:isolate;padding:120px var(--padr) 120px var(--pad)}
.db-less-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;opacity:.55}
.db-less::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 50% 50%,rgba(3,7,17,.25),rgba(3,7,17,.92) 75%),linear-gradient(0deg,#030711,transparent 30%,transparent 70%,#030711)}
.db-cross i{position:absolute;background:rgba(190,215,255,.16);z-index:-1}
.db-cross .h{left:8%;right:8%;top:32%;height:1px}
.db-cross .h2{left:14%;right:14%;top:70%;height:1px}
.db-cross .v{top:18%;bottom:18%;left:24%;width:1px}
.db-less-copy{text-align:center;max-width:900px}
.db-less h2{font-size:clamp(42px,6.4vw,112px);line-height:1;letter-spacing:-.06em;font-weight:400;margin-bottom:26px}
.db-less h2 span{color:var(--blue)}
.db-less p{color:#c6d0e2;font-size:17px;line-height:1.7;max-width:520px;margin:0 auto}
.db-float{position:absolute;display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 22px 0 16px;border-radius:999px;background:var(--glass);border:1px solid var(--gline);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-size:14px;box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.db-float b{width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 14px #8fb8ff}
.db-float-a{left:10%;top:26%}
.db-float-b{right:9%;bottom:24%}
.db-glow{position:absolute;left:0;top:0;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(80,140,255,.18),transparent 62%);pointer-events:none;z-index:-1;transform:translate(30vw,20vh);transition:transform 1.2s var(--ease)}

/* orbit */
.db-smart{position:relative;padding:clamp(90px,12vw,170px) var(--padr) clamp(60px,8vw,120px) var(--pad);overflow:hidden}
.db-smart>h2{font-size:clamp(40px,5.6vw,96px);line-height:1.02;letter-spacing:-.055em;font-weight:400;text-align:center}
.db-orbit{--rx:68deg;position:relative;height:min(620px,96vw);perspective:1300px;margin:10px auto 0;transform-style:preserve-3d}
.db-core{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:28px;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#2b4f9e,#0b1633);border:1px solid rgba(160,195,255,.35);box-shadow:0 0 80px rgba(70,130,255,.45),inset 0 1px rgba(255,255,255,.25);color:#fff;z-index:5}
.db-core .mark{width:42px}
.db-ring{position:absolute;left:50%;top:50%;width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);border-radius:50%;border:1px solid rgba(140,180,255,.32);box-shadow:0 0 40px rgba(70,130,255,.12),inset 0 0 40px rgba(70,130,255,.08);transform:rotateX(var(--rx)) rotateY(var(--tilt));transform-style:preserve-3d}
.db-ring-0{--d:min(440px,56vw);--t:28s;--tilt:0deg}
.db-ring-1{--d:min(720px,78vw);--t:40s;--tilt:7deg}
.db-ring-2{--d:min(1000px,96vw);--t:54s;--tilt:-6deg}
.db-spin{position:absolute;inset:0;transform-style:preserve-3d;animation:dbSpin var(--t) linear infinite}
.db-node{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateX(calc(var(--d) / 2)) rotate(calc(var(--a) * -1));transform-style:preserve-3d}
.db-node em{position:absolute;display:block;font-style:normal;white-space:nowrap;padding:9px 15px;border-radius:999px;background:rgba(16,28,56,.75);border:1px solid rgba(160,195,255,.3);font-size:13px;color:#e8efff;box-shadow:0 0 30px rgba(70,130,255,.25);animation:dbCounter var(--t) linear infinite}
.db-claims{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:20px}
.db-claim{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 22px 0 16px;border-radius:999px;background:var(--glass);border:1px solid var(--gline);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:15px}
.db-claim b{width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 14px #8fb8ff}
.db-links-list{list-style:none;margin:36px auto 0;padding:0;display:flex;justify-content:center;flex-wrap:wrap;gap:12px 36px;color:var(--mute);font-size:13px}
.db-links-list li{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.db-links-list span{color:#e2eaf8}
.db-links-list small{color:var(--dim)}
.db-links-list svg{color:var(--blue)}

/* future */
.db-final{position:relative;min-height:90vh;display:grid;place-content:center;justify-items:center;gap:44px;text-align:center;overflow:hidden;isolation:isolate;padding:120px var(--padr) 120px var(--pad);background:radial-gradient(ellipse at 50% 120%,rgba(46,98,230,.45),transparent 60%)}
.db-stars{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.db-final .db-cross .h{top:50%}
.db-final .db-cross .v{left:50%;top:10%;bottom:10%}
.db-final h2{font-size:clamp(46px,8vw,150px);line-height:.98;letter-spacing:-.065em;font-weight:400}
.db-final h2 span{background:linear-gradient(100deg,#9cc0ff,#ffffff);-webkit-background-clip:text;background-clip:text;color:transparent}
.db-cta{display:inline-flex;align-items:center;gap:14px;height:58px;padding:0 8px 0 22px;border-radius:999px;background:var(--glass);border:1px solid rgba(210,228,255,.24);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-size:15px;transition:background .3s,transform .4s var(--ease)}
.db-cta b{width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 14px #8fb8ff}
.db-cta i{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#0b1430}
.db-cta:hover{background:rgba(114,168,255,.18);transform:translateY(-3px)}
.db-foot{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding:30px var(--padr) calc(96px + env(safe-area-inset-bottom,0px)) var(--pad);border-top:1px solid rgba(169,201,255,.12);font-size:12px;color:var(--dim)}
.db-foot .logo{height:16px;color:#fff;margin-right:auto}
.db-foot b{font-weight:500;color:#dfe8f8;user-select:all}

@keyframes dbScene{from{opacity:0;scale:1.05;filter:blur(8px)}}
@keyframes dbTitle{from{transform:translateY(112%) rotate(2deg);filter:blur(9px);opacity:0}}
@keyframes dbReveal{from{opacity:0;transform:translateY(18px);filter:blur(5px)}}
@keyframes dbOrbitB{to{--dba:360deg}}
@keyframes dbSpin{to{transform:rotateZ(360deg)}}
@keyframes dbCounter{from{transform:translate(-50%,-50%) rotateZ(0deg) rotateX(calc(var(--rx) * -1))}to{transform:translate(-50%,-50%) rotateZ(-360deg) rotateX(calc(var(--rx) * -1))}}

@media (max-width:1100px) and (min-width:761px){
  .db-hero-content{grid-template-columns:minmax(0,1fr) minmax(290px,.8fr)}
  .db-hero h1{font-size:clamp(50px,6.4vw,80px)}
  .db-live{display:none}
}
@media (max-width:900px){
  .db-links{display:none}
  .db-eco-pin{position:relative;height:auto;padding:90px 0 40px}
  .db-track{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:none}
  .db-track::-webkit-scrollbar{display:none}
  .db-panel{scroll-snap-align:center;width:86vw;height:auto;min-height:560px}
  .db-intro{width:80vw}
  .db-info{position:relative;left:auto;top:auto;translate:none;width:auto;padding:24px 22px 0}
  .db-devices{position:relative;right:auto;top:auto;translate:none;width:auto;margin:30px 22px 40px}
  .db-prod::before{background:linear-gradient(180deg,rgba(3,7,17,.9),rgba(3,7,17,.5) 60%,rgba(3,7,17,.8))}
  .db-rail{display:none}
}
@media (max-width:760px){
  .db-nav-in{height:55px}
  .db-brand .logo{height:16px}
  .db-nav-cta{display:none}
  .db-hero{min-height:640px}
  .db-hero-content{left:0;right:0;margin:0 22px;bottom:clamp(100px,14vh,130px);grid-template-columns:1fr;row-gap:20px}
  .db-hero h1{font-size:clamp(40px,11.4vw,70px);margin:0}
  .db-detail{translate:none}
  .db-detail p{font-size:13px;line-height:1.8;margin-bottom:18px}
  .db-hero-foot{left:22px;right:22px;justify-content:center}
  .db-hero-foot>span:not(.db-caps){display:none}
  .db-float-a{left:6%;top:12%}
  .db-float-b{right:6%;bottom:10%}
  .db-orbit{--rx:56deg;height:440px}
}