/* =====================================================================
   FUTURES TRADING PAGE  |  Crypto Marg style
   Works with your existing HTML and JS (no changes needed there).
   Cards created by JS:  .question-card > h2 + p + a
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Figtree:wght@400;500;600;700&display=swap");

/* ===== 1. COLOURS AND FONTS (change here only) ===== */
:root{
  --paper:#F2F6F3;        /* page background */
  --card:#FFFFFF;
  --ink:#1A1A1A;          /* main text */
  --ink-2:#4A5650;        /* paragraph text */
  --line:#D5E0DA;
  --emerald:#1FBA6B;      /* main accent */
  --emerald-deep:#0F7A4C;
  --night:#1A1A1A;        /* dark banner and buttons */
  --mist:#9FB5A9;
  --red:#E5484D;
  --radius:18px;
  --display:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ===== 2. BASE ===== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--emerald);color:var(--night)}
.container{max-width:880px;width:92%;margin:0 auto;padding:36px 0 90px}

/* ===== 3. TITLE BANNER (your <h1>) ===== */
h1{
  position:relative;
  overflow:hidden;
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.1rem,6vw,3.4rem);
  line-height:1.08;
  letter-spacing:-.02em;
  color:#fff;
  border-radius:26px;
  padding:92px 38px 42px;
  margin-bottom:30px;
  background-color:var(--night);
  background-image:
    /* green glow */
    radial-gradient(circle at 88% 12%,rgba(31,186,107,.38),transparent 46%),
    /* candlestick chart decoration (wick then body) */
    linear-gradient(rgba(31,186,107,.7),rgba(31,186,107,.7)),
    linear-gradient(rgba(31,186,107,.7),rgba(31,186,107,.7)),
    linear-gradient(rgba(229,72,77,.7),rgba(229,72,77,.7)),
    linear-gradient(rgba(229,72,77,.7),rgba(229,72,77,.7)),
    linear-gradient(rgba(31,186,107,.7),rgba(31,186,107,.7)),
    linear-gradient(rgba(31,186,107,.7),rgba(31,186,107,.7)),
    linear-gradient(rgba(229,72,77,.7),rgba(229,72,77,.7)),
    linear-gradient(rgba(229,72,77,.7),rgba(229,72,77,.7)),
    linear-gradient(rgba(31,186,107,.7),rgba(31,186,107,.7)),
    linear-gradient(rgba(31,186,107,.7),rgba(31,186,107,.7));
  background-repeat:no-repeat;
  background-size:100% 100%,
    2px 70px,12px 34px,
    2px 60px,12px 30px,
    2px 90px,12px 52px,
    2px 76px,12px 40px,
    2px 120px,12px 70px;
  background-position:0 0,
    right 190px bottom 30px,right 185px bottom 48px,
    right 150px bottom 38px,right 145px bottom 52px,
    right 110px bottom 30px,right 105px bottom 46px,
    right 70px bottom 44px,right 65px bottom 60px,
    right 30px bottom 26px,right 25px bottom 54px;
}
h1::before{
  content:"FUTURES TRADING SERIES";
  position:absolute;top:34px;left:38px;
  font:700 .74rem var(--body);
  letter-spacing:.14em;
  color:var(--night);
  background:var(--emerald);
  padding:6px 14px;
  border-radius:999px;
}
h1::after{
  content:"Learn step by step: basics, leverage, risk, strategy, and trading psychology.";
  display:block;
  max-width:30ch;
  margin-top:16px;
  font:500 1.02rem/1.55 var(--body);
  letter-spacing:0;
  color:var(--mist);
}

/* ===== 4. RISK NOTICE (shown above the first topic) ===== */
#question-list{position:relative;padding-left:44px}
#question-list::before{
  content:"Educational content only. This is not financial advice. Futures trading is high risk and you can lose money.";
  display:block;
  margin:0 0 28px -44px;
  padding:14px 18px;
  background:#FFF4D6;
  border:1px solid #F3D88B;
  border-left:6px solid #F5B301;
  border-radius:12px;
  font-size:.95rem;
  font-weight:600;
  line-height:1.55;
  color:#6A4B00;
}

/* ===== 5. TOPIC CARDS ===== */
.question-card{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 30px 26px;
  margin-bottom:22px;
  box-shadow:0 12px 30px -20px rgba(26,26,26,.35);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.question-card:hover{
  transform:translateY(-3px);
  border-color:var(--emerald);
  box-shadow:0 18px 36px -20px rgba(15,122,76,.45);
}

/* timeline dot and line on the left of every card */
.question-card::before{
  content:"";
  position:absolute;
  left:-44px;top:26px;
  width:22px;height:22px;
  border-radius:50%;
  background:var(--paper);
  border:5px solid var(--emerald);
  box-shadow:0 0 0 5px var(--paper);
  z-index:2;
}
.question-card::after{
  content:"";
  position:absolute;
  left:-35px;top:48px;bottom:-48px;
  width:4px;
  border-radius:4px;
  background:linear-gradient(var(--emerald),var(--emerald-deep));
  z-index:1;
}
.question-card:last-child::after{display:none}

/* topic title */
.question-card h2{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1.2rem,2.7vw,1.5rem);
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--ink);
  margin-bottom:14px;
}

/* topic information.  pre-line keeps your line breaks and paragraphs */
.question-card p{
  white-space:pre-line;
  overflow-wrap:break-word;
  color:var(--ink-2);
  font-size:1rem;
  line-height:1.85;
  max-width:68ch;
  margin-bottom:22px;
}

/* video link as a button */
.question-card a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:.95rem;
  color:#fff;
  background:var(--night);
  padding:11px 20px 11px 16px;
  border-radius:999px;
  text-decoration:none;
  transition:background .2s ease,transform .2s ease;
}
.question-card a::before{
  content:"";
  width:0;height:0;
  border-left:10px solid var(--emerald);
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
}
.question-card a:hover{background:var(--emerald-deep);transform:translateX(3px)}
.question-card a:hover::before{border-left-color:#fff}
.question-card a:focus-visible{outline:3px solid var(--emerald);outline-offset:3px}

/* ===== 6. SPECIAL CARDS ===== */
/* first topic: dark intro card */
.question-card:first-child{background:var(--night);border-color:var(--night)}
.question-card:first-child h2{color:#fff}
.question-card:first-child p{color:#D4DED8}
.question-card:first-child a{background:var(--emerald);color:var(--night)}
.question-card:first-child a::before{border-left-color:var(--night)}
.question-card:first-child a:hover{background:#fff}

/* last topic: green finish card */
.question-card:last-child{background:linear-gradient(135deg,#DDF4E7,#FFFFFF 70%);border-color:var(--emerald)}
.question-card:last-child h2{color:var(--emerald-deep)}

/* ===== 7. MOBILE ===== */
@media (max-width:640px){
  body{font-size:16px}
  .container{padding:22px 0 70px}
  h1{padding:84px 22px 30px;border-radius:20px;background-size:100% 100%,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0}
  h1::before{left:22px;top:26px}
  #question-list{padding-left:30px}
  #question-list::before{margin-left:-30px}
  .question-card{padding:22px 20px 20px}
  .question-card::before{left:-30px;top:22px;width:18px;height:18px;border-width:4px;box-shadow:0 0 0 4px var(--paper)}
  .question-card::after{left:-22px;top:40px;bottom:-44px;width:3px}
}

/* ===== 8. PRINT AND MOTION ===== */
@media print{
  body{background:#fff}
  h1{background:none;color:#000;padding:0}
  h1::before,h1::after,#question-list::before,.question-card::before,.question-card::after{display:none}
  #question-list{padding-left:0}
  .question-card{box-shadow:none;break-inside:avoid;background:#fff!important;color:#000}
  .question-card h2,.question-card p{color:#000!important}
  .question-card a{background:none;color:#000;padding:0}
  .question-card a::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}