/* Self-Hosted Montserrat Font (Weights 100-900) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local('Montserrat'), local('Montserrat Regular'), url('./assets/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fallback Metric Override (Prevents Layout Shift / CLS during font load) */
@font-face {
  font-family: 'Montserrat-Fallback';
  src: local('Arial');
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
  size-adjust: 99%;
}

:root {
  --bg-black: #000000;
  --bg-surface: #0a0a0c;
  --bg-surface-elevated: #111115;
  --bg-surface-card: #16161a;
  --bg-input: #0a0a0d;
  
  --text-white: #ffffff;
  --text-grey: #a9a9a9;
  --text-dim: #6b6b76;
  
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-active: rgba(255, 255, 255, 0.2);
  --border-glow: rgba(255, 255, 255, 0.35);
  
  --accent-white: #ffffff;
  --accent-silver: #d4d4d8;
  --accent-grey: #a9a9a9;
  
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  
  --font-main: 'Montserrat', 'Montserrat-Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* GradualBlur Component Styles */
.gradual-blur {
  pointer-events: none;
  isolation: isolate;
}

.gradual-blur-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.gradual-blur-inner > div {
  -webkit-backdrop-filter: inherit;
  backdrop-filter: inherit;
  pointer-events: none;
}

/* ==========================================================================
   BorderGlow Component Styles (React Bits)
   ========================================================================== */
.border-glow-card {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 30;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  --border-radius: 20px;
  --glow-padding: 40px;
  --cone-spread: 25;
  --card-bg: #0e0e12;
  --fill-opacity: 0.5;

  position: relative;
  border-radius: var(--border-radius);
  isolation: isolate;
  contain: layout style;
  touch-action: pan-y;
  transform: translate3d(0, 0, 0.01px);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--card-bg, #0e0e12);
  overflow: visible;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 1px 2px,
    rgba(0, 0, 0, 0.1) 0px 2px 4px,
    rgba(0, 0, 0, 0.1) 0px 4px 8px,
    rgba(0, 0, 0, 0.1) 0px 8px 16px,
    rgba(0, 0, 0, 0.1) 0px 16px 32px,
    rgba(0, 0, 0, 0.1) 0px 32px 64px;
}

.border-glow-card > *:not(.edge-light) {
  position: relative;
  z-index: 2;
}

.border-glow-card::before,
.border-glow-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  transition: opacity 0.25s ease-out;
  z-index: 0;
  pointer-events: none;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.border-glow-card > .edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity 0.25s ease-out;
  z-index: 0;
  pointer-events: none;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.border-glow-card:not(:hover):not(.sweep-active):not(.touch-active)::before,
.border-glow-card:not(:hover):not(.sweep-active):not(.touch-active)::after,
.border-glow-card:not(:hover):not(.sweep-active):not(.touch-active) > .edge-light {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.75s ease-in-out, visibility 0.75s step-end;
}

.border-glow-card:hover::before,
.border-glow-card:hover::after,
.border-glow-card:hover > .edge-light,
.border-glow-card.sweep-active::before,
.border-glow-card.sweep-active::after,
.border-glow-card.sweep-active > .edge-light,
.border-glow-card.touch-active::before,
.border-glow-card.touch-active::after,
.border-glow-card.touch-active > .edge-light {
  visibility: visible;
  transition: opacity 0.15s ease-out;
}

/* colored mesh-gradient border */
.border-glow-card::before {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg, #0e0e12) 0 100%) padding-box,
    linear-gradient(rgba(255, 255, 255, 0) 0% 100%) border-box,
    var(--gradient-one, radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-two, radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-three, radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-four, radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-five, radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-six, radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-seven, radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%)) border-box,
    var(--gradient-base, linear-gradient(#c299ff 0 100%)) border-box;

  -webkit-mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      black calc(var(--cone-spread) * 1%),
      transparent calc((var(--cone-spread) + 15) * 1%),
      transparent calc((100 - var(--cone-spread) - 15) * 1%),
      black calc((100 - var(--cone-spread)) * 1%)
    );
  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      black calc(var(--cone-spread) * 1%),
      transparent calc((var(--cone-spread) + 15) * 1%),
      transparent calc((100 - var(--cone-spread) - 15) * 1%),
      black calc((100 - var(--cone-spread)) * 1%)
    );

  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
}

/* colored mesh-gradient background fill near edges */
.border-glow-card::after {
  border: 1px solid transparent;
  background:
    var(--gradient-one, radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-two, radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-three, radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-four, radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-five, radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-six, radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-seven, radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%)) padding-box,
    var(--gradient-base, linear-gradient(#c299ff 0 100%)) padding-box;

  -webkit-mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);

  -webkit-mask-composite: source-out, source-over, source-over, source-over, source-over, source-over;
  mask-composite: subtract, add, add, add, add, add;
  opacity: calc(var(--fill-opacity, 0.5) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode: soft-light;
}

/* outer glow layer */
.border-glow-card > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  pointer-events: none;
  z-index: 1;

  -webkit-mask-image:
    conic-gradient(
      from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
    );
  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
    );

  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
}

.border-glow-card > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color, hsl(40deg 80% 80% / 100%)),
    inset 0 0 1px 0 var(--glow-color-60, hsl(40deg 80% 80% / 60%)),
    inset 0 0 3px 0 var(--glow-color-50, hsl(40deg 80% 80% / 50%)),
    inset 0 0 6px 0 var(--glow-color-40, hsl(40deg 80% 80% / 40%)),
    inset 0 0 15px 0 var(--glow-color-30, hsl(40deg 80% 80% / 30%)),
    inset 0 0 25px 2px var(--glow-color-20, hsl(40deg 80% 80% / 20%)),
    inset 0 0 50px 2px var(--glow-color-10, hsl(40deg 80% 80% / 10%)),
    0 0 1px 0 var(--glow-color-60, hsl(40deg 80% 80% / 60%)),
    0 0 3px 0 var(--glow-color-50, hsl(40deg 80% 80% / 50%)),
    0 0 6px 0 var(--glow-color-40, hsl(40deg 80% 80% / 40%)),
    0 0 15px 0 var(--glow-color-30, hsl(40deg 80% 80% / 30%)),
    0 0 25px 2px var(--glow-color-20, hsl(40deg 80% 80% / 20%)),
    0 0 50px 2px var(--glow-color-10, hsl(40deg 80% 80% / 10%));
}

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

html {
  scroll-behavior: smooth;
  color-scheme: dark;
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  background-color: var(--bg-black);
  color: var(--text-white);
  font-family: var(--font-main);
  line-height: 1.6;
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

/* Atmospheric Background Grid & Subtle Radial Glow */
.ambient-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  contain: strict;
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.07) 0%, transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(169, 169, 169, 0.02) 0%, transparent 40%),
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
}

/* Container */
.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

/* Brand Header - Particle & Big Locked Logo */
.brand-hero-header {
  padding-top: 75px;
  padding-bottom: 65px;
  text-align: center;
  position: relative;
}

.brand-hero-wrap {
  width: 100%;
  max-width: 1060px;
  min-height: 165px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.particle-text__canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: 100;
  pointer-events: none;
  transition: opacity 0.5s ease-out;
}

.brand-hero-logo {
  width: 100%;
  height: auto;
  aspect-ratio: 804 / 112;
  max-height: 165px;
  display: block;
  filter: drop-shadow(0 10px 40px rgba(255, 255, 255, 0.12));
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 1;
}

.brand-hero-logo.locked {
  opacity: 1;
}

.brand-hero-logo:hover {
  transform: scale(1.015);
  transition: transform 0.25s ease;
}

@media (max-width: 768px) {
  .brand-hero-header {
    padding-top: 48px;
    padding-bottom: 40px;
  }
  .brand-hero-wrap {
    max-width: 100%;
    min-height: 100px;
  }
  .brand-hero-logo {
    max-height: 100px;
  }
}

/* Hero Section */
.hero-section {
  padding: 15px 0 80px;
  text-align: center;
}

.hero-title {
  font-size: clamp(28px, 4.2vw, 48px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.22;
  max-width: 900px;
  margin: 0 auto 36px;
  color: var(--text-white);
}

.hero-title .highlight {
  background: linear-gradient(180deg, #ffffff 0%, #a9a9a9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}



/* Sections Common */
.section {
  padding: 88px 0;
}

.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 52px;
}

.section-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.18;
  color: var(--text-white);
  margin-bottom: 16px;
}

/* Comparison Section */
#comparison {
  contain: layout style;
}

.comparison-desktop {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.comparison-mobile {
  display: none;
}

.comp-card {
  border-radius: var(--radius-lg);
  padding: 38px 32px;
  position: relative;
  touch-action: pan-y;
  contain: layout style;
}

.comp-card.old-way {
  background: #08080a;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.comp-card.new-way {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-glow);
  box-shadow: 0 0 40px -10px rgba(255, 255, 255, 0.08);
}

.comp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.comp-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.comp-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comp-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 14px;
  color: var(--text-grey);
}

.comp-list li strong {
  color: var(--text-white);
  font-weight: 600;
  display: block;
  font-size: 15px;
  margin-bottom: 2px;
}

.list-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  margin-top: 2px;
  font-weight: 700;
}

.list-icon.cross {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
}

.list-icon.check {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

/* Mobile Comparison Styling */
@media (max-width: 768px) {
  .comparison-desktop {
    display: none;
  }

  .comparison-mobile {
    display: block;
  }

  .comp-mobile-card {
    padding: 24px 18px;
  }

  .comp-pair-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .comp-pair {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .comp-pair:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }

  .comp-mobile-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  .comp-mobile-item.old-item {
    padding: 4px 6px;
    opacity: 0.72;
  }

  .comp-mobile-item.new-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    padding: 12px 14px;
  }

  .comp-mobile-item .list-icon {
    margin-top: 2px;
    width: 20px;
    height: 20px;
    font-size: 12px;
  }

  .comp-item-body strong {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-white);
    display: block;
    margin-bottom: 3px;
    line-height: 1.3;
  }

  .comp-item-body p {
    font-size: 13px;
    color: var(--text-grey);
    line-height: 1.5;
    margin: 0;
  }
}

/* ScrollFloat (React Bits) */
.scroll-float {
  overflow: hidden;
  display: block;
}

strong.scroll-float {
  display: inline-block;
}

.scroll-float-text {
  display: inline-block;
  line-height: 1.4;
  width: 100%;
}

.word {
  display: inline-block;
  white-space: nowrap;
}

.char {
  display: inline-block;
  transform-origin: 50% 0%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
}

/* Feature Details Grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.feature-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  min-height: 160px;
  touch-action: pan-y;
  contain: layout style;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.feature-card:hover {
  border-color: var(--border-active);
  transform: translateY(-4px);
  background: var(--bg-surface-elevated);
}

.feature-icon-wrap {
  width: 46px;
  height: 46px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--text-white);
}

.feature-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 0;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

@media (max-width: 1100px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .border-glow-card {
    --glow-padding: 16px;
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .feature-card {
    align-items: center;
    text-align: center;
    padding: 28px 20px;
    justify-content: center;
    min-height: auto;
  }

  .feature-icon-wrap {
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
  }

  .feature-icon-wrap svg {
    width: 26px;
    height: 26px;
  }

  .feature-card h3 {
    font-size: 23px !important;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
}

#waitlist {
  content-visibility: auto;
  contain-intrinsic-size: 0 650px;
}

/* Waitlist Card at Bottom */
.waitlist-card-wrapper {
  max-width: 540px;
  margin: 0 auto;
  position: relative;
}

.waitlist-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-active);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.9), 0 0 50px -10px rgba(255, 255, 255, 0.05);
  position: relative;
  text-align: left;
}

/* Form */
.waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff !important;
  letter-spacing: 0.01em;
  opacity: 1 !important;
}

.input-field {
  background: #0d0d11;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  color: #ffffff !important;
  font-size: 15px;
  outline: none;
  transition: all 0.2s ease;
  font-family: inherit;
}

.input-field::placeholder {
  color: #a9a9a9 !important;
  opacity: 1 !important;
}

.input-field::-webkit-input-placeholder {
  color: #a9a9a9 !important;
  opacity: 1 !important;
}

.input-field::-moz-placeholder {
  color: #a9a9a9 !important;
  opacity: 1 !important;
}

.input-field:-ms-input-placeholder {
  color: #a9a9a9 !important;
  opacity: 1 !important;
}

.input-field:focus {
  border-color: #ffffff;
  background: #14141a;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 768px) {
  #waitlist .section-title {
    font-size: 36px;
    line-height: 1.2;
  }
}

@media (max-width: 520px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* Specular Button */
.specular-button {
  --sb-radius: 18px;
  --sb-tint: #ffffff;
  --sb-tint-opacity: 0;
  --sb-blur: 0px;
  --sb-text-color: #f5f5f5;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  margin: 0;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--sb-text-color);
  background: color-mix(in srgb, var(--sb-tint) calc(var(--sb-tint-opacity) * 100%), transparent);
  border-radius: var(--sb-radius);
  backdrop-filter: blur(var(--sb-blur));
  -webkit-backdrop-filter: blur(var(--sb-blur));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  outline: none;
  transition: transform 0.15s ease;
}

.specular-button:active {
  transform: scale(0.97);
}

.specular-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--sb-text-color) 60%, transparent);
  outline-offset: 3px;
}

.specular-button:disabled {
  opacity: 0.55;
  cursor: default;
}

.specular-button:disabled:active {
  transform: none;
}

.specular-button--sm {
  font-size: 0.85rem;
  padding: 10px 22px;
}

.specular-button--md {
  font-size: 1rem;
  padding: 14px 30px;
}

.specular-button--lg {
  font-size: 1.05rem;
  padding: 16px 36px;
}

/* Canvas extends past the button so the rim glow can bleed outside the edge */
.specular-button__fx {
  position: absolute;
  inset: -20px;
  pointer-events: none;
  z-index: 1;
}

.specular-button__fx canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.specular-button__label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-submit {
  width: 100%;
  margin-top: 8px;
}

.spin-icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Success State */
.success-state {
  display: none;
  text-align: center;
  padding: 20px 10px;
}

.success-state.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.success-icon {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--text-white);
}

.success-state h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 16px;
}

.success-desc {
  font-size: 14px;
  color: var(--text-grey);
  line-height: 1.6;
}

/* Footer */
.footer {
  content-visibility: auto;
  contain-intrinsic-size: 0 160px;
  border-top: 1px solid var(--border-subtle);
  padding: 48px 0 115px;
  background: #040405;
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-note {
  font-size: 13px;
  color: var(--text-grey);
}

.footer-copy {
  font-size: 13px;
  color: var(--text-dim);
}

.footer-copy a,
.footer-link {
  color: var(--text-grey);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-copy a:hover,
.footer-link:hover {
  color: var(--text-white);
  text-decoration: underline;
}

@media (max-width: 600px) {
  .footer-content {
    flex-direction: column;
    text-align: center;
  }
}

/* ==========================================================================
   Legal / Privacy Policy Page Styles
   ========================================================================== */
.legal-header {
  padding: 32px 0 24px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 48px;
}

.legal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-grey);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  transition: all 0.2s ease;
}

.back-link:hover {
  color: var(--text-white);
  border-color: var(--border-active);
  background: var(--bg-surface-card);
}

.legal-content-wrap {
  max-width: 840px;
  margin: 0 auto 90px;
}

.legal-title-section {
  margin-bottom: 40px;
}

.legal-title-section h1 {
  font-size: clamp(32px, 5vw, 46px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  color: var(--text-white);
}

.legal-updated {
  font-size: 14px;
  color: var(--text-dim);
}

.legal-section {
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border-subtle);
}

.legal-section:last-child {
  border-bottom: none;
}

.legal-section h2 {
  font-size: 21px;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.legal-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-silver);
  margin: 20px 0 10px;
}

.legal-section p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-grey);
  margin-bottom: 14px;
}

.legal-section ul {
  list-style: none;
  padding-left: 0;
  margin: 12px 0 18px;
}

.legal-section ul li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-grey);
  margin-bottom: 10px;
}

.legal-section ul li::before {
  content: '•';
  position: absolute;
  left: 4px;
  color: var(--text-dim);
  font-size: 18px;
  line-height: 1;
}

.legal-section strong {
  color: var(--text-white);
}

.legal-card {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  margin: 18px 0;
}

.legal-card h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-white);
  margin-bottom: 8px;
}

.legal-card p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 0;
}