/* =====================================================================
   CryptoKuro — Classic mode. Measured on the owner's reference (1280 × 640):
   content column 1064 px starting at x 108 · nav logo at x 143 · hero at x 93 ·
   territory cards 5 × 210 × 88 at y 368 · highlight cards 3 × 347 × 82 at y 532.
   ===================================================================== */
html:has(body.classic){background:#07060c}
body.classic{
  --serif:"Newsreader", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --teal:#3ad6b0; --cl-red:#ff3d5f; --cl-blue:#5b8dff; --cl-purple:#b45cff;
  --cardbg:rgba(12,11,18,.80); --stroke:rgba(255,255,255,.075); --r:8px;
  min-height:100vh; background:transparent; color:#f3eff5; font-family:var(--sans); overflow-x:hidden;
}
body.classic *{box-sizing:border-box}
.classic .cl-wrap{width:min(83.2vw, 1180px); margin:0 auto; position:relative}

/* ---------- painted cover + legibility veils ---------- */
.classic main, .classic .cl-nav{position:relative; z-index:1}
.cl-cover{position:fixed; inset:0; z-index:0; background:#07060c center 42% / cover no-repeat}   /* 16:9 painted cover: no extra zoom */
.cl-cover::after{content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(6,4,10,.52) 0%, rgba(6,4,10,.34) 22%, rgba(6,4,10,.06) 46%, rgba(6,4,10,0) 66%),
    linear-gradient(180deg, rgba(6,4,10,.30) 0%, rgba(6,4,10,0) 14%, rgba(6,4,10,0) 48%, rgba(6,4,10,.55) 72%, rgba(6,4,10,.86) 100%)}

/* ---------- nav ---------- */
.cl-nav{display:flex; align-items:center; height:62px; z-index:4}
.cl-brand span{font-weight:220}
.cl-brand{font:440 20.5px/1 var(--sans); letter-spacing:-.005em; color:#fff; text-decoration:none; margin-left:2.7%; white-space:nowrap}
.cl-links{display:flex; gap:33px; margin-left:66px}
.cl-links a{position:relative; font:300 10.5px/1 var(--sans); letter-spacing:.055em; color:rgba(244,240,247,.86); text-decoration:none; padding:8px 0; white-space:nowrap; transition:color .15s}
.cl-links a:hover, .cl-links a.on{color:#fff}
.cl-links a.on::after{content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px; background:var(--cl-red); box-shadow:0 0 10px rgba(255,61,95,.8)}
.cl-actions{display:flex; align-items:center; gap:14px; margin-left:auto; margin-right:-1.4%}
.cl-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; height:31px; padding:0 15px; border-radius:7px;
  font:350 12px/1 var(--sans); letter-spacing:.005em; cursor:pointer; text-decoration:none; white-space:nowrap; transition:background .15s, border-color .15s, box-shadow .15s}
.cl-btn.ghost{background:rgba(10,8,14,.30); border:1px solid rgba(255,255,255,.42); color:#fff}
.cl-btn.ghost:hover{border-color:#fff; background:rgba(255,255,255,.06)}
.cl-btn.light{background:#fdf0f3; border:1px solid #fdf0f3; color:#1b1320; font-weight:450}
.cl-btn.light:hover{background:#fff; box-shadow:0 0 22px rgba(255,210,222,.28)}
.cl-btn span{font-size:17px; line-height:0; margin-top:-2px; opacity:.85}
.cl-icon{width:31px; height:31px; display:grid; place-items:center; border-radius:7px; background:transparent; border:1px solid transparent; cursor:pointer; color:rgba(255,255,255,.8)}
.cl-icon:hover{border-color:rgba(255,255,255,.3); color:#fff}
.cl-icon svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round}
.cl-menu{display:none; background:none; border:0; color:#fff; font-size:22px; cursor:pointer; padding:4px 6px}

/* ---------- hero ---------- */
.cl-hero{margin-left:-1.4%; padding-top:clamp(36px, calc(6.25vh + 0px), 110px); max-width:560px}
.cl-eyebrow{font:450 9px/1 var(--sans); letter-spacing:.27em; color:rgba(245,240,246,.86); margin:0 0 12px}
.cl-eyebrow span{opacity:.62}
.cl-hero h1{font:340 clamp(40px, min(3.45vw, 6.9vh), 66px)/.945 var(--serif); font-variation-settings:'opsz' 72; letter-spacing:-.004em; color:#f5f1f6; margin:0;
  text-shadow:0 2px 24px rgba(8,4,12,.55)}
.cl-tag{font:280 13px/18px var(--sans); color:rgba(255,255,255,.93); margin:8px 0 0; letter-spacing:.005em}
.cl-ctas{display:flex; align-items:center; gap:22px; margin-top:12px}
.cl-btn.cta{height:29px; padding:0 12px 0 15px; font-size:11.5px; font-weight:520; gap:17px; border-radius:6px}
.cl-journey{font:300 11.5px/1 var(--sans); color:rgba(255,255,255,.72); text-decoration:none; letter-spacing:.01em}
.cl-journey:hover{color:#fff}

/* ---------- territory cards ---------- */
.cl-terr{display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:9px; margin-top:clamp(34px, 6.25vh, 96px)}
.cl-card{position:relative; display:grid; grid-template-columns:40px 1fr; grid-template-rows:auto auto auto; column-gap:19px; align-items:center;
  min-height:88px; padding:13px 16px 12px 15px; text-align:left; cursor:pointer; color:#fff;
  background:var(--cardbg); border:1px solid var(--stroke); border-radius:var(--r); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:border-color .2s, box-shadow .2s, transform .2s, background .2s}
.cl-ic{grid-row:1 / 3; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; position:relative;
  background:radial-gradient(circle at 50% 45%, var(--glow) 0%, var(--disc) 62%, rgba(255,255,255,.03) 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset, 0 0 18px var(--halo)}
.cl-ic svg{width:23px; height:23px; fill:var(--tc); fill-opacity:var(--fo, .16); stroke:var(--tc); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round;
  filter:drop-shadow(0 0 4px var(--tc))}
.cl-card-name{align-self:end; font:350 10px/1 var(--sans); letter-spacing:.03em; color:rgba(255,255,255,.92); margin-top:1px}
.cl-card-n{align-self:start; font:300 20px/1 var(--sans); letter-spacing:-.01em; margin-top:6px}
.cl-card-d{grid-column:1 / 3; font:320 10.5px/1.3 var(--sans); color:rgba(236,231,240,.74); margin:9px 0 0 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cl-arrow{position:absolute; right:14px; top:26px; font:300 17px/1 var(--sans); color:rgba(255,255,255,.72)}
.t-red{--tc:#ff4a63; --glow:rgba(255,60,90,.42); --disc:rgba(90,14,28,.55); --halo:rgba(255,47,79,.18); --fo:.32}
.t-blue{--tc:#79a2ff; --glow:rgba(70,110,255,.26); --disc:rgba(18,30,70,.55); --halo:rgba(70,110,255,.10); --fo:.08}
.t-teal{--tc:#44dcb6; --glow:rgba(40,200,160,.24); --disc:rgba(10,52,44,.55); --halo:rgba(40,200,160,.09); --fo:.12}
.t-purple{--tc:#c56bff; --glow:rgba(170,80,255,.30); --disc:rgba(48,16,72,.55); --halo:rgba(170,80,255,.12); --fo:.06}
.cl-card.on .cl-ic, .cl-card:hover .cl-ic{--glow:rgba(255,70,100,.62); --halo:rgba(255,47,79,.38)}
.cl-card:hover, .cl-card:focus-visible, .cl-card.on{border-color:rgba(255,64,96,.85); background:rgba(28,9,18,.78);
  box-shadow:0 0 0 1px rgba(255,64,96,.25) inset, 0 0 26px rgba(255,47,79,.32)}
.cl-card.on .cl-card-name, .cl-card:hover .cl-card-name{color:#ff5874}
.cl-card:hover{transform:translateY(-1px)}
.cl-terr:hover .cl-card.on:not(:hover){border-color:var(--stroke); background:var(--cardbg); box-shadow:none}
.cl-terr:hover .cl-card.on:not(:hover) .cl-card-name{color:rgba(255,255,255,.92)}
.cl-card:focus-visible, .cl-hl-card:focus-visible{outline:2px solid var(--cl-red); outline-offset:2px}

@keyframes clPulse{0%{box-shadow:0 0 0 rgba(255,47,79,0); border-color:var(--stroke)}
  35%{box-shadow:0 0 0 1px rgba(255,64,96,.45) inset, 0 0 30px rgba(255,47,79,.45); border-color:rgba(255,64,96,.9)}
  100%{box-shadow:0 0 0 rgba(255,47,79,0); border-color:var(--stroke)}}
.cl-card.pulse{animation:clPulse 1.1s ease both}

/* ---------- highlights ---------- */
.cl-hl{margin-top:clamp(24px, 4.2vh, 60px); scroll-margin-top:20px}
.cl-hl-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px}
.cl-hl-head h2{font:340 22px/1.15 var(--serif); font-variation-settings:'opsz' 36; letter-spacing:-.005em; margin:0}
.cl-hl-head h2 .tip{border-bottom:0}
.cl-hl-head p{font:320 12.5px/1.4 var(--sans); color:rgba(240,235,244,.84); margin:4px 0 0}
.cl-hl-head .cl-btn{margin-bottom:2px}
.cl-hl-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-top:17px}
.cl-hl-card{position:relative; display:grid; grid-template-columns:16px 30px minmax(0, 1fr) auto;
  column-gap:12px; align-items:start; min-height:82px; padding:12px 34px 11px 14px; text-align:left; cursor:pointer; color:#fff;
  background:rgba(11,10,16,.86); border:1px solid var(--stroke); border-radius:var(--r); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:border-color .2s, box-shadow .2s, transform .2s}
.cl-hl-card:hover{border-color:rgba(255,64,96,.7); box-shadow:0 0 22px rgba(255,47,79,.22); transform:translateY(-1px)}
.cl-hl-card .cl-arrow{top:31px; right:13px}
.cl-hl-lg{margin-top:9px}
.cl-hl-lg svg{width:14px; height:14px; fill:none; stroke:var(--tc); stroke-width:1.7; stroke-linejoin:round; opacity:.9}
.cl-hl-logo{width:30px; height:30px; border-radius:50%; overflow:hidden; display:grid; place-items:center; margin-top:0;
  background:radial-gradient(circle at 50% 40%, #1c1b26, #08080c 70%); box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.cl-hl-logo img{width:78%; height:78%; object-fit:contain; border-radius:50%}
.cl-hl-logo .sym{font:700 8px/1 var(--sans)}
.cl-hl-id{display:flex; flex-direction:column; min-width:0}
.cl-hl-id b{font:450 13.5px/1.1 var(--sans); letter-spacing:.01em}
.cl-hl-id small{font:320 11px/1.3 var(--sans); color:rgba(230,225,235,.66); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cl-spark{width:64px; height:20px; margin-top:7px; overflow:visible}
.cl-spark path{fill:none; stroke:var(--teal); stroke-width:1.3; stroke-linejoin:round; filter:drop-shadow(0 0 3px rgba(58,214,176,.55))}
.cl-hl-right{display:flex; flex-direction:column; min-width:150px}
.cl-hl-chips{display:flex; gap:6px; align-items:center; height:14px; margin-top:1px}
.cl-hl-chips i{font:520 7.5px/14px var(--sans); font-style:normal; letter-spacing:.07em; padding:0 6px; border-radius:3px; color:#62e5c3;
  background:rgba(40,190,150,.15); box-shadow:0 0 0 1px rgba(58,214,176,.12) inset; white-space:nowrap}
.cl-hl-chips i.warn{color:#f0b35a; background:rgba(240,179,90,.14)}
.cl-hl-nums{display:flex; gap:0; margin-top:12px; padding-left:16px}
.cl-hl-num{display:inline-flex; flex-direction:column; min-width:99px}
.cl-hl-num + .cl-hl-num{min-width:0}
.cl-hl-num b{font:300 16.5px/1 var(--sans); letter-spacing:-.01em}
.cl-hl-num small{font:320 11px/1 var(--sans); color:rgba(235,230,240,.78); margin-top:6px}
.cl-hl-card.empty{display:flex; align-items:center; gap:12px; cursor:default; color:rgba(255,255,255,.6); font-size:12px}

/* ---------- footer ---------- */
.cl-foot{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; padding:28px 0 26px; font:400 10.5px/1.4 var(--sans); color:rgba(225,219,230,.55)}
.cl-foot a{color:rgba(235,230,240,.75); text-decoration:none}
.cl-foot a:hover{color:#fff}

/* ---------- panels (methodology, pricing, sign in, get started) ---------- */
.cl-panel{width:min(520px, calc(100vw - 32px)); border:1px solid rgba(255,255,255,.12); border-top:2px solid var(--cl-red); border-radius:12px;
  background:#110f18; color:#eee9f2; padding:26px 28px 24px; box-shadow:0 30px 90px rgba(0,0,0,.7); font:400 13.5px/1.6 var(--sans)}
.cl-panel::backdrop{background:rgba(3,2,6,.62); backdrop-filter:blur(4px)}
.cl-panel h2{font:400 26px/1.2 var(--serif); font-variation-settings:'opsz' 48; margin:0 0 10px}
.cl-panel p{margin:8px 0; color:rgba(235,230,240,.85)}
.cl-panel .muted{color:rgba(220,214,226,.6); font-size:12.5px}
.cl-x{position:absolute; right:14px; top:10px; background:none; border:0; color:#fff; font-size:24px; cursor:pointer; opacity:.7}
.cl-x:hover{opacity:1}
.cl-plan{display:flex; gap:10px; margin-top:14px}

/* Full Analysis / Explore / search sheets keep their own styles; on Classic they sit above everything */
.classic .sheet{z-index:20} .classic #fa{z-index:21} .classic #search{z-index:22} .classic #tipbox{z-index:40}

/* ---------- responsive ---------- */
/* taller / wider screens: the composition grows so it fills the view like the 1280 × 640 reference */
@media (min-height:760px) and (min-width:1200px){
  .cl-tag{font-size:14.5px; line-height:21px} .cl-card{min-height:96px} .cl-hl-card{min-height:88px}
}
@media (max-width:1100px){
  .classic .cl-wrap{width:calc(100vw - 48px)}
  .cl-links{gap:20px; margin-left:36px} .cl-brand{margin-left:0} .cl-actions{margin-right:0}
  .cl-terr{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 12px; margin-left:-2px; scrollbar-width:none}
  .cl-terr::-webkit-scrollbar{display:none}
  .cl-card{flex:0 0 206px; scroll-snap-align:start}
  .cl-hero{margin-left:0}
}
@media (max-width:900px){
  .cl-hl-grid{grid-template-columns:1fr}
  .cl-hl-card{grid-template-columns:16px 34px minmax(0,1fr) auto}
}
@media (max-width:820px){
  .classic .cl-wrap{width:calc(100vw - 32px)}
  .cl-nav{height:58px}
  .cl-menu{display:block}
  .cl-links{display:none; position:absolute; top:56px; left:0; right:0; flex-direction:column; gap:0; margin:0; padding:8px;
    background:rgba(16,13,24,.96); border:1px solid rgba(255,255,255,.1); border-radius:10px; z-index:10}
  .cl-links.open{display:flex}
  .cl-links a{padding:13px 12px; font-size:12px}
  .cl-links a.on::after{bottom:6px; left:12px; right:auto; width:34px}
  .cl-actions{gap:8px} .cl-actions .ghost{display:none}
  .cl-btn{height:36px} .cl-btn.cta{height:38px}
  .cl-hero{padding-top:44px}
  .cl-hero h1{font-size:44px; line-height:43px}
  .cl-tag{font-size:14px; line-height:20px}
  .cl-ctas{flex-wrap:wrap; gap:14px}
  .cl-terr{margin-top:34px}
  .cl-card{flex-basis:78vw}
  .cl-hl-head{flex-direction:column; align-items:flex-start}
  .cl-hl-card{min-height:96px; padding-right:30px}
  .cl-cover{background-position:32% 38%}
}
@media (prefers-reduced-motion: reduce){ .classic *{transition:none!important} }
/* the mobile menu drops over the hero: the header must stack above <main> (both were z-index 1; 2026-09-26) */
.classic .cl-nav{z-index:5}

.cl-legal a{color:inherit; text-decoration:none; opacity:.85} .cl-legal a:hover{opacity:1; text-decoration:underline}
/* mobile menu: opaque, so the page behind never shows through the links (2026-09-26) */
@media (max-width:820px){ .cl-links{background:rgba(14,11,20,.99); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)} }