/* ==========================================================================
   Web Work Digital Solutions — one page
   Palette sampled directly from the WW logo: #0652E9 / #38B6FF
   ========================================================================== */

:root{
  --ink:      #04081a;
  --ink-2:    #070e28;
  --ink-3:    #0a1433;
  --paper:    #edf2ff;
  --dim:      #8b99c4;
  --blue:     #0652e9;
  --sky:      #38b6ff;

  --line:     rgba(120,165,255,.16);
  --line-2:   rgba(120,165,255,.30);
  --card:     rgba(120,165,255,.045);

  --r-xs:     8px;
  --r-sm:     10px;
  --r:        16px;
  --r-lg:     22px;

  --skew:     -11deg;              /* the lean of the logo's two cards */
  --shell:    1400px;
  --pad:      clamp(20px, 5vw, 56px);
  --ease:     cubic-bezier(.22,.9,.28,1);
  --ease-o:   cubic-bezier(.16,1,.3,1);

  --fd: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --fb: "Inter", "Segoe UI", system-ui, sans-serif;
  --fm: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
}

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

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

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font:400 clamp(15px,1.02vw,17px)/1.65 var(--fb);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

::selection{ background:var(--sky); color:var(--ink); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--sky); color:var(--ink); padding:12px 18px;
  font:500 14px/1 var(--fm); border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--sky); outline-offset:3px; border-radius:var(--r-sm); }

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

/* ── scroll progress ──────────────────────────────────────────────────── */

.prog{
  position:fixed; inset:0 0 auto; z-index:120; height:3px;
  pointer-events:none;
}
.prog span{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg,var(--blue),var(--sky));
  transform:scaleX(var(--p,0)); transform-origin:left;
}

/* ── shared type ──────────────────────────────────────────────────────── */

.tag{
  display:inline-flex; gap:.15em; align-items:center;
  margin:0 0 22px;
  font:500 11px/1 var(--fm);
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--sky);
}
.tag span{ color:var(--blue); filter:brightness(1.7); }

.h2{
  margin:0 0 20px;
  font:800 clamp(34px,5.2vw,68px)/1 var(--fd);
  letter-spacing:-.028em;
  font-variation-settings:"opsz" 60;
}

.h3{
  margin:0 0 14px;
  font:800 clamp(22px,2.4vw,30px)/1.1 var(--fd);
  letter-spacing:-.02em;
}

.lede{
  margin:0 0 18px; max-width:66ch;
  color:var(--dim); font-size:clamp(15px,1.15vw,18px); line-height:1.7;
}
.lede:last-child{ margin-bottom:0; }

/* word-by-word headline reveal (spans injected by script.js) */
.w{
  display:inline-block; overflow:hidden; vertical-align:bottom;
  padding-bottom:.14em; margin-bottom:-.14em;
}
.w em{
  display:inline-block; font-style:normal;
  transform:translateY(110%);
  transition:transform .9s var(--ease-o);
  transition-delay:calc(var(--i,0) * 45ms);
}
.h2.is-in .w em,.h1.is-in .w em{ transform:none; }

/* --bx/--by is the magnetic button offset; --gx/--gy is the cursor-glow
   point on a card. Keep them apart: custom properties inherit, so one
   shared pair let a card's glow coordinates fling its buttons off-screen.
   ────────────────────────────────────────────────────────────────────── */

/* ── buttons ──────────────────────────────────────────────────────────── */

.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:16px 32px; border:0; border-radius:var(--r-sm);
  background:var(--blue); color:#fff;
  font:600 14px/1 var(--fb); letter-spacing:.01em;
  text-decoration:none; cursor:pointer;
  overflow:hidden; isolation:isolate;
  transform:translate3d(var(--bx,0px),var(--by,0px),0);
  transition:transform .5s var(--ease-o), box-shadow .4s var(--ease), color .3s;
}
.btn > span{ position:relative; z-index:2; }
.btn::before{
  content:""; position:absolute; inset:-2px; z-index:1;
  background:var(--sky);
  transform:translateX(-125%) skewX(var(--skew)) scaleX(1.35);
  transition:transform .55s var(--ease-o);
}
.btn:hover,.btn:focus-visible{
  color:var(--ink);
  box-shadow:0 16px 40px -14px rgba(56,182,255,.75);
}
.btn:hover::before,.btn:focus-visible::before{ transform:translateX(0) skewX(var(--skew)) scaleX(1.35); }
.btn:active{ transform:translate(var(--bx,0px),calc(var(--by,0px) + 1px)) scale(.985); }

.btn--ghost{
  background:transparent; color:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.btn--ghost:hover,.btn--ghost:focus-visible{
  color:var(--ink);
  box-shadow:inset 0 0 0 1px transparent, 0 16px 40px -16px rgba(56,182,255,.6);
}

.btn--sm{ padding:12px 22px; font-size:13px; }
.btn--full{ width:100%; }

/* ── header ───────────────────────────────────────────────────────────── */

.hdr{
  position:fixed; inset:3px 0 auto; z-index:100;
  transition:background .45s var(--ease), box-shadow .45s var(--ease), transform .5s var(--ease-o);
}
.hdr.is-stuck{
  background:rgba(4,8,26,.74);
  backdrop-filter:blur(20px) saturate(170%);
  box-shadow:0 1px 0 var(--line);
}
.hdr.is-hidden{ transform:translateY(-115%); }

.hdr__in{
  display:flex; align-items:center; gap:clamp(16px,3vw,44px);
  padding-block:14px;
  transition:padding .45s var(--ease);
}
.hdr.is-stuck .hdr__in{ padding-block:10px; }

.brand{ flex:none; display:block; }
.brand img{
  width:auto; height:60px;
  transition:height .45s var(--ease), transform .45s var(--ease-o);
}
.hdr.is-stuck .brand img{ height:50px; }
.brand:hover img{ transform:scale(1.04); }

.nav{ display:flex; gap:clamp(14px,2vw,30px); margin-left:auto; }
.nav a{
  position:relative; padding:6px 0;
  font-size:15px; font-weight:500; text-decoration:none;
  color:rgba(237,242,255,.80);   /* brighter than body copy, still under the CTA */
  transition:color .25s;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--sky);
  transform:scaleX(0) skewX(var(--skew)); transform-origin:left;
  transition:transform .4s var(--ease-o);
}
.nav a:hover,
.nav a[aria-current="page"],
.nav__item.is-here > a{ color:var(--paper); }
.nav a:hover::after,
.nav a[aria-current="page"]::after{ transform:scaleX(1) skewX(var(--skew)); }

/* dropdown under "What we offer" */
.nav__item{ position:relative; display:flex; align-items:center; gap:4px; }

.nav__caret{
  display:grid; place-items:center;
  width:20px; height:20px; padding:0;
  background:none; border:0; cursor:pointer; color:rgba(237,242,255,.72);
  transition:color .25s, transform .4s var(--ease-o);
}
.nav__caret span{
  width:6px; height:6px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}
.nav__item:hover .nav__caret,
.nav__item.is-here .nav__caret{ color:var(--paper); }
.nav__item.is-open .nav__caret{ transform:rotate(180deg); }

/* invisible bridge, so the menu survives the cursor crossing the gap */
.nav__item::after{ content:""; position:absolute; top:100%; left:0; right:0; height:18px; }

.nav__sub{
  position:absolute; top:calc(100% + 16px); left:-14px; z-index:5;
  min-width:212px; margin:0; padding:8px; list-style:none;
  background:rgba(4,8,26,.97); backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--line); border-radius:var(--r-sm);
  box-shadow:0 30px 60px -32px rgba(2,5,16,.95);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .3s var(--ease), transform .4s var(--ease-o), visibility .3s;
}
.nav__item:hover .nav__sub,
.nav__item:focus-within .nav__sub,
.nav__item.is-open .nav__sub{ opacity:1; visibility:visible; transform:none; }

.nav__sub a{
  display:block; padding:10px 12px; border-radius:6px;
  font-size:14.5px; color:rgba(237,242,255,.76);
}
.nav__sub a::after{ display:none; }
.nav__sub a:hover,
.nav__sub a[aria-current="page"]{ background:rgba(120,165,255,.10); color:var(--paper); }

.burger{
  display:none; width:46px; height:46px; padding:0;
  background:none; border:1px solid var(--line-2); border-radius:var(--r-sm);
  cursor:pointer;
}
.burger span{
  display:block; width:18px; height:2px; margin:4px auto; background:var(--paper);
  transition:transform .35s var(--ease-o);
}
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3px) rotate(-45deg); }

/* ── hero ─────────────────────────────────────────────────────────────── */

.hero{
  position:relative;
  padding-top:clamp(150px,17vw,220px);
  overflow:hidden;
}

/* ── layered stage background (home hero + page heroes) ────────────────── */

.bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.bg > span{ position:absolute; inset:0; display:block; }

.bg__aurora{
  inset:-40% -18% auto; height:150%;
  background:
    radial-gradient(42% 44% at 50% 36%, rgba(6,82,233,.62), transparent 70%),
    radial-gradient(30% 32% at 82% 12%, rgba(56,182,255,.32), transparent 72%),
    radial-gradient(34% 38% at 12% 56%, rgba(6,82,233,.40), transparent 74%),
    radial-gradient(26% 30% at 68% 82%, rgba(56,182,255,.20), transparent 72%);
  filter:saturate(125%);
  will-change:transform;
  animation:drift 30s ease-in-out infinite alternate;
}
@keyframes drift{
  from{ transform:translate3d(-4%,-1%,0) scale(1); }
  to  { transform:translate3d(5%,4%,0) scale(1.16); }
}

/* the logo's chevron, tiled as ambient texture */
.bg__mesh{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='78'%3E%3Cpath d='M28 24 L44 39 L28 54' fill='none' stroke='%2378a5ff' stroke-opacity='.16' stroke-width='2.5' stroke-linecap='square'/%3E%3C/svg%3E");
  background-size:78px 78px;
  opacity:.9;
  mask-image:radial-gradient(80% 70% at 50% 32%, #000 0%, rgba(0,0,0,.55) 45%, transparent 82%);
  transform:translate3d(calc(var(--px,0) * -20px), calc(var(--py,0) * -20px), 0);
  transition:transform .7s var(--ease-o);
}

/* a light that follows the cursor */
.bg__spot{
  background:radial-gradient(420px circle at var(--sx,50%) var(--sy,32%), rgba(56,182,255,.20), transparent 62%);
  opacity:0; transition:opacity .5s var(--ease);
}
[data-stage]:hover .bg__spot{ opacity:1; }

/* one beam of light sweeping across on load */
.bg__beam{
  inset:0 auto 0 -45%; width:45%;
  background:linear-gradient(100deg, transparent, rgba(56,182,255,.16), transparent);
  transform:skewX(var(--skew));
  animation:beam 2.8s var(--ease-o) .5s both;
}
@keyframes beam{ to{ left:135%; } }

/* fine grain, so the gradients never band */
.bg__grain{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.06; mix-blend-mode:overlay;
}

/* melt into the page below */
.bg::after{
  content:""; position:absolute; inset:auto 0 0; height:38%;
  background:linear-gradient(transparent, var(--ink));
}

.hero__in{ position:relative; z-index:2; text-align:center; }

/* the signature: the logo's brackets, scaled to the page, clamping the line */
.clamp{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(6px,1.6vw,26px);
}
.clamp__b{
  flex:none;
  font:800 clamp(56px,13vw,190px)/.8 var(--fd);
  opacity:0;
  animation:clampIn 1s var(--ease-o) .15s forwards;
  will-change:transform;
}
.clamp__b--l{
  color:var(--blue); filter:brightness(1.45); --from:-90px;
  transform:translate3d(calc(var(--px,0) * 16px), calc(var(--py,0) * 12px), 0) skewX(var(--skew));
}
.clamp__b--r{
  color:var(--sky); --from:90px; animation-delay:.3s;
  transform:translate3d(calc(var(--px,0) * -16px), calc(var(--py,0) * 12px), 0) skewX(var(--skew));
}
.clamp.is-ready .clamp__b{ transition:transform .6s var(--ease-o); }
@keyframes clampIn{
  from{ opacity:0; transform:translateX(var(--from)) skewX(var(--skew)) scale(.82); }
  to  { opacity:1; transform:translateX(0) skewX(var(--skew)) scale(1); }
}

.hero__h{
  margin:0;
  font:800 clamp(38px,8.4vw,124px)/.9 var(--fd);
  letter-spacing:-.04em;
  font-variation-settings:"opsz" 96;
}
.hero__h .ln{ display:block; overflow:hidden; padding-bottom:.05em; }
.hero__h i{
  display:inline-block; font-style:normal;
  transform:translateY(110%);
  animation:wordUp .95s var(--ease-o) forwards;
}
.hero__h .ln:first-child i:nth-child(1){ animation-delay:.32s; }
.hero__h .ln:first-child i:nth-child(2){ animation-delay:.40s; }
.hero__h .ln:last-child  i:nth-child(1){ animation-delay:.48s; }
.hero__h .ln:last-child  i:nth-child(2){ animation-delay:.56s; color:var(--sky); }
@keyframes wordUp{ to{ transform:translateY(0); } }

.hero__sub{
  margin:clamp(20px,2.6vw,32px) auto 0;
  font:400 clamp(17px,1.7vw,24px)/1.4 var(--fd);
  color:var(--dim);
}

.hero__cta{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  margin-top:clamp(28px,3.4vw,42px);
}

/* ── hero ticker ──────────────────────────────────────────────────────── */

.ticker{
  position:relative; z-index:2;
  margin-top:clamp(48px,6vw,80px);
  padding-block:16px;
  border-top:1px solid var(--line);
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.ticker__t{
  display:flex; align-items:center; gap:22px; width:max-content;
  animation:slide 40s linear infinite;
  font:500 12px/1 var(--fm); letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim);
}
.ticker__t b{ width:6px; height:6px; background:var(--sky); transform:skewX(var(--skew)); flex:none; }
.ticker__t span{ flex:none; white-space:nowrap; }

/* ── client rail ──────────────────────────────────────────────────────── */

.proof{
  position:relative; z-index:2;
  padding-block:24px 22px;
  border-block:1px solid var(--line);
  background:rgba(4,8,26,.5);
}
.proof__lbl{
  margin:0 0 12px; text-align:center;
  font:500 11px/1 var(--fm); letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim);
}

.rail{
  overflow:hidden;
  padding-block:18px;          /* headroom so a lifted chip is not clipped */
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.rail__t{
  display:flex; width:max-content; gap:18px;
  animation:slide 46s linear infinite;
}
.rail:hover .rail__t,.rail:focus-within .rail__t{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(calc(-50% - 9px)); } }

.chip{
  flex:none;
  display:flex; align-items:center; justify-content:center;
  width:210px; height:112px; padding:12px 16px;
  background:#fff; border-radius:var(--r-sm);
  filter:grayscale(1); opacity:.6;
  transition:opacity .35s, filter .35s, transform .45s var(--ease-o);
}
.chip img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain;
}
.chip:hover,.chip:focus-visible{ opacity:1; filter:none; transform:translateY(-4px) skewX(var(--skew)); }

/* ── generic section ──────────────────────────────────────────────────── */

.sec{ position:relative; padding-block:clamp(76px,9.5vw,150px); }
.sec--alt{ background:var(--ink-2); border-block:1px solid var(--line); }
.sec__head{ max-width:940px; margin-bottom:clamp(44px,5.5vw,74px); }

/* ── what we do ───────────────────────────────────────────────────────── */

.pillars{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; margin:0; padding:0; list-style:none;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}
.pillar{
  position:relative; padding:clamp(28px,3.2vw,42px);
  background:var(--ink);
  transition:background .45s var(--ease);
}
.pillar::before{
  content:""; position:absolute; inset:0; opacity:0;
  background:radial-gradient(220px circle at var(--gx,50%) var(--gy,50%), rgba(56,182,255,.10), transparent 70%);
  transition:opacity .4s;
}
.pillar::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,var(--blue),var(--sky));
  transform:scaleX(0) skewX(var(--skew)); transform-origin:left;
  transition:transform .55s var(--ease-o);
}
.pillar:hover{ background:var(--ink-3); }
.pillar:hover::before{ opacity:1; }
.pillar:hover::after{ transform:scaleX(1) skewX(var(--skew)); }
.pillar > *{ position:relative; z-index:1; }

.pillar__n{
  display:block; margin-bottom:22px;
  font:500 11px/1 var(--fm); letter-spacing:.2em; color:var(--sky);
}
.pillar h3{
  margin:0 0 12px;
  font:600 clamp(18px,1.5vw,21px)/1.2 var(--fd); letter-spacing:-.01em;
}
.pillar p{ margin:0; color:var(--dim); font-size:15px; }

/* ── capabilities index ───────────────────────────────────────────────── */

.cap{
  display:grid; grid-template-columns:1fr 1.05fr;
  gap:clamp(28px,4vw,64px); align-items:start;
}

.cap__list{ margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.cap__list li{ border-bottom:1px solid var(--line); }

.cap__b{
  position:relative; width:100%;
  display:flex; align-items:center; gap:18px;
  padding:clamp(18px,2vw,26px) 4px;
  background:none; border:0; cursor:pointer; text-align:left;
  color:var(--dim);
  transition:color .3s, padding-left .45s var(--ease-o);
}
.cap__b::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--blue),var(--sky));
  transform:scaleY(0) skewY(calc(var(--skew) / 3)); transform-origin:top;
  transition:transform .45s var(--ease-o);
}
.cap__b:hover,.cap__b:focus-visible{ color:var(--paper); }
.cap__b.is-on{ color:var(--paper); padding-left:22px; }
.cap__b.is-on::before{ transform:scaleY(1) skewY(calc(var(--skew) / 3)); }

.cap__n{
  font:500 11px/1 var(--fm); letter-spacing:.14em; color:var(--sky);
  flex:none; padding-top:.25em;
}
.cap__t{
  flex:1;
  font:600 clamp(17px,1.7vw,23px)/1.25 var(--fd); letter-spacing:-.015em;
}
.cap__x{
  flex:none; width:22px; height:2px; background:currentColor;
  opacity:0; transform:translateX(-10px) skewX(var(--skew));
  transition:opacity .35s, transform .45s var(--ease-o);
}
.cap__b.is-on .cap__x{ opacity:1; transform:translateX(0) skewX(var(--skew)); }

.cap__panel{
  position:sticky; top:120px;
  display:grid; align-content:center;
  min-height:min(56vh,440px);
  padding:clamp(28px,3.4vw,46px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(6,82,233,.16),transparent 60%),var(--ink);
  overflow:hidden;
}
.cap__p{
  grid-area:1/1;
  opacity:0; visibility:hidden; transform:translateY(18px);
  transition:opacity .45s var(--ease), transform .55s var(--ease-o), visibility .45s;
}
.cap__p.is-on{ opacity:1; visibility:visible; transform:none; }

.cap__big{
  position:absolute; bottom:-.30em; right:.04em; z-index:0;
  font:800 clamp(120px,15vw,220px)/1 var(--fd);
  color:rgba(120,165,255,.055);
  pointer-events:none;
}
.cap__p h3{
  position:relative; margin:0 0 16px;
  font:800 clamp(24px,2.8vw,38px)/1.05 var(--fd); letter-spacing:-.03em;
}
.cap__p p{ position:relative; margin:0 0 26px; color:var(--dim); font-size:clamp(15px,1.1vw,17px); }

.cap__tags{
  position:relative; display:flex; flex-wrap:wrap; gap:8px;
  margin:0; padding:0; list-style:none;
}
.cap__tags li{
  padding:8px 14px;
  border:1px solid var(--line-2); border-radius:999px;
  font:500 11px/1 var(--fm); letter-spacing:.1em; text-transform:uppercase;
  color:var(--sky);
}

/* ── systems ──────────────────────────────────────────────────────────── */

.sec--sys{
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(56,182,255,.14), transparent 65%),
    radial-gradient(50% 50% at 0% 60%, rgba(6,82,233,.20), transparent 70%),
    var(--ink);
}
.sys__top{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px);
  align-items:start; margin-bottom:clamp(44px,5vw,70px);
}
.sys__intro .btn{ margin-top:12px; }

.mods{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; margin:0 0 clamp(40px,5vw,64px); padding:0; list-style:none;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}
.mod{
  position:relative; padding:clamp(24px,2.6vw,34px);
  background:var(--ink);
  transition:background .4s var(--ease);
}
.mod::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--sky);
  transform:scaleX(0) skewX(var(--skew)); transform-origin:left;
  transition:transform .5s var(--ease-o);
}
.mod:hover{ background:var(--ink-3); }
.mod:hover::after{ transform:scaleX(1) skewX(var(--skew)); }
.mod h3{
  margin:0 0 10px;
  font:600 clamp(17px,1.4vw,20px)/1.25 var(--fd); letter-spacing:-.01em;
}
.mod p{ margin:0; color:var(--dim); font-size:14.5px; }

.shots{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.shot{
  position:relative; margin:0;
  border:1px solid var(--line); border-radius:var(--r); background:var(--ink-2);
  overflow:hidden;
  transition:transform .5s var(--ease-o), border-color .4s;
}
.shot:hover{ transform:translateY(-5px); border-color:var(--line-2); }
.shot img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top center; }
.shot figcaption{
  padding:14px 18px; border-top:1px solid var(--line);
  font:500 11px/1 var(--fm); letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
}
.shot.is-empty img{ display:none; }
.shot.is-empty::before{
  content:"Screenshot coming";
  display:grid; place-items:center; aspect-ratio:16/10;
  background:repeating-linear-gradient(var(--skew), transparent 0 12px, rgba(120,165,255,.05) 12px 24px);
  font:500 11px/1 var(--fm); letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
}

/* ── system screen tour ───────────────────────────────────────────────── */

.screens__tabs{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:clamp(18px,2vw,26px);
}
.screens__tab{
  padding:11px 17px; cursor:pointer;
  border:1px solid var(--line); border-radius:999px; background:none;
  font:500 11px/1 var(--fm); letter-spacing:.1em; text-transform:uppercase;
  color:rgba(237,242,255,.70);
  transition:color .3s, background .35s var(--ease), border-color .3s;
}
.screens__tab:hover{ color:var(--paper); border-color:var(--line-2); }
.screens__tab.is-on{ background:var(--blue); border-color:transparent; color:#fff; }

.screens__stage{
  display:grid;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--ink-2);
}
.screens__f{
  grid-area:1/1; margin:0;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .45s var(--ease), transform .55s var(--ease-o), visibility .45s;
}
.screens__f.is-on{ opacity:1; visibility:visible; transform:none; }
/* natural height, never cropped — the point of the tour is seeing whole screens */
.screens__f img{ display:block; width:100%; height:auto; }
.screens__f figcaption{
  margin-top:auto; padding:clamp(16px,1.8vw,22px);
  border-top:1px solid var(--line);
  color:var(--dim); font-size:15px;
}
.screens__f figcaption b{ color:var(--paper); font-weight:600; }

/* ── services ─────────────────────────────────────────────────────────── */

.svc{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}
.svc__i{
  position:relative; padding:clamp(28px,3vw,40px);
  background:var(--ink);
  transition:background .45s var(--ease);
}
.svc__i::before{
  content:""; position:absolute; top:0; left:0; width:0; height:100%;
  background:linear-gradient(180deg,rgba(6,82,233,.26),transparent 70%);
  transition:width .55s var(--ease-o);
}
.svc__i:hover{ background:var(--ink-3); }
.svc__i:hover::before{ width:100%; }
.svc__i > *{ position:relative; }
.svc__i h3{
  margin:0 0 12px;
  font:600 clamp(18px,1.5vw,21px)/1.25 var(--fd); letter-spacing:-.01em;
}
.svc__i p{ margin:0; color:var(--dim); font-size:15px; }

/* ── currency switch ──────────────────────────────────────────────────── */

.cur{
  position:relative; display:inline-flex; padding:5px;
  margin-bottom:clamp(30px,3.6vw,46px);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--ink);
}
.cur__slide{
  position:absolute; top:5px; left:5px; bottom:5px; width:calc(50% - 5px);
  background:var(--blue); border-radius:6px;
  transform:skewX(var(--skew));
  transition:transform .5s var(--ease-o);
}
.cur[data-on="za"] .cur__slide{ transform:translateX(100%) skewX(var(--skew)); }

.cur__b{
  position:relative; z-index:1;
  min-width:150px; padding:12px 18px;
  background:none; border:0; cursor:pointer;
  font:600 13px/1 var(--fb); color:var(--dim);
  transition:color .35s;
}
.cur__b.is-on{ color:#fff; }

/* ── plans ────────────────────────────────────────────────────────────── */

.plans{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:20px; align-items:stretch;
  perspective:1200px;
}

.plan{
  position:relative; display:flex; flex-direction:column;
  padding:clamp(28px,3vw,38px);
  border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(180deg,var(--card),transparent);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--ty,0px),0);
  transition:border-color .4s var(--ease), transform .6s var(--ease-o), box-shadow .5s var(--ease);
}
.plan::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:0; pointer-events:none;
  background:radial-gradient(320px circle at var(--gx,50%) var(--gy,50%), rgba(56,182,255,.12), transparent 70%);
  transition:opacity .4s;
}
.plan:hover{ border-color:var(--line-2); }
.plan:hover::before{ opacity:1; }
.plan > *{ position:relative; z-index:1; }

.plan--hero{
  padding-top:calc(clamp(28px,3vw,38px) + 34px);   /* clears the badge at every width */
  border-color:transparent;
  background:
    linear-gradient(180deg,rgba(6,82,233,.22),rgba(4,8,26,0) 62%),
    var(--ink-3);
  box-shadow:0 0 0 1px var(--blue), 0 40px 80px -50px rgba(56,182,255,.9);
}

.plan__flag{
  position:absolute; top:14px; right:14px; z-index:2;
  padding:8px 16px; border-radius:var(--r-xs);
  background:var(--sky); color:var(--ink);
  font:500 10px/1 var(--fm); letter-spacing:.16em; text-transform:uppercase;
  transform:skewX(var(--skew));
}

.plan__n{
  margin:0 0 12px;
  font:600 clamp(19px,1.6vw,22px)/1.2 var(--fd); letter-spacing:-.01em;
}
.plan__d{ margin:0 0 26px; color:var(--dim); font-size:14.5px; }

.plan__p{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:8px;
  margin:0 0 26px; padding-bottom:26px;
  border-bottom:1px solid var(--line);
}
.plan__p .amt{
  font:800 clamp(40px,4.6vw,58px)/.9 var(--fd);
  letter-spacing:-.045em;
  font-variation-settings:"opsz" 96;
  transition:opacity .24s ease, transform .24s var(--ease);
}
.plan__p .was{
  color:var(--dim); opacity:.65;
  font:400 18px/1 var(--fd); text-decoration-thickness:1.5px;
  transition:opacity .24s ease;
}
.plan__p .once{
  font:500 10px/1 var(--fm); letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim);
}
.plans.is-swap .amt,
.plans.is-swap .was{ opacity:0; transform:translateY(-10px); }

.plan__l{
  margin:0 0 24px; padding:0; list-style:none;
  display:grid; gap:11px;
}
.plan__l li{
  position:relative; padding-left:24px;
  font-size:14.5px; color:var(--paper);
}
.plan__l li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:9px; height:2px; background:var(--sky);
  transform:skewX(var(--skew));
}

.plan__m{
  margin:0 0 22px; padding-top:20px; margin-top:auto;
  border-top:1px solid var(--line);
  font:500 12px/1.5 var(--fm); letter-spacing:.04em; color:var(--dim);
}
.plan__m b{ color:var(--paper); font-weight:500; }

.plans__foot{
  margin:clamp(28px,3vw,40px) 0 0; max-width:70ch;
  color:var(--dim); font-size:15px;
}
.plans__foot a{ color:var(--sky); text-decoration:none; border-bottom:1px solid var(--line-2); }
.plans__foot a:hover{ border-bottom-color:var(--sky); }

/* ── pay solutions ────────────────────────────────────────────────────── */

.sec--pay{
  background:
    radial-gradient(70% 55% at 82% 0%, rgba(6,82,233,.30), transparent 68%),
    var(--ink);
}

.pay__top{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,5vw,72px);
  align-items:end;
  margin-bottom:clamp(48px,5.5vw,80px);
}
.pay__note p{ margin:0 0 16px; color:var(--dim); }
.pay__note .btn{ margin-top:8px; }

.pay__say{
  display:flex; flex-wrap:wrap; gap:.5em;
  margin:28px 0 0;
  font:800 clamp(26px,3.4vw,44px)/1 var(--fd); letter-spacing:-.03em;
}
.pay__say b:nth-child(1){ color:var(--paper); }
.pay__say b:nth-child(2){ color:var(--sky); }
.pay__say b:nth-child(3){ color:var(--blue); filter:brightness(1.55); }

.feat{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
  margin-bottom:clamp(48px,5.5vw,80px);
}
.feat__i{
  padding:clamp(22px,2.4vw,30px);
  background:var(--ink);
  transition:background .35s var(--ease);
}
.feat__i:hover{ background:var(--ink-3); }
.feat__i h3{
  margin:0 0 8px;
  font:600 16px/1.25 var(--fd); letter-spacing:-.01em; color:var(--sky);
}
.feat__i p{ margin:0; color:var(--dim); font-size:14.5px; }

.pay__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}
.build,.where{ padding:clamp(28px,3.2vw,44px); background:var(--ink); }
.build > p,.where > p{ margin:0 0 26px; color:var(--dim); font-size:15px; }

.ticks{ margin:0; padding:0; list-style:none; display:grid; gap:13px; }
.ticks li{ position:relative; padding-left:28px; font-size:15px; }
.ticks li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:12px; height:7px;
  border-left:2px solid var(--sky); border-bottom:2px solid var(--sky);
  transform:rotate(-45deg);
}

.cases{ margin:0; display:grid; gap:1px; background:var(--line); border-radius:var(--r-sm); overflow:hidden; }
.cases > div{
  padding:18px 0 18px 20px; background:var(--ink);
  border-left:2px solid var(--blue);
  transition:border-color .35s, padding-left .4s var(--ease-o);
}
.cases > div:hover{ border-left-color:var(--sky); padding-left:26px; }
.cases dt{ font:600 16px/1.3 var(--fd); margin-bottom:4px; }
.cases dd{ margin:0; color:var(--dim); font-size:14.5px; }

/* ── grow ─────────────────────────────────────────────────────────────── */

.sec--grow{ background:var(--ink-2); border-block:1px solid var(--line); }
.grow{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(30px,5vw,72px); align-items:start; }
.grow__c p{ margin:0 0 20px; color:var(--dim); font-size:clamp(15px,1.15vw,17px); }
.grow__c p:last-child{ margin-bottom:0; }

/* ── contact ──────────────────────────────────────────────────────────── */

.sec--contact{
  background:
    radial-gradient(58% 70% at 12% 100%, rgba(6,82,233,.30), transparent 70%),
    var(--ink);
}
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:start; }
.contact__soc{ margin:28px 0 0; color:var(--dim); font-size:15px; }
.contact__soc a{ color:var(--sky); text-decoration:none; border-bottom:1px solid var(--line-2); }
.contact__soc a:hover{ border-bottom-color:var(--sky); }

.form{
  display:grid; gap:16px;
  padding:clamp(24px,3vw,38px);
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--ink-2);
}
.row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.fld{ display:grid; gap:8px; }
.fld > span{
  font:500 11px/1 var(--fm); letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim);
}
.fld input,.fld select,.fld textarea{
  width:100%; padding:14px;
  background:var(--ink); color:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-sm);
  font:400 15px/1.4 var(--fb);
  transition:border-color .3s, background .3s, box-shadow .3s;
}
.fld textarea{ resize:vertical; min-height:110px; }
.fld input:focus,.fld select:focus,.fld textarea:focus{
  border-color:var(--sky); background:var(--ink-3); outline:none;
  box-shadow:0 0 0 3px rgba(56,182,255,.14);
}
.fld input:user-invalid,.fld select:user-invalid{ border-color:#ff6b6b; }
.fld select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--sky) 50%),linear-gradient(135deg,var(--sky) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat;
}
.fld select option{ background:var(--ink-2); }

.form .btn{ margin-top:6px; }
.form__note{ margin:0; text-align:center; font:500 12px/1.5 var(--fm); color:var(--dim); }
.form__note.is-ok{ color:var(--sky); }
.form__note.is-bad{ color:#ff8b8b; }

/* ── footer ───────────────────────────────────────────────────────────── */

.ftr{ border-top:1px solid var(--line); background:var(--ink); }
.ftr__in{
  display:grid; grid-template-columns:1fr 1fr; gap:32px;
  align-items:start; padding-block:clamp(44px,5vw,64px);
}
.ftr__brand .brand img{ height:76px; }
.ftr__brand p{
  margin:20px 0 0; max-width:34ch;
  color:var(--dim); font-size:15px;
}
.ftr__nav{
  display:grid; grid-template-columns:repeat(2,max-content);
  gap:12px 48px; justify-content:end; align-content:start;
}
.ftr__nav a{
  position:relative; font-size:15px; color:var(--dim); text-decoration:none;
  transition:color .25s, padding-left .35s var(--ease-o);
}
.ftr__nav a:hover{ color:var(--sky); padding-left:8px; }

.ftr__base{
  display:flex; flex-wrap:wrap; gap:12px 24px;
  align-items:center; justify-content:space-between;
  padding-block:22px; border-top:1px solid var(--line);
}
.ftr__base p{ margin:0; font:500 12px/1 var(--fm); color:var(--dim); }
.ftr__soc{ display:flex; gap:20px; }
.ftr__soc a{ color:var(--dim); text-decoration:none; transition:color .25s; }
.ftr__soc a:hover{ color:var(--sky); }

/* ── scroll reveal ────────────────────────────────────────────────────── */

/* Uses the standalone `translate` property, not `transform`, so revealing an
   element never cancels its own transform (card tilt, hover lift, magnet). */
.reveal{
  opacity:0; translate:0 26px;
  transition:opacity .8s var(--ease-o), translate .8s var(--ease-o);
}
.reveal.is-in{ opacity:1; translate:none; }
.h2.reveal,.h1.reveal{ opacity:1; translate:none; }   /* words carry these */


/* ── page hero (inner pages) ──────────────────────────────────────────── */

.phero{
  position:relative; overflow:hidden;
  padding:clamp(148px,15vw,208px) 0 clamp(56px,7vw,92px);
  border-bottom:1px solid var(--line);
}
.phero__in{ position:relative; z-index:2; }   /* full shell width, so hero text lines up with the content below */

.h1{
  margin:0 0 22px;
  font:800 clamp(38px,6.4vw,96px)/.96 var(--fd);
  letter-spacing:-.035em;
  font-variation-settings:"opsz" 96;
}
.phero .lede{ font-size:clamp(16px,1.3vw,20px); max-width:72ch; }

/* ── home teaser cards ────────────────────────────────────────────────── */

.teasers{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}
.teaser{
  position:relative; display:flex; flex-direction:column;
  padding:clamp(26px,3vw,38px);
  background:var(--ink-2); text-decoration:none;
  transition:background .45s var(--ease);
}
.teaser::before{
  content:""; position:absolute; inset:0; opacity:0;
  background:linear-gradient(180deg,rgba(6,82,233,.24),transparent 70%);
  transition:opacity .45s var(--ease);
}
.teaser:hover,.teaser:focus-visible{ background:var(--ink-3); }
.teaser:hover::before{ opacity:1; }
.teaser > *{ position:relative; z-index:1; }

.teaser__n{
  display:block; margin-bottom:20px;
  font:500 11px/1 var(--fm); letter-spacing:.2em; color:var(--sky);
}
.teaser h3{
  margin:0 0 12px;
  font:600 clamp(18px,1.5vw,21px)/1.25 var(--fd); letter-spacing:-.01em;
}
.teaser p{ margin:0 0 26px; color:var(--dim); font-size:15px; }
.teaser__x{
  display:block; width:26px; height:2px; margin-top:auto; background:var(--sky);
  transform:skewX(var(--skew));
  transition:width .5s var(--ease-o);
}
.teaser:hover .teaser__x,.teaser:focus-visible .teaser__x{ width:52px; }

/* ── work / case cards ────────────────────────────────────────────────── */

.sec__head--row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; max-width:none;
}
.sec__head--row .h2{ margin-bottom:0; }

.work{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.4vw,30px); }
.work--3{ grid-template-columns:repeat(3,1fr); }

.case{
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(180deg,var(--card),transparent);
  overflow:hidden;
  transition:border-color .45s var(--ease), transform .55s var(--ease-o), box-shadow .55s var(--ease);
}
.case:hover{
  border-color:var(--line-2);
  transform:translateY(-6px);
  box-shadow:0 40px 70px -46px rgba(56,182,255,.8);
}

/* the screenshot pair: desktop behind, phone standing on the bottom edge */
.case__media{
  position:relative; display:block;
  aspect-ratio:1600/729;      /* the screenshots' own ratio, so nothing is cropped */
  overflow:hidden;
  background:var(--ink-3); border-bottom:1px solid var(--line);
}
.case__desk{
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
  transition:transform .9s var(--ease-o);
}
.case:hover .case__desk{ transform:scale(1.04); }

.case__phone{
  position:absolute; right:4.5%; bottom:0; width:15%; height:auto;
  border-radius:9px 9px 0 0;
  box-shadow:0 22px 46px -14px rgba(2,5,16,.85);
  outline:1px solid rgba(237,242,255,.22); outline-offset:-1px;
  transition:transform .6s var(--ease-o);
}
.case:hover .case__phone{ transform:translateY(-8px); }

.case__body{ display:flex; flex-direction:column; flex:1; padding:clamp(22px,2.4vw,30px); }
.case__n{
  display:block; margin-bottom:14px;
  font:500 11px/1 var(--fm); letter-spacing:.2em; color:var(--sky);
}
.case__body h3{
  margin:0 0 10px;
  font:600 clamp(18px,1.6vw,22px)/1.2 var(--fd); letter-spacing:-.015em;
}
.case__body p{ margin:0 0 20px; color:var(--dim); font-size:14.5px; }

.case__tags{
  display:flex; flex-wrap:wrap; gap:7px;
  margin:0 0 20px; padding:0; list-style:none;
}
.case__tags li{
  padding:6px 12px; border:1px solid var(--line); border-radius:999px;
  font:500 10px/1 var(--fm); letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim);
}

.case__link{
  margin-top:auto; align-self:flex-start;
  font:500 12px/1 var(--fm); letter-spacing:.06em;
  color:var(--sky); text-decoration:none;
  border-bottom:1px solid var(--line-2); padding-bottom:4px;
  transition:border-color .3s;
}
.case__link:hover{ border-bottom-color:var(--sky); }

/* ── blog index ───────────────────────────────────────────────────────── */

.posts{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.2vw,26px); }

.post{
  border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(180deg,var(--card),transparent);
  transition:border-color .45s var(--ease), transform .55s var(--ease-o);
}
.post:hover{ border-color:var(--line-2); transform:translateY(-5px); }

.post__link{
  display:flex; flex-direction:column; height:100%;
  padding:clamp(26px,3vw,38px); text-decoration:none;
}

.post__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
  margin:0 0 18px;
  font:500 11px/1 var(--fm); letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim);
}
.post__cat{ color:var(--sky); }
.post__meta > * + *{ position:relative; padding-left:16px; }
.post__meta > * + *::before{
  content:""; position:absolute; left:0; top:50%; width:1px; height:11px;
  margin-top:-5px; background:var(--line-2); transform:skewX(var(--skew));
}

.post__t{
  margin:0 0 14px;
  font:600 clamp(21px,2vw,27px)/1.2 var(--fd); letter-spacing:-.02em;
  color:var(--paper);
}
.post__x{ margin:0 0 26px; color:var(--dim); font-size:15px; }
.post__go{
  margin-top:auto;
  font:500 11px/1 var(--fm); letter-spacing:.14em; text-transform:uppercase;
  color:var(--sky);
}
.post__go::after{
  content:""; display:inline-block; width:22px; height:2px; margin-left:10px;
  vertical-align:middle; background:currentColor;
  transform:skewX(var(--skew));
  transition:width .45s var(--ease-o);
}
.post:hover .post__go::after{ width:40px; }

/* ── article ──────────────────────────────────────────────────────────── */

.phero--post .post__meta{ margin:22px 0 0; }

.crumbs{
  margin-bottom:20px;
  font:500 11px/1 var(--fm); letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim);
}
.crumbs a{ color:var(--dim); text-decoration:none; }
.crumbs a:hover{ color:var(--sky); }
.crumbs span{ margin:0 8px; opacity:.5; }

.prose{ max-width:70ch; font-size:clamp(16px,1.15vw,17.5px); line-height:1.78; }
.prose > * + *{ margin-top:1.15em; }
.prose p{ margin:0; color:#cdd6ef; }
.prose .lead{ font-size:clamp(18px,1.4vw,21px); line-height:1.65; color:var(--paper); }

.prose h2{
  margin:2.1em 0 0;
  font:800 clamp(24px,2.4vw,32px)/1.15 var(--fd); letter-spacing:-.025em;
  color:var(--paper);
}
.prose h2 + *{ margin-top:.75em; }

.prose ul,.prose ol{ margin:0; padding-left:0; list-style:none; display:grid; gap:.7em; }
.prose li{ position:relative; padding-left:30px; color:#cdd6ef; }
.prose ul > li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:11px; height:2px; background:var(--sky); transform:skewX(var(--skew));
}
.prose ol{ counter-reset:step; }
.prose ol > li{ counter-increment:step; }
.prose ol > li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute; left:0; top:.15em;
  font:500 11px/1 var(--fm); color:var(--sky);
}
.prose strong{ color:var(--paper); font-weight:600; }
.prose em{ color:var(--paper); font-style:italic; }

.next{
  max-width:70ch; margin-top:clamp(44px,5vw,68px);
  padding:clamp(24px,2.8vw,34px);
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--ink-2);
}
.next .h3{ margin-bottom:18px; }
.next__l{ margin:0; padding:0; list-style:none; display:grid; gap:1px; background:var(--line); }
.next__l li{ background:var(--ink-2); }
.next__l a{
  display:block; padding:14px 0 14px 22px;
  color:var(--paper); text-decoration:none; font-size:15px;
  border-left:2px solid var(--blue);
  transition:border-color .3s, padding-left .4s var(--ease-o), color .3s;
}
.next__l a:hover{ border-left-color:var(--sky); padding-left:28px; color:var(--sky); }

/* ── closing call to action ───────────────────────────────────────────── */

.sec--cta{
  background:
    radial-gradient(60% 90% at 82% 0%, rgba(6,82,233,.30), transparent 68%),
    var(--ink-2);
  border-top:1px solid var(--line);
}
.cta{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(28px,4vw,64px); align-items:center;
}
.cta__act{ display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end; }

/* ── contact details ──────────────────────────────────────────────────── */

.deets{
  margin:34px 0 0; display:grid; gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-sm); overflow:hidden;
}
.deets > div{
  display:grid; grid-template-columns:160px 1fr; gap:18px;
  padding:17px 22px; background:var(--ink);
}
.deets dt{
  font:500 11px/1.6 var(--fm); letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim);
}
.deets dd{ margin:0; font-size:15px; }
.deets a{ color:var(--sky); text-decoration:none; border-bottom:1px solid var(--line-2); }
.deets a:hover{ border-bottom-color:var(--sky); }

/* optional-field marker, and the spam trap */
.fld > span i{ font-style:normal; text-transform:none; letter-spacing:0; opacity:.55; }
.trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form.is-sending{ opacity:.6; pointer-events:none; }

/* ── responsive ───────────────────────────────────────────────────────── */

@media (max-width:1100px){
  .cap{ grid-template-columns:1fr; }
  .cap__panel{ position:static; }
}

@media (max-width:1000px){
  .pay__top,.pay__grid,.grow,.contact,.sys__top,.ftr__in,.cta{ grid-template-columns:1fr; }
  .cta__act{ justify-content:flex-start; }
  .pillars{ grid-template-columns:repeat(2,1fr); }
  .plans{ grid-template-columns:1fr; max-width:520px; }
  .ftr__nav{ justify-content:start; }
}

@media (max-width:840px){
  .svc,.feat,.mods,.teasers{ grid-template-columns:repeat(2,1fr); }
  .posts{ grid-template-columns:1fr; }
  .work--3{ grid-template-columns:repeat(2,1fr); }
  .shots{ grid-template-columns:1fr; max-width:520px; }
}

@media (max-width:880px){
  .burger{ display:block; margin-left:auto; }
  .hdr__cta{ display:none; }
  .nav{
    position:fixed; inset:88px 0 auto; margin:0;
    flex-direction:column; gap:0;
    padding:8px var(--pad) 24px;
    background:rgba(4,8,26,.97); backdrop-filter:blur(22px);
    border-bottom:1px solid var(--line);
    clip-path:inset(0 0 100% 0);
    transition:clip-path .5s var(--ease-o);
  }
  .nav.is-open{ clip-path:inset(0 0 0 0); }
  .nav a{ padding:18px 0; font-size:18px; border-bottom:1px solid var(--line); }
  .nav__item{ flex-direction:column; align-items:stretch; gap:0; }
  .nav__item::after,.nav__caret{ display:none; }
  .nav__sub{
    position:static; min-width:0; margin:0; padding:0 0 6px 18px;
    opacity:1; visibility:visible; transform:none;
    background:none; border:0; box-shadow:none; backdrop-filter:none;
  }
  .nav__sub a{ padding:13px 0; font-size:15px; border-radius:0; border-bottom:1px solid var(--line); }
  .hdr{ background:rgba(4,8,26,.74); backdrop-filter:blur(20px); }
  .brand img{ height:52px; }
  .hdr.is-stuck .brand img{ height:46px; }
}

@media (max-width:640px){
  .row{ grid-template-columns:1fr; }
  .chip{ width:168px; height:92px; padding:10px 14px; }
  .ftr__brand .brand img{ height:62px; }
  .cap__b{ gap:12px; }
  .ftr__base{ justify-content:flex-start; }
  .deets > div{ grid-template-columns:1fr; gap:6px; }
}

@media (max-width:560px){
  .pillars,.svc,.feat,.mods,.teasers,.work,.work--3{ grid-template-columns:1fr; }
  .sec__head--row{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; translate:none; }
  .hero__h i,.w em{ transform:none; }
  .bg__mesh{ transform:none; }
  .clamp__b{ opacity:1; }
  .bg__beam{ display:none; }
}