/* ============================================================
   ds-site.css — DevStride marketing-site shared design system.
   Source of truth: the homepage editorial treatment (Chastin's).
   Every page links this ONE stylesheet. See guidelines/site-standard.md.
   Dark navy-glow heroes + warm-paper body + blue->green highlight.
   Never gold. Never PPM.
   ============================================================ */
:root {
  --navy:#060646; --blue:#0099FF; --blue-medium:#335DFF; --green:#00CE84;
  --red:#FF3355; --yellow:#FFBB00;
  --ink:#0d0d33; --body:#3c3c46; --muted:#8a8a93;
  --paper:#F7F6F2; --card:#FFFFFF; --line:#E4E2DB; --line-soft:#ECEAE3;
  --font:'Poppins',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --hero:radial-gradient(120% 130% at 12% 0%, #1a1a63 0%, #0b0b3d 46%, #060626 100%);
  --hero-center:radial-gradient(120% 130% at 50% 0%, #1a1a63 0%, #0b0b3d 46%, #060626 100%);
  /* floor lifted from #060626 to #0b0b3d so body dark bands stay lit, not muddy */
  --hero-lift:radial-gradient(120% 130% at 50% 0%, #1e1e6e 0%, #131357 48%, #0b0b3d 100%);
  --highlight:linear-gradient(92deg,#39a9ff 0%,#00d68c 100%);
  --num:linear-gradient(120deg,#0099FF 0%,#335DFF 100%);
  --wrap:1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font);color:var(--body);background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px;}
h1,h2,h3,h4{color:var(--ink);margin:0;letter-spacing:-0.025em;line-height:1.15;}
p{margin:0 0 16px;} a{color:inherit;text-decoration:none;}
.hl{background:var(--highlight);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-style:normal;}
/* subtle gradient sheen: the blue->green emphasis phrases gently drift color (seamless, reverses) */
.hl,.hero h1 em,.hero h1 .hl,.cta h2 em,.cta h2 .hl,.band-dark blockquote em,.band-dark .hl{background-size:200% auto;animation:hlsheen 7s ease-in-out infinite alternate;}
@keyframes hlsheen{from{background-position:0% center;}to{background-position:100% center;}}

/* consistent keyboard focus ring sitewide (a11y + polish) */
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px;}

/* buttons — one radius family (10px), primary lifts with a green glow */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:10px;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;transition:transform .1s ease,box-shadow .18s ease,background .15s ease,border-color .15s ease;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--green);color:var(--navy);box-shadow:0 1px 2px rgba(0,0,0,0.15),0 8px 20px rgba(0,206,132,0.22);}
.btn-primary:hover{box-shadow:0 2px 4px rgba(0,0,0,0.16),0 12px 28px rgba(0,206,132,0.30);}
.btn-ghost{background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.30);color:#fff;}
.btn-ghost:hover{background:rgba(255,255,255,0.16);border-color:rgba(255,255,255,0.42);}
.btn-navy{background:var(--navy);color:#fff;}
.btn-outline{background:transparent;border-color:var(--line);color:var(--ink);}
/* one eyebrow spec sitewide: 12px / 600 / 0.12em / uppercase */
.eyebrow{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.12em;color:var(--blue-medium);}

/* ---------- HERO (dark navy glow + aurora accent) ---------- */
/* Borrowed from Lovable's gradient hero, in DevStride's blue->green: a soft
   blue glow top-right and green glow bottom-left over the navy, low opacity. */
.top{position:relative;isolation:isolate;overflow:hidden;background:
  radial-gradient(68% 55% at 88% -15%, rgba(0,153,255,0.12), transparent 60%),
  radial-gradient(60% 50% at 4% 118%, rgba(0,206,132,0.09), transparent 60%),
  var(--hero);color:#fff;}
.top>*{position:relative;z-index:1;}
/* breathing aurora: two soft glow blobs that slowly drift (transform only, GPU-cheap) */
.top::before,.top::after{content:"";position:absolute;z-index:0;pointer-events:none;filter:blur(30px);will-change:transform;}
.top::before{top:-25%;right:-8%;width:58%;height:85%;background:radial-gradient(circle,rgba(0,153,255,0.22),transparent 62%);animation:auroraA 15s ease-in-out infinite alternate;}
.top::after{bottom:-30%;left:-10%;width:60%;height:85%;background:radial-gradient(circle,rgba(0,206,132,0.16),transparent 62%);animation:auroraB 19s ease-in-out infinite alternate;}
@keyframes auroraA{from{transform:translate(0,0) scale(1);}to{transform:translate(-7%,5%) scale(1.15);}}
@keyframes auroraB{from{transform:translate(0,0) scale(1.05);}to{transform:translate(8%,-5%) scale(1.2);}}

/* announcement pill — borrowed from Linear/Lovable ("New · X ->") */
.ann{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:500;color:rgba(255,255,255,0.82);background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);padding:5px 14px 5px 6px;border-radius:999px;margin-bottom:22px;transition:border-color .15s ease;}
.ann:hover{border-color:rgba(255,255,255,0.28);}
.ann .new{font-size:10.5px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:#fff;background:var(--num);padding:3px 9px;border-radius:999px;}
.ann .arr{color:rgba(255,255,255,0.55);font-size:15px;}
.hero{padding:66px 0 84px;display:grid;grid-template-columns:1.05fr 0.95fr;gap:54px;align-items:center;}
.hero.solo{grid-template-columns:1fr;max-width:820px;} /* text-only hero (no visual) */
.hero .crumb{font-size:13px;color:rgba(255,255,255,0.5);margin-bottom:18px;}
.hero .crumb a{color:rgba(255,255,255,0.72);} .hero .crumb a:hover{color:#fff;}
.hero .badge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#cfe0ff;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.16);padding:6px 13px;border-radius:999px;margin-bottom:22px;}
.hero .badge .dot{width:7px;height:7px;border-radius:50%;background:var(--green);}
.hero h1{color:#fff;font-size:64px;font-weight:700;letter-spacing:-0.03em;line-height:1.0;}
.hero h1 em,.hero h1 .hl{font-style:normal;background:var(--highlight);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.hero .lede{margin-top:24px;font-size:19px;line-height:1.55;color:rgba(255,255,255,0.76);max-width:48ch;}
.hero .actions{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap;}
.hero .microcopy{margin-top:16px;font-size:13.5px;color:rgba(255,255,255,0.6);}

/* hero glass mock (reusable product visual for heroes) */
.glass{background:linear-gradient(180deg,rgba(255,255,255,0.10),rgba(255,255,255,0.03));border:1px solid rgba(255,255,255,0.14);border-radius:18px;padding:16px;box-shadow:0 30px 70px rgba(0,0,0,0.45);backdrop-filter:blur(6px);position:relative;}
.glass .gh{display:flex;align-items:center;gap:8px;padding:4px 6px 12px;}
.glass .gh .d{width:10px;height:10px;border-radius:50%;} .gd1{background:#ff5f57;} .gd2{background:#febc2e;} .gd3{background:#28c840;}
.glass .gh .t{margin-left:8px;font-size:12px;color:rgba(255,255,255,0.55);font-weight:500;}
.rows{display:flex;flex-direction:column;gap:8px;}
.row{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:10px 12px;}
.row .pill{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;}
.p-prog{background:rgba(0,153,255,0.18);color:#7dc4ff;} .p-rev{background:rgba(250,137,86,0.18);color:#ffb488;} .p-done{background:rgba(0,206,132,0.18);color:#5fe3ad;} .p-new{background:rgba(128,107,255,0.18);color:#b3a6ff;}
.row .name{font-size:13px;color:rgba(255,255,255,0.86);flex:1;}
.row .who{width:22px;height:22px;border-radius:50%;font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;color:#fff;flex:none;}
.w-a{background:#335DFF;} .w-b{background:#00BE57;} .w-ai{background:var(--highlight);color:var(--navy);}
/* hero glass prompt line (homepage) */
.glass .prompt{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,0.28);border:1px solid rgba(255,255,255,0.12);border-radius:11px;padding:11px 13px;margin-bottom:12px;}
.glass .prompt .ai{width:22px;height:22px;border-radius:6px;background:var(--highlight);flex:none;}
.glass .prompt .txt{font-size:13.5px;color:rgba(255,255,255,0.9);}
.glass .prompt .cur{width:2px;height:15px;background:var(--green);animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
/* hero mock: rows cascade in after the prompt "types" (see index.vue) */
.glass .rows .row{opacity:0;animation:rowin .55s cubic-bezier(.2,.7,.2,1) forwards;}
.glass .rows .row:nth-child(1){animation-delay:.55s;}
.glass .rows .row:nth-child(2){animation-delay:.67s;}
.glass .rows .row:nth-child(3){animation-delay:.79s;}
.glass .rows .row:nth-child(4){animation-delay:.91s;}
.glass .rows .row:nth-child(5){animation-delay:1.03s;}
.glass .rows .row .pill{transition:background .35s ease,color .35s ease;}
@keyframes rowin{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* PLACEHOLDER visual — always carries a visible REPLACE ribbon */
.shot-ph{position:relative;border:1.5px dashed rgba(255,255,255,0.28);border-radius:16px;min-height:300px;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px 28px;background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));overflow:hidden;}
.shot-ph.light{border-color:#c9cbe0;background:#F2F1EC;}
.shot-ph .cap{font-size:13px;line-height:1.5;color:rgba(255,255,255,0.7);max-width:32ch;}
.shot-ph.light .cap{color:#8a8ca8;}
.shot-ph::before{content:"REPLACE · product capture pending";position:absolute;top:14px;left:50%;transform:translateX(-50%);font-size:10.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--navy);background:var(--yellow);padding:4px 12px;border-radius:999px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,0.25);}

/* replace-ribbon: drop into any rich illustrative mock that stands in for a
   real product capture, so the preview looks finished but the stand-in is obvious.
   Parent needs position:relative. */
.repl-ribbon{position:absolute;top:12px;right:12px;z-index:3;font-size:9px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:#8a6d00;background:rgba(255,187,0,0.16);border:1px solid rgba(255,187,0,0.34);padding:3px 9px;border-radius:999px;}

/* logo strip */
/* logo strip — light band so logos/names read (bg is white, not the dark hero) */
.strip{background:#ffffff;border-bottom:1px solid #ececec;}
.strip .wrap{display:flex;align-items:center;gap:16px 30px;flex-wrap:wrap;padding:22px 32px;}
.strip .lbl{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.12em;color:#8a8d9a;margin-right:6px;}
.strip .logo{font-size:15px;font-weight:600;color:#5b5b6b;}
/* Trust strip normalized to one ink tone so a ragged logo set reads as a set;
   color returns on hover. Per-logo max-height tunes optical weight (marks with
   baked-in taglines render larger so their wordmark stays legible). */
.strip .logo-chip{display:inline-flex;align-items:center;justify-content:center;height:30px;filter:grayscale(1);opacity:0.62;transition:opacity .15s ease,filter .15s ease,transform .15s ease;}
.strip .logo-chip:hover{filter:grayscale(0);opacity:1;transform:translateY(-1px);}
.strip .logo-chip img{max-height:24px;width:auto;max-width:132px;display:block;object-fit:contain;}
.strip .logo-chip[aria-label="Tenger Ways"] img{max-height:30px;}
.strip .logo-chip[aria-label="IntrapriseTechKnowlogies"] img{max-height:28px;}
.strip .logo-chip[aria-label="VCA Software"] img{max-height:21px;}
.strip .logo-chip[aria-label="Marias Technology"] img{max-height:28px;max-width:104px;}

/* ---------- BODY (warm paper) ---------- */
.pagebody{padding:72px 0 20px;}
/* varied vertical rhythm: default 72px, a tight 44px for a heading that leads
   straight into its own grid, and the full gap reserved around dark bands/CTAs. */
section{margin-bottom:72px;}
.section--tight{margin-bottom:44px;}
section:has(.band-dark),section:has(.cta){margin-top:16px;margin-bottom:88px;}
.sechead{margin-bottom:40px;max-width:820px;}
.sechead.center{margin-left:auto;margin-right:auto;text-align:center;}
/* keep the supporting paragraph at a readable measure even as the heading goes wider */
.sechead.center p{max-width:66ch;margin-left:auto;margin-right:auto;}
.sechead .eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.sechead .eyebrow::after{content:"";flex:1;height:1px;background:var(--line);}
.sechead.center .eyebrow{justify-content:center;} .sechead.center .eyebrow::after,.sechead.center .eyebrow::before{content:"";flex:1;height:1px;background:var(--line);}
h2.sec{font-size:34px;font-weight:700;letter-spacing:-0.03em;line-height:1.1;}
.sechead p{font-size:17px;color:var(--body);margin:16px 0 0;max-width:62ch;}

/* dark accent band (origin / cta / any dark moment in the warm body) —
   carries the hero's signature aurora so every dark moment glows, not just the top. */
.band-dark{background:
  radial-gradient(68% 60% at 88% -20%, rgba(0,153,255,0.18), transparent 62%),
  radial-gradient(62% 55% at 4% 120%, rgba(0,206,132,0.13), transparent 62%),
  var(--hero-lift);color:#fff;border-radius:20px;padding:52px 56px;}
.band-dark .eyebrow{color:#6da8ff;margin-bottom:18px;}
.band-dark blockquote{margin:0;font-size:26px;line-height:1.4;font-weight:500;color:#fff;letter-spacing:-0.015em;max-width:44ch;}
.band-dark blockquote em,.band-dark .hl{font-style:normal;background:var(--highlight);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.band-dark .by{margin-top:20px;font-size:14px;color:rgba(255,255,255,0.6);}
.band-dark .after{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,0.14);font-size:16px;color:rgba(255,255,255,0.78);max-width:58ch;}

/* card grid — one unified elevation sitewide (hairline + whisper shadow), lifts on hover */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.cards.two{grid-template-columns:repeat(2,1fr);}
.card{background:var(--card);border:1px solid var(--line-soft);border-radius:14px;padding:26px 24px 24px;box-shadow:0 1px 2px rgba(6,6,70,0.04),0 8px 24px rgba(6,6,70,0.04);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.card:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(6,6,70,0.05),0 16px 40px rgba(6,6,70,0.08);border-color:#d9d7cf;}
.card .ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-size:18px;font-weight:700;}
.card h4,.card h3{font-size:16.5px;line-height:1.3;letter-spacing:0;margin-bottom:6px;color:var(--ink);} .card p{font-size:14.5px;color:var(--body);margin:0;}
.card .tag{display:inline-block;margin-top:10px;font-size:11px;font-weight:600;color:var(--green);background:rgba(0,190,87,0.10);padding:3px 9px;border-radius:999px;}

/* two-col feature block (text + card/visual) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;}
.proofcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 28px;box-shadow:0 10px 30px rgba(6,6,70,0.05);}
.proofcard .k{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.12em;color:var(--blue-medium);margin-bottom:12px;}
.proofcard p{font-size:15px;color:var(--body);}
.proofcard .q{font-size:17px;color:var(--ink);font-weight:500;line-height:1.5;border-left:2px solid var(--blue-medium);padding-left:18px;margin-top:16px;}

/* alternating feature rows (text + product shot) */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:8px 0;}
.frow+.frow{margin-top:52px;}
.frow.flip .txt{order:2;} .frow.flip .fvis{order:1;}
.frow .txt .k{font-size:12px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--blue-medium);margin-bottom:10px;}
.frow .txt h3{font-size:22px;font-weight:700;letter-spacing:-0.02em;line-height:1.2;color:var(--ink);margin-bottom:12px;}
.frow .txt p{font-size:15.5px;line-height:1.6;color:var(--body);}

/* feature rows whose visual is still a pending placeholder: hide the placeholder
   and collapse to a clean single-column text block (no empty "REPLACE" boxes). */
.frow:has(.shot-ph){grid-template-columns:1fr;}
.frow:has(.shot-ph) .fvis{display:none;}
.frow:has(.shot-ph) .txt{max-width:820px;margin:0 auto;}

/* feature list (gradient markers) */
.feat-list{list-style:none;margin:22px 0 0;padding:0;}
.feat-list li{position:relative;padding:12px 0 12px 30px;border-bottom:1px solid var(--line-soft);font-size:15.5px;color:var(--ink);}
.feat-list li:last-child{border-bottom:none;}
.feat-list li::before{content:"";position:absolute;left:0;top:18px;width:14px;height:14px;border-radius:4px;background:var(--num);}
.feat-list li b{color:var(--ink);}

/* stat row (metrics — shown as signed per the preview manifest) */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.stat .n{font-size:40px;font-weight:700;letter-spacing:-0.03em;background:var(--num);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1.1;}
.stat .l{font-size:14px;color:var(--body);margin-top:6px;}

/* category (not-this / not-this / DevStride) */
.cat{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
.cat .c{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--card);}
.cat .c.no{border-style:dashed;} .cat .c.yes{border-color:#BFE4FF;background:#FBFDFF;}
.cat .c .t{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:8px;}
.cat .c.no .t{color:#b0525f;} .cat .c.yes .t{color:var(--blue-medium);}
.cat .c p{font-size:14.5px;margin:0;color:var(--body);} .cat .c.yes p{color:var(--ink);font-weight:500;}

/* ---------- real product screenshots (framed app captures) ---------- */
/* Large screenshot sitting under a centered hero on the dark band, with a soft
   blue/green glow behind it so it reads as placed, not pasted. */
.hero-shot{position:relative;max-width:1060px;margin:32px auto 0;z-index:1;}
/* tighten the space around a hero screenshot: less air between headline and shot,
   and pull the warm-paper body up close under the shot (was a big empty gap). */
.hero.solo:has(+ .hero-shot){padding-bottom:12px;}
/* Dark breathing room BELOW the hero screenshot so it never touches whatever comes
   next: the warm-paper body on module pages, or the trust ribbon on /platform. */
.wrap:has(.hero-shot){padding-bottom:52px;}
.top:has(.hero-shot) + .pagebody{padding-top:28px;}
.hero-shot::before{content:"";position:absolute;inset:-12% -6% -18%;z-index:-1;pointer-events:none;filter:blur(30px);
  background:radial-gradient(58% 62% at 50% 6%, rgba(0,153,255,0.22), transparent 70%),radial-gradient(46% 50% at 84% 104%, rgba(0,206,132,0.15), transparent 70%);}
.appshot{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,0.14);background:#0d0d1a;
  box-shadow:0 2px 6px rgba(0,0,0,0.35), 0 34px 80px rgba(0,0,0,0.5);}
.appshot img{display:block;width:100%;height:auto;}
/* same frame when a screenshot sits on the warm-paper body instead of a dark band */
.bodyshot{max-width:1000px;margin:0 auto;}
.bodyshot .appshot{border-color:var(--line);box-shadow:0 2px 4px rgba(6,6,70,0.06), 0 26px 64px rgba(6,6,70,0.16);}
.appshot.inset{max-width:620px;margin:0 auto;}
/* screenshot framed for the warm-paper body (feature rows): light border, navy-tinted lift */
.appshot--paper{border-color:var(--line);background:#fff;box-shadow:0 2px 4px rgba(6,6,70,0.06), 0 18px 44px rgba(6,6,70,0.14);}

/* guardrails closing line (centered emphasis under the guardrail cards) */
.guardrail-close{text-align:center;margin-top:32px;font-size:23px;font-weight:600;color:var(--ink);letter-spacing:-0.012em;}

/* wedge / start band */
.start{display:flex;align-items:center;justify-content:space-between;gap:30px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px 36px;flex-wrap:wrap;}
.start .t{font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-0.02em;} .start .s{font-size:15px;color:var(--body);margin-top:4px;}

/* named-customer proof card */
.proof-named{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 28px;}
.proof-named .badge{display:inline-block;font-size:11px;font-weight:600;color:var(--blue-medium);background:#EAF1FF;border:1px solid #D6E2FF;padding:4px 10px;border-radius:999px;margin-bottom:14px;}
.proof-named h4{font-size:18px;margin-bottom:8px;color:var(--ink);} .proof-named p{font-size:14.5px;margin:0;color:var(--body);}
.pull{font-size:26px;line-height:1.4;color:var(--ink);font-weight:500;letter-spacing:-0.01em;}

/* closing CTA (dark) — same signature aurora + lifted floor as the hero */
.cta{background:
  radial-gradient(60% 60% at 50% -20%, rgba(0,153,255,0.18), transparent 62%),
  radial-gradient(70% 60% at 8% 120%, rgba(0,206,132,0.13), transparent 62%),
  var(--hero-lift);color:#fff;border-radius:20px;padding:64px 56px;text-align:center;}
.cta h2{color:#fff;font-size:40px;letter-spacing:-0.03em;line-height:1.1;} .cta h2 em,.cta h2 .hl{font-style:normal;background:var(--highlight);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.cta .s{margin-top:14px;font-size:19px;color:rgba(255,255,255,0.78);max-width:52ch;margin-left:auto;margin-right:auto;} .cta .actions{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.cta .reassure{margin-top:18px;font-size:13.5px;color:rgba(255,255,255,0.6);}

/* walkthrough request form (sits on the dark .cta card) */
.demo-form{max-width:520px;margin:30px auto 0;text-align:left;display:flex;flex-direction:column;gap:16px;}
/* reset: the glass-mock `.row` style (border/bg/padding) must not bleed onto the form's row */
.demo-form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:none;border:0;border-radius:0;padding:0;}
.demo-form label{display:flex;flex-direction:column;gap:7px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,0.82);}
.demo-form label i{font-style:normal;font-weight:400;color:rgba(255,255,255,0.5);}
.demo-form input,.demo-form textarea{font-family:var(--font);font-size:15px;color:#fff;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.2);border-radius:11px;padding:12px 14px;transition:border-color .15s ease,background .15s ease;}
.demo-form input::placeholder,.demo-form textarea::placeholder{color:rgba(255,255,255,0.4);}
.demo-form input:focus,.demo-form textarea:focus{outline:none;border-color:var(--green);background:rgba(255,255,255,0.1);}
.demo-form textarea{resize:vertical;min-height:76px;}
.demo-form .actions{margin-top:4px;justify-content:center;}
.demo-form .btn-primary[disabled]{opacity:.6;cursor:default;transform:none;}
.form-status{margin:2px 0 0;font-size:14px;min-height:20px;color:rgba(255,255,255,0.85);text-align:center;}
.form-status.error{color:#ffd0d8;}
.form-status.ok{color:var(--green);font-weight:600;}

/* honor reduced-motion: no drift, no shimmer, no staggered entrance */
@media (prefers-reduced-motion: reduce){
  .top::before,.top::after,.glass .rows .row,
  .hl,.hero h1 em,.hero h1 .hl,.cta h2 em,.cta h2 .hl,.band-dark blockquote em,.band-dark .hl{animation:none !important;}
  .glass .rows .row{opacity:1 !important;}
}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:40px;} .hero h1{font-size:42px;}
  .split,.who-grid,.frow{grid-template-columns:1fr;gap:28px;}
  .frow.flip .txt{order:1;} .frow.flip .fvis{order:2;}
  .cards,.cards.two,.cat,.stats{grid-template-columns:1fr;}
  h2.sec{font-size:30px;} .band-dark,.cta{padding:36px 28px;} .band-dark blockquote{font-size:22px;}
  .demo-form .row{grid-template-columns:1fr;}
  .wrap{padding:0 22px;}
}