/* ============================================================
   VTA Trades · Cosmic Base — shared component kit for inner-page mockups
   Source of truth: DESIGN.md (accepted 2026-06-09) +
   design/homepage-variants/20260609-vta-home-cosmic.html
   Direction: dark cosmic premium WITHOUT the homepage's heavy scroll-lock hero.
   Inner pages reuse the palette, chrome, buttons, cards, and restrained
   fade/slide reveals; the cosmic backdrop here is a slow drift starfield +
   static nebula glow (no scroll-warp, no cursor gravity).
   ============================================================ */

:root{
  --ink:#0A0E17; --ink-2:#0c1120; --surface:#141B2D; --surface-2:#161f37;
  --line:#243049; --line-soft:#1b2336;
  --text:#F8FAFC; --muted:#94A3B8; --muted-2:#6e7a93;
  --cta:#5B5FFF; --cta-2:#7C6DFF; --cyan:#5BC0BE; --violet:#7C4DFF;
  --error:#F87171;
  --glow-cta:rgba(91,95,255,.55); --glow-cyan:rgba(91,192,190,.45);
  --sans:'Noto Sans TC','PingFang TC',sans-serif;
  --latin:'Satoshi','Inter','Noto Sans TC',sans-serif;
  --maxw:1180px;
  --r-sm:8px; --r-md:16px; --r-lg:24px; --r-pill:999px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); color:var(--text); background:var(--ink);
  line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* ---------- cosmic backdrop (fixed, restrained) ---------- */
#space{position:fixed; inset:0; z-index:0; display:block; pointer-events:none;}
.atmos{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(50% 45% at 12% 88%, rgba(91,192,190,.10), transparent 60%),
    radial-gradient(80% 60% at 50% 120%, rgba(124,77,255,.12), transparent 55%);}
.vignette{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 30%, transparent 55%, rgba(4,6,12,.7) 100%);}
main{position:relative; z-index:1}

/* ---------- layout primitives ---------- */
.wrap{width:min(var(--maxw), calc(100% - 48px)); margin-inline:auto}
.eyebrow{font-family:var(--latin); font-size:12px; font-weight:700; letter-spacing:.32em;
  text-transform:uppercase; color:var(--cyan); display:inline-block}
.panel{background:linear-gradient(180deg, rgba(20,27,45,.86), rgba(10,14,23,.92));
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}

/* ---------- NAV / HEADER chrome ---------- */
nav.bar{position:fixed; top:0; left:0; right:0; z-index:20; display:flex;
  align-items:center; justify-content:space-between;
  padding:18px clamp(20px,4vw,44px); transition:background .4s, border-color .4s, padding .4s;
  border-bottom:1px solid transparent;}
nav.bar.scrolled{background:rgba(8,11,20,.72); backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px); border-bottom-color:var(--line-soft); padding-top:12px; padding-bottom:12px;}
.brand{font-family:var(--latin); font-weight:900; letter-spacing:.18em; font-size:15px;
  display:flex; align-items:center; gap:8px; color:var(--text); text-decoration:none;}
.brand b{color:var(--cyan); font-weight:900}
.navlinks{display:flex; gap:24px; align-items:center}
.navlinks a{color:var(--muted); text-decoration:none; font-size:14px; font-weight:500;
  letter-spacing:.02em; transition:color .25s;}
.navlinks a:hover{color:var(--text)}
.nav-cta{color:var(--text)!important; border:1px solid var(--line);
  padding:9px 18px; border-radius:var(--r-pill); transition:border-color .25s, background .25s;}
.nav-cta:hover{border-color:var(--cta-2); background:rgba(91,95,255,.12)}
.nav-login{color:var(--muted)!important; font-size:14px; font-weight:600; transition:color .25s}
.nav-login:hover{color:var(--text)}
.nav-cart{display:inline-flex; align-items:center; gap:6px; color:var(--muted)!important;
  font-size:13px; border:1px solid var(--line); padding:8px 12px; border-radius:var(--r-pill); transition:border-color .25s,color .25s}
.nav-cart:hover{border-color:var(--cyan); color:var(--text)!important}
.nav-cart b{color:var(--cyan); font-weight:700}
@media(max-width:880px){.navlinks{display:none}}

/* ---------- buttons ---------- */
.btn{font-family:var(--sans); font-weight:700; font-size:15px; letter-spacing:.02em;
  padding:15px 30px; border-radius:var(--r-pill); cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:9px;
  transition:transform .25s, box-shadow .35s, background .25s, border-color .25s;}
.btn:visited{text-decoration:none}
.btn-primary{background:linear-gradient(180deg,var(--cta-2),var(--cta)); color:#fff;
  box-shadow:0 10px 34px -8px var(--glow-cta), inset 0 1px 0 rgba(255,255,255,.25);}
.btn-primary:visited{color:#fff}
.btn-primary:hover,
.btn-primary:focus-visible{color:#fff; transform:translateY(-2px); box-shadow:0 16px 44px -8px var(--glow-cta)}
.btn-ghost{color:var(--text); border:1px solid var(--line); background:rgba(255,255,255,.02)}
.btn-ghost:visited{color:var(--text)}
.btn-ghost:hover,
.btn-ghost:focus-visible{color:var(--text); transform:translateY(-2px); border-color:var(--cyan); box-shadow:0 0 0 1px var(--glow-cyan)}
.btn-community{border-color:rgba(91,192,190,.44); background:rgba(91,192,190,.06); color:var(--text)}
.btn-community:hover,
.btn-community:focus-visible{border-color:var(--cyan); background:rgba(91,192,190,.12); color:var(--text); box-shadow:0 14px 34px -18px var(--glow-cyan), 0 0 0 1px var(--glow-cyan)}
.btn-sm{padding:11px 20px; font-size:14px}

/* ---------- page hero (inner pages — static, no scroll-lock) ---------- */
.page-hero{position:relative; padding:clamp(120px,18vh,180px) 0 clamp(60px,9vh,96px); text-align:center}
.page-hero .inner{max-width:860px; margin-inline:auto}
.page-hero h1{font-family:var(--sans); font-weight:900; letter-spacing:-.006em;
  font-size:clamp(34px,5.6vw,68px); line-height:1.08; margin:20px 0 0;
  text-shadow:0 0 70px rgba(91,95,255,.18);}
.page-hero h1 .grad{background:linear-gradient(100deg,var(--cyan),var(--cta-2) 55%,var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 24px rgba(91,192,190,.22));}
.page-hero .lede{margin:24px auto 0; max-width:620px; color:var(--muted);
  font-size:clamp(16px,1.7vw,19px); font-weight:300;}
.page-hero .cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:36px}
/* split hero variant: copy + visual panel */
.hero-split{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
  padding:clamp(120px,17vh,170px) 0 clamp(56px,8vh,90px); text-align:left}
.hero-split h1{font-weight:900; font-size:clamp(30px,4.8vw,56px); line-height:1.1; letter-spacing:-.01em; margin-top:18px}
.hero-split .lede{color:var(--muted); font-weight:300; margin-top:20px; font-size:clamp(15px,1.6vw,18px); max-width:560px}
.hero-visual{aspect-ratio:5/4; border-radius:var(--r-lg); border:1px solid var(--line);
  background:radial-gradient(circle at 50% 35%,rgba(91,192,190,.16),transparent 60%),
    linear-gradient(160deg,#1a2238,#0d1322); display:grid; place-items:center;
  color:var(--muted-2); font-family:var(--latin); font-size:12px; letter-spacing:.18em; text-align:center; padding:24px}
@media(max-width:820px){.hero-split{grid-template-columns:1fr; gap:32px; text-align:center} .hero-split .lede{margin-inline:auto} .hero-split .cta-row{justify-content:center}}

/* ---------- generic section + reveal ---------- */
section.block{padding:clamp(80px,11vh,140px) 0; position:relative}
.reveal{opacity:0; transform:translateY(36px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
.sec-head{margin-bottom:clamp(28px,4vh,48px)}
.sec-head.center{text-align:center}
.sec-head.center .sec-sub{margin-inline:auto}
h2.sec-title{font-weight:900; font-size:clamp(26px,3.6vw,44px); line-height:1.15; letter-spacing:-.01em; margin-top:14px}
.sec-sub{color:var(--muted); font-weight:300; max-width:560px; margin-top:14px; font-size:17px}

/* ---------- cards + grids ---------- */
.grid{display:grid; gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.g2,.g3{grid-template-columns:1fr}}
.card{border:1px solid var(--line); border-radius:var(--r-md); padding:26px;
  background:linear-gradient(180deg,var(--surface),var(--ink-2)); transition:transform .35s, border-color .35s, box-shadow .35s}
.card:hover{transform:translateY(-4px); border-color:var(--cta-2); box-shadow:0 20px 50px -22px var(--glow-cta)}
.card h3{font-size:clamp(18px,2.2vw,22px); font-weight:700}
.card p{color:var(--muted); font-weight:300; margin-top:8px; font-size:14.5px}
.card .n{font-family:var(--latin); font-size:13px; font-weight:700; color:var(--cta-2); letter-spacing:.1em; display:block; margin-bottom:6px}

/* image / media placeholder */
.media{border:1px solid var(--line); border-radius:var(--r-md); min-height:200px;
  background:radial-gradient(circle at 50% 35%,rgba(91,192,190,.14),transparent 60%),
    linear-gradient(160deg,#1a2238,#0d1322); display:grid; place-items:center;
  color:var(--muted-2); font-family:var(--latin); font-size:12px; letter-spacing:.16em; text-align:center; padding:20px}

/* ---------- editorial statement (asymmetric) ---------- */
.stmt{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:end}
.stmt .big{font-weight:900; font-size:clamp(26px,4vw,50px); line-height:1.18; letter-spacing:-.015em}
.stmt .big em{font-style:normal; color:var(--cyan)}
.stmt .pts{display:flex; flex-direction:column; gap:22px}
.pt{border-top:1px solid var(--line); padding-top:16px}
.pt .n{font-family:var(--latin); font-size:13px; font-weight:700; color:var(--cta-2); letter-spacing:.1em}
.pt h4{font-size:18px; font-weight:700; margin:6px 0 4px}
.pt p{color:var(--muted); font-size:14.5px; font-weight:300}
@media(max-width:820px){.stmt{grid-template-columns:1fr; gap:32px}}

/* ---------- alternating numbered module rows ---------- */
.mod{display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:center;
  padding:30px 0; border-bottom:1px solid var(--line-soft)}
.mod:nth-child(even){grid-template-columns:1fr auto; text-align:right}
.mod:nth-child(even) .mod-num{order:2}
.mod-num{font-family:var(--latin); font-weight:900; font-size:clamp(56px,9vw,120px); line-height:.8; letter-spacing:-.04em;
  background:linear-gradient(180deg,var(--text),rgba(148,166,191,.25)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.mod h3{font-size:clamp(20px,2.6vw,28px); font-weight:700}
.mod p{color:var(--muted); font-weight:300; margin-top:8px; max-width:560px; margin-left:auto}
.mod:nth-child(odd) p{margin-left:0}
@media(max-width:680px){.mod,.mod:nth-child(even){grid-template-columns:1fr; text-align:left; gap:8px}
  .mod:nth-child(even) .mod-num{order:-1} .mod p,.mod:nth-child(odd) p{margin-left:0}}

/* ---------- connected step path ---------- */
.path{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; margin-top:50px}
.path::before{content:""; position:absolute; top:26px; left:6%; right:6%; height:1px;
  background:linear-gradient(90deg,transparent,var(--violet),var(--cyan),transparent)}
.step{position:relative; text-align:center; padding:0 6px}
.step .dot{width:54px; height:54px; margin:0 auto 18px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--latin); font-weight:900;
  background:radial-gradient(circle at 30% 30%,var(--surface-2),var(--ink-2));
  border:1px solid var(--line); color:var(--cyan); position:relative; z-index:1;
  box-shadow:0 0 0 6px rgba(10,14,23,.9), 0 0 30px -8px var(--glow-cyan)}
.step h4{font-size:16px; font-weight:700}
.step p{color:var(--muted); font-size:13.5px; font-weight:300; margin-top:5px}
@media(max-width:760px){.path{grid-template-columns:1fr 1fr; gap:34px 16px}.path::before{display:none}}

/* ---------- split block + discord/identity card ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center}
.disc-card{border:1px solid var(--line); border-radius:var(--r-lg); padding:34px;
  background:linear-gradient(160deg,rgba(124,77,255,.12),rgba(91,192,190,.06)); position:relative; overflow:hidden}
.disc-card::after{content:""; position:absolute; width:240px; height:240px; right:-60px; top:-60px;
  background:radial-gradient(circle,var(--glow-cta),transparent 70%); filter:blur(10px)}
.disc-card .row{display:flex; align-items:center; gap:14px; position:relative; z-index:1; padding:12px 0; border-bottom:1px solid var(--line-soft)}
.disc-card .row:last-child{border-bottom:none}
.tag{font-family:var(--latin); font-size:11px; letter-spacing:.12em; color:var(--cyan);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:3px 10px; flex:none}
@media(max-width:820px){.split{grid-template-columns:1fr; gap:30px}}

/* ---------- instructor cards (staggered) ---------- */
.insts{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px}
.inst{border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background:linear-gradient(180deg,var(--surface),var(--ink-2)); transition:transform .4s, border-color .4s, box-shadow .4s; text-decoration:none; color:inherit; display:block}
.inst:nth-child(2){transform:translateY(-26px)}
.inst:hover{transform:translateY(-6px); border-color:var(--cta-2); box-shadow:0 24px 60px -22px var(--glow-cta)}
.inst:nth-child(2):hover{transform:translateY(-32px)}
.inst .face{aspect-ratio:4/5; background:
    radial-gradient(circle at 50% 38%,rgba(91,192,190,.18),transparent 60%),
    linear-gradient(160deg,#1a2238,#0d1322); display:grid; place-items:center; color:var(--muted-2);
  font-family:var(--latin); font-size:12px; letter-spacing:.18em}
.inst .meta{padding:18px}
.inst .meta .nm{font-weight:700; font-size:18px}
.inst .meta .ro{color:var(--cyan); font-size:13px; font-family:var(--latin); letter-spacing:.06em; margin-top:2px}
.inst .meta p{color:var(--muted); font-size:13.5px; font-weight:300; margin-top:10px}
@media(max-width:760px){.insts{grid-template-columns:1fr; gap:18px}.inst:nth-child(2){transform:none}.inst:nth-child(2):hover{transform:translateY(-6px)}}

/* ---------- numbered editorial list (articles / rules) ---------- */
.arts{margin-top:40px; border-top:1px solid var(--line)}
.art{display:grid; grid-template-columns:auto 1fr auto; gap:26px; align-items:center;
  padding:24px 6px; border-bottom:1px solid var(--line-soft); transition:background .3s, padding-left .3s; text-decoration:none; color:inherit}
.art:hover{background:rgba(91,95,255,.05); padding-left:18px}
.art .idx{font-family:var(--latin); font-weight:700; color:var(--muted-2); font-size:14px}
.art h4{font-size:clamp(16px,2vw,21px); font-weight:500}
.art .go{color:var(--cyan); font-family:var(--latin); font-size:13px; letter-spacing:.1em; opacity:0; transition:opacity .3s}
.art:hover .go{opacity:1}
@media(max-width:680px){.art .go{display:none}}

/* ---------- CTA band ---------- */
.cta-band{border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(40px,7vw,72px); text-align:center; position:relative; overflow:hidden;
  background:linear-gradient(160deg,rgba(124,77,255,.10),rgba(91,192,190,.05))}
.cta-band::after{content:""; position:absolute; width:360px; height:360px; left:50%; top:-120px; transform:translateX(-50%);
  background:radial-gradient(circle,var(--glow-cta),transparent 70%); filter:blur(14px); pointer-events:none}
.cta-band h2{font-size:clamp(26px,4vw,46px); font-weight:900; line-height:1.12; letter-spacing:-.01em; position:relative; z-index:1}
.cta-band .lede{color:var(--muted); font-weight:300; margin:18px auto 0; max-width:560px; position:relative; z-index:1}
.cta-band .cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px; position:relative; z-index:1}

/* ---------- status banner (member states) ---------- */
.status-banner{display:flex; align-items:center; gap:18px; flex-wrap:wrap; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:22px 26px; background:linear-gradient(160deg,rgba(91,192,190,.10),rgba(10,14,23,.4))}
.status-dot{width:10px; height:10px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px 2px rgba(91,192,190,.7); flex:none}
.status-banner .pill{font-family:var(--latin); font-size:12px; letter-spacing:.08em; color:var(--cyan); border:1px solid var(--line); border-radius:var(--r-pill); padding:5px 12px}

/* ---------- profile layout (P05) ---------- */
.profile-layout{display:grid; grid-template-columns:340px 1fr; gap:40px; align-items:start}
.profile-card{border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; background:linear-gradient(180deg,var(--surface),var(--ink-2)); position:sticky; top:96px}
.profile-avatar{width:120px; height:120px; border-radius:50%; margin:0 auto; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 35%,rgba(91,192,190,.22),transparent 65%),linear-gradient(160deg,#1a2238,#0d1322);
  border:1px solid var(--line); color:var(--muted-2); font-family:var(--latin); font-size:11px; letter-spacing:.14em; text-align:center}
.profile-title{text-align:center; margin-top:16px; font-size:24px; font-weight:900}
.profile-subtitle{text-align:center; color:var(--cyan); font-family:var(--latin); font-size:13px; letter-spacing:.06em; margin-top:4px}
.profile-socials{display:flex; gap:10px; justify-content:center; margin-top:16px}
.profile-social{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center;
  font-family:var(--latin); font-size:11px; color:var(--muted); transition:border-color .25s,color .25s; text-decoration:none}
.profile-social:hover{border-color:var(--cyan); color:var(--text)}
.profile-stats{display:flex; gap:14px; margin-top:24px; padding-top:22px; border-top:1px solid var(--line-soft)}
.profile-stat{flex:1; text-align:center}
.profile-stat b{display:block; font-family:var(--latin); font-size:26px; font-weight:900; color:var(--cyan)}
.profile-stat span{color:var(--muted); font-size:12.5px}
.profile-about{margin-top:24px; padding-top:22px; border-top:1px solid var(--line-soft)}
.profile-about h3{font-size:15px; font-weight:700}
.profile-about p{color:var(--muted); font-size:14px; font-weight:300; margin-top:8px}
.profile-banner{aspect-ratio:21/9; border-radius:var(--r-lg); border:1px solid var(--line);
  background:radial-gradient(circle at 50% 30%,rgba(124,77,255,.18),transparent 60%),linear-gradient(160deg,#1a2238,#0d1322);
  display:grid; place-items:center; color:var(--muted-2); font-family:var(--latin); font-size:12px; letter-spacing:.16em}
.bio-divider{height:1px; background:linear-gradient(90deg,var(--cyan),transparent); margin:18px 0; max-width:120px}
.bio-list{list-style:none; display:flex; flex-direction:column; gap:12px; margin-top:16px}
.bio-list li{color:var(--muted); font-weight:300; padding-left:20px; position:relative}
.bio-list li::before{content:""; position:absolute; left:0; top:11px; width:7px; height:7px; border-radius:50%; background:var(--cyan)}
.bio-block{margin-top:26px}
.bio-block h3{font-size:16px; font-weight:700}
.bio-block p{margin-top:8px}
@media(max-width:880px){.profile-layout{grid-template-columns:1fr; gap:28px}.profile-card{position:static}}

/* course cards (P05 related) */
.course-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:32px}
.course-card{border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  background:linear-gradient(180deg,var(--surface),var(--ink-2)); text-decoration:none; color:inherit; transition:transform .35s,border-color .35s,box-shadow .35s; display:flex; flex-direction:column}
.course-card:hover{transform:translateY(-4px); border-color:var(--cta-2); box-shadow:0 22px 56px -24px var(--glow-cta)}
.course-thumb{aspect-ratio:16/9; background:radial-gradient(circle at 50% 35%,rgba(91,192,190,.14),transparent 60%),linear-gradient(160deg,#1a2238,#0d1322);
  display:grid; place-items:center; color:var(--muted-2); font-family:var(--latin); font-size:11px; letter-spacing:.14em}
.course-body{padding:22px}
.course-body h3{font-size:19px; font-weight:700}
.course-body p{color:var(--muted); font-weight:300; font-size:14px; margin-top:8px}
.course-meta{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.course-meta span{font-family:var(--latin); font-size:11px; letter-spacing:.06em; color:var(--muted-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px 10px}
.course-link{color:var(--cyan); font-weight:700; font-size:14px; margin-top:16px}
@media(max-width:680px){.course-cards{grid-template-columns:1fr}}

/* ---------- footer ---------- */
body.vta-philosophy-page .wp-site-blocks > footer.wp-block-template-part{position:relative; z-index:2; isolation:isolate; background:#0A0E17}
.vta-philosophy footer{border-top:1px solid var(--line-soft); padding:48px 0 60px; position:relative; z-index:1; margin-top:clamp(60px,9vh,110px)}
.vta-philosophy footer .grid-f{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; align-items:flex-start}
.vta-philosophy footer .muted-links{display:flex; gap:20px; flex-wrap:wrap}
.vta-philosophy footer a{color:var(--muted); text-decoration:none; font-size:13px}
.vta-philosophy footer a:hover{color:var(--text)}
.risk{color:var(--muted-2); font-size:12px; font-weight:300; margin-top:22px; max-width:680px}

.note-tag{position:fixed; bottom:14px; left:14px; z-index:30; font-family:var(--latin);
  font-size:10px; letter-spacing:.12em; color:var(--muted-2); background:rgba(8,11,20,.7);
  border:1px solid var(--line-soft); padding:5px 10px; border-radius:6px; backdrop-filter:blur(6px)}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{transition:none; opacity:1; transform:none}
}