/* ===========================================================
   SAIP TAIWAN · Official Website
   Built per CIS Manual 2026 · Author: 賴家榮
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700;900&family=Noto+Serif+TC:wght@300;400;500;600;700;900&family=Inter:wght@300;400;500;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

:root{
  /* === CIS Brand Tokens (per 2.10 規範) === */
  --navy:#1B2C5A;
  --navy-deep:#13204A;
  --navy-soft:#2C3F73;
  --navy-900:#0A1638;
  --navy-300:#5A6B96;
  --navy-200:#A6B0CC;
  --navy-100:#E2E5EE;
  --gold:#D9A441;
  --gold-light:#E8C078;
  --gold-pale:#F8EAD0;
  --gold-deep:#A47C2C;
  --paper:#FAFAF7;
  --ink:#1A1A1A;
  --gray-900:#212529;
  --gray-700:#495057;
  --gray-500:#868E96;
  --gray-300:#DEE2E6;
  --gray-100:#F1F3F5;
  --success:#2E7D52;
  --warning:#E0A526;
  --error:#C0392B;
  --info:#2D6CA8;

  /* === Type scale === */
  --serif-cn:'Noto Serif TC',serif;
  --sans-cn:'Noto Sans TC',sans-serif;
  --sans-en:'Inter',sans-serif;
  --serif-en:'Cormorant Garamond',serif;

  /* === Layout === */
  --header-h:80px;
  --max-w:1280px;
  --pad-x:clamp(20px,5vw,80px);
  --section-y:clamp(80px,12vh,160px);

  /* === Motion === */
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-in-out:cubic-bezier(0.65,0,0.35,1);
}

/* === Reset === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--sans-cn),var(--sans-en);
  color:var(--ink);
  background:var(--paper);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"palt","kern","liga";
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit;}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit;}
ul,ol{list-style:none;}

/* === Selection === */
::selection{background:var(--gold);color:var(--navy);}

/* === Scrollbar === */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:var(--paper);}
::-webkit-scrollbar-thumb{background:var(--navy);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:var(--gold);}

/* ===========================================================
   HEADER · Sticky transparent → solid on scroll
   =========================================================== */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  height:var(--header-h);
  z-index:100;
  transition:background 0.4s var(--ease-out),box-shadow 0.4s var(--ease-out),height 0.3s var(--ease-out);
  background:transparent;
}
.site-header.scrolled{
  background:rgba(250,250,247,0.96);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 1px 0 rgba(217,164,65,0.15),0 4px 30px rgba(27,44,90,0.06);
  height:64px;
}
.site-header.dark-bg:not(.scrolled){
  background:transparent;
}
.site-header.dark-bg:not(.scrolled) .nav-link,
.site-header.dark-bg:not(.scrolled) .lang-btn,
.site-header.dark-bg:not(.scrolled) .brand-mark{
  color:#fff;
}
.header-inner{
  max-width:var(--max-w);
  height:100%;
  margin:0 auto;
  padding:0 var(--pad-x);
  display:flex;align-items:center;justify-content:space-between;gap:30px;
}
.brand-mark{
  display:flex;align-items:center;
  transition:opacity 0.3s;
  height:100%;
}
.brand-mark .brand-logo{
  height:46px;width:auto;display:block;
  transition:opacity 0.3s ease;
}
.brand-mark .brand-logo-dark{display:none;}
.site-header.dark-bg:not(.scrolled) .brand-logo-light{display:none;}
.site-header.dark-bg:not(.scrolled) .brand-logo-dark{display:block;}
.brand-mark:hover{opacity:0.85;}
@media (max-width:880px){
  .brand-mark .brand-logo{height:38px;}
}

/* === Nav === */
.site-nav{display:flex;align-items:center;gap:36px;}
.nav-list{display:flex;align-items:center;gap:34px;list-style:none;}
.nav-link{
  position:relative;
  display:inline-flex;align-items:center;
  font-family:var(--sans-en),var(--sans-cn);
  font-size:13px;
  font-weight:600;
  letter-spacing:2px;
  color:var(--navy);
  padding:8px 0;
  transition:color 0.3s var(--ease-out);
}
.nav-link .lang-zh{
  font-family:var(--sans-cn);
  font-weight:500;
  letter-spacing:0.08em;
}
.nav-link .lang-en{
  font-family:var(--sans-en);
  font-weight:600;
  letter-spacing:2px;
}
.nav-link::after{
  content:"";
  position:absolute;left:0;bottom:2px;
  width:0;height:1.5px;
  background:var(--gold);
  transition:width 0.4s var(--ease-out);
}
.nav-link:hover::after,.nav-link.active::after{width:100%;}
.nav-link:hover,.nav-link.active{color:var(--gold);}

/* === Language switch === */
.lang-switch{
  display:flex;align-items:center;
  border:1px solid var(--gold);
  border-radius:30px;
  padding:3px;
  position:relative;
}
.lang-btn{
  font-family:var(--sans-en);
  font-size:11px;font-weight:700;
  letter-spacing:1.5px;
  padding:6px 14px;
  border-radius:30px;
  color:var(--navy);
  transition:color 0.3s;
  z-index:1;
}
.lang-btn.active{color:#fff;}
.lang-pill{
  position:absolute;top:3px;left:3px;
  width:50%;height:calc(100% - 6px);
  background:var(--gold);
  border-radius:30px;
  transition:transform 0.4s var(--ease-out);
}
.lang-switch[data-lang="en"] .lang-pill{transform:translateX(100%);}
.site-header.dark-bg:not(.scrolled) .lang-switch{
  border-color:rgba(217,164,65,0.85);
  background:rgba(10,22,56,0.18);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.site-header.dark-bg:not(.scrolled) .lang-btn{color:rgba(255,255,255,0.92);}
.site-header.dark-bg:not(.scrolled) .lang-btn.active{color:var(--navy);}

/* === Mobile menu toggle === */
.menu-toggle{
  display:none;width:40px;height:40px;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  border-radius:50%;
  transition:background 0.3s var(--ease-out);
}
.menu-toggle:hover{background:rgba(217,164,65,0.08);}
.menu-toggle span{
  display:block;width:22px;height:2px;background:var(--navy);
  border-radius:2px;
  transition:all 0.4s var(--ease-out);
}
.site-header.dark-bg:not(.scrolled) .menu-toggle span{background:#fff;}
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);background:var(--navy);}
.menu-toggle.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);background:var(--navy);}

/* === Header: when mobile menu open, force paper bg over hero ===
   Uses !important because this is a runtime state override that must
   defeat any earlier dark-bg rules regardless of specificity / order. */
.site-header.menu-open{
  background:rgba(250,250,247,0.98) !important;
  backdrop-filter:blur(20px) !important;
  -webkit-backdrop-filter:blur(20px) !important;
  box-shadow:0 1px 0 rgba(217,164,65,0.20),0 4px 30px rgba(27,44,90,0.10) !important;
}
.site-header.menu-open .nav-link,
.site-header.menu-open .lang-btn,
.site-header.menu-open .brand-mark{color:var(--navy) !important;}
.site-header.menu-open .lang-btn.active{color:#fff !important;}
.site-header.menu-open .lang-switch{
  background:transparent !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  border-color:var(--gold) !important;
}
.site-header.menu-open .menu-toggle span{background:var(--navy) !important;}
.site-header.menu-open .brand-logo-light{display:block !important;}
.site-header.menu-open .brand-logo-dark{display:none !important;}
/* Mobile nav items inside open menu — guarantee navy regardless of header state */
.nav-list.open .nav-link{color:var(--navy) !important;}
.nav-list.open .nav-link.active{color:var(--gold) !important;}

/* === Mobile menu backdrop === */
.menu-backdrop{
  position:fixed;inset:0;z-index:99;
  background:rgba(10,22,56,0.45);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;
  transition:opacity 0.4s var(--ease-out);
}
.menu-backdrop.show{opacity:1;pointer-events:auto;}

/* ===========================================================
   HERO SECTIONS
   =========================================================== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;
  padding:120px var(--pad-x) 80px;
  background:var(--navy);
  color:#fff;
  overflow:hidden;
}
.hero.hero-paper{background:var(--paper);color:var(--navy);}
.hero-inner{
  position:relative;z-index:2;
  max-width:var(--max-w);width:100%;margin:0 auto;
}
.hero-eyebrow{
  font-family:var(--sans-en);
  font-size:12px;font-weight:700;
  letter-spacing:6px;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:28px;
  display:flex;align-items:center;gap:14px;
  opacity:0;transform:translateY(14px);
  animation:fadeUp 1.0s 0.35s var(--ease-out) forwards;
}
.hero-eyebrow::before{
  content:"";display:inline-block;width:0;height:1.5px;background:var(--gold);
  animation:lineDraw 1.1s 0.5s var(--ease-out) forwards;
}
.hero-title{
  position:relative;
  font-family:var(--serif-cn);
  font-weight:900;
  font-size:clamp(40px,7vw,88px);
  line-height:1.08;
  letter-spacing:6px;
  margin-bottom:28px;
  text-shadow:0 2px 30px rgba(10,22,56,0.55);
  opacity:0;
  transform:translateY(28px);
  filter:blur(10px);
  clip-path:inset(0 100% 0 0);
  animation:titleReveal 1.5s 0.6s var(--ease-out) forwards;
}
.hero-title::after{
  content:"";
  position:absolute;left:0;bottom:-14px;
  width:0;height:2px;
  background:linear-gradient(90deg,var(--gold) 0%,rgba(217,164,65,0.0) 100%);
  animation:lineGrow 1.3s 1.7s var(--ease-out) forwards;
}
.hero-title-en{
  font-family:var(--sans-en);
  font-weight:300;
  font-size:clamp(20px,3vw,32px);
  letter-spacing:6px;
  color:var(--gold);
  margin-bottom:38px;
  opacity:0;transform:translateY(22px);
  animation:fadeUp 1.2s 1.05s var(--ease-out) forwards;
}
.hero-deck{
  font-size:clamp(15px,1.4vw,18px);
  line-height:1.95;
  max-width:640px;
  color:rgba(255,255,255,0.92);
  margin-bottom:50px;
  text-shadow:0 1px 18px rgba(10,22,56,0.45);
  opacity:0;transform:translateY(22px);
  animation:fadeUp 1.2s 1.25s var(--ease-out) forwards;
}
.hero-paper .hero-deck{color:var(--gray-700);text-shadow:none;}
.hero-cta{
  display:flex;flex-wrap:wrap;gap:18px;
  opacity:0;transform:translateY(22px);
  animation:fadeUp 1.2s 1.45s var(--ease-out) forwards;
}
.hero-scroll{
  position:absolute;left:50%;bottom:36px;transform:translateX(-50%);
  z-index:3;
  font-family:var(--sans-en);font-size:10px;font-weight:600;
  letter-spacing:4px;color:rgba(255,255,255,0.7);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  opacity:0;animation:fadeUp 1.4s 1.8s var(--ease-out) forwards;
  pointer-events:none;
}
.hero-scroll::after{
  content:"";width:1px;height:42px;
  background:linear-gradient(to bottom,var(--gold) 0%,transparent 100%);
  transform-origin:top;
  animation:scrollPulse 2.2s var(--ease-in-out) infinite;
}
@keyframes titleReveal{
  0%{opacity:0;transform:translateY(28px);filter:blur(10px);clip-path:inset(0 100% 0 0);}
  55%{opacity:1;filter:blur(0);}
  100%{opacity:1;transform:translateY(0);filter:blur(0);clip-path:inset(0 0 0 0);}
}
@keyframes lineDraw{ to{ width:48px; } }
@keyframes lineGrow{ to{ width:140px; } }
@keyframes scrollPulse{
  0%{transform:scaleY(0.3);opacity:0.4;}
  50%{transform:scaleY(1);opacity:1;}
  100%{transform:scaleY(0.3);opacity:0.4;}
}

/* Hero background ornaments */
.hero-ornament{
  position:absolute;pointer-events:none;
  border:1px solid rgba(217,164,65,0.18);
  border-radius:50%;
}
.hero-ornament.o1{
  top:-200px;right:-200px;width:600px;height:600px;
  animation:slowSpin 60s linear infinite;
}
.hero-ornament.o2{
  bottom:-300px;left:-300px;width:700px;height:700px;
  border-color:rgba(255,255,255,0.06);
  animation:slowSpin 80s linear infinite reverse;
}
.hero-ornament.o3{
  top:50%;right:10%;width:80px;height:80px;
  border-color:var(--gold);
  animation:floatY 4s ease-in-out infinite;
}

/* === Buttons === */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:16px 36px;
  font-family:var(--sans-en);
  font-size:13px;font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  border:1px solid transparent;
  cursor:pointer;
  transition:all 0.4s var(--ease-out);
  position:relative;overflow:hidden;
}
.btn::after{
  content:"→";font-family:var(--sans-en);font-weight:400;
  transition:transform 0.4s var(--ease-out);
}
.btn:hover::after{transform:translateX(6px);}
.btn-gold{background:var(--gold);color:var(--navy);}
.btn-gold:hover{background:var(--navy);color:var(--gold);}
.btn-ghost{border-color:rgba(255,255,255,0.4);color:#fff;}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);}
.btn-navy{background:var(--navy);color:#fff;}
.btn-navy:hover{background:var(--gold);color:var(--navy);}
.btn-outline{border-color:var(--navy);color:var(--navy);}
.btn-outline:hover{background:var(--navy);color:#fff;}

/* ===========================================================
   SECTIONS
   =========================================================== */
.section{
  padding:var(--section-y) var(--pad-x);
  position:relative;
}
.section-paper{background:var(--paper);}
.section-navy{background:var(--navy);color:#fff;}
.section-deep{background:var(--navy-deep);color:#fff;}
.section-mark{background:linear-gradient(135deg,var(--paper) 0%,#fff 100%);}
.section-inner{max-width:var(--max-w);margin:0 auto;}

.section-eyebrow{
  font-family:var(--sans-en);
  font-size:11px;font-weight:700;
  letter-spacing:5px;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:18px;
  display:inline-flex;align-items:center;gap:14px;
}
.section-eyebrow::before{
  content:"";width:36px;height:1.2px;background:var(--gold);
}
.section-title{
  font-family:var(--serif-cn);
  font-weight:700;
  font-size:clamp(32px,4.5vw,56px);
  line-height:1.15;
  letter-spacing:2px;
  margin-bottom:24px;
  color:inherit;
}
.section-title-en{
  font-family:var(--serif-en);
  font-style:italic;
  font-weight:400;
  font-size:clamp(18px,2vw,24px);
  letter-spacing:3px;
  color:var(--gold);
  margin-bottom:32px;
}
.section-deck{
  font-size:clamp(15px,1.2vw,17px);
  line-height:1.9;
  max-width:780px;
  color:var(--gray-700);
  margin-bottom:60px;
}
.section-navy .section-deck,.section-deep .section-deck{color:rgba(255,255,255,0.85);}
.section-divider{
  width:60px;height:2px;background:var(--gold);margin-bottom:40px;
}

/* ===========================================================
   GRID & CARDS
   =========================================================== */
.grid{display:grid;gap:30px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

.card{
  background:#fff;
  padding:40px 36px;
  border:1px solid var(--gray-300);
  position:relative;
  transition:all 0.5s var(--ease-out);
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;left:0;top:0;
  width:3px;height:0;
  background:var(--gold);
  transition:height 0.5s var(--ease-out);
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 60px -20px rgba(27,44,90,0.18);
  border-color:var(--gold);
}
.card:hover::before{height:100%;}
.card-num{
  font-family:var(--sans-en);
  font-size:10px;font-weight:700;
  letter-spacing:3px;
  color:var(--gold);
  margin-bottom:18px;
  display:flex;align-items:center;gap:10px;
}
.card-num::before{
  content:"";width:24px;height:1px;background:var(--gold);
}
.card-title{
  font-family:var(--serif-cn);
  font-weight:700;
  font-size:24px;
  letter-spacing:1.5px;
  color:var(--navy);
  margin-bottom:8px;
}
.card-title-en{
  font-family:var(--serif-en);
  font-style:italic;
  font-size:14px;
  color:var(--gold);
  margin-bottom:22px;
  letter-spacing:1.5px;
}
.card-body{
  font-size:14px;
  line-height:1.85;
  color:var(--gray-700);
}
.card-link{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:28px;
  font-family:var(--sans-en);
  font-size:11px;font-weight:700;
  letter-spacing:3px;
  color:var(--navy);
  border-bottom:1px solid var(--gold);
  padding-bottom:6px;
  transition:gap 0.3s var(--ease-out),color 0.3s;
}
.card-link:hover{gap:14px;color:var(--gold);}
.card-link::after{content:"→";}

/* ===========================================================
   STAT COUNTERS
   =========================================================== */
.stats-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--gray-300);
  border-bottom:1px solid var(--gray-300);
}
.stat-cell{
  padding:50px 30px;
  text-align:left;
  border-right:1px solid var(--gray-300);
  position:relative;
}
.stat-cell:last-child{border-right:none;}
.stat-cell .num{
  font-family:var(--sans-en);
  font-size:clamp(36px,5vw,64px);
  font-weight:800;
  color:var(--navy);
  letter-spacing:-2px;
  line-height:1;
  margin-bottom:14px;
}
.section-navy .stat-cell .num,.section-deep .stat-cell .num{color:var(--gold);}
.stat-cell .lab{
  font-family:var(--sans-en);
  font-size:10px;font-weight:700;
  letter-spacing:3px;color:var(--gold);
  margin-bottom:6px;text-transform:uppercase;
}
.stat-cell .desc{
  font-size:13px;color:var(--gray-700);
}
.section-navy .stat-cell .desc,.section-deep .stat-cell .desc{color:rgba(255,255,255,0.7);}

/* ===========================================================
   FOUNDER CARDS
   =========================================================== */
.founder{
  display:grid;
  grid-template-columns:340px 1fr;
  gap:60px;
  margin-bottom:120px;
  align-items:start;
}
.founder.reverse{grid-template-columns:1fr 340px;}
.founder.reverse .founder-portrait{order:2;}
.founder-portrait{
  background:var(--navy);
  padding:48px 32px;
  position:relative;
  border-top:3px solid var(--gold);
  text-align:center;
  overflow:hidden;
}
.founder-portrait::before{
  content:"";
  position:absolute;
  top:-100px;right:-100px;width:240px;height:240px;
  border:1px solid rgba(217,164,65,0.18);border-radius:50%;
}
.portrait-circle{
  width:140px;height:140px;
  border-radius:50%;
  background:var(--gold);
  margin:0 auto 32px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif-cn);
  font-size:64px;font-weight:900;
  color:var(--navy);
  position:relative;
  z-index:2;
}
.founder-portrait .name{
  font-family:var(--serif-cn);
  font-weight:700;
  font-size:28px;color:#fff;
  letter-spacing:8px;margin-bottom:6px;
}
.founder-portrait .name-en{
  font-family:var(--sans-en);
  font-size:11px;font-weight:700;
  letter-spacing:4px;color:var(--gold);
  margin-bottom:20px;
}
.founder-portrait .role{
  font-family:var(--serif-cn);
  font-size:14px;color:var(--gold-light);
  letter-spacing:3px;
  padding-top:18px;
  border-top:1px solid rgba(217,164,65,0.3);
}
.founder-portrait .role-en{
  font-family:var(--serif-en);font-style:italic;
  font-size:12px;color:rgba(255,255,255,0.5);
  letter-spacing:1.5px;margin-top:4px;
}
.founder-bio .quote{
  font-family:var(--serif-cn);
  font-size:clamp(18px,1.6vw,22px);
  font-weight:500;
  line-height:1.7;
  color:var(--navy);
  padding-left:24px;
  border-left:3px solid var(--gold);
  margin-bottom:32px;
  font-style:italic;
}
.founder-bio h3{
  font-family:var(--serif-cn);
  font-weight:700;font-size:28px;
  color:var(--navy);
  letter-spacing:1.5px;
  margin-bottom:6px;
}
.founder-bio .role-line{
  font-family:var(--serif-en);
  font-style:italic;
  font-size:16px;color:var(--gold);
  margin-bottom:24px;letter-spacing:1.5px;
}
.founder-bio .story{
  font-size:15px;line-height:2.0;
  color:var(--gray-700);
  margin-bottom:18px;
}
.founder-bio .meta-grid{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:8px 24px;
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid var(--gray-300);
  font-size:14px;
}
.founder-bio .meta-grid dt{
  font-family:var(--sans-en);
  font-size:10px;font-weight:700;
  letter-spacing:2.5px;color:var(--gold);
  text-transform:uppercase;
  padding-top:4px;
}
.founder-bio .meta-grid dd{color:var(--gray-700);line-height:1.7;}

/* ===========================================================
   THREE-PILLAR (TRI-ENTITY)
   =========================================================== */
.pillars{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.pillar{
  background:#fff;
  padding:0;
  border:1px solid var(--gray-300);
  transition:all 0.5s var(--ease-out);
  overflow:hidden;
  position:relative;
}
.pillar:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 70px -20px rgba(27,44,90,0.20);
}
.pillar-head{
  background:var(--navy);
  padding:28px 32px 24px;
  color:#fff;
  position:relative;
}
.pillar-head.gold{background:var(--gold);color:var(--navy);}
.pillar-head.soft{background:var(--navy-soft);}
.pillar-head .label{
  font-family:var(--sans-en);
  font-size:10px;font-weight:700;
  letter-spacing:4px;
  color:var(--gold);
  margin-bottom:14px;
}
.pillar-head.gold .label{color:var(--navy);}
.pillar-head .name-cn{
  font-family:var(--serif-cn);
  font-weight:900;
  font-size:32px;
  letter-spacing:3px;
  margin-bottom:6px;
}
.pillar-head .name-en{
  font-family:var(--serif-en);
  font-style:italic;
  font-size:14px;
  letter-spacing:1.5px;
  opacity:0.7;
}
.pillar-body{padding:32px;}
.pillar-body .role{
  font-family:var(--sans-en);
  font-size:10px;font-weight:700;
  letter-spacing:3px;color:var(--gold);
  margin-bottom:14px;
}
.pillar-body .desc{
  font-size:14px;
  line-height:1.85;color:var(--gray-700);
  margin-bottom:24px;
}
.pillar-body .feat{
  display:flex;flex-direction:column;gap:10px;
  padding-top:20px;
  border-top:1px solid var(--gray-300);
  font-size:13px;color:var(--navy);
}
.pillar-body .feat li{
  position:relative;padding-left:18px;
}
.pillar-body .feat li::before{
  content:"";position:absolute;left:0;top:9px;
  width:6px;height:6px;background:var(--gold);
}

/* ===========================================================
   SERVICE / COURSE TABLES
   =========================================================== */
.service-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border:1px solid var(--gray-300);
  background:#fff;
}
.service-cell{
  padding:48px 36px;
  border-right:1px solid var(--gray-300);
  transition:background 0.4s var(--ease-out);
  cursor:default;
}
.service-cell:last-child{border-right:none;}
.service-cell:hover{background:var(--paper);}
.service-cell .ico{
  width:48px;height:48px;
  border:1.5px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sans-en);font-weight:900;font-size:14px;
  color:var(--gold);
  margin-bottom:24px;
  letter-spacing:1px;
  transition:all 0.4s var(--ease-out);
}
.service-cell:hover .ico{
  background:var(--gold);color:#fff;transform:rotate(45deg);
}
.service-cell:hover .ico>span{transform:rotate(-45deg);}
.service-cell .ico>span{display:inline-block;transition:transform 0.4s var(--ease-out);}

/* ===========================================================
   PILLAR ROW · Three-Pillar Service Matrix (CIS-refined)
   =========================================================== */
.pillar-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin-top:60px;
  border:1px solid rgba(217,164,65,0.22);
  background:linear-gradient(180deg,rgba(255,255,255,0.02) 0%,rgba(255,255,255,0.04) 100%);
}
.pillar-cell{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:56px 44px 48px;
  border-right:1px solid rgba(217,164,65,0.18);
  background:rgba(255,255,255,0.025);
  transition:background 0.5s var(--ease-out),transform 0.5s var(--ease-out);
  overflow:hidden;
}
.pillar-cell:last-child{border-right:none;}
.pillar-cell:hover{
  background:rgba(217,164,65,0.06);
}
.pillar-cell:hover .pillar-accent{transform:scaleY(1);}
.pillar-cell:hover .pillar-roman{color:var(--gold-light);transform:translateY(-2px);}

/* Top gold accent that rises on hover */
.pillar-accent{
  position:absolute;left:0;top:0;
  width:3px;height:100%;
  background:var(--gold);
  transform:scaleY(0);
  transform-origin:top center;
  transition:transform 0.6s var(--ease-out);
}

/* Header row: roman numeral + tag */
.pillar-cell .pc-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.pillar-roman{
  font-family:var(--serif-en);
  font-size:38px;
  font-weight:500;
  font-style:italic;
  line-height:1;
  color:var(--gold);
  letter-spacing:-1px;
  transition:color 0.4s var(--ease-out),transform 0.5s var(--ease-out);
}
.pillar-tag{
  font-family:var(--sans-en);
  font-size:11px;
  font-weight:700;
  letter-spacing:2.4px;
  color:rgba(255,255,255,0.6);
  text-transform:uppercase;
  white-space:nowrap;
}

/* Hairline separator beneath header */
.pillar-rule{
  width:42px;
  height:2px;
  background:var(--gold);
  margin:18px 0 22px;
}

/* Title block */
.pillar-title{
  font-family:var(--serif-cn);
  font-size:32px;
  font-weight:600;
  line-height:1.2;
  color:#fff;
  letter-spacing:0.5px;
  margin:0 0 6px;
}
[data-lang="en"] .pillar-title{
  font-family:var(--serif-en);
  font-style:italic;
  font-weight:500;
  font-size:34px;
  letter-spacing:-0.3px;
}
.pillar-subtitle{
  font-family:var(--serif-en);
  font-size:14px;
  font-style:italic;
  font-weight:400;
  letter-spacing:0.4px;
  color:var(--gold-light);
  margin-bottom:24px;
}

/* Body */
.pillar-cell .pc-body{
  font-family:var(--sans-cn);
  font-size:14.5px;
  line-height:1.85;
  color:rgba(255,255,255,0.78);
  margin:0 0 32px;
  letter-spacing:0.3px;
}
[data-lang="en"] .pillar-cell .pc-body{font-family:var(--sans-en);font-size:14px;}

/* Metadata grid: MODULES · HOURS · WEIGHT */
.pillar-meta{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin:auto 0 28px;
  padding:18px 0;
  border-top:1px solid rgba(217,164,65,0.22);
  border-bottom:1px solid rgba(217,164,65,0.22);
}
.meta-cell{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  border-right:1px solid rgba(217,164,65,0.15);
  padding-left:0;
}
.meta-cell:first-child{padding-left:0;}
.meta-cell:last-child{border-right:none;}
.pillar-meta dt{
  font-family:var(--sans-en);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:1.6px;
  color:rgba(255,255,255,0.45);
  text-transform:uppercase;
  margin:0;
}
.pillar-meta dd{
  font-family:var(--serif-en);
  font-size:24px;
  font-weight:500;
  font-style:italic;
  color:var(--gold-light);
  letter-spacing:-0.3px;
  margin:0;
  line-height:1;
}

/* Deliverable footer */
.pillar-deliverable{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.dlv-label{
  font-family:var(--sans-en);
  font-size:10px;
  font-weight:700;
  letter-spacing:2.4px;
  color:var(--gold);
  text-transform:uppercase;
  position:relative;
  padding-left:16px;
}
.dlv-label::before{
  content:"";
  position:absolute;
  left:0;top:50%;
  width:8px;height:1.5px;
  background:var(--gold);
  transform:translateY(-50%);
}
.dlv-text{
  font-family:var(--sans-cn);
  font-size:13.5px;
  font-weight:500;
  line-height:1.55;
  color:rgba(255,255,255,0.92);
  letter-spacing:0.3px;
}
[data-lang="en"] .dlv-text{font-family:var(--serif-en);font-style:italic;font-size:14.5px;font-weight:500;}

/* Responsive */
@media (max-width:980px){
  .pillar-row{grid-template-columns:1fr;}
  .pillar-cell{
    border-right:none;
    border-bottom:1px solid rgba(217,164,65,0.18);
    padding:44px 32px 38px;
  }
  .pillar-cell:last-child{border-bottom:none;}
  .pillar-roman{font-size:32px;}
  .pillar-title{font-size:26px;}
}

/* === Course Table === */
.course-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border:1px solid var(--gray-300);
  font-size:14px;
}
.course-table thead{background:var(--navy);color:#fff;}
.course-table th{
  padding:18px 22px;text-align:left;
  font-family:var(--sans-en);
  font-size:10px;font-weight:700;
  letter-spacing:3px;
  color:var(--gold);
  text-transform:uppercase;
}
.course-table td{
  padding:24px 22px;
  border-top:1px solid var(--gray-300);
  vertical-align:top;
}
.course-table tbody tr{transition:background 0.3s;}
.course-table tbody tr:hover{background:var(--paper);}
.course-table .code{
  font-family:var(--sans-en);font-weight:700;
  color:var(--gold);letter-spacing:1.5px;
}
.course-table .name-cn{
  font-family:var(--serif-cn);font-weight:600;
  color:var(--navy);font-size:15px;
}
.course-table .name-en{
  font-family:var(--serif-en);font-style:italic;
  color:var(--gray-500);font-size:12px;margin-top:2px;
}
.badge{
  display:inline-block;
  padding:4px 12px;
  font-family:var(--sans-en);font-size:10px;font-weight:700;
  letter-spacing:1.5px;
  color:#fff;
}
.badge-entry{background:var(--navy);}
.badge-pro{background:var(--navy-soft);}
.badge-elite{background:var(--gold);color:var(--navy);}

/* ===========================================================
   FORMS
   =========================================================== */
.form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}
.field{
  display:flex;flex-direction:column;
}
.field.span-2{grid-column:span 2;}
.field label{
  font-family:var(--sans-en);
  font-size:10px;font-weight:700;
  letter-spacing:2.5px;
  color:var(--gold);
  margin-bottom:10px;
  text-transform:uppercase;
}
.field input,.field textarea,.field select{
  border:none;
  border-bottom:1px solid var(--gray-300);
  background:transparent;
  padding:12px 0;
  font-size:15px;
  color:var(--navy);
  transition:border-color 0.3s;
}
.field textarea{min-height:140px;resize:vertical;font-family:inherit;}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-bottom-color:var(--gold);
}
.field .hint{
  font-size:11px;color:var(--gray-500);margin-top:6px;
}

/* ===========================================================
   TIMELINE
   =========================================================== */
.timeline{
  position:relative;
  padding-left:40px;
}
.timeline::before{
  content:"";
  position:absolute;left:8px;top:8px;bottom:8px;
  width:2px;background:var(--gold);
  opacity:0.3;
}
.tl-item{
  position:relative;
  padding-bottom:48px;
}
.tl-item::before{
  content:"";
  position:absolute;left:-39px;top:8px;
  width:18px;height:18px;
  background:var(--paper);
  border:2px solid var(--gold);
  border-radius:50%;
  transition:all 0.4s var(--ease-out);
}
.tl-item:hover::before{background:var(--gold);transform:scale(1.3);}
.tl-year{
  font-family:var(--sans-en);
  font-size:14px;font-weight:700;letter-spacing:3px;
  color:var(--gold);margin-bottom:6px;
}
.tl-title{
  font-family:var(--serif-cn);font-weight:700;
  font-size:20px;color:var(--navy);
  margin-bottom:8px;letter-spacing:1px;
}
.tl-body{font-size:14px;color:var(--gray-700);line-height:1.85;}

/* ===========================================================
   FAQ ACCORDION
   =========================================================== */
.faq{display:flex;flex-direction:column;gap:0;}
.faq-item{
  border-top:1px solid var(--gray-300);
}
.faq-item:last-child{border-bottom:1px solid var(--gray-300);}
.faq-q{
  width:100%;
  padding:28px 0;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  text-align:left;
  font-family:var(--serif-cn);
  font-weight:600;font-size:18px;
  color:var(--navy);letter-spacing:1px;
  transition:color 0.3s;
}
.faq-q:hover{color:var(--gold);}
.faq-q .plus{
  width:28px;height:28px;
  border:1px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sans-en);font-size:18px;color:var(--gold);
  flex-shrink:0;
  transition:all 0.4s var(--ease-out);
}
.faq-item.open .faq-q .plus{
  background:var(--gold);color:#fff;transform:rotate(45deg);
}
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height 0.5s var(--ease-out);
}
.faq-a-inner{
  padding:0 0 32px;
  font-size:15px;line-height:1.9;color:var(--gray-700);
  max-width:880px;
}
.faq-item.open .faq-a{max-height:500px;}

/* ===========================================================
   FOOTER
   =========================================================== */
.site-footer{
  background:var(--navy-deep);color:#fff;
  padding:80px var(--pad-x) 32px;
}
.footer-inner{
  max-width:var(--max-w);margin:0 auto;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:60px;
  padding-bottom:60px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.footer-brand .footer-logo{
  display:block;height:78px;width:auto;
  margin:-8px 0 20px -10px;
}
.footer-brand .tag{
  font-family:var(--serif-en);font-style:italic;
  color:var(--gold);font-size:13px;letter-spacing:2px;
  margin-bottom:24px;
}
.footer-brand p{
  font-size:13px;line-height:1.85;
  color:rgba(255,255,255,0.6);
}
.footer-col h5{
  font-family:var(--sans-en);
  font-size:11px;font-weight:700;
  letter-spacing:4px;color:var(--gold);
  margin-bottom:20px;text-transform:uppercase;
}
.footer-col ul{display:flex;flex-direction:column;gap:12px;}
.footer-col a{
  font-size:13px;color:rgba(255,255,255,0.7);
  transition:color 0.3s,padding-left 0.3s;
  display:inline-block;
}
.footer-col a:hover{color:var(--gold);padding-left:6px;}
.footer-bottom{
  padding-top:28px;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:20px;
}
.footer-bottom .copy{
  font-size:11px;color:rgba(255,255,255,0.4);
  letter-spacing:2px;
}
.footer-bottom .legal{
  font-family:var(--serif-en);font-style:italic;
  font-size:12px;color:var(--gold);letter-spacing:1.5px;
}

/* ===========================================================
   ANIMATIONS
   =========================================================== */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(30px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes fadeIn{
  from{opacity:0;}to{opacity:1;}
}
@keyframes slowSpin{
  from{transform:rotate(0deg);}to{transform:rotate(360deg);}
}
@keyframes floatY{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-20px);}
}
@keyframes scaleIn{
  from{opacity:0;transform:scale(0.92);}
  to{opacity:1;transform:scale(1);}
}
@keyframes shimmerLine{
  0%{transform:translateX(-100%);}
  100%{transform:translateX(100%);}
}
@keyframes pulseGold{
  0%,100%{box-shadow:0 0 0 0 rgba(217,164,65,0.45);}
  50%{box-shadow:0 0 0 14px rgba(217,164,65,0);}
}
@keyframes drawIn{
  from{stroke-dashoffset:1000;}
  to{stroke-dashoffset:0;}
}
@keyframes revealRight{
  from{opacity:0;transform:translateX(-30px);}
  to{opacity:1;transform:translateX(0);}
}
@keyframes glowEdge{
  0%,100%{border-color:rgba(217,164,65,0.3);}
  50%{border-color:rgba(217,164,65,0.85);}
}

/* === IntersectionObserver-driven reveals === */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 0.9s var(--ease-out),transform 0.9s var(--ease-out);}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal.delay-1{transition-delay:0.15s;}
.reveal.delay-2{transition-delay:0.3s;}
.reveal.delay-3{transition-delay:0.45s;}
.reveal.delay-4{transition-delay:0.6s;}
.reveal.delay-5{transition-delay:0.75s;}
.reveal-x{opacity:0;transform:translateX(-40px);transition:opacity 0.9s var(--ease-out),transform 0.9s var(--ease-out);}
.reveal-x.in{opacity:1;transform:translateX(0);}
.reveal-scale{opacity:0;transform:scale(0.94);transition:opacity 0.9s var(--ease-out),transform 0.9s var(--ease-out);}
.reveal-scale.in{opacity:1;transform:scale(1);}

/* ===========================================================
   IMAGERY · CIS Duotone Treatment
   =========================================================== */
.img-frame{
  position:relative;overflow:hidden;
  background:var(--navy);
  isolation:isolate;
}
.img-frame img{
  width:100%;height:100%;object-fit:cover;
  display:block;
  filter:grayscale(1) contrast(1.05) brightness(0.92);
  transition:transform 1.6s var(--ease-out),filter 0.8s var(--ease-out);
}
.img-frame::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(135deg,rgba(27,44,90,0.78) 0%,rgba(27,44,90,0.55) 50%,rgba(217,164,65,0.45) 100%);
  mix-blend-mode:multiply;
  pointer-events:none;
}
.img-frame::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,transparent 60%,rgba(10,22,56,0.55) 100%);
  pointer-events:none;
}
.img-frame:hover img{transform:scale(1.04);}
.img-frame.gold-tint::before{
  background:linear-gradient(135deg,rgba(27,44,90,0.6) 0%,rgba(217,164,65,0.5) 100%);
}
.img-frame.dark-tint::before{
  background:linear-gradient(180deg,rgba(10,22,56,0.4) 0%,rgba(10,22,56,0.85) 100%);
}
.img-frame.subtle::before{
  background:linear-gradient(135deg,rgba(27,44,90,0.4) 0%,rgba(217,164,65,0.25) 100%);
}

/* Hero background image · full viewport overlay */
.hero-bg{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;
}
.hero-slide{
  position:absolute;inset:0;z-index:0;
  opacity:0;
  animation:slideFade 14s var(--ease-in-out) infinite;
  will-change:opacity;
}
.hero-slide img{
  width:100%;height:100%;object-fit:cover;object-position:center 30%;
  filter:contrast(1.04) saturate(1.08) brightness(1.05);
  transform:scale(1.06);
  animation:kenBurns 14s var(--ease-in-out) infinite;
  will-change:transform;
}
.hero-slide-1{animation-delay:0s;}
.hero-slide-1 img{animation-delay:0s;}
.hero-slide-2{animation-delay:-7s;}
.hero-slide-2 img{animation-delay:-7s;}

@keyframes slideFade{
  0%, 45%   { opacity:1; }
  55%, 95%  { opacity:0; }
  100%      { opacity:1; }
}
@keyframes kenBurns{
  0%   { transform:scale(1.06) translate3d(0,0,0); }
  45%  { transform:scale(1.13) translate3d(-1.4%,-0.8%,0); }
  55%  { transform:scale(1.06) translate3d(1.2%,0.6%,0); }
  100% { transform:scale(1.06) translate3d(0,0,0); }
}

/* Hero pagination · slide progress pips */
.hero-pagination{
  position:absolute;left:var(--pad-x);bottom:42px;z-index:3;
  display:flex;gap:14px;align-items:center;
  opacity:0;
  animation:fadeUp 1.4s 1.95s var(--ease-out) forwards;
  pointer-events:none;
}
.hero-pagination .pip{
  position:relative;
  width:64px;height:1.5px;
  background:rgba(255,255,255,0.22);
  overflow:hidden;
}
.hero-pagination .pip::after{
  content:"";position:absolute;left:0;top:0;height:100%;width:0;
  background:linear-gradient(90deg,var(--gold) 0%,#f3d68a 100%);
  box-shadow:0 0 12px rgba(217,164,65,0.55);
  animation:pipFill 14s linear infinite;
}
.hero-pagination .pip-1::after{animation-delay:0s;}
.hero-pagination .pip-2::after{animation-delay:-7s;}

@keyframes pipFill{
  0%   { width:0; }
  50%  { width:100%; }
  50.5%{ width:0; }
  100% { width:0; }
}
/* CIS-aligned overlay · navy-900 → navy-deep → navy primary → gold accent */
.hero-bg::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse at 12% 78%, rgba(217,164,65,0.14) 0%, transparent 50%),
    radial-gradient(ellipse at 88% 18%, rgba(217,164,65,0.08) 0%, transparent 45%);
}
.hero-bg::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    /* horizontal · CIS three-tone navy descent */
    linear-gradient(100deg,
      rgba(10,22,56,0.78) 0%,      /* --navy-900 · anchor */
      rgba(19,32,74,0.60) 24%,     /* --navy-deep · mid-shadow */
      rgba(27,44,90,0.36) 50%,     /* --navy · primary brand */
      rgba(27,44,90,0.12) 78%,
      rgba(27,44,90,0.00) 100%),
    /* vertical · paper-edge vignette for legibility */
    linear-gradient(to bottom,
      rgba(10,22,56,0.32) 0%,
      rgba(10,22,56,0.00) 22%,
      rgba(10,22,56,0.00) 72%,
      rgba(10,22,56,0.42) 100%);
}
@keyframes heroZoom{
  0%{transform:scale(1.06) translate3d(0,0,0);}
  100%{transform:scale(1.14) translate3d(-1.2%,-0.8%,0);}
}
@keyframes slowZoom{
  from{transform:scale(1.02);}
  to{transform:scale(1.12);}
}

/* Founder portrait override · use real image */
.founder-portrait .portrait-img{
  width:100%;aspect-ratio:3/4;
  margin:0 auto 24px;
  position:relative;z-index:2;overflow:hidden;
  background:var(--navy-deep);
}
.founder-portrait .portrait-img img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.05);
  transition:transform 1.6s var(--ease-out),filter 0.8s;
}
.founder-portrait .portrait-img::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(27,44,90,0.25) 0%,rgba(217,164,65,0.35) 100%);
  mix-blend-mode:multiply;pointer-events:none;
}
.founder-portrait:hover .portrait-img img{transform:scale(1.05);filter:grayscale(0.7) contrast(1.08);}

/* Section background image · subtle ambient */
.section-bg{position:relative;overflow:hidden;}
.section-bg .bg-img{
  position:absolute;inset:0;z-index:0;opacity:0.18;
  filter:grayscale(1) contrast(1.1);
}
.section-bg .bg-img img{width:100%;height:100%;object-fit:cover;}
.section-bg>*:not(.bg-img){position:relative;z-index:1;}

/* ===========================================================
   PRECISION COMPONENTS · Animated micro-elements
   =========================================================== */
/* Shimmer accent line under hero/title */
.accent-line{
  position:relative;display:block;
  height:1px;width:80px;background:rgba(217,164,65,0.25);
  overflow:hidden;
}
.accent-line::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  animation:shimmerLine 2.6s var(--ease-in-out) infinite;
}

/* Vertical CIS index bars (left of titles) */
.title-bar{
  display:inline-block;width:4px;height:36px;
  background:var(--gold);margin-right:20px;
  vertical-align:middle;
  animation:fadeUp 0.9s var(--ease-out) both;
}

/* Number badge with pulse */
.num-pill{
  display:inline-flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:50%;
  background:var(--gold);color:var(--navy);
  font-family:var(--sans-en);font-weight:900;font-size:18px;
  letter-spacing:0;
  animation:pulseGold 2.6s var(--ease-out) infinite;
}

/* Card · lift-on-hover precision */
.card-lift{
  position:relative;background:#fff;border:1px solid var(--gray-300);
  padding:40px 32px;transition:transform 0.5s var(--ease-out),box-shadow 0.5s var(--ease-out),border-color 0.5s;
  overflow:hidden;
}
.card-lift::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform 0.6s var(--ease-out);
}
.card-lift:hover{
  transform:translateY(-8px);
  border-color:var(--gold);
  box-shadow:0 30px 70px -25px rgba(27,44,90,0.18);
}
.card-lift:hover::before{transform:scaleX(1);}

/* Hover-glow chip */
.chip{
  display:inline-block;padding:6px 14px;
  font-family:var(--sans-en);font-size:11px;font-weight:600;letter-spacing:2px;
  color:var(--gold);border:1px solid rgba(217,164,65,0.4);
  border-radius:2px;margin:2px;background:transparent;
  transition:all 0.4s var(--ease-out);
}
.chip:hover{background:var(--gold);color:var(--navy);}

/* Capability tile · shows rank number on hover */
.cap-tile{
  position:relative;background:#fff;border:1px solid var(--gray-300);
  padding:36px 32px;overflow:hidden;
  transition:all 0.5s var(--ease-out);
}
.cap-tile .cap-rank{
  position:absolute;right:-10px;top:-30px;
  font-family:var(--serif-en);font-style:italic;font-weight:300;
  font-size:140px;color:var(--gold-pale);line-height:1;
  pointer-events:none;transition:all 0.6s var(--ease-out);
  opacity:0.8;
}
.cap-tile:hover{transform:translateY(-6px);border-color:var(--gold);}
.cap-tile:hover .cap-rank{transform:translate(-6px,-6px) rotate(-4deg);color:var(--gold);opacity:0.18;}
.cap-tile h4{
  font-family:var(--serif-cn);font-weight:700;font-size:22px;
  color:var(--navy);margin-bottom:8px;letter-spacing:1px;
  position:relative;z-index:2;
}
.cap-tile .cap-en{
  font-family:var(--serif-en);font-style:italic;color:var(--gold);
  font-size:14px;margin-bottom:18px;letter-spacing:1px;
  position:relative;z-index:2;
}
.cap-tile p{
  font-size:14px;color:var(--gray-700);line-height:1.85;
  position:relative;z-index:2;
}

/* Roadmap step · vertical stepper */
.stepper{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--gray-300);background:#fff;}
.step{
  padding:40px 32px;border-right:1px solid var(--gray-300);
  position:relative;transition:background 0.4s;
}
.step:last-child{border-right:none;}
.step:hover{background:var(--paper);}
.step .step-num{
  font-family:var(--serif-en);font-style:italic;font-weight:300;
  font-size:48px;color:var(--gold);line-height:1;margin-bottom:16px;
}
.step h4{
  font-family:var(--serif-cn);font-weight:700;font-size:20px;
  color:var(--navy);margin-bottom:10px;letter-spacing:1px;
}
.step p{font-size:14px;color:var(--gray-700);line-height:1.85;}

/* Marquee logos */
.marquee{
  overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{
  display:flex;gap:80px;width:max-content;
  animation:marqueeRoll 40s linear infinite;
}
@keyframes marqueeRoll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.marquee-item{
  font-family:var(--serif-cn);font-weight:600;font-size:18px;
  color:var(--gray-500);letter-spacing:2px;
  padding:14px 28px;border:1px solid var(--gray-300);
  white-space:nowrap;flex-shrink:0;
}

/* Process connector dots */
.connector{
  height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);
  margin:24px 0;
}

/* Map block (contact) */
.map-block{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 100%);
  color:#fff;padding:48px;position:relative;overflow:hidden;
  border-top:3px solid var(--gold);
}
.map-block::before{
  content:"";position:absolute;right:-80px;bottom:-80px;
  width:300px;height:300px;border:1px solid rgba(217,164,65,0.15);border-radius:50%;
}
.map-block::after{
  content:"";position:absolute;right:-40px;bottom:-40px;
  width:220px;height:220px;border:1px solid rgba(217,164,65,0.08);border-radius:50%;
}
.map-block h3{
  font-family:var(--serif-cn);font-weight:700;font-size:24px;
  color:#fff;margin-bottom:6px;letter-spacing:2px;
}
.map-block .sub{
  font-family:var(--serif-en);font-style:italic;
  color:var(--gold);font-size:14px;letter-spacing:1.5px;margin-bottom:32px;
}
.map-block dl{display:grid;grid-template-columns:120px 1fr;gap:18px 24px;font-size:14px;}
.map-block dt{font-family:var(--sans-en);font-size:10px;font-weight:700;letter-spacing:2.5px;color:var(--gold);padding-top:4px;}
.map-block dd{color:rgba(255,255,255,0.9);line-height:1.7;}

/* Partner-type card (cooperation) */
.partner-card{
  position:relative;background:#fff;border:1px solid var(--gray-300);
  padding:48px 36px;overflow:hidden;cursor:default;
  transition:all 0.6s var(--ease-out);
}
.partner-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--navy);transition:width 0.6s var(--ease-out);
  z-index:0;
}
.partner-card>*{position:relative;z-index:1;transition:color 0.5s var(--ease-out);}
.partner-card:hover{border-color:var(--navy);}
.partner-card:hover::before{width:100%;}
.partner-card:hover .partner-num,
.partner-card:hover .partner-title-cn,
.partner-card:hover .partner-title-en,
.partner-card:hover .partner-body,
.partner-card:hover .partner-feat li{color:#fff;}
.partner-card:hover .partner-feat li::before{background:var(--gold);}
.partner-num{
  font-family:var(--serif-en);font-style:italic;font-weight:300;
  font-size:64px;line-height:1;color:var(--gold);margin-bottom:24px;
}
.partner-title-cn{
  font-family:var(--serif-cn);font-weight:700;font-size:26px;
  color:var(--navy);margin-bottom:6px;letter-spacing:2px;
}
.partner-title-en{
  font-family:var(--serif-en);font-style:italic;font-size:14px;
  color:var(--gold);letter-spacing:1.5px;margin-bottom:24px;
}
.partner-body{
  font-size:14px;color:var(--gray-700);line-height:1.85;margin-bottom:24px;
}
.partner-feat{
  display:flex;flex-direction:column;gap:10px;
  padding-top:20px;border-top:1px solid rgba(0,0,0,0.08);
  font-size:13px;color:var(--gray-700);
}
.partner-card:hover .partner-feat{border-top-color:rgba(255,255,255,0.15);}
.partner-feat li{position:relative;padding-left:18px;transition:color 0.5s;}
.partner-feat li::before{
  content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
  background:var(--gold);transition:background 0.4s;
}

/* ===========================================================
   UTILITIES
   =========================================================== */
.text-center{text-align:center;}
.text-gold{color:var(--gold);}
.text-navy{color:var(--navy);}
.mb-0{margin-bottom:0;}
.mt-3{margin-top:24px;}
.mt-5{margin-top:40px;}
.lang-zh{display:inline;}
.lang-en{display:none;}
body[data-lang="en"] .lang-zh{display:none;}
body[data-lang="en"] .lang-en{display:inline;}

/* Block-level lang variants */
.block-zh{display:block;}
.block-en{display:none;}
body[data-lang="en"] .block-zh{display:none;}
body[data-lang="en"] .block-en{display:block;}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .stats-row{grid-template-columns:repeat(2,1fr);}
  .stat-cell:nth-child(2){border-right:none;}
  .stat-cell:nth-child(1),.stat-cell:nth-child(2){border-bottom:1px solid var(--gray-300);}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px;}
}
@media (max-width:880px){
  :root{--header-h:64px;}
  .stepper{grid-template-columns:1fr;}
  .step{border-right:none;border-bottom:1px solid var(--gray-300);}
  .step:last-child{border-bottom:none;}
  .map-block dl{grid-template-columns:90px 1fr;}
  .menu-toggle{display:flex;}
  .nav-list{
    position:fixed;top:64px;left:0;right:0;
    background:var(--paper);
    flex-direction:column;align-items:stretch;
    padding:24px var(--pad-x) 28px;
    gap:0;
    transform:translateY(-110%);opacity:0;
    transition:transform 0.5s var(--ease-out),opacity 0.35s var(--ease-out);
    box-shadow:0 24px 50px rgba(27,44,90,0.12);
    border-top:1px solid rgba(217,164,65,0.22);
    border-bottom:2px solid var(--gold);
    list-style:none;
  }
  .nav-list.open{transform:translateY(0);opacity:1;}
  .nav-list li{
    opacity:0;transform:translateY(-8px);
    transition:opacity 0.35s var(--ease-out),transform 0.45s var(--ease-out);
  }
  .nav-list.open li{opacity:1;transform:translateY(0);}
  .nav-list.open li:nth-child(1){transition-delay:0.10s;}
  .nav-list.open li:nth-child(2){transition-delay:0.16s;}
  .nav-list.open li:nth-child(3){transition-delay:0.22s;}
  .nav-list.open li:nth-child(4){transition-delay:0.28s;}
  .nav-list.open li:nth-child(5){transition-delay:0.34s;}
  .nav-list .nav-link{
    position:relative;
    width:100%;padding:18px 18px 18px 22px;
    border-bottom:1px solid var(--gray-300);
    font-size:15px;letter-spacing:1.5px;color:var(--navy);
    display:flex;align-items:center;justify-content:space-between;
  }
  .nav-list .nav-link::before{
    content:"";
    position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0);
    width:3px;height:24px;
    background:var(--gold);
    border-radius:0 2px 2px 0;
    transform-origin:center;
    transition:transform 0.35s var(--ease-out);
  }
  .nav-list .nav-link::after{
    content:"→";
    position:static;width:auto;height:auto;background:none;
    font-family:var(--sans-en);font-size:14px;font-weight:400;
    color:var(--gold);
    opacity:0;transform:translateX(-6px);
    transition:opacity 0.3s var(--ease-out),transform 0.3s var(--ease-out);
  }
  .nav-list .nav-link:hover::before,
  .nav-list .nav-link.active::before{transform:translateY(-50%) scaleY(1);}
  .nav-list .nav-link:hover::after,
  .nav-list .nav-link.active::after{opacity:1;transform:translateX(0);}
  .nav-list .nav-link.active{color:var(--gold);font-weight:700;}
  .nav-list .nav-link:last-child{border-bottom:none;}
  .nav-list .nav-link .lang-zh{font-size:16px;letter-spacing:0.10em;}
  .grid-2,.grid-3,.grid-4,.pillars,.service-row{grid-template-columns:1fr;}
  .service-cell{border-right:none;border-bottom:1px solid var(--gray-300);}
  .service-cell:last-child{border-bottom:none;}
  .stats-row{grid-template-columns:1fr;}
  .stat-cell{border-right:none;border-bottom:1px solid var(--gray-300);}
  .stat-cell:last-child{border-bottom:none;}
  .founder,.founder.reverse{
    grid-template-columns:1fr;gap:32px;margin-bottom:80px;
  }
  .founder.reverse .founder-portrait{order:0;}
  .form{grid-template-columns:1fr;}
  .field.span-2{grid-column:span 1;}
  .footer-grid{grid-template-columns:1fr;gap:40px;}
  .course-table thead{display:none;}
  .course-table,.course-table tbody,.course-table tr,.course-table td{display:block;width:100%;}
  .course-table tr{
    border:1px solid var(--gray-300);
    margin-bottom:14px;padding:18px;
  }
  .course-table td{
    border-top:none;padding:6px 0;
  }
  .footer-bottom{flex-direction:column;text-align:center;}
}
@media (max-width:560px){
  .hero{min-height:80vh;padding:100px var(--pad-x) 60px;}
  .lang-switch{transform:scale(0.85);}
  .btn{padding:14px 28px;font-size:11px;}
  .founder-bio .meta-grid{grid-template-columns:1fr;gap:4px 0;}
  .founder-bio .meta-grid dt{margin-top:14px;}
}

/* ===========================================================
   ONLINE LEARNING PLATFORM · CIS-aligned (navy + gold)
   =========================================================== */
.section-learning{
  position:relative;
  padding:140px var(--pad-x) 140px;
  background:
    radial-gradient(ellipse at 75% 50%, rgba(217,164,65,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(27,44,90,0.55) 0%, transparent 60%),
    linear-gradient(180deg, #0A1638 0%, #13204A 50%, #0A1638 100%);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
/* faint grid backdrop · CIS gold @ 6% */
.learning-grid-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(217,164,65,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217,164,65,0.06) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 75% 50%, #000 0%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at 75% 50%, #000 0%, transparent 70%);
  opacity:0.7;
}
/* AI neural orb · right-side decorative */
.learning-orb{
  position:absolute;z-index:0;pointer-events:none;
  right:-120px;top:50%;transform:translateY(-50%);
  width:min(720px,55vw);height:min(720px,55vw);
  opacity:0.95;
  filter:drop-shadow(0 0 60px rgba(217,164,65,0.18));
}
.learning-orb svg{width:100%;height:100%;display:block;animation:orbSpin 60s linear infinite;}
.learning-orb .orb-rings circle{
  fill:none;stroke:rgba(217,164,65,0.22);stroke-width:1;
  transform-origin:center;
  animation:orbPulse 4.5s var(--ease-in-out) infinite;
}
.learning-orb .orb-rings circle:nth-child(1){animation-delay:0s;}
.learning-orb .orb-rings circle:nth-child(2){animation-delay:0.6s;}
.learning-orb .orb-rings circle:nth-child(3){animation-delay:1.2s;}
.learning-orb .orb-rings circle:nth-child(4){animation-delay:1.8s;}
.learning-orb .orb-mesh line{
  stroke:rgba(217,164,65,0.32);stroke-width:0.6;
  stroke-dasharray:6 8;
  animation:meshFlow 6s linear infinite;
}
.learning-orb .orb-mesh line:nth-child(odd){animation-direction:reverse;animation-duration:7.5s;}
.learning-orb .orb-nodes circle{
  fill:#D9A441;
  filter:drop-shadow(0 0 8px rgba(217,164,65,0.7));
  animation:nodeBlink 3s var(--ease-in-out) infinite;
  transform-origin:center;
  transform-box:fill-box;
}
.learning-orb .orb-nodes .n1{animation-delay:0s;}
.learning-orb .orb-nodes .n2{animation-delay:0.4s;}
.learning-orb .orb-nodes .n3{animation-delay:0.8s;}
.learning-orb .orb-nodes .n4{animation-delay:1.2s;}
.learning-orb .orb-nodes .n5{animation-delay:1.6s;}
.learning-orb .orb-nodes .n6{animation-delay:2.0s;}
.learning-orb .orb-core{
  fill:#D9A441;
  filter:drop-shadow(0 0 22px rgba(217,164,65,0.85));
  transform-origin:300px 300px;
  animation:coreBreathe 3.2s var(--ease-in-out) infinite;
}
.learning-orb .orb-core-halo{
  fill:none;stroke:rgba(217,164,65,0.35);stroke-width:1;
  transform-origin:300px 300px;
  animation:coreHalo 3.2s var(--ease-in-out) infinite;
}
.learning-orb .orb-particles circle{
  fill:rgba(232,192,120,0.7);
  animation:floatParticle 8s var(--ease-in-out) infinite;
}
.learning-orb .orb-particles circle:nth-child(2){animation-delay:1.2s;animation-duration:9.5s;}
.learning-orb .orb-particles circle:nth-child(3){animation-delay:2.4s;animation-duration:10s;}
.learning-orb .orb-particles circle:nth-child(4){animation-delay:3.6s;animation-duration:8.5s;}
.learning-orb .orb-particles circle:nth-child(5){animation-delay:4.8s;animation-duration:11s;}

@keyframes orbSpin{ from{transform:rotate(0);} to{transform:rotate(360deg);} }
@keyframes orbPulse{
  0%,100%{ transform:scale(1); opacity:0.45; }
  50%    { transform:scale(1.06); opacity:0.85; }
}
@keyframes meshFlow{
  to{ stroke-dashoffset:-56; }
}
@keyframes nodeBlink{
  0%,100%{ transform:scale(1); opacity:0.85; }
  50%    { transform:scale(1.45); opacity:1; }
}
@keyframes coreBreathe{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.18); }
}
@keyframes coreHalo{
  0%,100%{ transform:scale(1); opacity:0.5; }
  50%    { transform:scale(1.6); opacity:0; }
}
@keyframes floatParticle{
  0%,100%{ transform:translate3d(0,0,0); opacity:0.4; }
  50%    { transform:translate3d(-12px,-18px,0); opacity:1; }
}

/* Layout */
.section-learning .section-inner{position:relative;z-index:2;}
.learning-layout{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:80px;align-items:center;
}
.learning-copy .section-deck{max-width:560px;}

/* Stats row */
.learning-stats{
  display:grid;grid-template-columns:repeat(3,auto);
  gap:48px;
  margin:42px 0 44px;
  padding:24px 0;
  border-top:1px solid rgba(217,164,65,0.22);
  border-bottom:1px solid rgba(217,164,65,0.22);
  max-width:520px;
}
.ls-cell{display:flex;flex-direction:column;gap:6px;}
.ls-num{
  font-family:var(--sans-en);
  font-size:36px;font-weight:300;letter-spacing:1px;
  color:var(--gold);
  line-height:1;
  display:inline-flex;align-items:baseline;gap:2px;
}
.ls-num sup{font-size:14px;font-weight:600;margin-left:2px;color:var(--gold-light);}
.ls-num small{font-size:12px;font-weight:600;letter-spacing:1.5px;color:rgba(232,192,120,0.85);margin-left:4px;text-transform:uppercase;}
.ls-lab{
  font-family:var(--sans-en),var(--sans-cn);
  font-size:11px;font-weight:600;letter-spacing:2.5px;
  color:rgba(255,255,255,0.6);
  text-transform:uppercase;
}
.ls-lab .lang-zh{font-family:var(--sans-cn);letter-spacing:0.12em;}

/* CTA row */
.learning-cta-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.learning-cta{position:relative;overflow:hidden;}
.learning-cta::before{
  content:"";
  position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.45) 50%,transparent 100%);
  transition:none;
}
.learning-cta:hover::before{animation:btnSheen 0.9s var(--ease-out) forwards;}
@keyframes btnSheen{ to{ left:140%; } }
.learning-note{
  font-family:var(--sans-cn),var(--sans-en);
  font-size:12px;letter-spacing:0.06em;
  color:rgba(255,255,255,0.55);
}

/* Module cards */
.learning-modules{
  display:flex;flex-direction:column;gap:18px;
  position:relative;z-index:2;
}
.learning-card{
  position:relative;
  display:block;
  padding:28px 30px 26px;
  border:1px solid rgba(217,164,65,0.20);
  background:
    linear-gradient(135deg, rgba(27,44,90,0.45) 0%, rgba(10,22,56,0.65) 100%);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:#fff;
  transition:transform 0.5s var(--ease-out),border-color 0.5s var(--ease-out),background 0.5s var(--ease-out);
  overflow:hidden;
}
.learning-card::before{
  content:"";
  position:absolute;left:0;top:0;width:3px;height:100%;
  background:linear-gradient(180deg, var(--gold) 0%, transparent 100%);
  transform:scaleY(0);transform-origin:top;
  transition:transform 0.6s var(--ease-out);
}
.learning-card::after{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(ellipse at top right, rgba(217,164,65,0.12), transparent 55%);
  opacity:0;
  transition:opacity 0.5s var(--ease-out);
  pointer-events:none;
}
.learning-card:hover{
  transform:translateX(6px);
  border-color:rgba(217,164,65,0.55);
  background:
    linear-gradient(135deg, rgba(27,44,90,0.65) 0%, rgba(10,22,56,0.85) 100%);
}
.learning-card:hover::before{transform:scaleY(1);}
.learning-card:hover::after{opacity:1;}
.lc-num{
  position:absolute;right:24px;top:22px;
  font-family:var(--sans-en);
  font-size:48px;font-weight:200;letter-spacing:0;
  color:rgba(217,164,65,0.18);
  line-height:1;
  transition:color 0.5s var(--ease-out);
}
.learning-card:hover .lc-num{color:rgba(217,164,65,0.45);}
.lc-tag{
  font-family:var(--sans-en);
  font-size:10px;font-weight:700;letter-spacing:3px;
  color:var(--gold);
  margin-bottom:10px;
}
.lc-title{
  font-family:var(--serif-cn);
  font-size:24px;font-weight:700;letter-spacing:2px;
  color:#fff;
  margin-bottom:10px;
}
.lc-title .lang-zh{font-family:var(--serif-cn);letter-spacing:0.10em;}
.lc-title .lang-en{font-family:var(--sans-en);font-weight:600;letter-spacing:1px;}
.lc-body{
  font-family:var(--sans-cn),var(--sans-en);
  font-size:13.5px;line-height:1.85;
  color:rgba(255,255,255,0.78);
  margin-bottom:14px;
  max-width:88%;
}
.lc-meta{
  display:flex;gap:10px;
  font-family:var(--sans-en),var(--sans-cn);
  font-size:11px;font-weight:600;letter-spacing:1.5px;
  color:rgba(232,192,120,0.85);
  text-transform:uppercase;
}
.lc-meta .lang-zh{font-family:var(--sans-cn);letter-spacing:0.08em;}
.lc-arrow{
  position:absolute;right:24px;bottom:22px;
  font-family:var(--sans-en);font-size:20px;
  color:var(--gold);
  opacity:0;transform:translateX(-6px);
  transition:opacity 0.4s var(--ease-out),transform 0.4s var(--ease-out);
}
.learning-card:hover .lc-arrow{opacity:1;transform:translateX(0);}

/* Responsive */
@media (max-width:1024px){
  .learning-layout{grid-template-columns:1fr;gap:60px;}
  .learning-orb{right:-30%;top:8%;transform:none;width:min(620px,90vw);height:min(620px,90vw);opacity:0.45;}
  .learning-grid-bg{mask-image:radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%);
    -webkit-mask-image:radial-gradient(ellipse at 50% 30%, #000 0%, transparent 70%);}
}
@media (max-width:680px){
  .section-learning{padding:100px var(--pad-x) 100px;}
  .learning-stats{grid-template-columns:repeat(3,1fr);gap:18px;}
  .ls-num{font-size:28px;}
  .lc-title{font-size:20px;}
  .lc-num{font-size:38px;right:20px;top:18px;}
  .learning-card{padding:24px 24px 22px;}
}
@media (prefers-reduced-motion:reduce){
  .learning-orb svg,
  .learning-orb .orb-rings circle,
  .learning-orb .orb-mesh line,
  .learning-orb .orb-nodes circle,
  .learning-orb .orb-core,
  .learning-orb .orb-core-halo,
  .learning-orb .orb-particles circle{animation:none;}
}