/* Layout: a calm, high end night page. Full width sections, no boxes, no borders. Type and space do the work. */
:root{
  --bg:#101820; --bg2:#0C131A; --text:#EEF1EC; --mist:#A3B1B6; --dim:#5E6E75; --hair:rgba(238,241,236,.08);
  --glow:#9FD3DA; --on-glow:#101820;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif; --body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --w:80rem; color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-weight:350;font-size:1.0625rem;line-height:1.7;overflow-x:hidden}
::selection{background:var(--glow);color:var(--on-glow)}
a{color:var(--text);text-decoration-color:var(--dim);text-underline-offset:.3em;transition:text-decoration-color .3s}
a:hover{text-decoration-color:var(--glow)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:1.5px solid var(--glow);outline-offset:5px;border-radius:2px}
.wrap{max-width:var(--w);margin:0 auto;padding-inline:clamp(1.25rem,5vw,4rem)}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;font-weight:300;letter-spacing:-.025em}
h1{font-size:clamp(2.9rem,8.6vw,7.6rem);font-variation-settings:"wdth" 108;line-height:.98}
h2{font-size:clamp(2.1rem,5.2vw,4.4rem);font-variation-settings:"wdth" 106;line-height:1.02}
h3{font-size:clamp(1.3rem,2vw,1.6rem);font-weight:400;line-height:1.25;letter-spacing:-.01em}
p{margin:0;max-width:58ch}
.lede{font-size:clamp(1.12rem,1.6vw,1.35rem);color:var(--mist);max-width:42ch;line-height:1.6}
.muted{color:var(--mist)}
.small{font-size:.92rem;color:var(--mist)}
em{font-style:italic;font-weight:300}

/* section index label: real numbered order of the home page */
.idx{display:flex;gap:1rem;align-items:baseline;color:var(--mist);font-size:.95rem;font-variant-numeric:tabular-nums}
.idx b{color:var(--glow);font-weight:500}

/* header */
.top{position:fixed;inset:0 0 auto 0;z-index:30;padding-top:env(safe-area-inset-top,0px);transition:background .4s,backdrop-filter .4s}
.top.solid{background:rgba(16,24,32,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:.75rem 2rem;padding-block:1.2rem;flex-wrap:wrap}
.brand{font-family:var(--display);font-variation-settings:"wdth" 112;font-weight:500;font-size:1.15rem;letter-spacing:.01em;color:var(--text);text-decoration:none}
.brand span{color:var(--mist);font-weight:300}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.2rem 1.75rem;flex-wrap:wrap;align-items:center}
nav a{color:var(--mist);text-decoration:none;font-size:.97rem;transition:color .25s}
nav a:hover,nav a[aria-current="page"]{color:var(--text)}
nav .pill{color:var(--on-glow);background:var(--text);padding:.5rem 1rem;border-radius:999px}
nav .pill:hover{color:var(--on-glow);background:var(--glow)}
.status{display:inline-flex;align-items:center;gap:.55rem;color:var(--mist);font-size:.92rem}
.status i{width:.45rem;height:.45rem;border-radius:50%;background:var(--glow);box-shadow:0 0 12px var(--glow)}
@media (prefers-reduced-motion:no-preference){.status i{animation:pulse 2.4s ease-in-out infinite}@keyframes pulse{50%{opacity:.35}}}

/* hero */
.hero{position:relative;min-height:min(100vh,62rem);display:grid;align-items:end;padding-block:10rem 5rem;overflow:hidden}
.hero.short{min-height:auto;padding-block:11rem 5rem}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(110% 75% at 15% 100%,var(--bg) 15%,rgba(16,24,32,.5) 50%,transparent 80%);pointer-events:none}
.hero .wrap{position:relative;z-index:2;display:grid;gap:2rem;width:100%}
.hero-top{display:flex;gap:.5rem 2.5rem;flex-wrap:wrap;color:var(--mist);font-size:.95rem}
.points{display:flex;gap:.6rem 2.5rem;flex-wrap:wrap;color:var(--mist);font-size:.97rem;list-style:none;margin:0;padding:0}
.points li::before{content:"+";color:var(--glow);margin-right:.5rem}
.line{display:block;overflow:hidden;padding-bottom:.08em}
.line>span{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .line>span{animation:rise 1.2s cubic-bezier(.16,.8,.2,1) both}
  .line:nth-child(2)>span{animation-delay:.12s}.line:nth-child(3)>span{animation-delay:.24s}
  .fade-in{animation:fade 1.2s .55s both}
  @keyframes rise{from{transform:translateY(108%)}}
  @keyframes fade{from{opacity:0;transform:translateY(14px)}}
}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.6rem;background:var(--text);color:var(--on-glow);font:inherit;font-weight:500;text-decoration:none;padding:.95rem 1.6rem;border-radius:999px;border:0;cursor:pointer;transition:background .3s,transform .3s}
.btn:hover{background:var(--glow);transform:translateY(-2px)}
.link-arrow{color:var(--text);text-decoration:none;font-weight:450;display:inline-flex;gap:.5rem;align-items:center;padding-block:.95rem}
.link-arrow span{transition:transform .3s}
.link-arrow:hover span{transform:translateX(4px)}
.actions{display:flex;gap:.6rem 1.6rem;flex-wrap:wrap;align-items:center}

/* marquee */
.marquee{overflow:hidden;padding-block:2.2rem;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;width:max-content;gap:3rem}
.marquee-track span{font-family:var(--display);font-size:clamp(1.4rem,3vw,2.3rem);font-weight:250;font-variation-settings:"wdth" 110;color:var(--mist);white-space:nowrap;display:flex;align-items:center;gap:3rem}
.marquee-track span::after{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--glow)}
@media (prefers-reduced-motion:no-preference){.marquee-track{animation:slide 45s linear infinite}@keyframes slide{to{transform:translateX(-50%)}}}

/* sections */
main>section{padding-block:clamp(5rem,12vw,10rem)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,7vw,7rem);align-items:start}
.split>*{min-width:0}
@media (max-width:880px){.split{grid-template-columns:1fr}}
.stack{display:grid;gap:1.4rem;align-content:start}
.head{display:grid;gap:1.4rem;margin-bottom:clamp(3rem,6vw,5rem)}

/* scroll zoom */
[data-zoom]{--z:0;transform:scale(calc(1 - var(--z) * .12));opacity:calc(1 - var(--z) * .4);transform-origin:center;will-change:transform,opacity}
[data-zoom="left"]{transform-origin:left center}

/* columns of plain text, no boxes */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:clamp(2rem,4vw,3.5rem)}
.cols>*{min-width:0;display:grid;gap:.7rem;align-content:start}
.cols .n{color:var(--glow);font-variant-numeric:tabular-nums;font-size:.95rem}
.cols p{color:var(--mist)}

/* calculator */
.calc{display:grid;gap:2rem}
.calc label{display:grid;gap:.7rem;color:var(--mist)}
.calc .lab{display:flex;justify-content:space-between;gap:1rem}
.calc output{color:var(--text);font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:linear-gradient(90deg,var(--glow) var(--p,50%),var(--dim) var(--p,50%));border-radius:2px;outline-offset:8px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--text);cursor:pointer;box-shadow:0 0 0 6px rgba(159,211,218,.15)}
input[type=range]::-moz-range-thumb{width:1.3rem;height:1.3rem;border:0;border-radius:50%;background:var(--text);cursor:pointer}
.result{display:grid;gap:.4rem}
.result .big{font-family:var(--display);font-weight:250;font-variation-settings:"wdth" 112;font-size:clamp(3.4rem,10vw,7.5rem);line-height:.95;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.result .big small{font-size:.32em;color:var(--mist);letter-spacing:0;margin-left:.3em}

/* process steps (real sequence) */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(2rem,4vw,3rem)}
@media (max-width:960px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.steps li{display:grid;gap:.75rem;align-content:start;min-width:0}
.steps .num{font-family:var(--display);font-weight:200;font-variation-settings:"wdth" 120;font-size:clamp(3.5rem,7vw,5.5rem);line-height:.9;color:var(--glow);letter-spacing:-.04em}
.steps .time{color:var(--text);font-size:.95rem;font-variant-numeric:tabular-nums}
.steps p{color:var(--mist)}

/* work */
.work{display:grid;gap:clamp(4rem,9vw,7rem)}
.case{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,6rem)}
.case>*{min-width:0}
@media (max-width:880px){.case{grid-template-columns:1fr}}
.case .who{display:grid;gap:1rem;align-content:start}
.case .state{color:var(--glow);font-size:.95rem}
.feat{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 2.5rem}
@media (max-width:560px){.feat{grid-template-columns:1fr}}
.feat li{display:grid;gap:.3rem}
.feat b{font-weight:500}
.feat span{color:var(--mist)}

/* services list */
.offers{display:grid;gap:clamp(3rem,6vw,4.5rem)}
.offer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,.7fr);gap:1.5rem clamp(2rem,5vw,4rem);align-items:start}
.offer>*{min-width:0}
@media (max-width:900px){.offer{grid-template-columns:1fr}}
.offer .price{color:var(--glow)}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.ticks li{padding-left:1.4rem;position:relative;color:var(--mist)}
.ticks li::before{content:"+";position:absolute;left:0;color:var(--glow)}

/* faq */
.faq{display:grid}
.faq details{padding-block:1.5rem}
.faq details+details{box-shadow:0 -1px 0 var(--hair)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:2rem;align-items:baseline;font-size:clamp(1.15rem,2vw,1.45rem);font-weight:350}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--glow);font-size:1.5rem;line-height:1;transition:transform .35s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--mist);margin-top:1rem}

/* Van Motion style statement: grows and lights word by word with scroll */
.statement-wrap{height:220vh;position:relative;padding-block:0!important}
.statement-stick{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.statement{font-family:var(--display);font-weight:250;font-variation-settings:"wdth" 115;font-size:clamp(3rem,11vw,10.5rem);line-height:.95;letter-spacing:-.045em;text-align:center;margin:0;max-width:none;padding-inline:1rem;transform:scale(var(--s,1))}
.statement .w{display:inline-block;color:var(--text);opacity:var(--o,1);transition:opacity .25s,color .25s}
.statement .w.lit{color:var(--text)}
.statement-sub{position:absolute;bottom:12vh;left:0;right:0;text-align:center;color:var(--mist);opacity:var(--so,1)}
@media (prefers-reduced-motion:reduce){.statement-wrap{height:auto}.statement-stick{position:static;height:auto;padding-block:8rem}}

/* closing cta */
.close{display:grid;gap:2rem;justify-items:start}

/* contact */
.email{font-family:var(--display);font-variation-settings:"wdth" 108;font-weight:300;font-size:clamp(1.7rem,5.6vw,4rem);line-height:1.05;word-break:break-word;user-select:all;letter-spacing:-.03em}

/* footer */
footer{padding-block:4rem 3rem;color:var(--mist);font-size:.95rem;background:var(--bg2)}
.fgrid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:2.5rem 3rem}
@media (max-width:860px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.fgrid{grid-template-columns:1fr}}
.fgrid>*{min-width:0;display:grid;gap:.5rem;align-content:start}
.fgrid h4{margin:0 0 .4rem;color:var(--text);font-weight:450;font-size:1rem}
.fgrid a{color:var(--mist);text-decoration:none}
.fgrid a:hover{color:var(--text)}
.legal{margin-top:3.5rem;display:flex;flex-wrap:wrap;gap:.4rem 2rem;font-size:.86rem;color:var(--dim)}

/* cursor ring */
.ring{position:fixed;left:0;top:0;width:2rem;height:2rem;border:1px solid var(--glow);border-radius:50%;pointer-events:none;z-index:50;opacity:0;transition:width .3s,height .3s,opacity .3s,background .3s}
.ring.on{opacity:.7}.ring.big{width:3.4rem;height:3.4rem;background:rgba(159,211,218,.08)}
@media (pointer:coarse),(prefers-reduced-motion:reduce){.ring{display:none}}

main{overflow-x:clip}
#features{overflow:hidden}
.offer-hero{display:grid;gap:.35rem;max-width:40rem}
.offer-name{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2rem);font-weight:350;letter-spacing:-.02em}
.quote{margin:0;display:grid;gap:1rem}
.quote blockquote{margin:0;font-family:var(--display);font-size:clamp(1.3rem,2.4vw,1.9rem);font-weight:300;line-height:1.3;letter-spacing:-.02em}
.dc-out{color:var(--mist);font-size:.95rem;line-height:1.4;margin-top:-.4rem}
/* chip and circuit art */
.chip{width:100%;max-width:30rem;height:auto;display:block;margin-inline:auto}
.band{width:100%;height:clamp(5rem,10vw,8.5rem);display:block;opacity:.9}
.pulse{stroke-dasharray:7 93}
.cell{opacity:.5}
@media (prefers-reduced-motion:no-preference){
  .pulse{animation:trace linear infinite}@keyframes trace{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
  .cell{animation:cell 3.2s ease-in-out infinite}@keyframes cell{50%{opacity:.15}}
}
@media (prefers-reduced-motion:reduce){.pulse{display:none}}

/* phone device */
.device{width:min(19rem,100%);margin-inline:auto;aspect-ratio:9/19;border-radius:2.8rem;background:#05090C;padding:.7rem;box-shadow:0 0 0 1px #2B3F49,0 60px 120px -40px rgba(0,0,0,.9),0 0 90px -30px rgba(159,211,218,.35)}
.device-screen{height:100%;border-radius:2.2rem;background:linear-gradient(180deg,#13222B,#0B141A);padding:1.1rem 1.15rem;display:grid;grid-template-rows:auto auto auto auto 1fr auto auto;gap:.85rem;overflow:hidden;font-size:.85rem}
.ds-status{display:flex;justify-content:space-between;color:var(--mist);font-size:.72rem;font-family:"IBM Plex Mono",monospace}
.ds-app{font-family:var(--display);font-size:1.6rem;font-weight:300;font-variation-settings:"wdth" 110;letter-spacing:-.02em}
.ds-range{display:flex;align-items:center;gap:.6rem;color:var(--mist);font-family:"IBM Plex Mono",monospace;font-size:.75rem}
.ds-range i{flex:1;height:1px;background:linear-gradient(90deg,var(--glow),var(--dim))}
.ds-big{color:var(--mist);line-height:1.5}.ds-big b{color:var(--text);font-weight:400;font-size:1.5rem;font-variant-numeric:tabular-nums}
.ds-list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;align-content:start}
.ds-list li{display:flex;justify-content:space-between;gap:.5rem;padding-bottom:.55rem;box-shadow:0 1px 0 rgba(238,241,236,.07)}
.ds-list span{color:var(--mist)}.ds-list b{font-weight:450;color:var(--glow)}
.ds-btn{background:var(--text);color:var(--on-glow);border-radius:999px;text-align:center;padding:.75rem;font-weight:500}
.ds-toast{background:rgba(159,211,218,.12);color:var(--text);border-radius:1rem;padding:.7rem .85rem;font-size:.78rem}
@media (prefers-reduced-motion:no-preference){.ds-toast{animation:toast 6s ease-in-out infinite}@keyframes toast{0%,35%{opacity:0;transform:translateY(8px)}45%,90%{opacity:1;transform:none}100%{opacity:0}}}

/* 3D feature deck */
.deck{display:grid;gap:2rem}
.deck-stage{position:relative;height:clamp(25rem,52vw,32rem);perspective:1300px;perspective-origin:50% 30%;touch-action:pan-y;outline:none}
.dcard{position:absolute;left:50%;top:50%;width:clamp(15rem,30vw,19rem);display:grid;gap:1rem;text-align:left;padding:1.25rem 1.25rem 1.1rem;background:linear-gradient(180deg,#16242E,#0F1A21);border:1px solid #2B3F49;border-radius:6px;color:var(--text);font:inherit;cursor:pointer;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.75,.2,1),opacity .7s,filter .7s;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
@media (prefers-reduced-motion:reduce){.dcard{transition:none}}
.dcard:focus-visible{outline:1.5px solid var(--glow);outline-offset:4px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem}
.dc-top{display:flex;justify-content:space-between;gap:1rem}
.dc-cat{color:#3FA9F5}.dc-id{color:var(--mist)}
.dc-dots{height:clamp(6rem,11vw,8rem);border:1px solid #2B3F49;position:relative;background:radial-gradient(circle,rgba(163,177,182,.45) 1.5px,transparent 2px) 0 0/13px 13px}
.dc-dots::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,#3FA9F5 2.2px,transparent 2.7px) 0 0/13px 13px;-webkit-mask-image:radial-gradient(circle at var(--x) var(--y),#000 18%,transparent 42%);mask-image:radial-gradient(circle at var(--x) var(--y),#000 18%,transparent 42%)}
.dc-title{font-family:var(--display);font-size:clamp(1.35rem,2.4vw,1.8rem);font-weight:400;letter-spacing:-.03em;line-height:1.1}
.dc-foot{display:flex;justify-content:space-between;gap:1rem;padding-top:.8rem;box-shadow:0 -1px 0 #2B3F49}
.dc-foot .k{color:var(--mist)}
.dc-foot .v.dev{color:#F2C46B}
.deck-ctrl{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.deck-ctrl button{flex:none;width:3.6rem;height:3.6rem;border-radius:50%;border:1px solid #2B3F49;background:transparent;color:var(--text);font:inherit;font-size:1.2rem;cursor:pointer;transition:border-color .25s}
.deck-ctrl button:hover{border-color:var(--glow)}
.deck-cap{color:var(--mist);text-align:center;line-height:1.8}
dialog.fd{border:0;padding:0;background:transparent;color:var(--text);max-width:min(36rem,calc(100% - 2rem));width:100%}
dialog.fd::backdrop{background:rgba(5,9,12,.72);backdrop-filter:blur(6px)}
.fd-in{background:linear-gradient(180deg,#16242E,#0F1A21);border:1px solid #2B3F49;border-radius:8px;padding:clamp(1.5rem,4vw,2.25rem);display:grid;gap:1.2rem}
.fd-top{display:flex;justify-content:space-between;gap:1rem;align-items:center}
.fd-in h3{font-size:clamp(1.8rem,4vw,2.5rem);font-weight:300;letter-spacing:-.03em}
.fd-in p{color:var(--mist)}
.fd-meta{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.5rem}
.fd-meta .k{color:var(--mist)}
.fd-close{border:1px solid #2B3F49;background:transparent;color:var(--text);border-radius:999px;padding:.45rem 1rem;font:inherit;cursor:pointer}
.fd-close:hover{border-color:var(--glow)}