*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#070a18;--bg-2:#0b1024;--panel:#10162f;--line:rgba(255,255,255,.09);
  --ink:#f2f4fb;--muted:#a2a9c6;--accent:#4b60f6;--accent-2:#93a4ff;--accent-3:#8a6cff;
  --light:#f3f4f8;--light-ink:#141a33;--light-muted:#545b74;
  --radius:18px;--maxw:1120px;
}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.container--narrow{max-width:820px}
h1,h2,h3,h4{line-height:1.15;font-weight:600;letter-spacing:-.02em}
h1{font-size:clamp(2.2rem,5vw,3.6rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem)}
h3{font-size:clamp(1.3rem,2.4vw,1.7rem)}
em{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;color:var(--accent-2);background:linear-gradient(95deg,#7fb2ff,#a597ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.06em}
a{color:inherit;text-decoration:none}
.center{text-align:center;margin-top:40px}

/* buttons */
.btn{display:inline-block;background:var(--accent);color:#fff;padding:13px 24px;border-radius:999px;font-weight:600;font-size:.95rem;border:0;cursor:pointer;transition:transform .15s ease,background .15s ease}
.btn:hover{background:#3b4fe0;transform:translateY(-1px)}
/* Ghost sits on dark by default; light sections re-point these three tokens
   below (see .section:not(.section--dark)) or the label lands on its own
   background at 1:1 and disappears. */
.btn--ghost{background:transparent;border:1px solid var(--ghost-line,var(--line));color:var(--ghost-ink,var(--ink))}
.btn--ghost:hover{background:var(--ghost-hover,rgba(255,255,255,.06))}
.btn--sm{padding:9px 18px;font-size:.85rem}

.brand{font-weight:700;font-size:1.05rem;display:flex;align-items:center;gap:8px}
.brand__logo{width:1.6em;height:1.6em;border-radius:.42em;flex:none;display:block}

/* hero */
.hero{padding:56px 0 76px;text-align:center;background:radial-gradient(ellipse at 50% -10%,rgba(67,104,250,.28),transparent 60%)}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--accent-2);font-weight:600;margin-bottom:18px}
.eyebrow--dark{color:var(--accent)}
.hero__brand{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:1.05rem;color:var(--ink)}
.hero__rating{display:flex;align-items:center;justify-content:center;gap:10px;margin:26px 0 30px;font-size:.86rem;color:var(--muted)}
.hero__stars{color:#fbbf24;letter-spacing:2px}
.hero__rating strong{color:var(--ink)}
.hero h1{font-size:clamp(2.3rem,6vw,4.1rem)}
.hero__chips{display:inline-flex;vertical-align:middle;margin:0 .12em}
/* three of our shipped products' app icons, overlapping like an avatar stack */
.hero__chips img{width:.92em;height:.92em;border-radius:50%;border:2px solid var(--bg);margin-left:-.28em;display:inline-block;object-fit:cover;background:var(--panel);box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.hero__chips img:first-child{margin-left:0}
.hero__flags{display:inline-block;margin:24px 0 0;padding:9px 18px;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid var(--line);font-size:.82rem;color:var(--muted);letter-spacing:.01em}
.hero__cta{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap}

/* hero scrolling project strip */
.hero__strip{margin-top:58px;display:flex;flex-direction:column;gap:16px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.hero__row{display:flex;gap:16px;padding-right:16px;width:max-content;will-change:transform}
.hero__row--rtl{animation:hero-rtl 64s linear infinite}
.hero__row--ltr{animation:hero-ltr 72s linear infinite}
@keyframes hero-rtl{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes hero-ltr{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.hero__pic{flex:none;display:block;width:256px;height:192px;border-radius:14px;border:1px solid var(--line);object-fit:cover;background:#0f1326}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-top:1px solid var(--line);padding-top:30px;margin-top:58px}
.stats strong{display:block;font-size:2rem;font-weight:700}
.stats span{color:var(--muted);font-size:.85rem}

/* sections */
.section{padding:96px 0}
.section h2{margin-top:10px}
.section__sub{max-width:620px;margin:16px 0 0;color:var(--muted)}
.section--dark{background:linear-gradient(180deg,var(--bg),var(--bg-2))}
.section:not(.section--dark):not(.contact){
  background:var(--light);color:var(--light-ink);
  --ghost-ink:var(--light-ink);--ghost-line:rgba(20,26,51,.28);--ghost-hover:rgba(20,26,51,.05);
}
.section:not(.section--dark):not(.contact) .section__sub{color:var(--light-muted)}
.section:not(.section--dark):not(.contact) em{background-image:linear-gradient(95deg,#2f6fe8,#6a4cf0)}

/* case studies */
.case{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-top:56px;padding-top:56px;border-top:1px solid rgba(0,0,0,.08)}
.case--rev .case__body{order:2}
.case p{color:var(--light-muted);margin-top:12px}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.tags li{font-size:.72rem;padding:5px 11px;border:1px solid rgba(0,0,0,.14);border-radius:999px;color:var(--light-muted)}
.case__media{aspect-ratio:4/3;border-radius:var(--radius)}
.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#4d66ff,#8a6cff);flex:none}
.link{font-weight:600;color:var(--accent)}
.link:hover{text-decoration:underline}

.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px}
.mini{display:block;color:inherit}
.mini__media{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:14px;margin-bottom:16px;background:#121833;transition:transform .3s ease}
.mini:hover .mini__media{transform:translateY(-4px)}
.mini__tag{display:inline-block;margin-top:10px;font-size:.8rem;font-weight:600;color:var(--accent)}
.mini h4{font-size:1.05rem}
.mini p{color:var(--light-muted);font-size:.9rem;margin-top:6px}

/* feature grids */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.feat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.section:not(.section--dark):not(.contact) .feat{background:#fff;border-color:rgba(0,0,0,.08)}
.feat__ic{font-size:1.4rem;color:var(--accent-2);display:block;margin-bottom:12px}
.feat h4{font-size:1.05rem}
.feat p{margin-top:8px;color:var(--muted);font-size:.9rem}
.section:not(.section--dark):not(.contact) .feat p{color:var(--light-muted)}

.svc{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:var(--radius);padding:26px;transition:transform .15s ease,box-shadow .15s ease}
.svc:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,0,0,.08)}
.svc h4{font-size:1.1rem}
.svc p{color:var(--light-muted);font-size:.9rem;margin:10px 0 16px}

/* compare table */
.compare{margin-top:64px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:34px;overflow-x:auto}
.compare h3{margin-bottom:22px}
.compare table{width:100%;border-collapse:collapse;min-width:560px}
.compare th,.compare td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);font-size:.9rem}
.compare thead th{color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem}
.compare tbody td:first-child{color:var(--ink)}
.compare .yes{color:#6ee7b7;font-weight:700}
.compare .no{color:var(--muted)}

/* testimonials */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.quote{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;justify-content:space-between;gap:22px}
.quote blockquote{font-family:"Instrument Serif",Georgia,serif;font-size:1.22rem;line-height:1.4;color:var(--ink)}
.quote figcaption strong{display:block;font-size:.92rem}
.quote figcaption span{font-size:.82rem;color:var(--muted)}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}

/* faq */
.faq{margin-top:40px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:20px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent-2);font-size:1.3rem;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 20px;color:var(--muted);font-size:.92rem}

/* contact */
.contact{background:linear-gradient(180deg,var(--bg-2),var(--bg));border-top:1px solid var(--line)}
.contact__inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.contact__left p{color:var(--muted);margin-top:16px}
.contact__left .link{display:inline-block;margin-top:22px;color:var(--accent-2)}
[hidden]{display:none!important}
.next-steps{list-style:none;counter-reset:step;margin:28px 0 0;display:grid;gap:16px}
.next-steps li{counter-increment:step;display:grid;grid-template-columns:32px 1fr;column-gap:14px}
.next-steps li::before{content:counter(step);grid-row:span 2;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:.85rem;font-weight:700;color:var(--accent-2);border:1px solid rgba(147,164,255,.35);background:rgba(75,96,246,.12)}
.next-steps strong{font-size:.95rem;color:var(--ink)}
.next-steps span{font-size:.86rem;color:var(--muted)}
.next-steps__book{margin-top:26px}
.next-steps__book+.link{display:block;width:max-content}
.contact__form{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px;display:grid;gap:16px}
.contact__form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact__form label{display:grid;gap:6px;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.contact__form input,.contact__form select,.contact__form textarea{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px;color:var(--ink);font:inherit;text-transform:none;letter-spacing:0}
/* 16px, not the label's .8rem: iOS Safari zooms the page on focus for any
   field under 16px, which throws the visitor out of the form mid-lead. */
.contact__form input,.contact__form select,.contact__form textarea{font-size:16px}
.contact__form input:focus,.contact__form select:focus,.contact__form textarea:focus{outline:2px solid var(--accent)}
.contact__form .btn{justify-self:start;margin-top:6px}
.contact__form .btn[disabled]{opacity:.6;cursor:progress}
.contact__form .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
.contact__status{margin:0;min-height:1.1em;font-size:.85rem;color:var(--accent-2);text-transform:none;letter-spacing:0}
.contact__status.is-error{color:#fca5a5}
.contact__fineprint{margin:0;font-size:.72rem;color:var(--muted);opacity:.7;text-transform:none;letter-spacing:0}

/* footer */
.footer{background:var(--bg);border-top:1px solid var(--line);padding:64px 0 104px}
.footer__inner{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.footer__brand p{color:var(--muted);font-size:.88rem;margin:14px 0}
.footer__brand a[href^="mailto"]{color:var(--accent-2)}
.footer__col h5{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:14px}
.footer__col a{display:block;color:var(--muted);font-size:.9rem;padding:5px 0}
.footer__col a:hover{color:var(--ink)}
.footer__bottom{display:flex;justify-content:space-between;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:.82rem}

@media(max-width:900px){
  .hero{padding:40px 0 64px}
  .hero__pic{width:180px;height:135px}
  .hero__strip{gap:12px;margin-top:44px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .case,.case--rev .case__body{grid-template-columns:1fr;order:0}
  .case__media{order:-1}
  .case-grid,.grid-4,.grid-3{grid-template-columns:1fr}
  .contact__inner,.footer__inner{grid-template-columns:1fr}
  .contact__form .row{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column;gap:8px}
}

/* ============ ENHANCEMENTS ============ */

/* hero backdrop */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 50% 0%,#000,transparent 70%)}
.hero::after{content:"";position:absolute;width:520px;height:520px;left:50%;top:-160px;transform:translateX(-50%);background:radial-gradient(circle,rgba(67,104,250,.5),transparent 60%);filter:blur(40px);pointer-events:none;animation:pulse 7s ease-in-out infinite}
.hero .container{position:relative;z-index:1}
@keyframes pulse{0%,100%{opacity:.7}50%{opacity:1}}

/* buttons: sheen */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s ease}
.btn:hover::after{left:140%}
.btn--ghost::after{display:none}

/* stat hover */
.stats div{transition:transform .2s ease}
.stats div:hover{transform:translateY(-4px)}
.stats strong{background:linear-gradient(120deg,#fff,var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}

.case__media{position:relative;overflow:hidden;isolation:isolate}
.case__media::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.22),transparent 55%);mix-blend-mode:overlay}

/* card reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .45s ease,transform .45s ease}
.reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.hero::after,.hero__row{animation:none}}

/* service card accent */
.svc{position:relative}
.svc::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--accent);border-radius:3px 3px 0 0;transition:width .3s ease}
.svc:hover::before{width:100%}

/* feature icon glow */
.feat{transition:transform .2s ease,border-color .2s ease}
.feat:hover{transform:translateY(-4px);border-color:rgba(147,164,255,.5)}

/* quote hover */
.quote{transition:transform .2s ease,border-color .2s ease}
.quote:hover{transform:translateY(-4px);border-color:rgba(147,164,255,.5)}

/* compare row hover */
.compare tbody tr{transition:background .15s ease}
.compare tbody tr:hover{background:rgba(255,255,255,.03)}

/* faq */
.faq details{transition:background .2s ease}
.faq details[open]{background:rgba(255,255,255,.02)}
.faq details p{animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* back to top */
.to-top{position:fixed;right:22px;bottom:22px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--accent);color:#fff;font-size:1.1rem;cursor:pointer;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .25s ease,transform .25s ease,background .2s ease;z-index:60}
.to-top.is-show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:#3b4fe0}

/* form focus polish */
.contact__form label:focus-within{color:var(--accent-2)}

/* ============ STACKING CARDS (Selected Work) ============ */
.stack{margin-top:56px;position:relative}
.stack-card{
  position:sticky;
  display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center;
  border-radius:26px;padding:66px 48px 44px;
  min-height:460px;
  color:var(--light-ink);
  box-shadow:0 -8px 40px rgba(10,16,44,.16);
  margin-bottom:34px;
  transition:none;
}
.stack-card:last-child{margin-bottom:0}
.sc1{top:78px}.sc2{top:136px}.sc3{top:194px}.sc4{top:252px}.sc5{top:310px}
/* each card is tinted from its own image, independent of its stack position */
.pc-salamly{background:#dcebe2}
.pc-flight{background:#d8e9ee}
.pc-traffic{background:#dde2f6}
.pc-glpfy{background:#f0dfea}
.pc-docscan{background:#e2e8ee}

.stack-card__cat{position:absolute;top:26px;left:48px;margin:0;font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:1.25rem;color:rgba(20,26,51,.78)}
.stack-card h3{font-size:clamp(1.5rem,2.8vw,2.15rem);letter-spacing:-.02em;color:#121731}
.stack-card__text>p{margin-top:14px;color:rgba(20,26,51,.72);max-width:42ch;font-size:.98rem}
.stack-card__role{margin-top:14px;font-size:.84rem;color:rgba(20,26,51,.72);max-width:42ch}
.stack-card__role span{display:inline-block;margin-right:6px;padding:2px 9px;border-radius:999px;background:rgba(20,26,51,.08);color:#121731;font-weight:600;font-size:.74rem}
.stack-card__meta{display:flex;gap:56px;margin:22px 0 22px}
.stack-card__meta span{display:block;font-size:.8rem;color:rgba(20,26,51,.6);margin-bottom:4px}
.stack-card__meta strong{font-size:1.05rem;color:#121731}
.stack-card__author{display:flex;align-items:center;gap:12px;background:#fff;border-radius:14px;padding:12px 14px;max-width:380px;box-shadow:0 8px 24px rgba(10,16,44,.12)}
.stack-card__who{display:flex;flex-direction:column;line-height:1.25;margin-right:auto}
.stack-card__who strong{font-size:.92rem;color:#121731}
.stack-card__who span{font-size:.78rem;color:var(--light-muted)}
.stack-card__author{transition:transform .2s ease,box-shadow .2s ease}
.stack-card__author:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(10,16,44,.18)}
.stack-card__go{font-size:1.1rem;color:#121731}
.stack-card__author .avatar{object-fit:cover;border-radius:10px}
.avatar--gh{display:grid;place-items:center;background:#121731;color:#fff}

.stack-card__media{position:relative;overflow:hidden;isolation:isolate;border-radius:18px;aspect-ratio:4/3;height:100%;min-height:300px}
.stack-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stack-card__media::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.22),transparent 55%);mix-blend-mode:overlay}

@media(max-width:900px){
  .stack-card{grid-template-columns:1fr;padding:52px 24px 26px;min-height:0;gap:22px}
  .stack-card__cat{top:20px;left:24px}
  .stack-card__media{order:-1;min-height:190px;aspect-ratio:16/10;height:auto}
  .stack-card__meta{gap:32px;margin:16px 0}
  .stack-card__author{max-width:none}
  .sc1{top:66px}.sc2{top:94px}.sc3{top:122px}.sc4{top:150px}.sc5{top:178px}
}
@media(prefers-reduced-motion:reduce){
  .stack-card{position:static}
}

/* ============ AI-POWERED DESIGN ============ */
.ai{background:#000;color:#fff;padding:104px 0;overflow:hidden}
.ai .container{text-align:center}
.pill{display:inline-block;border:1px solid rgba(74,222,128,.45);color:#4ade80;border-radius:999px;padding:6px 15px;font-size:.72rem;font-weight:600;letter-spacing:.04em;margin-bottom:20px}
.ai-h{font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-.02em}
.ai-h em{background:none;-webkit-text-fill-color:#fff;color:#fff}
.ai-sub{max-width:560px;margin:16px auto 0;color:rgba(255,255,255,.55);font-size:1.02rem}

.ai-orbit{margin-top:60px}

/* icon rows */
.ai-rows{position:relative;overflow:hidden;padding:14px 0 28px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);opacity:0;transition:opacity .7s ease}
.ai-row{display:flex;gap:14px;justify-content:center}
.ai-row--offset{margin-top:14px;transform:translateX(35px)}
.ai-tile{width:56px;height:56px;flex:none;border-radius:15px;background:linear-gradient(180deg,#161616,#0c0c0c);border:1px solid rgba(255,255,255,.06);position:relative}
.ai-tile::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border-radius:5px;background:rgba(255,255,255,.14)}
.ai-tile:nth-child(3n)::after{border-radius:50%}
.ai-tile:nth-child(4n)::after{transform:rotate(45deg)}
.ai-tile:nth-child(5n)::after{width:20px;height:6px;border-radius:3px}
.ai-tile:nth-child(7n)::after{background:rgba(99,69,243,.35)}
.ai-tile:nth-child(6n)::after{background:rgba(56,189,248,.3)}

.ai-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.5);width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#fff,#dde3ff 60%,#aebbff);display:grid;place-items:center;box-shadow:0 0 0 10px rgba(99,69,243,.12),0 0 60px 12px rgba(99,69,243,.55);opacity:0;transition:opacity .55s ease,transform .6s cubic-bezier(.2,.8,.2,1);z-index:3}
.ai-center::before{content:"";position:absolute;left:50%;top:100%;width:2px;height:44px;transform:translateX(-50%);background:linear-gradient(#6345f3,transparent);opacity:0;transition:opacity .4s ease .25s}

/* connectors */
.ai-lines{display:block;width:100%;height:130px;margin-top:-14px;overflow:visible}
.ai-lines path{fill:none;stroke:#38bdf8;stroke-width:1.5;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px rgba(56,189,248,.7));stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s ease .25s}

/* branch cards */
.ai-branches{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:left}
.ai-branch{background:linear-gradient(180deg,#101010,#080808);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:22px;opacity:0;transform:translateY(26px);transition:opacity .55s ease,transform .55s ease,box-shadow .4s ease}
.ai-branch h4{color:#fff;font-size:1.06rem}
.ai-branch__icons{display:flex;gap:8px;margin:16px 0 18px}
.ai-branch__icons span{width:38px;height:38px;border-radius:10px;background:#161616;border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;color:rgba(255,255,255,.55);font-size:.9rem}
.ai-branch__label{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:10px}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.chips li{font-size:.72rem;padding:5px 9px;border-radius:8px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.72)}
.ai .center{margin-top:44px}

/* in-view animation */
.ai-orbit.is-in .ai-rows{opacity:1}
.ai-orbit.is-in .ai-center{opacity:1;transform:translate(-50%,-50%) scale(1)}
.ai-orbit.is-in .ai-center::before{opacity:1}
.ai-orbit.is-in .ai-lines path{stroke-dashoffset:0}
.ai-orbit.is-in .ai-branch{opacity:1;transform:none;box-shadow:0 -24px 60px -34px rgba(56,189,248,.55)}
.ai-orbit.is-in .ai-branch:nth-child(1){transition-delay:.45s,.45s,0s}
.ai-orbit.is-in .ai-branch:nth-child(2){transition-delay:.53s,.53s,0s}
.ai-orbit.is-in .ai-branch:nth-child(3){transition-delay:.61s,.61s,0s}
.ai-orbit.is-in .ai-branch:nth-child(4){transition-delay:.69s,.69s,0s}

@media(max-width:900px){
  .ai{padding:76px 0}
  .ai-tile{width:46px;height:46px;border-radius:12px}
  .ai-lines{display:none}
  .ai-branches{grid-template-columns:1fr 1fr;gap:14px}
  .ai-orbit{margin-top:40px}
  .ai-rows{padding-bottom:20px}
}
@media(max-width:560px){
  .ai-branches{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .ai-rows,.ai-center,.ai-center::before,.ai-branch{opacity:1;transform:none;transition:none}
  .ai-center{transform:translate(-50%,-50%)}
  .ai-lines path{stroke-dashoffset:0;transition:none}
}

/* ============ STICKY TOP BAR ============ */
/* Deliberately not a second nav — the dock owns section links. This carries
   identity and one conversion point, which is what goes missing the moment
   you scroll past the hero wordmark. Hidden at the top of the page, where
   the hero already states the brand at full size. */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:80;
  background:rgba(7,10,24,.82);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  transform:translateY(-100%);
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.topbar.is-show{transform:translateY(0)}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:12px}
.topbar__brand{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:1rem;color:var(--ink);white-space:nowrap}
.topbar__brand:hover{color:#fff}

/* The bar overlays content, so anchored sections need to clear it or every
   in-page link lands with its heading tucked underneath. */
main[id],section[id]{scroll-margin-top:78px}

@media(max-width:560px){
  .topbar__inner{padding-top:10px;padding-bottom:10px}
  .topbar__brand{font-size:.94rem}
  .topbar__cta span{display:none}
}
@media(prefers-reduced-motion:reduce){
  .topbar{transition:none}
}

/* ============ FLOATING DOCK NAV ============ */
.dock{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  z-index:70;display:flex;align-items:center;gap:6px;
  padding:8px;border-radius:999px;
  background:rgba(7,10,24,.82);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 50px -12px rgba(0,0,0,.6);
  max-width:calc(100vw - 24px);
}
.dock__item{
  appearance:none;border:0;background:transparent;cursor:pointer;
  font:inherit;color:var(--muted);font-size:.9rem;font-weight:500;
  padding:10px 16px;border-radius:999px;white-space:nowrap;
  transition:color .15s ease,background .15s ease;
}
.dock__item:hover,.dock__item:focus-visible{color:#fff;background:rgba(255,255,255,.07);outline:none}
.dock__cta{background:var(--accent);color:#fff;font-weight:600}
.dock__cta:hover{background:#3b4fe0;color:#fff}
.dock__item.is-active:not(.dock__cta){color:#fff;background:rgba(255,255,255,.09)}
.dock__group{position:relative;display:flex}

/* popover */
.dock-pop{
  position:absolute;left:50%;bottom:calc(100% + 16px);
  width:660px;max-width:calc(100vw - 24px);
  transform:translateX(-50%) translateY(10px) scale(.98);
  transform-origin:bottom center;
  display:grid;grid-template-columns:1.05fr 1fr;gap:10px;
  padding:14px;border-radius:22px;background:#fff;color:var(--light-ink);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
.dock__group:hover .dock-pop,
.dock__group:focus-within .dock-pop,
.dock-pop.is-open{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0) scale(1);
}
.dock-pop__tail{
  position:absolute;left:50%;bottom:-8px;width:20px;height:20px;
  background:#fff;transform:translateX(-50%) rotate(45deg);
  border-radius:0 0 5px 0;
}
.dock-pop__list{list-style:none;margin:0;padding:6px;display:flex;flex-direction:column;gap:2px}
.dock-pop__list a{display:block;padding:10px 12px;border-radius:12px;transition:background .14s ease}
.dock-pop__list a:hover{background:#eef1fb}
.dock-pop__list strong{display:block;font-size:.92rem;color:#121731;font-weight:600}
.dock-pop__list span{display:block;font-size:.8rem;color:var(--light-muted);margin-top:2px;line-height:1.4}
.dock-pop__media{position:relative;border-radius:16px;overflow:hidden;min-height:260px}
.dock-pop__video{position:absolute;inset:0;background:#000;background-image:radial-gradient(circle at 50% 120%,rgba(99,69,243,.28),transparent 60%)}
.dock-pop__mute{
  position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:50%;
  border:0;cursor:pointer;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);
  color:#fff;font-size:.9rem;display:grid;place-items:center;
}
.dock-pop__mute .dock-pop__mute-off{display:none}
.dock-pop__mute[aria-pressed="false"] .dock-pop__mute-on{display:none}
.dock-pop__mute[aria-pressed="false"] .dock-pop__mute-off{display:inline}

@media(max-width:720px){
  .dock{gap:2px;padding:6px}
  .dock__item{padding:9px 11px;font-size:.82rem}
  .dock-pop{
    position:fixed;left:12px;right:12px;bottom:84px;width:auto;max-width:none;
    grid-template-columns:1fr;transform:translateY(10px) scale(.98);
  }
  .dock__group:hover .dock-pop,
  .dock__group:focus-within .dock-pop,
  .dock-pop.is-open{transform:translateY(0) scale(1)}
  .dock-pop__tail{display:none}
  .dock-pop__media{min-height:150px}
  .to-top{bottom:88px}
}
@media(max-width:420px){
  .dock__item{padding:8px 8px;font-size:.78rem}
  .dock__cta span{display:none}
}
/* Nothing floats over the contact form: the dock and back-to-top otherwise
   sit on the submit button on phones, and the dock's own CTA is redundant
   once the form is on screen. app.js toggles the class. */
.dock,.to-top{transition:opacity .25s ease,transform .25s ease,visibility .25s}
.form-in-view .dock{opacity:0;visibility:hidden;transform:translateX(-50%) translateY(20px)}
.form-in-view .to-top{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){
  .dock-pop{transition:opacity .15s ease,visibility .15s}
  .dock-pop,.dock__group:hover .dock-pop,.dock-pop.is-open{transform:translateX(-50%)}
}

.footer__legal a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.footer__legal a:hover{color:var(--ink)}
.contact__fineprint a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}

/* ============ ANALYTICS CONSENT ============
   Bottom-left card, lifted clear of the floating dock. Only rendered by
   analytics.js once a GA Measurement ID is configured. */
.consent{position:fixed;left:20px;bottom:92px;z-index:60;max-width:360px;padding:16px 18px;border-radius:16px;
  background:var(--panel);color:var(--ink);border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.45);
  font-size:.84rem;line-height:1.5;animation:fade .25s ease}
.consent p{color:var(--muted)}
.consent strong{color:var(--ink)}
.consent a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}
.consent__actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
.consent-link{background:none;border:0;padding:0;font:inherit;color:inherit;opacity:.8;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.consent-link:hover{opacity:1}
@media(max-width:600px){.consent{left:12px;right:12px;max-width:none;bottom:84px}}

/* ============ TOUCH TARGETS ============
   Inline text links ("Learn more", Privacy Policy) render 14-20px tall —
   well under the 44px a thumb needs. An invisible pseudo-element grows the
   hit area without moving any text. */
@media(pointer:coarse){
  .link,.footer__legal a,.contact__fineprint a{position:relative}
  .link::after,.footer__legal a::after,.contact__fineprint a::after{content:"";position:absolute;inset:-13px -6px}
  .footer__col a{padding:11px 0}
}