/* ════════════════════════════════════════════════════════════════════════
   TrajectIQ™ Premium Skin — v54
   Loaded AFTER each page's inline styles. Same layout, same palette —
   executed at a higher grade: glass surfaces, depth, motion, type rhythm.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  --tiq-grad: linear-gradient(135deg,#7B2D8E 0%,#C8198A 52%,#F05528 100%);
  --tiq-grad-soft: linear-gradient(135deg,rgba(123,45,142,.22),rgba(200,25,138,.22) 52%,rgba(240,85,40,.22));
  --tiq-glass: rgba(255,255,255,0.038);
  --tiq-glass-hi: rgba(255,255,255,0.07);
  --tiq-line: rgba(255,255,255,0.09);
  --tiq-line-hi: rgba(200,25,138,0.45);
  --tiq-glow: 0 10px 30px rgba(200,25,138,0.32), 0 2px 8px rgba(0,0,0,0.4);
  --tiq-glow-lg: 0 18px 48px rgba(200,25,138,0.42), 0 4px 12px rgba(0,0,0,0.45);
  --tiq-shadow: 0 16px 40px rgba(0,0,0,0.38);
  --tiq-ease: cubic-bezier(.22,.61,.36,1);
}

/* ── Global finish ──────────────────────────────────────────────────── */
html{ text-rendering: optimizeLegibility; }
body{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection{ background: rgba(200,25,138,.45); color:#fff; }

/* Gradient hairline across the very top of every page */
body::before{
  content:""; position:fixed; top:0; left:0; right:0; height:2px;
  background: var(--tiq-grad); z-index:1000; pointer-events:none;
}

/* Dark, branded scrollbar (WebKit) */
::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:#0A0613; }
::-webkit-scrollbar-thumb{ background:#332447; border-radius:8px; border:2.5px solid #0A0613; }
::-webkit-scrollbar-thumb:hover{ background:#7B2D8E; }

/* Visible, branded keyboard focus */
:focus-visible{
  outline: 2px solid #C8198A !important;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Headline rhythm — tighter tracking, optical balance */
h1,h2,h3{ letter-spacing:-0.022em; text-wrap: balance; }

/* ── Navigation: deeper glass, scroll elevation ─────────────────────── */
.top-nav, .trajectiq-tab-bar{
  background: rgba(14,9,24,0.66) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: box-shadow .35s var(--tiq-ease), background .35s var(--tiq-ease);
}
.tiq-scrolled .top-nav, .tiq-scrolled .trajectiq-tab-bar{
  background: rgba(14,9,24,0.85) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}
.top-nav-links a, .nav-links a{ position:relative; transition: color .2s; }
.top-nav-links a::after, .nav-links a::after{
  content:""; position:absolute; left:0; bottom:-5px; height:2px; width:0;
  background: var(--tiq-grad); border-radius:2px; transition: width .28s var(--tiq-ease);
}
.top-nav-links a:hover::after, .nav-links a:hover::after,
.top-nav-links a.active::after, .nav-links a.active::after{ width:100%; }

/* Analyzer/Gap tab bar: retire the leftover amber active tint → brand magenta */
.tab-btn.active{
  color:#C8198A !important;
  background: rgba(200,25,138,0.10) !important;
  border-bottom-color:#C8198A !important;
}
.tab-btn{ transition: color .2s, background .2s; }

/* ── Buttons: glow, lift, intent ────────────────────────────────────── */
.btn-start, .top-nav-cta, .nav-cta, .btn-gradient, .gate-btn-primary,
.tier-cta, .form-submit, .btn-grad, .btn-cta, .annual-contact-btn, .book-cta-btn{
  position:relative;
  box-shadow: var(--tiq-glow);
  transition: transform .22s var(--tiq-ease), box-shadow .22s var(--tiq-ease), filter .22s;
  will-change: transform;
}
.btn-start:hover, .top-nav-cta:hover, .nav-cta:hover, .btn-gradient:hover,
.gate-btn-primary:hover, .tier-cta:hover, .form-submit:hover, .btn-grad:hover,
.btn-cta:hover, .annual-contact-btn:hover, .book-cta-btn:hover{
  transform: translateY(-2px);
  box-shadow: var(--tiq-glow-lg);
  filter: brightness(1.06);
}
.btn-start:active, .top-nav-cta:active, .nav-cta:active, .btn-gradient:active,
.gate-btn-primary:active, .tier-cta:active, .form-submit:active, .btn-grad:active{
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(200,25,138,0.3);
}
/* Secondary / ghost buttons: glass treatment */
.btn-secondary, .btn-ghost, .btn-oauth{
  background: var(--tiq-glass) !important;
  border: 1px solid var(--tiq-line) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .22s var(--tiq-ease), border-color .22s, background .22s;
}
.btn-secondary:hover, .btn-ghost:hover, .btn-oauth:hover{
  transform: translateY(-2px);
  border-color: var(--tiq-line-hi) !important;
  background: var(--tiq-glass-hi) !important;
}

/* ── Cards: one consistent glass language sitewide ──────────────────── */
.value-card, .how-step, .expect-item, .beta-card, .about-book-card,
.gate-card, .module-card, .primary-card, .extra-card, .card,
.salary-card, .co-card, .investor-card, .form-card, .faq-row{
  background: var(--tiq-glass);
  border: 1px solid var(--tiq-line);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .28s var(--tiq-ease), border-color .28s, box-shadow .28s;
}
/* Lift only the cards that are links/teasers — never forms or FAQ */
.value-card:hover, .how-step:hover, .expect-item:hover, .module-card:hover,
.salary-card:hover, .co-card:hover, .investor-card:hover, .about-book-card:hover{
  transform: translateY(-4px);
  border-color: var(--tiq-line-hi);
  box-shadow: var(--tiq-shadow);
}
.faq-row:hover{ border-color: var(--tiq-line-hi); }

/* Pricing tiers: sharpen the hierarchy */
.tier-card{
  border-radius: 20px;
  transition: transform .28s var(--tiq-ease), border-color .28s, box-shadow .28s;
}
.tier-card:hover{ transform: translateY(-5px); border-color: rgba(255,255,255,0.22); box-shadow: var(--tiq-shadow); }
.tier-card.featured{
  background:
    linear-gradient(rgba(26,15,40,0.92), rgba(26,15,40,0.92)) padding-box,
    var(--tiq-grad) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 24px 60px rgba(200,25,138,0.30), 0 4px 14px rgba(0,0,0,0.5);
}
.tier-card.featured:hover{ transform: translateY(-12px); }
.tier-price{ letter-spacing:-0.03em; }

/* ── Hero & landing polish (index) ──────────────────────────────────── */
.w-body h1{ font-size: clamp(2.6rem, 6vw, 4.1rem); }
.w-body h1 em{
  background: var(--tiq-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-style: italic;
}
.hero-free-badge{
  border: 1px solid rgba(200,25,138,0.5) !important;
  background: rgba(200,25,138,0.10) !important;
  box-shadow: 0 0 24px rgba(200,25,138,0.25);
}
.type-chips .chip, .pill, .lh-pill{
  transition: transform .22s var(--tiq-ease), box-shadow .22s, border-color .22s;
}
.type-chips .chip:hover{
  transform: translateY(-2px);
  border-color: var(--tiq-line-hi);
  box-shadow: 0 8px 20px rgba(200,25,138,0.2);
}

/* Section breathing room — whitespace is the cheapest luxury */
.how-section, .value-section, .trust-section, .about-section{ padding-top: 96px !important; padding-bottom: 96px !important; }
.how-title{ font-size: clamp(1.8rem, 3.2vw, 2.5rem) !important; }

/* Quiz: gradient progress + premium slider */
.q-bar{
  background: var(--tiq-grad) !important;
  box-shadow: 0 0 14px rgba(200,25,138,0.55);
  border-radius: 0 3px 3px 0;
  transition: width .45s var(--tiq-ease) !important;
}
.opt{ transition: transform .2s var(--tiq-ease), border-color .2s, background .2s; }
.opt:hover{ transform: translateX(4px); }
input[type="range"]{ accent-color: #C8198A; }
input[type="range"]::-webkit-slider-thumb{ box-shadow: 0 0 0 6px rgba(200,25,138,0.22), 0 2px 8px rgba(0,0,0,0.5); }

/* ── Forms: focused = lit ───────────────────────────────────────────── */
.form-input, .form-select, .form-textarea{
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus{
  border-color: #C8198A !important;
  box-shadow: 0 0 0 4px rgba(200,25,138,0.18) !important;
  background: rgba(255,255,255,0.07) !important;
}

/* ── Tables (pricing compare) ───────────────────────────────────────── */
.compare-table thead th{
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  background: rgba(14,9,24,0.8) !important;
  position: sticky; top: 62px; z-index: 5;
}
.compare-table tr{ transition: background .15s; }
.compare-table tbody tr:hover{ background: rgba(200,25,138,0.05); }

/* ── Footer: quiet, expensive ───────────────────────────────────────── */
footer, .site-footer{
  border-top: 1px solid rgba(255,255,255,0.07);
  background:
    radial-gradient(ellipse 60% 80% at 50% 110%, rgba(123,45,142,0.18), transparent),
    #0A0613 !important;
}
.footer-links a, footer a{ transition: color .2s; }
.footer-links a:hover, footer a:hover{ color:#f0abda !important; }

/* ── Scroll-reveal (elements get .tiq-reveal from tiq-premium.js) ───── */
.tiq-reveal{ opacity:0; transform: translateY(22px); }
.tiq-reveal.tiq-in{
  opacity:1; transform:none;
  transition: opacity .7s var(--tiq-ease), transform .7s var(--tiq-ease);
  transition-delay: var(--tiq-delay, 0s);
}

/* ── Respect reduced motion: kill every transform/animation above ───── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .tiq-reveal{ opacity:1 !important; transform:none !important; }
  .btn-start:hover, .tier-card:hover, .value-card:hover{ transform:none !important; }
}