/* ============================================
   LIGHT VERSION — Light Theme
   Activated by body.light class
   Same fonts as dark, only colors change.
   Hides: glitch, marquee, active vectors.
   ============================================ */

/* ── CORE VARIABLE OVERRIDES ── */
body.light {
  --black: #f5f3f0;
  --white: #1a1a2e;
  --accent: #4a6fa5;
  --accent2: #6b8cae;
  --grey: #eae7e2;
  --grey-light: #d4d0cb;
  --text-opacity: 0.65;
  --text-body: rgba(26, 26, 46, 0.65);
  --text-secondary: rgba(26, 26, 46, 0.45);
  --text-muted: rgba(26, 26, 46, 0.35);
  --text-dim: rgba(26, 26, 46, 0.25);
  --text-faint: rgba(26, 26, 46, 0.3);
  --border-subtle: rgba(26, 26, 46, 0.1);

  background: var(--black);
  color: var(--white);
  cursor: auto;
}

/* ── DISABLE DARK-THEME EFFECTS ── */
body.light .grain { display: none; }
body.light .cursor-bracket,
body.light .trail-dot,
body.light #trail-container { display: none !important; }

/* ── SELECTION ── */
body.light ::selection {
  background: rgba(74, 111, 165, 0.18);
  color: var(--accent);
}

/* ── SCROLLBAR ── */
body.light {
  scrollbar-color: var(--accent) var(--grey);
}

/* ── LOADER ── */
body.light .loader {
  background: var(--black);
}

body.light .loader-text {
  color: var(--white);
}

body.light .loader-text span {
  color: var(--accent) !important;
}

body.light .loader-text::after {
  background: var(--accent);
}

body.light .loader-sub {
  color: var(--accent);
}

/* ── NAVIGATION ── */
body.light nav {
  background: rgba(245, 243, 240, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

body.light .nav-logo {
  color: var(--white);
}

body.light .nav-logo span {
  color: var(--accent);
}

body.light .nav-pages a {
  color: var(--white);
}

body.light .nav-pages a::after {
  background: var(--accent);
}

body.light .nav-cta {
  border: 1.5px solid var(--accent) !important;
  color: var(--accent) !important;
  border-radius: 0;
}

body.light .nav-cta:hover {
  background: var(--accent);
  color: #fff !important;
}

/* ── SIDE NAV ── */
body.light .side-nav {
  mix-blend-mode: normal;
}

body.light .side-nav a {
  color: var(--white);
}

body.light .side-nav a:hover,
body.light .side-nav a.active {
  color: var(--accent);
}

/* ── HERO ── */
body.light .hero {
  background: linear-gradient(180deg, #f5f3f0 0%, #eae7e2 100%);
}

/* canvas stays visible — particles render in light blue */

/* Hide Active Vectors dashboard */
body.light .video-placeholder {
  display: none !important;
}

/* ── HIDE MARQUEE ── */
body.light .marquee-section {
  display: none;
}

body.light .hero-title .three {
  color: var(--accent);
  -webkit-text-stroke: 0;
}

body.light .hero-sub {
  color: var(--accent);
}

body.light .hero-sub-today {
  color: var(--accent);
}

body.light .hero-tagline {
  color: rgba(26, 26, 46, 0.55);
}

body.light .hero-scroll {
  color: rgba(26, 26, 46, 0.35);
}

body.light .hero-scroll .line {
  background: linear-gradient(to bottom, var(--accent), transparent);
}

/* ── MARQUEE (styles if ever shown) ── */
body.light .marquee-item {
  color: rgba(26, 26, 46, 0.1);
}

body.light .marquee-item:hover {
  color: var(--accent);
}

body.light .marquee-item .dot {
  background: var(--accent);
}

/* ── ABOUT ── */
body.light .about-label {
  color: var(--accent);
}

body.light .about-label::before {
  background: var(--accent);
}

body.light .about-heading {
  color: var(--white);
}

body.light .about-heading em {
  color: var(--accent);
}

body.light .about-text {
  color: rgba(26, 26, 46, 0.6);
}

body.light .highlight {
  color: var(--accent);
}

body.light .stat {
  border-left-color: var(--grey-light);
}

body.light .stat-number {
  color: var(--accent);
}

body.light .stat-label {
  color: rgba(26, 26, 46, 0.4);
}

/* ── SERVICES ── */
body.light .section-label {
  color: var(--accent);
}

body.light .section-label::before {
  background: var(--accent);
}

body.light .flow-heading span {
  color: var(--accent);
}

body.light .flow-desc {
  color: rgba(26, 26, 46, 0.45);
}

body.light .flow-audit {
  background: #fff;
  border: 1.5px solid var(--accent);
}

body.light .flow-audit::after {
  border-left-color: var(--accent);
}

body.light .flow-audit-tag {
  color: var(--accent);
}

body.light .flow-audit-title {
  color: var(--white);
}

body.light .flow-audit-desc {
  color: rgba(26, 26, 46, 0.5);
}

/* "If it doesn't work, you don't pay" below services */
body.light .dont-pay-text {
  color: rgba(26, 26, 46, 0.5) !important;
}

/* ── FLIP CARDS ── */
body.light .flip-front {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

body.light .service-number {
  color: rgba(74, 111, 165, 0.06);
}

body.light .service-icon {
  border-color: var(--accent);
  color: var(--accent);
}

body.light .flip-card:hover .service-icon {
  background: var(--accent);
  color: #fff;
}

body.light .service-title {
  color: var(--white);
}

body.light .flip-hint {
  color: #bbb;
}

body.light .flip-card:hover .flip-hint {
  color: var(--accent);
}

body.light .flip-back {
  background: var(--accent);
  color: #fff;
}

body.light .flip-back h3 {
  color: #fff;
}

body.light .flip-back p {
  color: rgba(255, 255, 255, 0.75);
}

/* ── PROCESS ── */
body.light .process-heading em {
  color: var(--accent);
}

body.light .process-step {
  border-left-color: var(--grey-light);
}

body.light .step-num {
  -webkit-text-stroke-color: var(--accent);
}

body.light .process-step:nth-child(1) .step-num {
  -webkit-text-stroke: 1px rgba(74, 111, 165, 0.4);
  color: rgba(74, 111, 165, 0.05);
}

body.light .process-step:nth-child(2) .step-num {
  -webkit-text-stroke: 1.5px rgba(74, 111, 165, 0.55);
  color: rgba(74, 111, 165, 0.1);
  filter: none;
}

body.light .process-step:nth-child(3) .step-num {
  -webkit-text-stroke: 2px rgba(74, 111, 165, 0.75);
  color: rgba(74, 111, 165, 0.18);
  filter: none;
}

body.light .process-step:nth-child(4) .step-num {
  -webkit-text-stroke: 0;
  color: var(--accent);
  filter: none;
  animation: none;
}

body.light .step-particle {
  background: var(--accent);
}

body.light .step-desc {
  color: rgba(26, 26, 46, 0.55);
}

body.light .step-line {
  background: var(--accent);
}

/* ── TESTIMONIALS ── */
body.light .testimonials {
  background: #fff;
}

body.light .testimonials-heading em {
  color: var(--accent);
}

body.light .testimonials-sub {
  color: rgba(26, 26, 46, 0.35);
}

/* ── TRUST / TESTIMONIALS — inline style overrides ── */
body.light .trust-terminal {
  background: #fff !important;
  border-color: var(--grey-light) !important;
}

body.light .trust-cmd {
  color: rgba(26, 26, 46, 0.35) !important;
}

body.light .trust-body {
  color: rgba(26, 26, 46, 0.7) !important;
}

body.light .trust-question {
  color: rgba(26, 26, 46, 0.5) !important;
}

body.light .trust-link {
  color: var(--white) !important;
  border-color: var(--grey-light) !important;
}

body.light .trust-sub {
  color: rgba(26, 26, 46, 0.4) !important;
}

body.light .testimonial-card {
  background: var(--black);
  border-color: var(--grey-light);
}

body.light .testimonial-card:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 40px rgba(74, 111, 165, 0.08);
}

body.light .testimonial-quote {
  color: rgba(26, 26, 46, 0.7);
}

body.light .testimonial-quote::before {
  color: var(--accent);
}

body.light .testimonial-avatar {
  background: var(--accent);
  color: #fff;
}

body.light .testimonial-name {
  color: var(--white);
}

body.light .testimonial-role {
  color: rgba(26, 26, 46, 0.4);
}

/* ── BIGTEXT ── */
body.light .bigtext h2 em {
  color: var(--accent);
}

body.light .bigtext h2 .stroke {
  -webkit-text-stroke-color: var(--white);
}

/* ── TEAM ── */
body.light .terminal-card {
  background: #fff;
  border-color: var(--grey-light);
  border-radius: 12px;
}

body.light .terminal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(74, 111, 165, 0.1);
}

body.light .terminal-bar {
  background: var(--grey);
  border-bottom-color: var(--grey-light);
}

body.light .terminal-bar span {
  color: rgba(26, 26, 46, 0.35);
}

body.light .terminal-body {
  color: var(--white);
}

body.light .t-prompt { color: var(--accent); }
body.light .t-key { color: rgba(26, 26, 46, 0.4); }
body.light .t-val { color: var(--white); }
body.light .t-string { color: var(--accent2); }
body.light .t-comment { color: rgba(26, 26, 46, 0.25); }

body.light .terminal-cursor {
  background: var(--accent);
}

body.light .terminal-photo {
  background: rgba(255, 255, 255, 0.95);
}

body.light .terminal-photo-inner {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
}

body.light .terminal-photo-name {
  color: var(--white);
}

body.light .terminal-photo-role {
  color: var(--accent);
}

body.light .terminal-stats {
  border-top-color: var(--grey-light);
}

body.light .terminal-stat-key { color: rgba(26, 26, 46, 0.35); }
body.light .terminal-stat-val { color: var(--accent); }

body.light .terminal-social {
  border-color: var(--grey-light);
  color: rgba(26, 26, 46, 0.4);
}

body.light .terminal-social:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(74, 111, 165, 0.06);
}

body.light .founder-tag {
  background: var(--accent);
  color: #fff;
}

/* ── CONTACT ── */
body.light .contact {
  background: var(--grey);
  border-top-color: var(--grey-light);
}

body.light .contact-heading em {
  color: var(--accent);
}

body.light .contact-sub {
  color: rgba(26, 26, 46, 0.35);
}

body.light .contact-form input,
body.light .contact-form textarea {
  color: var(--white);
  border-bottom-color: var(--grey-light);
  background: transparent;
}

body.light .contact-form input:focus,
body.light .contact-form textarea:focus {
  border-color: var(--accent);
}

body.light .contact-form input::placeholder,
body.light .contact-form textarea::placeholder {
  color: rgba(26, 26, 46, 0.25);
}

body.light .contact-btn {
  background: var(--accent);
  color: #fff;
  border-radius: 0;
  cursor: pointer;
}

body.light .contact-btn::after {
  background: var(--accent2);
}

/* ── FOOTER ── */
body.light footer {
  border-top-color: var(--grey-light);
  background: var(--black);
}

body.light .footer-logo {
  color: var(--white);
}

body.light .footer-logo span {
  color: var(--accent);
}

body.light .footer-address {
  color: rgba(26, 26, 46, 0.4);
}

body.light .footer-right {
  color: rgba(26, 26, 46, 0.3);
}

body.light .footer-links a {
  color: rgba(26, 26, 46, 0.4);
}

body.light .footer-links a:hover {
  color: var(--accent);
}

/* ── VIDEO PLACEHOLDER ── */
body.light .video-placeholder {
  background: linear-gradient(110deg, var(--grey) 8%, #fff 18%, var(--grey) 33%);
  background-size: 200% 100%;
}

/* ── NOISE BG ── */
body.light .noise-bg {
  background: var(--black);
}

body.light .noise-bg::after {
  opacity: 0;
}

/* ── NAV CTA — match toggle button style ── */
.nav-cta {
  padding: 0.45rem 1rem !important;
  border: 1px solid rgba(232, 228, 222, 0.25) !important;
  color: rgba(232, 228, 222, 0.7) !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.12em !important;
  display: inline-block;
  line-height: normal;
  transition: all 0.4s ease;
}

@media (max-width: 768px) {
  .nav-cta { display: none !important; }
}

.nav-cta:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: transparent !important;
}

body.light .nav-cta {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: rgba(74, 111, 165, 0.08) !important;
}

body.light .nav-cta:hover {
  background: var(--accent) !important;
  color: #fff !important;
}

/* ── LIGHT TOGGLE BUTTON ── */
.light-toggle {
  padding: 0.45rem 1rem;
  border: 1px solid rgba(232, 228, 222, 0.25);
  background: transparent;
  color: rgba(232, 228, 222, 0.7);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.4s ease;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.light-toggle .short-label { display: none; }
.light-toggle .full-label { display: inline; }

.light-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.light-toggle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

/* Light mode active — update toggle style */
body.light .light-toggle {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(74, 111, 165, 0.08);
}

body.light .light-toggle:hover {
  background: var(--accent);
  color: #fff;
}

/* ============================================
   SUB-PAGES (Blog, Playground, Workshop)
   ============================================ */

/* ── PLAYGROUND ── */
body.light .noise,
body.light .vignette {
  display: none;
}

/* ── WORKSHOP — override home-page hero rules ── */
body.light .hero-title {
  color: var(--white) !important;
  -webkit-text-stroke: 0 !important;
}

body.light .hero-title em {
  color: var(--accent) !important;
}

body.light .hero-sub {
  color: var(--text-secondary) !important;
}

/* ── SMOOTH TRANSITIONS ── */
body.light *,
body.light *::before,
body.light *::after {
  transition-duration: 0.5s;
}

/* Kill transitions during glitch so changes snap instantly */
body.theme-glitching *,
body.theme-glitching *::before,
body.theme-glitching *::after {
  transition: none !important;
}

/* Scramble: hide the "3" instantly, don't let smooth transitions delay visibility */
.hero-title .three.glitch-scramble > span:first-child {
  transition: none !important;
}

/* ── RESPONSIVE — LIGHT ── */
@media (max-width: 768px) {
  body.light {
    cursor: auto;
  }

  body.light .process-track {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  body.light .process-step {
    flex: none;
    width: 100%;
    min-width: unset;
  }

  .light-toggle {
    font-size: 0.5rem;
    padding: 0.35rem 0.7rem;
  }

  .light-toggle .full-label { display: none; }
  .light-toggle .short-label { display: inline; }
}

@media (max-width: 480px) {
  .light-toggle {
    font-size: 0.45rem;
    padding: 0.3rem 0.5rem;
    letter-spacing: 0.08em;
  }

  .light-toggle .full-label { display: none; }
  .light-toggle .short-label { display: inline; }
}

/* ── COLLAB / "PICK YOUR MODE" SECTION ── */
body.light .collab-card {
  background: var(--black);
}

body.light .collab-card:hover {
  background: rgba(74, 111, 165, 0.04);
}

body.light .collab-label {
  color: var(--text-muted);
}

body.light .collab-title {
  color: var(--white);
}

body.light .collab-desc {
  color: var(--text-body);
}

body.light .collab-tag {
  border-color: var(--grey-light);
  color: var(--text-secondary);
}

body.light .collab-card:hover .collab-tag {
  border-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 1024px) {
  body.light .flow-audit::after {
    border-top-color: var(--accent);
    border-left-color: transparent;
  }
}