/* KE Jewelry — shared DARK theme (matches the order-tracker design)
   Navy #162238 · deep #0d1626 · white/silver text · green #0c8140 · red #8a181a
   Body: Lato + Noto Sans Khmer · Headlines/logo: Cormorant Garamond */
:root {
  --navy: #162238; --navy-deep: #0d1626; --navy-soft: #1f2f4d;
  --white: #fff; --silver: #d7dce5; --muted: #9aa3b4;
  --green: #0c8140; --green-bright: #2eaa66; --red: #8a181a; --red-bright: #d05a5c;
  --line: rgba(255,255,255,0.16); --line-soft: rgba(255,255,255,0.08);
  --card: rgba(255,255,255,0.045);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Lato', 'Noto Sans Khmer', sans-serif; color: var(--silver);
  background: var(--navy-deep); line-height: 1.6; -webkit-font-smoothing: antialiased;
}
/* subtle top glow like the tracker's radial gradient, fixed behind everything */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(1100px 700px at 50% -12%, var(--navy-soft) 0%, var(--navy) 42%, var(--navy-deep) 100%); }
body.km { font-family: 'Noto Sans Khmer', 'Lato', sans-serif; }
.serif { font-family: 'Cormorant Garamond', Georgia, serif; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.section { padding: 84px 0; }
@media (max-width: 700px) { .section { padding: 56px 0; } }
.label { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
body.km .label { letter-spacing: 0.05em; text-transform: none; }
h1, h2, h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; line-height: 1.08; color: var(--white); }
body.km h1, body.km h2, body.km h3 { font-family: 'Noto Sans Khmer', serif; }
.h-hero { font-size: clamp(46px, 8.5vw, 92px); font-weight: 300; }
.h1 { font-size: clamp(36px, 5.2vw, 62px); font-weight: 300; }
.h2 { font-size: clamp(28px, 3.6vw, 40px); }
.lead { font-size: 18px; color: var(--muted); }

/* buttons */
.btn { display: inline-block; padding: 15px 30px; border-radius: 8px; font-family: inherit; font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; border: 1px solid transparent; transition: all .2s; }
body.km .btn { letter-spacing: 0; text-transform: none; }
.btn-primary, .btn-white { background: var(--white); color: var(--navy); }
.btn-primary:hover, .btn-white:hover { background: var(--silver); }
.btn-outline { background: transparent; border-color: var(--line); color: var(--silver); }
.btn-outline:hover { background: rgba(255,255,255,0.06); border-color: var(--silver); color: var(--white); }
.btn-outline.on-dark { border-color: var(--line); color: var(--white); }
.btn-outline.on-dark:hover { background: #fff; color: var(--navy); }

/* cards / panels */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.fade { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.fade.in { opacity: 1; transform: none; }
.center { text-align: center; }
.grid-lines { display: grid; gap: 1px; background: var(--line-soft); }