@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --violet-50: oklch(0.975 0.012 293); --violet-100: oklch(0.95 0.03 293);
  --violet-200: oklch(0.90 0.06 293);  --violet-300: oklch(0.80 0.11 293);
  --violet-400: oklch(0.68 0.17 293);  --violet-500: oklch(0.585 0.21 293);
  --violet-600: oklch(0.52 0.23 293);  --violet-700: oklch(0.45 0.205 293);
  --violet-800: oklch(0.37 0.16 293);  --violet-900: oklch(0.28 0.10 293);
  --magenta: oklch(0.585 0.21 333); --indigo: oklch(0.585 0.17 268); --teal: oklch(0.66 0.13 195);
  --up: oklch(0.64 0.15 156); --down: oklch(0.60 0.20 26); --amber: oklch(0.72 0.16 70);
  --bg: oklch(0.984 0.004 290); --surface: oklch(1 0 0); --surface-2: oklch(0.985 0.005 290);
  --ink: oklch(0.24 0.02 290); --ink-2: oklch(0.40 0.018 290); --muted: oklch(0.55 0.014 290);
  --faint: oklch(0.70 0.01 290); --line: oklch(0.925 0.006 290); --line-2: oklch(0.955 0.005 290);
  --shadow-sm: 0 1px 2px oklch(0.4 0.03 293 / 0.06), 0 1px 1px oklch(0.4 0.03 293 / 0.04);
  --shadow: 0 4px 14px oklch(0.4 0.05 293 / 0.07), 0 1px 3px oklch(0.4 0.05 293 / 0.05);
  --shadow-lg: 0 18px 44px oklch(0.4 0.06 293 / 0.12), 0 4px 12px oklch(0.4 0.05 293 / 0.07);
  --shadow-violet: 0 12px 30px oklch(0.52 0.23 293 / 0.30);
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-ui: 'Manrope', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-ui); color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.num { font-family: var(--font-display); font-feature-settings: 'tnum' 1; letter-spacing: -0.01em; }
.disp { font-family: var(--font-display); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet-600); }
.seclabel { font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 11px;
  font-weight: 600; font-size: 14.5px; cursor: pointer; font-family: var(--font-display); border: none; transition: transform .14s, box-shadow .14s; }
.btn svg { width: 17px; height: 17px; }
.btn.primary { background: var(--violet-600); color: #fff; box-shadow: var(--shadow-violet); }
.btn.primary:hover { transform: translateY(-1px); box-shadow: 0 16px 36px oklch(0.52 0.23 293 / 0.38); }
.btn.ghost { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--violet-300); color: var(--violet-700); }
.btn.lite { background: oklch(1 0 0 / 0.10); color: #fff; border: 1px solid oklch(1 0 0 / 0.20); backdrop-filter: blur(4px); }
.btn.lite:hover { background: oklch(1 0 0 / 0.16); }
.btn.sm { padding: 9px 15px; font-size: 13px; border-radius: 9px; }

/* ---- pills / chips ---- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 700; font-family: var(--font-display); }
.pill.violet { background: var(--violet-50); color: var(--violet-700); border: 1px solid var(--violet-200); }
.pill.up { background: oklch(0.64 0.15 156 / 0.12); color: var(--up); }
.pill.neutral { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.statusdot { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); font-family: var(--font-display); }
.statusdot i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

.avatar { border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; flex-shrink: 0; }
.chchip { border-radius: 7px; color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; flex-shrink: 0; }

.brandmark { width: 34px; height: 34px; border-radius: 10px; position: relative; flex-shrink: 0;
  background: linear-gradient(140deg, var(--violet-400), var(--magenta)); box-shadow: 0 6px 16px oklch(0.52 0.23 293 / 0.34); }
.brandmark::after { content: ''; position: absolute; inset: 10px; border-radius: 50%; border: 2.5px solid #fff; border-right-color: transparent; }

/* ---- card ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); }

/* ============ NAV ============ */
.nav { position: sticky; top: 0; z-index: 50; background: oklch(1 0 0 / 0.82); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line); }
.nav .navrow { display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; height: 68px; }
.nav .brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: 0.01em; }
.nav .links { margin-left: 24px; display: flex; gap: 4px; }
.nav .links a { padding: 8px 14px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.nav .links a:hover { background: var(--violet-50); color: var(--violet-700); }
.nav .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav .right a.login { font-size: 14px; font-weight: 600; color: var(--ink-2); padding: 8px 12px; }
.nav .right a.login:hover { color: var(--violet-700); }

/* ============ HERO ============ */
.hero { position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(120% 90% at 90% -6%, oklch(0.585 0.21 333 / 0.20), transparent 54%),
    radial-gradient(130% 120% at -8% 110%, oklch(0.585 0.21 293 / 0.26), transparent 52%),
    linear-gradient(158deg, oklch(0.30 0.10 293), oklch(0.205 0.065 290)); }
.hero::before { content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(oklch(1 0 0 / 0.04) 1px, transparent 1px), linear-gradient(90deg, oklch(1 0 0 / 0.04) 1px, transparent 1px);
  background-size: 46px 46px; mask-image: radial-gradient(80% 70% at 50% 30%, #000, transparent 75%); }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
  padding-top: 92px; padding-bottom: 100px; }
.hero h1 { font-size: 58px; line-height: 1.04; color: #fff; letter-spacing: -0.03em; }
.hero h1 .grad { background: linear-gradient(100deg, oklch(0.85 0.13 320), oklch(0.82 0.12 280)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { font-size: 18.5px; line-height: 1.6; color: oklch(0.9 0.025 293); margin-top: 22px; max-width: 520px; }
.hero .ctas { display: flex; gap: 13px; margin-top: 34px; flex-wrap: wrap; }
.hero .trust { display: flex; align-items: center; gap: 10px; margin-top: 30px; font-size: 13px; color: oklch(0.82 0.03 293); font-weight: 600; }
.hero .eyebrow { color: oklch(0.85 0.09 320); }

/* hero product card */
.actcard { background: oklch(1 0 0 / 0.06); border: 1px solid oklch(1 0 0 / 0.14); border-radius: 22px; padding: 18px;
  backdrop-filter: blur(8px); box-shadow: 0 30px 70px oklch(0.2 0.08 290 / 0.5); }
.actcard .inner { background: var(--surface); border-radius: 15px; overflow: hidden; box-shadow: var(--shadow); }
.actcard .hd { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-bottom: 1px solid var(--line); }
.post { padding: 16px; }
.post .body { font-size: 14.5px; color: var(--ink); line-height: 1.55; font-weight: 500; }
.post .meta { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line-2); display: flex; align-items: center; gap: 9px; }
.float-pill { position: absolute; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  border-radius: 13px; padding: 11px 14px; display: flex; align-items: center; gap: 10px; }

/* ============ SECTIONS ============ */
.section { padding: 96px 0; }
.section.alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feat { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.feat.flip .copy { order: 2; }
.feat .copy h2 { font-size: 38px; line-height: 1.1; margin-top: 14px; }
.feat .copy p.d { font-size: 17px; color: var(--ink-2); line-height: 1.62; margin-top: 18px; }
.feat .copy { min-width: 0; }
.feat .vis { min-width: 0; }

ul.checks { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 13px; }
ul.checks li { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
ul.checks li .ck { flex-shrink: 0; width: 24px; height: 24px; border-radius: 8px; background: oklch(0.64 0.15 156 / 0.13);
  color: var(--up); display: grid; place-items: center; margin-top: 1px; }
ul.checks li .ck svg { width: 14px; height: 14px; }

.steps { display: flex; align-items: center; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.step { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--ink-2); }
.step .n { width: 24px; height: 24px; border-radius: 50%; background: var(--violet-600); color: #fff; display: grid; place-items: center; font-size: 12px; box-shadow: var(--shadow-violet); }
.step .sep { color: var(--faint); }

/* product visuals */
.pcard { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; }
.pcard .ph { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.pcard .pb { padding: 18px; }

/* compose */
.compose-field { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--surface-2); font-size: 14.5px; line-height: 1.55; color: var(--ink); font-weight: 500; }
.tagrow { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }

/* chat thread */
.thread { display: flex; flex-direction: column; gap: 12px; }
.bub { max-width: 78%; font-size: 14px; line-height: 1.5; padding: 11px 14px; border-radius: 15px; font-weight: 500; }
.bub.them { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 4px; }
.bub.us { align-self: flex-end; background: var(--violet-100); border: 1px solid var(--violet-200); color: var(--ink); border-bottom-right-radius: 4px; }
.bubwrap { display: flex; gap: 10px; align-items: flex-end; }
.bubwrap.us { flex-direction: row-reverse; align-self: flex-end; }

/* sliders */
.slider { margin-bottom: 18px; }
.slider .lab { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 9px; font-family: var(--font-display); }
.track { height: 7px; border-radius: 999px; background: var(--violet-50); position: relative; }
.track .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, var(--violet-500), var(--magenta)); }
.track .knob { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--violet-500); transform: translate(-50%, -50%); box-shadow: var(--shadow-sm); }

/* stats */
.statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 22px; }
.stat .v { font-family: var(--font-display); font-weight: 700; font-size: 38px; letter-spacing: -0.02em; }
.stat .k { font-size: 13px; color: var(--muted); font-weight: 700; margin-top: 4px; }

/* integrations */
.intg { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 40px; }
.intg .node { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.intg .tile { width: 92px; height: 92px; border-radius: 22px; display: grid; place-items: center; box-shadow: var(--shadow); }
.intg .tile .chchip { width: 46px; height: 46px; font-size: 23px; border-radius: 13px; }
.intg .node .nm { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--ink-2); }

/* final CTA */
.finalcta { position: relative; overflow: hidden; border-radius: 28px; color: #fff; padding: 72px 56px; text-align: center;
  background:
    radial-gradient(100% 120% at 88% -10%, oklch(0.585 0.21 333 / 0.30), transparent 55%),
    linear-gradient(150deg, oklch(0.45 0.205 293), oklch(0.30 0.11 290)); box-shadow: var(--shadow-lg); }
.finalcta h2 { font-size: 42px; line-height: 1.08; color: #fff; }
.finalcta p { font-size: 18px; color: oklch(0.9 0.03 293); margin-top: 16px; max-width: 560px; margin-left: auto; margin-right: auto; }

/* footer */
.footer { background: var(--surface); border-top: 1px solid var(--line); padding: 56px 0 40px; }
.footer .top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer .links { display: flex; gap: 28px; flex-wrap: wrap; }
.footer .links a { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.footer .links a:hover { color: var(--violet-700); }
.footer .social { display: flex; gap: 10px; }
.footer .social a { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); }
.footer .social a:hover { border-color: var(--violet-300); color: var(--violet-700); background: var(--violet-50); }
.footer .bot { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line-2); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--faint); font-family: var(--font-display); }

.center { text-align: center; max-width: 680px; margin: 0 auto; }
.center h2 { font-size: 40px; line-height: 1.1; margin-top: 14px; }
.center p.d { font-size: 17.5px; color: var(--ink-2); margin-top: 16px; }

@media (max-width: 920px) {
  .hero .wrap, .feat { grid-template-columns: 1fr; gap: 40px; }
  .feat.flip .copy { order: 0; }
  .nav .links { display: none; }
  .hero h1 { font-size: 44px; } .feat .copy h2 { font-size: 30px; }
  .section { padding: 64px 0; } .statgrid { grid-template-columns: 1fr; }
  .finalcta { padding: 52px 28px; } .finalcta h2 { font-size: 32px; }
  .cfg-body { grid-template-columns: 1fr !important; }
  .cfg-2 { grid-template-columns: 1fr !important; }
}

/* ============ CONDENSED AGENT CONFIGURE (Build section) ============ */
.appframe { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); background: var(--bg); }
.appbar { display: flex; align-items: center; gap: 13px; padding: 14px 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
.appbar .back { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); display: grid; place-items: center; transform: scaleX(-1); }
.appbar .back svg { width: 17px; height: 17px; }
.appbar .crumbtxt { font-size: 13px; color: var(--muted); font-weight: 600; font-family: var(--font-display); }
.appbar h3 { font-size: 18px; font-weight: 600; }
.cfg-body { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; padding: 20px; align-items: start; }
.cfg-col { display: flex; flex-direction: column; gap: 16px; }
.ccrd { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 18px; }
.ccrd .sl { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.cfg-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field-lab { font-size: 12px; font-weight: 700; color: var(--ink-2); font-family: var(--font-display); margin-bottom: 7px; display: block; }
.finput { border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; background: var(--surface-2); font-size: 14px; font-weight: 500; color: var(--ink); display: flex; align-items: center; }
.finput.area { min-height: 56px; align-items: flex-start; color: var(--ink-2); font-weight: 500; line-height: 1.5; }
.fcount { font-size: 11px; color: var(--faint); font-weight: 600; font-family: var(--font-display); }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; width: 100%; }
.seg span { flex: 1; text-align: center; padding: 7px 6px; border-radius: 8px; font-size: 12px; font-weight: 600; font-family: var(--font-display); color: var(--muted); }
.seg span.on { background: var(--surface); color: var(--violet-700); box-shadow: var(--shadow-sm); }
.hintrow { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 11px; background: var(--violet-50); border: 1px solid var(--violet-200); }
.hintrow svg { width: 17px; height: 17px; color: var(--violet-600); flex-shrink: 0; }
.hintrow span { font-size: 12.5px; font-weight: 600; color: var(--violet-800); }
.trow { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); }
.trow.on { border-color: var(--violet-200); background: var(--violet-50); }
.trow .tic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; background: var(--surface); border: 1px solid var(--line); color: var(--violet-500); }
.trow.on .tic { color: var(--violet-600); border-color: var(--violet-200); }
.trow .tic svg { width: 16px; height: 16px; }
.trow .tt { flex: 1; min-width: 0; }
.trow .tt .a { font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.trow .tt .b { font-size: 10.5px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.switch { width: 36px; height: 21px; border-radius: 999px; background: var(--line); position: relative; flex-shrink: 0; transition: background .14s; }
.switch.on { background: var(--violet-600); }
.switch i { position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: left .14s; }
.switch.on i { left: 17.5px; }
.chrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); }
.chrow.on { border-color: var(--violet-200); background: var(--violet-50); }
.chrow .nm { font-size: 13px; font-weight: 700; flex: 1; }
.checkrow { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.checkrow .cc { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.checkrow .cc.ok { background: oklch(0.64 0.15 156 / 0.14); color: var(--up); }
.checkrow .cc svg { width: 13px; height: 13px; }
.deploybtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: 9px; border: none; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 13.5px; background: var(--violet-600); color: #fff; box-shadow: var(--shadow-violet); }
.deploybtn svg { width: 16px; height: 16px; }

/* ============ NAV ACTIVE LINK ============ */
.nav .links a.active { background: var(--violet-50); color: var(--violet-700); }

/* ============ SUBHERO (interior page header) ============ */
.subhero { position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(120% 90% at 90% -6%, oklch(0.585 0.21 333 / 0.20), transparent 54%),
    radial-gradient(130% 120% at -8% 110%, oklch(0.585 0.21 293 / 0.26), transparent 52%),
    linear-gradient(158deg, oklch(0.30 0.10 293), oklch(0.205 0.065 290)); }
.subhero::before { content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(oklch(1 0 0 / 0.04) 1px, transparent 1px), linear-gradient(90deg, oklch(1 0 0 / 0.04) 1px, transparent 1px);
  background-size: 46px 46px; mask-image: radial-gradient(80% 80% at 50% 20%, #000, transparent 78%); }
.subhero .wrap { position: relative; padding-top: 64px; padding-bottom: 72px; }
.subhero h1 { font-size: 46px; line-height: 1.06; color: #fff; letter-spacing: -0.03em; margin-top: 14px; }
.subhero .lead { font-size: 18px; line-height: 1.6; color: oklch(0.9 0.025 293); margin-top: 18px; max-width: 560px; }
.subhero .eyebrow { color: oklch(0.85 0.09 320); }
.crumb { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 13px; color: oklch(0.82 0.04 293); }
.crumb a { color: oklch(0.82 0.04 293); }
.crumb a:hover { color: #fff; }

/* ============ CONTACT CARDS ============ */
.cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ccard { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); padding: 26px; }
.ccard .cic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--violet-50); color: var(--violet-600); border: 1px solid var(--violet-200); }
.ccard .cic svg { width: 22px; height: 22px; }
.ccard .lbl { font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 16px; }
.ccard .val { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--ink); margin-top: 8px; letter-spacing: -0.01em; }
.ccard a.val:hover { color: var(--violet-700); }
.ccard .sub { font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 8px; }

/* ============ ABOUT · VALUE CARDS ============ */
.vgrid { display: grid; gap: 16px; }
.vcard { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 22px; }
.vcard .vic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--violet-50); color: var(--violet-600); border: 1px solid var(--violet-200); }
.vcard .vic svg { width: 20px; height: 20px; }
.vcard h3 { font-size: 18px; margin-top: 14px; }
.vcard p { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; margin-top: 8px; }

/* ============ ABOUT · REACH BAND ============ */
.reach { position: relative; overflow: hidden; border-radius: 28px; padding: 48px; box-shadow: var(--shadow-lg);
  background:
    radial-gradient(100% 120% at 88% -10%, oklch(0.585 0.21 333 / 0.30), transparent 55%),
    linear-gradient(150deg, oklch(0.45 0.205 293), oklch(0.30 0.11 290)); }
.reach .dots { position: absolute; inset: 0;
  background-image: radial-gradient(oklch(1 0 0 / 0.10) 1px, transparent 1px); background-size: 22px 22px;
  mask-image: radial-gradient(80% 80% at 80% 0%, #000, transparent 70%); }
.reach .rrow { position: relative; display: flex; gap: 40px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.rstat .v { font-family: var(--font-display); font-weight: 700; font-size: 40px; color: #fff; letter-spacing: -0.02em; }
.rstat .k { font-size: 13px; color: oklch(0.88 0.03 293); font-weight: 600; margin-top: 4px; }

/* ============ UNSUBSCRIBE / FORM PAGE ============ */
.formpage { min-height: calc(100vh - 68px); display: grid; place-items: center; padding: 48px 24px; }
.ucard { width: 100%; max-width: 560px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lg); padding: 36px; }
.uhead .eyebrow { display: block; }
.uhead h1 { font-size: 28px; margin-top: 12px; }
.uhead .usub { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; margin-top: 12px; }
.ufield { margin-top: 22px; }
.ulabel { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-2); font-family: var(--font-display); margin-bottom: 9px; }
.req { color: var(--down); }
.uinput, .utextarea { width: 100%; border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; background: var(--surface-2); font-family: var(--font-ui); font-size: 14.5px; font-weight: 500; color: var(--ink); }
.uinput:focus, .utextarea:focus { outline: none; border-color: var(--violet-400); box-shadow: 0 0 0 3px oklch(0.585 0.21 293 / 0.14); background: var(--surface); }
.utextarea { min-height: 90px; resize: vertical; line-height: 1.5; }
.uerr { font-size: 12.5px; color: var(--down); font-weight: 600; margin-top: 7px; display: none; }
.uerr.show { display: block; }
.uradio { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); cursor: pointer; margin-bottom: 10px; transition: border-color .14s, background .14s; }
.uradio.on { border-color: var(--violet-300); background: var(--violet-50); }
.uradio .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex-shrink: 0; margin-top: 1px; position: relative; transition: border-color .14s; }
.uradio.on .dot { border-color: var(--violet-600); }
.uradio.on .dot::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--violet-600); }
.uradio .rt { display: flex; flex-direction: column; gap: 3px; }
.uradio .rt .a { font-size: 14px; font-weight: 600; color: var(--ink); }
.uradio .rt .b { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.ubtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 24px; padding: 13px 20px; border: none; border-radius: 11px; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 14.5px; background: var(--violet-600); color: #fff; box-shadow: var(--shadow-violet); transition: transform .14s, box-shadow .14s; }
.ubtn:hover { transform: translateY(-1px); box-shadow: 0 16px 36px oklch(0.52 0.23 293 / 0.38); }
.ubtn svg { width: 18px; height: 18px; }
.unote { text-align: center; font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 14px; }
.ufine { font-size: 12px; color: var(--faint); line-height: 1.6; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.ufine a { color: var(--violet-700); font-weight: 600; }
.usuccess { text-align: center; padding: 12px 0; }
.usuccess .uic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; background: oklch(0.64 0.15 156 / 0.14); color: var(--up); }
.usuccess .uic svg { width: 28px; height: 28px; }
.usuccess h1 { font-size: 26px; margin-top: 18px; }
.usuccess p { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; margin-top: 12px; }

@media (max-width: 920px) {
  .subhero h1 { font-size: 34px; }
  .cgrid { grid-template-columns: 1fr; }
  .reach { padding: 32px 24px; }
  .ucard { padding: 26px; }
}