/* ==========================================================================
   Polar Audio Lab — design tokens
   ========================================================================== */

:root{
  --bg:        #050506;
  --bg-panel:  #0c0c0f;
  --bg-panel-2:#111114;
  --fg:        #f4f4f6;
  --muted:     #8b8f98;
  --muted-2:   #55585f;
  --accent:    #00e5ff;
  --accent-dim:rgba(0,229,255,.14);
  --accent-soft:rgba(0,229,255,.06);
  --border:    rgba(255,255,255,.09);
  --border-2:  rgba(255,255,255,.16);

  --font-display: 'Space Grotesk', sans-serif;
  --font-mono: 'Space Mono', monospace;

  --container: 1180px;
  --gutter: clamp(20px, 5vw, 64px);

  --ease: cubic-bezier(.16,.8,.24,1);

  /* Shared glacier ridge-2 silhouette (used by layer-2, products bottom, footer) */
  --glacier-ridge-height: clamp(58px, 9vw, 86px);
  --glacier-ridge-top: clamp(-84px, -9vw, -56px);
  --glacier-advance-2: 0px;
  --glacier-slide-2: 0px;
  --clip-glacier-layer-2: polygon(
    0% 100%,
    0% calc(55% + var(--glacier-advance-2)),
    calc(7% + var(--glacier-slide-2)) calc(28% + var(--glacier-advance-2) * 1.25),
    calc(15% + var(--glacier-slide-2) * .85) calc(32% + var(--glacier-advance-2) * 1.15),
    calc(19% + var(--glacier-slide-2) * .55) calc(58% + var(--glacier-advance-2) * .65),
    calc(26% + var(--glacier-slide-2) * 1.2) calc(20% + var(--glacier-advance-2) * 1.35),
    calc(34% + var(--glacier-slide-2) * .75) calc(44% + var(--glacier-advance-2) * .9),
    calc(41% + var(--glacier-slide-2) * .45) calc(66% + var(--glacier-advance-2) * .5),
    calc(50% + var(--glacier-slide-2) * 1.1) calc(30% + var(--glacier-advance-2) * 1.2),
    calc(58% + var(--glacier-slide-2) * .7) calc(50% + var(--glacier-advance-2) * .8),
    calc(63% + var(--glacier-slide-2) * .4) calc(72% + var(--glacier-advance-2) * .45),
    calc(71% + var(--glacier-slide-2) * 1.15) calc(27% + var(--glacier-advance-2) * 1.25),
    calc(80% + var(--glacier-slide-2) * .8) calc(52% + var(--glacier-advance-2) * .75),
    calc(88% + var(--glacier-slide-2) * .35) calc(80% + var(--glacier-advance-2) * .4),
    calc(94% + var(--glacier-slide-2) * .6) calc(63% + var(--glacier-advance-2) * .55),
    100% calc(36% + var(--glacier-advance-2) * 1.1),
    100% 100%
  );
}

*,*::before,*::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .footer-fullscreen .footer-bg-sheet{
    transform: none;
  }
}

body{
  margin:0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before{
  content:'';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 18%, rgba(0,229,255,.07), transparent 28%),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: auto, 100% 72px;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; }

.wrap{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before{
  content:'';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px 1px var(--accent);
  flex: none;
}

.label-mono{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ==========================================================================
   Nav
   ========================================================================== */

.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px 0;
  transition: background .3s var(--ease), border-color .3s var(--ease), padding .3s var(--ease);
  border-bottom: 1px solid transparent;
  background-color: transparent;
}
.nav.is-scrolled{

  backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
  padding: 15px 0;
  background-color: rgba(5,16,23,.72);
}
.nav .wrap{
  display:flex;
  align-items:center;
  justify-content: space-between;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .01em;
}
.brand-mark{ width:26px; height:26px; flex:none; }
.brand-name b{ font-weight: 700; }
.brand-name span{ color: var(--muted); font-weight: 400; }

.nav-links{
  display:flex;
  align-items:center;
  gap: 36px;
}
.nav-links a{
  font-size: 14px;
  color: var(--muted);
  position: relative;
  padding: 4px 0;
  transition: color .25s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color: var(--fg); }
.nav-links a::after{
  content:'';
  position:absolute;
  left:0; right:100%; bottom:-2px;
  height:1px;
  background: var(--accent);
  transition: right .3s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{ right:0; }

.nav-cta{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--bg);
  background: var(--accent);
  padding: 9px 18px;
  border-radius: 999px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.nav-cta:hover{ transform: translateY(-1px); box-shadow: 0 0 24px var(--accent-dim); }

.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  width: 34px; height: 34px;
  color: var(--fg);
}

@media (max-width: 780px){
  .nav-links{
    position: fixed;
    top: 64px; left: 0; right: 0;
    background: rgba(5,5,6,.98);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px var(--gutter) 20px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: all .3s var(--ease);
  }
  .nav-links.is-open{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-links a{ padding: 14px 0; width:100%; border-bottom: 1px solid var(--border); font-size: 15px; }
  .nav-cta{ display:none; }
  .nav-toggle{ display:flex; align-items:center; justify-content:center; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
  position: relative;
  min-height: 100vh;
  height: 100svh;
  display:flex;
  align-items:center;
  padding-top: 120px;
  padding-bottom: 80px;
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 76% 44%, rgba(0,229,255,.09), transparent 28%),
    linear-gradient(112deg, #050506 0%, #050506 52%, #07141c 100%);
  isolation: isolate;
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background: linear-gradient(90deg, rgba(5,5,6,.96) 0%, rgba(5,5,6,.76) 42%, transparent 67%);
}
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  opacity:.22;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(90deg, transparent 30%, #000);
}
.hero-ice-field{
  position:absolute;
  z-index:0;
  width: min(55vw, 760px);
  aspect-ratio:1;
  right: clamp(-130px, 2vw, 50px);
  top:50%;
  transform: translate3d(calc(var(--hero-progress, 0) * 16vw), -50%, 0)
    rotate(calc(var(--hero-progress, 0) * 8deg));
  opacity: calc(1 - var(--hero-progress, 0) * .92);
  transition: opacity .1s linear;
}
.hero-visual{
  position: absolute;
  inset:10%;
  border:1px solid rgba(0,229,255,.23);
  border-radius:50%;
  padding:7%;
  background: rgba(5,12,17,.05);
  box-shadow: inset 0 0 80px rgba(0,229,255,.08), 0 0 80px rgba(0,0,0,.5);
  overflow:hidden;
  pointer-events: none;
}
.hero-visual::after{
  content:'';
  position:absolute;
  inset:-30%;
}
.hero-visual img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:50%;
  filter: saturate(.75) contrast(1.12) opacity(25%);
}

.ice-orbit{
  position:absolute;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  animation: orbit-turn 32s linear infinite;
}
.ice-orbit::before{
  content:'';
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  top:11%;
  left:16%;
  background:var(--accent);
  box-shadow:0 0 18px var(--accent);
}
.ice-orbit-one{ inset:2%; }
.ice-orbit-two{ inset:-7%; animation-duration:48s; animation-direction:reverse; }
@keyframes orbit-turn{ to{ transform:rotate(360deg); } }

.hero-content{
  position: relative;
  z-index: 2;
  max-width: 760px;
  transform:translate3d(calc(var(--hero-progress, 0) * -18vw), 0, 0);
  opacity:calc(1 - var(--hero-progress, 0) * 1.15);
  will-change:transform, opacity;
}

.hero-title{
  font-size: clamp(48px, 8vw, 96px);
  line-height: .96;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 20px 0 24px;
  text-wrap:balance;
  text-shadow:0 8px 40px rgba(0,0,0,.48);
}
.hero-title .accent{ color: var(--accent); }

.hero-sub{
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--muted);
  max-width: 480px;
  line-height: 1.6;
  margin: 0 0 36px;
}

.hero-actions{ display:flex; align-items:center; gap: 22px; flex-wrap: wrap; }

.btn{
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .06em;
  padding: 15px 28px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  transition: all .25s var(--ease);
  border: 1px solid var(--border-2);
}
.btn-primary{
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.btn-primary:hover{ box-shadow: 0 0 30px var(--accent-dim); transform: translateY(-2px); }
.btn-ghost{ color: var(--fg); background: transparent; }
.btn-ghost:hover{ border-color: var(--accent); color: var(--accent); }

.hero-scroll{
  position:absolute;
  bottom: 40px; left: var(--gutter);
  display:flex; align-items:center; gap:12px;
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  z-index:3;
}
.hero-scroll .line{
  width:1px;
  height:34px;
  background:linear-gradient(var(--accent), transparent);
  transform-origin:top;
  animation:scroll-pulse 1.8s var(--ease) infinite;
}
@keyframes scroll-pulse{
  0%{ transform:scaleY(.15); opacity:.2; }
  55%{ transform:scaleY(1); opacity:1; }
  100%{ transform:scaleY(1); opacity:0; }
}


/* ==========================================================================
   Section scaffolding
   ========================================================================== */

.section{
  padding: 140px 0;
  position: relative;
  z-index:2;
  border-top:0;
  isolation:isolate;
}
.glacier-section{
  --glacier-fill: #08141b;
  /* Scroll-driven ridge drift (set by JS). Bottoms stay pinned so ice "advances". */
  --glacier-advance: 0px;
  --glacier-advance-2: 0px;
  --glacier-slide: 0px;
  --glacier-slide-2: 0px;
}
.glacier-section::before{
  content:'';
  position:absolute;
  z-index:0;
  left:0;
  right:0;
  top: clamp(-84px, -9vw, -56px);
  height: clamp(58px, 9vw, 86px);
  pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(0,229,255,.2) 0%,
      rgba(0,229,255,.08) 80%,
      transparent 42%),
    var(--glacier-fill);
  clip-path: polygon(
    0% 100%,
    0% calc(58% + var(--glacier-advance)),
    calc(3% + var(--glacier-slide)) calc(42% + var(--glacier-advance) * 1.15),
    calc(6% + var(--glacier-slide) * .6) calc(70% + var(--glacier-advance) * .55),
    calc(9% + var(--glacier-slide) * 1.2) calc(18% + var(--glacier-advance) * 1.35),
    calc(12% + var(--glacier-slide) * .7) calc(54% + var(--glacier-advance) * .75),
    calc(15% + var(--glacier-slide) * 1.25) calc(8% + var(--glacier-advance) * 1.45),
    calc(18% + var(--glacier-slide) * .8) calc(46% + var(--glacier-advance) * .85),
    calc(22% + var(--glacier-slide) * .5) calc(62% + var(--glacier-advance) * .6),
    calc(25% + var(--glacier-slide) * 1.15) calc(12% + var(--glacier-advance) * 1.4),
    calc(29% + var(--glacier-slide) * .75) calc(48% + var(--glacier-advance) * .8),
    calc(32% + var(--glacier-slide) * 1.3) calc(4% + var(--glacier-advance) * 1.5),
    calc(36% + var(--glacier-slide) * .85) calc(40% + var(--glacier-advance) * .95),
    calc(40% + var(--glacier-slide) * .45) calc(66% + var(--glacier-advance) * .55),
    calc(44% + var(--glacier-slide) * 1.1) calc(16% + var(--glacier-advance) * 1.35),
    calc(48% + var(--glacier-slide) * .7) calc(52% + var(--glacier-advance) * .75),
    calc(52% + var(--glacier-slide) * 1.25) calc(6% + var(--glacier-advance) * 1.45),
    calc(56% + var(--glacier-slide) * .8) calc(44% + var(--glacier-advance) * .9),
    calc(60% + var(--glacier-slide) * .4) calc(72% + var(--glacier-advance) * .5),
    calc(64% + var(--glacier-slide) * 1.05) calc(20% + var(--glacier-advance) * 1.3),
    calc(68% + var(--glacier-slide) * .65) calc(50% + var(--glacier-advance) * .8),
    calc(72% + var(--glacier-slide) * 1.2) calc(10% + var(--glacier-advance) * 1.4),
    calc(76% + var(--glacier-slide) * .55) calc(58% + var(--glacier-advance) * .65),
    calc(80% + var(--glacier-slide) * 1) calc(24% + var(--glacier-advance) * 1.25),
    calc(84% + var(--glacier-slide) * .5) calc(64% + var(--glacier-advance) * .55),
    calc(88% + var(--glacier-slide) * 1.15) calc(14% + var(--glacier-advance) * 1.35),
    calc(92% + var(--glacier-slide) * .7) calc(48% + var(--glacier-advance) * .85),
    calc(96% + var(--glacier-slide) * .9) calc(28% + var(--glacier-advance) * 1.2),
    100% calc(56% + var(--glacier-advance) * .7),
    100% 100%
  );
  filter: drop-shadow(0 -6px 18px rgba(0,229,255,.18));
}
.glacier-section::after{
  content:'';
  position:absolute;
  z-index:0;
  left:0;
  right:0;
  top: clamp(-84px, -9vw, -56px);
  height: clamp(58px, 9vw, 86px);
  pointer-events:none;
  background: linear-gradient(180deg,
    rgba(0, 177, 197, 0.65) 0%,
    rgba(0,229,255,0) 80%,
    transparent 34%);
  clip-path: polygon(
    0% calc(58% + var(--glacier-advance)),
    calc(3% + var(--glacier-slide)) calc(42% + var(--glacier-advance) * 1.15),
    calc(6% + var(--glacier-slide) * .6) calc(70% + var(--glacier-advance) * .55),
    calc(9% + var(--glacier-slide) * 1.2) calc(18% + var(--glacier-advance) * 1.35),
    calc(12% + var(--glacier-slide) * .7) calc(54% + var(--glacier-advance) * .75),
    calc(15% + var(--glacier-slide) * 1.25) calc(8% + var(--glacier-advance) * 1.45),
    calc(18% + var(--glacier-slide) * .8) calc(46% + var(--glacier-advance) * .85),
    calc(22% + var(--glacier-slide) * .5) calc(62% + var(--glacier-advance) * .6),
    calc(25% + var(--glacier-slide) * 1.15) calc(12% + var(--glacier-advance) * 1.4),
    calc(29% + var(--glacier-slide) * .75) calc(48% + var(--glacier-advance) * .8),
    calc(32% + var(--glacier-slide) * 1.3) calc(4% + var(--glacier-advance) * 1.5),
    calc(36% + var(--glacier-slide) * .85) calc(40% + var(--glacier-advance) * .95),
    calc(40% + var(--glacier-slide) * .45) calc(66% + var(--glacier-advance) * .55),
    calc(44% + var(--glacier-slide) * 1.1) calc(16% + var(--glacier-advance) * 1.35),
    calc(48% + var(--glacier-slide) * .7) calc(52% + var(--glacier-advance) * .75),
    calc(52% + var(--glacier-slide) * 1.25) calc(6% + var(--glacier-advance) * 1.45),
    calc(56% + var(--glacier-slide) * .8) calc(44% + var(--glacier-advance) * .9),
    calc(60% + var(--glacier-slide) * .4) calc(72% + var(--glacier-advance) * .5),
    calc(64% + var(--glacier-slide) * 1.05) calc(20% + var(--glacier-advance) * 1.3),
    calc(68% + var(--glacier-slide) * .65) calc(50% + var(--glacier-advance) * .8),
    calc(72% + var(--glacier-slide) * 1.2) calc(10% + var(--glacier-advance) * 1.4),
    calc(76% + var(--glacier-slide) * .55) calc(58% + var(--glacier-advance) * .65),
    calc(80% + var(--glacier-slide) * 1) calc(24% + var(--glacier-advance) * 1.25),
    calc(84% + var(--glacier-slide) * .5) calc(64% + var(--glacier-advance) * .55),
    calc(88% + var(--glacier-slide) * 1.15) calc(14% + var(--glacier-advance) * 1.35),
    calc(92% + var(--glacier-slide) * .7) calc(48% + var(--glacier-advance) * .85),
    calc(96% + var(--glacier-slide) * .9) calc(28% + var(--glacier-advance) * 1.2),
    100% calc(56% + var(--glacier-advance) * .7),
    100% calc(62% + var(--glacier-advance) * .7),
    calc(96% + var(--glacier-slide) * .9) calc(34% + var(--glacier-advance) * 1.15),
    calc(92% + var(--glacier-slide) * .7) calc(54% + var(--glacier-advance) * .8),
    calc(88% + var(--glacier-slide) * 1.15) calc(20% + var(--glacier-advance) * 1.3),
    calc(84% + var(--glacier-slide) * .5) calc(70% + var(--glacier-advance) * .5),
    calc(80% + var(--glacier-slide) * 1) calc(30% + var(--glacier-advance) * 1.2),
    calc(76% + var(--glacier-slide) * .55) calc(64% + var(--glacier-advance) * .6),
    calc(72% + var(--glacier-slide) * 1.2) calc(16% + var(--glacier-advance) * 1.35),
    calc(68% + var(--glacier-slide) * .65) calc(56% + var(--glacier-advance) * .75),
    calc(64% + var(--glacier-slide) * 1.05) calc(26% + var(--glacier-advance) * 1.25),
    calc(60% + var(--glacier-slide) * .4) calc(78% + var(--glacier-advance) * .45),
    calc(56% + var(--glacier-slide) * .8) calc(50% + var(--glacier-advance) * .85),
    calc(52% + var(--glacier-slide) * 1.25) calc(12% + var(--glacier-advance) * 1.4),
    calc(48% + var(--glacier-slide) * .7) calc(58% + var(--glacier-advance) * .7),
    calc(44% + var(--glacier-slide) * 1.1) calc(22% + var(--glacier-advance) * 1.3),
    calc(40% + var(--glacier-slide) * .45) calc(72% + var(--glacier-advance) * .5),
    calc(36% + var(--glacier-slide) * .85) calc(46% + var(--glacier-advance) * .9),
    calc(32% + var(--glacier-slide) * 1.3) calc(10% + var(--glacier-advance) * 1.45),
    calc(29% + var(--glacier-slide) * .75) calc(54% + var(--glacier-advance) * .75),
    calc(25% + var(--glacier-slide) * 1.15) calc(18% + var(--glacier-advance) * 1.35),
    calc(22% + var(--glacier-slide) * .5) calc(68% + var(--glacier-advance) * .55),
    calc(18% + var(--glacier-slide) * .8) calc(52% + var(--glacier-advance) * .8),
    calc(15% + var(--glacier-slide) * 1.25) calc(14% + var(--glacier-advance) * 1.4),
    calc(12% + var(--glacier-slide) * .7) calc(60% + var(--glacier-advance) * .7),
    calc(9% + var(--glacier-slide) * 1.2) calc(24% + var(--glacier-advance) * 1.3),
    calc(6% + var(--glacier-slide) * .6) calc(76% + var(--glacier-advance) * .5),
    calc(3% + var(--glacier-slide)) calc(48% + var(--glacier-advance) * 1.1),
    0% calc(64% + var(--glacier-advance) * .65)
  );
  opacity: .85;

}


.glacier-layer-2::before{
  content:'';
  position:absolute;
  z-index:1;
  left:0;
  right:0;
  top: var(--glacier-ridge-top);
  height: var(--glacier-ridge-height);
  pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(0,229,255,.72) 18%,
      rgba(0,229,255,.28) 38%,
      rgba(0,229,255,0) 100%,
      transparent 42%),
    var(--glacier-fill);
  clip-path: polygon(
    0% 100%,
    0% calc(55% + var(--glacier-advance-2)),
    calc(7% + var(--glacier-slide-2)) calc(28% + var(--glacier-advance-2) * 1.25),
    calc(15% + var(--glacier-slide-2) * .85) calc(32% + var(--glacier-advance-2) * 1.15),
    calc(19% + var(--glacier-slide-2) * .55) calc(58% + var(--glacier-advance-2) * .65),
    calc(26% + var(--glacier-slide-2) * 1.2) calc(20% + var(--glacier-advance-2) * 1.35),
    calc(34% + var(--glacier-slide-2) * .75) calc(44% + var(--glacier-advance-2) * .9),
    calc(41% + var(--glacier-slide-2) * .45) calc(66% + var(--glacier-advance-2) * .5),
    calc(50% + var(--glacier-slide-2) * 1.1) calc(30% + var(--glacier-advance-2) * 1.2),
    calc(58% + var(--glacier-slide-2) * .7) calc(50% + var(--glacier-advance-2) * .8),
    calc(63% + var(--glacier-slide-2) * .4) calc(72% + var(--glacier-advance-2) * .45),
    calc(71% + var(--glacier-slide-2) * 1.15) calc(27% + var(--glacier-advance-2) * 1.25),
    calc(80% + var(--glacier-slide-2) * .8) calc(52% + var(--glacier-advance-2) * .75),
    calc(88% + var(--glacier-slide-2) * .35) calc(80% + var(--glacier-advance-2) * .4),
    calc(94% + var(--glacier-slide-2) * .6) calc(63% + var(--glacier-advance-2) * .55),
    100% calc(36% + var(--glacier-advance-2) * 1.1),
    100% 100%
  );
  filter: drop-shadow(0 -6px 18px rgba(0,229,255,.18));
}


.glacier-layer-2::after{
  content:'';
  position:absolute;
  z-index:1;
  left:0;
  right:0;
  top: clamp(-84px, -9vw, -56px);
  height: clamp(58px, 9vw, 86px);
  pointer-events:none;
  background: linear-gradient(180deg,
    rgba(0,229,255,1) 0%,
    rgb(0, 63, 70, 1) 80%,
    transparent 5%);
  clip-path: polygon(
    0% calc(55% + var(--glacier-advance-2)),
    calc(7% + var(--glacier-slide-2)) calc(28% + var(--glacier-advance-2) * 1.25),
    calc(15% + var(--glacier-slide-2) * .85) calc(32% + var(--glacier-advance-2) * 1.15),
    calc(19% + var(--glacier-slide-2) * .55) calc(58% + var(--glacier-advance-2) * .65),
    calc(26% + var(--glacier-slide-2) * 1.2) calc(20% + var(--glacier-advance-2) * 1.35),
    calc(34% + var(--glacier-slide-2) * .75) calc(44% + var(--glacier-advance-2) * .9),
    calc(41% + var(--glacier-slide-2) * .45) calc(66% + var(--glacier-advance-2) * .5),
    calc(50% + var(--glacier-slide-2) * 1.1) calc(30% + var(--glacier-advance-2) * 1.2),
    calc(58% + var(--glacier-slide-2) * .7) calc(50% + var(--glacier-advance-2) * .8),
    calc(63% + var(--glacier-slide-2) * .4) calc(72% + var(--glacier-advance-2) * .45),
    calc(71% + var(--glacier-slide-2) * 1.15) calc(27% + var(--glacier-advance-2) * 1.25),
    calc(80% + var(--glacier-slide-2) * .8) calc(52% + var(--glacier-advance-2) * .75),
    calc(88% + var(--glacier-slide-2) * .35) calc(80% + var(--glacier-advance-2) * .4),
    calc(94% + var(--glacier-slide-2) * .6) calc(63% + var(--glacier-advance-2) * .55),
    100% calc(36% + var(--glacier-advance-2) * 1.1),

    100% calc(26% + var(--glacier-advance-2) * 1.2),
    calc(94% + var(--glacier-slide-2) * .6) calc(53% + var(--glacier-advance-2) * .7),
    calc(88% + var(--glacier-slide-2) * .35) calc(70% + var(--glacier-advance-2) * .5),
    calc(80% + var(--glacier-slide-2) * .8) calc(42% + var(--glacier-advance-2) * .95),
    calc(71% + var(--glacier-slide-2) * 1.15) calc(17% + var(--glacier-advance-2) * 1.35),
    calc(63% + var(--glacier-slide-2) * .4) calc(62% + var(--glacier-advance-2) * .55),
    calc(58% + var(--glacier-slide-2) * .7) calc(40% + var(--glacier-advance-2) * 1),
    calc(50% + var(--glacier-slide-2) * 1.1) calc(20% + var(--glacier-advance-2) * 1.3),
    calc(41% + var(--glacier-slide-2) * .45) calc(56% + var(--glacier-advance-2) * .65),
    calc(34% + var(--glacier-slide-2) * .75) calc(34% + var(--glacier-advance-2) * 1.1),
    calc(26% + var(--glacier-slide-2) * 1.2) calc(10% + var(--glacier-advance-2) * 1.45),
    calc(19% + var(--glacier-slide-2) * .55) calc(48% + var(--glacier-advance-2) * .8),
    calc(15% + var(--glacier-slide-2) * .85) calc(22% + var(--glacier-advance-2) * 1.3),
    calc(7% + var(--glacier-slide-2)) calc(18% + var(--glacier-advance-2) * 1.35),
    0% calc(45% + var(--glacier-advance-2) * .95)
  );
  opacity: 1;

}
.about-section{
  --glacier-fill: #08141b;
  background:#08141b;
  box-shadow:0 -50px 100px rgba(0,0,0,.42);
  z-index:3;
}
.products-section{
  --glacier-fill: #050b0f;
  background:#050b0f;
  z-index:3;
  margin-bottom: 100svh;
  /* Jagged bottom (same silhouette as glacier-layer-2). Top extends above the
     box so the section’s top glacier ridges are not clipped away. */
  clip-path: polygon(
    0 -100px,
    100% -100px,
    100% calc(100% - var(--glacier-ridge-height) * .64 + var(--glacier-advance-2) * 1.1),
    calc(94% + var(--glacier-slide-2) * .6) calc(100% - var(--glacier-ridge-height) * .37 + var(--glacier-advance-2) * .55),
    calc(88% + var(--glacier-slide-2) * .35) calc(100% - var(--glacier-ridge-height) * .20 + var(--glacier-advance-2) * .4),
    calc(80% + var(--glacier-slide-2) * .8) calc(100% - var(--glacier-ridge-height) * .48 + var(--glacier-advance-2) * .75),
    calc(71% + var(--glacier-slide-2) * 1.15) calc(100% - var(--glacier-ridge-height) * .73 + var(--glacier-advance-2) * 1.25),
    calc(63% + var(--glacier-slide-2) * .4) calc(100% - var(--glacier-ridge-height) * .28 + var(--glacier-advance-2) * .45),
    calc(58% + var(--glacier-slide-2) * .7) calc(100% - var(--glacier-ridge-height) * .50 + var(--glacier-advance-2) * .8),
    calc(50% + var(--glacier-slide-2) * 1.1) calc(100% - var(--glacier-ridge-height) * .70 + var(--glacier-advance-2) * 1.2),
    calc(41% + var(--glacier-slide-2) * .45) calc(100% - var(--glacier-ridge-height) * .34 + var(--glacier-advance-2) * .5),
    calc(34% + var(--glacier-slide-2) * .75) calc(100% - var(--glacier-ridge-height) * .56 + var(--glacier-advance-2) * .9),
    calc(26% + var(--glacier-slide-2) * 1.2) calc(100% - var(--glacier-ridge-height) * .80 + var(--glacier-advance-2) * 1.35),
    calc(19% + var(--glacier-slide-2) * .55) calc(100% - var(--glacier-ridge-height) * .42 + var(--glacier-advance-2) * .65),
    calc(15% + var(--glacier-slide-2) * .85) calc(100% - var(--glacier-ridge-height) * .68 + var(--glacier-advance-2) * 1.15),
    calc(7% + var(--glacier-slide-2)) calc(100% - var(--glacier-ridge-height) * .72 + var(--glacier-advance-2) * 1.25),
    0% calc(100% - var(--glacier-ridge-height) * .45 + var(--glacier-advance-2))
  );
}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 40px;
  margin-bottom: 64px;
  flex-wrap: wrap;
}
.section-title{
  font-size: clamp(32px, 4.4vw, 52px);
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 14px 0 0;
}
.section-note{
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
  max-width: 280px;
  line-height: 1.6;
  text-align: right;
}
@media (max-width: 700px){ .section-note{ text-align:left; } .section{ padding: 90px 0; } }

/* ==========================================================================
   About
   ==========================================================================*/

.about-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 80px;
  align-items:center;
}
.about-text p{
  font-size: 18px;
  line-height: 1.75;
  color: var(--muted);
  margin: 0 0 20px;
}
.about-text p strong{ color: var(--fg); font-weight: 600; }

.about-stats{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: 40px;
  background: var(--border);
  border: 1px solid var(--border);
}
.about-stats div{ background: var(--bg); padding: 22px 20px; }
.about-stats .num{ font-size: 30px; font-weight: 700; }
.about-stats .num .accent{ color: var(--accent); }
.about-stats .cap{ margin-top: 6px; }

.about-visual-shell{
  position: relative;
  aspect-ratio: 1;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at center, rgba(0,229,255,.08), transparent 54%),
    repeating-radial-gradient(circle at center, transparent 0 46px, rgba(255,255,255,.045) 47px 48px);
  clip-path:polygon(9% 3%, 92% 0, 100% 17%, 96% 89%, 79% 100%, 5% 94%, 0 18%);
  overflow:hidden;
}
.about-visual{
  width:72%;
  height:72%;
  object-fit:contain;
  border-radius:50%;
  filter:grayscale(.3) contrast(1.1);
  z-index: 1;
}

.sonar-ring{
  position:absolute;
  width:25%;
  aspect-ratio:1;
  border:1px solid var(--accent);
  border-radius:50%;
  opacity:0;
  animation:sonar 3.2s ease-out infinite;
}
.sonar-ring-two{ animation-delay:1.6s; }
@keyframes sonar{
  0%{ transform:scale(.2); opacity:.55; }
  100%{ transform:scale(4); opacity:0; }
}

@media (max-width: 860px){
  .about-grid{ grid-template-columns: 1fr; }
  .about-visual-shell,
  .about-visual-shell[data-reveal],
  .about-visual-shell[data-reveal].is-visible{
    width:min(100%, 380px);
    margin:0 auto;
    order:-1;
    position:sticky;
    top: 88px;
    z-index:0;
    /* Beat [data-reveal].is-visible { opacity:1 } so scroll fade can win */
    opacity: var(--about-visual-opacity, .55);
    filter: none;
    transform: none;
    transition: none;
    will-change: opacity;
  }
  .about-text{
    position:relative;
    z-index:1;
  }
}

/* ==========================================================================
   Products grid
   ========================================================================== */

.products-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  background: transparent;
  border:0;
}
@media (max-width: 780px){ .products-grid{ grid-template-columns: 1fr; } }

.product-card{
  --pointer-x:50%;
  --pointer-y:50%;
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(0,229,255,.11), transparent 30%),
    var(--bg-panel);
  padding: 44px;
  display:flex;
  flex-direction:column;
  gap: 22px;
  position: relative;
  overflow: hidden;
  border:1px solid var(--border);
  clip-path:polygon(0 0, 94% 0, 100% 8%, 100% 100%, 6% 100%, 0 92%);
  transition:transform .5s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.product-card::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background:linear-gradient(115deg, transparent 0 44%, rgba(255,255,255,.12) 45%, transparent 46%);
  transform:translateX(-70%);
  transition:transform .8s var(--ease);
}
.product-card:hover{
  transform:translateY(-7px);
  border-color:rgba(0,229,255,.28);
}
.product-card:hover::before{ transform:translateX(70%); }

.product-card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}
.product-index{ font-family: var(--font-mono); color: var(--muted-2); font-size: 13px; }
.product-tag{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  background: var(--accent-soft);
  padding: 5px 10px;
  border-radius: 999px;
}

.product-visual{
  width: auto;
  max-width: 100%;
  height: 160px;
  object-fit: contain;
  object-position: center;
  align-self: center;
  opacity: .85;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}

.product-card:hover .product-visual{ transform: scale(1.04); opacity: 1; }
.product-visual svg{ width: 100%; height: 100%; }

.product-name-row{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.product-name{ font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.product-price{
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--accent);
  flex: none;
}
.product-desc{ color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 46ch; margin-top: 6px; }

.product-link{
  margin-top: auto;
  display:flex; align-items:center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg);
}
.product-link svg{ width: 14px; height:14px; transition: transform .3s var(--ease); }
.product-card:hover .product-link svg{ transform: translateX(5px); }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer{
  border-top: 1px solid var(--border);
  padding: 0;
  background-color: #08273a;
  position: relative;
  z-index: 2;
}
.footer::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top: var(--glacier-ridge-top);
  height: var(--glacier-ridge-height);
  background:inherit;
  clip-path: var(--clip-glacier-layer-2);
  pointer-events:none;
}
.footer-stage{
  min-height: 0;
  padding: 60px 0 34px;
  position: relative;
}
.footer-dock{
  position: relative;
  z-index: 2;
}
.footer-content{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap: wrap;
  gap: 40px;
}
.footer .wrap{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap: wrap;
  gap: 40px;
}
.footer-col h4{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
}
.footer-links{ display:flex; flex-direction:column; gap: 10px; }
.footer-links a{ color: var(--muted); font-size: 14px; transition: color .2s; }
.footer-links a:hover{ color: var(--accent); }
.footer-bottom{
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
}
.footer-bottom .wrap{ padding:0; }
.footer-bottom-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
}
.footer-legal{ font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); }

.footer-fullscreen{
  --footer-progress: 0;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100svh;
  min-height: 100svh;
  z-index: 0;
  background: #08131b;
  border-top: 0;
  pointer-events: none;
  visibility: hidden;
}
.footer-fullscreen.is-revealing{
  z-index: 2;
  visibility: visible;
  pointer-events: none;
}
.footer-fullscreen::before{
  display:none;
}
.footer-fullscreen .footer-stage{
  position: relative;
  height: 100%;
  min-height: 100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding: 0;
  padding-bottom: clamp(32px, 6vh, 56px);
  overflow: hidden;
  background: transparent;
}
.footer-fullscreen .footer-bg-sheet{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 72% 24%, rgba(0,229,255,.12), transparent 34%),
    linear-gradient(180deg, #08131b 0%, #08273a 65%, #081f2f 100%);
  transform: translate3d(0, calc((1 - var(--footer-progress)) * 8%), 0);
  will-change: transform;
}
.footer-fullscreen .footer-bg-sheet::before{
  /* Products section owns the shared glacier edge on index */
  display:none;
}
.footer-fullscreen .footer-dock{
  pointer-events: auto;
}
.footer-fullscreen .footer-content{
  margin-top:auto;
  align-items:flex-end;
}
.footer-fullscreen .footer-col:first-child{
  max-width: 420px;
}

/* ==========================================================================
   Product detail page
   ========================================================================== */

.pd-hero{
  padding: 150px 0 80px;
  border-top: 1px solid var(--border);
}
.pd-breadcrumb{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  display:flex; align-items:center; gap:8px;
  margin-bottom: 30px;
}
.pd-breadcrumb a:hover{ color: var(--accent); }

.pd-head{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 60px;
  align-items:end;
  margin-bottom: 60px;
}
.pd-title{
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.02;
  margin: 14px 0 20px;
}
.pd-tagline{ color: var(--muted); font-size: 18px; line-height: 1.6; max-width: 46ch; }
.pd-buy-box{
  position:sticky;
  border: 1px solid var(--border-2);
  background: var(--bg-panel);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 24px;
  display:flex;
  flex-direction: column;
  gap: 16px;
}
.pd-buy-price{ display:flex; flex-direction:column; gap: 6px; }
.pd-price-value{ font-size: 26px; font-weight: 700; font-family: var(--font-display); }
.pd-buy-btn{ justify-content:center; width: 100%; }
.pd-buy-note{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted-2);
  text-align: center;
}

.pd-specs{ display:flex; flex-direction:column; gap: 14px; }
.pd-spec-row{
  display:flex; justify-content:space-between; gap: 20px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 13px;
}
.pd-spec-row .k{ color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.pd-spec-row .v{ color: var(--fg); text-align: right; }

.pd-stage{
  aspect-ratio: 16/8;
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 140% at 15% 15%, var(--accent-soft), transparent 55%),
    var(--bg-panel);
  display:flex; align-items:center; justify-content:center;
  position: relative;
  overflow: hidden;
  margin-bottom: 90px;
}
.pd-stage svg{ width: min(70%, 520px); }
.pd-stage .grid-lines{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity:.4;
}

.pd-body{
  display:grid;
  grid-template-columns: .55fr .45fr;
  gap: 80px;
  margin-bottom: 100px;
}
.pd-body p{ color: var(--muted); font-size: 17px; line-height: 1.8; margin: 0 0 22px; }
.pd-body p strong{ color: var(--fg); }
.pd-feature-list{ display:flex; flex-direction:column; gap: 0; }
.pd-feature{ padding: 20px 0; border-bottom: 1px solid var(--border); display:flex; gap: 18px; }
.pd-feature .n{ font-family: var(--font-mono); color: var(--accent); font-size: 13px; padding-top:2px; }
.pd-feature h5{ margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.pd-feature p{ margin:0; font-size: 14px; color: var(--muted); line-height:1.6; }

.pd-gallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-bottom: 100px;
}
.pd-gallery > div{
  background: var(--bg-panel);
  aspect-ratio: 4/3;
  display:flex; align-items:center; justify-content:center;
}
.pd-gallery svg{ width: 46%; opacity:.7; }

.pd-next{
  display:flex; justify-content:space-between; align-items:center;
  padding: 40px 0;
  border-top: 1px solid var(--border);
}
.pd-next a{
  font-family: var(--font-mono); font-size: 13px; letter-spacing:.06em;
  display:flex; align-items:center; gap: 10px; color: var(--muted);
  transition: color .2s;
}
.pd-next a:hover{ color: var(--accent); }

@media (max-width: 860px){
  .pd-head{ grid-template-columns: 1fr; gap: 30px; }
  .pd-body{ grid-template-columns: 1fr; gap: 40px; }
  .pd-gallery{ grid-template-columns: 1fr; }
}

/* reveal-on-scroll */
[data-reveal]{
  opacity: 0;
  transform: translate3d(0,64px,0);
  filter:blur(8px);
  transition: opacity .9s var(--ease), transform 1s var(--ease), filter .9s var(--ease);
  transition-delay:var(--reveal-delay, 0ms);
}
[data-reveal="left"]{ transform:translate3d(-70px,28px,0); }
[data-reveal="right"]{ transform:translate3d(70px,28px,0); }
[data-reveal].is-visible{ opacity:1; transform:translate3d(0,0,0); filter:blur(0); }

/* Center hero motif once the side placement starts colliding with copy */
@media (max-width: 960px){
  .hero-ice-field{
    width: min(70vw, 440px);
    left: 50%;
    right: auto;
    top: 38%;
    transform: translate3d(
        calc(-50% + var(--hero-progress, 0) * 6vw),
        -50%,
        0
      )
      rotate(calc(var(--hero-progress, 0) * 8deg));
    opacity: calc(1 - var(--hero-progress, 0) );
  }
}

@media (max-width: 780px){
  .hero{
    min-height:100svh;
    height:100svh;
    align-items:flex-end;
    padding-bottom:110px;
  }
  /* Keep the scrim on the copy only — don't wash out the centered motif above */
  .hero::before{
    background:linear-gradient(0deg, rgba(5,5,6,.8) 0%, rgba(5,5,6,.72) 2%, transparent 68%);
  }
  .hero-ice-field{
    display: none;
  }
  .hero-title{ font-size:clamp(47px, 15vw, 72px); }
  .hero-sub{ max-width:36ch; font-size:15px; }
  .hero-scroll{ display:none; }

  .glacier-section::before,
  .glacier-section::after{
    top: -48px;
    height: 50px;
  }
  .about-section{ padding-top:100px; }
  .product-card{ padding:30px 26px; }
  .product-visual{ height: 140px; }
  .footer-fullscreen .footer-content{
    align-items:flex-start;
  }
}