/* ===== VIBE CODING — sales page =====
   Shares the main site's tokens so the two pages read as one brand, but keeps
   its own layout: this page sells packages, the main site sells the studio. */

* { margin:0; padding:0; box-sizing:border-box; }

:root{
  --bg:#0a0a0a;
  --fg:#ffffff;
  --surface:#141414;
  --surface-2:#1c1c1c;
  --border:rgba(255,255,255,.12);
  --border-soft:rgba(255,255,255,.08);
  --muted:rgba(255,255,255,.55);
  --dim:rgba(255,255,255,.35);
  /* DZYN has no colour accent — the brand is black, white and white-alpha.
     White carries the emphasis, exactly as it does on the main site. */
  --accent:#ffffff;
  --accent-ink:#0a0a0a;
  --mono:"JetBrains Mono","SF Mono",monospace;
  --display:"Fira Sans Extra Condensed","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.16,.84,.36,1);
  --glow:0 0 60px -10px rgba(255,255,255,.15);
}

html{ scroll-behavior:smooth; overflow-x:clip; scroll-padding-top:96px; }
body{
  background:var(--bg);
  color:var(--fg);
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
.hidden{ display:none !important; }

.container{ width:100%; max-width:1240px; margin:0 auto; padding:0 32px; }

.progress-bar{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:var(--accent); z-index:10000; transition:width .1s linear;
}

/* ---------- header ---------- */
.header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:20px 0;
  transition:padding .4s var(--ease), background .4s, border-color .4s;
  background:linear-gradient(to bottom, rgba(10,10,10,.92), transparent);
}
.header.scrolled{
  padding:12px 0;
  background:rgba(10,10,10,.86);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-soft);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo{ display:flex; align-items:center; gap:8px; font-size:19px; font-weight:700; letter-spacing:-.5px; white-space:nowrap; }
.logo-mark{ font-size:14px; }
.logo-sup{ font-size:10px; vertical-align:super; opacity:.5; }
.logo-div{ color:var(--dim); font-weight:400; }
.logo-section{ font-family:var(--mono); font-size:12px; letter-spacing:2px; color:var(--accent); }

.nav{ display:flex; gap:26px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.8px; }
.nav a{ position:relative; opacity:.55; white-space:nowrap; transition:opacity .3s; }
.nav a::after{ content:""; position:absolute; left:0; bottom:-5px; width:0; height:1px; background:var(--accent); transition:width .3s var(--ease); }
.nav a:hover{ opacity:1; }
.nav a:hover::after{ width:100%; }

.header-right{ display:flex; align-items:center; gap:14px; }
.lang-switch{ display:flex; align-items:center; border:1px solid var(--border); border-radius:100px; padding:3px; gap:2px; }
.lang-btn{
  background:none; border:none; color:var(--dim);
  font-size:12px; font-weight:600; letter-spacing:.5px;
  padding:6px 12px; border-radius:100px; cursor:pointer;
  transition:background .3s, color .3s;
}
.lang-btn.active{ background:#fff; color:#000; }

/* Button reset at zero specificity — see the note in style.css. */
:where(.btn){
  background:transparent; color:inherit; font-family:inherit;
  -webkit-appearance:none; appearance:none;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:14px; font-weight:600; padding:13px 24px;
  border-radius:100px; white-space:nowrap; cursor:pointer;
  border:1px solid transparent;
  transition:transform .35s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn:hover{ transform:translateY(-2px); }
.btn-solid{ background:var(--accent); color:var(--accent-ink); }
.btn-solid:hover{ background:#eee; box-shadow:var(--glow); }
.btn-outline{ border-color:var(--border); color:#fff; }
.btn-outline:hover{ border-color:#fff; background:rgba(255,255,255,.07); }
/* Ghost is the lightest button, but it is still the card's only call to
   action — muted text made it read as disabled, so it keeps full-white ink. */
.btn-ghost{ border-color:var(--border); color:#fff; }
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.07); }
.btn:active{ transform:translateY(0) scale(.985); }
.btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }
.header-cta{ font-size:13px; padding:11px 20px; }

.menu-btn{
  display:none; flex-direction:column; justify-content:center; align-items:flex-end;
  gap:5px; width:44px; height:44px; margin-right:-9px;
  background:none; border:none; cursor:pointer;
  /* Stays BELOW .mobile-menu (1100): it sits in the same top-right corner as
     the close button, and on top it swallowed the close tap. */
  z-index:1050;
}
.menu-btn span{ height:2px; width:26px; background:#fff; }

.mobile-menu{
  position:fixed; inset:0; background:#000; z-index:1100;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  transform:translateY(-100%); transition:transform .5s var(--ease);
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{ font-size:26px; font-weight:600; }
.mobile-menu-close{
  position:absolute; top:14px; right:16px; width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--border);
  background:none; color:#fff; font-size:19px; line-height:1; cursor:pointer;
  z-index:1200;
}
.lang-switch-mobile{ margin-top:6px; }
.mobile-menu .mobile-menu-cta{ font-size:16px; }

/* ---------- scroll reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s var(--ease), transform .8s var(--ease);
}
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- hero ---------- */
.v-hero{
  min-height:100svh;
  display:flex; align-items:center;
  padding:140px 0 80px;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.07), transparent 46%),
    radial-gradient(circle at 82% 72%, rgba(255,255,255,.05), transparent 52%),
    var(--bg);
}
.v-hero-inner{ display:flex; flex-direction:column; align-items:flex-start; }
.badge{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--border); border-radius:100px;
  padding:8px 16px; font-family:var(--mono);
  font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted);
}
.badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); }

.v-title{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(44px, 6.6vw, 96px);
  line-height:1.03; letter-spacing:-.01em;
  margin:26px 0 0;
}
.v-sub{
  max-width:620px; margin-top:24px;
  font-size:clamp(15px,1.5vw,19px); line-height:1.6; color:var(--muted);
}
.v-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.v-hero-stats{ display:flex; flex-wrap:wrap; gap:38px; margin-top:58px; }
.v-stat{ display:flex; flex-direction:column; gap:4px; }
.v-stat strong{ font-family:var(--display); font-weight:800; font-size:38px; line-height:1; }
.v-stat span{ font-family:var(--mono); font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--dim); }

/* ---------- sections ---------- */
.v-section{ padding:110px 0; }
.section-tag{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:2.4px;
  text-transform:uppercase; color:var(--dim); margin-bottom:18px;
}
.section-tag .sq{ width:8px; height:8px; background:var(--accent); display:inline-block; }
.v-h2{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(30px,4.6vw,62px); line-height:1.05; letter-spacing:-.01em;
}
.v-lead{ max-width:620px; margin-top:16px; color:var(--muted); font-size:16px; line-height:1.6; }

/* ---------- process ---------- */
.v-steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:52px;
}
.v-step{
  background:var(--surface); border:1px solid var(--border-soft);
  border-radius:18px; padding:26px 22px 28px;
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.v-step:hover{ border-color:var(--border); transform:translateY(-4px); }
.v-step-num{ font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:1px; }
.v-step h3{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:24px; margin:12px 0 10px; }
.v-step p{ font-size:14px; line-height:1.6; color:var(--muted); }

/* ---------- pricing ---------- */
.v-pricing{ background:linear-gradient(180deg, transparent, rgba(255,255,255,.02), transparent); }
/* stretch, not start: the cheapest card carries the most bullets now, and a
   featured card shorter than its neighbours reads as the lesser option. */
.v-plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; align-items:stretch; }
.v-plan{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--border-soft);
  border-radius:22px; padding:30px 26px 28px;
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.v-plan:hover{ border-color:var(--border); }
.v-plan-featured{
  border-color:rgba(255,255,255,.4);
  background:linear-gradient(180deg, rgba(255,255,255,.07), var(--surface) 42%);
}
.v-plan-flag{
  position:absolute; top:-11px; left:26px;
  background:var(--accent); color:var(--accent-ink);
  font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:1.4px; text-transform:uppercase;
  padding:5px 12px; border-radius:100px;
}
.v-plan-name{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:29px; line-height:1.1; }
.v-plan-price{ font-family:var(--display); font-weight:800; font-size:50px; line-height:1; margin-top:12px; }
.v-plan-term{ font-family:var(--mono); font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--dim); margin-top:8px; }
.v-plan-who{ font-size:13.5px; line-height:1.6; color:var(--muted); margin:20px 0 20px; padding-bottom:20px; border-bottom:1px solid var(--border-soft); }
/* Absorbs the height difference between cards so everything below it — the
   note, the bonus box, the button — still sits flush at the card's foot. */
.v-plan-list{ display:flex; flex-direction:column; gap:11px; flex:1 1 auto; }
.v-plan-list li{ position:relative; padding-left:24px; font-size:14px; line-height:1.5; }
.v-plan-list li::before{
  content:""; position:absolute; left:0; top:7px;
  width:11px; height:6px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.v-plan-note{ margin-top:16px; font-size:12px; line-height:1.55; color:var(--dim); }
.v-plan-bonus{
  margin-top:18px; padding:11px 14px;
  border:1px dashed rgba(255,255,255,.3); border-radius:12px;
  font-size:13px; color:var(--accent);
}
.v-plan-cta{ margin-top:26px; width:100%; }

/* ---------- add-ons ---------- */
.v-addons{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; }
.v-addon{
  background:var(--surface); border:1px solid var(--border-soft);
  border-radius:18px; padding:26px 24px;
  display:flex; flex-direction:column;
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.v-addon:hover{ border-color:var(--border); transform:translateY(-4px); }
.v-addon h3{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:24px; }
.v-addon-price{ font-family:var(--display); font-weight:800; font-size:34px; margin:8px 0 12px; color:var(--accent); }
.v-addon p{ font-size:14px; line-height:1.6; color:var(--muted); margin-bottom:22px; }
.v-addon .btn{ margin-top:auto; width:100%; }

/* ---------- works ---------- */
.v-works-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; }
.v-work{
  display:block; border-radius:18px; overflow:hidden;
  background:var(--surface); border:1px solid var(--border-soft);
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.v-work:hover{ border-color:var(--accent); transform:translateY(-5px); }
.v-work-media{ aspect-ratio:16/10; background:var(--surface-2); position:relative; overflow:hidden; }
.v-work-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.v-work:hover .v-work-media img{ transform:scale(1.04); }
.v-work-fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:26px; color:var(--dim); letter-spacing:1px; text-align:center; padding:16px;
}
.v-work-body{ padding:18px 20px 20px; }
.v-work-body h3{ font-size:17px; font-weight:600; }
.v-work-body p{ font-size:13px; color:var(--muted); margin-top:4px; }
.v-work-stack{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.v-work-stack span{
  font-family:var(--mono); font-size:10px; letter-spacing:.6px; text-transform:uppercase;
  color:var(--dim); border:1px solid var(--border-soft); border-radius:100px; padding:4px 9px;
}
.v-works-empty{ margin-top:40px; color:var(--dim); }

/* ---------- faq ---------- */
.v-faq{ margin-top:44px; border-top:1px solid var(--border-soft); }
.v-faq-item{ border-bottom:1px solid var(--border-soft); }
.v-faq-item summary{
  list-style:none; cursor:pointer; padding:22px 40px 22px 0; position:relative;
  font-size:clamp(16px,1.8vw,20px); font-weight:600;
}
.v-faq-item summary::-webkit-details-marker{ display:none; }
.v-faq-item summary::after{
  content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  font-size:22px; color:var(--accent); transition:transform .3s var(--ease);
}
.v-faq-item[open] summary::after{ content:"–"; }
.v-faq-item p{ padding:0 40px 24px 0; color:var(--muted); font-size:15px; line-height:1.65; }

/* ---------- contact ---------- */
.v-contact{ padding-bottom:120px; }
.v-contact-inner{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.v-contact-copy p{ margin-top:16px; color:var(--muted); font-size:16px; line-height:1.6; max-width:420px; }
.v-contact-direct{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.card{ background:var(--surface); border:1px solid var(--border-soft); border-radius:22px; }
.v-form{ padding:30px 28px; }
.v-form-body{ display:flex; flex-direction:column; gap:16px; }
.v-form label{
  display:flex; flex-direction:column; gap:7px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--dim);
}
.v-form input, .v-form select, .v-form textarea{
  background:transparent; border:none; border-bottom:1px solid var(--border);
  color:#fff; font-family:inherit; font-size:16px; padding:10px 0;
  border-radius:0; transition:border-color .3s;
}
.v-form select{ appearance:none; cursor:pointer; }
.v-form select option{ background:#141414; color:#fff; }
.v-form textarea{ resize:vertical; }
.v-form input:focus, .v-form select:focus, .v-form textarea:focus{ outline:none; border-bottom-color:var(--accent); }
.v-form-submit{ margin-top:8px; }
.form-error{ color:#ff6b6b; font-size:13px; min-height:1px; }
.v-form-success{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:40px 10px; text-align:center; }
.v-form-tick{
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--accent-ink); font-size:26px; font-weight:700;
}

/* ---------- footer ---------- */
.v-footer{ border-top:1px solid var(--border-soft); padding:34px 0; }
.v-footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.v-footer-nav{ display:flex; gap:22px; font-size:14px; color:var(--muted); }
.v-footer-nav a:hover{ color:#fff; }
.v-footer-note{ font-family:var(--mono); font-size:11px; color:var(--dim); }

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .v-steps{ grid-template-columns:repeat(2,1fr); }
  .v-plans, .v-addons, .v-works-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .nav, .header-right{ display:none; }
  .menu-btn{ display:flex; }
}
@media (max-width:760px){
  .container{ padding:0 20px; }
  .v-section{ padding:80px 0; }
  .v-hero{ padding:120px 0 64px; }
  .v-plans, .v-addons, .v-works-grid, .v-steps{ grid-template-columns:1fr; }
  .v-contact-inner{ grid-template-columns:1fr; gap:34px; }
  .v-hero-stats{ gap:26px; }
  .v-stat strong{ font-size:30px; }
  .v-form{ padding:24px 20px; }
}

/* ---------- admin panel comparison ---------- */
.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;
}
.v-admin{ background:linear-gradient(180deg, transparent, rgba(255,255,255,.02), transparent); }
/* The table is the one element allowed to scroll sideways on a phone —
   squeezing four columns into 360px would make every row unreadable. */
.v-cmp-wrap{
  margin-top:44px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--border-soft); border-radius:20px; background:var(--surface);
}
.v-cmp{ width:100%; border-collapse:collapse; min-width:680px; }
.v-cmp th, .v-cmp td{ text-align:left; padding:15px 18px; font-size:14px; }
.v-cmp thead th{
  position:sticky; top:0; z-index:2;
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
  font-family:var(--mono); font-size:11px; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--muted); font-weight:500; vertical-align:bottom;
}
.v-cmp thead th:not(:first-child){ text-align:center; width:132px; }
.v-cmp thead th.v-cmp-hi{ color:#fff; box-shadow:inset 0 -2px 0 #fff; }
.v-cmp-plan{ display:block; font-size:14px; letter-spacing:.6px; color:#fff; }
.v-cmp-price{ display:block; margin-top:3px; font-size:11px; color:var(--dim); }
.v-cmp tbody th{
  font-weight:400; color:rgba(255,255,255,.82);
  border-bottom:1px solid var(--border-soft);
}
.v-cmp tbody td{ text-align:center; border-bottom:1px solid var(--border-soft); }
.v-cmp tbody tr:last-child th, .v-cmp tbody tr:last-child td{ border-bottom:none; }
.v-cmp tbody tr:hover th{ color:#fff; }
.v-cmp tbody tr:hover th, .v-cmp tbody tr:hover td{ background:rgba(255,255,255,.035); }

/* Tick drawn from two borders so it needs no icon font or SVG request. */
.v-cmp-mark{
  display:inline-block; width:13px; height:7px;
  border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg) translateY(-2px);
}
.v-cmp-dash{ display:inline-block; width:13px; height:1px; background:var(--dim); vertical-align:middle; }
.v-cmp-note{ margin-top:20px; font-size:13.5px; line-height:1.6; color:var(--muted); max-width:760px; }
.v-cmp-hint{
  margin-top:12px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:1.2px; text-transform:uppercase; color:var(--dim);
}
@media (min-width:761px){ .v-cmp-hint{ display:none; } }

/* ===== MOTION LAYER =====
   Awwwards heroes lean on WebGL (basement.studio) or hundreds of scroll-driven
   transforms (Unseen). A sales page cannot afford either, so the same effects
   are built from clip-path, one rAF loop and CSS custom properties. */

/* --- pointer spotlight: a soft light that trails the cursor in the hero --- */
.v-hero{ position:relative; overflow:hidden; }
.v-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 40%),
             rgba(255,255,255,.09), transparent 62%);
  opacity:0; transition:opacity .6s var(--ease);
}
.v-hero.lit::after{ opacity:1; }

/* --- headline: each line wipes up from behind its own mask --- */
.v-title .line{ display:block; overflow:hidden; }
.v-title .line > span{
  display:block;
  transform:translateY(105%);
  transition:transform 1.05s var(--ease);
}
.v-title.on .line > span{ transform:translateY(0); }
.v-title .line:nth-child(2) > span{ transition-delay:.11s; }

/* --- decoded glyphs: the scrambler swaps characters while text settles --- */
.scramble{ font-variant-ligatures:none; }
.scramble .gl{ opacity:.42; }

/* --- marquee: one strip duplicated, translated by half its own width --- */
.v-marquee{
  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
  overflow:hidden; padding:18px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
/* No flex gap: the strip is duplicated and shifted by exactly -50%, so one
   item's box must equal one full repeat. The gap lives in its padding instead,
   otherwise the loop jumps by half a gap on every cycle. */
.v-marquee-track{
  display:flex; width:max-content;
  will-change:transform;
  animation:v-marq 34s linear infinite;
}
.v-marquee:hover .v-marquee-track{ animation-play-state:paused; }
.v-marquee-item{
  display:inline-flex; align-items:center; gap:40px; padding-right:40px;
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(20px, 2.6vw, 34px); letter-spacing:.01em;
  color:rgba(255,255,255,.34); white-space:nowrap;
  transition:color .3s var(--ease);
}
.v-marquee-item::after{ content:"◆"; font-size:.42em; color:rgba(255,255,255,.22); }
.v-marquee:hover .v-marquee-item{ color:rgba(255,255,255,.7); }
@keyframes v-marq{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }

/* --- magnetic buttons: JS writes the offset, CSS owns the easing --- */
.btn{ --mgx:0px; --mgy:0px; }
.btn.magnetic{ transform:translate3d(var(--mgx), var(--mgy), 0); }
.btn.magnetic:hover{ transform:translate3d(var(--mgx), calc(var(--mgy) - 2px), 0); }
.btn.magnetic:active{ transform:translate3d(var(--mgx), var(--mgy), 0) scale(.985); }

/* --- section headings wipe in line-by-line on scroll --- */
.v-h2.wipe{ overflow:hidden; }
.v-h2.wipe > span{
  display:block; transform:translateY(102%);
  transition:transform .95s var(--ease);
}
.v-h2.wipe.in > span{ transform:translateY(0); }

/* --- cards lift on approach, driven by the reveal observer --- */
.v-plan, .v-step, .v-addon, .v-work{ will-change:transform; }

@media (prefers-reduced-motion: reduce){
  .v-hero::after{ display:none; }
  .v-title .line > span, .v-h2.wipe > span{ transform:none !important; transition:none; }
  .v-marquee-track{ animation:none; }
  .btn.magnetic{ transform:none !important; }
}


/* ===== STORY: how the work gets done =====
   illoca tells its process as numbered chapters with an architectural sketch
   beside each one. Same idea here, but the brand carries no colour, so the
   blueprint becomes white line art on black — and the line actually draws
   itself in via stroke-dashoffset rather than fading in. */
.v-story-steps{ margin-top:56px; }
.v-story-step{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px, 5vw, 72px); align-items:center;
  padding:clamp(40px, 5vw, 64px) 0;
  border-top:1px solid var(--border-soft);
}
.v-story-step:last-child{ border-bottom:1px solid var(--border-soft); }
/* Alternate sides so the eye zig-zags down the story. */
.v-story-step:nth-child(even) .v-story-art{ order:2; }

.v-story-art{
  position:relative; border-radius:18px; padding:18px;
  background:var(--surface);
  border:1px solid var(--border-soft);
  /* faint graph paper, the way a sketch would sit on gridded stock */
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 28px);
}
.sketch{
  display:block; width:100%; height:auto;
  fill:none; stroke:#fff; stroke-width:2.1;
  stroke-linecap:round; stroke-linejoin:round;
}
.sketch path, .sketch circle{
  stroke-dasharray:var(--len, 800);
  stroke-dashoffset:var(--len, 800);
}
.sketch.drawn path, .sketch.drawn circle{ stroke-dashoffset:0; }

.v-story-num{
  display:block; font-family:var(--mono); font-size:12px;
  letter-spacing:2.4px; color:var(--dim);
}
.v-story-copy h3{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(26px, 3.4vw, 44px); line-height:1.06; margin:10px 0 14px;
}
.v-story-copy p{ font-size:clamp(14.5px,1.4vw,16.5px); line-height:1.65; color:var(--muted); }
.v-story-out{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px;
  margin-top:20px; padding-top:16px; border-top:1px solid var(--border-soft);
  color:#fff !important;
}
.v-story-out-k{
  font-family:var(--mono); font-size:10.5px; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--dim);
}

@media (max-width:760px){
  .v-story-step{ grid-template-columns:1fr; gap:24px; }
  /* On one column the art must lead, whatever the alternation says. */
  .v-story-step:nth-child(even) .v-story-art{ order:0; }
}
@media (prefers-reduced-motion: reduce){
  .sketch path, .sketch circle{ stroke-dasharray:none; stroke-dashoffset:0; }
}

/* ===== 3D SCROLL LAYER =====
   Real depth, not a drop shadow: a perspective on the parent and transforms on
   the child, both driven by custom properties that one rAF loop writes. */

/* --- hero: the drawing IS the hero, the way illoca puts its canvas there --- */
.v-hero-3d{
  position:absolute; top:50%; right:-4%;
  width:min(54vw, 780px); aspect-ratio:900/660;
  transform:translateY(-50%);
  perspective:1600px; pointer-events:none; z-index:0;
  /* The headline runs over the drawing's left edge — fade the ink out there
     rather than dimming the whole illustration. */
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 21%, rgba(0,0,0,.4) 37%, #000 54%);
  mask-image:linear-gradient(90deg, transparent 0%, transparent 21%, rgba(0,0,0,.4) 37%, #000 54%);
}
.v-stack{
  width:100%; height:100%; transform-style:preserve-3d;
  transform:rotateY(var(--sz, -9deg)) rotateX(var(--sx, 5deg));
}
.sketch-hero{ width:100%; height:100%; stroke-width:1.9; opacity:.95; }
/* Guides stay dashed even once drawn, so they read as construction lines. */
.sketch-hero .dash{ stroke:rgba(255,255,255,.4); }
.sketch.drawn .dash{ stroke-dasharray:7 7 !important; stroke-dashoffset:0 !important; }

/* Ruled ground across the whole hero, fading out at the edges. */
.v-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 44px);
  -webkit-mask-image:radial-gradient(120% 90% at 55% 45%, #000 22%, transparent 78%);
  mask-image:radial-gradient(120% 90% at 55% 45%, #000 22%, transparent 78%);
}
.v-hero-inner{ position:relative; z-index:1; }
/* Sits inside the copy's own stacking context, so it darkens the drawing
   behind the words without touching the rest of the illustration. */
.v-hero-inner::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  top:-8%; bottom:-8%; left:-50vw; right:-8%;
  background:radial-gradient(60% 62% at 26% 50%,
    rgba(10,10,10,.94) 0%, rgba(10,10,10,.78) 52%, transparent 100%);
}

/* --- story art rides a plane that swings flat as it arrives --- */
.v-story-step{ perspective:1500px; }
.v-story-art{
  transform:rotateY(var(--ry, 0deg)) translateZ(var(--tz, 0px));
  transform-origin:center;
  will-change:transform;
}

/* --- pricing cards tilt toward the cursor --- */
.v-plans{ perspective:1300px; }
.v-plan{
  transform:rotateX(var(--px, 0deg)) rotateY(var(--py, 0deg)) translateY(var(--pty, 0px));
  transform-style:preserve-3d;
  transition:border-color .35s var(--ease), transform .18s ease-out;
}
.v-plan:hover{ border-color:var(--border); --pty:-4px; }

/* Only where the drawing is actually on screen does the copy need to yield. */
@media (min-width:901px){ .v-sub{ max-width:min(620px, 54%); } }
@media (max-width:900px){
  /* No room beside the copy, and a phone gets nothing from the extra paint. */
  .v-hero-3d{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .v-stack, .v-story-art, .v-plan{ transform:none !important; }
  .v-hero-3d{ display:none; }
}

/* ===== BRIEF REBUILD: new blocks ===== */

/* hero bullet list replaces the old stats row */
.v-hero-list{ display:flex; flex-direction:column; gap:10px; margin-top:26px; }
.v-hero-list li{ position:relative; padding-left:24px; font-size:15px; line-height:1.5; color:rgba(255,255,255,.86); }
.v-hero-list li::before{
  content:""; position:absolute; left:0; top:7px;
  width:11px; height:6px; border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg);
}
.v-hero-note{ margin-top:22px; font-size:12.5px; line-height:1.55; color:var(--dim); max-width:520px; }

/* plain bullet lists used by the problem and value sections */
.v-bullets{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 32px; margin-top:34px; }
.v-bullets li{ position:relative; padding-left:26px; font-size:15.5px; line-height:1.6; color:rgba(255,255,255,.84); }
.v-bullets li::before{
  content:""; position:absolute; left:0; top:9px;
  width:9px; height:9px; border:1px solid rgba(255,255,255,.6); border-radius:2px;
}
/* Legal and scope caveats — deliberately quiet, never hidden. */
.v-fineprint{ margin-top:26px; font-size:12.5px; line-height:1.6; color:var(--dim); max-width:780px; }

/* pricing head gains a tagline line */
.v-plan-tagline{ font-size:13px; line-height:1.4; color:var(--muted); margin-top:8px; min-height:2.6em; }
.v-plan-offer{ font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.8); margin-bottom:18px; }

/* comparison table now carries words, not ticks */
.v-cmp-val{ text-align:center; font-size:13.5px; color:rgba(255,255,255,.88); }
.v-cmp-val.v-cmp-neg{ color:var(--dim); }
.v-cmp-hi-col{ background:rgba(255,255,255,.04); }
.v-cmp thead th.v-cmp-hi{ background:rgba(255,255,255,.07); }

/* admin panel: two tier cards side by side */
.v-admin-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:44px; }
.v-admin-card{
  background:var(--surface); border:1px solid var(--border-soft);
  border-radius:20px; padding:28px 26px;
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.v-admin-card:hover{ border-color:var(--border); transform:translateY(-4px); }
.v-admin-card h3{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:22px; margin-bottom:20px; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
}
.v-admin-tier{
  font-family:var(--mono); font-size:11px; letter-spacing:1.6px;
  background:#fff; color:var(--accent-ink); border-radius:100px; padding:4px 11px;
}

/* domain / support notes */
.v-notes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:44px; }
.v-note{ background:var(--surface); border:1px solid var(--border-soft); border-radius:18px; padding:24px 22px; }
.v-note h3{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:19px; margin-bottom:10px; }
.v-note p{ font-size:14px; line-height:1.6; color:var(--muted); }

.v-form-consent{ font-size:11.5px; line-height:1.5; color:var(--dim); margin-top:4px; }

@media (max-width:900px){
  .v-notes{ grid-template-columns:1fr; }
  .v-admin-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .v-bullets{ grid-template-columns:1fr; }
  .v-plan-tagline{ min-height:0; }
}