/* ============================================================
   ROOT
============================================================ */

:root
{
  --bgBlack: #050505;
  
  --panelDark: rgba(255, 255, 255, 0.04);
  
  --panelBorder: rgba(255, 255, 255, 0.12);
  
  --textWhite: #ffffff;
  
  --textSoft: rgba(255, 255, 255, 0.72);
  
  --textMuted: rgba(255, 255, 255, 0.55);
  
  --shadowSoft: 0 20px 60px rgba(0, 0, 0, 0.35);
  
  --radiusLg: 24px;
  
  --radiusMd: 14px;
  
  --maxWidth: 1280px;
  
  --ease: cubic-bezier(.65, 0, .35, 1);
}


/* ============================================================
   TOUCH SUPPORT (MOBILE INTERACTIONS)
============================================================ */

button,
a
{
  -webkit-tap-highlight-color: transparent;
}


/* ============================================================
   GLOBAL RESET
============================================================ */

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

html
{
  scroll-behavior: smooth;

  overflow: hidden;
}

body
{
  background: var(--bgBlack);

  color: var(--textWhite);

  font-family: 'Barlow Condensed', Arial, sans-serif;

  line-height: 1.5;

  overflow: hidden;

  touch-action: none;
}

img
{
  display: block;
  
  max-width: 100%;
}

a
{
  color: inherit;
  
  text-decoration: none;
}

ul
{
  list-style: none;
}

button
{
  font-family: inherit;
  
  cursor:      pointer;
}


/* ============================================================
   SHARED SECTION STRUCTURE
============================================================ */

main
{
  width: 100%;
}

section
{
  position: relative;
  
  margin:   0;
}


/* ============================================================
   SITE HEADER
============================================================ */

.siteHeader
{
  position:   fixed;
  
  inset:      0 0 auto 0;
  
  z-index:    100;
  
  padding:    28px 24px;
  
  opacity:    0;
  
  visibility: hidden;
}

.siteHeader.heroLoaded
{
  opacity:    1;

  visibility: visible;

  transition: opacity .6s ease .15s;
}

.mainNav
{
  width:           100%;
  
  margin:          0;
  
  display:         flex;
  
  align-items:     center;
  
  justify-content: space-between;
  
  gap:             24px;
}

.navRight
{
  display:     flex;
  
  align-items: center;
}

.navLogo
{
  display:     inline-flex;
  
  align-items: center;
  
  opacity:     0;
  
  visibility:  hidden;
}

.siteHeader.heroLoaded .navLogo
{
  opacity:    1;
  
  visibility: visible;
  
  transition: opacity .6s ease;
}

.navLogo img
{
  width:  auto;
  
  height: 92px;
}

/* Phone icon in header */

.navPhone,
.navCallBtn.callDemoBtn
{
  position:        relative;
  
  display:         inline-flex;
  
  align-items:     center;
  
  justify-content: center;
  
  width:           44px;
  
  height:          44px;
  
  border:          2px solid rgba(255, 255, 255, 0.25);

  border-radius:   0;
  
  color:           rgba(255, 255, 255, 0.75);
  
  overflow:        visible;
  
  opacity:         0;
  
  visibility:      hidden;
  
  transition:
    color         .3s ease,
    border-color  .3s ease,
    background    .3s ease;
}

.siteHeader.heroLoaded .navPhone,
.siteHeader.heroLoaded .navCallBtn.callDemoBtn
{
  opacity:    1;
  
  visibility: visible;
  
  transition:
    opacity      .6s ease,
    color        .3s ease,
    border-color .3s ease,
    background   .3s ease;
}

.navPhone:hover,
.navCallBtn.callDemoBtn:hover,
.navPhone:active,
.navCallBtn.callDemoBtn:active
{
  color:        #050505;

  border-color: #ffffff;

  background:   #ffffff;
}

.navGeoPill
{
  font-size:       10px;

  letter-spacing:  0.1em;

  text-transform:  uppercase;

  color:           rgba(255, 255, 255, 0.4);

  background:      rgba(255, 255, 255, 0.05);

  border:          1px solid rgba(255, 255, 255, 0.1);

  border-radius:   999px;

  padding:         6px 14px;

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  white-space:     nowrap;

  opacity:         0;

  visibility:      hidden;
}

.siteHeader.heroLoaded .navGeoPill
{
  opacity:    1;

  visibility: visible;

  transition: opacity .6s ease .3s;
}


.navCallTooltip
{
  position: absolute;
  
  top: 50%;
  
  right: calc(100% + 14px);
  
  transform: translateY(-50%) translateX(8px);
  
  min-width: 220px;
  
  max-width: 280px;
  
  padding: 10px 12px;
  
  background: rgba(8, 8, 8, 0.96);
  
  border: 1px solid rgba(255, 255, 255, 0.16);
  
  border-radius: 12px;
  
  color: rgba(255, 255, 255, 0.92);
  
  font-size: 12px;
  
  letter-spacing: 0.4px;
  
  line-height: 1.35;
  
  text-transform: none;
  
  white-space: normal;
  
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  
  opacity: 0;
  
  visibility: hidden;
  
  pointer-events: none;
  
  transition:
    opacity .22s ease,
    transform .22s ease,
    visibility .22s ease;
  
  z-index: 5;
}

.navCallBtn.callDemoBtn:hover .navCallTooltip,
.navCallBtn.callDemoBtn:active .navCallTooltip,
.navCallBtn.callDemoBtn:focus-visible .navCallTooltip
{
  opacity: 1;
  
  visibility: visible;
  
  transform: translateY(-50%) translateX(0);
}

.phoneIcon,
.callDemoIcon
{
  width:  20px;
  
  height: 20px;
  
  position: relative;
  
  z-index:  1;
}

.callDemoIcon
{
  fill:              none;
  
  stroke:            currentColor;
  
  stroke-width:      1.6;
  
  stroke-linecap:    round;
  
  stroke-linejoin:   round;
  
  opacity:           0.58;
}



/* ============================================================
   NULO LOGO — TRACE REVEAL
============================================================ */

.heroLogoWrap
{
  opacity:    0;

  margin-top: 0;

  transition: opacity .8s ease-out;
}

.heroLogoWrap.isVisible
{
  opacity: 1;
}

.logoStage
{
  position:        relative;

  width:           min(72vw, 540px);

  aspect-ratio:    1536 / 1024;

  display:         flex;

  align-items:     center;

  justify-content: center;

  margin:          0 auto;
}

.nuloWrap
{
  position: relative;

  width:    100%;

  height:   100%;
}

.nuloFillSvg,
.nuloOutlineSvg
{
  position: absolute;

  inset:    0;

  width:    100%;

  height:   100%;

  display:  block;

  overflow: visible;
}

.nuloFillSvg
{
  z-index:    1;

  opacity:    0;

  transition: opacity 0.38s ease;
}

.logoStage.isFilled .nuloFillSvg
{
  opacity: 1;
}

.bgPath
{
  display: none;
}

.nuloOutlineSvg
{
  z-index:    2;

  opacity:    1;

  transition: opacity 0.28s ease;
}

.logoStage.isFilled .nuloOutlineSvg
{
  opacity: 0;
}

.tracePath
{
  fill:              none;

  stroke:            #ffffff;

  stroke-width:      2.35;

  stroke-linecap:    round;

  stroke-linejoin:   round;

  vector-effect:     non-scaling-stroke;

  stroke-dasharray:  var(--pathLength, 1000);

  stroke-dashoffset: var(--pathLength, 1000);
}

@keyframes traceStroke
{
  to { stroke-dashoffset: 0; }
}

/* Accent color for hero headline */

.heroAccent
{
  color: #7eb8f0;
}


/* ============================================================
   SECTION 1 — HERO
============================================================ */

.heroSection
{
  position:    relative;
  
  height:      100vh;
  
  z-index:     1;
  
  display:     grid;
  
  place-items: center;
  
  padding:     0 24px;
  
  overflow:    hidden;
  
  isolation:   isolate;
}

.heroBg
{
  position:        absolute;
  
  inset:           0;
  
  width:           100%;
  
  height:          100%;
  
  object-fit:      cover;
  
  object-position: center;
  
  z-index:         -3;
}

.heroOverlay
{
  position:   absolute;
  
  inset:      0;
  
  z-index:    -2;
  
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.88) 78%),
    linear-gradient(to top,    rgba(0, 0, 0, 0.92), transparent 45%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.86), transparent 45%);
}

.heroContent
{
  width:           min(100%, 1000px);

  height:          100%;

  text-align:      center;

  display:         flex;

  flex-direction:  column;

  align-items:     center;

  justify-content: center;

  padding:         72px 24px 140px;

  gap:             12px;
}

.heroValueWrap
{
  width:      min(100%, 720px);

  display:    flex;

  flex-direction: column;

  align-items:    center;

  gap:            0;
}

.heroValueTitle { margin-bottom: 12px; }

.heroValueText  { margin-bottom: 0; }

.heroValueTitle
{
  font-family:    'Inter', sans-serif;

  font-size:      clamp(30px, 3.8vw, 58px);

  font-weight:    700;

  line-height:    1.1;

  letter-spacing: -0.02em;

  text-align:     center;

  text-wrap:      balance;

  color:          #ffffff;

  transition:     opacity .6s ease, transform .6s ease;
}

.heroValueText
{
  max-width:      600px;

  font-size:      clamp(15px, 1.6vw, 19px);

  line-height:    1.55;

  letter-spacing: 0.01em;

  color:          rgba(255, 255, 255, 0.78);

  text-align:     center;

  text-wrap:      balance;

  transition:     opacity .6s ease, transform .6s ease;
}

.heroMicroText
{
  font-size:      11.5px;

  letter-spacing: 0.09em;

  text-transform: uppercase;

  color:          rgba(255, 255, 255, 0.72);

  text-align:     center;

  transition:     opacity .6s ease, transform .6s ease;
}

/* ============================================================
   FORCE INITIAL HIDDEN — all hero content invisible on load
============================================================ */

.heroValueTitle,
.heroValueText,
.heroMicroText
{
  opacity:    0;

  visibility: hidden;

  transform:  translateY(16px);
}

.heroCtaGroup
{
  display:         flex;

  align-items:     center;

  justify-content: center;

  gap:             18px;

  flex-wrap:       nowrap;

  margin-top:      32px;

  margin-bottom:   16px;

  opacity:         0;

  visibility:      hidden;

  transform:       translateY(16px);

  transition:      opacity .6s ease, visibility .6s ease, transform .6s ease;
}


/* ============================================================
   HERO VALUE TITLE
============================================================ */

.heroValueTitle
{
  max-width:   700px;

  font-size:   clamp(38px, 4.6vw, 72px);

  line-height: 1.1;

  font-weight: 600;

  font-family: "Joan", serif;

  text-align:  center;

  text-wrap:   balance;

  transition:  opacity .6s ease, transform .6s ease;
}


.heroValueText
{
  max-width:      520px;

  color:          rgba(255, 255, 255, 0.55);

  font-size:      13px;

  letter-spacing: 0.06em;

  line-height:    1.5;

  text-align:     center;

  text-wrap:      balance;

  text-transform: uppercase;

  transition:     opacity .6s ease, transform .6s ease;
}

/* ============================================================
   GHOST CTA — LASER BORDER
============================================================ */

@property --laserAngle
{
  syntax:        "<angle>";
  initial-value: 0deg;
  inherits:      false;
}

@keyframes laserTrace
{
  to { --laserAngle: 360deg; }
}

@keyframes arrowFloat
{
  0%   { transform: translateX(0); }
  50%  { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

.ghostCta
{
  position:        relative;

  display:         inline-flex;

  align-items:     center;

  justify-content: center;

  gap:             10px;

  padding:         16px 40px;

  font-family:     'Barlow Condensed', sans-serif;

  font-size:       12px;

  font-weight:     600;

  letter-spacing:  0.18em;

  text-transform:  uppercase;

  cursor:          pointer;

  outline:         none;

  background:      transparent;

  color:           #ffffff;

  border:          1px solid rgba(255, 255, 255, 0.65);

  border-radius:   0;

  transition:
    background 0.3s ease,
    color      0.3s ease,
    transform  0.3s ease,
    opacity    .6s ease;
}

.ghostCta .ctaText,
.ghostCta .ctaArrow
{
  position: relative;

  z-index:  1;
}

.ctaArrow
{
  transition: transform .3s ease;
}

.ghostCta::before
{
  content:        '';

  position:       absolute;

  inset:          0;

  border-radius:  0;

  padding:        2px;

  background:     conic-gradient(
    from var(--laserAngle),
    transparent            0deg,
    transparent          295deg,
    rgba(255,255,255,0.06) 310deg,
    rgba(255,255,255,0.35) 325deg,
    rgba(255,255,255,0.85) 342deg,
    #ffffff                350deg,
    rgba(255,255,255,0.55) 356deg,
    transparent            360deg
  );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  mask-composite: exclude;

  animation:      laserTrace 2.6s linear infinite;

  pointer-events: none;
}

.ghostCta:hover,
.ghostCta:active
{
  background: #ffffff;

  color:      #111111;

  transform:  translateY(-2px);
}

.ghostCta:hover::before,
.ghostCta:active::before
{
  animation: none;

  background: transparent;
}

.ghostCta:hover .ctaArrow,
.ghostCta:active .ctaArrow
{
  animation: arrowFloat 0.9s ease-in-out infinite;
}

/* ============================================================
   SOLID CTA — SMS / PRIMARY
============================================================ */

.heroCtaGroup:has(.solidCta:hover) .ghostCta::before,
.heroCtaGroup:has(.solidCta:active) .ghostCta::before
{
  animation-play-state: paused;
}

.solidCta
{
  position:        relative;

  display:         inline-flex;

  align-items:     center;

  justify-content: center;

  white-space:     nowrap;

  gap:             10px;

  padding:         16px 40px;

  font-family:     'Barlow Condensed', sans-serif;

  font-size:       12px;

  font-weight:     600;

  letter-spacing:  0.18em;

  text-transform:  uppercase;

  text-decoration: none;

  background:      #ffffff;

  color:           #111111;

  border:          1px solid #ffffff;

  cursor:          pointer;

  transition:
    background .3s ease,
    color      .3s ease,
    transform  .3s ease;
}

.solidCta::before
{
  content:        '';

  position:       absolute;

  inset:          0;

  border-radius:  0;

  padding:        2px;

  background:     conic-gradient(
    from var(--laserAngle),
    transparent            0deg,
    transparent          295deg,
    rgba(255,255,255,0.06) 310deg,
    rgba(255,255,255,0.35) 325deg,
    rgba(255,255,255,0.85) 342deg,
    #ffffff                350deg,
    rgba(255,255,255,0.55) 356deg,
    transparent            360deg
  );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  mask-composite:  exclude;

  animation:       laserTrace 2.6s linear infinite;

  pointer-events:  none;
}

.solidCta .ctaArrow
{
  display:    inline-block;

  transition: transform .3s ease;
}

.solidCta:hover,
.solidCta:active
{
  background: transparent;

  color:      #ffffff;

  transform:  translateY(-2px);
}

.solidCta:hover .ctaArrow,
.solidCta:active .ctaArrow
{
  animation: arrowFloat 0.9s ease-in-out infinite;
}


/* ============================================================
   TOUCH PRESS STATE
============================================================ */

.solidCta:active,
.ghostCta:active,
.navCallBtn:active,
.heroCta:active
{
  transform: scale(0.96);
}

.isPressed
{
  transform: scale(0.96);
}


/* ============================================================
   HERO TRUST TEXT
============================================================ */

.heroTrustText
{
  font-family:    'Barlow Condensed', sans-serif;

  font-size:      11px;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color:          rgba(255, 255, 255, 0.28);

  transition:     opacity .6s ease, transform .6s ease;
}

/* ============================================================
   HERO CTA — BOTTOM OF VIEWPORT
============================================================ */

.heroCtaWrap
{
  position:        absolute;
  bottom:          60px;
  left:            50%;
  transform:       translateX(-50%);
  z-index:         10;
  opacity:         0;
  visibility:      hidden;
  transition:      opacity .6s ease, visibility .6s ease;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             14px;
}

.heroCtaWrap.isVisible
{
  opacity:   1;
  visibility: visible;
}

.heroCta
{
  position:           relative;
  display:            inline-flex;
  align-items:        center;
  justify-content:    center;
  gap:                10px;
  padding:            14px 32px;
  font-family:        'Barlow Condensed', sans-serif;
  font-size:          12px;
  font-weight:        600;
  letter-spacing:     0.18em;
  text-transform:     uppercase;
  cursor:             pointer;
  outline:            none;
  border-radius:      0;
  text-decoration:    none;
  white-space:        nowrap;
  background:         transparent;
  -webkit-appearance: none;
  appearance:         none;
}

.ctaArrow { transition: transform 0.2s ease; }

.heroCta:hover .ctaArrow,
.heroCta:active .ctaArrow { animation: arrowFloat 0.9s ease-in-out infinite; }

.startProjectCta
{
  background:  transparent;
  color:       #ffffff;
  border:      1px solid rgba(255, 255, 255, 0.35);
  transition:  background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.startProjectCta::before
{
  content:     '';
  position:    absolute;
  inset:       -1px;
  padding:     1px;
  background:  conic-gradient(
    from var(--laserAngle),
    transparent            0deg,
    transparent          308deg,
    rgba(255,255,255,0.04) 322deg,
    rgba(255,255,255,0.22) 336deg,
    rgba(255,255,255,0.72) 348deg,
    #ffffff                354deg,
    rgba(255,255,255,0.45) 358deg,
    transparent            360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite:  exclude;
  animation:       laserTrace 2.6s linear infinite;
  pointer-events:  none;
  border-radius:   0;
}

.startProjectCta:hover,
.startProjectCta:active
{
  background:   #ffffff;
  color:        #111111;
  border-color: #ffffff;
  transform:    translateY(-2px);
}

.startProjectCta:hover::before
{
  background: conic-gradient(
    from var(--laserAngle),
    transparent       0deg,
    transparent     308deg,
    rgba(0,0,0,0.04) 322deg,
    rgba(0,0,0,0.22) 336deg,
    rgba(0,0,0,0.72) 348deg,
    #000000          354deg,
    rgba(0,0,0,0.45) 358deg,
    transparent      360deg
  );
}

.startProjectCta .ctaText,
.startProjectCta .ctaArrow
{
  position: relative;
  z-index:  1;
}

/* ============================================================
   BOTTOM SCROLL BANNER — TRUE INFINITE TICKER
============================================================ */

.scrollBanner
{
  position:    fixed;
  
  bottom:      0;
  
  left:        0;
  
  width:       100%;
  
  height:      34px;
  
  display:     flex;
  
  align-items: center;
  
  overflow:    hidden;
  
  background:  rgba(5, 5, 5, 0.95);
  
  border-top:  1px solid rgba(255, 255, 255, 0.08);
  
  box-shadow:  0 -4px 24px rgba(0, 0, 0, 0.4);
  
  z-index:     200;
  
  opacity:     0;
  
  transform:   translateY(calc(100% + 16px));
  
  will-change: transform, opacity;
  
  transition:
    opacity   0.7s ease,
    transform 0.7s cubic-bezier(.22, 1, .36, 1);
}

@supports (padding: max(0px))
{
  .scrollBanner
  {
    bottom: env(safe-area-inset-bottom, 0px);
  }
}

.scrollBanner.isVisible
{
  opacity:   1;
  
  transform: translateY(0);
}

.scrollTrack
{
  display:   flex;
  
  width:     max-content;
}

.scrollContent
{
  display:     flex;
  
  align-items: center;
  
  white-space: nowrap;
}

.tickerItem
{
  display:        flex;
  
  align-items:    center;
  
  font-size:      11px;
  
  line-height:    1;
  
  letter-spacing: 2px;
  
  text-transform: uppercase;
  
  color:          rgba(255, 255, 255, 0.6);
  
  white-space:    nowrap;
}

.tickerItem::after
{
  content: " | ";
  
  margin:  0 24px;
  
  color:   rgba(255, 255, 255, 0.4);
}

.scrollTrack.isAnimating
{
  animation: scrollLoop 50s linear infinite;
}

@keyframes scrollLoop
{
  from
  {
    transform: translateX(0);
  }

  to
  {
    transform: translateX(-50%);
  }
}


/* ============================================================
   REQUEST MODAL — BACKDROP
============================================================ */

.modalBackdrop
{
  position:         fixed;
  
  inset:            0;
  
  z-index:          300;
  
  display:          flex;
  
  align-items:      center;
  
  justify-content:  center;
  
  padding:          24px;
  
  background:       rgba(0, 0, 0, 0.72);
  
  backdrop-filter:  blur(6px);
  
  -webkit-backdrop-filter: blur(6px);
  
  opacity:          0;
  
  visibility:       hidden;
  
  transition:
    opacity    .35s ease,
    visibility .35s ease;
}

.modalBackdrop.isOpen
{
  opacity:    1;
  
  visibility: visible;
}


/* Modal card — glassmorphism */

.modalCard
{
  position:         relative;
  
  width:            min(100%, 540px);
  
  max-height:       90vh;
  
  overflow-y:       auto;
  
  background:       rgba(12, 12, 14, 0.82);
  
  backdrop-filter:  blur(28px) saturate(160%);
  
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  
  border:           1px solid rgba(255, 255, 255, 0.11);
  
  border-radius:    var(--radiusLg);
  
  padding:          48px 40px 44px 40px;
  
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
      
  transform:        translateY(20px);
  
  transition:       transform .38s var(--ease);
}

.modalBackdrop.isOpen .modalCard
{
  transform: translateY(0);
}

/* Scrollbar inside modal card */

.modalCard::-webkit-scrollbar
{
  width: 5px;
}

.modalCard::-webkit-scrollbar-track
{
  background: transparent;
}

.modalCard::-webkit-scrollbar-thumb
{
  background:    rgba(255, 255, 255, 0.14);
  
  border-radius: 99px;
}

/* Close button */

.modalClose
{
  position:        absolute;
  
  top:             16px;
  
  right:           16px;
  
  width:           24px;
  
  height:          24px;
  
  display:         inline-flex;
  
  align-items:     center;
  
  justify-content: center;
  
  background:      none;
  
  border:          none;
  
  color:           rgba(255, 255, 255, 0.6);
  
  line-height:     1;
  
  transition:
    color      .25s ease;
}

.modalClose:hover
{
  color:      #ffffff;
}

.modalClose svg
{
  width:  22px;
  
  height: 22px;
}

/* Modal header */

.modalHeader
{
  margin-bottom: 32px;
}

.modalEyebrow
{
  margin-bottom:  8px;
  
  color:          rgba(255, 255, 255, 0.4);
  
  letter-spacing: 3px;
  
  text-transform: uppercase;
  
  font-size:      11px;
}

.modalTitle
{
  margin-bottom: 8px;
  
  font-family:   "Joan", serif;
  
  font-size:     clamp(26px, 3.5vw, 36px);
  
  font-weight:   400;
  
  line-height:   1.1;
  
  color:         #ffffff;
}

.modalSubtitle
{
  color:     rgba(255, 255, 255, 0.55);
  
  font-size: 14px;
}


/* ============================================================
   FORM — SHARED STYLES
============================================================ */

.formGroup
{
  margin-bottom: 20px;
}

.formLabel
{
  display:        block;
  
  margin-bottom:  7px;
  
  color:          rgba(255, 255, 255, 0.65);
  
  font-size:      12px;
  
  letter-spacing: 1.5px;
  
  text-transform: uppercase;
}

.formOptional
{
  color:          rgba(255, 255, 255, 0.35);
  
  letter-spacing: 0;
  
  text-transform: none;
  
  font-size:      11px;
}

.formInput
{
  width:            100%;
  
  padding:          13px 16px;
  
  background:       rgba(255, 255, 255, 0.05);
  
  border:           1px solid rgba(255, 255, 255, 0.1);
  
  border-radius:    var(--radiusMd);
  
  color:            #ffffff;
  
  font-family:      'Barlow Condensed', Arial, sans-serif;
  
  font-size:        15px;
  
  outline:          none;
  
  transition:
    border-color .25s ease,
    background   .25s ease;
}

.formInput::placeholder
{
  color: rgba(255, 255, 255, 0.28);
}

.formInput:focus
{
  border-color: rgba(255, 255, 255, 0.35);
  
  background:   rgba(255, 255, 255, 0.08);
}

.formInput:not(:focus):not(:placeholder-shown)
{
  background: #ffffff;
  
  border-color: #ffffff;
  
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
  
  color: #111111;
}

.formInput:not(:focus):not(:placeholder-shown)::placeholder
{
  color: rgba(17, 17, 17, 0.45);
}

/* ============================================================
   FORM — ERROR STATES
============================================================ */

.formError
{
  display: block;

  margin-top: 6px;

  font-size: 11px;

  color: #ff4d4d;

  letter-spacing: 0.5px;

  opacity: 0;

  transform: translateY(4px);

  transition: all .2s ease;
}

.formError.isVisible
{
  opacity: 1;

  transform: translateY(0);
}

.formInput.isError
{
  border-color: #ff4d4d;

  background: rgba(255, 77, 77, 0.06);
}

.formInput.isValid
{
  border-color: #34d362;
}


.formTextarea
{
  resize:     vertical;
  
  min-height: 100px;
}

.formSubmit
{
  position:        relative;
  
  width:           100%;
  
  padding:         15px 24px;
  
  margin-top:      8px;
  
  background:      #050505;
  
  color:           #ffffff;
  
  border:          1px solid #ffffff;
  
  border-radius:   12px;
  
  font-family:     'Barlow Condensed', Arial, sans-serif;
  
  font-size:       13px;
  
  letter-spacing:  2px;
  
  text-transform:  uppercase;
  
  display:         inline-flex;
  
  align-items:     center;
  
  justify-content: center;
  
  gap:             10px;
  
  overflow:        hidden;
  
  transition:
    transform  .3s ease,
    box-shadow .3s ease,
    background .3s ease,
    color      .3s ease;
}

.formSubmit::before
{
  content: "";
  
  position: absolute;
  
  inset: 0;
  
  border-radius: 12px;
  
  padding: 2px;
  
  background: conic-gradient(
    from var(--angle),
    transparent 0deg,
    transparent 320deg,
    #050505 350deg,
    #050505 360deg
  );
  
  animation: borderTrace 4s linear infinite;
  
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  
  -webkit-mask-composite: xor;
  
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  
  mask-composite: exclude;
  
  opacity: 0;
  
  transition: opacity .25s ease;
  
  pointer-events: none;
}

.formSubmit:hover
{
  background:  #ffffff;
  
  color:       #111111;
  
  transform:  translateY(-2px);
  
  box-shadow: 0 12px 32px rgba(255, 255, 255, 0.16);
}

.formSubmit:hover::before
{
  opacity: 1;
}

.formSubmitArrow
{
  position: relative;
  
  z-index: 1;
  
  transition: transform .3s ease;
}

.formSubmit:hover .formSubmitArrow
{
  transform: translateX(4px);
}

.formSubmit:disabled
{
  opacity: 0.55;
  
  cursor:  not-allowed;
}

/* Spinner — shown while submitting */

.formSubmitSpinner
{
  display:          none;
  
  width:            15px;
  
  height:           15px;
  
  border:           2px solid rgba(17, 17, 17, 0.3);
  
  border-top-color: #111111;
  
  border-radius:    50%;
  
  animation:        spin .7s linear infinite;
}

.formSubmit.isLoading .formSubmitLabel
{
  opacity: 0.6;
}

.formSubmitLabel,
.formSubmit.isLoading .formSubmitArrow
{
  position: relative;
  
  z-index: 1;
}

.formSubmit.isLoading .formSubmitArrow
{
  opacity: 0.6;
}

.formSubmit.isLoading .formSubmitSpinner
{
  display: inline-block;
}

/* ============================================================
   FORM SUCCESS MESSAGE
============================================================ */

.formSuccessMessage
{
  opacity: 0;

  transform: translateY(10px);

  margin-top: 12px;
}

.formSuccessMessage.show
{
  opacity: 1;

  transform: translateY(0);
}

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


/* ============================================================
   SUCCESS TOAST NOTIFICATION
============================================================ */

.successToast
{
  position:         fixed;
  
  bottom:           56px;
  
  left:             50%;
  
  transform:        translateX(-50%) translateY(16px);
  
  z-index:          400;
  
  min-width:        300px;
  
  max-width:        min(90vw, 520px);
  
  opacity:          0;
  
  pointer-events:   none;
  
  transition:
    opacity   .4s ease,
    transform .4s var(--ease);
}

.successToast.isVisible
{
  opacity:   1;
  
  transform: translateX(-50%) translateY(0);
}

.successToastInner
{
  display:          flex;
  
  align-items:      center;
  
  gap:              14px;
  
  padding:          16px 22px;
  
  background:       rgba(10, 24, 14, 0.9);
  
  backdrop-filter:  blur(20px);
  
  -webkit-backdrop-filter: blur(20px);
  
  border:           1px solid rgba(52, 211, 98, 0.3);
  
  border-radius:    var(--radiusMd);
  
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(52, 211, 98, 0.06) inset;
}

.successIcon
{
  flex-shrink: 0;
  
  width:       22px;
  
  height:      22px;
  
  color:       #34d362;
}

.successText
{
  color:     rgba(255, 255, 255, 0.88);
  
  font-size: 14px;
  
  line-height: 1.4;
}


/* ============================================================
   NEWSLETTER TAB
============================================================ */

.newsletterTab
{
  position: fixed;

  right: 0;

  bottom: 80px;

  transform: translate(18px, 0);
  
  writing-mode: vertical-rl;
  
  text-orientation: mixed;
  
  background: rgba(255,255,255,0.14);
  
  backdrop-filter: blur(10px);
  
  border-left: 1px solid rgba(255,255,255,0.25);
  
  border-radius: 6px 0 0 6px;
  
  color: white;
  
  padding: 14px 10px;
  
  font-size: 11px;
  
  letter-spacing: 2px;
  
  text-transform: uppercase;
  
  cursor: pointer;
  
  z-index: 999;
  
  opacity: 0;
  
  box-shadow: 0 0 12px rgba(255,255,255,0.15);
  
  transition:
    opacity .6s ease,
    transform .6s ease,
    background .3s ease,
    box-shadow .3s ease;
}

.newsletterTab span
{
  line-height: 1.4;
}

.newsletterTab.isVisible
{
  opacity: 1;

  transform: translate(0, 0);

  animation: tabPulse 6s ease-in-out infinite;
}

.newsletterTab:hover
{
  background: rgba(255,255,255,0.22);
  
  box-shadow: 0 0 12px rgba(255,255,255,0.15);
}

@keyframes tabPulse
{
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* ============================================================
   NEWSLETTER PANEL — OVERLAY FIX
============================================================ */

.newsletterPanel
{
  position: fixed;
  
  inset: 0;
  
  background: rgba(0,0,0,0.4);
  
  backdrop-filter: blur(0);
  
  -webkit-backdrop-filter: blur(0);
  
  opacity: 0;
  
  pointer-events: none;
  
  transition:
    opacity .3s ease,
    backdrop-filter .3s ease,
    -webkit-backdrop-filter .3s ease;
  
    z-index: 999;
}

.newsletterPanel.open
{
  opacity: 1;
  
  pointer-events: auto;
  
  backdrop-filter: blur(8px);
  
  -webkit-backdrop-filter: blur(8px);
}

.newsletterInner
{
  position: absolute;
  
  top: auto;

  right: 0;

  width: 320px;

  height: auto;

  background: #050505;
  
  border-left: 1px solid rgba(255,255,255,0.95);
  
  transform: translateX(100%);
  
  transition: transform .4s cubic-bezier(.65,0,.35,1);
  
  padding: 20px 26px 28px;
  
  display: flex;
  
  flex-direction: column;
  
  gap: 14px;
}

.newsletterPanel.open .newsletterInner
{
  transform: translateX(0);
}

.newsletterInner h3
{
  font-size: 22px;
}

.newsletterInner p
{
  font-size: 14px;
  
  color: rgba(255,255,255,0.5);
  
  line-height: 1.6;
}

/* ============================================================
   PANEL CONTENT REFINEMENT
============================================================ */

.newsletterHeading
{
  font-size: 22px;
  
  font-weight: 500;
  
  padding-right: 28px;
}

.newsletterBody
{
  font-size: 14px;
  
  line-height: 1.6;
  
  color: rgba(255,255,255,0.6);
}

.newsletterTrust
{
  font-size: 11px;
  
  letter-spacing: 1.5px;
  
  text-transform: uppercase;
  
  color: rgba(255,255,255,0.35);
  
  margin-top: 2px;
}

.newsletterCta
{
  --spotlight-x: 50%;
  
  --spotlight-y: 50%;
  
  margin-top: 12px;
  
  position: relative;
  
  display: inline-flex;
  
  align-items: center;
  
  justify-content: center;
  
  gap: 10px;
  
  width: 100%;
  
  padding: 15px 24px;
  
  background: #ffffff;
  
  color: #050505;
  
  border: 1px solid white;
  
  border-radius: 12px;
  
  font-family: 'Barlow Condensed', Arial, sans-serif;
  
  font-size: 13px;
  
  letter-spacing: 2px;
  
  text-transform: uppercase;
  
  cursor: pointer;
  
  overflow: hidden;
  
  isolation: isolate;
  
  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}

.newsletterCta:hover
{
  background: #050505;
  
  color: #050505;
  
  transform: translateY(-2px);
  
  box-shadow: 0 12px 32px rgba(255, 255, 255, 0.16);
}

.ctaArrow
{
  transition: transform .3s ease;
}

.newsletterCta:hover .ctaArrow
{
  transform: translateX(4px);
}

.newsletterCta .ctaText,
.newsletterCta .ctaArrow
{
  position: relative;
  
  z-index: 1;
  
  transition: transform .3s ease;
}

.newsletterCta::before
{
  content: "";
  
  position: absolute;
  
  inset: 0;
  
  background:
    radial-gradient(
      circle 68px at var(--spotlight-x) var(--spotlight-y),
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.94) 35%,
      rgba(255, 255, 255, 0.14) 62%,
      rgba(255, 255, 255, 0) 100%
    );
  
    opacity: 0;
  
    transition: opacity .25s ease;
  
    pointer-events: none;
}

.newsletterCta:hover::before
{
  opacity: 1;
}

/* ============================================================
   NEWSLETTER MODAL
============================================================ */

.newsletterModal
{
  position: fixed;
  
  inset: 0;
  
  background: rgba(0,0,0,0.7);
  
  display: flex;
  
  align-items: center;
  
  justify-content: center;
  
  opacity: 0;
  
  pointer-events: none;
  
  transition: opacity .3s ease;
  
  z-index: 1000;
}

.newsletterModal.open
{
  opacity: 1;
  
  pointer-events: auto;
}

.newsletterModalContent
{
  background: #0a0a0a;
  
  padding: 40px;
  
  width: 90%;
  
  max-width: 400px;
  
  border: 1px solid rgba(255,255,255,0.1);
  
  position: relative;
}

.newsletterClose
{
  position: absolute;
  
  top: 24px;
  
  right: 26px;
  
  background: none;
  
  border: none;
  
  color: white;
  
  font-size: 18px;
  
  line-height: 1;
  
  cursor: pointer;
  
  transition: opacity .25s ease;
}

.newsletterClose:hover
{
  opacity: 0.55;
}

.newsletterForm
{
  display: flex;
  
  flex-direction: column;
  
  gap: 14px;
  
  margin-top: 20px;
}

.newsletterTitle
{
  margin: 0;
  
  font-size: 24px;
  
  line-height: 1.2;
  
  color: #ffffff;
}

.newsletterSubtext
{
  margin: -2px 0 8px;
  
  font-size: 14px;
  
  line-height: 1.6;
  
  color: rgba(255,255,255,0.62);
}

.newsletterForm input
{
  width:            100%;
  
  padding:          13px 16px;
  
  background:       rgba(255, 255, 255, 0.05);
  
  border:           1px solid rgba(255, 255, 255, 0.1);
  
  border-radius:    var(--radiusMd);
  
  color:            #ffffff;
  
  font-family:      'Barlow Condensed', Arial, sans-serif;
  
  font-size:        15px;
  
  outline:          none;
  
  transition:
    border-color .25s ease,
    background   .25s ease;
}

.newsletterForm input::placeholder
{
  color: rgba(255, 255, 255, 0.28);
}

.newsletterForm input:focus
{
  border-color: rgba(255, 255, 255, 0.35);
  
  background:   rgba(255, 255, 255, 0.08);
}

.newsletterForm input:not(:focus):not(:placeholder-shown)
{
  background: #ffffff;
  
  border-color: #ffffff;
  
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
  
  color: #111111;
}

.newsletterForm input:not(:focus):not(:placeholder-shown)::placeholder
{
  color: rgba(17, 17, 17, 0.45);
}


.newsletterSubmit
{
  position: relative;
  
  margin-top: 10px;
  
  width: 100%;
  
  padding: 15px 24px;
  
  border: 1px solid white;
  
  border-radius: 12px;
  
  background: #050505;
  
  color: #ffffff;
  
  font-family: 'Barlow Condensed', Arial, sans-serif;
  
  font-size: 13px;
  
  letter-spacing: 2px;
  
  text-transform: uppercase;
  
  overflow: hidden;
  
  cursor: pointer;
  
  transition:
    background .3s ease,
    color .3s ease,
    box-shadow .3s ease,
    transform .3s ease;
}

.newsletterSubmit:hover
{
  background: #ffffff;
  
  color: #050505;
  
  transform: translateY(-1px);
  
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.14);
}

.newsletterSubmit::before
{
  content: "";
  
  position: absolute;
  
  inset: 0;
  
  border-radius: 12px;
  
  padding: 1px;
  
  background: conic-gradient(
    from var(--angle),
    transparent 0deg,
    transparent 320deg,
    #050505 350deg,
    #050505 360deg
  );
  
  animation: borderTrace 4s linear infinite;
  
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  
  -webkit-mask-composite: xor;

  mask:
  linear-gradient(#000 0 0) content-box,
  linear-gradient(#000 0 0);

  mask-composite: exclude;

  opacity: 0;

  transition: opacity .25s ease;

  pointer-events: none;
}

.newsletterSubmit:hover::before
{
  opacity: 1;
}


/* ============================================================
   RESPONSIVE — 820px
============================================================ */

@media (max-width: 820px)
{
  .siteHeader
  {
    padding: 20px 18px;
  }

  .navLogo img
  {
    height: 64px;
  }

  .heroSection
  {
    padding: 0 18px;
  }

  .nuloLogo
  {
    width: min(82vw, 700px);
  }

  .scrollTrack.isAnimating
  {
    animation-duration: 28s;
  }
}

/* ============================================================
   HERO — MOBILE LAYOUT FIXES
============================================================ */

@media (max-width: 768px)
{
  .heroSection
  {
    height: 100dvh;
  }

  .heroContent
  {
    padding: 80px 20px 80px;

    gap: 10px;
  }

  .logoStage
  {
    width: min(80vw, 420px);
  }

  .heroCtaWrap
  {
    bottom: 52px;
  }

  .newsletterInner
  {
    width: min(300px, 88vw);
  }
}

/* ============================================================
   SEE INSIDE NULO TAB — SLIM MOBILE VERSION
============================================================ */

@media (max-width: 768px)
{
  .newsletterTab
  {
    position: fixed;

    bottom: 112px;

    right: 0;

    transform: translate(0, 0);
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    width: 34px;
    
    padding: 8px 0;
    
    background: rgba(255,255,255,0.08);
    
    border-left: 1px solid rgba(255,255,255,0.18);
    
    border-radius: 8px 0 0 8px;
    
    z-index: 999;
  }

  .newsletterTab span
  {
    writing-mode: vertical-rl;
    
    text-orientation: mixed;
    
    font-size: 8px;
    
    letter-spacing: 1.4px;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    padding-right: 2px;
  }
}

/* ============================================================
   REQUEST FORM — MOBILE FIT (NO SCROLL)
============================================================ */

@media (max-width: 768px)
{
  .modalBackdrop
  {
    position: fixed;
    
    inset: 0;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    padding: 16px;
    
    background: rgba(0,0,0,0.75);
  }

  .modalCard
  {
    width: 100%;
    
    max-width: 420px;
    
    max-height: 92dvh;
    
    display: flex;
    
    flex-direction: column;
    
    padding: 20px 18px;
    
    background: #050505;
    
    border: 1px solid rgba(255,255,255,0.1);
    
    overflow: hidden;
  }

  .requestForm
  {
    display: flex;
    
    flex-direction: column;
    
    gap: 10px;
    
    flex: 1;
    
    justify-content: flex-start;
    
    overflow-y: auto;
    
    padding-right: 4px;
  }

  .requestForm input,
  .requestForm textarea
  {
    padding: 10px 12px;
    
    font-size: 14px;
  }

  .requestForm textarea
  {
    margin-bottom: 6px;
  }

  .formSubmit
  {
    margin-top: 12px;
    
    padding: 12px;
    
    flex-shrink: 0;
  }
}

/* ============================================================
   BOTTOM SCROLL BANNER — MOBILE
============================================================ */

@media (max-width: 768px)
{
  .scrollBanner
  {
    position: fixed;
    
    left: 0;
    
    right: 0;
    
    bottom: env(safe-area-inset-bottom);
    
    height: 32px;
    
    min-height: 32px;
    
    display: flex;
    
    align-items: center;
    
    padding: 0;
    
    overflow: hidden;
    
    background: rgba(5, 5, 5, 0.94);
    
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.28);
    
    z-index: 200;
  }

  .scrollTrack
  {
    display: flex;
    
    align-items: center;
    
    height: 100%;
  }

  .scrollContent
  {
    display: flex;
    
    align-items: center;
    
    height: 100%;
    
    white-space: nowrap;
  }

  .tickerItem
  {
    display: inline-flex;
    
    align-items: center;
  
    font-size: 9px;
    
    letter-spacing: 1.2px;
    
    line-height: 1;
    
    text-transform: uppercase;
    
    white-space: nowrap;
  }

  .tickerSeparator
  {
    display: inline-flex;
    
    align-items: center;
    
    margin: 0 12px;
    
    font-size: 8px;
    
    line-height: 1;
  }
}

@media (max-width: 768px)
{
  .scrollBanner,
  .scrollTrack,
  .scrollContent,
  .tickerItem,
  .tickerSeparator
  {
    line-height: 1 !important;
  }
}

@media (min-width: 821px)
{
  .scrollBanner
  {
    bottom: 12px;
    
    height: 30px;
  }

  .tickerItem
  {
    transform: translateY(3px);
  }
}


/* ============================================================
   RESPONSIVE — 520px
============================================================ */

@media (max-width: 520px)
{
  .heroValueWrap
  {
    width:         min(100%, 620px);
    
    margin-bottom: 16px;
    
    gap:           8px;
  }

  .heroValueTitle
  {
    font-size:   clamp(32px, 7.8vw, 46px);
    
    line-height: 1.1;
  }

  .heroValueText
  {
    max-width:   32ch;

    font-size:   11px;
  }

  .ghostCta
  {
    width:     100%;

    min-width: unset;

    padding:   18px 32px;
  }

  .heroCtaGroup
  {
    gap:           10px;

    margin-top:    12px;

    margin-bottom: 12px;
  }

  .solidCta,
  .ghostCta
  {
    padding:        14px 22px;

    font-size:      11px;

    letter-spacing: 0.14em;
  }

  .nuloLogo
  {
    width: 88vw;
  }

  .modalCard
  {
    padding: 36px 24px 32px 24px;
  }

  .newsletterCard
  {
    padding: 32px 24px;
  }
}