/* ───────── reset ───────── */
*,*::before,*::after{box-sizing:border-box}
html,body,div,span,h1,h2,h3,h4,h5,h6,p,a,img,ul,ol,li,header,footer,section,article,nav,button{margin:0;padding:0;border:0;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;vertical-align:baseline;color:inherit}
button{background:none;cursor:pointer;font-family:inherit}
ul,ol{list-style:none}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* ───────── tokens — one token per role ───────── */
:root{
  --bg:#ffffff;
  --fg:#0a1f4a;
  --navy:#0a1f4a;
  --navy-deep:#051235;
  --navy-mid:#1e4a8c;
  --brand:#4FAFF1;
  --brand-soft:#88c8f5;
  --brand-glow:rgba(79,175,241,.45);
  --muted:#5a6680;
  --border:rgba(26,31,74,0.10);
  --panel:#f5f8fc;

  --container:1720px;
  --pad-x:100px;
  --section-py:120px;

  --radius:6px;
  --shadow-sm:0 1px 2px rgba(10,31,74,0.04);
  --shadow-md:0 4px 16px rgba(10,31,74,0.06);

  --font-tc:'Noto Sans TC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-en:'Space Grotesk',-apple-system,sans-serif;

  /* Typography roles — single token per role, ramp via breakpoints */
  --fs-h1:64px;
  --fs-h2:54px;
  --fs-body:17px;
  --fs-body-sm:16px;

  --fs-eyebrow:28px;
  --fs-eyebrow-ls:.08em;

  --fs-card-title:22px;
  --fs-card-desc:14px;
  --fs-card-desc-lh:1.7;
  --fs-card-en:11px;
  --fs-card-num:20px;
}

html,body{background:var(--bg);color:var(--fg);font-family:var(--font-tc);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased}

/* ───────── helpers ───────── */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--pad-x)}
.eyebrow{display:block;font-family:var(--font-tc);font-size:var(--fs-eyebrow);font-weight:500;color:var(--muted);letter-spacing:var(--fs-eyebrow-ls);margin-bottom:16px}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.22,.65,.3,1),transform .9s cubic-bezier(.22,.65,.3,1)}
.reveal.in{opacity:1;transform:translateY(0)}

.d-only{display:inline}
.m-only{display:none}
@media (max-width:480px){
  .d-only{display:none}
  .m-only{display:inline}
}

/* ─────────────────── HERO ─────────────────── */
.hero{position:relative;background:var(--navy);color:#fff;padding:80px 0 100px;overflow:hidden}
.hero__aura{position:absolute;left:0;top:0;width:600px;height:600px;margin-left:-300px;margin-top:-300px;pointer-events:none;background:radial-gradient(circle,rgba(79,175,241,.28) 0%,transparent 70%);opacity:0;transition:opacity .35s ease;will-change:transform;z-index:0}
.hero__aura.is-on{opacity:1}
.hero__grid{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center;z-index:1}
.hero__title{font-family:var(--font-tc);font-size:var(--fs-h1);font-weight:700;line-height:1.199;letter-spacing:-.005em;margin-bottom:28px}
.hero__title-accent{color:var(--brand);display:block}
.hero__desc{font-size:var(--fs-body);line-height:1.9;color:rgba(255,255,255,.78);max-width:540px;margin-bottom:40px}
.hero__cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:17px 32px;background:var(--brand);color:var(--navy);font-weight:500;font-size:14px;letter-spacing:2.1px;border-radius:8px;transition:.2s}
.hero__cta:hover{background:#fff;transform:translateY(-2px)}
.hero__badge-wrap{display:flex;justify-content:center;align-items:center}

/* ─────────────────── Badge3D ─────────────────── */
.b3d{position:relative;width:420px;height:420px;perspective:1200px}
.b3d__glow{position:absolute;inset:-40px;background:radial-gradient(circle,var(--brand-glow) 0%,transparent 60%);opacity:.5;filter:blur(10px);transition:opacity .4s}
.b3d.is-active .b3d__glow{opacity:.9}
.b3d__disc{position:relative;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--navy-mid) 0%,var(--navy) 60%,var(--navy-deep) 100%);border:2px solid var(--brand);box-shadow:0 30px 60px rgba(0,0,0,.4),inset 0 0 60px var(--brand-glow);overflow:hidden;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.b3d.is-active .b3d__disc{transition:transform .12s linear}
.b3d__sheen{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.15) 0%,transparent 40%);pointer-events:none;transition:background .3s}
.b3d__svg{position:absolute;inset:0;width:100%;height:100%;transform:translateZ(20px);transition:transform .3s}
.b3d__core{position:absolute;inset:50px;border-radius:50%;background:rgba(10,31,74,.4);border:1px solid rgba(79,175,241,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;transform:translateZ(30px)}
.b3d__core-label{font-family:var(--font-en);font-size:11px;letter-spacing:3.5px;font-weight:400;color:var(--brand-soft);opacity:.85}
.b3d__core-iso{font-family:var(--font-en);font-weight:700;font-size:72px;color:var(--brand);letter-spacing:4px;line-height:1}
.b3d__core-num{font-family:var(--font-en);font-weight:500;font-size:56px;color:var(--brand);letter-spacing:2.5px;line-height:1}
.b3d__core-divider{width:30%;height:1px;background:rgba(79,175,241,.35);margin:4px 0}
.b3d__core-tag{font-family:var(--font-tc);font-size:13px;letter-spacing:3px;color:var(--brand-soft)}
.b3d__core-valid{font-family:var(--font-en);font-size:10px;letter-spacing:3px;color:var(--brand-soft);opacity:.6;margin-top:4px}
.b3d__ticks{position:absolute;inset:0;pointer-events:none}
.b3d__tick{position:absolute;left:50%;top:50%;width:1px;height:189px;background:var(--brand);opacity:.3;transform-origin:top center}

/* ─────────────────── about (Sec 01) ─────────────────── */
.about{padding:var(--section-py) 0;background:#fff}
.about__grid{display:grid;grid-template-columns:1fr 1.3fr;gap:100px;align-items:start}
.about__title{font-family:var(--font-tc);font-size:var(--fs-h2);font-weight:700;line-height:1.2;letter-spacing:-.005em}
.about__title-line2{display:block;margin-top:6px}
.about__body{font-size:var(--fs-body);line-height:1.9;color:var(--muted);margin:20px 0 48px}
.about__body strong{color:var(--fg);font-weight:700}
.about__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.about-card{padding:28px;background:#F1F5F9;border:1px solid var(--brand);border-radius:8px}
.about-card__zh{font-family:var(--font-tc);font-size:var(--fs-card-title);font-weight:700;color:var(--fg);line-height:1.3;margin-bottom:6px}
.about-card__en{font-family:var(--font-en);font-size:var(--fs-card-en);letter-spacing:2.2px;color:var(--brand);margin-bottom:14px}
.about-card__desc{font-size:var(--fs-card-desc);line-height:var(--fs-card-desc-lh);color:var(--muted)}

/* ─────────────────── scope (Sec 02) ─────────────────── */
.scope{padding:var(--section-py) 0;background:var(--panel)}
.scope__title{font-family:var(--font-tc);font-size:var(--fs-h2);font-weight:700;line-height:1.2;letter-spacing:-.005em}
.scope__sub{font-size:var(--fs-body);line-height:1.7;color:var(--muted);max-width:780px;margin-top:20px;margin-bottom:48px}
.scope__sub.d-only{display:block}
@media (max-width:480px){ .scope__sub.d-only{display:none} }
.scope__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.scope-card{background:#fff;padding:28px;display:flex;gap:18px;align-items:flex-start;border-radius:8px;border:1px solid var(--border);transition:.2s}
.scope-card:hover{background:#fafcff;border-color:rgba(79,175,241,.4)}
.scope-card__num{font-family:var(--font-en);font-size:var(--fs-card-num);font-weight:700;letter-spacing:.5px;color:var(--brand);min-width:32px;line-height:1.2}
.scope-card__body{flex:1}
.scope-card__title{font-family:var(--font-tc);font-size:var(--fs-card-title);font-weight:700;color:var(--fg);line-height:1.4;margin-bottom:10px}
.scope-card__desc{font-size:var(--fs-card-desc);line-height:var(--fs-card-desc-lh);color:var(--muted)}

/* ─────────────────── controls (Sec 03) ─────────────────── */
.controls{padding:var(--section-py) 0;background:#fff}
.controls__head{margin-bottom:48px}
.controls__h2{font-family:var(--font-tc);font-size:var(--fs-h2);font-weight:700;line-height:1.3}
.controls__desc{font-size:var(--fs-body);line-height:1.7;color:var(--muted);margin-top:20px;max-width:1080px}
.controls__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.control-card{background:var(--panel);padding:28px;border:1px solid var(--border);border-radius:var(--radius);min-height:240px;transition:.2s}
.control-card:hover{background:#fff;border-color:var(--brand);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.control-card__num{font-family:var(--font-en);font-size:var(--fs-card-num);font-weight:700;letter-spacing:.5px;color:var(--brand);margin-bottom:14px;line-height:1.2}
.control-card__title{font-family:var(--font-tc);font-size:var(--fs-card-title);font-weight:700;color:var(--fg);line-height:1.4;margin-bottom:14px}
.control-card__desc{font-size:var(--fs-card-desc);line-height:var(--fs-card-desc-lh);color:var(--muted)}

/* ─────────────────── responsive: 1440 ─────────────────── */
@media (max-width:1440px){
  :root{
    --container:1280px;
    --pad-x:60px;
    --section-py:100px;
    --fs-h1:54px;
    --fs-h2:46px;
    --fs-eyebrow:24px;
    --fs-eyebrow-ls:.08em;
  }
  .hero{padding:64px 0 80px}
  .b3d{width:360px;height:360px}
  .b3d__core{inset:42px}
  .b3d__core-iso{font-size:62px}
  .b3d__core-num{font-size:48px}
  .b3d__tick{height:162px}
  .about__grid{gap:60px}
}

/* ─────────────────── responsive: 1024 ─────────────────── */
@media (max-width:1024px){
  :root{
    --pad-x:40px;
    --section-py:80px;
    --fs-h1:46px;
    --fs-h2:40px;
    --fs-eyebrow:20px;
    --fs-eyebrow-ls:.1em;
    --fs-card-title:20px;
  }
  .hero{padding:56px 0 72px}
  .hero__grid{grid-template-columns:1fr;gap:48px}
  .hero__desc{max-width:none}
  .b3d{width:300px;height:300px}
  .b3d__core{inset:36px}
  .b3d__core-iso{font-size:54px}
  .b3d__core-num{font-size:40px}
  .b3d__tick{height:135px}
  .about__grid{grid-template-columns:1fr;gap:40px}
  .about__cards{grid-template-columns:repeat(3,1fr)}
  .controls__grid{grid-template-columns:repeat(2,1fr);gap:20px}
}

/* ─────────────────── responsive: 768 ─────────────────── */
@media (max-width:768px){
  :root{
    --pad-x:32px;
    --section-py:64px;
    --fs-h1:36px;
    --fs-h2:32px;
    --fs-eyebrow:14px;
    --fs-eyebrow-ls:.14em;
    --fs-card-title:19px;
    --fs-card-num:18px;
  }
  .hero{padding:48px 0 64px}
  .hero__grid{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
  .hero__badge-wrap{order:-1;align-self:center}
  .hero__copy{display:flex;flex-direction:column;align-items:stretch;gap:24px;width:100%;text-align:center}
  .hero__title{text-align:center;margin-bottom:0}
  .hero__desc{max-width:none;text-align:center;margin-bottom:0}
  .hero__cta{align-self:center}
  .b3d{width:240px;height:240px}
  .b3d__core{inset:28px}
  .b3d__core-label{font-size:9px;letter-spacing:2.5px}
  .b3d__core-iso{font-size:42px;letter-spacing:2px}
  .b3d__core-num{font-size:30px;letter-spacing:1.5px}
  .b3d__core-tag{font-size:11px;letter-spacing:2px}
  .b3d__core-valid{font-size:8px;letter-spacing:2px}
  .b3d__tick{height:108px}
  .about__cards{grid-template-columns:1fr;gap:14px}
  .scope__grid{grid-template-columns:1fr;gap:14px}
  .controls__grid{grid-template-columns:1fr;gap:14px}
  .about-card{padding:24px}
  .scope-card{padding:24px}
  .control-card{padding:24px;min-height:auto}
}

/* ─────────────────── responsive: 430 (Figma 小網規格) ─────────────────── */
@media (max-width:480px){
  :root{
    --pad-x:24px;
    --section-py:40px;
    --fs-h1:32px;
    --fs-h2:28px;
    --fs-eyebrow:13px;
    --fs-eyebrow-ls:.16em;
    --fs-card-title:18px;
    --fs-card-desc:12px;
    --fs-card-num:18px;
  }

  /* HERO mobile layout */
  .hero{padding:40px 0}
  .hero__grid{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
  .hero__badge-wrap{order:-1;width:200px;height:200px;align-self:center}
  .hero__copy{display:flex;flex-direction:column;align-items:stretch;gap:24px;width:100%;padding:20px 0;text-align:center}
  .hero__title{margin-bottom:0;line-height:1.199;text-align:center}
  .hero__desc{max-width:none;color:rgba(255,255,255,.78);margin-bottom:0;text-align:center}
  .hero__cta{align-self:center;width:100%;justify-content:center;padding:16px 32px;border-radius:8px;min-height:54px;font-size:15px}

  .b3d{width:200px;height:200px}
  .b3d__core{inset:30px}
  .b3d__core-iso{font-size:36px;letter-spacing:2px}
  .b3d__core-num{font-size:28px;letter-spacing:1.4px}
  .b3d__core-label{font-size:7px;letter-spacing:2.2px}
  .b3d__core-tag{font-size:9px;letter-spacing:1.8px}
  .b3d__core-valid{font-size:7px;letter-spacing:2px}
  .b3d__tick{height:90px}

  /* cards mobile padding (unified) */
  .about-card{padding:20px}
  .scope-card{padding:20px;gap:14px}
  .control-card{padding:20px;min-height:auto}

  /* sections 小網 itemSpacing 12px (Figma 規格) */
  .about__cards{gap:12px;margin-top:12px}
  .scope__grid{gap:12px;margin-top:24px}   /* sub 在小網被隱藏，由 grid margin 補上 h2→卡片的間距 */
  .controls__grid{gap:12px}

  /* sections 小網內部間距 */
  .eyebrow{margin-bottom:12px}
  .about__grid{gap:12px}
  .about__body{margin:12px 0}
  .scope__sub{margin-top:12px;margin-bottom:12px}
  .controls__head{margin-bottom:12px}
  .controls__desc{margin-top:12px}
}