/* =========================================================
   Institute of New Energy, Dongguan — one-page site
   Palette: deep emerald + lime energy accent, mint highlights
   ========================================================= */
:root{
  --ink:#0a1f17;
  --forest-900:#06231a;
  --forest-800:#0b3d2c;
  --forest-700:#0e4d38;
  --emerald-600:#13795a;
  --emerald-500:#16a06f;
  --emerald-400:#22b67e;
  --lime:#a3e635;
  --lime-deep:#7bbf2a;
  --mint:#cff3e3;
  --paper:#f5faf7;
  --paper-2:#eef6f1;
  --card:#ffffff;
  --line:#dde9e2;
  --text:#15241d;
  --muted:#5a6b62;
  --muted-light:#9fd0bd;

  --maxw:1140px;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 18px 40px -24px rgba(7,38,28,.45);
  --shadow-soft:0 8px 24px -16px rgba(7,38,28,.4);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --serif:Georgia,"Times New Roman","Songti SC",serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;font-family:var(--font);color:var(--text);background:var(--paper);
  line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--emerald-600);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.15;margin:0 0 .4em;font-weight:700}
p{margin:0 0 1rem}
ul{margin:0;padding:0}

.wrap{width:min(var(--maxw),92vw);margin-inline:auto}
.visually-hidden,.skip-link{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link:focus{position:fixed;top:12px;left:12px;width:auto;height:auto;clip:auto;
  background:var(--lime);color:var(--ink);padding:.6rem 1rem;border-radius:10px;z-index:100;font-weight:700}

:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:6px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:1rem;
  padding:.85rem 1.5rem;border-radius:999px;transition:transform .15s ease,box-shadow .2s ease,background .2s ease;
  border:1.5px solid transparent;cursor:pointer}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn--primary{background:var(--lime);color:var(--ink);box-shadow:0 10px 26px -12px rgba(163,230,53,.8)}
.btn--primary:hover{background:#b6ef52}
.btn--ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* ---------- Header / nav ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(6,35,26,.82);
  backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px}
.brand{display:flex;align-items:center;gap:.7rem;color:#fff}
.brand:hover{text-decoration:none}
.brand__mark{border-radius:9px}
.brand__text{display:flex;flex-direction:column;line-height:1.15}
.brand__text strong{font-size:1.02rem;letter-spacing:.2px}
.brand__text span{font-size:.74rem;color:var(--muted-light);letter-spacing:.3px}

.nav-menu{display:flex;align-items:center;gap:.35rem;list-style:none}
.nav-menu a{color:#e7f3ec;font-weight:600;font-size:.95rem;padding:.5rem .85rem;border-radius:999px;transition:background .2s,color .2s}
.nav-menu a:hover{background:rgba(255,255,255,.1);text-decoration:none}
.nav-menu a.is-active{color:var(--lime)}
.nav-cta{background:var(--emerald-500);color:#fff !important}
.nav-cta:hover{background:var(--emerald-400)}
.nav-toggle{display:none;background:none;border:0;padding:.4rem;cursor:pointer}
.nav-toggle__bars,.nav-toggle__bars::before,.nav-toggle__bars::after{display:block;width:24px;height:2.5px;background:#fff;border-radius:2px;transition:transform .25s,opacity .2s}
.nav-toggle__bars{position:relative}
.nav-toggle__bars::before,.nav-toggle__bars::after{content:"";position:absolute;left:0}
.nav-toggle__bars::before{top:-7px}
.nav-toggle__bars::after{top:7px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;color:#eaf6ef;overflow:hidden;
  background:linear-gradient(160deg,#0b3d2c 0%,#072a1f 55%,#06231a 100%)}
.hero__bg{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(640px 420px at 88% 8%,rgba(34,182,126,.35),transparent 60%),
    radial-gradient(560px 480px at 102% 92%,rgba(16,110,80,.45),transparent 60%),
    radial-gradient(420px 360px at -5% 88%,rgba(163,230,53,.12),transparent 60%)}
.hero__grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:2.5rem;align-items:center;
  padding:clamp(3rem,7vw,6rem) 0 clamp(3.5rem,7vw,6.5rem)}
.kicker{display:inline-block;font-size:.82rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lime);margin:0 0 1rem;padding:.4rem .9rem;border:1px solid rgba(163,230,53,.4);border-radius:999px}
.hero h1{font-size:clamp(2.4rem,5.2vw,3.9rem);letter-spacing:-.5px;color:#fff;margin-bottom:.25rem}
.hero__zh{font-size:clamp(1.1rem,2.4vw,1.5rem);color:var(--mint);font-weight:600;letter-spacing:.18em;margin:0 0 1.3rem}
.hero__lead{font-size:1.12rem;color:#d4ece0;max-width:36ch;margin-bottom:1.5rem}
.hero__lead strong{color:#fff}
.hero__chips{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;margin:0 0 1.9rem}
.hero__chips li{font-size:.84rem;font-weight:600;color:#dff3e8;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);padding:.42rem .85rem;border-radius:999px}
.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem}
.hero__viz{justify-self:center;width:min(380px,80%)}
.hero__viz svg{width:100%;height:auto;filter:drop-shadow(0 24px 50px rgba(0,0,0,.45))}
.orbit-node{transform-box:fill-box;transform-origin:center}

/* ---------- Stat band ---------- */
.facts{background:var(--forest-900);color:#fff;border-top:1px solid rgba(255,255,255,.07)}
.facts__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;padding:2.4rem 0}
.fact{text-align:center;padding:.4rem .5rem;border-radius:14px}
.fact__num{font-size:clamp(2rem,4vw,2.9rem);font-weight:800;color:var(--lime);line-height:1;letter-spacing:-1px;
  font-variant-numeric:tabular-nums}
.fact__num small{font-size:.6em;color:var(--mint);font-weight:700}
.fact__suffix{font-size:1.6rem;font-weight:800;color:var(--lime);vertical-align:top;margin-left:-2px}
.fact__label{display:block;margin-top:.5rem;font-size:.86rem;color:#bfe0d2;line-height:1.35}

/* ---------- Generic section ---------- */
.section{padding:clamp(3.5rem,7vw,6rem) 0}
.section--tint{background:var(--paper-2)}
.section--dark{background:linear-gradient(165deg,#0b3d2c,#072820);color:#eaf6ef}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--emerald-600);margin:0 0 .7rem}
.eyebrow--light{color:var(--lime)}
.section h2{font-size:clamp(1.7rem,3.6vw,2.5rem);letter-spacing:-.4px;max-width:20ch}
.section--dark h2{color:#fff}
.section__lead{font-size:1.1rem;color:var(--muted);max-width:62ch;margin-bottom:2.2rem}
.section--dark .section__lead{color:#c4e2d5}
.subhead{font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:700;
  margin:2.6rem 0 1.1rem}

/* ---------- Founders ---------- */
.founders{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;list-style:none}
.founder{display:flex;gap:1rem;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow-soft)}
.founder strong{display:block;font-size:1rem}
.founder span{font-size:.86rem;color:var(--muted)}
.founder__logo{flex:0 0 auto;width:84px;height:64px;display:grid;place-items:center;background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:8px}
.founder__logo img{width:auto;max-height:48px;object-fit:contain}
.founder__badge{flex:0 0 auto;width:64px;height:64px;display:grid;place-items:center;border-radius:12px;
  background:linear-gradient(160deg,var(--emerald-500),var(--forest-700));color:#dffbe9}

/* ---------- Mandates ---------- */
.mandates{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;list-style:none}
.mandate{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;
  box-shadow:var(--shadow-soft);position:relative;counter-increment:m}
.mandate::before{content:counter(m,decimal-leading-zero);display:block;font-weight:800;color:var(--emerald-400);
  font-size:.95rem;margin-bottom:.5rem;letter-spacing:1px}
.mandates{counter-reset:m}
.mandate h4{font-size:1.05rem;margin-bottom:.4rem}
.mandate p{font-size:.9rem;color:var(--muted);margin:0}

/* ---------- Leaders ---------- */
.leaders__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.leader{display:flex;gap:1.1rem;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.3rem;box-shadow:var(--shadow-soft)}
.leader__avatar{flex:0 0 auto;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  font-size:1.7rem;color:#fff;font-family:var(--serif);
  background:radial-gradient(circle at 35% 30%,var(--emerald-400),var(--forest-700))}
.leader h4{font-size:1.1rem;margin-bottom:.25rem}
.leader__role{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--emerald-600);background:rgba(22,160,111,.12);padding:.15rem .5rem;border-radius:999px;vertical-align:middle}
.leader p{font-size:.9rem;color:var(--muted);margin:0}

/* ---------- Cards (research / education) ---------- */
.cards{display:grid;gap:1.1rem}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;
  box-shadow:var(--shadow-soft);transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card h3{font-size:1.18rem}
.card p{font-size:.92rem;color:var(--muted);margin:0}
.card__tag{display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--emerald-600);background:rgba(22,160,111,.1);padding:.25rem .6rem;border-radius:999px;margin-bottom:.8rem}
.card__tag--accent{color:var(--forest-800);background:var(--lime)}
.card--research ul{list-style:none}
.card--research li{font-size:.9rem;color:var(--text);padding:.42rem 0 .42rem 1.4rem;position:relative;border-top:1px solid var(--paper-2)}
.card--research li:first-child{border-top:0}
.card--research li::before{content:"";position:absolute;left:0;top:.95rem;width:8px;height:8px;border-radius:50%;
  background:var(--emerald-400)}
.card--service{background:linear-gradient(170deg,#103f2f,#0c3325);border-color:transparent;color:#eaf6ef}
.card--service h3{color:#fff}
.card--service li{color:#d8ecdf;border-top-color:rgba(255,255,255,.1)}
.card--service li::before{background:var(--lime)}

/* ---------- Technologies ---------- */
.tech{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;
  box-shadow:var(--shadow-soft);display:flex;flex-direction:column}
.tech h3{font-size:1.12rem}
.tech p{font-size:.9rem;color:var(--muted);flex:1}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:1rem 0 0;border-top:1px solid var(--line);padding-top:1rem}
.metrics div{text-align:center}
.metrics dt{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:.2rem}
.metrics dd{margin:0;font-size:1.1rem;font-weight:800;color:var(--emerald-600);letter-spacing:-.3px}

/* ---------- Split panels (impact) ---------- */
.split{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.panel{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);
  padding:1.7rem;backdrop-filter:blur(4px)}
.panel h3{color:#fff;font-size:1.3rem}
.panel p{color:#cbe6da;font-size:.96rem}
.panel strong{color:var(--lime)}
.ticks{list-style:none;margin-top:1rem}
.ticks li{position:relative;padding:.45rem 0 .45rem 1.8rem;color:#dff0e7;font-size:.92rem;border-top:1px solid rgba(255,255,255,.1)}
.ticks li::before{content:"✓";position:absolute;left:0;top:.45rem;color:var(--lime);font-weight:800}
.projects{list-style:none;margin-top:1rem;display:grid;gap:.7rem}
.projects li{display:flex;flex-direction:column;gap:.1rem;padding:.7rem .9rem;background:rgba(255,255,255,.06);
  border-radius:12px;border:1px solid rgba(255,255,255,.1)}
.projects span{font-weight:700;color:#fff;font-size:.96rem}
.projects em{font-style:normal;color:var(--lime);font-size:.84rem;font-weight:600}

/* ---------- Metric row (education) ---------- */
.metric-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.6rem}
.metric-row__item{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:1.2rem .6rem;box-shadow:var(--shadow-soft)}
.metric-row__item strong{display:block;font-size:1.9rem;color:var(--emerald-600);font-weight:800;letter-spacing:-.5px}
.metric-row__item span{font-size:.82rem;color:var(--muted)}

/* ---------- Contact ---------- */
.contact__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:center}
.contact__list{list-style:none;display:grid;gap:1rem}
.contact__list li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);
  padding:1.1rem 1.3rem}
.contact__k{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--lime);margin-bottom:.25rem;font-weight:700}
.contact__list a{color:#fff;font-size:1.12rem;font-weight:700}
.contact__list address{font-style:normal;color:#dcefe5;font-size:.98rem;line-height:1.5}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#cfe0d8}
.footer__grid{display:grid;grid-template-columns:1.1fr 1fr 1.3fr;gap:1.6rem;padding:2.8rem 0 1.6rem;align-items:start}
.footer__brand{display:flex;gap:.7rem;align-items:center}
.footer__brand strong{display:block;color:#fff}
.footer__brand span{font-size:.78rem;color:var(--muted-light)}
.footer__nav{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem}
.footer__nav a{color:#bcd4c9;font-size:.92rem;font-weight:600}
.footer__credit{font-size:.84rem;color:#8fb3a4;margin:0;line-height:1.55}
.footer__base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;padding:1.2rem 0;
  border-top:1px solid rgba(255,255,255,.08);font-size:.8rem;color:#7fa294}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.card:hover{transform:none}
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr;gap:2rem}
  .hero__viz{display:none}
  .hero__lead{max-width:52ch}
  .facts__grid{grid-template-columns:repeat(3,1fr);gap:1.4rem 1rem}
  .founders,.mandates{grid-template-columns:repeat(2,1fr)}
  .cards--4{grid-template-columns:repeat(2,1fr)}
  .cards--3{grid-template-columns:repeat(2,1fr)}
  .metric-row{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav-toggle{display:block;z-index:60}
  .nav-menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:#062019;padding:.5rem 6vw 1.4rem;border-bottom:1px solid rgba(163,230,53,.25);
    transform:translateY(-10px);opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .28s ease,opacity .28s ease,visibility .28s;
    box-shadow:0 26px 46px -18px rgba(0,0,0,.7)}
  .nav-menu.is-open{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .nav-menu a{padding:.85rem .6rem;border-radius:10px;font-size:1.05rem}
  .nav-cta{text-align:center;margin-top:.4rem}
  .leaders__grid,.split,.contact__grid,.metrics{grid-template-columns:1fr}
  .contact__grid{gap:1.6rem}
}
@media (max-width:520px){
  .facts__grid{grid-template-columns:repeat(2,1fr)}
  .founders,.mandates,.cards--3,.cards--4,.metric-row{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .hero h1{font-size:2.2rem}
}

/* ---------- Print ---------- */
@media print{
  .site-header,.nav-toggle,.hero__viz,.hero__actions,.btn{display:none !important}
  body{background:#fff;color:#000}
  .hero,.section--dark,.facts{background:#fff !important;color:#000 !important}
  .panel,.card,.founder,.mandate{box-shadow:none;border:1px solid #ccc}
}