/* Sellnaut landing page */
:root {
  --navy-950:#06102B; --navy-900:#0A1A45; --navy-800:#12266B; --navy-700:#1C3690;
  --accent:#3D5AFE; --accent-ink:#2A43D6; --accent-soft:#EEF1FF;
  --mint:#2EE6A6; --mint-ink:#053B29;
  --ink:#0E1B2C; --ink-2:#44506A; --ink-3:#6B7690; --line:#E3E7EE; --bg:#F6F7FB;
  --good:#12805C; --bad:#C7362F;
  --display: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --on-dark:#C9D3F5; --on-dark-2:#98A6D6;
  --r:14px;
  --wrap:1200px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 17px/1.6 var(--body); color: var(--ink); background: #fff; overflow-x: hidden; }
img, svg { display: block; }
a { color: var(--accent-ink); }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -.01em; line-height: 1.2; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--mint); color: var(--mint-ink); padding: 10px 16px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.hero :focus-visible, .nav :focus-visible, .block-dark :focus-visible, .final :focus-visible, .plan-pop :focus-visible { outline-color: var(--mint); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 22px; border-radius: 10px; font: 700 16px/1 var(--body); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease, border-color .15s ease; white-space: nowrap; }
.btn svg { flex: none; }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 15px; }
.btn-xl { min-height: 60px; padding: 0 30px; font-size: 18px; border-radius: 12px; }
.btn-mint { background: var(--mint); color: var(--mint-ink); box-shadow: 0 10px 30px -12px rgba(46,230,166,.7); }
.btn-mint:hover { background: #52EDB8; transform: translateY(-1px); }
.btn-line { color: #fff; border-color: rgba(255,255,255,.35); }
.btn-line:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.btn-outline { color: var(--ink); border-color: var(--line); background: #fff; }
.btn-outline:hover { border-color: var(--accent); color: var(--accent-ink); }

/* Nav */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(6,16,43,.92); color: #fff; transition: box-shadow .2s ease, background-color .2s ease; }
@supports (backdrop-filter: blur(8px)) { .nav { background: rgba(6,16,43,.78); backdrop-filter: saturate(140%) blur(12px); } }
.nav.scrolled { box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 10px 30px -18px rgba(0,0,0,.6); }
.nav-row { display: flex; align-items: center; gap: 28px; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 21px/1 var(--display); letter-spacing: -.01em; color: #fff; text-decoration: none; }
.brand-mark { width: 30px; height: 30px; }
.brand-dark { color: var(--ink); font-size: 20px; }
.brand-dark .brand-mark { width: 26px; height: 26px; }
.nav-links { display: flex; gap: 26px; margin-left: 12px; }
.nav-links a { color: var(--on-dark); text-decoration: none; font-size: 15px; font-weight: 500; }
.nav-links a:hover { color: #fff; }
.nav-mobile-cta { display: none; }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.nav-signin { display: inline-flex; align-items: center; gap: 7px; color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; }
.nav-signin:hover { color: var(--mint); }
.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.2); background: transparent; border-radius: 10px; cursor: pointer; position: relative; }
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after { position: absolute; left: 12px; width: 18px; height: 2px; background: #fff; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle .bars { top: 21px; }
.nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; left: 0; }
.nav-toggle .bars::before { top: -6px; } .nav-toggle .bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Hero */
.hero { position: relative; overflow: hidden; color: #fff; background:
  radial-gradient(900px 520px at 85% 20%, rgba(61,90,254,.38), transparent 60%),
  radial-gradient(700px 500px at 0% 100%, rgba(46,230,166,.10), transparent 60%),
  linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 45%, var(--navy-800) 100%);
  margin-top: -72px; padding: 150px 0 110px; }
.hero-shapes { display: none; }
.sh { position: absolute; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.05); }
.sh1 { width: 420px; height: 300px; left: -120px; top: 110px; transform: rotate(-8deg); border-radius: 28px; }
.sh2 { width: 520px; height: 520px; right: -160px; top: -200px; border-radius: 50%; background: rgba(61,90,254,.12); border: 0; }
.sh3 { width: 260px; height: 260px; right: 38%; bottom: -140px; transform: rotate(18deg); border-radius: 36px; }
.sh4 { width: 180px; height: 180px; left: 42%; top: 60px; border-radius: 26px; transform: rotate(24deg); background: rgba(46,230,166,.05); }
.sh-line { position: absolute; width: 4px; border-radius: 4px; }
.sh-line.l1 { height: 64px; left: 49%; top: 120px; background: var(--mint); opacity: .7; }
.sh-line.l2 { height: 80px; right: 4%; bottom: 120px; background: var(--accent); }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,1fr); gap: 56px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; border-radius: 999px; background: rgba(46,230,166,.1); border: 1px solid rgba(46,230,166,.28); color: var(--mint); font-weight: 600; font-size: 14px; letter-spacing: .01em; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(46,230,166,.6); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(46,230,166,.55); } 70% { box-shadow: 0 0 0 9px rgba(46,230,166,0); } 100% { box-shadow: 0 0 0 0 rgba(46,230,166,0); } }
.hero-list .nw { white-space: nowrap; }
.hero h1 { margin: 22px 0 20px; font-weight: 700; font-size: clamp(36px, 4.3vw, 56px); line-height: 1.1; letter-spacing: -.02em; }
.hl { color: var(--mint); position: relative; white-space: nowrap; }
.lede { font-size: 19px; line-height: 1.6; color: var(--on-dark); max-width: 560px; }
.hero-list { margin: 28px 0 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; max-width: 600px; }
.hero-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; font-weight: 500; color: #E7ECFF; line-height: 1.4; }
.hero-list li.wide { grid-column: 1 / -1; }
.hero-list svg { width: 22px; height: 22px; flex: none; color: var(--mint); margin-top: -1px; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.btn-play { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-weight: 600; text-decoration: none; font-size: 17px; min-height: 44px; }
.btn-play .play { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); display: grid; place-items: center; transition: border-color .15s ease, background-color .15s ease; }
.btn-play .play svg { margin-left: 2px; }
.btn-play:hover .play { border-color: var(--mint); background: rgba(46,230,166,.1); }
.hero-note { margin-top: 16px; font-size: 15px; color: var(--on-dark-2); }

/* Hero mockup */
.hero-visual { position: relative; }
.mock { background: #fff; color: var(--ink); border-radius: 18px; box-shadow: 0 50px 100px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1); overflow: hidden; }
.mock-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #FBFBFD; }
.dots { display: flex; gap: 6px; } .dots i { width: 10px; height: 10px; border-radius: 50%; background: #DDE2EC; }
.mock-title { font: 700 15px/1 var(--display); }
.mock-chip { margin-left: auto; font-size: 12px; color: var(--ink-3); background: var(--bg); border: 1px solid var(--line); padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.periods { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; padding: 14px; background: var(--bg); }
.period { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.p-head { font-size: 12px; font-weight: 700; color: #fff; padding: 7px 10px; letter-spacing: .01em; }
.p1 .p-head { background: var(--accent); }
.p2 .p-head { background: var(--navy-700); }
.p3 .p-head { background: #0F8A66; }
.p-body { padding: 10px; display: grid; gap: 8px; }
.kv span { display: block; font-size: 11px; color: var(--ink-3); line-height: 1.2; }
.kv b { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kv b.neg { color: var(--bad); font-weight: 600; }
.kv.np { border-top: 1px solid var(--line); padding-top: 8px; }
.kv.np b { color: var(--good); font-size: 15px; }
.feed { padding: 14px 16px 16px; border-top: 1px solid var(--line); }
.feed-head { display: flex; align-items: center; gap: 9px; font: 700 14px/1 var(--display); margin-bottom: 10px; }
.feed-time { margin-left: auto; font: 500 12px var(--body); color: var(--ink-3); }
.live { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); animation: pulse 2s infinite; }
.feed-list { display: grid; gap: 8px; }
.feed-list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.35; color: var(--ink-2); padding: 8px 10px; border-radius: 10px; background: var(--bg); opacity: 0; transform: translateY(8px); animation: feedIn .5s ease forwards; }
.feed-list li b { color: var(--ink); font-weight: 600; }
.feed-list li em { font-style: normal; color: var(--accent-ink); font-weight: 600; }
.feed-list li:nth-child(1) { animation-delay: .5s; }
.feed-list li:nth-child(2) { animation-delay: 1.4s; }
.feed-list li:nth-child(3) { animation-delay: 2.3s; }
.feed-list li:nth-child(4) { animation-delay: 3.2s; }
@keyframes feedIn { to { opacity: 1; transform: none; } }
.fi { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.fi svg { width: 16px; height: 16px; }
.fi-ad { background: var(--accent-soft); color: var(--accent-ink); }
.fi-stop { background: #FDECEB; color: var(--bad); }
.fi-star { background: #FFF4DB; color: #9A6200; }
.fi-pen { background: #E3FBF2; color: var(--good); }
.float-chip { position: absolute; left: -34px; bottom: -62px; display: flex; align-items: center; gap: 12px; background: var(--navy-950); border: 1px solid rgba(255,255,255,.14); color: #fff; padding: 12px 16px; border-radius: 14px; box-shadow: 0 20px 40px -18px rgba(0,0,0,.7); }
.float-chip svg { color: var(--mint); }
.float-chip b { display: block; font-size: 14px; }
.float-chip span { font-size: 12.5px; color: var(--on-dark-2); }

/* Trust strip */
.trust { background: var(--navy-950); color: var(--on-dark); border-top: 1px solid rgba(255,255,255,.06); }
.trust-row { display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; padding-top: 26px; padding-bottom: 26px; flex-wrap: wrap; }
.trust-lead { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.trust-lead svg { color: var(--mint); flex: none; }
.trust-lead b { color: #fff; font-weight: 600; }
.markets { display: flex; flex-wrap: wrap; gap: 8px; }
.markets li { font-size: 14px; font-weight: 600; color: #fff; padding: 7px 13px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.markets li.more { color: var(--on-dark-2); background: transparent; }

/* Sections */
.block { padding: 110px 0; }
.block-soft { background: var(--bg); }
.block-dark { background: linear-gradient(180deg, var(--navy-950), var(--navy-900)); color: #fff; }
.head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.head-left { text-align: left; margin: 0; }
.kicker { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 14px; }
.kicker-mint { color: var(--mint); }
.head h2 { font-size: clamp(28px, 3.1vw, 40px); text-wrap: balance; line-height: 1.15; font-weight: 700; letter-spacing: -.015em; }
.head .sub { margin-top: 18px; font-size: 18px; color: var(--ink-2); }
.diag-grid .head h2 { font-size: clamp(28px, 3vw, 38px); }
.block-dark .head .sub { color: var(--on-dark); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 30px 28px 30px; text-align: left; }
.step-n { position: absolute; top: 20px; right: 22px; font: 800 44px/1 var(--display); color: #DCE2FF; }
.step-ic { position: relative; width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: var(--navy-900); color: var(--mint); margin-bottom: 22px; }
.step-ic svg { width: 26px; height: 26px; }
.step h3 { font-size: 22px; line-height: 1.2; margin-bottom: 10px; }
.step p { color: var(--ink-2); font-size: 16px; }

/* Agent cards */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 28px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover { transform: translateY(-3px); border-color: #CDD5F7; box-shadow: 0 24px 40px -28px rgba(18,38,107,.35); }
.card-ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); margin-bottom: 18px; }
.card-ic svg { width: 24px; height: 24px; }
.card h3 { font-size: 21px; line-height: 1.2; margin-bottom: 10px; }
.card p { color: var(--ink-2); font-size: 16px; }
.card-ask { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 36px; align-items: center; background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); border: 0; color: #fff; padding: 36px; }
.card-ask:hover { border-color: transparent; }
.card-ask .card-ic { background: rgba(46,230,166,.14); color: var(--mint); }
.card-ask h3 { font-size: 26px; }
.card-ask p { color: var(--on-dark); }
.ask-chat { display: grid; gap: 12px; }
.bubble { max-width: 88%; padding: 13px 16px; border-radius: 14px; font-size: 15px; line-height: 1.5; }
.bubble.me { justify-self: end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.bubble.ai { background: #fff; color: var(--ink); border-bottom-left-radius: 4px; }
.bubble.ai b { color: var(--good); }

/* Diagnosis funnel */
.diag-grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 56px; align-items: center; }
.verdict { margin-top: 30px; padding: 20px 22px; border-radius: var(--r); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-left: 4px solid var(--mint); }
.verdict-tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mint); margin-bottom: 8px; }
.verdict p { color: var(--on-dark); font-size: 16px; }
.verdict b { color: #fff; }
/* Diagnosis scanner: shoppers flow down four steps; the agent scans them in order and stops at the leak. */
.dx { position: relative; border-radius: 18px; padding: 18px 18px 14px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.dx-top { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--on-dark); margin: 0 2px 14px; }
.dx-top b { color: #fff; }
.dx-scan-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(46,230,166,.6); animation: dxPing 1.6s ease-out infinite; flex: none; }
@keyframes dxPing { 0% { box-shadow: 0 0 0 0 rgba(46,230,166,.55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(46,230,166,0); } }
.dx-status { flex: 1; min-width: 0; }
.dx-prog { width: 90px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; flex: none; }
.dx-prog i { display: block; height: 100%; width: 100%; background: var(--mint); border-radius: inherit; transition: width .5s ease; }
.dx-body { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; }
.dx-flow { grid-column: 1; grid-row: 1; width: 58px; height: 100%; }
.dx-steps { grid-column: 2; grid-row: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dx-step { position: relative; border-radius: 12px; padding: 12px 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); transition: background .35s, border-color .35s, opacity .35s, transform .35s; }
.dx-step::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: linear-gradient(90deg, transparent, rgba(46,230,166,.22), transparent) no-repeat; background-size: 40% 100%; }
.dx-step.is-scan::before { opacity: 1; animation: dxSweep 1s linear infinite; }
@keyframes dxSweep { from { background-position: -60% 0; } to { background-position: 160% 0; } }
.dx-bar { display: grid; grid-template-columns: 28px minmax(0, auto) minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.dx-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 800 13px/1 var(--display); background: rgba(255,255,255,.12); color: #fff; }
.dx-t { font: 700 16.5px/1.2 var(--display); color: #fff; white-space: nowrap; }
.dx-m { font-size: 13.5px; color: var(--on-dark-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.dx-b { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 99px; color: var(--on-dark-2); background: rgba(255,255,255,.08); }
.dx-checks { list-style: none; margin: 10px 0 0 38px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dx-checks li { font-size: 13px; font-weight: 500; color: var(--on-dark); padding: 4px 10px 4px 8px; border-radius: 99px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); display: inline-flex; align-items: center; gap: 6px; transition: opacity .3s, transform .3s; }
.dx-checks li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.35); }
.dx-checks li.ok::before { background: var(--mint); }
.dx-checks li.bad { color: #fff; border-color: rgba(255,107,94,.55); background: rgba(255,107,94,.14); }
.dx-checks li.bad::before { background: #FF6B5E; }
.dx-checks li.warn::before { background: #FFB547; }
.dx-checks li.hid { opacity: 0; transform: translateY(4px); }
.dx-step.is-pass { border-color: rgba(46,230,166,.28); }
.dx-step.is-pass .dx-n { background: var(--mint); color: var(--mint-ink); }
.dx-step.is-pass .dx-b { color: var(--mint); background: rgba(46,230,166,.12); }
.dx-step.is-fail { border-color: rgba(255,107,94,.6); background: linear-gradient(90deg, rgba(255,107,94,.16), rgba(255,107,94,.04)); }
.dx-step.is-fail .dx-n { background: #FF6B5E; color: #fff; }
.dx-step.is-fail .dx-b { color: #fff; background: #E5483B; }
.dx-step.is-fail .dx-m { color: #FFD3CE; }
.dx-step.is-wait { opacity: .55; }
.dx-step.is-wait .dx-checks li::before { background: rgba(255,255,255,.25); }
.dx-step.is-idle .dx-checks, .dx-step.is-scan .dx-checks { opacity: .45; }
.dx-step.is-idle .dx-m { opacity: .4; }
.dx-legend { display: flex; gap: 18px; flex-wrap: wrap; margin: 12px 2px 0; font-size: 12.5px; color: var(--on-dark-2); }
.dx-legend span { display: inline-flex; align-items: center; gap: 7px; }
.dx-legend i { width: 8px; height: 8px; border-radius: 50%; }
.lg-flow { background: var(--mint); } .lg-leak { background: #FF6B5E; }
.dx-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.dx-pick button { font: 600 14px/1 var(--body); color: var(--on-dark); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 99px; padding: 10px 16px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.dx-pick button:hover { background: rgba(255,255,255,.1); color: #fff; }
.dx-pick button.on { background: var(--mint); color: var(--mint-ink); border-color: var(--mint); }
.verdict { margin-top: 18px; }
.verdict p { min-height: 4.8em; }
.verdict .caret { display: inline-block; width: 2px; height: 1em; background: var(--mint); vertical-align: -2px; margin-left: 2px; animation: dxBlink 1s steps(1) infinite; }
@keyframes dxBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dx-scan-dot, .dx-step.is-scan::before, .verdict .caret { animation: none; } }

/* Control */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mode { border: 1px solid var(--line); border-radius: var(--r); padding: 32px; background: #fff; }
.mode-auto { background: var(--accent-soft); border-color: #D5DCFF; }
.mode-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--navy-900); color: var(--mint); margin-bottom: 18px; }
.mode-ic svg { width: 26px; height: 26px; }
.mode h3 { font-size: 26px; margin-bottom: 10px; }
.mode p { color: var(--ink-2); margin-bottom: 18px; }
.ticks { display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.45; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.guard { margin-top: 20px; background: var(--navy-950); color: #fff; border-radius: var(--r); padding: 34px; display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.6fr); gap: 36px; align-items: start; }
.guard-head { display: flex; gap: 16px; align-items: flex-start; }
.guard-ic { width: 48px; height: 48px; flex: none; border-radius: 12px; background: rgba(46,230,166,.14); color: var(--mint); display: grid; place-items: center; }
.guard-ic svg { width: 24px; height: 24px; }
.guard h3 { font-size: 23px; margin-bottom: 8px; line-height: 1.15; }
.guard-head p { color: var(--on-dark); font-size: 15px; }
.guard-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.guard-list li { padding-left: 16px; border-left: 2px solid var(--mint); }
.guard-list b { display: block; font-size: 16px; }
.guard-list span { display: block; font-size: 14.5px; line-height: 1.45; color: var(--on-dark-2); margin-top: 2px; }

/* Profit table mock */
.table-mock { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 40px 80px -50px rgba(18,38,107,.45); overflow: hidden; }
.tm-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tm-bar b { font: 700 17px var(--display); }
.tm-tabs { display: flex; gap: 4px; background: var(--bg); padding: 4px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.tm-tabs span { padding: 6px 12px; border-radius: 7px; }
.tm-tabs .on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(14,27,44,.12); }
.tm-scroll { overflow-x: auto; }
.tm-scroll:focus-visible { outline-offset: -3px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; min-width: 760px; }
th, td { padding: 14px 18px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
thead th { font-size: 13px; font-weight: 600; color: var(--ink-3); background: #FBFBFD; }
thead th:first-child, tbody th { text-align: left; }
tbody th { font-weight: 600; }
.pcell { display: flex; align-items: center; gap: 12px; }
tbody tr:last-child > * { border-bottom: 0; }
tbody tr:hover > * { background: #FAFBFF; }
thead th:first-child, tbody th { position: sticky; left: 0; z-index: 1; background: #fff; }
thead th:first-child { background: #FBFBFD; }
.tm-hint { display: none; }
td.pos { color: var(--good); font-weight: 700; }
td.neg { color: var(--bad); }
.thumb { width: 32px; height: 32px; border-radius: 8px; flex: none; }
.t1 { background: linear-gradient(135deg, #E7D3BF, #A57C55); }
.t2 { background: linear-gradient(135deg, #FFD7A8, #E07B22); }
.t3 { background: linear-gradient(135deg, #D6E1FF, #5872D9); }
.t4 { background: linear-gradient(135deg, #CFF5E2, #2A9C6C); }
.t5 { background: linear-gradient(135deg, #F4E1F0, #B45E9E); }
.tm-note { padding: 12px 22px; font-size: 13px; color: var(--ink-3); border-top: 1px solid var(--line); background: #FBFBFD; }
.deducts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.deducts li { font-size: 14.5px; font-weight: 600; color: var(--ink-2); padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
.deducts li::before { content: "−"; color: var(--bad); font-weight: 700; margin-right: 6px; }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; padding: 32px; background: #fff; }
.plan h3 { font-size: 24px; }
.plan-for { color: var(--ink-3); font-size: 15px; margin-top: 6px; min-height: 48px; }
.price { margin: 18px 0 22px; display: flex; align-items: baseline; gap: 6px; }
.price b { font: 800 52px/1 var(--display); letter-spacing: -.015em; }
.price span { color: var(--ink-3); font-size: 16px; }
.plan .ticks { margin-bottom: 28px; flex: 1; }
.plan .btn { width: 100%; }
.plan-pop { background: linear-gradient(160deg, var(--navy-900), var(--navy-800)); border-color: transparent; color: #fff; box-shadow: 0 40px 70px -40px rgba(18,38,107,.8); }
.plan-pop .plan-for, .plan-pop .price span { color: var(--on-dark); }
.plan-pop .ticks li::before { background-color: var(--mint); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23053B29' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pop { position: absolute; top: -13px; left: 32px; background: var(--mint); color: var(--mint-ink); font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; letter-spacing: .02em; }
.plans-note { text-align: center; color: var(--ink-3); font-size: 15px; margin-top: 26px; }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.4fr); gap: 64px; align-items: start; }
.faq { display: grid; gap: 12px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.faq details[open] { border-color: #CDD5F7; box-shadow: 0 16px 30px -24px rgba(18,38,107,.4); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 22px; font: 700 18px/1.3 var(--display); position: relative; border-radius: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%232A43D6' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 22px 22px; color: var(--ink-2); font-size: 16px; }

/* Final CTA */
.final { position: relative; overflow: hidden; background: linear-gradient(140deg, var(--navy-950), var(--navy-800)); color: #fff; padding: 110px 0; text-align: center; }
.final-inner { position: relative; max-width: 860px; }
.final h2 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.15; font-weight: 700; letter-spacing: -.015em; }
.final-sub { margin: 18px auto 34px; color: var(--on-dark); font-size: 18px; max-width: 600px; }
.final-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* Footer */
.foot { background: #fff; border-top: 1px solid var(--line); padding: 36px 0; }
.foot-row { display: grid; grid-template-columns: auto 1fr; gap: 16px 32px; align-items: center; }
.foot-links { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px 24px; }
.foot-links a { color: var(--ink-2); text-decoration: none; font-weight: 500; }
.foot-links a:hover { color: var(--accent-ink); }
.foot-legal { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink-3); }

/* Responsive */
@media (max-width: 1100px) {
  .nav-links { gap: 18px; margin-left: 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 64px; }
  .hero-copy { max-width: 720px; }
  .hero-visual { max-width: 680px; }
  .float-chip { left: auto; right: -12px; }
  .diag-grid, .faq-grid { grid-template-columns: 1fr; gap: 44px; }
  .guard { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 960px) {
  .nav-links { display: none; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px 24px 24px; background: var(--navy-950); border-bottom: 1px solid rgba(255,255,255,.1); box-shadow: 0 20px 30px -20px rgba(0,0,0,.6); }
  .nav-links.open { display: flex; }
  .nav-links > a { padding: 14px 0; font-size: 17px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav-mobile-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
  .nav-cta { display: none; }
  .nav-toggle { display: block; }
  .cards { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
    .plans { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .plan-for { min-height: 0; }
  .card-ask { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .nav-row { height: 64px; }
  .nav-links { top: 64px; padding: 8px 16px 20px; }
  .hero { margin-top: -64px; padding: 104px 0 80px; }
  .hero-list .nw { white-space: nowrap; }
.hero h1 { font-size: 34px; }
  .lede { font-size: 17px; }
  .hero-list { grid-template-columns: 1fr; gap: 10px; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .btn-xl { min-height: 56px; font-size: 17px; padding: 0 20px; white-space: normal; text-align: center; }
  .btn-play { justify-content: center; }
  .hero-note { text-align: center; }
  .hero-visual { margin: 0 -4px; }
  .periods { grid-template-columns: 1fr 1fr; padding: 10px; gap: 8px; }
  .periods .p3 { display: none; }
  .mock-chip { display: none; }
  .feed { padding: 12px; }
  .feed-list li { font-size: 13px; }
  .float-chip { position: relative; left: auto; right: auto; bottom: auto; margin: 14px auto 0; width: fit-content; }
  .sh1, .sh3, .sh-line { display: none; }
  .trust-row { flex-direction: column; align-items: flex-start; }
  .trust-lead { align-items: flex-start; }
  .block { padding: 72px 0; }
  .head { margin-bottom: 36px; text-align: left; }
  .head h2 { font-size: 32px; }
  .head .sub { font-size: 16.5px; }
  .cards { grid-template-columns: 1fr; gap: 14px; }
  .card { padding: 24px; }
  .card-ask { padding: 26px 22px; gap: 24px; }
  .bubble { max-width: 100%; }
  .step { padding: 24px 22px; }
  .dx { padding: 14px 12px 12px; }
  .dx-body { grid-template-columns: 30px minmax(0, 1fr); gap: 8px; }
  .dx-flow { width: 30px; }
  .dx-bar { grid-template-columns: 26px minmax(0, 1fr) auto; row-gap: 2px; }
  .dx-m { grid-column: 2 / 4; grid-row: 2; white-space: normal; }
  .dx-n { width: 26px; height: 26px; }
  .dx-t { font-size: 15.5px; white-space: normal; }
  .dx-checks { margin-left: 0; }
  .dx-prog { display: none; }
  .modes { grid-template-columns: 1fr; gap: 14px; }
  .mode { padding: 24px; }
  .guard { padding: 24px 22px; }
  .guard-list { grid-template-columns: 1fr; }
  .tm-bar { padding: 14px 16px; }
  .tm-tabs { display: none; }
  .tm-hint { display: inline; font-size: 13px; color: var(--ink-3); font-weight: 500; }
  th, td { padding: 12px 14px; }
  thead th:first-child, tbody th { box-shadow: 1px 0 0 var(--line); }
  .thumb { width: 26px; height: 26px; }
  .deducts { justify-content: flex-start; }
  .plan { padding: 28px 24px; }
  .faq summary { font-size: 17px; padding: 18px 52px 18px 18px; }
  .faq summary::after { right: 18px; }
  .faq details p { padding: 0 18px 18px; }
  .final { padding: 80px 0; text-align: left; }
  .final-cta { flex-direction: column; }
  .final h2 { font-size: 32px; }
  .foot-row { grid-template-columns: 1fr; }
  .foot-links { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .feed-list li { opacity: 1; transform: none; animation: none; }
  .pulse, .live { animation: none; }
}

/* ------------------------------------------------------------ Profit X-ray (interactive money flow) */
.btn-primary { background: var(--navy-900); color: #fff; }
.btn-primary:hover { background: var(--navy-800); transform: translateY(-1px); }
.xray { position: relative; overflow: hidden; }
.xray::before { content: ''; position: absolute; inset: -20% -10% auto auto; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(closest-side, rgba(61,90,254,.28), transparent); pointer-events: none; }
.xr-grid { position: relative; display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 32px; align-items: stretch; }
.xr-controls { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.xr-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.xr-chip { font: 600 13.5px/1 var(--body); color: var(--on-dark); background: transparent; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 9px 14px; cursor: pointer; }
.xr-chip:hover { border-color: var(--mint); color: #fff; }
.xr-chip.on { background: var(--mint); border-color: var(--mint); color: var(--mint-ink); }
.xr-sl { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--on-dark); }
.xr-sl > span { display: flex; justify-content: space-between; }
.xr-sl b { color: #fff; font-variant-numeric: tabular-nums; }
.xr-sl input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--mint) var(--fill, 50%), rgba(255,255,255,.15) var(--fill, 50%)); outline-offset: 6px; }
.xr-sl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--mint); cursor: grab; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.xr-sl input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--mint); cursor: grab; }
.xr-verdict { margin-top: auto; background: rgba(46,230,166,.08); border: 1px solid rgba(46,230,166,.35); border-radius: 14px; padding: 14px 16px; }
.xr-verdict.loss { background: rgba(255,107,94,.1); border-color: rgba(255,107,94,.45); }
.xr-agent { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mint); margin-bottom: 6px; }
.xr-verdict.loss .xr-agent { color: #FF8A80; }
.xr-verdict p { font-size: 15px; color: #fff; line-height: 1.5; }
.xr-stage { margin: 0; background: rgba(4,10,30,.55); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; min-height: 440px; }
#xCanvas { width: 100%; flex: 1; min-height: 360px; }
.xr-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--on-dark-2); margin-top: 10px; }
.xr-legend span { display: inline-flex; align-items: center; gap: 6px; }
.xr-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ------------------------------------------------------------ Shared: contact helpers, header state, footer */
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ct-status { font-size: 14.5px; min-height: 1.4em; }
.ct-status.ok { color: var(--good); font-weight: 600; }
.ct-status.err { color: var(--bad); }
.nav-links a { position: relative; }
.nav-links a.active { color: #fff; }
.nav-links a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -25px; height: 3px; border-radius: 3px 3px 0 0; background: var(--mint); }
.adak-logo { width: auto; height: 40px; object-fit: contain; }
.adak-word { display: inline-grid; place-items: center; font: 800 15px/1 var(--display); letter-spacing: .14em; color: #fff; background: linear-gradient(135deg, var(--navy-800), var(--accent)); border-radius: 8px; padding: 8px 10px; }
.foot2 { background: #fff; border-top: 1px solid var(--line); padding: 56px 0 28px; }
.f2-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.f2-brand p { color: var(--ink-2); font-size: 15px; margin-top: 12px; max-width: 320px; }
.f2-by { margin-top: 20px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }
.f2-by b { color: var(--ink); font-size: 14px; }
.f2-col { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.f2-col h4 { margin: 0 0 4px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.f2-col a { color: var(--ink); text-decoration: none; }
.f2-col a:hover { color: var(--accent-ink); }
.f2-col span { color: var(--ink-2); line-height: 1.5; }
.foot2 .foot-legal { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); line-height: 1.6; }
@media (max-width: 960px) { .nav-links a.active::after { display: none; } .nav-links a.active { color: var(--mint); } .f2-grid { grid-template-columns: 1fr 1fr; } .f2-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .f2-grid { grid-template-columns: 1fr; } }
@media (max-width: 960px) {
  .xr-grid { grid-template-columns: 1fr; gap: 28px; }
  .xr-stage { min-height: 380px; }
  #xCanvas { min-height: 320px; }
}
@media (max-width: 560px) {
  .xr-controls, .xr-stage { padding: 16px; }
}
.announce { background: var(--mint); color: var(--mint-ink); text-align: center; font-size: 14.5px; font-weight: 600; padding: 9px 16px; }
.announce a { color: inherit; text-decoration: none; }
.f2-social { display: flex; gap: 14px; margin-top: 16px; flex-wrap: wrap; font-size: 14px; }
.f2-social a { color: var(--ink-2); text-decoration: none; font-weight: 600; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 32px; font-size: 14px; }
.foot-links a { color: var(--ink-2); text-decoration: none; }
.foot-links a:hover { color: var(--accent-ink); }

/* Astronaut (sell + astronaut): a photoreal render floats off the dashboard's top-right corner, as if delivering it.
   Shown only when the image exists (npm run astronaut). */
.hero-visual .astro { position: absolute; z-index: 3; top: -112px; right: -96px; width: 200px; margin: 0; pointer-events: none; }
.hero-visual .astro img { display: block; width: 100%; height: auto; filter: drop-shadow(0 26px 34px rgba(2,8,30,.6)) drop-shadow(0 0 30px rgba(61,90,254,.25)); animation: astroDrift 9s ease-in-out infinite; transform-origin: 50% 40%; }
.hero-visual .astro figcaption { position: absolute; right: calc(100% + 6px); top: 26px; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 12px; background: rgba(6,16,43,.72); border: 1px solid rgba(201,211,245,.18); color: var(--on-dark); font-size: 12.5px; line-height: 1.35; backdrop-filter: blur(6px); width: 168px; }
.hero-visual .astro figcaption b { color: #fff; font-size: 13px; }
@keyframes astroDrift { 0%, 100% { transform: translate(0, 0) rotate(-2deg); } 50% { transform: translate(-6px, -12px) rotate(1.5deg); } }
@media (max-width: 1380px) { .hero-visual .astro { right: -40px; width: 180px; top: -120px; } }
@media (max-width: 960px) { .hero-visual .astro { width: 160px; top: -128px; right: -4px; } }
@media (max-width: 640px) { .hero-visual .astro { width: 112px; top: -96px; right: -6px; } .hero-visual .astro figcaption { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-visual .astro img { animation: none; } }

/* bot check (Cloudflare Turnstile, only when switched on) */
.ts-box { margin: 4px 0 12px; min-height: 0; }
.ts-box[hidden] { display: none; }

/* ---- Machine learning (Profit lab) */
.learn { background: #fff; }
.ln-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.ln-stage { margin: 0; background: linear-gradient(180deg, #F7F8FD, #EFF2FB); border: 1px solid var(--line); border-radius: 20px; padding: 22px 22px 18px; box-shadow: 0 30px 60px -44px rgba(18,38,107,.45); }
.ln-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.ln-day { font-weight: 700; font-size: 14px; color: var(--accent-ink); background: var(--accent-soft); border-radius: 999px; padding: 5px 12px; font-variant-numeric: tabular-nums; }
.ln-stats { display: flex; gap: 20px; }
.ln-stats span { display: flex; flex-direction: column; align-items: flex-end; }
.ln-stats small { font-size: 12px; color: var(--ink-3); }
.ln-stats b { font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
#lnErr { color: var(--accent-ink); }
#lnProfit { color: var(--good); }
.ln-svg { width: 100%; height: auto; display: block; overflow: visible; }
.ln-range { fill: #E7F7F0; }
.ln-grid-l { stroke: #DFE4EE; stroke-width: 1; }
.ln-band { fill: url(#lnBandG); }
.ln-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ln-dot { fill: #fff; stroke: var(--ink-2); stroke-width: 2; }
.ln-dot.good { stroke: var(--good); fill: #DDF5EA; }
.ln-dot.bad { stroke: var(--bad); fill: #FCE7E5; }
.ln-dot.new { animation: lnPop .5s ease-out; }
@keyframes lnPop { from { r: 0; opacity: 0; } 60% { r: 8; } to { opacity: 1; } }
.ln-best line { stroke: var(--good); stroke-width: 2; stroke-dasharray: 5 4; }
.ln-best circle { fill: var(--good); stroke: #fff; stroke-width: 3; }
.ln-best text { font-size: 13px; font-weight: 700; fill: var(--good); }
.ln-ax { font-size: 12px; fill: var(--ink-3); }
.ln-loop { display: flex; justify-content: space-between; gap: 6px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ln-loop span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-3); padding: 6px 10px; border-radius: 999px; transition: background .3s, color .3s; }
.ln-loop i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: #DFE4EE; color: var(--ink-2); transition: background .3s, color .3s; }
.ln-loop span.on { background: var(--navy-900); color: #fff; }
.ln-loop span.on i { background: var(--mint); color: var(--mint-ink); }
.ln-points { display: grid; gap: 14px; }
.ln-point { border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; background: #fff; border-left: 4px solid var(--accent); }
.ln-point:nth-child(2) { border-left-color: var(--mint); }
.ln-point:nth-child(3) { border-left-color: #8B5CF6; }
.ln-point:nth-child(4) { border-left-color: var(--good); }
.ln-point h3 { font-size: 19px; line-height: 1.25; margin-bottom: 6px; }
.ln-point p { color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 1100px) { .ln-grid { grid-template-columns: 1fr; gap: 32px; } .ln-points { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .ln-points { grid-template-columns: 1fr; } .ln-stage { padding: 16px 12px 14px; border-radius: 16px; } .ln-stats b { font-size: 18px; } .ln-loop { justify-content: center; } .ln-loop span { padding: 5px 8px; font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .ln-dot.new { animation: none; } }