/* ==========================================================================
   SOS Dev Lab — sosdevlab.com
   Apple-inspired structure, brand-colored accents.
   Each client carries their own --brand through card, quote, and preview.
   ========================================================================== */

:root{
  --ink:#ffffff;
  --ink-2:rgba(255,255,255,.68);
  --ink-3:rgba(255,255,255,.50);
  --line:rgba(255,255,255,.11);
  --line-2:rgba(255,255,255,.06);
  --bg:#0a0a10;
  --bg-alt:#0f0f17;
  --bg-tint:#0c0c13;
  --bg-card:#14141d;
  --card-hi:#1a1a25;

  /* accent family */
  --c-blue:#5aa5ff;
  --c-indigo:#948cff;
  --c-teal:#3fc9bd;
  --c-amber:#f0ad4e;
  --c-rose:#ff6b8f;
  --c-green:#4ed38a;

  --accent:#4d9dff;
  --accent-ink:#6fb0ff;
  --grad:linear-gradient(100deg,#4d9dff 0%,#6d8cff 38%,#948cff 72%,#4fc4c0 100%);
  --grad-soft:linear-gradient(115deg,rgba(0,113,227,.14),rgba(91,83,224,.12) 50%,rgba(13,143,136,.12));

  --r-sm:10px;
  --r-md:18px;
  --r-lg:26px;

  --wrap:1180px;
  --pad:24px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.30);
  --shadow-md:0 2px 8px rgba(0,0,0,.40), 0 24px 60px rgba(0,0,0,.46);
  --shadow-lg:0 30px 90px rgba(0,0,0,.24);

  --font:"Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:86px;
}

body{
  margin:0;
  background:var(--bg);
  position:relative;
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.55;
  letter-spacing:-0.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden;}

/* Fixed ambient wash + hairline grid. Keeps large white areas from reading
   as empty without adding weight to any individual section. */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(70% 55% at 8% 4%,  rgba(0,113,227,.16), transparent 62%),
    radial-gradient(60% 50% at 96% 18%, rgba(91,83,224,.14), transparent 60%),
    radial-gradient(70% 55% at 50% 96%, rgba(13,143,136,.11), transparent 62%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:68px 68px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 12%, transparent 72%);
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 12%, transparent 72%);
}

/* sections that need to sit on the page ground, not the wash */
.section--alt{position:relative;z-index:0;}

img{max-width:100%;display:block;}
a{color:inherit;}

h1,h2,h3{margin:0;font-weight:600;letter-spacing:-0.03em;line-height:1.07;}
p{margin:0;}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 var(--r-sm) 0;
  font-size:14px;font-weight:500;text-decoration:none;
}
.skip-link:focus{left:0;}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}

/* gradient text */
.grad{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45em;
  background:#fff;color:#0a0a10;border:1px solid transparent;
  padding:14px 26px;border-radius:980px;
  font-size:16px;font-weight:500;letter-spacing:-0.01em;
  text-decoration:none;cursor:pointer;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background-color .25s var(--ease);
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(0,0,0,.5);}
.btn:active{transform:translateY(0) scale(.985);}

.btn--grad{background:var(--grad);color:#08080d;}
.btn--grad:hover{box-shadow:0 12px 34px rgba(77,157,255,.34);}

.btn--ghost{background:transparent;color:var(--accent-ink);padding-inline:14px;}
.btn--ghost:hover{background:rgba(255,255,255,.09);transform:none;box-shadow:none;}

.btn--sm{padding:9px 18px;font-size:14.5px;}
.btn:disabled{opacity:.55;cursor:progress;transform:none;box-shadow:none;}

/* ── Nav ─────────────────────────────────────────────────────────────── */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:rgba(10,10,16,.62);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.nav.is-stuck{border-bottom-color:var(--line);}

/* while the dark hero is behind it */
.nav--over{background:rgba(10,10,16,.34);border-bottom-color:transparent;}

.nav__inner{
  max-width:var(--wrap);margin-inline:auto;
  padding:0 var(--pad);height:62px;
  display:flex;align-items:center;gap:24px;
}
.nav__brand{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;font-weight:600;font-size:16.5px;
  letter-spacing:-0.02em;margin-right:auto;
}
.nav__mark{display:inline-flex;color:var(--c-blue);}
.nav__mark svg{border-radius:7px;}

.nav__links{display:flex;gap:30px;}
.nav__links a{
  text-decoration:none;font-size:14.5px;color:var(--ink-2);
  position:relative;transition:color .2s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--grad);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__links a:hover{color:var(--ink);}
.nav__links a:hover::after{transform:scaleX(1);}

.nav__toggle{
  display:none;width:40px;height:40px;background:none;border:0;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;margin-right:-8px;
}
.nav__toggle span{
  display:block;width:18px;height:1.5px;background:var(--ink);border-radius:2px;
  transition:transform .3s var(--ease), opacity .25s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg);}
.nav__toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg);}

.nav__mobile[hidden]{display:none;}
.nav__mobile{
  border-top:1px solid var(--line);
  padding:10px var(--pad) 22px;
  display:flex;flex-direction:column;
  background:rgba(10,10,16,.97);
}
.nav__mobile a{
  text-decoration:none;padding:13px 2px;font-size:19px;font-weight:500;
  border-bottom:1px solid var(--line-2);
}
.nav__mobile a:last-child{border-bottom:0;}

/* ── Hero ────────────────────────────────────────────────────────────
   Dark, so the page opens with contrast instead of white, and the mock is
   real client work rather than grey placeholder bars.
*/
.hero{
  position:relative;
  padding:150px 0 0;
  text-align:center;
  overflow:hidden;
  background:transparent;
  color:#fff;
  isolation:isolate;
}

.hero__glow{position:absolute;inset:-6% -14% auto;height:900px;pointer-events:none;z-index:-1;}
.hero__glow i{position:absolute;display:block;border-radius:50%;filter:blur(120px);}
.hero__glow i:nth-child(1){width:640px;height:560px;left:2%;top:-40px;background:#0071e3;opacity:.42;}
.hero__glow i:nth-child(2){width:580px;height:520px;right:2%;top:-70px;background:#5b53e0;opacity:.38;}
.hero__glow i:nth-child(3){width:520px;height:480px;left:38%;top:230px;background:#0d8f88;opacity:.24;}

/* faint grid, so the dark ground still has structure */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(110% 80% at 50% 8%, #000 18%, transparent 74%);
  mask-image:radial-gradient(110% 80% at 50% 8%, #000 18%, transparent 74%);
}

.hero__eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:500;color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  padding:7px 16px;border-radius:980px;margin-bottom:26px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}

.hero__title{
  font-size:clamp(42px,7.4vw,88px);font-weight:600;
  letter-spacing:-0.035em;margin-bottom:26px;color:#fff;
}
.hero__title .grad{
  background:linear-gradient(100deg,#6fb6ff 0%,#9a93ff 52%,#5fd3ca 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

.hero__sub{
  max-width:620px;margin:0 auto;
  font-size:clamp(17px,2.1vw,21px);line-height:1.5;
  color:rgba(255,255,255,.72);letter-spacing:-0.012em;
}
.hero__actions{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:34px;}
.hero .btn{background:#fff;color:#0b0b11;}
.hero .btn:hover{background:#fff;box-shadow:0 14px 34px rgba(0,0,0,.45);}
.hero .btn--ghost{background:transparent;color:rgba(255,255,255,.88);}
.hero .btn--ghost:hover{background:rgba(255,255,255,.10);color:#fff;box-shadow:none;}

/* ── Hero showcase: three real client sites, fanned ──────────────────── */
.hero__showcase{
  position:relative;height:452px;margin:70px auto 0;
  max-width:1220px;padding-inline:var(--pad);
}
.showcase__frame{
  position:absolute;top:0;left:50%;
  border-radius:14px;overflow:hidden;
  background:#fff;
  border:1px solid rgba(255,255,255,.14);
  transform-origin:top center;
}
.showcase__frame--main{
  width:700px;height:430px;z-index:3;
  transform:translateX(-50%);
  box-shadow:0 40px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.07);
}
.showcase__frame--left,
.showcase__frame--right{
  width:430px;height:300px;top:56px;z-index:2;opacity:.94;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.showcase__frame--left{transform:translateX(-126%) rotate(-6deg);}
.showcase__frame--right{transform:translateX(26%) rotate(6deg);}
/* keep the centre frame dominant */
.showcase__frame--left::after,
.showcase__frame--right::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg, rgba(11,11,17,.20), rgba(11,11,17,.42));
}
.showcase__frame .pv{
  width:1120px;transform-origin:top left;
  transform:scale(var(--pv-scale,.4));pointer-events:none;
}

/* ── Logos ───────────────────────────────────────────────────────────── */
.logos{padding:84px 0 4px;text-align:center;}
.logos__label{
  font-size:13.5px;font-weight:500;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:28px;
}
.logos__row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 40px;}
.logos__row span{
  font-size:16px;font-weight:700;letter-spacing:-0.01em;
  color:var(--brand,var(--ink-3));
  padding:9px 16px;border-radius:980px;
  border:1px solid color-mix(in srgb, var(--brand,#8a8a96) 22%, transparent);
  background:color-mix(in srgb, var(--brand,#8a8a96) 7%, transparent);
  transition:transform .3s var(--ease), background-color .3s var(--ease);
}
.logos__row span:hover{
  transform:translateY(-2px);
  background:color-mix(in srgb, var(--brand,#8a8a96) 14%, transparent);
}

/* ── Stats ───────────────────────────────────────────────────────────── */
.stats{padding:86px 0 0;}
.stats__panel{
  background:#101015;border-radius:var(--r-lg);
  padding:56px 40px;position:relative;overflow:hidden;
}
.stats__panel::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(0,113,227,.30), transparent 55%),
    radial-gradient(80% 120% at 88% 10%, rgba(91,83,224,.26), transparent 58%),
    radial-gradient(70% 120% at 50% 110%, rgba(13,143,136,.20), transparent 60%);
}
.stats__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px;
}
.stat{text-align:center;position:relative;}
.stat + .stat::before{
  content:"";position:absolute;left:-14px;top:14%;bottom:14%;
  width:1px;background:rgba(255,255,255,.14);
}
.stat strong{
  display:block;font-size:clamp(34px,4.4vw,52px);font-weight:700;
  letter-spacing:-0.035em;line-height:1.05;font-variant-numeric:tabular-nums;
  color:#fff;
}
.stat span{display:block;margin-top:10px;font-size:13.5px;color:rgba(255,255,255,.60);letter-spacing:.02em;}

/* ── Sections ────────────────────────────────────────────────────────── */
.section{padding:120px 0;}
.section--alt{background:linear-gradient(180deg,#0e0e16 0%,#111119 52%,#0e0e16 100%);}
.section--tint{background:linear-gradient(180deg,var(--bg) 0%,#0c0c14 38%,var(--bg) 94%);}

.section__head{max-width:720px;margin-bottom:60px;}
.eyebrow{
  display:inline-block;
  font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;
  margin-bottom:16px;padding:5px 12px;border-radius:980px;
  color:var(--c-blue);background:rgba(0,113,227,.09);
}
.eyebrow--indigo{color:var(--c-indigo);background:rgba(91,83,224,.10);}
.eyebrow--teal{color:var(--c-teal);background:rgba(13,143,136,.11);}
.eyebrow--amber{color:var(--c-amber);background:rgba(194,118,10,.12);}
.eyebrow--rose{color:var(--c-rose);background:rgba(217,42,91,.10);}

.section__head h2{font-size:clamp(32px,4.6vw,54px);letter-spacing:-0.033em;}
.lede{margin-top:20px;font-size:19px;line-height:1.55;color:var(--ink-2);max-width:580px;letter-spacing:-0.012em;}

/* ── Work grid ───────────────────────────────────────────────────────── */
.work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:26px;}

.work-card{
  position:relative;text-align:left;
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:0;overflow:hidden;cursor:pointer;
  font-family:inherit;color:inherit;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s var(--ease);
}
.work-card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--brand,var(--accent));
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
  z-index:2;
}
.work-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 60px color-mix(in srgb, var(--brand,#101018) 18%, transparent);
  border-color:color-mix(in srgb, var(--brand,#101018) 22%, transparent);
}
.work-card:hover::after{transform:scaleX(1);}
.work-card:active{transform:translateY(-2px);}

.work-card__thumb{
  display:block;aspect-ratio:16/10;overflow:hidden;
  border-bottom:1px solid var(--line-2);
  background:var(--pv-bg,#f5f5f7);position:relative;
}
/* Previews are authored at desktop width and scaled down like a screenshot.
   JS sets --pv-scale from the container width; see fitPreviews() in main.js. */
.work-card__thumb .pv{
  width:1120px;transform-origin:top left;
  transform:scale(var(--pv-scale,.3));
  transition:transform .6s var(--ease);pointer-events:none;
}
.work-card:hover .work-card__thumb .pv{transform:scale(calc(var(--pv-scale,.3) * 1.04));}

.work-card__body{display:block;padding:24px 26px 28px;}
.work-card__cat{
  display:inline-block;font-size:11.5px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;
  color:var(--brand,var(--ink-3));
  background:color-mix(in srgb, var(--brand,#8a8a96) 11%, transparent);
  padding:5px 11px;border-radius:980px;
}
.work-card__title{
  display:block;margin:14px 0 8px;font-size:23px;font-weight:600;
  letter-spacing:-0.025em;line-height:1.15;
}
.work-card__desc{display:block;font-size:15.5px;color:var(--ink-2);line-height:1.5;}
.work-card__meta{
  display:flex;width:100%;box-sizing:border-box;
  align-items:center;justify-content:space-between;
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line-2);
  font-size:14px;color:var(--ink-3);
}
.work-card__view{color:var(--brand,var(--accent-ink));font-weight:600;}

/* ── Site preview component (cards + modal) ──────────────────────────── */
.preview{background:#fff;font-family:var(--font);--pv-ink:#1d1d1f;}
.preview__bar{
  height:36px;display:flex;align-items:center;gap:6px;padding:0 14px;
  background:#f6f6f8;border-bottom:1px solid rgba(0,0,0,.06);
}
.preview__bar i{width:9px;height:9px;border-radius:50%;background:#dcdce0;}
.preview__url{
  margin-left:12px;font-size:11px;color:#86868b;background:#fff;
  padding:3px 14px;border-radius:6px;border:1px solid rgba(0,0,0,.05);
}
.preview__nav{
  display:flex;align-items:center;gap:26px;
  padding:18px 34px;border-bottom:1px solid rgba(0,0,0,.05);
  background:var(--pv-navbg,#fff);
}
.preview__logo{font-weight:700;font-size:16px;letter-spacing:-0.02em;color:var(--pv-accent);margin-right:auto;}
.preview__nav span{font-size:12.5px;color:#6e6e73;}
.preview__nav .preview__pill{
  background:var(--pv-accent);color:#fff;padding:7px 16px;border-radius:99px;
  font-size:12px;font-weight:500;
}
.preview__hero{padding:64px 44px;background:var(--pv-bg);color:var(--pv-ink);text-align:var(--pv-align,left);}
.preview__kicker{
  font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pv-accent);margin-bottom:16px;
}
.preview__h1{
  font-size:40px;font-weight:700;letter-spacing:-0.035em;line-height:1.08;
  margin:0 0 18px;max-width:14ch;margin-inline:var(--pv-mi,0 auto);
}
.preview__lede{
  font-size:14.5px;line-height:1.6;opacity:.72;max-width:44ch;
  margin:0 0 26px;margin-inline:var(--pv-mi,0 auto);
}
.preview__cta{
  display:inline-block;background:var(--pv-accent);color:#fff;
  padding:12px 26px;border-radius:var(--pv-radius,99px);font-size:13px;font-weight:600;
}
.preview__strip{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:38px 44px 56px;background:#fff;}
.preview__tile{border:1px solid rgba(0,0,0,.07);border-radius:var(--pv-radius,14px);padding:20px;background:#fff;}
.preview__tile b{display:block;font-size:13.5px;font-weight:600;margin-bottom:8px;color:#1d1d1f;letter-spacing:-0.01em;}
.preview__tile em{display:block;font-style:normal;font-size:12px;line-height:1.55;color:#86868b;}
.preview__swatch{width:26px;height:26px;border-radius:8px;margin-bottom:14px;background:var(--pv-accent);}

/* ── Service cards ───────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:22px;}
.card{
  position:relative;background:var(--bg-card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:34px 32px 36px;overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s var(--ease);
}
.card::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;
  background:var(--tone,var(--accent));
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.card:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 50px color-mix(in srgb, var(--tone,#101018) 14%, transparent);
  border-color:color-mix(in srgb, var(--tone,#101018) 20%, transparent);
}
.card:hover::before{transform:scaleX(1);}

.card__icon{
  width:48px;height:48px;border-radius:15px;
  display:grid;place-items:center;font-size:20px;margin-bottom:22px;
  color:var(--tone,var(--accent));
  background:color-mix(in srgb, var(--tone,var(--accent)) 16%, var(--bg-card));
}
.card:nth-child(1){--tone:var(--c-blue);}
.card:nth-child(2){--tone:var(--c-indigo);}
.card:nth-child(3){--tone:var(--c-teal);}
.card:nth-child(4){--tone:var(--c-rose);}
.card:nth-child(5){--tone:var(--c-amber);}
.card:nth-child(6){--tone:var(--c-green);}

.card h3{font-size:21px;letter-spacing:-0.024em;margin-bottom:12px;}
.card p{font-size:15.5px;line-height:1.6;color:var(--ink-2);}

/* ── Process steps ───────────────────────────────────────────────────── */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:34px;}
.step{position:relative;padding-top:26px;}
.step::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;
  background:color-mix(in srgb, var(--tone,var(--accent)) 30%, transparent);
}
.step::after{
  content:"";position:absolute;left:0;top:0;height:2px;width:38%;border-radius:2px;
  background:var(--tone,var(--accent));
}
.step:nth-child(1){--tone:var(--c-blue);}
.step:nth-child(2){--tone:var(--c-indigo);}
.step:nth-child(3){--tone:var(--c-teal);}
.step:nth-child(4){--tone:var(--c-green);}

.step__n{
  display:inline-block;font-size:12px;font-weight:700;
  letter-spacing:.08em;margin-bottom:14px;font-variant-numeric:tabular-nums;
  color:var(--tone,var(--accent));
  background:color-mix(in srgb, var(--tone,var(--accent)) 11%, transparent);
  padding:4px 10px;border-radius:980px;
}
.step h3{font-size:22px;letter-spacing:-0.025em;margin-bottom:12px;}
.step p{font-size:15.5px;line-height:1.6;color:var(--ink-2);}

/* ── Client story cards (testimonial + the site we built) ────────────── */
.clients-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:26px;}

.client-card{
  display:flex;flex-direction:column;
  background:var(--bg-card);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s var(--ease);
}
.client-card:hover{
  transform:translateY(-5px);
  box-shadow:0 24px 60px color-mix(in srgb, var(--brand) 20%, transparent);
  border-color:color-mix(in srgb, var(--brand) 26%, transparent);
}

/* branded header band, unique per client */
.client-card__head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:20px 26px;
  background:linear-gradient(120deg,
    color-mix(in srgb, var(--brand) 30%, var(--card-hi)),
    color-mix(in srgb, var(--brand) 10%, var(--card-hi)));
  border-bottom:1px solid color-mix(in srgb, var(--brand) 16%, transparent);
}
.client-card__mark{
  font-size:14px;font-weight:700;letter-spacing:-0.01em;
  color:var(--brand);
  display:flex;align-items:center;gap:10px;
}
.client-card__chip{
  width:28px;height:28px;border-radius:9px;flex:none;
  background:var(--brand);color:#fff;
  display:grid;place-items:center;
  font-size:12px;font-weight:700;letter-spacing:0;
}
.client-card__stars{font-size:13px;color:var(--brand);letter-spacing:2px;flex:none;}

.client-card__body{padding:28px 26px 0;flex:1;display:flex;flex-direction:column;}
.client-card__body blockquote{
  margin:0 0 22px;font-size:17px;line-height:1.55;letter-spacing:-0.014em;flex:1;
}
.client-card__body blockquote::before{content:"“";}
.client-card__body blockquote::after{content:"”";}

.client-card__result{
  display:inline-flex;align-items:baseline;gap:8px;
  align-self:flex-start;
  padding:8px 14px;border-radius:980px;margin-bottom:22px;
  background:color-mix(in srgb, var(--brand) 10%, transparent);
  color:var(--brand);
}
.client-card__result strong{font-size:17px;font-weight:700;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;}
.client-card__result span{font-size:13px;font-weight:500;opacity:.85;}

.client-card__who{
  display:flex;align-items:center;gap:12px;
  padding-top:18px;border-top:1px solid var(--line-2);
}
.client-card__avatar{
  width:40px;height:40px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  font-size:14px;font-weight:600;color:#fff;
  background:linear-gradient(140deg, var(--brand), color-mix(in srgb, var(--brand) 62%, #000));
}
.client-card__name{display:flex;flex-direction:column;gap:2px;min-width:0;}
.client-card__name strong{font-size:15px;font-weight:600;}
.client-card__name span{font-size:13.5px;color:var(--ink-3);}

/* the site we built, as proof under the quote */
.client-card__site{
  margin-top:22px;border-top:1px solid var(--line-2);
  background:color-mix(in srgb, var(--brand) 9%, var(--bg-card));
  padding:0;border:0;width:100%;text-align:left;
  font-family:inherit;color:inherit;cursor:pointer;
  display:block;position:relative;
  transition:background-color .3s var(--ease);
}
.client-card__site:hover{background:color-mix(in srgb, var(--brand) 16%, var(--bg-card));}

.client-card__shot{
  display:block;
  height:132px;overflow:hidden;position:relative;
  border-top:1px solid var(--line-2);
}
.client-card__shot .pv{
  width:1120px;transform-origin:top left;
  transform:scale(var(--pv-scale,.28));
  pointer-events:none;transition:transform .6s var(--ease);
}
.client-card__site:hover .client-card__shot .pv{transform:scale(calc(var(--pv-scale,.28) * 1.04));}

.client-card__cta{
  display:flex;width:100%;box-sizing:border-box;align-items:center;justify-content:space-between;
  padding:14px 26px;font-size:13.5px;font-weight:600;color:var(--brand);
}
.client-card__cta em{font-style:normal;font-weight:500;color:var(--ink-3);}

/* ── Contact ─────────────────────────────────────────────────────────── */
.contact__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:72px;align-items:start;}
.contact__intro h2{font-size:clamp(32px,4.4vw,52px);letter-spacing:-0.033em;}
.contact__meta{margin:40px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:26px 20px;}
.contact__meta div{border-top:2px solid;border-image:var(--grad) 1;padding-top:14px;}
.contact__meta dt{
  font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-3);margin-bottom:6px;
}
.contact__meta dd{margin:0;font-size:16px;}
.contact__meta a{color:var(--accent-ink);text-decoration:none;font-weight:500;}
.contact__meta a:hover{text-decoration:underline;}

.form{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
  background:var(--bg-card);border-radius:var(--r-lg);
  padding:34px;border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
}
.form::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--grad);}
.field{display:flex;flex-direction:column;gap:8px;}
.field--full{grid-column:1/-1;}
.field label{font-size:13.5px;font-weight:500;color:var(--ink-2);}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:16px;color:var(--ink);
  background:rgba(255,255,255,.045);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:13px 14px;width:100%;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.field textarea{resize:vertical;min-height:120px;line-height:1.5;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);background:rgba(255,255,255,.07);
  box-shadow:0 0 0 4px rgba(77,157,255,.18);
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  border-color:#ff6b6b;box-shadow:0 0 0 4px rgba(255,107,107,.16);
}
.hp{position:absolute;left:-9999px;opacity:0;}

.form__foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px;}
.form__note{font-size:13.5px;color:var(--ink-3);}
.form__note.is-error{color:#ff7a7a;}
.form__note.is-ok{color:#4ed38a;}

/* ── Footer ──────────────────────────────────────────────────────────── */
.footer{
  padding:64px 0 72px;
  background:#0d0d14;color:#f2f2f5;border-top:1px solid var(--line);
}
.footer__inner{display:flex;flex-direction:column;gap:22px;}
.footer__brand{display:flex;align-items:center;gap:9px;font-weight:600;letter-spacing:-0.02em;}
.footer__links{display:flex;flex-wrap:wrap;gap:12px 28px;}
.footer__links a{font-size:14.5px;color:rgba(242,242,245,.72);text-decoration:none;transition:color .2s var(--ease);}
.footer__links a:hover{color:#fff;}
.footer__legal{font-size:13.5px;color:rgba(242,242,245,.62);}
.footer__rule{height:3px;border-radius:3px;background:var(--grad);width:56px;}

/* ── Modal ───────────────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:30px;}
.modal[hidden]{display:none;}

.modal__backdrop{
  position:absolute;inset:0;background:rgba(4,4,8,.78);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;transition:opacity .35s var(--ease);
}
.modal.is-open .modal__backdrop{opacity:1;}

.modal__panel{
  position:relative;width:min(1040px,100%);max-height:min(88vh,900px);
  background:var(--bg-card);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  border:1px solid var(--line);
  overflow:hidden;opacity:0;transform:translateY(16px) scale(.975);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.modal.is-open .modal__panel{opacity:1;transform:none;}
.modal__panel:focus{outline:none;}
.modal__scroll{overflow-y:auto;max-height:inherit;-webkit-overflow-scrolling:touch;}

.modal__close{
  position:absolute;top:16px;right:16px;z-index:3;
  width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(20,20,29,.88);color:#fff;border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  display:grid;place-items:center;box-shadow:0 1px 4px rgba(0,0,0,.16);
  transition:background-color .2s var(--ease), transform .2s var(--ease);
}
.modal__close:hover{background:#26263a;transform:scale(1.06);}

.modal__preview{
  border-bottom:1px solid var(--line);
  overflow:hidden;position:relative;
}
.modal__preview .pv{width:1120px;transform-origin:top left;transform:scale(var(--pv-scale,1));}
.modal__info{padding:34px 40px 42px;}
.modal__cat{
  display:inline-block;font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand,var(--ink-3));
  background:color-mix(in srgb, var(--brand,#8a8a96) 11%, transparent);
  padding:5px 12px;border-radius:980px;
}
.modal__info h2{margin:14px 0 14px;font-size:clamp(26px,3.2vw,38px);letter-spacing:-0.03em;}
.modal__info .lede{margin-top:0;max-width:64ch;font-size:17px;}

.modal__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px;margin-top:32px;}
.modal__facts div{border-top:1px solid var(--line);padding-top:14px;}
.modal__facts dt{
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-3);margin-bottom:6px;
}
.modal__facts dd{margin:0;font-size:15.5px;line-height:1.45;}

.modal__results{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:20px;margin-top:34px;padding:26px;border-radius:var(--r-md);
  background:color-mix(in srgb, var(--brand,#8a8a96) 16%, var(--card-hi));
  border:1px solid color-mix(in srgb, var(--brand,#8a8a96) 30%, transparent);
}
.modal__results div{text-align:center;}
.modal__results strong{
  display:block;font-size:30px;font-weight:700;letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;color:var(--brand,var(--ink));
}
.modal__results span{display:block;margin-top:5px;font-size:13.5px;color:var(--ink-2);}

.modal__quote{
  margin-top:30px;padding:24px 26px;border-radius:var(--r-md);
  border-left:3px solid var(--brand,var(--accent));
  background:rgba(255,255,255,.04);
}
.modal__quote blockquote{margin:0 0 14px;font-size:16.5px;line-height:1.55;}
.modal__quote figcaption{font-size:14px;color:var(--ink-3);}
.modal__quote figcaption strong{color:var(--ink);font-weight:600;}

/* ── Scroll reveal ───────────────────────────────────────────────────── */
.reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  will-change:opacity, transform;
}
.reveal.is-in{opacity:1;transform:none;}
.reveal:nth-child(2){transition-delay:.06s;}
.reveal:nth-child(3){transition-delay:.12s;}
.reveal:nth-child(4){transition-delay:.18s;}
.reveal:nth-child(5){transition-delay:.24s;}
.reveal:nth-child(6){transition-delay:.3s;}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (min-width:761px){
  .nav__mobile{display:none;}
}

@media (max-width:900px){
  .contact__grid{grid-template-columns:1fr;gap:44px;}
  .stats__grid{grid-template-columns:repeat(2,1fr);gap:38px 20px;}
  .stats__panel{padding:44px 26px;}
  .stat:nth-child(3)::before{display:none;}
}

@media (max-width:760px){
  body{font-size:16.5px;}
  .br-md{display:none;}
  .nav__links,.nav__cta{display:none;}
  .nav__toggle{display:flex;}
  .hero{padding-top:112px;}
  .hero__glow i{filter:blur(90px);}
  .hero__showcase{height:250px;margin-top:48px;}
  .showcase__frame--left,.showcase__frame--right{display:none;}
  .showcase__frame--main{width:calc(100vw - 40px);height:236px;}
  .section{padding:84px 0;}
  .section__head{margin-bottom:42px;}
  .logos{padding-top:64px;}
  .logos__row{gap:12px 24px;}
  .logos__row span{font-size:15px;}
  .work-grid,.cards,.clients-grid{grid-template-columns:1fr;}
  .card{padding:28px 24px;}
  .modal{padding:0;}
  .modal__panel{width:100%;max-height:100vh;height:100%;border-radius:0;}
  .modal__scroll{max-height:100vh;}
  .modal__info{padding:28px 22px 44px;}
  .form{padding:24px;grid-template-columns:1fr;}
  .contact__meta{grid-template-columns:1fr;gap:20px;}
  .preview__hero{padding:40px 26px;}
  .preview__h1{font-size:28px;}
  .preview__strip{padding:26px;gap:12px;}
  .preview__tile{padding:14px;}
  .preview__nav{padding:14px 20px;gap:16px;}
}

@media (max-width:420px){
  .preview__strip{grid-template-columns:1fr;}
  .preview__nav > span:not(.preview__logo):not(.preview__pill){display:none;}
}

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  .reveal{opacity:1;transform:none;}
  .stage-window{transform:none;}
}

/* ── Print ───────────────────────────────────────────────────────────── */
@media print{
  .nav,.modal,.hero__stage,.hero__glow{display:none !important;}
  .section{padding:24px 0;}
  .footer{background:#fff;color:#000;}
}

/* ── Pricing tiers ───────────────────────────────────────────────────── */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start;}
.tier{
  position:relative;background:var(--bg-card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:32px 30px 34px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s var(--ease);
}
.tier:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.tier--feature{
  border-color:transparent;background:var(--card-hi);
  box-shadow:0 0 0 2px var(--c-indigo), 0 24px 64px rgba(148,140,255,.22);
}
.tier--feature:hover{box-shadow:0 0 0 2px var(--c-indigo), 0 32px 76px rgba(148,140,255,.3);}
.tier__flag{
  position:absolute;top:-12px;left:30px;
  background:var(--grad);color:#08080d;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 14px;border-radius:980px;
}
.tier__name{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);}
.tier__price{
  display:flex;align-items:baseline;gap:7px;margin:14px 0 6px;
}
.tier__price strong{font-size:40px;font-weight:600;letter-spacing:-0.035em;line-height:1;}
.tier__price span{font-size:13.5px;color:var(--ink-3);}
.tier__for{font-size:14.5px;color:var(--ink-2);line-height:1.5;margin-bottom:22px;}
.tier__list{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:11px;}
.tier__list li{
  display:flex;gap:10px;align-items:flex-start;
  font-size:14.5px;line-height:1.45;color:var(--ink);
}
.tier__list svg{flex:none;margin-top:3px;color:var(--c-indigo);}
.tier .btn{width:100%;}
.tier .btn--ghost{border-color:color-mix(in srgb, var(--c-indigo) 32%, transparent);}
.tier .btn--ghost:hover{border-color:var(--c-indigo);}
.tiers__note{
  margin-top:26px;text-align:center;font-size:14.5px;color:var(--ink-2);
}
.tiers__note b{color:var(--ink);font-weight:600;}

/* ── Closing CTA band ────────────────────────────────────────────────── */
.cta-band{padding:0 0 110px;}
.cta-band__inner{
  position:relative;overflow:hidden;
  background:#101015;color:#fff;
  border-radius:var(--r-lg);
  padding:70px 56px;
  display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;
}
.cta-band__inner::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(85% 130% at 6% 0%, rgba(0,113,227,.40), transparent 56%),
    radial-gradient(75% 120% at 92% 14%, rgba(91,83,224,.34), transparent 58%),
    radial-gradient(70% 120% at 52% 108%, rgba(13,143,136,.26), transparent 60%);
}
.cta-band__copy{position:relative;z-index:1;max-width:640px;}
.cta-band h2{font-size:clamp(28px,3.8vw,44px);letter-spacing:-0.032em;margin-bottom:14px;}
.cta-band p{font-size:17.5px;line-height:1.55;color:rgba(255,255,255,.72);}
.cta-band__act{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;align-items:flex-start;}
.cta-band .btn{background:#fff;color:#101015;}
.cta-band .btn:hover{background:#fff;box-shadow:0 12px 32px rgba(0,0,0,.34);}
.cta-band__mail{font-size:14.5px;color:rgba(255,255,255,.66);text-decoration:none;}
.cta-band__mail:hover{color:#fff;}

@media (max-width:900px){
  .tiers{grid-template-columns:1fr;}
  .tier--feature{order:-1;}
}
@media (max-width:760px){
  .cta-band{padding-bottom:78px;}
  .cta-band__inner{padding:44px 26px;}
  .cta-band__act{width:100%;}
  .cta-band .btn{width:100%;}
}

/* ── Two primary services ────────────────────────────────────────────── */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:26px;}
.duo__card{
  position:relative;overflow:hidden;
  background:var(--bg-card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:38px 36px 34px;
  display:flex;flex-direction:column;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s var(--ease);
}
.duo__card::before{
  content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--tone);
}
.duo__card:hover{
  transform:translateY(-5px);
  box-shadow:0 24px 60px color-mix(in srgb, var(--tone) 16%, transparent);
  border-color:color-mix(in srgb, var(--tone) 26%, transparent);
}
.duo__card--build{--tone:var(--c-blue);}
.duo__card--care{--tone:var(--c-teal);}

.duo__tag{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tone);background:color-mix(in srgb, var(--tone) 11%, transparent);
  padding:6px 13px;border-radius:980px;margin-bottom:20px;
}
.duo__card h3{font-size:27px;letter-spacing:-0.028em;margin-bottom:12px;}
.duo__card > p{font-size:16px;line-height:1.6;color:var(--ink-2);margin-bottom:24px;}
.duo__list{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:12px;flex:1;}
.duo__list li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;line-height:1.45;}
.duo__list svg{flex:none;margin-top:3px;color:var(--tone);}
.duo__foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:20px;border-top:1px solid var(--line-2);
}
.duo__price{font-size:15.5px;color:var(--ink-2);}
.duo__price b{color:var(--ink);font-weight:700;font-size:17px;letter-spacing:-0.015em;}
.duo__link{
  font-size:14.5px;font-weight:600;color:var(--tone);text-decoration:none;
}
.duo__link:hover{text-decoration:underline;}

/* supporting capabilities, deliberately smaller than the two above */
.also{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.also__item{
  background:transparent;border:1px solid var(--line);
  border-radius:var(--r-md);padding:20px 20px 22px;
  transition:background-color .3s var(--ease), border-color .3s var(--ease);
}
.also__item:hover{background:var(--bg-card);border-color:rgba(255,255,255,.2);}
.also__item b{display:block;font-size:15.5px;font-weight:600;margin-bottom:6px;letter-spacing:-0.015em;}
.also__item span{display:block;font-size:13.5px;line-height:1.5;color:var(--ink-2);}
.also__label{
  font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:18px;
}

/* ── Care plan panel in pricing ──────────────────────────────────────── */
.care{
  margin-top:26px;background:var(--bg-card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:34px 36px;
  display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;align-items:center;
  position:relative;overflow:hidden;
}
.care::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--c-teal);}
.care h3{font-size:24px;letter-spacing:-0.026em;margin-bottom:10px;}
.care p{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin-bottom:16px;}
.care__price{display:flex;align-items:baseline;gap:8px;}
.care__price strong{font-size:34px;font-weight:600;letter-spacing:-0.03em;}
.care__price span{font-size:14px;color:var(--ink-3);}
.care__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;}
.care__grid div{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.45;}
.care__grid svg{flex:none;margin-top:3px;color:var(--c-teal);}

@media (max-width:900px){
  .duo{grid-template-columns:1fr;}
  .also{grid-template-columns:1fr 1fr;}
  .care{grid-template-columns:1fr;gap:24px;padding:28px 24px;}
}
@media (max-width:560px){
  .also{grid-template-columns:1fr;}
  .care__grid{grid-template-columns:1fr;}
}

/* ══════════════════════════════════════════════════════════════════════
   Motion & decoration — all of it disabled under prefers-reduced-motion
   by the global rule further up.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Light rails down both edges ─────────────────────────────────────── */
.rails{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.rails i{
  position:absolute;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.09) 18%,rgba(255,255,255,.09) 82%,transparent);
}
.rails i:nth-child(1){left:7vw;}
.rails i:nth-child(2){left:22vw;opacity:.5;}
.rails i:nth-child(3){right:22vw;opacity:.5;}
.rails i:nth-child(4){right:7vw;}

/* a slow beam of light travelling down each rail */
.rails i::after{
  content:"";position:absolute;left:-1px;width:3px;height:26vh;border-radius:3px;
  filter:blur(2px);
  animation:beam 11s linear infinite;
}
.rails i:nth-child(1)::after{background:linear-gradient(180deg,transparent,var(--c-blue),transparent);animation-delay:0s;}
.rails i:nth-child(2)::after{background:linear-gradient(180deg,transparent,var(--c-indigo),transparent);animation-delay:3.2s;animation-duration:14s;}
.rails i:nth-child(3)::after{background:linear-gradient(180deg,transparent,var(--c-teal),transparent);animation-delay:6.4s;animation-duration:13s;}
.rails i:nth-child(4)::after{background:linear-gradient(180deg,transparent,var(--c-indigo),transparent);animation-delay:1.6s;animation-duration:12s;}

@keyframes beam{
  0%{top:-30vh;opacity:0}
  12%{opacity:.85}
  88%{opacity:.85}
  100%{top:110vh;opacity:0}
}

/* ── Hero orbs drift and breathe ─────────────────────────────────────── */
.hero__glow i:nth-child(1){animation:drift-a 26s ease-in-out infinite;}
.hero__glow i:nth-child(2){animation:drift-b 31s ease-in-out infinite;}
.hero__glow i:nth-child(3){animation:drift-c 23s ease-in-out infinite;}

@keyframes drift-a{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(52px,-34px,0) scale(1.10)}
}
@keyframes drift-b{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-46px,28px,0) scale(1.08)}
}
@keyframes drift-c{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(30px,36px,0) scale(1.13)}
}

/* ── Client wordmarks scroll ─────────────────────────────────────────── */
.logos__viewport{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.logos__track{
  display:flex;align-items:center;gap:18px;
  width:max-content;
  animation:marquee 42s linear infinite;
}
.logos__viewport:hover .logos__track{animation-play-state:paused;}
@keyframes marquee{to{transform:translateX(-50%)}}

.logos__track span{
  flex:none;
  font-size:16px;font-weight:700;letter-spacing:-0.01em;
  color:var(--brand,var(--ink-3));
  padding:9px 18px;border-radius:980px;
  border:1px solid color-mix(in srgb, var(--brand,#8a8a96) 26%, transparent);
  background:color-mix(in srgb, var(--brand,#8a8a96) 9%, transparent);
  transition:background-color .3s var(--ease);
}
.logos__track span:hover{background:color-mix(in srgb, var(--brand,#8a8a96) 18%, transparent);}

/* ── Sheen sweep across cards on hover ───────────────────────────────── */
.tier::after,
.duo__card::after,
.client-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.075) 46%,transparent 62%);
  transform:translateX(-130%);
  transition:transform 1s var(--ease);
}
.tier:hover::after,
.duo__card:hover::after,
.client-card:hover::after{transform:translateX(130%);}

/* ── Featured tier flag: slow gradient travel ────────────────────────── */
.tier__flag{background-size:220% 100%;animation:flag-shift 7s linear infinite;}
@keyframes flag-shift{to{background-position:220% 0}}

/* ── Process bars fill as they come into view ────────────────────────── */
.step::after{width:0;transition:width 1.1s var(--ease) .15s;}
.step.is-in::after{width:38%;}

/* ── Service icon tiles lift on card hover ───────────────────────────── */
.card__icon{transition:transform .45s var(--ease);}
.card:hover .card__icon{transform:translateY(-3px) scale(1.06);}

@media (max-width:1100px){
  .rails i:nth-child(2),.rails i:nth-child(3){display:none;}
}
@media (max-width:760px){
  .rails i:nth-child(1){left:3vw;}
  .rails i:nth-child(4){right:3vw;}
}