/* ============================================================
   FlashDex
   Design system: Material 3 tokens on an International
   Typographic Style (Swiss) layout.

   - Mathematical 12-column grid, 8dp spacing scale
   - Neo-grotesque type (Roboto), flush left, ragged right
   - Objective: no glow, no gradient decoration, no ornament
   - One accent colour, used to mean something
   - M3 colour roles, type scale, shape and elevation tokens
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&family=Roboto+Mono:wght@400;500;700&display=swap');

/* ------------------------------------------------------------
   Dark colour roles — deep space base, electric violet/cyan
   ------------------------------------------------------------ */
:root{
  --primary:#34D399;
  --on-primary:#032117;
  --primary-container:rgba(52,211,153,.16);
  --on-primary-container:#B7F4DC;

  --secondary:#F5B74C;
  --secondary-container:rgba(245,183,76,.14);

  --tertiary:#4ADE80;              /* positive / captured value */
  --tertiary-container:rgba(74,222,128,.15);

  --error:#FF6E6E;
  --error-container:rgba(255,110,110,.14);
  --on-error-container:#FFD7D7;

  --bg:#07060E;
  --surface:#0C0B16;
  --surface-container-lowest:#0C0B16;
  --surface-container-low:#100F1C;
  --surface-container:#151325;
  --surface-container-highest:#1E1B33;

  --on-surface:#EDEBF7;
  --on-surface-variant:#A7A2C4;
  --outline:#5A5578;
  --outline-variant:#282542;

  --inverse-surface:#EDEBF7;
  --inverse-on-surface:#0C0B16;

  /* Accents for decoration: emerald + gold on black */
  --acc-violet:#34D399;
  --acc-cyan:#F5B74C;
  --acc-green:#4ADE80;

  /* M3 elevation */
  --el1:0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --el2:0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);

  /* M3 shape */
  --shape-xs:4px;
  --shape-s:8px;
  --shape-m:12px;
  --shape-full:999px;

  --font:'Roboto',Helvetica,Arial,sans-serif;
  --mono:'Roboto Mono',ui-monospace,monospace;

  /* Swiss grid */
  --cols:12;
  --gutter:24px;
  --margin:clamp(16px,4vw,64px);
  --maxw:1360px;

  /* 8dp spacing scale */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px;
  --s6:48px; --s7:64px; --s8:80px; --s9:96px;

  --ease:cubic-bezier(.2,0,0,1);          /* M3 emphasized */
  --nav-h:64px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--on-surface);
  font-family:var(--font);
  font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60% 50% at 85% -5%, rgba(52,211,153,.14), transparent 60%),
    radial-gradient(50% 45% at 8% 18%, rgba(245,183,76,.09), transparent 60%),
    radial-gradient(45% 40% at 50% 110%, rgba(74,222,128,.06), transparent 60%),
    var(--bg);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(52,211,153,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52,211,153,.045) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(75% 60% at 50% 0%, #000 0%, transparent 100%);
  mask-image:radial-gradient(75% 60% at 50% 0%, #000 0%, transparent 100%);
}
img,svg,canvas{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
::selection{background:var(--primary);color:var(--on-primary);}
.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;}

/* ------------------------------------------------------------
   M3 type scale
   ------------------------------------------------------------ */
.display-l{font-size:clamp(38px,5.8vw,57px);line-height:1.06;font-weight:700;letter-spacing:-.022em;}
.display-m{font-size:clamp(30px,4.2vw,45px);line-height:1.12;font-weight:700;letter-spacing:-.02em;}
.display-s{font-size:clamp(26px,3.2vw,36px);line-height:1.18;font-weight:700;letter-spacing:-.018em;}
.headline-s{font-size:clamp(19px,1.9vw,24px);line-height:1.33;font-weight:500;letter-spacing:-.008em;}
.title-l{font-size:20px;line-height:1.4;font-weight:500;}
.body-l{font-size:clamp(15.5px,1.1vw,18px);line-height:1.6;font-weight:400;color:var(--on-surface-variant);}
.body-m{font-size:14px;line-height:1.55;font-weight:400;color:var(--on-surface-variant);}
.label-s{font-family:var(--mono);font-size:11px;line-height:1.45;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--on-surface-variant);}

h1,h2,h3,h4{font-weight:500;}
strong{font-weight:500;color:var(--on-surface);}

/* ------------------------------------------------------------
   Swiss grid
   ------------------------------------------------------------ */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--margin);}
.grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gutter);}
.c3{grid-column-end:span 3;} .c4{grid-column-end:span 4;} .c5{grid-column-end:span 5;}
.c6{grid-column-end:span 6;} .c7{grid-column-end:span 7;} .c8{grid-column-end:span 8;}
.c9{grid-column-end:span 9;} .c12{grid-column-end:span 12;}
.start2{grid-column-start:2;} .start7{grid-column-start:7;} .start9{grid-column-start:9;}

main{position:relative;}
.sec{padding-block:var(--s8);border-top:1px solid var(--outline-variant);}
.sec.alt{background:rgba(21,19,37,.5);}

/* Keep anchored sections clear of the sticky app bar */
.sec,.showcase,#top{scroll-margin-top:var(--nav-h);}

/* Section marker — Swiss numbered rule */
.marker{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:var(--s2);margin-bottom:var(--s5);}
.marker .n{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--acc-cyan);letter-spacing:.04em;}
.marker .t{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--on-surface-variant);}
.marker .r{height:1px;background:var(--outline-variant);position:relative;overflow:hidden;}
.marker .r::after{
  content:"";position:absolute;inset:0;width:40%;
  background:linear-gradient(90deg,transparent,var(--acc-violet),transparent);
  transform:translateX(-120%);animation:sweep 4.5s var(--ease) infinite;
}
@keyframes sweep{55%{transform:translateX(280%);}100%{transform:translateX(280%);}}

.measure{max-width:62ch;}
.mt2{margin-top:var(--s2);} .mt3{margin-top:var(--s3);}
.mt4{margin-top:var(--s4);} .mt5{margin-top:var(--s5);} .mt6{margin-top:var(--s6);}

/* ------------------------------------------------------------
   M3 top app bar
   ------------------------------------------------------------ */
#prog{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--acc-violet),var(--acc-cyan));z-index:60;transition:width .1s linear;box-shadow:0 0 12px rgba(52,211,153,.8);}
.appbar{
  position:sticky;top:0;z-index:50;height:var(--nav-h);
  background:rgba(7,6,14,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.appbar.raised{border-bottom-color:var(--outline-variant);}
.appbar-in{height:var(--nav-h);display:flex;align-items:center;gap:var(--s3);}
.brand{display:flex;align-items:center;gap:10px;flex:none;}
.brand b{font-size:19px;font-weight:700;letter-spacing:-.02em;}

/* Animated logo — spinning dashed ring + flashing bolt */
.logo-anim{width:26px;height:26px;color:var(--primary);flex:none;filter:drop-shadow(0 0 6px rgba(52,211,153,.55));}
.logo-anim.sm{width:16px;height:16px;filter:none;}
.logo-anim .lm-ring{transform-box:fill-box;transform-origin:center;animation:spin 10s linear infinite;}
.logo-anim .lm-bolt{transform-box:fill-box;transform-origin:center;animation:boltflash 4.2s ease-in-out infinite;}
@keyframes boltflash{
  0%,86%,100%{opacity:1;transform:scale(1);}
  89%{opacity:.35;transform:scale(.82);}
  92%{opacity:1;transform:scale(1.14);}
  95%{opacity:.55;transform:scale(.94);}
}
.navlinks{display:flex;gap:2px;margin-left:auto;}
.navlinks a{font-size:14px;font-weight:500;color:var(--on-surface-variant);padding:10px 12px;border-radius:var(--shape-s);transition:background .15s,color .15s;}
.navlinks a:hover{background:var(--surface-container);color:var(--on-surface);}
.navactions{display:flex;align-items:center;gap:var(--s1);flex:none;margin-left:auto;}
.navlinks + .navactions{margin-left:var(--s3);}

/* M3 buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding-inline:24px;border-radius:var(--shape-full);
  font-size:14px;font-weight:500;white-space:nowrap;
  transition:background .15s var(--ease),box-shadow .15s var(--ease),border-color .15s,transform .2s var(--ease);
}
.btn:active{transform:scale(.97);}
.btn-filled{background:var(--primary);color:var(--on-primary);box-shadow:0 0 0 rgba(52,211,153,0);}
.btn-filled:hover{background:#5FE3B8;box-shadow:0 6px 24px rgba(52,211,153,.45);}
.btn-outlined{border:1px solid var(--outline);color:var(--on-primary-container);}
.btn-outlined:hover{background:var(--primary-container);border-color:var(--primary);}
.btn-lg{height:48px;padding-inline:28px;font-size:15px;}

.iconbtn{display:none;width:40px;height:40px;border-radius:var(--shape-full);align-items:center;justify-content:center;flex-direction:column;gap:4px;transition:background .15s;}
.iconbtn:hover{background:var(--surface-container);}
.iconbtn span{display:block;width:16px;height:2px;background:var(--on-surface);border-radius:2px;transition:transform .2s var(--ease),opacity .15s;}
.iconbtn.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.iconbtn.open span:nth-child(2){opacity:0;}
.iconbtn.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.drawer{
  position:fixed;inset:var(--nav-h) 0 auto 0;z-index:45;display:none;
  background:var(--surface);border-bottom:1px solid var(--outline-variant);
  box-shadow:var(--el2);padding:var(--s2) var(--margin) var(--s4);
}
.drawer.open{display:block;}
.drawer a{display:block;font-size:16px;font-weight:500;padding:14px 0;border-bottom:1px solid var(--outline-variant);}
.drawer .btn{width:100%;margin-top:var(--s3);}
body.locked{overflow:hidden;}

/* ------------------------------------------------------------
   Hero — asymmetric, flush left
   ------------------------------------------------------------ */
.hero{position:relative;padding-block:var(--s9) var(--s6);border-top:none;}
.hero .eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-primary-container);background:var(--primary-container);
  border:1px solid rgba(52,211,153,.35);
  padding:6px 14px;border-radius:var(--shape-full);margin-bottom:var(--s3);
}
.hero h1{margin-bottom:var(--s3);text-wrap:balance;}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(92deg,var(--acc-violet) 10%,var(--acc-cyan) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .body-l{max-width:52ch;margin-bottom:var(--s5);}
.hero-actions{display:flex;gap:var(--s2);flex-wrap:wrap;}

/* Ambient hero motion */
.hero-stage{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;}
.orb-a{width:340px;height:340px;right:-40px;top:-60px;background:radial-gradient(circle,rgba(52,211,153,.30),transparent 65%);animation:drift 14s ease-in-out infinite alternate;}
.orb-b{width:260px;height:260px;left:-30px;bottom:-40px;background:radial-gradient(circle,rgba(245,183,76,.20),transparent 65%);animation:drift 18s ease-in-out infinite alternate-reverse;}
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1);}
  to{transform:translate3d(40px,30px,0) scale(1.12);}
}
.hero-orbit{position:absolute;inset:0;pointer-events:none;}
.hero-orbit span{
  position:absolute;border:1px dashed rgba(52,211,153,.26);border-radius:50%;
  animation:orbit linear infinite;
}
.hero-orbit span:nth-child(1){width:280px;height:280px;right:6%;top:8%;animation-duration:26s;}
.hero-orbit span:nth-child(2){width:420px;height:420px;right:-6%;top:-14%;animation-duration:40s;animation-direction:reverse;}
.hero-orbit i{
  position:absolute;top:-4px;left:50%;width:8px;height:8px;border-radius:50%;
  background:var(--acc-cyan);box-shadow:0 0 12px var(--acc-cyan);
}
.hero-orbit span:nth-child(2) i{background:var(--acc-violet);box-shadow:0 0 12px var(--acc-violet);}
@keyframes orbit{to{transform:rotate(360deg);}}

/* Hero — animated flash-loan cycle (flash -> borrow -> repay -> profit) */
.hero-anim{
  border:1px solid var(--outline-variant);border-radius:var(--shape-m);
  background:rgba(16,15,28,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.45),0 0 40px rgba(52,211,153,.06);
}
.ha-head{
  display:flex;align-items:center;gap:8px;padding:10px 16px;
  border-bottom:1px solid var(--outline-variant);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-surface-variant);
}
.ha-net{margin-left:auto;color:var(--tertiary);font-weight:700;letter-spacing:.04em;animation:netglow 7s linear infinite;}
.ha-svg{width:100%;height:auto;display:block;}
.ha-node rect{fill:var(--surface-container);stroke:var(--outline-variant);}
.ha-profit rect{stroke:rgba(74,222,128,.45);}
.ha-t1{font-family:var(--mono);font-size:10px;letter-spacing:.1em;fill:var(--on-surface-variant);text-anchor:middle;}
.ha-t2{font-family:var(--mono);font-size:12px;font-weight:700;fill:var(--on-surface);text-anchor:middle;}
.ha-profit .ha-t2{fill:var(--tertiary);}
.ha-wire{fill:none;stroke:var(--outline-variant);stroke-width:1.5;stroke-dasharray:3 6;animation:flowdash 1.1s linear infinite;}
.ha-wire-ret{stroke:rgba(245,183,76,.35);}
@keyframes flowdash{to{stroke-dashoffset:-18;}}
.ha-ring{fill:none;stroke:rgba(52,211,153,.4);stroke-width:1.2;stroke-dasharray:4 10;transform-box:fill-box;transform-origin:center;animation:spin 14s linear infinite;}
.ha-ring.r2{stroke:rgba(245,183,76,.35);stroke-dasharray:2 8;animation-duration:9s;animation-direction:reverse;}
@keyframes spin{to{transform:rotate(360deg);}}
.ha-bolt{fill:var(--acc-cyan);opacity:0;filter:drop-shadow(0 0 10px rgba(245,183,76,.9));transform-box:fill-box;transform-origin:center;animation:cyclebolt 7s linear infinite;}
@keyframes cyclebolt{
  0%,5%{opacity:0;transform:scale(.6);}
  8%{opacity:1;transform:scale(1.25);}
  11%{opacity:.25;transform:scale(.9);}
  14%{opacity:1;transform:scale(1.15);}
  20%,100%{opacity:0;transform:scale(1);}
}
.ha-coin{opacity:0;}
.ha-coin circle{fill:var(--acc-cyan);stroke:#0A0913;stroke-width:1.5;filter:drop-shadow(0 0 6px rgba(245,183,76,.8));}
.ha-coin text{font-family:var(--mono);font-size:10px;font-weight:700;fill:#241703;text-anchor:middle;}
.ha-coin.c1{animation:coinA 7s linear infinite;}
.ha-coin.c2{animation:coinB 7s linear infinite;}
.ha-coin.c3{animation:coinC 7s linear infinite;}
@keyframes coinA{ /* borrow: pool -> engine */
  0%,9%{opacity:0;transform:translate(112px,148px);}
  12%{opacity:1;}
  30%{opacity:1;transform:translate(244px,148px);}
  33%,100%{opacity:0;transform:translate(244px,148px);}
}
@keyframes coinB{ /* repay: engine -> pool, down and back along the return wire */
  0%,40%{opacity:0;transform:translate(288px,182px);}
  43%{opacity:1;}
  50%{transform:translate(288px,214px);}
  68%{transform:translate(67px,214px);}
  74%{opacity:1;transform:translate(67px,182px);}
  77%,100%{opacity:0;transform:translate(67px,182px);}
}
@keyframes coinC{ /* profit: engine -> profit node */
  0%,46%{opacity:0;transform:translate(336px,148px);}
  49%{opacity:1;}
  66%{opacity:1;transform:translate(408px,148px);}
  69%,100%{opacity:0;transform:translate(408px,148px);}
}
.ha-pop{font-family:var(--mono);font-size:15px;font-weight:700;fill:var(--tertiary);text-anchor:middle;opacity:0;transform-box:fill-box;transform-origin:center;animation:profitpop 7s linear infinite;filter:drop-shadow(0 0 8px rgba(74,222,128,.7));}
@keyframes profitpop{
  0%,70%{opacity:0;transform:translateY(8px) scale(.8);}
  76%{opacity:1;transform:translateY(0) scale(1.12);}
  82%{transform:scale(1);}
  93%{opacity:1;}
  100%{opacity:0;transform:scale(1);}
}
@keyframes netglow{
  0%,70%,100%{text-shadow:none;opacity:.85;}
  78%,90%{text-shadow:0 0 14px rgba(74,222,128,.9);opacity:1;}
}
.ha-stage{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;fill:var(--outline);text-anchor:middle;}

/* ------------------------------------------------------------
   Liquidity — animated pool flow diagram
   ------------------------------------------------------------ */
.liqflow{width:100%;height:auto;display:block;}
.lf-wire{fill:none;stroke:var(--outline-variant);stroke-width:1.5;stroke-dasharray:3 6;animation:flowdash 1.4s linear infinite;}
.lf-b{stroke:rgba(245,183,76,.3);animation-direction:reverse;}
.lf-dot{fill:var(--acc-cyan);filter:drop-shadow(0 0 5px rgba(245,183,76,.8));offset-path:path("M12 108 C 110 40, 200 140, 300 75 S 460 45, 508 96");animation:lfmove 5s linear infinite;}
.lf-dot.d2{animation-delay:-1.7s;fill:var(--acc-violet);filter:drop-shadow(0 0 5px rgba(52,211,153,.8));}
.lf-dot.d3{animation-delay:-3.3s;}
@keyframes lfmove{from{offset-distance:0%;}to{offset-distance:100%;}}
.lf-pool rect{fill:var(--surface-container);stroke:var(--outline-variant);}
.lf-pool text{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;fill:var(--on-surface-variant);text-anchor:middle;}

/* ------------------------------------------------------------
   Arbitrage — animated price-gap chart
   ------------------------------------------------------------ */
.arbchart{width:100%;height:auto;display:block;border:1px solid var(--outline-variant);border-radius:var(--shape-m);background:var(--surface-container-low);}
.ac-grid line{stroke:var(--outline-variant);stroke-dasharray:2 6;}
.ac-line{fill:none;stroke-width:2;}
.ac-buy{stroke:var(--acc-violet);stroke-dasharray:620;stroke-dashoffset:620;animation:drawline 2.6s var(--ease) forwards, linewidth 0s;}
.ac-sell{stroke:var(--acc-cyan);stroke-dasharray:620;stroke-dashoffset:620;animation:drawline 2.6s .35s var(--ease) forwards;}
@keyframes drawline{to{stroke-dashoffset:0;}}
@keyframes linewidth{}
.ac-band{fill:rgba(74,222,128,.18);opacity:0;animation:bandin .8s 1.6s var(--ease) forwards;}
@keyframes bandin{to{opacity:1;}}
.ac-scan{stroke:rgba(74,222,128,.55);stroke-width:1;animation:scanx 3.4s ease-in-out infinite;opacity:.7;}
@keyframes scanx{0%{transform:translateX(0);}50%{transform:translateX(520px);}100%{transform:translateX(0);}}
.ac-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;fill:var(--on-surface-variant);}

/* ------------------------------------------------------------
   Cross-chain — animated constellation
   ------------------------------------------------------------ */
.chainweb{width:100%;max-width:460px;height:auto;display:block;margin-inline:auto;}
.cw-links line{stroke:var(--outline-variant);stroke-width:1.2;stroke-dasharray:3 5;animation:flowdash 2s linear infinite;}
.cw-node circle{fill:var(--surface-container);stroke:var(--outline-variant);stroke-width:1.5;transition:stroke .2s;}
.cw-node text{font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.05em;fill:var(--on-surface-variant);text-anchor:middle;}
.cw-node.hub circle{fill:var(--primary-container);stroke:var(--primary);}
.cw-node.hub text{fill:var(--on-primary-container);font-size:10px;}
.cw-pulse{fill:none;stroke:var(--acc-violet);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center;animation:ripple 3.2s ease-out infinite;}
.cw-pulse.p2{animation-delay:1.6s;}
@keyframes ripple{0%{transform:scale(1);opacity:.8;}100%{transform:scale(5.4);opacity:0;}}
.cw-sig{fill:var(--acc-cyan);filter:drop-shadow(0 0 5px rgba(245,183,76,.9));offset-path:path("M230 150 L230 40 M230 150 L330 80 M230 150 L360 170");offset-rotate:0deg;animation:cwtravel 6s linear infinite;}
@keyframes cwtravel{0%{offset-distance:0%;opacity:0;}5%{opacity:1;}32%{offset-distance:100%;opacity:0;}33%{offset-distance:0%;opacity:0;}100%{offset-distance:100%;opacity:0;}}

/* Key figures — a Swiss data block, not stat cards */
.figures{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4) var(--s3);border-top:2px solid var(--primary);padding-top:var(--s3);margin-top:var(--s6);}
.figures dt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-surface-variant);margin-bottom:6px;}
.figures dd{font-family:var(--mono);font-size:clamp(28px,3.2vw,42px);font-weight:500;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--on-surface);text-shadow:0 0 24px rgba(52,211,153,.3);}

/* ------------------------------------------------------------
   Cards (M3 outlined)
   ------------------------------------------------------------ */
.card{background:var(--surface-container-low);border:1px solid var(--outline-variant);border-radius:var(--shape-m);padding:var(--s3);transition:box-shadow .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease);}
.card:hover{box-shadow:0 12px 40px rgba(0,0,0,.45),0 0 0 1px rgba(52,211,153,.35);transform:translateY(-4px);border-color:rgba(52,211,153,.5);}
.card h3{font-size:16px;font-weight:500;letter-spacing:-.006em;margin-bottom:8px;}
.card p{font-size:14px;line-height:1.55;color:var(--on-surface-variant);}
.card .ic{width:40px;height:40px;border-radius:var(--shape-s);background:var(--primary-container);display:flex;align-items:center;justify-content:center;margin-bottom:var(--s2);transition:transform .3s var(--ease);}
.card:hover .ic{transform:scale(1.1) rotate(-4deg);}
.card .ic svg{width:20px;height:20px;stroke:var(--on-primary-container);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}

/* ------------------------------------------------------------
   Comparison — two plain ruled columns
   ------------------------------------------------------------ */
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter) var(--s4);}
.compare section{border-top:2px solid var(--outline);padding-top:var(--s2);}
.compare section.accent{border-top-color:var(--primary);}
.compare h3{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--on-surface-variant);margin-bottom:var(--s2);}
.compare section.accent h3{color:var(--on-primary-container);}
.compare ul{list-style:none;}
.compare li{font-size:15px;padding:12px 0;border-bottom:1px solid var(--outline-variant);color:var(--on-surface-variant);}
.compare section.accent li{color:var(--on-surface);}
.compare li:last-child{border-bottom:none;}

/* ------------------------------------------------------------
   Numbered lists / steps
   ------------------------------------------------------------ */
.steps{border-top:1px solid var(--outline-variant);}
.steps li{list-style:none;display:grid;grid-template-columns:40px 1fr;gap:var(--s2);padding:14px 0;border-bottom:1px solid var(--outline-variant);align-items:baseline;}
.steps .n{font-family:var(--mono);font-size:12px;color:var(--primary);font-variant-numeric:tabular-nums;}
.steps .x{font-size:15px;}

.flow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter) var(--s4);counter-reset:step;}
.flow > div{border-top:2px solid var(--outline);padding-top:var(--s2);position:relative;transition:border-color .3s var(--ease);}
.flow > div:hover{border-top-color:var(--acc-cyan);}
.flow .k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc-cyan);margin-bottom:8px;}
.flow h4{font-size:17px;font-weight:500;margin-bottom:6px;letter-spacing:-.008em;}
.flow p{font-size:14px;color:var(--on-surface-variant);line-height:1.55;}

/* M3 banner */
.banner{display:flex;gap:var(--s2);align-items:flex-start;background:var(--error-container);color:var(--on-error-container);border:1px solid rgba(255,110,110,.35);border-radius:var(--shape-s);padding:var(--s2) var(--s3);}
.banner.neutral{background:var(--surface-container);color:var(--on-surface-variant);border-color:var(--outline-variant);}
.banner .lbl{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;flex:none;padding-top:2px;}
.banner p{font-size:14px;line-height:1.55;}

/* ------------------------------------------------------------
   Liquidity
   ------------------------------------------------------------ */
.sources{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter) var(--s4);}
.source{border-top:1px solid var(--outline-variant);padding-top:var(--s2);}
.source .row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);margin-bottom:8px;}
.source h3{font-size:18px;font-weight:500;letter-spacing:-.01em;}
.source .role{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--outline);white-space:nowrap;}
.source p{font-size:14px;color:var(--on-surface-variant);line-height:1.55;}

.ledger{border:1px solid var(--outline-variant);border-radius:var(--shape-m);background:var(--surface-container-low);padding:var(--s3);}
.ledger .lh{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-surface-variant);padding-bottom:12px;border-bottom:1px solid var(--outline-variant);margin-bottom:var(--s2);}
.ledger dl{display:grid;grid-template-columns:1fr auto;gap:12px var(--s2);align-items:baseline;}
.ledger dt{font-size:14px;color:var(--on-surface-variant);}
.ledger dd{font-family:var(--mono);font-size:13px;text-align:right;font-variant-numeric:tabular-nums;}
.ledger dd.pos{color:var(--tertiary);}
.ledger .tot{grid-column:1/-1;border-top:1px solid var(--outline-variant);margin-top:8px;padding-top:12px;display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);}
.ledger .tot span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-surface-variant);}
.ledger .tot b{font-family:var(--mono);font-size:18px;font-weight:500;color:var(--tertiary);font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(74,222,128,.4);}

/* ------------------------------------------------------------
   Quotes
   ------------------------------------------------------------ */
.quotes{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:var(--s3);}
.quote{border-top:2px solid var(--outline);padding-top:var(--s2);}
.quote.sell{border-top-color:var(--tertiary);}
.quote .venue{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-surface-variant);margin-bottom:4px;}
.quote .side{font-size:13px;color:var(--outline);margin-bottom:10px;}
.quote .px{font-family:var(--mono);font-size:clamp(28px,3.4vw,46px);font-weight:500;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;}
.quote.sell .px{color:var(--tertiary);text-shadow:0 0 26px rgba(74,222,128,.35);}
.spread{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding-inline:var(--s2);}
.spread .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-surface-variant);}
.spread .v{font-family:var(--mono);font-size:clamp(20px,2.2vw,28px);font-weight:500;color:var(--acc-cyan);font-variant-numeric:tabular-nums;animation:pulseV 2.4s ease-in-out infinite;}
@keyframes pulseV{0%,100%{text-shadow:0 0 8px rgba(245,183,76,.2);}50%{text-shadow:0 0 22px rgba(245,183,76,.75);}}

/* ------------------------------------------------------------
   Engine — M3 list
   ------------------------------------------------------------ */
.engine{border-top:1px solid var(--outline-variant);}
.engine .row{display:grid;grid-template-columns:48px 1fr auto;gap:var(--s3);align-items:center;padding:var(--s2) var(--s1);border-bottom:1px solid var(--outline-variant);transition:background .2s,transform .2s var(--ease);}
.engine .row:hover{background:var(--surface-container-low);transform:translateX(4px);}
.engine .n{font-family:var(--mono);font-size:12px;color:var(--acc-cyan);font-variant-numeric:tabular-nums;}
.engine h3{font-size:16px;font-weight:500;letter-spacing:-.006em;}
.engine p{font-size:14px;color:var(--on-surface-variant);margin-top:2px;}
.engine .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-primary-container);border:1px solid rgba(52,211,153,.4);background:var(--primary-container);border-radius:var(--shape-full);padding:5px 12px;white-space:nowrap;}

.engine-radar{border:1px solid var(--outline-variant);border-radius:var(--shape-m);overflow:hidden;background:rgba(16,15,28,.72);}
.er-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);padding:10px var(--s2);border-bottom:1px solid var(--outline-variant);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-surface-variant);}
.er-head span{display:flex;align-items:center;gap:8px;}.er-head i{width:7px;height:7px;border-radius:50%;background:var(--tertiary);box-shadow:0 0 8px var(--tertiary);animation:led 1.8s ease-in-out infinite;}.er-head b{font-weight:500;color:var(--tertiary);white-space:nowrap;}
.engine-radar svg{width:100%;height:170px;display:block;}.er-grid line{stroke:var(--outline-variant);stroke-width:1;stroke-dasharray:3 8;}.er-area{fill:url(#radarFill);}.er-line{fill:none;stroke:var(--primary);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(52,211,153,.65));}.er-scan{stroke:var(--acc-cyan);stroke-width:1.4;filter:drop-shadow(0 0 5px rgba(245,183,76,.8));animation:scanx 5s ease-in-out infinite;}
.er-labels{display:grid;grid-template-columns:repeat(7,1fr);padding:8px var(--s2) 12px;border-top:1px solid var(--outline-variant);}.er-labels span{font-family:var(--mono);font-size:9px;letter-spacing:.04em;text-align:center;text-transform:uppercase;color:var(--outline);}

/* ------------------------------------------------------------
   Waterfall
   ------------------------------------------------------------ */
.wf{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s2);align-items:end;}
.wfc{display:grid;grid-template-rows:auto 1fr auto;gap:var(--s1);min-height:240px;}
.wfc .v{font-family:var(--mono);font-size:clamp(11px,1.05vw,14px);font-variant-numeric:tabular-nums;color:var(--on-surface-variant);letter-spacing:-.02em;}
.wfc.pos .v{color:var(--tertiary);font-weight:500;}
.wfc .plot{display:flex;align-items:flex-end;min-height:0;}
.wfc .bar{width:100%;height:var(--h,0);background:var(--surface-container-highest);transition:height .9s var(--ease),width .9s var(--ease);border-radius:2px 2px 0 0;}
.wfc.pos .bar{background:var(--tertiary-container);}
.wfc .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--outline);border-top:1px solid var(--outline-variant);padding-top:8px;}

.profit-pulse{display:flex;align-items:center;gap:var(--s2);padding-top:var(--s3);}.pp-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-surface-variant);white-space:nowrap;}.pp-line{height:1px;background:var(--outline-variant);flex:1;position:relative;overflow:hidden;}.pp-line i{display:block;width:44px;height:100%;background:linear-gradient(90deg,transparent,var(--primary),transparent);animation:ppflow 2.4s linear infinite;}@keyframes ppflow{from{transform:translateX(-44px);}to{transform:translateX(260px);}}.pp-profit{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--tertiary);text-shadow:0 0 14px rgba(74,222,128,.45);white-space:nowrap;}

/* ------------------------------------------------------------
   Ecosystem matrix
   ------------------------------------------------------------ */
.matrix{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--outline-variant);border:1px solid var(--outline-variant);border-radius:var(--shape-m);overflow:hidden;}
.matrix div{background:var(--surface);padding:var(--s3);display:flex;flex-direction:column;gap:12px;transition:background .2s;}
.matrix div:hover{background:var(--surface-container);}
.matrix svg{width:22px;height:22px;stroke:var(--primary);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(52,211,153,.5));}
.matrix span{font-size:14px;font-weight:500;}

.signal-field{display:flex;align-items:center;gap:var(--s2);overflow:hidden;padding:14px var(--s2);border-top:1px solid var(--outline-variant);border-bottom:1px solid var(--outline-variant);}
.signal-field span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-surface-variant);white-space:nowrap;}.signal-field i{height:1px;min-width:32px;flex:1;background:var(--outline-variant);position:relative;overflow:hidden;}.signal-field i::after{content:"";position:absolute;inset:0;width:35%;background:var(--primary);box-shadow:0 0 8px var(--primary);animation:signalrun 2.8s linear infinite;}.signal-field i:nth-of-type(2)::after{animation-delay:-.7s;}.signal-field i:nth-of-type(3)::after{animation-delay:-1.4s;}.signal-field i:nth-of-type(4)::after{animation-delay:-2.1s;}@keyframes signalrun{from{transform:translateX(-140%);}to{transform:translateX(320%);}}

/* ------------------------------------------------------------
   Networks
   ------------------------------------------------------------ */
.networks{display:flex;flex-wrap:wrap;gap:var(--s1);}
.networks span{display:inline-flex;align-items:center;gap:8px;height:36px;padding-inline:16px;border:1px solid var(--outline-variant);border-radius:var(--shape-full);font-size:14px;color:var(--on-surface-variant);transition:border-color .2s,color .2s,box-shadow .2s;}
.networks span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc-green);box-shadow:0 0 8px var(--acc-green);animation:led 2.6s ease-in-out infinite;}
.networks span:hover{border-color:var(--primary);color:var(--on-surface);box-shadow:0 0 16px rgba(52,211,153,.25);}

/* ------------------------------------------------------------
   Terms
   ------------------------------------------------------------ */
.terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter) var(--s4);}
.terms section{border-top:2px solid var(--outline);padding-top:var(--s2);}
.terms h3{font-size:16px;font-weight:500;margin-bottom:12px;}
.terms p,.terms li{font-size:14px;color:var(--on-surface-variant);line-height:1.6;}
.terms ul{list-style:none;}
.terms li{padding:8px 0;border-bottom:1px solid var(--outline-variant);}
.terms li:last-child{border-bottom:none;}

/* ------------------------------------------------------------
   Ticker — drifting market marquee
   ------------------------------------------------------------ */
.ticker{border-top:1px solid var(--outline-variant);border-bottom:1px solid var(--outline-variant);background:rgba(12,11,22,.6);overflow:hidden;contain:paint;}
.ticker-in{display:flex;align-items:center;gap:var(--s4);width:max-content;padding-block:10px;animation:tick 34s linear infinite;will-change:transform;}
.ticker-in span{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--on-surface-variant);white-space:nowrap;}
.ticker-in b{font-weight:500;color:var(--on-surface);}
.ticker-in .up{color:var(--acc-green);}
.ticker-in .dn{color:var(--error);}
@keyframes tick{to{transform:translateX(-50%);}}

/* ------------------------------------------------------------
   Closing + footer
   ------------------------------------------------------------ */
.closing{
  position:relative;padding-block:var(--s9);border-top:1px solid var(--outline-variant);
  background:
    radial-gradient(70% 90% at 50% 120%, rgba(52,211,153,.16), transparent 65%),
    #0A0913;
  overflow:hidden;
}
.closing h2{margin-bottom:var(--s3);}
.closing p{color:var(--on-surface-variant);max-width:52ch;margin-bottom:var(--s5);}
.closing .btn-filled{background:var(--primary);color:var(--on-primary);}
.closing .btn-filled:hover{background:#5FE3B8;box-shadow:0 6px 24px rgba(52,211,153,.5);}
.closing .btn-outlined{border-color:var(--outline);color:var(--on-surface);}
.closing .btn-outlined:hover{background:var(--surface-container);border-color:var(--primary);}
.closing h2 em{font-style:normal;background:linear-gradient(92deg,var(--primary),var(--acc-cyan));-webkit-background-clip:text;background-clip:text;color:transparent;}.closing-signal{border:1px solid rgba(52,211,153,.35);border-radius:var(--shape-m);background:rgba(12,11,22,.7);overflow:hidden;box-shadow:0 20px 55px rgba(0,0,0,.38),0 0 45px rgba(52,211,153,.08);}.cs-head,.cs-foot{display:flex;align-items:center;gap:10px;padding:11px var(--s2);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-surface-variant);}.cs-head{border-bottom:1px solid var(--outline-variant);}.cs-head b{margin-left:auto;color:var(--tertiary);font-weight:500;white-space:nowrap;}.cs-core{height:180px;display:grid;place-items:center;position:relative;overflow:hidden;}.cs-core .logo-anim{width:68px;height:68px;position:relative;z-index:2;filter:drop-shadow(0 0 14px rgba(52,211,153,.7));}.cs-ring{position:absolute;width:112px;height:112px;border:1px dashed rgba(52,211,153,.4);border-radius:50%;animation:spin 12s linear infinite;}.cs-ring.r2{width:164px;height:164px;border-color:rgba(245,183,76,.3);border-style:dotted;animation-direction:reverse;animation-duration:18s;}.cs-foot{justify-content:space-between;border-top:1px solid var(--outline-variant);color:var(--outline);}

footer{padding-block:var(--s7) var(--s4);border-top:1px solid var(--outline-variant);}
footer h4{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--on-surface-variant);margin-bottom:var(--s2);}
footer nav a{display:block;font-size:14px;color:var(--on-surface-variant);padding:6px 0;transition:color .15s;}
footer nav a:hover{color:var(--primary);}
.disclosure{border-top:1px solid var(--outline-variant);margin-top:var(--s6);padding-top:var(--s3);}
.disclosure b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--error);margin-bottom:8px;}
.disclosure p{font-size:13px;color:var(--on-surface-variant);line-height:1.65;max-width:100ch;}
.colophon{display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--outline-variant);font-family:var(--mono);font-size:11px;color:var(--outline);}

/* ------------------------------------------------------------
   Motion — restrained
   ------------------------------------------------------------ */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.rv.in{opacity:1;transform:none;}
.rv.d1{transition-delay:.08s;} .rv.d2{transition-delay:.16s;}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important;transition:none!important;}
  html{scroll-behavior:auto;}
  .ticker-in,.orb,.hero-orbit span,.marker .r::after,.spread .v,
  .networks span::before,.pill .led,.ha-ring,.ha-bolt,.ha-coin,.ha-pop,
  .ha-wire,.ha-net,.logo-anim .lm-ring,.logo-anim .lm-bolt,
  .lf-wire,.lf-dot,.ac-scan,.cw-links line,.cw-pulse,.cw-sig,
  .ac-buy,.ac-sell{animation:none!important;}
  .ac-buy,.ac-sell{stroke-dashoffset:0!important;}
  .ac-band{opacity:1!important;}
}

/* ============================================================
   Responsive — the grid collapses 12 -> 8 -> 4
   ============================================================ */
@media (max-width:1200px){
  .terms{grid-template-columns:repeat(2,minmax(0,1fr));}
  .matrix{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:1000px){
  :root{--cols:8;--gutter:20px;}
  .c3{grid-column-end:span 4;}
  .c4,.c5,.c6,.c7,.c8,.c9{grid-column-end:span 8;}
  .start2,.start7,.start9{grid-column-start:auto;}
  .navlinks{display:none;}
  .iconbtn{display:flex;}
  .hero{padding-block:var(--s7) var(--s6);}
  .figures{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (max-width:760px){
  :root{--cols:4;--gutter:16px;}
  .c3,.c4,.c5,.c6,.c7,.c8,.c9,.c12{grid-column-end:span 4;}
  .sec{padding-block:var(--s6);}
  .compare,.sources,.flow,.terms{grid-template-columns:minmax(0,1fr);}
  .matrix{grid-template-columns:repeat(2,minmax(0,1fr));}
  .quotes{grid-template-columns:minmax(0,1fr);gap:var(--s2);}
  .spread{flex-direction:row;justify-content:flex-start;gap:10px;padding:0;border-top:1px solid var(--outline-variant);padding-top:12px;}
  .engine .row{grid-template-columns:32px 1fr;gap:var(--s2);}
  .engine .tag{display:none;}
  .figures{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s2);}
  .figures dd{font-size:clamp(26px,7vw,34px);}
}
@media (max-width:520px){
  /* Five currency columns cannot stay legible on a phone. Re-form the
     chart as a labelled horizontal bar list instead of shrinking type. */
  .wf{grid-template-columns:minmax(0,1fr);gap:0;}
  .wfc{grid-template-rows:none;grid-template-columns:1fr auto;min-height:0;gap:6px var(--s2);
       padding:12px 0;border-bottom:1px solid var(--outline-variant);align-items:baseline;}
  .wfc:last-child{border-bottom:none;}
  .wfc .k{grid-column:1;grid-row:1;border-top:none;padding-top:0;font-size:11px;letter-spacing:.04em;}
  .wfc .v{grid-column:2;grid-row:1;text-align:right;font-size:13px;}
  .wfc .plot{grid-column:1/-1;grid-row:2;display:block;height:8px;border-radius:4px;
             background:var(--surface-container);}
  .wfc .bar{width:var(--h,0);height:8px;border-radius:4px;}
  .matrix{grid-template-columns:minmax(0,1fr);}
  .hero-actions{flex-direction:column;align-items:stretch;}
  .hero-actions .btn{width:100%;}
}
/* Two buttons no longer fit beside the menu on a narrow bar. Drop the
   secondary one first and keep Log in — it is the reason most people
   arrive, and it is the one action that is not also in the drawer's
   link list. It only goes at the very smallest widths, where the
   drawer still carries it. */
@media (max-width:760px){
  .navactions > .nav-run{display:none;}
}
@media (max-width:400px){
  .navactions > .btn{display:none;}
}
@media (max-width:360px){
  :root{--margin:14px;}
  .networks span{height:32px;padding-inline:12px;font-size:13px;}
}

@media (max-width:760px){
  .profit-pulse{display:grid;grid-template-columns:1fr;gap:10px;align-items:center;}
  .pp-line{width:100%;min-width:0;}
  .pp-profit{white-space:normal;}
}

/* ============================================================
   PRODUCT SHOWCASE
   A darker, full-bleed section containing a browser-framed view
   of the FlashDex scanner.
   ============================================================ */
.showcase{
  --d-surface:#0A0913;
  --d-container:#100F1C;
  --d-container-high:#171527;
  --d-on:#EDEBF7;
  --d-on-variant:#A7A2C4;
  --d-outline:#5A5578;
  --d-outline-variant:#282542;
  --d-primary:#7BEBC4;
  --d-primary-container:rgba(52,211,153,.18);
  --d-green:#4ADE80;
  background:#0A0913;color:var(--d-on);border-top:1px solid var(--outline-variant);
  position:relative;overflow:hidden;
}
.showcase::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 40% at 80% 0%, rgba(52,211,153,.12), transparent 60%);
}
.showcase .wrap{position:relative;}
.showcase .marker .t{color:var(--d-on-variant);}
.showcase .marker .n{color:var(--d-primary);}
.showcase .marker .r{background:var(--d-outline-variant);}
.showcase h2{color:var(--d-on);}
.showcase .body-l{color:var(--d-on-variant);}

/* Window chrome */
.browser{
  border:1px solid rgba(52,211,153,.3);border-radius:var(--shape-m);
  background:var(--d-container);overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.6),0 0 60px rgba(52,211,153,.10);
}
.chrome{
  display:flex;align-items:center;gap:8px;padding:10px 14px;
  background:var(--d-container-high);border-bottom:1px solid var(--d-outline-variant);
}
.chrome i{width:11px;height:11px;border-radius:50%;flex:none;}
.chrome i:nth-child(1){background:#FF5F57;}
.chrome i:nth-child(2){background:#FEBC2E;}
.chrome i:nth-child(3){background:#28C840;}
.chrome .url{
  flex:1;max-width:320px;margin-inline:auto;text-align:center;
  background:var(--d-surface);border:1px solid var(--d-outline-variant);border-radius:var(--shape-full);
  font-family:var(--mono);font-size:11px;color:var(--d-on-variant);
  padding:5px 14px;
}
.chrome .hint{font-family:var(--mono);font-size:10.5px;color:var(--d-outline);flex:none;}

/* App shell */
.app{display:grid;grid-template-columns:184px minmax(0,1fr);}
.side{border-right:1px solid var(--d-outline-variant);padding:16px 12px;background:var(--d-surface);}
.side .logo{display:flex;align-items:center;gap:8px;padding:4px 8px 16px;}
.side .logo svg{width:16px;height:16px;fill:var(--d-primary);}
.side .logo b{font-size:14px;font-weight:700;letter-spacing:-.02em;color:var(--d-on);}
.side .grp{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--d-outline);padding:12px 8px 6px;}
.side a{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--shape-full);
  font-size:13px;color:var(--d-on-variant);
}
.side a.on{background:var(--d-primary-container);color:var(--d-primary);font-weight:500;box-shadow:inset 0 0 0 1px rgba(52,211,153,.4);}
.side a i{width:6px;height:6px;border-radius:2px;background:currentColor;opacity:.55;flex:none;}

.main{padding:18px clamp(14px,1.6vw,22px);min-width:0;}
.apphead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.apphead h3{font-size:17px;font-weight:500;color:var(--d-on);}
.pill{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--d-outline-variant);border-radius:var(--shape-full);
  padding:5px 11px;color:var(--d-on-variant);
}
.pill .led{width:6px;height:6px;border-radius:50%;background:var(--d-green);flex:none;animation:led 1.8s ease-in-out infinite;}
@keyframes led{0%,100%{opacity:1}50%{opacity:.3}}
.apphead .right{margin-left:auto;display:flex;gap:8px;align-items:center;}

/* KPI strip */
.kpis{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--d-outline-variant);border:1px solid var(--d-outline-variant);
  border-radius:var(--shape-s);overflow:hidden;margin-bottom:16px;
}
.kpis div{background:var(--d-surface);padding:11px 13px;}
.kpis dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--d-outline);}
.kpis dd{font-family:var(--mono);font-size:17px;color:var(--d-on);margin-top:4px;font-variant-numeric:tabular-nums;}
.kpis dd.g{color:var(--d-green);}

/* Data table */
.dtwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.dt{width:100%;border-collapse:collapse;min-width:680px;}
table.dt th{
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--d-outline);text-align:right;padding:0 10px 9px;
  border-bottom:1px solid var(--d-outline-variant);white-space:nowrap;
}
table.dt th:first-child,table.dt th:nth-child(2){text-align:left;}
table.dt td{padding:11px 10px;border-bottom:1px solid rgba(68,71,70,.5);font-size:13px;text-align:right;white-space:nowrap;}
table.dt td:first-child,table.dt td:nth-child(2){text-align:left;}
table.dt tbody tr{transition:background .25s var(--ease);}
table.dt tbody tr.active{background:rgba(52,211,153,.14);}
table.dt tbody tr.done{background:rgba(74,222,128,.08);}

.pair{display:flex;align-items:center;gap:9px;}
.coins{display:flex;flex:none;}
.coins span{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:9px;font-weight:700;letter-spacing:-.02em;color:#0B1020;
  border:1.5px solid var(--d-surface);
}
.coins span:nth-child(2){margin-left:-8px;}
.pair b{font-weight:500;color:var(--d-on);font-size:13px;}
.route{font-family:var(--mono);font-size:11.5px;color:var(--d-on-variant);}
.route em{font-style:normal;color:var(--d-outline);}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--d-on);}
.num.g{color:var(--d-green);}
.st{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;border-radius:var(--shape-full);
  padding:4px 9px;border:1px solid var(--d-outline-variant);color:var(--d-on-variant);
}
.st.run{border-color:var(--d-primary);color:var(--d-primary);}
.st.ok{border-color:var(--d-green);color:var(--d-green);}

/* Execution drawer */
.exec{
  margin-top:16px;border:1px solid var(--d-outline-variant);border-radius:var(--shape-s);
  background:var(--d-surface);padding:14px;
}
.exec .eh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.exec .eh span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--d-outline);}
.exec .eh b{font-family:var(--mono);font-size:12px;color:var(--d-on);font-weight:400;}
.exec .eh .net{margin-left:auto;font-family:var(--mono);font-size:15px;color:var(--d-green);font-variant-numeric:tabular-nums;}
.esteps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
.estep{
  border:1px solid var(--d-outline-variant);border-radius:var(--shape-xs);padding:10px 11px;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.estep .k{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--d-outline);margin-bottom:6px;}
.estep .k i{width:13px;height:13px;border-radius:50%;border:1px solid var(--d-outline);flex:none;display:grid;place-items:center;font-size:8px;line-height:1;font-style:normal;}
.estep p{font-family:var(--mono);font-size:11.5px;color:var(--d-on-variant);line-height:1.45;}
.estep.on{border-color:var(--d-primary);background:rgba(52,211,153,.16);}
.estep.on .k{color:var(--d-primary);}
.estep.on .k i{border-color:var(--d-primary);}
.estep.done{border-color:rgba(74,222,128,.5);background:rgba(74,222,128,.08);}
.estep.done .k{color:var(--d-green);}
.estep.done .k i{border-color:var(--d-green);background:var(--d-green);color:#08210F;}
.estep.done .k i::after{content:"\2713";font-size:8px;line-height:1;}

.showcase .caption{
  display:flex;gap:10px;align-items:baseline;margin-top:14px;
  font-family:var(--mono);font-size:11px;color:var(--d-outline);line-height:1.6;
}
.showcase .caption b{color:var(--d-on-variant);font-weight:500;flex:none;}

@media (max-width:1000px){
  .esteps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:760px){
  .app{grid-template-columns:minmax(0,1fr);}
  .side{display:none;}
  .chrome .hint{display:none;}
  .chrome .url{max-width:none;}
}
@media (max-width:520px){
  .esteps{grid-template-columns:minmax(0,1fr);}
  .apphead .right{width:100%;margin-left:0;}
}