/* =========================================================================
   Avent Marketing — site.css

   The site has to sell design, so it has to look designed.  Two self-hosted
   variable fonts (70KB total, no external requests), a dark studio palette
   built around the logo green, gradient hairline borders, grain, and cards
   that respond to you.  Everything below degrades to something readable if
   a feature isn't supported.
   ========================================================================= */

@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter var";
  src: url("/assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand green, pushed in two directions: an acid tone that sings on dark,
     and a deeper tone that still passes contrast on white. */
  --lime:        #a3e635;
  --green:       #8cc63f;
  --green-deep:  #5c8c1f;
  --green-dark:  #446a13;
  --green-wash:  #f1f8e5;

  --ink:         #0b1016;
  --ink-soft:    #4a5568;
  --ink-faint:   #77839a;

  --void:        #070a0f;
  --dark:        #0d131c;
  --dark-2:      #141c28;
  --dark-3:      #1b2534;

  --line:        #e5e9ef;
  --line-dark:   rgba(255,255,255,.10);
  --surface:     #ffffff;
  --surface-2:   #f7f9fb;

  --wrap:        1200px;
  --r:           20px;
  --r-sm:        12px;

  --shadow:      0 1px 2px rgba(11,16,22,.04), 0 10px 30px rgba(11,16,22,.07);
  --shadow-lg:   0 2px 6px rgba(11,16,22,.06), 0 26px 60px rgba(11,16,22,.16);
  --glow:        0 0 0 1px rgba(140,198,63,.35), 0 18px 50px rgba(92,140,31,.22);

  --display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --sans: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* Reused as a background-image on anything that wants texture. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink-soft);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--green-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--green-dark); }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.035em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 1.3rem + 4.4vw, 4.6rem); }
h2 { font-size: clamp(1.85rem, 1.2rem + 2.3vw, 3.1rem); }
h3 { font-size: 1.28rem; letter-spacing: -.02em; line-height: 1.2; }
h4 { font-size: 1rem; letter-spacing: -.01em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--ink); color: #fff; padding: 14px 22px; border-radius: 0 0 10px 0;
  font-weight: 600;
}
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 4px; }

/* -------------------------------------------------------------- fragments */
.lede { font-size: 1.16rem; color: var(--ink-soft); line-height: 1.62; }
.section-dark .lede, .hero .lede { color: #9fb0c6; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display);
  font-size: .76rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--green-deep); margin-bottom: 1rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px;
}
.eyebrow.on-dark { color: var(--lime); }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.center .lede { margin-inline: auto; max-width: 60ch; }

/* --------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 15px 28px; border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--display); font-weight: 600; font-size: 1rem; letter-spacing: -.01em;
  line-height: 1.2; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  background: var(--btn-bg); color: var(--btn-fg);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, color .2s ease;
}
/* A colour wipe that grows from the left on hover, behind the label. */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--lime); transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.btn:hover { transform: translateY(-2px); }
.btn:hover::before { transform: scaleX(1); }

.btn-primary { --btn-bg: var(--green-deep); box-shadow: 0 8px 22px rgba(92,140,31,.3); }
.btn-primary:hover { color: var(--ink); box-shadow: 0 12px 30px rgba(163,230,53,.4); }

.btn-outline { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line); }
.btn-outline:hover { color: var(--ink); border-color: var(--lime); }

.btn-ghost { --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255,255,255,.28); }
.btn-ghost:hover { color: var(--ink); border-color: var(--lime); }

.btn .arw { transition: transform .25s ease; }
.btn:hover .arw { transform: translateX(4px); }
.btns { display: flex; flex-wrap: wrap; gap: 14px; }

/* --------------------------------------------------------------- top bar */
.topbar {
  background: var(--void); color: #8fa0b7;
  font-size: .84rem; font-weight: 500; letter-spacing: .01em;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 42px; }
.topbar a { color: #cfe0a8; text-decoration: none; }
.topbar a:hover { color: var(--lime); }
.topbar ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; }
.topbar li { position: relative; }
.topbar li + li::before {
  content: ""; position: absolute; left: -14px; top: 50%; width: 3px; height: 3px;
  border-radius: 50%; background: rgba(255,255,255,.24); transform: translateY(-50%);
}
@media (max-width: 820px) { .topbar .topbar-usp li:nth-child(n+2) { display: none; } }

/* -------------------------------------------------------------- masthead */
.masthead {
  position: sticky; top: 0; z-index: 120;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.masthead .wrap { display: flex; align-items: center; gap: 20px; min-height: 78px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand img { width: 44px; height: 44px; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.08; }
.brand-name {
  font-family: var(--display); font-weight: 700; font-size: 1.12rem;
  color: var(--ink); letter-spacing: -.04em; white-space: nowrap;
}
.brand-sub {
  font-size: .66rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--green-deep);
}

.nav-toggle {
  display: none; align-items: center; gap: 10px; background: var(--ink); color: #fff;
  border: 0; border-radius: 999px; padding: 11px 18px;
  font-family: var(--display); font-weight: 600; font-size: .92rem; cursor: pointer;
}
.bars, .bars::before, .bars::after {
  display: block; width: 17px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.bars { position: relative; }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -6px; } .bars::after { top: 6px; }
.masthead.open .bars { background: transparent; }
.masthead.open .bars::before { transform: translateY(6px) rotate(45deg); }
.masthead.open .bars::after  { transform: translateY(-6px) rotate(-45deg); }

.menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 3px; }
.menu > li { position: relative; }
.menu > li > a {
  position: relative; display: block; padding: 10px 14px; border-radius: 10px;
  font-family: var(--display); font-size: .95rem; font-weight: 600; letter-spacing: -.015em;
  color: var(--ink); text-decoration: none; transition: color .18s ease;
}
/* Underline that grows from the centre rather than a background swap. */
.menu > li > a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  background: var(--lime); border-radius: 2px;
  transform: scaleX(0); transform-origin: center; transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
.menu > li > a:hover::after,
.menu > li > a[aria-current]::after { transform: scaleX(1); }
.menu > li > a[aria-current] { color: var(--green-dark); }
.has-sub > a::before {
  content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 7px;
  vertical-align: 2px; border-right: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(45deg); transition: transform .25s ease;
}
.has-sub:hover > a::before { transform: rotate(225deg) translate(-2px,-2px); }

.submenu {
  list-style: none; margin: 0; padding: 10px; position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 268px; background: #fff; border-radius: 16px;
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98);
  transition: opacity .18s ease, transform .18s cubic-bezier(.2,.7,.3,1), visibility .18s;
}
.has-sub:hover .submenu, .has-sub:focus-within .submenu {
  opacity: 1; visibility: visible; transform: none;
}
.submenu a {
  display: block; padding: 10px 14px; border-radius: 10px;
  font-size: .93rem; font-weight: 500; color: var(--ink); text-decoration: none;
  transition: background .16s ease, transform .16s ease;
}
.submenu a:hover { background: var(--green-wash); color: var(--green-dark); transform: translateX(3px); }
.nav-cta { margin-left: 12px; padding: 12px 22px; font-size: .94rem; }

/* ------------------------------------------------------- mobile nav panel */
/* The menu becomes a panel hung off the bottom of the sticky masthead, so it
   never needs to know how tall the top bar is.  Items stagger in, submenus
   animate open, and the page behind is dimmed and scroll-locked. */
.menu-cta { display: none; }

.nav-open { overflow: hidden; }
.nav-open::before {
  content: ""; position: fixed; inset: 0; z-index: 110;
  background: rgba(7, 10, 15, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: fade-in .3s ease both;
}
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }

@media (max-width: 1240px) {
  .nav-toggle { display: inline-flex; }

  .menu {
    position: absolute; top: 100%; left: 0; right: 0;
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100svh - 100px); overflow-y: auto; overscroll-behavior: contain;
    padding: 14px 22px 30px;
    background: linear-gradient(168deg, #131c27, #080c12);
    border-top: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 26px 50px rgba(0,0,0,.45);
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .28s ease, transform .38s cubic-bezier(.2,.7,.3,1), visibility .38s;
  }
  .masthead.open .menu { opacity: 1; visibility: visible; transform: none; }

  /* Each row slides up in turn once the panel itself has arrived. */
  .menu > li {
    opacity: 0; transform: translateY(10px);
    transition: opacity .3s ease, transform .35s cubic-bezier(.2,.7,.3,1);
  }
  .masthead.open .menu > li { opacity: 1; transform: none; }
  .masthead.open .menu > li:nth-child(1) { transition-delay: .05s }
  .masthead.open .menu > li:nth-child(2) { transition-delay: .09s }
  .masthead.open .menu > li:nth-child(3) { transition-delay: .13s }
  .masthead.open .menu > li:nth-child(4) { transition-delay: .17s }
  .masthead.open .menu > li:nth-child(5) { transition-delay: .21s }
  .masthead.open .menu > li:nth-child(6) { transition-delay: .25s }
  .masthead.open .menu > li:nth-child(7) { transition-delay: .29s }
  .masthead.open .menu > li:nth-child(8) { transition-delay: .33s }
  .masthead.open .menu > li:nth-child(9) { transition-delay: .37s }

  .menu > li > a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 4px; border-radius: 0; font-size: 1.12rem; color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.09);
  }
  .menu > li > a::after { display: none; }
  .menu > li > a[aria-current] { color: var(--lime); }

  /* The chevron is a real target on the right — tapping it opens the
     submenu, tapping the label still goes to the parent page. */
  .has-sub > a::before {
    content: ""; order: 2; width: 30px; height: 30px; flex: none;
    margin: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 50%;
    background:
      linear-gradient(currentColor, currentColor) center/9px 1.5px no-repeat,
      linear-gradient(currentColor, currentColor) center/1.5px 9px no-repeat;
    transform: none; transition: transform .3s cubic-bezier(.2,.7,.3,1),
                                 background-size .3s ease, border-color .25s ease;
    color: var(--lime);
  }
  .has-sub.open > a::before {
    transform: rotate(180deg);
    background-size: 9px 1.5px, 0 1.5px;   /* plus collapses to minus */
    border-color: var(--lime);
  }

  .submenu {
    position: static; display: block; visibility: visible; transform: none;
    background: none; border: 0; border-radius: 0; box-shadow: none;
    padding: 0 0 0 8px; margin: 0;
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .4s cubic-bezier(.2,.7,.3,1), opacity .3s ease,
                padding .3s ease;
  }
  .has-sub.open .submenu {
    max-height: 340px; opacity: 1; padding: 8px 0 12px 8px;
    border-bottom: 1px solid rgba(255,255,255,.09);
  }
  .submenu a {
    color: #9fb0c6; font-size: 1rem; padding: 11px 14px; border-radius: 10px;
  }
  .submenu a:hover, .submenu a[aria-current] {
    background: rgba(163,230,53,.12); color: var(--lime); transform: none;
  }

  .nav-cta { display: none; }
  .menu-cta { display: block; margin-top: 22px; }
  .menu-cta .btn { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------------ hero */
/* The hero fills exactly one screen and no more.  --chrome is the topbar
   plus the sticky masthead, so the fold lands on the bottom of the hero and
   the marquee is the first thing you scroll to.  svh (not vh) so a mobile
   URL bar can't push the bottom off the screen. */
.hero {
  --chrome: 122px;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  min-height: calc(100vh - var(--chrome));
  min-height: calc(100svh - var(--chrome));
  background: var(--dark); color: #9fb0c6;
  padding: 48px 0;
}
@media (max-width: 1240px) { .hero { --chrome: 122px; } }
/* The original desk photo, kept from the old site, sits behind everything
   and is almost entirely covered by a dark wash — it reads as atmosphere,
   not as a picture competing with the headline. */
.hero-bg {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(102deg, rgba(7,11,17,.97) 0%, rgba(7,11,17,.93) 38%,
                            rgba(7,11,17,.80) 68%, rgba(7,11,17,.66) 100%),
    radial-gradient(1000px 500px at 8% -14%, rgba(163,230,53,.20), transparent 60%),
    radial-gradient(760px 460px at 96% 110%, rgba(92,140,31,.24), transparent 62%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); opacity: .28; mix-blend-mode: overlay;
}
.hero .wrap { position: relative; width: 100%; }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 58px; align-items: center; }

/* Short screens — laptops at 1366x768, phones in landscape.  Everything
   steps down so the hero still fits one screen instead of scrolling. */
@media (max-height: 900px) and (min-width: 981px) {
  .hero { padding: 32px 0; }
  .hero p { font-size: 1.05rem; }
  .hero .btns { margin-top: 24px; }
  .hero-points { margin-top: 20px; }
}
/* Below this the pills simply don't earn their ~90px — the headline, the
   intro and the buttons all matter more. */
@media (max-height: 840px) and (min-width: 981px) {
  .hero-points { display: none; }
}
@media (max-height: 800px) and (min-width: 981px) {
  .hero { padding: 20px 0; }
  .hero h1 { margin-bottom: .3em; }
  .hero p { font-size: 1rem; line-height: 1.55; }
  .hero .btns { margin-top: 20px; }
}
@media (max-height: 700px) {
  .hero { padding: 24px 0; }
  .hero p { font-size: 1rem; }
  .hero-points { display: none; }
}
/* Sized against the viewport HEIGHT as well as its width.  Width alone
   overflows a 1440x900 laptop — the headline wraps to four lines and pushes
   the buttons off the bottom.  min() lets whichever is tighter win. */
.hero h1 {
  color: #fff; margin-bottom: .38em;
  font-size: min(clamp(2rem, 1rem + 3.4vw, 3.6rem), 6vh);
}
.hero h1 .hl {
  white-space: nowrap;
  background: linear-gradient(96deg, var(--lime), #d9f99d 55%, var(--green));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { font-size: 1.18rem; max-width: 56ch; color: #a8b8cd; }
.hero .btns { margin-top: 32px; }

.hero-points {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.hero-points li {
  font-family: var(--display); font-size: .87rem; font-weight: 600; color: #d6e3f0;
  padding: 8px 15px 8px 32px; position: relative;
  border: 1px solid rgba(255,255,255,.13); border-radius: 999px;
  background: rgba(255,255,255,.04);
}
.hero-points li::before {
  content: ""; position: absolute; left: 14px; top: 50%; width: 11px; height: 6px;
  border-left: 2px solid var(--lime); border-bottom: 2px solid var(--lime);
  transform: translateY(-70%) rotate(-45deg);
}

/* --------------------------------------------------------- browser frame */
/* Screenshots sit in a fake browser chrome so they read as "a website"
   rather than "an image someone dropped in". */
.browser {
  border-radius: 14px; overflow: hidden; background: #10161f;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 34px 80px rgba(0,0,0,.5), 0 2px 0 rgba(255,255,255,.05) inset;
}
.browser-bar {
  display: flex; align-items: center; gap: 7px; padding: 11px 14px;
  background: #171f2b; border-bottom: 1px solid rgba(255,255,255,.08);
}
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #38455a; }
.browser-bar i:first-child { background: #ff5f57; }
.browser-bar i:nth-child(2) { background: #febc2e; }
.browser-bar i:nth-child(3) { background: #28c840; }
.browser-url {
  flex: 1; margin-left: 10px; height: 22px; border-radius: 6px;
  background: rgba(255,255,255,.06); display: flex; align-items: center;
  padding: 0 10px; font-size: .68rem; color: #7d8da3;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden; white-space: nowrap;
}
/* Three sites fanned out.  Each is absolutely positioned off a padded
   container, so the group scales with the column instead of needing fixed
   sizes, and they spread apart slightly when you hover the stack. */
.hero-stack {
  position: relative; aspect-ratio: 5 / 4;
  perspective: 1600px;
}
.hero-stack .browser {
  position: absolute; transform-origin: center;
  transition: transform .55s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;
}
.hero-stack .s3 {
  z-index: 1; width: 66%; left: 0; top: 6%;
  transform: rotate(-7deg) translateZ(-40px);
  filter: saturate(.85) brightness(.82);
}
.hero-stack .s2 {
  z-index: 2; width: 72%; right: 0; top: 0;
  transform: rotate(5deg) translateZ(-20px);
  filter: saturate(.92) brightness(.92);
}
.hero-stack .s1 {
  z-index: 3; width: 84%; left: 8%; bottom: 0;
  transform: rotate(-1.5deg);
}
.hero-stack:hover .s3 { transform: rotate(-11deg) translate(-7%, -4%) translateZ(-40px); }
.hero-stack:hover .s2 { transform: rotate(9deg) translate(7%, -5%) translateZ(-20px); }
.hero-stack:hover .s1 { transform: rotate(0deg) translateY(3%); }

/* The stack stays on mobile — it's the proof, so losing it costs more than
   the space it takes.  It just goes wider and shorter, sits under the copy,
   and the pills go instead so the hero still fills roughly one screen. */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .hero-points { display: none; }
  .hero p { font-size: 1.04rem; }
  /* Left-aligned, not centred — otherwise on tablets the stack floats to the
     middle while every bit of text sits on a 24px left edge. */
  .hero-stack {
    aspect-ratio: 16 / 10; width: min(100%, 640px); margin-inline: 0;
  }
  .hero-stack .s3 { width: 58%; top: 4%; }
  .hero-stack .s2 { width: 62%; top: 0; }
  .hero-stack .s1 { width: 74%; left: 13%; }
  .browser-bar { padding: 8px 10px; gap: 5px; }
  .browser-bar i { width: 7px; height: 7px; }
  .browser-url { height: 17px; font-size: .58rem; margin-left: 7px; }
}
/* Phone: every saved pixel here is a pixel the stack gets, so the sites are
   visible without scrolling.  Buttons go side by side and the intro tightens. */
@media (max-width: 400px) {
  .hero { padding: 20px 0; }
  .hero h1 { margin-bottom: .3em; }
  .hero p { font-size: .93rem; line-height: 1.48; }
  .hero-stack { aspect-ratio: 16 / 9; }
  .hero-stack .s1 { width: 64%; left: 18%; }
  .hero-stack .s2 { width: 54%; }
  .hero-stack .s3 { width: 50%; }
  .hero .btn { padding: 11px 14px; font-size: .85rem; gap: .4rem; }
}
@media (max-width: 640px) {
  .hero { padding: 26px 0; }
  .hero-grid { gap: 20px; }
  .hero p { font-size: .95rem; line-height: 1.5; }
  .hero .btns { margin-top: 20px; gap: 10px; flex-wrap: nowrap; }
  .hero .btn { padding: 12px 16px; font-size: .9rem; }
  .hero-stack { aspect-ratio: 16 / 11; }
}
@media (max-width: 560px) {
  .topbar .topbar-usp { display: none; }
  .topbar .wrap { justify-content: flex-end; }
}

/* ------------------------------------------------------------- page hero */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--dark); color: #9fb0c6;
  padding: clamp(54px, 6.5vw, 92px) 0;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(102deg, rgba(7,11,17,.96) 0%, rgba(7,11,17,.91) 45%,
                            rgba(7,11,17,.81) 100%),
    radial-gradient(880px 400px at 4% -22%, rgba(163,230,53,.19), transparent 60%),
    radial-gradient(620px 340px at 100% 120%, rgba(92,140,31,.2), transparent 62%);
}
/* These banners are 1920x475, so anchor them centrally rather than high. */
.page-hero .hero-bg { object-position: center center; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); opacity: .26; mix-blend-mode: overlay;
}
.page-hero .wrap { position: relative; max-width: 940px; }
.page-hero h1 { color: #fff; margin-bottom: .32em; }
.page-hero p { font-size: 1.14rem; max-width: 64ch; margin: 0; color: #a8b8cd; }

/* ----------------------------------------------------------- breadcrumbs */
.crumbs { background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: .84rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 13px 0; }
.crumbs li + li::before { content: "/"; margin-right: 9px; color: var(--green); font-weight: 700; }
.crumbs a { color: var(--ink-faint); text-decoration: none; }
.crumbs a:hover { color: var(--green-dark); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------- marquee */
/* A single strip of what I do, scrolling.  Purely decorative, so it is
   hidden from screen readers and frozen for reduced-motion users. */
.marquee {
  background: var(--lime); color: var(--ink); overflow: hidden;
  padding: 15px 0; border-block: 2px solid var(--ink);
}
.marquee-track { display: flex; width: max-content; animation: slide 42s linear infinite; }
.marquee span {
  font-family: var(--display); font-weight: 700; font-size: 1.02rem;
  letter-spacing: -.02em; text-transform: uppercase; padding: 0 26px;
  display: flex; align-items: center; gap: 26px; white-space: nowrap;
}
.marquee span::after { content: "✳"; font-size: .8em; opacity: .55; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* -------------------------------------------------------------- sections */
.section { padding: clamp(62px, 7.5vw, 106px) 0; position: relative; }
.section-alt { background: var(--surface-2); }
.section-dark {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--dark); color: #9fb0c6;
}
.section-dark::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(800px 420px at 88% -10%, rgba(163,230,53,.13), transparent 62%),
    radial-gradient(620px 380px at 4% 108%, rgba(92,140,31,.16), transparent 60%);
}
.section-dark::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); opacity: .22; mix-blend-mode: overlay;
}
.section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark a { color: var(--lime); }

.section-head { max-width: 64ch; margin-bottom: 52px; }
.section-head.center { margin-inline: auto; }

/* ----------------------------------------------------------------- cards */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* The border is a gradient, done with two background layers clipped to
   padding-box and border-box.  Falls back to a plain light border. */
.card {
  position: relative; isolation: isolate; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r);
  background: #fff;
  padding: 32px 30px;
  box-shadow: var(--shadow);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease;
}
@supports (background: linear-gradient(#fff,#fff) padding-box, linear-gradient(#fff,#fff) border-box) {
  .card {
    border-color: transparent;
    background:
      linear-gradient(#fff, #fff) padding-box,
      linear-gradient(150deg, rgba(140,198,63,.55), rgba(11,16,22,.09) 42%, rgba(11,16,22,.06)) border-box;
  }
}
/* Corner glow that fades in on hover. */
.card::before {
  content: ""; position: absolute; z-index: -1; top: -45%; right: -32%;
  width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(140,198,63,.20), transparent 70%);
  opacity: 0; transition: opacity .35s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.card:hover::before { opacity: 1; }
.card h3 { margin-bottom: .5em; }
.card p { font-size: .97rem; }
a.card { text-decoration: none; color: inherit; display: block; }
.card-more {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 18px;
  font-family: var(--display); font-weight: 600; font-size: .93rem; color: var(--green-deep);
}
.card-more::after { content: "→"; transition: transform .25s ease; }
a.card:hover .card-more { color: var(--green-dark); }
a.card:hover .card-more::after { transform: translateX(5px); }

.section-dark .card {
  border-color: var(--line-dark); background: var(--dark-2); box-shadow: none;
}
@supports (background: linear-gradient(#fff,#fff) padding-box, linear-gradient(#fff,#fff) border-box) {
  .section-dark .card {
    border-color: transparent;
    background:
      linear-gradient(160deg, #161f2c, #111823) padding-box,
      linear-gradient(150deg, rgba(163,230,53,.42), rgba(255,255,255,.06) 45%) border-box;
  }
}
.section-dark .card:hover { box-shadow: var(--glow); }
.section-dark .card p { color: #9fb0c6; }

/* Icon tile — gradient fill plus an inner ring, rather than a flat square. */
.icon {
  width: 54px; height: 54px; border-radius: 15px;
  display: grid; place-items: center; margin-bottom: 22px;
  color: var(--green-dark);
  background: linear-gradient(150deg, #eaf6d6, #f7fbef);
  box-shadow: inset 0 0 0 1px rgba(92,140,31,.18), 0 6px 16px rgba(92,140,31,.12);
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.icon svg { width: 26px; height: 26px; }
.card:hover .icon { transform: rotate(-6deg) scale(1.06); }
.section-dark .icon {
  color: var(--lime);
  background: linear-gradient(150deg, rgba(163,230,53,.18), rgba(163,230,53,.05));
  box-shadow: inset 0 0 0 1px rgba(163,230,53,.28);
}

/* Big ghosted step numbers on the process cards. */
.card-index {
  position: absolute; top: 12px; right: 20px; z-index: -1;
  font-family: var(--display); font-weight: 700; font-size: 5.2rem;
  line-height: 1; letter-spacing: -.06em; color: rgba(11,16,22,.05);
}
.section-dark .card-index { color: rgba(255,255,255,.06); }

/* --------------------------------------------------------- service rows */
/* Deliberately type-led with no imagery — the portfolio lower down is
   image-led, and repeating the same screenshots in both made the page feel
   like it was padding itself out.  Full-width editorial rows instead: a
   dark panel wipes in from the left on hover and the row indents. */
.services { border-top: 1px solid var(--line); }

.srv {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 62px 1.05fr 1.15fr 54px;
  align-items: center; gap: 26px;
  padding: 24px 22px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: padding-left .4s cubic-bezier(.2,.7,.3,1);
}
.srv::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, #17212e, #0a0f16);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.srv:hover::before, .srv:focus-visible::before { transform: none; }
.srv:hover, .srv:focus-visible { padding-left: 36px; }

.srv-no {
  font-family: var(--display); font-size: .84rem; font-weight: 700;
  letter-spacing: .14em; color: var(--ink-faint); transition: color .35s ease;
}
.srv-head { display: flex; align-items: center; gap: 16px; }
.srv-name {
  font-family: var(--display); font-weight: 700; letter-spacing: -.03em;
  line-height: 1.1; color: var(--ink);
  font-size: clamp(1.22rem, .95rem + 1.1vw, 1.95rem);
  transition: color .35s ease;
}
.srv-desc { font-size: .97rem; color: var(--ink-faint); transition: color .35s ease; }

/* The icon tile is small here and inverts with the row. */
.srv .icon {
  width: 44px; height: 44px; margin: 0; flex: none; border-radius: 13px;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), background .35s ease,
              color .35s ease, box-shadow .35s ease;
}
.srv .icon svg { width: 22px; height: 22px; }

.srv-go {
  justify-self: end; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.05rem;
  border: 1.5px solid var(--line); color: var(--ink);
  transition: background .35s ease, color .35s ease, border-color .35s ease,
              transform .35s cubic-bezier(.2,.7,.3,1);
}

.srv:hover .srv-no   { color: var(--lime); }
.srv:hover .srv-name { color: #fff; }
.srv:hover .srv-desc { color: #9aabc2; }
.srv:hover .icon {
  color: var(--lime); transform: rotate(-6deg) scale(1.06);
  background: linear-gradient(150deg, rgba(163,230,53,.2), rgba(163,230,53,.06));
  box-shadow: inset 0 0 0 1px rgba(163,230,53,.35);
}
.srv:hover .srv-go {
  background: var(--lime); color: var(--ink); border-color: var(--lime);
  transform: translateX(5px);
}

@media (max-width: 900px) {
  .srv {
    grid-template-columns: auto 1fr; gap: 8px 16px; padding: 22px 14px;
    row-gap: 10px;
  }
  .srv:hover, .srv:focus-visible { padding-left: 22px; }
  .srv-no { align-self: start; padding-top: .5em; }
  .srv-desc { grid-column: 2 / -1; }
  .srv-go { display: none; }
}
@media (max-width: 520px) {
  .srv .icon { display: none; }
}

/* ----------------------------------------------------------------- lists */
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding: 0 0 11px 32px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .18em;
  width: 19px; height: 19px; border-radius: 6px;
  background: linear-gradient(150deg, var(--lime), var(--green));
  box-shadow: 0 2px 6px rgba(92,140,31,.28);
}
.ticks li::after {
  content: ""; position: absolute; left: 5px; top: .52em;
  width: 9px; height: 5px;
  border-left: 2px solid #16240a; border-bottom: 2px solid #16240a;
  transform: rotate(-45deg);
}
.ticks-2 { columns: 2; column-gap: 40px; }
.ticks-2 li { break-inside: avoid; }
@media (max-width: 640px) { .ticks-2 { columns: 1; } }

/* ----------------------------------------------------------------- split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
@media (max-width: 940px) { .split { grid-template-columns: 1fr; gap: 40px; } }

/* ------------------------------------------------------------- portfolio */
.work { display: grid; gap: 30px; grid-template-columns: repeat(2, 1fr); }
/* An odd number of cards leaves the last one alone in its row — centre it
   at the same width rather than letting it hang off to the left. */
.work-item:last-child:nth-child(odd) {
  grid-column: 1 / -1; width: calc(50% - 15px); margin-inline: auto;
}
@media (max-width: 820px) {
  .work { grid-template-columns: 1fr; }
  .work-item:last-child:nth-child(odd) { grid-column: auto; width: auto; }
}

.work-item {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r); display: flex; flex-direction: column;
  border: 1px solid var(--line-dark);
  background: linear-gradient(165deg, #151d29, #0f151e);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.work-item:hover { transform: translateY(-6px); box-shadow: var(--glow); }
.work-shot { position: relative; overflow: hidden; }
.work-shot img {
  width: 100%; aspect-ratio: 1200 / 833; object-fit: cover; object-position: top center;
  transition: transform .55s cubic-bezier(.2,.7,.3,1);
}
.work-item:hover .work-shot img { transform: scale(1.035); }
/* Fade the bottom of the screenshot into the card body. */
.work-shot::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(transparent, #131b26);
}
.work-body { padding: 26px 30px 30px; flex: 1; display: flex; flex-direction: column; }
.work-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
.tag {
  font-family: var(--display); font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(163,230,53,.14); color: var(--lime);
  border: 1px solid rgba(163,230,53,.24);
}
.work-body h3 { color: #fff; margin-bottom: .4em; }
.work-body p { font-size: .96rem; color: #9fb0c6; }
.work-link {
  margin-top: auto; padding-top: 18px; font-family: var(--display);
  font-weight: 600; font-size: .93rem; color: var(--lime); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.work-link::after { content: "→"; transition: transform .25s ease; }
.work-item:hover .work-link::after { transform: translateX(5px); }

/* --------------------------------------------------------------- pricing */
.plans { display: grid; gap: 26px; grid-template-columns: repeat(3, 1fr); align-items: start; }
@media (max-width: 980px) { .plans { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; } }
.plan {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r); padding: 36px 30px 32px;
  border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease;
}
.plan:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.plan.featured {
  background: linear-gradient(165deg, #141d29, #0e141d); color: #9fb0c6;
  border-color: transparent; box-shadow: var(--shadow-lg);
}
.plan.featured::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(520px 260px at 80% -10%, rgba(163,230,53,.2), transparent 62%);
}
.plan.featured h3 { color: #fff; }
.plan.featured .price-note { color: #8fa0b7; }
.plan-flag {
  position: absolute; top: 20px; right: 20px;
  font-family: var(--display); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 999px;
  background: var(--lime); color: var(--ink);
}
.plan h3 { margin-bottom: .35em; }
.plan .price-note { font-size: .89rem; color: var(--ink-faint); margin: 0 0 24px; }
.plan .ticks { margin-bottom: 28px; font-size: .96rem; }
.plan.featured .ticks li::before { background: linear-gradient(150deg, var(--lime), var(--green)); }
.plan .btn { width: 100%; justify-content: center; }

/* -------------------------------------------------------------- about me */
.me { display: grid; grid-template-columns: 280px 1fr; gap: 56px; align-items: center; }
@media (max-width: 800px) { .me { grid-template-columns: 1fr; gap: 30px; } }
.me-photo {
  position: relative; border-radius: var(--r); overflow: hidden;
  background: linear-gradient(160deg, var(--lime), var(--green-deep));
  padding: 4px; box-shadow: var(--shadow-lg);
  /* The source avatar is only 210px square — never upscale past it. */
  max-width: 240px;
}
@media (max-width: 800px) { .me-photo { max-width: 190px; } }
.me-photo img { border-radius: 16px; width: 100%; background: #fff; }

/* ----------------------------------------------------------------- stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 740px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { padding: 22px 20px; border-radius: 16px; border: 1px solid var(--line-dark); background: rgba(255,255,255,.03); }
.stat .n {
  font-family: var(--display); font-size: 2.7rem; font-weight: 700;
  letter-spacing: -.05em; line-height: 1;
  background: linear-gradient(140deg, var(--lime), #d9f99d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat p { font-size: .89rem; margin: 10px 0 0; color: #9fb0c6; }

/* ------------------------------------------------------------------- faq */
.faq { max-width: 830px; margin-inline: auto; }
.faq details {
  border: 1px solid var(--line); border-radius: 16px; background: #fff;
  margin-bottom: 14px; overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease;
}
.faq details[open] { border-color: rgba(140,198,63,.5); box-shadow: var(--shadow); }
.faq summary {
  cursor: pointer; list-style: none; padding: 21px 60px 21px 24px; position: relative;
  font-family: var(--display); font-weight: 600; font-size: 1.06rem;
  letter-spacing: -.02em; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  background: var(--green-wash); color: var(--green-dark);
  font-size: 1.2rem; font-weight: 500; line-height: 1;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), background .2s ease;
}
.faq details[open] summary::after {
  content: "+"; transform: translateY(-50%) rotate(135deg);
  background: var(--lime); color: var(--ink);
}
.faq .faq-a { padding: 0 24px 22px; font-size: .99rem; }

/* ------------------------------------------------------------------- cta */
.cta {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--void); color: #9fb0c6; padding: clamp(56px, 7vw, 88px) 0;
}
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(700px 340px at 12% -20%, rgba(163,230,53,.24), transparent 62%),
    radial-gradient(600px 320px at 90% 120%, rgba(92,140,31,.24), transparent 60%);
}
.cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); opacity: .26; mix-blend-mode: overlay;
}
.cta .wrap { display: flex; flex-wrap: wrap; gap: 30px; align-items: center; justify-content: space-between; }
.cta h2 { color: #fff; margin-bottom: .35em; }
.cta p { color: #a8b8cd; margin: 0; max-width: 54ch; }

/* ----------------------------------------------------------------- forms */
.form-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 52px; align-items: start; }
@media (max-width: 940px) { .form-grid { grid-template-columns: 1fr; gap: 38px; } }
.field { margin-bottom: 20px; }
.field label {
  display: block; font-family: var(--display); font-weight: 600; font-size: .9rem;
  color: var(--ink); margin-bottom: 8px;
}
.field .req { color: #d13b2b; }
.field input, .field select, .field textarea {
  width: 100%; padding: 15px 17px; font: inherit; font-size: 1rem; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(140,198,63,.18);
}
.field textarea { min-height: 165px; resize: vertical; }
.field-hp { position: absolute; left: -9999px; }
.form-note { font-size: .86rem; color: var(--ink-faint); margin-top: 16px; }

.contact-panel {
  border-radius: var(--r); padding: 34px 30px;
  background: linear-gradient(165deg, #141d29, #0e141d); color: #9fb0c6;
  position: relative; isolation: isolate; overflow: hidden;
}
.contact-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(460px 240px at 88% -12%, rgba(163,230,53,.2), transparent 62%);
}
.contact-panel h3 { margin-top: 0; color: #fff; }
.contact-panel a { color: var(--lime); }
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.09); font-size: .96rem; }
.contact-list li:last-child { border-bottom: 0; }
.contact-list strong {
  display: block; font-family: var(--display); font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--lime); margin-bottom: 5px;
}
.footer .contact-list li { border-color: rgba(255,255,255,.08); }

.alert { padding: 16px 20px; border-radius: 12px; margin-bottom: 24px; font-size: .97rem; }
.alert-ok  { background: var(--green-wash); border: 1px solid #c6e39c; color: #2f5209; }
.alert-err { background: #fdecea; border: 1px solid #f5c4bf; color: #8c2a20; }

/* ----------------------------------------------------------------- prose */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 1.9em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.35em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .55em; }
.prose blockquote {
  margin: 1.8em 0; padding: 22px 26px; border-radius: 16px;
  background: var(--green-wash); border-left: 4px solid var(--green);
  color: var(--ink); font-size: 1.02rem;
}
.toc {
  border-radius: var(--r); padding: 28px 32px; margin-bottom: 46px;
  background: linear-gradient(165deg, #f4f8ec, #fbfdf7);
  border: 1px solid rgba(140,198,63,.3);
}
.toc h2 { margin: 0 0 .7em; font-size: 1.14rem; }
.toc ol { margin: 0; padding-left: 1.3em; }
.toc li { margin-bottom: .42em; font-size: .97rem; }

/* ---------------------------------------------------------------- footer */
.footer {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--void); color: #7f8da3; padding: 72px 0 0; font-size: .95rem;
}
.footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(760px 360px at 88% -20%, rgba(92,140,31,.16), transparent 62%);
}
.footer h4 {
  color: #fff; font-family: var(--display); font-size: .74rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; margin-bottom: 20px;
}
.footer a { color: #8fa0b7; text-decoration: none; transition: color .18s ease, transform .18s ease; }
.footer a:hover { color: var(--lime); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 44px; padding-bottom: 52px; }
@media (max-width: 940px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 580px) { .footer-grid { grid-template-columns: 1fr; } }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 11px; }
.footer-brand img { width: 46px; height: 46px; margin-bottom: 18px; }
.social { display: flex; gap: 11px; margin-top: 20px; }
.social a {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); color: #cfe0a8;
}
.social a:hover { background: var(--lime); color: var(--ink); border-color: var(--lime); transform: translateY(-3px); }
.social svg { width: 18px; height: 18px; }
.legal {
  border-top: 1px solid rgba(255,255,255,.08); padding: 24px 0 32px;
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; font-size: .86rem;
}

/* --------------------------------------------------------------- utility */
.mt-0 { margin-top: 0; }
.narrow { max-width: 840px; margin-inline: auto; }
.hosting-soon {
  position: relative; border-radius: var(--r); padding: 34px; text-align: center;
  background: linear-gradient(165deg, #f4f8ec, #fbfdf7);
  border: 2px dashed rgba(140,198,63,.55);
}