/* ───── Trippii shared styles (landing + subpages) ───── */
:root {
  --violet-50:#f3eefe; --violet-100:#e3d7fd; --violet-200:#c6b0fb;
  --violet-300:#a387f7; --violet-400:#8560f2; --violet-500:#5b2fe8;
  --violet-600:#4a21cc; --violet-700:#3b19a3; --violet-800:#2c127a; --violet-900:#1d0b52;
  --coral: oklch(0.72 0.18 35); --coral-ink: oklch(0.42 0.15 35);
  --mint:  oklch(0.82 0.12 160); --mint-ink: oklch(0.35 0.10 160);
  --lemon: oklch(0.92 0.15 95);  --lemon-ink: oklch(0.40 0.13 90);
  --bg: oklch(0.985 0.004 280);
  --bg-elev: oklch(1 0 0);
  --bg-subtle: oklch(0.965 0.006 280);
  --border: oklch(0.90 0.008 280);
  --border-strong: oklch(0.82 0.012 280);
  --ink: oklch(0.18 0.02 280);
  --ink-muted: oklch(0.45 0.015 280);
  --ink-faint: oklch(0.62 0.012 280);
  --font-display: "Red Hat Display", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --sh-sm: 0 2px 8px rgba(22,15,60,.08);
  --sh-md: 0 8px 24px rgba(22,15,60,.10);
  --sh-lg: 0 24px 60px rgba(22,15,60,.16);
  --sh-glow: 0 16px 48px rgba(91,47,232,.32);
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: oklch(0.14 0.015 280);
  --bg-elev: oklch(0.19 0.018 280);
  --bg-subtle: oklch(0.17 0.02 280);
  --border: oklch(0.28 0.02 280);
  --border-strong: oklch(0.40 0.025 280);
  --ink: oklch(0.98 0.004 280);
  --ink-muted: oklch(0.72 0.012 280);
  --ink-faint: oklch(0.55 0.012 280);
  --sh-sm: 0 2px 12px rgba(0,0,0,.4);
  --sh-md: 0 8px 28px rgba(0,0,0,.45);
  --sh-lg: 0 24px 60px rgba(0,0,0,.55);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
  font-family: var(--font-display);
  background: var(--bg); color: var(--ink);
  line-height: 1.55; -webkit-font-smoothing: antialiased;
  transition: background .2s, color .2s;
}
a { color: inherit; text-decoration: none; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 820px; margin: 0 auto; padding: 0 28px; }

/* NAV */
.nav { position: sticky; top: 0; z-index: 100; background: color-mix(in oklch, var(--bg) 85%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); }
.nav-inner { display: flex; align-items: center; gap: 36px; padding: 14px 28px; max-width: 1240px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.brand .mark {
  width: 44px; height: 44px; display: inline-block;
  background: var(--violet-500);
  -webkit-mask: url(../assets/logos/splash-logo.png) center/contain no-repeat;
  mask: url(../assets/logos/splash-logo.png) center/contain no-repeat;
}
.brand .word { font-size: 32px; letter-spacing: -0.035em; }
.nav-links { display: flex; gap: 4px; align-items: center; }
.nav-link { position: relative; padding: 8px 14px; font-size: 14px; font-weight: 600; color: var(--ink-muted); border-radius: var(--r-pill); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.nav-link:hover { color: var(--ink); background: var(--bg-subtle); }
.nav-link.active { color: var(--violet-500); background: color-mix(in oklch, var(--violet-500) 10%, transparent); }
.nav-link .chev { width: 12px; height: 12px; opacity: 0.6; }
.nav-link .dropdown { position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-md); padding: 8px; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity .15s, transform .15s; }
.nav-link:hover .dropdown, .nav-link:focus-within .dropdown { opacity: 1; pointer-events: auto; transform: translateY(0); }
.dropdown a { display: block; padding: 10px 12px; border-radius: var(--r-sm); font-size: 14px; color: var(--ink); font-weight: 500; }
.dropdown a:hover { background: var(--bg-subtle); color: var(--violet-500); }
.dropdown a.current { background: color-mix(in oklch, var(--violet-500) 10%, transparent); color: var(--violet-500); }
.nav-spacer { flex: 1; }
.nav-cta { display: flex; gap: 10px; align-items: center; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-weight: 700; border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer; transition: transform .12s, box-shadow .15s, background .15s, border-color .15s; letter-spacing: -0.005em; font-size: 14px; padding: 10px 18px; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--violet-500); color: #fff; }
.btn-primary:hover { background: var(--violet-400); box-shadow: var(--sh-glow); }
.btn-secondary { background: var(--bg-elev); color: var(--ink); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--ink); }
.btn-lg { font-size: 16px; padding: 14px 24px; }
.theme-toggle { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-elev); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.theme-toggle:hover { border-color: var(--border-strong); }
.theme-toggle .icon { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* PAGE HERO */
.page-hero { position: relative; padding: 72px 0 56px; overflow: hidden; border-bottom: 1px solid var(--border); }
.page-hero::before { content: ""; position: absolute; top: -200px; right: -150px; width: 600px; height: 600px; background: radial-gradient(closest-side, color-mix(in oklch, var(--violet-500) 25%, transparent), transparent 70%); pointer-events: none; }
.page-hero .crumbs { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.14em; display: flex; align-items: center; gap: 10px; position: relative; }
.page-hero .crumbs a { color: var(--violet-500); }
.page-hero .crumbs .sep { opacity: 0.5; }
.page-hero h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(44px, 6vw, 84px); line-height: 0.9; letter-spacing: -0.04em; margin: 20px 0 18px; position: relative; max-width: 18ch; }
.page-hero h1 em { font-style: normal; color: var(--violet-500); }
.page-hero .lede { font-size: 19px; color: var(--ink-muted); max-width: 60ch; margin: 0; position: relative; }

/* SUB-NAV TABS (for safety section) */
.tabs { border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 73px; z-index: 50; }
.tabs-inner { max-width: 1240px; margin: 0 auto; padding: 0 28px; display: flex; gap: 4px; overflow-x: auto; }
.tabs a { padding: 18px 18px; font-size: 14px; font-weight: 600; color: var(--ink-muted); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); }
.tabs a.active { color: var(--violet-500); border-color: var(--violet-500); }

/* FOOTER */
footer.foot { padding: 80px 0 40px; border-top: 1px solid var(--border); background: var(--bg); margin-top: 80px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; padding-bottom: 56px; border-bottom: 1px solid var(--border); }
.foot .brand .word { font-size: 28px; }
.foot .brand .mark { width: 40px; height: 40px; }
.foot-tag { margin-top: 16px; color: var(--ink-muted); font-size: 14px; max-width: 32ch; }
.foot-col h5 { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-faint); margin: 0 0 18px; font-weight: 600; }
.foot-col a { display: block; padding: 6px 0; font-size: 14px; color: var(--ink-muted); }
.foot-col a:hover { color: var(--violet-500); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 32px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.1em; }

/* MOBILE MENU */
.hamburger {
  display: none; width: 40px; height: 40px; border: none;
  background: none; cursor: pointer; padding: 8px;
  color: var(--ink); flex-shrink: 0;
}
.hamburger svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mobile-drawer {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 200; background: var(--bg); padding: 0;
  flex-direction: column; overflow-y: auto;
}
.mobile-drawer.open { display: flex; }
.mobile-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; border-bottom: 1px solid var(--border);
}
.mobile-drawer-close {
  width: 40px; height: 40px; border: none; background: none;
  cursor: pointer; color: var(--ink); padding: 8px;
}
.mobile-drawer-close svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mobile-drawer-links {
  display: flex; flex-direction: column; padding: 16px 28px; gap: 4px;
}
.mobile-drawer-links a {
  padding: 14px 8px; font-size: 18px; font-weight: 600;
  color: var(--ink); border-bottom: 1px solid var(--border);
}
.mobile-drawer-cta { padding: 24px 28px; }
.mobile-drawer-cta .btn { width: 100%; justify-content: center; font-size: 16px; padding: 14px 24px; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-cta .btn { display: none; }
  .hamburger { display: block; }
  .tabs { position: relative; top: auto; }
  .tabs-inner { overflow-x: visible; flex-wrap: wrap; }
  .tabs a { font-size: 13px; padding: 14px 12px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}