/* ============================================================
   styles.css  –  Lead Labs custom stylesheet
   Works alongside Tailwind CSS (CDN, class-based dark mode)
   ============================================================ */

/* ── Material Icons ── */


html {
  background-color: white; /* match your site bg */
} 
body {
  transition: opacity 0.15s ease;
}
/* styles.css */
/* .material-symbols-outlined {
  opacity: 0;
  transition: opacity 0.15s ease;
} */

.hidden_video_title_begin{

  opacity: 0;
  transition: opacity 2s ease-out;
}


.hidden_video_title {
  opacity: 0;
  transition: opacity 0.8s ease;

}
 .material-symbols-outlined {
      font-family: 'Material Symbols Outlined';
      font-weight: normal;
      font-style: normal;
      font-size: 24px;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      display: inline-block;
      white-space: nowrap;
      word-wrap: normal;
      direction: ltr;
      -webkit-font-smoothing: antialiased;
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

/* ── Selection ── */
::selection {
  background: #d8e2ff;
  color: #001a43;
}

/* ── Scrollbar (Webkit) ── */
::-webkit-scrollbar              { width: 8px; }
::-webkit-scrollbar-track        { background: #f9f9ff; }
::-webkit-scrollbar-thumb        { background: #c5c6cd; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover  { background: #75777e; }


/* ============================================================
   CARDS / SHADOWS
   ============================================================ */
.ambient-shadow {
  box-shadow: 0 4px 20px rgba(13, 28, 50, 0.04);
  transition: all 0.4s ease-out;
}

.floating-layer-shadow {
  box-shadow:
    0 10px 20px  rgba(0, 0, 0, 0.02),
    0 30px 60px  rgba(0, 0, 0, 0.05),
    0 60px 100px -20px rgba(13, 28, 50, 0.12);
}

.project-card-shadow {
  box-shadow: 0 10px 30px -5px rgba(13, 28, 50, 0.08);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-card:hover .project-card-shadow {
  box-shadow: 0 25px 50px -12px rgba(13, 28, 50, 0.15);
  transform: translateY(-8px);
}
.project-card:hover img        { transform: scale(1.05); }

.project-description {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease-out;
}
.project-card:hover .project-description {
  opacity: 1;
  transform: translateY(0);
}

.ghost-border {
  outline: 1px solid rgba(197, 198, 205, 0.2);
}

.hero-image-glow {
  filter: drop-shadow(0 0 40px rgba(46, 127, 255, 0.15));
}

.image {
  width: 100%;
  height: auto;
  display: block;
  transition: filter 0.5s ease, opacity 0.8s ease, transform 0.6s ease;
}

/* initial state */
.blur-up {
  filter: blur(10px);
  transform: scale(1.05);
  opacity: 0.8;
}

/* when loaded */
.blur-up.loaded {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
}


/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
}
.reveal-on-scroll.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
}

.stagger-slide { opacity: 0; }
.stagger-slide.animate-slide-in {
  animation: slideIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes float {
  0%,  100% { transform: translateY(0); }
  50%        { transform: translateY(-20px); }
}


/* ============================================================
   NAVIGATION
   ============================================================ */
.nav-link-active {
  color: #000 !important;
  border-bottom: 2px solid #000;
  padding-bottom: 4px;
}

.dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
}
.dropdown-trigger:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Mobile menu slide */
#mobile-menu {
  transition: max-height 0.4s ease, opacity 0.4s ease;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
}
#mobile-menu.open {
  max-height: 600px;
  opacity: 1;
}


/* ============================================================
   LANGUAGE BUTTON
   ============================================================ */
.lang-btn                  { transition: all 0.2s ease; }
.lang-btn.active           { background: #000; color: #fff; }
/* Language dropdown animation */
.lang-dropdown {
  opacity: 0;
  transform: scale(0.95) translateY(-4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.lang-dropdown.open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

/* Active option highlight */
.lang-option[aria-selected="true"] {
  background-color: var(--color-surface-container-low, #f5f7fa);
}


/* ============================================================
   THEME TOGGLE (pill switch)
   ============================================================ */
.theme-btn {
  position: relative;
  width: 44px;
  height: 24px;
  background: #e2e8f0;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.35s ease;
  border: none;
  outline: none;
  flex-shrink: 0;
}
.theme-btn::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.35s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
html.dark .theme-btn         { background: #0059c5; }
html.dark .theme-btn::after  { transform: translateX(20px); }


/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.skip-link {
  position: absolute;
  top: -9999px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 9999;
}
.skip-link:focus { top: 0; }

/* Lazy image placeholder */
img[loading="lazy"] { background: #f0f3ff; }


/* ============================================================
   DARK MODE OVERRIDES
   (Tailwind's dark: prefix requires build step;
    we use css-class overrides for CDN compatibility)
   ============================================================ */
html.dark { color-scheme: dark; }

/* Base */
html.dark body { background: #0f1117; color: #e8eeff; }

/* Scrollbar */
html.dark ::-webkit-scrollbar-track  { background: #0f1117; }
html.dark ::-webkit-scrollbar-thumb  { background: #2a2f45; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #3a4060; }

/* Navigation */
html.dark #main-nav {
  background: rgba(15, 17, 23, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
html.dark .nav-link-active {
  color: #aec6ff !important;
  border-bottom-color: #aec6ff;
}
html.dark .nav-item-link,
html.dark nav button,
html.dark #currency-label           { color: #9aa0b4; }
html.dark .nav-item-link:hover,
html.dark nav button:hover           { color: #e8eeff; }

/* Dropdowns */
html.dark .dropdown-menu {
  background: #1e2130;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
html.dark .dropdown-menu a,
html.dark .dropdown-menu button      { color: #c5c9d8; }
html.dark .dropdown-menu a:hover,
html.dark .dropdown-menu button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e8eeff;
}

/* Mobile menu */
html.dark #mobile-menu {
  background: #151821;
  border-color: rgba(255, 255, 255, 0.06);
}
html.dark #mobile-menu a             { color: #c5c9d8; border-color: rgba(255,255,255,0.06); }
html.dark #mobile-menu a:hover       { color: #fff; }

/* Hero */
html.dark #hero                      { background: #0f1117; }
html.dark #hero h1                   { color: #e8eeff; }
html.dark #hero p                    { color: #9aa0b4; }
html.dark .promos                   { background: #e8eeff; }
html.dark .startdark  {background: #0059c5 ;color : white;}
html.dark .floating-layer-shadow {
  box-shadow:
    0 10px 20px rgba(0,0,0,.3),
    0 30px 60px rgba(0,0,0,.4),
    0 60px 100px -20px rgba(0,0,0,.5);
}
html.dark .floating-layer-shadow > div { background: #1a1d27; }

/* Section backgrounds */
html.dark .bg-surface-container-low,
html.dark section.bg-surface-container-low   { background: #151821 !important; }
html.dark .bg-surface,
html.dark section.bg-surface                 { background: #0f1117 !important; }
html.dark section.bg-white,
html.dark .bg-white                          { background: #0f1117 !important; }
html.dark .bg-\[\#f5f7fa\]                  { background: #131620 !important; }

/* Cards */
html.dark .bg-surface-container-lowest       { background: #1e2130 !important; }
html.dark .project-card > div               { background: #1e2130; border-color: rgba(255,255,255,0.06); }
html.dark .project-card-shadow              { box-shadow: 0 10px 30px -5px rgba(0,0,0,.4); }
html.dark .project-card:hover .project-card-shadow { box-shadow: 0 25px 50px -12px rgba(0,0,0,.6); }

/* Ghost border in dark */
html.dark .ghost-border                     { outline: 1px solid rgba(255,255,255,0.08); }

/* Text */
html.dark .text-on-surface-variant          { color: #8892aa; }
html.dark .text-on-surface                  { color: #e8eeff; }
html.dark .text-primary                     { color: #e8eeff; }
html.dark .text-slate-900                   { color: #e8eeff; }
html.dark .text-slate-700                   { color: #c5c9d8; }
html.dark .text-slate-600                   { color: #9aa0b4; }
html.dark .text-slate-500                   { color: #8892aa; }
html.dark h1, html.dark h2,
html.dark h3, html.dark h4                  { color: #e8eeff; }

/* Problem section */
html.dark #problems                         { background: #151821; }
html.dark .border-l-4.border-primary        { border-color: #0059c5 !important; }

/* Pricing */
html.dark #pricing                          { background: #0f1117; }
html.dark .bg-surface-container-low.p-10.rounded-xl { background: #1e2130 !important; }
html.dark .border-outline-variant\/20       { border-color: rgba(255,255,255,0.08); }

/* Testimonial cards */
html.dark section.bg-\[\#f5f7fa\] .bg-white { background: #1e2130 !important; }

/* Process */
html.dark #process                          { background: #151821; }

/* Developer section */
html.dark .bg-surface.py-64                 { background: #0f1117 !important; }
html.dark .bg-surface-container-low.p-10.rounded-2xl { background: #1e2130 !important; }
html.dark .bg-surface-container-lowest.rounded-xl    { background: #252a3a !important; }
html.dark .border-l-surface-tint           { border-color: #0059c5; }

/* Ambient shadow */
html.dark .ambient-shadow                   { box-shadow: 0 4px 20px rgba(0,0,0,.25); }

/* Outline buttons */
html.dark button.ghost-border,
html.dark .border-outline-variant {
  border-color: rgba(255,255,255,0.15) !important;
  color: #e8eeff;
}
html.dark button.ghost-border:hover { background: rgba(255,255,255,0.06) !important; }

/* Hero outline button */
html.dark #hero button.bg-white {
  background: #1e2130 !important;
  color: #e8eeff;
  border-color: rgba(255,255,255,0.15) !important;
}
html.dark #hero button.bg-white:hover { background: #252a3a !important; }

/* Focus/CTA banner */
html.dark .bg-primary-container             { background: #001a43; }

/* Footer */
html.dark footer                            { background: #0a0c12 !important; }
html.dark footer .text-slate-900            { color: #e8eeff; }
html.dark footer .text-slate-500            { color: #6b7280; }
html.dark footer a:hover                    { color: #60a5fa; }

/* ============================================================
   SERVICES PAGE — custom components
   ============================================================ */

/* Decision selector card */
.svc-card {
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.4s cubic-bezier(0.16,1,0.3,1),
              border-color 0.3s ease;
}
.svc-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px -8px rgba(13,28,50,0.14);
}
.svc-card .svc-icon {
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0.4;
}
.svc-card:hover .svc-icon { opacity: 1; transform: scale(1.12); }
.svc-card .svc-underline {
  height: 3px;
  width: 0;
  background: #0059c5;
  border-radius: 99px;
  transition: width 0.5s cubic-bezier(0.16,1,0.3,1);
}
.svc-card:hover .svc-underline { width: 100%; }
.svc-card.card-selected {
  border-color: #0059c5 !important;
  transform: scale(1.02);
  background: #f0f3ff !important;
}
.svc-card.card-selected .svc-icon { opacity: 1; }
.svc-card.card-selected .svc-underline { width: 100%; }

/* Progress flow cards */
.flow-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.flow-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -10px rgba(13,28,50,0.18);
}

/* Comparison table rows */
.table-row { transition: background 0.2s ease; }

/* Scroll progress line animation */
@keyframes drawLine {
  from { width: 0; }
  to   { width: 100%; }
}
.line-animated { animation: drawLine 1.6s ease-out forwards; }

/* ── Dark mode: services page ── */
html.dark .svc-card                { background: #1e2130 !important; }
html.dark .svc-card:hover          { box-shadow: 0 20px 40px -8px rgba(0,0,0,0.5); }
html.dark .svc-card.card-selected  { background: #1a2a4a !important; border-color: #0059c5 !important; }
html.dark .svc-map-box             { background: #1e2130 !important; border-color: rgba(255,255,255,0.06) !important; }
html.dark .flow-card-light         { background: #1e2130 !important; }
html.dark .flow-card-mid           { background: #252a3a !important; }
html.dark .flow-card-dark          { background: #001a43 !important; }
html.dark .table-section           { background: #151821 !important; }
html.dark .table-row:hover         { background: rgba(255,255,255,0.04) !important; }
html.dark .table-row-featured      { background: #1e2130 !important; border-color: rgba(255,255,255,0.08) !important; }
html.dark .svc-cta-section         { background: #001a43 !important; }
html.dark .progress-track          { background: rgba(255,255,255,0.08) !important; }


.table-scroll {
  scroll-behavior: smooth;
  user-select: none;
}
/* roulette  */
/* .roulette-item {
  height: 80px; fixed height per item
  display: flex;
  align-items: center;
  transition: all 0.4s ease;
} */

/* side items */
/* .roulette-item.inactive {
  opacity: 0.4;
  transform: scale(0.9);
} */

/* center item */
/* .roulette-item.active {
  opacity: 1;
  transform: scale(1);
} */
 /* #wheel {
  perspective: 1000px;
}

.wheel-item {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center -120px;
  transition: transform 0.2s, opacity 0.2s;
  width: 100%;
} */
 /* .picker {
  position: relative;
  height: 320px;          3 items * 52px + some breathing
  overflow: hidden;
  cursor: grab;
  touch-action: none;
   perspective: 1000px;

}

#picker-track {
  position: absolute;
  width: 100%;
  top: 50%;
   transform-style: preserve-3d;
 
}


.picker-item {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: visible ;



  transition: opacity 0.2s ease,transform 0.3s ease ,filter 0.2s, background 0.2s;
  
 
 
} */
 .picker {
  position: relative;
  height: 420px;           /* ↑ was 320px */
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  perspective: 1000px;
  border-radius: 16px;
}

/* ── top & bottom cylindrical fades ── */
/* .picker::before,
.picker::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 36%;
  z-index: 20;
  pointer-events: none;
  
} */
/* .picker::before {
  top: 0;
  background: linear-gradient(to bottom, var(--color-bg, #fff) 0%, transparent 100%);
}
.picker::after {
  bottom: 0;
  background: linear-gradient(to top, var(--color-bg, #fff) 0%, transparent 100%);
} */

/* ── left + bottom-left cylindrical shadow ── */
/* #picker-shade {
  position: absolute;
  inset: 0;
  z-index: 19;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 38% 65% at 0% 52%, rgba(0,0,0,0.11) 0%, transparent 100%),
    radial-gradient(ellipse 28% 38% at 1%  90%, rgba(0,0,0,0.08) 0%, transparent 100%);
} */

/* ── center selection rail ── */
#picker-center-line {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10px; right: 10px;
  height: 100px;   /* keep in sync with ITEM_HEIGHT */
  border-top:    0.5px solid rgba(128,128,128,0.18);
  border-bottom: 0.5px solid rgba(128,128,128,0.18);
  border-radius: 10px;
  z-index: 18;
  pointer-events: none;
}

#picker-track {
  position: absolute;
  width: 100%;
  top: 50%;
  transform-style: preserve-3d;
}

.picker-item {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: visible;
  transition: opacity 0.2s ease, transform 0.3s ease, filter 0.2s, background 0.2s;
}

/* center selection zone */
/* .picker-highlight {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 80;
  transform: translateY(-50%);
  border-top: 1px solid rgba(255, 255, 255, 0.575);
  border-bottom: 1px solid rgba(255,255,255,0.25);
  pointer-events: none;
  z-index: 10;
} */
 .glitch-effect:hover {
            animation: glitch 0.2s cubic-bezier(.25,.46,.45,.94) both infinite, flicker 0.2s infinite;
            mix-blend-mode: plus-lighter;
        }
        .glitch-effect:active {
            animation: flicker 0.05s infinite;
        }
        .glass-morphism {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

         @keyframes flicker {
            0%, 100% {
                opacity: 1;
                filter: brightness(1.4) contrast(1.2) drop-shadow(0 0 20px #FFD700) drop-shadow(0 0 40px rgba(255, 215, 0, 0.4));
            }
            25% {
                opacity: 0.7;
                filter: brightness(1.8) contrast(1.5) drop-shadow(0 0 25px #00FFFF) drop-shadow(0 0 50px rgba(0, 255, 255, 0.4));
            }
            50% {
                opacity: 0.9;
                filter: brightness(1.2) contrast(1.1) drop-shadow(0 0 30px #FF00FF) drop-shadow(0 0 60px rgba(255, 0, 255, 0.4));
            }
            75% {
                opacity: 0.8;
                filter: brightness(2) contrast(1.4) drop-shadow(0 0 25px #7DF9FF) drop-shadow(0 0 50px rgba(125, 249, 255, 0.4));
            }
        }

  /* Modal backdrop */
  .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .modal-backdrop.open {
    opacity: 1;
    pointer-events: all;
  }
 
  /* Modal box */
  .modal-box {
    background: #111118;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    width: 100%;
    max-width: 680px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    transform: translateY(24px) scale(0.97);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
  }
  .modal-backdrop.open .modal-box {
    transform: translateY(0) scale(1);
  }
 
  /* Modal header */
  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
  }
  .modal-header h2 {
    font-size: 1rem;
    font-weight: 600;
    color: #f1f1f3;
    letter-spacing: -0.01em;
  }
  .modal-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #888;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
  }
  .modal-close:hover { background: rgba(255,255,255,0.1); color: #f1f1f3; }
 
  /* Modal tabs */
  .modal-tabs {
    display: flex;
    gap: 0;
    padding: 0 1.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
    overflow-x: auto;
  }
  .modal-tab {
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: inherit;
  }
  .modal-tab:hover { color: #aaa; }
  .modal-tab.active { color: #f1f1f3; border-bottom-color: #3b5bdb; }
 
  /* Modal body */
  .modal-body {
    padding: 1.75rem;
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
  }
  .modal-body::-webkit-scrollbar { width: 5px; }
  .modal-body::-webkit-scrollbar-track { background: transparent; }
  .modal-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 999px; }
 
  /* Tab panels */
  .tab-panel { display: none; }
  .tab-panel.active { display: block; }
 
  /* Policy content typography */
  .policy-content h3 {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #3b5bdb;
    margin: 1.75rem 0 0.6rem;
  }
  .policy-content h3:first-child { margin-top: 0; }
  .policy-content p {
    font-size: 0.875rem;
    color: #9a9aaa;
    line-height: 1.7;
    margin-bottom: 0.5rem;
  }
  .policy-content ul {
    list-style: none;
    margin: 0.4rem 0 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }
  .policy-content ul li {
    font-size: 0.875rem;
    color: #9a9aaa;
    line-height: 1.6;
    padding-left: 1rem;
    position: relative;
  }
  .policy-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #3b5bdb;
  }
  .policy-section-block {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 0.75rem;
  }
  .policy-section-block h3 { margin-top: 0; }

        
/* Circuit grid */
.circuit-bg{
  background-image:
    linear-gradient(var(--border) 1px,transparent 1px),
    linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:48px 48px;
}
 
/* Nav */
.site-nav{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2.5rem;height:64px;
  background:rgba(13,13,20,0.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav-logo{
  font-family:var(--font-head);font-weight:800;font-size:1.25rem;
  color:var(--text-primary);text-decoration:none;letter-spacing:-0.02em;
}
.nav-back{
  display:inline-flex;align-items:center;gap:0.5rem;
  font-family:var(--font-body);font-size:0.8rem;font-weight:500;
  color:var(--text-muted);text-decoration:none;
  padding:0.4rem 0.9rem;border-radius:6px;
  border:1px solid var(--border2);
  transition:color 0.15s,border-color 0.15s,background 0.15s;
}
.nav-back:hover{color:var(--text-primary);border-color:var(--border2);background:rgba(255,255,255,0.04);}
.nav-back svg{width:14px;height:14px;flex-shrink:0;}
 
/* Legal page hero */
.legal-hero{
  padding:5rem 0 3.5rem;
  border-bottom:1px solid var(--border);
  position:relative;overflow:hidden;
}
.legal-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 80% at 50% 120%,var(--blue-glow),transparent 70%);
  pointer-events:none;
}
.legal-hero-inner{
  max-width:840px;margin:0 auto;padding:0 2.5rem;position:relative;
}
.legal-eyebrow{
  display:inline-flex;align-items:center;gap:0.5rem;
  font-size:0.7rem;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--blue);margin-bottom:1.25rem;
}
.legal-eyebrow-dot{width:5px;height:5px;border-radius:50%;background:var(--blue);}
.legal-hero h1{
  font-family:var(--font-head);font-weight:800;font-size:clamp(2rem,5vw,3rem);
  letter-spacing:-0.03em;color:var(--text-primary);line-height:1.1;
  margin-bottom:1rem;
}
.legal-meta{
  font-size:0.8rem;color:var(--text-muted);
  display:flex;align-items:center;gap:0.75rem;
}
.legal-meta-dot{width:3px;height:3px;border-radius:50%;background:var(--text-muted);}
 
/* Tab nav */
.legal-tabs{
  position:sticky;top:64px;z-index:90;
  background:rgba(13,13,20,0.9);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.legal-tabs-inner{
  max-width:840px;margin:0 auto;padding:0 2.5rem;
  display:flex;gap:0;overflow-x:auto;
}
.legal-tab{
  padding:0.9rem 1.25rem;
  font-family:var(--font-body);font-size:0.8rem;font-weight:500;
  color:white;text-decoration:none;
  border-bottom:2px solid transparent;
  white-space:nowrap;
  transition:color 0.15s,border-color 0.15s;
}
.legal-tab:hover{color:#0059c593;}
.legal-tab.active{color:#0059c5;border-bottom-color:var(--blue);}
 
/* Content */
.legal-content{
  max-width:840px;margin:0 auto;padding:3.5rem 2.5rem 6rem;
}
.section-block{
  margin-bottom:1rem;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
}
.section-block summary,.section-head{
  display:flex;align-items:flex-start;gap:1rem;
  padding:1.25rem 1.5rem;
  cursor:pointer;list-style:none;
}
.section-block summary::-webkit-details-marker{display:none;}
.section-num{
  font-family:var(--font-head);font-size:0.65rem;font-weight:700;
  letter-spacing:0.08em;color:var(--blue);
  background:var(--blue-dim);border-radius:4px;
  padding:0.2rem 0.5rem;white-space:nowrap;margin-top:0.1rem;flex-shrink:0;
}
.section-title{
  font-family:var(--font-head);font-size:0.95rem;font-weight:700;
  letter-spacing:-0.01em;color:var(--text-primary);line-height:1.3;flex:1;
}
.section-chevron{
  margin-left:auto;flex-shrink:0;
  color:var(--text-muted);transition:transform 0.2s;
  margin-top:0.1rem;
}
details[open] .section-chevron{transform:rotate(180deg);}
.section-body{
  padding:0 1.5rem 1.5rem;
  border-top:1px solid var(--border);
}
.section-body p{
  font-size:0.875rem;color:var(--text-secondary);line-height:1.75;
  margin-top:1rem;
}
.section-body ul{
  margin-top:0.75rem;list-style:none;
  display:flex;flex-direction:column;gap:0.5rem;
}
.section-body ul li{
  font-size:0.875rem;color:var(--text-secondary);
  padding-left:1.25rem;position:relative;line-height:1.65;
}
.section-body ul li::before{
  content:'';position:absolute;left:0;top:0.65em;
  width:4px;height:4px;border-radius:50%;background:var(--blue);
}
.section-body strong{color:var(--text-primary);font-weight:500;}
 
/* Highlight callout */
.callout{
  margin-top:1rem;padding:0.875rem 1.1rem;
  background:var(--blue-dim);border:1px solid rgba(59,91,219,0.2);
  border-radius:8px;
  font-size:0.8rem;color:rgba(120,150,255,0.9);line-height:1.6;
}
 
/* Footer */
.site-footer{
  border-top:1px solid var(--border);
  padding:2rem 2.5rem;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem;
  max-width:840px;margin:0 auto;
}
.footer-copy{font-size:0.75rem;color:var(--text-muted);}
.footer-links{
  display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;
}
.footer-links a{
  font-size:0.75rem;color:var(--text-muted);text-decoration:none;
  padding:0.25rem 0.6rem;border-radius:5px;
  transition:color 0.15s,background 0.15s;
}
.footer-links a:hover{color:var(--text-primary);background:rgba(255,255,255,0.04);}
.footer-links a.active-page{color:var(--blue);}
.footer-sep{color:var(--border2);font-size:0.7rem;}
 
/* Cookie Banner */
#cookie-banner{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  z-index:9999;
  width:calc(100% - 1rem);
  /* max-width:600px; */
  background:rgba(63, 71, 95, 0.699);
  
  border:1px solid var(--border2);
  border-radius:14px;
  padding:1.25rem 1.5rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
  box-shadow:0 8px 48px rgba(0,0,0,0.6),0 0 0 1px var(--border);
  animation:bannerIn 0.35s cubic-bezier(0.22,1,0.36,1) forwards;
}
#cookie-banner.hiding{
  animation:bannerOut 0.25s ease forwards;
}
@keyframes bannerIn{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes bannerOut{from{opacity:1;transform:translateX(-50%) translateY(0)}to{opacity:0;transform:translateX(-50%) translateY(16px)}}
.banner-text{flex:1;min-width:200px;}
.banner-text p{font-size:1rem;color:white;line-height:1.2;}
.banner-text a{color:#0059c5;text-decoration:underline;}
.banner-text a:hover{text-decoration:underline;}
.banner-text {word-spacing: 2px;}
.banner-actions{display:flex;gap:0.6rem;flex-shrink:0;}
.btn-reject{
  padding:0.5rem 1.1rem;border-radius:7px;font-size:1rem;font-weight:500;
  font-family:var(--font-body);cursor:pointer;
  background:transparent;border:1px solid var(--border2);color:white;
  transition:color 0.15s,background 0.15s,border-color 0.15s;
}
.btn-reject:hover{color:var(--text-primary);background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.2);}
.btn-accept{
  padding:0.5rem 1.25rem;border-radius:7px;font-size:1rem;font-weight:500;
  font-family:var(--font-body);cursor:pointer;
    background:transparent;border:1px solid var(--border2);color:white;

   transition:color 0.15s,background 0.15s,border-color 0.15s;

}
.btn-accept:hover{opacity:0.85;}
 
@media(max-width:600px){
  .site-nav{padding:0 1.25rem;}
  .legal-hero-inner,.legal-tabs-inner,.legal-content{padding-left:1.25rem;padding-right:1.25rem;}
  .legal-tabs-inner{gap:0;}
  #cookie-banner{bottom:1rem;width:calc(100% - 2rem);border-radius:10px;}
  .banner-actions{width:100%;}
  .btn-reject,.btn-accept{flex:1;text-align:center;}
}

 .glass-panel { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(24px); }
        .ambient-shadow { box-shadow: 0 40px 100px -20px rgba(13, 28, 50, 0.1); }
        .reveal-item { opacity: 0; transform: translateY(40px); }
        .slider-handle { cursor: grab; transition: transform 0.2s; }
        .slider-handle:active { cursor: grabbing; transform: scale(0.9); }
        .video-container::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent 30%, transparent 70%, rgba(0,0,0,0.6));
            pointer-events: none;
        }
        .metric-card { transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); }
        .metric-card:hover { transform: translateY(-10px) scale(1.02); }
        .glowing-dot {
            width: 8px;
            height: 8px;
            background: #0059c5;
            border-radius: 50%;
            box-shadow: 0 0 15px #0059c5;
            animation: pulse-dot 2s infinite;
        }
        @keyframes pulse-dot {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.5); opacity: 0.5; }
            100% { transform: scale(1); opacity: 1; }
        }
        .sticky-narrative { position: sticky; top: 20vh; }
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: #001a43; border-radius: 10px; }
        
        .what-changed-item { opacity: 0; transform: translateY(30px) scale(0.95); transition: box-shadow 0.3s ease; }
        .what-changed-item.active { box-shadow: 0 0 30px rgba(59, 130, 246, 0.2); border-color: rgba(59, 130, 246, 0.3); }