/* ============================================
   DESIGN TOKENS - 设计变量
   ============================================ */
:root{
  /* === Colors: Navy === */
  --navy:#0A1628;
  --navy-2:#0D1B33;
  --navy-3:#162544;

  /* === Colors: Gold === */
  --gold:#D4AF37;
  --gold-2:#F5C94C;
  --gold-dark:#B8941F;

  /* === Colors: Text === */
  --ink:#0A1628;
  --ink-2:#1A2740;
  --ink-3:#3A4764;
  --muted:#6B7890;
  --muted-2:#A0ABB8;

  /* === Colors: Surfaces === */
  --bg:#FFFFFF;
  --bg-soft:#F7F8FB;
  --bg-section:#F5F6F9;
  --bg-muted:#EEF0F4;

  /* === Typography === */
  --fs-xs:12px;
  --fs-sm:14px;
  --fs-base:16px;
  --fs-lg:18px;
  --fs-xl:20px;
  --fs-2xl:24px;
  --fs-3xl:32px;
  --fs-4xl:40px;
  --fs-5xl:48px;
  --fs-6xl:56px;
  --fs-7xl:64px;

  /* === Radius === */
  --r-sm:6px;
  --r:10px;
  --r-md:14px;
  --r-lg:18px;
  --r-xl:24px;
}

/* ============================================
   RESET
   ============================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
body{
  font-family:'Inter','Helvetica Neue',Arial,'PingFang SC','Microsoft YaHei','Hiragino Sans GB',sans-serif;
  font-size:var(--fs-base);
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .2s ease}
a:hover{color:var(--gold)}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul,ol{list-style:none}
strong{font-weight:700}

/* ============================================
   CONTAINER (Full-width with padding)
   ============================================ */
.container{
  width:100%;
  max-width:none;
  margin:0 auto;
  padding:0 40px;
}
@media (max-width:1280px){.container{padding:0 24px}}
@media (max-width:900px){.container{padding:0 18px}}
@media (max-width:720px){.container{padding:0 16px}}
@media (max-width:480px){.container{padding:0 14px}}

/* ============================================
   HEADINGS
   ============================================ */
h1,h2,h3,h4,h5,h6{
  line-height:1.2;
  letter-spacing:-0.01em;
  color:var(--navy);
  font-weight:800;
}
h1{font-size:var(--fs-7xl)}
h2{font-size:var(--fs-5xl)}
h3{font-size:var(--fs-2xl)}
h4{font-size:var(--fs-lg)}

/* ============================================
   HELPERS
   ============================================ */
.gold{color:var(--gold)}
.ink{color:var(--navy)}
.muted{color:var(--muted)}
.text-center{text-align:center}

/* ============================================
   SELECTION / SCROLLBAR
   ============================================ */
::selection{background:var(--gold);color:#fff}
::-moz-selection{background:var(--gold);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-muted)}
::-webkit-scrollbar-thumb{background:var(--muted-2);border-radius:5px;border:2px solid var(--bg-muted)}
::-webkit-scrollbar-thumb:hover{background:var(--gold);border-color:var(--gold)}

/* ============================================
   ANCHOR OFFSET
   ============================================ */
section[id]{scroll-margin-top:100px}

/* ============================================
   BUTTON BASE
   ============================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 28px;
  border-radius:var(--r);
  font-size:var(--fs-sm);
  font-weight:700;
  cursor:pointer;
  transition:all .25s ease;
  white-space:nowrap;
  text-decoration:none;
  border:1.5px solid transparent;
  line-height:1.2;
}
.btn:hover{transform:translateY(-1px)}
.btn-lg{padding:16px 34px;font-size:15px}

/* Gold CTA button */
.btn-gold{
  background:var(--gold);
  color:var(--navy);
  border-color:var(--gold);
  box-shadow:0 4px 14px rgba(212,175,55,0.3);
}
.btn-gold:hover{
  background:var(--gold-2);
  border-color:var(--gold-2);
  color:var(--navy);
  box-shadow:0 6px 20px rgba(212,175,55,0.45);
}

/* Outline button (for dark backgrounds) */
.btn-outline{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,0.4);
}
.btn-outline:hover{
  background:rgba(255,255,255,0.08);
  border-color:var(--gold);
  color:var(--gold);
}

/* Outline button (for light backgrounds) */
.btn-outline-dark{
  background:transparent;
  color:var(--navy);
  border-color:rgba(10,22,40,0.2);
}
.btn-outline-dark:hover{
  border-color:var(--gold);
  color:var(--gold);
  background:rgba(212,175,55,0.06);
}