/* ASOLZ design system — dark "signal field": full-bleed near-black bands divided by hairlines,
   oversized Archivo headlines set hard left against mono index labels, one yellow focal point per view.
   Committed single dark theme (brand requirement), so colors are declared once on :root. */
:root{
  --ink:#08090B; --ink-2:#0E1013; --ink-3:#141720;
  --line:#23252B; --line-hot:#3A3718;
  --volt:#F5FF00; --amber:#FFD43B;
  --wa:#25D366; --wa-dark:#1DA851;   /* official WhatsApp green */
  --paper:#F5F5F5; --mute:#A5A7AD; --dim:#6E7178;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --sp:clamp(60px,7.5vw,108px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--volt);outline-offset:3px;border-radius:2px}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1.04;margin:0;text-wrap:balance}
h1{font-size:clamp(2.4rem,6.4vw,5.2rem);font-weight:800;letter-spacing:-.038em}
h2{font-size:clamp(1.85rem,4vw,3.1rem)}
h3{font-size:clamp(1.1rem,1.8vw,1.42rem);letter-spacing:-.015em}
h4{font-size:1rem;letter-spacing:-.01em}
p{margin:0}
.lede{font-size:clamp(1.02rem,1.45vw,1.2rem);color:var(--mute);max-width:60ch;line-height:1.62}
.prose{color:var(--mute);max-width:66ch;display:grid;gap:1rem}
strong{color:var(--paper);font-weight:600}

/* --- structure --- */
.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.band{border-top:1px solid var(--line)}
.band--raised{background:var(--ink-2)}
.band > .wrap{padding-block:var(--sp)}
.eyebrow{font-family:var(--mono);font-size:.71rem;letter-spacing:.17em;text-transform:uppercase;color:var(--volt);display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;margin-bottom:1.3rem}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--volt);flex:none}
.eyebrow span{color:var(--dim)}
.sec-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(22px,4vw,60px);align-items:end;margin-bottom:clamp(32px,4.5vw,56px)}
.sec-head p{color:var(--mute);max-width:52ch}
@media (max-width:860px){.sec-head{grid-template-columns:1fr;align-items:start;gap:16px}}
.two{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(26px,4vw,60px);align-items:start}
@media (max-width:900px){.two{grid-template-columns:1fr}}

/* --- buttons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:48px;padding:0 1.45rem;border-radius:2px;border:1px solid transparent;font-family:var(--body);font-weight:600;font-size:.94rem;text-decoration:none;cursor:pointer;transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease)}
.btn--primary{background:var(--volt);color:#08090B}
.btn--primary:hover{background:var(--amber)}
.btn--ghost{border-color:var(--line);color:var(--paper)}
.btn--ghost:hover{border-color:var(--volt);color:var(--volt)}
.btn--sm{min-height:40px;font-size:.85rem;padding:0 1rem}
.arrow{transition:transform .22s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.textlink{font-family:var(--mono);font-size:.77rem;letter-spacing:.08em;text-transform:uppercase;color:var(--volt);text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;border-bottom:1px solid transparent;padding-block:.3rem}
.textlink:hover{border-bottom-color:var(--volt)}
.chip{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);padding:.45rem .7rem;color:var(--mute);text-decoration:none;transition:border-color .22s var(--ease),color .22s var(--ease)}
.chip:hover{border-color:var(--volt);color:var(--volt)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.todo{font-family:var(--mono);font-size:.68rem;color:var(--amber);border:1px dashed var(--line-hot);padding:.2rem .45rem;display:inline-block}

/* --- nav --- */
.skip{position:absolute;left:-9999px;top:0;background:var(--volt);color:#08090B;padding:.75rem 1rem;z-index:100}
.skip:focus{left:8px;top:8px}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;border-bottom:1px solid transparent;transition:background .25s var(--ease),border-color .25s var(--ease)}
.nav.is-stuck{background:rgba(8,9,11,.86);backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.nav__in{display:flex;align-items:center;gap:1.4rem;min-height:70px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;margin-right:auto;flex:none}
.brand__mark{width:25px;height:25px;flex:none}
.brand__name{font-family:var(--display);font-weight:800;letter-spacing:-.03em;font-size:1.04rem}
.brand__name em{font-style:normal;color:var(--volt)}
.navlinks{display:flex;align-items:center;gap:.1rem;list-style:none;margin:0;padding:0}
.navlinks a,.navlinks button{font-family:var(--body);font-size:.91rem;font-weight:500;color:var(--mute);background:none;border:0;padding:.6rem .68rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.35rem;transition:color .2s var(--ease)}
.navlinks a:hover,.navlinks button:hover,.navlinks a[aria-current]{color:var(--paper)}
.navlinks a[aria-current]{position:relative}
.navlinks a[aria-current]::after{content:"";position:absolute;left:.68rem;right:.68rem;bottom:.28rem;height:2px;background:var(--volt)}
.caret{width:9px;height:9px;transition:transform .22s var(--ease)}
[aria-expanded="true"] .caret{transform:rotate(180deg)}
.burger{display:none;background:none;border:1px solid var(--line);width:46px;height:46px;cursor:pointer;color:var(--paper);align-items:center;justify-content:center}
@media (max-width:1060px){.navlinks,.nav__cta{display:none}.burger{display:inline-flex}}

.mega{position:absolute;left:0;right:0;top:100%;background:rgba(10,11,14,.98);backdrop-filter:blur(16px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mega__in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px);padding-block:32px}
.mega__h{font-family:var(--mono);font-size:.69rem;letter-spacing:.17em;text-transform:uppercase;color:var(--volt);font-weight:500;margin-bottom:.8rem}
.mega ul{list-style:none;margin:0;padding:0;display:grid;gap:.05rem}
.mega a{display:block;padding:.48rem .6rem;margin-left:-.6rem;color:var(--mute);text-decoration:none;font-size:.92rem;border-radius:2px}
.mega a:hover{color:var(--paper);background:rgba(245,255,0,.06)}
.mega a small{display:block;color:var(--dim);font-size:.75rem;line-height:1.4}
.mega__foot{border-top:1px solid var(--line);padding-block:14px 30px;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}

.drawer{display:none;border-top:1px solid var(--line);background:var(--ink);max-height:calc(100dvh - 70px);overflow-y:auto}
.drawer.is-open{display:block}
.drawer__in{padding-block:18px 30px;display:grid;gap:.2rem}
.drawer a{padding:.82rem .2rem;color:var(--paper);text-decoration:none;border-bottom:1px solid var(--line);font-size:1.04rem}
.drawer details summary{padding:.82rem .2rem;border-bottom:1px solid var(--line);cursor:pointer;font-size:1.04rem;list-style:none;display:flex;justify-content:space-between;align-items:center}
.drawer details summary::-webkit-details-marker{display:none}
.drawer details a{padding-left:1rem;font-size:.94rem;color:var(--mute)}
/* the generic `.drawer a` colour was overriding the button's own
   colour, leaving white text on the yellow fill. Restored here. */
.drawer a.btn{margin-top:1.1rem;border-bottom:0;font-size:.95rem}
.drawer a.btn--primary{color:#08090B;background:var(--volt)}
.drawer a.btn--primary:hover{color:#08090B;background:var(--amber)}
.drawer a.btn--wa{color:#FFFFFF;background:var(--wa);width:100%}
#drawerWa{display:grid}

/* --- hero (static SVG, no canvas) --- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero__veil{position:absolute;inset:0;background:linear-gradient(95deg,var(--ink) 18%,rgba(8,9,11,.72) 48%,rgba(8,9,11,.25) 72%);pointer-events:none}
.hero__in{position:relative;padding-block:clamp(64px,9.5vw,128px) clamp(44px,6vw,80px)}
.hero h1{margin-bottom:1.5rem;max-width:17ch}
.hero h1 em{font-style:normal;color:var(--volt)}
.hero__sub{max-width:52ch;font-size:clamp(1rem,1.45vw,1.18rem);color:var(--mute)}
.hero__strip{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:2.6rem;padding-top:1.3rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:.73rem;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.hero__strip b{color:var(--mute);font-weight:400}
.pulse{animation:pulse 4.5s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:.8}}

/* --- disciplines --- */
.disc{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.disc__row{background:var(--ink);padding:1.05rem 1.15rem;display:grid;grid-template-columns:auto 1fr;gap:.95rem;align-items:start;transition:background .25s var(--ease)}
.disc__row:hover{background:var(--ink-3)}
.disc__n{font-family:var(--mono);font-size:.71rem;color:var(--volt);padding-top:.22rem}
.disc__row h3{font-size:1rem;margin-bottom:.18rem}
.disc__row p{font-size:.89rem;color:var(--mute)}

/* --- service bento --- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:13px}
.svc{position:relative;grid-column:span 2;background:var(--ink-3);border:1px solid var(--line);padding:1.4rem 1.3rem;text-decoration:none;display:flex;flex-direction:column;gap:.55rem;min-height:196px;transition:border-color .25s var(--ease),background .25s var(--ease)}
.svc:hover{border-color:var(--line-hot);background:#171a24}
.svc--wide{grid-column:span 3}
.svc__ico{width:28px;height:28px;color:var(--volt);flex:none}
.svc h3{font-size:1.08rem}
.svc p{font-size:.875rem;color:var(--mute);flex:1}
.svc__go{font-family:var(--mono);font-size:.69rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:.4rem}
.svc:hover .svc__go{color:var(--volt)}
.svc__tag{position:absolute;top:1rem;right:1.1rem;font-family:var(--mono);font-size:.61rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
@media (max-width:1000px){.bento{grid-template-columns:repeat(4,1fr)}.svc--wide{grid-column:span 2}}
@media (max-width:640px){.bento{grid-template-columns:1fr;gap:10px}.svc,.svc--wide{grid-column:span 1;min-height:0}}

/* --- generic cards --- */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,288px),1fr));gap:15px}
.card{border:1px solid var(--line);background:var(--ink-3);display:flex;flex-direction:column;text-decoration:none;transition:border-color .25s var(--ease)}
.card:hover{border-color:var(--line-hot)}
.card__vis{aspect-ratio:16/10;max-width:100%;background:var(--ink-2);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.card__vis svg{position:absolute;inset:0;width:100%;height:100%}
.card__body{padding:1.15rem 1.15rem 1.3rem;display:grid;gap:.45rem}
.card__meta{display:flex;justify-content:space-between;gap:1rem;font-family:var(--mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.card h3{font-size:1.04rem}
.card p{font-size:.875rem;color:var(--mute)}
.badge{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.61rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);border:1px solid var(--line-hot);padding:.24rem .5rem;width:fit-content}

.listcard{border:1px solid var(--line);background:var(--ink-3);padding:1.35rem}
.listcard h3{font-size:1rem;margin-bottom:.85rem}
.listcard ul{list-style:none;margin:0;padding:0;display:grid;gap:.58rem}
.listcard li{font-size:.89rem;color:var(--mute);padding-left:1.35rem;position:relative}
.listcard li::before{content:"";position:absolute;left:0;top:.58em;width:7px;height:7px;border:1px solid var(--volt)}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.tile{background:var(--ink);padding:1.3rem 1.2rem;display:grid;gap:.4rem;transition:background .25s var(--ease)}
.tile:hover{background:var(--ink-3)}
.tile span{font-family:var(--mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--volt)}
.tile strong,.tile h3{font-family:var(--display);font-size:1.01rem;font-weight:600;color:var(--paper);display:block}
.tile p{font-size:.87rem;color:var(--mute)}
.tile--warn span{color:var(--amber)}

.vals{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,258px),1fr));gap:clamp(18px,3vw,38px)}
.val{display:grid;gap:.45rem;padding-top:1rem;border-top:1px solid var(--line-hot)}
.val h3{font-size:1.04rem}
.val p{font-size:.89rem;color:var(--mute)}

/* --- process --- */
.process{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(24px,4vw,60px);align-items:start}
@media (max-width:900px){.process{grid-template-columns:1fr}}
.process__sticky{position:sticky;top:112px}
@media (max-width:900px){.process__sticky{position:static}}
.steps{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.steps li{padding:0 0 2rem 1.7rem;position:relative}
.steps li:last-child{padding-bottom:0}
.steps li::before{content:"";position:absolute;left:-5px;top:.42rem;width:9px;height:9px;background:var(--volt);border-radius:50%}
.steps__n{font-family:var(--mono);font-size:.69rem;letter-spacing:.14em;color:var(--volt);display:block;margin-bottom:.28rem}
.steps h3{margin-bottom:.3rem}
.steps p{color:var(--mute);font-size:.93rem;max-width:56ch}

/* --- faq --- */
.faq{border-top:1px solid var(--line);max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:1.2rem 2.5rem 1.2rem 0;position:relative;font-family:var(--display);font-weight:600;font-size:clamp(1rem,1.5vw,1.14rem);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.4rem;top:1.05rem;color:var(--volt);font-family:var(--mono);font-size:1.15rem}
.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{color:var(--volt)}
.faq .ans{padding:0 2.5rem 1.35rem 0;color:var(--mute);max-width:68ch}

/* --- final cta --- */
.final{position:relative;overflow:hidden;border-top:1px solid var(--line)}
.final__grid{position:absolute;inset:0;opacity:.45;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:62px 62px;mask-image:radial-gradient(66% 66% at 50% 42%,#000,transparent 74%);-webkit-mask-image:radial-gradient(66% 66% at 50% 42%,#000,transparent 74%)}
.final__glow{position:absolute;left:50%;top:40%;width:min(700px,120%);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(245,255,0,.12),transparent 62%);pointer-events:none}
.final .wrap{position:relative;text-align:center;display:grid;justify-items:center;gap:1.1rem;padding-block:clamp(64px,8vw,116px)}
.final h2{max-width:16ch}
.final p{color:var(--mute);max-width:48ch}

/* --- footer --- */
.foot{border-top:1px solid var(--line);background:var(--ink-2)}
.foot__in{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,44px);padding-block:52px 30px}
@media (max-width:860px){.foot__in{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot__in{grid-template-columns:1fr}}
.foot__h{font-family:var(--mono);font-size:.67rem;letter-spacing:.17em;text-transform:uppercase;color:var(--volt);font-weight:500;margin-bottom:.9rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.46rem}
.foot a{color:var(--mute);text-decoration:none;font-size:.89rem}
.foot a:hover{color:var(--paper)}
.foot__note{font-size:.85rem;color:var(--dim);max-width:40ch;margin-top:.85rem}
.foot__bar{border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;padding-block:18px 32px;font-size:.81rem;color:var(--dim)}

/* --- service page --- */
.crumbs{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1.5rem}
.crumbs a{color:var(--mute);text-decoration:none}
.crumbs a:hover{color:var(--volt)}
.pagehero{position:relative;border-bottom:1px solid var(--line);overflow:hidden}
.pagehero__glow{position:absolute;right:-8%;top:-26%;width:min(560px,86%);aspect-ratio:1;background:radial-gradient(circle,rgba(245,255,0,.11),transparent 62%);pointer-events:none}
.pagehero .wrap{position:relative;padding-block:clamp(36px,5vw,68px) clamp(44px,6vw,78px)}
.pagehero h1{font-size:clamp(2rem,4.8vw,3.75rem);max-width:19ch;margin-bottom:1.2rem}

/* --- notices --- */
.hint{font-size:.82rem;color:var(--dim)}
.note{border:1px solid var(--line-hot);background:rgba(245,255,0,.05);padding:.85rem 1rem;font-size:.87rem;color:var(--mute)}
.note b{color:var(--volt)}

/* ============================================================
   VFX BACKGROUNDS — five variants, assigned per service page.
   Pure CSS/SVG. Animates transform and opacity only (compositor
   properties), so there is no per-frame scripting and no canvas.
   Every variant is disabled under prefers-reduced-motion.
   ============================================================ */
.vfx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.vfx > *{position:absolute}
.pagehero > .wrap,.hero > .wrap{position:relative;z-index:1}

/* grid: perspective plane drifting toward the viewer */
.vfx--grid::before{content:"";position:absolute;left:-25%;right:-25%;top:-10%;bottom:-40%;
  background-image:linear-gradient(var(--line-hot) 1px,transparent 1px),linear-gradient(90deg,var(--line-hot) 1px,transparent 1px);
  background-size:64px 64px;transform:perspective(520px) rotateX(62deg);transform-origin:50% 0;
  opacity:.5;animation:gridrun 14s linear infinite}
@keyframes gridrun{to{background-position:0 64px,64px 0}}

/* orbit: concentric rings with counter-rotating dashes */
.vfx--orbit .ring{border:1px solid var(--line-hot);border-radius:50%;left:50%;top:50%;translate:-50% -50%}
.vfx--orbit .r1{width:min(560px,96%);aspect-ratio:1;animation:spin 46s linear infinite}
.vfx--orbit .r2{width:min(400px,74%);aspect-ratio:1;border-style:dashed;animation:spin 34s linear infinite reverse}
.vfx--orbit .r3{width:min(240px,46%);aspect-ratio:1;border-color:rgba(245,255,0,.3);animation:spin 22s linear infinite}
@keyframes spin{to{rotate:360deg}}

/* stream: data packets travelling along horizontal rails */
.vfx--stream .rail{left:-10%;right:-10%;height:1px;background:var(--line-hot);opacity:.55}
.vfx--stream .rail::after{content:"";position:absolute;top:-1px;left:0;width:120px;height:3px;
  background:linear-gradient(90deg,transparent,var(--volt),transparent);animation:flow 7s linear infinite}
.vfx--stream .s1{top:22%}.vfx--stream .s1::after{animation-duration:6s}
.vfx--stream .s2{top:44%}.vfx--stream .s2::after{animation-duration:9s;animation-delay:-2s}
.vfx--stream .s3{top:66%}.vfx--stream .s3::after{animation-duration:7.5s;animation-delay:-4s}
.vfx--stream .s4{top:85%}.vfx--stream .s4::after{animation-duration:11s;animation-delay:-1s}
@keyframes flow{from{transform:translateX(-140px)}to{transform:translateX(calc(100vw + 140px))}}

/* bloom: soft luminous fields breathing out of phase */
.vfx--bloom .orb{border-radius:50%;filter:blur(2px);animation:breathe 11s var(--ease) infinite}
.vfx--bloom .b1{width:min(460px,70%);aspect-ratio:1;right:-6%;top:-14%;background:radial-gradient(circle,rgba(245,255,0,.16),transparent 62%)}
.vfx--bloom .b2{width:min(360px,56%);aspect-ratio:1;left:4%;bottom:-24%;background:radial-gradient(circle,rgba(255,212,59,.12),transparent 62%);animation-delay:-4s}
.vfx--bloom .b3{width:min(240px,40%);aspect-ratio:1;left:44%;top:30%;background:radial-gradient(circle,rgba(245,255,0,.1),transparent 60%);animation-delay:-7s}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.14);opacity:1}}

/* scan: vertical sweep across a hairline column field */
.vfx--scan::before{content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg,var(--line-hot) 0 1px,transparent 1px 72px);opacity:.45}
.vfx--scan .beam{left:0;right:0;height:180px;top:-180px;
  background:linear-gradient(180deg,transparent,rgba(245,255,0,.11),transparent);animation:sweep 9s var(--ease) infinite}
@keyframes sweep{to{transform:translateY(calc(100% + 180vh))}}

/* veil sits above every variant so headline contrast is never at risk */
.vfx__veil{position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,9,11,.94) 14%,rgba(8,9,11,.72) 44%,rgba(8,9,11,.12) 76%,transparent)}
@media (max-width:900px){.vfx__veil{background:linear-gradient(180deg,rgba(8,9,11,.55),rgba(8,9,11,.8) 60%,rgba(8,9,11,.92))}}

/* ============================================================
   CINEMATIC VFX — the "video" background. Four stacked layers that
   drift at different speeds and periods, so the loop never visibly
   repeats. It reads like footage but weighs nothing: no video file,
   no canvas, no scripting. Transform/opacity only.
   ============================================================ */
.vfx--cine .nebula{inset:-30%;
  background:
    radial-gradient(42% 38% at 70% 36%,rgba(245,255,0,.16),transparent 64%),
    radial-gradient(34% 30% at 28% 68%,rgba(255,212,59,.09),transparent 66%),
    radial-gradient(30% 26% at 52% 18%,rgba(245,255,0,.07),transparent 62%);
  animation:drift 26s var(--ease) infinite alternate}
@keyframes drift{0%{transform:translate3d(-2%,-1%,0) scale(1)}100%{transform:translate3d(3%,2%,0) scale(1.1)}}

.vfx--cine .mesh{inset:-20%;
  background-image:linear-gradient(rgba(58,55,24,.85) 1px,transparent 1px),linear-gradient(90deg,rgba(58,55,24,.85) 1px,transparent 1px);
  background-size:78px 78px;
  mask-image:radial-gradient(58% 58% at 68% 42%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(58% 58% at 68% 42%,#000,transparent 72%);
  animation:mesh 30s linear infinite}
@keyframes mesh{to{transform:translate3d(-78px,-78px,0)}}

.vfx--cine .motes{inset:0;overflow:hidden}
/* Each mote is a full-height column with the dot at its foot, so a
   percentage translate measures the hero's height, not the 3px dot. */
.vfx--cine .motes > i{position:absolute;top:0;width:4px;height:100%;animation:rise linear infinite}
.vfx--cine .motes > i::after{content:"";position:absolute;bottom:0;left:0;width:4px;height:4px;border-radius:50%;
  background:var(--volt);box-shadow:0 0 10px 1px rgba(245,255,0,.7)}
@keyframes rise{0%{transform:translate3d(0,0,0);opacity:0}
  12%{opacity:.85}85%{opacity:.85}100%{transform:translate3d(18px,-100%,0);opacity:0}}

.vfx--cine .sweep{left:-40%;right:-40%;top:0;bottom:0;
  background:linear-gradient(104deg,transparent 42%,rgba(245,255,0,.07) 50%,transparent 58%);
  animation:lens 13s var(--ease) infinite}
@keyframes lens{0%,100%{transform:translateX(-26%)}50%{transform:translateX(26%)}}

/* a faint horizontal banding, the thing that most reads as "footage" */
.vfx--cine .scanlines{inset:0;opacity:.5;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.028) 0 1px,transparent 1px 4px);
  animation:roll 9s linear infinite}
@keyframes roll{to{transform:translateY(4px)}}

/* ============================================================
   VARIANT SET — a distinct scene for the homepage and for each of
   the thirteen service pages. All of them animate transform and
   opacity only, so the browser runs them on the compositor and the
   main thread stays free. No video files, no canvas, no scripting.
   ============================================================ */

/* shared orbital primitives (used by core + orbit) */
.orbring{border:1px solid var(--line-hot);border-radius:50%;left:50%;top:50%;translate:-50% -50%}
.sat{left:50%;top:50%;translate:-50% -50%;border-radius:50%;animation:spin linear infinite}
.sat::after{content:"";position:absolute;top:-5px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;
  background:var(--volt);box-shadow:0 0 16px 2px rgba(245,255,0,.75)}
.sat--amber::after{background:var(--amber);box-shadow:0 0 16px 2px rgba(255,212,59,.6)}

/* 00 CORE — homepage. A full orbital system around a luminous centre. */
.vfx--core .orbring{opacity:.65}
.vfx--core .o1{width:min(680px,108%);aspect-ratio:1}
.vfx--core .o2{width:min(500px,82%);aspect-ratio:1;border-style:dashed;opacity:.45}
.vfx--core .o3{width:min(330px,56%);aspect-ratio:1;border-color:rgba(245,255,0,.34)}
.vfx--core .s1{width:min(680px,108%);aspect-ratio:1;animation-duration:28s}
.vfx--core .s2{width:min(500px,82%);aspect-ratio:1;animation-duration:19s;animation-direction:reverse}
.vfx--core .s3{width:min(330px,56%);aspect-ratio:1;animation-duration:13s}
.vfx--core .core{width:min(150px,26%);aspect-ratio:1;left:50%;top:50%;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,rgba(245,255,0,.5),rgba(245,255,0,.08) 46%,transparent 68%);animation:corepulse 5.5s var(--ease) infinite}
@keyframes corepulse{0%,100%{transform:scale(.9);opacity:.65}50%{transform:scale(1.12);opacity:1}}
/* on wide screens the system sits right of the headline, not behind it */
@media (min-width:901px){.vfx--core .orbring,.vfx--core .sat,.vfx--core .core{left:71%}}

/* 01 ORBIT — AI agents. Tight counter-rotating rings with satellites. */
.vfx--orbit .s1{width:min(560px,96%);aspect-ratio:1;animation-duration:24s}
.vfx--orbit .s2{width:min(400px,74%);aspect-ratio:1;animation-duration:16s;animation-direction:reverse}

/* 02 BARS — dashboards. A live data read-out rising and falling. */
/* `> i:not([class])` keeps these rules off the shared cinematic
   layers, which are class-named children of the same container. */
.vfx--bars{display:flex;align-items:flex-end;gap:1.6%;padding:0 5% 12% 52%}
@media (max-width:900px){.vfx--bars{padding:0 5% 10%}}
.vfx--bars > i:not([class]){position:relative;flex:1;height:68%;border-radius:2px 2px 0 0;transform-origin:bottom;
  background:linear-gradient(180deg,var(--volt),rgba(245,255,0,.05));opacity:.42;animation:bar var(--ease) infinite alternate}
@keyframes bar{from{transform:scaleY(.12)}to{transform:scaleY(1)}}

/* 03 STREAM — email automation. Packets travelling along rails. */
/* (defined above) */

/* 04 PULSE — social. Signal rings broadcasting outward from a node. */
.vfx--pulse .wave{border:1px solid var(--volt);border-radius:50%;left:50%;top:50%;translate:-50% -50%;
  width:min(620px,110%);aspect-ratio:1;opacity:0;animation:wave 6s var(--ease) infinite}
.vfx--pulse .w2{animation-delay:-2s}.vfx--pulse .w3{animation-delay:-4s}
@keyframes wave{0%{transform:scale(.12);opacity:.85}70%{opacity:.14}100%{transform:scale(1);opacity:0}}
.vfx--pulse .hub{width:14px;height:14px;left:50%;top:50%;translate:-50% -50%;border-radius:50%;background:var(--volt);
  box-shadow:0 0 22px 4px rgba(245,255,0,.6);animation:corepulse 3s var(--ease) infinite}

/* 05 GRID — web development. (defined above) */

/* 06 MATRIX — custom software. Columns of falling code. */
.vfx--matrix{overflow:hidden}
.vfx--matrix > i:not([class]){top:-45%;width:1px;height:60%;
  background:linear-gradient(180deg,transparent,var(--volt),transparent);opacity:.55;animation:fall linear infinite}
@keyframes fall{to{transform:translateY(260%)}}

/* 07 CARDS — mobile apps. Interface panels floating in depth. */
.vfx--cards > i:not([class]){border:1px solid var(--line-hot);border-radius:10px;
  background:linear-gradient(160deg,rgba(245,255,0,.05),transparent 62%);animation:float var(--ease) infinite alternate}
@keyframes float{from{transform:translate3d(0,14px,0) rotate(-2deg)}to{transform:translate3d(0,-14px,0) rotate(2deg)}}

/* 08 SLIDES — presentations. Stacked planes advancing through frame. */
.vfx--slides .plane{border:1px solid var(--line-hot);border-radius:4px;width:46%;aspect-ratio:16/9;left:27%;top:30%;
  background:linear-gradient(140deg,rgba(245,255,0,.07),transparent 60%);animation:advance 12s var(--ease) infinite}
.vfx--slides .p2{animation-delay:-4s}.vfx--slides .p3{animation-delay:-8s}
@keyframes advance{0%{transform:translate3d(28%,8%,0) scale(.78);opacity:0}
  18%{opacity:.75}72%{opacity:.75}100%{transform:translate3d(-26%,-10%,0) scale(1.18);opacity:0}}

/* 09 BLOOM — AI imagery. (defined above) */

/* 10 FILM — video and VFX. A strip of frames tracking past. */
.vfx--film .strip{left:-20%;right:-20%;height:26%;
  background-image:repeating-linear-gradient(90deg,rgba(245,255,0,.22) 0 2px,transparent 2px 116px),
    linear-gradient(180deg,rgba(245,255,0,.04),rgba(245,255,0,.02));
  border-block:1px solid rgba(245,255,0,.3);animation:track 18s linear infinite}
.vfx--film .f1{top:16%}
.vfx--film .f2{top:58%;animation-duration:26s;animation-direction:reverse}
@keyframes track{to{transform:translateX(-116px)}}
.vfx--film .shutter{inset:0;background:linear-gradient(180deg,transparent,rgba(245,255,0,.09),transparent);
  height:34%;top:-34%;animation:sweep 7s var(--ease) infinite}

/* 11 REELS — UGC ads. Vertical frames scrolling like a feed. */
.vfx--reels > i:not([class]){top:0;border:1px solid var(--line-hot);border-radius:12px;width:15%;aspect-ratio:9/16;
  background:linear-gradient(170deg,rgba(245,255,0,.06),transparent 58%);animation:scrollup linear infinite}
@keyframes scrollup{from{transform:translateY(115%)}to{transform:translateY(-215%)}}

/* 12 SCAN — digital marketing. (defined above) */

/* 13 ARABESQUE — GCC. A rotating geometric lattice, drawn from the
   eight-point star that recurs through Gulf and Islamic design. */
.vfx--arabesque .star{left:50%;top:50%;translate:-50% -50%;width:min(620px,104%);aspect-ratio:1;
  border:1px solid var(--line-hot);animation:spin linear infinite}
.vfx--arabesque .a1{animation-duration:54s}
/* a2 and a4 are the same squares turned 45deg; overlapped with a1/a3
   they form the eight-point star, and the pair rotates as one. */
.vfx--arabesque .a2{animation-duration:54s;transform:rotate(45deg)}
.vfx--arabesque .a3{width:min(420px,72%);animation-duration:38s;animation-direction:reverse;border-color:rgba(245,255,0,.3)}
.vfx--arabesque .a4{width:min(420px,72%);animation-duration:38s;animation-direction:reverse;transform:rotate(45deg);border-color:rgba(245,255,0,.3)}
.vfx--arabesque .halo{width:min(260px,46%);aspect-ratio:1;left:50%;top:50%;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,rgba(245,255,0,.22),transparent 66%);animation:corepulse 7s var(--ease) infinite}

/* --- homepage service sections --- */
.svcsec{border-top:1px solid var(--line)}
.svcsec:nth-child(even){background:var(--ink-2)}
.svcsec > .wrap{padding-block:clamp(48px,6vw,84px)}
.svcsec__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,56px);align-items:center}
.svcsec:nth-child(even) .svcsec__panel{order:-1}
@media (max-width:860px){.svcsec__in{grid-template-columns:1fr;gap:22px}.svcsec:nth-child(even) .svcsec__panel{order:0}}
.svcsec__h{font-size:clamp(1.5rem,3vw,2.3rem);margin-bottom:.8rem}
.svcsec__lede{color:var(--mute);max-width:56ch}
.svcsec__pts{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.5rem}
.svcsec__pts li{font-size:.9rem;color:var(--mute);padding-left:1.4rem;position:relative}
.svcsec__pts li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--volt)}
.svcsec__panel{border:1px solid var(--line);background:var(--ink-3);padding:1.5rem 1.4rem;display:grid;gap:.9rem;position:relative;overflow:hidden}
.svcsec__panel::after{content:"";position:absolute;inset:0;background:radial-gradient(130% 100% at 100% 0%,rgba(245,255,0,.09),transparent 62%);pointer-events:none}
.svcsec__ico{width:40px;height:40px;color:var(--volt)}
.svcsec__num{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;color:var(--dim)}
.svcnav{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.6rem}
.svcnav a{font-family:var(--mono);font-size:.69rem;letter-spacing:.07em;text-transform:uppercase;border:1px solid var(--line);padding:.42rem .66rem;color:var(--mute);text-decoration:none;transition:border-color .2s var(--ease),color .2s var(--ease)}
.svcnav a:hover{border-color:var(--volt);color:var(--volt)}

/* --- founder --- */
.founder{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(26px,4vw,60px);align-items:start}
@media (max-width:820px){.founder{grid-template-columns:1fr}}
.founder__frame{position:relative;border:1px solid var(--line);background:var(--ink-3);aspect-ratio:4/5;max-width:100%;display:grid;place-items:center;overflow:hidden}
.founder__frame img{width:100%;height:100%;object-fit:cover;display:block}
.founder__frame::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 20% 0%,rgba(245,255,0,.1),transparent 60%);pointer-events:none}
.founder__ph{text-align:center;display:grid;gap:.6rem;padding:1.5rem}
.founder__initials{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,7vw,3.6rem);color:var(--volt);letter-spacing:-.04em;line-height:1}
.founder__name{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,3.2vw,2.3rem);letter-spacing:-.03em;margin-bottom:.3rem}
.founder__role{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--volt);margin-bottom:1.2rem}
.founder blockquote{margin:0;padding-left:1.2rem;border-left:1px solid var(--line-hot);color:var(--mute);display:grid;gap:.9rem}

/* --- floating WhatsApp --- */
.wa{position:fixed;z-index:70;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;gap:.6rem;min-height:54px;padding:0 1.15rem;border-radius:999px;
  background:var(--wa);color:#FFFFFF;font-family:var(--body);font-weight:600;font-size:.92rem;text-decoration:none;border:0;cursor:pointer;
  box-shadow:0 8px 28px rgba(0,0,0,.5),0 0 0 0 rgba(37,211,102,.5);transition:transform .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)}
.wa:hover{background:var(--wa-dark);transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 22px rgba(37,211,102,.45)}
.wa svg{color:#FFFFFF}
/* inline WhatsApp buttons also carry the official green */
.btn--wa{background:var(--wa);color:#FFFFFF;border-color:var(--wa)}
.btn--wa:hover{background:var(--wa-dark);border-color:var(--wa-dark);color:#FFFFFF}
.btn--wa svg{width:18px;height:18px;flex:none}
.wa:active{transform:translateY(0)}
.wa svg{width:22px;height:22px;flex:none}
.wa__txt{white-space:nowrap}
@media (max-width:560px){.wa{padding:0;width:54px;justify-content:center}.wa__txt{display:none}}
.wa__toast{position:fixed;z-index:71;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(84px + env(safe-area-inset-bottom,0px));
  max-width:min(300px,78vw);background:var(--ink-3);border:1px solid var(--line-hot);color:var(--mute);
  padding:.7rem .85rem;font-size:.84rem;box-shadow:0 8px 28px rgba(0,0,0,.5)}

/* --- interactive button polish --- */
.btn{position:relative;overflow:hidden}
.btn::before{content:"";position:absolute;inset:0;transform:translateX(-101%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);transition:transform .5s var(--ease)}
.btn:hover::before{transform:translateX(101%)}
.btn:active{transform:translateY(1px)}
.btn--primary:hover{box-shadow:0 0 22px rgba(245,255,0,.22)}

/* --- page transitions ---
   Browsers that support cross-document view transitions cross-fade
   between pages; every browser also gets a short entry animation on
   the page content. Both are skipped under reduced motion. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
main{animation:routein .38s var(--ease) both}
@keyframes routein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none} main{animation:none}}

/* --- stub --- */
.stub{text-align:center;display:grid;justify-items:center;gap:1rem;padding-block:clamp(56px,9vw,120px)}
.stub__code{font-family:var(--mono);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--volt)}

/* --- reveal --- */
.js-reveal .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js-reveal .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .js-reveal .reveal{opacity:1;transform:none}
}
[hidden]{display:none !important}

/* --- multi-page additions --- */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
[id]{scroll-margin-top:84px}
.founder-mini{display:grid;grid-template-columns:96px minmax(0,1fr);gap:1.1rem;align-items:center}
.founder-mini img{width:96px;height:120px;object-fit:cover;object-position:center 18%;border:1px solid var(--line);display:block}
.founder-mini p{color:var(--mute);font-size:.9rem}
.founder-mini strong{display:block;font-family:var(--display);font-size:1.05rem;margin-bottom:.15rem}
.tile .tile__h{font-family:var(--display);font-size:1.01rem;font-weight:600;color:var(--paper);display:block;letter-spacing:-.01em;line-height:1.2}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}