/*==============================================================
  Useful Reviewer — Apple Dark Theme + Sunrise Light Mode
  assets/css/theme.css  v13
  Load AFTER main.css.

  v13 changes:
  • Brain wrap layout (.ur-hero-brain-wrap) — LCP fix
  • Hero section flex-column layout
  • ur-hero-inner no longer contains brain
  • Tagline text-transform:none (carried from v12)
  • Icon visibility fix (carried from v11)
==============================================================*/


/*--------------------------------------------------------------
# 1. DESIGN TOKENS — Dark ("Deep Space")
--------------------------------------------------------------*/
:root {
  --ur-bg:         #000000;
  --ur-text-main:  #f5f5f7;
  --ur-text-muted: rgba(245, 245, 247, 0.72);
  --srf-raised:    #1c1c1e;
  --srf-card:      #1c1c1e;
  --srf-input:     rgba(255, 255, 255, 0.07);
  --srf-header:    rgba(0, 0, 0, 0.75);
  --txt-secondary: #aeaeb2;
  --txt-tertiary:  #636366;
  --brd:           rgba(255, 255, 255, 0.10);
  --brd-input:     rgba(255, 255, 255, 0.16);
  --shd-card:      0 2px 16px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.35);
  --shd-hover:     0 8px 40px rgba(0,0,0,0.75), 0 2px 12px rgba(0,0,0,0.50);
  --color-primary:       #ff7b1a;
  --color-primary-hover: #ff9b45;
  --color-primary-glow:  rgba(255, 123, 26, 0.30);
  --color-email-link:    #ffb36a;
  --ease-out:   cubic-bezier(0.16, 1, 0.3,  1);
  --ease-inout: cubic-bezier(0.4,  0, 0.2,  1);
  --t-fast:   0.14s;
  --t-normal: 0.28s;
  --t-spring: 0.44s;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-pill: 999px;
  --blur-header: saturate(180%) blur(18px);
  color-scheme: dark;
}


/*--------------------------------------------------------------
# 2. DESIGN TOKENS — Light ("Sunrise")
--------------------------------------------------------------*/
[data-theme="light"] {
  --ur-bg:         #fdf9f5;
  --ur-text-main:  #2d1f0e;
  --ur-text-muted: #6b4c2a;
  --srf-raised:    #ffffff;
  --srf-card:      #ffffff;
  --srf-input:     rgba(255, 123, 26, 0.05);
  --srf-header:    rgba(253, 249, 245, 0.90);
  --txt-secondary: #7a5c38;
  --txt-tertiary:  #a07850;
  --brd:           rgba(255, 123, 26, 0.14);
  --brd-input:     rgba(255, 123, 26, 0.28);
  --shd-card:      0 2px 16px rgba(180,80,0,0.08), 0 1px 4px rgba(180,80,0,0.04);
  --shd-hover:     0 8px 32px rgba(180,80,0,0.14), 0 2px 8px rgba(180,80,0,0.06);
  --color-primary:       #e86a0a;
  --color-primary-hover: #ff7b1a;
  --color-primary-glow:  rgba(232, 106, 10, 0.28);
  --color-email-link:    #c9560a;
  color-scheme: light;
}


/*--------------------------------------------------------------
# 3. SYSTEM PREFERENCE FALLBACK
--------------------------------------------------------------*/
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ur-bg:         #fdf9f5;
    --ur-text-main:  #2d1f0e;
    --ur-text-muted: #6b4c2a;
    --srf-raised:    #ffffff;
    --srf-card:      #ffffff;
    --srf-input:     rgba(255, 123, 26, 0.05);
    --srf-header:    rgba(253, 249, 245, 0.90);
    --txt-secondary: #7a5c38;
    --txt-tertiary:  #a07850;
    --brd:           rgba(255, 123, 26, 0.14);
    --brd-input:     rgba(255, 123, 26, 0.28);
    --shd-card:      0 2px 16px rgba(180,80,0,0.08), 0 1px 4px rgba(180,80,0,0.04);
    --shd-hover:     0 8px 32px rgba(180,80,0,0.14), 0 2px 8px rgba(180,80,0,0.06);
    --color-primary:       #e86a0a;
    --color-primary-hover: #ff7b1a;
    --color-primary-glow:  rgba(232, 106, 10, 0.28);
    --color-email-link:    #c9560a;
    color-scheme: light;
  }
}


/*--------------------------------------------------------------
# 4. NO-TRANSITION GUARD
--------------------------------------------------------------*/
.no-theme-transition,
.no-theme-transition * {
  transition: none !important;
  animation:  none !important;
}


/*--------------------------------------------------------------
# 5. BASE
--------------------------------------------------------------*/
body {
  transition:
    background-color var(--t-normal) var(--ease-inout),
    color            var(--t-normal) var(--ease-inout);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ur-main { position: relative; z-index: 1; }
.footer  { position: relative; z-index: 1; }


/*--------------------------------------------------------------
# 6. SUNRISE BODY GRADIENT — Light only
--------------------------------------------------------------*/
[data-theme="light"] body {
  background-color: #fdf9f5 !important;
  background-image:
    radial-gradient(ellipse 120% 60% at 50% -10%,
      rgba(255,160,50,0.22) 0%, rgba(255,210,120,0.12) 35%, transparent 70%),
    radial-gradient(ellipse 80% 50% at 50% 0%,
      rgba(255,230,180,0.18) 0%, transparent 60%) !important;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body {
    background-color: #fdf9f5 !important;
    background-image:
      radial-gradient(ellipse 120% 60% at 50% -10%,
        rgba(255,160,50,0.22) 0%, rgba(255,210,120,0.12) 35%, transparent 70%),
      radial-gradient(ellipse 80% 50% at 50% 0%,
        rgba(255,230,180,0.18) 0%, transparent 60%) !important;
  }
}


/*--------------------------------------------------------------
# 7. STAR BACKGROUND — Dark only
--------------------------------------------------------------*/
.ur-starfield {
  position:       fixed;
  top:    0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index:        0;
  opacity:        0;
  transition:     opacity var(--t-normal) var(--ease-inout);

  background-image:
    radial-gradient(circle 2.5px at 19% 12%, rgba(255,255,255,0.95), transparent),
    radial-gradient(circle 2.5px at 54% 30%, rgba(255,255,255,0.90), transparent),
    radial-gradient(circle 2.5px at 77% 54%, rgba(255,255,255,0.95), transparent),
    radial-gradient(circle 2.5px at 38% 72%, rgba(255,255,255,0.88), transparent),
    radial-gradient(circle 2px at  8%  8%,   rgba(255,255,255,0.82), transparent),
    radial-gradient(circle 2px at 36% 16%,   rgba(255,255,255,0.75), transparent),
    radial-gradient(circle 2px at 64%  6%,   rgba(255,255,255,0.80), transparent),
    radial-gradient(circle 2px at 89% 20%,   rgba(255,255,255,0.72), transparent),
    radial-gradient(circle 2px at 22% 43%,   rgba(255,255,255,0.78), transparent),
    radial-gradient(circle 2px at 50% 51%,   rgba(255,255,255,0.75), transparent),
    radial-gradient(circle 2px at 76% 36%,   rgba(255,255,255,0.80), transparent),
    radial-gradient(circle 2px at 95% 67%,   rgba(255,255,255,0.72), transparent),
    radial-gradient(circle 1.5px at 13% 10%, rgba(255,255,255,0.68), transparent),
    radial-gradient(circle 1.5px at 30% 14%, rgba(255,255,255,0.60), transparent),
    radial-gradient(circle 1.5px at 46%  7%, rgba(255,255,255,0.65), transparent),
    radial-gradient(circle 1.5px at 62% 13%, rgba(255,255,255,0.58), transparent),
    radial-gradient(circle 1.5px at 78%  8%, rgba(255,255,255,0.68), transparent),
    radial-gradient(circle 1.5px at 94% 12%, rgba(255,255,255,0.60), transparent),
    radial-gradient(circle 1.5px at  9% 46%, rgba(255,255,255,0.65), transparent),
    radial-gradient(circle 1.5px at 25% 52%, rgba(255,255,255,0.55), transparent),
    radial-gradient(circle 1.5px at 40% 48%, rgba(255,255,255,0.68), transparent),
    radial-gradient(circle 1.5px at 56% 55%, rgba(255,255,255,0.60), transparent),
    radial-gradient(circle 1.5px at 72% 49%, rgba(255,255,255,0.65), transparent),
    radial-gradient(circle 1.5px at 88% 53%, rgba(255,255,255,0.58), transparent),
    radial-gradient(circle 1.5px at  4% 71%, rgba(255,255,255,0.65), transparent),
    radial-gradient(circle 1.5px at 19% 78%, rgba(255,255,255,0.55), transparent),
    radial-gradient(circle 1.5px at 37% 74%, rgba(255,255,255,0.68), transparent),
    radial-gradient(circle 1.5px at 52% 81%, rgba(255,255,255,0.60), transparent),
    radial-gradient(circle 1.5px at 69% 76%, rgba(255,255,255,0.65), transparent),
    radial-gradient(circle 1.5px at 85% 83%, rgba(255,255,255,0.58), transparent),
    radial-gradient(circle 1px at 10%  4%,   rgba(255,255,255,0.65), transparent),
    radial-gradient(circle 1px at 26%  8%,   rgba(255,255,255,0.55), transparent),
    radial-gradient(circle 1px at 41%  3%,   rgba(255,255,255,0.70), transparent),
    radial-gradient(circle 1px at 57%  6%,   rgba(255,255,255,0.60), transparent),
    radial-gradient(circle 1px at 72%  4%,   rgba(255,255,255,0.65), transparent),
    radial-gradient(circle 1px at 87%  9%,   rgba(255,255,255,0.55), transparent),
    radial-gradient(circle 1px at 98%  3%,   rgba(255,255,255,0.60), transparent),
    radial-gradient(circle 1px at  3% 17%,   rgba(255,255,255,0.65), transparent),
    radial-gradient(circle 1px at 17% 22%,   rgba(255,255,255,0.50), transparent),
    radial-gradient(circle 1px at 33% 18%,   rgba(255,255,255,0.70), transparent),
    radial-gradient(circle 1px at 49% 24%,   rgba(255,255,255,0.58), transparent),
    radial-gradient(circle 1px at 64% 19%,   rgba(255,255,255,0.65), transparent),
    radial-gradient(circle 1px at 80% 23%,   rgba(255,255,255,0.55), transparent),
    radial-gradient(circle 1px at 94% 16%,   rgba(255,255,255,0.62), transparent),
    radial-gradient(circle 1px at  7% 35%,   rgba(255,255,255,0.68), transparent),
    radial-gradient(circle 1px at 22% 41%,   rgba(255,255,255,0.52), transparent),
    radial-gradient(circle 1px at 38% 37%,   rgba(255,255,255,0.65), transparent),
    radial-gradient(circle 1px at 53% 44%,   rgba(255,255,255,0.58), transparent),
    radial-gradient(circle 1px at 68% 38%,   rgba(255,255,255,0.68), transparent),
    radial-gradient(circle 1px at 83% 45%,   rgba(255,255,255,0.52), transparent),
    radial-gradient(circle 1px at 97% 39%,   rgba(255,255,255,0.62), transparent),
    radial-gradient(circle 1px at  1% 54%,   rgba(255,255,255,0.60), transparent),
    radial-gradient(circle 1px at 15% 61%,   rgba(255,255,255,0.70), transparent),
    radial-gradient(circle 1px at 31% 57%,   rgba(255,255,255,0.52), transparent),
    radial-gradient(circle 1px at 47% 63%,   rgba(255,255,255,0.65), transparent),
    radial-gradient(circle 1px at 62% 58%,   rgba(255,255,255,0.58), transparent),
    radial-gradient(circle 1px at 77% 64%,   rgba(255,255,255,0.68), transparent),
    radial-gradient(circle 1px at 91% 56%,   rgba(255,255,255,0.52), transparent),
    radial-gradient(circle 1px at  5% 76%,   rgba(255,255,255,0.65), transparent),
    radial-gradient(circle 1px at 20% 82%,   rgba(255,255,255,0.55), transparent),
    radial-gradient(circle 1px at 35% 88%,   rgba(255,255,255,0.70), transparent),
    radial-gradient(circle 1px at 51% 79%,   rgba(255,255,255,0.58), transparent),
    radial-gradient(circle 1px at 66% 85%,   rgba(255,255,255,0.65), transparent);
}

[data-theme="dark"]  .ur-starfield { opacity: 1; }
[data-theme="light"] .ur-starfield { opacity: 0; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ur-starfield { opacity: 1; }
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"])  .ur-starfield { opacity: 0; }
}


/*--------------------------------------------------------------
# 8. AURORA — Dark nebula / Light sunrise
--------------------------------------------------------------*/
.ur-hero-section { position: relative; }

.ur-hero-inner {
  position: relative;
  z-index:  1;
}

.ur-hero-section::before {
  content:        '';
  position:       absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index:        0;
  opacity:        0;
  transition:     opacity var(--t-normal) var(--ease-inout);
}

/* Dark: deep space nebula */
[data-theme="dark"] .ur-hero-section::before {
  opacity:    1;
  animation:  ur-aurora 14s ease-in-out infinite;
  background:
    radial-gradient(ellipse 60% 45% at 20% 70%, rgba(255,123,26,0.22), transparent),
    radial-gradient(ellipse 55% 60% at 82% 25%, rgba(90,20,220,0.15),  transparent),
    radial-gradient(ellipse 80% 30% at 50% 100%, rgba(255,123,26,0.12), transparent);
}

/* Light: warm sunrise */
[data-theme="light"] .ur-hero-section::before {
  opacity:    1;
  animation:  ur-sunrise 16s ease-in-out infinite;
  background:
    radial-gradient(ellipse 90% 60% at 50% -5%,   rgba(255,140,30,0.35),  transparent),
    radial-gradient(ellipse 60% 70% at 15% 50%,   rgba(255,100,20,0.20),  transparent),
    radial-gradient(ellipse 70% 45% at 85% 80%,   rgba(255,200,80,0.18),  transparent),
    radial-gradient(ellipse 100% 30% at 50% 100%, rgba(255,160,40,0.15), transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ur-hero-section::before {
    opacity:    1;
    animation:  ur-aurora 14s ease-in-out infinite;
    background:
      radial-gradient(ellipse 60% 45% at 20% 70%, rgba(255,123,26,0.22), transparent),
      radial-gradient(ellipse 55% 60% at 82% 25%, rgba(90,20,220,0.15),  transparent),
      radial-gradient(ellipse 80% 30% at 50% 100%, rgba(255,123,26,0.12), transparent);
  }
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .ur-hero-section::before {
    opacity:    1;
    animation:  ur-sunrise 16s ease-in-out infinite;
    background:
      radial-gradient(ellipse 90% 60% at 50% -5%,   rgba(255,140,30,0.35),  transparent),
      radial-gradient(ellipse 60% 70% at 15% 50%,   rgba(255,100,20,0.20),  transparent),
      radial-gradient(ellipse 70% 45% at 85% 80%,   rgba(255,200,80,0.18),  transparent),
      radial-gradient(ellipse 100% 30% at 50% 100%, rgba(255,160,40,0.15), transparent);
  }
}

@keyframes ur-aurora {
  0%, 100% { transform: translateX(0)    scale(1);    }
  40%       { transform: translateX(3%)   scale(1.04); }
  70%       { transform: translateX(-2%)  scale(0.97); }
}

@keyframes ur-sunrise {
  0%, 100% { transform: translateY(0)    scale(1);    }
  40%       { transform: translateY(-2%)  scale(1.03); }
  70%       { transform: translateY(1%)   scale(0.98); }
}

/* Directional sunrise gradient on hero section itself */
[data-theme="light"] .ur-hero-section {
  background: linear-gradient(
    180deg,
    rgba(255,130,20,0.30) 0%,
    rgba(255,170,60,0.16) 30%,
    rgba(255,210,120,0.08) 60%,
    transparent 100%
  ) !important;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .ur-hero-section {
    background: linear-gradient(
      180deg,
      rgba(255,130,20,0.30) 0%,
      rgba(255,170,60,0.16) 30%,
      rgba(255,210,120,0.08) 60%,
      transparent 100%
    ) !important;
  }
}


/*--------------------------------------------------------------
# 9. BRAIN ANIMATION
--------------------------------------------------------------*/
@keyframes ur-brain-pulse-dark {
  0%, 100% { filter: drop-shadow(0 0 22px rgba(255,123,26,0.32)); }
  50%       { filter: drop-shadow(0 0 58px rgba(255,123,26,0.68)); }
}

@keyframes ur-brain-pulse-light {
  0%, 100% {
    filter: drop-shadow(0 0 22px rgba(255,140,20,0.42))
            drop-shadow(0 0 50px rgba(255,100,10,0.18));
  }
  50% {
    filter: drop-shadow(0 0 44px rgba(255,140,20,0.70))
            drop-shadow(0 0 80px rgba(255,100,10,0.32));
  }
}

/* Dark brain — screen blend erases near-black PNG bg */
html:not([data-theme="light"]) .ur-hero-brain {
  animation:      ur-brain-pulse-dark 4s ease-in-out infinite !important;
  mix-blend-mode: screen      !important;
  background:     transparent !important;
  opacity:        1           !important;
  transition:     none        !important;
}

html:not([data-theme="light"]) .ur-hero-brain:hover {
  animation-play-state: paused !important;
  filter: drop-shadow(0 0 78px rgba(255,123,26,0.88)) !important;
  transform: none !important;
}

/* Light brain — warm golden glow */
[data-theme="light"] .ur-hero-brain {
  animation:      ur-brain-pulse-light 4s ease-in-out infinite !important;
  mix-blend-mode: normal  !important;
  opacity:        1       !important;
  transition:     none    !important;
}

[data-theme="light"] .ur-hero-brain:hover {
  animation-play-state: paused !important;
  filter:
    drop-shadow(0 0 52px rgba(255,140,20,0.80))
    drop-shadow(0 0 90px rgba(255,100,10,0.40)) !important;
  transform: none !important;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .ur-hero-brain {
    animation:      ur-brain-pulse-light 4s ease-in-out infinite !important;
    mix-blend-mode: normal !important;
    opacity:        1      !important;
    transition:     none   !important;
  }
  :root:not([data-theme="dark"]) .ur-hero-brain:hover {
    animation-play-state: paused !important;
    filter:
      drop-shadow(0 0 52px rgba(255,140,20,0.80))
      drop-shadow(0 0 90px rgba(255,100,10,0.40)) !important;
    transform: none !important;
  }
}


/*--------------------------------------------------------------
# 10. HEADER — Apple Frosted Glass
--------------------------------------------------------------*/
.ur-header {
  background:              var(--srf-header)    !important;
  -webkit-backdrop-filter: var(--blur-header)   !important;
  backdrop-filter:         var(--blur-header)   !important;
  border-bottom:           1px solid var(--brd) !important;
  transition:
    background-color var(--t-normal) var(--ease-inout),
    border-color     var(--t-normal)            !important;
}

/* Force space-between — overrides Bootstrap / main.css */
.ur-header-inner {
  display:         flex          !important;
  align-items:     center        !important;
  justify-content: space-between !important;
}

.ur-header-logo span {
  color:      var(--ur-text-main) !important;
  transition: color var(--t-normal) !important;
}


/*--------------------------------------------------------------
# 11. HERO TYPOGRAPHY
--------------------------------------------------------------*/
.ur-title {
  color:          var(--ur-text-main) !important;
  letter-spacing: -0.03em            !important;
  transition:     color var(--t-normal) !important;
}

/* ★ FIX: main.css sets text-transform:uppercase on tagline */
.ur-tagline {
  color:          var(--txt-secondary) !important;
  text-transform: none                 !important;
  letter-spacing: 0.06em               !important;
  transition:     color var(--t-normal) !important;
}

.ur-summary {
  color:      var(--ur-text-muted) !important;
  transition: color var(--t-normal) !important;
}

.ur-email {
  color:      var(--txt-secondary) !important;
  transition: color var(--t-normal) !important;
}

.ur-email a       { color: var(--color-email-link) !important; }
.ur-email a:hover { color: var(--color-primary)    !important; }
.ur-email-label   { color: var(--color-email-link) !important; }


/*--------------------------------------------------------------
# 12. ASK CARD
--------------------------------------------------------------*/
.ur-ask {
  background:    var(--srf-card)  !important;
  border-color:  var(--brd)       !important;
  box-shadow:    var(--shd-card)  !important;
  border-radius: var(--r-lg)      !important;
  transition:
    background-color var(--t-normal) var(--ease-inout),
    border-color     var(--t-normal),
    box-shadow       var(--t-normal) var(--ease-inout) !important;
}

.ur-ask:hover { box-shadow: var(--shd-hover) !important; }

[data-theme="light"] .ur-ask {
  background:   rgba(255,255,255,0.88) !important;
  border-color: rgba(255,123,26,0.20)  !important;
}

.ur-ask h2 {
  color:      var(--ur-text-main)  !important;
  transition: color var(--t-normal) !important;
}

.ur-ask p,
.ur-label {
  color:      var(--ur-text-muted) !important;
  transition: color var(--t-normal) !important;
}

.ur-ask textarea {
  background:    var(--srf-input)           !important;
  color:         var(--ur-text-main)        !important;
  border:        1px solid var(--brd-input) !important;
  border-radius: var(--r-sm)                !important;
  transition:
    background-color var(--t-fast),
    border-color     var(--t-fast),
    box-shadow       var(--t-fast)          !important;
}

.ur-ask textarea:focus {
  border-color: var(--color-primary)                !important;
  box-shadow:   0 0 0 3px var(--color-primary-glow) !important;
  outline:      none                                !important;
}

.ur-note {
  color:      var(--txt-tertiary) !important;
  transition: color var(--t-normal) !important;
}


/*--------------------------------------------------------------
# 13. BUTTON — Apple Pill
--------------------------------------------------------------*/
.ur-button {
  border-radius:  var(--r-pill) !important;
  letter-spacing: 0.02em        !important;
  text-transform: none          !important;
  font-weight:    600           !important;
  position:       relative      !important;
  overflow:       hidden        !important;
  box-shadow:     0 2px 8px var(--color-primary-glow) !important;
  transition:
    background-color var(--t-fast),
    transform        var(--t-fast) var(--ease-out),
    box-shadow       var(--t-fast) !important;
}

.ur-button:hover {
  background-color: var(--color-primary-hover)           !important;
  transform:        translateY(-2px)                     !important;
  box-shadow:       0 6px 20px var(--color-primary-glow) !important;
  color:            #ffffff                              !important;
}

.ur-button:active {
  transform:  translateY(0) scale(0.97)           !important;
  box-shadow: 0 1px 4px var(--color-primary-glow) !important;
}

[data-theme="light"] .ur-button       { color: #1a0a00 !important; }
[data-theme="light"] .ur-button:hover { color: #ffffff !important; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .ur-button       { color: #1a0a00 !important; }
  :root:not([data-theme="dark"]) .ur-button:hover { color: #ffffff !important; }
}

/* Button ripple */
.ur-ripple {
  position:       absolute;
  border-radius:  50%;
  background:     rgba(255,255,255,0.28);
  transform:      scale(0);
  animation:      ur-ripple-anim 0.65s linear forwards;
  pointer-events: none;
}

@keyframes ur-ripple-anim {
  to { transform: scale(4); opacity: 0; }
}


/*--------------------------------------------------------------
# 14. VIDEO SECTION
--------------------------------------------------------------*/
.ur-videos {
  padding: 80px 0 60px;
}

.ur-section-title {
  font-size:      clamp(1.6rem, 3vw, 2.2rem);
  font-weight:    700;
  color:          var(--ur-text-main);
  text-align:     center;
  margin-bottom:  48px;
  letter-spacing: -0.025em;
  transition:     color var(--t-normal);
}

.ur-video-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   24px;
  margin-bottom:         40px;
}

.ur-video-card {
  display:         block;
  text-decoration: none;
  background:      var(--srf-card)      !important;
  border:          1px solid var(--brd) !important;
  border-radius:   var(--r-lg)          !important;
  box-shadow:      var(--shd-card)      !important;
  overflow:        hidden;
  transition:
    transform    var(--t-normal) var(--ease-out),
    box-shadow   var(--t-normal) var(--ease-inout),
    border-color var(--t-fast)          !important;
}

.ur-video-card:hover {
  transform:    translateY(-4px)       !important;
  box-shadow:   var(--shd-hover)       !important;
  border-color: rgba(255,123,26,0.55)  !important;
}

.ur-video-thumb {
  position:     relative;
  overflow:     hidden;
  aspect-ratio: 16 / 9;
}

.ur-video-thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.4s ease;
}

.ur-video-card:hover .ur-video-thumb img {
  transform: scale(1.05);
}

.ur-video-play {
  position:        absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #ffffff;
  background:      rgba(0,0,0,0.35);
  opacity:         0;
  transition:      opacity 0.25s ease;
}

.ur-video-card:hover .ur-video-play { opacity: 1; }

.ur-video-title {
  font-size:   0.9rem;
  font-weight: 600;
  color:       var(--ur-text-main) !important;
  padding:     12px 14px 16px;
  margin:      0;
  line-height: 1.45;
  transition:  color var(--t-normal);
}

.ur-videos-cta   { text-align: center; margin-top: 36px; }

.ur-videos-empty {
  text-align: center;
  color:      var(--txt-tertiary);
  padding:    20px;
  font-size:  0.95rem;
}


/*--------------------------------------------------------------
# 15. AJAX ANSWER
--------------------------------------------------------------*/
.ur-ajax-answer {
  display:       flex;
  align-items:   flex-start;
  gap:           12px;
  margin-top:    20px;
  padding:       16px;
  border-radius: var(--r-md);
  background:    rgba(255,123,26,0.08);
  border:        1px solid rgba(255,123,26,0.18);
}

.ur-ajax-answer--error {
  background:   rgba(200,40,40,0.07);
  border-color: rgba(200,40,40,0.18);
}

.ur-answer-icon {
  font-size:   1.5rem;
  flex-shrink: 0;
  line-height: 1.4;
}

.ur-ajax-answer p {
  margin:      0;
  font-size:   0.95rem;
  line-height: 1.65;
  color:       var(--ur-text-main) !important;
}


/*--------------------------------------------------------------
# 16. TOAST NOTIFICATION
--------------------------------------------------------------*/
.ur-toast {
  position:       fixed;
  bottom:         30px;
  left:           50%;
  transform:      translateX(-50%) translateY(16px);
  z-index:        9998;
  background:     var(--srf-card);
  color:          var(--ur-text-main);
  border:         1px solid var(--brd);
  box-shadow:     var(--shd-hover);
  border-radius:  var(--r-pill);
  padding:        13px 24px;
  font-size:      0.93rem;
  font-weight:    500;
  opacity:        0;
  pointer-events: none;
  white-space:    nowrap;
  max-width:      88vw;
  text-align:     center;
  transition:
    opacity   0.3s ease,
    transform 0.35s var(--ease-out);
}

.ur-toast--visible {
  opacity:   1;
  transform: translateX(-50%) translateY(0);
}


/*--------------------------------------------------------------
# 17. FOOTER
--------------------------------------------------------------*/
.footer .copyright {
  color:      var(--txt-tertiary) !important;
  transition: color var(--t-normal) !important;
}


/*--------------------------------------------------------------
# 18. THEME TOGGLE + ICON VISIBILITY
   Parent selector (.ur-theme-toggle .ur-icon-*)
   gives specificity (0,2,0) = 20pts which beats
   Bootstrap's svg rules at (0,1,1) = 11pts.
--------------------------------------------------------------*/

/* Dark mode default: sun only */
.ur-theme-toggle .ur-icon-sun  { display: block !important; }
.ur-theme-toggle .ur-icon-moon { display: none  !important; }

/* Light mode: moon only */
[data-theme="light"] .ur-theme-toggle .ur-icon-sun  { display: none  !important; }
[data-theme="light"] .ur-theme-toggle .ur-icon-moon { display: block !important; }

/* System preference light fallback */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .ur-theme-toggle .ur-icon-sun  { display: none  !important; }
  :root:not([data-theme="dark"]) .ur-theme-toggle .ur-icon-moon { display: block !important; }
}

.ur-theme-toggle {
  display:         inline-flex !important;
  align-items:     center      !important;
  justify-content: center      !important;
  flex-shrink:     0;
  width:           36px;
  height:          36px;
  border-radius:   50%;
  border:          1.5px solid var(--brd);
  background:      transparent;
  color:           var(--txt-secondary);
  cursor:          pointer;
  padding:         0;
  transition:
    background-color var(--t-fast),
    border-color     var(--t-fast),
    color            var(--t-fast),
    transform        var(--t-fast) var(--ease-out);
}

.ur-theme-toggle:hover {
  background-color: var(--srf-raised);
  border-color:     var(--color-primary);
  color:            var(--color-primary);
  transform:        scale(1.10);
}

.ur-theme-toggle:active { transform: scale(0.90); }

/* No display property — that was the v10 bug */
.ur-theme-toggle svg { flex-shrink: 0; }


/*--------------------------------------------------------------
# 19. ACCESSIBILITY — 2026 Standards
--------------------------------------------------------------*/
a:focus-visible,
button:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline:        2px solid var(--color-primary) !important;
  outline-offset: 3px !important;
  border-radius:  4px !important;
}

:focus:not(:focus-visible) { outline: none !important; }

@media (prefers-reduced-motion: reduce) {

  .ur-fade-up {
    animation: none    !important;
    opacity:   1       !important;
    transform: none    !important;
  }

  .ur-hero-brain {
    animation: none !important;
    filter: drop-shadow(0 0 22px rgba(255,123,26,0.32)) !important;
  }

  .ur-hero-brain:hover {
    filter:    drop-shadow(0 0 44px rgba(255,123,26,0.55)) !important;
    transform: none !important;
  }

  .ur-hero-section::before { animation: none !important; }

  body, .ur-starfield, .ur-header, .ur-header-logo span,
  .ur-hero-section::before, .ur-title, .ur-tagline,
  .ur-summary, .ur-email, .ur-ask, .ur-ask h2, .ur-ask p,
  .ur-label, .ur-ask textarea, .ur-note, .ur-button,
  .ur-video-card, .footer .copyright, .ur-theme-toggle,
  .ur-toast {
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .ur-button,
  .ur-theme-toggle { forced-color-adjust: auto; border: 2px solid ButtonText; }
  .ur-ask          { forced-color-adjust: auto; border: 1px solid ButtonText; }
}


/*--------------------------------------------------------------
# 20. PWA — Safe Area Insets
--------------------------------------------------------------*/
@supports (padding-top: env(safe-area-inset-top)) {
  .ur-header {
    padding-top:   max(18px, env(safe-area-inset-top))   !important;
    padding-left:  max(16px, env(safe-area-inset-left))  !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }
  .footer {
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
  }
}


/*--------------------------------------------------------------
# ★ 21. HERO LAYOUT — v13 LCP Fix
   ─────────────────────────────────────────────────────────
   Brain is now OUTSIDE ur-fade-up in the HTML.
   ur-fade-up starts at opacity:0 which hid the brain
   from Lighthouse's LCP measurement until animation ran.
   Moving it outside means it loads at full opacity instantly.

   These rules position the brain wrap correctly above
   the text content and maintain the original visual layout.
--------------------------------------------------------------*/

/* Hero: flex column, centered */
.ur-hero-section {
  display:         flex         !important;
  flex-direction:  column       !important;
  align-items:     center       !important;
  justify-content: center       !important;
  text-align:      center       !important;
}

/* Brain wrapper — centered, sits above text */
.ur-hero-brain-wrap {
  display:         flex;
  justify-content: center;
  align-items:     center;
  margin-bottom:   8px;
  position:        relative;
  z-index:         1;
}

/* Hero inner — text content, centred column */
.ur-hero-inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  max-width:      720px;
  width:          100%;
  padding:        0 16px;
  position:       relative;
  z-index:        1;
}

/* Mobile: slightly tighter brain margin */
@media (max-width: 576px) {
  .ur-hero-brain-wrap {
    margin-bottom: 4px;
  }
}