/* ===== Licensed Neue Haas Grotesk webfonts (MyFonts / Linotype, MyWebfontsKit).
   Two families x weight variants. Display Pro = titles, Text Pro = body/nav/buttons.
   NB: paths are "assets/fonts/…" (correct for the standalone HTML); build-wp.mjs
   rewrites them to "../assets/fonts/…" for the WordPress css/wd.css location. ===== */
@font-face{font-family:"Neue Haas Grotesk Display Pro";src:url("../assets/fonts/NeueHaasGroteskDisplayPro-75Bold.woff2") format("woff2"),url("../assets/fonts/NeueHaasGroteskDisplayPro-75Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Haas Grotesk Display Pro";src:url("../assets/fonts/NeueHaasGroteskDisplayPro-95Black.woff2") format("woff2"),url("../assets/fonts/NeueHaasGroteskDisplayPro-95Black.woff") format("woff");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Haas Grotesk Text Pro";src:url("../assets/fonts/NeueHaasGroteskTextPro-55Roman.woff2") format("woff2"),url("../assets/fonts/NeueHaasGroteskTextPro-55Roman.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Haas Grotesk Text Pro";src:url("../assets/fonts/NeueHaasGroteskTextPro-75Bold.woff2") format("woff2"),url("../assets/fonts/NeueHaasGroteskTextPro-75Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
/* =====================================================================
   GREEN CITY MARKETING — WEBSITE DEVELOPMENT (Web3 / cinematic)
   Shared design-system foundation. Tokens are 1:1 with the Video Production,
   Meta Ads, SEO and AI Automations pages so every service page reads as one
   elite ecosystem. Global primitives are `ma-` prefixed; each section owns its
   own `sN-` namespace. Website-Dev-only shared atoms are `wd-` prefixed.
   ===================================================================== */
:root{
  /* brand */
  --green:#27F58C; --green-bright:#3BFF9C; --green-deep:#0A8A4F; --green-deep-2:#0FB866;
  --green-glow:rgba(39,245,140,.35);
  /* accent platform colours (controlled use) */
  --c-meta:#0866FF; --c-openai:#10A37F; --c-claude:#D97757; --c-zapier:#FF4F00;
  --c-make:#6D00CC; --c-n8n:#EA4B71; --c-slack:#611f69; --c-purple:#7F54B3; --c-orange:#FF6A00;
  --c-gold:#E9C46A; --c-gold-deep:#B8860B;

  /* cinema (black) */
  --void:#04070A; --void-edge:#070B0E; --void-panel:#0C161C; --void-panel-2:#111E25;
  --void-line:rgba(255,255,255,.10); --void-line-green:rgba(39,245,140,.22);
  --void-ink:#F5FBF7; --void-ink-2:#C7D3CD; --void-ink-3:#7E8E87;

  /* system (white) */
  --paper:#FFFFFF; --paper-edge:#F4F7F5; --paper-panel:#F6F9F7; --paper-panel-2:#EDF3EF;
  --paper-line:rgba(5,5,5,.10); --paper-line-green:rgba(10,138,79,.22);
  --paper-ink:#0A0C0B; --paper-ink-2:#2C3A33; --paper-ink-3:#6A7972;

  /* fonts */
  --font-display:"Neue Haas Grotesk Display Pro","Helvetica Now Display","Helvetica Neue",Arial,sans-serif;
  --font-body:"Neue Haas Grotesk Text Pro","Helvetica Neue",Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* layout */
  --max:1320px; --max-wide:1440px; --max-text:780px;
  --gutter:clamp(22px,5vw,64px);

  /* radius / motion */
  --r-sm:12px; --r:18px; --r-lg:26px; --r-pill:999px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-snap:cubic-bezier(.2,.9,.25,1);
  --dur-micro:180ms; --dur-ui:320ms; --dur-reveal:700ms; --dur-cine:1100ms;
  color-scheme:dark;
}

/* contextual contract — components only read these */
.ma-cinema{
  --c-bg:var(--void); --c-bg-edge:var(--void-edge);
  --c-panel:var(--void-panel); --c-panel-2:var(--void-panel-2);
  --c-line:var(--void-line); --c-line-green:var(--void-line-green);
  --c-ink:var(--void-ink); --c-ink-2:var(--void-ink-2); --c-ink-3:var(--void-ink-3);
  --c-accent:var(--green); --c-accent-soft:rgba(39,245,140,.12); --c-on-accent:#04140C;
  --c-shadow:0 30px 80px -40px rgba(0,0,0,.9);
  color:var(--c-ink); background:var(--c-bg);
}
.ma-system{
  --c-bg:var(--paper); --c-bg-edge:var(--paper-edge);
  --c-panel:var(--paper-panel); --c-panel-2:var(--paper-panel-2);
  --c-line:var(--paper-line); --c-line-green:var(--paper-line-green);
  --c-ink:var(--paper-ink); --c-ink-2:var(--paper-ink-2); --c-ink-3:var(--paper-ink-3);
  --c-accent:var(--green-deep); --c-accent-soft:rgba(10,138,79,.08); --c-on-accent:#04140C;
  --c-shadow:0 24px 60px -30px rgba(5,5,5,.16);
  color:var(--c-ink); background:var(--c-bg);
}

/* ----- RESET -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--void);color:var(--void-ink);
  font-family:var(--font-body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* NOTE: body must NOT be a scroll container (no overflow-x here) or it breaks the hero's position:sticky pin;
   html{overflow-x:hidden} above is the horizontal backstop. */
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select,textarea{font:inherit}
::selection{background:var(--green);color:#04140C}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}

/* ----- GRAIN + PROGRESS -------------------------------------------- */
.ma-grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.ma-scrollbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:transparent;pointer-events:none}
.ma-scrollbar__fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green-deep),var(--green));box-shadow:0 0 12px var(--green-glow);transform-origin:left}

/* ----- HEADER ------------------------------------------------------- */
.ma-header{position:fixed;top:0;left:0;right:0;z-index:50;padding:14px var(--gutter);
  transition:transform var(--dur-ui) var(--ease-out),background var(--dur-ui) ease,backdrop-filter var(--dur-ui) ease,border-color var(--dur-ui) ease;
  border-bottom:1px solid transparent}
.ma-header.is-scrolled{background:rgba(4,7,10,.74);backdrop-filter:blur(16px) saturate(140%);border-bottom-color:var(--void-line)}
.ma-header.is-hidden{transform:translateY(-110%)}
.ma-header__inner{max-width:var(--max-wide);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px}
.ma-brand{display:flex;align-items:center;color:#fff;flex:none}
.ma-brand__logo{height:clamp(42px,4.4vw,54px);width:auto;display:block;filter:drop-shadow(0 5px 16px rgba(0,0,0,.55))}
.ma-nav{flex:1 1 auto;display:flex;justify-content:center;min-width:0}
.ma-nav__pill{display:flex;flex-direction:column;gap:4px;padding:6px 8px;border:1px solid var(--void-line);border-radius:22px;background:rgba(255,255,255,.04);backdrop-filter:blur(10px)}
.ma-nav__row{display:flex;gap:3px;justify-content:center;list-style:none;margin:0;padding:0}
.ma-nav__pill a{display:block;padding:6px 13px;border-radius:var(--r-pill);font-family:var(--font-body);font-weight:700;font-size:15px;letter-spacing:.03em;color:var(--void-ink-2);white-space:nowrap;transition:color var(--dur-micro) ease,background var(--dur-micro) ease}
.ma-nav__pill a:hover{color:#fff}
.ma-nav__pill a.is-active{color:var(--green);background:rgba(39,245,140,.1)}
.ma-burger{display:none;width:42px;height:38px;border:1px solid var(--void-line);border-radius:10px;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.ma-burger span{width:18px;height:1.6px;background:#fff;transition:transform var(--dur-ui) var(--ease-snap)}
.ma-burger[aria-expanded="true"] span:first-child{transform:translateY(3.3px) rotate(45deg)}
.ma-burger[aria-expanded="true"] span:last-child{transform:translateY(-3.3px) rotate(-45deg)}

/* ----- BUTTONS ------------------------------------------------------ */
.ma-btn{position:relative;display:inline-flex;align-items:center;gap:9px;
  padding:13px 22px;border-radius:var(--r-pill);font-family:var(--font-body);
  font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  transition:transform var(--dur-micro) var(--ease-snap),box-shadow var(--dur-ui) ease,background var(--dur-ui) ease,color var(--dur-ui) ease;
  will-change:transform}
.ma-btn svg{transition:transform var(--dur-ui) var(--ease-snap)}
.ma-btn:active{transform:scale(.97)}
.ma-btn--cta{background:var(--green);color:#04140C;box-shadow:0 8px 30px -8px var(--green-glow),inset 0 0 0 1px rgba(255,255,255,.12)}
.ma-btn--cta:hover{background:var(--green-bright);box-shadow:0 12px 40px -8px var(--green-glow)}
.ma-btn--cta:hover svg{transform:translateX(3px)}
.ma-btn--ghost{background:transparent;color:var(--c-ink,#fff);box-shadow:inset 0 0 0 1px var(--c-line,rgba(255,255,255,.18))}
.ma-btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--c-accent,var(--green));color:var(--c-accent,var(--green))}
.ma-btn--lg{padding:16px 28px;font-size:15px}

/* ===== END-OF-SECTION CTA — every section funnels to the lead form (#wd-contact) ===== */
.wd-endcta{display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2vw,22px);text-align:center;margin-top:clamp(44px,6vw,80px);padding-top:clamp(30px,4vw,50px);border-top:1px solid var(--c-line)}
.wd-endcta__line{font-family:var(--font-display);font-weight:600;font-size:clamp(21px,2.7vw,32px);line-height:1.2;letter-spacing:-.01em;color:var(--c-ink);max-width:660px}
.wd-endcta__line em{font-style:normal;color:var(--c-accent)}
.wd-stack-cta{position:absolute;left:50%;bottom:clamp(22px,5vh,46px);transform:translateX(-50%);z-index:3}
.ma-btn--sm{padding:11px 18px;font-size:13px}

/* ----- SECTION SHELL ------------------------------------------------ */
.ma-sec{position:relative;padding:clamp(54px,8vw,140px) 0;overflow:clip;isolation:isolate}
/* fluid scaling: let content fill large monitors a bit more (instead of a narrow capped column) */
@media (min-width:1700px){ :root{ --max:1420px; --max-wide:1540px; } }
@media (min-width:2100px){ :root{ --max:1520px; --max-wide:1660px; } }
.ma-sec + .ma-sec{border-top:1px solid var(--c-line)}
.ma-inner{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2}
/* --wide is often used on its own (without .ma-inner), so it must carry the gutter itself */
.ma-inner--wide{max-width:var(--max-wide);margin-left:auto;margin-right:auto;padding-left:var(--gutter);padding-right:var(--gutter);position:relative;z-index:2}
.ma-page > .ma-sec.ma-hero{padding-top:clamp(132px,15vh,160px);min-height:100vh}
@media (max-width:1199px){.ma-page > .ma-sec.ma-hero{padding-top:clamp(96px,12vh,124px)}}

/* feather edges (seam system) */
.ma-cinema::before,.ma-system::before,.ma-cinema::after,.ma-system::after{content:"";position:absolute;left:0;right:0;height:12%;z-index:1;pointer-events:none}
.ma-cinema::before{top:0;background:linear-gradient(var(--void-edge),transparent)}
.ma-cinema::after{bottom:0;background:linear-gradient(transparent,var(--void-edge))}
.ma-system::before{top:0;background:linear-gradient(var(--paper-edge),transparent)}
.ma-system::after{bottom:0;background:linear-gradient(transparent,var(--paper-edge))}

/* ----- TYPOGRAPHY --------------------------------------------------- */
.ma-eyebrow{font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-accent);display:inline-flex;align-items:center;gap:9px;margin-bottom:22px}
.ma-system .ma-eyebrow{color:var(--green-deep)}
.ma-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:maPulse 2.4s var(--ease-out) infinite;flex:none}
.ma-system .ma-dot{background:var(--green-deep);box-shadow:0 0 10px var(--green-deep)}
@keyframes maPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

.ma-title{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:-.02em;line-height:.96;font-size:clamp(32px,5.2vw,62px);color:var(--c-ink)}
.ma-title--hero{font-size:clamp(38px,5.2vw,72px);line-height:.94;letter-spacing:-.025em}
.ma-title--final{font-size:clamp(38px,6.6vw,82px);line-height:.94}
.ma-title .ma-line{display:block}
.ma-word{color:var(--c-accent);position:relative}
.ma-system .ma-word{color:var(--green-deep)}
.ma-word--grad{-webkit-background-clip:text;background-clip:text;color:transparent;
  background-image:linear-gradient(120deg,#bff6d8,var(--green) 40%,#0a8a4f 75%,var(--green-bright));
  background-size:220% 100%;animation:maGradWord 7s ease-in-out infinite;
  filter:drop-shadow(0 0 18px rgba(39,245,140,.35))}
/* on white sections the light mint/bright gradient stops fail contrast — use deep greens */
.ma-system .ma-word--grad{
  background-image:linear-gradient(120deg,var(--green-deep),var(--green-deep-2) 50%,var(--green-deep));
  filter:drop-shadow(0 0 16px rgba(15,184,102,.20))}
@keyframes maGradWord{0%,100%{background-position:0% 0}50%{background-position:100% 0}}

.ma-lead{font-size:clamp(16px,1.9vw,20px);line-height:1.55;color:var(--c-ink-2);max-width:var(--max-text)}
.ma-sub{font-size:clamp(15px,1.6vw,18px);line-height:1.55;color:var(--c-ink-2);max-width:560px}
.ma-label{font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink-3)}

/* ----- HEADS -------------------------------------------------------- */
.ma-head{margin-bottom:clamp(44px,6vw,76px)}
.ma-head--center{text-align:center;max-width:900px;margin-left:auto;margin-right:auto}
.ma-head--center .ma-eyebrow{justify-content:center}
.ma-head--center .ma-lead{margin-left:auto;margin-right:auto}

/* ----- THE GREEN CURRENT (motion fingerprint) ---------------------- */
.ma-current__track{fill:none;stroke:var(--c-line);stroke-width:1.5}
.ma-current__line{fill:none;stroke:var(--c-accent);stroke-width:1.5;
  stroke-dasharray:8 12;filter:drop-shadow(0 0 4px var(--green-glow));
  stroke-dashoffset:200;animation:maFlow 3.4s linear infinite}
.ma-system .ma-current__line{stroke:var(--green-deep-2)}
@keyframes maFlow{to{stroke-dashoffset:0}}

/* ----- REVEAL ------------------------------------------------------- */
.js .ma-reveal{transform:translateY(18px);
  animation:maRevealIn var(--dur-reveal) var(--ease-out) both;
  animation-delay:calc((var(--d,0) - 1) * 60ms + 40ms)}
@keyframes maRevealIn{from{transform:translateY(18px)}to{transform:none}}
.ma-reveal[data-d="1"]{--d:1}.ma-reveal[data-d="2"]{--d:2}.ma-reveal[data-d="3"]{--d:3}
.ma-reveal[data-d="4"]{--d:4}.ma-reveal[data-d="5"]{--d:5}.ma-reveal[data-d="6"]{--d:6}
.ma-reveal[data-d="7"]{--d:7}.ma-reveal[data-d="8"]{--d:8}
.ma-reveal[data-d="9"]{--d:9}.ma-reveal[data-d="10"]{--d:10}.ma-reveal[data-d="11"]{--d:11}.ma-reveal[data-d="12"]{--d:12}
.is-revealed.ma-reveal,.is-revealed .ma-reveal{transform:none}

/* ----- AMBIENT ORBS / GRID ----------------------------------------- */
.ma-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;pointer-events:none}
.ma-orb--1{width:600px;height:600px;top:-160px;left:-120px;background:radial-gradient(circle,rgba(39,245,140,.30),transparent 70%);animation:maDrift 22s ease-in-out infinite}
.ma-orb--2{width:520px;height:520px;bottom:-160px;right:-100px;background:radial-gradient(circle,rgba(15,184,102,.22),transparent 70%);animation:maDrift 26s ease-in-out infinite reverse}
@keyframes maDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,30px)}}
.ma-grid-fade{position:absolute;inset:0;
  background-image:linear-gradient(var(--void-line) 1px,transparent 1px),linear-gradient(90deg,var(--void-line) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000,transparent 75%);opacity:.4}
.ma-system .ma-grid-fade{background-image:linear-gradient(var(--paper-line) 1px,transparent 1px),linear-gradient(90deg,var(--paper-line) 1px,transparent 1px)}

/* ----- SHARED ATOMS ------------------------------------------------- */
.ma-stars{color:var(--green);letter-spacing:2px;font-size:13px}
.ma-system .ma-stars{color:var(--green-deep)}
.ma-num{font-family:var(--font-display);font-weight:700;line-height:1;color:var(--c-ink);font-variant-numeric:tabular-nums}

.ma-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ma-marquee__row{display:flex;gap:40px;width:max-content;align-items:center;animation:maMarq 36s linear infinite}
.ma-marquee:hover .ma-marquee__row{animation-play-state:paused}
@keyframes maMarq{to{transform:translateX(-50%)}}

.ma-card{border-radius:var(--r);background:var(--c-panel);border:1px solid var(--c-line);position:relative;overflow:hidden;
  transition:border-color var(--dur-ui) ease,box-shadow var(--dur-ui) ease,transform var(--dur-ui) var(--ease-out)}
@media (hover:hover){.ma-card--lift:hover{transform:translateY(-4px);border-color:var(--c-line-green);box-shadow:0 0 40px -16px var(--green-glow)}}

.ma-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:12px;letter-spacing:.03em;
  padding:7px 13px;border-radius:var(--r-pill);background:var(--c-panel);border:1px solid var(--c-line);color:var(--c-ink-2)}

/* ===== LOGO CHIPS (always on a light tile, as in the mockups) ====== */
.ma-logo-tile{display:inline-grid;place-items:center;background:#fff;border-radius:15px;
  width:clamp(52px,5.4vw,66px);height:clamp(52px,5.4vw,66px);flex:none;
  box-shadow:0 7px 20px rgba(0,0,0,.22),inset 0 0 0 1px rgba(0,0,0,.05);
  transition:transform var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui) ease}
.ma-logo-tile img{width:62%;height:62%;object-fit:contain;pointer-events:none}
.ma-logo-tile--sm{width:clamp(44px,4.4vw,50px);height:clamp(44px,4.4vw,50px);border-radius:12px}
.ma-logo-tile--lg{width:clamp(62px,6.4vw,80px);height:clamp(62px,6.4vw,80px);border-radius:17px}
.ma-logo-tile--xl{width:clamp(72px,7.4vw,94px);height:clamp(72px,7.4vw,94px);border-radius:20px}
@media (hover:hover){.ma-logo-tile--hov:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 12px 28px rgba(0,0,0,.28),0 0 0 1px var(--green-glow)}}
.ma-system .ma-logo-tile{box-shadow:0 7px 18px rgba(5,5,5,.12),inset 0 0 0 1px rgba(5,5,5,.07)}
/* dark tile variant (used on dark sections per mockups) */
.ma-logo-tile--dark{background:#0E1A20;box-shadow:0 8px 22px rgba(0,0,0,.5),inset 0 0 0 1px var(--void-line)}

.ma-logorow{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center}
.ma-logorow--start{justify-content:flex-start}

/* logo node: tile + caption (used in graphs / flows) */
.ma-node{display:inline-flex;flex-direction:column;align-items:center;gap:9px;text-align:center}
.ma-node__cap{font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;color:var(--c-ink-2);max-width:104px;line-height:1.25}

/* ===== STAT CARDS ================================================== */
.ma-statgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.ma-statcard{padding:20px 20px 18px;border-radius:var(--r);background:var(--c-panel);border:1px solid var(--c-line);position:relative;overflow:hidden}
.ma-statcard::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--c-accent),transparent)}
.ma-statcard__n{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,2.8vw,36px);color:var(--c-accent);line-height:1;white-space:nowrap}
.ma-statcard__l{margin-top:7px;font-size:13.5px;color:var(--c-ink-3);line-height:1.35}

/* ===== FEATURE CARD (icon + title + text) ========================= */
.ma-feat{display:flex;gap:14px;padding:18px;border-radius:var(--r);background:var(--c-panel);border:1px solid var(--c-line);
  transition:border-color var(--dur-ui) ease,transform var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui) ease}
@media (hover:hover){.ma-feat:hover{transform:translateY(-3px);border-color:var(--c-line-green);box-shadow:0 0 36px -18px var(--green-glow)}}
.ma-feat__ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--c-accent-soft);color:var(--c-accent)}
.ma-feat__ic svg{width:22px;height:22px}
.ma-feat__t{font-family:var(--font-display);font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.01em;color:var(--c-ink)}
.ma-feat__d{font-size:13.5px;color:var(--c-ink-2);margin-top:4px;line-height:1.45}

/* ===== WINDOW FRAME (screenshot-style dashboards/IDE/canvas) ====== */
.ma-window{border-radius:14px;overflow:hidden;border:1px solid var(--c-line);background:var(--c-panel);box-shadow:var(--c-shadow);position:relative}
.ma-window__bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--c-panel-2);border-bottom:1px solid var(--c-line)}
.ma-window__dots{display:flex;gap:6px;flex:none}
.ma-window__dots i{width:10px;height:10px;border-radius:50%;display:block;background:var(--c-ink-3);opacity:.45}
.ma-window__dots i:first-child{background:#ff5f57;opacity:.9}.ma-window__dots i:nth-child(2){background:#febc2e;opacity:.9}.ma-window__dots i:nth-child(3){background:#28c840;opacity:.9}
.ma-window__title{font-family:var(--font-mono);font-size:12px;color:var(--c-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ma-window__body{padding:16px}
.ma-window img{width:100%;height:auto;display:block}

/* ===== STEP FLOW (numbered process) =============================== */
.ma-steps{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));position:relative}
.ma-step{padding:18px;border-radius:var(--r);background:var(--c-panel);border:1px solid var(--c-line);position:relative}
.ma-step__num{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-mono);font-weight:600;font-size:13px;
  background:var(--c-accent);color:var(--c-on-accent);margin-bottom:12px}
.ma-system .ma-step__num{color:#fff}
.ma-step__t{font-family:var(--font-display);font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.02em;color:var(--c-ink)}
.ma-step__d{font-size:13px;color:var(--c-ink-2);margin-top:5px;line-height:1.4}

/* ===== CHECK LIST / TRUST BULLETS ================================= */
.ma-checks{display:grid;gap:11px}
.ma-checks li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;color:var(--c-ink-2);line-height:1.4}
.ma-checks svg{flex:none;width:20px;height:20px;margin-top:1px;color:var(--c-accent)}
.ma-check-ic{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--c-accent);color:var(--c-on-accent)}
.ma-system .ma-check-ic{color:#fff}

/* ===== BADGE ROW (bottom trust strips) ============================ */
.ma-badges{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:center}
.ma-badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.04em;color:var(--c-ink-2)}
.ma-badge svg{flex:none;width:18px;height:18px;color:var(--c-accent)}

/* ===== FORM SYSTEM ================================================ */
.ma-form{display:grid;gap:15px}
.ma-form__grid{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.ma-field{display:flex;flex-direction:column;gap:7px}
.ma-field--full{grid-column:1/-1}
.ma-field label{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-3)}
.ma-input,.ma-select,.ma-textarea{padding:13px 15px;border-radius:12px;border:1px solid var(--c-line);
  background:var(--c-bg);color:var(--c-ink);font-size:15px;width:100%;transition:border-color var(--dur-ui) ease,box-shadow var(--dur-ui) ease}
.ma-system .ma-input,.ma-system .ma-select,.ma-system .ma-textarea{background:#fff}
.ma-input::placeholder,.ma-textarea::placeholder{color:var(--c-ink-3)}
.ma-input:focus,.ma-select:focus,.ma-textarea:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-soft)}
.ma-textarea{resize:vertical;min-height:96px}
.ma-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%237E8E87' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.ma-check{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--c-ink-2);cursor:pointer;
  padding:10px 13px;border-radius:11px;border:1px solid var(--c-line);background:var(--c-bg);transition:border-color var(--dur-micro) ease,background var(--dur-micro) ease}
.ma-system .ma-check{background:#fff}
.ma-check input{accent-color:var(--green);width:16px;height:16px;flex:none}
.ma-check:hover{border-color:var(--c-line-green)}
.ma-check:has(input:checked){border-color:var(--c-accent);background:var(--c-accent-soft)}

/* ===== CONNECTOR / FLOW ARROW ===================================== */
.ma-arrow{flex:none;color:var(--c-accent);opacity:.85}
.ma-flow-dash{height:2px;flex:1;min-width:18px;background-image:linear-gradient(90deg,var(--c-accent) 60%,transparent 0);background-size:10px 2px;opacity:.6}

/* =====================================================================
   WEBSITE-DEV SHARED ATOMS (wd-) — used across multiple sections
   ===================================================================== */
/* circular score ring (Lighthouse / PageSpeed style gauge). Set --v:0..100 */
.wd-ring{--v:90;--sz:64px;--rc:var(--c-accent);width:var(--sz);height:var(--sz);border-radius:50%;flex:none;position:relative;display:grid;place-items:center;
  background:conic-gradient(var(--rc) calc(var(--v)*1%),var(--c-line) 0);}
.wd-ring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--c-panel)}
.wd-ring__v{position:relative;font-family:var(--font-display);font-weight:700;font-size:calc(var(--sz)*.34);color:var(--c-ink);line-height:1}
.wd-ring__l{font-family:var(--font-mono);font-size:11px;color:var(--c-ink-3);margin-top:6px;text-align:center}

/* floating glass card (hero/portfolio/contact floating UI) */
.wd-float{position:absolute;z-index:5;border-radius:14px;padding:13px 15px;
  background:linear-gradient(150deg,rgba(14,26,32,.92),rgba(8,14,18,.86));
  border:1px solid var(--void-line-green);backdrop-filter:blur(14px);
  box-shadow:0 22px 50px -22px rgba(0,0,0,.85),0 0 26px -14px var(--green-glow);
  animation:wdFloat 7s var(--ease-out) infinite}
.ma-system .wd-float{background:linear-gradient(150deg,rgba(255,255,255,.96),rgba(244,247,245,.92));border-color:var(--paper-line-green);box-shadow:0 22px 50px -24px rgba(5,5,5,.25)}
.wd-float--a{animation-delay:-1.5s}.wd-float--b{animation-delay:-3s}.wd-float--c{animation-delay:-4.5s}
@keyframes wdFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.wd-float__l{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--c-ink-3)}
.wd-float__v{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--c-ink);line-height:1.1}

/* small metric tag (e.g. "+125%") */
.wd-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:12px;font-weight:600;
  padding:4px 9px;border-radius:var(--r-pill);background:var(--c-accent-soft);color:var(--c-accent)}

/* browser url pill */
.wd-url{flex:1;min-width:0;display:flex;align-items:center;gap:7px;justify-content:center;
  font-family:var(--font-mono);font-size:11.5px;color:var(--c-ink-3);
  background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--r-pill);padding:5px 14px;max-width:340px;margin:0 auto;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* LIVE video browser frame — lazy-mounted by JS (data-video, optional data-poster) */
.wd-live{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0a1015 center top/cover no-repeat}
.wd-live::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(39,245,140,.05),transparent 45%),radial-gradient(120% 90% at 50% 0,transparent 60%,rgba(0,0,0,.28));
  opacity:1;transition:opacity .6s ease}
.wd-live:not(.has-poster)::after{background:linear-gradient(110deg,rgba(39,245,140,.06),transparent 40%),repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 10px,transparent 10px 22px)}
.wd-live video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:0;transition:opacity .7s ease}
.wd-live.is-playing video{opacity:1}
.wd-live__skel{position:absolute;inset:0;display:grid;place-items:center;color:var(--void-ink-3);font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.5}
.wd-live.has-poster .wd-live__skel,.wd-live.is-playing .wd-live__skel{opacity:0}

/* glow connector line (svg stroke) */
.wd-conn{fill:none;stroke:var(--c-accent);stroke-width:1.5;opacity:.55;filter:drop-shadow(0 0 5px var(--green-glow))}
.wd-conn--dash{stroke-dasharray:7 11;stroke-dashoffset:200;animation:maFlow 3.6s linear infinite}

/* ----- FOOTER ------------------------------------------------------- */
.ma-foot{padding:clamp(48px,6vw,80px) 0 clamp(32px,4vw,48px);border-top:1px solid var(--void-line);background:var(--void);position:relative;overflow:hidden}
.ma-foot__inner{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2}
.ma-foot__top{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:flex-start;padding-bottom:34px;border-bottom:1px solid var(--void-line)}
.ma-foot__logo{height:50px;width:auto;margin-bottom:14px}
.ma-foot__tag{font-family:var(--font-mono);font-size:13px;color:var(--void-ink-3);max-width:330px;line-height:1.6}
.ma-foot__cols{display:flex;flex-wrap:wrap;gap:40px}
.ma-foot__col h4{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:14px}
.ma-foot__col a{display:block;font-size:14px;color:var(--void-ink-2);padding:5px 0;transition:color var(--dur-micro) ease}
.ma-foot__col a:hover{color:#fff}
.ma-foot__bottom{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;padding-top:24px}
.ma-foot__bottom p{font-family:var(--font-mono);font-size:12px;color:var(--void-ink-3)}

/* =====================================================================
   RESPONSIVE HEADER / NAV
   ===================================================================== */
@media (max-width:1199px){
  .ma-nav{position:fixed;inset:78px 0 auto;padding:0 var(--gutter);transform:translateY(-130%);transition:transform var(--dur-ui) var(--ease-out);pointer-events:none;display:block}
  .ma-nav.is-open{transform:none;pointer-events:auto}
  .ma-nav__pill{flex-direction:column;gap:0;border-radius:var(--r-lg);background:rgba(4,7,10,.97);backdrop-filter:blur(18px);padding:10px}
  .ma-nav__row{flex-direction:column;gap:0;width:100%;align-items:stretch}
  .ma-nav__pill a{padding:14px 18px;font-size:16px}
  .ma-header__cta{display:none}
  .ma-burger{display:flex}
}
@media (max-width:680px){
  .ma-form__grid{grid-template-columns:1fr}
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .ma-reveal{opacity:1!important;transform:none!important;filter:none!important}
  .ma-current__line,.wd-conn--dash{animation:none;stroke-dashoffset:0}
  .ma-marquee__row{animation:none}
  .ma-orb,.wd-float{animation:none}
}
@media (hover:none){.ma-card--lift:hover,.ma-feat:hover,.ma-logo-tile--hov:hover{transform:none}}

/* perf: skip painting offscreen sections (hero exempt) */
.ma-sec:not(.ma-hero){content-visibility:auto;contain-intrinsic-size:auto 1000px}
.js .ma-sec:not(.is-near),
.js .ma-sec:not(.is-near) *,
.js .ma-sec:not(.is-near) *::before,
.js .ma-sec:not(.is-near) *::after{animation-play-state:paused!important}
.js .ma-sec:not(.is-near) .ma-reveal{animation-play-state:running!important}



/* Section-scoped CSS is injected here (each section owns an sN- namespace). */

/* ============================ SECTION 1 · HERO — CINEMATIC VIDEO (wd-video-hero) ============================ */
/* Full-screen video background + premium dark overlay; sticky hero copy that fades/blurs/rises out on scroll.
   No 3D, no slabs, no blueprint, no engine UI — a luxury commercial opening for the Website-Development service. */
.wd-video-hero{position:relative;background:#04070A}
.ma-page > .wd-video-hero.ma-sec{padding:0;min-height:180vh;overflow:clip}      /* sticky scroll track */

.wd-video-hero__sticky{position:sticky;top:0;height:100vh;min-height:680px;overflow:hidden;display:flex;align-items:center}

.wd-video-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;background:#04070A;
  transform:scale(var(--hero-video-scale,1.03));transition:transform .15s linear;will-change:transform}

.wd-video-hero__overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,rgba(4,7,10,.72) 0%,rgba(4,7,10,.42) 34%,rgba(4,7,10,.06) 66%,rgba(4,7,10,.24) 100%),
  linear-gradient(180deg,rgba(4,7,10,.1) 0%,rgba(4,7,10,.02) 44%,rgba(4,7,10,var(--hero-bottom-dark,.5)) 100%),
  radial-gradient(circle at 26% 50%,rgba(39,245,140,.13),transparent 46%)}

.wd-video-hero__content{position:relative;z-index:2;width:100%;max-width:var(--max-wide);margin:0 auto;
  padding:clamp(110px,14vh,160px) var(--gutter) clamp(60px,8vh,100px);
  opacity:var(--hero-text-opacity,1);transform:translateY(var(--hero-text-y,0px));filter:blur(var(--hero-text-blur,0px));
  will-change:opacity,transform,filter}

.wd-video-hero__eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:clamp(16px,2.4vh,24px);
  font-family:var(--font-mono);font-size:clamp(11px,.85vw,13px);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
.wd-video-hero__eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.wd-video-hero__title{max-width:880px;margin:0;font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  letter-spacing:-.02em;line-height:.9;font-size:clamp(44px,7.6vw,116px);color:#fff;text-shadow:0 2px 44px rgba(0,0,0,.45)}
.wd-video-hero__title span{display:block}
.wd-video-hero__title em{color:var(--green);font-style:normal}
.wd-video-hero__lead{max-width:600px;margin:clamp(18px,2.6vh,26px) 0 0;font-size:clamp(16px,1.55vw,21px);line-height:1.55;color:rgba(245,251,247,.84)}
.wd-video-hero__actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:clamp(26px,3.6vh,38px)}

/* ---- responsive ---- */
@media (max-width:768px){
  .ma-page > .wd-video-hero.ma-sec{min-height:130vh}
  .wd-video-hero__sticky{min-height:600px}
  .wd-video-hero__content{padding-top:clamp(104px,26vw,130px)}
  .wd-video-hero__title{font-size:clamp(40px,12vw,68px);line-height:.94}
  .wd-video-hero__lead{font-size:16px}
}

/* ---- reduced motion: static video bg, readable text, no scroll track ---- */
@media (prefers-reduced-motion:reduce){
  .ma-page > .wd-video-hero.ma-sec{min-height:100vh}
  .wd-video-hero__sticky{position:relative}
  .wd-video-hero__content{opacity:1!important;transform:none!important;filter:none!important}
  .wd-video-hero__video{transform:scale(1.03)!important}
}

/* ===== SECTION 2 (s2) ===== */
/* === SECTION 2 · FROM IDEA TO LIVE WEBSITE (s2-) === */
.s2{position:relative;overflow:hidden}
.s2__head{position:relative;z-index:6}
.s2__title .ma-line{display:block}

/* floating logo tiles scattered around the head (desktop only) */
.s2__floats{position:absolute;inset:0;z-index:1;pointer-events:none}
.s2__floats .ma-logo-tile{position:absolute;animation:s2Float 8s var(--ease-out) infinite}
.s2-fl{top:8%;left:8%}
.s2-fw{top:18%;left:17%;animation-delay:-2s}
.s2-fv{top:26%;left:6%;animation-delay:-4s}
.s2-fg{top:6%;right:13%;animation-delay:-1s}
.s2-fh{top:14%;right:5%;animation-delay:-3s}
.s2-fc{top:22%;right:18%;animation-delay:-5s}
.s2-fcf{top:24%;right:9%;animation-delay:-6s}
@keyframes s2Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (max-width:1180px){.s2__floats{display:none}}

/* ----- PROCESS RAIL ------------------------------------------------- */
.s2__rail{position:relative;margin-top:clamp(30px,4vw,52px)}

/* glowing process line connecting all 8 steps along the top */
.s2__line{position:absolute;top:18px;left:3%;right:3%;height:2px;z-index:1;
  background:linear-gradient(90deg,transparent,var(--green-deep-2) 6%,var(--green) 50%,var(--green-deep-2) 94%,transparent);
  box-shadow:0 0 12px var(--green-glow),0 0 26px -6px var(--green-glow);border-radius:2px}
.s2__line::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(90deg,rgba(255,255,255,.55) 40%,transparent 0);background-size:14px 2px;opacity:.5;
  animation:maFlow 3.6s linear infinite}
@media (max-width:1179px){.s2__line{display:none}}

/* 8-up grid */
.s2__grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(10px,1vw,16px);position:relative;z-index:2}
@media (max-width:1179px){.s2__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
@media (max-width:760px){.s2__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media (max-width:430px){.s2__grid{grid-template-columns:1fr}}

/* node badge sitting on the line */
.s2__node{position:relative;display:flex;flex-direction:column;align-items:center;margin-bottom:16px}
.s2__dot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(39,245,140,.18),0 0 12px var(--green);margin-bottom:14px}
.s2__num{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-mono);font-weight:600;font-size:13px;color:var(--c-accent);
  background:var(--c-bg);border:1.5px solid var(--c-line-green);
  box-shadow:0 4px 14px -6px var(--green-glow),inset 0 0 0 4px var(--c-bg)}
@media (max-width:1179px){.s2__dot{display:none}.s2__node{margin-bottom:10px}}

/* card */
.s2__card{display:flex;flex-direction:column;padding:clamp(12px,1vw,16px);min-width:0}
.s2__card .s2__t{font-family:var(--font-display);font-weight:600;font-size:clamp(14px,1.05vw,16px);text-transform:uppercase;letter-spacing:.01em;color:var(--c-ink);text-align:center}
.s2__card .s2__d{font-size:12px;color:var(--c-ink-2);margin-top:5px;line-height:1.4;text-align:center;min-height:34px}

/* mini-visual frame */
.s2__viz{margin-top:12px;border-radius:11px;border:1px solid var(--c-line);background:var(--c-panel-2);
  overflow:hidden;position:relative;height:128px;padding:9px}
.s2__viz--dark{background:#0c1117;border-color:rgba(255,255,255,.08)}

/* tools row at bottom */
.s2__tools{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;margin-top:11px;min-height:34px;padding-top:10px;border-top:1px solid var(--c-line)}
.s2__tools .ma-logo-tile{width:30px;height:30px;border-radius:8px}
.s2__tools .ma-logo-tile img{width:64%;height:64%}
.s2__tool-lbl{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;color:var(--c-ink-3)}

/* ---- mini-visual building blocks ---- */
/* 01 discovery */
.s2-disc{position:absolute;inset:9px;display:flex;flex-direction:column;gap:6px}
.s2-disc__sketch{flex:1;border-radius:8px;background:#fff;border:1px solid var(--c-line);position:relative;overflow:hidden}
.s2-disc__sketch i{position:absolute;background:#dfe7e2;border-radius:2px;display:block}
.s2-disc__mag{position:absolute;right:8px;bottom:8px;width:30px;height:30px;color:var(--c-accent)}
.s2-disc__avs{display:flex}
.s2-disc__avs span{width:20px;height:20px;border-radius:50%;border:2px solid var(--c-panel-2);margin-left:-6px;background:linear-gradient(135deg,var(--green),var(--green-deep))}
.s2-disc__avs span:first-child{margin-left:0}

/* 02 wireframe blocks */
.s2-wire{position:absolute;inset:9px;background:#fff;border-radius:8px;border:1px solid var(--c-line);padding:9px;display:flex;flex-direction:column;gap:5px}
.s2-wire i{display:block;background:#e2e8e4;border-radius:3px}
.s2-wire__bar{height:8px;width:40%}
.s2-wire__row{display:flex;gap:5px;flex:1}
.s2-wire__row i{flex:1;height:100%}
.s2-wire__lines{display:flex;flex-direction:column;gap:4px}
.s2-wire__lines i{height:5px}
.s2-wire__lines i:nth-child(2){width:80%}.s2-wire__lines i:nth-child(3){width:60%}

/* 03 UI swatches + Aa */
.s2-ui{position:absolute;inset:9px;display:flex;flex-direction:column;gap:7px}
.s2-ui__sw{display:flex;gap:5px}
.s2-ui__sw i{flex:1;height:22px;border-radius:6px}
.s2-ui__sw i:nth-child(1){background:#27F58C}.s2-ui__sw i:nth-child(2){background:#0866FF}
.s2-ui__sw i:nth-child(3){background:#7F54B3}.s2-ui__sw i:nth-child(4){background:#FF6A00}
.s2-ui__aa{flex:1;background:#fff;border:1px solid var(--c-line);border-radius:8px;display:flex;align-items:center;justify-content:space-between;padding:0 10px}
.s2-ui__aa b{font-family:var(--font-display);font-weight:700;font-size:24px;color:var(--c-ink)}
.s2-ui__btn{font-family:var(--font-mono);font-size:9px;font-weight:600;color:#fff;background:var(--green-deep);padding:5px 9px;border-radius:6px;text-transform:uppercase;letter-spacing:.04em}

/* 04 code editor */
.s2-code{position:absolute;inset:9px;background:#0c1117;border-radius:8px;border:1px solid rgba(255,255,255,.08);padding:9px;font-family:var(--font-mono);font-size:8.5px;line-height:1.55;overflow:hidden}
.s2-code .ln{display:block;white-space:nowrap;color:#7E8E87}
.s2-code .k{color:#27F58C}.s2-code .s{color:#E9C46A}.s2-code .f{color:#6db3ff}.s2-code .c{color:#5a6a63}

/* 05 SEO keywords + map pin */
.s2-seo{position:absolute;inset:9px;display:flex;flex-direction:column;gap:5px}
.s2-seo__kw{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--c-line);border-radius:6px;padding:5px 8px;font-size:9.5px;color:var(--c-ink-2)}
.s2-seo__kw b{font-family:var(--font-mono);color:var(--c-accent);font-size:10px}
.s2-seo__map{flex:1;border-radius:6px;background:linear-gradient(135deg,#e8f0ea,#dde7e0);position:relative;border:1px solid var(--c-line)}
.s2-seo__pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);width:18px;height:18px;color:var(--green-deep)}

/* 06 testing devices + rings */
.s2-test{position:absolute;inset:9px;display:flex;flex-direction:column;gap:7px}
.s2-test__dev{display:flex;align-items:flex-end;justify-content:center;gap:5px;flex:1}
.s2-test__dev i{display:block;background:#fff;border:1px solid var(--c-line);border-radius:4px}
.s2-test__dev i:nth-child(1){width:34px;height:24px}
.s2-test__dev i:nth-child(2){width:14px;height:30px;border-radius:5px}
.s2-test__dev i:nth-child(3){width:20px;height:27px;border-radius:4px}
.s2-test__rings{display:flex;justify-content:space-between;gap:4px}
/* keep 4 gauges inside the narrow 8-col card (was clipping the 4th on desktop) */
.s2-test .wd-ring{--sz:clamp(19px,1.5vw,26px)}
.s2-test .wd-ring__v{font-size:8px}

/* 07 launch checklist */
.s2-launch{position:absolute;inset:9px;display:flex;flex-direction:column;gap:5px}
.s2-launch__rk{align-self:center;width:26px;height:26px;color:var(--green-deep)}
.s2-launch__ck{display:flex;align-items:center;gap:6px;font-size:9px;color:var(--c-ink-2)}
.s2-launch__ck svg{flex:none;width:12px;height:12px;color:var(--c-accent)}

/* 08 growth analytics */
.s2-grow{position:absolute;inset:9px;display:flex;flex-direction:column;gap:6px}
.s2-grow__row{display:flex;align-items:center;justify-content:space-between;gap:5px;min-width:0}
.s2-grow__row > div{min-width:0}
.s2-grow__l{font-family:var(--font-mono);font-size:8px;text-transform:uppercase;letter-spacing:.04em;color:var(--c-ink-3)}
.s2-grow__v{font-family:var(--font-display);font-weight:700;font-size:clamp(11px,1vw,14px);color:var(--c-ink);line-height:1;white-space:nowrap}
/* compact delta badge so value + badge never overflow the narrow card */
.s2-grow .wd-tag{font-size:8.5px;padding:2px 6px;flex:none}
.s2-grow__chart{flex:1;min-height:0}
.s2-grow__chart svg{width:100%;height:100%}

/* ----- BOTTOM PROGRESS BAR ----------------------------------------- */
.s2__progress{display:flex;align-items:center;gap:clamp(12px,2vw,24px);margin-top:clamp(28px,4vw,46px);
  flex-wrap:wrap;justify-content:center}
.s2__plabel{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-3);white-space:nowrap}
.s2__plabel .ma-dot{flex:none}
.s2__ptrack{flex:1;min-width:200px;height:10px;border-radius:var(--r-pill);background:var(--c-panel-2);border:1px solid var(--c-line);position:relative;overflow:visible}
.s2__pfill{position:absolute;inset:0;width:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--green-deep),var(--green) 70%,var(--green-bright));
  box-shadow:0 0 14px var(--green-glow);transform-origin:left;
  transform:scaleX(0);transition:transform 1.4s var(--ease-out)}
.s2__rail.is-revealed .s2__pfill,.is-revealed .s2__pfill{transform:scaleX(1)}
.s2__pmark{position:absolute;right:0;top:50%;transform:translate(50%,-50%);
  font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--c-accent);
  background:var(--c-bg);border:1px solid var(--c-line-green);border-radius:var(--r-pill);padding:3px 9px;box-shadow:0 4px 12px -6px var(--green-glow)}
.s2__plive{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--c-accent);white-space:nowrap}
.s2__plive svg{flex:none;width:16px;height:16px}

@media (max-width:760px){
  .s2__ptrack{order:3;flex-basis:100%}
  .s2__card .s2__d{min-height:0}
}

/* ===== SECTION 3 (s3) ===== */
/* === SECTION 3 · INSIDE OUR DESIGN PROCESS — "THE CINEMATIC WALK" (s3-) ===
   The six step clips play full-bleed as the section background, one after another, while you scroll. A pinned
   stage cross-fades each clip and rises its STEP / title / tagline into view; a chapter index + progress bar
   track where you are. Self-contained scroll engine — only the active clip plays (one at a time), the rest are
   paused. Graceful fallback: without JS or under reduced-motion the steps become a plain vertical stack of
   full-height panels — every video + caption readable, no pin, no scroll-drive. GPU-only transforms.
   Keeps the #wd-design id + s3-title anchor. */
.s3{position:relative;background:var(--void);--n:6;content-visibility:visible}
.s3__track{position:relative}
.s3__pin{position:relative}
.s3__stage{position:relative}

/* a step = a full-bleed cinematic panel */
.s3__scene{position:relative;min-height:100svh;min-height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.s3__media{position:absolute;inset:0;z-index:0;background:radial-gradient(120% 120% at 50% 30%,#0c1218,#04070a);overflow:hidden}
.s3__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;will-change:transform}
.s3__shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(4,7,10,.84) 0%,rgba(4,7,10,.52) 32%,rgba(4,7,10,.08) 62%,transparent 100%),
    linear-gradient(0deg,rgba(4,7,10,.9) 0%,rgba(4,7,10,.34) 26%,transparent 52%)}

/* per-step caption (lower-left) */
.s3__cap{position:relative;z-index:4;width:100%;padding:0 var(--gutter) clamp(56px,9vh,104px);max-width:900px}
.s3__step{display:inline-flex;align-items:center;gap:11px;font-family:var(--font-mono);font-weight:600;
  font-size:clamp(12px,1.1vw,13px);letter-spacing:.24em;color:var(--green);text-transform:uppercase}
.s3__step::before{content:"";width:clamp(20px,2.4vw,30px);height:2px;border-radius:2px;background:var(--green);box-shadow:0 0 10px var(--green-glow)}
.s3__title{margin-top:clamp(14px,2vw,20px);font-family:var(--font-display);font-weight:600;letter-spacing:-.022em;
  font-size:clamp(34px,5.6vw,78px);line-height:1;color:#fff}
.s3__tag{margin-top:clamp(14px,1.6vw,20px);font-size:clamp(16px,1.7vw,22px);line-height:1.5;color:var(--void-ink-2);max-width:560px}
.s3__cta{margin-top:clamp(22px,2.6vw,32px)}

/* persistent HUD (overlaid on the pinned stage) */
.s3__hud{position:absolute;z-index:6;top:clamp(22px,4.6vh,46px);left:0;right:0;padding:0 var(--gutter);
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;pointer-events:none}
.s3__id{max-width:64%}
.s3__eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-weight:600;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--green)}
.s3__h2{margin-top:9px;font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(15px,1.6vw,21px);line-height:1.05;color:var(--void-ink)}
.s3__count{font-family:var(--font-mono);font-size:13px;letter-spacing:.12em;color:var(--void-ink-3);flex:none}
.s3__count b{color:#fff;font-weight:600}
.s3__cur{color:var(--green)}

/* chapter index (right · desktop) */
.s3__idx{position:absolute;z-index:6;right:var(--gutter);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:13px;align-items:flex-end;list-style:none;margin:0;padding:0;pointer-events:none}
.s3__idx li{display:flex;align-items:center;justify-content:flex-end;gap:12px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;color:var(--void-ink-3);opacity:.55;
  transition:color .45s var(--ease-out),opacity .45s var(--ease-out)}
.s3__idx li span{white-space:nowrap}
.s3__idx li i{width:24px;height:2px;border-radius:2px;background:rgba(255,255,255,.22);flex:none;
  transition:width .45s var(--ease-out),background .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.s3__idx li.is-on{color:#fff;opacity:1}
.s3__idx li.is-on i{width:40px;background:var(--green);box-shadow:0 0 12px var(--green-glow)}

/* bottom progress bar */
.s3__bar{position:absolute;z-index:6;left:0;bottom:0;width:100%;height:3px;background:rgba(255,255,255,.08)}
.s3__bar i{display:block;height:100%;width:0;transform-origin:left;
  background:linear-gradient(90deg,var(--green-deep),var(--green));box-shadow:0 0 16px var(--green-glow)}

/* the scroll cue (first scene only, fades after you move) */
.s3__cue{position:absolute;z-index:6;left:50%;bottom:clamp(18px,3vh,30px);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--void-ink-3);pointer-events:none;
  transition:opacity .5s ease}
.s3__cue svg{width:16px;height:16px;animation:s3Cue 1.9s var(--ease-out) infinite}
@keyframes s3Cue{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}}

/* ---------- PINNED / ANIMATED mode (added by JS when motion is OK) ---------- */
.s3--anim .s3__track{height:calc(var(--n) * 100vh)}
.s3--anim .s3__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.s3--anim .s3__stage{position:absolute;inset:0}
.s3--anim .s3__scene{position:absolute;inset:0;min-height:0;opacity:0;visibility:hidden;
  transition:opacity .9s var(--ease-out),visibility 0s linear .9s}
.s3--anim .s3__scene.is-active{opacity:1;visibility:visible;transition:opacity .9s var(--ease-out),visibility 0s}
/* caption rises within the active scene */
.s3--anim .s3__cap > *{opacity:0;transform:translateY(28px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.s3--anim .s3__scene.is-active .s3__cap > *{opacity:1;transform:none}
.s3--anim .s3__scene.is-active .s3__step{transition-delay:.10s}
.s3--anim .s3__scene.is-active .s3__title{transition-delay:.18s}
.s3--anim .s3__scene.is-active .s3__tag{transition-delay:.27s}
.s3--anim .s3__scene.is-active .s3__cta{transition-delay:.36s}
/* slow cinematic push-in — 4K sources (3840x2160) stay crisp even zoomed, so a fuller drift is safe */
.s3--anim .s3__scene.is-active .s3__media video{animation:s3KB 16s var(--ease-out) both}
@keyframes s3KB{from{transform:scale(1.01)}to{transform:scale(1.09)}}
/* HUD elements only carry meaning in pinned mode */
.s3__count,.s3__idx,.s3__bar{display:none}
.s3--anim .s3__count{display:block}
.s3--anim .s3__idx{display:flex}
.s3--anim .s3__bar{display:block}
.s3--anim.s3-cue-off .s3__cue{opacity:0}

/* fallback stacked mode: caption already visible; videos play in view via the engine */
.s3:not(.s3--anim) .s3__hud{position:absolute;top:clamp(22px,4.6vh,46px)}
.s3:not(.s3--anim) .s3__cue{display:none}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .s3__idx{display:none!important}
  .s3__id{max-width:78%}
}
@media (max-width:600px){
  .s3__cap{padding-bottom:clamp(84px,16vh,120px)}
  .s3__hud{top:18px}
  .s3__h2{font-size:14px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .s3--anim .s3__scene{position:relative;inset:auto;opacity:1!important;visibility:visible!important;min-height:100vh}
  .s3--anim .s3__track{height:auto!important}
  .s3--anim .s3__pin{position:relative!important;height:auto!important}
  .s3__cap > *{opacity:1!important;transform:none!important}
  .s3__media video{animation:none!important}
  .s3__cue{display:none!important}
  .s3__idx,.s3__bar,.s3__count{display:none!important}
}
/* ===== SECTION 4 (s4) ===== */
/* === SECTION 4 · RESPONSIVE EXPERIENCE === */
.s4{position:relative;overflow:hidden}

/* ===== ROW 1 — heading (left) + desktop monitor (right) ===== */
.s4__top{display:grid;grid-template-columns:minmax(300px,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4.4vw,72px);align-items:center;position:relative;z-index:3}
.s4__head{max-width:560px}
.s4__title{margin-bottom:clamp(16px,1.8vw,24px)}
.s4__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(18px,2.2vw,26px)}
.s4__chips .ma-chip svg{width:14px;height:14px;color:var(--c-accent)}

/* ---- shared device primitives (CSS-only frames) ---- */
.s4-dev{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:11px;width:max-content;max-width:100%}
.s4-dev__lbl{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--c-ink-2);text-align:center;line-height:1.3}
.s4-dev__px{display:inline-block;margin-top:5px;font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.03em;
  color:var(--c-accent);background:var(--c-accent-soft);border:1px solid var(--c-line-green);border-radius:var(--r-pill);padding:2px 9px}
.s4-frame{position:relative;width:100%;overflow:hidden;background:#0a1015}
.s4-screen{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}

/* DESKTOP monitor — fills the right column of row 1 */
.s4-mon{width:100%;max-width:600px;margin-inline:auto}
.s4-mon__panel{width:100%;border-radius:16px;overflow:hidden;background:#0b0d0c;
  border:9px solid #1c2220;box-shadow:0 44px 96px -38px rgba(5,5,5,.45),0 0 0 1px rgba(5,5,5,.06)}
.s4-mon__panel .s4-frame{aspect-ratio:1520/726}
.s4-mon__stand{width:13%;height:clamp(28px,3.2vw,50px);margin:0 auto;background:linear-gradient(90deg,#c2cbc7,#e7ecea 45%,#c2cbc7);
  box-shadow:inset 0 -6px 10px rgba(0,0,0,.08)}
.s4-mon__base{width:30%;height:12px;margin:0 auto;border-radius:0 0 10px 10px;background:linear-gradient(180deg,#d3dad7,#aeb7b3)}

/* ===== ROW 2 — laptop · iPad · iPhone, one height-aligned line ===== */
.s4__lineup{--s4lh:clamp(150px,17vw,226px);
  position:relative;margin-top:clamp(40px,5vw,74px);
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:clamp(22px,2.8vw,54px)}
.s4__halo{position:absolute;z-index:0;width:92%;height:86%;bottom:0;left:50%;transform:translateX(-50%);
  background:radial-gradient(ellipse 56% 58% at 50% 62%,rgba(10,138,79,.13),transparent 64%);pointer-events:none}

/* LAPTOP — width-driven so the deck lip stays clean */
.s4-lap{width:calc((var(--s4lh) - 10px) * 2.00275)}
.s4-lap__screen{width:100%;aspect-ratio:1456/727;overflow:hidden;background:#0b0d0c;
  border:7px solid #20272a;border-bottom:0;border-radius:12px 12px 0 0;box-shadow:0 30px 60px -34px rgba(5,5,5,.4)}
.s4-lap__screen .s4-frame{aspect-ratio:1456/727}
.s4-lap__base{width:116%;margin:0 -8%;height:10px;border-radius:0 0 12px 12px;
  background:linear-gradient(180deg,#cdd4d1,#aab2ae);box-shadow:inset 0 3px 4px rgba(255,255,255,.4)}
.s4-lap__notch{width:20%;height:5px;margin:0 auto;border-radius:0 0 6px 6px;background:#9aa39f}

/* iPAD — landscape tablet, height-driven */
.s4-tab__body{height:var(--s4lh);aspect-ratio:1968/1736;width:auto;overflow:hidden;background:#0b0d0c;
  border:10px solid #232a2c;border-radius:20px;box-shadow:0 30px 58px -32px rgba(5,5,5,.4)}
.s4-tab__body .s4-frame{height:100%}

/* iPHONE — portrait, height-driven */
.s4-phone__body{height:var(--s4lh);aspect-ratio:1224/1802;width:auto;position:relative;overflow:hidden;background:#0b0d0c;
  border:6px solid #1b2123;border-radius:22px;box-shadow:0 26px 52px -28px rgba(5,5,5,.42)}
.s4-phone__body::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);z-index:4;
  width:32%;height:6px;border-radius:0 0 8px 8px;background:#1b2123}
.s4-phone__body .s4-frame{height:100%}

/* ===== ROW 3 — one elegant assurance strip ===== */
.s4__strip{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(10px,1.3vw,16px);max-width:1000px;margin:clamp(36px,4.8vw,66px) auto 0;padding:0;position:relative;z-index:3}
.s4-pill{display:inline-flex;align-items:center;gap:11px;
  font-family:var(--font-display);font-weight:600;font-size:clamp(13px,1.05vw,14.5px);letter-spacing:.005em;color:var(--c-ink);
  background:var(--c-panel);border:1px solid var(--c-line);border-radius:var(--r-pill);
  padding:11px 22px 11px 13px;box-shadow:0 12px 32px -24px rgba(5,5,5,.28);
  transition:transform var(--dur-ui) var(--ease-out),border-color var(--dur-ui) ease,box-shadow var(--dur-ui) ease}
.s4-pill__chk{width:23px;height:23px;flex:none;padding:4px;border-radius:50%;color:var(--c-accent);
  background:var(--c-accent-soft);box-shadow:inset 0 0 0 1px var(--c-line-green)}
@media (hover:hover){.s4-pill:hover{transform:translateY(-3px);border-color:var(--c-line-green);box-shadow:0 18px 38px -22px rgba(10,138,79,.34)}}

/* ===== responsive ===== */
@media (max-width:980px){
  .s4__lineup{--s4lh:clamp(140px,20vw,226px)}
}
@media (max-width:860px){
  .s4__top{grid-template-columns:1fr;gap:clamp(26px,5vw,42px)}
  .s4__head{max-width:none}
  .s4-mon{max-width:560px}
}
@media (max-width:560px){
  .s4__lineup{--s4lh:clamp(96px,24vw,150px);gap:clamp(12px,4vw,26px)}
  .s4__strip{max-width:380px}
  .s4-pill{width:100%;justify-content:flex-start;font-size:14px;padding:13px 18px}
}

/* ===== SECTION 5 (s5) ===== */
/* === SECTION 5 · WHAT MAKES OUR WEBSITES DIFFERENT === */
.s5{position:relative;overflow:clip}
.s5__halo{position:absolute;z-index:0;inset:auto 0 -8% 0;height:46%;pointer-events:none;
  background:radial-gradient(ellipse 60% 100% at 50% 100%,rgba(39,245,140,.16),transparent 70%)}

/* ---- centered head ---- */
.s5__brand{display:inline-flex;align-items:center;gap:10px;justify-content:center;margin:0 auto 22px;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-ink-2)}
.s5__brand svg{width:20px;height:20px;color:var(--green);flex:none;filter:drop-shadow(0 0 8px var(--green-glow))}
.s5__title{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-.025em;line-height:.92;
  font-size:clamp(40px,8vw,104px);color:#fff;text-align:center}
.s5__title .ma-line{display:block}
.s5__title .s5__diff{display:block;font-size:clamp(48px,10vw,132px);line-height:.9;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-image:linear-gradient(120deg,#bff6d8,var(--green) 42%,#0a8a4f 74%,var(--green-bright));
  background-size:220% 100%;animation:maGradWord 7s ease-in-out infinite;
  filter:drop-shadow(0 0 30px rgba(39,245,140,.45))}
.s5__sub{max-width:640px;margin:22px auto 0;text-align:center;font-size:clamp(15px,1.7vw,19px);line-height:1.55;color:var(--c-ink-2)}

/* floating decorative icon tiles behind the head */
.s5__deco{position:absolute;inset:0;z-index:1;pointer-events:none}
.s5__deco i{position:absolute;width:clamp(46px,5vw,62px);height:clamp(46px,5vw,62px);border-radius:16px;
  display:grid;place-items:center;background:linear-gradient(150deg,rgba(14,26,32,.92),rgba(8,14,18,.86));
  border:1px solid var(--void-line-green);box-shadow:0 18px 40px -20px rgba(0,0,0,.8),0 0 22px -12px var(--green-glow);
  backdrop-filter:blur(10px);animation:wdFloat 8s var(--ease-out) infinite}
.s5__deco i svg{width:46%;height:46%;color:var(--green)}
.s5__deco i.s5__deco--1{top:14%;left:8%;animation-delay:-1s}
.s5__deco i.s5__deco--2{top:30%;left:15%;animation-delay:-3.5s}
.s5__deco i.s5__deco--3{top:12%;right:9%;animation-delay:-2s}
.s5__deco i.s5__deco--4{top:34%;right:5%;animation-delay:-5s}

/* ---- feature grid ---- */
.s5__grid{margin-top:clamp(44px,6vw,76px);display:grid;gap:clamp(14px,1.6vw,20px);
  grid-template-columns:repeat(4,minmax(0,1fr))}
.s5-card{display:flex;flex-direction:column;padding:clamp(16px,1.4vw,20px);min-height:200px;
  border-radius:var(--r);background:var(--c-panel);border:1px solid var(--c-line);position:relative;overflow:hidden;
  transition:border-color var(--dur-ui) ease,transform var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui) ease}
.s5-card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity var(--dur-ui) ease;
  background:radial-gradient(120% 90% at 100% 0,rgba(39,245,140,.10),transparent 55%)}
@media (hover:hover){.s5-card:hover{transform:translateY(-4px);border-color:var(--c-line-green);box-shadow:0 0 44px -18px var(--green-glow)}
  .s5-card:hover::before{opacity:1}}
.s5-card__num{font-family:var(--font-mono);font-weight:600;font-size:13px;letter-spacing:.06em;color:var(--green);opacity:.85}
.s5-card__t{font-family:var(--font-display);font-weight:700;font-size:clamp(16px,1.4vw,19px);text-transform:none;letter-spacing:-.01em;color:#fff;margin-top:10px;line-height:1.1}
.s5-card__d{font-size:13px;color:var(--c-ink-2);line-height:1.45;margin-top:6px}
.s5-card__w{margin-top:auto;padding-top:14px}

/* mini widget shared bits */
.s5-w{border-radius:12px;background:var(--void-panel-2);border:1px solid var(--c-line);padding:12px;position:relative;overflow:hidden}
.s5-wrow{display:flex;align-items:center;gap:9px}
.s5-wrow+.s5-wrow{margin-top:8px}
.s5-mlabel{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--c-ink-3)}
.s5-mval{font-family:var(--font-display);font-weight:700;font-size:15px;color:#fff;line-height:1}
.s5-mval--g{color:var(--green)}
.s5-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  padding:4px 9px;border-radius:var(--r-pill);background:var(--c-accent-soft);color:var(--green);white-space:nowrap}
.s5-chips{display:flex;flex-wrap:wrap;gap:6px}
.s5-glyph{flex:none;color:var(--green);filter:drop-shadow(0 0 8px var(--green-glow))}
.s5-spark{width:100%;height:30px;display:block}
.s5-spark polyline{fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px var(--green-glow))}

/* bars chart */
.s5-bars{display:flex;align-items:flex-end;gap:3px;height:46px}
.s5-bars i{flex:1;min-width:3px;border-radius:2px 2px 0 0;background:linear-gradient(180deg,var(--green),rgba(39,245,140,.25))}

/* search bar widget */
.s5-search{display:flex;align-items:center;gap:8px;padding:7px 11px;border-radius:var(--r-pill);
  background:var(--void-panel-2);border:1px solid var(--c-line);font-family:var(--font-mono);font-size:11px;color:var(--c-ink-2)}
.s5-search svg{width:13px;height:13px;color:var(--c-ink-3);flex:none}

/* ring caption row */
.s5-ringrow{display:flex;align-items:center;gap:12px}

/* AI core widget */
.s5-core{position:relative;height:108px;display:grid;place-items:center}
.s5-core__c{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none;z-index:2;
  background:radial-gradient(circle at 35% 30%,rgba(39,245,140,.5),rgba(10,138,79,.25));
  box-shadow:0 0 0 6px rgba(39,245,140,.10),0 0 28px var(--green-glow);border:1px solid var(--void-line-green)}
.s5-core__c img{width:60%;height:60%;object-fit:contain}
.s5-core .ma-logo-tile{position:absolute;z-index:3}
.s5-core .s5-c-tl{top:0;left:6%}.s5-core .s5-c-tr{top:0;right:6%}
.s5-core .s5-c-bl{bottom:0;left:6%}.s5-core .s5-c-br{bottom:0;right:6%}
.s5-core__ring{position:absolute;inset:18% 24%;border-radius:50%;border:1px dashed var(--void-line-green);opacity:.6;z-index:1}

/* device glyph row (responsive) */
.s5-devices{display:flex;align-items:flex-end;justify-content:center;gap:10px;height:96px;color:var(--green)}
.s5-devices svg{filter:drop-shadow(0 0 8px var(--green-glow))}

/* pipeline list (CRM) */
.s5-pipe{display:grid;gap:5px;margin-top:8px}
.s5-pipe__r{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--c-ink-2);
  padding:5px 9px;border-radius:8px;background:var(--void-panel-2);border:1px solid var(--c-line)}
.s5-pipe__r b{color:var(--green);font-weight:600}

/* check rows (accessibility/security) */
.s5-checks{display:grid;gap:6px;margin-top:8px}
.s5-checks li{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;color:var(--c-ink-2)}
.s5-checks svg{width:14px;height:14px;color:var(--green);flex:none}

/* big AA badge */
.s5-aa{display:flex;align-items:center;gap:12px}
.s5-aa__b{font-family:var(--font-display);font-weight:700;font-size:30px;color:var(--green);line-height:1;text-shadow:0 0 18px var(--green-glow)}
.s5-a11y{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--c-accent-soft);border:1px solid var(--void-line-green);color:var(--green)}
.s5-a11y svg{width:22px;height:22px}

/* lottie/animation cube */
.s5-cube{height:70px;display:grid;place-items:center}
.s5-cube svg{color:var(--green);filter:drop-shadow(0 0 12px var(--green-glow));animation:s5spin 6s linear infinite}
@keyframes s5spin{to{transform:rotate(360deg)}}

/* easy editing drag blocks */
.s5-blocks{display:flex;gap:8px;margin-top:10px;position:relative}
.s5-blocks .s5-blk{flex:1;height:34px;border-radius:8px;border:1px dashed var(--void-line-green);background:rgba(39,245,140,.04);
  display:grid;place-items:center;color:var(--c-ink-3)}
.s5-blocks svg{width:16px;height:16px}
.s5-cursor{position:absolute;right:-2px;bottom:-6px;color:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}

/* server stack glyph */
.s5-stack{display:flex;align-items:center;gap:12px;justify-content:center;height:64px;color:var(--green)}
.s5-stack svg{filter:drop-shadow(0 0 8px var(--green-glow))}

/* funnel + heatmap */
.s5-funnel{display:flex;align-items:center;gap:12px}
.s5-funnel svg{color:var(--green);flex:none;filter:drop-shadow(0 0 10px var(--green-glow))}
.s5-heat{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;width:74px;height:40px;border-radius:6px;overflow:hidden;flex:none}
.s5-heat i{border-radius:1px;background:rgba(39,245,140,.18)}
.s5-heat i.h1{background:rgba(39,245,140,.45)}.s5-heat i.h2{background:rgba(233,196,106,.6)}.s5-heat i.h3{background:rgba(255,106,0,.7)}

/* donut */
.s5-donut{width:42px;height:42px;border-radius:50%;flex:none;
  background:conic-gradient(var(--green) 68%,var(--c-line) 0);position:relative}
.s5-donut::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--void-panel-2)}

/* lightning glyph float in card 01 */
.s5-bolt{position:absolute;color:var(--green);opacity:.9;filter:drop-shadow(0 0 12px var(--green-glow))}

/* ---- bottom stat bar ---- */
.s5__statbar{margin-top:clamp(22px,3vw,34px);display:grid;grid-template-columns:repeat(4,1fr);
  border-radius:var(--r-lg);background:var(--c-panel);border:1px solid var(--c-line);overflow:hidden;
  box-shadow:var(--c-shadow)}
.s5-stat{display:flex;align-items:center;gap:16px;padding:clamp(20px,2.4vw,30px) clamp(18px,2.2vw,30px);position:relative}
.s5-stat+.s5-stat::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--c-line)}
.s5-stat__ic{width:50px;height:50px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:var(--void-panel-2);border:1px solid var(--c-line);color:var(--green)}
.s5-stat__ic svg{width:24px;height:24px}
.s5-stat__n{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3vw,40px);color:#fff;line-height:1;white-space:nowrap}
.s5-stat__l{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--c-ink-3);margin-top:4px}

/* ---- responsive ---- */
@media (max-width:1180px){
  .s5__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .s5__deco{display:none}
  .s5__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s5__statbar{grid-template-columns:repeat(2,1fr)}
  .s5-stat:nth-child(3)::before{display:none}
  .s5-stat:nth-child(odd)::before{display:none}
}
@media (max-width:560px){
  .s5__grid{grid-template-columns:1fr}
  .s5__statbar{grid-template-columns:1fr}
  .s5-stat::before{display:none!important}
  .s5-stat+.s5-stat{border-top:1px solid var(--c-line)}
  .s5-card{min-height:0}
}

/* ===== SECTION 6 (s6) ===== */
/* === SECTION 6 · THE WEBSITE CONVERSION ENGINE (s6-) === */
.s6{position:relative;overflow:hidden}
.s6 .ma-orb{opacity:.32}

/* ---- HEAD with flanking logo clusters ---------------------------- */
.s6__head{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(14px,2.6vw,38px);margin-bottom:clamp(40px,5vw,68px)}
.s6__headmid{text-align:center;max-width:840px;margin:0 auto}
.s6__headmid .ma-eyebrow{justify-content:center}
.s6__title{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-.025em;
  line-height:.92;font-size:clamp(38px,6.6vw,86px);color:var(--c-ink)}
.s6__title .ma-line{display:block}
.s6__title .ma-word--grad{display:block;font-size:1.04em}
.s6__sub{margin:clamp(16px,2vw,22px) auto 0;max-width:560px;font-size:clamp(15px,1.6vw,18px);
  line-height:1.55;color:var(--c-ink-2)}

/* logo clusters flanking the title */
.s6__cluster{display:flex;flex-direction:column;gap:12px;padding:14px 16px;border-radius:var(--r-lg);
  background:var(--c-panel);border:1px solid var(--c-line);box-shadow:var(--c-shadow);width:max-content}
.s6__cluster--l{justify-self:start}
.s6__cluster--r{justify-self:end}
.s6__logo{display:flex;align-items:center;gap:11px}
.s6__logo .ma-logo-tile{width:38px;height:38px;border-radius:10px}
.s6__logo b{font-family:var(--font-display);font-weight:600;font-size:14.5px;letter-spacing:.005em;
  color:var(--c-ink);white-space:nowrap}

/* ---- THE FLOW (8 conversion steps) ------------------------------- */
.s6__flow{position:relative}
.s6__current{position:absolute;left:0;right:0;top:clamp(96px,11vw,128px);height:90px;z-index:0;
  pointer-events:none;overflow:visible}
.s6__current svg{width:100%;height:100%;overflow:visible}

.s6__grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));
  gap:clamp(8px,1vw,14px)}
.s6__card{position:relative;display:flex;flex-direction:column;padding:34px 12px 14px;border-radius:var(--r);
  background:var(--c-panel);border:1px solid var(--c-line);box-shadow:0 18px 44px -30px rgba(5,5,5,.22);
  min-width:0}
@media (hover:hover){.s6__card:hover{border-color:var(--c-line-green);transform:translateY(-4px);
  box-shadow:0 26px 60px -28px var(--green-glow);transition:transform var(--dur-ui) var(--ease-out),
  border-color var(--dur-ui) ease,box-shadow var(--dur-ui) ease}}
.s6__badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);width:30px;height:30px;
  border-radius:50%;display:grid;place-items:center;font-family:var(--font-mono);font-weight:600;font-size:13px;
  color:#fff;background:linear-gradient(150deg,var(--green-deep-2),var(--green-deep));
  box-shadow:0 0 0 4px var(--c-bg),0 6px 16px -4px var(--green-glow),0 0 18px -2px var(--green-glow)}
.s6__ct{font-family:var(--font-display);font-weight:600;font-size:12.5px;text-transform:uppercase;
  letter-spacing:.04em;color:var(--c-ink);text-align:center;margin-bottom:12px}

/* generic mini-widget shell inside each card */
.s6__w{position:relative;flex:1;border-radius:12px;background:var(--c-bg);border:1px solid var(--c-line);
  padding:11px;overflow:hidden;min-height:170px;display:flex;flex-direction:column;gap:8px}
.s6__wtitle{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--c-ink-3)}
.s6__row{display:flex;align-items:center;gap:7px;min-width:0}
.s6__mut{font-size:10px;color:var(--c-ink-3);line-height:1.35}
.s6__val{font-size:11px;color:var(--c-ink);font-weight:600;line-height:1.3}

/* 1 VISITOR */
.s6__avatar{width:54px;height:54px;border-radius:50%;margin:2px auto 4px;display:grid;place-items:center;
  color:var(--green-deep);background:var(--c-accent-soft);
  box-shadow:0 0 0 6px rgba(10,138,79,.07),0 0 22px -2px var(--green-glow)}
.s6__avatar svg{width:26px;height:26px}
.s6__chip{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;padding:3px 8px;border-radius:999px;
  background:var(--c-accent-soft);color:var(--c-accent);font-family:var(--font-mono);font-size:9px;font-weight:600}
.s6__chip i{width:6px;height:6px;border-radius:50%;background:var(--green-deep-2);display:block;flex:none}
.s6__kv{display:flex;justify-content:space-between;gap:6px;font-size:9.5px}
.s6__kv span{color:var(--c-ink-3)}
.s6__kv b{color:var(--c-ink);font-weight:600;text-align:right}
.s6__kv b.is-green{color:var(--c-accent)}
.s6__bars{display:flex;align-items:flex-end;gap:2px;height:26px;margin-top:auto}
.s6__bars i{flex:1;border-radius:2px 2px 0 0;background:linear-gradient(var(--green-deep-2),var(--green-deep));
  min-height:2px;opacity:.9}

/* 2 LANDING PAGE — mini browser */
.s6__mini{flex:1;border-radius:9px;overflow:hidden;border:1px solid var(--c-line);display:flex;flex-direction:column;
  background:#0a1015}
.s6__minibar{display:flex;align-items:center;gap:4px;padding:6px 8px;background:var(--c-panel-2);
  border-bottom:1px solid var(--c-line)}
.s6__minibar i{width:6px;height:6px;border-radius:50%;background:var(--c-ink-3);opacity:.5;flex:none}
.s6__minibar i:first-child{background:#ff5f57;opacity:.9}.s6__minibar i:nth-child(2){background:#febc2e;opacity:.9}
.s6__minibar i:nth-child(3){background:#28c840;opacity:.9}
.s6__minishot{position:relative;flex:1;min-height:104px;background:#0a1015 center/cover no-repeat}
.s6__minishot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(4,8,11,.86) 0%,rgba(4,8,11,.18) 55%,transparent 80%)}
.s6__miniov{position:absolute;left:9px;right:9px;bottom:8px;z-index:2}
.s6__miniov h5{font-family:var(--font-display);font-weight:700;color:#fff;font-size:12px;line-height:1.05;
  text-shadow:0 2px 10px rgba(0,0,0,.6)}
.s6__minibtn{margin-top:6px;display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);
  font-size:8px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#04140C;background:var(--green);
  padding:4px 9px;border-radius:999px}

/* 3 CTA BUTTON — big glowing circle */
.s6__cta{flex:1;display:grid;place-items:center;position:relative}
.s6__ctabtn{position:relative;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.02em;color:#04140C;
  background:radial-gradient(circle at 38% 32%,var(--green-bright),var(--green) 55%,var(--green-deep-2));
  box-shadow:0 0 0 8px rgba(10,138,79,.10),0 0 0 18px rgba(10,138,79,.05),
  0 14px 36px -10px var(--green-glow),0 0 40px -4px var(--green-glow);
  animation:s6Pulse 2.8s var(--ease-out) infinite}
@keyframes s6Pulse{0%,100%{box-shadow:0 0 0 8px rgba(10,138,79,.10),0 0 0 18px rgba(10,138,79,.05),
  0 14px 36px -10px var(--green-glow),0 0 40px -4px var(--green-glow)}
  50%{box-shadow:0 0 0 10px rgba(10,138,79,.14),0 0 0 24px rgba(10,138,79,.04),
  0 14px 36px -10px var(--green-glow),0 0 54px -2px var(--green-glow)}}
.s6__cursor{position:absolute;right:24px;bottom:30px;color:#fff;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));
  animation:s6Tap 2.8s var(--ease-out) infinite}
.s6__cursor svg{width:26px;height:26px}
@keyframes s6Tap{0%,100%{transform:translate(0,0)}45%{transform:translate(-5px,-6px)}55%{transform:translate(-5px,-6px)}}

/* 4 LEAD FORM */
.s6__fld{display:flex;flex-direction:column;gap:3px}
.s6__fld label{font-family:var(--font-mono);font-size:8px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--c-ink-3)}
.s6__inp{height:22px;border-radius:6px;border:1px solid var(--c-line);background:var(--c-panel);
  display:flex;align-items:center;justify-content:space-between;padding:0 8px;font-size:9.5px;color:var(--c-ink)}
.s6__inp svg{width:11px;height:11px;color:var(--c-ink-3);flex:none}
.s6__submit{margin-top:2px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  gap:6px;font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;color:#fff;
  background:linear-gradient(150deg,var(--green-deep-2),var(--green-deep))}
.s6__submit svg{width:12px;height:12px}

/* 5 CRM pipeline */
.s6__crmhdr{display:flex;align-items:center;gap:7px;padding-bottom:8px;border-bottom:1px solid var(--c-line)}
.s6__crmhdr .ma-logo-tile{width:22px;height:22px;border-radius:6px}
.s6__crmhdr b{font-family:var(--font-display);font-weight:700;font-size:11px;color:var(--c-ink)}
.s6__stage{display:flex;flex-direction:column;gap:3px;padding-left:8px;position:relative}
.s6__stage::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px;border-radius:3px}
.s6__stage--n::before{background:var(--c-meta)}
.s6__stage--c::before{background:#febc2e}
.s6__stage--q::before{background:var(--green-deep-2)}
.s6__stage--p::before{background:#7F54B3}
.s6__stagetop{display:flex;align-items:center;justify-content:space-between;gap:6px}
.s6__stagetop b{font-size:10px;font-weight:600;color:var(--c-ink)}
.s6__plus{font-family:var(--font-mono);font-size:9px;font-weight:600;color:var(--c-accent);
  background:var(--c-accent-soft);border-radius:999px;padding:1px 6px}

/* 6 AI FOLLOW-UP — chat rows */
.s6__msg{display:flex;gap:7px;align-items:flex-start}
.s6__msgic{width:22px;height:22px;border-radius:7px;flex:none;display:grid;place-items:center;color:#fff;
  position:relative}
.s6__msgic svg{width:12px;height:12px}
.s6__msgic--ai{background:var(--c-openai)}
.s6__msgic--sms{background:var(--green-deep-2)}
.s6__msgic--mail{background:var(--c-meta)}
.s6__msgic--msgr{background:#0866FF}
.s6__msgic i{position:absolute;right:-2px;bottom:-2px;width:7px;height:7px;border-radius:50%;
  background:var(--green-deep-2);border:1.5px solid var(--c-bg);display:block}
.s6__bub{flex:1;min-width:0}
.s6__bub b{font-size:9.5px;font-weight:600;color:var(--c-ink);display:block}
.s6__bub p{font-size:9px;color:var(--c-ink-2);line-height:1.3;margin-top:1px}

/* 7 APPOINTMENT — calendly */
.s6__caltop{display:flex;align-items:center;gap:7px}
.s6__caltop .ma-logo-tile{width:22px;height:22px;border-radius:6px}
.s6__caltop b{font-family:var(--font-display);font-weight:700;font-size:11px;color:var(--c-ink)}
.s6__check{width:46px;height:46px;border-radius:50%;margin:4px auto 2px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,var(--green-deep-2),var(--green-deep));
  box-shadow:0 0 0 6px rgba(10,138,79,.08),0 0 24px -2px var(--green-glow)}
.s6__check svg{width:24px;height:24px}
.s6__booked{font-family:var(--font-display);font-weight:700;font-size:11.5px;color:var(--c-ink);text-align:center}
.s6__calrow{display:flex;align-items:center;gap:6px;font-size:9.5px;color:var(--c-ink-2)}
.s6__calrow svg{width:11px;height:11px;color:var(--c-accent);flex:none}
.s6__addcal{margin-top:auto;min-height:24px;padding:5px 8px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  gap:5px;font-family:var(--font-mono);font-size:8.5px;font-weight:600;letter-spacing:.04em;color:#fff;white-space:nowrap;
  background:linear-gradient(150deg,var(--green-deep-2),var(--green-deep))}
.s6__addcal svg{width:11px;height:11px}

/* 8 SALE */
.s6__won{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--c-accent);text-align:center}
.s6__deal{text-align:center;line-height:1.2}
.s6__deal small{font-size:9.5px;color:var(--c-ink-3);display:block}
.s6__deal b{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--c-ink)}
.s6__rev{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:9.5px;color:var(--c-ink-3)}
.s6__rev .wd-tag{font-size:8.5px;padding:2px 6px;gap:3px}
.s6__signed{display:flex;align-items:center;gap:6px;justify-content:center;margin-top:auto;font-size:9.5px;
  color:var(--c-ink-2)}
.s6__signed svg{width:14px;height:14px;color:var(--c-accent);flex:none}
.s6__spark{width:100%;height:34px;margin-top:auto}
.s6__spark svg{width:100%;height:100%;overflow:visible}
.s6__sparkline{fill:none;stroke:var(--c-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 4px var(--green-glow))}

/* ---- KPI ROW ----------------------------------------------------- */
.s6__kpis{margin-top:clamp(28px,4vw,52px);display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.6vw,20px)}
.s6__kpi{display:flex;align-items:center;gap:clamp(12px,1.4vw,18px);padding:clamp(16px,1.8vw,22px);
  border-radius:var(--r-lg);background:var(--c-panel);border:1px solid var(--c-line);box-shadow:var(--c-shadow)}
@media (hover:hover){.s6__kpi:hover{border-color:var(--c-line-green);
  box-shadow:0 26px 60px -32px var(--green-glow)}}
.s6__kpiic{width:clamp(44px,4.4vw,56px);height:clamp(44px,4.4vw,56px);border-radius:50%;flex:none;
  display:grid;place-items:center;color:var(--green-deep);background:var(--c-accent-soft);
  box-shadow:inset 0 0 0 1px var(--paper-line-green)}
.s6__kpiic svg{width:clamp(22px,2.2vw,26px);height:clamp(22px,2.2vw,26px)}
.s6__kpibody{min-width:0;flex:1}
.s6__kpil{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--c-ink-3)}
.s6__kpinrow{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-top:2px}
.s6__kpin{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,2.8vw,38px);line-height:1;
  color:var(--c-ink);font-variant-numeric:tabular-nums}
.s6__kpidelta{display:inline-flex;align-items:center;gap:3px;font-family:var(--font-mono);font-size:11px;
  font-weight:600;color:var(--c-accent);background:var(--c-accent-soft);border-radius:999px;padding:2px 8px}
.s6__kpidelta svg{width:9px;height:9px}
.s6__kpisub{font-size:11px;color:var(--c-ink-3);margin-top:3px}
.s6__kpispark{width:clamp(58px,6vw,82px);height:38px;flex:none;align-self:center}
.s6__kpispark svg{width:100%;height:100%;overflow:visible}

/* ---- RESPONSIVE -------------------------------------------------- */
@media (max-width:1180px){
  .s6__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;row-gap:30px}
  .s6__current{display:none}
  .s6__kpis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .s6__head{grid-template-columns:1fr;text-align:center}
  .s6__cluster{flex-direction:row;flex-wrap:wrap;justify-content:center;width:100%;justify-self:center;
    order:2}
  .s6__cluster--l{order:2}.s6__cluster--r{order:3}
  .s6__headmid{order:1}
  .s6__logo{flex:0 0 auto}
}
@media (max-width:680px){
  .s6__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;row-gap:30px}
  .s6__kpis{grid-template-columns:1fr}
  .s6__cluster{flex-direction:column;align-items:flex-start;width:max-content;max-width:100%}
  .s6__cluster--l,.s6__cluster--r{justify-self:center}
}
@media (max-width:420px){
  .s6__grid{grid-template-columns:1fr}
  .s6__w{min-height:0}
}

/* ===== SECTION 7 (s7) ===== */
/* =====================================================================
   SECTION 7 · TECHNOLOGY STACK — CINEMATIC VIDEO (.technology-video)
   The video is the hero: pristine, full-bleed, no overlay/filter/mask.
   Only a top-centred title + one line sit over it, fading out on scroll.
   ===================================================================== */
.technology-video{
  position:relative;
  width:100%;
  height:100vh;            /* desktop: large cinematic presentation */
  height:100svh;
  min-height:600px;
  overflow:hidden;
  background:#04070A;       /* paints only until the first frame decodes */
  display:flex;
  justify-content:center;
  isolation:isolate;
}
.technology-video__media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;          /* fill the section, preserve composition */
  object-position:center center;
  background:#04070A;
  z-index:0;
  pointer-events:none;
  /* GPU acceleration, no quality-reducing filters */
  transform:translateZ(0);
  backface-visibility:hidden;
  will-change:opacity;
}

/* ---- minimal overlay: title + one line, top centre ---- */
.technology-heading{
  position:relative;
  z-index:2;
  width:100%;
  max-width:900px;
  margin:0 auto;
  padding:clamp(44px,8vh,96px) var(--gutter) 0;
  text-align:center;
  pointer-events:none;
  will-change:opacity,transform;
}
.technology-heading__eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green);
  text-shadow:0 1px 16px rgba(0,0,0,.9),0 0 30px rgba(4,7,10,.75);
}
.technology-heading__eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);flex:none}
.technology-heading__title{
  margin:clamp(12px,1.8vh,18px) 0 0;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;line-height:.94;
  font-size:clamp(28px,4.5vw,60px);color:#fff;
  /* glyph-level halo for legibility over a bright video — no overlay layer */
  text-shadow:0 2px 2px rgba(0,0,0,.5),0 8px 40px rgba(0,0,0,.6),0 0 80px rgba(4,7,10,.55);
}
.technology-heading__title span{display:block}
.technology-heading__title em{font-style:normal;color:var(--green-bright);
  text-shadow:0 2px 18px rgba(0,0,0,.6),0 0 40px rgba(39,245,140,.5)}
.technology-heading__line{
  margin:clamp(14px,2vh,22px) auto 0;max-width:600px;
  font-family:var(--font-mono);font-size:clamp(13px,1.5vw,17px);font-weight:500;letter-spacing:.02em;line-height:1.55;
  color:#F5FBF7;
  text-shadow:0 1px 14px rgba(0,0,0,.95),0 0 26px rgba(4,7,10,.85);
}

/* no-JS / reduced-motion: heading simply visible, video pristine */
@media (prefers-reduced-motion:reduce){
  .technology-heading{opacity:1!important;transform:none!important}
  .technology-video__media{opacity:1!important}
}

/* ---- responsive: keep it cinematic, never a banner ---- */
@media (max-width:900px){
  .technology-video{height:88vh;height:88svh}
}
@media (max-width:600px){
  .technology-video{height:82vh;height:82svh;min-height:500px}
  .technology-heading{padding-top:clamp(40px,9vh,80px)}
  .technology-heading__title{font-size:clamp(26px,8vw,44px)}
  .technology-heading__line{font-size:12.5px;max-width:380px}
}

/* ===== SECTION 8 (s8) ===== */
/* === SECTION 8 · BEFORE VS AFTER === */
.s8{position:relative}
.s8 .ma-inner--wide{position:relative;z-index:2}

/* ---------- HEADER ROW: flanked title with score cards ---------- */
.s8__top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(18px,3vw,46px);margin-bottom:clamp(30px,4vw,52px)}
.s8__flank{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
.s8__flank--before{justify-items:stretch}
.s8__flank-lbl{grid-column:1/-1;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-3);text-align:center;margin-bottom:2px}
.s8__flank--after .s8__flank-lbl{color:var(--c-accent)}
.s8__title{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;line-height:.9;text-align:center;color:var(--c-ink);font-size:clamp(34px,5vw,58px)}
.s8__title .s8__big{display:block;font-size:clamp(46px,8.4vw,108px);line-height:.86;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-image:linear-gradient(120deg,#0fb866,var(--green) 40%,#0a8a4f 78%,var(--green-bright));
  background-size:220% 100%;animation:maGradWord 7s ease-in-out infinite;
  filter:drop-shadow(0 0 26px rgba(39,245,140,.45))}
.s8__sub{margin:18px auto 0;text-align:center;max-width:620px;font-size:clamp(15px,1.6vw,18px);line-height:1.55;color:var(--c-ink-2)}

/* mini score card */
.s8-score{padding:14px 14px 13px;border-radius:14px;background:var(--c-panel);border:1px solid var(--c-line);box-shadow:0 10px 26px -22px var(--c-shadow)}
.s8-score__k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-3)}
.s8-score__v{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2.4vw,28px);line-height:1;margin-top:6px;color:var(--c-ink)}
.s8-score__bar{margin-top:9px;height:5px;border-radius:99px;background:var(--c-panel-2);overflow:hidden;position:relative}
.s8-score__bar i{position:absolute;inset:0 auto 0 0;border-radius:99px;width:var(--w,50%)}
.s8-score--low .s8-score__v{color:#D14343}
.s8-score--low .s8-score__bar i{background:linear-gradient(90deg,#E25555,#D14343)}
.s8-score--hi .s8-score__v{color:var(--c-accent)}
.s8-score--hi .s8-score__bar i{background:linear-gradient(90deg,var(--green-deep-2),var(--green-deep))}

/* ---------- MAIN STAGE: BA slider + right rail ---------- */
.s8__stage{display:grid;grid-template-columns:minmax(0,1fr) clamp(190px,17vw,236px);gap:clamp(16px,2vw,24px);align-items:stretch}

/* before/after slider */
.s8-ba{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/9;
  border:1px solid var(--c-line);background:var(--c-panel);box-shadow:var(--c-shadow);cursor:ew-resize;user-select:none;touch-action:none;--ba:50%}
.s8-ba__before,.s8-ba__after{position:absolute;inset:0;overflow:hidden}
.s8-ba__after{z-index:3;clip-path:inset(0 0 0 50%)}
.s8-ba__pane{position:absolute;inset:0;width:100%;height:100%}
/* keep both rendered panes the same pixel width so the clip lines up */
.s8-ba__before .s8-ba__pane,.s8-ba__after .s8-ba__pane{width:100%}

/* corner tags */
.s8-ba__tag{position:absolute;bottom:12px;z-index:6;font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 11px;border-radius:99px;backdrop-filter:blur(6px);box-shadow:0 4px 14px -4px rgba(0,0,0,.5)}
.s8-ba__tag--before{left:12px;background:var(--green);color:#04140C;box-shadow:0 6px 18px -6px var(--green-glow)}
.s8-ba__tag--after{right:12px;background:rgba(20,24,28,.72);color:#fff;border:1px solid rgba(255,255,255,.18)}

/* drag handle */
.s8-ba__handle{position:absolute;top:0;bottom:0;left:50%;z-index:5;width:2px;transform:translateX(-50%);background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12),0 0 14px rgba(0,0,0,.3);pointer-events:none}
.s8-ba__handle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;
  background:#fff;box-shadow:0 6px 22px -4px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.06)}
.s8-ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;color:#0A0C0B;font-size:17px;line-height:1;font-family:var(--font-mono)}

/* ===== BEFORE: dated contractor site (real screenshot) ===== */
.s8-old-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.s8-new-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left center}

/* ===== AFTER: premium Green City redesign ===== */
.s8-new{position:absolute;inset:0;background:#fff;color:#0A0C0B;display:flex;flex-direction:column;container-type:inline-size;overflow:hidden}
.s8-new__head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:clamp(7px,1.3cqi,15px) clamp(10px,1.8cqi,22px);border-bottom:1px solid rgba(5,5,5,.07);background:#fff;z-index:3}
.s8-new__brand{display:flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:700;color:#0A0C0B;font-size:clamp(8px,1.4cqi,17px);letter-spacing:.01em;line-height:1}
.s8-new__brand svg{width:clamp(13px,2.2cqi,26px);height:auto;color:var(--green-deep);flex:none}
.s8-new__brand small{display:block;font-family:var(--font-mono);font-weight:600;font-size:clamp(4.5px,.7cqi,8px);letter-spacing:.22em;color:var(--green-deep);margin-top:1px}
.s8-new__menu{display:flex;gap:clamp(6px,1.1cqi,16px);font-family:var(--font-mono);font-size:clamp(5.5px,.78cqi,10px);letter-spacing:.05em;text-transform:uppercase;color:#3a463f}
.s8-new__cta{font-family:var(--font-mono);font-size:clamp(5.5px,.78cqi,10px);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#04140C;background:var(--green);padding:clamp(4px,.7cqi,8px) clamp(7px,1.2cqi,15px);border-radius:99px;white-space:nowrap;box-shadow:0 6px 16px -8px var(--green-glow)}
.s8-new__hero{position:relative;flex:1;min-height:0;display:flex;align-items:center}
.s8-new__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s8-new__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.86) 36%,rgba(255,255,255,.2) 62%,transparent 80%)}
.s8-new__copy{position:relative;z-index:2;padding:clamp(10px,1.8cqi,26px) clamp(12px,2cqi,26px);max-width:58%}
.s8-new__h1{font-family:var(--font-display);font-weight:700;line-height:1;color:#0A0C0B;font-size:clamp(12px,2.5cqi,32px);letter-spacing:-.01em}
.s8-new__h1 .gc{color:var(--green-deep)}
.s8-new__p{font-size:clamp(7px,1cqi,12px);color:#3a463f;line-height:1.4;margin-top:7px;max-width:90%}
.s8-new__btns{display:flex;align-items:center;gap:clamp(7px,1.2cqi,14px);margin-top:clamp(8px,1.4cqi,16px)}
.s8-new__btn{font-family:var(--font-mono);font-size:clamp(6px,.85cqi,11px);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#04140C;background:var(--green);padding:clamp(5px,.9cqi,10px) clamp(9px,1.5cqi,18px);border-radius:99px;box-shadow:0 8px 22px -8px var(--green-glow)}
.s8-new__link{font-family:var(--font-mono);font-size:clamp(6px,.85cqi,11px);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#0A0C0B}
.s8-new__ribbon{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:0 clamp(10px,1.6cqi,22px) clamp(9px,1.4cqi,18px);
  background:rgba(255,255,255,.9);backdrop-filter:blur(6px);border:1px solid rgba(5,5,5,.06);border-radius:10px;overflow:hidden;box-shadow:0 12px 30px -18px rgba(5,5,5,.3)}
.s8-new__stat{padding:clamp(6px,1cqi,12px) clamp(4px,.8cqi,10px);text-align:center}
.s8-new__stat b{display:block;font-family:var(--font-display);font-weight:700;color:#0A0C0B;font-size:clamp(9px,1.6cqi,20px);line-height:1}
.s8-new__stat span{font-family:var(--font-mono);font-size:clamp(4.5px,.66cqi,8px);letter-spacing:.04em;text-transform:uppercase;color:#6A7972;display:block;margin-top:3px;line-height:1.2}

/* ---------- RIGHT RAIL: stacked widget cards ---------- */
.s8__rail{display:flex;flex-direction:column;gap:clamp(10px,1.2vw,14px)}
.s8__rail>.s8-w{flex:1;display:flex;flex-direction:column;justify-content:center}
.s8-w{padding:13px 14px;border-radius:14px;background:var(--c-panel);border:1px solid var(--c-line);box-shadow:0 12px 30px -24px var(--c-shadow)}
.s8-w__top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.s8-w__t{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--c-ink-2)}
.s8-w__lg{width:14px;height:14px;object-fit:contain;opacity:.85;flex:none}
.s8-w__rings{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:6px;justify-items:center}
.s8-w__ring{display:flex;flex-direction:column;align-items:center;gap:5px}
.s8-w .wd-ring{--sz:40px}
.s8-w__rl{font-family:var(--font-mono);font-size:8.5px;color:var(--c-ink-3);line-height:1;text-align:center}
.s8-w__gt{display:flex;align-items:center;gap:12px}
.s8-w__grade{width:40px;height:40px;border-radius:10px;flex:none;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:22px;color:#fff;background:linear-gradient(140deg,var(--green-deep-2),var(--green-deep))}
.s8-w__gtmetrics{display:flex;gap:14px;flex:1}
.s8-w__gtmetrics div span{font-family:var(--font-mono);font-size:9.5px;color:var(--c-ink-3);display:block}
.s8-w__gtmetrics div b{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--c-accent)}
.s8-w__ga{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--c-accent);line-height:1}
.s8-w__gasub{font-family:var(--font-mono);font-size:9.5px;color:var(--c-ink-3);margin-top:2px}
.s8-w__chart{margin-top:8px;width:100%;height:38px;display:block}
.s8-w__heat{height:62px;border-radius:9px;overflow:hidden;
  background:
    radial-gradient(circle at 34% 52%,rgba(225,40,40,.92),transparent 16%),
    radial-gradient(circle at 44% 48%,rgba(255,140,0,.85),transparent 22%),
    radial-gradient(circle at 60% 40%,rgba(245,210,40,.8),transparent 26%),
    radial-gradient(circle at 26% 64%,rgba(40,150,220,.6),transparent 30%),
    radial-gradient(circle at 74% 64%,rgba(40,200,120,.5),transparent 34%),
    radial-gradient(circle at 50% 55%,rgba(40,90,210,.5),transparent 60%),
    #0b1530}
.s8-w__hot{position:relative;height:74px;border-radius:9px;overflow:hidden;background:linear-gradient(135deg,#2a3138,#161b20);display:grid;place-items:center}
.s8-w__hot::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.04) 0 2px,transparent 2px 5px)}
.s8-w__play{position:relative;z-index:2;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center}
.s8-w__play svg{width:13px;height:13px;color:#0A0C0B;margin-left:2px}

/* ---------- LEFT FLOATING ISSUE STRIP (mockup left column) ---------- */
.s8__issues{display:none}

/* ---------- BOTTOM: KPI cards ---------- */
.s8__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,20px);margin-top:clamp(34px,4.5vw,60px)}
.s8-kpi{padding:clamp(20px,2.4vw,30px) clamp(18px,2vw,26px);border-radius:var(--r);background:var(--c-panel);border:1px solid var(--c-line);text-align:left;
  transition:border-color var(--dur-ui) ease,transform var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui) ease}
@media (hover:hover){.s8-kpi:hover{transform:translateY(-4px);border-color:var(--c-line-green);box-shadow:0 0 40px -18px var(--green-glow)}}
.s8-kpi__ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--c-accent-soft);color:var(--c-accent);margin-bottom:16px}
.s8-kpi__ic svg{width:24px;height:24px}
.s8-kpi__n{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,4.4vw,54px);line-height:.95;color:var(--c-accent)}
.s8-kpi__t{font-family:var(--font-display);font-weight:600;font-size:clamp(14px,1.5vw,17px);text-transform:uppercase;letter-spacing:.01em;color:var(--c-ink);margin-top:6px}
.s8-kpi__d{font-size:13.5px;color:var(--c-ink-2);margin-top:5px;line-height:1.4}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .s8__stage{grid-template-columns:1fr}
  .s8__rail{flex-direction:row;flex-wrap:wrap}
  .s8__rail>.s8-w{flex:1 1 calc(50% - 7px);min-width:200px}
}
@media (max-width:900px){
  .s8__top{grid-template-columns:1fr;gap:24px}
  .s8__title{order:-1}
  .s8__flank{max-width:480px;margin:0 auto;width:100%}
  .s8__kpis{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .s8__flank{grid-template-columns:1fr 1fr}
  .s8__rail>.s8-w{flex:1 1 100%}
  /* compact horizontal KPI cards (icon left) — removes the tall empty void */
  .s8__kpis{grid-template-columns:1fr;gap:12px}
  .s8-kpi{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center;padding:16px 20px}
  .s8-kpi__ic{grid-row:1/span 3;align-self:center;margin-bottom:0}
  .s8-kpi__n,.s8-kpi__t,.s8-kpi__d{grid-column:2}
  .s8-kpi__t{margin-top:2px}
  .s8-new__copy{max-width:74%}
  .s8-ba{aspect-ratio:4/3}
}

/* ===== SECTION 10 (s10) ===== */
/* === SECTION 10 · PERFORMANCE WITHOUT COMPROMISE (s10-) === */
.s10{position:relative;overflow:hidden}
.s10__bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 6%,rgba(10,138,79,.10),transparent 60%)}

/* ---- title: glowing PERFORMANCE word on white ---- */
.s10__title .ma-line:first-child{
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-image:linear-gradient(120deg,#1be089,var(--green) 38%,#0a8a4f 74%,var(--green-deep-2));
  background-size:220% 100%;animation:maGradWord 7s ease-in-out infinite;
  filter:drop-shadow(0 4px 26px rgba(39,245,140,.45))}
@media (prefers-reduced-motion:reduce){.s10__title .ma-line:first-child{animation:none}}

/* ====================================================================
   DASHBOARD STAGE — center bento flanked by side widget columns
   ==================================================================== */
/* three hand-balanced columns: cards are distributed so the columns end at
   matching heights (space-between absorbs any remainder → no dead space) */
.s10__stage{position:relative;--s10gap:clamp(14px,1.4vw,20px);
  display:flex;flex-direction:column;gap:var(--s10gap);margin-top:clamp(34px,5vw,58px)}
.s10__feature{display:grid;grid-template-columns:1fr 1fr;gap:var(--s10gap);align-items:stretch}
.s10__feature>.s10-w{display:flex;flex-direction:column}
.s10__feature .s10-line{flex:1;height:auto;min-height:130px}
.s10__mini{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s10gap);align-items:stretch}
.s10__col{display:flex;flex-direction:column;gap:var(--s10gap);
  justify-content:space-between;min-width:0}
.s10__stage .s10-w{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid}

/* connector overlay is removed in this layout */
.s10__weave{display:none}

/* ---- generic widget card ---- */
.s10-w{padding:clamp(15px,1.4vw,20px);border-radius:var(--r);background:#fff;
  border:1px solid var(--c-line);box-shadow:0 18px 44px -30px rgba(5,5,5,.22),inset 0 0 0 1px rgba(5,5,5,.015);
  position:relative;overflow:hidden;transition:border-color var(--dur-ui) ease,box-shadow var(--dur-ui) ease,transform var(--dur-ui) var(--ease-out)}
@media (hover:hover){.s10-w:hover{transform:translateY(-3px);border-color:var(--c-line-green);box-shadow:0 24px 54px -28px rgba(10,138,79,.28)}}
.s10-w__head{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.s10-w__ic{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center;background:#fff;
  box-shadow:0 4px 12px rgba(5,5,5,.12),inset 0 0 0 1px rgba(5,5,5,.06)}
.s10-w__ic img{width:64%;height:64%;object-fit:contain}
.s10-w__t{font-family:var(--font-display);font-weight:600;font-size:14.5px;color:var(--c-ink);letter-spacing:.005em;line-height:1.1}
.s10-w__tag{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;color:var(--c-ink-3);white-space:nowrap}

/* the bento wrapper is also pass-through; cards join the masonry flow */
.s10__bento{display:contents}
.s10-w--span2{grid-column:auto}

/* ---- footer note row inside a widget (status line) ---- */
.s10-w__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:13px;
  border-top:1px solid var(--c-line);font-size:12.5px;color:var(--c-ink-2)}
.s10-w__pass{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11.5px;font-weight:600;color:var(--green-deep)}
.s10-w__pass svg{width:14px;height:14px;flex:none}

/* ---- Lighthouse rings row ---- */
.s10-rings{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,16px);place-items:center}
.s10-ring{display:flex;flex-direction:column;align-items:center;gap:9px}
.s10-ring .wd-ring{--sz:clamp(54px,5vw,72px)}
.s10-ring .wd-ring__v{color:var(--green-deep)}
.s10-ring .wd-ring::before{background:#fff}
.s10-ring__l{font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;color:var(--c-ink-3);text-align:center;line-height:1.2}

/* ---- Lighthouse metrics list — single column so labels never wrap in the masonry ---- */
.s10-lh__metrics{display:grid;grid-template-columns:1fr;gap:0;margin-top:clamp(14px,1.6vw,20px)}
.s10-lh__m{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;
  padding:10px 0;border-bottom:1px solid var(--c-line)}
.s10-lh__m span{color:var(--c-ink-2)}
.s10-lh__m b{font-family:var(--font-display);font-weight:700;color:var(--c-ink);font-variant-numeric:tabular-nums}
@media (max-width:560px){.s10-lh__metrics{grid-template-columns:1fr}}

/* ---- tabs (PageSpeed, Clarity) ---- */
.s10-tabs{display:flex;gap:4px;padding:4px;border-radius:11px;background:var(--c-panel-2);border:1px solid var(--c-line);margin-bottom:16px}
.s10-tabs button{flex:1;padding:8px 6px;border-radius:8px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.02em;
  color:var(--c-ink-3);transition:background var(--dur-micro) ease,color var(--dur-micro) ease;white-space:nowrap}
.s10-tabs button.is-active,.s10-tabs button[aria-selected="true"]{background:#fff;color:var(--c-ink);box-shadow:0 2px 8px rgba(5,5,5,.1)}
.s10-tabpanel[hidden]{display:none}

/* PageSpeed two-ring layout */
.s10-ps{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.s10-ps__cell{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 6px;border-radius:14px;background:var(--c-panel);border:1px solid var(--c-line)}
.s10-ps__cell .wd-ring{--sz:clamp(58px,5.5vw,78px)}
.s10-ps__cell .wd-ring__v{color:var(--green-deep)}
.s10-ps__cell .wd-ring::before{background:#fff}
.s10-ps__cap{font-family:var(--font-mono);font-size:11px;color:var(--c-ink-3);letter-spacing:.02em}

/* ---- GTmetrix ---- */
.s10-gt__grades{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.s10-gt__grade{padding:12px 14px;border-radius:13px;background:var(--c-panel);border:1px solid var(--c-line)}
.s10-gt__grade span{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-3)}
.s10-gt__grade b{display:block;margin-top:5px;font-family:var(--font-display);font-weight:700;font-size:clamp(17px,1.7vw,22px);color:var(--green-deep)}
.s10-gt__rows{display:grid;gap:9px}
.s10-mrow{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}
.s10-mrow span{color:var(--c-ink-2)}
.s10-mrow b{font-family:var(--font-display);font-weight:700;color:var(--c-ink);font-variant-numeric:tabular-nums}
.s10-gt__chart{margin-top:14px}

/* mini bar chart + line chart shells */
.s10-bars{display:flex;align-items:flex-end;gap:4px;height:64px;width:100%}
.s10-bars i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--green),rgba(10,138,79,.55));min-height:4px}
.s10-line{width:100%;height:84px;position:relative}
.s10-line svg{width:100%;height:100%;display:block;overflow:visible}
.s10-line .s10-draw{fill:none;stroke:var(--green-deep);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 4px 8px rgba(10,138,79,.25))}
.s10-line .s10-area{fill:url(#s10grad);opacity:.9}
.s10-axis{display:flex;justify-content:space-between;margin-top:7px;font-family:var(--font-mono);font-size:9.5px;color:var(--c-ink-3)}

/* ---- GA4 stat tiles ---- */
.s10-ga__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.s10-ga__cell{display:flex;flex-direction:column;gap:3px}
.s10-ga__cell .s10-ga__n{font-family:var(--font-display);font-weight:700;font-size:clamp(18px,1.7vw,23px);color:var(--c-ink);line-height:1;font-variant-numeric:tabular-nums}
.s10-ga__cell .s10-ga__k{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--c-ink-3)}
.s10-ga__up{display:inline-flex;align-items:center;gap:3px;font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--green-deep);margin-top:2px}

/* ---- Clarity heatmap ---- */
.s10-heat{position:relative;border-radius:13px;overflow:hidden;border:1px solid var(--c-line);background:#0c1418;aspect-ratio:16/9}
.s10-heat__site{position:absolute;inset:0;display:flex;flex-direction:column;padding:14px 16px;gap:8px;opacity:.9}
.s10-heat__nav{display:flex;align-items:center;gap:8px}
.s10-heat__logo{width:14px;height:14px;border-radius:4px;background:var(--green)}
.s10-heat__pill{height:6px;border-radius:3px;background:rgba(255,255,255,.18)}
.s10-heat__row{display:flex;gap:8px;margin-top:auto}
.s10-heat__btn{height:18px;width:64px;border-radius:5px;background:rgba(255,255,255,.16)}
.s10-heat__blob{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:
    radial-gradient(circle 50px at 28% 38%,rgba(255,40,40,.85),rgba(255,160,0,.4) 55%,transparent 72%),
    radial-gradient(circle 70px at 62% 64%,rgba(255,60,30,.9),rgba(255,180,0,.45) 50%,transparent 70%),
    radial-gradient(circle 40px at 80% 34%,rgba(255,200,0,.6),transparent 70%),
    radial-gradient(circle 34px at 18% 72%,rgba(0,200,255,.45),transparent 72%)}

/* ---- Cloudflare ---- */
.s10-cf__rows{display:grid;gap:11px}
.s10-cf__row{display:flex;align-items:center;gap:11px;font-size:13px}
.s10-cf__row svg{width:17px;height:17px;flex:none;color:var(--c-ink-3)}
.s10-cf__row span{color:var(--c-ink-2)}
.s10-cf__row b{margin-left:auto;font-family:var(--font-display);font-weight:700;color:var(--c-ink);font-variant-numeric:tabular-nums}
.s10-cf__row b.is-ok{color:var(--green-deep);font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase}
.s10-cf__map{margin-top:14px;position:relative;border-radius:12px;overflow:hidden;background:var(--c-panel);border:1px solid var(--c-line);padding:14px;aspect-ratio:2.4/1}
.s10-cf__map svg{width:100%;height:100%;display:block}
.s10-cf__dot{fill:var(--paper-line);}
.s10-cf__dot--on{fill:var(--green);filter:drop-shadow(0 0 4px rgba(39,245,140,.6))}

/* ---- Search Console (rail) ---- */
.s10-sc__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin-bottom:12px}
.s10-sc__cell .s10-sc__n{font-family:var(--font-display);font-weight:700;font-size:clamp(15px,1.5vw,19px);color:var(--c-ink);line-height:1}
.s10-sc__cell .s10-sc__k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--c-ink-3);margin-top:3px}

/* ---- Core Web Vitals (rail) ---- */
.s10-cwv__rows{display:grid;gap:0}
.s10-cwv__row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--c-line);font-size:13px}
.s10-cwv__row:last-child{border-bottom:0}
.s10-cwv__row span{color:var(--c-ink-2)}
.s10-cwv__v{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:700;color:var(--c-ink)}
.s10-cwv__v svg{width:15px;height:15px;color:var(--green-deep)}

/* ---- Looker (rail) donut ---- */
.s10-lk__top{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.s10-lk__big{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2vw,26px);color:var(--c-ink);line-height:1;font-variant-numeric:tabular-nums}
.s10-lk__sub{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--c-ink-3);margin-top:4px}
.s10-donut{width:74px;height:74px;flex:none}
.s10-lk__legend{display:grid;gap:6px;margin-top:14px}
.s10-lk__li{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--c-ink-2)}
.s10-lk__sw{width:10px;height:10px;border-radius:3px;flex:none}

/* ---- Pingdom (rail) ---- */
.s10-pg__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:13px}
.s10-pg__cell{text-align:center;padding:10px 4px;border-radius:11px;background:var(--c-panel);border:1px solid var(--c-line)}
.s10-pg__n{font-family:var(--font-display);font-weight:700;font-size:clamp(15px,1.5vw,19px);color:var(--c-ink);line-height:1}
.s10-pg__grade .s10-pg__n{color:var(--green-deep)}
.s10-pg__meta{display:flex;flex-direction:column;gap:9px;margin-bottom:12px}
.s10-pg__k{font-family:var(--font-mono);font-size:9px;letter-spacing:.03em;text-transform:uppercase;color:var(--c-ink-3);margin-top:4px}
.s10-pg__shot{border-radius:11px;overflow:hidden;border:1px solid var(--c-line);aspect-ratio:16/9;position:relative;background:#0c1418}

/* ---- Web Vitals tiny (rail) ---- */
.s10-wv__rows{display:grid;gap:0}
.s10-wv__row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--c-line);font-size:13px}
.s10-wv__row:last-child{border-bottom:0}
.s10-wv__row span{color:var(--c-ink-2)}
.s10-wv__row b{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;color:var(--c-ink)}
.s10-wv__row b svg{width:14px;height:14px;color:var(--green-deep)}
.s10-wv__good{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--green-deep)}

/* ====================================================================
   BOTTOM KPI ROW
   ==================================================================== */
.s10__kpis{margin-top:clamp(26px,3.4vw,46px);padding:clamp(22px,2.6vw,34px) clamp(20px,2.4vw,32px);
  border-radius:var(--r-lg);background:var(--c-panel);border:1px solid var(--c-line);
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,2vw,30px);position:relative;z-index:1}
.s10-kpi{display:flex;align-items:flex-start;gap:14px}
.s10-kpi__ic{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;background:var(--c-accent-soft);color:var(--green-deep)}
.s10-kpi__ic svg{width:22px;height:22px}
.s10-kpi__n{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,2.6vw,34px);color:var(--green-deep);line-height:1;font-variant-numeric:tabular-nums}
.s10-kpi__t{font-family:var(--font-display);font-weight:600;font-size:13.5px;color:var(--c-ink);margin-top:6px;line-height:1.2}
.s10-kpi__d{font-size:12px;color:var(--c-ink-3);margin-top:3px;line-height:1.3}
.s10-kpi + .s10-kpi{border-left:1px solid var(--c-line);padding-left:clamp(14px,2vw,30px)}

/* ====================================================================
   RESPONSIVE
   ==================================================================== */
/* tablet / mobile: columns dissolve and cards reflow as balanced masonry */
@media (max-width:1180px){
  .s10__mini{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s10__kpis{grid-template-columns:repeat(3,1fr);gap:22px}
  .s10-kpi:nth-child(3n+1){border-left:0;padding-left:0}
}
@media (max-width:820px){
  .s10__kpis{grid-template-columns:repeat(2,1fr)}
  .s10-kpi{border-left:0!important;padding-left:0!important}
}
@media (max-width:680px){
  .s10__feature{grid-template-columns:1fr}
}
@media (max-width:560px){
  .s10__mini{grid-template-columns:1fr}
  .s10-rings{grid-template-columns:repeat(2,1fr);gap:18px}
  .s10-ga__grid{grid-template-columns:1fr 1fr}
  .s10__kpis{grid-template-columns:1fr}
  .s10-kpi{flex-direction:row}
}

/* ===== SECTION 12 (s12) ===== */
/* === SECTION 12 · CHOOSE YOUR WEBSITE PACKAGE === */
.s12{position:relative;overflow:clip}
.s12 .ma-orb--1{opacity:.22}
.s12 .ma-orb--2{opacity:.16}

/* ---- centered head with flanking feature chips ---- */
.s12__top{position:relative}
.s12__rule{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:18px}
.s12__rule span{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--green-deep)}
.s12__rule i{display:block;width:clamp(34px,6vw,90px);height:1px;background:linear-gradient(90deg,transparent,var(--green-deep-2))}
.s12__rule i:last-child{background:linear-gradient(90deg,var(--green-deep-2),transparent)}

.s12__headwrap{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr) minmax(0,210px);gap:clamp(16px,3vw,40px);align-items:start;margin-bottom:clamp(40px,5vw,64px)}
.s12__head{text-align:center;max-width:760px;margin:0 auto}
.s12__title{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;line-height:.86;
  font-size:clamp(40px,8vw,104px);color:var(--c-ink)}
.s12__title .ma-line{display:block}
.s12__title .s12__big{font-size:clamp(46px,9.6vw,128px);display:block;line-height:.84;margin-top:.02em}
.s12__sub{margin:clamp(16px,2vw,24px) auto 0;max-width:600px;font-size:clamp(14px,1.6vw,17px);line-height:1.55;color:var(--c-ink-2)}

/* flank chips */
.s12__flank{display:flex;flex-direction:column;gap:14px;padding-top:6px}
.s12__flank--r{align-items:stretch}
.s12__fchip{display:flex;gap:12px;align-items:flex-start;text-align:left}
.s12__fic{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:#fff;
  color:var(--green-deep);box-shadow:0 8px 20px rgba(5,5,5,.08),inset 0 0 0 1px var(--paper-line);}
.s12__fic svg{width:22px;height:22px}
.s12__ft{font-family:var(--font-display);font-weight:600;font-size:14px;letter-spacing:.01em;color:var(--c-ink);line-height:1.15}
.s12__fd{font-size:12.5px;color:var(--c-ink-3);margin-top:3px;line-height:1.35}

/* ---- pricing grid ---- */
.s12__grid{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:clamp(16px,1.8vw,26px);align-items:stretch;position:relative}

/* base card */
.s12-card{position:relative;display:flex;flex-direction:column;border-radius:22px;padding:clamp(20px,2vw,28px);
  background:linear-gradient(180deg,#fff,var(--paper-panel));border:1px solid var(--paper-line);
  box-shadow:0 30px 70px -40px rgba(5,5,5,.22);overflow:visible;
  transition:transform var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui) ease,border-color var(--dur-ui) ease}
@media (hover:hover){.s12-card:hover{transform:translateY(-5px);box-shadow:0 40px 90px -42px rgba(5,5,5,.3)}}
.s12-card__pkg{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--green-deep);text-align:center}
.s12-card__name{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(26px,3vw,38px);color:var(--c-ink);text-align:center;line-height:1;margin-top:6px}
.s12-card__tag{font-size:13.5px;color:var(--c-ink-3);text-align:center;margin-top:8px;min-height:20px}
.s12-card__price{font-family:var(--font-display);font-weight:700;font-size:clamp(38px,4.6vw,54px);color:var(--green-deep-2);text-align:center;line-height:1;margin-top:14px;letter-spacing:-.02em}
.s12-card__cta{margin-top:16px;justify-content:center;width:100%}

/* thumbnail device */
.s12-card__thumb{margin-top:18px;border-radius:14px;overflow:hidden;border:1px solid var(--paper-line);
  box-shadow:0 18px 40px -26px rgba(5,5,5,.4);position:relative}
.s12-card__thumb .ma-window__bar{padding:7px 11px;background:#0e1a20;border-bottom:1px solid rgba(255,255,255,.08)}
.s12-card__thumb .ma-window__dots i{width:7px;height:7px}
.s12-card__live{aspect-ratio:16/10}

/* feature checklist - 2 cols */
.s12-card__feats{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;flex:1}
.s12-card__feats li{display:flex;align-items:flex-start;gap:7px;font-size:12px;color:var(--c-ink-2);line-height:1.3}
.s12-card__feats svg{flex:none;width:13px;height:13px;margin-top:2px;color:var(--green-deep-2)}

/* logo tiles row */
.s12-card__logos{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:20px;padding-top:18px;border-top:1px solid var(--paper-line)}
.s12-card__logos .ma-logo-tile{width:42px;height:42px;border-radius:11px}

/* ---- CARD 2 — POPULAR / elevated ---- */
.s12-card--pop{transform:scale(1.03);z-index:3;
  background:linear-gradient(180deg,#fff,#f3fbf6);
  border:1px solid transparent;
  box-shadow:0 40px 90px -36px rgba(10,138,79,.4),0 0 0 1px rgba(10,138,79,.18)}
.s12-card--pop::before{content:"";position:absolute;inset:0;border-radius:22px;padding:1.5px;
  background:linear-gradient(140deg,var(--green),var(--green-deep-2) 55%,var(--green));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.9}
@media (hover:hover){.s12-card--pop:hover{transform:scale(1.03) translateY(-5px)}}
.s12-card--pop .s12-card__price{color:var(--green-deep-2)}
.s12__ribbon{position:absolute;top:-14px;left:50%;transform:translateX(-50%);z-index:5;
  font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#04140C;
  padding:7px 18px;border-radius:var(--r-pill);white-space:nowrap;
  background:linear-gradient(120deg,var(--green),var(--green-bright));
  box-shadow:0 12px 26px -10px rgba(10,138,79,.55),inset 0 0 0 1px rgba(255,255,255,.35)}
.s12-card--pop{margin-top:14px}

/* ---- CARD 3 — ENTERPRISE / dark luxury ---- */
.s12-card--lux{
  background:linear-gradient(165deg,#0b1116,#070b0e 60%,#0a0d10);
  border:1px solid rgba(233,196,106,.28);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.7),inset 0 1px 0 rgba(233,196,106,.1)}
.s12-card--lux::before{content:"";position:absolute;inset:0;border-radius:22px;padding:1.5px;
  background:linear-gradient(150deg,var(--c-gold),rgba(39,245,140,.4),rgba(184,134,11,.6));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.75}
.s12-card--lux .s12-card__pkg{color:var(--c-gold)}
.s12-card--lux .s12-card__name{color:#fff}
.s12-card--lux .s12-card__tag{color:rgba(255,255,255,.6)}
.s12-card--lux .s12-card__price{color:var(--green-bright)}
.s12-card--lux .s12-card__feats li{color:rgba(245,251,247,.82)}
.s12-card--lux .s12-card__feats svg{color:var(--green)}
.s12-card--lux .s12-card__thumb{border-color:rgba(233,196,106,.2)}
.s12-card--lux .s12-card__logos{border-top-color:rgba(255,255,255,.1)}
.s12-card--lux .ma-btn--cta{background:linear-gradient(120deg,var(--c-gold),#d4af56);color:#1a1407;box-shadow:0 10px 30px -10px rgba(233,196,106,.55),inset 0 0 0 1px rgba(255,255,255,.25)}
.s12-card--lux .ma-btn--cta:hover{background:linear-gradient(120deg,#f3d488,var(--c-gold))}

/* ---- comparison strip ---- */
.s12__compare{margin-top:clamp(34px,4vw,52px);border-radius:20px;overflow:hidden;
  background:#fff;border:1px solid var(--paper-line);box-shadow:0 26px 60px -38px rgba(5,5,5,.2)}
.s12__crow{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;align-items:center;
  padding:clamp(12px,1.4vw,16px) clamp(16px,2.2vw,28px);border-top:1px solid var(--paper-line)}
.s12__crow:first-child{border-top:0}
.s12__crow:nth-child(even){background:var(--paper-panel)}
.s12__ckey{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-3)}
.s12__ckey svg{flex:none;width:16px;height:16px;color:var(--green-deep)}
.s12__cval{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--c-ink);font-weight:500}
.s12__cval svg{flex:none;width:15px;height:15px}
.s12__cval--mid{font-weight:600}
.s12__cval--mid b{color:var(--green-deep)}
.s12__cval--hi{font-weight:600}
.s12__cval--hi b{color:var(--green-deep-2)}
.s12__cstars{color:var(--green-deep-2);letter-spacing:2px;font-size:14px}
.s12__cstars i{color:var(--paper-line);font-style:normal}
.s12__cval--mid .s12__cstars{color:var(--green-deep)}

/* ---- RESPONSIVE ---- */
@media (max-width:1024px){
  .s12__grid{grid-template-columns:1fr;max-width:520px;margin:0 auto;gap:34px}
  .s12-card--pop{transform:none;order:-1;margin-top:0}
  @media (hover:hover){.s12-card--pop:hover{transform:translateY(-5px)}}
}
@media (max-width:900px){
  .s12__headwrap{grid-template-columns:1fr;gap:28px}
  .s12__flank{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .s12__fchip{flex:1 1 240px;max-width:300px}
  .s12__head{order:-1}
  .s12__crow{grid-template-columns:1fr 1fr;gap:8px 14px;padding:14px 18px}
  .s12__ckey{grid-column:1/-1;margin-bottom:2px}
  /* stacked values are ambiguous without their tier name — prepend a colour-coded label */
  .s12__cval::before{font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-3);margin-right:7px;flex:none}
  .s12__crow > .s12__cval:not(.s12__cval--mid):not(.s12__cval--hi)::before{content:"Starter ·"}
  .s12__cval--mid::before{content:"Pro ·";color:var(--green-deep)}
  .s12__cval--hi::before{content:"Enterprise ·";color:var(--green-deep-2)}
}
@media (max-width:560px){
  .s12__flank{flex-direction:column;align-items:center}
  .s12__fchip{flex:1 1 auto;width:100%;max-width:340px}
  .s12-card__feats{grid-template-columns:1fr}
  .s12__crow{grid-template-columns:1fr}
  .s12__cval{justify-content:flex-start}
  .s12__rule i{width:24px}
}
@media (prefers-reduced-motion:reduce){
  .s12-card,.s12-card--pop:hover,.s12-card:hover{transition:none;transform:none}
}

/* ===== SECTION 13 (s13) ===== */
/* === SECTION 13 · CONTACT / LEAD FORM === */
.s13{position:relative;overflow:hidden;isolation:isolate}

/* ---------- full-section cinematic video background ---------- */
.s13__bgvideo{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:center;opacity:1;transform:scale(1.04);pointer-events:none}
.s13__veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,rgba(4,7,10,.8) 0%,rgba(4,7,10,.5) 36%,rgba(4,7,10,.28) 70%,rgba(4,7,10,.44) 100%),
  linear-gradient(180deg,rgba(4,7,10,.18) 0%,rgba(4,7,10,.42) 100%),
  radial-gradient(ellipse 52% 46% at 80% 12%,rgba(39,245,140,.1),transparent 62%)}
/* the bare grid overlay + orb read as clutter over footage — hide them in this section only */
.s13 .ma-grid-fade,.s13 .ma-orb{display:none}

.s13__halo{position:absolute;z-index:2;inset:-10% -6%;pointer-events:none;
  background:radial-gradient(ellipse 46% 42% at 78% 30%,rgba(39,245,140,.16),transparent 62%),radial-gradient(ellipse 40% 40% at 12% 70%,rgba(15,184,102,.12),transparent 64%)}

/* three-zone layout: LEFT copy/trust · CENTER form · RIGHT floating preview */
.s13__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(30px,3.8vw,62px);align-items:start}

/* ---------- LEFT ---------- */
.s13__copy{position:relative;z-index:6;align-self:center}
.s13__brand{display:inline-flex;align-items:center;gap:11px;margin-bottom:22px}
.s13__brand img{height:34px;width:auto}
.s13__brand b{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.02em;color:var(--c-ink);line-height:1.05;text-transform:uppercase}
.s13__title{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;
  line-height:.9;font-size:clamp(40px,5.8vw,76px);color:var(--c-ink);margin-top:6px}
.s13__title .ma-line{display:block}
.s13__title .ma-word--grad{display:block;font-size:1.06em}
.s13__lead{margin-top:clamp(18px,2.2vw,26px);font-size:clamp(15px,1.5vw,18px);line-height:1.55;color:var(--c-ink-2);max-width:440px}

/* trust cards 2x2 */
.s13__trust{margin-top:clamp(26px,3vw,36px);display:grid;grid-template-columns:1fr 1fr;gap:13px;max-width:480px}
.s13__tcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;
  padding:18px 14px;border-radius:var(--r);background:var(--c-panel);border:1px solid var(--c-line);
  transition:border-color var(--dur-ui) ease,transform var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui) ease}
@media (hover:hover){.s13__tcard:hover{transform:translateY(-3px);border-color:var(--c-line-green);box-shadow:0 0 34px -18px var(--green-glow)}}
.s13__tic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--c-accent-soft);color:var(--c-accent)}
.s13__tic svg{width:21px;height:21px}
.s13__tic img{width:21px;height:21px;object-fit:contain}
.s13__tn{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2.3vw,26px);color:var(--c-ink);line-height:1}
.s13__tl{font-size:12.5px;color:var(--c-ink-3);line-height:1.3}
.s13__tcard .ma-stars{font-size:12px}

/* trusted-by wordmarks */
.s13__trusted{margin-top:clamp(26px,3vw,38px)}
.s13__trusted-l{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-3);margin-bottom:14px}
.s13__marks{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px}
.s13__mark{font-family:var(--font-display);font-weight:700;letter-spacing:.02em;color:var(--c-ink-2);
  font-size:14px;line-height:1;text-transform:uppercase;opacity:.7;white-space:nowrap;transition:opacity var(--dur-ui) ease,color var(--dur-ui) ease}
.s13__mark small{display:block;font-family:var(--font-mono);font-weight:500;font-size:8px;letter-spacing:.1em;color:var(--c-ink-3);margin-top:3px}
@media (hover:hover){.s13__mark:hover{opacity:1;color:var(--c-ink)}}

/* ---------- CENTER form ---------- */
.s13__formwrap{position:relative;z-index:7}

/* min-width:0 down the whole grid chain so no field/checkbox can blow the card out */
.s13__grid,.s13__formwrap,.s13__panel,
.s13 .ma-form,.s13 .ma-form__grid,
.s13__radios,.s13__checks{min-width:0}

/* glass form-card floating over the section's cinematic video background */
.s13__panel{position:relative;width:100%;max-width:620px;margin:0 auto;
  border-radius:var(--r-lg);padding:clamp(20px,2.4vw,32px);
  background:rgba(6,16,12,.6);backdrop-filter:blur(16px);
  border:1px solid rgba(39,245,140,.28);
  box-shadow:0 40px 100px -50px rgba(0,0,0,.92),0 0 50px -26px var(--green-glow)}

.s13__feyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--c-accent);margin-bottom:20px}
.s13__feyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}

/* form layout — minmax(0,1fr) tracks are the key anti-overflow fix */
.s13 .ma-form{display:grid;gap:clamp(14px,1.4vw,18px)}
.s13 .ma-form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.2vw,16px)}
.s13 .ma-field{min-width:0}
.s13__fgroup{display:grid;gap:8px;min-width:0}
.s13 .ma-field label,.s13__fgroup-l{font-family:var(--font-mono);font-size:clamp(10px,.72vw,11.5px);
  letter-spacing:.08em;text-transform:uppercase;color:rgba(245,251,247,.68)}

/* luxury glass inputs — consistent height, blur over the video */
.s13 .ma-input,.s13 .ma-select,.s13 .ma-textarea{width:100%;min-width:0;min-height:clamp(48px,3.2vw,56px);
  padding:0 clamp(14px,1.2vw,18px);border-radius:14px;border:1px solid rgba(255,255,255,.16);
  background:rgba(4,7,10,.62);color:#fff;font-size:clamp(14px,.95vw,16px);line-height:1.25;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(12px)}
.s13 .ma-textarea{min-height:clamp(110px,7vw,130px);padding-top:14px;padding-bottom:14px;resize:vertical}
.s13 .ma-input::placeholder,.s13 .ma-textarea::placeholder{color:rgba(245,251,247,.42)}
.s13 .ma-input:focus,.s13 .ma-select:focus,.s13 .ma-textarea:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(39,245,140,.14),inset 0 1px 0 rgba(255,255,255,.08)}

/* radio pair */
.s13__radios{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.s13__radio{min-width:0;min-height:48px;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;
  padding:11px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(4,7,10,.58);
  color:rgba(245,251,247,.82);font-size:clamp(13px,.9vw,15px);line-height:1.25;text-align:center;backdrop-filter:blur(10px);
  transition:border-color var(--dur-micro) ease,background var(--dur-micro) ease,color var(--dur-micro) ease}
.s13__radio input{flex:0 0 auto;width:16px;height:16px;accent-color:var(--green)}
.s13__radio:has(input:checked){border-color:var(--green);background:rgba(39,245,140,.12);color:#fff}

/* checkbox grid */
.s13__checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.s13__checks .ma-check{min-width:0;width:100%;min-height:46px;display:flex;align-items:center;justify-content:flex-start;gap:9px;cursor:pointer;
  padding:11px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(4,7,10,.58);
  color:rgba(245,251,247,.82);font-size:clamp(12.5px,.85vw,14px);line-height:1.25;white-space:normal;overflow-wrap:anywhere;backdrop-filter:blur(10px);
  transition:border-color var(--dur-micro) ease,background var(--dur-micro) ease,color var(--dur-micro) ease}
.s13__checks .ma-check input{flex:0 0 auto;width:16px;height:16px;accent-color:var(--green)}
.s13__checks .ma-check:has(input:checked){border-color:var(--green);background:rgba(39,245,140,.12);color:#fff}

/* submit + footer */
.s13__submit{width:100%;min-height:clamp(52px,3.4vw,58px);justify-content:center;margin-top:4px;border-radius:999px;font-size:clamp(13px,.9vw,15px)}
.s13__foot{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-top:16px}
.s13__foot span{display:inline-flex;align-items:center;gap:7px;min-width:0;font-family:var(--font-mono);font-size:clamp(10.5px,.78vw,12px);color:rgba(245,251,247,.62)}
.s13__foot svg{width:15px;height:15px;color:var(--c-accent);flex:none}

/* ---------- RIGHT floating preview ---------- */
.s13__stage{position:relative;z-index:4;min-height:clamp(420px,40vw,560px);align-self:center}
.s13__shalo{position:absolute;z-index:0;width:130%;height:120%;top:-8%;left:-12%;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 60% 40%,rgba(39,245,140,.18),transparent 62%)}
/* wrapper that scopes the floating badges to the browser window only;
   right-aligned + slightly narrowed so the showcase clears the centre form */
.s13__winwrap{position:relative;z-index:3;width:94%;margin-left:auto}
.s13__window{position:relative;z-index:3;width:100%;margin-left:0}
.s13__bbar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#0e1a20;border-bottom:1px solid var(--void-line)}
.s13__bwin{position:relative;aspect-ratio:16/11}
.s13__site{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(10px,1.4vw,18px)}
.s13__snav{display:flex;align-items:center;justify-content:space-between;gap:8px}
.s13__sbrand{display:flex;align-items:center;gap:6px;color:#fff;font-family:var(--font-display);font-weight:700;font-size:clamp(8px,.9vw,12px);letter-spacing:.04em;text-transform:uppercase}
.s13__sbrand svg{width:clamp(12px,1.3vw,16px);height:auto;color:var(--green)}
.s13__smenu{display:flex;gap:clamp(6px,.9vw,13px);font-family:var(--font-mono);font-size:clamp(6px,.66vw,9px);letter-spacing:.06em;color:rgba(255,255,255,.8);text-transform:uppercase}
.s13__shero{max-width:64%}
.s13__sh1{font-family:var(--font-display);font-weight:700;color:#fff;line-height:1.04;font-size:clamp(13px,1.9vw,26px);text-shadow:0 2px 18px rgba(0,0,0,.6)}
.s13__sbtn{margin-top:9px;display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:clamp(6px,.66vw,9px);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#04140C;background:var(--green);padding:6px 11px;border-radius:var(--r-pill)}
/* badges hug the browser window only (anchored to .s13__winwrap, clear of the
   form gutter on the left and the logo cluster below) — 2 left, 3 right */
.s13-f-ring{position:absolute;top:15%;left:-6%;z-index:6;display:flex;align-items:center;gap:11px}
.s13-f-ring__txt{display:flex;flex-direction:column;line-height:1.12}
.s13-f-ring__txt .wd-float__v{font-size:13px;color:var(--c-accent)}
.s13-f-leads{position:absolute;bottom:4%;left:-5%;z-index:6}
.s13-f-conv{position:absolute;top:1%;right:-5%;z-index:6}
.s13-f-rev{position:absolute;top:38%;right:-6%;z-index:6}
.s13-f-rating{position:absolute;bottom:2%;right:-5%;z-index:6}
.s13__stage .wd-float{width:auto;min-width:130px}
.s13__stage .wd-float .ma-stars{font-size:11px}

/* platform logo cluster below preview */
.s13__cluster{position:relative;z-index:3;margin-top:clamp(20px,2.4vw,30px)}
.s13__nodes{display:grid;grid-template-columns:repeat(3,auto);gap:clamp(12px,1.6vw,20px);justify-content:center}
.s13__conn-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.s13__rings{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);width:78%;height:60px;z-index:0;pointer-events:none;
  border-radius:50%;border:1px solid var(--void-line-green);
  box-shadow:0 0 40px -10px var(--green-glow),inset 0 0 30px -14px var(--green-glow);opacity:.6}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1180px){
  .s13__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,46px)}
  .s13__stage,.s13__cluster{display:none}
  .s13__panel{max-width:640px}
}
@media (max-width:900px){
  .s13__checks{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .s13__grid{grid-template-columns:1fr}
  .s13__copy{align-self:auto}
  .s13__lead,.s13__trust{max-width:none}
  .s13__panel{max-width:100%}
}
@media (max-width:620px){
  .s13 .ma-form__grid{grid-template-columns:1fr}
  .s13__radios{grid-template-columns:1fr}
  .s13__checks{grid-template-columns:1fr}
  .s13__panel{padding:18px 15px;border-radius:22px}
  .s13__trust{grid-template-columns:1fr 1fr}
}
@media (max-width:420px){
  .s13__trust{grid-template-columns:1fr}
  .s13__title{font-size:clamp(36px,12vw,48px)}
}
/* SECTIONS-CSS-INSERT */

/* ============================================================
   S5 TYPOGRAPHY — scoped to .s5 ONLY. Typography only; no colors,
   layout, cards, animation, spacing or content changed.
   Now on the licensed Neue Haas Grotesk system (same as the rest of the
   page): TITLES = Display Pro (line 1 "WHAT MAKES OUR WEBSITES" = 75 Bold,
   line 2 "DIFFERENT" = 95 Black), tagline/card body = Text Pro. Tracking
   relaxed to -.01em so it reads premium, not condensed. No PP Neue Montreal
   / Avenir Next / Space Grotesk / Inter anywhere.
   ============================================================ */
.s5{
  --s5-display:var(--font-display);
  --s5-body:var(--font-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
/* eyebrow / brand — small label stays JetBrains Mono, a touch more air */
.s5 .s5__brand{margin-bottom:30px}
/* widen the (scoped) centred head so line 1 sits comfortably — .s5 ONLY */
.s5 .ma-head--center{max-width:1200px}
/* main headline — TWO deliberate lines, perfectly centred:
   line 1  WHAT MAKES OUR WEBSITES  (white)
   line 2  DIFFERENT                (green hero word, larger)
   Neue Haas Display Pro, ALL CAPS, tracking -.01em, tight leading. */
.s5 .s5__title{font-family:var(--s5-display);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:.98;white-space:normal;text-wrap:balance}
/* line 1 — Display Pro 75 Bold, white; the .ma-line span is the whole first line */
.s5 .s5__title .ma-line{display:inline;font-family:var(--s5-display);font-weight:700;font-size:clamp(34px,4.55vw,62px);line-height:.98;letter-spacing:-.01em;color:#fff}
/* line 2 — DIFFERENT: the hero word. Bigger, with a subtle premium green
   gradient (soft raking angle, brand-forward) and only a whisper of ambient
   glow — deliberately NOT a bright neon effect. Static (timeless), not animated. */
.s5 .s5__title .s5__diff{display:block;margin-top:.26em;font-family:var(--s5-display);font-weight:900;font-size:clamp(46px,6vw,82px);line-height:1;letter-spacing:-.01em;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-image:linear-gradient(162deg,#74EDB0 0%,#27F58C 52%,#18B978 100%);background-size:100% 100%;animation:none;
  filter:drop-shadow(0 4px 18px rgba(39,245,140,.12))}
/* mobile — natural wrapping; keep DIFFERENT dominant */
@media (max-width:820px){.s5 .ma-head--center{max-width:640px}}
@media (max-width:520px){
  .s5 .s5__title .ma-line{font-size:clamp(28px,7.4vw,40px)}
  .s5 .s5__title .s5__diff{font-size:clamp(40px,11vw,58px);margin-top:.16em}
}
/* tagline — Neue Haas Text Pro, readable premium measure (22 / 18 / 17) */
.s5 .s5__sub{font-family:var(--s5-body);font-weight:500;font-size:22px;line-height:1.65;letter-spacing:0;max-width:700px;margin-top:32px;color:var(--c-ink);opacity:.9;text-wrap:pretty}
@media (max-width:1024px){.s5 .s5__sub{font-size:18px}}
@media (max-width:600px){.s5 .s5__sub{font-size:17px}}
/* card titles — Neue Haas Display Pro, Sentence case, weight 700, 18–20px */
.s5 .s5-card__t{font-family:var(--s5-display);font-weight:700;font-size:clamp(18px,1.5vw,20px);line-height:1.12;letter-spacing:-.015em;text-wrap:balance;margin-top:14px}
/* card body — Neue Haas Text Pro, very readable (18 / 1.75) */
.s5 .s5-card__d{font-family:var(--s5-body);font-weight:500;font-size:18px;line-height:1.75;letter-spacing:-.002em;margin-top:10px;text-wrap:pretty}
/* more breathing room between the head and the cards */
.s5 .s5__grid{margin-top:clamp(54px,7vw,92px)}



/* ===== THE FULL COLLECTION (gallery) — namespaced dmg-, uses page tokens ===== */
.dmg{position:relative;background:linear-gradient(180deg,var(--void),#060c10 55%,var(--void))}
.dmg__bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(90% 50% at 50% 0,rgba(39,245,140,.08),transparent 60%)}
.dmg__inner{position:relative;z-index:2;max-width:var(--max-wide,1440px);margin:0 auto;padding:0 var(--gutter,40px)}
.dmg__head{text-align:center;max-width:780px;margin:0 auto clamp(34px,5vw,60px)}
.dmg__eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--green);padding:8px 16px;border:1px solid var(--void-line-green);
  border-radius:999px;background:rgba(39,245,140,.05)}
.dmg__dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green-glow)}
.dmg__title{margin:clamp(16px,2vw,24px) 0 0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  line-height:.96;letter-spacing:-.01em;color:var(--void-ink);font-size:clamp(32px,5.2vw,64px)}
.dmg__title span{color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(102deg,#d6fce9,var(--green) 50%,var(--green-bright,#3BFF9C));filter:drop-shadow(0 0 26px rgba(39,245,140,.4))}
.dmg__sub{margin:clamp(14px,1.8vw,20px) auto 0;max-width:600px;font-size:clamp(15px,1.6vw,18px);line-height:1.6;color:var(--void-ink-2)}
.dmg__sub b{color:var(--green);font-weight:600}
.dmg__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,26px)}
.dmg-card{position:relative;border-radius:16px;overflow:hidden;background:var(--void-panel);
  border:1px solid var(--void-line);box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
  transition:transform .4s var(--ease-out,cubic-bezier(.16,1,.3,1)),box-shadow .4s ease,border-color .4s ease}
@media (hover:hover){.dmg-card:hover{transform:translateY(-7px);border-color:var(--void-line-green);
  box-shadow:0 50px 100px -44px rgba(0,0,0,.95),0 0 50px -22px var(--green-glow)}}
.dmg-card__bar{display:flex;align-items:center;gap:9px;padding:9px 13px;background:var(--void-panel-2);border-bottom:1px solid var(--void-line)}
.dmg-dots{display:flex;gap:5px;flex:none}.dmg-dots i{width:8px;height:8px;border-radius:50%;display:block}
.dmg-dots i:nth-child(1){background:#ff5f57}.dmg-dots i:nth-child(2){background:#febc2e}.dmg-dots i:nth-child(3){background:#28c840}
.dmg-url{flex:1;min-width:0;text-align:center;font-family:var(--font-mono);font-size:11px;color:var(--void-ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:rgba(0,0,0,.3);border:1px solid var(--void-line);
  border-radius:999px;padding:4px 12px;max-width:230px;margin:0 auto}
.dmg-card__screen{position:relative;aspect-ratio:720/322;overflow:hidden;background:#0a1015}
.dmg-card__screen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(150deg,rgba(255,255,255,.06),transparent 30%)}
.dmg-card__img{width:100%;height:100%;object-fit:contain;object-position:center top}
.dmg-card__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center top;opacity:0;transition:opacity .5s ease;z-index:2}
.dmg-card.is-playing .dmg-card__vid{opacity:1}
.dmg-card__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 15px;border-top:1px solid var(--void-line)}
.dmg-card__name{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--void-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dmg-card__ind{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--void-ink-3);white-space:nowrap;flex:none}
@media (max-width:1000px){.dmg__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.dmg__grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}.dmg-card__ind{display:none}}
@media (prefers-reduced-motion:reduce){.dmg-card__vid{display:none}}