/* ============================================================
   TREYSWAYY — shared design system
   Bold Athletic Premium: charcoal, orange accent, Oswald + Inter
   Tokens sourced from /treyswayy-brand-kit — adapted for a dark canvas
   ============================================================ */

:root {
  /* ── Brand-exact tokens ── */
  --tw-orange:      #E85D1C;
  --tw-orange-deep: #C94911;
  --tw-charcoal:    #181C20;
  --tw-slate:       #505961;
  --tw-mist:        #D5DBDE;
  --tw-cloud:       #F4F5F5;
  --tw-white:       #FFFFFF;

  /* ── Surface scale (derived from charcoal, dark-canvas adaptation) ── */
  --bg:            #181C20;
  --bg-alt:        #1D2227;
  --card:          #21262C;
  --card-hover:    #262C33;
  --border:        #2E353C;
  --border-soft:   rgba(213,219,222,0.09);
  --text:          #FFFFFF;
  --text-dim:      #D7DBDE;
  --muted:         #9BA3AA;
  --muted-2:       #6B747C;
  --accent:        #E85D1C;
  --accent-hover:  #FF7A3D;
  --accent-dim:    rgba(232,93,28,0.14);
  --accent-border: rgba(232,93,28,0.4);
  --on-accent:     #181C20;
  --danger:        #e5484d;
  --success:       #4ade80;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max: 1120px;
  --max-narrow: 720px;

  /* ── Motion system ── */
  --ease-out:      cubic-bezier(.16,.84,.44,1);
  --ease-out-soft: cubic-bezier(.25,.46,.45,.94);
  --ease-spring:   cubic-bezier(.34,1.56,.64,1);
  --ease-expo:     cubic-bezier(.19,1,.22,1);
  --dur-fast: .18s;
  --dur-base: .32s;
  --dur-slow: .6s;

  --shadow-sm: 0 2px 10px rgba(0,0,0,.28);
  --shadow-md: 0 14px 34px rgba(0,0,0,.34);
  --shadow-accent: 0 14px 32px rgba(232,93,28,.24);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text-dim);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* overflow-x: hidden here would force overflow-y to compute as 'auto'
     per the CSS overflow pairing rule, turning body into its own scroll
     container and silently breaking window.scrollTo / anchor links.
     overflow-x: clip is exempt from that pairing, so normal document
     scrolling stays intact. */
  overflow-x: clip;
}

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

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.002em;
}

h1, h2 {
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.08;
}

::selection { background: var(--accent); color: var(--on-accent); }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Texture ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 36% at 50% -6%, rgba(232,93,28,0.10) 0%, transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' fill='%23ffffff' opacity='0.02'/%3E%3C/svg%3E");
}

/* ============================================================
   SCROLL PROGRESS
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  z-index: 200;
  transition: width 0.08s linear;
  pointer-events: none;
}

/* ============================================================
   NAV
   ============================================================ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 40px;
  background: rgba(24,28,32,0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
  transition: padding var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.site-nav.is-scrolled {
  padding: 12px 40px;
  background: rgba(24,28,32,0.92);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.site-nav.is-hidden { transform: translateY(-100%); }

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand-mark-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--tw-cloud);
  flex-shrink: 0;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out);
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 6px 16px rgba(0,0,0,.24);
}
.brand-lockup:hover .brand-mark-plate { transform: scale(1.06) rotate(-2deg); }
.brand-mark-plate img { width: 78%; height: auto; display: block; }
.brand-mark-plate--lg {
  width: 64px; height: 64px;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 16px 32px rgba(0,0,0,.32);
}
.brand-wordmark {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 0.02em;
  color: var(--text);
}
/* Logo-mark version of .brand-wordmark (nav top-left, index.html) — sized
   to match .brand-mark-plate's 34px height rather than the 19px text it
   replaced; at literal text-size the wordmark's condensed lettering blurs
   into mush, and the icon beside it already sets a taller baseline. */
.brand-wordmark-img { height: 30px; width: auto; display: block; }

.nav-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  will-change: transform;
}
.nav-cta:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow-accent); }

@media (max-width: 860px) {
  .site-nav { padding: 16px 20px; }
  .site-nav.is-scrolled { padding: 12px 20px; }
}

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.wrap {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 40px;
}
.wrap-narrow {
  position: relative;
  z-index: 1;
  max-width: var(--max-narrow);
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 640px) {
  .wrap { padding: 0 22px; }
}

.section { padding: 100px 0; position: relative; z-index: 1; }
.section-tight { padding: 64px 0; }
@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .section-tight { padding: 44px 0; }
}

/* Ambient WebGL noise canvas — see js/neural-noise.js. Any element can
   opt in with [data-neural-noise]; the canvas is inserted as that
   element's first child and only fades in once WebGL actually
   initializes (a host stays plain, or shows its own static fallback,
   until then and whenever WebGL is unavailable). Each host still needs
   its real content wrapped in something with its own `position` and a
   `z-index` above 0 so it paints above the canvas — see .hero-v2-grid,
   .form-header-inner and #results .wrap for the pattern. */
[data-neural-noise] { position: relative; }
.ambient-noise { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: '';
  width: 20px; height: 1px;
  background: var(--accent);
  transform-origin: left center;
  animation: eyebrowDraw .6s var(--ease-out) both;
}
@keyframes eyebrowDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

h1 { font-size: clamp(40px, 6vw, 68px); line-height: 1.04; }
h2 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; }
h3 { font-size: 22px; line-height: 1.25; }

p { color: var(--text-dim); }
.lede {
  font-size: 18px;
  color: var(--text-dim);
  line-height: 1.7;
  max-width: 540px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 15px 30px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  border: none;
  overflow: hidden;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  will-change: transform;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: var(--shadow-accent); }
.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn-ghost { background: none; color: var(--text-dim); padding: 10px 4px; font-weight: 500; }
.btn-ghost:hover { color: var(--text); }
.btn-block { width: 100%; }

/* ripple feedback, driven by --rx/--ry set from pointer position in JS */
.btn::after {
  content: '';
  position: absolute;
  left: var(--rx, 50%); top: var(--ry, 50%);
  width: 10px; height: 10px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(0);
  opacity: 0;
  pointer-events: none;
}
.btn.is-rippling::after { animation: btnRipple .55s var(--ease-out) forwards; }
@keyframes btnRipple {
  from { transform: translate(-50%,-50%) scale(0); opacity: .55; }
  to   { transform: translate(-50%,-50%) scale(22); opacity: 0; }
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border-soft);
  padding: 48px 0 28px;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.footer-social {
  display: flex;
  gap: 16px;
}
.footer-social a {
  color: var(--muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
}
.footer-social a:hover { color: var(--accent); background: var(--accent-dim); transform: translateY(-2px); }
.footer-social svg { width: 19px; height: 19px; }

/* ── Footer contact row ── */
.footer-contact-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.footer-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-bottom: 32px;
}
.footer-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--text-dim);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
  padding: 6px 0;
}
.footer-contact-item:hover { color: var(--accent); }
.footer-contact-item svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; }
@media (max-width: 480px) {
  .footer-contact { flex-direction: column; gap: 4px; }
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--border-soft);
  font-size: 12px;
  color: var(--muted); /* was --muted-2 (3.6:1) — fails WCAG AA for text; --muted passes at 6.7:1 */
}
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { color: var(--muted); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.footer-links a:hover { color: var(--accent); }

/* the deliberately-quiet checkout link: same visual weight as Privacy/Terms,
   no styling that calls attention to it */

/* ============================================================
   SCROLL REVEAL — fade/rise on enter, with optional stagger
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--stagger, 0) * 70ms);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   INTERACTIVE SURFACES — tilt + lift, used on cards/cells
   ============================================================ */
.tilt {
  transform: perspective(800px) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg)) translateY(var(--liftY, 0px));
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  will-change: transform;
}
.tilt.is-hovering { box-shadow: var(--shadow-md); }

/* ============================================================
   ANIMATED COUNTERS
   ============================================================ */
.count[data-count] { font-variant-numeric: tabular-nums; }

/* ============================================================
   MEDIA REVEAL — clip-path wipe for photography
   ============================================================ */
.media-reveal { position: relative; overflow: hidden; }
.media-reveal img {
  transform: scale(1.12);
  transition: transform 1.1s var(--ease-expo);
}
.media-reveal.visible img { transform: scale(1); }
.media-reveal::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(1);
  transition: transform .7s var(--ease-expo);
}
.media-reveal.visible::after { transform: scaleX(0); }

/* ============================================================
   MISC
   ============================================================ */
.divider { height: 1px; background: var(--border-soft); border: none; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--border);
  padding: 7px 14px;
  border-radius: 100px;
}