:root{--bg:#030308;--text:#f7f7fb;--muted:#9a9bab;--purple:#6559ff;--purple2:#a36dff;--cyan:#1fd4dd}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;background:var(--bg)}body{min-height:100vh;background:radial-gradient(circle at 50% 35%,rgba(75,47,200,.08),transparent 32%),#030308;color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}.nav{width:calc(100% - 28px);min-height:70px;margin:10px auto 0;padding:0 34px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;position:sticky;top:10px;z-index:1000;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:rgba(4,4,10,.78);backdrop-filter:blur(24px)}.brand{display:flex;align-items:center;gap:11px;width:max-content;font-size:21px;font-weight:780}.mark{width:32px;height:31px;display:flex;align-items:center;gap:2px}.mark i{width:3px;border-radius:99px;background:linear-gradient(var(--cyan),var(--purple2));box-shadow:0 0 12px rgba(87,89,255,.45)}.mark i:nth-child(1),.mark i:nth-child(7){height:8px}.mark i:nth-child(2),.mark i:nth-child(6){height:17px}.mark i:nth-child(3),.mark i:nth-child(5){height:25px}.mark i:nth-child(4){height:31px}.nav nav{display:flex;gap:31px}.nav nav a{color:rgba(255,255,255,.78);font-size:14px}.nav-actions{justify-self:end;display:flex;gap:12px}.btn{min-height:42px;padding:0 18px;border-radius:10px;border:1px solid rgba(255,255,255,.1);display:inline-flex;align-items:center;justify-content:center;gap:12px;font-size:14px;font-weight:650;transition:.2s ease}.btn:hover{transform:translateY(-2px)}.primary{background:linear-gradient(135deg,#5a52f3,#6758ff);border-color:rgba(124,111,255,.7);box-shadow:0 10px 30px rgba(83,64,255,.22)}.ghost,.glass{background:rgba(255,255,255,.025)}.large{min-width:196px;height:49px}.hero{min-height:1000px;position:relative;overflow:hidden;padding:92px 5.5% 55px;display:flex;flex-direction:column;align-items:center}.glow{position:absolute;width:980px;height:720px;top:40px;left:50%;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(76,47,218,.18),rgba(14,12,52,.05) 45%,transparent 72%);filter:blur(8px)}.copy{text-align:center;position:relative;z-index:10}.eyebrow{width:max-content;margin:0 auto 18px;padding:10px 20px;border:1px solid rgba(130,111,255,.2);border-radius:999px;background:rgba(14,12,30,.6);color:#c0b5ff;display:flex;align-items:center;gap:12px;font-size:11px;font-weight:800;letter-spacing:4px}.eyebrow b{width:8px;height:8px;border-radius:50%;background:#826cff;box-shadow:0 0 18px #826cff}.hero h1{max-width:980px;font-size:clamp(68px,7vw,112px);line-height:.88;letter-spacing:-6px;font-weight:780}.hero h1 strong{display:block;margin-top:17px;color:transparent;background:linear-gradient(180deg,#b17bff,#695cff 58%,#504cff);-webkit-background-clip:text;background-clip:text}.copy>p{max-width:590px;margin:25px auto 0;color:var(--muted);font-size:18px;line-height:1.45}.actions{margin-top:27px;display:flex;justify-content:center;gap:16px}.showcase{width:min(1420px,96vw);height:480px;margin-top:10px;position:relative;z-index:8}.screen{position:absolute;overflow:hidden;border-radius:19px;border:1px solid rgba(127,112,255,.42);background:#080a12;box-shadow:0 35px 90px rgba(0,0,0,.68),0 0 45px rgba(91,72,255,.16);transition:.35s ease}.screen img{width:100%;height:100%;display:block;object-fit:cover}.main{width:60%;height:385px;left:20%;bottom:5px;z-index:3;transform:perspective(1400px) rotateX(2deg)}.core{width:20%;aspect-ratio:.78;left:1.5%;bottom:38px;z-index:2;transform:perspective(1200px) rotateY(7deg) rotateZ(-1.4deg)}.verdict{width:20%;aspect-ratio:.72;right:1.5%;bottom:16px;z-index:2;transform:perspective(1200px) rotateY(-7deg) rotateZ(1.2deg)}.wave{position:absolute;width:52vw;height:310px;top:360px;opacity:.75;pointer-events:none;background:repeating-radial-gradient(ellipse at center,rgba(112,82,255,.7) 0 1px,transparent 1px 10px);filter:blur(.25px);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 75%,transparent)}.left{left:-22vw;transform:skewY(-8deg)}.right{right:-22vw;transform:scaleX(-1) skewY(-8deg)}.features{position:relative;z-index:10;width:min(1100px,92vw);min-height:95px;margin-top:-8px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(131,116,255,.2);border-radius:16px;background:rgba(9,10,19,.9);backdrop-filter:blur(24px);overflow:hidden}.feature{display:flex;align-items:center;gap:14px;padding:20px 25px;position:relative}.feature:not(:last-child)::after{content:"";width:1px;height:48px;background:rgba(255,255,255,.08);position:absolute;right:0}.feature b{color:#a48cff;font-size:11px;letter-spacing:.8px}.feature p{margin-top:6px;color:#8e8f9e;font-size:12px;line-height:1.35}.icon{width:34px;flex:0 0 34px;display:grid;place-items:center;color:#7d63ff;font-size:28px}.orb{height:34px;border:2px solid #745dff;border-radius:50%;box-shadow:inset 0 0 14px rgba(111,84,255,.55),0 0 15px rgba(111,84,255,.35)}.trust{position:relative;z-index:10;margin-top:23px;text-align:center}.trust>span{color:#4f5060;font-size:10px;font-weight:700;letter-spacing:2.3px}.trust>div{margin-top:13px;display:flex;justify-content:center;gap:55px;flex-wrap:wrap}.trust b{color:#31313b;font-size:18px}.section{min-height:620px;border-top:1px solid rgba(255,255,255,.05);padding:130px 8%;display:flex;flex-direction:column;justify-content:center}.section>span{color:#766bff;font-size:11px;letter-spacing:2px;font-weight:800}.section h2{margin-top:18px;max-width:920px;font-size:clamp(54px,6vw,88px);line-height:.98;letter-spacing:-4px}@media(max-width:1120px){.nav{grid-template-columns:1fr auto}.nav nav{display:none}.showcase{height:430px}.main{width:68%;left:16%;height:350px}.core,.verdict{width:22%}.features{grid-template-columns:1fr 1fr}.feature:nth-child(2)::after{display:none}}@media(max-width:760px){.nav{width:calc(100% - 18px);min-height:62px;padding:0 15px}.brand{font-size:17px}.ghost{display:none}.hero{min-height:auto;padding:76px 14px 55px}.hero h1{font-size:clamp(54px,15vw,74px);letter-spacing:-4px}.copy>p{font-size:15px}.actions{width:min(360px,100%);flex-direction:column}.large{width:100%}.showcase{height:410px;margin-top:30px}.main{width:96%;height:245px;left:2%;top:74px}.core{width:31%;left:-2%;bottom:6px}.verdict{width:31%;right:-2%;bottom:-10px}.features{margin-top:15px;grid-template-columns:1fr}.feature:not(:last-child)::after{width:calc(100% - 48px);height:1px;right:24px;bottom:0;top:auto}.trust>div{gap:18px 28px}.trust b{font-size:14px}.section{min-height:480px;padding:90px 24px}}


/* =========================================================
   PRODUCT STORY SECTIONS
   These styles only affect the content below the hero.
   ========================================================= */

.product-section {
  min-height: 900px;
  padding-top: 118px;
  padding-bottom: 110px;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
}

.product-section::before {
  content: "";
  position: absolute;
  width: 760px;
  height: 430px;
  left: 50%;
  bottom: 50px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(95, 73, 255, .15), rgba(69, 48, 190, .04) 48%, transparent 72%);
  filter: blur(22px);
  pointer-events: none;
}

.section-copy {
  width: min(1180px, 100%);
  position: relative;
  z-index: 2;
}

.section-copy > span,
.text-section > span {
  color: #766bff;
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 800;
}

.section-copy h2,
.text-section h2 {
  margin-top: 18px;
  max-width: 1020px;
  font-size: clamp(54px, 6vw, 88px);
  line-height: .98;
  letter-spacing: -4px;
}

.section-copy p {
  max-width: 700px;
  margin-top: 24px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}

.section-product {
  width: min(1280px, 100%);
  margin-top: 72px;
  position: relative;
  z-index: 2;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(120, 105, 255, .28);
  background: #080a12;
  box-shadow:
    0 45px 110px rgba(0, 0, 0, .62),
    0 0 75px rgba(91, 72, 255, .10);
  transform: perspective(1800px) rotateX(1.2deg);
  transform-origin: center top;
}

.section-product::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  pointer-events: none;
}

.section-product img {
  width: 100%;
  height: auto;
  display: block;
}

.product-plugin img,
.product-ai img {
  aspect-ratio: 1.62 / 1;
  object-fit: cover;
}

.product-analyzer img,
.product-artist img {
  aspect-ratio: 1.78 / 1;
  object-fit: cover;
}

.product-plugin {
  box-shadow:
    0 45px 110px rgba(0, 0, 0, .62),
    0 0 80px rgba(70, 82, 255, .10);
}

.product-analyzer {
  border-color: rgba(112, 91, 255, .25);
}

.product-artist {
  border-color: rgba(70, 204, 137, .20);
  box-shadow:
    0 45px 110px rgba(0, 0, 0, .62),
    0 0 70px rgba(68, 210, 143, .07);
}

.product-ai {
  border-color: rgba(107, 88, 255, .28);
}

.text-section {
  min-height: 660px;
  justify-content: center;
}

.section-text {
  max-width: 760px;
  margin-top: 28px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}

@media (max-width: 1120px) {
  .product-section {
    min-height: 760px;
    padding-top: 100px;
    padding-bottom: 90px;
  }

  .section-product {
    margin-top: 54px;
    border-radius: 20px;
  }
}

@media (max-width: 760px) {
  .product-section {
    min-height: auto;
    padding: 82px 20px 78px;
  }

  .section-copy h2,
  .text-section h2 {
    letter-spacing: -2.5px;
  }

  .section-copy p,
  .section-text {
    font-size: 15px;
  }

  .section-product {
    width: 100%;
    margin-top: 38px;
    border-radius: 15px;
    transform: none;
  }

  .product-plugin img,
  .product-ai img,
  .product-analyzer img,
  .product-artist img {
    aspect-ratio: auto;
    object-fit: contain;
  }

  .text-section {
    min-height: 500px;
    padding: 90px 24px;
  }
}


/* Pricing + About product images */
.product-pricing img,
.product-about img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.product-pricing {
  border-color: rgba(113, 91, 255, .30);
  box-shadow:
    0 45px 110px rgba(0, 0, 0, .62),
    0 0 80px rgba(91, 72, 255, .10);
}

.product-about {
  border-color: rgba(80, 110, 255, .22);
  box-shadow:
    0 45px 110px rgba(0, 0, 0, .62),
    0 0 80px rgba(48, 118, 255, .08);
}

.brand img{display:block;width:174px;height:auto;object-fit:contain}.brand{overflow:visible}@media(max-width:760px){.brand img{width:145px}}

/* Exact uploaded SoundLens navbar logo */
.brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
}
.brand .navbar-logo-image {
  display: block;
  width: 178px;
  height: auto;
  max-height: 52px;
  object-fit: contain;
  object-position: left center;
}
@media (max-width: 760px) {
  .brand .navbar-logo-image {
    width: 142px;
    max-height: 44px;
  }
}