/* Shared styles reused by index.html, demo.html and sid-curriculumn.html */

/* ===== index.html ===== */
:root{
    --bg-1:#EEF1F8;
    --bg-2:#E3E8F7;
    --bg-3:#F6F4FC;
    --glass:rgba(255,255,255,0.52);
    --glass-strong:rgba(255,255,255,0.78);
    --glass-border:rgba(255,255,255,0.9);
    --ink:#1B2140;
    --ink-soft:#5B6280;
    --ink-faint:#8A90AC;
    --indigo:#4C5FD5;
    --indigo-deep:#333F99;
    --violet:#7C5CD1;
    --amber:#E8A33D;
    --amber-deep:#C97F1F;
    --line:rgba(27,33,64,0.09);
    --shadow-sm: 0 4px 20px rgba(51,63,153,0.08);
    --shadow-md: 0 14px 40px rgba(51,63,153,0.14);
    --shadow-lg: 0 26px 70px rgba(51,63,153,0.20);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Inter',sans-serif;
    color:var(--ink);
    background:
      radial-gradient(1100px 700px at 12% -8%, #F4EFFB 0%, transparent 60%),
      radial-gradient(900px 600px at 100% 10%, #E7F0FB 0%, transparent 55%),
      linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 45%, var(--bg-3) 100%);
    min-height:100vh;
    overflow-x:hidden;
  }
  .mono{font-family:'JetBrains Mono',monospace;}
  .display{font-family:'Space Grotesk',sans-serif;}

  /* utility */
  .wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
  .eyebrow{
    font-family:'JetBrains Mono',monospace;
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--indigo-deep);
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:500;
  }
  .eyebrow::before{
    content:"";
    width:6px;height:6px;border-radius:50%;
    background:var(--amber);
    box-shadow:0 0 0 4px rgba(232,163,61,0.18);
  }
  .glass{
    background:var(--glass);
    border:1px solid var(--glass-border);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    border-radius:22px;
    box-shadow:var(--shadow-sm);
  }
  section{position:relative;padding:120px 0;}
  h1,h2,h3{font-family:'Space Grotesk',sans-serif;letter-spacing:-0.01em;}

  /* reveal on scroll */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity 0.8s ease, transform 0.8s ease;}
  .reveal.in{opacity:1;transform:translateY(0);}

  /* ============ NAV ============ */
  nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    padding:18px 28px;
  }
  .nav-inner{
    max-width:1180px;margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 22px;
    background:var(--glass-strong);
    border:1px solid var(--glass-border);
    backdrop-filter:blur(20px) saturate(150%);
    -webkit-backdrop-filter:blur(20px) saturate(150%);
    border-radius:100px;
    box-shadow:var(--shadow-sm);
  }
  .logo{
    display:flex;align-items:center;gap:10px;
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;font-size:18px;color:var(--ink);
    text-decoration: none;
  }
  .logo-mark{
    width:30px;height:30px;border-radius:8px;
    background:linear-gradient(135deg,var(--indigo),var(--violet));
    position:relative;
    box-shadow:0 4px 14px rgba(76,95,213,0.35);
  }
  .logo-mark::after{
    content:"";position:absolute;inset:6px;
    border:1.5px solid rgba(255,255,255,0.85);border-radius:4px;
  }
  .nav-links{display:flex;gap:30px;list-style:none;}
  .nav-links a{
    color:var(--ink-soft);text-decoration:none;font-size:14px;font-weight:500;
    transition:color 0.2s;
  }
  .nav-links a:hover{color:var(--indigo-deep);}
  .nav-cta{
    background:var(--ink);color:#fff;border:none;
    padding:10px 20px;border-radius:100px;font-size:14px;font-weight:600;
    font-family:'Inter',sans-serif;cursor:pointer;
    transition:transform 0.2s, box-shadow 0.2s;
  }
  .nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(27,33,64,0.25);}
  @media(max-width:860px){.nav-links{display:none;}}

  .go-top{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:150;
    text-decoration:none;
    background:linear-gradient(120deg,var(--indigo),var(--indigo-deep));
    color:#fff;
    border-radius:999px;
    padding:10px 16px;
    font-family:'JetBrains Mono',monospace;
    font-size:12px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    box-shadow:0 12px 30px rgba(76,95,213,0.35);
    transition:transform 0.2s, box-shadow 0.2s;
  }
  .go-top:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(76,95,213,0.45);}

  /* ============ HERO ============ */
  .hero{
    padding:190px 0 120px;
    position:relative;
    overflow:hidden;
  }
  .hero-graph{
    position:absolute;inset:0;z-index:0;pointer-events:none;
    opacity:0.55;
  }
  .hero-inner{position:relative;z-index:2;text-align:center;}
  .hero h1{
    font-size:clamp(42px,7vw,88px);
    font-weight:700;
    line-height:1.02;
    color:var(--ink);
    margin:22px 0 18px;
  }
  .hero h1 span{
    background:linear-gradient(100deg,var(--indigo-deep) 10%, var(--violet) 55%, var(--amber-deep) 95%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero-sub{
    font-size:18px;color:var(--ink-soft);max-width:640px;margin:0 auto 40px;
    line-height:1.65;font-weight:400;
  }
  .hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:64px;}
  .btn-primary{
    background:linear-gradient(120deg,var(--indigo),var(--indigo-deep));
    color:#fff;border:none;padding:16px 30px;border-radius:100px;
    font-size:15px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;
    box-shadow:0 12px 30px rgba(76,95,213,0.35);
    transition:transform 0.2s, box-shadow 0.2s;
    text-decoration:none;
  }
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(76,95,213,0.45);}
  .btn-ghost{
    background:var(--glass-strong);color:var(--ink);border:1px solid var(--glass-border);
    padding:16px 30px;border-radius:100px;font-size:15px;font-weight:600;
    cursor:pointer;font-family:'Inter',sans-serif;backdrop-filter:blur(14px);
    transition:transform 0.2s, background 0.2s;
    text-decoration:none;
  }
  .btn-ghost:hover{transform:translateY(-2px);background:#fff;}

  .hero-stats{
    display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
    max-width:920px;margin:0 auto;
  }
  .stat-card{
    padding:24px 18px;text-align:center;
  }
  .stat-num{
    font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:700;
    background:linear-gradient(120deg,var(--indigo-deep),var(--violet));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .stat-label{font-size:12.5px;color:var(--ink-soft);margin-top:6px;line-height:1.4;}
  @media(max-width:760px){.hero-stats{grid-template-columns:repeat(2,1fr);}}

  /* ============ SECTION HEAD ============ */
  .sec-head{max-width:640px;margin-bottom:56px;}
  .sec-head h2{font-size:clamp(28px,4vw,42px);margin-top:14px;font-weight:600;}
  .sec-head p{color:var(--ink-soft);margin-top:14px;font-size:17px;line-height:1.65;}

  /* ============ PREREQ ============ */
  .prereq-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  }
  .prereq-card{
    padding:26px 24px;display:flex;gap:14px;align-items:flex-start;
    transition:transform 0.3s, box-shadow 0.3s;
  }
  .prereq-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
  .prereq-icon{
    width:38px;height:38px;flex:none;border-radius:10px;
    background:linear-gradient(135deg,rgba(76,95,213,0.15),rgba(124,92,209,0.15));
    display:flex;align-items:center;justify-content:center;
    color:var(--indigo-deep);font-weight:700;font-size:15px;
    font-family:'Space Grotesk',sans-serif;
  }
  .prereq-card p{font-size:15.5px;color:var(--ink);line-height:1.55;font-weight:500;}
  .prereq-note{
    margin-top:28px;padding:22px 26px;border-radius:18px;
    background:linear-gradient(120deg, rgba(232,163,61,0.12), rgba(124,92,209,0.10));
    border:1px solid rgba(232,163,61,0.25);
    font-size:16.5px;color:var(--ink);font-style:italic;line-height:1.6;
  }
  @media(max-width:900px){.prereq-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:600px){.prereq-grid{grid-template-columns:1fr;}}

  /* ============ PATH / SIGNATURE STAIRCASE ============ */
  .path-section{padding-top:60px;}
  .staircase{display:flex;flex-direction:column;gap:22px;}
  .tier{
    position:relative;
    padding:34px 36px 34px;
    border-radius:24px;
    overflow:hidden;
  }
  .tier-01{background:linear-gradient(135deg, rgba(76,95,213,0.08), rgba(255,255,255,0.55));border:1px solid rgba(76,95,213,0.18);}
  .tier-02{background:linear-gradient(135deg, rgba(124,92,209,0.08), rgba(255,255,255,0.55));border:1px solid rgba(124,92,209,0.18);}
  .tier-03{background:linear-gradient(135deg, rgba(232,163,61,0.10), rgba(255,255,255,0.55));border:1px solid rgba(232,163,61,0.22);}
  .tier::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  }
  .tier-01::before{background:var(--indigo);}
  .tier-02::before{background:var(--violet);}
  .tier-03::before{background:var(--amber);}

  .tier-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px;}
  .tier-index{
    font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;letter-spacing:0.08em;
    padding:6px 15px;border-radius:100px;color:#fff;
  }
  .tier-01 .tier-index{background:linear-gradient(120deg,var(--indigo),var(--indigo-deep));box-shadow:0 6px 16px rgba(76,95,213,0.32);}
  .tier-02 .tier-index{background:linear-gradient(120deg,var(--violet),#5C3FBE);box-shadow:0 6px 16px rgba(124,92,209,0.32);}
  .tier-03 .tier-index{background:linear-gradient(120deg,var(--amber),var(--amber-deep));box-shadow:0 6px 16px rgba(232,163,61,0.30);}
  .tier-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:27px;}
  .tier-01 .tier-name{color:var(--indigo-deep);}
  .tier-02 .tier-name{color:var(--violet);}
  .tier-03 .tier-name{color:var(--amber-deep);}
  .tier-tag{font-size:15px;color:var(--ink-soft);}
  .tier-outcome{font-size:16.5px;line-height:1.6;color:var(--ink);margin:6px 0 22px;max-width:820px;}
  .tier-projects{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px;}
  .proj-chip{
    padding:8px 14px;border-radius:100px;font-size:13px;font-weight:600;
    background:rgba(255,255,255,0.75);border:1px solid var(--line);
    display:flex;align-items:center;gap:8px;
  }
  .diff-bar{width:44px;height:4px;border-radius:4px;background:var(--line);overflow:hidden;position:relative;}
  .diff-fill{position:absolute;left:0;top:0;height:100%;border-radius:4px;}
  .tier-01 .diff-fill{background:var(--indigo);}
  .tier-02 .diff-fill{background:var(--violet);}
  .tier-03 .diff-fill{background:var(--amber);}

  /* lessons - knowledge content */
  .lessons-label{
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;
    color:var(--ink-faint);margin-bottom:16px;
  }
  .lessons-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:16px;
  }
  .lesson{
    padding:18px 20px;border-radius:16px;
    background:rgba(255,255,255,0.62);border:1px solid var(--glass-border);
  }
  .lesson-title{
    font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;color:var(--ink);
    margin-bottom:10px;display:flex;align-items:baseline;gap:8px;
  }
  .lesson-no{
    font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;flex:none;
  }
  .tier-01 .lesson-no{color:var(--indigo-deep);}
  .tier-02 .lesson-no{color:var(--violet);}
  .lesson-desc{font-size:15px;color:var(--ink-soft);line-height:1.55;}
  .lesson-adds{margin-top:10px;display:flex;flex-direction:column;gap:6px;}
  .lesson-add{
    font-size:14px;color:var(--ink);line-height:1.5;display:flex;gap:7px;align-items:flex-start;
  }
  .lesson-add::before{
    content:"+";font-family:'JetBrains Mono',monospace;font-weight:700;flex:none;
  }
  .tier-01 .lesson-add::before{color:var(--indigo);}
  .tier-02 .lesson-add::before{color:var(--violet);}
  .lesson-add a{color:inherit;text-decoration:underline;text-decoration-color:var(--ink-faint);text-underline-offset:2px;}
  .lesson.bonus{border-style:dashed;background:rgba(255,255,255,0.4);}
  .bonus-tag{
    font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:0.08em;
    padding:2px 7px;border-radius:100px;background:rgba(232,163,61,0.2);color:var(--amber-deep);font-weight:600;
  }

  .docs-row{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px;}
  .doc-chip{
    font-size:12.3px;padding:6px 12px;border-radius:8px;
    background:rgba(27,33,64,0.05);color:var(--ink-soft);font-weight:500;
  }
  .coming-soon-badge{
    display:inline-block;font-size:11px;font-family:'JetBrains Mono',monospace;
    padding:3px 9px;border-radius:100px;background:rgba(232,163,61,0.18);color:var(--amber-deep);
    letter-spacing:0.06em;vertical-align:middle;
  }
  @media(max-width:760px){
    .tier{padding:28px 22px 28px;}
    .lessons-grid{grid-template-columns:1fr;}
  }

  /* ============ PRICING CARDS ============ */
  .pricing-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
    align-items:stretch;
  }
  .price-card{
    position:relative;
    padding:38px 32px 34px;
    border-radius:26px;
    background:var(--glass-strong);
    border:1px solid var(--glass-border);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    box-shadow:var(--shadow-sm);
    display:flex;flex-direction:column;
    transition:transform 0.35s ease, box-shadow 0.35s ease;
  }
  .price-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
  .price-card.featured{
    border:1.5px solid var(--violet);
    box-shadow:0 0 0 1px rgba(124,92,209,0.15), 0 24px 60px rgba(124,92,209,0.22);
    transform:translateY(-10px) scale(1.02);
    background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.75));
  }
  .price-card.featured:hover{transform:translateY(-14px) scale(1.02);}
  .price-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
  .price-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:23px;}
  .card-basic .price-name{color:var(--indigo-deep);}
  .card-pro .price-name{color:var(--violet);}
  .card-advance .price-name{color:var(--amber-deep);}
  .popular-pill{
    font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.06em;
    padding:5px 11px;border-radius:100px;font-weight:600;
    background:linear-gradient(120deg, var(--violet), var(--indigo));
    color:#fff;
  }
  .soon-pill{
    font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.06em;
    padding:5px 11px;border-radius:100px;font-weight:600;
    background:rgba(232,163,61,0.18);color:var(--amber-deep);
  }
  .price-desc{font-size:14px;color:var(--ink-soft);line-height:1.55;min-height:44px;margin-bottom:26px;}
  .price-amount{
    font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:38px;
    display:flex;align-items:baseline;gap:6px;color:var(--ink);margin-bottom:6px;
  }
  .price-amount .per{font-family:'Inter',sans-serif;font-size:15px;font-weight:500;color:var(--ink-faint);}
  .price-fine{font-size:13px;color:var(--ink-soft);line-height:1.5;margin-bottom:26px;}
  .price-cta{
    width:100%;border:none;padding:15px 0;border-radius:100px;
    font-family:'Inter',sans-serif;font-size:15px;font-weight:700;cursor:pointer;
    margin-bottom:30px;transition:transform 0.2s, box-shadow 0.2s;color:#fff;
  }
  .card-basic .price-cta{background:linear-gradient(120deg, var(--indigo), var(--indigo-deep));box-shadow:0 10px 24px rgba(76,95,213,0.30);}
  .card-pro .price-cta{background:linear-gradient(120deg, var(--violet), #5C3FBE);box-shadow:0 10px 24px rgba(124,92,209,0.34);}
  .card-advance .price-cta{background:linear-gradient(120deg, var(--amber), var(--amber-deep));box-shadow:0 10px 24px rgba(232,163,61,0.32);}
  .price-cta:hover{transform:translateY(-2px);}
  .price-features{list-style:none;display:flex;flex-direction:column;gap:13px;margin-top:auto;}
  .price-features li{
    display:flex;align-items:flex-start;gap:10px;font-size:13.8px;color:var(--ink);line-height:1.45;
  }
  .price-features li.dim{color:var(--ink-faint);}
  .price-features li .tick{flex:none;width:17px;height:17px;margin-top:1px;}
  .card-basic .tick{color:var(--indigo-deep);}
  .card-pro .tick{color:var(--violet);}
  .card-advance .tick{color:var(--amber-deep);}
  .price-features li strong{font-weight:600;}
  @media(max-width:960px){
    .pricing-grid{grid-template-columns:1fr;}
    .price-card.featured{transform:none;}
    .price-card.featured:hover{transform:translateY(-6px);}
  }

  /* ============ PROBLEM + SOLUTION shared editorial ============ */
  .arc{display:flex;flex-direction:column;}
  .movement{
    display:grid;grid-template-columns:58px 1fr;gap:26px;
    padding:36px 0;border-top:1px solid var(--line);
  }
  .movement:first-child{border-top:none;padding-top:6px;}
  .mv-num{
    font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:34px;line-height:1;
    color:var(--ink-faint);
  }
  .mv-lead{
    font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:21px;line-height:1.4;
    color:var(--ink);margin-bottom:20px;
  }
  .mv-list{list-style:none;display:flex;flex-direction:column;gap:14px;}
  .mv-list li{
    display:flex;gap:13px;align-items:flex-start;
    font-size:16.5px;line-height:1.6;color:var(--ink-soft);
  }
  .mv-list li .mk{flex:none;width:19px;height:19px;margin-top:3px;color:var(--ink-faint);}

  /* the turn - accent resolution block */
  .movement.turn{
    border-top:none;margin-top:10px;
    background:linear-gradient(135deg, rgba(76,95,213,0.09), rgba(124,92,209,0.11));
    border:1px solid rgba(124,92,209,0.22);
    border-radius:22px;padding:34px 32px;
  }
  .turn .mv-num{
    background:linear-gradient(120deg,var(--indigo-deep),var(--violet));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .turn .mv-lead .hl{
    background:linear-gradient(100deg,var(--indigo-deep),var(--violet));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .turn .mv-list li{color:var(--ink);}
  .turn .mv-list li .mk{color:var(--violet);}
  @media(max-width:640px){
    .movement{grid-template-columns:1fr;gap:12px;}
    .mv-num{font-size:26px;}
    .movement.turn{padding:26px 22px;}
  }

  /* ============ SOLUTION ============ */
  .solution-section{padding-top:60px;}
  .solution-lead{
    font-size:18px;color:var(--ink-soft);line-height:1.75;max-width:760px;margin-bottom:20px;
  }
  .solution-lead strong{color:var(--ink);font-weight:600;}
  .solution-lead:last-of-type{margin-bottom:44px;}
  .learn-label{
    font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:0.12em;text-transform:uppercase;
    color:var(--indigo-deep);margin-bottom:22px;
  }
  .learn-list{display:flex;flex-direction:column;gap:0;}
  .learn-item{
    display:grid;grid-template-columns:52px 1fr;gap:22px;
    padding:26px 0;border-top:1px solid var(--line);
  }
  .learn-item:first-child{border-top:none;}
  .learn-no{
    font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px;line-height:1;
    background:linear-gradient(120deg,var(--indigo),var(--violet));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .learn-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:19px;color:var(--ink);margin-bottom:8px;line-height:1.35;}
  .learn-desc{font-size:16px;color:var(--ink-soft);line-height:1.6;}
  @media(max-width:640px){
    .learn-item{grid-template-columns:40px 1fr;gap:14px;}
    .learn-no{font-size:20px;}
  }

  /* ============ CTA / FOOTER ============ */
  .cta-section{padding:100px 0 60px;}
  .cta-card{
    padding:64px 48px;text-align:center;border-radius:32px;
    background:linear-gradient(135deg, rgba(76,95,213,0.10), rgba(232,163,61,0.10));
    border:1px solid var(--glass-border);
  }
  .cta-card h2{font-size:clamp(26px,4vw,38px);margin-bottom:16px;}
  .cta-card p{color:var(--ink-soft);max-width:520px;margin:0 auto 32px;line-height:1.6;}

  footer{padding:40px 0 60px;text-align:center;}
  footer p{font-size:13px;color:var(--ink-faint);}

  /* ============ MODAL ============ */
  .modal-overlay{
    position:fixed;inset:0;z-index:200;
    background:rgba(27,33,64,0.55);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    display:flex;align-items:center;justify-content:center;padding:20px;
    opacity:0;pointer-events:none;transition:opacity 0.28s ease;
  }
  .modal-overlay.open{opacity:1;pointer-events:all;}
  .modal-box{
    width:min(1180px, calc(100vw - 32px));
    max-width:1180px;
    min-height:calc(100vh - 40px);
    background:var(--glass-strong);
    border:1px solid var(--glass-border);
    border-radius:28px;
    box-shadow:var(--shadow-lg);
    padding:34px;
    position:relative;
    transform:translateY(18px) scale(0.98);
    transition:transform 0.28s ease;
    max-height:calc(100vh - 40px);
    overflow:hidden;
  }
  .modal-overlay.open .modal-box{transform:translateY(0) scale(1);}
  .modal-layout{
    display:grid;
    grid-template-columns:minmax(0, 1.2fr) minmax(280px, 360px);
    gap:26px;
    height:100%;
    min-height:0;
  }
  .modal-form-panel,
  .modal-payment-panel{
    min-width:0;
  }
  .modal-form-panel{
    display:flex;
    flex-direction:column;
    min-height:0;
    overflow:auto;
    padding-right:4px;
  }
  .modal-payment-panel{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:18px;
    padding:26px;
    border-radius:24px;
    background:linear-gradient(135deg, rgba(76,95,213,0.10), rgba(255,255,255,0.72));
    border:1px solid rgba(76,95,213,0.16);
    box-shadow:var(--shadow-sm);
  }
  .payment-title{
    font-family:'Space Grotesk',sans-serif;
    font-size:28px;
    line-height:1.1;
    margin:10px 0 10px;
    color:var(--ink);
  }
  .payment-copy{
    color:var(--ink-soft);
    font-size:15px;
    line-height:1.65;
    margin:0;
  }
  .payment-qr-card{
    padding:18px;
    border-radius:22px;
    background:rgba(255,255,255,0.82);
    border:1px solid rgba(27,33,64,0.08);
    box-shadow:0 12px 30px rgba(51,63,153,0.08);
  }
  .payment-qr-card img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:auto;
    object-fit:contain;
    border-radius:16px;
  }
  .payment-meta{
    display:grid;
    gap:10px;
    list-style:none;
    margin:0;
    padding:0;
  }
  .payment-meta li{
    display:flex;
    gap:10px;
    align-items:flex-start;
    color:var(--ink);
    font-size:14px;
    line-height:1.55;
  }
  .payment-meta strong{
    min-width:88px;
    color:var(--indigo-deep);
  }
  #paymentAmount{
    font-family:'Space Grotesk',sans-serif;
    font-size:24px;
    line-height:1.1;
    font-weight:700;
    color:var(--indigo-deep);
  }
  .modal-close{
    position:absolute;top:18px;right:18px;
    width:32px;height:32px;border-radius:50%;border:none;cursor:pointer;
    background:rgba(27,33,64,0.08);color:var(--ink-soft);
    display:flex;align-items:center;justify-content:center;
    font-size:18px;line-height:1;
    transition:background 0.2s;
  }
  .modal-close:hover{background:rgba(27,33,64,0.15);}
  .modal-title{
    font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:24px;
    color:var(--ink);margin:12px 0 6px;
  }
  .modal-sub{font-size:14px;color:var(--ink-soft);margin-bottom:28px;line-height:1.5;}
  .form-group{margin-bottom:16px;}
  .form-group label{
    display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);
    margin-bottom:6px;letter-spacing:0.03em;
  }
  .form-group input,
  .form-group select,
  .form-group textarea{
    width:100%;padding:12px 16px;
    border:1.5px solid rgba(27,33,64,0.14);
    border-radius:6px;
    font-family:'Inter',sans-serif;font-size:15px;color:var(--ink);
    background:rgba(255,255,255,0.8);
    outline:none;transition:border-color 0.2s,box-shadow 0.2s;
    resize:none;
  }
  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus{
    border-color:var(--indigo);
    box-shadow:0 0 0 3px rgba(76,95,213,0.12);
  }
  .form-group select{
    appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%),linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%);
    background-position:calc(100% - 20px) calc(50% - 4px),calc(100% - 14px) calc(50% - 4px);
    background-size:6px 6px,6px 6px;
    background-repeat:no-repeat;
    padding-right:44px;
  }
  .form-group textarea{height:90px;}
  .captcha-error{
    margin-top:8px;
    min-height:18px;
    color:#B32525;
    font-size:13px;
    line-height:1.4;
  }
  .form-submit{
    width:100%;border:none;padding:16px 0;border-radius:100px;
    background:linear-gradient(120deg,var(--indigo),var(--indigo-deep));
    color:#fff;font-family:'Inter',sans-serif;font-size:15px;font-weight:700;
    cursor:pointer;margin-top:6px;
    box-shadow:0 10px 28px rgba(76,95,213,0.32);
    transition:transform 0.2s,box-shadow 0.2s,opacity 0.2s;
  }
  .form-submit:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(76,95,213,0.40);}
  .form-submit:disabled{opacity:0.65;cursor:not-allowed;transform:none;}
  .modal-success{
    display:none;text-align:center;padding:24px 0 8px;
  }
  .modal-success .success-icon{
    width:56px;height:56px;border-radius:50%;
    background:linear-gradient(135deg,var(--indigo),var(--violet));
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 18px;
    box-shadow:0 8px 24px rgba(76,95,213,0.30);
  }
  .modal-success h3{font-family:'Space Grotesk',sans-serif;font-size:21px;font-weight:700;color:var(--ink);margin-bottom:8px;}
  .modal-success p{font-size:15px;color:var(--ink-soft);line-height:1.6;}
  @media(max-width:560px){
    .modal-box{width:calc(100vw - 20px);min-height:auto;max-height:calc(100vh - 20px);padding:22px 16px 18px;border-radius:22px;overflow:auto;}
    .modal-title{font-size:20px;}
  }

  /* ============ DEMO PAGE ============ */
  .library-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .library-thumb-btn {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 10px;
    cursor: zoom-in;
    margin-bottom: 14px;
  }
  .library-thumb-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
  }
  .library-desc {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.55;
    font-size: 14px;
  }
  .library-card .price-action {
    margin-top: auto;
    padding-top: 12px;
  }
  .library-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 1.2;
  }
  .image-modal {
    position: fixed;
    inset: 0;
    background: rgba(7, 9, 18, 0.88);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
  }
  .image-modal.is-open {
    display: flex;
  }
  .image-modal-content {
    position: relative;
    max-width: min(92vw, 1200px);
    max-height: 92vh;
  }
  .image-modal-content img {
    display: block;
    max-width: 100%;
    max-height: 92vh;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  }
  .image-modal-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    color: #111;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .contact-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(12, 18, 28, 0.56);
    backdrop-filter: blur(2px);
    z-index: 10000;
    padding: 18px;
  }
  .contact-modal.is-open {
    display: flex;
  }
  .contact-modal-card {
    width: min(560px, 94vw);
    background: var(--glass-strong);
    border: 1px solid var(--glass-border);
    border-radius: 28px;
    box-shadow: var(--shadow-lg);
    padding: 34px;
    position: relative;
    transform: translateY(18px) scale(0.98);
    transition: transform 0.28s ease;
    max-height: calc(100vh - 36px);
    overflow: auto;
  }
  .contact-modal.is-open .contact-modal-card {
    transform: translateY(0) scale(1);
  }
  .contact-modal-title {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;
    font-family:'Space Grotesk',sans-serif;
  }
  .contact-modal-text {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.6;
    font-size: 15px;
  }
  .contact-modal-actions {
    margin-top: 16px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .contact-modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 100px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    border: none;
    cursor: pointer;
  }
  .contact-modal-btn.primary {
    background: linear-gradient(120deg, var(--indigo), var(--indigo-deep));
    color: #fff;
    box-shadow: 0 10px 28px rgba(76,95,213,0.32);
  }
  .contact-modal-btn.ghost {
    background: rgba(76, 95, 213, 0.1);
    color: var(--indigo-deep);
  }
  .contact-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: rgba(27,33,64,0.08);
    color: var(--ink-soft);
    font-size: 16px;
    cursor: pointer;
  }
  .floating-form {
    margin-top: 14px;
    display: grid;
    gap: 10px;
  }
  .floating-form .field {
    display: grid;
    gap: 6px;
  }
  .floating-form label {
    font-size: 13px;
    font-weight: 600;
    color: #1e2a3b;
  }
  .floating-form input,
  .floating-form select,
  .floating-form textarea {
    width: 100%;
    border: 1.5px solid rgba(27,33,64,0.14);
    border-radius: 6px;
    padding: 12px 16px;
    font: inherit;
    color: var(--ink);
    background: rgba(255,255,255,0.8);
    outline:none;
    transition:border-color 0.2s,box-shadow 0.2s;
  }
  .floating-form input:focus,
  .floating-form select:focus,
  .floating-form textarea:focus{
    border-color:var(--indigo);
    box-shadow:0 0 0 3px rgba(76,95,213,0.12);
  }
  .floating-form textarea {
    min-height: 90px;
    resize: none;
  }
  .floating-form-note {
    margin: 2px 0 0;
    color: var(--ink-faint);
    font-size: 12px;
    line-height: 1.5;
  }
  .floating-form-success {
    display: none;
    margin-top: 10px;
    border-radius: 10px;
    background: #e8f8ef;
    border: 1px solid #b8e7ca;
    color: #1f6b3d;
    padding: 9px 11px;
    font-size: 13px;
    line-height: 1.45;
  }
  .assistant-list-wrap {
    width: 100%;
    display: grid;
    gap: 10px;
  }
  .assistant-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(17, 24, 39, 0.1);
    box-shadow: 0 8px 22px rgba(17, 24, 39, 0.08);
    text-decoration: none;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
  }
  .assistant-item:hover {
    transform: translateY(-1px);
    border-color: rgba(17, 24, 39, 0.24);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 28px rgba(17, 24, 39, 0.12);
  }
  .assistant-avatar {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    flex: 0 0 auto;
  }
  .assistant-body {
    min-width: 0;
  }
  .assistant-title {
    color: #1b2430;
    font-size: 15px;
    font-weight: 550;
    line-height: 1.3;
    margin-bottom: 2px;
  }
  .assistant-desc {
    color: #5a6473;
    font-size: 13px;
    line-height: 1.38;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  @media (max-width: 960px) {
    .library-grid {
      grid-template-columns: 1fr;
    }
    .assistant-item {
      padding: 11px 12px;
    }
    .assistant-title {
      font-size: 14px;
    }
    .assistant-desc {
      font-size: 12px;
    }
  }

  @media(max-width:900px){
    .modal-box{min-height:auto;max-height:calc(100vh - 24px);overflow:auto;}
    .modal-layout{grid-template-columns:1fr;}
    .modal-payment-panel{order:-1;}
  }

  /* ============ TRAINER ============ */
  .trainer-card{
    display:grid;grid-template-columns:280px 1fr;gap:56px;
    padding:48px 48px 44px;border-radius:28px;
    align-items:start;
  }
  .trainer-portrait{
    position:relative;
  }
  .trainer-portrait img{
    width:220px;
    height:220px;
    border-radius:50%;
    object-fit:cover;
    aspect-ratio:1/1;
    display:block;
    margin:0 auto;
    box-shadow:var(--shadow-md);
  }
  .trainer-info{min-width:0;}
  .trainer-name{
    font-family:'Space Grotesk',sans-serif;font-weight:700;
    font-size:clamp(26px,3.5vw,38px);color:var(--ink);margin:0 0 12px;
  }
  .trainer-summary{
    font-size:15.5px;color:var(--ink-soft);line-height:1.65;
    border-left:3px solid var(--indigo);padding-left:16px;
    margin-bottom:28px;
  }
  .profile-block{
    margin-bottom:24px;
    padding:20px 22px;
    background:rgba(255,255,255,0.62);
    border:1px solid var(--glass-border);
    border-radius:16px;
  }
  .profile-block h4{
    font-family:'Space Grotesk',sans-serif;
    font-size:20px;
    font-weight:600;
    color:var(--ink);
    margin-bottom:12px;
  }
  .profile-block ul{
    margin:0;
    padding-left:18px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .profile-block li{
    font-size:15px;
    color:var(--ink-soft);
    line-height:1.65;
  }
  .trainer-note{
    font-size:15.5px;
    color:var(--ink-soft);
    line-height:1.7;
    margin-top:8px;
  }
  @media(max-width:860px){
    .trainer-card{grid-template-columns:1fr;gap:32px;}
    .trainer-portrait img{
    .contact-modal-card{width:calc(100vw - 20px);padding:22px 16px 18px;border-radius:22px;max-height:calc(100vh - 20px);}
      width:180px;
      height:180px;
      border-radius:50%;
      object-fit:cover;
      aspect-ratio:1/1;
      display:block;
      margin:0 auto;
      box-shadow:var(--shadow-md);
    }
  }
  @media(max-width:540px){
    .trainer-card{padding:28px 22px;}
  }

/* ===== sid-curriculumn.html ===== */
    html.curriculum-page {
        scroll-behavior: smooth;
      }
    body.curriculum-page {
        margin: 0;
        font-family: 'Inter', sans-serif;
        color: var(--ink);
        background:
        radial-gradient(1100px 700px at 12% -8%, #F4EFFB 0%, transparent 60%),
        radial-gradient(900px 600px at 100% 10%, #E7F0FB 0%, transparent 55%),
        linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 45%, var(--bg-3) 100%);
        min-height: 100vh;
      }
      body.curriculum-page .markdown-body {
          box-sizing: border-box;
          min-width: 200px;
        max-width: 980px;
        width: 100%;
        margin: 120px auto 42px;
          padding: 45px;
        background: var(--glass-strong);
        border: 1px solid var(--glass-border);
        border-radius: 24px;
        box-shadow: var(--shadow-sm);
        color: var(--ink);
      }
      body.curriculum-page .markdown-body h1,
      body.curriculum-page .markdown-body h2,
      body.curriculum-page .markdown-body h3,
      body.curriculum-page .markdown-body h4,
      body.curriculum-page .markdown-body h5,
      body.curriculum-page .markdown-body h6 {
        font-family: 'Space Grotesk', sans-serif;
        color: var(--ink);
      }
      body.curriculum-page .markdown-body > p,
      body.curriculum-page .markdown-body > ul,
      body.curriculum-page .markdown-body > ol,
      body.curriculum-page .markdown-body > blockquote,
      body.curriculum-page .markdown-body > h1,
      body.curriculum-page .markdown-body > h2,
      body.curriculum-page .markdown-body > h3,
      body.curriculum-page .markdown-body > h4,
      body.curriculum-page .markdown-body > h5,
      body.curriculum-page .markdown-body > h6,
      body.curriculum-page .markdown-body > pre,
      body.curriculum-page .markdown-body > table,
      body.curriculum-page .markdown-body > details,
      body.curriculum-page .markdown-body > dl,
      body.curriculum-page .markdown-body > hr {
          max-width: 980px;
          margin-left: auto !important;
          margin-right: auto !important;
      }
        body.curriculum-page .curriculum-anchors {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          margin: 10px 0 28px;
        }
        body.curriculum-page .curriculum-anchor-link {
          text-decoration: none;
          color: var(--indigo-deep);
          font-family: 'JetBrains Mono', monospace;
          font-size: 12px;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          padding: 9px 14px;
          border-radius: 999px;
          background: rgba(255,255,255,0.72);
          border: 1px solid var(--line);
        }
        body.curriculum-page .curriculum-anchor-link:hover {
          background: #fff;
        }
        body.curriculum-page .curriculum-tier {
          margin: 14px 0 16px;
        }
        body.curriculum-page .curriculum-tier .tier-head {
          margin-bottom: 0;
        }
        body.curriculum-page .curriculum-tier .tier-name {
          margin: 0;
        }
        body.curriculum-page .markdown-body p,
        body.curriculum-page .markdown-body li {
          color: var(--ink-soft);
          line-height: 1.7;
          font-size: 16px;
        }
        body.curriculum-page .markdown-body ul,
        body.curriculum-page .markdown-body ol {
          padding-left: 22px;
        }
        body.curriculum-page .markdown-body hr {
          border: none;
          border-top: 1px solid var(--line);
          margin: 34px 0;
        }
        body.curriculum-page .markdown-body h1 {
          font-size: clamp(34px, 5vw, 48px);
          margin-bottom: 16px;
        }
        body.curriculum-page .markdown-body h2 {
          font-size: clamp(24px, 3.4vw, 34px);
          margin-top: 30px;
          margin-bottom: 12px;
        }
        body.curriculum-page .markdown-body h3 {
          font-size: clamp(20px, 2.6vw, 26px);
          margin-top: 26px;
          margin-bottom: 10px;
        }
        body.curriculum-page .curriculum-intro {
          margin-bottom: 24px;
        }
        body.curriculum-page .curriculum-intro h2 {
          margin-top: 14px;
          margin-bottom: 10px;
        }
        body.curriculum-page .curriculum-intro p {
          color: var(--ink-soft);
          font-size: 17px;
          line-height: 1.65;
          margin: 0;
        }
        body.curriculum-page .markdown-body strong {
          color: var(--ink);
        }
        body.curriculum-page .markdown-body table {
          width: 100%;
          border-collapse: collapse;
          margin: 18px 0;
          overflow: hidden;
          border-radius: 12px;
          border: 1px solid var(--line);
          background: rgba(255,255,255,0.55);
        }
        body.curriculum-page .markdown-body th,
        body.curriculum-page .markdown-body td {
          border-bottom: 1px solid var(--line);
          padding: 10px 12px;
          text-align: left;
        }
        body.curriculum-page .markdown-body th {
          color: var(--ink);
          font-weight: 600;
          background: rgba(27,33,64,0.05);
        }

        @media (max-width: 767px) {
          body.curriculum-page .markdown-body {
              padding: 15px;
            border-radius: 16px;
            margin: 18px auto;
          }
      }