/* Dark Blue v2 (A Cinema, B Essencial): builds on p3.css (nav, approved hero, field, orbit, final, footer)
   and adds the product carousel, the bento cards and each version's own sections. More air, fewer words. */
html[data-site^="db-"]{color-scheme:dark}
html[data-site^="db-"] body{background:#030711}
.dbx{--air:clamp(120px,15vw,230px)}

/* shared type */
.dx-h{font-size:clamp(40px,5.4vw,92px);line-height:1.02;letter-spacing:-.055em;font-weight:400}
.dx-h span{background:linear-gradient(110deg,#e5edff 0%,#afc4e9 45%,#7eacec 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.dx-sub{color:var(--mute);font-size:17px;line-height:1.7;max-width:440px}

/* product carousel: copy inside the card */
.dx-eco{padding:var(--air) 0 clamp(90px,10vw,150px);overflow:hidden}
.dx-head{display:grid;justify-items:center;gap:22px;text-align:center;padding:0 var(--padr) 0 var(--pad);margin-bottom:clamp(44px,6vw,90px)}
.dx-head .dx-sub{max-width:520px}
.dx-flow{--cw:min(470px,76vw);--ch:min(560px,68vh,122vw);position:relative;height:calc(var(--ch) + 40px);perspective:1800px;transform-style:preserve-3d;outline:none;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.dx-flow:focus-visible .dx-card.on{outline:2px solid #9cc5ff;outline-offset:6px}
.dx-card{position:absolute;left:50%;top:50%;width:var(--cw);height:var(--ch);border-radius:32px;overflow:hidden;isolation:isolate;background:#060d1f;border:1px solid var(--gline);box-shadow:0 60px 110px -50px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.4);transition:transform 1s var(--ease),opacity 1s var(--ease),filter 1s var(--ease);will-change:transform;cursor:pointer;filter:brightness(.42) saturate(.75)}
.dx-card.on{filter:none;cursor:grab}
.dx-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(3,7,17,.1) 0%,rgba(3,7,17,.25) 46%,rgba(3,7,17,.94) 80%)}
.dx-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(140deg,rgba(255,255,255,.1),transparent 34%);pointer-events:none}
.dx-card-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.8;transform:scale(1.1);transition:transform 1.6s var(--ease)}
.dx-card.on .dx-card-bg{transform:scale(1)}
.dx-card-vis{position:absolute;left:10%;right:10%;top:9%;height:48%;display:grid;place-items:center;pointer-events:none}
.dx-dev{position:relative;width:96%}
.dx-mac .mac-base{background:linear-gradient(#5d6271,#2a2d36)}
.dx-ph{position:absolute;width:24%;right:-6%;bottom:-18%}
.dx-duo{display:flex;justify-content:center;align-items:center;gap:8%;height:100%}
.dx-duo .phone{height:100%;width:auto}
.dx-duo .phone:nth-child(2){translate:0 9%}
.dx-pay{width:100%;aspect-ratio:16/11;object-fit:cover;border-radius:22px;box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px var(--gline)}
.dx-card-txt{position:absolute;left:30px;right:30px;bottom:30px;display:grid;justify-items:start;gap:12px}
.dx-card-txt h3{font-size:clamp(32px,3vw,46px);line-height:1;letter-spacing:-.05em;font-weight:400}
.dx-card-txt p{color:#c6d0e2;font-size:16px;line-height:1.5}
.dx-card-n{position:absolute;top:24px;right:26px;font-size:11px;letter-spacing:.14em;color:#8d9bb5;font-variant-numeric:tabular-nums}
.dx-flow-ui{display:flex;justify-content:center;align-items:center;gap:26px;margin-top:clamp(26px,3.5vw,44px)}
.dx-round{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--gline);background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:background .3s,border-color .3s,transform .4s var(--ease)}
.dx-round:hover{background:rgba(114,168,255,.16);border-color:rgba(170,203,255,.35);transform:scale(1.06)}
.dx-dots{display:flex;gap:4px}
.dx-dots button{position:relative;width:22px;height:22px;display:grid;place-items:center}
.dx-dots button::before{content:"";width:7px;height:7px;border-radius:999px;background:rgba(160,195,255,.25);transition:width .5s var(--ease),background .4s,box-shadow .4s}
.dx-dots button[aria-current="true"]{width:40px}
.dx-dots button[aria-current="true"]::before{width:30px;background:#cfe0ff;box-shadow:0 0 12px #6fa2ff}
.dx-note{text-align:center;margin-top:24px;padding:0 var(--padr) 0 var(--pad);font-size:12px;color:var(--dim)}

/* bento: the Light Blue cards in dark glass */
.dx-smart{padding:var(--air) var(--padr) var(--air) var(--pad)}
.dx-smart-in{max-width:1440px;margin:0 auto}
.dx-smart-in>.dx-h{text-align:center;margin-bottom:clamp(50px,6vw,96px)}
.dx-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.dx-cell{display:flex}
.dx-tile{position:relative;flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:48px;min-height:380px;padding:34px;border-radius:30px;overflow:hidden;background:radial-gradient(520px circle at var(--mx,75%) var(--my,0%),rgba(114,168,255,.15),rgba(14,24,46,.5) 62%);border:1px solid var(--gline);box-shadow:inset 0 1px rgba(255,255,255,.06),0 40px 80px -50px rgba(0,0,0,.9);transition:transform .6s var(--ease)}
.dx-tile h3{font-size:clamp(22px,1.9vw,30px);line-height:1.15;letter-spacing:-.035em;font-weight:400;max-width:15ch}
.dx-links{display:grid;gap:18px}
.dx-link{display:grid;grid-template-columns:auto minmax(24px,1fr) auto;align-items:center;gap:12px;font-size:14px}
.dx-link>span{padding:9px 14px;border-radius:12px;background:rgba(20,34,66,.7);border:1px solid rgba(160,195,255,.18);white-space:nowrap;color:#e2eaf8}
.dx-link i{position:relative;height:1px;background:repeating-linear-gradient(90deg,rgba(140,180,255,.45) 0 6px,transparent 6px 11px)}
.dx-link b{position:absolute;top:-3px;left:0;width:7px;height:7px;border-radius:50%;background:#cfe0ff;box-shadow:0 0 12px #6fa2ff;opacity:0}
.dx-smart.live .dx-link b{animation:dxTravel 2.6s var(--ease) calc(var(--i) * .5s) infinite}
.dx-link small{grid-column:1/-1;margin-top:-8px;font-size:12px;color:var(--dim)}
.dx-auto{display:flex;align-items:flex-start;gap:24px}
.dx-switch{position:relative;flex:none;width:64px;height:36px;border-radius:999px;background:linear-gradient(90deg,#3d6dff,#72a8ff);box-shadow:0 0 30px rgba(80,140,255,.4),inset 0 2px 6px rgba(0,0,0,.2);transition:background .4s,box-shadow .4s}
.dx-switch i{position:absolute;top:4px;left:32px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.35);transition:left .5s var(--ease)}
.dx-switch.off{background:#25314d;box-shadow:inset 0 2px 6px rgba(0,0,0,.3)}
.dx-switch.off i{left:4px}
.dx-auto ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14px;color:var(--mute)}
.dx-auto li{display:flex;align-items:center;gap:10px}
.dx-auto li::before{content:"";width:6px;height:6px;border-radius:50%;background:#72a8ff;box-shadow:0 0 8px #72a8ff}
.dx-curve{width:100%;height:130px;overflow:visible}
.dx-line{stroke-dasharray:1;stroke-dashoffset:1}
.dx-area,.dx-end{opacity:0}
.dx-smart.live .dx-line{animation:dxDraw 2.4s var(--ease) .2s forwards}
.dx-smart.live .dx-area{animation:dxFade 1.2s 1.2s forwards}
.dx-smart.live .dx-end{animation:dxFade .6s 2.2s forwards;filter:drop-shadow(0 0 8px #8fb8ff)}

/* A · manifesto */
.xa-man{position:relative;height:230vh}
.xa-man-pin{position:sticky;top:0;height:100vh;display:grid;place-items:center;padding:0 var(--padr) 0 var(--pad);overflow:hidden}
.xa-man-pin::before{content:"";position:absolute;left:50%;top:50%;width:min(1000px,130vw);aspect-ratio:1;translate:-50% -50%;background:radial-gradient(circle,rgba(46,98,230,.14),transparent 62%);pointer-events:none}
.xa-man p{position:relative;max-width:17ch;text-align:center;font-size:clamp(36px,5.2vw,88px);line-height:1.08;letter-spacing:-.055em;font-weight:400}
.xa-man .w{color:rgba(150,178,230,.12);transition:color .6s var(--ease),text-shadow .6s}
.xa-man .w.on{color:var(--ink)}
.xa-s1{display:block;margin-top:.4em}
.xa-s1 .w.on{color:#8fb8ff;text-shadow:0 0 40px rgba(85,149,255,.35)}

/* A · before / after */
.xa-cmp{position:relative;height:240vh}
.xa-cmp-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;gap:clamp(28px,4.5vh,56px);max-width:1440px;margin:0 auto;padding:86px var(--padr) 56px var(--pad)}
.xa-cmp-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px 60px}
.xa-cmp-head .dx-h{font-size:clamp(36px,4.6vw,80px)}
.xa-panel{--x:50%;position:relative;flex:none;height:min(50vh,500px);border-radius:32px;overflow:hidden;isolation:isolate;border:1px solid var(--gline);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.xa-before,.xa-after{position:absolute;inset:0}
.xa-before{background:radial-gradient(ellipse at 30% 40%,rgba(130,140,160,.08),transparent 60%),#070a12}
.xa-before::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:44px 44px}
.xa-note{position:absolute;translate:-50% -50%;padding:12px 18px;border-radius:12px;border:1px dashed rgba(170,180,200,.28);background:rgba(20,24,34,.85);color:#8792a8;font-size:clamp(12px,1.1vw,16px);white-space:nowrap;box-shadow:0 14px 30px -14px rgba(0,0,0,.8)}
.xa-after{clip-path:inset(0 0 0 var(--x));display:grid;place-items:center;background:radial-gradient(ellipse at 78% 18%,rgba(70,125,255,.42),transparent 55%),radial-gradient(ellipse at 18% 100%,rgba(40,90,220,.24),transparent 60%),linear-gradient(160deg,#0a1838,#050c20)}
.xa-after ul{list-style:none;margin:0;padding:0;display:grid;gap:clamp(8px,1.2vh,12px);width:min(560px,84%)}
.xa-after li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:clamp(10px,1.4vh,14px) 18px;border-radius:14px;background:rgba(16,30,64,.55);border:1px solid rgba(160,195,255,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:clamp(14px,1.15vw,16px)}
.xa-after li i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#cfe0ff;color:#0b1430}
.xa-after li i svg{width:13px;height:13px;stroke-width:2.4}
.xa-after li b{font-weight:500}
.xa-after small{font-size:11px;color:#9fb4dc;white-space:nowrap}
.xa-lbl{position:absolute;top:22px;left:24px;z-index:2;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#7f8aa0}
.xa-after .xa-lbl{left:auto;right:24px;color:#cfe0ff}
.xa-handle{position:absolute;top:0;bottom:0;left:var(--x);z-index:3;width:2px;translate:-1px 0;background:linear-gradient(transparent,#cfe0ff 18%,#cfe0ff 82%,transparent);box-shadow:0 0 18px #6fa2ff}
.xa-handle button{position:absolute;top:50%;left:50%;translate:-50% -50%;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f4f7fe;color:#0b1430;box-shadow:0 0 0 7px rgba(207,224,255,.12),0 0 40px rgba(110,160,255,.6);cursor:ew-resize;touch-action:none}
.xa-handle svg{width:14px;height:14px;stroke-width:2}

/* B · sectors in monumental type */
.xb-sectors{padding:var(--air) 0 calc(var(--air) * .8);overflow:hidden}
.xb-kick{text-align:center;font-size:clamp(15px,1.3vw,19px);font-weight:400;color:var(--mute);margin-bottom:clamp(30px,4vw,60px)}
.xb-lines{display:grid;gap:clamp(4px,1vw,14px)}
.xb-line{display:flex;align-items:center;gap:.42em;width:max-content;white-space:nowrap;font-size:clamp(54px,8.6vw,160px);line-height:1.12;letter-spacing:-.06em;font-weight:300;will-change:transform}
.xb-line span{color:rgba(150,180,235,.12);transition:color .7s var(--ease),text-shadow .7s}
.xb-line span.on{color:var(--ink);text-shadow:0 0 60px rgba(85,149,255,.35)}
.xb-line i{flex:none;width:.1em;height:.1em;border-radius:50%;background:var(--blue);box-shadow:0 0 20px var(--blue);opacity:.6}

/* B · one line of light */
.xb-simple{position:relative;height:240vh}
.xb-pin{position:sticky;top:0;height:100vh;overflow:hidden}
.xb-wire{position:absolute;inset:0;width:100%;height:100%}
.xb-simple-h{position:absolute;left:var(--pad);right:var(--padr);top:clamp(110px,17vh,190px)}
.xb-steps{position:absolute;left:var(--pad);right:var(--padr);bottom:clamp(56px,10vh,110px);list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.xb-steps li{display:grid;gap:10px;padding-top:18px;border-top:1px solid rgba(169,201,255,.14);font-size:clamp(16px,1.4vw,20px);opacity:.16;transform:translateY(12px);transition:opacity .8s var(--ease),transform .8s var(--ease),border-color .8s}
.xb-steps li.on{opacity:1;transform:none;border-top-color:rgba(169,201,255,.42)}
.xb-steps small{font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.12em;color:var(--blue)}

/* B · manual tasks struck out */
.xb-less{max-width:1360px;margin:0 auto;padding:var(--air) var(--padr) var(--air) var(--pad)}
.xb-less-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px 60px;margin-bottom:clamp(50px,7vw,100px)}
.xb-rows{list-style:none;margin:0;padding:0;border-top:1px solid rgba(169,201,255,.12)}
.xb-row{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr) 110px;align-items:center;gap:20px;padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid rgba(169,201,255,.12);font-size:clamp(18px,1.9vw,28px);letter-spacing:-.03em}
.xb-old{position:relative;width:fit-content;color:#c6d0e2;transition:color .8s var(--ease)}
.xb-old::after{content:"";position:absolute;left:-2px;right:-2px;top:54%;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.xb-row.on .xb-old{color:var(--dim)}
.xb-row.on .xb-old::after{transform:scaleX(1)}
.xb-arrow{color:var(--dim);transition:color .6s .2s,transform .6s .2s var(--ease)}
.xb-arrow svg{width:22px;height:22px}
.xb-row.on .xb-arrow{color:var(--blue);transform:translateX(6px)}
.xb-new{color:var(--ink);opacity:.1;transform:translateX(-12px);transition:opacity .9s .25s var(--ease),transform .9s .25s var(--ease)}
.xb-row.on .xb-new{opacity:1;transform:none}
.xb-prod{justify-self:end;font-size:12px;letter-spacing:.02em;color:var(--dim);transition:color .6s .4s}
.xb-row.on .xb-prod{color:#9fb4dc}

/* B · orbit around the visitor's business */
.xb-orbit>.dx-h{text-align:center}
.xb-core{width:auto;height:auto;margin:0;translate:-50% -50%;padding:16px 24px;border-radius:999px;font-size:14px;font-weight:500;white-space:nowrap}

@keyframes dxTravel{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 7px);opacity:0}}
@keyframes dxDraw{to{stroke-dashoffset:0}}
@keyframes dxFade{to{opacity:1}}

@media (max-width:900px){
  .dx-bento{grid-template-columns:1fr}
  .dx-tile{min-height:300px}
  .xb-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"old prod" "new new";gap:8px 14px}
  .xb-old{grid-area:old}
  .xb-new{grid-area:new}
  .xb-prod{grid-area:prod}
  .xb-arrow{display:none}
}
@media (max-width:760px){
  .dx-sub{font-size:15px}
  .dx-card-txt{left:22px;right:22px;bottom:22px;gap:10px}
  .dx-card-txt p{font-size:14px}
  .dx-tile{padding:26px}
  .dx-link{font-size:12px}
  .dx-link>span{padding:7px 10px}
  .xa-cmp-pin{padding:76px var(--padr) 80px var(--pad);justify-content:flex-start}
  .xa-panel{height:min(54vh,460px)}
  .xa-note{white-space:normal;width:max-content;max-width:140px;text-align:center;padding:9px 12px}
  .xa-after ul{width:90%}
  .xa-after li{grid-template-columns:auto minmax(0,1fr);padding:9px 12px;gap:10px}
  .xa-after small{display:none}
  .xb-steps{grid-template-columns:1fr;gap:14px}
  .xb-steps li{grid-template-columns:auto 1fr;align-items:baseline;gap:14px;padding-top:12px}
  .xb-orbit .db-orbit{--rx:52deg;height:400px}
  .xb-orbit .db-ring-0{--d:42vw}
  .xb-orbit .db-ring-1{--d:64vw}
  .xb-orbit .db-ring-2{--d:80vw}
  .xb-orbit .db-node em{font-size:11px;padding:7px 11px}
}