/* Codeja redesign: one stylesheet for the home page, SEO+, Apps and Blog. */
/* Codeja · Clear (option 2 with option 1's hands hero)
   Bright, editorial and big, in soft desaturated pastels. Space and very large
   type carry the page; a muted periwinkle marks what you can act on. The three images sit in
   rounded frames that open as you scroll, like windows into the work. */
:root{
  --bg:#F6F7F9; --soft:#ECEFF3; --line:#DFE3E8; --ink:#262A31; --mute:#5C6470; --acc:#5A74AC; --acc-soft:#E3E9F4; --night:#232830;
  --sage:#E1EAE3; --powder:#E0E8F2; --lilac:#E9E5F1; --blush:#F1E5E7; --sage-ink:#4E6B58; --lilac-ink:#655C80;
  --serif:'Instrument Serif', 'Times New Roman', serif;
  --mono:'JetBrains Mono', ui-monospace, Menlo, monospace;
  --disp:'Bricolage Grotesque', 'Arial Narrow', system-ui, sans-serif;
  --body:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gut:max(20px, env(safe-area-inset-left,0px)); --gut-r:max(20px, env(safe-area-inset-right,0px));
  --r:28px; --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font:400 19px/1.6 var(--body); -webkit-font-smoothing:antialiased; overflow-x:clip}
img{display:block; max-width:100%}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2.5px solid var(--acc); outline-offset:3px}
::selection{background:var(--acc); color:#fff}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.wrap{max-width:1400px; margin:0 auto; padding-left:var(--gut); padding-right:var(--gut-r)}
.disp{font-family:var(--disp); font-weight:700; letter-spacing:-.035em; font-variation-settings:"opsz" 96}
.eyebrow{display:inline-flex; align-items:center; gap:10px; font:600 15px/1 var(--body); color:var(--mute)}
.eyebrow::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--acc)}
.h2{margin:18px 0 0; font:700 clamp(48px,7.4vw,124px)/.92 var(--disp); letter-spacing:-.045em; font-variation-settings:"opsz" 96}
.h2 .soft{color:#A3A8B1}
.top{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:clamp(36px,5vw,64px)}
.top p{margin:0; max-width:400px; color:var(--mute)}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:12px; padding:20px 30px; border-radius:999px; font:600 18px/1 var(--body); text-decoration:none; border:1.5px solid var(--ink); color:var(--ink); background:transparent; cursor:pointer; transition:background .3s, color .3s, border-color .3s, transform .3s var(--ease); will-change:transform}
.btn:hover{background:var(--ink); color:#fff}
.btn.pri{background:var(--acc); border-color:var(--acc); color:#fff}
.btn.pri:hover{background:var(--ink); border-color:var(--ink)}
.btn .ar{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.18); transition:transform .4s var(--ease)}
.btn:hover .ar{transform:rotate(-45deg)}
.btn.light{border-color:#fff; color:#fff} .btn.light:hover{background:#fff; color:var(--ink)}

/* floating nav */
.nav{position:fixed; top:calc(14px + env(safe-area-inset-top,0px)); left:50%; transform:translateX(-50%); z-index:50; width:min(1100px, calc(100% - 24px));
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 10px 10px 22px; background:rgba(255,255,255,.88); backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:999px; transition:transform .5s var(--ease)}
.nav.hide{transform:translate(-50%, -140%)}
.logo{display:flex; align-items:center; gap:10px; font:800 21px/1 var(--disp); letter-spacing:-.04em; text-decoration:none}
.logo i{width:12px; height:12px; border-radius:50%; background:var(--acc)}
.links{display:flex; gap:2px}
.links a{padding:11px 13px; border-radius:999px; font:600 16px/1 var(--body); text-decoration:none; color:var(--mute); transition:background .2s, color .2s}
.links a:hover{background:var(--soft); color:var(--ink)}
.nav .btn{padding:13px 20px; font-size:16px}
.menu-b{display:none; padding:13px 20px; border-radius:999px; border:0; background:var(--ink); color:#fff; font:600 16px/1 var(--body)}
.sheet{position:fixed; inset:0; z-index:60; background:var(--bg); display:flex; flex-direction:column; justify-content:center; gap:4px; padding:100px var(--gut-r) 60px var(--gut)}
.sheet a{font:700 clamp(46px,13vw,80px)/1.02 var(--disp); letter-spacing:-.045em; text-decoration:none}
.sheet .x{position:absolute; top:calc(22px + env(safe-area-inset-top,0px)); right:var(--gut-r); display:inline-flex}

/* hero: the hands, full panel. The two halves of the image start apart and
   drift until the fingertips almost meet; the ring in the image closes with them.
   "Human craft." sits on the human side, "Machine speed." on the machine side. */
.hero{padding:calc(12px + env(safe-area-inset-top,0px)) 12px 0}
.stage{position:relative; height:calc(100svh - 24px); min-height:620px; border-radius:var(--r); overflow:hidden; display:flex; align-items:flex-end; color:#ECEEF1;
  background:radial-gradient(60% 70% at 55% 45%, #2C3542 0%, var(--night) 72%); --pad:clamp(20px,3.2vw,52px)}
.stage .media{position:absolute; inset:0}
.stage .media img{width:100%; height:100%; object-fit:cover}
.stage .ring{position:absolute; left:50%; top:46%; width:min(46vh,40vw); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; border:2px solid #A9C9DE; box-shadow:0 0 28px rgba(169,201,222,.7), inset 0 0 28px rgba(169,201,222,.45); display:none}
.stage.noimg img{display:none} .stage.noimg .ring{display:block}
.stage .shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(35,40,48,.6) 0%, rgba(35,40,48,0) 30%, rgba(35,40,48,0) 60%, rgba(35,40,48,.9) 90%)}
.stage .a1,.stage .a2{position:absolute; margin:0; font:400 clamp(56px,8.6vw,150px)/.9 var(--serif); letter-spacing:-.025em}
.stage .a1{left:var(--pad); top:clamp(100px,13vh,140px)}
.stage .a2{right:var(--pad); top:calc(clamp(100px,13vh,140px) + .95em); text-align:right}
.stage .a2 em{font-style:italic; color:#A9C9DE}
.stage .a1 > span,.stage .a2 > span{display:block; overflow:hidden; padding-bottom:.06em}
.stage .a1 > span > span,.stage .a2 > span > span{display:block}
.stage .content{position:relative; width:100%; padding:0 var(--pad) clamp(28px,5vh,56px)}
.stage .row{display:flex; justify-content:space-between; align-items:flex-end; gap:30px}
.stage .row p{margin:0; max-width:520px; font-size:clamp(19px,1.5vw,22px); color:#D5DBE2}
.hero .ctas{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.touch img{position:absolute; inset:0}
/* each hand is the same image with a soft edge that falls in the dark gap between the fingertips (--s = image px → screen px) */
.touch .cam{position:absolute; inset:0; transform-origin:50% 46%}
.touch .hl{-webkit-mask-image:linear-gradient(90deg,#000 calc(50% - 26 * var(--s,1px)),transparent calc(50% - 2 * var(--s,1px))); mask-image:linear-gradient(90deg,#000 calc(50% - 26 * var(--s,1px)),transparent calc(50% - 2 * var(--s,1px)))}
.touch .hr{-webkit-mask-image:linear-gradient(90deg,transparent calc(50% - 22 * var(--s,1px)),#000 calc(50% + 2 * var(--s,1px))); mask-image:linear-gradient(90deg,transparent calc(50% - 22 * var(--s,1px)),#000 calc(50% + 2 * var(--s,1px)))}
.touch .base{filter:blur(16px)}
.touch .dim{position:absolute; inset:0; background:#000308; opacity:0; pointer-events:none}
.touch .trace{position:absolute; overflow:visible; opacity:0; pointer-events:none; filter:drop-shadow(0 0 3px #9FE3FF) drop-shadow(0 0 14px #1E90FF)}
.touch .trace circle{fill:none; stroke:#EEFCFF; stroke-width:.8; stroke-linecap:round; stroke-dasharray:50 100; stroke-dashoffset:50}
.stage.noimg .trace,.stage.noimg .dim{display:none}
/* founder-led: the promise, said once and large */
.fd{padding-block:clamp(40px,5vw,70px) clamp(110px,12vw,170px)}
.fd-h{margin:0; font:700 clamp(64px,12.4vw,236px)/.86 var(--disp); letter-spacing:-.045em; font-variation-settings:"opsz" 96}
.fd-h .ln{display:block; overflow:hidden; padding-bottom:.06em}
.fd-h .ln > span{display:block}
.fd-h em{font:400 italic 1.04em/.86 var(--serif); letter-spacing:-.03em; color:var(--acc)}
.fd-row{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-top:clamp(30px,4vw,54px)}
.fd-row p{margin:0; max-width:600px; font-size:clamp(20px,1.7vw,24px); color:var(--mute)}
.fd-row p strong{color:var(--ink); font-weight:600}
.fd-chips{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end}
.fd-chips span{padding:13px 18px; border-radius:999px; font:600 16px/1 var(--body)}
.fd-chips span:nth-child(1){background:var(--powder)} .fd-chips span:nth-child(2){background:var(--sage)} .fd-chips span:nth-child(3){background:var(--lilac)}

/* page transitions and the boot screen share one overlay.
   Transition: editor lines sweep in, each a window onto a field of running
   glyphs; a command types over it; the lines retract in a staircase.
   Boot: the page opens already covered, the terminal starts the site while a
   counter runs to 100, then the same lines retract to show the hero. */
.pt{position:fixed; inset:0; z-index:95; visibility:hidden; pointer-events:none; display:grid; place-items:center; overflow:hidden; color:#ECEEF1}
.pt-bands{position:absolute; inset:0; display:flex; flex-direction:column}
.pt-bands i{position:relative; flex:1; overflow:hidden; clip-path:inset(0 100% 0 0); font-style:normal;
  background:radial-gradient(60% 60% at 50% 50%, #2C3542 0%, var(--night) 75%) no-repeat; background-size:100vw 100vh; background-position:0 var(--y,0px)}
.pt-bands i:nth-child(even)::after{content:""; position:absolute; inset:0; background:rgba(255,255,255,.025)}
.pt-bands pre{position:absolute; left:0; right:0; margin:0; font:400 15px/20px var(--mono); color:rgba(169,201,222,.32); white-space:pre; user-select:none}
.pt-bands b{position:absolute; left:max(14px,2vw); top:50%; transform:translateY(-50%); font:400 13px/1 var(--mono); color:#6C7684; background:var(--night); padding:3px 6px; border-radius:4px}
.pt-term{position:relative; margin:0; width:min(900px, calc(100% - 40px)); padding:18px 22px; border-radius:14px; background:rgba(35,40,48,.72); font:400 clamp(17px,2.2vw,30px)/1.6 var(--mono); white-space:pre-wrap; color:#ECEEF1}
.pt-term:empty{visibility:hidden}
.pt-term .p{color:#B9CDBF} .pt-term .c{color:#A9C9DE} .pt-term .d{color:#8C95A2} .pt-term .ok{color:#B9CDBF}
.pt-term .cur{display:inline-block; width:.6em; height:1.1em; margin-left:2px; vertical-align:-.18em; background:#A9C9DE; animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.pt-count,.pt-tag,.pt-bar{display:none}
.pt.booting{visibility:visible; pointer-events:auto; cursor:pointer; animation:pt-safety 0s 9s forwards}
@keyframes pt-safety{to{visibility:hidden; pointer-events:none}}
.pt.booting .pt-bands i{clip-path:none}
.pt.booting .pt-count,.pt.booting .pt-tag,.pt.booting .pt-bar{display:block}
.pt-snd{display:none; position:absolute; right:clamp(20px,4vw,56px); top:calc(clamp(24px,4vh,44px) + env(safe-area-inset-top,0px)); font:400 14px/1 var(--mono); color:#8C95A2}
.pt.booting .pt-snd{display:block} .pt.booting .pt-snd::before{content:"♪ "; color:#A9C9DE}
.pt-count{position:absolute; right:clamp(20px,4vw,56px); bottom:clamp(34px,6vh,70px); font:600 clamp(80px,13vw,210px)/.8 var(--mono); letter-spacing:-.06em; font-variant-numeric:tabular-nums}
.pt-count small{font-size:.32em; color:#A9C9DE; margin-left:.08em; letter-spacing:0}
.pt-tag{position:absolute; left:clamp(20px,4vw,56px); bottom:clamp(38px,6vh,74px); font:400 14px/1.7 var(--mono); color:#8C95A2}
.pt-tag b{display:block; color:#ECEEF1; font-weight:600}
.pt-bar{position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(169,201,222,.15)}
.pt-bar i{display:block; height:100%; transform-origin:left; transform:scaleX(var(--p,0)); background:#A9C9DE; box-shadow:0 0 12px #A9C9DE}
@media (prefers-reduced-motion:reduce){ .pt.booting{visibility:hidden; pointer-events:none} }

/* clients: a quiet line of real names */
.clients{padding:clamp(70px,8vw,110px) 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:12px 34px}
.clients b{font:600 15px/1 var(--body); color:var(--mute); margin-right:8px}
.clients span{font:700 clamp(24px,2.4vw,34px)/1.2 var(--disp); letter-spacing:-.03em; color:#9AA0AA; transition:color .3s}
.clients span:hover{color:var(--ink)}

/* services: big cards that turn dark under you */
.svc{padding-bottom:clamp(110px,12vw,180px)}
.cards{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.sc{position:relative; display:flex; flex-direction:column; justify-content:flex-end; height:clamp(170px,13.5vw,200px); padding:22px 26px; border-radius:var(--r); background:var(--soft); overflow:hidden}
.sc h3{margin:0; font:700 clamp(32px,2.7vw,46px)/.92 var(--disp); letter-spacing:-.05em; transition:transform .7s var(--ease)}
.sc h3 em{font:400 italic 1.1em/.85 var(--serif); letter-spacing:-.02em}
.sc .ln{display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--ease)}
.sc .ln > p{min-height:0; overflow:hidden; margin:0; padding-top:10px; font-size:16px; line-height:1.4; color:var(--mute); opacity:0; transform:translateY(16px); transition:opacity .35s, transform .6s var(--ease)}
.sc:hover .ln{grid-template-rows:1fr}
.sc:hover .ln > p{opacity:1; transform:none; transition-delay:.06s}
@media (hover:none){ .sc .ln{grid-template-rows:1fr} .sc .ln > p{opacity:1; transform:none} }
.sc:nth-child(4n+1){background:var(--powder)} .sc:nth-child(4n+2){background:var(--sage)} .sc:nth-child(4n+3){background:var(--lilac)} .sc:nth-child(4n+4){background:var(--blush)}
.sc.cta{background:var(--acc); color:#fff}
.sc.cta .ln > p{color:#E6ECF6}

/* work: a row that slides sideways while you scroll down */
.work{background:var(--powder); padding:clamp(110px,12vw,170px) 0}
.track-w{overflow:hidden}
.track{display:flex; gap:20px; padding-left:var(--gut); width:max-content}
.wk{flex:0 0 min(90vw,1280px); height:var(--wkh, clamp(440px, calc(100svh - 420px), 700px)); border-radius:var(--r); background:#fff; display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.6fr); overflow:hidden}
.wk .tx{padding:clamp(26px,3vw,42px); display:flex; flex-direction:column; gap:16px; min-width:0}
.wk .k{font:600 15px/1 var(--body); color:var(--acc)}
.wk h3{margin:0; font:700 clamp(44px,4.2vw,72px)/.92 var(--disp); letter-spacing:-.045em}
.wk p{margin:0; color:var(--mute); font-size:18px; line-height:1.55}
.wk .out{margin-top:auto; display:flex; flex-wrap:wrap; gap:8px}
.wk .out span{padding:10px 14px; border-radius:999px; background:var(--soft); font:600 15px/1 var(--body)}
.wk .vi{position:relative; background:var(--night); display:grid; place-items:center; overflow:hidden}
.wk .vi.blue{background:var(--sage)}
.wk .vi.paper{background:var(--acc-soft)}
.ba{position:relative; height:min(78%,460px); max-width:86%; aspect-ratio:274/378; border-radius:20px; overflow:hidden; --x:50%; box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.ba img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ba .af{clip-path:inset(0 0 0 var(--x))}
.ba .hd{position:absolute; top:0; bottom:0; left:var(--x); width:3px; margin-left:-1.5px; background:#fff}
.ba .hd::after{content:"⟷"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:48px; height:48px; border-radius:50%; background:#fff; color:var(--ink); display:grid; place-items:center; font:700 18px/1 var(--body); box-shadow:0 6px 20px rgba(0,0,0,.25)}
.ba .tg{position:absolute; bottom:14px; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.92); font:600 13px/1 var(--body)}
.ba .l{left:14px} .ba .r2{right:14px}
.ba input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0}
.play{width:42%; aspect-ratio:1; border-radius:50%; border:2px solid #A9C9DE; box-shadow:0 0 40px rgba(169,201,222,.5), inset 0 0 40px rgba(169,201,222,.3); display:grid; place-items:center; color:#fff; font-size:44px}
/* the site itself fills the visual: a browser window edge to edge, media cropped from the top */
.wk .vi.web{padding:clamp(18px,2.4vw,34px)}
.shot{width:100%; height:100%; display:flex; flex-direction:column; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 30px 60px -24px rgba(38,42,49,.4)}
.shot .bar{flex:none; height:32px; display:flex; align-items:center; gap:7px; padding:0 14px; background:#EDF0F4}
.shot .bar i{width:10px; height:10px; border-radius:50%; background:#C9D0DA}
.shot video,.shot img{display:block; flex:1; min-height:0; width:100%; height:100%; object-fit:cover; object-position:50% 0}
/* project cards: placeholders for screenshots still to come, the app shelves */
.pane{flex:1; min-height:0; display:flex}
.car .slides{flex:1; min-height:0; display:flex; transition:transform .9s var(--ease)}
.car .slides > .pane{flex:0 0 100%; min-width:0}
.pane > img.tl{object-position:0 0}
.car .url{margin-left:12px; font:500 13px/1 var(--body); color:var(--mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.car .dots{margin-left:auto; display:flex; gap:6px}
.car .dots button{width:22px; height:22px; padding:0; border:0; background:none; cursor:pointer; display:grid; place-items:center}
.car .dots button::before{content:""; width:7px; height:7px; border-radius:50%; background:#C3CAD5; transition:background .3s, width .3s}
.car .dots button[aria-current="true"]::before{background:var(--acc); width:18px; border-radius:4px}

.pane > video,.pane > img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 0}
.tbc-pane{flex:1; display:grid; place-items:center; margin:16px; border:2px dashed #C3CAD5; border-radius:12px; color:var(--mute); font:600 16px/1.4 var(--body); text-align:center; padding:20px}
.ba.wide{height:auto; width:min(94%,820px); aspect-ratio:1425/745}
.stores{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; width:100%; align-self:center; padding:clamp(18px,2.4vw,32px)}
.store{background:#fff; border-radius:22px; padding:clamp(18px,1.8vw,26px); display:flex; flex-direction:column; gap:18px; box-shadow:0 20px 40px -26px rgba(38,42,49,.35)}
.store:nth-child(-n+3){grid-column:span 2}
.store h4{margin:0; display:flex; flex-direction:column; align-items:flex-start; gap:12px; font:700 clamp(18px,1.45vw,22px)/1.1 var(--disp); letter-spacing:-.03em}
.store h4 svg{width:clamp(40px,3.4vw,48px); height:clamp(40px,3.4vw,48px); flex:none}
.store ul{list-style:none; margin:0; padding:18px 0 0; border-top:1px solid var(--line); display:grid; gap:12px}
.store li{display:flex; align-items:center; gap:12px; font:700 clamp(18px,1.5vw,22px)/1.1 var(--disp); letter-spacing:-.02em}
.store li img,.store li svg{width:clamp(44px,3.6vw,54px); height:clamp(44px,3.6vw,54px); border-radius:13px; flex:none}
.store li em{font:600 13px/1 var(--body); letter-spacing:0; font-style:normal; padding:6px 9px; border-radius:999px; background:var(--soft); color:var(--mute); white-space:nowrap}
.store li.soon{color:var(--mute)} .store li.soon img{filter:grayscale(.6); opacity:.75}
.store li.soon span{display:grid; gap:6px; justify-items:start}
/* coming soon: one slim row each */
.store.row{grid-column:span 3; flex-direction:row; align-items:center; justify-content:space-between; gap:10px 12px; padding-block:14px}
.store h4,.store li{min-width:0; overflow-wrap:anywhere}
@media (max-width:1360px){ .store.row{flex-wrap:wrap} .store.row ul{flex-basis:100%} }
/* short laptop screens: the shelves tighten so all five stores fit in the card */
@media (max-height:780px) and (min-width:1101px){ .store{gap:12px; padding-block:14px} .store ul{gap:8px; padding-top:12px} .store h4 svg{width:36px; height:36px} .store li img,.store li svg{width:42px; height:42px; border-radius:11px} .store.row li img{width:36px; height:36px} }
.store.row h4{flex-direction:row; align-items:center; white-space:nowrap}
.store.row h4 svg{width:36px; height:36px}
.store.row ul{border-top:0; padding:0}
.store.row li img{width:42px; height:42px; border-radius:11px}
/* Brick by Brick: the audience numbers, large and glowing, on the dark frame */
.vi.bb{display:flex; flex-direction:column; justify-content:center; align-items:center; gap:clamp(22px,4vh,46px); padding:clamp(24px,3vw,44px)}
/* Brick by Brick: the Short as a portrait poster (its YouTube thumbnail) with the play button on it */
.vi.bb{display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:minmax(0,1fr); align-items:center; gap:clamp(22px,3vw,48px); padding:clamp(20px,2.6vw,40px)}
.yt-poster{position:relative; align-self:stretch; aspect-ratio:9/16; max-height:640px; border-radius:18px; overflow:hidden; background:radial-gradient(70% 60% at 50% 35%, #2C3542 0%, #12161C 80%); box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -20px rgba(0,0,0,.6)}
.yt-poster img,.yt-poster iframe{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0}
.yt-fb{position:absolute; left:16px; right:16px; bottom:16px; font:400 italic clamp(22px,2vw,30px)/1 var(--serif); color:#ECEEF1}
.yt-poster img + .yt-fb{display:none}
.yt-poster .play{position:absolute; left:50%; top:50%; z-index:2; width:84px; padding:0; cursor:pointer; transform:translate(-50%,-50%); font-size:26px; text-decoration:none; background:rgba(11,14,19,.35); backdrop-filter:blur(4px); transition:transform .4s var(--ease), box-shadow .4s}
.yt-poster .play:hover{transform:translate(-50%,-50%) scale(1.08); box-shadow:0 0 50px rgba(169,201,222,.7), inset 0 0 30px rgba(169,201,222,.4)}
.vi.bb .bigstats{grid-template-columns:1fr; gap:clamp(18px,3.5vh,34px)}
.yt-note{position:absolute; left:12px; right:12px; bottom:12px; z-index:3; margin:0; padding:12px 14px; border-radius:12px; background:rgba(11,14,19,.85); color:#ECEEF1; font:500 14px/1.4 var(--body)}
.vi.bb .bigstats div{text-align:left}
.bigstats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,2vw,30px); margin:0; width:100%}
.bigstats div{display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:10px; text-align:center}
.bigstats dd{margin:0; font:700 clamp(40px,5.2vw,88px)/.9 var(--disp); letter-spacing:-.05em; color:#fff; text-shadow:0 0 34px rgba(42,168,255,.55); font-variant-numeric:tabular-nums}
.bigstats dt{font:500 16px/1.35 var(--body); color:#B9C3CF; text-wrap:balance}
/* numbers: value large, label beside it; a dashed value is waiting for real figures */
.kpi{display:grid; gap:8px; margin:0}
.kpi div{display:flex; align-items:baseline; gap:12px; padding:12px 16px; border-radius:16px; background:var(--soft)}
.kpi dd{margin:0; min-width:2.6em; font:700 30px/1 var(--disp); letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.kpi dt{font:600 15px/1.3 var(--body); color:var(--mute)}
.kpi dd.tbc{color:#A3A8B1}
.kpi div:has(dd.tbc){background:none; border:1.5px dashed var(--line)}
.ch{display:flex; flex-wrap:wrap; gap:8px}
.ch a,.ch span{padding:10px 14px; border-radius:999px; border:1.5px solid var(--line); font:600 15px/1 var(--body); text-decoration:none; color:var(--ink)}
.ch a:hover{border-color:var(--acc); color:var(--acc)}
.ch .tbc{border-style:dashed; color:var(--mute)}
.wk .end{margin-top:auto; display:grid; gap:12px}
.wire{width:84%}
.work .hint{margin:26px 0 0; color:var(--mute); font-size:16px}
@media (min-width:1101px){ .work{padding-top:clamp(64px,6vw,100px)} .work .top{margin-bottom:clamp(24px,3vw,40px)} }

/* about: the second image beside the facts */
.about{padding-block:clamp(110px,12vw,180px)}
.ab{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,5vw,80px); align-items:center}
.ab .pic{position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:4/5; background:radial-gradient(60% 70% at 50% 45%, #2C3542 0%, var(--night) 72%)}
.ab .pic img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ab .pic .ring{display:none; position:absolute; left:50%; top:50%; width:60%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; border:2.5px solid #DEF8FF; box-shadow:0 0 22px rgba(42,168,255,.8), inset 0 0 22px rgba(42,168,255,.8)}
.ab .txt p{color:var(--mute); font-size:20px; margin:22px 0 0; max-width:34em}
.ab .txt p strong{color:var(--ink); font-weight:600}
.ab .pic.noimg img{display:none} .ab .pic.noimg .ring{display:block}
.roles{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px}
.roles span{padding:12px 16px; border-radius:999px; background:var(--soft); font:600 15px/1 var(--body)}

/* voices */
.voices{padding-bottom:clamp(110px,12vw,180px)}
.vq{position:relative; border-radius:var(--r); background:var(--lilac); color:var(--ink); padding:clamp(34px,6vw,90px); overflow:hidden}
.vq blockquote{margin:0; font:600 clamp(30px,3.8vw,60px)/1.12 var(--disp); letter-spacing:-.035em; max-width:20em; min-height:3.4em}
.vq blockquote::before{content:"“"; display:block; font:700 120px/.6 var(--disp); color:var(--acc); margin-bottom:10px}
.vq .by{display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:34px; flex-wrap:wrap}
.vq cite{font:600 17px/1.4 var(--body); font-style:normal; color:var(--lilac-ink)}
.vq cite b{display:block; color:var(--ink); font-size:19px}
.vq .sw{display:flex; gap:8px}
.vq .sw button{width:52px; height:52px; border-radius:50%; border:1.5px solid #B9B2CC; background:none; color:var(--ink); font-size:20px; cursor:pointer; transition:background .3s, border-color .3s}
.vq .sw button:hover{background:var(--ink); color:#fff; border-color:var(--ink)}

/* apps */
.apps{padding-bottom:clamp(110px,12vw,180px)}
.ag{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.app{display:flex; flex-direction:column; gap:14px; padding:28px; border-radius:var(--r); border:1.5px solid var(--line); text-decoration:none; transition:border-color .3s, transform .5s var(--ease), box-shadow .5s var(--ease)}
.app:hover{border-color:var(--ink); transform:translateY(-6px); box-shadow:0 24px 50px -30px rgba(11,12,14,.35)}
.app .hd{display:flex; justify-content:space-between; align-items:flex-start}
.app .ic{width:68px; height:68px; border-radius:18px; overflow:hidden; background:var(--soft)}
.app .ic img,.app .ic svg{width:100%; height:100%}
.app .pill{font:600 13px/1 var(--body); padding:8px 12px; border-radius:999px; background:var(--soft); color:var(--mute)}
.app .pill.free{background:#E1EAE3; color:#4E6B58} .app .pill.soon{background:var(--acc-soft); color:var(--acc)}
.app h3{margin:10px 0 0; font:700 38px/1 var(--disp); letter-spacing:-.04em}
.app p{margin:0; color:var(--mute); font-size:17px; line-height:1.5}
.app .pl{margin-top:auto; font:600 15px/1 var(--body)}

/* closing card: the third image */
.end{padding-bottom:clamp(60px,6vw,90px)}
.closer{position:relative; border-radius:calc(var(--r) + 8px); overflow:hidden; background:radial-gradient(60% 70% at 70% 45%, #2C3542 0%, var(--night) 72%); color:#fff; min-height:min(88vh,820px); display:flex; align-items:flex-end}
.closer img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% 50%}
.closer.noimg img{display:none} .closer:not(.noimg) .ring{display:none}
.closer .ring{position:absolute; right:12%; top:50%; width:min(46vh,34vw); aspect-ratio:1; transform:translateY(-50%); border-radius:50%; border:2.5px solid #DEF8FF; box-shadow:0 0 22px rgba(42,168,255,.8), inset 0 0 22px rgba(42,168,255,.8)}
.closer .shade{position:absolute; inset:0; background:linear-gradient(90deg, rgba(35,40,48,.92) 0%, rgba(35,40,48,.6) 45%, rgba(35,40,48,.05) 80%)}
.closer .in{position:relative; padding:clamp(30px,6vw,90px)}
.closer h2{margin:0; font:700 clamp(54px,8.4vw,150px)/.9 var(--disp); letter-spacing:-.05em}
.closer p{margin:26px 0 34px; max-width:500px; color:#C9D0D9; font-size:20px}
.closer .ctas{display:flex; flex-wrap:wrap; gap:12px}
.closer .direct{margin-top:26px; font:600 16px/1.6 var(--body); color:#B9C0CA}
.closer .direct a{color:#fff}

footer{padding:0 0 calc(30px + env(safe-area-inset-bottom,0px))}
.fl{display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px; padding:50px 0 30px; border-top:1px solid var(--line)}
.fl nav{display:flex; flex-wrap:wrap; gap:8px 26px}
.fl a{text-decoration:none; font:600 17px/1.6 var(--body)}
.fl a:hover{color:var(--acc)}
.big{font:700 clamp(80px,22vw,340px)/.85 var(--mono); letter-spacing:-.04em; color:var(--ink); display:flex; overflow:hidden; padding-bottom:.06em}
.big span{display:inline-block; transition:transform .5s var(--ease), color .3s}
.mo .big:not(.in) span{transform:translateY(100%)}
.mo .big.in span{transition:transform 1.1s var(--ease) calc(var(--i) * 60ms), color .3s}
.big span:hover{transform:translateY(-8%); color:var(--acc)}
.legal{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:20px; color:var(--mute); font-size:15px}

/* the team: each portrait starts as code drawn from the photo; hover or tap decodes it */
.dx-w{margin-top:clamp(44px,5vw,72px)}
.dx-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.dx{position:relative; aspect-ratio:3/4; border-radius:22px; overflow:hidden; border:0; padding:0; background:#0B0E13; color:#fff; cursor:pointer; text-align:left; transition:translate .4s var(--ease)}
.dx:hover{translate:0 -4px}
.dx pre{position:absolute; inset:0; margin:0; display:grid; place-items:center; font:700 10px/1 var(--mono); color:#9DBCE6; text-shadow:0 0 6px rgba(42,168,255,.45); white-space:pre; overflow:hidden}
.dx img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%}
.dx-w.armed .dx img{clip-path:inset(0 0 100% 0)}
.dx .scan{position:absolute; left:0; right:0; top:0; height:2px; background:#DEF8FF; box-shadow:0 0 14px 3px rgba(42,168,255,.7); opacity:0; pointer-events:none}
.dx .cap{position:absolute; left:0; right:0; bottom:0; padding:56px 18px 18px; background:linear-gradient(transparent, rgba(11,14,19,.92))}
.dx .cap b{display:block; font:700 clamp(20px,1.8vw,28px)/1.05 var(--disp); letter-spacing:-.03em}
.dx .fn{display:block; min-height:1.4em; margin-top:6px; font:500 14px/1.4 var(--mono); color:#A9C9DE; overflow-wrap:anywhere}
.dx .fn::before{content:"> "; color:#7F8A99}
.dx[aria-pressed="true"] .fn::after{content:""; display:inline-block; width:.55em; height:2px; margin-left:3px; vertical-align:-.1em; background:#A9C9DE; animation:blink 1.06s steps(1) infinite}
.dx .rl{display:flex; align-items:center; gap:8px; margin-top:4px; font:500 15px/1.3 var(--body); color:#C9D0D9}
.dx .rl svg{width:20px; height:13px; border-radius:2px; flex:none}
/* a founder, opened: the card grows into a larger panel (not full screen) */
.dx-pop{position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:max(16px,4vh) max(16px,4vw)}
.dxp-back{position:absolute; inset:0; background:rgba(20,23,28,.55); backdrop-filter:blur(6px)}
.dxp-card{position:relative; width:min(960px,100%); height:min(84vh,620px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); border-radius:28px; overflow:hidden; background:#0B0E13; color:#fff; box-shadow:0 40px 90px -20px rgba(0,0,0,.55); transform-origin:0 0}
.dxp-pic{position:relative; min-height:0} .dxp-pic img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 18%}
.dxp-tx{padding:clamp(24px,3.6vw,52px); display:flex; flex-direction:column; justify-content:flex-end; gap:12px; overflow:auto; min-height:0}
.dxp-k{font:600 14px/1 var(--body); color:#A7AFBA}
.dxp-tx h3{margin:0; font:700 clamp(36px,4vw,60px)/.95 var(--disp); letter-spacing:-.045em}
.dxp-tx .fn{min-height:1.4em; font:500 16px/1.4 var(--mono); color:#A9C9DE} .dxp-tx .fn::before{content:"> "; color:#7F8A99}
.dxp-tx .fn::after{content:""; display:inline-block; width:.55em; height:2px; margin-left:3px; vertical-align:-.1em; background:#A9C9DE; animation:blink 1.06s steps(1) infinite}
.dxp-tx .rl{margin:0; display:flex; align-items:center; gap:10px; font:500 17px/1.3 var(--body); color:#C9D0D9} .dxp-tx .rl svg{width:21px; height:14px; border-radius:2px}
.dxp-tx .bio{margin:10px 0 0; font-size:19px; line-height:1.55; color:#DDE2E8; max-width:30em}
.dxp-x{position:absolute; top:14px; right:14px; z-index:2; width:46px; height:46px; border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; font-size:18px; cursor:pointer; backdrop-filter:blur(6px)}
.dxp-x:hover{background:rgba(255,255,255,.26)}
@media (max-width:640px){ .dxp-card{grid-template-columns:1fr; grid-template-rows:minmax(0,1.1fr) auto; height:min(88vh,720px)} .dxp-tx{padding:22px} .dxp-tx .bio{font-size:17px} }
.dx-hint{margin:16px 0 0; font:500 15px/1.4 var(--mono); color:var(--mute)}
/* the ring: one halo that travels the page */
.halo{position:fixed; left:0; top:0; z-index:40; pointer-events:none; border-radius:50%; border:2px solid var(--hc,#5A74AC); box-shadow:0 0 var(--hg,10px) var(--hs,rgba(90,116,172,.35)), inset 0 0 var(--hg,10px) var(--hs,rgba(90,116,172,.35)); opacity:0; will-change:transform}
.halo i{position:absolute; left:50%; top:-5px; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:var(--hc,#5A74AC); box-shadow:0 0 10px var(--hs)}
.halo-at{display:inline-block; width:.6em; aspect-ratio:1; margin-left:.14em; vertical-align:baseline}
html:not(.mo) .halo-at{border:.05em solid var(--acc); border-radius:50%}
.nw{white-space:nowrap}
.big .dot{position:relative; width:.56em}
.big .dot i{position:absolute; left:.08em; bottom:.05em; width:.16em; aspect-ratio:1; border-radius:50%; background:var(--acc)}
/* the gap between the fingertips */
.stage .media.touch{background:linear-gradient(180deg,#00060F 0%,#010D20 55%,#021430 100%)}
.spark{position:absolute; width:20px; height:3px; transform:translate(-50%,-50%); opacity:0; pointer-events:none; transition:opacity .6s}
.spark::before{content:""; position:absolute; inset:0; border-radius:2px; background:#EAFBFF; box-shadow:0 0 6px #7FD8FF, 0 0 16px #2AA8FF}
.spark.on{opacity:1} .spark.on::before{animation:blink 1.06s steps(1) .6s infinite}
.spark .bolts{position:absolute; left:50%; top:50%; width:1px; height:1px; overflow:visible; filter:drop-shadow(0 0 2px #9FE3FF) drop-shadow(0 0 5px #2AA8FF)}
.spark .bolts path{fill:none; stroke:#FFFFFF; stroke-width:.75; stroke-linejoin:round; stroke-linecap:round; transition:opacity .25s}
.spark .bolts path.br{stroke-width:.5}
@keyframes blink{50%{opacity:0}}
.stage.noimg .spark{display:none}
/* sound switch */
.act{display:flex; align-items:center; gap:8px}
.snd{display:inline-flex; align-items:center; gap:8px; padding:12px 15px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--mute); font:600 15px/1 var(--body); cursor:pointer; transition:background .2s, color .2s}
.snd:hover{background:var(--soft); color:var(--ink)}
.snd svg{width:18px; height:18px; flex:none}
.snd[data-s="off"] .w{opacity:0}
@media (max-width:640px){ .snd b{display:none} .snd{padding:12px 13px} }
@media (max-width:1100px){
  .links{display:none} .nav .btn{display:none} .menu-b{display:inline-flex}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ag{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1100px){   /* tablets and phones: project cards stack instead of sliding sideways */
  .track{flex-direction:column; width:auto; padding-right:var(--gut-r)}
  .wk{flex:none; height:auto; grid-template-columns:1fr}
  .wk .vi{min-height:340px; padding:30px 0}
  .wk .vi.web{min-height:0; padding:16px}
  .shot{height:auto} .shot video,.shot img{height:auto; flex:none; object-fit:fill}
  .ba{height:auto; width:min(86%,380px)} .ba.wide{width:92%}
  .vi.bb{grid-template-columns:1fr; grid-template-rows:auto} .yt-poster{align-self:auto; justify-self:center; height:min(68vh,520px)} .vi.bb .bigstats{grid-template-columns:repeat(3,minmax(0,1fr))} .vi.bb .bigstats div{text-align:center}
  .stores{grid-template-columns:1fr; gap:10px; padding:14px} .store:nth-child(n), .store.row{grid-column:auto} .store h4{flex-direction:row; align-items:center} .store h4 svg{width:36px; height:36px} .store ul{padding-top:14px} .bigstats dd{font-size:34px} .bigstats dt{font-size:14px} .pane > video,.pane > img{height:auto}
  .ab{grid-template-columns:1fr}
  .ab .pic{aspect-ratio:4/3}
  .work .hint{display:none}
}
@media (max-width:640px){
  .pt-count{bottom:auto; top:calc(70px + env(safe-area-inset-top,0px))} .pt-term{font-size:15px}
  .fd-row{flex-direction:column; align-items:flex-start} .fd-chips{justify-content:flex-start}
  .dx-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px} .dx .cap{padding:44px 12px 12px} .dx .fn{font-size:13px} .dx .rl{font-size:13px} .dx .rl svg{display:none}
  body{font-size:18px}
  .hero{padding:calc(8px + env(safe-area-inset-top,0px)) 8px 0}
  .stage{height:calc(100svh - 16px); min-height:600px; border-radius:22px}
  .stage .a1{top:96px} .stage .a2{top:calc(96px + 1.95em)}
  .stage .row{flex-direction:column; align-items:flex-start}
  .top{flex-direction:column; align-items:flex-start}
  .cards{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin-right:calc(-1 * var(--gut-r)); padding-right:var(--gut-r); scrollbar-width:none}
  .sc{flex:0 0 80%; height:auto; min-height:160px; scroll-snap-align:start}

  .ag{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; margin-right:calc(-1 * var(--gut-r)); padding-right:var(--gut-r); scrollbar-width:none}
  .app{flex:0 0 84%; scroll-snap-align:start}
  .closer{min-height:0}
  .closer .shade{background:linear-gradient(180deg, rgba(35,40,48,.3), rgba(35,40,48,.94) 55%)}
  .closer .in{padding-top:260px}
  .closer .ring{top:44px; right:50%; transform:translateX(50%); width:190px}
  .closer img{object-position:50% 0; height:62%}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important}
}

/* ── Subpages (SEO+, Apps): same tokens and parts as the home page, plus page sections ── */
.sub-hero{padding:calc(12px + env(safe-area-inset-top,0px)) 12px 0}
.sub-stage{position:relative; border-radius:var(--r); overflow:hidden; color:#ECEEF1; background:radial-gradient(60% 70% at 72% 40%, #2C3542 0%, var(--night) 72%); min-height:min(86svh,760px); display:flex; align-items:flex-end; --pad:clamp(20px,3.6vw,56px)}
.sub-stage .glow{position:absolute; right:7%; top:44%; width:min(48vh,36vw); aspect-ratio:1; transform:translateY(-50%); border-radius:50%; border:2.5px solid #DEF8FF; box-shadow:0 0 22px rgba(42,168,255,.8), inset 0 0 22px rgba(42,168,255,.8)}
.sub-stage .glow::after{content:""; position:absolute; left:50%; top:-5px; width:9px; height:9px; margin-left:-4.5px; border-radius:50%; background:#DEF8FF; box-shadow:0 0 12px #2AA8FF}
.sub-stage .in{position:relative; width:100%; padding:calc(110px + env(safe-area-inset-top,0px)) var(--pad) var(--pad)}
.sub-stage .k{font:600 15px/1.5 var(--body); color:#A9C9DE}
.sub-stage h1{margin:16px 0 0; font:700 clamp(50px,7.4vw,124px)/.92 var(--disp); letter-spacing:-.05em; max-width:12ch; text-wrap:balance}
.sub-stage h1 em{font:400 italic 1.06em/.9 var(--serif); letter-spacing:-.02em; color:#A9C9DE}
.sub-stage p{margin:22px 0 0; max-width:640px; font-size:clamp(18px,1.4vw,21px); color:#D5DBE2}
.sub-stage .ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.jump{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px}
.jump a{padding:10px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.28); color:#fff; text-decoration:none; font:600 15px/1 var(--body); transition:background .2s, color .2s}
.jump a:hover{background:#fff; color:var(--ink)}
.price-line{margin-top:22px !important; font:500 15px/1.5 var(--mono) !important; color:#A9C9DE !important}
.sec{padding-block:clamp(80px,9vw,140px)}
.band{background:var(--powder)} .band.sage{background:var(--sage)} .band.lilac{background:var(--lilac)}
.sec .top{margin-bottom:clamp(30px,4vw,54px)}
.lede{margin:0; font-size:clamp(19px,1.5vw,23px); line-height:1.6; color:var(--mute); max-width:44em}
.lede strong{color:var(--ink); font-weight:600}
.two{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,5vw,80px); align-items:start}
.ticks{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.ticks li{display:flex; gap:14px; font-size:19px; line-height:1.45}
.ticks li::before{content:""; flex:none; width:14px; height:14px; margin-top:6px; border-radius:50%; border:2px solid var(--acc); box-shadow:0 0 8px rgba(90,116,172,.35)}
.note{margin:26px 0 0; padding:20px 22px; border-radius:18px; background:#fff; color:var(--mute); font-size:17px}
.grid{display:grid; gap:14px} .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tile{padding:clamp(22px,2.4vw,32px); border-radius:var(--r); background:var(--soft); display:flex; flex-direction:column; gap:12px}
.tile h3{margin:0; font:700 clamp(23px,1.9vw,30px)/1.05 var(--disp); letter-spacing:-.03em}
.tile p{margin:0; color:var(--mute); font-size:17px; line-height:1.55}
.tile p a{color:var(--acc)}
.grid > .tile:nth-child(4n+1){background:var(--powder)} .grid > .tile:nth-child(4n+2){background:var(--sage)} .grid > .tile:nth-child(4n+3){background:var(--lilac)} .grid > .tile:nth-child(4n+4){background:var(--blush)}
.band .grid > .tile{background:#fff}
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chips span{padding:13px 18px; border-radius:999px; background:#fff; border:1px solid var(--line); font:600 16px/1 var(--body)}
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px}
.steps li{padding:24px; border-radius:var(--r); background:#fff; display:flex; flex-direction:column; gap:10px}
.steps b{font:600 14px/1 var(--mono); color:var(--acc)}
.steps h3{margin:0; font:700 clamp(24px,2vw,30px)/1 var(--disp); letter-spacing:-.03em}
.steps p{margin:0; color:var(--mute); font-size:16px}
.quote{margin:0; padding:clamp(28px,3vw,44px); border-radius:var(--r); background:var(--lilac); display:flex; flex-direction:column; justify-content:space-between; gap:24px}
.quote blockquote{margin:0; font:500 clamp(21px,1.8vw,27px)/1.35 var(--disp); letter-spacing:-.02em}
.quote figcaption{color:var(--mute); font-size:16px} .quote figcaption b{display:block; color:var(--ink)}
.faq details{border-top:1px solid var(--line)} .faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 0; font:700 clamp(20px,1.7vw,27px)/1.2 var(--disp); letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; flex:none; width:16px; height:16px; border-radius:50%; border:2px solid var(--acc); transition:background .3s, box-shadow .3s}
.faq details[open] summary::after{background:var(--acc); box-shadow:0 0 12px rgba(90,116,172,.5)}
.faq details p{margin:0 0 26px; color:var(--mute); max-width:46em; font-size:18px}
.app-card{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(18px,2.4vw,30px); padding:clamp(24px,2.6vw,36px); border-radius:var(--r); background:#fff}
.app-card .ic img,.app-card .ic svg{width:clamp(64px,6vw,84px); height:clamp(64px,6vw,84px); border-radius:20px; display:block}
.app-card h3{margin:0; font:700 clamp(30px,2.8vw,44px)/1 var(--disp); letter-spacing:-.04em}
.app-card .meta{display:block; margin-top:10px; font:500 15px/1.4 var(--mono); color:var(--acc)}
.app-card p{margin:14px 0 18px; color:var(--mute); font-size:18px; line-height:1.55}
.app-card .ticks li{font-size:17px}
.app-card .go{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.app-card .go .btn{padding:14px 20px; font-size:16px}
.app-card.soon{background:transparent; border:2px dashed #C3CAD5}
.closer.ringed .ring{display:block}
@media (max-width:1100px){ .steps{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:860px){ .two,.g2,.g3{grid-template-columns:1fr} .sub-stage .glow{right:-18%; top:30%; width:70vw; opacity:.45} }
@media (max-width:640px){ .g4,.steps{grid-template-columns:1fr} .app-card{grid-template-columns:1fr} .sub-stage{min-height:0} .sub-stage .in{padding-top:calc(120px + env(safe-area-inset-top,0px))} }
/* arriving from another Codeja page: the code bands start down, the script lifts them */
html.arrive .pt{visibility:visible; background:radial-gradient(60% 60% at 50% 50%, #2C3542 0%, var(--night) 75%)} html.arrive .pt-bands i{clip-path:none}
.two .top{flex-direction:column; align-items:flex-start; gap:18px}
.two .top p{max-width:34em}
/* blog: tag filter, a featured post and a grid of cards */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(26px,3vw,40px)}
.filters button{padding:11px 16px; border-radius:999px; border:1.5px solid var(--line); background:#fff; font:600 15px/1 var(--body); cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.post{position:relative; display:flex; flex-direction:column; border-radius:var(--r); overflow:hidden; background:#fff; text-decoration:none; color:inherit; transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.post:hover{transform:translateY(-6px); box-shadow:0 30px 60px -30px rgba(38,42,49,.4)}
.post .cv{aspect-ratio:16/10; overflow:hidden; background:var(--powder)}
.post .cv img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease)}
.post:hover .cv img{transform:scale(1.05)}
.post .cv.txt{position:relative; display:flex; align-items:flex-end; padding:24px; background:radial-gradient(60% 80% at 70% 40%, #2C3542 0%, var(--night) 75%)}
.post .cv.txt i{position:absolute; right:12%; top:50%; width:44%; aspect-ratio:1; transform:translateY(-50%); border-radius:50%; border:2px solid #DEF8FF; box-shadow:0 0 18px rgba(42,168,255,.7), inset 0 0 18px rgba(42,168,255,.6)}
.post .cv.txt span{position:relative; font:400 italic clamp(34px,3vw,48px)/1 var(--serif); color:#ECEEF1}
.post .bd{padding:clamp(20px,2vw,28px); display:flex; flex-direction:column; gap:12px; flex:1}
.post .mt{display:flex; flex-wrap:wrap; align-items:center; gap:10px; font:500 14px/1 var(--body); color:var(--mute)}
.post .tg{padding:7px 10px; border-radius:999px; background:var(--acc-soft); color:var(--acc); font-weight:600}
.post h3{margin:0; font:700 clamp(22px,1.8vw,28px)/1.1 var(--disp); letter-spacing:-.03em; text-wrap:balance}
.post p{margin:0; color:var(--mute); font-size:16px; line-height:1.5}
.post .rd{margin-top:auto; padding-top:6px; font:600 15px/1 var(--body); color:var(--acc)}
.post.feat{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); margin-bottom:16px}
.post.feat .cv{aspect-ratio:auto; min-height:360px}
.post.feat h3{font-size:clamp(30px,3.2vw,52px)}
.post.feat p{font-size:18px}
.post[hidden]{display:none}
@media (max-width:860px){ .post.feat{grid-template-columns:1fr} .post.feat .cv{min-height:0; aspect-ratio:16/10} }

/* ── Live-site parts the older script.js draws: cookie banner, toasts, the SEO+ enquiry form, FAQ, blog cards ── */

/* FAQ: the dot is drawn by summary::after; the <i> only marks the question for the site audit */
.faq summary i{display:none}

/* cookie banner (script.js #14 builds it) */
.cookie-banner{position:fixed; z-index:90; right:max(16px, env(safe-area-inset-right,0px)); bottom:max(16px, env(safe-area-inset-bottom,0px)); width:min(420px, calc(100vw - 32px));
  padding:22px 22px 20px; border-radius:22px; background:#fff; color:var(--ink); box-shadow:0 30px 70px -30px rgba(38,42,49,.45), 0 0 0 1px var(--line);
  opacity:0; transform:translateY(16px); transition:opacity .45s var(--ease), transform .45s var(--ease); pointer-events:none}
.cookie-banner.in{opacity:1; transform:none; pointer-events:auto}
.cookie-head{margin-bottom:8px}
.cookie-title{font:600 14px/1 var(--mono); color:var(--acc)}
.cookie-desc{margin:0 0 16px; font-size:15px; line-height:1.55; color:var(--mute)}
.cookie-desc a{color:var(--acc)}
.cookie-btns{display:flex; gap:10px; flex-wrap:wrap}
.cookie-btns .btn{padding:13px 20px; font-size:15px; border:1.5px solid var(--line); background:#fff; color:var(--ink); cursor:pointer}
.cookie-btns .btn-primary{background:var(--acc); border-color:var(--acc); color:#fff}
.cookie-btns .btn:hover{background:var(--ink); border-color:var(--ink); color:#fff}
@media (max-width:580px){ .cookie-banner{left:0; right:0; bottom:0; width:auto; border-radius:22px 22px 0 0; padding-bottom:max(20px, env(safe-area-inset-bottom,0px))} }

/* toasts (script.js #10, after the enquiry form is sent) */
.toast-container{position:fixed; z-index:95; top:max(16px, env(safe-area-inset-top,0px)); right:16px; display:grid; gap:10px; width:min(380px, calc(100vw - 32px)); pointer-events:none}
.toast{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:start; padding:16px; border-radius:18px; background:#fff; box-shadow:0 24px 60px -28px rgba(38,42,49,.45), 0 0 0 1px var(--line);
  opacity:0; transform:translateY(-10px); transition:opacity .3s, transform .3s; pointer-events:auto}
.toast.is-visible{opacity:1; transform:none}
.toast-icon{display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--acc-soft); color:var(--acc); font-weight:700}
.toast-error .toast-icon{background:var(--blush); color:#9A3B4A}
.toast-title{font-weight:700}
.toast-msg{font-size:15px; color:var(--mute); line-height:1.45}
.toast-close{border:0; background:none; font-size:22px; line-height:1; color:var(--mute); cursor:pointer}

/* SEO+ enquiry: contact lines beside the form */
.enquiry .lede{margin-top:22px}
.lines{list-style:none; margin:30px 0 0; padding:0; display:grid; gap:18px}
.lines li{display:grid; gap:4px; padding-top:16px; border-top:1px solid var(--line)}
.lines b{font:600 14px/1.3 var(--body); color:var(--mute)}
.lines a{color:var(--ink); font-weight:600; text-decoration-color:var(--line); text-underline-offset:4px}
.lines a.sm{font-weight:500; font-size:16px; color:var(--acc)}
.contact-form{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding:clamp(22px,3vw,36px); border-radius:var(--r); background:#fff; box-shadow:0 0 0 1px var(--line)}
.contact-form label{display:grid; gap:8px; font:600 15px/1.2 var(--body); color:var(--mute)}
.contact-form label.full{grid-column:1/-1}
.contact-form input,.contact-form select,.contact-form textarea{width:100%; padding:14px 16px; border-radius:14px; border:1.5px solid var(--line); background:var(--bg); color:var(--ink); font:400 17px/1.4 var(--body)}
.contact-form textarea{resize:vertical; min-height:120px}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none; border-color:var(--acc); background:#fff}
.contact-form .send-btn{grid-column:1/-1; justify-self:start; cursor:pointer}
.contact-form .send-btn:disabled{opacity:.6; cursor:progress}
@media (max-width:560px){ .contact-form{grid-template-columns:1fr} }

/* blog: script.js #16 draws the topic chips and the cards from posts.js;
   the first card is the featured one and spans the row */
#blog-index{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
#blog-index .post.feat{grid-column:1/-1; margin-bottom:0}
.post-note{grid-column:1/-1; margin:0; color:var(--mute)}
@media (max-width:1100px){ #blog-index{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ #blog-index{grid-template-columns:1fr} }

/* SEO+ hero: the live page's second line under the h1 */
.sub-stage .sub-q{margin:20px 0 0; max-width:30ch; font:600 clamp(22px,2vw,30px)/1.2 var(--disp); letter-spacing:-.025em; color:#ECEEF1}
.sub-stage p a{color:#fff; text-underline-offset:3px}
/* the #enquiry-form anchor and the honeypot take no grid cell */
.contact-form > #enquiry-form{grid-column:1/-1; margin-bottom:-16px}
.enquiry .h2{font-size:clamp(44px,5vw,84px)}
/* a carousel with one screen needs no dot */
.shot .dots button:only-child{display:none}

/* two-column sections: the heading shares the row with a list, so it is sized to its column
   (the full-width .h2 scale made "Straightforward," run into the list on wide screens) */
.two > *{min-width:0}
.two .h2{font-size:clamp(44px,4.6vw,84px); overflow-wrap:break-word}