:root {
  --bg: #050b14;
  --surface: #080f1c;
  --surface2: #0c1628;
  --accent: #00d4ff;
  --accent2: #00ff88;
  --gold: #C9A84C;
  --gold-light: #F0CC7A;
  --red: #FF3B5C;
  --text: #d8eaf8;
  --muted: #5a7490;
  --border: rgba(0,212,255,0.12);
  --border-gold: rgba(201,168,76,0.2);
  --glow: 0 0 40px rgba(0,212,255,0.18);
  --glow-gold: 0 0 40px rgba(201,168,76,0.2);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  overflow-x: hidden;
  cursor: crosshair;
}

/* ─── FIXED BG EFFECTS ─────────────────────────────── */
.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,212,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridScroll 25s linear infinite;
}
@keyframes gridScroll { to { background-position: 0 60px; } }

.bg-orb1 {
  position: fixed; top: -20%; left: -10%; width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(0,212,255,0.06) 0%, transparent 70%);
  z-index: 0; pointer-events: none;
}
.bg-orb2 {
  position: fixed; bottom: -20%; right: -10%; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(201,168,76,0.07) 0%, transparent 70%);
  z-index: 0; pointer-events: none;
}
h2.sec-title {
font-size: 22px;
}
/* ─── FIXED BG ───────────────────────────────────────── */
.bg-layer{position:fixed;inset:0;z-index:0;pointer-events:none;}
.bg-grid{
position:absolute;inset:0;
background-image:
linear-gradient(rgba(0,212,255,0.025) 1px,transparent 1px),
linear-gradient(90deg,rgba(0,212,255,0.025) 1px,transparent 1px);
background-size:55px 55px;
animation:gridDrift 28s linear infinite;
}
@keyframes gridDrift{to{transform:translateY(55px)}}
.bg-orb1{position:absolute;width:800px;height:800px;border-radius:50%;background:radial-gradient(circle,rgba(0,212,255,0.04) 0%,transparent 65%);top:-200px;right:-200px;}
.bg-orb2{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(240,192,64,0.04) 0%,transparent 65%);bottom:-100px;left:-150px;}
.bg-noise{
position:absolute;inset:0;opacity:0.025;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ─── PROGRESS BAR ───────────────────────────────────── */
.prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:300;}
.prog-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--gold));transition:width 0.08s;}
/* ─── TICKER ─────────────────────────────────────────── */
.ticker-band{
position:relative;z-index:1;margin-top:60px;
overflow:hidden;background:rgba(0,212,255,0.03);
border-bottom:1px solid var(--border);height:34px;
display:flex;align-items:center;
}
.ticker-track{display:flex;gap:0;animation:tickerScroll 50s linear infinite;white-space:nowrap;}
.tick{
display:flex;align-items:center;gap:8px;
padding:0 32px;border-right:1px solid var(--border);
font-family:'Space Mono',monospace;font-size:0.68rem;color:var(--muted);
flex-shrink:0;
}
.tick .up{color:var(--accent2);}
.tick .dn{color:var(--red);}
.tick .tg{color:var(--gold);}
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ─── HERO ───────────────────────────────────────────── */
.hero{
position:relative;z-index:1;
min-height:calc(100vh - 96px);
display:flex;align-items:center;
padding:80px 60px 80px;
overflow:hidden;
}
.hero-layout{
display:grid;grid-template-columns:1fr 1fr;
gap:60px;align-items:center;max-width:100%;margin:0 auto;width:100%;
}
.hero-eyebrow{
display:inline-flex;align-items:center;gap:10px;
background:rgba(0,212,255,0.07);border:1px solid rgba(0,212,255,0.2);
padding:5px 16px;border-radius:100px;
font-family:'Space Mono',monospace;font-size:0.68rem;color:var(--accent);
letter-spacing:0.1em;text-transform:uppercase;margin-bottom:24px;
animation:fadeUp 0.8s ease both;
}
.eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--accent2);animation:livePulse 1.8s infinite;}
.hero h1{
font-family:'Syne',sans-serif;
font-size:clamp(2.2rem,8vw,4.8rem);
font-weight:800;line-height:1.03;letter-spacing:-0.035em;
margin-bottom:22px;
animation:fadeUp 0.8s 0.08s ease both;
}
.hero h1 .hl{color:var(--accent);}
.hero h1 .hg{color:var(--gold);}
.hero-desc{
font-size:1rem;color:var(--muted);line-height:1.75;
max-width:520px;font-weight:300;margin-bottom:36px;
animation:fadeUp 0.8s 0.16s ease both;
}
.hero-pills{
display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px;
animation:fadeUp 0.8s 0.22s ease both;
}
.pill{
font-family:'Space Mono',monospace;font-size:0.62rem;
background:var(--surface2);border:1px solid var(--border);
padding:5px 12px;border-radius:4px;color:var(--muted);
letter-spacing:0.06em;text-transform:uppercase;
}
.pill.cyan{color:var(--accent);border-color:rgba(0,212,255,0.2);background:rgba(0,212,255,0.05);}
.pill.gold{color:var(--gold);border-color:rgba(240,192,64,0.2);background:rgba(240,192,64,0.05);}
.hero-actions{
display:flex;gap:14px;flex-wrap:wrap;
animation:fadeUp 0.8s 0.28s ease both;
}
.btn-primary{
background:var(--accent);color:#000;
padding:13px 32px;border:none;border-radius:3px;
font-family:'Outfit',sans-serif;font-size:0.9rem;font-weight:700;
letter-spacing:0.03em;cursor:crosshair;text-decoration:none;
transition:box-shadow 0.3s,transform 0.2s;display:inline-block;
}
.btn-primary:hover{box-shadow:var(--glow);transform:translateY(-2px);}
.btn-ghost{
background:transparent;color:var(--muted);
padding:13px 28px;border:1px solid var(--border);border-radius:3px;
font-family:'Outfit',sans-serif;font-size:0.9rem;font-weight:400;
cursor:crosshair;text-decoration:none;
transition:border-color 0.3s,color 0.3s;display:inline-block;
}
.btn-ghost:hover{border-color:var(--border2);color:var(--text);}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
/* ─── HERO RIGHT — LIVE CHART WIDGET ─────────────────── */
.hero-chart{
background:var(--surface);border:1px solid var(--border);border-radius:14px;
overflow:hidden;animation:fadeUp 0.8s 0.35s ease both;
box-shadow:0 40px 80px rgba(0,0,0,0.5);
}
.hc-bar{
display:flex;align-items:center;justify-content:space-between;
padding:14px 20px;border-bottom:1px solid var(--border);
background:var(--surface2);
}
.hc-pair{font-family:'Space Mono',monospace;font-size:0.75rem;color:var(--accent);}
.hc-tf{font-family:'Space Mono',monospace;font-size:0.62rem;color:var(--muted);}
.hc-live{display:flex;align-items:center;gap:6px;font-family:'Space Mono',monospace;font-size:0.6rem;color:var(--accent2);}
.hc-svg{padding:8px 8px 4px;}
/* ─── SECTION BASE ───────────────────────────────────── */
.section{
position:relative;z-index:1;
padding:88px 60px;max-width:100%;margin:0 auto;
}
.full-bleed{padding:0;}
.full-bleed .section{padding:88px 60px;}
.sec-label{
font-family:'Space Mono',monospace;font-size:0.63rem;letter-spacing:0.18em;
text-transform:uppercase;color:var(--accent);
display:flex;align-items:center;gap:10px;margin-bottom:12px;
}
.sec-label::before{content:'';width:18px;height:1px;background:var(--accent);}
.sec-label.gold{color:var(--gold);}
.sec-label.gold::before{background:var(--gold);}
.sec-title{
font-family:'Syne',sans-serif;font-size:clamp(1.5rem,5vw,2.6rem);
font-weight:800;letter-spacing:-0.028em;line-height:1.08;margin-bottom:14px;
}
.sec-sub{
color:var(--muted);font-size:0.95rem;line-height:1.72;
font-weight:300;max-width:580px;margin-bottom:52px;
}
/* ─── SCROLL REVEAL ──────────────────────────────────── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 0.7s ease,transform 0.7s ease;}
.reveal.show{opacity:1;transform:translateY(0);}
.reveal-d1{transition-delay:0.08s;}
.reveal-d2{transition-delay:0.16s;}
.reveal-d3{transition-delay:0.24s;}
.reveal-d4{transition-delay:0.32s;}
/* ─── DIVIDER ────────────────────────────────────────── */
hr.divider{border:none;border-top:1px solid var(--border);margin:0;}
.divider-band{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
/* ─── CONCEPT GRID ───────────────────────────────────── */
.concept-grid{
display:grid;grid-template-columns:repeat(3,1fr);
gap:1px;background:var(--border);
border:1px solid var(--border);border-radius:10px;overflow:hidden;
margin-top:8px;
}
.con-card{
background:var(--bg);padding:32px 28px;
position:relative;overflow:hidden;
transition:background 0.3s;
cursor:default;
}
.con-card:hover{background:var(--surface);}
.con-card::after{
content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,var(--accent),transparent);
transform:scaleX(0);transform-origin:left;transition:transform 0.4s;
}
.con-card:hover::after{transform:scaleX(1);}
.con-card.gold-card::after{background:linear-gradient(90deg,var(--gold),transparent);}
.con-icon{
width:44px;height:44px;border-radius:8px;
background:rgba(0,212,255,0.07);border:1px solid rgba(0,212,255,0.15);
display:flex;align-items:center;justify-content:center;
font-size:1.2rem;margin-bottom:18px;
}
.con-icon.g{background:rgba(240,192,64,0.07);border-color:rgba(240,192,64,0.15);}
.con-num{
font-family:'Space Mono',monospace;font-size:0.6rem;color:var(--muted);
letter-spacing:0.12em;margin-bottom:8px;text-transform:uppercase;
}
.con-card h3{
font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;
margin-bottom:10px;letter-spacing:-0.01em;
}
.con-card p{font-size:0.84rem;color:var(--muted);line-height:1.68;font-weight:300;}
.con-tag{
display:inline-block;margin-top:14px;
font-family:'Space Mono',monospace;font-size:0.6rem;
color:var(--accent);background:rgba(0,212,255,0.06);
border:1px solid rgba(0,212,255,0.15);
padding:3px 10px;border-radius:100px;letter-spacing:0.06em;
}
.con-tag.g{color:var(--gold);background:rgba(240,192,64,0.06);border-color:rgba(240,192,64,0.15);}
.con-tag.r{color:var(--red);background:rgba(255,68,85,0.06);border-color:rgba(255,68,85,0.15);}
/* ─── LIQUIDITY ANATOMY ──────────────────────────────── */
.anatomy-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
.anatomy-chart{
background:var(--surface);border:1px solid var(--border);
border-radius:12px;overflow:hidden;
position:sticky;top:90px;
}
.ac-header{
display:flex;justify-content:space-between;align-items:center;
padding:16px 20px;border-bottom:1px solid var(--border);
background:var(--surface2);
}
.ac-pair{font-family:'Space Mono',monospace;font-size:0.72rem;color:var(--accent);}
.ac-detail{font-family:'Space Mono',monospace;font-size:0.6rem;color:var(--muted);}
.ac-svg{padding:4px;}
.ac-legend{
display:flex;flex-wrap:wrap;gap:12px;
padding:14px 20px;border-top:1px solid var(--border);
}
.ac-leg-item{display:flex;align-items:center;gap:6px;font-family:'Space Mono',monospace;font-size:0.6rem;color:var(--muted);}
.leg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.anatomy-list{display:flex;flex-direction:column;gap:0;}
.anat-item{
border:1px solid var(--border);border-radius:10px;
overflow:hidden;margin-bottom:14px;
transition:border-color 0.3s;
cursor:default;
}
.anat-item:hover{border-color:var(--border2);}
.anat-head{
display:flex;align-items:center;gap:16px;
padding:18px 22px;
}
.anat-num{
font-family:'Space Mono',monospace;font-size:1.3rem;font-weight:700;
color:rgba(0,212,255,0.18);line-height:1;min-width:32px;
}
.anat-icon{font-size:1.1rem;min-width:28px;text-align:center;}
.anat-head h4{
font-family:'Syne',sans-serif;font-size:0.97rem;font-weight:700;
letter-spacing:-0.01em;
}
.anat-badge{
margin-left:auto;font-family:'Space Mono',monospace;font-size:0.58rem;
padding:3px 9px;border-radius:100px;letter-spacing:0.06em;
text-transform:uppercase;flex-shrink:0;
}
.badge-crit{color:var(--red);background:rgba(255,68,85,0.08);border:1px solid rgba(255,68,85,0.2);}
.badge-high{color:var(--gold);background:rgba(240,192,64,0.08);border:1px solid rgba(240,192,64,0.2);}
.badge-core{color:var(--accent);background:rgba(0,212,255,0.08);border:1px solid rgba(0,212,255,0.2);}
.badge-pro{color:var(--accent2);background:rgba(0,255,136,0.08);border:1px solid rgba(0,255,136,0.2);}
.anat-body{padding:0 22px 20px 76px;font-size:0.84rem;color:var(--muted);line-height:1.68;font-weight:300;}
.anat-rule{
margin-top:12px;padding:10px 14px;
background:rgba(0,212,255,0.04);border:1px solid rgba(0,212,255,0.1);
border-left:2px solid var(--accent);border-radius:3px;
font-size:0.8rem;color:var(--text);font-style:italic;
}
/* ─── THE WHY SECTION ────────────────────────────────── */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.why-right{display:flex;flex-direction:column;gap:22px;}
.why-point{
display:flex;gap:18px;align-items:flex-start;
padding:20px 22px;border:1px solid var(--border);border-radius:10px;
background:var(--surface);transition:border-color 0.3s,background 0.3s;
cursor:default;
}
.why-point:hover{border-color:var(--border2);background:var(--surface2);}
.wp-num{
font-family:'Space Mono',monospace;font-size:0.6rem;font-weight:700;
color:var(--accent);min-width:26px;padding-top:3px;
letter-spacing:0.1em;
}
.why-point h4{font-family:'Syne',sans-serif;font-size:0.94rem;font-weight:700;margin-bottom:6px;}
.why-point p{font-size:0.83rem;color:var(--muted);line-height:1.65;font-weight:300;}
/* ─── LEVELS IMPORTANCE ──────────────────────────────── */
.levels-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.lvl-card{
background:var(--surface);border:1px solid var(--border);
border-radius:10px;padding:22px 20px;
transition:border-color 0.3s,transform 0.3s;cursor:default;
}
.lvl-card:hover{border-color:var(--border2);transform:translateY(-2px);}
.lvl-header{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.lvl-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;}
.lvl-card h4{font-family:'Syne',sans-serif;font-size:0.92rem;font-weight:700;}
.lvl-bar-wrap{background:rgba(255,255,255,0.05);border-radius:2px;height:3px;margin-bottom:10px;overflow:hidden;}
.lvl-bar-fill{height:100%;border-radius:2px;transition:width 1.2s ease;}
.lvl-card p{font-size:0.8rem;color:var(--muted);line-height:1.6;font-weight:300;}
/* ─── ENTRY MODEL TIMELINE ───────────────────────── */
.model-timeline{position:relative;padding-left:44px;}
.model-timeline::before{
content:'';position:absolute;left:14px;top:8px;bottom:8px;
width:1px;background:linear-gradient(to bottom,var(--accent),var(--gold),var(--accent2));
}
.mt-item{position:relative;margin-bottom:32px;}
.mt-item:last-child{margin-bottom:0;}
.mt-dot{
position:absolute;left:-36px;
width:22px;height:22px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-family:'Space Mono',monospace;font-size:0.58rem;font-weight:700;
border:1.5px solid;
}
.mt-dot.c{background:rgba(0,212,255,0.12);border-color:var(--accent);color:var(--accent);}
.mt-dot.g{background:rgba(240,192,64,0.12);border-color:var(--gold);color:var(--gold);}
.mt-dot.gr{background:rgba(0,255,136,0.12);border-color:var(--accent2);color:var(--accent2);}
.mt-dot.r{background:rgba(255,68,85,0.12);border-color:var(--red);color:var(--red);}
.mt-content{
background:var(--surface);border:1px solid var(--border);
border-radius:10px;padding:20px 24px;
transition:border-color 0.3s;
}
.mt-item:hover .mt-content{border-color:var(--border2);}
.mt-step{font-family:'Space Mono',monospace;font-size:0.58rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.mt-title{font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;margin-bottom:8px;}
.mt-body{font-size:0.84rem;color:var(--muted);line-height:1.65;font-weight:300;}
.mt-body strong{color:var(--text);}
.mt-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;}
.mt-tag{
font-family:'Space Mono',monospace;font-size:0.6rem;
background:rgba(0,212,255,0.06);border:1px solid rgba(0,212,255,0.14);
padding:2px 9px;border-radius:3px;color:var(--accent);letter-spacing:0.05em;
}
.mt-tag.g{background:rgba(240,192,64,0.06);border-color:rgba(240,192,64,0.14);color:var(--gold);}
/* ─── ENTRY MODEL GRID ────────────────────────────── */
.entry-model-grid{
display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;
}
/* ─── SESSION TIMING TABLE ───────────────────────────── */
.session-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.sess-card{background:var(--bg);padding:28px 24px;transition:background 0.3s;}
.sess-card:hover{background:var(--surface);}
.sess-name{
font-family:'Syne',sans-serif;font-size:1rem;font-weight:800;
margin-bottom:4px;
}
.sess-time{font-family:'Space Mono',monospace;font-size:0.68rem;color:var(--accent);margin-bottom:16px;letter-spacing:0.05em;}
.sess-list{display:flex;flex-direction:column;gap:8px;}
.sess-row{display:flex;gap:9px;font-size:0.82rem;color:var(--muted);align-items:flex-start;line-height:1.5;}
.sess-arrow{color:var(--accent2);flex-shrink:0;font-size:0.75rem;margin-top:2px;}
.sess-tag{
display:inline-block;margin-top:16px;
font-family:'Space Mono',monospace;font-size:0.58rem;
padding:4px 10px;border-radius:100px;
letter-spacing:0.06em;text-transform:uppercase;
}
.st-set{color:var(--muted);background:rgba(107,138,170,0.08);border:1px solid rgba(107,138,170,0.15);}
.st-hunt{color:var(--gold);background:rgba(240,192,64,0.08);border:1px solid rgba(240,192,64,0.2);}
.st-confirm{color:var(--accent2);background:rgba(0,255,136,0.08);border:1px solid rgba(0,255,136,0.2);}
/* ─── RULES BOX ──────────────────────────────────────── */
.rules-box{
background:var(--surface);border:1px solid var(--border);
border-left:3px solid var(--accent);border-radius:6px;
padding:28px 32px;margin-top:0;
}
.rules-box.gold{border-left-color:var(--gold);}
.rules-box.red{border-left-color:var(--red);}
.rules-title{
font-family:'Space Mono',monospace;font-size:0.65rem;color:var(--accent);
letter-spacing:0.12em;text-transform:uppercase;margin-bottom:14px;
}
.rules-title.gold{color:var(--gold);}
.rules-title.red{color:var(--red);}
.rules-list{display:flex;flex-direction:column;gap:10px;}
.rule-row{display:flex;gap:10px;font-size:0.86rem;align-items:flex-start;line-height:1.6;}
.rule-row span:first-child{color:var(--accent2);flex-shrink:0;font-size:0.75rem;margin-top:2px;}
.rule-row span:first-child.r{color:var(--red);}
.rule-row span:first-child.g{color:var(--gold);}
/* ─── VIP CTA STRIP ──────────────────────────────────── */
.vip-strip{
position:relative;z-index:1;
background:linear-gradient(135deg,rgba(240,192,64,0.06) 0%,rgba(0,212,255,0.04) 100%);
border-top:1px solid rgba(240,192,64,0.2);border-bottom:1px solid rgba(240,192,64,0.2);
padding:72px 60px;
}
.vip-inner{margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;}
.vip-price{
font-family:'Syne',sans-serif;font-size:4rem;font-weight:800;
color:var(--gold);letter-spacing:-0.04em;line-height:1;
margin:20px 0 6px;
}
.vip-per{font-size:1rem;color:var(--muted);font-weight:300;margin-bottom:8px;}
.vip-sub{font-family:'Space Mono',monospace;font-size:0.62rem;color:var(--muted);letter-spacing:0.06em;margin-bottom:28px;}
.btn-vip{
display:inline-block;background:var(--gold);color:#000;
padding:15px 38px;border-radius:3px;font-family:'Syne',sans-serif;
font-size:0.95rem;font-weight:800;letter-spacing:0.02em;
text-decoration:none;cursor:crosshair;
transition:box-shadow 0.3s,transform 0.2s;
}
.btn-vip:hover{box-shadow:var(--glow-gold);transform:translateY(-2px);}
.vip-features{display:flex;flex-direction:column;gap:0;}
.vf-item{
display:flex;gap:13px;padding:15px 0;
border-bottom:1px solid rgba(255,255,255,0.04);
}
.vf-item:last-child{border-bottom:none;}
.vf-check{
width:20px;height:20px;border-radius:50%;
background:rgba(0,255,136,0.1);border:1px solid rgba(0,255,136,0.3);
display:flex;align-items:center;justify-content:center;
font-size:0.6rem;color:var(--accent2);flex-shrink:0;margin-top:2px;
}
.vf-text h4{font-size:0.88rem;font-weight:600;margin-bottom:3px;}
.vf-text p{font-size:0.79rem;color:var(--muted);line-height:1.5;font-weight:300;}
/* ─── RESPONSIVE MEDIA QUERIES ───────────────────────── */
/* Tablet */
@media screen and (min-width: 768px) and (max-width: 1023px) {
.hero {
padding: 60px 24px;
}
.hero-layout {
grid-template-columns: 1fr;
gap: 40px;
}
.section {
padding: 64px 24px;
}
.concept-grid {
grid-template-columns: repeat(2, 1fr);
}
.anatomy-layout {
grid-template-columns: 1fr;
gap: 40px;
}
.anatomy-chart {
position: static;
}
.why-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.entry-model-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.session-grid {
grid-template-columns: repeat(2, 1fr);
}
.vip-strip {
padding: 60px 24px;
}
.vip-inner {
grid-template-columns: 1fr;
gap: 40px;
}
}
/* Mobile Large */
@media screen and (min-width: 480px) and (max-width: 767px) {
.hero {
padding: 40px 16px;
}
.reveal.show{
display:grid;grid-template-columns:1fr!important;gap:20px;margin-bottom:48px;"
}
.hero-layout {
grid-template-columns: 1fr;
gap: 30px;
}
.hero-eyebrow {
font-size: 0.6rem;
padding: 4px 12px;
}
.hero h1 {
font-size: clamp(2rem, 7vw, 2.8rem);
}
.hero-desc {
font-size: 0.9rem;
}
.hero-pills {
gap: 6px;
}
.pill {
font-size: 0.55rem;
padding: 4px 8px;
}
.hero-actions .btn-primary,
.hero-actions .btn-ghost {
padding: 10px 20px;
font-size: 0.85rem;
}
.hc-bar {
flex-wrap: wrap;
gap: 8px;
}
.hc-pair,
.hc-tf,
.hc-live {
font-size: 0.65rem;
}
.section {
padding: 48px 16px;
}
.sec-label {
font-size: 0.58rem;
margin-bottom: 8px;
}
.sec-title {
font-size: clamp(1.3rem, 4.5vw, 1.8rem);
}
.sec-sub {
font-size: 0.9rem;
margin-bottom: 32px;
}
.concept-grid {
grid-template-columns: 1fr;
}
.con-card {
padding: 24px 20px;
}
.con-card h3 {
font-size: 0.95rem;
}
.con-card p {
font-size: 0.8rem;
}
.anatomy-layout {
grid-template-columns: 1fr;
gap: 30px;
}
.anatomy-chart {
position: static;
}
.ac-header {
padding: 12px 16px;
}
.ac-legend {
padding: 10px 12px;
gap: 8px;
}
.ac-leg-item {
font-size: 0.55rem;
}
.anat-head {
flex-wrap: wrap;
gap: 12px;
padding: 14px 16px;
}
.anat-body {
padding: 0 16px 16px 16px;
}
.why-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.why-point {
padding: 16px 18px;
}
.wp-num {
font-size: 0.55rem;
min-width: 22px;
}
.why-point h4 {
font-size: 0.9rem;
}
.why-point p {
font-size: 0.8rem;
}
.levels-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.entry-model-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.model-timeline {
padding-left: 30px;
}
.mt-dot {
left: -24px;
width: 20px;
height: 20px;
font-size: 0.5rem;
}
.mt-content {
padding: 16px 18px;
}
.mt-title {
font-size: 0.95rem;
}
.mt-body {
font-size: 0.8rem;
}
.mt-tags {
gap: 5px;
}
.mt-tag {
font-size: 0.55rem;
padding: 2px 7px;
}
.rules-box {
padding: 20px;
}
.rules-title {
font-size: 0.6rem;
}
.rule-row {
font-size: 0.8rem;
}
.session-grid {
grid-template-columns: 1fr;
}
.sess-card {
padding: 22px 18px;
}
.sess-name {
font-size: 0.95rem;
}
.sess-time {
font-size: 0.65rem;
margin-bottom: 12px;
}
.sess-row {
font-size: 0.8rem;
gap: 8px;
}
.sess-tag {
margin-top: 12px;
font-size: 0.55rem;
padding: 3px 8px;
}
.vip-strip {
padding: 48px 16px;
}
.vip-inner {
grid-template-columns: 1fr;
gap: 30px;
}
.vip-price {
font-size: 3.2rem;
margin: 15px 0 5px;
}
.vip-per {
font-size: 0.9rem;
}
.vip-sub {
font-size: 0.6rem;
margin-bottom: 20px;
}
.btn-vip {
width: 100%;
text-align: center;
padding: 14px 20px;
font-size: 0.9rem;
}
.vf-item {
gap: 10px;
padding: 12px 0;
}
.vf-check {
width: 18px;
height: 18px;
font-size: 0.55rem;
}
.vf-text h4 {
font-size: 0.85rem;
}
.vf-text p {
font-size: 0.75rem;
}
}
/* Mobile Small */
@media screen and (max-width: 479px) {
.hero {
padding: 32px 12px;
}
.hero-layout {
grid-template-columns: 1fr;
gap: 24px;
}
.hero-eyebrow {
font-size: 0.55rem;
padding: 4px 10px;
margin-bottom: 16px;
}
.hero h1 {
font-size: clamp(1.8rem, 6vw, 2.2rem);
margin-bottom: 16px;
}
.hero-desc {
font-size: 0.85rem;
margin-bottom: 24px;
}
.hero-pills {
gap: 5px;
margin-bottom: 24px;
}
.pill {
font-size: 0.5rem;
padding: 3px 6px;
}
.hero-actions {
flex-direction: column;
gap: 10px;
}
.hero-actions .btn-primary,
.hero-actions .btn-ghost {
width: 100%;
text-align: center;
padding: 12px 16px;
font-size: 0.85rem;
}
.hc-bar {
flex-wrap: wrap;
gap: 6px;
padding: 10px 12px;
}
.hc-pair,
.hc-tf,
.hc-live {
font-size: 0.6rem;
}
.section {
padding: 40px 12px;
}
.sec-label {
font-size: 0.55rem;
gap: 6px;
margin-bottom: 6px;
}
.sec-label::before {
width: 14px;
}
.sec-title {
font-size: clamp(1.2rem, 4vw, 1.5rem);
margin-bottom: 10px;
}
.sec-sub {
font-size: 0.85rem;
line-height: 1.6;
margin-bottom: 28px;
}
.concept-grid {
grid-template-columns: 1fr;
border-radius: 8px;
}
.con-card {
padding: 20px 16px;
}
.con-icon {
width: 36px;
height: 36px;
font-size: 1rem;
margin-bottom: 14px;
}
.con-num {
font-size: 0.55rem;
margin-bottom: 6px;
}
.con-card h3 {
font-size: 0.9rem;
margin-bottom: 8px;
}
.con-card p {
font-size: 0.78rem;
line-height: 1.6;
}
.con-tag {
font-size: 0.55rem;
padding: 2px 8px;
margin-top: 10px;
}
.anatomy-layout {
grid-template-columns: 1fr;
gap: 24px;
}
.anatomy-chart {
position: static;
border-radius: 8px;
}
.ac-header {
padding: 10px 12px;
}
.ac-pair {
font-size: 0.65rem;
}
.ac-detail {
font-size: 0.55rem;
}
.ac-legend {
padding: 8px 10px;
gap: 6px;
}
.ac-leg-item {
font-size: 0.5rem;
gap: 4px;
}
.leg-dot {
width: 6px;
height: 6px;
}
.anat-item {
border-radius: 8px;
}
.anat-head {
gap: 8px;
padding: 12px 14px;
}
.anat-num {
font-size: 1.1rem;
min-width: 24px;
}
.anat-icon {
font-size: 1rem;
min-width: 24px;
}
.anat-head h4 {
font-size: 0.85rem;
}
.anat-badge {
font-size: 0.5rem;
padding: 2px 6px;
margin-left: 0;
}
.anat-body {
padding: 0 14px 14px 14px;
font-size: 0.78rem;
line-height: 1.6;
}
.anat-rule {
font-size: 0.75rem;
padding: 8px 10px;
}
.why-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.why-right {
gap: 16px;
}
.why-point {
gap: 12px;
padding: 14px 16px;
}
.wp-num {
font-size: 0.5rem;
min-width: 20px;
}
.why-point h4 {
font-size: 0.85rem;
margin-bottom: 4px;
}
.why-point p {
font-size: 0.78rem;
line-height: 1.6;
}
.levels-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.lvl-card {
padding: 16px 14px;
}
.lvl-header {
gap: 8px;
margin-bottom: 8px;
}
.lvl-dot {
width: 8px;
height: 8px;
}
.lvl-card h4 {
font-size: 0.85rem;
}
.lvl-card p {
font-size: 0.75rem;
}
.entry-model-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.model-timeline {
padding-left: 24px;
}
.mt-dot {
left: -20px;
width: 18px;
height: 18px;
font-size: 0.45rem;
}
.mt-content {
padding: 14px;
}
.mt-step {
font-size: 0.55rem;
margin-bottom: 4px;
}
.mt-title {
font-size: 0.9rem;
margin-bottom: 6px;
}
.mt-body {
font-size: 0.78rem;
line-height: 1.6;
}
.mt-tags {
gap: 4px;
margin-top: 8px;
}
.mt-tag {
font-size: 0.5rem;
padding: 2px 6px;
}
.rules-box {
padding: 16px;
}
.rules-title {
font-size: 0.55rem;
margin-bottom: 10px;
}
.rule-row {
gap: 6px;
font-size: 0.78rem;
}
.rule-row span:first-child {
font-size: 0.7rem;
}
.session-grid {
grid-template-columns: 1fr;
border-radius: 8px;
}
.sess-card {
padding: 18px 14px;
}
.sess-name {
font-size: 0.9rem;
margin-bottom: 2px;
}
.sess-time {
font-size: 0.6rem;
margin-bottom: 10px;
}
.sess-list {
gap: 6px;
}
.sess-row {
font-size: 0.75rem;
gap: 6px;
}
.sess-arrow {
font-size: 0.7rem;
}
.sess-tag {
margin-top: 10px;
font-size: 0.5rem;
padding: 2px 8px;
}
.vip-strip {
padding: 40px 12px;
}
.vip-inner {
grid-template-columns: 1fr;
gap: 24px;
}
.vip-price {
font-size: 2.8rem;
margin: 10px 0 5px;
}
.vip-per {
font-size: 0.85rem;
}
.vip-sub {
font-size: 0.55rem;
margin-bottom: 16px;
}
.btn-vip {
width: 100%;
text-align: center;
padding: 12px 16px;
font-size: 0.85rem;
}
.vf-item {
gap: 8px;
padding: 10px 0;
}
.vf-check {
width: 16px;
height: 16px;
font-size: 0.5rem;
}
.vf-text h4 {
font-size: 0.8rem;
margin-bottom: 2px;
}
.vf-text p {
font-size: 0.7rem;
line-height: 1.5;
}
.reveal.show{
display:grid;grid-template-columns:1fr!important;gap:20px;margin-bottom:48px;"
}
}
.reveal.show{
display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:48px;"
}
.sec-title {
color: white !important;}
h1{color:white!important}