/* ==========================================================
   星欧娱乐 · 星欧平台  —  design tokens & base layer
   Theme: "engineering sheet" — cool paper, hairline rules,
   single signal accent, monospaced labels.
   ========================================================== */

:root{
  /* surface */
  --paper:#F2F2ED;
  --paper-2:#F8F8F4;
  --card:#FFFFFF;
  --night:#101413;
  --night-2:#171C1A;
  --night-3:#1E2422;

  /* ink */
  --ink:#101413;
  --ink-2:#3C4340;
  --ink-3:#6B726D;
  --ink-4:#9AA09B;
  --on-night:#F1F2EC;
  --on-night-2:#A9B0AA;

  /* lines */
  --line:#CDCFC7;
  --line-soft:#E0E1D9;
  --line-night:rgba(241,242,236,.16);

  /* accent */
  --sig:#FF5A1F;
  --sig-deep:#D8410A;
  --sig-wash:#FFE9DF;
  --pine:#0F5B45;
  --pine-wash:#E3EEE9;

  /* geometry */
  --r-xs:2px;
  --r-sm:4px;
  --r-md:8px;
  --r-pill:999px;
  --rule:1px;
  --gut:clamp(18px,3.2vw,40px);
  --wrap:1240px;
  --bar:68px;

  /* type */
  --sans:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;

  /* motion */
  --ease:cubic-bezier(.22,.68,.28,1);
  --dur:.34s;

  /* elevation */
  --sh-1:0 1px 0 rgba(16,20,19,.04);
  --sh-2:0 10px 30px -18px rgba(16,20,19,.45);
  --sh-3:0 24px 60px -34px rgba(16,20,19,.55);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--bar) + 16px);
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.78;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

body.is-locked{overflow:hidden}

img,svg{max-width:100%;display:block}
svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

a{color:inherit;text-decoration:none}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{margin:0;font-weight:650;line-height:1.28;letter-spacing:-.015em}
h1{font-size:clamp(2rem,4.6vw,3.5rem);line-height:1.14;letter-spacing:-.03em}
h2{font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.24;letter-spacing:-.022em}
h3{font-size:clamp(1.08rem,1.5vw,1.3rem)}
h4{font-size:1rem}
strong,b{font-weight:650}
em{font-style:normal;color:var(--sig-deep)}
code,kbd,samp{font-family:var(--mono);font-size:.88em}
hr{border:0;border-top:var(--rule) solid var(--line);margin:0}
table{border-collapse:collapse;width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--sig);color:#fff}

:focus-visible{outline:2px solid var(--sig);outline-offset:3px;border-radius:var(--r-xs)}

/* ---------------- helpers ---------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.mono{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
}
.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:fixed;left:12px;top:-64px;z-index:200;
  background:var(--ink);color:var(--on-night);
  padding:10px 16px;border-radius:var(--r-sm);
  transition:top .2s var(--ease);
}
.skip:focus{top:12px}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  padding:.82em 1.4em;
  border-radius:var(--r-sm);
  border:var(--rule) solid var(--ink);
  background:var(--ink);color:var(--on-night);
  font-size:.94rem;font-weight:600;letter-spacing:.02em;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn--sig{background:var(--sig);border-color:var(--sig);color:#fff}
.btn--sig:hover{background:var(--sig-deep);border-color:var(--sig-deep)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink);background:var(--card)}
.btn--on-night{background:transparent;color:var(--on-night);border-color:var(--line-night)}
.btn--on-night:hover{background:var(--on-night);color:var(--ink);border-color:var(--on-night)}
.btn--light{background:var(--on-night);color:var(--ink);border-color:var(--on-night)}
.btn--light:hover{background:#fff;border-color:#fff}
.btn .ar{transition:transform var(--dur) var(--ease)}
.btn:hover .ar{transform:translateX(4px)}

.lk{
  display:inline-flex;align-items:center;gap:.45em;
  font-weight:600;color:var(--ink);
  border-bottom:var(--rule) solid var(--sig);
  padding-bottom:2px;
  transition:color var(--dur) var(--ease),gap var(--dur) var(--ease);
}
.lk:hover{color:var(--sig-deep);gap:.8em}

/* ---------------- micro chips ---------------- */
.tag{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.34em .66em;border:var(--rule) solid var(--line);
  border-radius:var(--r-xs);color:var(--ink-2);background:var(--card);
}
.tag--sig{color:var(--sig-deep);border-color:#F3C3AE;background:var(--sig-wash)}
.tag--pine{color:var(--pine);border-color:#BFD6CC;background:var(--pine-wash)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}