:root{
    --purple:#7B6EF0;
    --purple-deep:#5B4FD6;
    --navy:#1B2440;
    --navy-soft:#3A4A63;
    --footer-bg:#33506A;
    --lavender:#F1EEFC;
    --lavender-deep:#E6E1FB;
    --paper:#FCFBFF;
    --line:#E4E1F3;
    --c1:#F4632D; /* orange */
    --c2:#5E7FC7; /* blue */
    --c3:#EC9A2C; /* amber */
    --c4:#1ECBA2; /* teal */
    --c5:#7D73F0; /* purple */
    --c6:#6579C9; /* indigo */
    --text:#2B2A3D;
    --muted:#6B6B85;
    --gold:#E3A230;
    --gold-soft:#F0C86B;
    --shadow-sm:0 4px 14px rgba(60,50,140,0.06);
    --shadow-md:0 10px 26px rgba(60,50,140,0.08);
    --shadow-lg:0 18px 44px rgba(30,25,70,0.12);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  html,body{margin:0;padding:0;}
  body{
    font-family:'Noto Sans SC','Poppins',sans-serif;
    color:var(--text);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{text-decoration:none;color:inherit;}
  img{max-width:100%;}
  .accent{font-family:'Playfair Display', serif; font-style:italic; color:var(--purple-deep); font-weight:700;}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important;transition-duration:0.01ms !important;}
  }

  /* ============ HEADER (matches reference site) ============ */
  header.site-header{
    background:#fff;
    padding:14px 40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-shadow:0 2px 10px rgba(20,20,50,0.05);
    position:sticky;
    top:0;
    z-index:100;
    flex-wrap:wrap;
    gap:10px;
  }
  .brand{display:flex;align-items:center;gap:10px;}
  .brand .logo-mark{
    width:34px;height:34px;
    background:linear-gradient(135deg,var(--c1),var(--c3));
    clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
  }
  .brand .logo-text{line-height:1.15;}
  .brand .logo-text b{
    display:block;font-size:14px;letter-spacing:1.5px;font-weight:800;color:var(--navy);
  }
  .brand .logo-text span{
    display:block;font-size:10.5px;color:var(--muted);letter-spacing:0.5px;
  }
  nav.main-nav{
    display:flex;
    align-items:center;
    gap:22px;
    flex-wrap:wrap;
  }
  nav.main-nav .nav-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    font-size:10.5px;
    color:var(--navy-soft);
    font-weight:500;
    letter-spacing:0.2px;
  }
  nav.main-nav .nav-item .icon-circle{
    width:34px;height:34px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:14px;
  }
  .searchbtn{
    background:var(--navy);
    color:#fff;
    border-radius:999px;
    padding:9px 18px;
    font-size:12px;
    display:flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .searchbtn:hover{
    background:var(--purple-deep);
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(91,79,214,0.28);
  }
  nav.main-nav .nav-item{transition:color .18s ease, transform .18s ease;}
  nav.main-nav .nav-item:hover{color:var(--purple-deep);transform:translateY(-1px);}

  /* ============ HERO ============ */
  .contours{position:absolute;inset:0;opacity:.22;pointer-events:none;}
  .head-top{
    position:relative;z-index:2;
    display:flex;align-items:center;gap:16px;
    padding-bottom:22px;margin-bottom:22px;
    border-bottom:1px solid rgba(234,242,238,.18);
  }
  .crest{flex:0 0 auto;}
  .brand-en{
    font-family:"Space Grotesk",sans-serif;
    font-weight:700;letter-spacing:.28em;
    font-size:14px;text-transform:uppercase;color:var(--gold);
    line-height:1;
  }
  .brand-cn{
    font-family:"Noto Serif SC",serif;font-weight:700;
    font-size:15px;letter-spacing:.14em;color:#D6E3DD;margin-top:6px;
  }
  .head-right{margin-left:auto;text-align:right;}
  .head-right .tier{
    font-family:"Space Grotesk",sans-serif;font-weight:600;
    letter-spacing:.14em;font-size:12px;color:#9FB8B2;text-transform:uppercase;
  }
  .head-right .range{
    font-family:"Space Grotesk",sans-serif;font-weight:700;
    font-size:19px;color:#EAF2EE;margin-top:4px;
  }
  .head-right .range b{color:var(--gold);}

  .hero-caption{margin:0 0 0 7%;padding:70px 0;}
  .title-block{position:relative;z-index:2;}
  .eyebrow{
    font-family:"Space Grotesk",sans-serif;
    font-weight:600;
    letter-spacing:.34em;
    font-size:14px;
    text-transform:uppercase;
    color:#8FB0AA;
    margin-bottom:12px;
  }
  .title{
    font-family:"Noto Serif SC",serif;
    font-weight:900;
    font-size:clamp(30px,4.6vw,52px);
    line-height:1.14;
    margin:0;
    letter-spacing:.02em;
    color:#F3F8F5;
  }
  .title .en{
    display:block;
    font-family:"Fraunces",serif;
    font-weight:600;
    font-style:italic;
    font-size:clamp(17px,2.2vw,25px);
    letter-spacing:.01em;
    color: #e3a230;
    margin-top:10px;
  }
  .subtitle{
    color:#DCE7E3;font-size:15px;line-height:1.8;margin-top:16px;max-width:58ch;
  }

  /* selection formula strip */
  .formula{
    position:relative;z-index:2;
    margin-top:26px;
    background:rgba(255,255,255,.07);
    backdrop-filter:blur(6px);
    border:1px solid rgba(234,242,238,.18);
    border-radius:14px;
    padding:16px 22px;
    display:flex;align-items:center;gap:18px;flex-wrap:wrap;
    max-width:fit-content;
  }
  .formula .lab{
    font-family:"Noto Serif SC",serif;font-weight:700;font-size:13px;
    color:var(--gold-soft);letter-spacing:.08em;white-space:nowrap;
    padding-right:16px;border-right:1px solid rgba(234,242,238,.2);
  }
  .formula .terms{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    font-size:13.5px;color:#E4EEE9;font-weight:500;
  }
  .formula .plus{color:var(--gold);font-weight:700;font-family:"Space Grotesk",sans-serif;}
  .formula .opt{color:#93ACA6;font-style:italic;}

  /* ============ SECTION TITLES ============ */
  .section-wrap{padding:56px 8vw 70px;max-width:1320px;margin:0 auto;}
  .section-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    margin-bottom:36px;
    flex-wrap:wrap;
    gap:10px;
  }
  .section-head h3{
    font-size:clamp(20px,2.6vw,26px);
    font-weight:800;
    color:var(--navy);
    margin:0;
    letter-spacing:.01em;
  }
  .section-head .subline{
    font-size:12px;
    color:var(--muted);
    font-weight:700;
    letter-spacing:1px;
    background:var(--lavender);
    padding:6px 12px;
    border-radius:999px;
  }
  .kicker{
    display:inline-block;
    font-size:11px;
    letter-spacing:2px;
    color:var(--purple-deep);
    font-weight:700;
    text-transform:uppercase;
    background:var(--lavender);
    padding:5px 14px;
    border-radius:999px;
    margin-bottom:10px;
  }

  /* Timeline section-head: decorated banner with a progression illustration */
  .timeline-head{
    position:relative;
    overflow:hidden;
    border-radius:22px;
    background:linear-gradient(120deg, var(--purple-deep) 0%, var(--navy) 68%, #232048 100%);
    padding:38px 42px;
    box-shadow:var(--shadow-lg);
    isolation:isolate;
  }
  .timeline-head .th-content{position:relative;z-index:2;}
  .timeline-head .kicker{
    background:rgba(255,255,255,.14);
    color:var(--gold-soft);
  }
  .timeline-head h3 span{color:#fff;}
  .timeline-head .subline{
    position:relative;z-index:2;
    background:rgba(255,255,255,.14);
    color:#F3F0FF;
    font-weight:700;
  }
  .timeline-head-decor{
    position:absolute;
    z-index:1;
    right:0;
    bottom:0;
    width:33%;
    max-width:460px;
    height:100%;
    opacity:.95;
    pointer-events:none;
  }
  .timeline-head-decor svg{
    position:absolute;
    right:0;
    bottom:0;
    width:100%;
    height:auto;
  }

  /* ============ TIMELINE ============ */
  .timeline{position:relative;}
  .timeline::before{
    content:"";
    position:absolute;
    left:190px;
    top:10px;
    bottom:10px;
    width:2px;
    background:linear-gradient(var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6));
    opacity:0.5;
  }
  .stage{
    display:grid;
    grid-template-columns:190px 1fr;
    gap:0 30px;
    margin-bottom:26px;
    position:relative;
  }
  .stage-meta{
    padding-top:26px;
    text-align:right;
    padding-right:30px;
    position:relative;
  }
  .stage-meta .badge{
    display:inline-block;
    background:var(--navy);
    color:#fff;
    font-size:12px;
    font-weight:700;
    padding:5px 12px;
    border-radius:8px;
    margin-bottom:6px;
  }
  .stage-meta .age{
    font-size:11.5px;
    color:var(--muted);
    font-weight:600;
  }
  .stage-dot{
    position:absolute;
    right:-6px;
    top:32px;
    width:13px;height:13px;
    border-radius:50%;
    border:3px solid #fff;
    box-shadow:0 0 0 2px currentColor;
  }
  .stage-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:24px 28px;
    box-shadow:var(--shadow-sm);
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  .stage-card:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-lg);
    border-color:var(--lavender-deep);
  }
  .stage-card .title-row{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:16px;
    flex-wrap:wrap;
    justify-content:space-between;
  }
  .stage-card .title-row .left{display:flex;align-items:center;gap:14px;}
  .stage-num{
    width:42px;height:42px;
    border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    font-weight:800;
    font-size:17px;
    color:#fff;
    flex:none;
    box-shadow:0 6px 14px rgba(0,0,0,0.14);
  }
  .stage-card h4{
    font-size:19px;
    margin:0;
    font-weight:800;
    color:var(--navy);
  }
  .goal-tag{
    font-size:11.5px;
    font-weight:700;
    color:var(--purple-deep);
    background:var(--lavender);
    padding:5px 12px;
    border-radius:999px;
    white-space:nowrap;
  }
  .book-row{
    display:grid;
    grid-template-columns:110px 1fr;
    gap:8px 14px;
    padding:9px 0;
    border-top:1px dashed var(--line);
    align-items:start;
  }
  .book-row:first-of-type{border-top:none;padding-top:2px;}
  .book-row .cat{
    font-size:12px;
    font-weight:700;
    color:var(--muted);
    padding-top:5px;
  }
  .book-row .items{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
  }
  .chip{
    font-size:12px;
    padding:5px 11px;
    border-radius:8px;
    background:#F6F5FD;
    color:var(--navy);
    font-weight:500;
    border:1px solid var(--line);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .chip:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(60,50,140,0.12);}
  .chip.exam{
    background:var(--lavender-deep);
    color:var(--purple-deep);
    font-weight:700;
    border-color:transparent;
  }
  .chip.goal{
    background:#FFF6E9;
    color:#9A6A16;
    font-weight:600;
    border-color:#F5E4C4;
  }
  .exit-banner{
    background:linear-gradient(90deg,#FFF3E3,#FDECEC);
    border:1px solid #F6DDBB;
    border-radius:12px;
    padding:12px 18px;
    font-size:13px;
    font-weight:700;
    color:#8A5A12;
    margin-bottom:16px;
  }

  /* ============ CEFR CHART ============ */
  .chart-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    padding:34px 36px;
    box-shadow:var(--shadow-md);
  }
  .chart-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .chart-inner{min-width:560px;}
  .chart-grid{
    display:grid;
    grid-template-columns:170px repeat(7,1fr);
    font-size:11px;
    color:var(--muted);
    font-weight:700;
    margin-bottom:14px;
  }
  .chart-grid div{padding-bottom:6px;border-bottom:1px solid var(--line);text-align:center;}
  .chart-grid div:first-child{text-align:left;}
  .chart-row{
    display:grid;
    grid-template-columns:170px 1fr;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid #F2F0FA;
    gap:16px;
  }
  .chart-row .rowlabel b{display:block;font-size:13.5px;color:var(--navy);}
  .chart-row .rowlabel span{font-size:11px;color:var(--muted);}
  .bar-track{
    position:relative;
    height:26px;
    background:#F5F4FC;
    border-radius:8px;
    overflow:hidden;
  }
  .bar-fill{
    position:absolute;top:0;bottom:0;
    border-radius:8px;
    display:flex;align-items:center;
    padding:0 10px;
    font-size:10.5px;
    font-weight:700;
    color:#fff;
    white-space:nowrap;
    transition:filter .18s ease;
  }
  .bar-fill:hover{filter:brightness(1.08);}
  .cambridge-route{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-top:26px;
    font-size:12.5px;
  }
  .cambridge-route .arrow{color:var(--muted);}
  .cambridge-route .step{
    padding:6px 14px;
    border-radius:999px;
    font-weight:700;
    color:#fff;
    transition:transform .15s ease;
  }
  .cambridge-route .step:hover{transform:translateY(-1px) scale(1.03);}
  .scroll-hint{display:none;font-size:11px;color:var(--muted);margin-bottom:10px;align-items:center;gap:6px;}
  .chart-scale-mobile{
    display:none;
    justify-content:space-between;
    font-size:9.5px;
    font-weight:700;
    color:var(--muted);
    letter-spacing:.02em;
    padding:0 2px 8px;
  }
  .foot-note{
    max-width:1100px;
    margin:0 auto;
    padding:0 8vw 50px;
    font-size:12px;
    color:var(--muted);
    line-height:1.8;
  }
  .foot-note b{color:var(--navy);}

  /* ============ RESPONSIVE ============ */
  @media (max-width:1024px){
    .section-wrap{padding:48px 6vw 60px;}
    .hero-caption{margin-left:6%;padding:56px 0;}
  }

  @media (max-width:900px){
    header.site-header{padding:12px 20px;}
    nav.main-nav{display:none;}
    .stat-row{grid-template-columns:repeat(2,1fr);margin-top:20px;}
    .timeline::before{left:70px;}
    .stage{grid-template-columns:70px 1fr;}
    .stage-meta{padding-right:12px;}
    .stage-meta .badge{font-size:10px;padding:4px 6px;}
    .chart-grid{grid-template-columns:110px repeat(7,1fr);font-size:9px;}
    .chart-row{grid-template-columns:110px 1fr;}
    .hero .path-tag{position:static;text-align:left;margin-top:14px;}
  }

  /* Tablet: 768px and below */
  @media (max-width:768px){
    .section-wrap{padding:40px 22px 52px;}
    .section-head{margin-bottom:26px;}
    .hero-caption{margin-left:0;padding:48px 20px;}
    .formula{padding:14px 18px;max-width:100%;}
    .formula .lab{border-right:none;padding-right:0;flex-basis:100%;}
    .chart-card{padding:24px 18px;}
    .scroll-hint{display:flex;}
    .stage-card{padding:20px 18px;}
    .stage-card .title-row{gap:10px;}
    .timeline-head{padding:30px 26px;}
    .timeline-head-decor{width:42%;opacity:.65;}
  }

  /* Mobile: stack the timeline into a single column */
  @media (max-width:640px){
    header.site-header{padding:10px 16px;}
    .brand .logo-text b{font-size:12.5px;}
    .brand .logo-text span{font-size:9.5px;}
    .searchbtn{padding:8px 14px;font-size:11px;}

    .hero-caption{padding:40px 16px;}
    .eyebrow{font-size:11px;letter-spacing:.24em;margin-bottom:8px;}
    .subtitle{font-size:13.5px;max-width:100%;}
    .formula{gap:10px;padding:12px 14px;border-radius:12px;}
    .formula .terms{font-size:12.5px;gap:8px;}

    .section-wrap{padding:34px 16px 42px;}
    .section-head{flex-direction:column;align-items:flex-start;gap:8px;}
    .section-head h3{font-size:19px;}
    .kicker{font-size:10px;padding:4px 11px;}
    .timeline-head{padding:24px 20px;border-radius:18px;}
    .timeline-head-decor{width:0;display:none;}

    /* Timeline becomes a single-column stacked list */
    .timeline::before{left:18px;top:6px;bottom:6px;}
    .stage{
      grid-template-columns:1fr;
      gap:10px 0;
      margin-bottom:20px;
      padding-left:38px;
      position:relative;
    }
    .stage-meta{
      padding-top:0;
      padding-right:0;
      text-align:left;
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }
    .stage-meta .badge{margin-bottom:0;font-size:11px;}
    .stage-dot{
      left:-32px;right:auto;top:4px;
    }
    .stage-card{padding:18px 16px;border-radius:14px;}
    .stage-card:hover{transform:none;}
    .stage-card .title-row{
      flex-direction:column;
      align-items:flex-start;
      gap:8px;
    }
    .stage-card h4{font-size:16.5px;}
    .stage-num{width:36px;height:36px;font-size:15px;border-radius:10px;}
    .goal-tag{font-size:11px;}

    /* Book rows: stack category label above chips on narrow screens */
    .book-row{
      grid-template-columns:1fr;
      gap:5px;
    }
    .book-row .cat{
      padding-top:0;
      text-transform:uppercase;
      font-size:10.5px;
      letter-spacing:.5px;
      color:var(--purple-deep);
    }
    .chip{font-size:11.5px;padding:5px 10px;}
    .exit-banner{font-size:12px;padding:10px 14px;}

    /* CEFR chart: stacked, full-width bars — no horizontal scroll needed */
    .chart-card{padding:18px 14px;border-radius:16px;}
    .scroll-hint{display:none;}
    .chart-scale-mobile{display:flex;}
    .chart-grid{display:none;}
    .chart-scroll{overflow-x:visible;}
    .chart-inner{min-width:0;}
    .chart-row{
      grid-template-columns:1fr;
      row-gap:8px;
      padding:14px 0;
    }
    .chart-row .rowlabel{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;}
    .chart-row .rowlabel b{font-size:13px;}
    .chart-row .rowlabel span{font-size:10.5px;}
    .bar-track{height:30px;}
    .bar-fill{font-size:10px;padding:0 8px;}
    .cambridge-route{font-size:11px;gap:6px;}
    .cambridge-route .step{padding:5px 11px;}

    .foot-note{padding:0 16px 40px;font-size:11.5px;}
  }

  /* Small phones */
  @media (max-width:400px){
    .brand .logo-text span{display:none;}
    .title{font-size:clamp(24px,7vw,30px);}
    .stage{padding-left:32px;}
    .timeline::before{left:14px;}
    .stage-dot{left:-28px;}
    .stage-num{width:32px;height:32px;font-size:13px;}
    .chip{font-size:11px;padding:4px 9px;}
  }

  /* ============ LANGUAGE TOGGLE ============ */
  .lang-toggle{
    position:fixed;
    right:20px;
    bottom:24px;
    z-index:200;
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--navy);
    color:#fff;
    border:none;
    border-radius:999px;
    padding:11px 18px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.02em;
    cursor:pointer;
    box-shadow:0 10px 26px rgba(27,36,64,0.35);
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
    font-family:'Noto Sans SC','Poppins',sans-serif;
  }
  .lang-toggle:hover{
    background:var(--purple-deep);
    transform:translateY(-2px);
    box-shadow:0 14px 32px rgba(91,79,214,0.35);
  }
  .lang-toggle .globe{font-size:14px;line-height:1;}
  .lang-toggle .divider{opacity:.4;}
  .lang-toggle .opt{opacity:.55;transition:opacity .18s ease;}
  .lang-toggle .opt.is-active{opacity:1;color:var(--gold-soft);}
  @media (max-width:640px){
    .lang-toggle{
      right:14px;bottom:16px;
      padding:9px 14px;font-size:12px;
    }
  }