:root{
  --ink:#12161D;
  --paper:#F6F5F1;
  --paper-2:#EDEAE1;
  --gold:#C89B3C;
  --gold-deep:#96742A;
  --gold-soft:#EFDFB8;
  --slate:#5B6472;
  --line:#DDD8CB;
  --green:#3F7D5C;
  --brick:#B24C3C;
  --card-ink:#1B212C;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:'IBM Plex Sans', sans-serif; line-height:1.62; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; overflow-x:hidden;}
a, button{-webkit-tap-highlight-color:transparent;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
h1,h2,h3,.serif{font-family:'Fraunces', serif;}
.mono{font-family:'IBM Plex Mono', monospace;}
.wrap{max-width:1100px; margin:0 auto; padding:0 32px;}
@media (max-width:640px){.wrap{padding:0 20px;}}

nav{position:sticky; top:0; z-index:60; background:rgba(246,245,241,0.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.scroll-progress{position:fixed; top:0; left:0; height:3px; background:var(--gold); width:0%; z-index:70; will-change:width;}
.navrow{display:flex; align-items:center; justify-content:space-between; padding:16px 32px; max-width:1100px; margin:0 auto;}
@media (max-width:640px){.navrow{padding:13px 20px;}}
.brand{display:flex; align-items:baseline; gap:8px; font-family:'Fraunces', serif; font-weight:600; font-size:19px;}
.brand .tag{font-family:'IBM Plex Mono', monospace; font-size:11px; background:var(--ink); color:var(--gold); padding:3px 7px; border-radius:4px; letter-spacing:0.02em;}
.navlinks{display:flex; gap:26px; font-size:13.5px; color:var(--slate);}
.navlinks a{color:inherit; text-decoration:none; padding:6px 0; display:inline-block;}
.navlinks a:active{opacity:0.6;}
@media (min-width:901px){.navlinks a:hover{color:var(--ink);}}
@media (max-width:900px){
  .navlinks{position:absolute; top:100%; left:0; right:0; background:var(--paper); flex-direction:column; gap:0; padding:0 20px; max-height:0; overflow:hidden; opacity:0; transition:max-height 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease; border-bottom:1px solid var(--line);}
  .navlinks.open{max-height:280px; opacity:1; padding:8px 20px 16px;}
  .navlinks a{padding:12px 0; border-bottom:1px solid var(--line); font-size:15px;}
  .navlinks a:last-child{border-bottom:none;}
}
.nav-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:34px; height:34px; background:none; border:none; cursor:pointer; padding:0;}
.nav-toggle span{display:block; width:100%; height:2px; background:var(--ink); border-radius:2px; transition:transform 0.3s ease, opacity 0.3s ease;}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media (max-width:900px){.nav-toggle{display:flex;}}

/* ---------- HERO ---------- */
.hero{padding:80px 0 40px; overflow:hidden;}
@media (max-width:640px){.hero{padding:48px 0 30px;}}
.hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; align-items:center;}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;}}
.kicker{display:flex; align-items:center; gap:10px; margin-bottom:22px;}
.kicker .dot{width:8px; height:8px; border-radius:50%; background:var(--green);}
.kicker span{font-size:13px; color:var(--slate); font-family:'IBM Plex Mono', monospace;}
.hero h1{font-size:clamp(36px,5vw,56px); font-weight:500; line-height:1.08; letter-spacing:-0.015em; margin:0 0 20px;}
.hero h1 em{font-style:italic; font-weight:500; color:var(--gold-deep);}
.hero p.lede{font-size:17.5px; color:var(--slate); max-width:48ch; margin:0 0 28px;}
.hero-stats{display:flex; gap:0; border-top:1px solid var(--line); margin-top:10px; flex-wrap:wrap;}
.hero-stats div{padding:16px 26px 0 0; margin-right:26px; border-right:1px solid var(--line); min-width:0;}
.hero-stats div:last-child{border-right:none;}
.hero-stats strong{display:block; font-family:'Fraunces', serif; font-size:24px; font-weight:500;}
.hero-stats span{font-size:12.5px; color:var(--slate);}
@media (max-width:480px){
  .hero-stats div{padding:14px 16px 0 0; margin-right:12px; flex:1 1 auto;}
  .hero-stats strong{font-size:20px;}
}

.chart-panel{background:var(--card-ink); border-radius:10px; padding:26px 24px 20px; color:var(--paper); position:relative;}
.chart-panel .cp-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
.cp-symbol{font-family:'IBM Plex Mono', monospace; font-size:14px; letter-spacing:0.02em;}
.cp-price{font-family:'Fraunces', serif; font-size:15px; color:var(--green);}
svg.chartline{width:100%; height:150px; display:block;}
.cp-path{fill:none; stroke:var(--gold); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:900; stroke-dashoffset:900; animation:draw 2.2s ease-out forwards 0.3s;}
@media (prefers-reduced-motion:reduce){.cp-path{animation:none; stroke-dashoffset:0;}}
@keyframes draw{to{stroke-dashoffset:0;}}
.cp-fill{opacity:0.14; fill:var(--gold);}
.cp-foot{display:flex; justify-content:space-between; font-size:11.5px; color:#8A93A3; margin-top:6px; font-family:'IBM Plex Mono', monospace;}

/* ---------- INDEX ---------- */
.index{padding:34px 0 18px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.index-title{font-size:12.5px; color:var(--slate); margin-bottom:16px; font-family:'IBM Plex Mono', monospace;}
.index-list{display:grid; grid-template-columns:repeat(4,1fr); gap:0;}
@media (max-width:900px){.index-list{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.index-list{grid-template-columns:1fr;}}
.index-item{display:flex; gap:12px; padding:13px 16px 13px 0; text-decoration:none; color:inherit; min-height:44px; align-items:center;}
.index-num{font-family:'Fraunces', serif; font-size:14px; color:var(--gold-deep); min-width:20px;}
.index-name{font-size:13.8px;}
.index-item:active{opacity:0.6;}
@media (min-width:901px){.index-item:hover .index-name{text-decoration:underline; text-decoration-color:var(--gold);}}

/* ---------- MODULES ---------- */
.module{padding:72px 0; border-bottom:1px solid var(--line); scroll-margin-top:70px;}
.module.tint{background:var(--paper-2);}
.module:last-of-type{border-bottom:none;}
body.js-ready .module{opacity:0; transform:translateY(26px); transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);}
body.js-ready .module.in-view{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion:reduce){body.js-ready .module{opacity:1 !important; transform:none !important; transition:none !important;}}
.module-head{display:flex; align-items:baseline; gap:16px; margin-bottom:28px;}
.module-num{font-family:'Fraunces', serif; font-size:15px; color:var(--gold-deep); border:1px solid var(--gold); border-radius:999px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; flex:none;}
.module h2{font-size:clamp(25px,3.2vw,33px); font-weight:500; margin:0; letter-spacing:-0.01em;}
.module-body{display:grid; grid-template-columns:1.3fr 1fr; gap:46px;}
.module-body.reverse{grid-template-columns:1fr 1.3fr;}
.module-body.reverse .module-side{order:-1;}
.module-body.full{grid-template-columns:1fr;}
@media (max-width:840px){.module-body, .module-body.reverse{grid-template-columns:1fr;}}
.module-text p{margin:0 0 16px; max-width:62ch;}
.module-text ul{margin:0 0 16px; padding-left:20px;}
.module-text li{margin-bottom:8px; max-width:56ch;}
.callout{background:var(--paper-2); border-left:3px solid var(--gold); padding:18px 20px; font-size:14.5px; margin-top:8px;}
.module.tint .callout{background:var(--paper);}
.callout strong{color:var(--gold-deep);}

.side-card{background:var(--card-ink); color:var(--paper); padding:26px 24px; border-radius:8px;}
.side-card h3{font-size:14.5px; color:var(--gold); margin:0 0 14px; font-weight:500; font-family:'IBM Plex Sans', sans-serif;}
.order-row{display:flex; justify-content:space-between; font-size:13.5px; padding:9px 0; border-bottom:1px solid #232A38;}
.order-row:last-child{border-bottom:none;}
.order-row span:first-child{color:#93A0B4;}
.stat{font-family:'Fraunces', serif; font-size:36px; font-weight:500; margin:0 0 4px;}
.stat-label{font-size:12.5px; color:#93A0B4;}

/* ---- MNQ contract ID card ---- */
.id-card{background:linear-gradient(155deg,#1B212C 0%,#12161D 70%); border:1px solid #2B3342; border-radius:14px; padding:0; overflow:hidden; color:var(--paper);}
.id-top{padding:22px 24px 18px; display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid #2B3342;}
.id-top .id-symbol{font-family:'Fraunces', serif; font-size:30px; font-weight:600; letter-spacing:0.01em;}
.id-top .id-name{font-size:12.5px; color:#93A0B4; margin-top:2px;}
.id-badge{font-family:'IBM Plex Mono', monospace; font-size:10.5px; background:var(--gold); color:#1B212C; padding:4px 9px; border-radius:5px; font-weight:600;}
.id-specs{padding:6px 24px 20px;}
.id-row{display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px dashed #2B3342; font-size:13.5px;}
.id-row:last-child{border-bottom:none;}
.id-row .k{color:#93A0B4;}
.id-row .v{font-family:'IBM Plex Mono', monospace; color:var(--paper); text-align:right;}

/* ---- sessions timeline ---- */
.tl-wrap{padding:8px 0 4px;}
.tl-track{position:relative; height:54px; border-radius:8px; overflow:hidden; display:flex; background:#E4E0D3;}
.tl-seg{position:relative; display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:#fff; min-width:0; padding:2px 3px; text-align:center; line-height:1.25; overflow:hidden;}
@media (max-width:520px){.tl-seg{font-size:8.5px; padding:2px;}}
@media (max-width:380px){.tl-seg{font-size:7.5px;}}
.tl-asia{background:#7C8CB0;}
.tl-london{background:var(--gold-deep);}
.tl-ny{background:var(--brick);}
.tl-labels{display:flex; justify-content:space-between; font-size:11px; color:var(--slate); margin-top:8px; font-family:'IBM Plex Mono', monospace;}
.tl-legend{display:flex; gap:22px; margin-top:16px; flex-wrap:wrap;}
.tl-legend div{display:flex; align-items:center; gap:8px; font-size:13px;}
.tl-legend .sw{width:12px; height:12px; border-radius:3px;}

/* ---- P&L calc card ---- */
.pnl-card{background:var(--card-ink); color:var(--paper); border-radius:8px; padding:24px;}
.pnl-row{display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid #232A38; font-size:14px;}
.pnl-row:last-child{border-bottom:none;}
.pnl-op{font-family:'Fraunces', serif; color:var(--gold); font-size:18px; width:20px;}
.pnl-result{font-family:'Fraunces', serif; font-size:22px; margin-top:10px;}
.pnl-result.pos{color:#7FBE9E;}
.pnl-result.neg{color:#D98F80;}

.lossgrid{width:100%; border-collapse:collapse; font-size:14px; margin-top:6px;}
.lossgrid th, .lossgrid td{padding:9px 10px; text-align:left; border-bottom:1px solid var(--line);}
.lossgrid th{color:var(--slate); font-weight:500; font-size:12px; font-family:'IBM Plex Mono', monospace;}
.lossgrid td.num{font-family:'Fraunces', serif; color:var(--brick);}

.traps{list-style:none; margin:0; padding:0;}
.traps li{display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line);}
.traps li:last-child{border-bottom:none;}
.trap-mark{font-family:'Fraunces', serif; font-style:italic; color:var(--brick); font-size:14.5px; flex:none; width:118px;}
.trap-desc{font-size:14px;}
@media (max-width:380px){
  .traps li{flex-direction:column; gap:4px;}
  .trap-mark{width:auto;}
}

.compare{width:100%; border-collapse:collapse; font-size:13.8px;}
.compare th, .compare td{padding:11px 12px; border-bottom:1px solid var(--line); text-align:left;}
.compare th{font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--slate); font-weight:500;}
.compare td.hl{font-family:'Fraunces', serif; color:var(--gold-deep); font-size:15px;}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
@media (max-width:520px){
  .compare, .lossgrid{font-size:12px;}
  .compare th, .compare td, .lossgrid th, .lossgrid td{padding:9px 8px;}
}

.glossary{padding:76px 0; background:var(--card-ink); color:var(--paper);}
.glossary h2{font-size:clamp(26px,3.4vw,34px); font-weight:500; margin:0 0 8px; color:var(--paper);}
.glossary > .wrap > p{color:#93A0B4; margin:0 0 36px; max-width:56ch;}
dl.terms{display:grid; grid-template-columns:1fr 1fr; gap:0 48px;}
@media (max-width:780px){dl.terms{grid-template-columns:1fr;}}
dl.terms div{border-bottom:1px solid #2B3342; padding:16px 0;}
dl.terms dt{font-family:'Fraunces', serif; font-size:16px; margin:0 0 5px; color:var(--gold);}
dl.terms dd{margin:0; font-size:13.8px; color:#B7BECB;}

footer{padding:56px 0 48px;}
.footer-grid{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;}
footer h3{font-size:21px; font-weight:500; margin:0 0 10px; max-width:34ch;}
footer p{color:var(--slate); font-size:14px; max-width:44ch; margin:0;}
.foot-mark{font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--slate);}

/* ---------- QUIZ ---------- */
.quiz{padding:76px 0 20px;}
.quiz h2{font-size:clamp(26px,3.4vw,34px); font-weight:500; margin:0 0 8px;}
.quiz > .wrap > p.qlede{color:var(--slate); margin:0 0 40px; max-width:56ch;}
.quiz-card{background:var(--paper-2); border:1px solid var(--line); border-radius:10px; padding:22px 24px; margin-bottom:16px;}
.quiz-q{display:flex; gap:12px; margin-bottom:15px;}
.quiz-qnum{font-family:'Fraunces', serif; color:var(--gold-deep); font-size:15px; flex:none;}
.quiz-qtext{font-size:15px; font-weight:500; line-height:1.4;}
.quiz-options{display:grid; gap:8px;}
.quiz-option{display:block; width:100%; text-align:left; background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:13px 14px; font-size:13.8px; font-family:'IBM Plex Sans', sans-serif; cursor:pointer; color:var(--ink); transition:background 0.15s, border-color 0.15s, transform 0.1s; min-height:44px;}
.quiz-option:hover:not(.disabled){border-color:var(--gold);}
.quiz-option:active:not(.disabled){transform:scale(0.985);}
.quiz-option.correct{background:#DCEDE3; border-color:var(--green); color:#1F4D37; font-weight:500;}
.quiz-option.incorrect{background:#F5DCD6; border-color:var(--brick); color:#7A2E20;}
.quiz-option.disabled{cursor:default;}
.quiz-scorebar{position:sticky; bottom:18px; background:var(--card-ink); color:var(--paper); padding:18px 26px; border-radius:10px; display:flex; justify-content:space-between; align-items:center; margin:34px 0 60px; box-shadow:0 8px 24px rgba(0,0,0,0.18);}
.quiz-scorebar .label{font-size:13px; color:#93A0B4;}
.quiz-scorebar .score{font-family:'Fraunces', serif; font-size:24px; color:var(--gold);}