/* ============================================================================
   ToneGrid landing — "Sleek" skin (2026-10-03)
   An Apple-style refinement layer over the existing Tailwind markup.

   How it works
   - Loaded by includes/head.php AFTER the inline <style>, cache-busted with
     ?v=filemtime (the vhost serves css as immutable for a year).
   - Tailwind's Play CDN injects its utilities into <head> at runtime, AFTER
     this file. Every rule here is therefore scoped under `html.tg-sleek`
     (set on <html> in head.php) so it outranks a single utility class
     without resorting to !important.
   - Tokens live on :root. Palette changes that affect the whole site are
     made in the tailwind.config block in head.php; this file handles shape,
     type, depth and motion.
   ========================================================================== */

:root {
  --tg-bg:          #000000;
  --tg-bg-2:        #0b0b0d;
  --tg-card:        #161618;
  --tg-card-2:      #1f1f22;
  --tg-text:        #f5f5f7;
  --tg-text-2:      #a1a1a6;
  --tg-text-3:      #6e6e73;
  --tg-hairline:    rgba(255, 255, 255, 0.08);
  --tg-hairline-2:  rgba(255, 255, 255, 0.14);
  --tg-fill:        rgba(255, 255, 255, 0.06);
  --tg-fill-2:      rgba(255, 255, 255, 0.11);
  --tg-accent:      #8B5CF6;
  --tg-accent-2:    #a78bfa;
  --tg-accent-deep: #6d28d9;
  --tg-ease:        cubic-bezier(0.25, 0.1, 0.25, 1);   /* Apple's default curve */
  --tg-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --tg-nav-h:       3.5rem;
}

/* ---------------------------------------------------------------------------
   1. Base: rendering, background, scrolling
   ------------------------------------------------------------------------- */
html.tg-sleek {
  background: var(--tg-bg);
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  overscroll-behavior-y: none;
}
html.tg-sleek body {
  color: var(--tg-text);
  /* A soft spotlight at the top of every page, Apple keynote style.
     Pure CSS on body so it needs nothing from the page markup. */
  background:
    radial-gradient(900px 520px at 50% -140px, rgba(139, 92, 246, 0.16), transparent 70%) no-repeat,
    var(--tg-bg);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
html.tg-sleek ::selection { background: rgba(139, 92, 246, 0.45); color: #fff; }
html.tg-sleek :focus-visible {
  outline: 2px solid rgba(167, 139, 250, 0.9);
  outline-offset: 3px;
  border-radius: 0.5rem;
}
html.tg-sleek a:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: no-preference) {
  html.tg-sleek { scroll-behavior: smooth; }
}

/* ---------------------------------------------------------------------------
   2. Typography
   ------------------------------------------------------------------------- */
html.tg-sleek h1, html.tg-sleek h2, html.tg-sleek h3, html.tg-sleek h4 {
  color: var(--tg-text);
  font-weight: 700;
  text-wrap: balance;
  letter-spacing: -0.022em;
}
html.tg-sleek h1 { letter-spacing: -0.045em; line-height: 1.02; }
html.tg-sleek h2 { letter-spacing: -0.032em; line-height: 1.08; }
html.tg-sleek h3 { letter-spacing: -0.018em; }
html.tg-sleek p  { text-wrap: pretty; }
/* Aeonik ships 300/400/700 only; 800/900 already fall back to 700. Say so. */
html.tg-sleek .font-extrabold, html.tg-sleek .font-black { font-weight: 700; }

/* Secondary text: one Apple gray instead of the old #adaaaa */
html.tg-sleek .text-on-surface-variant,
html.tg-sleek .text-\[\#adaaaa\] { color: var(--tg-text-2); }
html.tg-sleek .text-white { color: var(--tg-text); }

/* Tabular figures for stats and prices so columns don't wobble */
html.tg-sleek .kinetic-text,
html.tg-sleek .font-mono,
html.tg-sleek .stat-glow p:first-child { font-variant-numeric: tabular-nums; }

/* Eyebrow labels: drop the pill, keep the small caps */
html.tg-sleek span.uppercase.tracking-widest.rounded-full.text-xs {
  background: transparent;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* Gradient text: brighter, more luminous ramp */
html.tg-sleek .kinetic-text {
  background: linear-gradient(135deg, #e4dbff 0%, #b49cff 40%, #8B5CF6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Material Symbols: thinner stroke reads closer to SF Symbols */
html.tg-sleek .material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* ---------------------------------------------------------------------------
   3. Motion defaults
   The old head.php rule clamped every Tailwind transition to 120ms with
   !important. Replaced with a calmer 220ms on Apple's curve; rules below
   that need longer set their own.
   ------------------------------------------------------------------------- */
html.tg-sleek [class*="transition"] {
  transition-duration: 220ms;
  transition-timing-function: var(--tg-ease);
}

/* ---------------------------------------------------------------------------
   4. Hairlines
   Section dividers fade at the edges instead of running wall to wall.
   ------------------------------------------------------------------------- */
html.tg-sleek section.border-t,
html.tg-sleek section.border-b,
html.tg-sleek section.border-y {
  border-color: transparent;
  border-image: linear-gradient(90deg, transparent, var(--tg-hairline-2) 18%, var(--tg-hairline-2) 82%, transparent) 1;
}

/* ---------------------------------------------------------------------------
   5. Surfaces: cards, panels, tiles
   ------------------------------------------------------------------------- */
html.tg-sleek .rounded-3xl.bg-surface-container,
html.tg-sleek .rounded-3xl.card-shine,
html.tg-sleek .rounded-2xl.bg-surface-container:not(.h-3):not([class*="w-"]) {
  background: var(--tg-card);
  border-color: var(--tg-hairline);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    transform 420ms var(--tg-ease-out),
    box-shadow 420ms var(--tg-ease-out),
    border-color 260ms var(--tg-ease),
    background-color 260ms var(--tg-ease);
}
html.tg-sleek .rounded-3xl.card-shine {
  background-image: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, transparent 45%);
}
html.tg-sleek .rounded-3xl.bg-surface-container:hover,
html.tg-sleek .rounded-3xl.card-shine:hover {
  transform: translateY(-3px);
  border-color: var(--tg-hairline-2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 28px 56px -20px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(139, 92, 246, 0.06);
}
html.tg-sleek .rounded-3xl.bg-surface-container.border-transparent {
  border-color: var(--tg-hairline);
}

/* Popular pricing tier: 1px luminous edge instead of a 2px solid border */
html.tg-sleek .rounded-3xl.border-2.border-primary {
  border-width: 1px;
  border-color: rgba(167, 139, 250, 0.55);
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.07), rgba(139, 92, 246, 0.02) 40%, var(--tg-card) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(139, 92, 246, 0.18),
    0 40px 80px -40px rgba(139, 92, 246, 0.45);
}

/* Stat tiles: big numbers, no box */
html.tg-sleek .stat-glow {
  box-shadow: none;
  background: transparent;
}

/* Tag chips */
html.tg-sleek span.rounded-full.text-xs.bg-surface-container-high {
  background: var(--tg-fill);
  color: var(--tg-text-2);
  font-weight: 500;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* Hero dashboard mock: true glass */
html.tg-sleek .glass-panel {
  background: rgba(255, 255, 255, 0.035);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  backdrop-filter: blur(30px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 50px 100px -40px rgba(0, 0, 0, 0.9);
}
html.tg-sleek .glass-panel .bg-surface-container-high { background: rgba(255, 255, 255, 0.05); }
html.tg-sleek .glass-panel .bg-surface-container      { background: rgba(255, 255, 255, 0.07); }
html.tg-sleek .glass-panel .h-3                       { height: 6px; }

/* Generic hard-coded surfaces left in a few pages */
html.tg-sleek .bg-\[\#0e0e0e\]       { background-color: var(--tg-bg); }
html.tg-sleek .bg-\[\#1a1919\],
html.tg-sleek .bg-\[\#1a1a1a\],
html.tg-sleek .bg-\[\#181818\]       { background-color: var(--tg-card-2); }

/* ---------------------------------------------------------------------------
   6. Buttons
   Apple pills: regular weight, flat, a hair of inner light, press to 97%.
   ------------------------------------------------------------------------- */
html.tg-sleek .kinetic-gradient {
  background: linear-gradient(180deg, #9d72fb 0%, #7c3aed 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(0, 0, 0, 0.4);
}
html.tg-sleek a.kinetic-gradient,
html.tg-sleek button.kinetic-gradient {
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: transform 220ms var(--tg-ease-out), filter 220ms var(--tg-ease), box-shadow 220ms var(--tg-ease);
}
html.tg-sleek a.kinetic-gradient:hover,
html.tg-sleek button.kinetic-gradient:hover {
  filter: brightness(1.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 10px 28px -10px rgba(139, 92, 246, 0.7);
}
html.tg-sleek a.kinetic-gradient:active,
html.tg-sleek button.kinetic-gradient:active { transform: scale(0.97); filter: brightness(0.96); }

/* Secondary (ghost) pills */
html.tg-sleek a.rounded-full.bg-surface-container-high,
html.tg-sleek button.rounded-full.bg-surface-container-high {
  background: var(--tg-fill);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: transform 220ms var(--tg-ease-out), background-color 220ms var(--tg-ease), box-shadow 220ms var(--tg-ease);
}
html.tg-sleek a.rounded-full.bg-surface-container-high:hover,
html.tg-sleek button.rounded-full.bg-surface-container-high:hover {
  background: var(--tg-fill-2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
html.tg-sleek a.rounded-full.bg-surface-container-high:active { transform: scale(0.97); }

/* Pricing plan buttons that were outlined purple */
html.tg-sleek a.border-primary\/30.text-primary {
  background: var(--tg-fill);
  border-color: transparent;
  color: var(--tg-text);
  font-weight: 500;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
html.tg-sleek a.border-primary\/30.text-primary:hover {
  background: var(--tg-fill-2);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
html.tg-sleek a.rounded-xl.font-bold, html.tg-sleek a.rounded-xl.font-semibold { font-weight: 500; }

/* ---------------------------------------------------------------------------
   7. Navigation (markup in includes/nav.php)
   ------------------------------------------------------------------------- */
html.tg-sleek main.pt-20 { padding-top: var(--tg-nav-h); }

html.tg-sleek .tg-nav {
  height: var(--tg-nav-h);
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--tg-hairline);
  box-shadow: none;
  will-change: transform;
  transform: translateZ(0);
}
html.tg-sleek .tg-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: rgba(245, 245, 247, 0.72);
  transition: color 200ms var(--tg-ease), background-color 200ms var(--tg-ease);
}
html.tg-sleek .tg-nav-link:hover { color: #fff; }
html.tg-sleek .tg-nav-link.is-active { color: #fff; background: var(--tg-fill); }
html.tg-sleek .tg-nav-link .material-symbols-outlined {
  font-size: 16px;
  opacity: 0.6;
  transition: transform 200ms var(--tg-ease), opacity 200ms var(--tg-ease);
}
html.tg-sleek .tg-nav-link:hover .material-symbols-outlined { opacity: 1; }
html.tg-sleek .fonts-loaded .tg-nav-link .material-symbols-outlined { opacity: 0.6; }
html.tg-sleek .fonts-loaded .tg-nav-link:hover .material-symbols-outlined { opacity: 1; }

html.tg-sleek .tg-nav-cta {
  font-size: 0.8125rem;
  padding: 0.45rem 1rem;
}

html.tg-sleek .tg-flyout {
  background: rgba(28, 28, 30, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid var(--tg-hairline);
  border-radius: 1.1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 60px -16px rgba(0, 0, 0, 0.8);
}
html.tg-sleek .tg-flyout a { border-radius: 0.75rem; }
html.tg-sleek .tg-flyout a:hover { background: var(--tg-fill); }
html.tg-sleek .tg-flyout .material-symbols-outlined { color: var(--tg-accent-2); }

html.tg-sleek .tg-lang-menu {
  background: rgba(28, 28, 30, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid var(--tg-hairline);
  border-radius: 1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 60px -16px rgba(0, 0, 0, 0.8);
}

/* Mobile sheet */
html.tg-sleek #mobile-menu {
  top: var(--tg-nav-h);
  background: rgba(0, 0, 0, 0.92);
}

/* ---------------------------------------------------------------------------
   8. Footer
   ------------------------------------------------------------------------- */
html.tg-sleek footer.bg-\[\#131313\] {
  background: var(--tg-bg);
  border-top: 1px solid var(--tg-hairline);
}
html.tg-sleek footer h4 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--tg-text);
  margin-bottom: 1rem;
}
html.tg-sleek footer .text-sm { font-size: 0.8125rem; line-height: 1.3rem; }
html.tg-sleek footer ul.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.7rem; }
html.tg-sleek footer li a,
html.tg-sleek footer .text-xs a {
  color: var(--tg-text-2);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color 200ms var(--tg-ease);
}
html.tg-sleek footer li a:hover,
html.tg-sleek footer .text-xs a:hover { color: var(--tg-text); text-decoration: underline; }
html.tg-sleek footer .border-white\/5 { border-color: var(--tg-hairline); }
html.tg-sleek footer svg { width: 18px; height: 18px; }

/* Cookie FAB */
html.tg-sleek #cookie-fab-btn {
  background: rgba(28, 28, 30, 0.9);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-color: var(--tg-hairline-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 40px -12px rgba(0, 0, 0, 0.8);
}

/* ---------------------------------------------------------------------------
   9. Forms
   ------------------------------------------------------------------------- */
html.tg-sleek input:not([type="checkbox"]):not([type="radio"]):focus,
html.tg-sleek textarea:focus,
html.tg-sleek select:focus {
  --tw-ring-color: rgba(139, 92, 246, 0.35);
  border-color: var(--tg-accent);
}

/* ---------------------------------------------------------------------------
   10. Reduced motion
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.tg-sleek .rounded-3xl.bg-surface-container:hover,
  html.tg-sleek .rounded-3xl.card-shine:hover { transform: none; }
  html.tg-sleek a.kinetic-gradient:active,
  html.tg-sleek a.rounded-full.bg-surface-container-high:active { transform: none; }
}

/* ---------------------------------------------------------------------------
   11. Small screens
   Grid items default to min-width:auto, so a long unbreakable word in a
   large heading ("distribution.") used to push the whole hero column past
   the viewport on phones. Let grid children shrink, and scale the hero h1
   with the viewport below the sm breakpoint.
   ------------------------------------------------------------------------- */
html.tg-sleek .grid > * { min-width: 0; }
@media (max-width: 639px) {
  html.tg-sleek h1.text-5xl { font-size: clamp(2rem, 10vw, 3rem); }
  html.tg-sleek h2.text-4xl { font-size: clamp(1.75rem, 8vw, 2.25rem); }
}