/* =====================================================================
   CryptoKuro — Methodology page (builds on classic.css: same nav, cover, type and tokens).
   Cinematic scroll: one idea per screen, big real numbers, slow reveals.
   ===================================================================== */
.method .cl-cover{filter:saturate(.9) brightness(.62)}
.method .cl-cover::after{background:linear-gradient(180deg, rgba(6,4,10,.35) 0%, rgba(6,4,10,.55) 40%, rgba(6,4,10,.86) 100%)}
.m-main{position:relative; z-index:1}
.m-sec{padding:clamp(70px, 13vh, 150px) 0 clamp(30px, 6vh, 70px); min-height:70vh}
.m-hero{min-height:calc(100vh - 62px); display:flex; flex-direction:column; justify-content:center; padding-top:40px}
.method h1, .method h2{font:320 clamp(40px, 5.2vw, 76px)/.98 var(--serif); font-variation-settings:'opsz' 72; letter-spacing:-.015em; margin:0; color:#f6f2f7;
  text-shadow:0 2px 30px rgba(6,3,10,.6)}
.method h2{font-size:clamp(34px, 4.2vw, 62px)}
.method h1 em, .method h2 em{font-style:italic; color:#ff8fa3}
.m-lead{font:300 clamp(15px, 1.25vw, 18px)/1.65 var(--sans); color:rgba(240,235,244,.84); max-width:620px; margin:22px 0 0}
.method .cl-eyebrow{margin-bottom:18px}

/* stats */
.m-stats{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-top:clamp(40px, 7vh, 80px)}
.m-stat{border-top:1px solid rgba(255,255,255,.14); padding-top:16px}
.m-stat b{display:block; font:250 clamp(38px, 4.4vw, 64px)/1 var(--sans); letter-spacing:-.03em; color:#fff; font-variant-numeric:tabular-nums}
.m-stat span{display:block; font:320 12.5px/1.45 var(--sans); color:rgba(236,230,240,.72); margin-top:10px; max-width:230px}
.m-stat:first-child b{color:#ff5874; text-shadow:0 0 30px rgba(255,47,79,.35)}

/* territories */
.m-terr{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px; margin-top:44px}
.m-t{position:relative; padding:20px 18px 22px; background:rgba(12,11,18,.72); border:1px solid rgba(255,255,255,.07); border-radius:10px; backdrop-filter:blur(8px)}
.m-t .cl-ic{width:44px; height:44px}
.m-t h4{font:450 10.5px/1 var(--sans); letter-spacing:.14em; margin:18px 0 6px; color:var(--tc)}
.m-t b{font:250 34px/1 var(--sans); letter-spacing:-.02em}
.m-t small{display:block; font:400 10.5px/1 var(--sans); letter-spacing:.06em; color:rgba(230,225,236,.55); margin-top:8px; text-transform:uppercase}
.m-t p{font:320 13px/1.55 var(--sans); color:rgba(236,230,240,.8); margin:14px 0 0}

/* two scores */
.m-duo{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:44px}
.m-orb{position:relative; overflow:hidden; padding:34px 32px 30px; border-radius:14px; background:rgba(12,11,18,.74); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(8px)}
.m-orb-glow{position:absolute; width:320px; height:320px; right:-110px; top:-130px; border-radius:50%; filter:blur(10px); opacity:.55}
.m-orb.opp .m-orb-glow{background:radial-gradient(circle, rgba(255,47,79,.75), rgba(255,47,79,0) 65%)}
.m-orb.risk .m-orb-glow{background:radial-gradient(circle, rgba(139,92,255,.75), rgba(139,92,255,0) 65%)}
.m-orb h3{font:320 38px/1 var(--serif); font-variation-settings:'opsz' 72; margin:0; position:relative}
.m-orb.opp h3{color:#ff7a90} .m-orb.risk h3{color:#b79bff}
.m-orb p{font:320 14.5px/1.6 var(--sans); color:rgba(238,232,242,.85); margin:14px 0 0; position:relative; max-width:440px}
.m-orb p b{font-weight:500; color:#fff}
.m-orb ul{list-style:none; padding:0; margin:22px 0 0; display:flex; flex-wrap:wrap; gap:8px; position:relative}
.m-orb li{font:400 11.5px/1 var(--sans); padding:8px 11px; border-radius:999px; border:1px solid rgba(255,255,255,.13); color:rgba(240,236,244,.86); background:rgba(255,255,255,.03)}
.m-orb.opp li{border-color:rgba(255,80,110,.3)} .m-orb.risk li{border-color:rgba(160,120,255,.3)}

/* structure vs noise */
.m-noise{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:44px}
.m-noise figure{margin:0; padding:18px 18px 12px; background:rgba(12,11,18,.72); border:1px solid rgba(255,255,255,.07); border-radius:12px}
.m-noise figcaption{font:400 11px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:rgba(236,230,240,.7); display:flex; align-items:center; gap:8px}
.m-noise .dot{width:8px; height:8px; border-radius:50%} .dot.n{background:#8d879a} .dot.s{background:#ff4a63; box-shadow:0 0 10px #ff4a63}
.m-line{width:100%; height:auto; margin-top:10px; overflow:visible}
.m-line path{fill:none; stroke-linejoin:round; stroke-linecap:round}
.m-line.noise path{stroke:rgba(200,195,210,.55); stroke-width:1.1}
.m-line.struct path{stroke:#ff4a63; stroke-width:2.2; filter:drop-shadow(0 0 6px rgba(255,74,99,.6)); stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 2.4s ease .3s}
.m-noise.in .m-line.struct path{stroke-dashoffset:0}
.m-cap{grid-column:1 / -1; font:320 12px/1.4 var(--sans); color:rgba(226,220,232,.55); margin:4px 0 0}

/* hard gate funnel */
.m-funnel{margin-top:44px; display:flex; flex-direction:column; gap:10px; max-width:980px}
.m-f{display:grid; grid-template-columns:170px 1fr 80px; align-items:center; gap:16px}
.m-f-l{font:350 12.5px/1.2 var(--sans); color:rgba(236,230,240,.8)}
.m-f-bar{height:12px; background:rgba(255,255,255,.05); border-radius:2px; overflow:hidden}
.m-f-bar i{display:block; height:100%; width:0; border-radius:2px; background:linear-gradient(90deg, rgba(255,90,60,.55), rgba(255,47,79,.85));
  transition:width 1.4s cubic-bezier(.2,.7,.2,1) var(--d, 0ms)}
.m-f.in .m-f-bar i{width:var(--w)}
.m-f b{font:300 22px/1 var(--sans); text-align:right; font-variant-numeric:tabular-nums}
.m-f.last .m-f-l{color:#fff; font-weight:500}
.m-f.last b{color:#ff5874; font-weight:400; text-shadow:0 0 18px rgba(255,47,79,.6)}
.m-f.last .m-f-bar i{background:#ff2f4f; box-shadow:0 0 12px #ff2f4f}
.m-note{font:320 13px/1.55 var(--sans); color:rgba(255,190,178,.85); border-left:2px solid #ff5a3c; padding-left:12px; margin:26px 0 0; max-width:620px}
.m-young{font:320 14.5px/1.6 var(--sans); color:rgba(236,230,240,.82); margin:26px 0 0; max-width:620px}
.m-young b{font-weight:500; color:#5fe3c0}

/* never */
.m-never{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-top:44px}
.m-never div{padding:24px 20px; border-radius:12px; background:rgba(12,11,18,.74); border:1px solid rgba(255,255,255,.07)}
.m-never svg{width:26px; height:26px; fill:none; stroke:#ff4a63; stroke-width:1.6; filter:drop-shadow(0 0 6px rgba(255,74,99,.5))}
.m-never h4{font:450 15px/1.2 var(--sans); margin:14px 0 8px}
.m-never p{font:320 13px/1.55 var(--sans); color:rgba(236,230,240,.76); margin:0}

.m-end{min-height:auto; padding-bottom:30px}
.m-end .cl-ctas{margin-top:30px}

/* reveal */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .9s ease var(--d, 0ms), transform .9s ease var(--d, 0ms)}
.reveal.in{opacity:1; transform:none}

@media (max-width:1100px){
  .m-terr{grid-template-columns:repeat(3, minmax(0,1fr))}
  .m-never{grid-template-columns:1fr 1fr}
  .m-stats{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .m-terr, .m-duo, .m-noise, .m-never{grid-template-columns:1fr}
  .m-f{grid-template-columns:1fr 60px; row-gap:6px} .m-f-bar{grid-column:1 / -1; grid-row:2}
  .m-sec{min-height:auto}
}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none} .m-f-bar i{transition:none} .m-line.struct path{transition:none; stroke-dashoffset:0} }