:root{
  /* Brand color system — per Nano Ark brand template (flat, no gradients) */
  --lime:#A3BE7A;      /* Muted sage — accents on dark backgrounds */
  --midnight:#071A2D;  /* Midnight Blue — Primary Dark */
  --graphite:#101820;  /* Deep Graphite — Neutral */
  --ice:#F4F7FA;       /* Ice White — Background */
  --silver:#C9D6DF;    /* Silver Gray — Neutral */
  --gold:#C9A646;      /* Soft Gold — Accent */
  /* Extended system */
  --lime-tint:#E4EED3;
  --lime-green:#4E8032; /* Logo leaf green — primary accent */
  --green-deep:#3E6828;
  --navy:#1A2B3D;
  --slate:#27323F;
  --steel:#6B7785;
  --line-l:#DBE3EA;                 /* borders on light */
  --line-d:rgba(201,214,223,.16);   /* borders on dark */
  --maxw:1160px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter','Noto Sans TC',system-ui,sans-serif;color:var(--graphite);background:var(--ice);line-height:1.65;font-size:16px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
h1,h2,h3{line-height:1.25;font-weight:700}
a{color:var(--lime-green);text-decoration:none}
img{max-width:100%}

/* language toggle */
body.zh .en{display:none}
body:not(.zh) .zh{display:none}

/* ---------- nav (light — original logo unmodified) ---------- */
nav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line-l)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{color:var(--slate);font-size:.9rem;font-weight:500;transition:.2s}
.nav-links a:hover{color:var(--lime-green)}
.lang-btn{border:1px solid var(--lime-green);background:none;border-radius:6px;padding:6px 14px;font-size:.85rem;font-weight:600;color:var(--lime-green);cursor:pointer;font-family:inherit;transition:.2s}
.lang-btn:hover{background:var(--lime-green);color:#fff}
.menu-btn{display:none;background:none;border:1px solid var(--line-l);border-radius:6px;padding:5px 12px;font-size:1.15rem;color:var(--slate);cursor:pointer;font-family:inherit}
@media(max-width:900px){
  .menu-btn{display:block}
  .nav-links{position:absolute;top:66px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line-l);box-shadow:0 12px 24px rgba(26,43,61,.12);flex-direction:column;align-items:flex-start;padding:14px 24px 18px;gap:14px;display:none}
  .nav-links.open{display:flex}
}

/* ---------- hero (text overlay on banner, logo included) ---------- */
.hero{background:#0A1420 url('images/banner_hero.png') center/cover no-repeat}
.hero-in{padding:88px 0 104px;color:var(--ice)}
.hero-logo{height:48px;width:auto;display:block;margin-top:120px}
@media(max-width:600px){.hero-logo{height:34px;margin-top:70px}}
.hero h1{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:800;max-width:560px;letter-spacing:-.01em;color:#fff;line-height:1.35}
.hero h1 .hl{color:var(--lime)}
.btn{display:inline-block;padding:14px 28px;border-radius:8px;font-weight:700;font-size:.95rem;transition:.2s}
.btn-primary{background:var(--lime-green);color:#fff}
.btn-primary:hover{background:var(--green-deep);color:#fff}
.btn-ghost{border:1px solid var(--silver);color:var(--ice)}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime)}

/* ---------- sections ---------- */
section{padding:92px 0}
section.dark{background:var(--midnight);color:var(--ice)}
section.dark2{background:var(--graphite);color:var(--ice)}
.sec-kicker{font-weight:700;letter-spacing:.13em;text-transform:uppercase;font-size:.76rem;margin-bottom:12px;color:var(--lime-green);display:inline-block}
section.dark .sec-kicker,section.dark2 .sec-kicker{color:var(--lime)}
.sec-title{font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:14px;letter-spacing:-.01em;color:var(--navy)}
section.dark .sec-title,section.dark2 .sec-title{color:#fff}
.sec-title .hl{color:var(--navy);box-shadow:inset 0 -0.42em 0 var(--lime-tint)}
section.dark .sec-title .hl,section.dark2 .sec-title .hl{color:var(--lime);box-shadow:none}
.sec-lead{color:var(--slate);max-width:740px;margin-bottom:46px}
section.dark .sec-lead,section.dark2 .sec-lead{color:var(--silver)}

/* ---------- capability cards (light section) ---------- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media(max-width:860px){.cards{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line-l);border-top:3px solid var(--lime);border-radius:12px;padding:0 26px 26px;overflow:hidden;transition:.2s}
.card:hover{border-color:var(--lime-green);border-top-color:var(--lime-green);box-shadow:0 10px 30px rgba(26,43,61,.10);transform:translateY(-3px)}
.cimg{width:calc(100% + 52px);max-width:none;margin:0 -26px 20px;height:190px;object-fit:cover;display:block;transform:scale(1.08)}
.card .num{font-size:.76rem;font-weight:800;letter-spacing:.12em;margin-bottom:10px;color:var(--lime-green)}
.card h3{font-size:1.25rem;margin-bottom:4px;color:var(--navy)}
.card .zh-sub{color:var(--steel);font-size:.9rem;font-weight:600;margin-bottom:12px}
.card p{color:var(--slate);font-size:.93rem}
.card ul{list-style:none;margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
@media(max-width:560px){.card ul{grid-template-columns:1fr}}
.card li{font-size:.86rem;color:var(--graphite);padding:4px 0 4px 18px;position:relative}
.card li::before{content:"▸";position:absolute;left:0;color:var(--lime-green)}

/* ---------- focus chips (dark section) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.chip{padding:10px 20px;border-radius:999px;border:1px solid var(--line-d);font-size:.9rem;font-weight:600;color:var(--ice);transition:.2s}
.chip:hover{border-color:var(--lime);color:var(--lime)}

/* ---------- test menu (light section) ---------- */
.tests{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.tests{grid-template-columns:1fr}}
.test-group{background:#fff;border:1px solid var(--line-l);border-radius:12px;overflow:hidden}
.test-group .tg-head{background:var(--midnight);color:#fff;padding:15px 20px;font-weight:700;font-size:.95rem}
.test-group table{width:100%;border-collapse:collapse}
.test-group td{padding:11px 20px;border-top:1px solid var(--line-l);font-size:.86rem;vertical-align:top;color:var(--slate)}
.test-group tr:first-child td{border-top:none}
.test-group td.std{white-space:nowrap;text-align:right}
.test-group td.std span.pill,.test-group td.std{color:var(--navy);font-weight:700}
.std-pill{display:inline-block;background:var(--lime-tint);color:var(--navy);font-weight:700;font-size:.78rem;padding:3px 10px;border-radius:6px}
.std-note{margin-top:28px;font-size:.85rem;color:var(--steel);border-left:3px solid var(--gold);padding-left:16px}

/* ---------- application areas (dark section) ---------- */
.domains{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:960px){.domains{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.domains{grid-template-columns:1fr}}
.domain{background:var(--navy);border:1px solid var(--line-d);border-radius:12px;padding:0 22px 20px;overflow:hidden;transition:.2s}
.domain:hover{border-color:var(--lime);transform:translateY(-3px)}
.dimg{width:calc(100% + 44px);max-width:none;margin:0 -22px 16px;height:130px;object-fit:cover;display:block;transform:scale(1.08)}
.domain h4{font-size:1rem;margin-bottom:8px;color:#fff}
.domain p{color:var(--silver);font-size:.85rem}

/* ---------- development path — timeline flowchart ---------- */
.path{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:28px;position:relative}
.path::before{content:"";position:absolute;top:23px;left:10%;right:10%;height:2px;background:var(--line-l);z-index:0}
.pstep{position:relative;display:flex;flex-direction:column;align-items:center;z-index:1}
.pdot{width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid var(--lime-green);color:var(--lime-green);font-weight:800;font-size:1.05rem;display:flex;align-items:center;justify-content:center;margin-bottom:18px;transition:.25s;box-shadow:0 0 0 6px var(--ice)}
.pstep:hover .pdot{background:var(--lime-green);color:#fff;transform:scale(1.1)}
.pstep.final .pdot{background:var(--lime-green);color:#fff}
.pcard{background:#fff;border:1px solid var(--line-l);border-radius:14px;padding:22px 18px 20px;position:relative;overflow:hidden;width:100%;flex:1;transition:.25s;text-align:left}
.pstep:hover .pcard{border-color:var(--lime-green);box-shadow:0 12px 28px rgba(26,43,61,.10);transform:translateY(-4px)}
.pstep.final .pcard{border-color:var(--lime-green);background:#F6FAF0}
.pghost{position:absolute;top:-14px;right:2px;font-size:4.2rem;font-weight:800;color:rgba(78,128,50,.08);line-height:1;letter-spacing:-.03em;pointer-events:none}
.ptitle{font-size:1.05rem;font-weight:700;color:var(--navy);margin-bottom:2px}
.psub{font-size:.82rem;font-weight:600;color:var(--lime-green);margin-bottom:10px}
.pcard p{color:var(--slate);font-size:.83rem}
@media(max-width:960px){
  .path{grid-template-columns:1fr;max-width:600px;gap:22px}
  .path::before{left:22px;top:10px;bottom:10px;width:2px;height:auto;right:auto}
  .pstep{flex-direction:row;align-items:flex-start;gap:18px}
  .pdot{margin-bottom:0;flex-shrink:0}
}

/* ---------- about (light) ---------- */
.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
@media(max-width:860px){.about-grid{grid-template-columns:1fr}}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat{background:#fff;border:1px solid var(--line-l);border-radius:12px;padding:20px;transition:.2s}
.stat:hover{border-color:var(--gold)}
.stat .n{font-size:1.7rem;font-weight:800;color:var(--gold)}
.stat .l{font-size:.82rem;color:var(--slate)}
.brand-quote{margin-top:26px;padding:18px 22px;background:#fff;border-left:4px solid var(--gold);border-radius:0 10px 10px 0;font-weight:700;color:var(--navy);font-size:1.05rem}

/* ---------- contact (dark) ---------- */
.contact{background:var(--midnight);color:var(--ice)}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:44px}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
.office{background:var(--navy);border:1px solid var(--line-d);border-radius:12px;padding:24px}
.office h4{font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;margin-bottom:12px;color:var(--gold)}
.office p{color:var(--silver);font-size:.92rem}
.office a{color:#fff;font-weight:600}

/* ---------- footer (light — original logo unmodified) ---------- */
footer{background:#EAEFF4;border-top:1px solid var(--line-l);padding:36px 0 26px;color:var(--steel);font-size:.82rem}
.foot-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;align-items:center}