/* ============================================================
   0. SELF-HOSTED FONTS
   Same files Google Fonts served, now local: removes the
   render-blocking third-party stylesheet and both preconnects.
   unicode-range means only the subsets actually used get fetched.
============================================================ */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/dm-sans-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/dm-sans-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dm-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dm-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/dm-sans-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/dm-sans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-400-i-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-400-i-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/syne-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/syne-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/syne-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/syne-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/syne-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/syne-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================
   PIXEL PERFECT — styles.css
   Organized sections:
   1. Reset & Root Variables
   2. Base / Body
   3. Navigation
   4. Hero
   5. Marquee
   6. Section Commons
   7. Problem / Solution
   8. About
   9. Services (Bento)
   10. Work / Portfolio
   11. Process
   12. Praise / Testimonials
   13. Pricing
   14. FAQ
   15. CTA / Contact
   16. Footer
   17. Animations
   18. Responsive
============================================================ */


/* ============================================================
   1. RESET & ROOT VARIABLES
============================================================ */

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

html {
  scroll-behavior: smooth;
}

:root {
  /* Dark backgrounds */
  --ink:   #080c14;
  --ink2:  #0d1422;
  --ink3:  #111827;

  /* Blues */
  --blue:      #4f8ef7;
  --blue2:     #2563eb;
  --blue-glow: rgba(79, 142, 247, 0.18);

  /* Neutrals */
  --silver:  #8fa3bf;
  --silver2: #c4d0e0;
  --cream:   #e8edf5;
  --muted:   #3d4f66;

  /* Borders */
  --border:  rgba(143, 163, 191, 0.13);
  --border2: rgba(79, 142, 247, 0.22);

  /* Accent */
  --green: #22c55e;
}


/* ============================================================
   2. BASE / BODY
============================================================ */

body {
  background:    var(--ink);
  color:         var(--cream);
  font-family:   'DM Sans', sans-serif;
  font-weight:   300;
  line-height:   1.7;
  overflow-x:    hidden;
}


/* ============================================================
   3. NAVIGATION
============================================================ */

nav {
  position:        fixed;
  top:             0;
  left:            0;
  right:           0;
  z-index:         200;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1.1rem 3.5rem;
  background:      rgba(8, 12, 20, 0.8);
  backdrop-filter: blur(24px);
  border-bottom:   1px solid var(--border);
}

.nav-logo {
  display:         flex;
  align-items:     center;
  text-decoration: none;
  flex-shrink:     0;
}

.nav-logo img {
  height:  58px;
  width:   auto;
  display: block;
}

.nav-links {
  display:     flex;
  gap:         2rem;
  list-style:  none;
}

.nav-links a {
  color:           var(--silver);
  text-decoration: none;
  font-size:       .85rem;
  transition:      color .2s;
}

.nav-links a:hover {
  color: var(--cream);
}

.nav-cta {
  background:      var(--blue);
  color:           #fff !important;
  padding:         .5rem 1.2rem;
  border-radius:   50px;
  font-size:       .82rem;
  font-weight:     500 !important;
  text-decoration: none;
  transition:      background .2s, transform .15s;
}

.nav-cta:hover {
  background:  var(--blue2);
  transform:   translateY(-1px);
}


/* ============================================================
   4. HERO
============================================================ */

#hero {
  min-height:      100vh;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  /* top guard tracks the fixed nav, which grew with the logo */
  padding:         calc(94px + 2rem) 3.5rem 2.5rem;
  position:        relative;
  overflow:        hidden;
}

/* ── Device stage ───────────────────────────────────────────
   The frame art is authored at 1672x941. Everything inside
   .hs-scale is positioned in that same pixel space and then
   scaled as one unit by --hs-s (set by the resize observer in
   index.html), so the warped screens stay locked to their
   windows at every viewport width. */
.hero-stage {
  position:       absolute;
  top:            50%;
  right:          1%;
  width:          74%;
  aspect-ratio:   1672 / 941;
  transform:      translateY(-46%);
  z-index:        1;
  pointer-events: none;
  /* the art's own backdrop is near-black and sits on a slightly lighter
     page, so feather the edges instead of letting it read as a rectangle */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 15%),
    linear-gradient(to bottom, transparent 0, #000 8%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0, #000 15%),
    linear-gradient(to bottom, transparent 0, #000 8%, #000 88%, transparent 100%);
  mask-composite: intersect;
}

.hs-scale {
  position:         absolute;
  top:              0;
  left:             0;
  width:            1672px;
  height:           941px;
  transform-origin: 0 0;
  transform:        scale(var(--hs-s, 0.001));
}

.hs-frame {
  position: absolute;
  inset:    0;
  width:    1672px;
  height:   941px;
  display:  block;
  z-index:  4;
}

/* Each screen is a flat rectangle in its own local pixel space,
   warped onto the frame's screen quad by a perspective matrix. */
.hs-screen {
  position:         absolute;
  top:              0;
  left:             0;
  overflow:         hidden;
  transform-origin: 0 0;
  backface-visibility: hidden;
}

.hs-screen img {
  display:   block;
  width:     100%;
  height:    auto;
  animation: hs-scroll var(--dur) cubic-bezier(.45,0,.55,1) infinite;
}

/* start at the top, ride up to reveal the page, settle back */
@keyframes hs-scroll {
  0%,   6%  { transform: translateY(0); }
  50%, 58%  { transform: translateY(calc(var(--travel) * -1)); }
  100%      { transform: translateY(0); }
}

/* back-left browser — Freedom Fitness */
.hs-gym {
  width:     299px;
  height:    401px;
  z-index:   1;
  transform: matrix3d(0.830674,-0.151615,0,-0.00021814, -0.120995,0.954773,0,-0.00000814, 0,0,1,0, 478.53,284.29,0,1);
}
/* Scaled up and pinned to the window's left edge, so the right ~20% runs off
   under the centre screen — reads as the page continuing behind it. */
.hs-gym img {
  width:       125%;
  margin-left: 0;
  --travel:    390px;
  --dur:       26s;
}

/* centre browser — Ironwood Steakhouse */
.hs-ironwood {
  width:     681px;
  height:    546px;
  z-index:   2;
  transform: matrix3d(0.671976,-0.160429,0,-0.00025797, 0.049136,1.017655,0,0.00017831, 0,0,1,0, 777.47,218.92,0,1);
}
.hs-ironwood img { --travel: 889px; --dur: 32s; }

/* front phone — Loon Call Coffee */
.hs-mobile {
  width:     201px;
  height:    474px;
  z-index:   3;
  transform: matrix3d(0.798247,-0.052555,0,-0.00011329, -0.205650,0.910537,0,-0.00009635, 0,0,1,0, 1404.77,322.28,0,1);
}
/* the mobile capture is a touch shorter than this screen, so it is zoomed
   just enough to cover it and leave the scroll somewhere to travel */
.hs-mobile img {
  width:       122%;
  margin-left: -11%;
  --travel:    70px;
  --dur:       22s;
}

@media (prefers-reduced-motion: reduce) {
  .hs-screen img { animation: none; }
}

/* ── Copy ── */
.hero-copy {
  position:      relative;
  z-index:       3;
  max-width:     46%;
  margin-bottom: 2.75rem;
}

/* ── Spec bar ── */
.hero-specs {
  position:        relative;
  z-index:         3;
  margin-top:      auto;
  display:         grid;
  grid-template-columns: repeat(5, 1fr);
  align-items:     center;
  gap:             1rem;
  padding:         1.15rem 1.5rem;
  border:          1px solid var(--border);
  border-radius:   16px;
  background:      rgba(13, 20, 34, 0.55);
  backdrop-filter: blur(8px);
}

.hspec {
  display:     flex;
  align-items: center;
  gap:         .8rem;
  min-width:   0;
}

.hspec + .hspec { border-left: 1px solid var(--border); padding-left: 1rem; }

.hspec svg {
  width:       26px;
  height:      26px;
  flex-shrink: 0;
  color:       var(--blue);
  opacity:     .85;
}

.hspec div { display: flex; flex-direction: column; min-width: 0; }

.hspec-n {
  font-size:      .82rem;
  font-weight:    600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color:          var(--cream);
  white-space:    nowrap;
}

.hspec-l {
  font-size:      .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          var(--silver);
  white-space:    nowrap;
}

/* ── Hero — responsive ── */
@media (max-width: 1250px) {
  .hero-copy   { max-width: 52%; }
  .hero-stage  { width: 78%; right: -12%; }
  .hspec-n     { font-size: .76rem; }
  .hspec-l     { font-size: .62rem; }
  .hspec svg   { width: 22px; height: 22px; }
  .hspec       { gap: .6rem; }
  .hero-specs  { padding: 1rem 1.15rem; gap: .6rem; }
  .hspec + .hspec { padding-left: .75rem; }
}

@media (max-width: 1000px) {
  /* stage drops out of the absolute corner and into normal flow */
  #hero {
    min-height: auto;
    padding:    calc(80px + 2rem) 1.5rem 2.5rem;
  }
  /* source order puts the stage first (it is the absolute layer on
     desktop); in flow it has to fall between the copy and the spec bar */
  .hero-copy  { max-width: 100%; order: 1; margin-bottom: 0; }
  .hero-specs { order: 3; }
  .hero-stage {
    order:     2;
    position:  relative;
    top:       auto;
    right:     auto;
    width:     124%;
    margin:    2rem 2% 2.5rem -26%;
    transform: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-over;
    mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 86%, transparent 100%);
    mask-composite: add;
  }
  .hero-specs {
    grid-template-columns: repeat(3, 1fr);
    gap:     1rem 1.25rem;
    padding: 1.15rem 1.25rem;
  }
  .hspec + .hspec { border-left: none; padding-left: 0; }
}

@media (max-width: 620px) {
  .hero-specs { grid-template-columns: 1fr 1fr; }
  .hero-stage { width: 136%; margin: 1.5rem -4% 2rem -32%; }
}

@media (max-width: 400px) {
  .hero-specs { grid-template-columns: 1fr; gap: .8rem; }
}

.hero-bg-glow {
  position:        absolute;
  inset:           0;
  z-index:         0;
  pointer-events:  none;
  background:
    radial-gradient(ellipse 700px 500px at 65% 35%, rgba(79, 142, 247, 0.08), transparent 70%),
    radial-gradient(ellipse 400px 300px at 10% 80%,  rgba(79, 142, 247, 0.05), transparent 70%);
}

.hero-grid-lines {
  position:         absolute;
  inset:            0;
  z-index:          0;
  pointer-events:   none;
  background-image:
    linear-gradient(rgba(79, 142, 247, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 142, 247, 0.04) 1px, transparent 1px);
  background-size:  80px 80px;
  mask-image:       radial-gradient(ellipse at 50% 0%, black 30%, transparent 80%);
}

.sparkle {
  position:       absolute;
  pointer-events: none;
  z-index:        3;
}

/* Hero photo — Coder / Designer reveal */
.hero-photo {
  position:        relative;
  z-index:         3;
  display:         flex;
  align-items:     center;
  justify-content: center;
  height:          540px;
  opacity:         0;
  animation:       fadeUp .8s .1s forwards;
}

/* Outer wrapper — gives labels room outside the stack */
.reveal-wrap {
  position:  relative;
  width:     100%;
  max-width: 400px;
  padding:   3.5rem 0; /* room for labels above/below */
}

/* Stacked image box — slightly scaled so images overhang the frame subtly */
.reveal-stack {
  position:      relative;
  width:         100%;
  aspect-ratio:  3 / 4;
  border-radius: 22px;
  transform:     scale(1.045);
  box-shadow:    0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px var(--border);
}

/* Each image fills the stack, rounded corners on the img itself */
.reveal-img {
  position:    absolute;
  inset:       0;
  will-change: clip-path;
}

.reveal-img img {
  width:             100%;
  height:            100%;
  object-fit:        cover;
  object-position:   top center;
  display:           block;
  border-radius:     22px;
  -webkit-user-drag: none;
  pointer-events:    none;
}

/* JS drives clip-path on both images via style attribute */
.reveal-img-designer { z-index: 1; }
.reveal-img-coder    { z-index: 2; }

/* Clip container — keeps glow line strictly inside the image bounds */
.reveal-glow-wrap {
  position:       absolute;
  inset:          0;
  border-radius:  22px;
  overflow:       hidden;
  z-index:        10;
  pointer-events: none;
}

/* Glowing swipe line — JS moves its left%, stays clipped inside wrap */
.reveal-glow-line {
  position:        absolute;
  top:             0;
  bottom:          0;
  left:            0;
  width:           4px;
  background:      linear-gradient(
    to bottom,
    transparent          0%,
    rgba(79,142,247,.6)  20%,
    #fff                 50%,
    rgba(79,142,247,.6)  80%,
    transparent         100%
  );
  box-shadow:
    0 0 12px 5px  rgba(79,142,247,0.9),
    0 0 30px 12px rgba(79,142,247,0.4);
  transform:        skewX(13deg);
  transform-origin: top left;
  opacity:          0;
  pointer-events:   none;
}

/* Labels */
.reveal-label {
  position:    absolute;
  font-family: 'Syne', sans-serif;
  font-size:   clamp(1.3rem, 3.2vw, 1.9rem);
  font-weight: 800;
  line-height: 1.7;           /* enough room for descenders like g */
  letter-spacing: -.02em;
  overflow:    visible;
  pointer-events: none;
  transition:  opacity .45s ease, transform .45s ease;
  z-index:     30;
}

.reveal-label-designer {
  top:            -0.5rem;
  left:           1.2rem;
  color:          var(--blue);
  opacity:        0;
  transform:      translateY(6px);
  padding-bottom: 0.5rem;     /* room for g descender */
}

.reveal-label-coder {
  bottom:    -0.5rem;
  right:     1.2rem;
  color:     var(--cream);
  opacity:   0;
  transform: translateY(-6px);
}

.reveal-wrap.showing-designer .reveal-label-designer {
  opacity:   1;
  transform: translateY(0);
}

.reveal-wrap.showing-coder .reveal-label-coder {
  opacity:   1;
  transform: translateY(0);
}

/* Hero text */
.hero-text {
  position:        relative;
  z-index:         3;
  padding-left:    3.5rem;
  display:         flex;
  flex-direction:  column;
}

.hero-eyebrow {
  font-size:      .7rem;
  font-weight:    500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--blue);
  margin-bottom:  1.5rem;
  display:        flex;
  align-items:    center;
  gap:            .65rem;
  opacity:        0;
  animation:      fadeUp .7s .25s forwards;
}

.hero-eyebrow::before {
  content:    '';
  width:      28px;
  height:     1px;
  background: var(--blue);
}

.hero-h1 {
  font-family:    'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  font-weight:    700;
  font-size:      clamp(60px, 10vw, 120px);
  line-height:    1.05;
  letter-spacing: -0.02em;
  margin-bottom:  1.75rem;
  opacity:        0;
  animation:      fadeUp .7s .38s forwards;
}

.hero-h1 .chrome {
  display: block;
}

.hero-h1 .ghost {
  display:              block;
  color:                transparent;
  -webkit-text-stroke:  1.5px rgba(200, 215, 232, 0.55);
}

.hero-h1 .accent {
  display:     block;
  font-family: 'Instrument Serif', serif;
  font-style:  italic;
  font-weight: 400;
  color:       var(--blue);
}

.hero-sub {
  font-size:     1rem;
  color:         var(--silver2);
  line-height:   1.8;
  max-width:     420px;
  margin-bottom: 2rem;
  opacity:       0;
  animation:     fadeUp .7s .5s forwards;
}

.hero-sub strong {
  color:       var(--cream);
  font-weight: 500;
}

.hero-actions {
  display:     flex;
  align-items: center;
  gap:         1.25rem;
  flex-wrap:   wrap;
  opacity:     0;
  animation:   fadeUp .7s .62s forwards;
}

/* Buttons */
.btn-primary {
  background:      var(--blue);
  color:           #fff;
  padding:         .9rem 2.2rem;
  border-radius:   50px;
  font-size:       .9rem;
  font-weight:     500;
  text-decoration: none;
  box-shadow:      0 0 40px rgba(79, 142, 247, 0.3);
  transition:      transform .2s, box-shadow .2s, background .2s;
  white-space:     nowrap;
}

.btn-primary:hover {
  transform:  translateY(-2px);
  box-shadow: 0 0 60px rgba(79, 142, 247, 0.5);
  background: var(--blue2);
}

.btn-ghost {
  color:           var(--silver2);
  text-decoration: none;
  font-size:       .88rem;
  display:         flex;
  align-items:     center;
  gap:             .4rem;
  transition:      color .2s;
  white-space:     nowrap;
}

.btn-ghost .arr {
  transition: transform .2s;
}

.btn-ghost:hover {
  color: var(--cream);
}

.btn-ghost:hover .arr {
  transform: translateX(4px);
}

/* Trust badges */
.hero-trust {
  display:     flex;
  align-items: center;
  gap:         1.5rem;
  margin-top:  2rem;
  opacity:     0;
  animation:   fadeUp .7s .75s forwards;
  flex-wrap:   wrap;
}

.trust-badge {
  display:     flex;
  align-items: center;
  gap:         .4rem;
  font-size:   .75rem;
  color:       var(--silver);
}

.trust-badge svg {
  width:      14px;
  height:     14px;
  stroke:     var(--blue);
  flex-shrink: 0;
}

.trust-divider {
  width:      1px;
  height:     14px;
  background: var(--border);
}

/* Stamp */
.hero-stamp {
  position:       absolute;
  bottom:         2rem;
  left:           50%;
  transform:      translateX(-50%);
  font-size:      .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color:          var(--muted);
  z-index:        3;
}


/* ============================================================
   5. MARQUEE
============================================================ */

.stats-strip {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         3rem 3.5rem;
  background:      var(--ink2);
  border-top:      1px solid var(--border2);
  border-bottom:   1px solid var(--border);
  position:        relative;
  z-index:         5;
  overflow:        hidden;
}

/* Subtle center glow */
.stats-strip::before {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     radial-gradient(ellipse 55% 140% at 50% 50%, rgba(79, 142, 247, 0.07), transparent 70%);
  pointer-events: none;
}

/* Thin blue accent line on top */
.stats-strip::after {
  content:    '';
  position:   absolute;
  top:        0;
  left:       50%;
  transform:  translateX(-50%);
  width:      180px;
  height:     1px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
}

.strip-stat {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            .45rem;
  padding:        0 4rem;
  position:       relative;
  z-index:        1;
}

.strip-n {
  font-family:             'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  font-weight:             700;
  font-size:               clamp(1.9rem, 3vw, 2.6rem);
  letter-spacing:          -0.02em;
  line-height:             1;
  background:              linear-gradient(170deg, #ffffff 0%, #aec6e0 45%, #e8f0f8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
}

.strip-l {
  font-size:      .68rem;
  font-weight:    500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--muted);
}

.strip-div {
  width:       1px;
  height:      40px;
  background:  linear-gradient(to bottom, transparent, var(--border), transparent);
  flex-shrink: 0;
}


/* ── Trusted-by logo banner (sits directly under the hero) ── */
.trusted {
  padding:       2.75rem 3.5rem 3rem;
  background:    var(--ink2);
  border-top:    1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position:      relative;
  overflow:      hidden;
}

/* faint blue wash behind the row */
.trusted::before {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     radial-gradient(ellipse 60% 150% at 50% 50%, rgba(79, 142, 247, 0.06), transparent 70%);
  pointer-events: none;
}

.trusted-eyebrow {
  position:       relative;
  z-index:        1;
  text-align:     center;
  font-size:      .68rem;
  font-weight:    700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--blue);
  margin-bottom:  2rem;
}

.trusted-logos {
  position:        relative;
  z-index:         1;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             2.5rem;
  max-width:       1200px;
  margin:          0 auto;
}

.tl-slot {
  flex:            1 1 0;
  min-width:       0;
  height:          58px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         .55;
  filter:          grayscale(1) brightness(1.9);
  transition:      opacity .25s, filter .25s;
}

.tl-slot:hover {
  opacity: 1;
  filter:  grayscale(0) brightness(1);
}

.tl-slot img {
  max-width:  100%;
  max-height: 100%;
  width:      auto;
  height:     auto;
  object-fit: contain;
  display:    block;
}

/* Placeholder — shown only while the real logo file is missing.
   The inline onerror strips the <img>, so :has() flips this back off
   as soon as a file with the right name exists. */
.tl-slot::before {
  content:         attr(data-name);
  display:         flex;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  width:           100%;
  height:          100%;
  padding:         0 .5rem;
  font-size:       .7rem;
  font-weight:     500;
  letter-spacing:  .06em;
  line-height:     1.3;
  color:           var(--silver);
  border:          1px dashed var(--border);
  border-radius:   10px;
}

.tl-slot:has(img)::before { content: none; }

/* Logo banner — responsive */
@media (max-width: 900px) {
  .trusted        { padding: 2.25rem 1.5rem 2.5rem; }
  .trusted-eyebrow{ font-size: .62rem; letter-spacing: .16em; margin-bottom: 1.5rem; }
  .trusted-logos  {
    flex-wrap:       wrap;
    justify-content: center;
    gap:             1.5rem 2rem;
  }
  .tl-slot {
    flex:      0 1 calc(33.333% - 1.5rem);
    height:    46px;
  }
  .tl-slot::before { font-size: .62rem; }
}

@media (max-width: 520px) {
  .tl-slot { flex: 0 1 calc(50% - 1rem); }
}


/* ============================================================
   6. SECTION COMMONS
============================================================ */

.s-tag {
  display:        inline-flex;
  align-items:    center;
  gap:            .5rem;
  font-size:      .68rem;
  font-weight:    700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--blue);
  margin-bottom:  1rem;
}

.s-tag::before {
  content:    '';
  width:      20px;
  height:     1px;
  background: var(--blue);
}

/* Chrome gradient — applied to all display headings */
.hero-h1 .chrome,
.s-h2,
.prob-headline,
.ben-headline,
.work-title2,
.cta-h2 {
  background:              linear-gradient(170deg, #ffffff 0%, #aec6e0 45%, #e8f0f8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
}

/* Blue child overrides — keep accent/em elements their own color */
.hero-h1 .accent,
.s-h2 em,
.cta-h2 em {
  background:              none;
  -webkit-text-fill-color: var(--blue);
  color:                   var(--blue);
}

/* Hero accent gets the italic serif treatment */
.hero-h1 .accent {
  font-family: 'Instrument Serif', serif;
  font-style:  italic;
  font-weight: 400;
}

/* Ghost outline — truly transparent fill, stroke only */
.hero-h1 .ghost {
  background:              none;
  -webkit-text-fill-color: transparent;
  color:                   transparent;
}

.s-h2 {
  font-family:    'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  font-weight:    700;
  font-size:      clamp(1.9rem, 4vw, 3.2rem);
  letter-spacing: -0.02em;
  line-height:    1.12;
  margin-bottom:  1rem;
}

.s-h2 em {
  font-family: 'Instrument Serif', serif;
  font-style:  italic;
  color:       var(--blue);
  font-weight: 400;
}

.s-sub {
  font-size:     .95rem;
  color:         var(--silver);
  max-width:     540px;
  margin-bottom: 3.5rem;
  line-height:   1.75;
}


/* ============================================================
   7. PROBLEM / SOLUTION
============================================================ */

#problem {
  padding:    3.5rem 3.5rem 4.5rem;
  background: var(--ink);
  border-top: 1px solid var(--border);
  position:   relative;
  overflow:   hidden;
}

.problem-inner {
  max-width: 1320px;
  margin:    0 auto;
}

/* ── Reality card ───────────────────────────────────────── */
.reality-card {
  position:              relative;
  overflow:              hidden;
  display:               grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(220px, 290px);
  align-items:           start;
  column-gap:            3rem;
  padding:               4rem 0 3.5rem 4rem;
  background:            linear-gradient(115deg, rgba(239, 68, 68, 0.05) 0%, rgba(8, 12, 20, 0) 38%, rgba(8, 12, 20, 0) 58%, rgba(34, 197, 94, 0.06) 100%), var(--ink2);
  border:                1px solid var(--border);
  border-radius:         26px;
}

.reality-glow {
  position:       absolute;
  top:            50%;
  width:          520px;
  height:         520px;
  border-radius:  50%;
  transform:      translateY(-50%);
  pointer-events: none;
  z-index:        0;
}

.reality-glow.bad {
  left:       -180px;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.10), transparent 65%);
}

.reality-glow.good {
  right:      -120px;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.10), transparent 65%);
}

.reality-col {
  position:        relative;
  z-index:         1;
  align-self:      stretch;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
}

.reality-eyebrow {
  font-size:      .7rem;
  font-weight:    700;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom:  1.15rem;
}

.reality-eyebrow.bad  { color: #ef4444; }
.reality-eyebrow.good { color: var(--green); }

.reality-h2 {
  font-family:    'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  font-weight:    700;
  font-size:      clamp(1.4rem, 2.3vw, 2.15rem);
  letter-spacing: -0.02em;
  line-height:    1.22;
  color:          #fff;
  margin-bottom:  2.5rem;
}

.reality-h2 em {
  font-family: 'Instrument Serif', serif;
  font-style:  italic;
  font-weight: 400;
}

.reality-h2 em.bad  { color: #ef4444; }
.reality-h2 em.good { color: var(--green); }

.reality-list {
  list-style: none;
  display:    flex;
  flex-direction: column;
  gap:        1.5rem;
}

.reality-list li {
  display:     flex;
  align-items: center;
  gap:         1rem;
  font-size:   .95rem;
  line-height: 1.5;
  color:       var(--silver2);
}

.rl-icon {
  width:           26px;
  height:          26px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       .68rem;
  font-weight:     700;
  flex-shrink:     0;
}

.rl-icon.bad {
  background: rgba(239, 68, 68, 0.12);
  color:      #ef4444;
  border:     1px solid rgba(239, 68, 68, 0.22);
}

.rl-icon.good {
  background: rgba(34, 197, 94, 0.12);
  color:      var(--green);
  border:     1px solid rgba(34, 197, 94, 0.22);
}

/* Vertical divider between the two columns */
.reality-divider {
  position:        relative;
  z-index:         1;
  align-self:      stretch;
  width:           1px;
  background:      linear-gradient(180deg, transparent, var(--border) 15%, var(--border) 85%, transparent);
}

/* PageSpeed phone */
.reality-phone {
  position:  relative;
  z-index:   1;
  align-self: end;
  margin-bottom: -3.5rem;
}

.reality-phone img {
  display:   block;
  width:     100%;
  height:    auto;
  /* Scaled and shifted rather than sized up, so the handset can grow and slide
     left without the grid row (and therefore the card) getting any taller.
     The 6.25% nudge down cancels the empty space below the phone in the source
     image, keeping it flush with the card's bottom edge. */
  transform-origin: bottom center;
  transform: translate(-8%, 7.06%) scale(1.13);
  filter:    drop-shadow(0 24px 50px rgba(0, 0, 0, 0.55));
}

/* Reality card — responsive */

/* Between the card's max width and the point where the phone drops out, pull
   in the padding/gap/phone so the bullet lines still fit on one line each. */
@media (max-width: 1430px) and (min-width: 1241px) {
  .reality-card {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(185px, 230px);
    column-gap:  2rem;
    padding-left: 2.5rem;
  }
}

@media (max-width: 1240px) {
  .reality-card {
    grid-template-columns: 1fr auto 1fr;
    gap:     2rem;
    padding: 3rem 2.5rem;
  }
  .reality-phone { display: none; }
}

@media (max-width: 860px) {
  #problem { padding: 4rem 1.25rem; }

  .reality-card {
    grid-template-columns: 1fr;
    gap:           2rem;
    padding:       2.25rem 1.5rem;
    border-radius: 20px;
    background:    linear-gradient(180deg, rgba(239, 68, 68, 0.05) 0%, rgba(8, 12, 20, 0) 45%, rgba(34, 197, 94, 0.06) 100%), var(--ink2);
  }

  .reality-glow { display: none; }

  .reality-divider {
    width:      100%;
    height:     1px;
    align-self: center;
    background: linear-gradient(90deg, transparent, var(--border) 15%, var(--border) 85%, transparent);
  }

  .reality-h2   { font-size: 1.45rem; margin-bottom: 1.5rem; }
  .reality-list { gap: 1.1rem; }
  .reality-list li {
    font-size:   .88rem;
    align-items: flex-start;
  }
  .reality-list li .rl-icon { margin-top: 1px; }
}

.prob-columns {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1.5rem;
  margin-top:            3.5rem;
}

.prob-col {
  display:        flex;
  flex-direction: column;
  gap:            .6rem;
}

.prob-col-head {
  font-size:      .68rem;
  font-weight:    700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding:        0 .5rem .5rem;
  display:        flex;
  align-items:    center;
  gap:            .5rem;
}

.prob-col-head.bad  { color: #ef4444; }
.prob-col-head.good { color: var(--green); }

/* Individual pill cards */
.prob-card {
  display:       flex;
  align-items:   center;
  gap:           1rem;
  padding:       1.1rem 1.4rem;
  font-size:     .88rem;
  line-height:   1.5;
  background:    var(--ink2);
  border:        1px solid var(--border);
  border-radius: 50px;
  transition:    border-color .2s;
}

.prob-card.bad  { color: var(--silver); }
.prob-card.good { color: var(--silver2); }

.prob-card.bad:hover  { border-color: rgba(239, 68, 68, 0.3); }
.prob-card.good:hover { border-color: rgba(34, 197, 94, 0.3); }

.pc-icon {
  width:           22px;
  height:          22px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       .6rem;
  font-weight:     700;
  flex-shrink:     0;
}

.prob-card.bad .pc-icon {
  background: rgba(239, 68, 68, 0.1);
  color:      #ef4444;
  border:     1px solid rgba(239, 68, 68, 0.18);
}

.prob-card.good .pc-icon {
  background: rgba(34, 197, 94, 0.1);
  color:      var(--green);
  border:     1px solid rgba(34, 197, 94, 0.18);
}

.pc-text { flex: 1; }


/* ============================================================
   8. ABOUT
============================================================ */

.about-card {
  background:    var(--ink2);
  border:        1px solid var(--border);
  border-radius: 20px;
  padding:       2.5rem;
  position:      relative;
  overflow:      hidden;
}

.about-card::before {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     radial-gradient(ellipse 300px 200px at 80% 20%, var(--blue-glow), transparent 70%);
  pointer-events: none;
}

.about-serif {
  font-family:   'Instrument Serif', serif;
  font-style:    italic;
  font-size:     1.4rem;
  color:         var(--silver2);
  line-height:   1.5;
  margin-bottom: 1.5rem;
}

.about-body {
  font-size:   .9rem;
  color:       var(--silver);
  line-height: 1.85;
}

.about-body strong {
  color:       var(--cream);
  font-weight: 500;
}

.about-sig {
  margin-top:    1.5rem;
  padding-top:   1.5rem;
  border-top:    1px solid var(--border);
  font-family:   'Instrument Serif', serif;
  font-style:    italic;
  color:         var(--blue);
  font-size:     1.05rem;
}

#about {
  padding: 7rem 3.5rem;
}

.about-inner {
  max-width: 1200px;
  margin:    0 auto;
}

.about-inner .s-tag,
.about-inner .s-h2 {
  margin-bottom: .5rem;
}

.about-inner .s-h2 {
  margin-bottom: 2rem;
}

.about-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   2rem;
  align-items:           stretch;
}

.about-right {
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
}

.about-stats {
  display:         flex;
  flex-direction:  column;
  gap:             .5rem;
  height:          100%;
  justify-content: space-between;
}

.about-stat-card {
  display:         flex;
  flex-direction:  column;
  flex:            0 0 auto;
  align-self:      flex-start;
  width:           100%;
  background:      var(--ink2);
  border:          1px solid var(--border);
  border-radius:   14px;
  overflow:        hidden;
  position:        relative;
  cursor:          pointer;
  transition:      border-color .35s, box-shadow .35s, background .35s;
}
.about-stat-card:hover {
  border-color: rgba(79,142,247,0.48);
  box-shadow:   0 0 0 1px rgba(79,142,247,0.15),
                0 0 28px rgba(79,142,247,0.16),
                0 0 60px rgba(79,142,247,0.07),
                0 8px 32px rgba(0,0,0,0.3);
  background:   rgba(12,18,36,0.99);
}
.about-stat-card.open {
  border-color: rgba(79,142,247,0.35);
  box-shadow:   0 0 0 1px rgba(79,142,247,0.12), 0 8px 32px rgba(0,0,0,0.25);
}

/* Top row — the always-visible part */
.asc-top {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         .9rem 1.5rem;
  gap:             .75rem;
}

/* Right group: icon + chevron */
.asc-right {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  flex-shrink: 0;
}

/* Chevron arrow */
.asc-chevron {
  width:      18px;
  height:     18px;
  color:      rgba(79,142,247,0.35);
  flex-shrink:0;
  transition: transform .38s cubic-bezier(.4,0,.2,1), color .25s;
}
.about-stat-card.open .asc-chevron {
  transform: rotate(180deg);
  color:     rgba(79,142,247,0.75);
}

/* Expand container — grid row trick for butter-smooth animation */
.asc-expand {
  display:             grid;
  grid-template-rows:  0fr;
  transition:          grid-template-rows .38s cubic-bezier(.4,0,.2,1);
}
.about-stat-card.open .asc-expand {
  grid-template-rows: 1fr;
}
.asc-expand-inner {
  overflow: hidden;
}
.asc-expand-content {
  padding:     0 1.5rem 1rem 1.5rem;
  border-top:  1px solid rgba(79,142,247,0.09);
}
.asc-expand-content p {
  margin:      .65rem 0 0;
  font-size:   .78rem;
  line-height: 1.7;
  color:       rgba(160,196,240,0.75);
}
.asc-expand-content p strong {
  color:       rgba(160,196,240,1);
  font-weight: 600;
}

/* Stepped sizing — narrowest at top, full width at bottom */
.about-stats .about-stat-card:nth-child(1) { width: 52%; }
.about-stats .about-stat-card:nth-child(2) { width: 64%; }
.about-stats .about-stat-card:nth-child(3) { width: 76%; }
.about-stats .about-stat-card:nth-child(4) { width: 88%; }
.about-stats .about-stat-card:nth-child(5) { width: 100%; }

.about-stat-card::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: radial-gradient(ellipse 60% 100% at 100% 50%, rgba(79,142,247,0.05), transparent 70%);
  pointer-events: none;
}

.asc-text {
  display:        flex;
  flex-direction: column;
  gap:            .3rem;
}

.asc-img {
  width:       48px;
  height:      48px;
  flex-shrink: 0;
  opacity:     .85;
  overflow:    visible;
  transition:  opacity .3s;
}
.about-stat-card:hover .asc-img { opacity: 1; }

/* ── Card 1: Clock — hands spin at different speeds ── */
.asc-min-hand,
.asc-hr-hand  { transform-box: view-box; transform-origin: 40px 40px; }
@keyframes ascClockMin { to { transform: rotate(360deg); } }
@keyframes ascClockHr  { to { transform: rotate(360deg); } }
.about-stat-card:hover .asc-min-hand { animation: ascClockMin 2s   linear infinite; }
.about-stat-card:hover .asc-hr-hand  { animation: ascClockHr  10s  linear infinite; }

/* ── Card 2: Maintenance wheel — whole icon rotates like a gear ── */
.asc-maint-spin { transform-box: fill-box; transform-origin: center; }
@keyframes ascGearSpin { to { transform: rotate(360deg); } }
.about-stat-card:hover .asc-maint-spin { animation: ascGearSpin 6s linear infinite; }

/* ── Card 3: Stars — big star pulses, small stars cascade-twinkle ── */
.asc-star-big { transform-box: fill-box; transform-origin: center; }
.asc-star-s1, .asc-star-s2, .asc-star-s3,
.asc-star-s4, .asc-star-s5 { transform-box: fill-box; transform-origin: center; }
@keyframes ascStarBig {
  0%,100% { transform: scale(1);    filter: drop-shadow(0 0 0px  rgba(79,142,247,0)); }
  50%     { transform: scale(1.22); filter: drop-shadow(0 0 10px rgba(79,142,247,0.85)); }
}
@keyframes ascStarSmall {
  0%,100% { transform: scale(1);    opacity: 0.6; }
  50%     { transform: scale(1.5);  opacity: 1; filter: drop-shadow(0 0 5px rgba(79,142,247,0.9)); }
}
.about-stat-card:hover .asc-star-big { animation: ascStarBig   1.8s ease-in-out infinite; }
.about-stat-card:hover .asc-star-s1  { animation: ascStarSmall 1.2s ease-in-out 0s     infinite; }
.about-stat-card:hover .asc-star-s2  { animation: ascStarSmall 1.2s ease-in-out 0.24s  infinite; }
.about-stat-card:hover .asc-star-s3  { animation: ascStarSmall 1.2s ease-in-out 0.48s  infinite; }
.about-stat-card:hover .asc-star-s4  { animation: ascStarSmall 1.2s ease-in-out 0.72s  infinite; }
.about-stat-card:hover .asc-star-s5  { animation: ascStarSmall 1.2s ease-in-out 0.96s  infinite; }

/* ── Card 4: Shield — checkmark draws in, shield glows ── */
.asc-check {
  stroke-dasharray:  32;
  stroke-dashoffset: 32;
  transition: stroke-dashoffset 0.65s cubic-bezier(0.4,0,0.2,1);
}
.about-stat-card:hover .asc-check { stroke-dashoffset: 0; }
@keyframes ascShieldGlow {
  0%,100% { filter: drop-shadow(0 0 1px rgba(79,142,247,0.1)); }
  50%     { filter: drop-shadow(0 0 10px rgba(79,142,247,0.75)); }
}
.about-stat-card:hover .asc-shield { animation: ascShieldGlow 2s ease-in-out infinite; }

/* ── Card 5: Infinity — light travels the loop ── */
@keyframes ascInfFlow { to { stroke-dashoffset: -200; } }
.about-stat-card:hover .asc-inf-path {
  stroke-dasharray:  28 172;
  stroke-width:      3.2;
  filter:            drop-shadow(0 0 5px rgba(160,210,255,0.9));
  animation:         ascInfFlow 2.2s linear infinite;
}


/* ============================================================
   BENTO CARD HOVER ANIMATIONS
   ============================================================ */

/* ─── Card 1: Custom Web Design — panels spread wide, cursor darts ─── */
@keyframes c1FloatL {
  0%,100% { transform: translate(0, 0);          filter: drop-shadow(0 0 0px rgba(79,142,247,0)); }
  50%     { transform: translate(-16px, -12px);  filter: drop-shadow(-5px -5px 12px rgba(79,142,247,0.55)); }
}
@keyframes c1FloatR {
  0%,100% { transform: translate(0, 0);          filter: drop-shadow(0 0 0px rgba(79,142,247,0)); }
  50%     { transform: translate(16px, -12px);   filter: drop-shadow(5px -5px 12px rgba(79,142,247,0.55)); }
}
@keyframes c1Cursor {
  0%,100% { transform: translate(0,0); }
  20%     { transform: translate(16px,-12px); }
  55%     { transform: translate(-10px, 16px); }
  80%     { transform: translate(8px, 4px); }
}
.ben:hover .c1-html   { animation: c1FloatL 2s ease-in-out infinite; }
.ben:hover .c1-css    { animation: c1FloatR 2s ease-in-out infinite; }
.ben:hover .c1-cursor { animation: c1Cursor 2.8s ease-in-out infinite; }

/* ─── Card 2: Lightning bolt — hard electric crack ─── */
@keyframes c2BoltPulse {
  0%,100% { opacity:1;    transform: scale(1);    filter: drop-shadow(0 0 0px  rgba(79,142,247,0)); }
  12%     { opacity:0.3;  transform: scale(0.91); filter: drop-shadow(0 0 0px  rgba(79,142,247,0)); }
  28%     { opacity:1;    transform: scale(1.18); filter: drop-shadow(0 0 22px rgba(79,142,247,0.9)); }
  45%     { opacity:0.6;  transform: scale(1.05); filter: drop-shadow(0 0 8px  rgba(79,142,247,0.4)); }
  65%     { opacity:1;    transform: scale(1.15); filter: drop-shadow(0 0 18px rgba(79,142,247,0.8)); }
  82%     { opacity:0.55; transform: scale(1.02); filter: drop-shadow(0 0 4px  rgba(79,142,247,0.3)); }
}
.ben:hover .c2-bolt {
  animation: c2BoltPulse 1.3s ease-in-out infinite;
  transform-box:    fill-box;
  transform-origin: center;
}

/* ─── Card 3: Padlock — shackle wrenches up, keyhole blazes ─── */
@keyframes c3Shackle {
  0%,45%,100% { transform: translateY(0); }
  18%         { transform: translateY(-20px); }
  32%         { transform: translateY(-15px); }
}
@keyframes c3KeyPulse {
  0%,100% { opacity:1;   transform: scale(1);    filter: drop-shadow(0 0 0px  rgba(79,142,247,0)); }
  50%     { opacity:0.1; transform: scale(1.28); filter: drop-shadow(0 0 14px rgba(79,142,247,1)); }
}
.ben:hover .c3-shackle { animation: c3Shackle  1.9s ease-in-out infinite; }
.ben:hover .c3-key     {
  animation: c3KeyPulse 1.1s ease-in-out infinite;
  transform-box:    fill-box;
  transform-origin: center;
}

/* ─── Card 4: ∞ — blazing light streak, dots flare, ∞ swells ─── */
.c4-flow { opacity: 0; transition: opacity 0.35s; }
.ben:hover .c4-flow {
  opacity: 1;
  animation: c4Flow 1.8s linear infinite;
  filter: drop-shadow(0 0 6px rgba(160,210,255,0.9));
}
@keyframes c4Flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -400; }
}
@keyframes c4Breathe {
  0%,100% { transform: scale(1);    filter: drop-shadow(0 0 2px  rgba(79,142,247,0.15)); }
  50%     { transform: scale(1.1);  filter: drop-shadow(0 0 16px rgba(79,142,247,0.65)); }
}
.ben:hover .c4-inf {
  animation: c4Breathe 2.2s ease-in-out infinite;
  transform-box:    fill-box;
  transform-origin: center;
}
@keyframes c4DotRipple {
  0%,100% { opacity: 0.12; transform: scale(1); }
  50%     { opacity: 1;    transform: scale(2.2); }
}
.ben:hover .c4-d1 { animation: c4DotRipple 1s ease-in-out 0s    infinite; transform-box: fill-box; transform-origin: center; }
.ben:hover .c4-d2 { animation: c4DotRipple 1s ease-in-out 0.2s  infinite; transform-box: fill-box; transform-origin: center; }
.ben:hover .c4-d3 { animation: c4DotRipple 1s ease-in-out 0.4s  infinite; transform-box: fill-box; transform-origin: center; }
.ben:hover .c4-d4 { animation: c4DotRipple 1s ease-in-out 0.2s  infinite; transform-box: fill-box; transform-origin: center; }
.ben:hover .c4-d5 { animation: c4DotRipple 1s ease-in-out 0s    infinite; transform-box: fill-box; transform-origin: center; }

/* ─── Card 5: SEO logos soar with stagger, wave rushes ─── */
@keyframes c5Float {
  0%,100% { transform: translateY(0);    filter: drop-shadow(0 0 0px  rgba(79,142,247,0)); }
  50%     { transform: translateY(-18px); filter: drop-shadow(0 -5px 12px rgba(79,142,247,0.6)); }
}
.ben:hover .c5-google { animation: c5Float 2s ease-in-out 0s    infinite; }
.ben:hover .c5-bing   { animation: c5Float 2s ease-in-out 0.38s infinite; }
.ben:hover .c5-edge   { animation: c5Float 2s ease-in-out 0.76s infinite; }
.ben:hover .c5-yahoo  { animation: c5Float 2s ease-in-out 1.14s infinite; }
@keyframes c5WaveFlow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -700; }
}
.c5-wave { stroke-dasharray: 700; }
.ben:hover .c5-wave { animation: c5WaveFlow 2.8s linear infinite; }

/* ═══════════════════════════════════════════════════════════════
   3D PROJECT CAROUSEL
═══════════════════════════════════════════════════════════════ */

.car-wrap {
  position: relative;
  display:  flex;
  align-items: center;
  justify-content: center;
  margin-top: 4.5rem;
  padding: 0 20px;
  gap: 28px;
}

.car-stage {
  perspective:        1400px;
  perspective-origin: 50% 45%;
  position:  relative;
  width:     360px;
  height:    510px;
  flex-shrink: 0;
  overflow: visible;
}

.car-card {
  position:    absolute;
  top:         0;
  left:        50%;
  width:       360px;
  margin-left: -180px;
  text-decoration: none;
  color:       inherit;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(13,18,33,0.99), rgba(7,10,20,1));
  border: 1px solid rgba(79,142,247,0.14);
  overflow: hidden;
  cursor: pointer;
  transition:
    transform    0.58s cubic-bezier(0.25,0.46,0.45,0.94),
    opacity      0.58s ease,
    filter       0.58s ease,
    box-shadow   0.58s ease,
    border-color 0.58s ease;
  transform-origin: center center;
  will-change: transform, opacity;
  box-shadow: 0 16px 50px rgba(0,0,0,0.45);
  user-select: none;
}

/* ── Position states ── */
.car-card.pos-active {
  transform:    translateX(0) scale(1) rotateY(0deg);
  opacity:      1;
  z-index:      5;
  filter:       none;
  box-shadow:   0 32px 80px rgba(0,0,0,0.65), 0 0 50px rgba(79,142,247,0.1);
  border-color: rgba(79,142,247,0.32);
  pointer-events: all;
}
.car-card.pos-prev {
  transform: translateX(-310px) scale(0.76) rotateY(24deg);
  opacity:   0.72;
  z-index:   3;
  filter:    brightness(0.6) saturate(0.8);
  pointer-events: all;
}
.car-card.pos-next {
  transform: translateX(310px) scale(0.76) rotateY(-24deg);
  opacity:   0.72;
  z-index:   3;
  filter:    brightness(0.6) saturate(0.8);
  pointer-events: all;
}
.car-card.pos-far-prev {
  transform: translateX(-600px) scale(0.52) rotateY(38deg);
  opacity:   0;
  z-index:   1;
  pointer-events: none;
}
.car-card.pos-far-next {
  transform: translateX(600px) scale(0.52) rotateY(-38deg);
  opacity:   0;
  z-index:   1;
  pointer-events: none;
}
.car-card.pos-prev:hover,
.car-card.pos-next:hover {
  filter:  brightness(0.78) saturate(0.9);
  opacity: 0.88;
}

/* ── Arrow buttons ── */
.car-btn {
  width:  52px;
  height: 52px;
  border-radius: 50%;
  background:   rgba(13,18,33,0.92);
  border: 1px solid rgba(79,142,247,0.22);
  color:  rgba(143,163,191,0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.2s;
  flex-shrink: 0;
  z-index: 10;
  position: relative;
}
.car-btn:hover {
  background:   rgba(79,142,247,0.13);
  border-color: rgba(79,142,247,0.5);
  color:        rgba(79,142,247,0.95);
  transform:    scale(1.1);
}
.car-btn:active { transform: scale(0.93); }

@keyframes carHintL {
  0%,100% { transform: translateX(0); }
  35%     { transform: translateX(-6px); }
}
@keyframes carHintR {
  0%,100% { transform: translateX(0); }
  35%     { transform: translateX(6px); }
}
.car-prev.hint { animation: carHintL 0.7s ease-in-out; }
.car-next.hint { animation: carHintR 0.7s ease-in-out; }

/* ── Mockup image ── */
.car-mockup {
  width:         100%;
  overflow:      hidden;
  border-radius: 15px 15px 0 0;
  line-height:   0;
  border-bottom: 1px solid rgba(79,142,247,0.1);
  background:    rgba(10,14,24,1);
}
.car-mockup svg { width: 100%; height: auto; display: block; }

/* Browser chrome bar (for real screenshot cards) */
.car-browser-chrome {
  display:     flex;
  align-items: center;
  gap:         5px;
  padding:     8px 12px;
  background:  rgba(14,18,30,1);
  line-height: 1;
}
.cbc-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  display:       inline-block;
  background:    rgba(255,255,255,0.15);
}
.cbc-dot:nth-child(1) { background: rgba(239,68,68,0.5); }
.cbc-dot:nth-child(2) { background: rgba(251,191,36,0.5); }
.cbc-dot:nth-child(3) { background: rgba(34,197,94,0.5); }
.cbc-url {
  margin-left:  8px;
  font-size:    9px;
  color:        rgba(255,255,255,0.28);
  font-family:  system-ui, sans-serif;
  letter-spacing: 0.01em;
}
.car-screen img {
  width:   100%;
  height:  auto;
  display: block;
}

/* ── Card body ── */
.car-body { padding: 18px 22px 22px; }

.car-tag {
  font-size:    0.66rem;
  font-weight:  600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:        rgba(79,142,247,0.72);
  margin-bottom: 7px;
}
.car-name {
  font-size:   1.3rem;
  font-weight: 700;
  color:       rgba(218,232,255,0.95);
  line-height: 1.25;
  margin-bottom: 9px;
  letter-spacing: -0.015em;
}
.car-desc {
  font-size:  0.77rem;
  line-height: 1.65;
  color:      rgba(143,163,191,0.72);
  margin:     0 0 15px;
}
.car-stats {
  display:  flex;
  border-top:    1px solid rgba(79,142,247,0.1);
  border-bottom: 1px solid rgba(79,142,247,0.1);
  margin-bottom: 15px;
}
.car-stat {
  flex: 1;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  padding: 9px 0;
  border-right: 1px solid rgba(79,142,247,0.1);
}
.car-stat:last-child { border-right: none; }
.cs-val {
  font-size:   0.98rem;
  font-weight: 700;
  color:       rgba(155,205,255,0.92);
  letter-spacing: -0.02em;
}
.cs-lbl {
  font-size:  0.6rem;
  color:      rgba(143,163,191,0.48);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: 2px;
  text-align: center;
}
.car-cta {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  font-size:   0.79rem;
  font-weight: 600;
  color:       rgba(79,142,247,0.72);
  transition:  color 0.2s, gap 0.2s;
}
.car-card.pos-active:hover .car-cta {
  color: rgba(79,142,247,1);
  gap:   10px;
}

/* ── Dots ── */
.car-dots {
  display:         flex;
  justify-content: center;
  gap:             8px;
  margin-top:      30px;
}
.car-dot {
  width:  8px;
  height: 8px;
  border-radius: 50%;
  background:   rgba(79,142,247,0.18);
  border: 1px solid rgba(79,142,247,0.25);
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, width 0.3s, border-radius 0.3s, border-color 0.3s;
}
.car-dot.active {
  background:   rgba(79,142,247,0.82);
  border-color: rgba(79,142,247,0.82);
  width:        26px;
  border-radius: 4px;
}

/* ── Mobile: horizontal peek carousel ── */
@media (max-width: 767px) {
  /* clip peeking side cards at viewport edges */
  #work { overflow: hidden; }

  /* stretch car-wrap edge-to-edge, cancelling the section's side padding */
  .car-wrap {
    flex-direction: row;
    padding:      0;
    gap:          0;
    margin-left:  -3.5rem;
    margin-right: -3.5rem;
    width:        calc(100% + 7rem);
    align-items:  center;
  }

  /* hide arrows — swipe & dots handle navigation */
  .car-btn { display: none; }

  .car-stage {
    perspective:        1000px;
    perspective-origin: 50% 45%;
    width:     70vw;
    height:    510px;
    flex-shrink: 0;
  }

  /* cards scale to 70vw — center stage fills 70% of viewport */
  .car-card {
    width:       70vw;
    margin-left: -35vw;
  }

  /* active: centered, full size */
  .car-card.pos-active {
    transform:    translateX(0) scale(1) rotateY(0deg);
    box-shadow:   0 24px 60px rgba(0,0,0,0.65), 0 0 40px rgba(79,142,247,0.1);
    border-color: rgba(79,142,247,0.32);
  }

  /* side cards: peek ~15vw in from each edge */
  .car-card.pos-prev {
    transform: translateX(-67vw) scale(0.9) rotateY(16deg);
    opacity:   0.72;
    filter:    brightness(0.6) saturate(0.8);
  }
  .car-card.pos-next {
    transform: translateX(67vw) scale(0.9) rotateY(-16deg);
    opacity:   0.72;
    filter:    brightness(0.6) saturate(0.8);
  }

  /* far cards: fully off-screen */
  .car-card.pos-far-prev {
    transform: translateX(-140vw) scale(0.65) rotateY(30deg);
    opacity:   0;
  }
  .car-card.pos-far-next {
    transform: translateX(140vw) scale(0.65) rotateY(-30deg);
    opacity:   0;
  }

  /* dots: restore normal centering after the negative margin */
  .car-dots {
    margin-top: 28px;
  }

  .car-prev.hint,
  .car-next.hint { animation: none; }
}

/* Stat cards */
.stat-big {
  background:    var(--ink2);
  border:        1px solid var(--border);
  border-radius: 16px;
  padding:       1.75rem 2rem;
  position:      relative;
  overflow:      hidden;
  transition:    border-color .3s, transform .3s;
}

.stat-big:hover {
  border-color: var(--border2);
  transform:    translateX(4px);
}

.stat-big::after {
  content:       '';
  position:      absolute;
  right:         0;
  top:           0;
  bottom:        0;
  width:         3px;
  background:    var(--blue);
  border-radius: 0 16px 16px 0;
  opacity:       0;
  transition:    opacity .3s;
}

.stat-big:hover::after {
  opacity: 1;
}

.stat-n {
  font-family:    'Syne', sans-serif;
  font-weight:    800;
  font-size:      2.6rem;
  letter-spacing: -.04em;
  line-height:    1;
  color:          var(--cream);
  margin-bottom:  .2rem;
}

.stat-n sup {
  font-size:      1.3rem;
  vertical-align: top;
  margin-top:     .3rem;
  color:          var(--blue);
}

.stat-l {
  font-size:      .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--muted);
}

/* PageSpeed badge */
.pagespeed-badge {
  background:    var(--ink2);
  border:        1px solid var(--border);
  border-radius: 16px;
  padding:       1.75rem 2rem;
  display:       flex;
  align-items:   center;
  gap:           1.5rem;
  transition:    border-color .3s;
}

.pagespeed-badge:hover {
  border-color: var(--border2);
}

.ps-score {
  width:           58px;
  height:          58px;
  border-radius:   50%;
  background:      conic-gradient(var(--green) 360deg, transparent 0deg);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  position:        relative;
}

.ps-score::before {
  content:       '';
  position:      absolute;
  inset:         5px;
  border-radius: 50%;
  background:    var(--ink2);
}

.ps-num {
  position:       relative;
  z-index:        1;
  font-family:    'Syne', sans-serif;
  font-weight:    800;
  font-size:      .9rem;
  color:          var(--green);
  letter-spacing: -.02em;
}

.ps-text .ps-title {
  font-size:     .88rem;
  font-weight:   500;
  color:         var(--cream);
  margin-bottom: .2rem;
}

.ps-text .ps-sub {
  font-size:   .75rem;
  color:       var(--muted);
  line-height: 1.5;
}


/* ============================================================
   9. SERVICES (BENTO)
============================================================ */

#services {
  padding:       7rem 3.5rem;
  background:    var(--ink2);
  border-top:    1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.services-inner {
  max-width: 1200px;
  margin:    0 auto;
}

.services-bento {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows:        1fr;
  gap:                   14px;
  margin-top:            3.5rem;
}

/* Bento card base */
.ben {
  background:      #080c14;
  border:          1px solid rgba(143, 163, 191, 0.1);
  border-radius:   20px;
  padding:         2.5rem;
  position:        relative;
  overflow:        hidden;
  transition:      border-color .3s, background .3s;
  display:         flex;
  flex-direction:  column;
  justify-content: flex-end;
  min-height:      220px;
}

.ben:hover {
  border-color: rgba(79, 142, 247, 0.28);
}

/* Full-bleed atmospheric art layer */
.ben-bg-art {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
  z-index:         0;
}

.ben-bg-art svg {
  width:  100%;
  height: 100%;
}

/* Gradient scrim so text is always readable */
.ben::after {
  content:         '';
  position:        absolute;
  bottom:          0;
  left:            0;
  right:           0;
  height:          70%;
  background:      linear-gradient(to top, rgba(6,9,16,0.97) 0%, rgba(6,9,16,0.55) 50%, transparent 100%);
  z-index:         1;
  pointer-events:  none;
}

/* Text content sits above art and scrim */
.ben-content {
  position:       relative;
  z-index:        2;
  margin-top:     auto;
}

.ben.tall {
  grid-column: span 2;
  grid-row:    span 2;
  min-height:  460px;
}

.ben.wide {
  grid-column: span 2;
}

.ben-glow {
  position:       absolute;
  inset:          0;
  border-radius:  20px;
  background:     radial-gradient(ellipse 200px 200px at 80% 80%, rgba(79, 142, 247, 0.06), transparent 70%);
  pointer-events: none;
  opacity:        0;
  transition:     opacity .3s;
}

.ben:hover .ben-glow {
  opacity: 1;
}

.ben-headline {
  font-family:    'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  font-weight:    700;
  font-size:      1.5rem;
  line-height:    1.25;
  letter-spacing: -0.02em;
  position:       relative;
  z-index:        2;
}

.ben-headline.large {
  font-size: 2rem;
}

.ben-sub {
  font-size:   .82rem;
  color:       var(--silver);
  line-height: 1.65;
  position:    relative;
  z-index:     2;
  margin-top:  .65rem;
}

.ben-tag {
  display:        inline-flex;
  align-items:    center;
  gap:            .35rem;
  font-size:      .62rem;
  font-weight:    700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color:          var(--blue);
  background:     rgba(79, 142, 247, 0.08);
  border:         1px solid var(--border2);
  border-radius:  50px;
  padding:        .3rem .75rem;
  margin-bottom:  1rem;
  position:       relative;
  z-index:        2;
}

.ben-art {
  position:        relative;
  z-index:         2;
  flex:            1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          .5rem -1rem -1rem;
}

.ben-art-top {
  position:        relative;
  z-index:         2;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          -1rem -1rem .75rem;
  height:          110px;
}


/* ============================================================
   10. WORK / PORTFOLIO
============================================================ */

#work {
  padding:   7rem 3.5rem;
  max-width: 1200px;
  margin:    0 auto;
  position:  relative;
}

.work-list {
  display:        flex;
  flex-direction: column;
  gap:            1.5rem;
}

.work-item {
  background:            var(--ink2);
  border:                1px solid var(--border);
  border-radius:         20px;
  overflow:              hidden;
  display:               grid;
  grid-template-columns: 1fr 1.2fr;
  transition:            border-color .3s, transform .3s;
}

.work-item:hover {
  border-color: var(--border2);
  transform:    translateY(-3px);
}

.work-item.flip {
  grid-template-columns: 1.2fr 1fr;
}

.work-item.flip .work-preview {
  order: 2;
}

.work-item.flip .work-info {
  order: 1;
}

.work-info {
  padding:        3rem;
  display:        flex;
  flex-direction: column;
  justify-content: center;
}

.work-tag2 {
  font-size:      .66rem;
  font-weight:    700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color:          var(--blue);
  margin-bottom:  .75rem;
  display:        flex;
  align-items:    center;
  gap:            .5rem;
}

.work-tag2::before {
  content:    '';
  width:      14px;
  height:     1px;
  background: var(--blue);
}

.work-title2 {
  font-family:    'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  font-weight:    700;
  font-size:      1.45rem;
  letter-spacing: -0.02em;
  margin-bottom:  .75rem;
  line-height:    1.15;
}

.work-desc2 {
  font-size:     .875rem;
  color:         var(--silver);
  line-height:   1.75;
  margin-bottom: 1.5rem;
}

.work-result {
  display:         inline-flex;
  align-items:     center;
  gap:             .5rem;
  font-size:       .78rem;
  font-weight:     500;
  color:           var(--green);
  background:      rgba(34, 197, 94, 0.07);
  border:          1px solid rgba(34, 197, 94, 0.2);
  padding:         .4rem 1rem;
  border-radius:   50px;
}

.work-result::before {
  content:   '↑';
  font-size: .7rem;
}

.work-preview {
  background:      var(--ink);
  padding:         2rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      260px;
  position:        relative;
  overflow:        hidden;
}

.work-preview::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: radial-gradient(ellipse at 50% 50%, rgba(79, 142, 247, 0.05), transparent 70%);
}

/* Browser mockup */
.browser {
  width:         90%;
  background:    var(--ink2);
  border-radius: 10px;
  border:        1px solid var(--border2);
  overflow:      hidden;
  box-shadow:    0 20px 60px rgba(0, 0, 0, 0.5);
  position:      relative;
  z-index:       1;
}

.browser-bar {
  height:        28px;
  background:    var(--ink3);
  border-bottom: 1px solid var(--border);
  display:       flex;
  align-items:   center;
  padding:       0 10px;
  gap:           5px;
}

.b-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
}

.browser-body {
  padding:        12px;
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.b-line {
  height:        5px;
  border-radius: 3px;
  background:    var(--border);
}

.b-hero {
  height:        50px;
  border-radius: 6px;
  background:    linear-gradient(135deg, rgba(79, 142, 247, 0.1), rgba(79, 142, 247, 0.03));
  border:        1px solid var(--border2);
  display:       flex;
  align-items:   center;
  padding:       0 10px;
  gap:           7px;
  margin-bottom: 4px;
}

.b-pill {
  height:        12px;
  border-radius: 7px;
  background:    rgba(79, 142, 247, 0.3);
}

.b-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   5px;
  margin-top:            4px;
}

.b-card {
  height:        34px;
  border-radius: 5px;
  background:    var(--border);
}

.concept-pill {
  position:       absolute;
  top:            1rem;
  right:          1rem;
  z-index:        5;
  background:     rgba(79, 142, 247, 0.12);
  border:         1px solid var(--border2);
  color:          var(--blue);
  font-size:      .6rem;
  font-weight:    700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding:        .25rem .65rem;
  border-radius:  50px;
}


/* ============================================================
   11. PROCESS
============================================================ */

/* ============================================================
   11. Before / After
============================================================ */

#transformation {
  padding:       7rem 3.5rem;
  background:    var(--ink);
  border-top:    1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position:      relative;
  overflow:      hidden;
}

.ba-glow {
  position:       absolute;
  top:            50%;
  left:           50%;
  transform:      translate(-50%, -50%);
  width:          900px;
  height:         500px;
  border-radius:  50%;
  background:     radial-gradient(ellipse, rgba(79, 142, 247, 0.06), transparent 70%);
  pointer-events: none;
}

.ba-inner {
  max-width:             1200px;
  margin:                0 auto;
  position:              relative;
  z-index:               2;
  display:               grid;
  grid-template-columns: 1fr 1fr;
  align-items:           center;
  gap:                   4.5rem;
}

.ba-header {
  text-align: left;
}

.ba-header .s-tag {
  justify-content: flex-start;
}

.ba-header .s-sub {
  margin-left:  0;
  margin-right: 0;
  margin-bottom: 0;
}

.ba-wrap {
  border-radius: 14px;
  overflow:      hidden;
  border:        1px solid var(--border2);
  box-shadow:    0 0 60px rgba(79, 142, 247, 0.1), 0 30px 80px rgba(0, 0, 0, 0.5);
}

.ba-slider {
  position:     relative;
  width:        100%;
  aspect-ratio: 16 / 9;
  overflow:     hidden;
  cursor:       ew-resize;
  user-select:  none;
  touch-action: none;
}

.ba-before,
.ba-after {
  position: absolute;
  inset:    0;
}

.ba-before img,
.ba-after img {
  position:          absolute;
  inset:             0;
  width:             100%;
  height:            100%;
  object-fit:        cover;
  object-position:   top left;
  pointer-events:    none;
  -webkit-user-drag: none;
}

.ba-after {
  clip-path: inset(0 65% 0 0);
}

/* Corner labels */
.ba-label {
  position:        absolute;
  top:             1rem;
  padding:         .5rem 1.1rem;
  border-radius:   8px;
  font-family:     'Syne', sans-serif;
  font-size:       .78rem;
  font-weight:     700;
  letter-spacing:  .12em;
  text-transform:  uppercase;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border:          1px solid;
  pointer-events:  none;
  z-index:         5;
}

.ba-label-new {
  left:         1rem;
  background:   rgba(79, 142, 247, 0.35);
  border-color: rgba(79, 142, 247, 0.6);
  color:        #ccdeff;
}

.ba-label-old {
  right:        1rem;
  background:   rgba(8, 12, 20, 0.65);
  border-color: rgba(143, 163, 191, 0.3);
  color:        var(--silver2);
}

/* Handle */
.ba-handle {
  position:       absolute;
  top:            0;
  left:           35%;
  transform:      translateX(-50%);
  height:         100%;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  cursor:         ew-resize;
  z-index:        10;
  pointer-events: none;
}

.ba-line {
  flex:       1;
  width:      2px;
  background: linear-gradient(to bottom, transparent, var(--blue) 15%, var(--blue) 85%, transparent);
}

.ba-grip {
  pointer-events:  all;
  width:           42px;
  height:          42px;
  border-radius:   50%;
  background:      var(--blue);
  border:          2px solid rgba(255, 255, 255, 0.25);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #fff;
  flex-shrink:     0;
  box-shadow:      0 0 24px rgba(79, 142, 247, 0.55);
  cursor:          ew-resize;
  transition:      transform .15s, box-shadow .15s;
}

.ba-grip:hover,
.ba-grip:active {
  transform:  scale(1.12);
  box-shadow: 0 0 36px rgba(79, 142, 247, 0.8);
}


/* ============================================================
   12. Process (was 11)
============================================================ */

#process {
  padding:       7rem 3.5rem;
  background:    var(--ink2);
  border-top:    1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position:      relative;
  overflow:      hidden;
}

.process-inner {
  max-width: 1200px;
  margin:    0 auto;
  position:  relative;
  z-index:   2;
}

.process-glow {
  position:       absolute;
  top:            50%;
  left:           50%;
  transform:      translate(-50%, -50%);
  width:          800px;
  height:         400px;
  border-radius:  50%;
  background:     radial-gradient(ellipse, rgba(79, 142, 247, 0.05), transparent 70%);
  pointer-events: none;
}

.process-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   14px;
  margin-top:            3.5rem;
  position:              relative;
}

.p-step {
  background:    rgba(255, 255, 255, 0.025);
  border:        1px solid rgba(143, 163, 191, 0.1);
  border-radius: 18px;
  padding:       2.5rem 2rem;
  position:      relative;
  z-index:       1;
  transition:    background .3s, border-color .3s, box-shadow .3s;
}

.p-step:hover {
  background:   rgba(255, 255, 255, 0.05);
  border-color: rgba(79,142,247,0.35);
  box-shadow:   0 0 0 1px rgba(79,142,247,0.1), 0 0 24px rgba(79,142,247,0.1), 0 8px 28px rgba(0,0,0,0.25);
}

.p-num {
  font-family:   'Instrument Serif', serif;
  font-style:    italic;
  font-size:     3.2rem;
  color:         rgba(79, 142, 247, 0.13);
  line-height:   1;
  margin-bottom: 1rem;
  transition:    color .3s;
}

.p-step:hover .p-num {
  color: rgba(79, 142, 247, 0.28);
}

.p-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size:   1rem;
  color:       var(--cream);
}

.p-title-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             .75rem;
  margin-bottom:   .75rem;
}

.p-icon {
  width:      34px;
  height:     34px;
  flex-shrink: 0;
  opacity:    .85;
  transition: opacity .25s, transform .25s;
}

.p-step:hover .p-icon {
  opacity:   1;
  transform: translateY(-2px);
}

.p-icon svg {
  width:  100%;
  height: 100%;
}

/* ── Process section gap connectors ── */
/* Thin glowing bridge that lives only in the gap between cards */
@media (min-width: 901px) {
  .p-step:not(:last-child)::after {
    content:       '';
    position:      absolute;
    right:         -14px;       /* span the 14px grid gap */
    top:           50%;
    transform:     translateY(-50%);
    width:         14px;
    height:        1.5px;
    background:    linear-gradient(90deg,
                     rgba(79,142,247,0.2) 0%,
                     rgba(160,196,255,0.7) 50%,
                     rgba(79,142,247,0.2) 100%);
    border-radius: 2px;
    z-index:       2;
    animation:     connPulse 2.4s ease-in-out infinite;
  }

  .p-step.d1::after { animation-delay: 0.6s; }
  .p-step.d2::after { animation-delay: 1.2s; }
}

@keyframes connPulse {
  0%, 100% { opacity: 0.4; filter: drop-shadow(0 0 2px rgba(79,142,247,0.3)); }
  50%      { opacity: 1;   filter: drop-shadow(0 0 6px rgba(160,196,255,0.8)); }
}

/* Glowing node ring around each icon */
.p-icon { position: relative; }
.proc-dot {
  position:       absolute;
  inset:          -7px;
  border-radius:  50%;
  border:         1.5px solid rgba(79,142,247,0.35);
  box-shadow:     0 0 8px rgba(79,142,247,0.3);
  pointer-events: none;
  animation:      procDotPulse 3s ease-in-out infinite;
}
/* stagger each step's dot so they light up in sequence */
.p-step.d1 .proc-dot { animation-delay: 1s; }
.p-step.d2 .proc-dot { animation-delay: 2s; }
.p-step.d3 .proc-dot { animation-delay: 3s; }

@keyframes procDotPulse {
  0%,100% {
    border-color: rgba(79,142,247,0.28);
    box-shadow:   0 0 5px  rgba(79,142,247,0.2);
  }
  50% {
    border-color: rgba(79,142,247,0.82);
    box-shadow:   0 0 14px rgba(79,142,247,0.7),
                  0 0 32px rgba(79,142,247,0.22);
  }
}

/* hide node rings on narrow screens where grid stacks */
@media (max-width: 900px) {
  .proc-dot { display: none; }
}

.p-desc {
  font-size:   .82rem;
  color:       var(--silver);
  line-height: 1.7;
}


/* ============================================================
   12. PRAISE / TESTIMONIALS
============================================================ */

#praise {
  padding:       7rem 3.5rem;
  background:    var(--ink2);
  border-top:    1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.praise-inner {
  max-width: 1200px;
  margin:    0 auto;
}

.praise-grid {
  display:               grid;
  grid-template-columns: 1.3fr 1fr;
  gap:                   1.25rem;
  margin-top:            3.5rem;
}

.praise-card {
  background:     var(--ink);
  border:         1px solid var(--border);
  border-radius:  20px;
  padding:        2.5rem;
  position:       relative;
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
  transition:     border-color .3s, transform .3s;
}

.praise-card:hover {
  border-color: var(--border2);
  transform:    translateY(-3px);
}

.praise-card::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  height:     1px;
  background: linear-gradient(90deg, transparent, var(--border2), transparent);
  opacity:    0;
  transition: opacity .3s;
}

.praise-card:hover::before {
  opacity: 1;
}

.praise-stars {
  color:          var(--blue);
  font-size:      .75rem;
  letter-spacing: 3px;
  margin-bottom:  1rem;
}

.praise-quote {
  font-family:   'Instrument Serif', serif;
  font-style:    italic;
  font-size:     1.1rem;
  color:         var(--silver2);
  line-height:   1.7;
  margin-bottom: 1.75rem;
  flex:          1;
}

.praise-card.big .praise-quote {
  font-size: 1.3rem;
}

.praise-author {
  display:     flex;
  align-items: center;
  gap:         .85rem;
  padding-top: 1.5rem;
  border-top:  1px solid var(--border);
}

.praise-ava {
  width:           38px;
  height:          38px;
  border-radius:   50%;
  background:      rgba(79, 142, 247, 0.12);
  border:          1px solid var(--border2);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     'Syne', sans-serif;
  font-weight:     700;
  font-size:       .7rem;
  color:           var(--blue);
  flex-shrink:     0;
}

.praise-name {
  font-size:   .875rem;
  font-weight: 500;
  color:       var(--cream);
}

.praise-biz {
  font-size: .75rem;
  color:     var(--muted);
}


/* ============================================================
   13. PRICING
============================================================ */

#pricing {
  padding:   7rem 3.5rem;
  background: var(--ink2);
  border-top: 1px solid var(--border);
  position:  relative;
  overflow:  hidden;
}

.pricing-inner {
  max-width: 1100px;
  margin:    0 auto;
  position:  relative;
  z-index:   2;
}

.pricing-glow {
  position:       absolute;
  bottom:         -200px;
  right:          -200px;
  width:          600px;
  height:         600px;
  border-radius:  50%;
  background:     radial-gradient(circle, rgba(79, 142, 247, 0.06), transparent 70%);
  pointer-events: none;
}

.pricing-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   1.5rem;
  margin-top:            3.5rem;
}

.p-card {
  background:      var(--ink);
  border:          1px solid var(--border);
  border-radius:   22px;
  padding:         2.75rem;
  position:        relative;
  transition:      transform .15s ease-out, box-shadow .15s ease-out, border-color .15s ease-out;
  display:         flex;
  flex-direction:  column;
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 6px 0 rgba(0,0,0,.4),
    0 14px 28px rgba(0,0,0,.35),
    0 40px 70px rgba(0,0,0,.22);
  will-change: transform, box-shadow;
}

.p-card:hover {
  border-color: rgba(79,142,247,.5);
  box-shadow:
    0 1px 0 rgba(255,255,255,.1) inset,
    0 8px 0 rgba(0,0,0,.45),
    0 20px 40px rgba(0,0,0,.45),
    0 50px 100px rgba(0,0,0,.28),
    0 0 35px rgba(79,142,247,.35),
    0 0 80px rgba(79,142,247,.15);
}

.p-card.hot {
  border-color: var(--blue);
  background:   linear-gradient(160deg, rgba(79, 142, 247, 0.07) 0%, var(--ink) 55%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 6px 0 rgba(0,0,0,.4),
    0 14px 28px rgba(0,0,0,.35),
    0 40px 70px rgba(0,0,0,.22),
    0 0 40px rgba(79,142,247,.18);
}

.p-card.hot:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,.1) inset,
    0 8px 0 rgba(0,0,0,.45),
    0 20px 40px rgba(0,0,0,.45),
    0 50px 100px rgba(0,0,0,.28),
    0 0 50px rgba(79,142,247,.55),
    0 0 100px rgba(79,142,247,.25);
}

.corner-ribbon {
  position:       absolute;
  top:            0;
  right:          0;
  width:          140px;
  height:         140px;
  overflow:       hidden;
  border-radius:  0 22px 0 0;
  pointer-events: none;
  z-index:        3;
}

.corner-ribbon span {
  position:      absolute;
  top:           30px;
  right:         -38px;
  width:         155px;
  background:    linear-gradient(180deg, #ff7a3d 0%, #e0340e 55%, #b82a08 100%);
  color:         #fff;
  font-size:     .47rem;
  font-weight:   900;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:       9px 0;
  transform:     rotate(45deg);
  text-align:    center;
  line-height:   1.6;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.15) inset,
    0 4px 16px rgba(0,0,0,.5),
    0 0 20px rgba(255,90,20,.5);
}

.corner-ribbon span::after {
  content:    '';
  position:   absolute;
  top:        0; left: 0;
  width:      100%; height: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,.18), transparent);
  pointer-events: none;
}

.orig-price {
  display:         block;
  font-family:     'Syne', sans-serif;
  font-size:       2.4rem;
  font-weight:     800;
  color:           var(--silver);
  text-decoration: line-through;
  text-decoration-color: rgba(255,100,80,.7);
  text-decoration-thickness: 3px;
  line-height:     1;
  margin-bottom:   .3rem;
  opacity:         .8;
}

.orig-price sup {
  font-size:   1.2rem;
  color:       var(--silver);
}

.new-price {
  font-family:  'Syne', sans-serif;
  font-size:    2.4rem;
  font-weight:  800;
  letter-spacing: -.04em;
  line-height:  1;
  color:        var(--cream);
  text-shadow:
    0 0 18px rgba(79,142,247,.7),
    0 0 40px rgba(79,142,247,.35);
}

.new-price sup {
  font-size:      1.1rem;
  vertical-align: super;
  color:          var(--blue);
  text-shadow:    0 0 12px rgba(79,142,247,.8);
}

.hot-badge {
  position:       absolute;
  top:            -13px;
  left:           2.75rem;
  background:     var(--blue);
  color:          #fff;
  font-size:      .62rem;
  font-weight:    700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding:        4px 18px;
  border-radius:  50px;
  white-space:    nowrap;
}

.plan-name {
  font-size:      .7rem;
  font-weight:    700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:          var(--silver);
  margin-bottom:  .6rem;
}

.plan-price {
  font-family:    'Syne', sans-serif;
  font-weight:    800;
  font-size:      3rem;
  letter-spacing: -.04em;
  color:          var(--cream);
  line-height:    1;
}

.plan-price sup {
  font-size:      1.4rem;
  vertical-align: super;
  color:          var(--blue);
}

.plan-price .plan-mo {
  font-size:      1rem;
  color:          var(--muted);
  font-weight:    300;
  letter-spacing: 0;
}

.plan-tagline {
  font-size:   .82rem;
  color:       var(--muted);
  margin:      .5rem 0 2rem;
}

.plan-feats {
  list-style:     none;
  margin-bottom:  2.5rem;
  flex:           1;
  display:        flex;
  flex-direction: column;
}

.plan-feats li {
  font-size:   .85rem;
  color:       var(--silver);
  padding:     .5rem 0;
  border-bottom: 1px solid var(--border);
  display:     flex;
  align-items: flex-start;
  gap:         .7rem;
}

.plan-feats li::before {
  content:     '✦';
  color:       var(--blue);
  font-size:   .52rem;
  flex-shrink: 0;
  margin-top:  .45rem;
}

.p-btn {
  display:         block;
  text-align:      center;
  padding:         .9rem;
  border-radius:   50px;
  font-size:       .875rem;
  font-weight:     500;
  text-decoration: none;
  border:          1px solid var(--border2);
  color:           var(--blue);
  transition:      all .2s;
}

.p-btn:hover {
  background:   var(--blue);
  color:        #fff;
  border-color: var(--blue);
}

.p-card.hot .p-btn {
  background:   var(--blue);
  color:        #fff;
  border-color: var(--blue);
  box-shadow:   0 0 25px rgba(79, 142, 247, 0.3);
}

.p-card.hot .p-btn:hover {
  background: var(--blue2);
}

.pricing-note {
  text-align:  center;
  margin-top:  1.75rem;
  font-size:   .8rem;
  color:       var(--muted);
  line-height: 1.6;
}

.pricing-note a {
  color:           var(--blue);
  text-decoration: none;
}

.plan-addons {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   .5rem;
  margin-bottom:         1.5rem;
}

.plan-addons .plan-maintenance,
.plan-addons .plan-detail:nth-child(4) {
  grid-column: 1 / -1;
}

.plan-addons .plan-maintenance,
.plan-addons .plan-detail {
  margin-bottom: 0;
}

.plan-maintenance {
  background:    rgba(79, 142, 247, 0.08);
  border:        1px solid rgba(79, 142, 247, 0.25);
  border-radius: 10px;
  padding:       .9rem 1.1rem;
  margin-bottom: .75rem;
}

.maint-label {
  font-size:   .7rem;
  color:       var(--blue);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .2rem;
}

.maint-price {
  font-size:   1.1rem;
  font-weight: 700;
  color:       var(--blue);
  display:     flex;
  align-items: baseline;
  gap:         .5rem;
  flex-wrap:   wrap;
}

.maint-orig {
  font-size:              .9rem;
  font-weight:            600;
  color:                  var(--muted);
  text-decoration:        line-through;
  text-decoration-color:  rgba(255,100,80,.6);
  text-decoration-thickness: 2px;
  opacity:                .75;
}

.plan-detail {
  background:    rgba(255,255,255,.03);
  border:        1px solid var(--border);
  border-radius: 10px;
  padding:       .75rem 1rem;
  margin-bottom: .6rem;
}

.plan-detail-label {
  font-size:   .65rem;
  color:       var(--muted);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .25rem;
}

.plan-detail-value {
  font-size:   .83rem;
  color:       var(--silver);
  font-weight: 600;
  line-height: 1.5;
}

.plan-cta-spacer { flex: 1; }


/* ============================================================
   14. FAQ
============================================================ */

#faq {
  padding:   7rem 3.5rem;
  max-width: 860px;
  margin:    0 auto;
}

.faq-list {
  margin-top:    3rem;
  display:       flex;
  flex-direction: column;
  gap:           .65rem;
}

.faq-item {
  background:    var(--ink2);
  border:        1px solid var(--border);
  border-radius: 50px;
  overflow:      hidden;
  transition:    border-color .25s;
}

.faq-item:hover {
  border-color: var(--border2);
}

.faq-item.open {
  border-radius: 20px;
  border-color:  var(--border2);
}

.faq-q {
  width:           100%;
  background:      none;
  border:          none;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  padding:         1.2rem 1.6rem;
  text-align:      left;
  color:           var(--cream);
  font-family:     'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  font-weight:     500;
  font-size:       .95rem;
  letter-spacing:  -0.01em;
  transition:      color .2s;
}

.faq-q:hover {
  color: var(--cream);
}

.faq-icon {
  width:           26px;
  height:          26px;
  border-radius:   50%;
  border:          1px solid var(--border2);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--blue);
  font-size:       1rem;
  flex-shrink:     0;
  transition:      transform .3s, background .2s, border-color .2s;
}

.faq-item.open .faq-icon {
  transform:    rotate(45deg);
  background:   var(--blue);
  color:        #fff;
  border-color: var(--blue);
}

.faq-a {
  max-height:  0;
  overflow:    hidden;
  transition:  max-height .45s ease;
  font-size:   .875rem;
  color:       var(--silver);
  line-height: 1.85;
}

.faq-item.open .faq-a {
  max-height: 400px;
}

.faq-a-inner {
  padding: 0 1.6rem 1.4rem;
}


/* ============================================================
   15. CTA / CONTACT
============================================================ */

#cta {
  padding:   7rem 3.5rem;
  background: var(--ink2);
  border-top: 1px solid var(--border);
  position:  relative;
  overflow:  hidden;
}

.cta-glow {
  position:       absolute;
  top:            50%;
  left:           30%;
  transform:      translate(-50%, -50%);
  width:          700px;
  height:         500px;
  border-radius:  50%;
  background:     radial-gradient(ellipse, rgba(79, 142, 247, 0.07), transparent 70%);
  pointer-events: none;
}

.cta-inner {
  max-width:      1100px;
  margin:         0 auto;
  display:        flex;
  flex-direction: column;
  gap:            2.5rem;
}

.cta-head {
  max-width: 680px;
}

.cta-h2 {
  font-family:    'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  font-weight:    700;
  font-size:      clamp(2.2rem, 4vw, 3.2rem);
  letter-spacing: -0.02em;
  line-height:    1.08;
  margin-bottom:  1.25rem;
}

.cta-h2 em {
  font-family: 'Instrument Serif', serif;
  font-style:  italic;
  color:       var(--blue);
  font-weight: 400;
}

.cta-sub {
  font-size:     .95rem;
  color:         var(--silver);
  line-height:   1.75;
  margin-bottom: 2rem;
}

/* Form */
.cta-form {
  display:        flex;
  flex-direction: column;
  gap:            .85rem;
}

.f-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   .85rem;
}

.f-label {
  font-size:      .66rem;
  font-weight:    700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--silver);
  margin-bottom:  .35rem;
  display:        block;
}

.f-input,
.f-select,
.f-textarea {
  width:       100%;
  background:  var(--ink);
  border:      1px solid var(--border);
  border-radius: 10px;
  padding:     .85rem 1rem;
  color:       var(--cream);
  font-family: 'DM Sans', sans-serif;
  font-size:   .875rem;
  font-weight: 300;
  outline:     none;
  transition:  border-color .2s;
}

.f-input:focus,
.f-select:focus,
.f-textarea:focus {
  border-color: var(--blue);
}

.f-select {
  appearance: none;
  cursor:     pointer;
}

.f-textarea {
  min-height: 130px;
  resize:     vertical;
}

.f-submit {
  background:    var(--blue);
  color:         #fff;
  border:        none;
  border-radius: 50px;
  padding:       .9rem 2.8rem;
  font-family:   'Syne', sans-serif;
  font-weight:   700;
  font-size:     .9rem;
  cursor:        pointer;
  transition:    background .2s, transform .2s, box-shadow .2s;
  box-shadow:    0 0 30px rgba(79, 142, 247, 0.25);
  width:         auto;
  display:       block;
  margin:        .5rem auto 0;
}

.f-submit:hover {
  background:  var(--blue2);
  transform:   translateY(-2px);
  box-shadow:  0 0 50px rgba(79, 142, 247, 0.4);
}

/* Contact aside — horizontal row below form */
.cta-aside {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap:                   1rem;
  align-items:           stretch;
  border-top:            1px solid var(--border);
  padding-top:           2rem;
}

.aside-card {
  background:     var(--ink);
  border:         1px solid var(--border);
  border-radius:  16px;
  padding:        1.5rem 1.5rem;
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            .65rem;
  transition:     border-color .3s;
  text-decoration: none;
}

.aside-card:hover {
  border-color: var(--border2);
}

.aside-icon {
  width:           38px;
  height:          38px;
  border-radius:   10px;
  background:      rgba(79, 142, 247, 0.08);
  border:          1px solid var(--border2);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       .95rem;
  flex-shrink:     0;
}

.aside-t {
  font-size:     .88rem;
  font-weight:   500;
  color:         var(--cream);
  margin-bottom: .2rem;
}

.aside-b {
  font-size: .78rem;
  color:     var(--silver);
}

.aside-quote {
  padding:       1.5rem 1.5rem;
  border:        1px solid var(--border);
  border-radius: 16px;
  display:       flex;
  flex-direction: column;
  justify-content: flex-start;
}

.aside-quote p {
  font-family: 'Instrument Serif', serif;
  font-style:  italic;
  font-size:   1rem;
  color:       var(--silver2);
  line-height: 1.6;
}

.aside-quote span {
  font-size:    .72rem;
  color:        var(--muted);
  margin-top:   .75rem;
  display:      block;
}


/* ============================================================
   16. FOOTER
============================================================ */

footer {
  border-top:      1px solid var(--border);
  padding:         2.25rem 3.5rem;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.foot-logo {
  display:     flex;
  align-items: center;
}

.foot-logo img {
  height:  38px;
  width:   auto;
  display: block;
}

.foot-copy {
  font-size: .72rem;
  color:     var(--muted);
}

.foot-links {
  display: flex;
  gap:     1.75rem;
}

.foot-links a {
  font-size:       .72rem;
  color:           var(--muted);
  text-decoration: none;
  transition:      color .2s;
}

.foot-links a:hover {
  color: var(--silver);
}


/* ============================================================
   17. ANIMATIONS
============================================================ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes scroll {
  to { transform: translateX(-50%); }
}

@keyframes float {
  0%,  100% { transform: translateY(0);    }
  50%        { transform: translateY(-9px); }
}

@keyframes twinkle {
  0%,  100% { opacity: .3;  transform: scale(.8); }
  50%        { opacity: .85; transform: scale(1);  }
}

.float  { animation: float   4s   ease-in-out        infinite; }
.float2 { animation: float   5.5s ease-in-out .8s    infinite; }
.float3 { animation: float   6.5s ease-in-out 1.5s   infinite; }

.tw  { animation: twinkle 2.2s ease-in-out       infinite; }
.tw2 { animation: twinkle 2.8s ease-in-out .5s   infinite; }
.tw3 { animation: twinkle 3.2s ease-in-out 1s    infinite; }

/* Scroll reveal — always visible by default so content never gets stuck hidden.
   JS adds .js-ready to <html> once it loads, which enables the animation. */
.reveal {
  opacity:   1;
  transform: translateY(0);
}

.js-ready .reveal {
  opacity:    0;
  transform:  translateY(22px);
  transition: opacity .65s ease, transform .65s ease;
}

.js-ready .reveal.in {
  opacity:   1;
  transform: translateY(0);
}

/* Reveal delay utilities */
.d1 { transition-delay: .1s; }
.d2 { transition-delay: .2s; }
.d3 { transition-delay: .3s; }
.d4 { transition-delay: .4s; }


/* ============================================================
   18. RESPONSIVE
============================================================ */

/* ── Hamburger (hidden on desktop) ── */
.nav-hamburger {
  display:         none;
  flex-direction:  column;
  justify-content: center;
  gap:             5px;
  background:      none;
  border:          none;
  cursor:          pointer;
  padding:         6px;
  z-index:         300;
  position:        relative;
}
.nav-hamburger span {
  display:       block;
  width:         22px;
  height:        2px;
  background:    var(--silver2);
  border-radius: 2px;
  transition:    transform .3s, opacity .3s, background .3s;
}

/* Animated X state */
body.nav-open .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--cream); }
body.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; }
body.nav-open .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--cream); }

/* Mobile drawer */
.nav-drawer {
  position:        fixed;
  top:             0; left: 0; right: 0; bottom: 0;
  background:      rgba(6,9,18,0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             2rem;
  z-index:         150;
  opacity:         0;
  visibility:      hidden;
  pointer-events:  none;
  transition:      opacity .28s ease, visibility .28s ease;
}
body.nav-open .nav-drawer {
  opacity:        1;
  visibility:     visible;
  pointer-events: all;
}
.nav-drawer a {
  font-family:     'Syne', sans-serif;
  font-size:       1.75rem;
  font-weight:     700;
  color:           rgba(255,255,255,0.55);
  text-decoration: none;
  letter-spacing:  -0.01em;
  transition:      color .2s;
}
.nav-drawer a:hover { color: #fff; }
.nav-drawer-cta {
  margin-top:    .75rem;
  background:    var(--blue) !important;
  color:         #fff !important;
  padding:       .85rem 2.4rem !important;
  border-radius: 50px;
  font-size:     1rem !important;
  letter-spacing: 0 !important;
  box-shadow:    0 0 30px rgba(79,142,247,0.3);
}


@media (max-width: 960px) {

  /* ── Nav ── */
  nav { padding: 1rem 1.5rem; }
  .nav-logo img  { height: 46px; }
  .foot-logo img { height: 32px; }
  .nav-links     { display: none; }
  .nav-hamburger { display: flex; }

  /* ── Hero ── (layout lives with the hero rules; only sizing here) */
  .hero-h1 { font-size: clamp(30px, 5.6vw, 52px); }

  /* Coder/Designer reveal — used by about.html's page hero */
  .reveal-wrap  { max-width: 400px; padding: 3rem 0; }
  .reveal-label { font-size: .72rem; }
  .reveal-stack { transform: scale(1.045); }

  /* ── The Reality ── */
  .prob-columns {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 1rem;
  }
  .prob-col-head {
    font-size: .6rem;
    margin-bottom: .5rem;
  }
  .prob-card {
    padding:   .65rem .75rem;
    gap:       .5rem;
    font-size: .78rem;
  }
  .pc-icon {
    width:  22px;
    height: 22px;
    font-size: .65rem;
    flex-shrink: 0;
  }

  /* ── Who I Am ── */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .about-card {
    padding: 2rem 1.75rem;
  }
  /* Stat cards — full width, no stepped sizing */
  .about-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
  }
  .about-stats .about-stat-card:nth-child(1),
  .about-stats .about-stat-card:nth-child(2),
  .about-stats .about-stat-card:nth-child(3),
  .about-stats .about-stat-card:nth-child(4),
  .about-stats .about-stat-card:nth-child(5) {
    width: 100%;
  }
  /* Last card spans full width if odd count */
  .about-stats .about-stat-card:last-child:nth-child(odd) {
    grid-column: span 2;
  }
  .asc-top { gap: .5rem; }
  .strip-n { font-size: clamp(1.2rem, 5vw, 1.6rem) !important; }
  /* "Maintained. Forever." is two lines — keep it compact so chevron fits */
  .about-stats .about-stat-card:nth-child(2) .strip-n {
    font-size: clamp(.72rem, 3.2vw, .85rem) !important;
    line-height: 1.25;
  }

  /* ── What I Do (bento) ── */
  .services-bento {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows:        minmax(190px, auto) !important;
    gap:                   8px;
    margin-left:           -0.75rem;
    margin-right:          -0.75rem;
  }
  /* All small cards: consistent height, text pinned bottom-left */
  .ben {
    min-height:      190px;
    padding:         0;
    justify-content: flex-end;
    align-items:     stretch;
  }
  /* Card 1: full-width banner */
  .ben.tall {
    grid-column: span 2;
    grid-row:    span 1;
    min-height:  190px;
  }
  /* Card 5 (wide): single column on mobile so 2×2 grid is clean */
  .ben.wide {
    grid-column: span 1;
  }
  /* Stronger scrim on mobile so art doesn't compete with text */
  .ben::after {
    height:     82%;
    background: linear-gradient(to top,
      rgba(6,9,16,0.98) 0%,
      rgba(6,9,16,0.72) 42%,
      transparent 100%
    );
  }
  /* Stop all animations but keep visuals */
  .ben * { animation: none !important; transition: none !important; }
  /* Dim art a bit, keep it visible */
  .ben .ben-bg-art {
    display: block;
    opacity: 0.5;
  }
  .ben-content {
    margin-top:  auto;
    padding:     1rem 1.1rem;
    position:    relative;
    z-index:     2;
    width:       100%;
    text-align:  left;
    box-sizing:  border-box;
  }
  .ben-headline {
    font-size:     clamp(.88rem, 3.8vw, 1.05rem);
    margin-bottom: .3rem;
    line-height:   1.2;
  }
  .ben-headline.large { font-size: clamp(1.05rem, 4.2vw, 1.3rem); }
  /* Cap sub-text to 2 lines so all cards have equal-height text blocks */
  .ben-sub {
    font-size:             .7rem;
    line-height:           1.5;
    opacity:               .85;
    display:               -webkit-box;
    -webkit-line-clamp:    2;
    -webkit-box-orient:    vertical;
    overflow:              hidden;
  }
  .ben-tag { font-size: .58rem; margin-bottom: .35rem; }

  /* ── Other grids ── */
  .work-item,
  .work-item.flip,
  .praise-grid,
  .pricing-grid {
    grid-template-columns: 1fr !important;
  }
  .work-item.flip .work-preview,
  .work-item.flip .work-info { order: unset; }

  .cta-aside  { grid-template-columns: 1fr 1fr !important; }
  .process-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── Before / After ── */
  #transformation { padding: 5rem 1.5rem; }
  .ba-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .ba-header { text-align: center; }
  .ba-header .s-tag { justify-content: center; }
  .ba-label { font-size: .68rem; padding: .4rem .85rem; top: .75rem; }
  .ba-label-new { left: .75rem; }
  .ba-label-old { right: .75rem; }
  .ba-grip { width: 36px; height: 36px; }
  .cta-inner  { gap: 2.5rem; }

  footer {
    flex-direction: column;
    gap:            1rem;
    text-align:     center;
    padding:        2rem 1.5rem;
  }
  .foot-links { flex-wrap: wrap; justify-content: center; }

  section[id] {
    padding-left:  1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

@media (max-width: 600px) {

  /* ── The Reality — keep 2-col but tighten text ── */
  .prob-columns { gap: .6rem; }
  .prob-card    { font-size: .72rem; padding: .55rem .6rem; gap: .4rem; }
  .pc-icon      { width: 18px; height: 18px; font-size: .55rem; }

  /* ── Bento — keep 2-col mosaic ── */
  .services-bento { gap: 8px; }

  .process-grid  { grid-template-columns: 1fr !important; }
  .f-row         { grid-template-columns: 1fr !important; }
  .cta-aside     { grid-template-columns: 1fr !important; }
  .trust-divider { display: none; }

  /* ── Hero ── */
  .hero-h1 { font-size: clamp(34px, 9.2vw, 50px); }

  .reveal-wrap  { max-width: 100%; padding: 1.5rem 0; }
  .reveal-label { font-size: .62rem; }
  .reveal-stack { transform: scale(1.04); }

  /* ── About Stat Cards — reduce padding on mobile so chevron fits ── */
  .asc-top { padding: .9rem 1rem; gap: .4rem; }
  .asc-img { width: 40px; height: 40px; }
  .asc-chevron { width: 16px; height: 16px; }
}