/* ════════════════════════════════════════════════════════════════
   Apple Liquid Glass — design tokens
   Drop into any project. Reference everything via var(--…);
   never hard-code a raw value that a token already names.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ── Neutrals (the interface skeleton) ── */
  --bg:        #f5f5f7;   /* page ground — COOL grey-white, never warm/cream */
  --surface:   #ffffff;   /* panels / cards */
  --hover:     #fbfbfd;   /* row hover tint */
  --text:      #1d1d1f;   /* primary text / titles */
  --text-body: #424245;   /* long-form body */
  --text-2:    #6e6e73;   /* secondary / summary / meta */
  --text-3:    #86868b;   /* tertiary / captions */
  --text-4:    #aeaeb2;   /* placeholder / quaternary */
  --faint:     #d2d2d7;   /* index numbers, arrows, dividers (very light) */
  --hairline:  rgba(0,0,0,0.07);   /* the divider line — used everywhere */

  /* ── Accents (emphasis ONLY — body stays grayscale) ── */
  --accent:      #0071e3;  /* Apple blue — primary action / link / focus */
  --accent-link: #0066cc;  /* link/tag text on tinted ground */
  --indigo:      #5e5ce6;  /* gradient 2nd stop / supporting */
  --x-blue:      #1d9bf0;  /* platform / brand mark (e.g. X) */
  --heat:        #ff6b00;  /* heat / "hottest" accent */
  --heat-bg:     rgba(255,107,0,0.1);
  --live:        #30d158;  /* live / online (pulsing dot) */

  /* ── Signature gradients (hero / CTA / placeholder art ONLY) ── */
  --grad-blue: linear-gradient(135deg, #0a84ff 0%, #5e5ce6 100%);
  --grad-warm: linear-gradient(135deg, #ff9f0a 0%, #ff375f 100%);
  --grad-green:linear-gradient(135deg, #30d158 0%, #0a84ff 100%);
  --grad-cta:  linear-gradient(135deg, #0071e3 0%, #5e5ce6 100%);

  /* ── Type ── */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
          'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Radius (semantic tiers — don't invent in-between values) ── */
  --r-pill:  999px;  /* pills / segmented controls / tags / buttons */
  --r-chip:  6px;    /* tiny marks (platform badge, brand monogram) */
  --r-thumb: 12px;   /* thumbnails / small squares */
  --r-card:  18px;   /* standard card */
  --r-panel: 22px;   /* large panel / section container */
  --r-hero:  26px;   /* hero / CTA / focal card */
  --r-sheet: 16px;   /* overlay sheet/modal buttons — between thumb and card, for stacked full-width actions */

  /* ── Shadow (two-layer: tight contact + soft spread; never one hard shadow) ── */
  --sh-card:    0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.05);
  --sh-panel:   0 1px 3px rgba(0,0,0,0.05), 0 14px 40px rgba(0,0,0,0.05);
  --sh-lift:    0 12px 32px rgba(0,0,0,0.1);          /* hover lift, with translateY(-3px) */
  --sh-cta:     0 20px 54px rgba(0,113,227,0.24);     /* colored CTA — tinted shadow */
  --sh-overlay: 0 2px 8px rgba(0,0,0,0.10), 0 30px 80px rgba(0,0,0,0.24); /* modal/sheet/popover — deeper than panel, still two-layer */

  /* ── Component greys (semantic — don't hand-pick a one-off grey) ── */
  --track:  #e8e8ed;  /* progress/meter track, toggle-off track — visible-but-quiet fill grey */

  /* ── Layout ── */
  --max-read: 720px;   /* reading column */
  --max-grid: 1080px;  /* grid / dense column */
  --pad-x:    22px;    /* container side padding */
}

/* Base reset + page ground (optional — include if not already set) */
/*
*  { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg); color: var(--text); font-family: var(--font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}
*/

/* Liquid-glass frost — ONLY on sticky nav / overlay / colored-CTA labels */
.glass-nav {
  background: rgba(245,245,247,0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}
.glass-chip {            /* glass element ON a colored ground (needs blur orbs behind) */
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Live/online pulsing dot */
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(48,209,88,0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(48,209,88,0); }
  100% { box-shadow: 0 0 0 0 rgba(48,209,88,0); }
}

/* Motion easing (see motion.md) — spring-like curves, CSS-first */
:root {
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);   /* enter: sheets/dialogs/popovers (~400ms) */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* small moves: hover, segmented slide (~200ms) */
}

/* SIA navigation: Apple-inspired restraint, with SIA's green identity. */
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.sia-shell.site-header{position:sticky;top:12px;z-index:1000;width:calc(100% - 32px);max-width:1240px;margin:12px auto 0;border:1px solid rgba(30,60,48,.10);border-radius:26px;background:rgba(255,255,255,.94);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);box-shadow:0 8px 32px rgba(20,40,30,.06)}
.sia-shell .nav{max-width:none;padding:8px 24px;min-height:72px;gap:28px;display:flex;align-items:center;justify-content:space-between}
.sia-shell .brand img{width:180px;height:60px;object-fit:contain}.sia-shell .nav-links{display:flex;gap:14px;align-items:center;flex-wrap:nowrap}.nav-group{position:relative}.nav-group summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;font-size:14px;font-weight:600;color:#243a30;white-space:nowrap}.nav-group summary::-webkit-details-marker{display:none}.nav-group summary:after{content:'⌄';font-size:14px}.nav-group[open] summary,.nav-group summary:hover{background:#edf2ef}.nav-dropdown{position:absolute;top:calc(100% + 12px);left:0;min-width:252px;background:#fff;border:1px solid #e0e7e2;border-radius:20px;padding:10px;box-shadow:0 20px 60px #152e2420;display:grid;gap:2px}.sia-shell .nav-dropdown a{display:block;padding:12px 14px;min-height:44px;border-radius:10px;font-size:14px;font-weight:500;color:#243a30;text-decoration:none;white-space:normal}.sia-shell .nav-dropdown a:hover,.sia-shell .nav-dropdown a[aria-current=page]{background:#edf2ef;color:#164832}.sia-shell .nav-contact{background:#183f30;color:#fff;border-radius:999px;padding:12px 20px;min-height:44px;white-space:nowrap;font-size:14px;text-decoration:none}.sia-shell :is(a,button,summary):focus-visible{outline:3px solid #996b10;outline-offset:4px}.sia-shell .nav-toggle{display:none}
@media(max-width:1000px){.sia-shell .nav{padding:6px 18px;gap:12px}.sia-shell .brand img{width:150px}.sia-shell .nav-links{gap:2px}.nav-group summary{font-size:13px;padding:8px}.sia-shell .nav-contact{padding:12px}}
@media(max-width:800px){.sia-shell.site-header{top:8px;width:calc(100% - 20px);border-radius:22px}.sia-shell .nav{min-height:64px;flex-wrap:wrap}.sia-shell .brand img{height:52px;width:150px}.sia-shell .nav-toggle{display:flex;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:5px;background:#edf2ef;border:0;border-radius:50%}.sia-shell .nav-toggle span{display:block;width:18px;height:2px;background:#243a30}.sia-shell .nav-links{display:none;position:static;width:100%;padding:4px 0 14px;max-height:75vh;overflow:auto;transform:none;background:transparent;box-shadow:none}.nav-open .sia-shell .nav-links{display:grid;gap:4px}.nav-group summary{font-size:16px;justify-content:space-between;padding:12px}.nav-dropdown{position:static;min-width:0;margin:4px 0 10px;background:#f4f6f4;border:0;box-shadow:none}.sia-shell .nav-contact{display:block;text-align:center;margin-top:8px}.sia-shell .nav-group[open] .nav-dropdown{display:grid}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

.compass-feature{padding:90px 24px 100px;text-align:center;max-width:1024px}.compass-feature h2{font-size:clamp(36px,5.5vw,68px);line-height:1.06;letter-spacing:-.035em;font-weight:650;margin:16px auto 24px}.compass-feature p:not(.eyebrow){font-size:20px;color:#56625b;max-width:650px;margin:0 auto 28px}.compass-feature .btn{border-radius:999px;background:#183f30;color:#fff;padding:14px 24px;box-shadow:none}.compass-feature small{display:block;color:#59655e;max-width:620px;margin:22px auto 0}.hero h1{letter-spacing:-.035em}.card{border-radius:22px}.btn{border-radius:999px;min-height:44px}

:root{--accent:#183f30;--accent-link:#164832;--paper:var(--bg)}body{background:var(--bg);font-family:var(--font)}.sia-shell .nav-dropdown{border-radius:var(--r-panel);border-color:var(--hairline)}.card{border-radius:var(--r-panel)}.stat strong,.price strong{font-variant-numeric:tabular-nums}.sia-shell .brand{font-size:16px;letter-spacing:0}.sia-shell .brand img{max-width:none}.sia-shell .nav-group summary{color:var(--text)}
.sia-shell .nav-group{border:0;margin:0;padding:0;background:transparent;border-radius:0}.sia-shell .nav{width:100%}.hero h1{font-size:clamp(40px,5.2vw,76px);max-width:800px}.hero-copy{max-width:640px}.compass-feature h2{font-family:var(--font)}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.sia-shell.site-header{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}}

.sia-shell .nav-links{border:0;border-radius:0}.sia-shell .nav-dropdown a{border:0;background:transparent;box-shadow:none;text-align:left}.sia-shell .nav-dropdown a:hover{background:var(--hover)}