/* ═══════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════ */
:root {
  --cyan:   #3EE7FF;

  --white:  #F4F4FC;
  --gray-1: #C8C8DC;
  --gray-2: #8080A0;
  --gray-3: #5A5A7A;

  --bd: rgba(255,255,255,.06);

  --f-display: 'Cormorant Garamond', serif;
  --f-ui:      'Outfit', sans-serif;
  --f-mono:    'DM Mono', monospace;

  --t-hero: clamp(2.8rem, 4.8vw, 4.8rem);
  --t-h2:   clamp(2rem, 4vw, 4rem);

  --r-m: 12px;
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ═══════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  color: var(--white);
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
}

/* Grain overlay */
body::after {
  content: '';
  position: fixed; inset: 0;
  opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none; z-index: 9999;
}

/* Dot grid */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none; z-index: 0;
}

/* ═══════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════ */
h1, h2, h3 { line-height: 1.05; }

.display {
  font-family: var(--f-ui);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 0.97;
}
.display em {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -.01em;
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: .90rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan);
}
.eyebrow-pre {
  font-family: var(--f-mono);
  font-size: 1.03rem;
  font-weight: 400;
  color: var(--cyan);
  opacity: .3;
  letter-spacing: -.06em;
  flex-shrink: 0;
}

.section-title {
  font-family: var(--f-mono);
  font-size: .90rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan);
  display: block;
  margin-bottom: 14px;
}
.section-title::before {
  content: '// ';
  color: rgba(0,201,177,.22);
  letter-spacing: -.06em;
  margin-right: .12em;
}

.gt {
  background: linear-gradient(110deg, var(--cyan) 0%, #7FFFEF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding-right: 0.15em;
  padding-bottom: 0.15em;
  margin-bottom: -0.15em;
  letter-spacing: inherit;
  display: inline-block;
}

/* ═══════════════════════════════════════
   LAYOUT
═══════════════════════════════════════ */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
@media(max-width:768px){.container{padding:0 20px}}

section {
  position: relative;
  z-index: 1;
  padding: clamp(64px, 9vw, 112px) 0;
}
section + section {
  border-top: 1px solid var(--bd);
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}

/* ═══════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════ */
#nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 500;
  padding: 20px 0;
  transition: background .35s, border-color .35s;
  border-bottom: 1px solid transparent;
}
#nav.scrolled {
  background: rgba(4,4,10,.97);
  border-bottom-color: var(--bd);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
}
.brand-mark {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
  opacity: .92;
  transition: opacity .2s;
}
.brand-word {
  font-family: var(--f-ui);
  font-size: 1.14rem;
  font-weight: 500;
  letter-spacing: .48em;
  color: var(--white);
  line-height: 1;
  text-transform: uppercase;
  opacity: .94;
  text-shadow: 0 0 14px rgba(255,255,255,.18);
}
.nav-logo:hover img { opacity: 1; }

@media(max-width:900px){
  .brand-mark{ width:32px; }
  .brand-word{ font-size:.88rem; letter-spacing:.3em; }
  .nav-inner > .nav-cta{ display:none; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}
@media(max-width:900px){ .nav-links { display: none; } }
.nav-links a {
  font-family: var(--f-ui);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  transition: color .2s;
}
.nav-links a:hover { color: var(--white); }

.nav-cta {
  font-family: var(--f-ui);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--white);
  background: transparent;
  border: 1px solid var(--cyan);
  padding: 10px 22px;
  border-radius: 100px;
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s var(--ease-spring), box-shadow .2s, color .2s;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.nav-cta:hover {
  background: var(--cyan);
  color: #04040A;
  border-color: var(--cyan);
  box-shadow: 0 0 24px rgba(0,201,177,.35);
  transform: translateY(-1px);
}

/* Mobile burger */
.mob-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
}
@media(max-width:900px){.mob-btn{display:flex}}
.mob-btn span {
  display: block;
  height: 1.5px;
  background: var(--white);
  border-radius: 2px;
  transition: transform .25s, opacity .25s, width .25s;
}
.mob-btn span:nth-child(1){width:22px}
.mob-btn span:nth-child(2){width:15px}
.mob-btn span:nth-child(3){width:22px}
.mob-btn.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);width:22px}
.mob-btn.open span:nth-child(2){opacity:0;width:0}
.mob-btn.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);width:22px}

/* ── Mobile menu: NEUTRON system index ── */
#mob-drawer {
  position: fixed;
  inset: 0;
  z-index: 490;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(120% 78% at 82% -4%, rgba(62,231,255,.05), transparent 56%),
    rgba(4,4,10,.97);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
  backdrop-filter: blur(24px) saturate(125%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .45s ease, visibility .45s ease;
}
#mob-drawer.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Atmosphere — borrowed from the hero, the studio's own signature */
.mob-atmo { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mpar {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px 2px rgba(62,231,255,.35);
  opacity: 0;
}
#mob-drawer.open .mpar {
  animation: par-rise var(--dur, 7s) ease-in-out infinite;
  animation-delay: var(--del, 0s);
}
.mob-orb {
  position: absolute;
  bottom: -90px;
  right: -70px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(62,231,255,.10), transparent 70%);
  filter: blur(8px);
}

.mob-drawer-inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(96px, 15vh, 132px) 28px max(32px, env(safe-area-inset-bottom));
}

/* Mono system label */
.mob-drawer-label {
  font-family: var(--f-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cyan);
  padding-bottom: clamp(20px, 4.5vh, 36px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease .05s, transform .6s var(--ease-spring) .05s;
}
.mob-drawer-label::before {
  content: '// ';
  color: rgba(62,231,255,.34);
  letter-spacing: -.05em;
}
#mob-drawer.open .mob-drawer-label { opacity: 1; transform: translateY(0); }

/* Index rows */
.mob-nav { display: flex; flex-direction: column; }
.mob-nav a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 20px;
  padding: clamp(15px, 2.5vh, 22px) 0;
  border-top: 1px solid var(--bd);
  text-decoration: none;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .5s ease,
    transform .6s var(--ease-spring);
}
.mob-nav a:last-child { border-bottom: 1px solid var(--bd); }
#mob-drawer.open .mob-nav a { opacity: 1; transform: translateY(0); }
#mob-drawer.open .mob-nav a:nth-child(1) { transition-delay: .12s; }
#mob-drawer.open .mob-nav a:nth-child(2) { transition-delay: .18s; }
#mob-drawer.open .mob-nav a:nth-child(3) { transition-delay: .24s; }
#mob-drawer.open .mob-nav a:nth-child(4) { transition-delay: .30s; }

.mob-nav-idx {
  font-family: var(--f-mono);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--gray-3);
  transition: color .25s ease;
}
.mob-nav-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mob-nav-word {
  font-family: var(--f-ui);
  font-size: clamp(1.9rem, 8.6vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--white);
  transition: color .25s ease;
}
.mob-nav-meta {
  font-family: var(--f-mono);
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray-3);
  transition: color .25s ease;
}
.mob-nav-arrow {
  color: var(--cyan);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .3s ease, transform .35s var(--ease-spring);
}

/* Activation — the cyan gradient is NEUTRON's signature, no client shares it */
.mob-nav a:hover .mob-nav-word,
.mob-nav a:focus-visible .mob-nav-word,
.mob-nav a:active .mob-nav-word {
  background: linear-gradient(110deg, var(--cyan) 0%, #7FFFEF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.mob-nav a:hover .mob-nav-idx,
.mob-nav a:focus-visible .mob-nav-idx,
.mob-nav a:active .mob-nav-idx { color: var(--cyan); }
.mob-nav a:hover .mob-nav-meta,
.mob-nav a:focus-visible .mob-nav-meta,
.mob-nav a:active .mob-nav-meta { color: var(--gray-1); }
.mob-nav a:hover .mob-nav-arrow,
.mob-nav a:focus-visible .mob-nav-arrow,
.mob-nav a:active .mob-nav-arrow { opacity: 1; transform: translateX(0); }

/* Footer — studio status + CTA + direct line */
.mob-drawer-foot {
  margin-top: auto;
  padding-top: clamp(28px, 5.5vh, 44px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease .34s, transform .6s var(--ease-spring) .34s;
}
#mob-drawer.open .mob-drawer-foot { opacity: 1; transform: translateY(0); }
.mob-status { display: flex; align-items: center; justify-content: center; gap: 10px; }
.mob-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  animation: mob-pulse 2.6s ease-in-out infinite;
}
@keyframes mob-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(62,231,255,.45); opacity: 1; }
  50%      { box-shadow: 0 0 0 7px rgba(62,231,255,0); opacity: .65; }
}
.mob-status-text {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray-1);
}
.mob-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--f-ui);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #04040A;
  background: var(--cyan);
  border-radius: 100px;
  padding: 17px 28px;
  text-decoration: none;
  transition: transform .2s var(--ease-spring), box-shadow .2s ease;
}
.mob-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 30px rgba(62,231,255,.32); }
.mob-cta:active { transform: scale(.98); }
.mob-drawer-mail {
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--gray-2);
  text-decoration: none;
  text-align: center;
  transition: color .2s ease;
}
.mob-drawer-mail:hover { color: var(--cyan); }

@media (prefers-reduced-motion: reduce) {
  #mob-drawer .mpar,
  .mob-status-dot { animation: none; }
}

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: .875rem;
  text-decoration: none;
  border-radius: 100px;
  cursor: pointer;
  border: none;
  transition: transform .2s var(--ease-spring), box-shadow .2s, background .2s, border-color .2s;
  white-space: nowrap;
}
.btn:active { transform: scale(.97) !important; }

.btn-primary {
  background: var(--cyan);
  color: #04040A;
  padding: 15px 32px;
  font-weight: 700;
}
.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 32px rgba(0,201,177,.45);
}

/* ── Hero CTA arrow badge ── */
.hero-arrow-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-left: 4px;
  transition: transform .3s var(--ease-spring);
  position: relative;
}
.hero-arrow-icon {
  display: block;
  transition: transform .3s var(--ease-spring);
}
.btn-primary:hover .hero-arrow-badge {
  transform: translateX(4px);
}
.btn-primary:hover .hero-arrow-icon {
  transform: translateX(0);
}
.btn-primary:active .hero-arrow-badge {
  transform: translateX(2px);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-bottom: clamp(20px, 5svh, 40px);
}

@media(max-height:760px) and (min-width:769px) {
  .hero-content { padding-top: clamp(78px, 10svh, 100px); padding-bottom: clamp(18px, 3svh, 32px); }
  .hero-h1 { font-size: clamp(2.4rem, 4.2vw, 4.5rem); }
  #hero .hero-content > div:first-child { margin-bottom: 18px !important; }
  #hero .hero-content > p { margin-bottom: 28px !important; line-height: 1.68 !important; }
  .hero-actions { margin-bottom: 26px; }
}

@media(max-width:768px) {
  .hero-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .hero-actions .btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    padding-left: 22px;
    padding-right: 22px;
    text-align: center;
    font-size: .82rem;
  }
}

/* ═══════════════════════════════════════
   REVEAL ANIMATIONS
═══════════════════════════════════════ */
.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .45s ease, transform .45s ease;
}
.rv.in { opacity: 1; transform: translateY(0); }
.d1{transition-delay:.06s} .d2{transition-delay:.12s} .d3{transition-delay:.18s}
.d4{transition-delay:.24s}

/* ═══════════════════════════════════════
   HERO LAYOUT
═══════════════════════════════════════ */
#hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

.hero-container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 100%;
}

.hero-content {
  width: 100%;
  max-width: 840px;
  padding:
    clamp(88px, 12svh, 124px)
    0
    clamp(24px, 4svh, 46px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media(max-width:1024px){
  .hero-content{ max-width:680px; }
}
@media(max-width:768px){
  .hero-content{
    max-width:100%;
    padding:
      clamp(80px,11svh,102px)
      0
      clamp(22px,4svh,38px);
  }
}

/* Atmospheric particles floating near crystal */
.hero-atmo { position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden }
.hpar {
  position:absolute;
  border-radius:50%;
  background:var(--cyan);
  box-shadow: 0 0 5px 2px rgba(0,201,177,.35), 0 0 12px 4px rgba(0,201,177,.10);
  opacity:0;
  animation:par-rise var(--dur,6s) ease-in-out infinite;
  animation-delay:var(--del,0s);
}
@keyframes par-rise {
  0%   { opacity:0; transform:translateY(0) scale(1); }
  10%  { opacity:1; }
  65%  { opacity:.45; }
  100% { opacity:0; transform:translateY(-200px) scale(.15); }
}

/* Subtle section transition line */
.hero-transition {
  position:relative; z-index:1;
  height:1px;
  background:linear-gradient(to right,transparent 0%,rgba(0,201,177,.25) 30%,rgba(0,201,177,.12) 70%,transparent 100%);
  margin:0;
}

.hero-h1 {
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: var(--t-hero);
  line-height: 1.02;
  letter-spacing: -.038em;
  color: var(--white);
  margin-bottom: clamp(14px, 2.8svh, 24px);
  max-width: 760px;
  text-wrap: balance;
}
.hero-h1 em { font-style: italic; display: inline; }

/* ── Full-hero wallpaper — cinematic integration ── */
@keyframes ken-burns {
  0%   { transform: scale(1.06) translateY(1%); }
  100% { transform: scale(1.02) translateY(.5%); }
}
.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
  z-index: 0;
  display: block;
  opacity: .78;
  transform-origin: center center;
  backface-visibility: hidden;
  animation: ken-burns 22s ease-out forwards;
}

/* Hero overlay — darkens only left text zone + top/bottom framing. Right side is completely clear. */
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Left text zone — fades to fully transparent before reaching the crystal */
    linear-gradient(
      to right,
      #04040A 0%,
      #04040A 18%,
      rgba(4,4,10,.96) 28%,
      rgba(4,4,10,.80) 38%,
      rgba(4,4,10,.45) 50%,
      rgba(4,4,10,.10) 62%,
      transparent 72%
    ),
    /* Top cinematic bar */
    linear-gradient(to bottom, rgba(4,4,10,.85) 0%, rgba(4,4,10,.40) 10%, transparent 28%),
    /* Bottom grounding */
    linear-gradient(to top, rgba(4,4,10,.90) 0%, rgba(4,4,10,.55) 10%, rgba(4,4,10,.20) 22%, transparent 42%);
}

/* Mobile hero: full-width overlay since content spans entire screen */
@media(max-width:768px){
  .hero-bg-overlay {
    background:
      /* Full-width gradient, heavy on left where text lives */
      linear-gradient(
        to right,
        rgba(4,4,10,.94) 0%,
        rgba(4,4,10,.82) 42%,
        rgba(4,4,10,.52) 68%,
        rgba(4,4,10,.22) 100%
      ),
      /* Top bar */
      linear-gradient(to bottom, rgba(4,4,10,.90) 0%, rgba(4,4,10,.38) 16%, transparent 34%),
      /* Bottom grounding */
      linear-gradient(to top, rgba(4,4,10,.96) 0%, rgba(4,4,10,.60) 12%, rgba(4,4,10,.18) 30%, transparent 52%);
  }
  /* Center the crystal structure tip in the mobile viewport */
  .hero-bg-img {
    object-position: 68% 28%;
  }
}

@media(max-width:480px){
  .hero-bg-img {
    object-position: 70% 25%;
  }
}

/* Very small screens: tighten hero type so heading never overflows */
@media(max-width:420px){
  .hero-h1 { font-size: clamp(2.1rem, 8vw, 2.55rem); }
}


/* ═══════════════════════════════════════
   SIGNATURE CAPABILITIES
═══════════════════════════════════════ */

/* ── Intro header ── */
.sig-intro {
  margin-bottom: 60px;
}

.sig-eyebrow {
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .22em;
  color: rgba(62,231,255,.42);
  text-transform: uppercase;
  display: block;
  margin-bottom: 28px;
}

.sig-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
}

.sig-heading {
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: clamp(2.4rem, 4.2vw, 4.2rem);
  letter-spacing: -.048em;
  line-height: 0.95;
  color: var(--white);
}

.sig-subtext {
  color: var(--gray-2);
  font-size: .88rem;
  line-height: 1.88;
  max-width: 380px;
  padding-bottom: 8px;
}

@media(max-width: 768px) {
  .sig-intro-grid { grid-template-columns: 1fr; gap: 20px; }
  .sig-intro { margin-bottom: 40px; }
}

/* ── Panel stack — 2-column cinematic grid ── */
.sig-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ── Single cinematic panel ── */
.sig-panel {
  position: relative;
  height: 340px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  background-size: cover;
  background-position: center right;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: default;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 8px 36px rgba(0,0,0,.46);
  transition:
    border-color .36s ease,
    box-shadow .36s ease;
}

.sig-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    90deg,
    rgba(4,4,10,.98) 0%,
    rgba(4,4,10,.94) 34%,
    rgba(4,4,10,.70) 55%,
    rgba(4,4,10,.25) 76%,
    rgba(4,4,10,0) 100%
  );
  transition: opacity .42s ease;
  pointer-events: none;
}

/* Subtle right-edge glow — emerges on hover */
.sig-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    90deg,
    transparent 55%,
    rgba(62,231,255,.025) 82%,
    rgba(62,231,255,.048) 100%
  );
  opacity: 0;
  transition: opacity .42s ease;
  pointer-events: none;
}

.sig-panel:hover {
  border-color: rgba(62,231,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(62,231,255,.09),
    0 8px 36px rgba(0,0,0,.54);
}

/* On hover: image brightens slightly, overlay stays anchored */
.sig-panel:hover::before { opacity: .88; }
.sig-panel:hover::after  { opacity: 1; }

/* ── Panel body: stacked column, vertically centered ── */
.sig-panel-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  gap: 0;
  padding: 0 44px;
  max-width: 370px;
  min-width: 0;
  flex: 1;
}

/* ── Index number — eyebrow row above title ── */
.sig-num {
  font-family: var(--f-mono);
  font-size: .57rem;
  font-weight: 500;
  letter-spacing: .20em;
  color: rgba(62,231,255,.38);
  white-space: nowrap;
  text-transform: uppercase;
  display: block;
  margin-bottom: 18px;
  transition: color .36s ease;
}
.sig-panel:hover .sig-num { color: rgba(62,231,255,.64); }

/* ── Info block ── */
.sig-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* ── Service title ── */
.sig-title {
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.36vw, 1.48rem);
  letter-spacing: -.026em;
  line-height: 1.17;
  color: rgba(255,255,255,.90);
  max-width: 300px;
  transition: color .38s ease;
}
.sig-panel:hover .sig-title { color: rgba(255,255,255,.98); }

/* ── Description ── */
.sig-desc {
  font-size: .82rem;
  color: rgba(255,255,255,.48);
  line-height: 1.63;
  max-width: 290px;
  transition: color .38s ease;
}

/* ── Capability tags ── */
.sig-tags {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.sig-tag {
  font-family: var(--f-mono);
  font-size: .52rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(62,231,255,.32);
  background: transparent;
  border: 1px solid rgba(62,231,255,.13);
  border-radius: 3px;
  padding: 4px 10px;
  white-space: nowrap;
  transition: border-color .36s, color .36s, background .36s;
}
.sig-panel:hover .sig-tag {
  color: rgba(62,231,255,.68);
  background: rgba(62,231,255,.05);
  border-color: rgba(62,231,255,.22);
}

/* ── Arrow button — aligned to content baseline ── */
.sig-arrow {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  align-self: flex-end;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.028);
  color: rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: 32px;
  margin-bottom: 48px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 8px rgba(0,0,0,.32);
  transition:
    border-color .36s ease,
    color .36s ease,
    background .36s ease,
    box-shadow .36s ease,
    transform .44s cubic-bezier(.34,1.56,.64,1);
}
.sig-panel:hover .sig-arrow {
  border-color: rgba(62,231,255,.32);
  color: var(--cyan);
  background: rgba(62,231,255,.06);
  box-shadow: 0 0 16px rgba(62,231,255,.1), inset 0 1px 0 rgba(62,231,255,.07);
  transform: translateX(3px);
}

/* ── Tablet: maintain 2-col, reduce card height ── */
@media(max-width: 1024px) {
  .sig-panels {
    gap: 12px;
  }
  .sig-panel {
    height: 270px;
  }
  .sig-panel-body {
    padding: 0 26px;
    max-width: 320px;
  }
  .sig-arrow {
    margin-right: 22px;
    margin-bottom: 38px;
  }
}

/* ── Mobile: collapse to 1-column ── */
@media(max-width: 768px) {
  .sig-panels {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .sig-panel {
    height: 264px;
    background-position: center right 15%;
  }

  /* Heavier overlay on mobile for readability */
  .sig-panel::before {
    background:
      linear-gradient(
        90deg,
        rgba(4,4,10,.98) 0%,
        rgba(4,4,10,.96) 38%,
        rgba(4,4,10,.90) 60%,
        rgba(4,4,10,.76) 80%,
        rgba(4,4,10,.54) 100%
      ),
      linear-gradient(180deg, rgba(4,4,10,.3) 0%, transparent 28%, transparent 72%, rgba(4,4,10,.38) 100%);
  }

  .sig-panel-body {
    padding: 0 28px;
    max-width: 90%;
  }
  .sig-num {
    margin-bottom: 14px;
    font-size: .53rem;
  }
  .sig-info { gap: 13px; }
  .sig-title { font-size: clamp(1.18rem, 4.8vw, 1.5rem); }
  .sig-desc { font-size: .82rem; line-height: 1.66; }
  .sig-tags { margin-top: 3px; gap: 6px; }
  .sig-arrow { display: none; }
}

@media(max-width: 480px) {
  .sig-panel {
    height: 244px;
    border-radius: 12px;
  }
  .sig-panel-body {
    padding: 0 22px;
  }
  .sig-num {
    font-size: .50rem;
    margin-bottom: 11px;
  }
  .sig-info { gap: 11px; }
  .sig-title { font-size: clamp(1.08rem, 4.4vw, 1.34rem); }
  .sig-desc { font-size: .79rem; line-height: 1.63; }
  .sig-tags { gap: 5px; }
}

/* ═══════════════════════════════════════
   PRICING v2 — pricing-v2- namespace
═══════════════════════════════════════ */

.pricing-v2 {
  padding: 96px 0 72px;
  background:
    radial-gradient(circle at 50% 20%, rgba(0,201,177,.08), transparent 35%),
    linear-gradient(180deg, #020509 0%, #03070b 100%);
  border-top: 1px solid rgba(255,255,255,.08);
}

/* ── Header ── */
.pricing-v2-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 28px;
}

.pricing-v2-title {
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-family: var(--f-ui);
  font-weight: 600;
  letter-spacing: -.048em;
  color: var(--white);
  line-height: 0.94;
}

.pricing-v2-note {
  color: var(--white);
  font-size: .9rem;
  line-height: 1.7;
  max-width: 320px;
  padding-top: 28px;
  text-align: right;
}

/* ── Main grid: 3 cards + sidebar ── */
.pricing-v2-main {
  display: grid;
  grid-template-columns: repeat(3, 1fr) .78fr;
  gap: 18px;
  align-items: start;
}

/* ── Base card & sidebar ── */
.pricing-v2-card,
.pricing-v2-included {
  position: relative;
  background: linear-gradient(180deg, rgba(8,17,25,.95), rgba(4,9,14,.98));
  border: 1px solid rgba(150,220,255,.13);
  border-radius: 18px;
  padding: 30px 28px 80px;
  min-height: 580px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 24px 70px rgba(0,0,0,.32);
  transition: border-color .3s ease, transform .35s var(--ease-spring);
}

.pricing-v2-card:hover {
  border-color: rgba(150,220,255,.22);
  transform: translateY(-4px);
}

/* ── Featured card ── */
.pricing-v2-featured {
  border-color: rgba(0,201,177,.9);
  box-shadow: 0 0 48px rgba(0,201,177,.14), 0 0 20px rgba(0,201,177,.06), inset 0 1px 0 rgba(255,255,255,.06);
  padding-top: 40px;
}

.pricing-v2-featured:hover {
  border-color: rgba(0,201,177,1);
  transform: translateY(-6px);
  box-shadow: 0 0 80px rgba(0,201,177,.2), 0 0 32px rgba(0,201,177,.1);
}

/* ── Badge ── */
.pricing-v2-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cyan);
  color: #001010;
  font-family: var(--f-mono);
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: 5px 16px;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Card title ── */
.pricing-v2-card h3 {
  text-align: center;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 1rem;
  font-family: var(--f-ui);
  font-weight: 600;
  margin-bottom: 8px;
}

.pricing-v2-card-sub {
  text-align: center;
  color: var(--gray-2);
  font-size: .84rem;
  line-height: 1.55;
  margin-bottom: 14px;
}

/* ── Icon ── */
.pricing-v2-icon {
  display: block;
  width: 160px;
  height: 126px;
  object-fit: contain;
  margin: 8px auto 16px;
  filter: drop-shadow(0 0 20px rgba(0,201,177,.3));
}

/* ── Divider ── */
.pricing-v2-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  margin: 8px 0 16px;
}

/* ── Price block ── */
.pricing-v2-small,
.pricing-v2-meta {
  display: block;
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gray-3);
  font-size: .6rem;
}

.pricing-v2-price {
  color: var(--white);
  font-family: var(--f-display);
  font-size: 2.6rem;
  font-style: italic;
  line-height: .95;
  margin: 5px 0 5px;
}

/* ── Feature list ── */
.pricing-v2-card ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.pricing-v2-card li {
  color: var(--gray-1);
  font-size: .84rem;
  line-height: 1.35;
  padding-left: 18px;
  position: relative;
}

.pricing-v2-card li::before {
  content: "✓";
  color: #00c9b1;
  position: absolute;
  left: 0;
  font-size: .72rem;
  top: 1px;
  font-weight: 600;
}

/* ── Card CTA link ── */
.pricing-v2-link {
  position: absolute;
  bottom: 26px;
  left: 28px;
  right: 28px;
  color: var(--cyan);
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: .7rem;
  font-weight: 700;
  text-decoration: none;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  transition: color .2s, border-color .2s;
}

.pricing-v2-link:hover {
  color: var(--white);
  border-top-color: rgba(255,255,255,.16);
}

/* ── Included sidebar ── */
.pricing-v2-included {
  padding: 28px 24px;
  min-height: auto;
}

.pricing-v2-included-title {
  display: block;
  font-family: var(--f-mono);
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .68rem;
  margin-bottom: 28px;
  line-height: 1.6;
}

.pricing-v2-inc-item {
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.pricing-v2-inc-item:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.pricing-v2-inc-item strong,
.pricing-v2-custom strong {
  display: block;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .68rem;
  margin-bottom: 5px;
  font-family: var(--f-ui);
}

.pricing-v2-inc-item p,
.pricing-v2-custom p {
  color: var(--gray-2);
  font-size: .78rem;
  line-height: 1.55;
}

.pricing-v2-custom {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.pricing-v2-custom a {
  display: inline-block;
  margin-top: 14px;
  color: var(--cyan);
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .68rem;
  text-decoration: none;
  transition: color .2s;
}

.pricing-v2-custom a:hover {
  color: var(--cyan);
}

/* ── Add-ons strip ── */
.pricing-v2-addons {
  margin-top: 22px;
}

.pricing-v2-addons-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
}

.pricing-v2-addons-head > span {
  color: var(--cyan);
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .66rem;
  white-space: nowrap;
}

.pricing-v2-addons-head > div {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.07);
}

.pricing-v2-addons-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.pricing-v2-addon {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(8,17,25,.92), rgba(4,9,14,.97));
  border: 1px solid rgba(150,220,255,.09);
  border-radius: 14px;
  padding: 22px 20px 20px;
  overflow: hidden;
  transition:
    border-color .32s ease,
    box-shadow .32s ease,
    transform .32s var(--ease-spring);
}

.pricing-v2-addon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(62,231,255,.04), transparent 70%);
  opacity: 0;
  transition: opacity .32s ease;
  pointer-events: none;
  z-index: 0;
}

.pricing-v2-addon:hover {
  border-color: rgba(62,231,255,.16);
  box-shadow:
    0 0 0 1px rgba(62,231,255,.04),
    0 10px 32px rgba(0,0,0,.42),
    0 0 18px rgba(0,201,177,.05);
  transform: translateY(-4px);
}

.pricing-v2-addon:hover::before {
  opacity: 1;
}

/* Icon */
.addon-icon {
  width: 30px;
  height: 30px;
  color: var(--cyan);
  opacity: .42;
  filter: drop-shadow(0 0 8px rgba(62,231,255,.12));
  margin-bottom: 16px;
  flex-shrink: 0;
  display: block;
  transition: opacity .25s ease, transform .25s ease;
}

.addon-card:hover .addon-icon {
  opacity: .72;
  transform: translateY(-1px);
}

/* Title */
.pricing-v2-addon strong {
  display: block;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: .72rem;
  font-weight: 600;
  margin-bottom: 8px;
  font-family: var(--f-ui);
  line-height: 1.35;
  padding-right: 0;
}

/* Description */
.pricing-v2-addon p {
  flex: 1;
  color: var(--gray-2);
  font-size: .75rem;
  line-height: 1.6;
  margin-bottom: 18px;
}

/* Price row */
.addon-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.07);
  margin-top: auto;
}

.addon-from {
  font-family: var(--f-mono);
  font-size: .55rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray-3);
}

.addon-amount {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--white);
  line-height: 1;
  letter-spacing: -.01em;
}

.addon-period {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: .58rem;
  color: var(--gray-2);
  letter-spacing: .05em;
  margin-left: 1px;
}

/* ── Bottom CTA bar ── */
.pricing-v2-cta {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 80px 1fr 1fr auto;
  align-items: center;
  gap: 32px;
  background: linear-gradient(90deg, rgba(8,17,25,.97), rgba(5,10,15,.97));
  border: 1px solid rgba(150,220,255,.18);
  border-radius: 18px;
  padding: 28px 40px;
}

.pricing-v2-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pricing-v2-logo img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  opacity: .9;
}

.pricing-v2-cta h3 {
  color: var(--white);
  font-family: var(--f-ui);
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.03em;
}

.pricing-v2-cta p {
  color: var(--gray-2);
  font-size: .88rem;
  line-height: 1.65;
  padding-left: 32px;
  border-left: 1px solid rgba(255,255,255,.1);
  max-width: 280px;
}

.pricing-v2-cta a {
  background: linear-gradient(135deg, rgba(0,201,177,1), rgba(62,231,255,1));
  color: #001010;
  text-decoration: none;
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .74rem;
  font-weight: 700;
  padding: 16px 28px;
  border-radius: 999px;
  white-space: nowrap;
  transition: opacity .2s, transform .2s var(--ease-spring), box-shadow .2s;
}

.pricing-v2-cta a:hover {
  opacity: .92;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,201,177,.3);
}

/* ── Responsive ── */
@media (max-width:1100px) {
  .pricing-v2-main {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing-v2-included {
    grid-column: span 2;
    min-height: auto;
  }

  .pricing-v2-addons-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing-v2-cta {
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto auto;
  }

  .pricing-v2-cta p {
    grid-column: span 2;
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 20px;
  }

  .pricing-v2-cta a {
    grid-column: span 2;
    text-align: center;
  }
}

@media (max-width:720px) {
  .pricing-v2 { padding: 72px 0 56px; }

  .pricing-v2-head {
    flex-direction: column;
    gap: 10px;
  }

  .pricing-v2-note {
    padding-top: 0;
    text-align: left;
  }

  .pricing-v2-main {
    grid-template-columns: 1fr;
  }

  .pricing-v2-included {
    grid-column: auto;
    min-height: auto;
  }

  .pricing-v2-card,
  .pricing-v2-included {
    min-height: auto;
  }

  .pricing-v2-card {
    padding-bottom: 72px;
  }

  .pricing-v2-addons-grid {
    grid-template-columns: 1fr;
  }

  .pricing-v2-cta {
    grid-template-columns: 1fr;
    padding: 28px 24px;
    gap: 20px;
    text-align: center;
  }

  .pricing-v2-logo {
    display: none;
  }

  .pricing-v2-cta p {
    grid-column: auto;
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 18px;
  }

  .pricing-v2-cta a {
    grid-column: auto;
    display: block;
  }
}


/* ═══════════════════════════════════════
   FINAL CTA
═══════════════════════════════════════ */
#contact {
  border-top: 1px solid rgba(255,255,255,.05);
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(62,231,255,.046), transparent 68%),
    radial-gradient(ellipse 38% 28% at 88% 88%, rgba(100,80,220,.024), transparent 60%),
    radial-gradient(ellipse 30% 22% at 8% 80%, rgba(62,231,255,.018), transparent 65%);
}
.cta-section {
  padding: clamp(64px, 8vw, 96px) 0 clamp(56px, 6.5vw, 80px);
  text-align: center;
  position: relative;
}
.cta-orb-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ═══════════════════════════════════════
   CONTACT FORM
═══════════════════════════════════════ */
.cf-form {
  max-width: 760px;
  margin: 24px auto 0;
  text-align: left;
}
.cf-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1) 25%, rgba(255,255,255,.1) 75%, transparent);
  margin-bottom: 26px;
}
.cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
@media(max-width:580px){ .cf-row { grid-template-columns: 1fr; } }
.cf-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cf-field-full {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}
.cf-label {
  font-family: var(--f-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(100,100,136,.88);
  transition: color .22s ease;
}
.cf-field:focus-within .cf-label,
.cf-field-full:focus-within .cf-label { color: var(--cyan); }
.cf-input {
  width: 100%;
  background: rgba(255,255,255,.038);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: var(--r-m);
  padding: 15px 20px;
  font-family: var(--f-ui);
  font-size: .875rem;
  color: var(--white);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(0,0,0,.12);
  transition: border-color .22s ease, background .22s ease, box-shadow .22s ease;
  -webkit-appearance: none;
  appearance: none;
}
.cf-input::placeholder { color: rgba(110,110,142,.72); }
.cf-input:hover {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.055);
}
.cf-input:focus {
  border-color: rgba(62,231,255,.38);
  background: rgba(62,231,255,.028);
  box-shadow: 0 0 0 3px rgba(62,231,255,.1), inset 0 1px 0 rgba(255,255,255,.04);
}
/* ── Multi-select dropdown ── */
.cf-multisel { position: relative; width: 100%; }
.cf-multisel-trigger {
  width: 100%;
  background: rgba(255,255,255,.038);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: var(--r-m);
  padding: 15px 20px;
  font-family: var(--f-ui);
  font-size: .875rem;
  color: var(--white);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(0,0,0,.12);
  transition: border-color .22s ease, background .22s ease, box-shadow .22s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cf-multisel-trigger:hover {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.055);
}
.cf-multisel-trigger:focus,
.cf-multisel-trigger.open {
  border-color: rgba(62,231,255,.38);
  background: rgba(62,231,255,.028);
  box-shadow: 0 0 0 3px rgba(62,231,255,.1), inset 0 1px 0 rgba(255,255,255,.04);
}
.cf-multisel-trigger.err { border-color: rgba(255,77,106,.6) !important; }
.cf-ms-chevron { flex-shrink: 0; transition: transform .22s ease; }
.cf-multisel-trigger.open .cf-ms-chevron { transform: rotate(180deg); }
.cf-multisel-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gray-3); }
.cf-multisel-lbl.has-val { color: var(--white); }
.cf-multisel-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: #090916;
  border: 1px solid rgba(255,255,255,.12);
  border-top-color: rgba(62,231,255,.18);
  border-radius: var(--r-m);
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease, transform .24s ease;
  box-shadow:
    0 28px 72px rgba(0,0,0,.72),
    0 8px 24px rgba(0,0,0,.38),
    0 0 0 1px rgba(62,231,255,.04),
    inset 0 1px 0 rgba(255,255,255,.06);
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(62,231,255,.2) rgba(255,255,255,.02);
}
.cf-multisel-panel::-webkit-scrollbar { width: 4px; }
.cf-multisel-panel::-webkit-scrollbar-track { background: rgba(255,255,255,.02); }
.cf-multisel-panel::-webkit-scrollbar-thumb {
  background: rgba(62,231,255,.16);
  border-radius: 4px;
}
.cf-multisel-panel::-webkit-scrollbar-thumb:hover { background: rgba(62,231,255,.28); }
.cf-multisel-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.cf-ms-group {
  font-family: var(--f-mono);
  font-size: .54rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(90,90,122,.9);
  padding: 14px 18px 7px;
}
.cf-ms-group + .cf-ms-group,
.cf-ms-divider {
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 6px;
  padding-top: 14px;
}
.cf-mi {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 18px;
  cursor: pointer;
  transition: background .18s ease;
  user-select: none;
  -webkit-user-select: none;
}
.cf-mi:hover:not(.disabled) { background: rgba(62,231,255,.042); }
.cf-mi.disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }
.cf-mi input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.cf-mi-box {
  width: 17px; height: 17px;
  border: 1.5px solid rgba(255,255,255,.16);
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.cf-mi:hover:not(.disabled) .cf-mi-box {
  border-color: rgba(62,231,255,.32);
  background: rgba(62,231,255,.04);
}
.cf-mi:has(input:checked) .cf-mi-box {
  border-color: var(--cyan);
  background: rgba(62,231,255,.08);
  box-shadow: 0 0 0 2px rgba(62,231,255,.1);
}
.cf-mi:has(input:checked) .cf-mi-box::after {
  content: '';
  display: block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 7px rgba(62,231,255,.55);
}
.cf-mi-txt { font-family: var(--f-ui); font-size: .85rem; color: rgba(255,255,255,.82); letter-spacing: .01em; }
.cf-field:focus-within .cf-label,
.cf-field:has(.cf-multisel-panel.open) .cf-label { color: var(--cyan); }
.cf-field:has(.cf-multisel) { z-index: 10; }
.cf-textarea { resize: none; height: 200px; line-height: 1.82; }
.cf-submit-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-top: 4px;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.cf-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--cyan);
  color: #04040A;
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .03em;
  padding: 16px 46px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .22s var(--ease-spring), box-shadow .22s ease;
}
.cf-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,.16) 0%, transparent 55%);
  pointer-events: none;
}
.cf-submit:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 38px rgba(0,201,177,.48);
}
.cf-submit:active { transform: scale(.97); box-shadow: none; }
.cf-footnote {
  font-family: var(--f-mono);
  font-size: .67rem;
  color: rgba(165,165,200,.82);
  letter-spacing: .07em;
}
.cf-direct {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.cf-direct-link {
  font-family: var(--f-mono);
  font-size: .67rem;
  color: rgba(128,128,168,.72);
  letter-spacing: .05em;
  text-decoration: none;
  transition: color .22s ease;
}
.cf-direct-link:hover { color: rgba(200,240,255,.9); }
.cf-direct-sep {
  color: rgba(100,100,132,.4);
  font-family: var(--f-mono);
  font-size: .58rem;
  line-height: 1;
}
.cf-field, .cf-field-full, .cf-submit-row {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}
.cf-field.cf-in, .cf-field-full.cf-in, .cf-submit-row.cf-in {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════
   NEUTRON FOOTER — PREMIUM CLOSING
═══════════════════════════════════════ */

.neutron-footer {
  position: relative;
  z-index: 1;
  padding: clamp(36px, 4vw, 52px) 0 0;
  background:
    radial-gradient(ellipse 55% 30% at 50% 12%, rgba(62,231,255,.04), transparent 100%),
    radial-gradient(ellipse 70% 44% at 14% 72%, rgba(62,231,255,.028), transparent 68%),
    radial-gradient(circle at 84% 28%, rgba(100,80,220,.025), transparent 44%),
    radial-gradient(ellipse 40% 20% at 60% 96%, rgba(62,231,255,.018), transparent 70%),
    #04040A;
  overflow: hidden;
}

.neutron-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .32;
  pointer-events: none;
}

.footer-shell {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 768px) {
  .footer-shell { padding: 0 20px; }
}

/* ── CTA Section ── */

.footer-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .8fr);
  gap: clamp(36px, 5vw, 72px);
  padding: clamp(40px, 4.5vw, 60px) 0;
  align-items: center;
  overflow: hidden;
}

.footer-kicker {
  font-family: var(--f-mono);
  color: var(--cyan);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 20px;
  opacity: .82;
}

.footer-headline {
  font-family: var(--f-ui);
  font-weight: 600;
  color: var(--white);
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  line-height: 0.94;
  letter-spacing: -.048em;
  max-width: 640px;
}

.footer-headline em {
  font-family: var(--f-display);
  color: var(--cyan);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -.01em;
  text-shadow: 0 0 28px rgba(62,231,255,.18);
}

.footer-copy {
  margin-top: 16px;
  color: rgba(255,255,255,.54);
  font-size: clamp(.84rem, .96vw, .93rem);
  line-height: 1.80;
  max-width: 460px;
}

.footer-cta-right {
  align-self: center;
}

.footer-main-btn {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border: 1px solid rgba(62,231,255,.40);
  border-radius: 100px;
  color: rgba(255,255,255,.84);
  text-decoration: none;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(62,231,255,.026);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 18px rgba(62,231,255,.05);
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
}

.footer-main-btn svg {
  color: var(--cyan);
  flex-shrink: 0;
  transition: transform .26s ease;
}

.footer-main-btn:hover {
  background: rgba(62,231,255,.09);
  border-color: rgba(62,231,255,.60);
  color: var(--white);
  box-shadow: 0 0 26px rgba(62,231,255,.12);
}

.footer-main-btn:hover svg {
  transform: translateX(4px);
}

.footer-email {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.68);
  text-decoration: none;
  font-size: .88rem;
  transition: color .2s ease;
}

.footer-email:hover {
  color: var(--cyan);
}

.footer-mini-line {
  height: 1px;
  width: 100%;
  margin: 20px 0;
  background: linear-gradient(90deg, rgba(255,255,255,.14), transparent 80%);
}

/* Availability trust element */
.footer-avail {
  display: block;
}

.footer-avail-label {
  font-size: .82rem;
  color: rgba(255,255,255,.52);
  line-height: 1.78;
}

.footer-region {
  font-family: var(--f-mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.26);
  margin-top: 11px;
}

/* ── CTA Atmospheric Layer ── */

.footer-cta-atmo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.footer-cta-atmo-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(88px);
}

.footer-cta-atmo-orb:nth-child(1) {
  width: 480px;
  height: 240px;
  background: radial-gradient(ellipse, rgba(62,231,255,.04), transparent 70%);
  top: -70px;
  left: -30px;
}

.footer-cta-atmo-orb:nth-child(2) {
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(100,80,220,.03), transparent 70%);
  bottom: -90px;
  right: 6%;
}

.footer-cta-atmo-orb:nth-child(3) {
  width: 200px;
  height: 140px;
  background: radial-gradient(ellipse, rgba(62,231,255,.03), transparent 70%);
  top: 38%;
  right: 24%;
}

.footer-cta-left,
.footer-cta-right {
  position: relative;
  z-index: 1;
}

/* ── Glowing Divider ── */

.footer-divider {
  height: 1px;
  background:
    radial-gradient(circle at 50% 50%, rgba(62,231,255,.55), rgba(62,231,255,.12) 14%, transparent 38%),
    linear-gradient(90deg, transparent 8%, rgba(62,231,255,.14) 35%, rgba(62,231,255,.22) 50%, rgba(62,231,255,.14) 65%, transparent 92%);
  box-shadow: 0 0 18px rgba(62,231,255,.14), 0 1px 0 rgba(62,231,255,.04);
}

/* ── Main Footer Grid ── */

.footer-main {
  position: relative;
  display: grid;
  grid-template-columns: 1.75fr .72fr 1.0fr 1.15fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
  padding: clamp(44px, 5vw, 60px) 0 clamp(40px, 4.5vw, 56px);
  overflow: hidden;
}

.footer-logo-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.footer-logo-row img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .96;
}

.footer-brand-lockup {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.footer-brand-lockup span {
  font-family: var(--f-ui);
  font-size: clamp(1.0rem, 1.1vw, 1.18rem);
  font-weight: 500;
  letter-spacing: .44em;
  color: var(--white);
  line-height: 1;
}

.footer-brand-lockup small {
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--cyan);
  opacity: .72;
}

.footer-brand-rule {
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  margin: 0 0 22px;
  box-shadow: 0 0 10px rgba(62,231,255,.22);
}

.footer-brand-statement {
  max-width: 320px;
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: clamp(.86rem, .96vw, .96rem);
  line-height: 1.76;
  letter-spacing: -.01em;
}

.footer-brand-statement em {
  color: var(--cyan);
  font-style: italic;
  font-family: var(--f-display);
  font-size: 1em;
  text-shadow: 0 0 16px rgba(62,231,255,.12);
}

.footer-intake {
  margin-top: 22px;
  color: rgba(255,255,255,.26);
  font-family: var(--f-mono);
  font-size: .60rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.6;
}

.footer-brand {
  position: relative;
  z-index: 2;
}

.footer-col {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 0;
}

.footer-col h4 {
  font-family: var(--f-mono);
  color: var(--cyan);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 20px;
  opacity: .82;
}

.footer-col a {
  color: rgba(255,255,255,.62);
  text-decoration: none;
  font-size: clamp(.84rem, .94vw, .92rem);
  line-height: 1.4;
  margin-bottom: 14px;
  transition: color .22s ease, transform .22s ease;
}

.footer-col a:hover {
  color: var(--white);
  transform: translateX(4px);
}

.footer-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.footer-contact-link svg {
  color: rgba(255,255,255,.56);
  flex-shrink: 0;
}

.follow-title {
  margin-top: 22px;
  margin-bottom: 14px;
}

.footer-socials {
  display: flex;
  gap: 10px;
}

.footer-socials a {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.48);
  border: 1px solid rgba(255,255,255,.09);
  background: transparent;
  margin: 0;
  transition:
    color .22s ease,
    border-color .22s ease,
    background .22s ease,
    transform .22s var(--ease-spring),
    box-shadow .22s ease;
}

.footer-socials a:hover {
  color: var(--cyan);
  border-color: rgba(62,231,255,.28);
  background: rgba(62,231,255,.03);
  transform: translateY(-2px);
  box-shadow: 0 0 10px rgba(62,231,255,.06);
}

/* ── Bottom Legal Bar ── */

.footer-bottom {
  position: relative;
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: rgba(255,255,255,.30);
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: transparent;
}

.footer-bottom::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 36%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(62,231,255,.22), transparent);
  opacity: .55;
}

.footer-bottom i {
  display: inline-block;
  width: 20px;
  height: 1px;
  margin-left: 12px;
  background: rgba(62,231,255,.30);
  vertical-align: middle;
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-legal-links a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-legal-links a:hover {
  color: rgba(255,255,255,.70);
}

.footer-legal-links i {
  display: inline;
  width: auto;
  height: auto;
  margin: 0;
  background: none;
  opacity: 0.4;
  font-style: normal;
  vertical-align: baseline;
}

/* ── Footer Responsive ── */

@media (max-width: 980px) {
  .footer-cta {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 32px 44px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .neutron-footer {
    padding: 28px 0 0;
  }

  .footer-cta {
    padding: clamp(28px, 4vw, 40px) 0;
  }

  .footer-headline {
    font-size: clamp(2.0rem, 9vw, 2.8rem);
    line-height: .95;
  }

  .footer-copy br {
    display: none;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 0 36px;
  }

  .footer-logo-row img {
    width: 36px;
    height: 36px;
  }

  .footer-brand-lockup span {
    font-size: .9rem;
    letter-spacing: .32em;
  }

  .footer-brand-lockup small {
    font-size: .56rem;
    letter-spacing: .2em;
  }

  .footer-brand-statement {
    font-size: .86rem;
    line-height: 1.72;
  }

  .footer-intake {
    margin-top: 18px;
    font-size: .74rem;
  }

  .footer-col {
    padding-top: 0;
  }

  .footer-bottom {
    min-height: auto;
    padding: 24px 0 0;
    flex-direction: column;
    align-items: flex-start;
    font-size: .62rem;
    line-height: 1.7;
    letter-spacing: .16em;
  }

  .footer-main-btn {
    min-height: 46px;
    padding: 0 18px;
    font-size: .70rem;
  }
}

/* ── Service Region ── */
.serve-region {
  border-top: 1px solid var(--bd);
  border-bottom: 1px solid var(--bd);
  padding: 30px 0;
  text-align: center;
}
.serve-region-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.serve-region-label {
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--cyan);
  text-transform: uppercase;
  opacity: .72;
}
.serve-region-cities {
  font-size: clamp(.76rem, 1vw, .88rem);
  color: var(--gray-1);
  letter-spacing: .06em;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 2px;
}
.serve-sep {
  color: var(--gray-3);
  margin: 0 8px;
}
.serve-region-note {
  font-size: .72rem;
  color: var(--gray-2);
  letter-spacing: .03em;
}

.cs-browser-bar {
  background: #080810;
  border-bottom: 1px solid rgba(255,255,255,.048);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cs-browser-dots { display: flex; gap: 5px; flex-shrink: 0; }
.cs-browser-dots span { width: 10px; height: 10px; border-radius: 50%; display: block; }

.cs-browser-url-bar {
  flex: 1;
  background: rgba(255,255,255,.04);
  border-radius: 5px;
  height: 22px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.035);
}
.cs-browser-url-bar span {
  font-family: var(--f-mono);
  font-size: .55rem;
  color: rgba(90,90,122,.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════
   PORTFOLIO V3 — FEATURED WORK SHOWCASE
═══════════════════════════════════════ */

/* ── Head: editorial headline ── */
.pf-head {
  display: grid;
  grid-template-columns: 1fr minmax(0, 380px);
  align-items: end;
  gap: 40px 64px;
  margin-bottom: 28px;
}

.pf-head-left {
  min-width: 0;
}

.pf-head-left h2 {
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  letter-spacing: -.048em;
  line-height: 0.94;
  color: var(--white);
  margin-bottom: 16px;
}

.pf-title-line {
  height: 1px;
  background: linear-gradient(to right, rgba(255,255,255,.08), transparent);
  margin-bottom: 0;
}

.pf-head-desc {
  font-size: .84rem;
  color: var(--gray-2);
  line-height: 1.82;
  opacity: .78;
  padding-bottom: 2px;
}

/* ── Tabs row ── */
.pf-tabs-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 52px;
  border-bottom: 1px solid rgba(255,255,255,.065);
}

.pf-tabs { display: flex; gap: 0; }

.pf-tab {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 32px 20px;
  border-radius: 0;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: rgba(200,216,255,.26);
  font-family: var(--f-ui);
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .01em;
  cursor: pointer;
  transition: color .24s, border-color .24s;
  margin-bottom: -1px;
  white-space: nowrap;
}
.pf-tab span {
  font-family: var(--f-mono);
  font-size: .52rem;
  letter-spacing: .18em;
  color: rgba(200,216,255,.18);
  transition: color .24s;
}
.pf-tab:hover { color: rgba(200,216,255,.58); background: transparent; border-color: rgba(255,255,255,.08); }
.pf-tab.active {
  color: var(--white);
  background: transparent;
  border-bottom-color: var(--cyan);
}
.pf-tab.active span { color: var(--cyan); }

.pf-arrows { display: flex; gap: 5px; align-self: center; padding-bottom: 18px; }
.pf-arrow {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
  background: transparent;
  color: var(--gray-3);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s, color .2s;
}
.pf-arrow:hover { border-color: rgba(255,255,255,.18); color: var(--white); }

/* ── Showcase ── */
.pf-showcase {
  display: grid;
  grid-template-columns: 1fr 1.9fr;
  gap: 72px;
  align-items: center;
  margin-bottom: 96px;
}
@media (max-width: 1024px) { .pf-showcase { grid-template-columns: 1fr; gap: 40px; align-items: start; } }

.pf-copy { display: none; }
.pf-copy.active { display: flex; flex-direction: column; }

.pf-copy h3 {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(2.3rem, 3.8vw, 3.6rem);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.02;
  color: var(--white);
  margin-bottom: 12px;
}

.pf-subtitle {
  font-family: var(--f-mono);
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(90,90,122,.9);
  margin-bottom: 22px;
}

.pf-desc {
  font-size: .86rem;
  color: var(--gray-2);
  line-height: 1.86;
  margin-bottom: 30px;
  max-width: 340px;
}

.pf-view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan);
  text-decoration: none;
  transition: opacity .2s, gap .2s;
  align-self: flex-start;
}
.pf-view:hover { opacity: .7; gap: 10px; }

/* ── Browser wrap ── */
.pf-browser-wrap {
  position: relative;
}
.pf-browser-wrap::before {
  content: '';
  position: absolute;
  inset: -28% 0%;
  background: radial-gradient(ellipse at 50% 55%, rgba(62,231,255,.13) 0%, transparent 62%);
  filter: blur(60px);
  z-index: -1;
  pointer-events: none;
  transform: translateZ(0);
}
.pf-browser-wrap::after {
  content: '';
  position: absolute;
  left: 2%; right: 2%;
  bottom: -96px; height: 192px;
  background: radial-gradient(ellipse at center, rgba(62,231,255,.28) 0%, transparent 60%);
  filter: blur(48px);
  z-index: -1;
  pointer-events: none;
  transform: translateZ(0);
}

.pf-browser {
  display: none;
  border-radius: 13px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: #07070F;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.016),
    0 40px 100px rgba(0,0,0,.76),
    0 16px 40px rgba(0,0,0,.55),
    0 0 80px rgba(62,231,255,.09);
  transform: none !important;
  will-change: auto;
  backface-visibility: visible;
  transition: border-color .35s ease;
}
.pf-browser.active { display: block; }
.pf-browser:hover {
  transform: none !important;
  border-color: rgba(62,231,255,.2);
  box-shadow:
    0 0 0 1px rgba(62,231,255,.04),
    0 48px 120px rgba(0,0,0,.82),
    0 0 100px rgba(62,231,255,.13);
}
@media (max-width: 1024px) {
  .pf-browser-wrap::before { display: none; }
  .pf-browser-wrap::after { display: none; }
}

.pf-browser img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  image-rendering: auto;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

@media (max-width: 768px) {
  .pf-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
  .pf-head-desc { max-width: 100%; }
  .pf-tab { padding: 12px 20px 16px; font-size: .8rem; gap: 10px; }
  .pf-tabs-row { margin-bottom: 36px; }
  .pf-showcase { gap: 32px; margin-bottom: 64px; }
  .pf-copy h3 { font-size: clamp(2rem, 7vw, 2.6rem); }
  .pf-desc { max-width: 100%; }
}
@media (max-width: 480px) {
  .pf-tab { padding: 10px 16px 14px; font-size: .78rem; }
  .pf-tabs-row { margin-bottom: 28px; }
}

/* ── Case study panel: only active entry is visible ── */
.cs-panel {
  position: relative;
}
.cs-entry {
  display: none !important;
}
.cs-entry.active {
  display: block !important;
}

/* ── Transformation title divider ── */
.pf-transform-title {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 36px;
}
.pf-transform-title span {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.1), transparent);
}
.pf-transform-title strong {
  font-family: var(--f-mono);
  font-size: .82rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 400;
  white-space: nowrap;
}

/* ── Transformation grid override: 3 equal cols for the card set ── */
.cs-transform-section .cs-transform-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  align-items: stretch !important;
}
@media (max-width: 860px) {
  .cs-transform-section .cs-transform-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Remove extra top margin — pf-transform-title handles the separation */
.cs-entry .cs-transform-section { margin-top: 0; }

/* ─────────────────────────────────────
   PROBLEM / SOLUTION / OUTCOME CARDS
───────────────────────────────────── */
.problem-card,
.solution-card,
.outcome-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: 30px 26px 28px;
  border-radius: 18px;
}

/* PROBLEM */
.problem-card {
  --red: #ff4d58;
  background:
    linear-gradient(to bottom, rgba(5,7,13,.97) 0%, rgba(5,7,13,.96) 48%, rgba(5,7,13,.88) 72%, rgba(5,7,13,.74) 100%),
    url("assets/photos/problem-card-bg-optimized.webp") bottom center / cover no-repeat;
  border: 1px solid rgba(255,77,88,.18);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    -20px 8px 60px rgba(255,77,88,.1),
    0 24px 70px rgba(0,0,0,.4);
}
.problem-card::before {
  content: "";
  position: absolute;
  left: -30%; bottom: -32%;
  width: 70%; height: 70%;
  background: radial-gradient(circle, rgba(255,77,88,.28), transparent 68%);
  opacity: .35;
  pointer-events: none;
}
.problem-card::after {
  content: "";
  position: absolute;
  left: 13%; right: 13%; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,77,88,.95) 12%, rgba(255,77,88,.95) 88%, transparent);
  box-shadow: 0 0 22px rgba(255,77,88,.65);
  pointer-events: none;
}
.problem-card .problem-number {
  position: absolute;
  top: 14px; right: 22px;
  font-size: 108px;
  line-height: 1;
  font-weight: 800;
  color: rgba(255,255,255,.04);
  letter-spacing: -0.08em;
  pointer-events: none;
}
.problem-card .problem-icon {
  width: 56px; height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--red);
  background: rgba(255,77,88,.055);
  border: 1px solid rgba(255,77,88,.38);
  box-shadow: 0 0 0 6px rgba(255,77,88,.04), 0 0 24px rgba(255,77,88,.18);
}
.problem-card .problem-icon svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.problem-card .problem-content {
  position: relative;
  z-index: 2;
  margin-top: 28px;
}
.problem-card .problem-label {
  margin: 0 0 12px;
  color: var(--red);
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.problem-card .problem-text {
  margin: 0;
  color: rgba(246,248,255,.9);
  font-size: 0.94rem;
  line-height: 1.72;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* SOLUTION */
.solution-card {
  --sol-cyan: #3EE7FF;
  background:
    linear-gradient(to bottom, rgba(5,7,13,.97) 0%, rgba(5,7,13,.96) 48%, rgba(5,7,13,.88) 72%, rgba(4,10,16,.76) 100%),
    url("assets/photos/solution-cyan-overlay-optimized.webp") bottom center / cover no-repeat;
  border: 1px solid rgba(62,231,255,.15);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 8px 60px rgba(62,231,255,.07),
    0 24px 70px rgba(0,0,0,.4);
}
.solution-card::before {
  content: "";
  position: absolute;
  left: -20%; bottom: -28%;
  width: 65%; height: 65%;
  background: radial-gradient(circle, rgba(62,231,255,.16), transparent 68%);
  opacity: .3;
  pointer-events: none;
}
.solution-card::after {
  content: "";
  position: absolute;
  left: 13%; right: 13%; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(62,231,255,.9) 12%, rgba(62,231,255,.9) 88%, transparent);
  box-shadow: 0 0 22px rgba(62,231,255,.5);
  pointer-events: none;
}
.solution-card .solution-number {
  position: absolute;
  top: 14px; right: 22px;
  font-size: 108px;
  line-height: 1;
  font-weight: 800;
  color: rgba(255,255,255,.04);
  letter-spacing: -0.08em;
  pointer-events: none;
}
.solution-card .solution-icon {
  width: 56px; height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--sol-cyan);
  background: rgba(62,231,255,.055);
  border: 1px solid rgba(62,231,255,.38);
  box-shadow: 0 0 0 6px rgba(62,231,255,.04), 0 0 24px rgba(62,231,255,.18);
}
.solution-card .solution-icon svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.solution-card .solution-content {
  position: relative;
  z-index: 2;
  margin-top: 28px;
}
.solution-card .solution-label {
  margin: 0 0 12px;
  color: var(--sol-cyan);
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.solution-card .solution-text {
  margin: 0;
  color: rgba(246,248,255,.9);
  font-size: 0.94rem;
  line-height: 1.72;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* OUTCOME */
.outcome-card {
  --gold: #C9A84C;
  background:
    linear-gradient(to bottom, rgba(5,7,13,.97) 0%, rgba(5,7,13,.96) 48%, rgba(5,7,13,.88) 72%, rgba(5,7,13,.74) 100%),
    url("assets/photos/outcome-gold-overlay-optimized.webp") bottom center / cover no-repeat;
  border: 1px solid rgba(201,168,76,.16);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    20px 8px 60px rgba(201,168,76,.08),
    0 24px 70px rgba(0,0,0,.4);
}
.outcome-card::before {
  content: "";
  position: absolute;
  right: -20%; bottom: -30%;
  width: 65%; height: 65%;
  background: radial-gradient(circle, rgba(201,168,76,.22), transparent 68%);
  opacity: .3;
  pointer-events: none;
}
.outcome-card::after {
  content: "";
  position: absolute;
  left: 13%; right: 13%; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,.9) 12%, rgba(201,168,76,.9) 88%, transparent);
  box-shadow: 0 0 22px rgba(201,168,76,.55);
  pointer-events: none;
}
.outcome-card .outcome-number {
  position: absolute;
  top: 14px; right: 22px;
  font-size: 108px;
  line-height: 1;
  font-weight: 800;
  color: rgba(255,255,255,.04);
  letter-spacing: -0.08em;
  pointer-events: none;
}
.outcome-card .outcome-icon {
  width: 56px; height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold);
  background: rgba(201,168,76,.055);
  border: 1px solid rgba(201,168,76,.38);
  box-shadow: 0 0 0 6px rgba(201,168,76,.04), 0 0 24px rgba(201,168,76,.18);
}
.outcome-card .outcome-icon svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.outcome-card .outcome-content {
  position: relative;
  z-index: 2;
  margin-top: 28px;
}
.outcome-card .outcome-label {
  margin: 0 0 12px;
  color: var(--gold);
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.outcome-card .outcome-text {
  margin: 0;
  color: rgba(246,248,255,.9);
  font-size: 0.94rem;
  line-height: 1.72;
  font-weight: 500;
  letter-spacing: -0.01em;
}

@media (max-width: 768px) {
  .problem-card, .solution-card, .outcome-card {
    min-height: 260px;
    padding: 26px 22px 24px;
  }
  .problem-card .problem-text,
  .solution-card .solution-text,
  .outcome-card .outcome-text { font-size: 0.88rem; }
  .problem-card .problem-icon,
  .solution-card .solution-icon,
  .outcome-card .outcome-icon { width: 54px; height: 54px; }
}


/* ═══════════════════════════════════════════════════
   RESPONSIVE REFINEMENT PASS
   Premium multi-breakpoint quality system
═══════════════════════════════════════════════════ */

/* ── 1. Global overflow containment ── */

html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  max-width: 100%;
  overflow-x: clip;
  position: relative;
}

img, video, canvas, svg {
  max-width: 100%;
}

/* ── 2. Navigation: mobile ── */

@media (max-width: 900px) {

  #nav { padding: 14px 0; }

}

/* ── 3. Hero: mobile typography + stability ── */

@media (max-width: 768px) {
  .hero-h1 {
    font-size: clamp(2rem, 8.2vw, 2.9rem);
    overflow-wrap: break-word;
  }
}

@media (max-width: 480px) {
  .hero-h1 {
    font-size: clamp(1.88rem, 8.8vw, 2.5rem);
    line-height: 1.05;
  }
}

@media (max-width: 390px) {
  .hero-h1 {
    font-size: clamp(1.72rem, 10.2vw, 2.1rem);
  }
}

/* ── 4. Services: tablet intermediate ── */

@media (max-width: 960px) and (min-width: 769px) {

  .sig-heading {
    font-size: clamp(2rem, 4.8vw, 3.2rem);
  }

  .sig-intro-grid {
    gap: 40px;
  }

  .sig-panel {
    height: 292px;
  }

  .sig-panel-body {
    padding: 0 28px;
    max-width: 310px;
  }

  .sig-arrow {
    margin-right: 18px;
    margin-bottom: 36px;
  }

}

/* ── 5. Work section: responsive refinement ── */

/* Head collapses to single column earlier */
@media (max-width: 960px) {
  .pf-head {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 20px;
  }

  .pf-head-left h2 {
    font-size: clamp(2.1rem, 5.2vw, 3rem);
  }
}

/* Tabs wrap gracefully */
@media (max-width: 560px) {
  .pf-tabs-row {
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-bottom: 24px;
  }

  .pf-tabs {
    flex: 1;
    min-width: 0;
  }

  .pf-tab {
    padding: 10px 16px 14px;
    font-size: .78rem;
    gap: 8px;
  }
}

/* On very small screens hide numeric label */
@media (max-width: 400px) {
  .pf-tab {
    padding: 10px 10px 14px;
    font-size: .74rem;
    gap: 5px;
  }

  .pf-tab span {
    display: none;
  }
}

/* Browser mockup mobile */
@media (max-width: 768px) {
  .pf-showcase {
    gap: 26px;
    margin-bottom: 52px;
  }

  .pf-browser {
    border-radius: 10px;
  }

  .pf-copy h3 {
    font-size: clamp(1.9rem, 7.5vw, 2.6rem);
  }
}

@media (max-width: 480px) {
  .pf-copy h3 {
    font-size: clamp(1.72rem, 8.5vw, 2.1rem);
  }

  .pf-showcase {
    gap: 22px;
    margin-bottom: 44px;
  }

  .cs-transform-section .cs-transform-grid {
    gap: 12px !important;
  }

  .problem-card,
  .solution-card,
  .outcome-card {
    min-height: 220px;
    padding: 22px 18px 20px;
    border-radius: 14px;
  }

  .problem-card .problem-text,
  .solution-card .solution-text,
  .outcome-card .outcome-text {
    font-size: .85rem;
  }
}

/* ── 6. Pricing: refined multi-breakpoint ── */

/* Mid-tablet: 2-col cards */
@media (max-width: 960px) and (min-width: 721px) {
  .pricing-v2-main {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .pricing-v2-included {
    grid-column: span 2;
  }
}

/* Addons: 2-col earlier */
@media (max-width: 960px) {
  .pricing-v2-addons-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .pricing-v2-card {
    min-height: auto;
  }

  .pricing-v2-icon {
    width: 120px;
    height: 96px;
  }

  .pricing-v2-title {
    font-size: clamp(1.9rem, 7vw, 2.8rem);
  }

  .pricing-v2-cta {
    padding: 24px 28px;
    gap: 18px;
  }

  .pricing-v2-cta h3 {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .pricing-v2 {
    padding: 64px 0 52px;
  }

  .pricing-v2-title {
    font-size: clamp(1.72rem, 8vw, 2.2rem);
  }

  .pricing-v2-icon {
    width: 100px;
    height: 80px;
  }

  .pricing-v2-addons-grid {
    grid-template-columns: 1fr;
  }

  .pricing-v2-cta {
    padding: 22px 18px;
    gap: 16px;
    text-align: center;
  }

  .pricing-v2-cta h3 {
    font-size: 1.22rem;
  }

  .pricing-v2-cta a {
    font-size: .68rem;
    padding: 14px 22px;
  }
}

/* ── 7. Contact: form mobile polish ── */

@media (max-width: 580px) {
  .cf-submit {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .cta-section > div > p {
    font-size: .86rem !important;
    max-width: 100% !important;
  }

  .cf-textarea {
    height: 160px;
  }

  .cf-submit {
    font-size: .84rem;
    padding: 15px 28px;
  }

  .cf-submit-row {
    padding-top: 24px;
    gap: 12px;
  }
}

/* ── 8. Footer: mobile refinement ── */

@media (max-width: 480px) {

  .footer-headline {
    font-size: clamp(1.8rem, 9.5vw, 2.4rem);
  }

  .footer-main-btn {
    min-height: 46px;
    font-size: .68rem;
    letter-spacing: .08em;
  }

  .footer-brand-statement {
    max-width: 100%;
    font-size: .84rem;
  }

  .footer-bottom {
    gap: 8px;
  }
}

/* ── 9. Very small screens: 375–390px ── */

@media (max-width: 390px) {

  .container,
  .footer-shell {
    padding-left: 16px;
    padding-right: 16px;
  }

  section {
    padding: clamp(52px, 9vw, 80px) 0;
  }

  .sig-heading {
    font-size: clamp(1.8rem, 9.2vw, 2.4rem);
  }

  .pricing-v2-title {
    font-size: clamp(1.6rem, 9.5vw, 2.1rem);
  }

  .footer-headline {
    font-size: clamp(1.65rem, 10vw, 2.2rem);
  }
}

/* ── 10. Ultrawide: contained layout ── */

@media (min-width: 1600px) {
  .container,
  .footer-shell {
    max-width: 1360px;
  }
}


/* ═══════════════════════════════════════
   RESPONSIVE REFINEMENT v2
   Hero · Nav · Proof Points · Container Harmony
═══════════════════════════════════════ */

/* ── Hero: flexible flow, no compression ── */
#hero {
  height: auto;
}

.hero-content {
  padding-top: clamp(100px, 14svh, 136px);
  padding-bottom: clamp(48px, 7svh, 72px);
}

/* Hero element spacing — extracted from inline styles */
.hero-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(20px, 3.2svh, 32px);
}

/* Hero proof points */
.hero-proof {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 4px;
  overflow: hidden;
}

.hero-proof-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.hero-proof-dot {
  width: 3px;
  height: 3px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--cyan);
  flex-shrink: 0;
}

.hero-proof-label {
  font-size: .72rem;
  color: var(--white);
  letter-spacing: .04em;
  white-space: nowrap;
}

/* ── Eyebrow: scale down on mobile ── */
@media (max-width: 640px) {
  .eyebrow {
    font-size: .76rem;
    letter-spacing: .12em;
  }
  .eyebrow-pre {
    font-size: .88rem;
  }
}

@media (max-width: 480px) {
  .eyebrow {
    font-size: .68rem;
    letter-spacing: .08em;
  }
  .eyebrow-pre {
    display: none;
  }
}

/* ── Hero layout: mobile ── */
@media (max-width: 768px) {
  .hero-content {
    padding-top: clamp(84px, 12svh, 108px);
    padding-bottom: clamp(40px, 6svh, 60px);
  }

  .hero-proof {
    gap: 12px 16px;
  }
}

@media (max-width: 480px) {
  .hero-content {
    padding-top: clamp(80px, 11svh, 100px);
    padding-bottom: clamp(36px, 5svh, 52px);
  }

  .hero-proof {
    flex-direction: column;
    gap: 9px;
  }

  .hero-proof-label {
    white-space: normal;
    font-size: .70rem;
  }
}

@media (max-width: 390px) {
  .hero-content {
    padding-top: clamp(76px, 11svh, 96px);
    padding-bottom: clamp(32px, 5svh, 48px);
  }
}

/* ── Mobile nav: backdrop states ── */
@media (max-width: 900px) {

  /* Ensure the nav is always opaque behind the top bar */
  #nav {
    background: rgba(4, 4, 10, .97);
    border-bottom-color: rgba(255, 255, 255, .06);
  }

  /* When the menu is closed on a fresh page (not scrolled), keep subtle */
  #nav:not(.scrolled):not(.nav-open) {
    background: transparent;
    border-bottom-color: transparent;
  }

  #nav.nav-open {
    background: rgba(4, 4, 10, .98) !important;
    border-bottom-color: rgba(255, 255, 255, .07) !important;
  }
}

/* ── Unified container padding: all mobile breakpoints ── */

/* Container harmony pass: all sections use the same horizontal shell */
@media (max-width: 768px) {
  .container,
  .footer-shell {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Prevent any child from leaking past container */
  .pf-tabs-row,
  .pf-showcase,
  .pf-browser-wrap,
  .cf-form,
  .pricing-v2-main,
  .pricing-v2-addons-grid,
  .pricing-v2-cta,
  .footer-cta {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .container,
  .footer-shell {
    padding-left: 18px;
    padding-right: 18px;
  }
}

@media (max-width: 390px) {
  .container,
  .footer-shell {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ── Work: tabs horizontal scroll guard ── */
@media (max-width: 640px) {
  .pf-tabs-row {
    overflow: visible;
    flex-wrap: nowrap;
    padding-bottom: 0;
  }

  .pf-tabs {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-right: 60px;
  }
  .pf-tabs::-webkit-scrollbar { display: none; }

  .pf-arrows {
    flex-shrink: 0;
  }
}

/* Browser mockup: contain properly on mobile */
@media (max-width: 768px) {
  .pf-browser-wrap {
    overflow: hidden;
  }

  .pf-browser-wrap::before,
  .pf-browser-wrap::after {
    display: none;
  }
}

/* ── Pricing: mobile container alignment ── */
@media (max-width: 768px) {
  /* Prevent pricing section padding from diverging */
  .pricing-v2 .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .pricing-v2-cta {
    overflow: hidden;
  }

  .pricing-v2-addons-grid {
    overflow: hidden;
  }
}

@media (max-width: 480px) {
  .pricing-v2 .container {
    padding-left: 18px;
    padding-right: 18px;
  }
}

@media (max-width: 390px) {
  .pricing-v2 .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ── Contact form: consistent shell alignment ── */
@media (max-width: 768px) {
  .cf-form {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }

  .cf-row {
    gap: 14px;
    margin-bottom: 14px;
  }

  .cf-field-full {
    margin-bottom: 18px;
  }

  .cta-section {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 480px) {
  .cta-section {
    padding-left: 18px;
    padding-right: 18px;
  }

  .cf-row {
    gap: 12px;
    margin-bottom: 12px;
  }

  .cf-input {
    padding: 13px 16px;
  }

  .cf-textarea {
    height: 150px;
  }

  .cf-submit {
    width: 100%;
    justify-content: center;
    padding: 15px 28px;
  }

  .cf-submit-row {
    gap: 12px;
    padding-top: 22px;
  }
}

@media (max-width: 390px) {
  .cta-section {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ── Footer CTA: mobile alignment ── */
@media (max-width: 768px) {
  .footer-cta {
    overflow: hidden;
  }

  .footer-main-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .footer-cta {
    gap: 24px;
    padding: clamp(24px, 4vw, 36px) 0;
  }

  .footer-headline {
    font-size: clamp(1.9rem, 9vw, 2.5rem);
    line-height: .96;
  }

  .footer-copy {
    font-size: .84rem;
  }

  .footer-email {
    font-size: .82rem;
  }

  .footer-region {
    font-size: .56rem;
  }
}

@media (max-width: 390px) {
  .footer-headline {
    font-size: clamp(1.72rem, 10vw, 2.1rem);
  }
}

/* ── Pseudo-element overflow guard ── */
/* Prevent glows/orbs from generating horizontal scroll */
.footer-cta-atmo,
.cta-orb-layer,
.hero-atmo,
.pf-browser-wrap::before,
.pf-browser-wrap::after {
  overflow: hidden;
  pointer-events: none;
}

/* Global: clip any pseudo that might bleed */
@media (max-width: 768px) {
  section::before,
  section::after {
    overflow: hidden;
  }

  .orb {
    max-width: 100vw;
  }
}

/* ── Short-viewport hero (landscape mobile) ── */
@media (max-height: 600px) and (max-width: 900px) {
  .hero-content {
    padding-top: 72px;
    padding-bottom: 32px;
  }

  .hero-h1 {
    font-size: clamp(1.6rem, 5.5vw, 2.2rem);
    margin-bottom: 14px;
  }
}

/* ── Services: mobile panel height ── */
@media (max-width: 480px) {
  .sig-panel {
    height: 232px;
  }

  .sig-panel-body {
    padding: 0 20px;
  }

  .sig-num {
    margin-bottom: 10px;
    font-size: .50rem;
  }

  .sig-info {
    gap: 10px;
  }

  .sig-title {
    font-size: clamp(1.05rem, 4.2vw, 1.28rem);
  }

  .sig-desc {
    font-size: .78rem;
    line-height: 1.60;
  }
}

/* ── Service cards: always-on active state on touch/mobile ──
   On desktop, panels are dim by default and light up on hover —
   which works because users move a cursor over them.
   On touch devices there is no hover, so cards sit permanently dim.
   Fix: apply the hover appearance as the resting state on mobile.
   The media query (hover: none) targets touch-primary devices exactly.
   The width guard (max-width: 900px) also catches tablet portrait.
── */
@media (max-width: 900px), (hover: none) {
  .sig-panel {
    border-color: rgba(62, 231, 255, .18);
    box-shadow:
      inset 0 1px 0 rgba(62, 231, 255, .08),
      0 8px 36px rgba(0, 0, 0, .52);
  }

  .sig-panel::after {
    opacity: 1;
  }

  .sig-panel .sig-num {
    color: rgba(62, 231, 255, .58);
  }

  .sig-panel .sig-title {
    color: rgba(255, 255, 255, .96);
  }

  .sig-panel .sig-tag {
    color: rgba(62, 231, 255, .62);
    background: rgba(62, 231, 255, .04);
    border-color: rgba(62, 231, 255, .18);
  }
}

/* ═══════════════════════════════════════
   REFINEMENT PASS III
   Typography Harmony · Heading Control ·
   Card Proportions · Mobile Quality
═══════════════════════════════════════ */

/* ── 1. GRADIENT WORD CONSISTENCY ──
   .display em applies Cormorant Garamond to all em children,
   which causes 'trust' in the contact section to render in a
   different typeface than every other .gt instance on the site.
   Override so em.gt always stays in the UI font. */
.display em.gt {
  font-family: var(--f-ui);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -.04em;
}

/* ── 2. HEADING MAX-WIDTHS ──
   Without explicit max-widths, headings span their full column,
   producing lines that are too wide to feel intentional. These
   values are chosen so each heading wraps at a natural point
   that matches its content length and reading rhythm. */

.hero-h1 {
  max-width: 660px;
}

.sig-heading {
  max-width: 540px;
}

.pf-head-left h2 {
  max-width: 560px;
}

.pricing-v2-title {
  max-width: 680px;
  line-height: 1.06;
}

/* Contact: center-constrained heading */
#contact .display {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}


/* ── 3. TEXT-WRAP BALANCE ──
   Applied only to headings that wrap naturally (no explicit <br>).
   Produces optically even line-lengths for a more editorial feel. */
.sig-heading,
.pricing-v2-title {
  text-wrap: balance;
}

/* ── 4. HEADING LINE-HEIGHT REFINEMENTS ──
   The work section h2 and services heading have very tight
   line-height (0.94–0.95) which can cause ascenders to clip
   on two-line wraps at certain viewport widths. Loosen slightly. */
.pf-head-left h2 {
  line-height: 1.0;
}

/* ── 5. TRANSFORMATION CARDS: proportional tightening ──
   min-height: 300px forces ~50px of dead space below content.
   With align-items: stretch already on the grid parent,
   removing min-height lets all 3 cards equalize at content height,
   resulting in tighter, more premium proportions (~240–250px). */
.problem-card,
.solution-card,
.outcome-card {
  min-height: 0;
  padding: 26px 24px 26px;
}

.problem-card .problem-content,
.solution-card .solution-content,
.outcome-card .outcome-content {
  margin-top: 22px;
}

/* ── 6. TYPOGRAPHY UNIFORMITY ──
   Audit pass: enforce consistent scale across all sections.
   Body copy: .875rem (14px) is the site standard.
   Supporting text: .84rem. Meta/labels: .72–.82rem.
   Mono labels: .60–.72rem. */

/* Ensure section body paragraphs are consistent */
.sig-subtext {
  font-size: .88rem;
  line-height: 1.84;
}

.pf-head-desc {
  font-size: .86rem;
  line-height: 1.82;
}

.pf-desc {
  font-size: .86rem;
  line-height: 1.86;
}

/* Pricing card sub-headline consistency */
.pricing-v2-card-sub {
  font-size: .85rem;
  line-height: 1.58;
}

/* Pricing included sidebar text */
.pricing-v2-inc-item p,
.pricing-v2-custom p {
  font-size: .80rem;
  line-height: 1.58;
}

/* Transformation card body text */
.problem-card .problem-text,
.solution-card .solution-text,
.outcome-card .outcome-text {
  font-size: .92rem;
  line-height: 1.74;
}

/* Footer brand statement */
.footer-brand-statement {
  font-size: .92rem;
  line-height: 1.78;
}

/* Footer copy in CTA */
.footer-copy {
  font-size: .88rem;
  line-height: 1.82;
}

/* ── 7. MOBILE TYPOGRAPHY REFINEMENTS ── */

/* Mobile: heading scales — prevent compression at small viewports */
@media (max-width: 768px) {
  .hero-h1 {
    max-width: 100%;
  }

  .sig-heading {
    max-width: 100%;
  }

  .pf-head-left h2 {
    max-width: 100%;
    font-size: clamp(2rem, 6.5vw, 2.8rem);
    line-height: 1.02;
  }

  .pricing-v2-title {
    max-width: 100%;
    line-height: 1.08;
  }

  #contact .display {
    max-width: 100%;
    font-size: clamp(1.9rem, 7.2vw, 2.8rem) !important;
    line-height: 1.12;
  }

  .footer-headline {
    line-height: .96;
  }

  /* Transformation cards on mobile: remove forced min-height, keep touch-friendly padding */
  .problem-card,
  .solution-card,
  .outcome-card {
    min-height: 0;
    padding: 24px 22px;
  }
}

@media (max-width: 480px) {
  .pf-head-left h2 {
    font-size: clamp(1.88rem, 7.8vw, 2.4rem);
  }

  #contact .display {
    font-size: clamp(1.8rem, 8.4vw, 2.4rem) !important;
    line-height: 1.14;
  }

  .problem-card,
  .solution-card,
  .outcome-card {
    min-height: 0;
    padding: 22px 20px;
    border-radius: 13px;
  }

  /* Body copy: slightly tighter on smallest screens */
  .sig-subtext,
  .pf-head-desc,
  .pf-desc,
  .footer-copy {
    font-size: .84rem;
  }
}

@media (max-width: 390px) {
  #contact .display {
    font-size: clamp(1.68rem, 9.5vw, 2.1rem) !important;
  }
}


/* ═══════════════════════════════════════
   MOBILE EDITORIAL REFINEMENT v4
   Premium quality pass — 375–768px
   Goal: editorial consistency, restrained
   spacing, headline balance, type harmony
═══════════════════════════════════════ */

/* ── 1. ITALIC EM CONSISTENCY ──
   The contact section already applies Outfit italic to em.gt via
   .display em.gt. Apply the same italic intent to every other
   section heading that uses em.gt, so all gradient words feel
   deliberately styled rather than accidentally upright. */
.sig-heading em.gt,
.pf-head-left h2 em.gt,
.pricing-v2-title em.gt {
  font-style: italic;
}

/* ── 2. HERO H1: balanced wrap + suppress forced break on mobile ──
   The hard <br> between "businesses ready" and "to look" creates a
   one-word orphan "ready" on some viewports. On mobile, remove it
   and let text-wrap: balance produce intentional two-line splits. */
@media (max-width: 768px) {
  .hero-h1 br {
    display: none;
  }
  .hero-h1 {
    text-wrap: balance;
    font-size: clamp(2.1rem, 8.6vw, 3.0rem);
    line-height: 1.03;
    letter-spacing: -.034em;
    margin-bottom: clamp(14px, 2.4svh, 22px);
  }
}

@media (max-width: 480px) {
  .hero-h1 {
    font-size: clamp(1.98rem, 9.1vw, 2.7rem);
    line-height: 1.04;
  }
}

@media (max-width: 390px) {
  .hero-h1 {
    font-size: clamp(1.84rem, 9.8vw, 2.2rem);
  }
}

/* ── 3. HERO PROOF POINTS ──
   Restore flex-row-wrap at 480px. Column layout wastes vertical
   space and feels form-like; three short labels sit cleanly in
   two rows at 375px with a smaller, muted treatment. */
@media (max-width: 768px) {
  .hero-proof {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 9px 18px;
    padding-top: 2px;
  }
  .hero-proof-label {
    font-size: .67rem;
    letter-spacing: .03em;
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .hero-proof {
    gap: 8px 14px;
  }
  .hero-proof-label {
    font-size: .64rem;
  }
}

/* ── 4. SERVICES: mobile heading scale + intro rhythm ──
   The base clamp (2.4rem min) is correct for desktop but
   produces ~38px at 375px — too large for the long headline text.
   Reducing to ~31px and letting text-wrap:balance (already applied)
   distribute the words across clean 2–3 lines. */
@media (max-width: 768px) {
  .sig-intro {
    margin-bottom: 32px;
  }
  .sig-eyebrow {
    margin-bottom: 16px;
  }
  .sig-intro-grid {
    gap: 13px;
  }
  .sig-heading {
    font-size: clamp(1.94rem, 8.0vw, 2.7rem);
    line-height: 1.00;
    letter-spacing: -.044em;
  }
  .sig-subtext {
    max-width: 100%;
    font-size: .84rem;
    line-height: 1.74;
    padding-bottom: 0;
  }
  .sig-panels {
    gap: 11px;
  }
  .sig-panel {
    height: 248px;
    border-radius: 14px;
  }
  .sig-panel-body {
    padding: 0 22px;
    max-width: 90%;
  }
  .sig-num {
    margin-bottom: 11px;
    font-size: .51rem;
  }
  .sig-title {
    font-size: clamp(1.03rem, 4.2vw, 1.26rem);
    line-height: 1.18;
  }
  .sig-desc {
    font-size: .79rem;
    line-height: 1.60;
  }
  .sig-tags {
    margin-top: 1px;
    gap: 5px;
  }
  .sig-tag {
    font-size: .50rem;
    padding: 3px 8px;
  }
}

@media (max-width: 480px) {
  .sig-intro {
    margin-bottom: 24px;
  }
  .sig-heading {
    font-size: clamp(1.78rem, 8.3vw, 2.3rem);
    letter-spacing: -.040em;
  }
  .sig-panel {
    height: 234px;
    border-radius: 13px;
  }
  .sig-panel-body {
    padding: 0 18px;
  }
  .sig-title {
    font-size: clamp(.96rem, 4.0vw, 1.15rem);
  }
  .sig-desc {
    font-size: .77rem;
  }
}

@media (max-width: 390px) {
  .sig-intro {
    margin-bottom: 20px;
  }
  .sig-heading {
    font-size: clamp(1.64rem, 9.2vw, 2.0rem);
  }
}

/* ── 5. WORK: heading wrap + browser premium feel ──
   The hard <br> before "modern local brands." forces a long first
   line at small viewports. Remove it on mobile; text-wrap:balance
   creates cleaner two-line splits from the full sentence. */
@media (max-width: 768px) {
  .pf-head-left h2 br {
    display: none;
  }
  .pf-head-left h2 {
    text-wrap: balance;
  }
  .pf-head {
    gap: 11px;
    margin-bottom: 20px;
  }
  .pf-tabs-row {
    margin-bottom: 24px;
    border-bottom-color: rgba(255, 255, 255, .05);
  }
  .pf-tab {
    padding: 10px 14px 14px;
    font-size: .79rem;
    gap: 8px;
  }
  .pf-showcase {
    gap: 26px;
    margin-bottom: 44px;
  }
  .pf-copy h3 {
    font-size: clamp(1.86rem, 7.8vw, 2.5rem);
    letter-spacing: -.022em;
    line-height: 1.04;
  }
  .pf-browser {
    border-radius: 11px;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, .04),
      0 24px 64px rgba(0, 0, 0, .70),
      0 12px 30px rgba(0, 0, 0, .48),
      0 0 52px rgba(62, 231, 255, .07);
  }
  .pf-transform-title {
    margin-bottom: 24px;
  }
  .pf-transform-title strong {
    font-size: .74rem;
    letter-spacing: .28em;
  }
}

@media (max-width: 480px) {
  .pf-copy h3 {
    font-size: clamp(1.66rem, 8.6vw, 2.1rem);
  }
  .pf-showcase {
    gap: 22px;
    margin-bottom: 38px;
  }
  .pf-transform-title {
    margin-bottom: 20px;
  }
}

/* Transformation cards — compact, proportional */
@media (max-width: 768px) {
  .problem-card,
  .solution-card,
  .outcome-card {
    min-height: 0;
    padding: 24px 22px 22px;
    border-radius: 14px;
  }
  .problem-card .problem-icon,
  .solution-card .solution-icon,
  .outcome-card .outcome-icon {
    width: 48px;
    height: 48px;
  }
  .problem-card .problem-content,
  .solution-card .solution-content,
  .outcome-card .outcome-content {
    margin-top: 20px;
  }
  .cs-transform-section .cs-transform-grid {
    gap: 10px !important;
  }
}

@media (max-width: 480px) {
  .problem-card,
  .solution-card,
  .outcome-card {
    padding: 20px 18px 18px;
    border-radius: 12px;
  }
  .cs-transform-section .cs-transform-grid {
    gap: 9px !important;
  }
}

/* ── 6. PRICING: mobile layout refinement ── */
@media (max-width: 768px) {
  .pricing-v2-head {
    margin-bottom: 20px;
  }
  .pricing-v2-title {
    font-size: clamp(1.88rem, 7.4vw, 2.7rem);
    letter-spacing: -.038em;
    line-height: 1.02;
  }
  .pricing-v2-note {
    padding-top: 0;
    font-size: .84rem;
    line-height: 1.65;
  }
  .pricing-v2-card {
    padding: 26px 22px 68px;
    border-radius: 15px;
  }
  .pricing-v2-featured {
    padding-top: 34px;
  }
  .pricing-v2-icon {
    width: 128px;
    height: 102px;
  }
  .pricing-v2-price {
    font-size: 2.3rem;
  }
  .pricing-v2-card ul {
    margin-top: 14px;
    gap: 8px;
  }
  .pricing-v2-card li {
    font-size: .81rem;
  }
  .pricing-v2-included {
    padding: 22px 20px;
    border-radius: 15px;
  }
  .pricing-v2-addons-grid {
    gap: 11px;
  }
  .pricing-v2-addon {
    padding: 18px 16px 16px;
    border-radius: 12px;
  }
  .pricing-v2-cta {
    margin-top: 20px;
    padding: 22px 22px;
    border-radius: 16px;
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .pricing-v2-title {
    font-size: clamp(1.70rem, 8.1vw, 2.2rem);
    letter-spacing: -.034em;
  }
  .pricing-v2-icon {
    width: 108px;
    height: 86px;
  }
  .pricing-v2-price {
    font-size: 2.1rem;
  }
  .pricing-v2-card {
    padding: 22px 20px 64px;
  }
}

@media (max-width: 390px) {
  .pricing-v2-title {
    font-size: clamp(1.56rem, 9.1vw, 2.0rem);
  }
}

/* ── 7. CONTACT: heading letter-spacing + form feel ──
   The display heading on mobile inherits desktop letter-spacing
   (-.045em) which tightens too aggressively at small sizes.
   Loosen slightly. Also refine textarea height for 375px. */
@media (max-width: 768px) {
  .cta-section .display {
    letter-spacing: -.040em !important;
  }
  .cf-textarea {
    height: 138px;
  }
}

@media (max-width: 480px) {
  .cf-textarea {
    height: 118px;
  }
}

/* ── 8. FOOTER: kicker + headline ──
   Minor rhythm tightening — the footer is largely well-handled
   but the kicker-to-headline gap and copy margins need a touch. */
@media (max-width: 768px) {
  .footer-kicker {
    margin-bottom: 14px;
    font-size: .67rem;
  }
  .footer-copy {
    margin-top: 13px;
    max-width: 100%;
  }
  .footer-copy br {
    display: none;
  }
  .footer-avail-label {
    font-size: .80rem;
    line-height: 1.70;
  }
  .footer-region {
    margin-top: 9px;
    font-size: .57rem;
  }
  .footer-col a {
    font-size: .875rem;
    margin-bottom: 12px;
  }
  .footer-bottom {
    padding: 18px 0 20px;
  }
}

@media (max-width: 480px) {
  .footer-cta {
    gap: 26px;
  }
}

/* ═══════════════════════════════════════
   MOBILE HERO CINEMATIC v5
   Precision recreation — reference match.
   DESKTOP (769px+) IS UNTOUCHED.
   Only mobile hero layout is modified.
═══════════════════════════════════════ */

/* ── Top-aligned composition ──
   Reference: content flush to top-left, crystal dominates right.
   Override default vertical centering so heading sits near nav,
   not at mid-viewport. */
@media (max-width: 768px) {
  .hero-container {
    align-items: flex-start;
  }

  .hero-content {
    justify-content: flex-start;
    padding-top: clamp(80px, 10.5svh, 100px);
    padding-bottom: clamp(44px, 7svh, 64px);
  }

  /* ── Crystal: dominate right side, full vertical span ──
     Pull focus higher and further right so the crystal apex
     is visible in the upper-right quadrant, body extending below. */
  .hero-bg-img {
    object-position: 60% 12%;
  }

  /* ── Overlay: sharply dark left zone, crystal alive on right ──
     Left 38%: near-opaque for text contrast.
     Right 78–100%: almost transparent so crystal glow reads fully. */
  .hero-bg-overlay {
    background:
      linear-gradient(
        to right,
        rgba(4,4,10,.97) 0%,
        rgba(4,4,10,.90) 30%,
        rgba(4,4,10,.58) 54%,
        rgba(4,4,10,.14) 76%,
        transparent 100%
      ),
      linear-gradient(to bottom,
        rgba(4,4,10,.88) 0%,
        rgba(4,4,10,.34) 13%,
        transparent 28%
      ),
      linear-gradient(to top,
        rgba(4,4,10,.98) 0%,
        rgba(4,4,10,.64) 8%,
        rgba(4,4,10,.22) 20%,
        transparent 42%
      );
  }

  /* ── Eyebrow row: slight lift ── */
  .hero-eyebrow-row {
    margin-bottom: clamp(16px, 2.4svh, 26px);
  }

  /* ── H1: massive — 4 natural line breaks ──
     At ~3rem on a 350px container "Built for / businesses /
     ready to look / established." wraps to 4 clean lines.
     text-wrap: balance is removed so word-break governs naturally. */
  .hero-h1 {
    font-size: clamp(2.62rem, 11.2vw, 3.4rem);
    line-height: 1.005;
    letter-spacing: -.042em;
    margin-bottom: clamp(14px, 2.4svh, 22px);
    text-wrap: unset;
    max-width: 100%;
  }

  /* Keep <br> suppressed — natural wrap produces the 4-line layout */
  .hero-h1 br {
    display: none;
  }

  /* ── Italic cyan word: elevated, slightly larger ── */
  .hero-h1 em.gt {
    font-size: 1.05em;
    letter-spacing: -.01em;
    font-style: italic;
  }

  /* ── Body paragraph: precise rhythm ── */
  .hero-content > p {
    font-size: .875rem !important;
    line-height: 1.76 !important;
    margin-bottom: clamp(22px, 3.8svh, 36px) !important;
    max-width: 100% !important;
    color: rgba(244, 244, 252, .78) !important;
  }

  /* ── CTA: full-width, premium proportions ── */
  .hero-actions {
    margin-bottom: clamp(20px, 3.6svh, 34px);
    gap: 0;
  }

  .hero-actions .btn-primary {
    font-size: .78rem;
    letter-spacing: .07em;
    padding: 14px 22px;
    min-height: 50px;
  }

  /* ── Proof row: horizontal wrap, muted, editorial ── */
  .hero-proof {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 22px;
    padding-top: 2px;
  }

  .hero-proof-item {
    align-items: flex-start;
    gap: 7px;
  }

  .hero-proof-dot {
    margin-top: 5px; /* align dot to first line of wrapped label */
    flex-shrink: 0;
  }

  .hero-proof-label {
    font-size: .64rem;
    letter-spacing: .03em;
    white-space: normal;
    line-height: 1.45;
  }
}

/* ── 480px refinement ── */
@media (max-width: 480px) {
  .hero-bg-img {
    object-position: 62% 15%;
  }

  .hero-h1 {
    font-size: clamp(2.42rem, 12vw, 3.0rem);
    line-height: 1.01;
  }

  .hero-content {
    padding-top: clamp(76px, 10svh, 96px);
  }

  .hero-proof {
    gap: 9px 18px;
  }
}

/* ── 390px refinement ── */
@media (max-width: 390px) {
  .hero-bg-img {
    object-position: 64% 18%;
  }

  .hero-h1 {
    font-size: clamp(2.24rem, 13vw, 2.8rem);
    line-height: 1.015;
  }

  .hero-content {
    padding-top: clamp(72px, 9.5svh, 90px);
  }

  .hero-proof {
    gap: 8px 16px;
  }

  .hero-proof-label {
    font-size: .62rem;
  }
}


/* ══════════════════════════════════════════════════════════════
   CINEMATIC ELEVATION — 9.5 / 10
   Atmospheric premium upgrade. Structure preserved. Execution elevated.
   Deeper blacks · Atmospheric transitions · Cinematic depth ·
   Signature moments · Luxury mobile pacing.
══════════════════════════════════════════════════════════════ */

/* ── 1. VOID SPACE: true blacks ── */
body {
  background: #010106;
}

/* ── 2. SECTION TRANSITIONS: sections melt together ── */
/* Replace hard border cuts with luminous atmospheric glow lines */
section + section {
  border-top: none;
  box-shadow: inset 0 1px 0 rgba(62,231,255,.07);
}

/* Atmospheric continuity: glow bleeds downward from top of each section */
#services::before,
#work::before,
#pricing::before,
#contact::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 260px;
  background: linear-gradient(to bottom, rgba(62,231,255,.032) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 768px) {
  #services::before,
  #work::before,
  #pricing::before,
  #contact::before {
    height: 140px;
    background: linear-gradient(to bottom, rgba(62,231,255,.026) 0%, transparent 100%);
  }
}

/* ── 3. HERO TRANSITION + SIGNATURE MOMENT ── */
/* The Beam: a scanning atmospheric light that sweeps the transition zone.
   Memorable, tasteful, cinematic — the site's one unforgettable moment. */
.hero-transition {
  height: 2px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(62,231,255,.28) 18%,
    rgba(62,231,255,.58) 50%,
    rgba(62,231,255,.28) 82%,
    transparent 100%
  );
  box-shadow: 0 0 24px rgba(62,231,255,.18), 0 0 10px rgba(62,231,255,.08);
  position: relative;
  overflow: hidden;
  margin: 0;
}

@keyframes beam-sweep {
  0%   { left: -38%; opacity: 0; }
  7%   { opacity: 1; }
  93%  { opacity: 1; }
  100% { left: 138%; opacity: 0; }
}

.hero-transition::after {
  content: '';
  position: absolute;
  top: -28px; bottom: -28px;
  width: 38%;
  background: radial-gradient(
    ellipse at center,
    rgba(62,231,255,.30) 0%,
    rgba(62,231,255,.09) 38%,
    transparent 70%
  );
  filter: blur(16px);
  animation: beam-sweep 18s ease-in-out infinite;
  pointer-events: none;
}

/* ── 4. SERVICES: cinematic atmospheric panels ── */

/* Reduce matte deadness — let images breathe, glow, and live */
.sig-panel::before {
  background: linear-gradient(
    90deg,
    rgba(1,1,6,.97) 0%,
    rgba(1,1,6,.87) 24%,
    rgba(1,1,6,.54) 48%,
    rgba(1,1,6,.11) 70%,
    rgba(1,1,6,0) 100%
  );
}

/* Base: stronger cinematic presence */
.sig-panel {
  border-color: rgba(255,255,255,.065);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.065),
    inset -1px 0 0 rgba(255,255,255,.025),
    0 14px 52px rgba(0,0,0,.58),
    0 2px 0 rgba(0,0,0,.44);
}

/* Hover: cinematic reveal with edge lighting */
.sig-panel:hover {
  border-color: rgba(62,231,255,.40);
  box-shadow:
    inset 0 1px 0 rgba(62,231,255,.24),
    inset -1px 0 0 rgba(62,231,255,.14),
    0 24px 80px rgba(0,0,0,.78),
    0 0 100px rgba(62,231,255,.16),
    0 0 48px rgba(62,231,255,.08);
  transform: translateY(-3px);
}

/* Hover: overlay recedes = background image brightens cinematic reveal */
.sig-panel:hover::before { opacity: .74; }

/* Stronger atmospheric glow on right edge */
.sig-panel::after {
  background: linear-gradient(
    90deg,
    transparent 50%,
    rgba(62,231,255,.06) 76%,
    rgba(62,231,255,.18) 100%
  );
}
.sig-panel:hover::after { opacity: 1; }

/* Tags and desc: more alive on hover */
.sig-panel:hover .sig-desc {
  color: rgba(255,255,255,.74);
}
.sig-panel:hover .sig-tag {
  color: rgba(62,231,255,.86);
  background: rgba(62,231,255,.072);
  border-color: rgba(62,231,255,.28);
}

/* Services: atmospheric depth */
#services {
  background:
    radial-gradient(ellipse 72% 42% at 50% 0%, rgba(62,231,255,.044), transparent 62%),
    radial-gradient(ellipse 32% 22% at 88% 85%, rgba(100,80,220,.03), transparent 55%),
    #020208;
}

/* Touch/mobile: always-on state also gets brightness */
@media (max-width: 900px), (hover: none) {
  .sig-panel::before { opacity: .78; }
  .sig-panel::after  { opacity: 1; }
}

/* ── 5. WORK: heroic browser showcase ── */

/* Work section: cinematic atmospheric depth */
#work {
  background:
    radial-gradient(ellipse 80% 52% at 66% 18%, rgba(62,231,255,.056), transparent 65%),
    radial-gradient(ellipse 42% 30% at 18% 88%, rgba(100,80,220,.032), transparent 60%),
    #010106;
}

/* Intensify ambient glow envelope around browser */
.pf-browser-wrap::before {
  inset: -55% -10% -55% -10%;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(62,231,255,.30) 0%,
    rgba(62,231,255,.08) 44%,
    transparent 70%
  );
  filter: blur(90px);
}

/* Ground glow: heroic floating presence */
.pf-browser-wrap::after {
  left: 0%; right: 0%;
  bottom: -140px; height: 280px;
  background: radial-gradient(
    ellipse at center,
    rgba(62,231,255,.55) 0%,
    rgba(62,231,255,.14) 48%,
    transparent 72%
  );
  filter: blur(80px);
}

/* Browser: premium shadow depth */
.pf-browser {
  position: relative;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04),
    0 56px 130px rgba(0,0,0,.88),
    0 24px 56px rgba(0,0,0,.64),
    0 0 100px rgba(62,231,255,.10);
}

/* Active browser: aura pulse — cinematic living presence */
@keyframes browser-aura-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255,255,255,.04),
      0 56px 130px rgba(0,0,0,.88),
      0 0 80px rgba(62,231,255,.10);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(62,231,255,.07),
      0 56px 130px rgba(0,0,0,.88),
      0 0 140px rgba(62,231,255,.24),
      0 0 60px rgba(62,231,255,.10);
  }
}

.pf-browser.active {
  animation: browser-aura-pulse 5s ease-in-out infinite;
}

/* Browser hover: maximum cinematic depth */
.pf-browser:hover {
  border-color: rgba(62,231,255,.32) !important;
  animation: none;
  box-shadow:
    0 0 0 1px rgba(62,231,255,.08),
    0 72px 160px rgba(0,0,0,.92),
    0 0 160px rgba(62,231,255,.28),
    0 0 70px rgba(62,231,255,.14) !important;
}

/* Project switch: cinematic light sweep signature moment */
@keyframes switch-sweep {
  0%   { opacity: 0; transform: translateX(-100%); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(200%); }
}

.pf-browser.switch-flash::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(62,231,255,.10) 40%,
    rgba(62,231,255,.22) 50%,
    rgba(62,231,255,.10) 60%,
    transparent 100%
  );
  animation: switch-sweep .65s ease forwards;
  z-index: 2;
  pointer-events: none;
  border-radius: 0;
}

/* ── 6. PRICING: featured card dominance ── */

/* Pricing section: deeper atmospheric void */
.pricing-v2 {
  background:
    radial-gradient(circle at 50% 12%, rgba(0,201,177,.12), transparent 42%),
    radial-gradient(ellipse 55% 28% at 82% 88%, rgba(62,231,255,.04), transparent 55%),
    linear-gradient(180deg, #010106 0%, #020309 100%);
}

/* Base cards: recede — less visual noise */
.pricing-v2-card {
  border-color: rgba(255,255,255,.065);
  background: linear-gradient(180deg, rgba(5,10,16,.97), rgba(2,6,10,1));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 20px 60px rgba(0,0,0,.40);
}

.pricing-v2-card:hover {
  border-color: rgba(150,220,255,.14);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 28px 80px rgba(0,0,0,.54),
    0 0 32px rgba(62,231,255,.04);
}

/* FEATURED: visually dominant, impossible to miss */
.pricing-v2-featured {
  border-color: rgba(0,201,177,.85);
  background: linear-gradient(
    180deg,
    rgba(0,201,177,.10) 0%,
    rgba(0,201,177,.032) 20%,
    rgba(3,9,14,.98) 52%,
    rgba(2,6,10,1) 100%
  );
  box-shadow:
    0 0 120px rgba(0,201,177,.26),
    0 0 60px rgba(0,201,177,.16),
    0 0 28px rgba(0,201,177,.09),
    inset 0 1px 0 rgba(0,201,177,.30),
    inset 0 2px 32px rgba(0,201,177,.04),
    0 32px 90px rgba(0,0,0,.55);
  z-index: 2;
}

/* Featured: floating lift applied after scroll-reveal completes */
article.pricing-v2-featured.in {
  transform: translateY(-8px) scale(1.02);
  transition: border-color .3s ease, transform .6s var(--ease-spring), box-shadow .3s ease, opacity .45s ease;
}

article.pricing-v2-featured.in:hover {
  transform: translateY(-12px) scale(1.024);
  border-color: rgba(0,201,177,1);
  box-shadow:
    0 0 160px rgba(0,201,177,.34),
    0 0 80px rgba(0,201,177,.22),
    0 0 40px rgba(0,201,177,.12),
    inset 0 1px 0 rgba(0,201,177,.35),
    0 44px 110px rgba(0,0,0,.65);
}

.pricing-v2-featured h3 {
  text-shadow: 0 0 28px rgba(0,201,177,.26);
}

/* Included sidebar: recedes elegantly */
.pricing-v2-included {
  border-color: rgba(255,255,255,.055);
  background: linear-gradient(180deg, rgba(4,8,14,.95), rgba(2,5,9,.98));
}

/* ── 7. ADD-ONS: atmospheric, less grid-boxed ── */

.pricing-v2-addon {
  border-color: rgba(255,255,255,.045);
  background: linear-gradient(155deg, rgba(6,12,18,.93), rgba(3,7,11,.97));
}

.pricing-v2-addon:hover {
  border-color: rgba(62,231,255,.10);
  box-shadow:
    0 0 0 1px rgba(62,231,255,.024),
    0 20px 60px rgba(0,0,0,.55),
    0 0 40px rgba(0,201,177,.07);
  transform: translateY(-3px);
}

.addon-card:hover .addon-icon {
  opacity: .92;
  filter: drop-shadow(0 0 14px rgba(62,231,255,.38));
  transform: translateY(-2px);
}

/* ── 8. CONTACT + FOOTER: deeper atmospheric void ── */
#contact {
  background:
    radial-gradient(ellipse 70% 58% at 50% 0%, rgba(62,231,255,.052), transparent 68%),
    radial-gradient(ellipse 38% 28% at 88% 88%, rgba(100,80,220,.025), transparent 60%),
    radial-gradient(ellipse 30% 22% at 8% 80%, rgba(62,231,255,.02), transparent 65%),
    #010106;
}

.neutron-footer {
  background:
    radial-gradient(ellipse 55% 32% at 50% 8%, rgba(62,231,255,.048), transparent 100%),
    radial-gradient(ellipse 70% 44% at 14% 72%, rgba(62,231,255,.032), transparent 68%),
    radial-gradient(circle at 84% 28%, rgba(100,80,220,.026), transparent 44%),
    #010106;
}

/* ── 9. CURSOR SPOTLIGHT: premium ambient presence ── */
.cursor-glow {
  position: fixed;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(62,231,255,.032) 0%,
    rgba(62,231,255,.010) 35%,
    transparent 70%
  );
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9997;
  opacity: 0;
  mix-blend-mode: screen;
  will-change: left, top;
  transition: opacity .5s ease;
}

@media (hover: hover) and (pointer: fine) {
  .cursor-glow { opacity: 1; }
}

/* ── 10. MOBILE: luxury pacing ── */
@media (max-width: 768px) {
  section {
    padding: clamp(72px, 11vw, 104px) 0;
  }
  .sig-panels {
    gap: 13px;
  }
}

@media (max-width: 480px) {
  section {
    padding: clamp(60px, 10vw, 88px) 0;
  }
}

/* ── 11. GRAIN: fractionally more presence ── */
body::after {
  opacity: .030;
}

/* ── 12. HERO: cinematic bottom-to-services continuation ── */
/* Soft bottom fade blends hero into the transition beam */
#hero {
  -webkit-mask-image: linear-gradient(to bottom, black 94%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 94%, transparent 100%);
}

/* ── 13. FEATURED CARD: mobile override ── */
/* Remove featured lift on single-column layouts to avoid awkward overflow */
@media (max-width: 720px) {
  article.pricing-v2-featured.in {
    transform: none;
  }
  article.pricing-v2-featured.in:hover {
    transform: translateY(-4px);
  }
  .pricing-v2-featured {
    box-shadow:
      0 0 80px rgba(0,201,177,.20),
      0 0 40px rgba(0,201,177,.12),
      inset 0 1px 0 rgba(0,201,177,.28),
      0 24px 60px rgba(0,0,0,.45);
  }
}


/* ═══════════════════════════════════════
   DESKTOP HERO — TRUE 100VH CINEMATIC FIX
   Applies above 900px only. Mobile (≤768px) is untouched.
═══════════════════════════════════════ */
@media (min-width: 901px) {

  /* Lock hero to exact viewport height */
  #hero {
    height: 100vh;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    /* Override the generic section padding — hero-content manages its own internal spacing */
    padding-top: 0;
    padding-bottom: 0;
    /* Pull mask fade start later so proof row stays fully visible */
    -webkit-mask-image: linear-gradient(to bottom, black 97%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 97%, transparent 100%);
  }

  /* Hero container: stretch to fill full 100vh, vertically center content */
  .hero-container {
    height: 100%;
    align-items: center;
  }

  /* Hero content: centered within the 100vh frame */
  .hero-content {
    justify-content: center;
    padding-top: clamp(88px, 12svh, 116px);
    padding-bottom: clamp(36px, 5.5svh, 56px);
  }
}


/* ═══════════════════════════════════════════════════════════
   DISABLED UI CONTRAST FIX
   Deep audit pass — lifts all hardcoded low-opacity values
   that make real content look inactive or washed out.
   Hierarchy: Primary #F4F4FC · Secondary .78 · Tertiary .62
   Decorative .40 · Truly-inactive ≤ .30
   Dark luxury identity is preserved throughout.
═══════════════════════════════════════════════════════════ */

/* ── GLOBAL LABELS ── */

/* "//" prefix on eyebrow rows — was .30, now readable-muted */
.eyebrow-pre {
  opacity: .52;
}

/* "// " prefix on .section-title — was rgba(...,.22) */
.section-title::before {
  color: rgba(0,201,177,.44);
}


/* ── SERVICES SECTION ── */

/* Eyebrow label — was .42 */
.sig-eyebrow {
  color: rgba(62,231,255,.68);
}

/* Intro subtext — was var(--gray-2) = #8080A0 */
.sig-subtext {
  color: rgba(244,244,252,.72);
}

/* Panel index number (01 /, 02 /) — was .38 */
.sig-num {
  color: rgba(62,231,255,.60);
}

/* Panel description — was .48, looked completely disabled */
.sig-desc {
  color: rgba(244,244,252,.72);
}

/* Hover: description brightens further */
.sig-panel:hover .sig-desc {
  color: rgba(244,244,252,.88);
}

/* Capability tags — color was .32, border was .13 */
.sig-tag {
  color: rgba(62,231,255,.62);
  border-color: rgba(62,231,255,.22);
}

/* Arrow button — was rgba(255,255,255,.18) */
.sig-arrow {
  color: rgba(255,255,255,.44);
  border-color: rgba(255,255,255,.16);
}

/* Panel border: more definition at rest */
.sig-panel {
  border-color: rgba(255,255,255,.11);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset -1px 0 0 rgba(62,231,255,.07),
    0 14px 52px rgba(0,0,0,.58),
    0 2px 0 rgba(0,0,0,.44);
}

/* Panel overlay: soften slightly to reveal more image detail */
.sig-panel::before {
  background: linear-gradient(
    90deg,
    rgba(1,1,6,.96) 0%,
    rgba(1,1,6,.80) 24%,
    rgba(1,1,6,.44) 48%,
    rgba(1,1,6,.08) 70%,
    rgba(1,1,6,0) 100%
  );
}

/* Edge atmospheric glow: always subtly visible, not only on hover */
.sig-panel::after {
  opacity: .36;
}
.sig-panel:hover::after {
  opacity: 1;
}

/* Mobile overlay: matched softening */
@media (max-width: 768px) {
  .sig-panel::before {
    background:
      linear-gradient(
        90deg,
        rgba(4,4,10,.96) 0%,
        rgba(4,4,10,.88) 38%,
        rgba(4,4,10,.68) 60%,
        rgba(4,4,10,.44) 80%,
        rgba(4,4,10,.22) 100%
      ),
      linear-gradient(180deg, rgba(4,4,10,.28) 0%, transparent 28%, transparent 72%, rgba(4,4,10,.34) 100%);
  }
}

/* Touch: always-on resting state with same lift */
@media (max-width: 900px), (hover: none) {
  .sig-panel .sig-num {
    color: rgba(62,231,255,.62);
  }
  .sig-panel .sig-desc {
    color: rgba(244,244,252,.72);
  }
  .sig-panel .sig-tag {
    color: rgba(62,231,255,.64);
    border-color: rgba(62,231,255,.22);
  }
}


/* ── WORK SECTION ── */

/* Head description — was var(--gray-2) + opacity: .78 (double-muted) */
.pf-head-desc {
  color: rgba(244,244,252,.70);
  opacity: 1;
}

/* Project subtitle (mono label) — was rgba(90,90,122,.9) */
.pf-subtitle {
  color: rgba(180,190,228,.80);
}

/* Project description — was var(--gray-2) */
.pf-desc {
  color: rgba(244,244,252,.72);
}

/* Inactive tabs — was .26, looked fully disabled */
.pf-tab {
  color: rgba(200,216,255,.48);
}

/* Inactive tab number span — was .18 */
.pf-tab span {
  color: rgba(200,216,255,.38);
}

/* Hover inactive tab: clearly interactive */
.pf-tab:hover {
  color: rgba(200,216,255,.68);
}

/* Browser URL bar caption — was rgba(90,90,122,.7) */
.cs-browser-url-bar span {
  color: rgba(120,126,172,.86);
}


/* ── PRICING SECTION ── */

/* Card sub-headline — was var(--gray-2) */
.pricing-v2-card-sub {
  color: rgba(244,244,252,.72);
}

/* "Starting at" + "One-time investment" — was var(--gray-3) = #5A5A7A */
.pricing-v2-small,
.pricing-v2-meta {
  color: rgba(200,212,244,.68);
}

/* Included-in-all items body copy — was var(--gray-2) */
.pricing-v2-inc-item p,
.pricing-v2-custom p {
  color: rgba(244,244,252,.70);
}

/* Add-on description — was var(--gray-2) */
.pricing-v2-addon p {
  color: rgba(244,244,252,.70);
}

/* Add-on "From" label — was var(--gray-3) */
.addon-from {
  color: rgba(200,212,244,.66);
}

/* Add-on "/mo" suffix — was var(--gray-2) */
.addon-period {
  color: rgba(200,212,244,.74);
}

/* CTA bar description — was var(--gray-2) */
.pricing-v2-cta p {
  color: rgba(244,244,252,.76);
}

/* Add-on icon: less ghosted at rest — was .42 */
.addon-icon {
  opacity: .62;
}


/* ── CONTACT SECTION ── */

/* Direct contact links below form — was rgba(128,128,168,.72) */
.cf-direct-link {
  color: rgba(168,172,218,.84);
}

/* Separator dot — was rgba(100,100,132,.4) */
.cf-direct-sep {
  color: rgba(130,130,168,.52);
}

/* Footnote "Most inquiries..." — was rgba(165,165,200,.82), keep as-is — it's fine */


/* ── FOOTER ── */

/* CTA section body copy — was rgba(255,255,255,.54) */
.footer-copy {
  color: rgba(244,244,252,.72);
}

/* Availability trust text — was rgba(255,255,255,.52) */
.footer-avail-label {
  color: rgba(244,244,252,.68);
}

/* Nav / services column links — was rgba(255,255,255,.62) */
.footer-col a {
  color: rgba(244,244,252,.70);
}

/* Email link in CTA zone — was rgba(255,255,255,.68) */
.footer-email {
  color: rgba(244,244,252,.78);
}

/* Contact link SVG icons — was rgba(255,255,255,.56) */
.footer-contact-link svg {
  color: rgba(255,255,255,.68);
}

/* Brand statement — was .72, lift slightly */
.footer-brand-statement {
  color: rgba(244,244,252,.78);
}

/* Social icons at rest — was rgba(255,255,255,.48) */
.footer-socials a {
  color: rgba(255,255,255,.64);
  border-color: rgba(255,255,255,.13);
}

/* "Digital Presence Systems" tagline — was opacity: .72 */
.footer-brand-lockup small {
  opacity: .88;
}

/* "WEB DESIGN · BRANDING" service tags — was rgba(255,255,255,.26) */
.footer-intake {
  color: rgba(255,255,255,.42);
}

/* Region line — was rgba(255,255,255,.26) */
.footer-region {
  color: rgba(255,255,255,.40);
}

/* Copyright bar — was rgba(255,255,255,.30) */
.footer-bottom {
  color: rgba(255,255,255,.44);
}

/* ═══════════════════════════════════════════════════════════
   MOBILE HERO + PRICING GLOW FIX
   Hero: breathing room, H1 lightened, crystal repositioned,
   overlay tightened. Proof row: editorial + muted.
   Pricing: cyan section glow crushed on mobile.
   DESKTOP (769px+) IS UNTOUCHED.
═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Content: more vertical air ── */
  .hero-content {
    padding-top:    clamp(86px, 11.5svh, 106px);
    padding-bottom: clamp(44px, 7svh,    66px);
  }

  /* ── H1: tighter, still bold — not overwhelming ── */
  .hero-h1 {
    font-size:      clamp(2.45rem, 10.4vw, 3.7rem);
    line-height:    1.02;
    letter-spacing: -.045em;
    max-width:      100%;
  }

  /* ── Crystal: pushed right and lower — background architecture ── */
  .hero-bg-img {
    object-position: 78% 34%;
    opacity: .72;
  }

  /* ── Overlay: stronger left text-zone, image stays alive right ── */
  .hero-bg-overlay {
    background:
      linear-gradient(
        to right,
        rgba(4,4,10,.98) 0%,
        rgba(4,4,10,.93) 36%,
        rgba(4,4,10,.68) 58%,
        rgba(4,4,10,.20) 80%,
        transparent 100%
      ),
      linear-gradient(to bottom,
        rgba(4,4,10,.90) 0%,
        rgba(4,4,10,.36) 14%,
        transparent 30%
      ),
      linear-gradient(to top,
        rgba(4,4,10,.98) 0%,
        rgba(4,4,10,.62) 9%,
        rgba(4,4,10,.22) 22%,
        transparent 44%
      );
  }

  /* ── Paragraph: slightly quieter, more space before CTA ── */
  .hero-content > p {
    font-size:     .84rem  !important;
    line-height:   1.73    !important;
    max-width:     96%     !important;
    margin-bottom: clamp(24px, 4.2svh, 38px) !important;
  }

  /* ── CTA: premium proportions, not oversized ── */
  .hero-actions .btn-primary {
    padding:    13px 22px;
    min-height: 46px;
  }

  /* ── Proof row: editorial, clean wrap ── */
  .hero-proof {
    gap:         9px 20px;
    padding-top: 1px;
  }

  .hero-proof-label {
    font-size: .63rem;
  }

  /* ── Pricing: reduce cyan wash on mobile ── */
  .pricing-v2 {
    background:
      radial-gradient(circle at 50% 8%, rgba(62,231,255,.035), transparent 28%),
      linear-gradient(180deg, #020509 0%, #03070b 100%);
  }
}

/* ── 480px: shift crystal further into background ── */
@media (max-width: 480px) {
  .hero-bg-img {
    object-position: 82% 36%;
  }
}

/* ── 420px: tighten H1 for very small viewports ── */
@media (max-width: 420px) {
  .hero-h1 {
    font-size: clamp(2.35rem, 10vw, 3.1rem);
  }
}


/* ═══════════════════════════════════════
   MOBILE HERO LUXURY REFINEMENT v7
   Seven precision fixes. Desktop untouched.
   Hierarchy · Restraint · Editorial spacing.
═══════════════════════════════════════ */

@media (max-width: 768px) {

  /* 1 — VERTICAL RHYTHM
     More air above and below. Content breathes.
     Not compressed, not stretched. */
  .hero-content {
    padding-top:    clamp(90px, 12.5svh, 112px);
    padding-bottom: clamp(44px, 6.5svh, 64px);
  }

  .hero-eyebrow-row {
    margin-bottom: clamp(16px, 2.6svh, 24px);
  }

  /* 2 — H1: CONFIDENT, NOT OVERWHELMING
     Restraint. Still strong. Not taking over the viewport. */
  .hero-h1 {
    font-size:      clamp(1.96rem, 8.2vw, 2.6rem);
    line-height:    1.07;
    letter-spacing: -.038em;
    margin-bottom:  clamp(18px, 2.8svh, 28px);
    text-wrap:      balance;
    max-width:      100%;
  }

  /* 3 — PARAGRAPH: NARROWER COLUMN, MORE SPACE BEFORE CTA */
  .hero-content > p {
    font-size:     .83rem !important;
    line-height:   1.72  !important;
    max-width:     86%   !important;
    margin-bottom: clamp(28px, 4.8svh, 44px) !important;
    color:         rgba(244,244,252,.68) !important;
  }

  /* 4 — CTA: COMPACT AND ELEGANT
     Not full-width. Not a giant button. Supports the H1. */
  .hero-actions {
    align-items:   flex-start;
    margin-bottom: clamp(24px, 4svh, 38px);
    gap:           0;
  }
  .hero-actions .btn-primary {
    width:          auto;
    min-height:     0;
    height:         52px;
    padding:        0 28px;
    font-size:      .76rem;
    letter-spacing: .06em;
    border-radius:  16px;
  }

  /* 5 — CRYSTAL: ATMOSPHERIC, NOT EMBEDDED IN TEXT
     Far right, lower. Text zone is unobstructed. */
  .hero-bg-img {
    object-position: 90% 44%;
    opacity: .65;
  }

  /* 6 — OVERLAY: HARDER LEFT PROTECTION
     Dark left zone locks in text contrast.
     Crystal glows freely on the right. */
  .hero-bg-overlay {
    background:
      linear-gradient(
        to right,
        rgba(4,4,10,.99) 0%,
        rgba(4,4,10,.97) 26%,
        rgba(4,4,10,.82) 48%,
        rgba(4,4,10,.34) 70%,
        transparent 100%
      ),
      linear-gradient(to bottom,
        rgba(4,4,10,.93) 0%,
        rgba(4,4,10,.42) 12%,
        transparent 28%
      ),
      linear-gradient(to top,
        rgba(4,4,10,.98) 0%,
        rgba(4,4,10,.66) 8%,
        rgba(4,4,10,.24) 20%,
        transparent 42%
      );
  }

  /* 7 — PROOF ROW: EDITORIAL TRUST INDICATORS
     Dots become thin rules. Mono uppercase. Ultra-muted.
     Feels like spec callouts, not bullet spam. */
  .hero-proof {
    flex-direction: row;
    flex-wrap:      wrap;
    gap:            9px 22px;
    padding-top:    0;
  }
  .hero-proof-item {
    align-items: center;
    gap: 10px;
  }
  .hero-proof-dot {
    width:         14px;
    height:        1px;
    border-radius: 0;
    background:    rgba(62,231,255,.7);
    box-shadow:    none;
    margin-top:    0;
    flex-shrink:   0;
  }
  .hero-proof-label {
    font-family:    var(--f-mono);
    font-size:      .59rem;
    letter-spacing: .11em;
    text-transform: uppercase;
    color:          rgba(244,244,252,.78);
    white-space:    nowrap;
    line-height:    1.2;
  }
}

/* 480px refinement */
@media (max-width: 480px) {
  .hero-h1 {
    font-size: clamp(1.84rem, 8.8vw, 2.3rem);
    line-height: 1.08;
  }
  .hero-content > p {
    max-width: 94% !important;
  }
  .hero-bg-img {
    object-position: 94% 48%;
  }
  .hero-proof-label {
    font-size: .57rem;
    color: rgba(244,244,252,.78);
  }
}

/* 390px refinement */
@media (max-width: 390px) {
  .hero-h1 {
    font-size: clamp(1.74rem, 9.6vw, 2.1rem);
  }
  .hero-actions .btn-primary {
    height:  50px;
    padding: 0 24px;
    font-size: .74rem;
  }
  .hero-proof-label {
    font-size: .56rem;
    color: rgba(244,244,252,.78);
  }
}


/* ═══════════════════════════════════════
   MOBILE PREMIUM CORRECTION — FINAL PASS
   Hero cinematic rebalance · Pricing CTA fix · Polish
   DESKTOP (769px+) IS UNTOUCHED.
═══════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── HERO: ART-DIRECTED BREATHING ROOM ──
     Every block has deliberate space. Composition over density. */

  .hero-content {
    padding-top:    clamp(100px, 14svh, 128px);
    padding-bottom: clamp(60px, 9svh, 86px);
  }

  /* Eyebrow: editorial opening — needs air above the headline */
  .hero-eyebrow-row {
    margin-bottom: clamp(26px, 4svh, 36px);
  }

  /* H1: bold, controlled — two or three intentional lines */
  .hero-h1 {
    font-size:      clamp(2.0rem, 8.5vw, 2.7rem);
    line-height:    1.06;
    letter-spacing: -.040em;
    margin-bottom:  clamp(24px, 3.8svh, 38px);
    text-wrap:      balance;
    max-width:      100%;
  }

  /* Paragraph: narrow column, atmospherically muted — negative space matters */
  .hero-content > p {
    font-size:     .82rem !important;
    line-height:   1.78  !important;
    max-width:     72%   !important;
    margin-bottom: clamp(34px, 5.8svh, 52px) !important;
    color:         rgba(244,244,252,.58) !important;
  }

  /* CTA: compact, inline-weight — supports the H1, doesn't compete */
  .hero-actions {
    align-items:    flex-start;
    flex-direction: column;
    margin-bottom:  clamp(30px, 5svh, 48px);
    gap:            0;
  }
  .hero-actions .btn-primary {
    width:          auto !important;
    min-height:     0;
    height:         42px;
    padding:        0 24px;
    font-size:      .72rem;
    letter-spacing: .07em;
    border-radius:  11px;
    font-weight:    600;
  }

  /* Crystal: dominant presence — the emotional centerpiece of the hero */
  .hero-bg-img {
    object-position: 70% 26%;
    opacity:         .84;
  }

  /* Overlay: hard left text protection, crystal breathes freely on the right */
  .hero-bg-overlay {
    background:
      linear-gradient(
        to right,
        rgba(4,4,10,.99) 0%,
        rgba(4,4,10,.94) 25%,
        rgba(4,4,10,.72) 48%,
        rgba(4,4,10,.22) 70%,
        transparent 100%
      ),
      linear-gradient(to bottom,
        rgba(4,4,10,.86) 0%,
        rgba(4,4,10,.26) 14%,
        transparent 30%
      ),
      linear-gradient(to top,
        rgba(4,4,10,.97) 0%,
        rgba(4,4,10,.56) 9%,
        rgba(4,4,10,.16) 22%,
        transparent 44%
      );
  }

  /* Proof: layout — flex row wrap */
  .hero-proof {
    flex-direction: row;
    flex-wrap:      wrap;
    gap:            10px 24px;
    padding-top:    2px;
  }
  .hero-proof-item {
    align-items: center;
    gap:         10px;
  }

  /* ── "READY TO MODERNIZE" PRICING CTA: centered, composed, aligned ──
     Fix: switch from grid to flex column — removes the misalignment.
     Everything centers, nothing is crooked. */
  .pricing-v2-cta {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    padding:        30px 24px 28px;
    gap:            12px;
    margin-top:     20px;
    border-radius:  16px;
  }

  .pricing-v2-logo {
    display: none;
  }

  .pricing-v2-cta h3 {
    font-size:      1.44rem;
    line-height:    1.20;
    font-weight:    300;
    letter-spacing: -.028em;
    max-width:      280px;
    margin:         0 auto;
  }

  .pricing-v2-cta h3 br {
    display: none;
  }

  .pricing-v2-cta p {
    font-size:     .84rem;
    line-height:   1.62;
    max-width:     240px;
    margin:        0 auto;
    border-left:   none !important;
    border-top:    none !important;
    padding-left:  0 !important;
    padding-top:   0 !important;
    color:         rgba(244,244,252,.64);
  }

  .pricing-v2-cta a {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           auto;
    padding:         11px 28px;
    font-size:       .70rem;
    letter-spacing:  .12em;
    border-radius:   100px;
    margin-top:      6px;
  }
}

/* ── 480px: tighten further ── */
@media (max-width: 480px) {

  .hero-h1 {
    font-size:   clamp(1.88rem, 9.0vw, 2.42rem);
    line-height: 1.07;
  }

  .hero-content > p {
    max-width: 84% !important;
  }

  .hero-bg-img {
    object-position: 74% 30%;
  }

  .hero-actions .btn-primary {
    height:    40px;
    padding:   0 22px;
    font-size: .70rem;
  }

  .pricing-v2-cta {
    padding: 26px 20px 24px;
    gap:     10px;
  }

  .pricing-v2-cta h3 {
    font-size: 1.30rem;
    max-width: 250px;
  }

  .pricing-v2-cta p {
    max-width: 220px;
    font-size: .82rem;
  }
}

/* ── 390px: smallest viewports ── */
@media (max-width: 390px) {

  .hero-h1 {
    font-size: clamp(1.76rem, 9.8vw, 2.18rem);
  }

  .hero-bg-img {
    object-position: 78% 32%;
  }

  .hero-actions .btn-primary {
    height:    38px;
    padding:   0 20px;
    font-size: .69rem;
  }

  .hero-content > p {
    max-width: 90% !important;
  }

  .pricing-v2-cta {
    padding: 24px 18px 22px;
  }

  .pricing-v2-cta h3 {
    font-size: 1.20rem;
    max-width: 230px;
  }
}

/* MOBILE HERO TEXT COLOR MATCH */
@media (max-width: 768px) {
  #hero .hero-content > p {
    color: var(--gray-1) !important;
  }
}

/* ── MOBILE PROOF: VERTICAL EDITORIAL STACK
   Replaces all previous horizontal/wrapped layouts on mobile.
   Left-aligned vertical stack with micro cyan dot accents.
   Feels intentional — Apple/luxury architecture tone, not a bullet list. */
@media (max-width: 768px) {
  #hero .hero-proof {
    flex-direction: column !important;
    flex-wrap:      nowrap  !important;
    gap:            12px;
    align-items:    flex-start;
    margin-top:     clamp(22px, 3svh, 30px);
    padding-top:    0;
  }

  #hero .hero-proof-item {
    align-items: center;
    gap:         9px;
  }

  #hero .hero-proof-dot {
    width:         4px;
    height:        4px;
    border-radius: 50%;
    background:    rgba(62, 231, 255, 0.60);
    box-shadow:    0 0 7px rgba(62, 231, 255, 0.30);
    margin-top:    0;
    flex-shrink:   0;
  }

  #hero .hero-proof-label {
    font-family:    var(--f-mono);
    font-size:      .60rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color:          rgba(244,244,252,.85) !important;
    white-space:    nowrap;
    line-height:    1;
  }
}

@media (max-width: 480px) {
  #hero .hero-proof {
    gap:        10px;
    margin-top: clamp(20px, 2.8svh, 26px);
  }

  #hero .hero-proof-label {
    font-size: .58rem;
    color:     rgba(244,244,252,.85) !important;
  }
}

@media (max-width: 390px) {
  #hero .hero-proof {
    gap:        9px;
    margin-top: 20px;
  }

  #hero .hero-proof-label {
    font-size: .57rem;
  }
}


/* ═══════════════════════════════════════
   LEGAL PAGES (privacy.html, terms.html)
   404 ERROR PAGE
═══════════════════════════════════════ */

.legal-page {
  min-height: 70vh;
  padding: 130px 0 100px;
}

.legal-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 32px;
}

.legal-eyebrow {
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(62,231,255,.70);
  margin-bottom: 14px;
}

.legal-title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 8px;
}

.legal-updated {
  font-family: var(--f-mono);
  font-size: .58rem;
  letter-spacing: .12em;
  color: rgba(255,255,255,.28);
  text-transform: uppercase;
  margin-bottom: 52px;
}

.legal-content {
  color: rgba(255,255,255,.55);
  font-family: var(--f-body);
  font-size: .95rem;
  line-height: 1.9;
}

.legal-content h2 {
  font-family: var(--f-body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  margin-top: 44px;
  margin-bottom: 10px;
}

.legal-content p {
  margin-bottom: 14px;
}

.legal-content a {
  color: rgba(62,231,255,.80);
  text-decoration: none;
}

.legal-content a:hover {
  color: rgba(62,231,255,1);
}

/* 404 page */
.page-404 {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
}

.page-404-inner {
  max-width: 560px;
}

.page-404-code {
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(62,231,255,.55);
  margin-bottom: 20px;
}

.page-404-title {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 20px;
}

.page-404-copy {
  color: rgba(255,255,255,.45);
  font-size: .95rem;
  line-height: 1.75;
  margin-bottom: 40px;
}

@media (max-width: 768px) {
  .legal-page {
    padding: 110px 0 80px;
  }
  .legal-inner {
    padding: 0 20px;
  }
}