/* ==========================================================================
   KALEIDO NEXT — design system v2 « Spectre » (SPEC §1)
   Surcouche amovible. Tous les sélecteurs sont préfixés par page :
   body[data-page="landing"] / body[data-page="app"] (ou body[data-page]
   pour le partagé). Aucune collision possible avec le CSS de prod.
   ========================================================================== */

/* ---------- 0. Fonts locales (zéro réseau) ---------- */
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:600 800;
  font-display:swap;
  src:url('../fonts/manrope-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Syne';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('../fonts/syne800.woff2') format('woff2');
}
@font-face{
  font-family:'Instrument Serif';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/instrumentit.woff2') format('woff2');
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/smono400.woff2') format('woff2');
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/smono700.woff2') format('woff2');
}
/* ---------- 1. Tokens ---------- */
:root{
  --display:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'Space Mono',ui-monospace,Consolas,monospace;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --lime1:#E2FF66;
  --lime2:#CCFF00;
  --lime3:#B8E600;
  --lime-ink:#0B0E00;
  /* spectre 6 bandes (dégradé signature) */
  --sp1:#FF5D55;
  --sp2:#FFB224;
  --sp3:#EDD94F;
  --sp4:#3DD98A;
  --sp5:#45C4F0;
  --sp6:#6A9BFF;
  /* bandes stocks */
  --tsla:#E8483F;
  --amzn:#F79B34;
  --aapl:#B7A24A;
  --nvda:#22B573;
  --msft:#38A9D9;
  --googl:#5B8DEF;
  --meta:#4CC2C4;
  --coin:#2E5BFF;
  --pltr:#8B77E8;
  --nflx:#D5423E;
  --spy:#6A9BFF;
  --amd:#D65DB1;
  --eth:#8A92B2;
  /* personnalisation : le stock choisi recolore CTA et accents */
  --teinte:#3DD98A;
  --teinte-ink:#06130C;
  --ease-out:cubic-bezier(.2,.7,.2,1);
}
/* thème dark (défaut) */
body[data-page]{
  --ground:#0B0D0E;
  --panel:#14171A;
  --panel2:#191D21;
  --hair:#24282C;
  --ink:#F2F1ED;
  --gauge:#A9B2AB;
  --or:#E8C76A;
  --green:#3DD98A;
  --red:#FF5D55;
  --glass:color-mix(in srgb,var(--panel) 72%,transparent);
  --glass-brd:color-mix(in srgb,var(--ink) 9%,transparent);
  --shadow:0 2px 6px rgba(0,0,0,.4),0 28px 70px rgba(0,0,0,.5);
  --spec-edge:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.08) 30%,rgba(255,255,255,0) 55%,rgba(255,255,255,.16));
}
/* thème light */
html[data-theme="light"] body[data-page]{
  --ground:#F7F7F5;
  --panel:#FFFFFF;
  --panel2:#F1F1EE;
  --hair:#E3E3DE;
  --ink:#111512;
  --gauge:#5C635B;
  --or:#9C7B22;
  --green:#178A55;
  --red:#CC4038;
  --glass:color-mix(in srgb,var(--panel) 72%,transparent);
  --glass-brd:color-mix(in srgb,var(--ink) 9%,transparent);
  --shadow:0 1px 2px rgba(17,21,18,.05),0 24px 60px rgba(17,21,18,.12);
  --spec-edge:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.16) 30%,rgba(255,255,255,.02) 55%,rgba(255,255,255,.35));
}
/* ---------- 2. Base (reset doux, scopé) ---------- */
body[data-page],body[data-page] *{
  box-sizing:border-box;
}
body[data-page]{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font:15px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .3s,color .3s;
}
body[data-page] h1,body[data-page] h2,body[data-page] h3,body[data-page] h4,
body[data-page] p,body[data-page] ul,body[data-page] ol,body[data-page] figure{
  margin:0;
}
body[data-page] ul,body[data-page] ol{
  padding:0;
  list-style:none;
}
body[data-page] a{
  color:inherit;
  text-decoration:none;
}
body[data-page] button{
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  cursor:pointer;
}
body[data-page] img,body[data-page] svg,body[data-page] canvas{
  display:block;
  max-width:100%;
}
body[data-page] ::selection{
  background:color-mix(in srgb,var(--lime2) 35%,transparent);
}
/* focus-visible partout : ring 2px --teinte */
body[data-page] a:focus-visible,body[data-page] button:focus-visible,
body[data-page] summary:focus-visible,body[data-page] input:focus-visible,
body[data-page] [tabindex]:focus-visible{
  outline:2px solid var(--teinte);
  outline-offset:2px;
  border-radius:8px;
}
/* ---------- 3. Utilitaires ---------- */
body[data-page] .mono{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums slashed-zero;
}
body[data-page] .muted{
  color:var(--gauge);
}
body[data-page] .grn{
  color:var(--green);
}
body[data-page] .brn{
  color:var(--red);
}
body[data-page] .or{
  color:var(--or);
}
body[data-page] .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;
}
body[data-page] .wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}
body[data-page] .mlabel{
  font-family:var(--mono);
  font-weight:700;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gauge);
}
/* marqueur discret « demo » sur toute donnée issue du provider démo */
body[data-page] .demo-dot{
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--or);
  margin-left:7px;
  vertical-align:2px;
  cursor:help;
  flex:none;
}
/* pastille logo blanche (stocks) */
body[data-page] .slogo{
  width:34px;
  height:34px;
  border-radius:10px;
  background:#fff;
  border:1px solid var(--hair);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  font-family:var(--mono);
  font-weight:700;
  font-size:12px;
  color:#111;
  overflow:hidden;
}
body[data-page] .slogo svg{
  width:22px;
  height:22px;
}
body[data-page] .slogo.sm{
  width:26px;
  height:26px;
  border-radius:8px;
  font-size:10px;
}
body[data-page] .slogo.sm svg{
  width:17px;
  height:17px;
}
/* ---------- 4. Grain & profondeur ---------- */
body[data-page]::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:90;
  pointer-events:none;
  opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
/* champ de fond canvas */
#kcanvas{
  position:fixed;
  inset:0;
  width:100vw;
  height:100dvh;
  z-index:0;
  filter:blur(64px) saturate(1.5);
  opacity:.8;
  transform:scale(1.15);
  will-change:transform;
}
html[data-theme="light"] #kcanvas{
  opacity:.55;
}
/* ---------- 5. Liquid glass v2 ---------- */
body[data-page] .glass{
  position:relative;
  background:var(--glass);
  border:1px solid var(--glass-brd);
  border-radius:20px;
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
  backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:var(--shadow);
}
/* arête spéculaire (gradient haut, opacity .5) */
body[data-page] .glass::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:var(--spec-edge);
  opacity:.5;
  pointer-events:none;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}
/* ---------- 6. Boutons ---------- */
body[data-page] .btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--sans);
  font-weight:700;
  font-size:15px;
  line-height:1;
  color:var(--ink);
  border-radius:999px;
  padding:16px 32px;
  cursor:pointer;
  overflow:hidden;
  border:1px solid transparent;
  white-space:nowrap;
  transition:transform .18s var(--ease-out),box-shadow .25s,background .25s,border-color .25s;
}
body[data-page] .btn:hover{
  opacity:1;
  transform:translateY(-1px);
}
body[data-page] .btn:active{
  transform:translateY(0) scale(.98);
}
body[data-page] .btn:disabled,body[data-page] .btn[aria-disabled="true"]{
  opacity:.45;
  cursor:default;
  transform:none;
  pointer-events:none;
}
/* CTA lime : dégradé 135deg, texte lime-ink, radius 999px */
body[data-page] .btn-lime{
  background:linear-gradient(135deg,var(--lime1) 0%,var(--lime2) 48%,var(--lime3) 100%);
  color:var(--lime-ink);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.6),inset 0 -2px 3px rgba(90,110,0,.25),0 2px 8px rgba(20,25,0,.18);
}
body[data-page] .btn-lime:hover{
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.7),inset 0 -2px 3px rgba(90,110,0,.22),0 6px 18px rgba(20,25,0,.24);
}
/* sheen balayé au hover (translateX) */
body[data-page] .btn-lime::after,body[data-page] .btn-teinte::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.42) 46%,rgba(255,255,255,.14) 52%,transparent 64%);
  background-size:240% 100%;
  background-position:135% 0;
  transition:background-position .55s ease;
}
body[data-page] .btn-lime:hover::after,body[data-page] .btn-teinte:hover::after{
  background-position:-35% 0;
}
/* CTA secondaire ghost hairline */
body[data-page] .btn-ghost{
  background:transparent;
  border:1px solid var(--glass-brd);
  color:var(--ink);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
body[data-page] .btn-ghost:hover{
  border-color:color-mix(in srgb,var(--ink) 24%,transparent);
}
/* CTA coloré par la teinte du stock choisi (app) */
body[data-page] .btn-teinte{
  background:var(--teinte);
  color:var(--teinte-ink);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.35),0 2px 10px color-mix(in srgb,var(--teinte) 40%,transparent);
  transition:transform .18s var(--ease-out),box-shadow .25s,background .3s;
}
body[data-page] .btn-xl{
  font-size:16px;
  padding:19px 40px;
}
body[data-page] .btn-sm{
  font-size:13px;
  padding:11px 20px;
}
body[data-page] .btn-xs{
  font-size:12px;
  padding:9px 16px;
  font-weight:600;
}
/* ---------- 7. Dispersion rule (ligne → éclat → 6 bandes + shimmer) ---------- */
body[data-page] .drule{
  display:flex;
  align-items:center;
  height:14px;
  margin:18px auto 0;
  max-width:440px;
}
body[data-page] .drule .dline{
  height:1px;
  background:var(--hair);
  flex:0 0 26px;
}
body[data-page] .drule .dsplit{
  width:10px;
  height:10px;
  background:var(--hair);
  flex:none;
  margin:0 3px;
  clip-path:polygon(0 100%,50% 0,100% 100%);
}
body[data-page] .drule .dbands{
  position:relative;
  height:11px;
  flex:1;
  overflow:hidden;
  border-radius:0 5px 5px 0;
  background:linear-gradient(to bottom,
    var(--sp1) 0 2px,var(--sp2) 2px 4px,var(--sp3) 4px 6px,
    var(--sp4) 6px 8px,var(--sp5) 8px 9.5px,var(--sp6) 9.5px 11px);
}
body[data-page] .drule .dbands::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%);
  background-size:200% 100%;
  animation:knext-shimmer 4s linear infinite;
}
body[data-page] .drule.small{
  max-width:280px;
  height:10px;
  margin-top:12px;
}
body[data-page] .drule.small .dbands{
  height:8px;
  border-radius:0 4px 4px 0;
}
body[data-page] .drule.small .dsplit{
  width:8px;
  height:8px;
}
@keyframes knext-shimmer{
  from{
    background-position:200% 0;
  }
  to{
    background-position:-200% 0;
  }
}
/* ---------- 8. Spectre 6 bandes : barres & puces ---------- */
body[data-page] .spectrum-bar{
  display:flex;
  height:14px;
  border-radius:7px;
  overflow:hidden;
  margin:14px 0 8px;
}
body[data-page] .spectrum-bar i{
  display:block;
  height:100%;
}
body[data-page] .spectrum-bar.thin{
  height:8px;
  border-radius:4px;
  margin:8px 0;
}
body[data-page] .spec-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:4px 11px;
  border-radius:999px;
  font-family:var(--mono);
  font-weight:700;
  font-size:10px;
  letter-spacing:.1em;
  color:var(--lime-ink);
  background:linear-gradient(90deg,var(--sp1),var(--sp2),var(--sp3),var(--sp4),var(--sp5),var(--sp6));
  text-shadow:0 1px 2px rgba(255,255,255,.25);
}
html[data-theme="light"] body[data-page] .spec-chip{
  text-shadow:none;
}
/* bordure supérieure 3px spectre sur les cartes clés */
body[data-page] .spec-top{
  position:relative;
}
body[data-page] .spec-top::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  border-radius:20px 20px 0 0;
  z-index:1;
  background:linear-gradient(90deg,var(--sp1),var(--sp2),var(--sp3),var(--sp4),var(--sp5),var(--sp6));
}
/* ---------- 9. Reveals ---------- */
/* Etat cache uniquement si JS actif (html.js pose par le script inline du head).
   Sans JS, tout le contenu reste visible (progressive enhancement). */
html.js body[data-page] .rv{
  opacity:0;
  transform:translateY(26px);
}
body[data-page] .rv.in,
html.js body[data-page] .rv.in{
  opacity:1;
  transform:none;
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
  transition-delay:var(--d,0s);
}
/* ---------- 10. Tape marquee (42s, pause hover) ---------- */
body[data-page] .tape{
  overflow:hidden;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  background:color-mix(in srgb,var(--ground) 82%,transparent);
  position:relative;
  z-index:5;
}
body[data-page] .tape-track{
  display:inline-flex;
  gap:52px;
  white-space:nowrap;
  padding:13px 0;
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--gauge);
  animation:knext-tape 42s linear infinite;
  will-change:transform;
}
body[data-page] .tape:hover .tape-track{
  animation-play-state:paused;
}
body[data-page] .tape-track b{
  color:var(--ink);
  font-weight:700;
}
body[data-page] .tape-track .ti{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
@keyframes knext-tape{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(-50%);
  }
}
/* ==========================================================================
   NAV v2 — pilule glass fixe centrée + burger mobile
   ========================================================================== */
body[data-page] .nav{
  position:fixed;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  z-index:60;
  width:min(1200px,calc(100vw - 28px));
  display:flex;
  align-items:center;
  gap:22px;
  padding:10px 12px 10px 20px;
  background:var(--glass);
  border:1px solid var(--glass-brd);
  border-radius:999px;
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
  backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:var(--shadow);
}
body[data-page] .brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex:none;
}
body[data-page] .brand img{
  width:22px;
  height:22px;
}
body[data-page] .brand span{
  font-family:var(--display);
  font-weight:800;
  font-size:14px;
  letter-spacing:.16em;
}
body[data-page] .navlinks{
  display:flex;
  gap:2px;
  margin:0 auto;
}
body[data-page] .navlink{
  font-weight:600;
  font-size:13px;
  color:var(--gauge);
  padding:9px 15px;
  border-radius:999px;
  transition:color .2s,background .2s;
}
body[data-page] .navlink:hover{
  color:var(--ink);
  opacity:1;
  background:color-mix(in srgb,var(--ink) 6%,transparent);
}
body[data-page] .tbtn{
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid var(--glass-brd);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  font-size:15px;
  line-height:1;
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:border-color .2s;
}
body[data-page] .tbtn:hover{
  border-color:color-mix(in srgb,var(--ink) 26%,transparent);
}
/* burger (mobile uniquement) */
body[data-page] .burger{
  display:none;
  width:40px;
  height:40px;
  border-radius:50%;
  flex:none;
  border:1px solid var(--glass-brd);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4.5px;
}
body[data-page] .burger span{
  display:block;
  width:16px;
  height:1.6px;
  background:var(--ink);
  border-radius:2px;
  transition:transform .25s var(--ease-out),opacity .2s;
}
/* panneau mobile plein écran glass */
body[data-page] .mnav{
  position:fixed;
  inset:0;
  z-index:70;
  display:flex;
  flex-direction:column;
  background:color-mix(in srgb,var(--ground) 86%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  backdrop-filter:blur(16px) saturate(1.5);
  padding:22px 26px 40px;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s var(--ease-out);
}
body[data-page] .mnav.open{
  opacity:1;
  pointer-events:auto;
}
body[data-page] .mnav-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
body[data-page] .mnav-close{
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--glass-brd);
  font-size:17px;
  color:var(--ink);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
body[data-page] .mnav-links{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:52px;
}
body[data-page] .mnav-links a{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2rem,8vw,3rem);
  letter-spacing:-.02em;
  line-height:1.15;
  padding:8px 0;
  color:var(--ink);
}
body[data-page] .mnav-links a:hover{
  opacity:.7;
}
body[data-page] .mnav-foot{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:18px;
}
@media(max-width:859px){
  body[data-page] .navlinks{
    display:none;
  }
  body[data-page] .nav .btn-lime{
    margin-left:auto;
  }
  body[data-page] .burger{
    display:inline-flex;
  }
}
@media(min-width:860px){
  body[data-page] .mnav{
    display:none;
  }
}
/* bannière d'attribution (viral) : barre fine glass, z-index sous la nav */
body[data-page] .refbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:var(--glass);
  border-bottom:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
  backdrop-filter:blur(14px) saturate(1.6);
  font-family:var(--mono);
  font-size:12px;
  color:var(--gauge);
  padding:0 14px;
}
body[data-page] .refbar b{
  color:var(--ink);
  font-weight:700;
}
body[data-page] .refbar .rb-copy{
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink);
  border:1px solid var(--glass-brd);
  border-radius:999px;
  padding:5px 12px;
  cursor:pointer;
}
body[data-page] .refbar .rb-copy:hover{
  border-color:color-mix(in srgb,var(--ink) 26%,transparent);
}
body[data-page] .refbar .rb-x{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  border-radius:50%;
  color:var(--gauge);
  font-size:13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
body[data-page] .refbar .rb-x:hover{
  color:var(--ink);
}
body[data-page].has-ref{
  padding-top:42px;
}
body[data-page].has-ref .nav{
  top:58px;
}
/* ==========================================================================
   LANDING — body[data-page="landing"]
   ========================================================================== */
body[data-page="landing"] main{
  position:relative;
  z-index:5;
}
/* ---------- hero ---------- */
body[data-page="landing"] .hero{
  position:relative;
  padding:190px 0 90px;
  overflow:clip;
}
/* halo spectral radial derrière le hero */
body[data-page="landing"] .hero::before{
  content:"";
  position:absolute;
  inset:-10% -20%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(52% 42% at 50% 34%,color-mix(in srgb,var(--lime2) 9%,transparent),transparent 70%),
    radial-gradient(36% 30% at 70% 26%,rgba(69,196,240,.12),transparent 70%),
    radial-gradient(40% 32% at 28% 40%,rgba(255,93,85,.10),transparent 70%),
    radial-gradient(34% 28% at 56% 52%,rgba(106,155,255,.09),transparent 70%);
}
body[data-page="landing"] .hero-grid{
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:64px;
  align-items:center;
}
@media(max-width:1020px){
  body[data-page="landing"] .hero-grid{
    grid-template-columns:1fr;
    gap:52px;
  }
}
body[data-page="landing"] .hero h1{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(3.2rem,8.5vw,7.5rem);
  line-height:.95;
  letter-spacing:-.03em;
  margin-top:22px;
}
body[data-page="landing"] .hero h1 em{
  font-family:var(--display);
  font-style:normal;
  font-weight:600;
  letter-spacing:-.04em;
}
body[data-page="landing"] .hero .sub{
  font-size:17px;
  color:var(--gauge);
  max-width:50ch;
  margin-top:26px;
  line-height:1.68;
}
body[data-page="landing"] .hero .sub b{
  color:var(--ink);
  font-weight:600;
}
body[data-page="landing"] .hero-ctas{
  display:flex;
  gap:14px;
  margin-top:34px;
  flex-wrap:wrap;
}
body[data-page="landing"] .trustline{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.02em;
  color:var(--gauge);
  margin-top:30px;
  max-width:60ch;
  line-height:1.9;
}
body[data-page="landing"] .trustline i{
  font-style:normal;
  color:var(--hair);
  margin:0 8px;
}
html[data-theme="light"] body[data-page="landing"] .trustline i{
  color:var(--gauge);
}
/* ---------- carte protocole live ---------- */
body[data-page="landing"] .pcard{
  padding:26px 26px 20px;
}
body[data-page="landing"] .pcard-head{
  display:flex;
  align-items:center;
  gap:4px;
}
body[data-page="landing"] .pcard .big{
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(2.5rem,4.4vw,3.4rem);
  letter-spacing:-.02em;
  text-align:center;
  margin-top:20px;
  line-height:1;
}
body[data-page="landing"] .pcard .biglabel{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--gauge);
  text-align:center;
  text-transform:uppercase;
  margin-top:10px;
}
body[data-page="landing"] .pstats{
  display:flex;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  margin:20px 0 14px;
  padding:14px 0;
}
body[data-page="landing"] .pstat{
  flex:1;
  text-align:center;
  min-width:0;
}
body[data-page="landing"] .pstat+.pstat{
  border-left:1px solid var(--hair);
}
body[data-page="landing"] .pstat .v{
  font-family:var(--mono);
  font-weight:700;
  font-size:17px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  justify-content:center;
}
body[data-page="landing"] .pstat .l{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.12em;
  color:var(--gauge);
  text-transform:uppercase;
  margin-top:4px;
}
body[data-page="landing"] .parea{
  width:100%;
  height:64px;
  margin:2px 0 16px;
}
body[data-page="landing"] .plist-title{
  display:flex;
  align-items:center;
  margin-bottom:2px;
}
body[data-page="landing"] .plist .row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 2px;
  border-top:1px solid var(--hair);
  font-family:var(--mono);
  font-size:12px;
  transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);
}
body[data-page="landing"] .plist .row .addr{
  color:var(--gauge);
}
body[data-page="landing"] .plist .row .amt{
  margin-left:auto;
  font-weight:700;
  white-space:nowrap;
}
body[data-page="landing"] .plist .row .usd{
  color:var(--gauge);
  width:56px;
  text-align:right;
  flex:none;
}
body[data-page="landing"] .plist .row .ago{
  color:var(--gauge);
  width:52px;
  text-align:right;
  flex:none;
  font-size:11px;
}
body[data-page="landing"] .plist .row.leaving{
  opacity:0;
  transform:translateY(-8px);
}
body[data-page="landing"] .plist .row.entering{
  opacity:0;
  transform:translateY(8px);
}
/* ---------- sections génériques ---------- */
body[data-page="landing"] .section{
  position:relative;
  z-index:5;
  padding:110px 0 20px;
}
body[data-page="landing"] .section h2{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2rem,4.5vw,3.4rem);
  line-height:1.02;
  letter-spacing:-.03em;
  max-width:20ch;
}
body[data-page="landing"] .section h2 em{
  font-family:var(--display);
  font-style:normal;
  font-weight:600;
}
body[data-page="landing"] .section .shint{
  color:var(--gauge);
  margin-top:16px;
  max-width:62ch;
  font-size:15px;
  line-height:1.7;
}
body[data-page="landing"] .section .kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
}
body[data-page="landing"] .kicker .kdot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--teinte);
}
/* ---------- flow splitatique animé ---------- */
body[data-page="landing"] .flow{
  display:flex;
  align-items:center;
  margin-top:54px;
  gap:0;
}
body[data-page="landing"] .flow .fnode{
  font-family:var(--mono);
  font-weight:700;
  font-size:12px;
  letter-spacing:.16em;
  color:var(--ink);
  white-space:nowrap;
  flex:none;
}
body[data-page="landing"] .flow .fsub{
  display:block;
  font-weight:400;
  color:var(--gauge);
  letter-spacing:.04em;
  font-size:10px;
  margin-top:4px;
  text-transform:none;
}
body[data-page="landing"] .flow .fline{
  flex:1;
  height:1px;
  background:var(--ink);
  opacity:.3;
  margin:0 18px;
  transform-origin:left center;
  transition:transform 1s var(--ease-out),opacity .8s;
}
body[data-page="landing"] .flow .fsplit{
  width:20px;
  height:20px;
  background:var(--ink);
  flex:none;
  clip-path:polygon(0 100%,50% 0,100% 100%);
  transition:transform .9s var(--ease-out);
}
body[data-page="landing"] .flow .fspec{
  flex:1.4;
  height:12px;
  margin:0 18px;
  border-radius:0 6px 6px 0;
  background:linear-gradient(to bottom,
    var(--sp1) 0 2px,var(--sp2) 2px 4px,var(--sp3) 4px 6px,
    var(--sp4) 6px 8px,var(--sp5) 8px 10px,var(--sp6) 10px 12px);
  transform-origin:left center;
  transition:transform 1.1s var(--ease-out) .1s;
}
body[data-page="landing"] .flow .fout{
  display:flex;
  gap:9px;
  align-items:center;
  flex:none;
}
body[data-page="landing"] .flow .fout .sw{
  width:36px;
  height:36px;
  border-radius:10px;
  background:#fff;
  border:1px solid var(--hair);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
}
body[data-page="landing"] .flow .fout .sw svg{
  width:22px;
  height:22px;
}
/* dispersion déclenchée par .play (data-split, engine.js) */
body[data-page="landing"] .flow:not(.play) .fline{
  transform:scaleX(.2);
  opacity:.12;
}
body[data-page="landing"] .flow:not(.play) .fspec{
  transform:scaleX(0);
}
body[data-page="landing"] .flow:not(.play) .fsplit{
  transform:translateX(-8px) scale(.8);
}
body[data-page="landing"] .flow.play .fout .sw{
  opacity:1;
  transform:none;
}
body[data-page="landing"] .flow.play .fout .sw:nth-child(1){
  transition-delay:.30s;
}
body[data-page="landing"] .flow.play .fout .sw:nth-child(2){
  transition-delay:.42s;
}
body[data-page="landing"] .flow.play .fout .sw:nth-child(3){
  transition-delay:.54s;
}
body[data-page="landing"] .flow.play .fout .sw:nth-child(4){
  transition-delay:.66s;
}
@media(max-width:700px){
  body[data-page="landing"] .flow .fsub{
    display:none;
  }
  body[data-page="landing"] .flow .fout .sw{
    width:30px;
    height:30px;
  }
}
/* 3 cartes Hold / Choose / Claim */
body[data-page="landing"] .moves{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:44px;
}
@media(max-width:900px){
  body[data-page="landing"] .moves{
    grid-template-columns:1fr;
  }
}
body[data-page="landing"] .move{
  padding:28px 26px;
}
body[data-page="landing"] .move .mnum{
  font-family:var(--mono);
  font-weight:700;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--gauge);
}
body[data-page="landing"] .move h3{
  font-family:var(--display);
  font-weight:800;
  font-size:22px;
  letter-spacing:-.02em;
  margin-top:12px;
}
body[data-page="landing"] .move p{
  font-size:14px;
  color:var(--gauge);
  margin-top:10px;
  line-height:1.65;
  max-width:38ch;
}
/* ---------- grille stocks ---------- */
body[data-page="landing"] .stockgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px;
  margin-top:38px;
}
body[data-page="landing"] .stock{
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:16px;
  border-radius:18px;
  transition:transform .2s var(--ease-out);
}
body[data-page="landing"] .stock:hover{
  transform:translateY(-3px);
}
body[data-page="landing"] .stock .top{
  display:flex;
  align-items:center;
  gap:13px;
}
body[data-page="landing"] .stock .tk{
  font-weight:750;
  font-size:15px;
}
body[data-page="landing"] .stock .nm{
  font-size:12px;
  color:var(--gauge);
}
body[data-page="landing"] .stock .spark{
  width:100%;
  height:44px;
}
body[data-page="landing"] .stock .bottom{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  border-top:1px solid var(--hair);
  padding-top:13px;
}
/* liseré bande couleur au hover */
body[data-page="landing"] .stock .band{
  align-self:stretch;
  height:3px;
  border-radius:2px;
  background:var(--band,var(--hair));
  opacity:0;
  transform:scaleX(.4);
  transform-origin:left center;
  transition:opacity .25s,transform .35s var(--ease-out);
}
body[data-page="landing"] .stock:hover .band{
  opacity:1;
  transform:scaleX(1);
}
body[data-page="landing"] .stock .price .l{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.12em;
  color:var(--gauge);
}
body[data-page="landing"] .stock .price .v{
  font-family:var(--mono);
  font-weight:700;
  font-size:18px;
  margin-top:2px;
}
body[data-page="landing"] .stock .st{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.08em;
  color:var(--gauge);
  text-transform:uppercase;
}
/* ---------- scarcity : module interactif ---------- */
body[data-page="landing"] .scar-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:16px;
  margin-top:44px;
  align-items:stretch;
}
@media(max-width:940px){
  body[data-page="landing"] .scar-grid{
    grid-template-columns:1fr;
  }
}
body[data-page="landing"] .scar-mod{
  padding:30px 28px;
}
body[data-page="landing"] .scar-mod .slabel{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-top:6px;
}
body[data-page="landing"] .scar-mod .sval{
  font-family:var(--mono);
  font-weight:700;
  font-size:22px;
  color:var(--teinte);
}
body[data-page="landing"] input[type="range"].scar-slider{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:34px;
  background:transparent;
  margin:16px 0 6px;
  cursor:pointer;
}
body[data-page="landing"] input[type="range"].scar-slider::-webkit-slider-runnable-track{
  height:4px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--teinte) var(--fill,40%),var(--hair) var(--fill,40%));
}
body[data-page="landing"] input[type="range"].scar-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--ink);
  border:2px solid var(--teinte);
  margin-top:-9px;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
body[data-page="landing"] input[type="range"].scar-slider::-moz-range-track{
  height:4px;
  border-radius:2px;
  background:var(--hair);
}
body[data-page="landing"] input[type="range"].scar-slider::-moz-range-progress{
  height:4px;
  border-radius:2px;
  background:var(--teinte);
}
body[data-page="landing"] input[type="range"].scar-slider::-moz-range-thumb{
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--ink);
  border:2px solid var(--teinte);
}
body[data-page="landing"] .segs{
  display:flex;
  gap:7px;
  margin:18px 0 6px;
}
body[data-page="landing"] .segs .seg{
  flex:1;
  height:44px;
  border-radius:9px;
  background:color-mix(in srgb,var(--teinte) 24%,var(--panel2));
  border:1px solid color-mix(in srgb,var(--teinte) 45%,transparent);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-weight:700;
  font-size:13px;
  color:transparent;
  transition:background .3s,border-color .3s,color .3s;
}
body[data-page="landing"] .segs .seg.dead{
  background:transparent;
  border:1.5px dashed color-mix(in srgb,var(--red) 65%,transparent);
  color:var(--red);
}
body[data-page="landing"] .scar-text{
  font-size:15px;
  line-height:1.7;
  margin-top:16px;
  min-height:52px;
}
body[data-page="landing"] .scar-text b{
  color:var(--teinte);
}
body[data-page="landing"] .scar-note{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--gauge);
  text-transform:uppercase;
  margin-top:14px;
}
body[data-page="landing"] .burncard{
  padding:30px 28px;
  display:flex;
  flex-direction:column;
}
body[data-page="landing"] .burncard h3{
  font-family:var(--display);
  font-weight:800;
  font-size:20px;
  letter-spacing:-.02em;
}
body[data-page="landing"] .burncard .brow{
  display:flex;
  gap:14px;
  padding:15px 0;
  border-top:1px solid var(--hair);
  align-items:flex-start;
}
body[data-page="landing"] .burncard .brow:first-of-type{
  margin-top:18px;
}
body[data-page="landing"] .burncard .bic{
  width:34px;
  height:34px;
  border-radius:10px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-weight:700;
  font-size:13px;
}
body[data-page="landing"] .burncard .bic.sell{
  background:color-mix(in srgb,var(--red) 14%,transparent);
  color:var(--red);
}
body[data-page="landing"] .burncard .bic.fee{
  background:color-mix(in srgb,var(--green) 14%,transparent);
  color:var(--green);
}
body[data-page="landing"] .burncard .bt{
  font-weight:700;
  font-size:14px;
}
body[data-page="landing"] .burncard .bp{
  font-size:13px;
  color:var(--gauge);
  margin-top:4px;
  line-height:1.6;
}
body[data-page="landing"] .burncard .bsplit{
  margin-top:auto;
  padding-top:16px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--gauge);
}
/* compteur géant de rareté */
body[data-page="landing"] .giant{
  text-align:center;
  margin-top:80px;
}
body[data-page="landing"] .giant .gv{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(4.2rem,11vw,9rem);
  line-height:.95;
  letter-spacing:-.03em;
}
body[data-page="landing"] .giant .gl{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--gauge);
  text-transform:uppercase;
  margin-top:14px;
}
body[data-page="landing"] .giant .gbar{
  max-width:560px;
  margin:30px auto 0;
  position:relative;
}
body[data-page="landing"] .giant .gtrack{
  height:12px;
  border-radius:6px;
  overflow:hidden;
  background:var(--hair);
  position:relative;
}
body[data-page="landing"] .giant .gfill{
  position:absolute;
  inset:0 auto 0 0;
  width:96.24%;
  border-radius:6px;
  background:linear-gradient(90deg,var(--sp1),var(--sp2),var(--sp3),var(--sp4),var(--sp5),var(--sp6));
  transition:width 1.4s var(--ease-out);
}
body[data-page="landing"] .giant .gcap{
  display:flex;
  justify-content:space-between;
  margin-top:10px;
  font-family:var(--mono);
  font-size:11px;
  color:var(--gauge);
}
/* ---------- review ---------- */
body[data-page="landing"] .sevrow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:36px;
}
body[data-page="landing"] .sev{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid var(--glass-brd);
  background:var(--glass);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  font-family:var(--mono);
  font-size:12px;
}
body[data-page="landing"] .sev .n{
  font-weight:700;
  font-size:15px;
}
body[data-page="landing"] .sev .t{
  color:var(--gauge);
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:10px;
}
body[data-page="landing"] .sev .d{
  width:8px;
  height:8px;
  border-radius:50%;
  flex:none;
}
body[data-page="landing"] .review-line{
  font-size:17px;
  margin-top:30px;
  max-width:56ch;
  line-height:1.7;
}
body[data-page="landing"] .review-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:22px;
  font-weight:700;
  font-size:14px;
  border-bottom:1px solid var(--hair);
  padding-bottom:2px;
}
body[data-page="landing"] .review-link small{
  font-family:var(--mono);
  font-weight:400;
  font-size:10px;
  color:var(--gauge);
  letter-spacing:.08em;
  border:none;
}
/* ---------- docs teaser ---------- */
body[data-page="landing"] .dgrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px;
  margin-top:40px;
}
body[data-page="landing"] .dcard{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:24px;
  border-radius:18px;
  transition:transform .2s var(--ease-out);
}
body[data-page="landing"] .dcard:hover{
  transform:translateY(-3px);
  opacity:1;
}
body[data-page="landing"] .dcard .dt{
  font-weight:750;
  font-size:15px;
}
body[data-page="landing"] .dcard .dd{
  font-size:13px;
  color:var(--gauge);
  line-height:1.6;
}
body[data-page="landing"] .dcard .dgo{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.12em;
  color:var(--gauge);
  margin-top:auto;
  padding-top:12px;
  text-transform:uppercase;
}
/* ---------- faq ---------- */
body[data-page="landing"] .faq{
  margin-top:34px;
  display:grid;
  gap:10px;
  max-width:780px;
}
body[data-page="landing"] .faq details{
  border-radius:16px;
  padding:18px 24px;
}
body[data-page="landing"] .faq summary{
  font-weight:650;
  font-size:15.5px;
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
body[data-page="landing"] .faq summary::-webkit-details-marker{
  display:none;
}
body[data-page="landing"] .faq summary::after{
  content:"+";
  font-family:var(--mono);
  font-size:17px;
  color:var(--gauge);
  flex:none;
  transition:transform .25s var(--ease-out);
}
body[data-page="landing"] .faq details[open] summary::after{
  transform:rotate(45deg);
}
body[data-page="landing"] .faq details p{
  font-size:14px;
  color:var(--gauge);
  margin-top:10px;
  max-width:72ch;
  line-height:1.7;
}
body[data-page="landing"] .faq details p b{
  color:var(--ink);
  font-weight:650;
}
/* ---------- lore ---------- */
body[data-page="landing"] .lore{
  position:relative;
  z-index:5;
  padding:130px 0 120px;
  text-align:center;
  overflow:clip;
}
body[data-page="landing"] .lens-wrap{
  position:relative;
  width:min(300px,72vw);
  margin:0 auto 40px;
  aspect-ratio:1;
}
body[data-page="landing"] .lens-wrap .lens-fallback{
  position:absolute;
  inset:14%;
  opacity:.5;
}
body[data-page="landing"] .lens-wrap .lens-fallback img{
  width:100%;
  height:100%;
}
body[data-page="landing"] #kdisc{
  position:relative;
  width:100%;
  height:100%;
  border-radius:50%;
  background:#0F1113;
  box-shadow:0 2px 8px rgba(0,0,0,.25),0 40px 90px rgba(0,0,0,.4),0 0 0 1px var(--hair);
}
body[data-page="landing"] .lore .line{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.9rem,4.4vw,3.2rem);
  letter-spacing:-.01em;
  line-height:1.15;
}
body[data-page="landing"] .lore .foot{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--gauge);
  margin-top:26px;
  text-transform:uppercase;
  line-height:2;
}
body[data-page="landing"] .lore .lcta{
  margin-top:38px;
}
/* ---------- footer ---------- */
body[data-page="landing"] footer{
  position:relative;
  z-index:5;
  border-top:1px solid var(--hair);
  background:var(--ground);
  padding:64px 0 34px;
}
body[data-page="landing"] .fgrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:34px;
}
body[data-page="landing"] .fcol h4{
  font-family:var(--mono);
  font-weight:700;
  font-size:10px;
  letter-spacing:.16em;
  color:var(--gauge);
  text-transform:uppercase;
  margin-bottom:14px;
}
body[data-page="landing"] .fcol a{
  display:block;
  font-size:13.5px;
  color:var(--ink);
  padding:4px 0;
  width:fit-content;
}
body[data-page="landing"] .fcol a:hover{
  opacity:.65;
}
body[data-page="landing"] .fcol .ftag{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.08em;
  color:var(--gauge);
  border:1px solid var(--hair);
  border-radius:999px;
  padding:2px 8px;
  margin-left:8px;
  text-transform:uppercase;
}
body[data-page="landing"] .fcol p{
  font-size:12.5px;
  color:var(--gauge);
  line-height:1.7;
  max-width:32ch;
}
body[data-page="landing"] .fbase{
  margin-top:56px;
  padding-top:26px;
  border-top:1px solid var(--hair);
  display:flex;
  flex-direction:column;
  gap:10px;
}
body[data-page="landing"] .fbase .fb1{
  font-size:13px;
  color:var(--gauge);
  max-width:70ch;
}
body[data-page="landing"] .fbase .fb2{
  font-family:var(--serif);
  font-style:italic;
  font-size:16px;
  color:var(--ink);
}
body[data-page="landing"] .fbase .fb3{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  color:var(--gauge);
}
/* ==========================================================================
   SHEET / DIALOG — bottom sheet mobile, dialog centré desktop
   ========================================================================== */
body[data-page] .scrim{
  position:fixed;
  inset:0;
  z-index:80;
  background:rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  opacity:0;
  transition:opacity .3s var(--ease-out);
}
body[data-page] .sheet{
  position:fixed;
  z-index:81;
  left:50%;
  top:50%;
  transform:translate(-50%,calc(-50% + 24px));
  opacity:0;
  width:min(460px,calc(100vw - 32px));
  max-height:min(84dvh,720px);
  overflow-y:auto;
  padding:30px 28px;
  border-radius:20px;
  background:var(--glass);
  border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
  backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:var(--shadow);
  transition:transform .38s var(--ease-out),opacity .3s var(--ease-out);
}
body[data-page] .sheet.open,body[data-page] .scrim.open{
  opacity:1;
}
body[data-page] .sheet.open{
  transform:translate(-50%,-50%);
}
@media(max-width:640px){
  body[data-page] .sheet{
    left:0;
    right:0;
    bottom:0;
    top:auto;
    width:100%;
    max-height:88dvh;
    transform:translateY(24px);
    border-radius:20px 20px 0 0;
    padding-bottom:calc(26px + env(safe-area-inset-bottom));
  }
  body[data-page] .sheet.open{
    transform:translateY(0);
  }
}
body[data-page] .sheet-x{
  position:absolute;
  top:16px;
  right:16px;
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid var(--glass-brd);
  color:var(--gauge);
  font-size:13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}
body[data-page] .sheet-x:hover{
  color:var(--ink);
}
body[data-page] .sheet .sh-title{
  font-family:var(--display);
  font-weight:800;
  font-size:24px;
  letter-spacing:-.02em;
  line-height:1.1;
  padding-right:40px;
}
body[data-page] .sheet .sh-sub{
  font-size:13.5px;
  color:var(--gauge);
  margin-top:8px;
  line-height:1.6;
}
body[data-page] .sheet .sh-amt{
  font-family:var(--mono);
  font-weight:700;
  font-size:38px;
  letter-spacing:-.02em;
  margin-top:18px;
  text-align:center;
}
body[data-page] .sheet .sh-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:24px;
}
body[data-page] .sheet .sh-actions .btn{
  width:100%;
}
body[data-page] .sheet .flex-preview{
  width:100%;
  border-radius:12px;
  border:1px solid var(--hair);
  margin-top:16px;
}
/* img display:block (reset §1) écrase le UA [hidden] — re-masquer tant que la carte n'est pas générée */
body[data-page] .sheet .flex-preview[hidden]{
  display:none;
}
body[data-page] .sheet .sh-rows{
  margin-top:18px;
}
body[data-page] .sheet .sh-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:10px 0;
  border-top:1px solid var(--hair);
  font-size:13px;
}
body[data-page] .sheet .sh-row .k{
  color:var(--gauge);
}
body[data-page] .sheet .sh-row .v{
  font-family:var(--mono);
  font-weight:700;
  text-align:right;
}
/* sweep spectral de succès (600ms) */
body[data-page] .sheet .sweep{
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  overflow:hidden;
}
body[data-page] .sheet .sweep i{
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,transparent 20%,
    color-mix(in srgb,var(--sp1) .25,transparent) 36%,color-mix(in srgb,var(--sp3) .25,transparent) 46%,
    color-mix(in srgb,var(--sp4) .3,transparent) 54%,color-mix(in srgb,var(--sp6) .25,transparent) 64%,transparent 80%);
  background-size:280% 100%;
  background-position:120% 0;
  animation:knext-sweep .6s var(--ease-out) 1 forwards;
}
@keyframes knext-sweep{
  to{
    background-position:-80% 0;
  }
}
body[data-page] .simok{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--green);
  text-transform:uppercase;
  margin-top:14px;
}
body[data-page] .simok::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
}
/* ==========================================================================
   APP — body[data-page="app"]
   ========================================================================== */
/* lumière ambiante derrière l'app */
body[data-page="app"]::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(640px 420px at 10% 6%,rgba(204,255,0,.10),transparent 70%),
    radial-gradient(760px 520px at 90% 26%,rgba(91,141,239,.13),transparent 70%),
    radial-gradient(640px 520px at 45% 96%,rgba(232,72,63,.09),transparent 70%);
}
html[data-theme="light"] body[data-page="app"]::before{
  opacity:.5;
}
body[data-page="app"] .appshell{
  position:relative;
  z-index:5;
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  min-height:100dvh;
}
/* ---------- sidebar ---------- */
body[data-page="app"] .side{
  position:sticky;
  top:0;
  height:100dvh;
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--hair);
  padding:22px 14px 18px;
  background:color-mix(in srgb,var(--ground) 88%,transparent);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
}
body[data-page="app"] .side .brand{
  padding:4px 10px 20px;
}
body[data-page="app"] .snav{
  display:flex;
  flex-direction:column;
  gap:3px;
}
body[data-page="app"] .snav a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border-radius:12px;
  font-weight:600;
  font-size:13.5px;
  color:var(--gauge);
  transition:color .2s,background .2s;
}
body[data-page="app"] .snav a:hover{
  color:var(--ink);
  opacity:1;
}
body[data-page="app"] .snav a.active{
  color:var(--ink);
  background:color-mix(in srgb,var(--ink) 7%,transparent);
}
body[data-page="app"] .snav a svg{
  width:18px;
  height:18px;
  flex:none;
  stroke:currentColor;
  fill:none;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
body[data-page="app"] .snav a.active svg{
  stroke:var(--teinte);
}
body[data-page="app"] .side-foot{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px 6px 0;
  border-top:1px solid var(--hair);
}
body[data-page="app"] .wallet{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink);
  border:1px solid var(--glass-brd);
  border-radius:999px;
  padding:9px 14px;
  cursor:pointer;
  width:100%;
  transition:border-color .2s;
}
body[data-page="app"] .wallet:hover{
  border-color:color-mix(in srgb,var(--ink) 24%,transparent);
}
body[data-page="app"] .wallet .wdot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--gauge);
  flex:none;
}
body[data-page="app"] .wallet.connected .wdot{
  background:var(--green);
}
body[data-page="app"] .wallet .wlabel{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body[data-page="app"] .side-foot .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 4px;
}
/* ---------- main app ---------- */
body[data-page="app"] .amain{
  min-width:0;
  padding:0 34px 90px;
}
@media(max-width:1100px){
  body[data-page="app"] .amain{
    padding:0 20px 110px;
  }
}
/* bandeau fin preview */
body[data-page="app"] .prevbanner{
  display:flex;
  align-items:center;
  gap:4px;
  margin:0 -34px 26px;
  padding:10px 34px;
  border-bottom:1px solid var(--hair);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.12em;
  color:var(--gauge);
  text-transform:uppercase;
}
@media(max-width:1100px){
  body[data-page="app"] .prevbanner{
    margin:0 -20px 22px;
    padding:10px 20px;
  }
}
body[data-page="app"] .prevbanner b{
  color:var(--or);
  font-weight:700;
}
/* vues (sans JS : toutes empilées et ancres natives ; avec JS : tabs) */
body[data-page="app"] .view{
  padding-top:34px;
  scroll-margin-top:20px;
}
html.js body[data-page="app"] .view{
  display:none;
  padding-top:0;
}
html.js body[data-page="app"] .view.active{
  display:block;
  animation:knext-view .45s var(--ease-out);
}
@keyframes knext-view{
  from{
    opacity:0;
    transform:translateY(12px);
  }
  to{
    opacity:1;
    transform:none;
  }
}
body[data-page="app"] .view-h{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:22px;
}
body[data-page="app"] .view-h h1{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1.7rem,3vw,2.4rem);
  letter-spacing:-.03em;
}
body[data-page="app"] .view-h .greet{
  font-family:var(--mono);
  font-weight:700;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--gauge);
  text-transform:uppercase;
  display:flex;
  align-items:center;
}
/* grille 12 col responsive */
body[data-page="app"] .agrid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:16px;
}
body[data-page="app"] .c4{
  grid-column:span 4;
}
body[data-page="app"] .c5{
  grid-column:span 5;
}
body[data-page="app"] .c6{
  grid-column:span 6;
}
body[data-page="app"] .c7{
  grid-column:span 7;
}
body[data-page="app"] .c8{
  grid-column:span 8;
}
body[data-page="app"] .c12{
  grid-column:span 12;
}
@media(max-width:1020px){
  body[data-page="app"] .c4,body[data-page="app"] .c5,body[data-page="app"] .c6,
  body[data-page="app"] .c7,body[data-page="app"] .c8{
    grid-column:span 12;
  }
}
/* cartes app */
body[data-page="app"] .card{
  padding:24px;
  border-radius:20px;
}
body[data-page="app"] .card-h{
  display:flex;
  align-items:center;
  gap:4px;
  margin-bottom:14px;
}
body[data-page="app"] .card .hint{
  font-size:12.5px;
  color:var(--gauge);
  margin-top:4px;
  line-height:1.6;
}
body[data-page="app"] .card .big{
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(2.3rem,4vw,3.2rem);
  letter-spacing:-.02em;
  line-height:1.05;
}
/* stat-cards avec area-chart plein débord */
body[data-page="app"] .stat{
  padding:20px 20px 0;
  overflow:hidden;
  border-radius:20px;
}
body[data-page="app"] .stat .v{
  font-family:var(--mono);
  font-weight:700;
  font-size:25px;
  letter-spacing:-.01em;
  margin-top:8px;
  display:flex;
  align-items:baseline;
  gap:8px;
}
body[data-page="app"] .stat .v small{
  font-size:12px;
  color:var(--gauge);
  font-weight:400;
}
body[data-page="app"] .stat svg.area{
  display:block;
  width:calc(100% + 40px);
  margin:10px -20px 0;
  height:60px;
}
/* pending hero */
body[data-page="app"] .pending-hero{
  display:flex;
  flex-direction:column;
  gap:6px;
}
body[data-page="app"] .pending-hero .big{
  color:var(--teinte);
  transition:color .3s;
}
body[data-page="app"] .pending-hero .sub{
  font-size:13px;
  color:var(--gauge);
}
body[data-page="app"] .pending-hero .pcta{
  margin-top:16px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
/* liste lignes (My Shares, history…) */
body[data-page="app"] .rowline{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:12px 0;
  border-top:1px solid var(--hair);
  font-size:13.5px;
}
body[data-page="app"] .rowline:first-of-type{
  border-top:none;
}
body[data-page="app"] .rowline .k{
  color:var(--gauge);
}
body[data-page="app"] .rowline .v{
  font-family:var(--mono);
  font-weight:700;
  text-align:right;
}
/* table history */
body[data-page="app"] table.hist{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
body[data-page="app"] .hist th{
  font-family:var(--mono);
  font-weight:700;
  font-size:10px;
  letter-spacing:.12em;
  color:var(--gauge);
  text-transform:uppercase;
  text-align:left;
  padding:8px 10px;
  border-bottom:1px solid var(--hair);
}
body[data-page="app"] .hist td{
  padding:12px 10px;
  border-bottom:1px solid var(--hair);
  font-family:var(--mono);
  font-size:12px;
}
body[data-page="app"] .hist td.r,body[data-page="app"] .hist th.r{
  text-align:right;
}
body[data-page="app"] .hist tr:last-child td{
  border-bottom:none;
}
body[data-page="app"] .hist tr.sweep td{
  animation:knext-rowsweep .6s linear 1;
}
@keyframes knext-rowsweep{
  0%{
    background:linear-gradient(90deg,
    color-mix(in srgb,var(--sp1) .16,transparent),color-mix(in srgb,var(--sp2) .16,transparent),
    color-mix(in srgb,var(--sp3) .16,transparent),color-mix(in srgb,var(--sp4) .16,transparent),
    color-mix(in srgb,var(--sp5) .16,transparent),color-mix(in srgb,var(--sp6) .16,transparent));
    background-size:300% 100%;
    background-position:100% 0;
  }
  100%{
    background-position:0 0;
    background-color:transparent;
  }
}
@media(max-width:560px){
  body[data-page="app"] .hist .hide-s{
    display:none;
  }
}
/* ---------- picker tuiles ---------- */
body[data-page="app"] .picker{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:10px;
  margin:16px 0;
}
body[data-page="app"] .tile{
  position:relative;
  border:1.5px solid var(--hair);
  border-radius:14px;
  background:var(--panel2);
  padding:13px 8px 11px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  transition:transform .18s var(--ease-out),border-color .2s,box-shadow .25s;
}
body[data-page="app"] .tile:hover{
  transform:translateY(-2px);
}
body[data-page="app"] .tile .tk{
  font-family:var(--mono);
  font-weight:700;
  font-size:11px;
}
body[data-page="app"] .tile .px{
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--gauge);
}
/* sélection : ring 2px --teinte + ✓ */
body[data-page="app"] .tile.sel{
  border-color:var(--teinte);
  box-shadow:0 0 0 2px var(--teinte),0 0 22px color-mix(in srgb,var(--teinte) 30%,transparent);
}
body[data-page="app"] .tile.sel::after{
  content:"\2713";
  position:absolute;
  top:6px;
  right:6px;
  width:17px;
  height:17px;
  line-height:17px;
  border-radius:50%;
  background:var(--teinte);
  color:var(--teinte-ink);
  font-size:10px;
  font-weight:700;
  text-align:center;
}
/* état paused : opacity .45 + tag rouge, non cliquable */
body[data-page="app"] .tile.paused{
  opacity:.45;
  cursor:not-allowed;
}
body[data-page="app"] .tile.paused:hover{
  transform:none;
}
body[data-page="app"] .tile .ptag{
  position:absolute;
  top:4px;
  left:0;
  right:0;
  text-align:center;
  font-family:var(--mono);
  font-weight:700;
  font-size:7.5px;
  letter-spacing:.05em;
  color:var(--red);
}
/* ---------- trade ---------- */
body[data-page="app"] .swap-panel{
  display:flex;
  flex-direction:column;
  gap:12px;
}
body[data-page="app"] .swap-box{
  border:1px solid var(--hair);
  border-radius:16px;
  padding:16px 18px;
  background:var(--panel2);
}
body[data-page="app"] .swap-box .sl{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.12em;
  color:var(--gauge);
  text-transform:uppercase;
}
body[data-page="app"] .swap-box .srow{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:8px;
}
body[data-page="app"] .swap-box input{
  flex:1;
  min-width:0;
  background:transparent;
  border:0;
  outline:none;
  font-family:var(--mono);
  font-weight:700;
  font-size:26px;
  color:var(--ink);
  font-variant-numeric:tabular-nums slashed-zero;
}
body[data-page="app"] .swap-box .sass{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-weight:700;
  font-size:14px;
  flex:none;
}
body[data-page="app"] .swap-arrow{
  align-self:center;
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid var(--hair);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gauge);
  font-size:14px;
}
body[data-page="app"] .quote-rows .rowline{
  font-family:var(--mono);
  font-size:12.5px;
}
body[data-page="app"] .quote-rows .rowline .k{
  font-family:var(--sans);
  font-size:13px;
}
body[data-page="app"] .lockcount{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px dashed color-mix(in srgb,var(--or) 50%,transparent);
  border-radius:14px;
  padding:13px 16px;
  margin-top:14px;
}
body[data-page="app"] .lockcount .lv{
  font-family:var(--mono);
  font-weight:700;
  font-size:16px;
  color:var(--or);
}
/* ---------- shares : galerie éclat ---------- */
body[data-page="app"] .sharefig-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:14px;
}
body[data-page="app"] .sharefig{
  border-radius:16px;
  overflow:hidden;
  position:relative;
  border:1px solid var(--hair);
  background:#0F1113;
  aspect-ratio:1;
  transition:transform .2s var(--ease-out),box-shadow .25s;
}
body[data-page="app"] .sharefig:hover{
  transform:translateY(-3px);
}
body[data-page="app"] .sharefig canvas{
  width:100%;
  height:100%;
}
body[data-page="app"] .sharefig .pid{
  position:absolute;
  left:10px;
  bottom:8px;
  font-family:var(--mono);
  font-weight:700;
  font-size:11px;
  color:#F2F1ED;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}
body[data-page="app"] .sharefig.hot{
  border-color:var(--teinte);
  box-shadow:0 0 0 2px var(--teinte),
  0 0 26px color-mix(in srgb,var(--teinte) 35%,transparent);
}
/* ---------- automate ---------- */
body[data-page="app"] .plan{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}
body[data-page="app"] .switch{
  position:relative;
  width:46px;
  height:26px;
  border-radius:999px;
  flex:none;
  background:var(--hair);
  transition:background .25s;
  border:0;
  cursor:pointer;
  margin-top:2px;
}
body[data-page="app"] .switch::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--ink);
  transition:transform .25s var(--ease-out);
}
body[data-page="app"] .switch[aria-checked="true"]{
  background:var(--teinte);
}
body[data-page="app"] .switch[aria-checked="true"]::after{
  transform:translateX(20px);
}
body[data-page="app"] .timeline{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:0;
}
body[data-page="app"] .tl-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:11px 0;
  border-top:1px solid var(--hair);
  font-family:var(--mono);
  font-size:12px;
}
body[data-page="app"] .tl-row .td{
  width:9px;
  height:9px;
  border-radius:50%;
  border:2px solid var(--teinte);
  flex:none;
}
body[data-page="app"] .tl-row .tt{
  color:var(--gauge);
  margin-left:auto;
}
/* ---------- protocol ---------- */
body[data-page="app"] .crank{
  display:flex;
  flex-direction:column;
  gap:10px;
}
body[data-page="app"] .crank .cb{
  margin-top:auto;
  padding-top:12px;
}
body[data-page="app"] .bounty{
  font-family:var(--mono);
  font-weight:700;
  font-size:12px;
  color:var(--green);
}
body[data-page="app"] .vs-wrap{
  position:relative;
}
body[data-page="app"] .vs-legend{
  display:flex;
  gap:18px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.1em;
  color:var(--gauge);
  text-transform:uppercase;
  margin-top:10px;
}
body[data-page="app"] .vs-legend i{
  display:inline-block;
  width:14px;
  height:3px;
  border-radius:2px;
  margin-right:7px;
  vertical-align:2px;
}
/* ---------- bottom tab bar (mobile) ---------- */
body[data-page="app"] .tabbar{
  display:none;
}
@media(max-width:859px){
  body[data-page="app"] .appshell{
    grid-template-columns:1fr;
  }
  body[data-page="app"] .side{
    display:none;
  }
  body[data-page="app"] .tabbar{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom:12px;
    z-index:60;
    display:flex;
    gap:2px;
    padding:6px;
    border-radius:999px;
    max-width:calc(100vw - 20px);
    overflow-x:auto;
    background:var(--glass);
    border:1px solid var(--glass-brd);
    -webkit-backdrop-filter:blur(14px) saturate(1.6);
    backdrop-filter:blur(14px) saturate(1.6);
    box-shadow:var(--shadow);
  }
  body[data-page="app"] .tabbar a{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    padding:8px 13px;
    border-radius:999px;
    font-size:9px;
    font-weight:700;
    letter-spacing:.04em;
    color:var(--gauge);
    white-space:nowrap;
  }
  body[data-page="app"] .tabbar a svg{
    width:17px;
    height:17px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  body[data-page="app"] .tabbar a.active{
    color:var(--ink);
    background:color-mix(in srgb,var(--ink) 8%,transparent);
  }
  body[data-page="app"] .tabbar a.active svg{
    stroke:var(--teinte);
  }
}
/* sidebar visible mais étroite entre 860 et 1100 */
@media(min-width:860px) and (max-width:1100px){
  body[data-page="app"] .appshell{
    grid-template-columns:78px minmax(0,1fr);
  }
  body[data-page="app"] .side{
    padding:20px 10px;
  }
  body[data-page="app"] .side .brand span,body[data-page="app"] .snav a span,
  body[data-page="app"] .side-foot .row,body[data-page="app"] .wallet .wlabel{
    display:none;
  }
  body[data-page="app"] .snav a{
    justify-content:center;
    padding:12px;
  }
  body[data-page="app"] .wallet{
    justify-content:center;
    padding:9px;
  }
  body[data-page="app"] .side-foot{
    align-items:center;
  }
}
/* ==========================================================================
   A11Y — prefers-reduced-motion : tout le motion maîtrisé s'arrête
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  body[data-page] *,body[data-page] *::before,body[data-page] *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  body[data-page] .rv{
    opacity:1!important;
    transform:none!important;
  }
  body[data-page] .tape-track{
    animation:none!important;
    transform:none;
  }
  body[data-page] .drule .dbands::after{
    animation:none!important;
  }
  body[data-page] .btn-lime::after,body[data-page] .btn-teinte::after{
    transition:none;
    background:none;
  }
  body[data-page="landing"] .flow .fline,body[data-page="landing"] .flow .fspec,
  body[data-page="landing"] .flow .fsplit{
    transform:none!important;
    opacity:1!important;
  }
  body[data-page="landing"] .flow .fout .sw{
    opacity:1!important;
    transform:none!important;
  }
  body[data-page] .sheet .sweep{
    display:none;
  }
  html{
    scroll-behavior:auto;
  }
}
html{
  scroll-behavior:smooth;
}
/* ==========================================================================
   TRADE HUB v2 — 3 modes (Swap · Route · Zap)
   ========================================================================== */
/* mode selector */
body[data-page="app"] .thub-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:16px 24px;
}
body[data-page="app"] .thub-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
body[data-page="app"] .thub-tab{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--mono);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:10px 16px;
  border-radius:999px;
  border:1.5px solid var(--hair);
  background:var(--panel2);
  color:var(--gauge);
  transition:border-color .2s,color .2s,box-shadow .25s;
}
body[data-page="app"] .thub-tab:hover{
  border-color:color-mix(in srgb,var(--ink) 24%,transparent);
}
body[data-page="app"] .thub-tab.sel{
  border-color:var(--teinte);
  color:var(--ink);
  box-shadow:0 0 0 1px var(--teinte);
}
/* status chips LIVE / IN BUILD */
body[data-page="app"] .stchip{
  font-family:var(--mono);
  font-weight:700;
  font-size:8.5px;
  letter-spacing:.12em;
  padding:3px 8px;
  border-radius:999px;
  flex:none;
}
body[data-page="app"] .stchip.live{
  color:var(--green);
  border:1px solid color-mix(in srgb,var(--green) 45%,transparent);
  background:color-mix(in srgb,var(--green) 10%,transparent);
}
body[data-page="app"] .stchip.build{
  color:var(--or);
  border:1px solid color-mix(in srgb,var(--or) 45%,transparent);
  background:color-mix(in srgb,var(--or) 10%,transparent);
}
/* zone + overlay IN BUILD */
body[data-page="app"] .thub-zone{
  position:relative;
}
body[data-page="app"] .zap-overlay{
  position:absolute;
  inset:-8px;
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-align:center;
  padding:24px;
  border-radius:16px;
  border:1px dashed color-mix(in srgb,var(--or) 50%,transparent);
  background:color-mix(in srgb,var(--ground) 58%,transparent);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
}
body[data-page="app"] .zap-overlay[hidden]{
  display:none;
}
body[data-page="app"] .zap-overlay p{
  max-width:400px;
  font-size:13.5px;
  line-height:1.6;
}
/* asset chips FROM/TO */
body[data-page="app"] .achips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:13px;
}
body[data-page="app"] .achip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 12px 5px 6px;
  border-radius:999px;
  border:1.5px solid var(--hair);
  background:var(--panel);
  font-family:var(--mono);
  font-weight:700;
  font-size:11px;
  color:var(--ink);
  transition:border-color .2s,box-shadow .25s,transform .18s var(--ease-out);
}
body[data-page="app"] .achip:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--ink) 24%,transparent);
}
body[data-page="app"] .achip.sel{
  border-color:var(--teinte);
  box-shadow:0 0 0 1px var(--teinte);
}
body[data-page="app"] .achip:disabled{
  opacity:.4;
  cursor:not-allowed;
  transform:none;
}
body[data-page="app"] .slogo.xs{
  width:20px;
  height:20px;
  border-radius:6px;
  font-size:8px;
}
body[data-page="app"] .slogo.xs svg,body[data-page="app"] .slogo.xs img{
  width:13px;
  height:13px;
}
body[data-page="app"] .t-out{
  flex:1;
  min-width:0;
  font-weight:700;
  font-size:26px;
  color:var(--ink);
  font-variant-numeric:tabular-nums slashed-zero;
}
body[data-page="app"] .swap-arrow:disabled{
  opacity:.35;
  cursor:default;
}
body[data-page="app"] button.swap-arrow:not(:disabled):hover{
  border-color:var(--teinte);
  color:var(--ink);
}
body[data-page="app"] .route-note{
  margin-top:12px;
  padding:10px 14px;
  border:1px dashed var(--hair);
  border-radius:12px;
}
/* stepper Quote → Simulate → Sign */
body[data-page="app"] .stepper{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:18px;
  flex-wrap:wrap;
}
body[data-page="app"] .stepper .step{
  font-family:var(--mono);
  font-weight:700;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gauge);
  padding:6px 12px;
  border:1px solid var(--hair);
  border-radius:999px;
  transition:border-color .2s,color .2s,background .2s;
}
body[data-page="app"] .stepper .step.on{
  border-color:var(--teinte);
  color:var(--ink);
  background:color-mix(in srgb,var(--teinte) 10%,transparent);
}
body[data-page="app"] .stepper .step.done{
  color:var(--green);
  border-color:color-mix(in srgb,var(--green) 45%,transparent);
}
body[data-page="app"] .stepper i{
  flex:0 0 14px;
  height:1px;
  background:var(--hair);
}
/* quote panel extras */
body[data-page="app"] .invbtn{
  font-family:var(--mono);
  font-weight:700;
  font-size:11px;
  padding:2px 8px;
  margin-left:6px;
  border:1px solid var(--hair);
  border-radius:999px;
  color:var(--gauge);
  transition:border-color .2s,color .2s;
}
body[data-page="app"] .invbtn:hover{
  border-color:var(--teinte);
  color:var(--ink);
}
body[data-page="app"] .slipbtns{
  display:inline-flex;
  gap:5px;
}
body[data-page="app"] .slipbtns button{
  font-family:var(--mono);
  font-weight:700;
  font-size:10.5px;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid var(--hair);
  color:var(--gauge);
  transition:border-color .2s,color .2s;
}
body[data-page="app"] .slipbtns button.sel{
  border-color:var(--teinte);
  color:var(--ink);
}
/* deux lignes locks (delta vs cumul) — lignes, pas boîtes */
body[data-page="app"] .locklines{
  margin-top:14px;
  border-top:1px dashed color-mix(in srgb,var(--or) 50%,transparent);
}
body[data-page="app"] .lkline{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  padding:9px 0;
  font-size:13px;
}
body[data-page="app"] .lkline .k{
  color:var(--gauge);
}
body[data-page="app"] .lkline .v{
  font-weight:700;
  color:var(--or);
}
/* route breakdown : hops liés Blockscout */
body[data-page="app"] .routeflow{
  display:flex;
  align-items:stretch;
  gap:7px;
  flex-wrap:wrap;
  margin-top:10px;
}
body[data-page="app"] .hop{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  padding:8px 12px;
  border:1px solid var(--hair);
  border-radius:12px;
  background:var(--panel2);
  min-width:0;
  transition:border-color .2s,transform .18s var(--ease-out);
}
body[data-page="app"] .hop b{
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:700;
}
body[data-page="app"] .hop .hv{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.05em;
  color:var(--gauge);
  text-transform:uppercase;
  white-space:nowrap;
}
body[data-page="app"] a.hop:hover{
  border-color:var(--teinte);
  transform:translateY(-1px);
}
body[data-page="app"] .harrow{
  align-self:center;
  color:var(--gauge);
  font-size:12px;
  flex:none;
}
/* shelf : 5 mini tuiles stocks */
body[data-page="app"] .shelf{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px;
}
body[data-page="app"] .shelf .tile.mini{
  padding:14px 8px 12px;
}
body[data-page="app"] .tile .addr{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.02em;
  color:var(--gauge);
}
/* lock impact bar */
body[data-page="app"] .lockbar{
  height:10px;
  border-radius:5px;
  overflow:hidden;
  background:var(--panel2);
  border:1px solid var(--hair);
  margin-top:16px;
}
body[data-page="app"] .lockbar i{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--or),color-mix(in srgb,var(--or) 60%,var(--red)));
}
body[data-page="app"] .lockbar-legend{
  display:flex;
  justify-content:space-between;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--gauge);
  margin-top:7px;
}
/* routed trades : empty state honnête */
body[data-page="app"] .emptystate{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
  padding:28px 16px;
  border:1px dashed var(--hair);
  border-radius:14px;
}
body[data-page="app"] .emptystate .es-big{
  font-size:34px;
  font-weight:700;
  color:var(--gauge);
}
body[data-page="app"] .emptystate p:not(.es-big){
  max-width:420px;
  font-size:13.5px;
  color:var(--gauge);
  line-height:1.6;
}

/* ---- Hero live-quote widget (js/hero-quote.js) ---------------------------------------------- */
.hquote{display:flex;flex-direction:column;gap:11px}
.hq-badge{font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);opacity:.55;padding:2px 7px;border:1px solid var(--hair);border-radius:999px}
.hq-badge.live{color:var(--teinte);border-color:color-mix(in srgb,var(--teinte) 45%,transparent);opacity:1}
.hq-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:color-mix(in srgb,var(--panel2) 70%,transparent);border:1px solid var(--hair);border-radius:12px;padding:12px 14px}
.hq-lab{font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.09em;text-transform:uppercase;opacity:.5}
.hq-field{display:flex;align-items:baseline;gap:8px}
.hq-in{width:120px;background:none;border:none;outline:none;color:var(--ink);font:800 26px/1 Syne,system-ui,sans-serif;text-align:right}
.hq-in:focus{color:var(--lime2)}
.hq-unit{font:700 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace;opacity:.7}
.hq-out{font:800 24px/1 Syne,system-ui,sans-serif;white-space:nowrap}
.hq-sel{background:var(--panel);color:var(--ink);border:1px solid var(--hair);border-radius:8px;
  font:700 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;padding:6px 8px;cursor:pointer;color-scheme:light dark}
.hq-arrow{align-self:center;font-size:15px;opacity:.4;margin:-6px 0}
.hq-meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font:500 11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;opacity:.65}
.hq-meta span:last-child{opacity:.85;text-align:right}
.hq-cta{width:100%;justify-content:center;margin-top:2px}
.hq-fine{font-size:10px;line-height:1.5;opacity:.45;margin:2px 0 0;text-align:center}
@media (max-width:560px){.hq-in{width:96px;font-size:22px}.hq-out{font-size:20px}}
.hquote .pcard-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px}
.hq-meta span:first-child{white-space:nowrap}
.hquote input.hq-in{background:transparent!important;border:0!important;box-shadow:none!important;padding:0;margin:0;border-radius:0}

/* ---- i18n language layer (js/i18n-boot.js + js/i18n.js) ------------------------------------ */
/* Hide the body only for a NON-default language until i18n.js swaps the text in (no flash of English).
   Gated on .i18n-hide which js/i18n-boot.js adds ONLY when JS runs + lang!==en, so no-JS visitors are never hidden.
   Failsafe: if i18n.js never runs, reveal anyway after 2.5s (shows the inline English) so the page can't stay blank. */
html.i18n-hide body{visibility:hidden;animation:i18n-reveal 0s linear 2.5s forwards}
@keyframes i18n-reveal{to{visibility:visible}}

/* Language selector — sits beside the theme toggle, mirrors .tbtn */
.langsel{appearance:none;-webkit-appearance:none;height:32px;padding:0 26px 0 11px;border:1px solid var(--hair);border-radius:999px;
  background:transparent;color:var(--ink);cursor:pointer;color-scheme:light dark;
  font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 14px) 13px,calc(100% - 9px) 13px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.langsel:hover{border-color:color-mix(in srgb,var(--ink) 28%,transparent)}
.langsel:focus-visible{outline:2px solid var(--teinte);outline-offset:2px}
.mnav-foot .langsel{width:100%;height:44px;font-size:13px;background-position:calc(100% - 16px) 19px,calc(100% - 11px) 19px}

/* Token-clarity block — the honest "why own a Share" strip under the hero */
.clarity{margin:30px 0 6px}
.clarity-kick{display:flex;align-items:center;gap:9px;margin-bottom:16px}
.clarity-kick .kdot{width:6px;height:6px;border-radius:50%;background:var(--teinte);flex:none}
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.citem{background:var(--glass);border:1px solid var(--glass-brd);border-radius:14px;padding:16px 16px 18px}
.citem .cn{font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--teinte)}
.citem .ct{font-size:14px;line-height:1.5;color:color-mix(in srgb,var(--ink) 86%,transparent);margin:10px 0 0}
.citem .ct b{color:var(--ink)}
@media(max-width:900px){.cgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cgrid{grid-template-columns:1fr}}

/* CJK: Syne / Space Mono have no CJK glyphs — keep them first (so KALEIDO/ETH/tickers stay branded)
   and fall through to high-quality system CJK faces per glyph. No multi-MB webfont embed needed. */
:root[data-lang="zh"]{
  --display:'Syne','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif;
  --sans:system-ui,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
  --mono:ui-monospace,SFMono-Regular,'PingFang SC','Microsoft YaHei','Noto Sans SC',monospace;
}
:root[data-lang="ko"]{
  --display:'Syne','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,sans-serif;
  --sans:system-ui,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;
  --mono:ui-monospace,SFMono-Regular,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',monospace;
}
/* CJK reads better a touch larger and without wide tracking on the mono labels */
:root[data-lang="zh"] .mlabel,:root[data-lang="ko"] .mlabel{letter-spacing:.04em}

/* ===========================================================================
   HOMEPAGE POLISH v2 — compact first fold, explicit hierarchy, Kaleido mark
   ========================================================================== */
body[data-page="landing"] .wrap{
  max-width:1240px;
}
body[data-page="landing"] .nav{
  width:min(1240px,calc(100vw - 28px));
  padding:9px 10px 9px 18px;
  border-color:color-mix(in srgb,var(--ink) 11%,transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.08),0 18px 55px rgba(0,0,0,.22);
}
body[data-page="landing"] .brand img{
  width:27px;
  height:27px;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.18));
}
body[data-page="landing"] .brand span{
  font-size:15px;
  letter-spacing:.18em;
}
body[data-page="landing"] .langsel{
  background-color:color-mix(in srgb,var(--panel) 58%,transparent);
}
body[data-page="landing"] .hero{
  padding:122px 0 68px;
}
body[data-page="landing"] .hero::before{
  inset:-18% -10% -8%;
  background:
    radial-gradient(42% 38% at 71% 26%,rgba(69,196,240,.14),transparent 72%),
    radial-gradient(36% 34% at 83% 56%,rgba(139,119,232,.12),transparent 72%),
    radial-gradient(43% 38% at 18% 38%,rgba(255,93,85,.09),transparent 72%),
    radial-gradient(42% 36% at 45% 48%,color-mix(in srgb,var(--lime2) 7%,transparent),transparent 72%);
}
body[data-page="landing"] .hero-grid{
  position:relative;
  grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr);
  gap:16px 50px;
  align-items:start;
}
body[data-page="landing"] .hero-grid > *{
  min-width:0;
}
body[data-page="landing"] .hero-grid::after{
  content:"";
  position:absolute;
  z-index:-1;
  right:-90px;
  top:70px;
  width:430px;
  aspect-ratio:1;
  background:url("../assets/kaleido-mark-ink.svg") center/contain no-repeat;
  opacity:.055;
  filter:saturate(1.25);
  pointer-events:none;
  transform:rotate(9deg);
}
html[data-theme="light"] body[data-page="landing"] .hero-grid::after{
  opacity:.075;
}
body[data-page="landing"] .hero-copy{
  grid-column:1;
  grid-row:1 / span 2;
  padding:32px 0 18px;
  min-width:0;
}
body[data-page="landing"] #hero-quote{
  grid-column:2;
  grid-row:1;
}
body[data-page="landing"] .protocol-card{
  grid-column:2;
  grid-row:2;
}
body[data-page="landing"] .hero .mlabel{
  max-width:68ch;
  line-height:1.6;
}
body[data-page="landing"] .hero h1{
  font-size:clamp(3.35rem,5.55vw,5.7rem);
  line-height:.91;
  letter-spacing:-.045em;
  max-width:10.5ch;
  margin-top:18px;
  text-wrap:balance;
}
body[data-page="landing"] .hero h1 em{
  display:inline-block;
  color:color-mix(in srgb,var(--ink) 92%,var(--sp5));
}
body[data-page="landing"] .hero .sub{
  max-width:58ch;
  margin-top:24px;
  font-size:16px;
  line-height:1.7;
  color:color-mix(in srgb,var(--ink) 66%,transparent);
}
body[data-page="landing"] .hero-ctas{
  margin-top:28px;
}
body[data-page="landing"] .trustline{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--hair);
  max-width:64ch;
}
body[data-page="landing"] .pcard{
  border-radius:18px;
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 22px 60px rgba(0,0,0,.23);
}
body[data-page="landing"] #hero-quote{
  padding:20px;
}
body[data-page="landing"] #hero-quote .hq-row{
  padding:10px 12px;
}
body[data-page="landing"] #hero-quote .hq-in{
  font-size:23px;
}
body[data-page="landing"] #hero-quote .hq-out{
  font-size:21px;
}
body[data-page="landing"] .protocol-card{
  padding:18px 20px 16px;
}
body[data-page="landing"] .protocol-card .big{
  font-size:clamp(2rem,3.2vw,2.75rem);
  margin-top:14px;
}
body[data-page="landing"] .protocol-card .biglabel{
  font-size:9.5px;
  margin-top:7px;
  line-height:1.45;
}
body[data-page="landing"] .protocol-card .drule{
  margin-top:11px;
}
body[data-page="landing"] .protocol-card .pstats{
  margin:10px 0;
  padding:10px 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  row-gap:10px;
}
body[data-page="landing"] .protocol-card .pstat{
  padding:0 5px;
}
body[data-page="landing"] .protocol-card .pstat:nth-child(3){
  padding-top:10px;
  border-top:1px solid var(--hair);
}
body[data-page="landing"] .protocol-card .pstat .v{
  font-size:14px;
}
body[data-page="landing"] .protocol-card .spec-chip{
  font-size:8.5px;
  padding:3px 7px;
}
body[data-page="landing"] .protocol-card .parea{
  height:34px;
  margin:0 0 9px;
}
body[data-page="landing"] .protocol-card .plist .row{
  padding:6px 2px;
  font-size:10.5px;
}
body[data-page="landing"] .protocol-card .plist .row:nth-child(n+3){
  display:none;
}
body[data-page="landing"] .protocol-card .plist .row .ago{
  width:44px;
  font-size:9.5px;
}
body[data-page="landing"] .protocol-card .plist .row .usd{
  width:48px;
}
body[data-page="landing"] .protocol-card > p:last-child{
  font-size:9.5px!important;
  line-height:1.4;
  margin-top:7px!important;
}
body[data-page="landing"] .clarity-wrap{
  padding:36px 0 12px;
}
body[data-page="landing"] .clarity{
  margin:0;
}
body[data-page="landing"] .cgrid{
  gap:12px;
}
body[data-page="landing"] .citem{
  position:relative;
  overflow:hidden;
  min-height:150px;
  padding:19px 18px 21px;
  box-shadow:none;
  transition:transform .25s var(--ease-out),border-color .25s,background .25s;
}
body[data-page="landing"] .citem::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg,var(--sp1),var(--sp2),var(--sp3),var(--sp4),var(--sp5),var(--sp6));
  opacity:.62;
}
body[data-page="landing"] .citem:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--ink) 17%,transparent);
  background:color-mix(in srgb,var(--panel) 86%,transparent);
}
body[data-page="landing"] .section{
  padding:94px 0 18px;
}
body[data-page="landing"] .section h2{
  text-wrap:balance;
}
body[data-page="landing"] .move{
  position:relative;
  overflow:hidden;
  min-height:210px;
  box-shadow:none;
  transition:transform .25s var(--ease-out),border-color .25s,background .25s;
}
body[data-page="landing"] .move::after{
  content:"";
  position:absolute;
  left:26px;
  right:26px;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg,var(--sp1),var(--sp3),var(--sp5),var(--sp6));
  transform:scaleX(.22);
  transform-origin:left;
  opacity:0;
  transition:transform .35s var(--ease-out),opacity .25s;
}
body[data-page="landing"] .move:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--ink) 17%,transparent);
  background:color-mix(in srgb,var(--panel) 88%,transparent);
}
body[data-page="landing"] .move:hover::after{
  transform:scaleX(1);
  opacity:.9;
}
body[data-page="landing"] .stock{
  box-shadow:none;
}

@media(max-width:1080px){
  body[data-page="landing"] .hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(350px,.82fr);
    gap:16px 30px;
  }
  body[data-page="landing"] .hero h1{
    font-size:clamp(3.2rem,6vw,4.9rem);
  }
  body[data-page="landing"] .navlink{
    padding-inline:10px;
  }
}
@media(max-width:900px){
  body[data-page="landing"] .hero{
    padding-top:108px;
  }
  body[data-page="landing"] .hero-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
  body[data-page="landing"] .hero-copy,
  body[data-page="landing"] #hero-quote,
  body[data-page="landing"] .protocol-card{
    grid-column:1;
    grid-row:auto;
  }
  body[data-page="landing"] .hero-copy{
    padding:18px 0 22px;
  }
  body[data-page="landing"] .hero h1{
    max-width:11ch;
  }
  body[data-page="landing"] .protocol-card{
    margin-top:2px;
  }
  body[data-page="landing"] .citem{
    min-height:0;
  }
}
@media(max-width:600px){
  body[data-page="landing"] .wrap{
    padding-inline:17px;
  }
  body[data-page="landing"] .nav{
    width:calc(100vw - 20px);
    top:10px;
    padding:8px 9px 8px 14px;
    gap:8px;
  }
  body[data-page="landing"] .nav > .langsel,
  body[data-page="landing"] .nav > .tbtn{
    display:none;
  }
  body[data-page="landing"] .nav .btn-lime{
    display:none;
  }
  body[data-page="landing"] .brand img{
    width:24px;
    height:24px;
  }
  body[data-page="landing"] .brand span{
    font-size:12px;
    letter-spacing:.14em;
  }
  body[data-page="landing"] .hero{
    padding:88px 0 46px;
  }
  body[data-page="landing"] .hero-copy{
    padding-top:22px;
  }
  body[data-page="landing"] .hero h1{
    font-size:clamp(2.55rem,11vw,3.15rem);
    line-height:.94;
    margin-top:14px;
    overflow-wrap:anywhere;
  }
  body[data-page="landing"] .hero .sub{
    font-size:15px;
    line-height:1.62;
    margin-top:20px;
  }
  body[data-page="landing"] .hero-ctas{
    display:grid;
    grid-template-columns:1fr;
    margin-top:23px;
  }
  body[data-page="landing"] .hero-ctas .btn{
    width:100%;
  }
  body[data-page="landing"] .trustline{
    font-size:10px;
    line-height:1.75;
  }
  body[data-page="landing"] .trustline i{
    margin-inline:3px;
  }
  body[data-page="landing"] .pcard,
  body[data-page="landing"] #hero-quote,
  body[data-page="landing"] .protocol-card{
    padding:17px;
  }
  body[data-page="landing"] #hero-quote .hq-row{
    flex-wrap:wrap;
  }
  body[data-page="landing"] #hero-quote .hq-field{
    min-width:0;
    margin-left:auto;
  }
  body[data-page="landing"] #hero-quote .hq-in{
    width:76px;
    font-size:20px;
  }
  body[data-page="landing"] #hero-quote .hq-out{
    font-size:17px;
  }
  body[data-page="landing"] .protocol-card .pstats{
    grid-template-columns:1fr;
  }
  body[data-page="landing"] .protocol-card .pstat+.pstat{
    border-left:0;
  }
  body[data-page="landing"] .protocol-card .pstat:nth-child(2),
  body[data-page="landing"] .protocol-card .pstat:nth-child(3){
    border-top:1px solid var(--hair);
    padding-top:10px;
  }
  body[data-page="landing"] .clarity-wrap{
    padding-top:26px;
  }
  body[data-page="landing"] .section{
    padding-top:76px;
  }
  body[data-page="landing"] .moves{
    margin-top:30px;
  }
  body[data-page="landing"] .move{
    min-height:0;
    padding:23px 21px;
  }
}

/* Claim Radar — a public read-only acquisition surface for holders who bought on a DEX. */
body[data-page="landing"] .radar-section{
  position:relative;
  margin-top:42px;
  padding:88px 0 96px;
}
body[data-page="landing"] .radar-section::before{
  content:"";
  position:absolute;
  inset:8% 8%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 22% 38%,rgba(51,218,116,.13),transparent 31%),
    radial-gradient(circle at 77% 60%,rgba(92,137,255,.12),transparent 35%);
  filter:blur(34px);
}
body[data-page="landing"] .radar-grid{
  display:grid;
  grid-template-columns:minmax(280px,.84fr) minmax(480px,1.16fr);
  gap:clamp(40px,7vw,104px);
  align-items:center;
}
body[data-page="landing"] .radar-copy h2{
  max-width:680px;
  margin:16px 0 22px;
  font-family:var(--display);
  font-size:clamp(3rem,5.5vw,5.75rem);
  line-height:.94;
  letter-spacing:-.055em;
}
body[data-page="landing"] .radar-copy h2 em{
  color:var(--teinte);
  font-family:var(--display);
  font-style:normal;
  font-weight:700;
  letter-spacing:-.05em;
}
body[data-page="landing"] .radar-copy .shint{max-width:56ch;line-height:1.72}
body[data-page="landing"] .radar-global{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:4px 12px;
  align-items:center;
  margin-top:28px;
  padding:18px 20px;
  border-color:color-mix(in srgb,var(--teinte) 34%,var(--hair));
}
body[data-page="landing"] .radar-global p{margin:0;font-size:14px;line-height:1.45}
body[data-page="landing"] .radar-global strong{font:700 18px/1 var(--mono);color:var(--ink)}
body[data-page="landing"] .radar-global small{grid-column:2;color:var(--gauge);font:9px/1.4 var(--mono);letter-spacing:.045em;text-transform:uppercase}
body[data-page="landing"] .radar-pulse{
  grid-row:1/3;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--teinte);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--teinte) 15%,transparent),0 0 18px var(--teinte);
}
body[data-page="landing"] .radar-global.is-unavailable{opacity:.55}
body[data-page="landing"] .radar-card{max-width:none;padding:26px}
body[data-page="landing"] .radar-readonly{
  padding:5px 8px;
  border:1px solid color-mix(in srgb,var(--teinte) 42%,var(--hair));
  border-radius:999px;
  color:var(--teinte);
  font:700 8px/1 var(--mono);
  letter-spacing:.08em;
}
body[data-page="landing"] .radar-card form{margin-top:22px}
body[data-page="landing"] .radar-input-row{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:8px}
body[data-page="landing"] #radar-address{
  min-width:0;
  width:100%;
  padding:14px 16px;
  color:var(--ink);
  border:1px solid var(--glass-brd);
  border-radius:12px;
  outline:none;
  background:color-mix(in srgb,var(--panel) 72%,transparent);
  font-size:13px;
  transition:border-color .2s,box-shadow .2s;
}
body[data-page="landing"] #radar-address:focus{border-color:var(--teinte);box-shadow:0 0 0 3px color-mix(in srgb,var(--teinte) 13%,transparent)}
body[data-page="landing"] .radar-status{min-height:18px;margin:10px 2px 0;color:var(--gauge);font-size:10px}
body[data-page="landing"] .radar-status.is-error{color:#ff5f68}
body[data-page="landing"] .radar-status.is-loading{color:var(--teinte)}
body[data-page="landing"] .radar-result[hidden]{display:none}
body[data-page="landing"] .radar-result{margin-top:18px;padding-top:18px;border-top:1px solid var(--hair)}
body[data-page="landing"] .radar-metrics{display:grid;grid-template-columns:.7fr 1.2fr 1fr;gap:8px}
body[data-page="landing"] .radar-metrics>div{display:grid;gap:10px;min-width:0;padding:14px;border:1px solid var(--hair);border-radius:12px;background:color-mix(in srgb,var(--panel) 60%,transparent)}
body[data-page="landing"] .radar-metrics strong{overflow:hidden;font:700 clamp(15px,1.6vw,22px)/1.1 var(--mono);text-overflow:ellipsis;white-space:nowrap}
body[data-page="landing"] .radar-result-copy{margin:16px 2px;color:var(--gauge);font-size:13px;line-height:1.55}
body[data-page="landing"] .radar-actions{display:flex;gap:9px}
body[data-page="landing"] .radar-actions .btn{flex:1;justify-content:center}
body[data-page="landing"] .radar-block{margin:12px 2px 0;color:var(--gauge);font-size:9px;letter-spacing:.04em}
@media(max-width:900px){
  body[data-page="landing"] .radar-section{padding:70px 0}
  body[data-page="landing"] .radar-grid{grid-template-columns:1fr;gap:34px}
  body[data-page="landing"] .radar-copy h2{max-width:720px}
}
@media(max-width:600px){
  body[data-page="landing"] .radar-section{margin-top:12px;padding:58px 0}
  body[data-page="landing"] .radar-card{padding:20px 16px}
  body[data-page="landing"] .radar-input-row{grid-template-columns:1fr}
  body[data-page="landing"] .radar-input-row .btn{width:100%}
  body[data-page="landing"] .radar-metrics{grid-template-columns:1fr 1fr}
  body[data-page="landing"] .radar-metrics>div:last-child{grid-column:1/-1}
  body[data-page="landing"] .radar-actions{display:grid;grid-template-columns:1fr}
  body[data-page="landing"] .radar-actions .btn{width:100%}
}

:root[data-lang="zh"] body[data-page="landing"] .hero h1,
:root[data-lang="ko"] body[data-page="landing"] .hero h1{
  max-width:11ch;
  line-height:1.06;
  letter-spacing:-.035em;
}

/* ---------- OpenSea / on-chain Share identities ---------- */
body[data-page="landing"] .opensea-section{
  overflow:hidden;
  margin-top:70px;
  padding:112px 0 96px;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  background:
    radial-gradient(720px 540px at 78% 48%,rgba(32,129,226,.17),transparent 70%),
    radial-gradient(560px 420px at 22% 52%,rgba(204,255,0,.08),transparent 72%),
    color-mix(in srgb,var(--ground) 92%,transparent);
}
body[data-page="landing"] .opensea-grid{
  display:grid;
  grid-template-columns:minmax(320px,.82fr) minmax(520px,1.18fr);
  gap:54px;
  align-items:center;
}
body[data-page="landing"] .opensea-copy{
  position:relative;
  z-index:4;
}
body[data-page="landing"] .opensea-copy h2{
  max-width:9ch;
  margin:12px 0 18px;
  font-size:clamp(44px,5.4vw,72px);
  line-height:.96;
  letter-spacing:-.055em;
}
body[data-page="landing"] .opensea-copy .shint{
  max-width:54ch;
  font-size:15px;
  line-height:1.7;
}
body[data-page="landing"] .opensea-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
}
body[data-page="landing"] .btn-opensea{
  color:#fff;
  border-color:#2081e2;
  background:#2081e2;
  box-shadow:0 10px 28px rgba(32,129,226,.22);
}
body[data-page="landing"] .btn-opensea:hover{
  color:#fff;
  border-color:#3b96ee;
  background:#3b96ee;
  box-shadow:0 14px 34px rgba(32,129,226,.3);
}
body[data-page="landing"] .opensea-mark{
  display:inline-grid;
  place-items:center;
  width:21px;
  height:21px;
  margin-right:8px;
  border-radius:50%;
  color:#2081e2;
  background:#fff;
  font:800 10px/1 var(--sans);
}
body[data-page="landing"] .opensea-facts{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:22px;
}
body[data-page="landing"] .opensea-facts span{
  padding:6px 10px;
  border:1px solid var(--hair);
  border-radius:999px;
  color:var(--gauge);
  background:color-mix(in srgb,var(--panel) 68%,transparent);
  font:700 9px/1.2 var(--mono);
  letter-spacing:.07em;
  text-transform:uppercase;
}
body[data-page="landing"] .opensea-gallery{
  position:relative;
  min-height:500px;
  perspective:1200px;
}
body[data-page="landing"] .opensea-gallery::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:440px;
  height:440px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(32,129,226,.16);
  border-radius:50%;
  box-shadow:inset 0 0 80px rgba(32,129,226,.06),0 0 100px rgba(32,129,226,.08);
}
body[data-page="landing"] .opensea-card{
  --x:0px;
  --y:0px;
  --r:0deg;
  --s:1;
  position:absolute;
  top:36px;
  left:50%;
  z-index:2;
  display:block;
  width:274px;
  padding:10px 10px 15px;
  overflow:hidden;
  color:#f7f7f5;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.15);
  border-radius:22px;
  background:#0b0d0e;
  box-shadow:0 28px 70px rgba(0,0,0,.42),0 1px 0 rgba(255,255,255,.12) inset;
  transform:translateX(-50%) translateX(var(--x)) translateY(var(--y)) rotate(var(--r)) scale(var(--s));
  transition:transform .34s var(--ease-out),border-color .25s,box-shadow .3s,filter .3s;
}
body[data-page="landing"] .opensea-card.os-solar{--x:-166px;--y:68px;--r:-8deg;--s:.9;z-index:1}
body[data-page="landing"] .opensea-card.os-lagoon{--x:0px;--y:0px;--r:0deg;--s:1;z-index:3}
body[data-page="landing"] .opensea-card.os-nebula{--x:166px;--y:68px;--r:8deg;--s:.9;z-index:2}
body[data-page="landing"] .opensea-card:hover{
  z-index:5;
  border-color:rgba(255,255,255,.35);
  box-shadow:0 38px 90px rgba(0,0,0,.52),0 0 46px rgba(32,129,226,.13);
  transform:translateX(-50%) translateX(var(--x)) translateY(calc(var(--y) - 12px)) rotate(0deg) scale(calc(var(--s) + .04));
}
body[data-page="landing"] .opensea-card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1;
  border-radius:15px;
  background:#070709;
}
body[data-page="landing"] .opensea-live{
  position:absolute;
  top:20px;
  left:20px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  color:rgba(255,255,255,.82);
  background:rgba(7,7,9,.64);
  backdrop-filter:blur(10px);
  font:700 8px/1 var(--mono);
  letter-spacing:.08em;
}
body[data-page="landing"] .opensea-live i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ccff00;
  box-shadow:0 0 8px rgba(204,255,0,.7);
}
body[data-page="landing"] .opensea-card-meta{
  display:grid;
  gap:6px;
  padding:13px 7px 1px;
}
body[data-page="landing"] .opensea-card-meta strong{
  font:700 13px/1.2 var(--sans);
}
body[data-page="landing"] .opensea-card-meta small{
  overflow:hidden;
  color:rgba(255,255,255,.5);
  font:8px/1.3 var(--mono);
  letter-spacing:.04em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media(max-width:1080px){
  body[data-page="landing"] .opensea-grid{grid-template-columns:minmax(300px,.8fr) minmax(430px,1.2fr);gap:24px}
  body[data-page="landing"] .opensea-card{width:238px}
  body[data-page="landing"] .opensea-card.os-solar{--x:-132px}
  body[data-page="landing"] .opensea-card.os-nebula{--x:132px}
}
@media(max-width:850px){
  body[data-page="landing"] .opensea-section{margin-top:52px;padding:82px 0 66px}
  body[data-page="landing"] .opensea-grid{grid-template-columns:1fr;gap:30px}
  body[data-page="landing"] .opensea-copy h2{max-width:none}
  body[data-page="landing"] .opensea-gallery{min-height:480px}
  body[data-page="landing"] .opensea-card{width:260px}
  body[data-page="landing"] .opensea-card.os-solar{--x:-155px}
  body[data-page="landing"] .opensea-card.os-nebula{--x:155px}
}
@media(max-width:600px){
  body[data-page="landing"] .opensea-section{padding:72px 0 42px}
  body[data-page="landing"] .opensea-copy h2{font-size:clamp(2.6rem,13vw,3.35rem)}
  body[data-page="landing"] .opensea-actions{display:grid;grid-template-columns:1fr}
  body[data-page="landing"] .opensea-actions .btn{width:100%;justify-content:center;text-align:center}
  body[data-page="landing"] .opensea-gallery{min-height:365px;margin-inline:-8px}
  body[data-page="landing"] .opensea-gallery::before{width:300px;height:300px}
  body[data-page="landing"] .opensea-card{top:24px;width:184px;padding:7px 7px 11px;border-radius:17px}
  body[data-page="landing"] .opensea-card img{border-radius:11px}
  body[data-page="landing"] .opensea-card.os-solar{--x:-91px;--y:55px;--r:-8deg;--s:.87}
  body[data-page="landing"] .opensea-card.os-nebula{--x:91px;--y:55px;--r:8deg;--s:.87}
  body[data-page="landing"] .opensea-live{top:13px;left:13px;padding:5px 6px;font-size:6px}
  body[data-page="landing"] .opensea-card-meta{padding:10px 5px 0;gap:4px}
  body[data-page="landing"] .opensea-card-meta strong{font-size:10px}
  body[data-page="landing"] .opensea-card-meta small{font-size:6.5px}
}