:root{
    --bg:#0B0B12;
    --card:#14141F;
    --footer:#0E0E17;
    --card-border:rgba(255,255,255,0.07);
    --line:rgba(255,255,255,0.07);
    --text:#F5F5F7;
    --text-2:#A6A6BD;
    --text-3:#9999B2;
    --text-4:#808099;
    --chip:#C7C7D9;
    --purple:#8B5CF6;
    --green:#22C55E;
    --brown:#B08D57;
    --pi:#E5E7EB;
    --g-purple:rgba(139,92,246,.14);
    --g-green:rgba(34,197,94,.14);
    --g-brown:rgba(176,141,87,.14);
    --g-pi:rgba(229,231,235,.12);
    --border-soft:rgba(255,255,255,.07);
    --nav-bg:rgba(11,11,18,.92);
    --radius:18px;
    --shadow:0 12px 24px rgba(0,0,0,.35);
  }
  :root[data-theme="light"]{
    --bg:#FAFAFB;
    --card:#FFFFFF;
    --footer:#F2F2F5;
    --card-border:rgba(0,0,0,.08);
    --line:rgba(0,0,0,.08);
    --text:#1A1A24;
    --text-2:#4A4A5E;
    --text-3:#66667E;
    --text-4:#8A8AA0;
    --chip:#3A3A4A;
    --border-soft:rgba(0,0,0,.08);
    --nav-bg:rgba(255,255,255,.92);
    --pi:#111827;
    --g-pi:rgba(17,24,39,.12);
    --shadow:0 12px 24px rgba(0,0,0,.08);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);color:var(--text);
    font-family:"Noto Sans SC","Inter",sans-serif;
    -webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden;
  }
  a{text-decoration:none;color:inherit;}
  ul{list-style:none;}
  .wrap{width:1200px;max-width:calc(100% - 64px);margin:0 auto;}
  .section{display:flex;justify-content:center;padding:96px 0;}
  .section-head{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;margin-bottom:56px;}
  .kicker{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;}
  .kicker.brown{color:var(--brown);}
  .kicker.pi{color:var(--pi);}
  .kicker.purple{color:var(--purple);}
  .kicker.green{color:var(--green);}
  .section-title{font-size:40px;font-weight:700;color:var(--text);letter-spacing:-.01em;}
  .section-sub{font-size:16px;color:var(--text-2);max-width:560px;}
  .accent-line{height:1px;width:1200px;max-width:calc(100% - 64px);margin:0 auto;}
  .accent-line.brown{background:rgba(176,141,87,.4);}
  .accent-line.pi{background:var(--g-pi);}
  .accent-line.purple{background:rgba(139,92,246,.4);}
  .accent-line.green{background:rgba(34,197,94,.4);}

  /* ===== Navbar ===== */
  .nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
  .nav-inner{height:76px;display:flex;align-items:center;justify-content:space-between;}
  .logo{display:flex;align-items:center;gap:10px;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:20px;color:var(--text);}
  .logo-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#8B5CF6,#B08D57);color:#fff;display:flex;align-items:center;justify-content:center;}
  .nav-links{display:flex;align-items:center;gap:32px;font-size:15px;font-weight:500;color:var(--text-2);}
  .nav-links a:hover{color:var(--text);transition:color .2s;}
  .nav-right{display:flex;align-items:center;gap:14px;}
  .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--text-2);cursor:pointer;transition:color .2s,border-color .2s;}
  .theme-toggle:hover{color:var(--text);border-color:var(--purple);}
  .theme-toggle svg{display:none;}
  .theme-toggle[data-theme-now="dark"] .icon-moon{display:block;}
  .theme-toggle[data-theme-now="light"] .icon-sun{display:block;}
  .nav-cta{background:var(--purple);color:#fff;font-family:"Inter";font-weight:600;font-size:15px;padding:10px 20px;border-radius:10px;}
  .nav-cta:hover{filter:brightness(1.1);transition:filter .2s;}
  .nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:6px 10px;font-size:18px;cursor:pointer;}

  /* ===== Hero ===== */
  .hero{position:relative;display:flex;align-items:center;justify-content:center;min-height:660px;overflow:hidden;isolation:isolate;}
  /* 透视网格地面（底部渐隐，缓慢流动） */
  .hero-grid{
    position:absolute;left:50%;bottom:-10%;width:150%;height:72%;z-index:0;
    transform:translateX(-50%) perspective(700px) rotateX(58deg);
    transform-origin:50% 100%;
    background-image:
      linear-gradient(rgba(139,92,246,.11) 1px,transparent 1px),
      linear-gradient(90deg,rgba(139,92,246,.11) 1px,transparent 1px);
    background-size:54px 54px;
    -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.85),transparent 75%);
    mask-image:linear-gradient(to top,rgba(0,0,0,.85),transparent 75%);
    animation:grid-flow 2s linear infinite;
    pointer-events:none;
  }
  @keyframes grid-flow{from{background-position:0 0;}to{background-position:0 54px;}}
  #hero-particles{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
  .glow{position:absolute;border-radius:50%;filter:blur(6px);pointer-events:none;z-index:1;}
  .glow.violet{width:700px;height:500px;top:80px;left:50%;transform:translateX(-120%);background:radial-gradient(circle at 50% 50%,rgba(139,92,246,.32),transparent 100%);animation:glow-breathe 7s ease-in-out infinite;}
  .glow.green{width:600px;height:480px;top:90px;left:50%;transform:translateX(40%);background:radial-gradient(circle at 50% 50%,rgba(34,197,94,.22),transparent 100%);animation:glow-breathe 9s ease-in-out 1s infinite;}
  /* 漂移光斑：大模糊圆缓慢浮动，增强光影 */
  .glow.orb{width:340px;height:340px;top:22%;left:16%;background:radial-gradient(circle at 50% 50%,rgba(139,92,246,.24),transparent 70%);filter:blur(34px);animation:orb-drift 16s ease-in-out infinite;}
  .glow.orb.green{left:auto;right:14%;background:radial-gradient(circle at 50% 50%,rgba(34,197,94,.18),transparent 70%);animation-delay:-8s;}
  @keyframes glow-breathe{0%,100%{opacity:.65;}50%{opacity:1;}}
  @keyframes orb-drift{0%,100%{transform:translate(0,0);}33%{transform:translate(70px,-50px);}66%{transform:translate(-46px,38px);}}
  /* 亮色主题适配 */
  :root[data-theme="light"] .hero-grid{
    background-image:
      linear-gradient(rgba(109,40,217,.10) 1px,transparent 1px),
      linear-gradient(90deg,rgba(109,40,217,.10) 1px,transparent 1px);
  }
  :root[data-theme="light"] .glow{animation:none;opacity:.5;}
  .hero-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center;width:820px;max-width:calc(100% - 64px);padding:120px 0 96px;}
  .eyebrow{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--g-purple);border:1px solid rgba(139,92,246,.35);border-radius:999px;color:var(--purple);font-size:14px;font-weight:500;}
  .headline{font-size:58px;font-weight:700;line-height:1.15;letter-spacing:-.01em;display:flex;flex-direction:column;gap:4px;}
  .headline .white{color:var(--text);}
  .headline .gradient{background:linear-gradient(90deg,#D97757,#8B5CF6 50%,#2DD4BF);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .hero-sub{width:640px;max-width:100%;font-size:18px;color:var(--text-2);line-height:1.8;}
  .cta-row{display:flex;align-items:center;gap:16px;}
  .btn-primary{display:inline-block;background:var(--purple);color:#fff;font-family:"Inter";font-weight:600;font-size:16px;padding:14px 28px;border-radius:12px;}
  .btn-primary:hover{filter:brightness(1.1);transition:filter .2s;}
  .btn-secondary{display:inline-block;border:1px solid var(--line);color:var(--text-2);font-size:16px;font-weight:500;padding:14px 28px;border-radius:12px;}
  .btn-secondary:hover{background:var(--border-soft);transition:background .2s;}

  /* ===== Course Track ===== */
  .track-pad{display:flex;justify-content:center;padding:96px 0;}
  .track-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:48px;}
  .track-title{font-size:40px;font-weight:700;color:var(--text);margin-top:4px;}
  .track-sub{margin-top:8px;font-size:16px;color:var(--text-2);max-width:560px;}
  .view-all{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;background:var(--border-soft);border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:500;color:var(--text-2);white-space:nowrap;}
  .view-all .arrow{font-family:"Inter";font-weight:600;color:var(--brown);}
  .cards-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .course-card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;display:flex;flex-direction:column;gap:16px;}
  .badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:8px;font-size:13px;font-weight:500;width:fit-content;}
  .badge.brown{background:var(--g-brown);color:var(--brown);}
  .badge.pi{background:var(--g-pi);color:var(--pi);}
  .badge.green{background:var(--g-green);color:var(--green);}
  .course-title{font-size:22px;font-weight:700;color:var(--text);}
  .course-desc{font-size:15px;color:var(--text-2);min-height:48px;}
  .meta{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-3);}
  .meta .dot{width:6px;height:6px;border-radius:50%;}
  .meta .dot.brown{background:var(--brown);}
  .meta .dot.pi{background:var(--pi);}
  .meta .dot.green{background:var(--green);}
  .divider{height:1px;background:var(--card-border);}
  .topics{display:flex;flex-wrap:wrap;gap:8px;}
  .topic{font-size:12px;font-weight:500;color:var(--chip);background:var(--border-soft);padding:5px 10px;border-radius:7px;}
  .card-link{display:flex;align-items:center;gap:6px;margin-top:auto;font-size:14px;font-weight:500;}
  .card-link.brown{color:var(--brown);}
  .card-link.pi{color:var(--pi);}
  .card-link.green{color:var(--green);}
  .card-link .arrow{font-family:"Inter";font-weight:600;color:inherit;}

  /* ===== Features ===== */
  .features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  .feature-card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:28px 24px;display:flex;flex-direction:column;gap:14px;}
  .icon-chip{width:52px;height:52px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--brown);display:flex;align-items:center;justify-content:center;}
  .feature-title{font-size:19px;font-weight:700;color:var(--text);}
  .feature-desc{font-size:14px;color:var(--text-3);}

  /* ===== Roadmap ===== */
  .steps-row{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:16px;}
  .phase{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:14px;}
  .phase.brown{border-color:rgba(176,141,87,.3);}
  .phase.pi{border-color:var(--g-pi);}
  .phase.purple{border-color:rgba(139,92,246,.3);}
  .phase.green{border-color:rgba(34,197,94,.3);}
  .phase-top{display:flex;justify-content:space-between;align-items:center;}
  .phase-num{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:30px;}
  .phase-num.brown{color:var(--brown);}
  .phase-num.pi{color:var(--pi);}
  .phase-num.purple{color:var(--purple);}
  .phase-num.green{color:var(--green);}
  .phase-days{font-family:"Inter";font-weight:600;font-size:12px;padding:4px 10px;border-radius:999px;}
  .phase-days.brown{background:var(--g-brown);color:var(--brown);}
  .phase-days.pi{background:var(--g-pi);color:var(--pi);}
  .phase-days.purple{background:var(--g-purple);color:var(--purple);}
  .phase-days.green{background:var(--g-green);color:var(--green);}
  .phase-title{font-size:20px;font-weight:700;color:var(--text);}
  .phase-desc{font-size:14px;color:var(--text-3);}
  .connector{width:32px;height:24px;flex:none;}
  .connector svg{width:100%;height:100%;}

  /* ===== Testimonials ===== */
  .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .testi-card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;display:flex;flex-direction:column;gap:18px;}
  .stars{color:var(--brown);font-size:15px;letter-spacing:2px;}
  .testi-quote{font-size:15px;color:var(--text);line-height:1.7;}
  .testi-quote::before{content:"“";color:var(--brown);font-size:22px;margin-right:2px;}
  .testi-quote::after{content:"”";color:var(--brown);font-size:22px;margin-left:2px;}
  .testi-meta{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:18px;border-top:1px solid var(--line);}
  .avatar{flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:"Space Grotesk";font-weight:700;}
  .avatar.sm{width:44px;height:44px;font-size:16px;}
  .avatar.lg{width:72px;height:72px;font-size:24px;}
  .avatar.brown{background:linear-gradient(135deg,#B08D57,#8b5cf6);}
  .avatar.pi{background:linear-gradient(135deg,#E5E7EB,#8b5cf6);}
  .avatar.purple{background:linear-gradient(135deg,#8b5cf6,#22C55E);}
  .avatar.green{background:linear-gradient(135deg,#22C55E,#0ea5e9);}
  .avatar.violet{background:linear-gradient(135deg,#a78bfa,#6366f1);}
  .testi-name{font-size:15px;font-weight:700;color:var(--text);}
  .testi-role{font-size:13px;color:var(--text-3);}
  .testi-stats{display:flex;justify-content:center;gap:64px;margin-top:64px;flex-wrap:wrap;}
  .stat{text-align:center;}
  .stat b{font-family:"Space Grotesk",sans-serif;font-size:40px;font-weight:700;background:linear-gradient(90deg,#B08D57,#8b5cf6 55%,#22C55E);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .stat span{display:block;margin-top:4px;font-size:14px;color:var(--text-2);}

  /* ===== FAQ ===== */
  .faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
  .faq-item{background:var(--card);border:1px solid var(--card-border);border-radius:16px;overflow:hidden;}
  .faq-item[open]{border-color:rgba(139,92,246,.4);}
  .faq-q{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:22px 26px;font-size:16px;font-weight:500;color:var(--text);}
  .faq-q::-webkit-details-marker{display:none;}
  .faq-q .plus{flex:none;width:26px;height:26px;border-radius:8px;background:var(--g-purple);color:var(--purple);display:flex;align-items:center;justify-content:center;font-size:18px;transition:transform .2s,background .2s;}
  .faq-item[open] .plus{transform:rotate(45deg);background:var(--purple);color:#fff;}
  .faq-a{padding:0 26px 24px;font-size:15px;color:var(--text-2);line-height:1.8;}

  /* ===== Final CTA ===== */
  .final-cta{display:flex;justify-content:center;padding:40px 0 120px;}
  .cta-panel{width:1200px;max-width:calc(100% - 64px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center;padding:80px;background:linear-gradient(90deg,rgba(139,92,246,.28),rgba(34,197,94,.16));border:1px solid var(--line);border-radius:28px;}
  .cta-title{font-size:44px;font-weight:700;color:var(--text);letter-spacing:-.01em;}
  .cta-sub{font-size:17px;color:var(--text-2);max-width:560px;}
  .cta-btn{display:inline-block;background:linear-gradient(90deg,#D97757,#8B5CF6);color:#fff;font-family:"Inter";font-weight:600;font-size:17px;padding:16px 32px;border-radius:12px;}
  .cta-btn:hover{filter:brightness(1.08);transition:filter .2s;}

  /* ===== Footer ===== */
  .footer{background:var(--footer);border-top:1px solid var(--line);}
  .footer-inner{width:1200px;max-width:calc(100% - 64px);margin:0 auto;padding:72px 0 40px;display:flex;flex-direction:column;gap:40px;}
  .footer-top{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;}
  .footer-brand{width:400px;max-width:100%;display:flex;flex-direction:column;gap:16px;}
  .footer-brand .logo{font-size:19px;}
  .footer-brand p{font-size:14px;color:var(--text-3);max-width:320px;}
  .link-cols{display:flex;gap:72px;flex-wrap:wrap;}
  .link-col{display:flex;flex-direction:column;gap:14px;}
  .link-col b{font-size:15px;font-weight:700;color:var(--text);}
  .link-col a{font-size:14px;color:var(--text-4);}
  .link-col a:hover{color:var(--text-2);transition:color .2s;}
  .footer-divider{height:1px;background:var(--line);}
  .footer-bottom{display:flex;justify-content:center;font-size:13px;color:var(--text-4);}

  /* ===== Responsive ===== */
  @media(max-width:1024px){
    .cards-row,.testi-grid{grid-template-columns:repeat(2,1fr);}
    .features-grid{grid-template-columns:repeat(2,1fr);}
    .steps-row{grid-template-columns:1fr;justify-items:center;}
    .connector{transform:rotate(90deg);}
    .nav-links{display:none;}
    .nav-toggle{display:block;}
  }
  @media(max-width:680px){
    .cards-row,.testi-grid,.features-grid{grid-template-columns:1fr;}
    .testi-stats{gap:32px;}
    .headline{font-size:38px;}
    .cta-row{flex-direction:column;width:100%;}
    .btn-primary,.btn-secondary{width:100%;text-align:center;}
    .track-header{flex-direction:column;}
    .cta-panel{padding:48px 24px;}
    .footer-top{flex-direction:column;}
    .link-cols{gap:40px;}
  }