/* ============================================================
   ScanEngine — marketing site
   Clean light theme in the SMU palette: deep navy (#141C52) as the
   primary/headings, bronze-gold (#8A704C) as the accent, warm cream
   (#E8E2DA) section tints on white. Crisp surfaces, soft shadows,
   generous whitespace. No product internals.

   NOTE: the --gold* tokens are RETAINED AS NAMES but now hold the
   BRONZE accent, so the many var(--gold*) references across the sheet
   map to bronze without renaming every rule.
   ============================================================ */

:root {
  /* Light surfaces: page → subtle → card → raised. bg-2/bg-3 carry a
     warm cream tint (SMU) so alternating sections feel elegant, not clinical. */
  --bg:        #ffffff;
  --bg-2:      #f7f4ef;
  --bg-3:      #efe9e0;
  --surface:   #ffffff;
  --surface-2: #faf8f4;
  --line:      rgba(20, 28, 82, 0.12);
  --line-2:    rgba(20, 28, 82, 0.20);

  /* Ink — SMU deep navy */
  --text:      #141c52;
  --text-dim:  #4a5178;
  --text-mute: #838aa8;

  /* Bronze accent (kept under the --gold* names, see header note) */
  --gold:      #8a704c;
  --gold-2:    #6f5836;
  --gold-deep: #574328;
  --gold-soft: #efe7db;

  --silver:    #838aa8;
  --diamond:   #0e97b8;
  --diamond-1: #0e97b8;
  --diamond-2: #0b7f9c;
  --platinum:  #8b5cf6;
  --platinum-1:#6d28d9;
  --trial:     #9aa3b5;

  --green:     #0f9d58;
  --red:       #d93b30;
  --blue:      #141c52;
  --blue-2:    #2b356f;
  --blue-soft: #e7e9f2;

  /* SMU brand anchors used directly by the navy hero band + section heads */
  --navy:      #141c52;
  --navy-2:    #1d2668;
  --cream:     #e8e2da;

  --radius:    16px;
  --radius-sm: 11px;
  --shadow:    0 18px 44px -22px rgba(20, 28, 82, 0.24);
  --shadow-sm: 0 6px 18px -10px rgba(20, 28, 82, 0.18);
  --shadow-gold: 0 16px 40px -18px rgba(138, 112, 76, 0.32);

  --maxw: 1240px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Sora', var(--font);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Ambient background wash — very subtle warm cream + navy tints on white. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1100px 620px at 82% -10%, rgba(138, 112, 76, 0.06), transparent 60%),
    radial-gradient(900px 640px at 8% 4%, rgba(20, 28, 82, 0.04), transparent 55%);
  pointer-events: none;
  z-index: 0;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-2);
  padding: 7px 14px; border-radius: 999px;
  background: var(--gold-soft);
  border: 1px solid rgba(138, 112, 76, 0.28);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

.gradient-text {
  background: linear-gradient(120deg, var(--gold) 0%, var(--gold-deep) 60%, var(--blue) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.section { padding: 84px 0; position: relative; }
.section-head { max-width: 720px; margin: 0 auto 64px; text-align: center; }
.section-head h2 { font-size: clamp(30px, 4.4vw, 46px); margin: 20px 0 16px; }
.section-head p { color: var(--text-dim); font-size: 18px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px;
  font-weight: 600; font-size: 15px; cursor: pointer;
  border: 1px solid transparent; transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(120deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: #fff; box-shadow: var(--shadow-gold);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 48px -16px rgba(138, 112, 76, 0.5); }
.btn-ghost {
  background: #fff; color: var(--text);
  border-color: var(--line-2); box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { transform: translateY(-2px); background: var(--bg-2); border-color: var(--gold); }
.btn-telegram { background: linear-gradient(120deg, var(--blue-2), var(--blue)); color: #fff; box-shadow: 0 16px 36px -18px rgba(31, 111, 235, 0.55); }
.btn-telegram:hover { transform: translateY(-2px); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .3s ease, border-color .3s ease, padding .3s ease;
  border-bottom: 1px solid transparent; padding: 18px 0;
}
.nav.scrolled { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); border-bottom-color: var(--line); box-shadow: var(--shadow-sm); padding: 12px 0; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: 19px; }
.logo-img {
  width: 46px; height: 46px; object-fit: contain; display: block;
  filter: drop-shadow(0 4px 10px rgba(15,23,42,0.14));
}
.footer .logo-img { width: 38px; height: 38px; }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a { color: var(--text-dim); font-size: 14.5px; font-weight: 500; white-space: nowrap; transition: color .2s; }
.nav-links a:hover { color: var(--text); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle { display: none; background: none; border: none; color: var(--text); cursor: pointer; }

/* The first section on the page is the light story (the navy hero sits lower),
   so the nav always floats over a light surface — keep navy ink at all times.
   The nav-links already use --text-dim (navy) via the base rules above. */

/* ---------- Hero ---------- */
/* SMU-style LIGHT hero: a white/cream band with navy ink and bronze accents,
   matching the rest of the light page (no heavy dark-navy block). Very soft
   bronze + navy washes warm the corners; a thin bronze rule closes the band. */
.hero {
  padding: 170px 0 90px; text-align: center; position: relative;
  background:
    radial-gradient(1000px 560px at 84% -8%, rgba(138, 112, 76, 0.10), transparent 60%),
    radial-gradient(820px 520px at 10% 2%, rgba(20, 28, 82, 0.05), transparent 58%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  color: var(--text);
}
/* Thin bronze rule closing the band, echoing SMU's accent underline. */
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .55;
}
.hero-logo {
  width: clamp(104px, 16vw, 148px); height: auto; display: block; margin: 0 auto 24px;
  filter: drop-shadow(0 12px 28px rgba(20, 28, 82, 0.18));
}
.hero h1 { font-size: clamp(40px, 7vw, 76px); margin: 26px auto 18px; max-width: 15ch; color: var(--text); }
.hero .sub { font-size: clamp(17px, 2.4vw, 21px); color: var(--text-dim); max-width: 640px; margin: 0 auto 28px; }

/* Signal legend: the six things every alert contains, shown as quick pills so a
   visitor grasps the product in one glance. */
.hero-legend {
  list-style: none; padding: 0; margin: 0 auto 34px; max-width: 640px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px;
}
.hero-legend li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14.5px; font-weight: 600; color: var(--text);
  background: var(--surface); border: 1px solid var(--line);
  padding: 7px 14px; border-radius: 999px; box-shadow: var(--shadow-sm);
}
.hero-legend .leg-ic { font-size: 15px; line-height: 1; }

.hero-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 54px; }
.hero-cta-note { color: var(--text-mute); font-size: 13.5px; letter-spacing: 0.02em; }
.hero-stats { display: flex; gap: 48px; justify-content: center; flex-wrap: wrap; }

/* "See exactly what arrives on your phone" — bridges the value prop to the live
   signal mockup below it. */
.hero-phone-intro { text-align: center; margin: 8px auto 0; max-width: 620px; }
.hero-phone-title {
  font-family: var(--font-display); font-weight: 700; color: var(--text);
  font-size: clamp(22px, 3.4vw, 30px); margin: 0 0 8px;
}
.hero-phone-sub { color: var(--text-dim); font-size: 15.5px; margin: 0; }
.hstat { text-align: center; }
.hstat .num { font-family: var(--font-display); font-size: 40px; font-weight: 800; color: var(--text); }
.hstat .lbl { color: var(--text-dim); font-size: 14px; letter-spacing: 0.04em; margin-top: 2px; }
.hstat .lbl-sub { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; margin-top: 4px; color: var(--text-mute); }
.hero .eyebrow .dot { background: var(--gold); }

/* Phone mockup */
.hero-phone {
  margin: 28px auto 0; max-width: 360px; position: relative;
}
.phone {
  background: linear-gradient(160deg, var(--bg-3), var(--surface-2));
  border: 1px solid var(--line-2); border-radius: 34px; padding: 16px 14px 22px;
  box-shadow: var(--shadow), 0 0 0 1px rgba(138, 112, 76,0.06);
}
.phone-notch { width: 120px; height: 22px; background: #000; border-radius: 0 0 14px 14px; margin: -16px auto 14px; }
.chat { display: flex; flex-direction: column; gap: 10px; }
.msg {
  padding: 11px 14px; border-radius: 14px; font-size: 13.5px; max-width: 92%;
  animation: floatIn .6s ease both;
}
.msg.user { align-self: flex-end; background: linear-gradient(120deg, #2f7d4f, #276b43); color: #eafff1; border-bottom-right-radius: 5px; }
.msg.bot { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.msg.bot .card-title { font-weight: 700; color: var(--gold-2); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.msg.bot .row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-dim); padding: 1px 0; }
.msg.bot .row b { color: var(--text); }
.msg .score-pill {
  display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: rgba(15, 157, 88, 0.14); color: var(--green); border: 1px solid rgba(15, 157, 88, 0.3);
}
.msg .did-you-mean { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.msg .dym-btn { background: var(--blue-soft); border: 1px solid rgba(31,111,235,0.3); color: var(--blue); padding: 7px 10px; border-radius: 9px; font-size: 12px; text-align: left; }
.msg.bot .card-title .verdict { margin-left: auto; font-size: 11px; padding: 2px 8px; }
.msg .tg-actions { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.msg .tg-btn {
  display: inline-block; width: 100%; text-align: center;
  background: var(--blue-soft); border: 1px solid rgba(31,111,235,0.3);
  color: var(--blue); padding: 8px 10px; border-radius: 9px; font-size: 12.5px; font-weight: 600;
}
.msg.bot .card-note { margin-top: 9px; font-size: 12px; line-height: 1.5; color: var(--text-dim); }
.msg .score-pill.score-hold { background: rgba(138, 112, 76,0.14); color: var(--gold-2); border-color: rgba(138, 112, 76,0.3); }


/* ---------- On your phone — three real screenshots side by side ---------- */
.journey-shots {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
  align-items: start; max-width: 1040px; margin: 0 auto;
}
.js-shot { margin: 0; display: flex; flex-direction: column; gap: 20px; }
/* caption sits ON TOP of the image */
.js-shot figcaption { text-align: left; order: 0; min-height: 132px; }
.js-shot .js-num {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; font-family: var(--font-display); font-weight: 800; font-size: 14px;
  background: rgba(138, 112, 76,0.12); border: 1px solid rgba(138, 112, 76,0.3);
  color: var(--gold-2); margin-bottom: 12px;
}
.js-shot figcaption h3 { font-size: 18px; margin: 0 0 8px; line-height: 1.3; }
.js-shot figcaption p { color: var(--text-dim); font-size: 14px; line-height: 1.55; margin: 0; }
.js-frame {
  order: 1; background: linear-gradient(160deg, var(--bg-3), var(--surface-2));
  border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 12px; box-shadow: var(--shadow), 0 0 0 1px rgba(138, 112, 76,0.06);
  overflow: hidden;
}
.js-frame img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
}

/* ---------- Founder's story ---------- */
.letter-cta { margin-top: 24px; display: flex; justify-content: center; }
.letter-cta .btn { gap: 9px; }
.letter {
  width: 100%; max-width: 1180px; margin: 0 auto;
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 40px);
  box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.letter::before {
  content: '\201C';
  position: absolute; top: -18px; left: 22px;
  font-family: var(--font-display);
  font-size: 140px; line-height: 1; color: var(--gold);
  opacity: 0.10; pointer-events: none;
}
.letter p { color: var(--text-dim); font-size: 16px; line-height: 1.55; margin-bottom: 14px; }
.letter p strong { color: var(--text); font-weight: 700; }
.letter p em { color: var(--gold-2); font-style: normal; }
/* Narrative story: a single centered column that reads like an essay. */
.letter-narrative { max-width: 860px; }
.letter-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3.4vw, 36px); line-height: 1.15;
  color: var(--text); margin: 0 0 22px; text-align: center;
}
/* The heart of the founder story — a large, distinct pull-quote that sets up
   the whole narrative before the prose begins. */
.letter-heart {
  text-align: center; margin: 0 auto 26px !important; max-width: 640px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(22px, 3.2vw, 30px) !important; line-height: 1.25;
  color: var(--text) !important;
}
.letter-heart-em {
  background: linear-gradient(120deg, var(--gold) 0%, var(--gold-deep) 55%, var(--blue) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.letter-lead {
  font-family: var(--font-display); font-weight: 600;
  font-size: 20px !important; color: var(--text) !important;
  margin-bottom: 18px !important;
}
.letter-quote {
  margin: 20px auto; padding: 16px 22px; max-width: 720px;
  border: 0; border-left: 3px solid var(--gold);
  background: rgba(138, 112, 76, 0.06);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: 18px; line-height: 1.5; color: var(--gold-2);
}
.letter-quote-strong {
  border-left-color: var(--gold-2);
  background: rgba(138, 112, 76, 0.10);
  color: var(--text);
}

/* Keep prose readable, centered. */
.letter > p, .letter-turn, .letter-sign, .letter-cta { max-width: 720px; }
.letter > p { margin-left: auto; margin-right: auto; }
.letter-turn { margin-left: auto; margin-right: auto; }
.letter-turn {
  font-family: var(--font-display); font-weight: 700;
  font-size: 24px !important; color: var(--text) !important;
  text-align: center; margin: 22px 0 16px !important;
  background: linear-gradient(120deg, var(--gold-2) 0%, var(--gold) 40%, #fff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.letter-sign {
  margin-top: 26px; padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.sign-line { font-family: var(--font-display); font-weight: 600; color: var(--text-mute); font-size: 15px; letter-spacing: 0.03em; }
.sign-tag { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: 0.01em; }
@media (max-width: 560px) {
  .letter-quote { font-size: 16px; padding: 14px 18px; }
  .sign-tag { font-size: 19px; }
}

/* ---------- 10-day free trial band ---------- */
.trial-band { padding-top: 0; }
.trial-card {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: clamp(24px, 4vw, 56px);
  background: linear-gradient(120deg, rgba(138,112,76,0.12), var(--surface) 60%);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: clamp(28px, 4vw, 48px); box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.trial-card::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
}
.trial-copy h2 { font-size: clamp(24px, 3vw, 34px); margin: 12px 0 12px; }
.trial-copy > p { color: var(--text-dim); font-size: 16px; line-height: 1.55; max-width: 620px; margin-bottom: 18px; }
.trial-points { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 9px; }
.trial-points li {
  position: relative; padding-left: 26px; color: var(--text); font-size: 15px;
}
.trial-points li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--gold-2); font-weight: 700;
}
.trial-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.trial-fine { color: var(--text-mute); font-size: 13px; }
.trial-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: clamp(130px, 15vw, 170px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(138,112,76,0.20), rgba(138,112,76,0.04));
  border: 1px solid var(--line-2);
}
.trial-badge-num {
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  font-size: clamp(48px, 6vw, 68px);
  background: linear-gradient(120deg, var(--gold-2), var(--gold) 50%, #fff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.trial-badge-unit { color: var(--text-mute); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; }
@media (max-width: 760px) {
  .trial-card { grid-template-columns: 1fr; text-align: left; }
  .trial-badge { display: none; }
}

/* ---------- FAQ accordion ---------- */
.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; transition: border-color .25s ease;
}
.faq-item[open] { border-color: var(--line-2); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 18px 22px;
  font-family: var(--font-display); font-weight: 600; font-size: 16.5px;
  color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; flex: none; color: var(--gold-2); font-weight: 700;
  font-size: 22px; line-height: 1; transition: transform .25s ease;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item summary:hover { color: var(--gold-2); }
.faq-a { padding: 0 22px 18px; }
.faq-a p { color: var(--text-dim); font-size: 15px; line-height: 1.6; margin: 0; }
.faq-more { text-align: center; color: var(--text-mute); font-size: 15px; margin-top: 24px; }
.faq-more a { color: var(--gold-2); font-weight: 600; }

/* ---------- Pain points ---------- */
.pain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.pain-card {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 30px;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  position: relative; overflow: hidden;
}
.pain-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--red), transparent); opacity: .5;
}
.pain-card:hover { transform: translateY(-6px); border-color: var(--line-2); box-shadow: var(--shadow); }
.pain-icon { font-size: 30px; margin-bottom: 16px; }
.pain-card h3 { font-size: 19px; margin-bottom: 10px; }
.pain-card p { color: var(--text-dim); font-size: 15px; }
.pain-card .fix { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--gold-2); display: flex; gap: 8px; align-items: flex-start; }
.pain-card .fix svg { flex-shrink: 0; margin-top: 3px; }

/* ---------- Markets ---------- */
.markets { text-align: center; }
.market-badges { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.market-badge {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 30px 42px; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); min-width: 190px;
  transition: transform .3s ease, border-color .3s ease;
}
.market-badge:hover { transform: translateY(-6px); border-color: var(--gold); }
.market-flag { font-size: 46px; line-height: 1; }
.market-badge .mname { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.market-badge .mmeta { color: var(--text-dim); font-size: 13.5px; letter-spacing: 0.02em; }

/* ---------- Features ---------- */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.feat-card {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 30px;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.feat-card:hover { transform: translateY(-6px); border-color: rgba(138, 112, 76,0.4); box-shadow: var(--shadow); }
.feat-icon {
  width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 18px;
  background: rgba(138, 112, 76, 0.1); border: 1px solid rgba(138, 112, 76, 0.24); color: var(--gold-2);
}
.feat-icon svg { width: 26px; height: 26px; }
.feat-card h3 { font-size: 19px; margin-bottom: 10px; }
.feat-card p { color: var(--text-dim); font-size: 15px; }
.feat-note { display: block; margin-top: 8px; font-size: 13px; color: var(--text-mute); }

/* ---------- How it works (SVG diagram) ---------- */
.how { background: linear-gradient(180deg, transparent, var(--bg-2), transparent); }
.flow {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch;
  margin-top: 10px;
}
.flow-step {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; text-align: center;
  position: relative;
}
.flow-step .fnum {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #ffffff;
  font-weight: 800; font-size: 14px; font-family: var(--font-display);
}
.flow-step .ficon { font-size: 34px; margin: 8px 0 14px; }
.flow-step h4 { font-size: 17px; margin-bottom: 8px; }
.flow-step p { color: var(--text-dim); font-size: 14px; }
.flow-arrow { display: grid; place-items: center; color: var(--gold); }

/* ---------- Pricing ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; align-items: stretch; }
.tier {
  position: relative; border-radius: var(--radius); padding: 38px 30px;
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); display: flex; flex-direction: column;
  transition: transform .35s ease, box-shadow .35s ease;
}
.tier:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.tier-silver { border-top: 3px solid var(--silver); }
.tier-gold {
  border: 1px solid rgba(138, 112, 76, 0.4); border-top: 3px solid var(--gold);
  background: linear-gradient(180deg, rgba(138, 112, 76,0.06), var(--bg-2));
  box-shadow: var(--shadow-gold);
}
.tier-diamond { border-top: 3px solid var(--diamond-1); }
.tier-trial { border-top: 3px solid var(--trial); }
.tier-platinum {
  border: 1px solid rgba(199, 155, 255, 0.4); border-top: 3px solid var(--platinum-1);
  background: linear-gradient(180deg, rgba(199,155,255,0.07), var(--bg-2));
}
.tier-tag {
  position: absolute; top: -13px; right: 24px; padding: 5px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: linear-gradient(120deg, var(--gold), var(--gold-2)); color: #ffffff;
}
.tier-tag-plat { background: linear-gradient(120deg, var(--platinum-1), var(--platinum)); color: #ffffff; }
.tier-crown { font-size: 30px; margin-bottom: 8px; }
.tier h3 { font-size: 24px; margin-bottom: 4px; }
.tier .tier-sub { color: var(--text-mute); font-size: 14px; margin-bottom: 22px; }
.tier .price { font-family: var(--font-display); font-size: 26px; font-weight: 700; margin-bottom: 22px; color: var(--text); }
.tier .price .soon { display: block; font-size: 13px; font-weight: 500; color: var(--text-mute); font-family: var(--font); margin-top: 2px; }
/* Price amount hidden per request; keeps the tier + features + button visible.
   Shows a subtle placeholder in place of the number. Remove .price-hidden (and
   restore the amount text) to re-enable prices. */
.tier .price.price-hidden::before { content: "\2014"; color: var(--text-mute); opacity: .6; }
.tier ul { list-style: none; display: flex; flex-direction: column; gap: 13px; margin-bottom: 28px; flex: 1; }
.tier li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--text-dim); }
.tier li svg { flex-shrink: 0; margin-top: 3px; }
.tier li .ic-yes { color: var(--gold); }
.tier li .ic-no  { color: var(--text-mute); opacity: .55; }
/* Included features: bright + bold so buyers instantly see what they get */
.tier li.yes { color: var(--text); font-weight: 600; }
/* Excluded features: muted and struck through so they recede */
.tier li.no { color: var(--text-mute); text-decoration: line-through; text-decoration-color: rgba(15,23,42,0.28); opacity: .7; }
.tier li.hl { color: var(--platinum-1); font-weight: 700; }
.tier li.hl .ic-yes { color: var(--platinum-1); }
.tier .btn { justify-content: center; width: 100%; }

/* 5-tier layout: single row on wide screens, wraps gracefully below */
.pricing-grid-5 { grid-template-columns: repeat(5, 1fr); gap: 18px; }
.pricing-grid-5 .tier { padding: 32px 22px; }
@media (max-width: 1200px) { .pricing-grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .pricing-grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .pricing-grid-5 { grid-template-columns: 1fr; } }

/* ---------- Region-scoped pricing (IN / US groups + global Trial & Platinum) ---------- */
.pricing-flow { display: flex; flex-direction: column; gap: 40px; }
.pricing-region { display: flex; flex-direction: column; gap: 18px; }
/* Trial and Platinum span a single centered card in their global row. */
.pricing-global-row { display: flex; flex-direction: column; gap: 18px; }
.pricing-global-row .tier { max-width: 360px; width: 100%; margin: 0 auto; }

/* Region header: flag + name + scope note */
.pricing-region-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.pricing-region-head .pr-flag { font-size: 26px; line-height: 1; }
.pricing-region-head .pr-code { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text-mute); letter-spacing: .5px; }
.pricing-region-head .pr-name { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text); }
.pricing-region-head .pr-note { font-size: 14px; color: var(--text-mute); }

/* Three tiers per region row */
.pricing-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pricing-grid-3 .tier { padding: 32px 22px; }
@media (max-width: 820px) { .pricing-grid-3 { grid-template-columns: 1fr; } }

/* ---------- Market selector (single-window pricing) ---------- */
.pricing-tabs {
  display: flex; width: fit-content; gap: 4px; margin: 0 auto 30px; padding: 5px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; box-shadow: var(--shadow-sm);
}
.pricing-tab {
  appearance: none; border: 0; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 22px; border-radius: 999px;
  font-size: 15px; font-weight: 600; color: var(--text-mute);
  background: transparent; transition: color .2s, background .2s, box-shadow .2s;
}
/* Inline SVG flags render on every OS (flag emoji fall back to "IN"/"US"
   letters on Windows). Rounded corners + hairline keep them crisp at 22px. */
.pricing-tab .pt-flag { width: 22px; height: 15px; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(20, 28, 82, 0.15); flex-shrink: 0; display: block; }
.pricing-tab:hover { color: var(--text); }
.pricing-tab.is-active {
  color: #fff;
  background: linear-gradient(120deg, var(--gold) 0%, var(--gold-deep) 100%);
  box-shadow: var(--shadow-gold);
}
.pricing-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Panels: only the active market is shown */
.pricing-panel { display: none; }
.pricing-panel.is-active { display: block; }
.pricing-panel[hidden] { display: none; }

/* ---------- Feedback ---------- */
.feedback-grid {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: start;
  max-width: 1000px; margin: 0 auto;
}

/* approved testimonials */
.fb-list { display: flex; flex-direction: column; gap: 16px; }
.fb-card {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px;
  animation: floatIn .5s ease both;
}
.fb-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.fb-card-name { font-weight: 700; font-size: 15px; }
.fb-card-rate { color: var(--gold); font-size: 14px; letter-spacing: 1px; white-space: nowrap; }
.fb-card-rate .off { color: var(--line-2); }
.fb-card-msg { color: var(--text-dim); font-size: 14.5px; line-height: 1.6; }
.fb-card-date { color: var(--text-mute); font-size: 12px; margin-top: 10px; }
.fb-empty { color: var(--text-mute); font-size: 14px; padding: 8px 2px; }

/* submission form */
.fb-form {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px;
  box-shadow: var(--shadow); position: sticky; top: 90px;
}
.fb-form h3 { font-size: 20px; margin-bottom: 4px; }
.fb-form-sub { color: var(--text-dim); font-size: 14px; margin-bottom: 20px; }
.fb-field { display: block; margin-bottom: 18px; }
.fb-label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 7px; }
.fb-form input[type="text"], .fb-form textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--text);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 14px; transition: border-color .2s;
}
.fb-form input[type="text"]:focus, .fb-form textarea:focus {
  outline: none; border-color: var(--gold);
}
.fb-form textarea { resize: vertical; min-height: 96px; }

/* star rating */
.fb-stars { display: inline-flex; gap: 4px; }
.fb-star {
  background: none; border: none; cursor: pointer; padding: 2px;
  font-size: 26px; line-height: 1; color: var(--line-2); transition: color .15s, transform .1s;
}
.fb-star:hover { transform: scale(1.12); }
.fb-star.on { color: var(--gold); }

.fb-submit { width: 100%; margin-top: 4px; justify-content: center; }
.fb-submit:disabled { opacity: .6; cursor: not-allowed; }
.fb-status { font-size: 13.5px; margin-top: 12px; min-height: 18px; }
.fb-status.ok { color: var(--green); }
.fb-status.err { color: var(--red); }
.fb-note { color: var(--text-mute); font-size: 12px; margin-top: 14px; line-height: 1.5; }

/* ---------- Native signup (intake) ---------- */
.intake-form {
  max-width: 680px; margin: 0 auto 34px;
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 32px;
  box-shadow: var(--shadow); text-align: left;
}
.intake-form h3 { font-size: 22px; margin-bottom: 4px; }
.intake-sub { color: var(--text-dim); font-size: 14px; margin-bottom: 22px; }
.intake-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.intake-field { display: block; }
.intake-field.intake-full { grid-column: 1 / -1; }
.intake-label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 7px; }
.intake-label .req { color: var(--gold-2); }
.intake-form input[type="text"], .intake-form input[type="email"],
.intake-form input[type="tel"], .intake-form select {
  width: 100%; font: inherit; font-size: 15px; color: var(--text);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 14px; transition: border-color .2s;
}
.intake-form input:focus, .intake-form select:focus { outline: none; border-color: var(--gold); }
.intake-form select { cursor: pointer; }
.intake-segment { display: inline-flex; gap: 8px; }
.seg-btn {
  display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 14px;
  color: var(--text-dim); cursor: pointer; padding: 11px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .2s, color .2s;
}
.seg-btn .seg-flag { border-radius: 3px; flex-shrink: 0; }
.seg-btn:hover { color: var(--text); }
.seg-btn.is-active { border-color: var(--gold); color: var(--text); }
.seg-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.intake-submit { width: 100%; margin-top: 22px; justify-content: center; }
.intake-submit:disabled { opacity: .6; cursor: not-allowed; }
.intake-status { font-size: 13.5px; margin-top: 12px; min-height: 18px; }
.intake-status.ok { color: var(--green); }
.intake-status.err { color: var(--red); }
.intake-note { color: var(--text-mute); font-size: 12px; margin-top: 14px; line-height: 1.6; }
.intake-note a { color: var(--gold-2); text-decoration: underline; }

/* "What happens next" preview (shown before submit) */
.intake-next {
  margin-top: 16px; padding: 16px 18px; border: 1px dashed var(--line);
  border-radius: var(--radius-sm); background: var(--surface);
}
.intake-next-title {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-mute); margin-bottom: 8px;
}
.intake-steps { margin: 0; padding-left: 20px; color: var(--text-dim); font-size: 13.5px; line-height: 1.7; }
.intake-steps li { margin: 0; }
.intake-steps strong { color: var(--text); }

/* Success panel (shown after a successful submit) */
.intake-success {
  margin-top: 16px; padding: 18px 20px; border: 1px solid var(--green);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(15,157,88,0.08), rgba(15,157,88,0.02));
}
.intake-success-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px;
}
.intake-success-check {
  display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 50%; background: var(--green); color: #fff; font-size: 14px; font-weight: 700;
}
.intake-success-msg { color: var(--text-dim); font-size: 14px; margin: 0 0 12px; line-height: 1.5; }
.intake-success .intake-steps { margin-bottom: 12px; }
.intake-success-tip { color: var(--text-mute); font-size: 12.5px; margin: 0; }
.intake-success-tip a { color: var(--gold-2); text-decoration: underline; }

/* ---------- Contact ---------- */
.contact { text-align: center; }
.contact-card {
  max-width: 680px; margin: 0 auto;
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 48px 40px;
  box-shadow: var(--shadow);
}
.contact-methods { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin: 30px 0 20px; }
.contact-method {
  display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line); transition: border-color .25s, transform .25s;
}
.contact-method:hover { border-color: var(--gold); transform: translateY(-3px); }
.contact-method .cm-icon { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; }
.cm-icon.mail { background: rgba(138, 112, 76,0.12); color: var(--gold-2); }
.cm-icon.tg { background: rgba(31,111,235,0.12); color: var(--diamond-2); }
.cm-icon.wa { background: rgba(37,211,102,0.14); color: #1faa53; }
.contact-method .cm-text { text-align: left; }
.contact-method .cm-text .lbl { font-size: 12px; color: var(--text-mute); }
.contact-method .cm-text .val { font-weight: 600; font-size: 15px; }
.reply-note {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
  color: var(--text-dim); font-size: 14px;
}
.reply-note .badge { color: var(--gold-2); font-weight: 600; }

/* ---------- Follow us (social) ---------- */
.social-follow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 4px 0 18px;
}
.social-follow .sf-label {
  font-size: 13px;
  color: var(--text-mute);
  font-weight: 600;
  letter-spacing: .02em;
}
.sf-links { display: inline-flex; gap: 10px; }
.sf-link {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-dim);
  transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease;
}
.sf-link:hover {
  transform: translateY(-3px);
  color: var(--blue);
  border-color: var(--gold);
  background: var(--surface);
}

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 40px 0; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer p { color: var(--text-mute); font-size: 14px; }
.footer-social { display: inline-flex; gap: 8px; }
.footer-social a {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 9px;
  border: 1px solid var(--line);
  color: var(--text-mute);
  transition: transform .2s ease, color .2s ease, border-color .2s ease;
}
.footer-social a:hover { transform: translateY(-2px); color: var(--blue); border-color: var(--gold); }
.footer .disclaimer { max-width: 640px; font-size: 12.5px; color: var(--text-mute); margin-top: 14px; line-height: 1.6; }

/* ---------- Anatomy of a signal ---------- */
.anatomy { background: linear-gradient(180deg, transparent, var(--bg-2), transparent); }
.anatomy-stage {
  display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 54px;
  align-items: center; max-width: 960px; margin: 0 auto;
}
.sig-card {
  position: relative;
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid rgba(138, 112, 76,0.28); border-radius: var(--radius);
  padding: 22px 24px; box-shadow: var(--shadow);
  font-size: 14.5px;
}
.sig-badge {
  display: inline-block; font-family: var(--font-display); font-weight: 700;
  color: var(--gold-2); font-size: 16px; margin-bottom: 10px;
}
.sig-name { font-weight: 700; font-size: 16px; }
.sig-meta { color: var(--text-mute); font-size: 12.5px; margin-bottom: 14px; }
.sig-block { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.sig-h { color: var(--gold-2); font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.sig-conf { color: var(--text-dim); }
.sig-conf.dim { color: var(--text-mute); font-size: 13px; margin-top: 2px; }
.sig-line { color: var(--text-dim); }
.sig-line b { color: var(--text); }
.sig-foot { margin-top: 16px; font-size: 11px; color: var(--text-mute); }

.anno-dot {
  position: absolute; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #ffffff;
  box-shadow: 0 0 0 4px rgba(138, 112, 76,0.16); font-family: var(--font-display);
}
.anno-dot::before { content: attr(data-n); }
.anno-dot.d-grade { top: 14px; right: -13px; }
.anno-dot.d-conf  { top: 128px; right: -13px; }
.anno-dot.d-vol   { top: 128px; left: -13px; }
.anno-dot.d-setup { bottom: 66px; right: -13px; }

.anatomy-legend { list-style: none; display: flex; flex-direction: column; gap: 20px; }
.anatomy-legend li { display: flex; gap: 15px; align-items: flex-start; }
.anatomy-legend .al-n {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 13px;
  background: rgba(138, 112, 76,0.12); border: 1px solid rgba(138, 112, 76,0.3);
  color: var(--gold-2); font-family: var(--font-display);
}
.anatomy-legend b { display: block; font-size: 16px; margin-bottom: 3px; }
.anatomy-legend em { color: var(--text-dim); font-style: normal; font-size: 14.5px; }

/* ---------- No hype (what we don't promise) ---------- */
.nohype-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px; max-width: 940px; margin: 0 auto;
}
.nohype-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 14px; padding: 20px 22px;
  transition: border-color .15s, transform .15s;
}
.nohype-card:hover { transform: translateY(-2px); }
.nohype-x {
  flex: none; font-size: 18px; font-weight: 700; line-height: 1.5;
  color: var(--red);
}
.nohype-claim {
  font-weight: 700; color: var(--text); font-size: 16px; margin-bottom: 5px;
  text-decoration: line-through; text-decoration-color: rgba(217,59,48,.45);
  text-decoration-thickness: 2px;
}
.nohype-truth { color: var(--text-dim); font-size: 14.5px; line-height: 1.5; }
/* The single positive "what we DO promise" card stands apart in gold/green. */
.nohype-card-yes {
  border-color: rgba(15,157,88,.4);
  background: linear-gradient(180deg, rgba(15,157,88,.06), var(--surface));
}
.nohype-check { flex: none; font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--green); }
.nohype-card-yes .nohype-claim { text-decoration: none; color: var(--text); }
.nohype-card-yes .nohype-claim em { color: var(--gold-2); font-style: normal; }

/* ---------- Track record (weekly report) ---------- */
.wyg { padding-bottom: 0; }
.wyg + #features { padding-top: 40px; }
.track { background: linear-gradient(180deg, transparent, var(--bg-2), transparent); }
.track-stage {
  display: grid; grid-template-columns: minmax(320px, 1fr) minmax(280px, 380px); gap: 54px;
  align-items: start; max-width: 1000px; margin: 0 auto;
}
.report-card {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid rgba(138, 112, 76,0.28); border-radius: var(--radius);
  padding: 22px 24px; box-shadow: var(--shadow);
}
.rc-title { font-family: var(--font-display); font-weight: 700; color: var(--gold-2); font-size: 16px; }
.rc-sub { color: var(--text-mute); font-size: 12.5px; margin: 2px 0 14px; }
.rc-h {
  color: var(--gold-2); font-weight: 600; font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; margin: 16px 0 6px;
}
.rc-table {
  margin: 0; padding: 12px 14px; overflow-x: auto;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: 'SFMono-Regular', ui-monospace, 'Menlo', 'Consolas', monospace;
  font-size: 12px; line-height: 1.6; color: var(--text-dim);
  white-space: pre; -webkit-overflow-scrolling: touch;
}
.rc-table .rc-col  { color: var(--text-mute); }
.rc-table .rc-rule { color: var(--line-2); }
.rc-table .rc-week { color: var(--gold-2); font-weight: 700; display: inline-block; margin-top: 2px; }
.rc-table .rc-win  { color: var(--green); }
.rc-table .rc-loss { color: var(--red); }
.rc-table .rc-open { color: var(--blue); }
.rc-table .rc-exp  { color: var(--text-mute); }
.rc-totals { display: flex; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.rc-tot {
  flex: 1 1 140px; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.rc-tot .lbl { color: var(--text-mute); font-size: 12px; letter-spacing: 0.04em; }
.rc-tot b { font-family: var(--font-display); font-size: 22px; font-weight: 800; }
.rc-tot b.up { color: var(--green); }
.rc-tot b.down { color: var(--red); }
.rc-tot em { color: var(--text-dim); font-style: normal; font-size: 12.5px; }

.track-legend { list-style: none; display: flex; flex-direction: column; gap: 20px; }
.track-legend li { display: flex; gap: 15px; align-items: flex-start; }
.track-legend .al-n {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 13px;
  background: rgba(138, 112, 76,0.12); border: 1px solid rgba(138, 112, 76,0.3);
  color: var(--gold-2); font-family: var(--font-display);
}
.track-legend b { display: block; font-size: 16px; margin-bottom: 3px; }
.track-legend em { color: var(--text-dim); font-style: normal; font-size: 14.5px; }
.track-legend em b { display: inline; font-size: inherit; color: var(--blue); }

/* ---------- Digest archive (day-wise sheets) ---------- */
.archive-stage {
  display: grid; grid-template-columns: minmax(320px, 1fr) minmax(280px, 360px); gap: 54px;
  align-items: start; max-width: 1000px; margin: 0 auto;
}
.sheet-card {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line-2); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
}
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.sheet-name { font-family: var(--font-display); font-weight: 700; color: var(--text); font-size: 15px; }
.sheet-tag {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold-2); border: 1px solid rgba(138, 112, 76,0.3);
  background: rgba(138, 112, 76,0.1); border-radius: 999px; padding: 3px 10px;
}
.sheet-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sheet-grid {
  width: 100%; border-collapse: collapse; font-size: 13px;
  color: var(--text-dim); white-space: nowrap;
}
.sheet-grid th, .sheet-grid td {
  padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.sheet-grid th:last-child, .sheet-grid td:last-child { border-right: none; }
.sheet-grid thead th {
  color: var(--text); font-weight: 600; font-size: 12px;
  letter-spacing: 0.03em; background: var(--surface-2);
}
.sheet-grid .c-idx {
  width: 34px; text-align: center; color: var(--text-mute);
  background: var(--surface); font-size: 11px;
}
.sheet-grid .c-num { text-align: right; font-variant-numeric: tabular-nums; }
.sheet-grid .c-tick { color: var(--text); font-weight: 600; }
.sheet-grid tbody tr:hover td { background: var(--bg-2); }
.verdict {
  display: inline-block; font-size: 12px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px; letter-spacing: 0.02em;
}
.verdict.buy   { color: var(--green); background: rgba(15,157,88,0.12); }
.verdict.hold  { color: var(--gold-2); background: rgba(138, 112, 76,0.12); }
.verdict.avoid { color: var(--red); background: rgba(217,59,48,0.12); }
.sheet-tabs {
  display: flex; gap: 4px; padding: 8px 10px; overflow-x: auto;
  border-top: 1px solid var(--line); background: var(--bg-2);
  -webkit-overflow-scrolling: touch;
}
.sheet-tab {
  flex-shrink: 0; font-size: 12px; color: var(--text-mute);
  padding: 6px 12px; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border: 1px solid transparent; font-variant-numeric: tabular-nums;
}
.sheet-tab.active {
  color: var(--text); background: var(--surface-2);
  border-color: var(--line); border-bottom-color: transparent;
  font-weight: 600;
}
.sheet-tab.more { color: var(--gold-2); font-weight: 700; }

.archive-legend { list-style: none; display: flex; flex-direction: column; gap: 20px; }
.archive-legend li { display: flex; gap: 15px; align-items: flex-start; }
.archive-legend .al-n {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 13px;
  background: rgba(138, 112, 76,0.12); border: 1px solid rgba(138, 112, 76,0.3);
  color: var(--gold-2); font-family: var(--font-display);
}
.archive-legend b { display: block; font-size: 16px; margin-bottom: 3px; }
.archive-legend em { color: var(--text-dim); font-style: normal; font-size: 14.5px; }

/* ---------- Score gauge (feature card) ---------- */
.score-gauge { margin-top: 16px; }
.sg-track { height: 8px; border-radius: 999px; background: var(--bg-3); overflow: hidden; }
.sg-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-2));
}
.sg-scale { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--text-mute); }

/* ---------- How it works — hub + branching numbered steps ---------- */
.workflow {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  align-items: center;
  gap: 56px;
  max-width: 860px;
  margin: 0 auto;
  position: relative;
}

/* central hub */
.wf-hub {
  position: relative;
  justify-self: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 200px; height: 200px; border-radius: 50%;
  padding: 24px; text-align: center;
  background: radial-gradient(circle at 50% 35%, rgba(138, 112, 76,0.14), var(--surface) 70%);
  border: 1px solid rgba(138, 112, 76,0.3);
  box-shadow: 0 0 0 8px rgba(138, 112, 76,0.06), var(--shadow);
}
.wf-hub img { border-radius: 12px; }
.wf-hub span {
  font-family: var(--font-display); font-weight: 700;
  font-size: 15px; line-height: 1.3; color: var(--gold-2);
}

/* branch line from hub to the step column */
.wf-hub::after {
  content: ""; position: absolute; top: 50%; left: 100%;
  width: 56px; height: 2px; transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(138, 112, 76,0.5), rgba(138, 112, 76,0.12));
}

/* stacked step bars */
.wf-steps {
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
}
/* vertical spine the branches hang off */
.wf-steps::before {
  content: ""; position: absolute; top: 20px; bottom: 20px; left: -28px;
  width: 2px; background: linear-gradient(180deg, rgba(138, 112, 76,0.35), rgba(138, 112, 76,0.1));
}

.wf-step {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px;
}
/* connector from spine to each step */
.wf-step::before {
  content: ""; position: absolute; top: 50%; left: -28px;
  width: 28px; height: 2px; transform: translateY(-50%);
  background: rgba(138, 112, 76,0.28);
}

.wf-num {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #ffffff;
  font-weight: 800; font-size: 17px; font-family: var(--font-display);
  box-shadow: 0 4px 14px rgba(138, 112, 76,0.3); z-index: 1;
}

/* chevron-shaped body bar */
.wf-bar {
  min-width: 0;
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 22px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
  transition: border-color .25s ease, transform .25s ease;
}
.wf-step:hover .wf-bar { border-color: rgba(138, 112, 76,0.4); transform: translateX(4px); }
.wf-bar h4 { font-size: 16px; margin: 0 0 4px; }
.wf-bar p { color: var(--text-dim); font-size: 14px; line-height: 1.5; margin: 0; }

/* ---------- How scoring works (high-level explainer) ---------- */
.scoring { margin-top: 90px; max-width: 1000px; margin-left: auto; margin-right: auto; }
.scoring-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.scoring-head h3 { font-size: 30px; margin: 14px 0 12px; }
.scoring-head p { color: var(--text-dim); font-size: 17px; line-height: 1.6; }
.scoring-body {
  display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 44px;
  align-items: center;
}
/* Score dial */
.score-dial {
  background: linear-gradient(160deg, var(--bg-3), var(--surface-2));
  border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 30px 26px; text-align: center; box-shadow: var(--shadow);
}
/* Speedometer-style score gauge */
.gauge { width: 100%; max-width: 240px; height: auto; display: block; margin: 0 auto; }
.g-track {
  fill: none; stroke: rgba(15,23,42,0.10);
  stroke-width: 14; stroke-linecap: round;
}
.g-value {
  fill: none; stroke: url(#gaugeArc);
  stroke-width: 14; stroke-linecap: round;
}
.g-end { fill: var(--text-mute); font-size: 13px; font-weight: 600; text-anchor: middle; }
.g-needle line { stroke: var(--text); stroke-width: 3.5; stroke-linecap: round; }
.g-needle circle { fill: var(--gold); stroke: #ffffff; stroke-width: 2; }
.g-num {
  fill: var(--text); font-family: var(--font-display); font-weight: 800;
  font-size: 44px; text-anchor: middle;
}
.g-denom {
  fill: var(--text-mute); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; text-anchor: middle;
}
.sd-label {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim); margin-top: 10px; text-align: center;
}
/* Pillars */
.score-pillars { list-style: none; display: flex; flex-direction: column; gap: 20px; }
.score-pillars li { display: flex; gap: 15px; align-items: flex-start; }
.score-pillars .sp-ico {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; font-size: 20px;
  background: rgba(138, 112, 76,0.1); border: 1px solid rgba(138, 112, 76,0.25);
}
.score-pillars b { display: block; font-size: 16px; margin-bottom: 3px; }
.score-pillars em { color: var(--text-dim); font-style: normal; font-size: 14.5px; line-height: 1.55; }
.score-note {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  text-align: center; color: var(--text-dim); font-size: 14px; line-height: 1.55;
  max-width: 640px; margin: 40px auto 0; padding: 14px 20px;
  background: rgba(138, 112, 76, 0.08);
  border: 1px solid rgba(138, 112, 76, 0.28); border-radius: 12px;
}
.score-note strong { color: var(--text); font-weight: 700; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

@keyframes floatIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .flow { grid-template-columns: 1fr; }
  .flow-arrow { transform: rotate(90deg); padding: 4px 0; }
  .workflow { grid-template-columns: 1fr; gap: 36px; max-width: 480px; }
  .wf-hub { width: 168px; height: 168px; }
  .wf-hub::after { display: none; }
  .wf-steps::before, .wf-step::before { display: none; }
  .anatomy-stage { grid-template-columns: 1fr; gap: 40px; max-width: 440px; }
  .track-stage { grid-template-columns: 1fr; gap: 36px; max-width: 560px; }
  .archive-stage { grid-template-columns: 1fr; gap: 36px; max-width: 560px; }
  .journey-shots { grid-template-columns: 1fr; gap: 48px; max-width: 360px; }
  .scoring-body { grid-template-columns: 1fr; gap: 36px; max-width: 480px; margin: 0 auto; }
  .scoring-head h3 { font-size: 26px; }
  .feedback-grid { grid-template-columns: 1fr; gap: 24px; max-width: 560px; }
  .fb-form { position: static; }
  .intake-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav-links.open {
    display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(255,255,255,0.97); backdrop-filter: blur(12px); padding: 24px; gap: 18px; border-bottom: 1px solid var(--line);
  }
  .section { padding: 80px 0; }
  .hero { padding: 140px 0 70px; }
  .hero-stats { gap: 32px; }
}
@media (max-width: 520px) {
  .hero-stats { gap: 24px; }
  .hstat .num { font-size: 32px; }
  .hero-legend { gap: 8px; }
  .hero-legend li { font-size: 13px; padding: 6px 11px; }
  .contact-card { padding: 34px 24px; }
  .report-card { padding: 18px 16px; }
  .rc-table { font-size: 10.5px; padding: 10px; }
}

/* ============================================================
   EDGE — website assistant widget
   ============================================================ */
.chatbot { position: fixed; right: 22px; bottom: 22px; z-index: 1000; font-family: var(--font); }

/* Floating launcher button */
.cb-launcher {
  position: relative; width: 60px; height: 60px; border-radius: 50%;
  border: none; cursor: pointer; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--gold-2), var(--gold-deep));
  color: #fff; box-shadow: var(--shadow-gold);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cb-launcher:hover { transform: translateY(-2px) scale(1.04); }
.cb-launcher:active { transform: scale(.97); }
.cb-launcher svg { position: absolute; transition: opacity .2s ease, transform .3s ease; }
.cb-ic-close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.chatbot.open .cb-ic-open  { opacity: 0; transform: rotate(90deg) scale(.6); }
.chatbot.open .cb-ic-close { opacity: 1; transform: none; }
.chatbot.open .cb-launcher { background: linear-gradient(150deg, var(--surface-2), var(--surface)); color: var(--text); }

/* First-visit nudge bubble on the launcher */
.cb-badge {
  position: absolute; top: -8px; right: -6px; background: var(--red); color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  white-space: nowrap; box-shadow: var(--shadow-sm);
  animation: cbPulse 2.4s ease-in-out infinite;
}
.chatbot.open .cb-badge, .chatbot.seen .cb-badge { display: none; }
@keyframes cbPulse { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* Panel */
.cb-panel {
  position: absolute; right: 0; bottom: 74px; width: 360px; max-width: calc(100vw - 32px);
  height: 520px; max-height: calc(100vh - 120px); display: flex; flex-direction: column;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
  transform-origin: bottom right; transform: translateY(12px) scale(.96); opacity: 0;
  transition: transform .22s cubic-bezier(.16,1,.3,1), opacity .22s ease;
}
.cb-panel[hidden] { display: none; }
.chatbot.open .cb-panel { transform: none; opacity: 1; }

/* Header */
.cb-head {
  display: flex; align-items: center; gap: 11px; padding: 14px 14px 13px;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border-bottom: 1px solid var(--line);
}
.cb-avatar {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-3); border: 1px solid var(--line-2); flex-shrink: 0;
}
.cb-avatar img { border-radius: 50%; }
.cb-id { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.cb-name { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--text); }
.cb-sub { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
.cb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(15,157,88,.18); }
.cb-x {
  background: none; border: none; color: var(--text-mute); cursor: pointer; padding: 6px;
  border-radius: 8px; display: grid; place-items: center; transition: color .15s, background .15s;
}
.cb-x:hover { color: var(--text); background: var(--bg-3); }

/* Message log */
.cb-log { flex: 1; overflow-y: auto; padding: 16px 14px 6px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.cb-log::-webkit-scrollbar { width: 8px; }
.cb-log::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
.cb-msg { max-width: 84%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.5; animation: cbIn .28s ease both; }
.cb-msg a { color: var(--gold-2); }
.cb-msg.bot  { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); color: var(--text); border-bottom-left-radius: 5px; }
.cb-msg.user { align-self: flex-end; background: linear-gradient(150deg, var(--gold-2), var(--gold-deep)); color: #ffffff; font-weight: 600; border-bottom-right-radius: 5px; }
@keyframes cbIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Typing dots */
.cb-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; border-bottom-left-radius: 5px; }
.cb-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-mute); animation: cbBlink 1.2s infinite ease-in-out; }
.cb-typing span:nth-child(2) { animation-delay: .2s; }
.cb-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes cbBlink { 0%,80%,100% { opacity: .3; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }

/* Quick-reply FAQ chips */
/* Chip + ask area: a column with a scrollable chip list above a PINNED ask row,
   so the "Ask a question" input is always visible regardless of chip count. */
.cb-quick { display: flex; flex-direction: column; gap: 8px; padding: 8px 14px 12px; border-top: 1px solid var(--line); }
.cb-chip-list { display: flex; flex-wrap: wrap; gap: 7px; max-height: 132px; overflow-y: auto; }
.cb-chip-list::-webkit-scrollbar { width: 8px; }
.cb-chip-list::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
.cb-chip {
  border: 1px solid var(--line-2); background: var(--surface); color: var(--text-dim);
  font-size: 12.5px; font-family: var(--font); padding: 7px 12px; border-radius: 999px;
  cursor: pointer; transition: border-color .15s, color .15s, background .15s; line-height: 1.3;
}
.cb-chip:hover { border-color: var(--gold); color: var(--text); background: var(--surface-2); }
.cb-chip.ask { border-color: rgba(138, 112, 76,.4); color: var(--gold-2); }
/* "More questions ▾ / Show less ▴" toggle — subtly emphasized vs. plain chips. */
.cb-more { border-style: dashed; color: var(--gold-2); font-weight: 600; }
.cb-more:hover { border-style: solid; border-color: var(--gold); }

/* Free-text ask row (typed questions → KB auto-answer / human handoff) */
.cb-ask { display: flex; gap: 7px; width: 100%; margin-top: 2px; }
.cb-ask-input {
  flex: 1; min-width: 0; border: 1px solid var(--line-2); background: var(--surface);
  color: var(--text); font-size: 12.5px; font-family: var(--font);
  padding: 8px 12px; border-radius: 999px; outline: none;
  transition: border-color .15s;
}
.cb-ask-input:focus { border-color: var(--gold); }
.cb-ask-input::placeholder { color: var(--text-dim); }
.cb-ask-send {
  border: 1px solid var(--gold); background: var(--gold); color: var(--bg-3);
  font-size: 12.5px; font-family: var(--font); font-weight: 600;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  transition: filter .15s;
}
.cb-ask-send:hover { filter: brightness(1.08); }

/* Footer — "Connect with us" social row */
.cb-foot {
  padding: 11px 14px 14px; border-top: 1px solid var(--line); background: var(--bg-3);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.cb-foot-label {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); opacity: .85;
}
.cb-social { display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; }
.cb-soc {
  --soc: #1c85c4;
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  text-decoration: none; color: #fff; background: var(--soc);
  box-shadow: 0 4px 12px -5px color-mix(in srgb, var(--soc) 70%, transparent);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.cb-soc svg { display: block; }
.cb-soc:hover {
  transform: translateY(-3px) scale(1.08); filter: brightness(1.07);
  box-shadow: 0 9px 18px -6px color-mix(in srgb, var(--soc) 75%, transparent);
}
.cb-soc:active { transform: translateY(-1px) scale(1.03); }
.cb-soc:focus-visible { outline: 2px solid var(--soc); outline-offset: 2px; }
/* Brand colors */
.cb-soc--tg { --soc: #229ED9; }
.cb-soc--wa { --soc: #25D366; }
.cb-soc--x  { --soc: #111; }
.cb-soc--ig { --soc: #E1306C; background: linear-gradient(135deg,#feda75,#fa7e1e 30%,#d62976 60%,#962fbf 85%,#4f5bd5); }
.cb-soc--fb { --soc: #1877F2; }
.cb-soc--yt { --soc: #FF0000; }

@media (max-width: 520px) {
  .chatbot { right: 16px; bottom: 16px; }
  .cb-launcher { width: 54px; height: 54px; }
  .cb-panel { bottom: 68px; height: calc(100vh - 100px); }
}

/* ============ ROADMAP: UNIFIED TRADING TERMINAL ============ */
.roadmap { background: var(--bg-2); }

.rm-flow {
  margin: 40px auto 0;
  max-width: 1100px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 28px;
}

.rm-stage {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.rm-node {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 20px 14px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.rm-node:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }

.rm-node-hi {
  background: linear-gradient(160deg, rgba(14,151,184,.10), rgba(139,92,246,.08));
  border-color: var(--diamond);
  box-shadow: 0 14px 34px -18px rgba(14, 151, 184, .45);
}

.rm-ico { font-size: 30px; line-height: 1; margin-bottom: 10px; }
.rm-t {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
  font-size: 15px;
  margin-bottom: 6px;
}
.rm-d { color: var(--text-dim); font-size: 12.5px; line-height: 1.4; }

.rm-arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  color: var(--diamond);
}

.rm-orders {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px dashed var(--line-2);
}
.rm-chip {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
}
.rm-buy  { color: var(--green); border-color: rgba(15,157,88,.4); background: rgba(15,157,88,.08); }
.rm-sell { color: var(--red);   border-color: rgba(217,59,48,.4); background: rgba(217,59,48,.08); }
.rm-sl   { color: var(--gold-2); border-color: rgba(138,112,76,.4); background: var(--gold-soft); }
.rm-tp   { color: var(--diamond-2); border-color: rgba(14,151,184,.4); background: rgba(14,151,184,.08); }

.rm-points {
  list-style: none;
  padding: 0;
  margin: 36px auto 0;
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
}
.rm-points li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px 18px;
}
.rm-p-ico { font-size: 22px; line-height: 1.3; flex: 0 0 auto; }
.rm-points b {
  display: block;
  font-family: var(--font-display);
  color: var(--text);
  font-size: 15px;
  margin-bottom: 3px;
}
.rm-points em { font-style: normal; color: var(--text-dim); font-size: 13.5px; line-height: 1.5; }

.rm-note {
  margin: 28px auto 0;
  max-width: 800px;
  text-align: center;
  color: var(--text-mute);
  font-size: 12.5px;
  line-height: 1.6;
}

@media (max-width: 860px) {
  .rm-stage { flex-wrap: wrap; }
  .rm-node { flex: 1 1 44%; }
  .rm-arrow { transform: rotate(90deg); flex-basis: 100%; justify-content: center; }
  .rm-points { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .rm-flow { padding: 22px 16px; }
  .rm-node { flex: 1 1 100%; }
}