/* ============================================================
   AsimovX — modern site styles
   Palette derived from the AsimovX mark: violet → magenta on deep navy
   ============================================================ */

:root{
  --bg:          #05040f;
  --bg-2:        #0a0820;
  --navy:        #000725;
  --surface:     rgba(255,255,255,.035);
  --surface-2:   rgba(255,255,255,.06);
  --line:        rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.16);

  --violet:  #8b5cf6;
  --purple:  #a80cf0;
  --magenta: #d926f5;
  --pink:    #f472b6;
  --cyan:    #22d3ee;

  --text:    #f4f2ff;
  --muted:   #a7a3c4;
  --muted-2: #7d7a99;

  --grad:      linear-gradient(100deg, var(--violet), var(--magenta));
  --grad-soft: linear-gradient(100deg, #b78cff, #f0a0ff);

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 30px;

  --shadow:    0 18px 50px -20px rgba(0,0,0,.75);
  --shadow-lg: 0 40px 90px -30px rgba(168,12,240,.35), 0 18px 50px -20px rgba(0,0,0,.8);

  --nav-h: 74px;
  --pad:  clamp(20px, 5vw, 56px);
  --maxw: 1200px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ color-scheme:dark; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  font-size:16.5px;
  line-height:1.7;
  letter-spacing:.1px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }
::selection{ background:rgba(217,38,245,.35); }

/* the nav is sticky, so anchored sections must not land beneath it */
[id]{ scroll-margin-top:calc(var(--nav-h) + 20px); }

/* visible, on-brand keyboard focus */
:focus-visible{
  outline:2px solid rgba(240,171,252,.9);
  outline-offset:3px;
  border-radius:4px;
}

h1,h2,h3,h4{
  font-family:"Space Grotesk","Inter",system-ui,sans-serif;
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.02em;
  margin:0 0 .6em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.25rem, 4.6vw, 3.75rem); letter-spacing:-.035em; }
h2{ font-size:clamp(1.85rem, 3.6vw, 2.85rem); letter-spacing:-.03em; }
h3{ font-size:1.22rem; }
p{ margin:0 0 1.1em; color:var(--muted); text-wrap:pretty; }
p:last-child{ margin-bottom:0; }

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

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
section{ position:relative; }
.section{ padding:clamp(60px,7.5vw,102px) 0; }
.section--tight{ padding:clamp(42px,5vw,66px) 0; }
.center{ text-align:center; }
.stack > * + *{ margin-top:14px; }

/* ---------- ambient background ---------- */
.aurora{ position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none; }
.aurora span{
  position:absolute; border-radius:50%;
  filter:blur(90px); opacity:.5;
  will-change:transform;
}
.aurora span:nth-child(1){ width:44vw; height:44vw; left:-10vw; top:-12vw;
  background:radial-gradient(circle at 30% 30%, #7c3aed, transparent 65%);
  animation:drift 26s var(--ease) infinite alternate; }
.aurora span:nth-child(2){ width:38vw; height:38vw; right:-8vw; top:6vh;
  background:radial-gradient(circle at 60% 40%, #d926f5, transparent 65%);
  opacity:.38; animation:drift 32s var(--ease) infinite alternate-reverse; }
.aurora span:nth-child(3){ width:50vw; height:50vw; left:22vw; bottom:-26vw;
  background:radial-gradient(circle at 50% 50%, #4c1d95, transparent 68%);
  opacity:.42; animation:drift 40s var(--ease) infinite alternate; }
@keyframes drift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(6vw,5vh,0) scale(1.18); }
}
.grid-overlay{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 78%);
}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  height:var(--nav-h);
  display:flex; align-items:center;
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  background:rgba(5,4,15,.55);
  border-bottom:1px solid transparent;
  transition:background .3s, border-color .3s;
}
.nav.is-stuck{ background:rgba(5,4,15,.86); border-bottom-color:var(--line); }
.nav__inner{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  display:flex; align-items:center; gap:26px; }
.brand{ display:flex; align-items:center; gap:11px; margin-right:auto; flex-shrink:0; }
.brand__logo{
  height:30px; width:auto; flex-shrink:0;
  filter:drop-shadow(0 0 14px rgba(168,12,240,.35));
}
.footer .brand__logo{ height:34px; }
.nav__links{ display:flex; align-items:center; gap:4px; }
.nav__links a{
  position:relative; padding:9px 14px; border-radius:999px;
  font-size:.925rem; color:var(--muted); font-weight:500;
  transition:color .2s, background .2s;
}
.nav__links a:hover{ color:var(--text); background:var(--surface); }
.nav__links a.active{ color:var(--text); }
.nav__links a.active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px;
  border-radius:2px; background:var(--grad);
}
.nav__cta{ display:flex; align-items:center; gap:10px; }

.burger{
  display:none; width:42px; height:42px; border-radius:12px;
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  cursor:pointer; padding:0; place-items:center;
}
.burger span{ display:block; width:17px; height:1.6px; background:currentColor;
  border-radius:2px; margin:3.4px auto; transition:transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 24px; border-radius:999px;
  font-weight:600; font-size:.94rem; letter-spacing:.01em;
  border:1px solid transparent; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s, background .25s, border-color .25s, color .2s;
  white-space:nowrap;
}
.btn svg{ width:16px; height:16px; transition:transform .25s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn--primary{
  background:var(--grad); color:#fff;
  box-shadow:0 10px 30px -10px rgba(217,38,245,.6);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 18px 44px -14px rgba(217,38,245,.75); }
.btn:active{ transform:translateY(0) scale(.985); }
.btn--ghost{ background:var(--surface); border-color:var(--line-strong); color:var(--text); }
.btn--ghost:hover{ background:var(--surface-2); border-color:rgba(217,38,245,.5); transform:translateY(-2px); }
.btn--sm{ padding:10px 18px; font-size:.875rem; }

/* ---------- eyebrow / chip ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.735rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:#e9c8ff; margin-bottom:20px;
}
.eyebrow::before{ content:""; width:26px; height:1.5px; background:var(--grad); border-radius:2px; }
.chip{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px 7px 12px; border-radius:999px;
  border:1px solid var(--line-strong); background:var(--surface);
  font-size:.8rem; font-weight:500; color:#d9d2f5; letter-spacing:.02em;
}
.chip .dot{ width:7px; height:7px; border-radius:50%; background:#4ade80;
  box-shadow:0 0 0 3px rgba(74,222,128,.18); animation:pulse 2.4s infinite; }
@keyframes pulse{ 50%{ box-shadow:0 0 0 7px rgba(74,222,128,0); } }

/* ---------- hero ---------- */
.hero{ padding:clamp(26px,3vw,42px) 0 clamp(14px,1.6vw,20px); }
/* The copy column is deliberately wide: the typed headlines are long, and
   both must wrap to the same number of lines or the page jogs mid-animation. */
.hero__grid{
  display:grid; grid-template-columns:1.45fr .55fr;
  gap:clamp(26px,3vw,44px); align-items:center;
}
.hero h1{ margin:16px 0 26px; max-width:none; }
.hero__lead{ font-size:clamp(1.02rem,1.5vw,1.16rem); max-width:56ch; color:#b8b3d6; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; }
.hero__meta{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:38px;
  padding-top:26px; border-top:1px solid var(--line);
  font-size:.86rem; color:var(--muted-2);
}
.hero__meta b{ color:var(--text); font-weight:600; }

.orb{ position:relative; display:grid; place-items:center; min-height:262px; }
.orb::before{
  content:""; position:absolute; inset:6%;
  background:radial-gradient(circle, rgba(168,12,240,.35), transparent 62%);
  filter:blur(38px);
}
.orb svg{ position:relative; width:100%; max-width:300px; height:auto; overflow:visible; }
.orb .edge{ stroke:url(#edgeGrad); stroke-width:1.15; fill:none; opacity:.55;
  stroke-dasharray:420; stroke-dashoffset:420; animation:draw 2.6s var(--ease) forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.orb .node{ fill:#0a0820; stroke:url(#nodeGrad); stroke-width:2.4; }
.orb .node-glow{ fill:url(#nodeGrad); opacity:.9; animation:blink 3.6s ease-in-out infinite; }
@keyframes blink{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
.orb__ring{
  position:absolute; left:50%; top:50%;
  aspect-ratio:1; border-radius:50%;
  border:1px dashed rgba(255,255,255,.12);
  animation:spin 34s linear infinite;
}
.orb__ring--1{ width:min(96%, 520px); }
.orb__ring--2{ width:min(74%, 400px); border-style:solid;
  border-color:rgba(217,38,245,.16);
  animation-duration:24s; animation-direction:reverse; }
@keyframes spin{
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to  { transform:translate(-50%,-50%) rotate(360deg); }
}
.orb__float{ animation:float 7s ease-in-out infinite; }
@keyframes float{ 50%{ transform:translateY(-14px); } }

/* ---------- statement band ----------
   An editorial pause between sections: centred, ruled top and bottom. */
.statement{ padding:clamp(56px,7vw,96px) 0; }
.statement__inner{
  max-width:60ch; margin-inline:auto; text-align:center;
  padding:clamp(34px,4vw,52px) clamp(18px,3vw,40px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
}
/* a brighter sliver centred on each rule, so the lines read as designed */
.statement__inner::before,.statement__inner::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:min(220px,46%); height:1px;
  background:linear-gradient(90deg, transparent, rgba(217,38,245,.65), transparent);
}
.statement__inner::before{ top:-1px; }
.statement__inner::after{ bottom:-1px; }
.statement__inner .eyebrow{ justify-content:center; }
.statement__inner h2{
  font-size:clamp(1.7rem,3.1vw,2.5rem); max-width:26ch; margin-inline:auto;
  margin-bottom:.6em;
}
.statement__inner p{ max-width:62ch; margin-inline:auto; font-size:1.02rem; }

/* ---------- section head ---------- */
.head{ max-width:64ch; margin-bottom:clamp(38px,5vw,58px); }
.head.center{ margin-left:auto; margin-right:auto; }
.head p{ font-size:1.03rem; }

/* ---------- cards ---------- */
.cards{ display:grid; gap:20px; }
.cards > *,.steps > *,.stats > *,.offices > *,.team > *{ min-width:0; }
.cards--3{ grid-template-columns:repeat(3,1fr); }
.cards--2{ grid-template-columns:repeat(2,1fr); }
.cards--4{ grid-template-columns:repeat(4,1fr); }
.cards--auto{ grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); }

.card{
  position:relative; overflow:hidden;
  padding:clamp(24px,2.6vw,32px);
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  transition:transform .38s var(--ease), border-color .38s, box-shadow .38s;
}
.card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:linear-gradient(140deg, rgba(217,38,245,.55), rgba(139,92,246,.18) 45%, transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .38s;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.card:hover::before{ opacity:1; }
.card__num{
  font-family:"Space Grotesk",sans-serif; font-size:.8rem; font-weight:700;
  letter-spacing:.14em; color:var(--muted-2);
}
.card h3{ margin-bottom:.5em; }
.card p{ font-size:.945rem; }
.card__link{
  display:inline-flex; align-items:center; gap:7px; margin-top:18px;
  font-size:.88rem; font-weight:600; color:#e6c9ff;
}
.card__link svg{ width:15px; height:15px; transition:transform .25s var(--ease); }
.card__link:hover svg{ transform:translateX(4px); }

.icon{
  width:52px; height:52px; border-radius:15px; display:grid; place-items:center;
  margin-bottom:20px; flex-shrink:0;
  background:linear-gradient(145deg, rgba(168,12,240,.28), rgba(139,92,246,.12));
  border:1px solid rgba(217,38,245,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.icon svg{ width:25px; height:25px; stroke:#f0d7ff; fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; }

.feature--wide{ grid-column:1/-1; }
.feature--wide h3{ font-size:1.12rem; }
.feature--wide p{ max-width:88ch; }

/* feature card (industries) */
.feature{ display:flex; gap:18px; align-items:flex-start; }
.feature .icon{ width:46px; height:46px; margin-bottom:0; border-radius:13px; }
.feature .icon svg{ width:22px; height:22px; }
.feature h3{ font-size:1.06rem; margin-bottom:.35em; }
.feature p{ font-size:.9rem; line-height:1.62; }

/* ---------- stats ---------- */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:var(--line);
}
.stat{ padding:28px 24px; background:rgba(10,8,32,.72); }
.stat b{ overflow-wrap:anywhere;
  display:block; font-family:"Space Grotesk",sans-serif; font-weight:600;
  font-size:clamp(1.9rem,3.4vw,2.5rem); line-height:1;
  background:var(--grad-soft); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.stat span{ display:block; margin-top:9px; font-size:.83rem; color:var(--muted-2);
  letter-spacing:.06em; text-transform:uppercase; }

/* ---------- checklist ---------- */
.checks{ list-style:none; margin:0; padding:0; display:grid; gap:13px;
  grid-template-columns:repeat(2,1fr); }
.checks li{ display:flex; gap:12px; align-items:flex-start; font-size:.96rem; color:#ded9f5; }
.checks svg{ width:20px; height:20px; flex-shrink:0; margin-top:2px; }

/* ---------- split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,66px); align-items:center; }
.split--wide{ grid-template-columns:1.15fr .85fr; }
.media{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.media img{ width:100%; height:100%; object-fit:cover; }
.media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(168,12,240,.22), transparent 45%, rgba(5,4,15,.55));
}
.media--tint img{ filter:saturate(.9) contrast(1.03); }

/* ---------- process timeline ---------- */
.steps{ counter-reset:s; display:grid; gap:18px;
  grid-template-columns:repeat(3,1fr); }   /* 6 stages => two even rows */
.step{
  position:relative; padding:26px 24px 24px;
  border-radius:var(--r); border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  transition:transform .35s var(--ease), border-color .35s;
}
.step:hover{ transform:translateY(-5px); border-color:rgba(217,38,245,.4); }
.step::before{
  counter-increment:s; content:"0" counter(s);
  font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:1.55rem;
  background:var(--grad-soft); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  display:block; margin-bottom:12px;
}
.step h3{ font-size:1.02rem; margin-bottom:.4em; }
.step p{ font-size:.885rem; line-height:1.6; }

/* ---------- accordion (services / jobs) ---------- */
.acc{ border-top:1px solid var(--line); }
.acc__item{ border-bottom:1px solid var(--line); }
.acc__btn{
  width:100%; display:flex; align-items:center; gap:18px; text-align:left;
  padding:26px 4px; background:none; border:0; color:var(--text); cursor:pointer;
  font-family:"Space Grotesk",sans-serif; font-size:clamp(1.02rem,1.7vw,1.2rem); font-weight:500;
  letter-spacing:-.01em; transition:color .2s;
}
.acc__btn:hover{ color:#f0d7ff; }
.acc__btn .k{ font-family:"Space Grotesk",sans-serif; font-size:.82rem; color:var(--muted-2);
  min-width:34px; font-weight:700; letter-spacing:.1em; }
.acc__btn .plus{ margin-left:auto; width:30px; height:30px; border-radius:50%; flex-shrink:0;
  border:1px solid var(--line-strong); display:grid; place-items:center; position:relative;
  transition:background .25s, border-color .25s, transform .35s var(--ease); }
.acc__btn .plus::before,.acc__btn .plus::after{
  content:""; position:absolute; background:currentColor; border-radius:2px;
  transition:transform .35s var(--ease), opacity .25s; }
.acc__btn .plus::before{ width:12px; height:1.6px; }
.acc__btn .plus::after{ width:1.6px; height:12px; }
.acc__btn[aria-expanded="true"] .plus{ background:var(--grad); border-color:transparent; transform:rotate(180deg); }
.acc__btn[aria-expanded="true"] .plus::after{ transform:scaleY(0); }
.acc__panel{ overflow:hidden; height:0; transition:height .42s var(--ease); }
.acc__panel > div{ padding:0 4px 30px; max-width:82ch; }
.acc__panel p{ font-size:.96rem; }

/* ---------- job list ---------- */
.job{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px;
  padding:24px 26px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--surface);
  transition:transform .3s var(--ease), border-color .3s, background .3s;
}
.job + .job{ margin-top:14px; }
.job:hover{ transform:translateX(5px); border-color:rgba(217,38,245,.42); background:var(--surface-2); }
.job__title{ font-family:"Space Grotesk",sans-serif; font-size:1.08rem; font-weight:500; }
.job__desc{ flex:1 1 100%; font-size:.9rem; color:var(--muted); margin:0; }
.tag{
  display:inline-flex; padding:4px 11px; border-radius:999px; font-size:.74rem;
  font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  border:1px solid var(--line-strong); color:#cfc8ec; background:rgba(255,255,255,.04);
}
.tag--accent{ border-color:rgba(217,38,245,.42); color:#f0c9ff; background:rgba(217,38,245,.1); }

/* ---------- cta band ---------- */
.cta{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl); padding:clamp(38px,5.5vw,66px);
  border:1px solid rgba(217,38,245,.28);
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(168,12,240,.35), transparent 55%),
    radial-gradient(100% 130% at 92% 100%, rgba(217,38,245,.3), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  box-shadow:var(--shadow-lg);
  text-align:center;
}
.cta h2{ max-width:22ch; margin-inline:auto; }
.cta p{ max-width:56ch; margin-inline:auto; color:#cfc8ec; }
.cta__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px; }

/* ---------- contact ---------- */
.offices{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.office{ padding:28px; border-radius:var(--r-lg); border:1px solid var(--line);
  background:var(--surface); transition:transform .34s var(--ease), border-color .34s; }
.office:hover{ transform:translateY(-5px); border-color:rgba(217,38,245,.4); }
.office h3{ display:flex; align-items:center; gap:10px; font-size:1.06rem; margin-bottom:.7em; }
.office h3 .flag{ font-size:1.3rem; line-height:1; }
.office address{ font-style:normal; font-size:.92rem; color:var(--muted); line-height:1.75; }
.office a{ color:#e9c8ff; border-bottom:1px solid rgba(233,200,255,.25); }
.office a:hover{ border-bottom-color:#e9c8ff; }
.office .hq{ margin-left:auto; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; background:var(--grad); color:#fff; font-weight:700; }

.form{ display:grid; gap:16px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field label{ display:block; font-size:.8rem; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:8px; }
.field input,.field textarea,.field select{
  width:100%; padding:13px 16px; border-radius:12px;
  background:rgba(255,255,255,.045); border:1px solid var(--line-strong);
  color:var(--text); font:inherit; font-size:.95rem;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.field textarea{ min-height:132px; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:rgba(217,38,245,.6); background:rgba(255,255,255,.07);
  box-shadow:0 0 0 4px rgba(217,38,245,.13);
}
.field input::placeholder,.field textarea::placeholder{ color:#615e7d; }
.form__note{ font-size:.82rem; color:var(--muted-2); }

/* ---------- team ---------- */
.team{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.person{ padding:30px 26px; text-align:center; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--surface);
  transition:transform .34s var(--ease), border-color .34s; }
.person:hover{ transform:translateY(-6px); border-color:rgba(217,38,245,.4); }
.avatar{
  width:76px; height:76px; margin:0 auto 18px; border-radius:50%;
  display:grid; place-items:center;
  font-family:"Space Grotesk",sans-serif; font-size:1.5rem; font-weight:600; color:#fff;
  background:var(--grad); box-shadow:0 12px 34px -12px rgba(217,38,245,.7);
}
.person h3{ margin-bottom:.25em; font-size:1.08rem; }
.person span{ font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2); }

/* ---------- marquee: revolving client logos ---------- */
.marquee{
  overflow:hidden; border-block:1px solid var(--line);
  padding:clamp(20px,2.4vw,28px) 0;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.marquee__track{
  display:flex; align-items:center; gap:clamp(38px,4.4vw,64px);
  width:max-content; animation:slide 52s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }

.mq{
  display:inline-flex; align-items:center; flex-shrink:0;
  padding:6px 4px; border-radius:10px;
  transition:transform .3s var(--ease);
}
.mq:hover{ transform:translateY(-2px); }
/* Wordmarks are capped by height, icon-only marks get more of it — equal
   height would make a square mark read far lighter than a long wordmark. */
.mq__img{
  height:clamp(21px,1.9vw,26px); width:auto; max-width:230px;
  object-fit:contain;
  opacity:.6; transition:opacity .3s;
}
.mq__img--mark{ height:clamp(30px,2.6vw,36px); max-width:110px; }
/* logos that keep their own colour plate read better with a soft edge */
.mq__img--plate{ border-radius:7px; opacity:.85; }
.marquee a:hover .mq__img{ opacity:1; }
.marquee a:focus-visible{ outline-offset:2px; }

/* Red Stakes ships a black-on-transparent mark */
.mq__img--invert{ filter:invert(1); }
.mq__text{
  font-family:"Space Grotesk",sans-serif; font-size:clamp(.9rem,1.1vw,1.02rem);
  font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:#8d88ad; white-space:nowrap; transition:color .3s;
}
.marquee:hover .mq__text{ color:#b6b0d4; }

.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;
}

/* ---------- page hero (subpages) ---------- */
.phero{ padding:clamp(52px,7vw,90px) 0 clamp(30px,4vw,46px); }
.phero h1{ font-size:clamp(2.1rem,4.6vw,3.4rem); margin-bottom:18px; }
.phero p{ max-width:62ch; font-size:1.04rem; }
.crumbs{ font-size:.83rem; color:var(--muted-2); margin-bottom:18px; letter-spacing:.04em; }
.crumbs a:hover{ color:var(--text); }

/* ---------- footer ---------- */
.footer{ margin-top:clamp(56px,7vw,96px); border-top:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,7,37,.5)); }
.footer__top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.35fr; gap:38px;
  padding:clamp(46px,6vw,72px) 0 44px; }
.footer h4{ font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:#cfc8ec; margin-bottom:18px; font-family:"Inter",sans-serif; font-weight:700; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.footer a{ color:var(--muted); font-size:.93rem; transition:color .2s; }
.footer a:hover{ color:var(--text); }
.footer__blurb{ font-size:.94rem; color:var(--muted); max-width:34ch; margin:16px 0 20px; }
.footer address{ font-style:normal; font-size:.92rem; color:var(--muted); line-height:1.8; }
.footer__bottom{ display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center;
  padding:22px 0 30px; border-top:1px solid var(--line); font-size:.86rem; color:var(--muted-2); }
.footer__bottom .spacer{ margin-left:auto; }
.social{ display:flex; gap:10px; }
.social a{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  border:1px solid var(--line); background:var(--surface);
  transition:transform .25s var(--ease), border-color .25s, background .25s; }
.social a:hover{ transform:translateY(-3px); border-color:rgba(217,38,245,.5); background:var(--surface-2); }
.social svg{ width:17px; height:17px; fill:#cfc8ec; }

/* ---------- reveal ---------- */
.r{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.r.in{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .steps{ grid-template-columns:repeat(2,1fr); }
  .footer__top{ grid-template-columns:1fr 1fr; gap:34px; }
  .cards--4{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; }
  /* Vertical space is scarce here and the client block matters more than the
     decorative diagram, so the orb steps aside. */
  .orb{ display:none; }
  .cards--3,.cards--2{ grid-template-columns:1fr; }
  .split,.split--wide{ grid-template-columns:1fr; }
  .checks{ grid-template-columns:1fr; }

  .burger{ display:grid; }
  .nav__links{
    position:fixed; inset:var(--nav-h) 0 auto; z-index:55;
    flex-direction:column; align-items:stretch; gap:2px;
    padding:16px var(--pad) 26px;
    background:rgba(5,4,15,.97);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:transform .32s var(--ease), opacity .28s;
  }
  .nav__links.open{ transform:none; opacity:1; pointer-events:auto; }
  .nav__links a{ padding:14px 12px; font-size:1rem; border-radius:12px; }
  .nav__links a.active::after{ left:12px; right:auto; width:18px; bottom:8px; }
  .nav__cta .btn{ display:none; }
}
@media (max-width:600px){
  body{ font-size:15.8px; }
  .steps{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
  .cards--4{ grid-template-columns:1fr; }
  .form__row{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; }
  .stat{ padding:22px 18px; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .r{ opacity:1; transform:none; }
}

/* ============================================================
   Interactive fluid cursor layer
   Sits above content but blends additively, so it only ever adds
   light to the dark page — text underneath stays readable.
   ============================================================ */
#fluid{
  position:fixed; inset:0; z-index:45;
  width:100vw; height:100vh;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.9;
}
/* Slightly calm the ambient blobs when the fluid layer is live,
   so the two effects don't fight each other. */
.has-fluid .aurora span{ opacity:.34; }
.has-fluid .aurora span:nth-child(2){ opacity:.26; }

/* ---------- pointer spotlight inside cards ---------- */
.card,.step,.office,.person,.job{ --mx:50%; --my:0%; }
.card::after,.step::after,.office::after,.person::after,.job::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(340px circle at var(--mx) var(--my),
    rgba(217,38,245,.14), transparent 62%);
  opacity:0; transition:opacity .35s; pointer-events:none;
}
.card:hover::after,.step:hover::after,.office:hover::after,
.person:hover::after,.job:hover::after{ opacity:1; }
.step,.office,.person,.job{ position:relative; overflow:hidden; }

/* ============================================================
   Clients — GolfTrak feature panel, App Store proof, logo row, ticker
   ============================================================ */

/* The clients block butts up against the hero so both are visible without
   scrolling; the space below it does the separating instead. */
.section--clients{ padding:clamp(6px,1vw,14px) 0 clamp(48px,6vw,80px); }

/* ---------- GolfTrak showcase: the footage is the feature ---------- */
.showcase{
  display:grid; grid-template-columns:1.22fr .78fr;
  gap:clamp(20px,2.4vw,34px); align-items:center;
  padding:clamp(16px,1.8vw,22px);
  border-radius:var(--r-xl);
  border:1px solid rgba(217,38,245,.24);
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(168,12,240,.22), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  box-shadow:var(--shadow-lg);
}

/* Video panel: full colour, unmasked, framed to the grid. A dark vignette and
   a whisper of violet keep it in the palette without dulling the footage. */
.showcase__media{
  position:relative; margin:0; overflow:hidden;
  aspect-ratio:16/9;
  border-radius:calc(var(--r-lg) - 2px);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 32px 70px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(217,38,245,.14);
  background:#0a0818;
}
.showcase__video{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center 38%;
  filter:saturate(1.06) contrast(1.05);
}
.showcase__glaze{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(125% 105% at 50% 45%, transparent 52%, rgba(5,4,15,.5) 100%),
    linear-gradient(205deg, rgba(168,12,240,.16), transparent 52%),
    linear-gradient(0deg, rgba(5,4,15,.55) 0%, transparent 26%);
}
.showcase__caption{
  position:absolute; left:14px; bottom:12px;
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 13px 6px 11px; border-radius:999px;
  background:rgba(5,4,15,.6);
  backdrop-filter:blur(10px) saturate(150%);
  -webkit-backdrop-filter:blur(10px) saturate(150%);
  border:1px solid rgba(255,255,255,.16);
  font-size:.75rem; letter-spacing:.06em; color:#e7e2f8;
}
.showcase__live{
  width:7px; height:7px; border-radius:50%; background:#4ade80;
  box-shadow:0 0 0 3px rgba(74,222,128,.18); animation:pulse 2.4s infinite;
}

.showcase__copy{ padding:clamp(2px,.6vw,10px) clamp(4px,1vw,14px); }
.showcase__copy .eyebrow{ margin-bottom:9px; }
.showcase__copy h2{
  font-size:clamp(1.45rem,2.3vw,1.85rem); margin-bottom:.34em; max-width:22ch;
  display:flex; flex-wrap:wrap; align-items:center; gap:.36em;
}
/* the client's own wordmark stands in for their name */
.showcase__word{
  height:.8em; width:auto; position:relative; top:.04em;
  filter:drop-shadow(0 0 16px rgba(255,255,255,.2));
}
/* wordmark and its full stop are one flex item, so the row gap cannot open a
   space between them */
.showcase__lockup{ display:inline-flex; align-items:baseline; }
.showcase__copy p{ font-size:.9rem; line-height:1.6; color:#ddd8f4;
  margin-bottom:13px; max-width:42ch; }

/* compact App Store rating row — replaces the tall score card */
.rating{
  display:inline-flex; align-items:center; gap:13px;
  padding:8px 16px 8px 8px; margin-bottom:11px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  background:linear-gradient(100deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  transition:transform .3s var(--ease), border-color .3s, background .3s;
}
.rating:hover{ transform:translateY(-2px); border-color:rgba(217,38,245,.5);
  background:linear-gradient(100deg, rgba(255,255,255,.1), rgba(255,255,255,.04)); }
.rating > img{
  width:38px; height:38px; border-radius:12px; flex-shrink:0;
  border:1px solid rgba(255,255,255,.18);
}
.rating__body{ display:grid; gap:3px; }
.rating__top{ display:inline-flex; align-items:center; gap:9px; }
.rating__top b{
  font-family:"Space Grotesk",sans-serif; font-size:1.22rem; font-weight:600; line-height:1;
  background:var(--grad-soft); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.rating__meta{ font-size:.78rem; color:var(--muted-2); }

.client__actions{ display:flex; flex-wrap:wrap; gap:10px; }

/* ---------- star rating ---------- */
.stars{
  position:relative; display:inline-block;
  font-size:1.02rem; line-height:1; letter-spacing:.14em;
  white-space:nowrap;
}
.stars__bg{ color:rgba(255,255,255,.17); }
.stars__fg{
  position:absolute; inset:0; overflow:hidden;
  color:#fbbf24; text-shadow:0 0 14px rgba(251,191,36,.35);
}

/* ---------- review cards ---------- */
.reviews{
  display:grid; gap:18px; margin-top:clamp(22px,3vw,34px);
  grid-template-columns:repeat(3,1fr);
}
.review{
  position:relative; overflow:hidden;
  padding:clamp(22px,2.4vw,28px);
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.016));
  transition:transform .35s var(--ease), border-color .35s;
}
.review:hover{ transform:translateY(-5px); border-color:rgba(251,191,36,.3); }
.review h3{ font-size:1rem; margin:14px 0 .5em; }
.review p{ font-size:.93rem; line-height:1.68; color:#cdc7e6; }
.review footer{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
  font-size:.83rem; font-weight:600; color:#e2ddf7;
}
.review footer span{ font-weight:400; color:var(--muted-2); }

/* ---------- client logo trio: GolfTrak centre, larger ---------- */
.logos{
  display:grid; grid-template-columns:1fr 1.55fr 1fr;
  gap:clamp(16px,2.2vw,26px); align-items:stretch;
  margin-top:clamp(28px,3.5vw,44px);
}
.logo-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  padding:clamp(22px,2.6vw,32px) 20px;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:rgba(255,255,255,.028);
  transition:transform .34s var(--ease), border-color .34s, background .34s;
}
.logo-tile:hover{ transform:translateY(-5px); border-color:rgba(217,38,245,.4);
  background:rgba(255,255,255,.055); }
.logo-tile span{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2);
}
.logo-tile__img{
  width:100%; max-width:138px; height:auto; max-height:40px;
  object-fit:contain; opacity:.88; transition:opacity .3s;
}
.logo-tile:hover .logo-tile__img{ opacity:1; }
/* Red Stakes ships a black-on-transparent mark — flip it for the dark theme */
.logo-tile__img--invert{ filter:invert(1) brightness(1.15); }

.logo-tile--main{
  gap:18px;
  padding:clamp(30px,3.6vw,50px) clamp(20px,2.6vw,36px);
  border-color:rgba(217,38,245,.3);
  background:
    radial-gradient(100% 130% at 50% 0%, rgba(168,12,240,.22), transparent 62%),
    rgba(255,255,255,.04);
}
.logo-tile--main .logo-tile__img{ max-width:340px; max-height:74px; opacity:1; }
.logo-tile--main span{ font-size:.78rem; letter-spacing:.2em; color:#cfc8ec; }

/* ---------- live swing ticker ---------- */
.ticker{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:clamp(22px,3vw,34px);
  padding:clamp(20px,2.4vw,28px) clamp(20px,3vw,36px);
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:
    radial-gradient(90% 200% at 50% 100%, rgba(217,38,245,.14), transparent 60%),
    rgba(255,255,255,.03);
  text-align:center;
}
.ticker p{
  margin:0; font-family:"Space Grotesk",sans-serif;
  font-size:clamp(1.05rem,2.2vw,1.55rem); font-weight:500;
  letter-spacing:-.01em; color:var(--text);
}
.ticker b{
  font-weight:600; font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
  background:var(--grad-soft); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  transition:filter .25s;
}
.ticker b.bump{ filter:brightness(1.5) drop-shadow(0 0 12px rgba(217,38,245,.55)); }
.ticker__dot{
  width:9px; height:9px; border-radius:50%; flex-shrink:0;
  background:#4ade80; box-shadow:0 0 0 4px rgba(74,222,128,.16);
  animation:pulse 2.4s infinite;
}

/* ---------- team photos ---------- */
.person__photo{
  width:118px; height:118px; margin:0 auto 18px;
  border-radius:50%; padding:2px; background:var(--grad);
  box-shadow:0 14px 34px -14px rgba(217,38,245,.55);
}
.person__photo img{
  width:100%; height:100%; border-radius:50%; display:block;
  object-fit:cover; object-position:center 22%;
}
.team--pair{ grid-template-columns:1fr 1fr; gap:20px; }
.team--pair .person{ padding:34px 24px 30px; }
.team--pair .person__photo{ width:132px; height:132px; margin-bottom:20px; }
.team--pair h3{ font-size:1.14rem; }

.person__links{ justify-content:center; margin-top:18px; }
.person__links a{ width:34px; height:34px; }
.person__links svg{ width:15px; height:15px; }

@media (max-width:980px){
  .client{ grid-template-columns:1fr; }
  .reviews{ grid-template-columns:1fr 1fr; }
  .logos{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .client__brand{ flex-direction:column; align-items:flex-start; text-align:left; }
  .reviews{ grid-template-columns:1fr; }
  .logos__side{ grid-template-columns:1fr; }
  .ticker{ flex-direction:column; gap:10px; }
}

/* ============================================================
   Odometer — each digit is a strip of 0-9 that rolls upward
   ============================================================ */
.odo{
  --h:1.06em;
  display:inline-flex; align-items:flex-end;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
  /* NOTE: a gradient via background-clip:text cannot paint the absolutely
     positioned digit strips, so the counter uses a solid brand colour. */
  color:#f0abfc;
  text-shadow:0 0 18px rgba(217,38,245,.4);
  transition:filter .3s, text-shadow .3s;
}
.odo.bump{ filter:brightness(1.25); text-shadow:0 0 26px rgba(217,38,245,.75); }
/* The ghost digit stays in flow: it sets the cell width AND gives the cell a
   normal text baseline, so the counter sits on the same line as the copy.
   Clipping happens in .odo__win instead — putting overflow:hidden on the cell
   itself would force its baseline to the bottom edge and ride the digits high. */
.odo__digit{
  position:relative; display:inline-block;
  line-height:var(--h);
}
.odo__ghost{ visibility:hidden; }
.odo__win{ position:absolute; inset:0; overflow:hidden; }
.odo__strip{
  position:absolute; left:0; top:0; width:100%;
  transform:translateY(calc(var(--h) * -1 * var(--i, 0)));
  transition:transform .62s cubic-bezier(.3,1.4,.4,1);
  will-change:transform;
}
.odo__strip.snap{ transition:none; }
.odo__strip i{
  display:block; height:var(--h); line-height:var(--h);
  font-style:normal; text-align:center;
}
.odo__sep{ display:inline-block; }

@media (max-width:980px){
  .showcase{ grid-template-columns:1fr; }
  .showcase__media{ aspect-ratio:16/9; }
  .showcase__copy{ padding:0 4px 6px; }
  .team--pair{ grid-template-columns:1fr 1fr; }
  .reviews{ grid-template-columns:1fr 1fr; }
  .logos{ grid-template-columns:1fr; }
  .logo-tile--main{ order:-1; }
}
@media (max-width:680px){
  .team--pair{ grid-template-columns:1fr; }
  .showcase__media{ aspect-ratio:4/3; }
  .rating{ width:100%; }
  .reviews{ grid-template-columns:1fr; }
  .ticker{ flex-direction:column; gap:10px; }
}

/* ============================================================
   Offer band — campaign copy in the site's own card language
   ============================================================ */
.offer{
  overflow:hidden; border-radius:var(--r-xl);
  border:1px solid rgba(217,38,245,.26);
  box-shadow:var(--shadow-lg);
  background:
    radial-gradient(110% 130% at 8% 0%, rgba(168,12,240,.3), transparent 55%),
    radial-gradient(90% 120% at 100% 100%, rgba(217,38,245,.24), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
}
.offer__head{
  padding:clamp(28px,3.6vw,50px) clamp(24px,3.4vw,48px) clamp(4px,1vw,10px);
  max-width:64ch;
}
.offer__head h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); max-width:24ch; margin-bottom:.44em; }
.offer__head p{ font-size:clamp(.98rem,1.3vw,1.1rem); max-width:52ch; color:#cfc8ec; }

.offer__terms{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  padding:clamp(22px,2.6vw,34px) clamp(24px,3.4vw,48px);
}
.offer__item{
  position:relative; overflow:hidden;
  padding:clamp(20px,2.2vw,26px);
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  transition:transform .35s var(--ease), border-color .35s;
}
.offer__item:hover{ transform:translateY(-5px); border-color:rgba(217,38,245,.42); }
.offer__item .icon{ width:44px; height:44px; border-radius:13px; margin-bottom:16px; }
.offer__item .icon svg{ width:21px; height:21px; }
.offer__item h3{ font-size:1.08rem; margin-bottom:.42em; letter-spacing:-.015em; }
.offer__item p{ font-size:.9rem; line-height:1.62; }

.offer__foot{
  display:flex; flex-wrap:wrap; gap:20px 28px; align-items:center;
  padding:clamp(22px,2.6vw,34px) clamp(24px,3.4vw,48px) clamp(26px,3.2vw,42px);
  border-top:1px solid var(--line);
}
.offer__foot .eyebrow{ margin-bottom:10px; }
.offer__foot h3{ font-size:clamp(1.25rem,2.2vw,1.75rem); margin:0; }
.offer__foot .btn{ margin-left:auto; }

@media (max-width:900px){
  .offer__terms{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .offer__foot{ flex-direction:column; align-items:flex-start; }
  .offer__foot .btn{ margin-left:0; width:100%; justify-content:center; }
  .team--pair{ grid-template-columns:1fr; }
  .team--pair .person__photo{ width:118px; height:118px; }
}

/* ---------- hero typewriter caret ---------- */
.type{ display:inline; }
.type .ch{ opacity:0; }
/* Zero-width host with the bar drawn outside it, so moving the caret between
   characters never nudges the text. */
.type__caret{
  display:inline-block; position:relative;
  width:0; height:.86em; vertical-align:-.06em;
  animation:caretBlink 1.05s steps(1) infinite;
}
.type__caret::before{
  content:""; position:absolute; left:.06em; top:0; bottom:0;
  width:.055em; border-radius:1px;
  background:linear-gradient(180deg,#c084fc,#f0abfc);
}
/* solid while typing, blinking only when it rests — as a real caret behaves */
.type.is-typing .type__caret{ animation:none; }
@keyframes caretBlink{ 50%{ opacity:0; } }