/* ================================
   CUESIC — Design tokens
================================= */
:root{
  --brand:#cb6ce6;
  --brand-hi:#e3a8f5;
  --brand-deep:#7343eb;
  --magenta:var(--brand);          /* legacy name, still used inline */
  --bg:#0b0b0f;
  --surface:#131318;
  --card:#1a1a21;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.16);
  --ink:#f4f4f6;
  --muted:#a1a1aa;
  --black:#18181b;

  --r-sm:14px;
  --r-md:22px;
  --r-lg:32px;
  --r-pill:999px;

  --ease-out:cubic-bezier(0,.61,.28,.92);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  --header-h:88px;                 /* space reserved for the floating nav */
  --font:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* The hidden attribute always wins, even over a class that sets display. */
[hidden]{ display:none !important; }

/* ================================
   Base
================================= */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html,body{ height:100% }
body{
  margin:0;
  font-family:var(--font);
  font-feature-settings:"ss01","cv11";
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  padding-top:var(--header-h);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; }
::selection{ background:rgba(203,108,230,.4); color:#fff; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:8px; }

/* Lenis smooth scroll */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

/* Ambient aurora: two slow purple washes fixed behind every page */
body::before,
body::after{
  content:"";
  position:fixed;
  z-index:-1;
  pointer-events:none;
  width:90vmax; height:90vmax;
  border-radius:50%;
  will-change:transform;
}
body::before{
  top:-45vmax; right:-30vmax;
  background:radial-gradient(closest-side, rgba(203,108,230,.20), rgba(203,108,230,.07) 55%, transparent 72%);
  animation:aurora-a 26s ease-in-out infinite alternate;
}
body::after{
  bottom:-50vmax; left:-35vmax;
  background:radial-gradient(closest-side, rgba(115,67,235,.20), rgba(115,67,235,.06) 55%, transparent 72%);
  animation:aurora-b 32s ease-in-out infinite alternate;
}
@keyframes aurora-a{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{ transform:translate3d(-14vmax,10vmax,0) scale(1.18); }
}
@keyframes aurora-b{
  from{ transform:translate3d(0,0,0) scale(1.1); }
  to{ transform:translate3d(16vmax,-8vmax,0) scale(.92); }
}

/* ================================
   Type
================================= */
h1,h2,h3,h4{ line-height:1.08; margin:0 0 12px; letter-spacing:-.03em; font-weight:800; }
h1{ font-size:clamp(2.6rem, 6vw, 4.5rem); letter-spacing:-.04em; line-height:1.02; }
h2{ font-size:clamp(2rem, 4.2vw, 3.25rem); }
h3{ font-size:clamp(1.15rem, 2vw, 1.4rem); letter-spacing:-.02em; line-height:1.2; }
p{ text-wrap:pretty; }
h1,h2,h3{ text-wrap:balance; }
.sub{ color:var(--muted); margin:6px 0 28px; font-size:clamp(1rem, 1.4vw, 1.125rem); max-width:62ch; }
[style*="text-align:center"].sub{ margin-left:auto; margin-right:auto; }
.accent{
  color:var(--brand);
  background:linear-gradient(100deg, var(--brand-hi) 0%, var(--brand) 42%, var(--brand-deep) 110%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.brand-strong{ color:var(--brand); font-weight:700; }

/* Headline lines that rise in turn (built by motion.js) */
.line{ display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; }
.line-in{ display:block; }
html.js .line-in{ transform:translateY(110%); }
html.js .split-in .line-in{
  transform:none;
  transition:transform 1s var(--ease-out) calc(var(--i,0) * 110ms + 80ms);
}

/* ================================
   Floating glass nav
================================= */
.site-header{
  position:fixed;
  top:14px; left:0; right:0;
  z-index:1000;
  padding:0 16px;
  pointer-events:none;
}
.nav{
  pointer-events:auto;
  position:relative;
  max-width:1120px;
  height:60px;
  margin:0 auto;
  padding:0 10px 0 18px;
  display:flex; align-items:center; gap:10px;
  border-radius:var(--r-pill);
  background:rgba(20,20,26,.58);
  border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  backdrop-filter:blur(28px) saturate(180%);
  box-shadow:inset 0 1px rgba(255,255,255,.12), 0 14px 44px rgba(0,0,0,.4);
  transition:max-width .5s var(--ease-out), height .5s var(--ease-out), background-color .35s, box-shadow .35s;
}
html.scrolled .nav{
  max-width:940px;
  height:54px;
  background:rgba(16,16,22,.74);
  box-shadow:inset 0 1px rgba(255,255,255,.1), 0 18px 50px rgba(0,0,0,.55);
}
.nav .brand{ color:var(--ink); text-decoration:none; margin-right:auto; }
.brand-logo{
  height:100%;
  display:flex; align-items:center;
  transition:transform .18s var(--ease-spring);
}
.brand-logo:active{ transform:scale(.95); }
/* The logo file is a 500px square with generous padding, so it is drawn
   larger than the capsule and allowed to overflow it. */
.brand-logo .brand-mark{
  height:118px; width:auto; display:block;
  margin:-30px 0 -30px -6px;
  filter:drop-shadow(0 2px 10px rgba(203,108,230,.3));
}
.nav ul{ display:flex; gap:4px; list-style:none; margin:0; padding:0; }
.nav-menu a{
  display:block;
  padding:9px 16px;
  border-radius:var(--r-pill);
  color:rgba(255,255,255,.72);
  text-decoration:none;
  font-weight:600;
  font-size:.95rem;
  line-height:1.2;
  transition:color .3s, background-color .3s, transform .18s var(--ease-spring);
}
.nav-menu a:hover{ color:#fff; background:rgba(255,255,255,.08); }
.nav-menu a:active{ transform:scale(.94); }
.nav-menu a[style*="--magenta"]{ background:rgba(203,108,230,.14); }
.nav-cta{
  display:inline-flex; align-items:center;
  height:40px; padding:0 18px;
  border-radius:var(--r-pill);
  background:var(--brand); color:#0b0b0d;
  font-weight:700; font-size:.92rem; text-decoration:none; white-space:nowrap;
  box-shadow:0 6px 22px rgba(203,108,230,.35);
  transition:transform .18s var(--ease-spring), background-color .3s, box-shadow .3s;
}
.nav-cta:hover{ background:var(--brand-hi); box-shadow:0 8px 28px rgba(203,108,230,.5); }
.nav-cta:active{ transform:scale(.95); }

.nav-toggle{
  display:none;
  width:40px; height:40px;
  background:none; border:none; cursor:pointer; padding:0;
  border-radius:50%;
  transition:transform .18s var(--ease-spring), background-color .3s;
}
.nav-toggle:active{ transform:scale(.9); }
.hamburger{
  display:block; width:20px; height:2px; margin:0 auto;
  background:var(--ink); position:relative; border-radius:2px;
  transition:background .2s;
}
.hamburger::before,
.hamburger::after{
  content:""; position:absolute; left:0; width:100%; height:2px;
  background:var(--ink); border-radius:2px;
  transition:transform .3s var(--ease-out), top .3s var(--ease-out), bottom .3s var(--ease-out);
}
.hamburger::before{ top:-6px; }
.hamburger::after{ bottom:-6px; }
.nav-toggle.active .hamburger{ background:transparent; }
.nav-toggle.active .hamburger::before{ transform:rotate(45deg); top:0; }
.nav-toggle.active .hamburger::after{ transform:rotate(-45deg); bottom:0; }

@media (max-width: 820px){
  .nav{ padding:0 8px 0 12px; gap:6px; }
  .nav-toggle{ display:block; order:3; }
  .nav-cta{ order:2; height:44px; padding:0 16px; font-size:.88rem; }
  .nav-toggle{ width:44px; height:44px; }
  .brand-logo .brand-mark{ height:104px; margin:-26px 0 -26px -8px; }
  .nav-menu{
    position:absolute;
    top:calc(100% + 10px); left:0; right:0;
    flex-direction:column; gap:2px;
    padding:10px !important;
    border-radius:26px;
    /* Solid: a backdrop-filter nested inside the capsule's own filter
       lets the page show through in Chromium. */
    background:#14141a;
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 24px 60px rgba(0,0,0,.6);
    opacity:0; visibility:hidden;
    transform:translateY(-10px) scale(.97);
    transform-origin:top center;
    transition:opacity .3s var(--ease-out), transform .4s var(--ease-out), visibility 0s .4s;
  }
  .nav-menu.active{
    opacity:1; visibility:visible; transform:none;
    transition:opacity .3s var(--ease-out), transform .45s var(--ease-spring), visibility 0s;
  }
  .nav-menu a{ padding:14px 18px; font-size:1.05rem; }
}

/* ================================
   Sections
================================= */
.section{ padding:clamp(72px, 10vw, 128px) 20px; position:relative; overflow-x:clip; }
.container{ max-width:1160px; margin:0 auto; }

/* ================================
   Buttons, chips
================================= */
.cta, .button, .details-btn, .btn-waitlist, .partnership-cta,
.btn-app-store, .app-store-link{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px;
  border:none; border-radius:var(--r-pill);
  background:var(--brand); color:#0b0b0d;
  font-family:var(--font); font-weight:700; font-size:1rem; line-height:1.2;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  box-shadow:0 10px 30px rgba(203,108,230,.32);
  transition:transform .18s var(--ease-spring), background-color .3s, box-shadow .3s;
}
.cta:hover, .button:hover, .details-btn:hover, .btn-waitlist:hover,
.partnership-cta:hover, .btn-app-store:hover, .app-store-link:hover{
  background:var(--brand-hi);
  box-shadow:0 14px 40px rgba(203,108,230,.48);
  transform:translateY(-2px);
}
.cta:active, .button:active, .details-btn:active, .btn-waitlist:active,
.partnership-cta:active, .btn-app-store:active, .app-store-link:active{
  transform:scale(.96);
}
.btn-app-store{ padding:17px 30px; font-size:1.05rem; }
.btn-app-store svg, .app-store-link svg{ flex-shrink:0; }
.btn-app-store small, .app-store-link small{ display:none; }
.details-btn{ padding:9px 18px; min-height:44px; font-size:.88rem; box-shadow:none; }
.cta-outline{
  background:transparent; color:var(--ink);
  border:1.5px solid rgba(203,108,230,.5); box-shadow:none;
}
.cta-outline:hover{ background:rgba(203,108,230,.08); border-color:var(--brand); box-shadow:none; color:var(--ink); }
.cta-group{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.app-eyebrow, .sub-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  width:fit-content;
  padding:7px 14px;
  border-radius:var(--r-pill);
  font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brand-hi);
  background:rgba(203,108,230,.1);
  border:1px solid rgba(203,108,230,.28);
}
.sub-eyebrow{ margin-bottom:24px; }
.app-eyebrow-dot, .eyebrow-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 0 0 rgba(203,108,230,.6);
  animation:pulse-dot 2s ease-out infinite;
}
@keyframes pulse-dot{
  0%{ box-shadow:0 0 0 0 rgba(203,108,230,.6); }
  70%,100%{ box-shadow:0 0 0 9px rgba(203,108,230,0); }
}

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 15px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  font-size:.86rem; font-weight:600; color:var(--ink);
  white-space:nowrap;
}
.pill svg{ color:var(--brand); flex-shrink:0; }
.feature-pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }

/* ================================
   Cards with a pointer-following glow
================================= */
.card, .org-card, .about-item, .service-card, .why-item,
.contact-card, .contact-card-inner, .partnership-card, .review-card{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)) , var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  transition:border-color .35s, transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
[data-glow]{ overflow:hidden; isolation:isolate; }
[data-glow]::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,0%), rgba(203,108,230,.2), transparent 62%);
  opacity:0;
  transition:opacity .4s;
  pointer-events:none;
}
[data-glow]:hover::after{ opacity:1; }
.card:hover, .org-card:hover, .about-item:hover, .service-card:hover, .why-item:hover,
.review-card:hover{
  border-color:rgba(203,108,230,.45);
  transform:translateY(-4px);
  box-shadow:0 20px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(203,108,230,.12);
}

.org-card-icon, .about-item-icon, .service-card-icon, .why-icon{
  width:46px; height:46px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:14px;
  color:var(--brand-hi);
  background:linear-gradient(140deg, rgba(203,108,230,.22), rgba(115,67,235,.14));
  border:1px solid rgba(203,108,230,.22);
}

/* ================================
   Marquee
================================= */
.marquee{ overflow:hidden; }
.marquee-track{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--gap,14px); }
.marquee.is-ready{
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee.is-ready .marquee-track{
  flex-wrap:nowrap; justify-content:flex-start;
  width:max-content;
  animation:marquee var(--dur,40s) linear infinite;
  will-change:transform;
}
.marquee.is-ready[data-marquee="reverse"] .marquee-track{ animation-direction:reverse; }
.marquee.is-ready:hover .marquee-track,
.marquee.is-paused .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translate3d(calc(-1 * var(--shift, 50%)),0,0); } }

.feature-marquee{
  padding:26px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.015);
}
.feature-marquee .feature-pills{ margin:0; --gap:16px; }
.feature-marquee .pill{
  padding:13px 24px; font-size:1.05rem; font-weight:700; gap:10px;
  background:rgba(255,255,255,.035);
}
.feature-marquee .pill svg{ width:18px; height:18px; }

/* Home: App Store reviews scrolling as compact cards */
.reviews-scroll{ padding:clamp(64px, 8vw, 104px) 0 0; }
.reviews-scroll-head{ text-align:center; display:flex; flex-direction:column; align-items:center; padding:0 20px; }
.reviews-scroll-head h2{ margin:0; font-size:clamp(1.8rem, 3.4vw, 2.6rem); }
.review-marquee{ margin-top:36px; padding:8px 0 12px; --speed:26; }
.review-marquee .marquee-track{ --gap:18px; align-items:stretch; }
.review-mini{
  width:320px; flex-shrink:0;
  padding:24px 24px 22px;
  display:flex; flex-direction:column; gap:10px;
  color:var(--ink); text-decoration:none;
}
.review-mini .review-stars{ font-size:.9rem; }
.review-mini-title{ font-size:1.05rem; font-weight:800; letter-spacing:-.02em; line-height:1.25; }
.review-mini-quote{ flex:1; color:var(--muted); font-size:.93rem; line-height:1.6; }
.review-mini-name{ font-size:.84rem; font-weight:700; color:var(--brand-hi); }
.review-mini-name span{ font-weight:500; color:var(--muted); }
.review-marquee .review-mini:hover{ transform:none; }
.reviews-scroll-more{ margin:18px 0 0; text-align:center; font-size:.95rem; font-weight:700; }
.reviews-scroll-more a{ color:var(--brand-hi); text-decoration:none; }
.reviews-scroll-more a:hover{ color:var(--ink); }
/* Without the animation (reduced motion, no JS) show three cards, wrapped. */
.review-marquee:not(.is-ready) .marquee-track{ padding:0 20px; }
.review-marquee:not(.is-ready) .review-mini:nth-child(n+4){ display:none; }

/* ================================
   Home hero
================================= */
.app-hero{
  min-height:calc(100svh - var(--header-h));
  display:flex; align-items:center; justify-content:center;
  padding:48px 24px 72px;
  overflow:clip;
}
.app-hero-inner{
  max-width:1240px; width:100%;
  display:grid; grid-template-columns:1.12fr .88fr;
  gap:56px; align-items:center;
}
.app-hero-text{ display:flex; flex-direction:column; gap:22px; }
.app-headline{
  font-size:clamp(2.7rem, 5.8vw, 4.6rem);
  font-weight:800; line-height:1.02; letter-spacing:-.045em;
  margin:0; color:var(--ink);
}
.app-tagline{ font-size:clamp(1.15rem, 1.9vw, 1.4rem); font-weight:700; letter-spacing:-.02em; color:var(--ink); margin:0; }
.app-sub{ font-size:clamp(1rem, 1.5vw, 1.15rem); color:var(--muted); margin:0; line-height:1.65; max-width:52ch; }
.app-cta-row{ display:grid; width:fit-content; gap:12px; margin-top:10px; }
.btn-learn-more{ padding:15px 30px; font-size:1.05rem; }

.app-mockups{ display:flex; flex-direction:column; align-items:center; gap:20px; position:relative; }
.app-mockups::before{
  content:"";
  position:absolute; left:50%; top:46%;
  width:560px; height:560px; max-width:120%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(203,108,230,.34), rgba(115,67,235,.16) 55%, transparent 74%);
  animation:glow-breathe 7s ease-in-out infinite;
  pointer-events:none;
}
@keyframes glow-breathe{
  0%,100%{ opacity:.75; transform:translate(-50%,-50%) scale(1); }
  50%{ opacity:1; transform:translate(-50%,-50%) scale(1.1); }
}
.mockup-carousel{
  position:relative; width:100%; height:500px;
  display:flex; align-items:center; justify-content:center;
  animation:float 7s ease-in-out infinite;
}
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-12px); }
}
.mockup-track{
  position:relative; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  touch-action:pan-y;
}
.mockup-slide{
  position:absolute;
  width:232px; aspect-ratio:9 / 19.5;
  border-radius:34px; overflow:hidden; cursor:pointer;
  transition:transform .7s var(--ease-out), opacity .7s var(--ease-out), filter .7s var(--ease-out);
  user-select:none; -webkit-user-select:none;
}
.mockup-slide img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.mockup-slide[data-pos="0"]{ transform:translateX(0) scale(1); opacity:1; z-index:10; filter:none; }
.mockup-carousel{ --x1:184px; --x2:290px; --far:.22; }
.mockup-slide[data-pos="1"]{ transform:translateX(var(--x1)) scale(.8) rotate(4deg); opacity:.6; z-index:5; filter:brightness(.7); }
.mockup-slide[data-pos="-1"]{ transform:translateX(calc(-1 * var(--x1))) scale(.8) rotate(-4deg); opacity:.6; z-index:5; filter:brightness(.7); }
.mockup-slide[data-pos="2"]{ transform:translateX(var(--x2)) scale(.64) rotate(8deg); opacity:var(--far); z-index:1; filter:brightness(.5); }
.mockup-slide[data-pos="-2"]{ transform:translateX(calc(-1 * var(--x2))) scale(.64) rotate(-8deg); opacity:var(--far); z-index:1; filter:brightness(.5); }
.mockup-dots{ display:flex; gap:8px; align-items:center; position:relative; }
.mockup-dot{
  width:8px; height:8px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.22);
  border:none; cursor:pointer; padding:0;
  transition:background .3s, width .4s var(--ease-spring);
}
.mockup-dot.active{ background:var(--brand); width:26px; }

/* ================================
   Listen (Cuesic playlists)
================================= */
.listen{ padding:clamp(88px, 11vw, 150px) 24px; }
.listen-head{ max-width:640px; margin:0 auto 48px; text-align:center; }
.listen-kicker, .partnership-kicker{
  margin:0 0 14px; color:var(--brand-hi);
  font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.listen-head h2{ margin:0 0 16px; }
.listen-head p:not(.listen-kicker){ max-width:520px; margin:0 auto; color:var(--muted); line-height:1.7; font-size:1.05rem; }
.listen-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap:28px; max-width:720px; margin:0 auto;
}
.listen-player{ position:relative; display:flex; flex-direction:column; gap:14px; }
.listen-player::before{
  content:""; position:absolute; inset:-40px -20px; z-index:-1;
  background:radial-gradient(closest-side, rgba(203,108,230,.22), transparent 75%);
  pointer-events:none;
}
.listen-player iframe{
  display:block; width:100%; border:0; border-radius:16px;
  background:var(--card); box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.listen-link{ align-self:center; color:var(--brand-hi); font-size:.95rem; font-weight:700; text-decoration:none; }
.listen-link:hover{ color:var(--ink); }

/* ================================
   Cuesic Family (org tree)
================================= */
.org-tree{ display:flex; flex-direction:column; align-items:center; margin-top:48px; }
.org-root-node{ background:transparent; border:none; padding:0; }
.org-root-logo{ height:72px; display:block; filter:drop-shadow(0 6px 24px rgba(203,108,230,.4)); }
.org-trunk{
  width:2px; height:40px;
  background:linear-gradient(180deg, var(--brand), rgba(203,108,230,.35));
  transform-origin:top; transform:scaleY(var(--p,1));
}
.org-children{ display:flex; gap:24px; position:relative; justify-content:center; }
.org-children::before{
  content:""; position:absolute; top:0;
  left:calc(50%/3 + 8px); right:calc(50%/3 + 8px);
  height:2px; background:rgba(203,108,230,.35);
  transform:scaleX(var(--p,1));
}
.org-child{
  display:flex; flex-direction:column; align-items:center;
  opacity:var(--p,1);
  transform:translate3d(calc((1 - var(--p,1)) * var(--fly-x,0px)), calc((1 - var(--p,1)) * 50px), 0);
}
.org-child:first-child{ --fly-x:-90px; }
.org-child:last-child{ --fly-x:90px; }
.org-child-stem{ width:2px; height:30px; background:rgba(203,108,230,.35); transform-origin:top; transform:scaleY(var(--p,1)); }
.org-card{
  display:flex; flex-direction:column; gap:12px;
  padding:30px 26px;
  text-decoration:none; color:var(--ink);
  max-width:300px; height:100%;
}
.org-card-label{ font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-hi); }
.org-card h3{ margin:0; font-size:1.3rem; }
.org-card p{ margin:0; font-size:.94rem; color:var(--muted); line-height:1.55; }
.org-card-cta{ font-size:.9rem; font-weight:700; color:var(--brand-hi); margin-top:auto; padding-top:6px; transition:transform .4s var(--ease-out); }
.org-card:hover .org-card-cta{ transform:translateX(6px); }

/* ================================
   About, founders
================================= */
.about-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
.about-item{ padding:32px 28px; }
.about-item-icon{ margin-bottom:20px; }
.about-item h3{ margin:0 0 10px; }
.about-item p{ margin:0; color:var(--muted); font-size:.96rem; line-height:1.65; }

.founders-grid{
  display:flex; gap:clamp(48px, 9vw, 112px); justify-content:center; align-items:flex-start;
  margin-top:48px; padding:0 20px;
}
.founder{ display:flex; flex-direction:column; align-items:center; max-width:240px; }
.founder-img{
  width:200px; height:200px; object-fit:cover; border-radius:50%;
  background:#222; margin-bottom:20px;
  box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 0 0 6px rgba(203,108,230,.1), 0 18px 50px rgba(0,0,0,.5);
  transition:box-shadow .5s var(--ease-out), transform .5s var(--ease-spring);
}
.founder:hover .founder-img{
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 0 0 1px rgba(203,108,230,.6), 0 0 0 8px rgba(203,108,230,.18), 0 24px 60px rgba(203,108,230,.25);
}
.founder-name{ font-size:1.2rem; font-weight:700; letter-spacing:-.02em; color:var(--ink); text-align:center; }

/* ================================
   Sub-page heroes (App, Entertainment, AV)
================================= */
.sub-hero{
  min-height:calc(100svh - var(--header-h));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:60px 24px 96px;
  text-align:center;
  max-width:980px; margin:0 auto;
  position:relative;
}
.sub-hero h1, .page-header h1{ margin:0 0 24px; font-size:clamp(2.7rem, 7.4vw, 5.25rem); letter-spacing:-.045em; }
.sub-hero .sub, .page-header .sub{ font-size:clamp(1.05rem, 1.7vw, 1.25rem); max-width:620px; margin:0 auto 22px; }
.page-header .sub{ margin-bottom:0; }
.event-types{ font-size:clamp(.92rem, 1.4vw, 1.02rem); font-weight:700; color:var(--brand-hi); letter-spacing:.02em; margin:0; }
.scroll-hint{
  position:absolute; bottom:30px; left:50%; margin-left:-23px;
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.04);
  color:var(--muted); text-decoration:none;
  transition:color .3s, border-color .3s, background-color .3s, transform .18s var(--ease-spring);
}
.scroll-hint:hover{ color:var(--ink); border-color:var(--brand); background:rgba(203,108,230,.1); }
.scroll-hint:active{ transform:scale(.92); }
.scroll-hint svg{ animation:bounce-down 1.8s ease-in-out infinite; }
@keyframes bounce-down{ 0%,100%{ transform:translateY(-2px); } 50%{ transform:translateY(4px); } }

.page-header{ padding:clamp(72px, 10vw, 128px) 24px 44px; text-align:center; max-width:980px; margin:0 auto; }
.launch-download{
  max-width:720px; margin:0 auto 24px; padding:14px 14px 14px 26px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  border:1px solid rgba(203,108,230,.26); border-radius:var(--r-pill);
  background:rgba(203,108,230,.07);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
.launch-download p{ margin:0; color:var(--ink); font-size:.98rem; font-weight:600; }

/* App feature rows */
.feature-rows{ display:flex; flex-direction:column; gap:clamp(88px, 12vw, 150px); }
.feature-row{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
  max-width:1040px; margin:0 auto; width:100%;
}
.feature-row.reverse{ direction:rtl; --tilt:7deg; }
.feature-row.reverse > *{ direction:ltr; }
.feature-phone{ display:flex; justify-content:center; position:relative; }
.feature-phone::before{
  content:""; position:absolute; left:50%; top:50%;
  width:min(380px, 100%); aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(203,108,230,.26), transparent 72%);
  opacity:var(--p,1);
  pointer-events:none;
}
.feature-phone-img{
  position:relative;
  width:260px; aspect-ratio:9 / 19.5; border-radius:38px; overflow:hidden;
  transform:translate3d(0, calc((1 - var(--p,1)) * 70px), 0) rotate(calc((1 - var(--p,1)) * var(--tilt,-7deg))) scale(calc(.9 + .1 * var(--p,1)));
}
.feature-phone-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.feature-text{ display:flex; flex-direction:column; gap:18px; }
.feature-text h2{ font-size:clamp(2rem, 4.2vw, 3.25rem); margin:0; letter-spacing:-.04em; }
.feature-text p{ color:var(--muted); font-size:1.06rem; line-height:1.7; margin:0; }

.partnership-card{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:center;
  padding:clamp(30px, 5vw, 56px);
  border-color:rgba(203,108,230,.28); border-radius:var(--r-lg);
  background:radial-gradient(circle at 92% 10%, rgba(203,108,230,.24), transparent 42%),
             radial-gradient(circle at 0% 100%, rgba(115,67,235,.18), transparent 46%), var(--card);
}
.partnership-card h2{ margin:0 0 14px; font-size:clamp(1.7rem, 3.4vw, 2.6rem); }
.partnership-card p{ margin:0; color:var(--muted); line-height:1.7; }
.partnership-kicker{ margin-bottom:12px !important; color:var(--brand-hi) !important; }

/* App Store reviews */
.review-card{ margin:0; padding:30px 28px; display:flex; flex-direction:column; gap:14px; }
.review-stars{ color:var(--brand); letter-spacing:.14em; font-size:1rem; line-height:1; }
.sub-eyebrow .review-stars{ font-size:.82rem; letter-spacing:.08em; }

/* AV */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
.service-card{ padding:32px 28px; }
.service-card-icon{ margin-bottom:20px; }
.service-card h3{ margin:0 0 10px; }
.service-card p{ margin:0; color:var(--muted); font-size:.96rem; line-height:1.65; }
.why-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:44px; }
.why-item{ display:flex; gap:20px; align-items:flex-start; padding:28px 26px; }
.why-item h3{ margin:0 0 8px; }
.why-item p{ margin:0; color:var(--muted); font-size:.95rem; line-height:1.6; }

/* ================================
   Events
================================= */
.events-grid{ display:grid; gap:28px; grid-template-columns:1fr; margin-top:40px; }
@media (min-width:900px){ .events-grid{ grid-template-columns:1fr 1fr; } }
.events-col h3{ color:var(--muted); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px; }
.cards{ display:grid; gap:12px; }
.card{
  padding:20px 22px;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 18px; align-items:center;
}
.card h4{ margin:0; font-size:1.12rem; letter-spacing:-.02em; line-height:1.25; grid-column:1; }
.card .meta{ grid-column:1; }
.card > div:last-child{ grid-column:2; grid-row:1 / span 2; }
.meta{ color:var(--muted); font-size:.86rem; line-height:1.5; }
.tag{
  display:inline-block; padding:4px 10px; border-radius:var(--r-pill);
  font-size:11px; font-weight:700; letter-spacing:.3px; color:#0b0b0d; background:var(--brand);
}
#upcoming .card{ border-color:rgba(203,108,230,.34); box-shadow:inset 3px 0 0 var(--brand); }

/* ================================
   Gallery
================================= */
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:18px; margin-top:40px; }
.gallery-item{
  position:relative; overflow:hidden;
  background:var(--card);
  border-radius:var(--r-md);
  border:1px solid var(--line);
}
.gallery-item img{
  width:100%; height:270px; object-fit:cover; display:block;
  transition:transform 1s var(--ease-out), filter .6s;
}
.gallery-item:hover img{ transform:scale(1.07); }
.gallery-item-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:28px 14px 12px;
  font-size:.82rem; font-weight:600; text-align:left; color:var(--ink);
  background:linear-gradient(to top, rgba(0,0,0,.82), transparent);
}
/* Two counter-scrolling rows, built by motion.js from the grid */
.gallery-grid.gallery-rows{ display:flex; flex-direction:column; gap:16px; margin-left:-20px; margin-right:-20px; }
.gallery-rows .marquee-track{ --gap:16px; }
.gallery-rows .gallery-item{ flex:0 0 auto; width:340px; }
.gallery-rows .gallery-item img{ height:240px; }
#gallery{ max-width:none; overflow:clip; }
#gallery > h2, #gallery > .sub{ max-width:1120px; margin-left:auto; margin-right:auto; }

/* ================================
   Contact
================================= */
.contact-card, .contact-card-inner{
  display:grid; grid-template-columns:1fr 1fr; gap:40px;
  padding:clamp(28px, 4vw, 48px);
  border-radius:var(--r-lg);
  margin-top:36px;
}
.contact-card h4, .contact-card-inner h4{
  margin:0 0 12px;
  font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-hi);
}
.email, .email-link{
  color:var(--ink); text-decoration:none;
  font-size:clamp(1.15rem, 2.2vw, 1.6rem); font-weight:700; letter-spacing:-.02em;
  display:inline-block; padding:9px 0;
  overflow-wrap:anywhere;
  background:linear-gradient(var(--brand), var(--brand)) 0 calc(100% - 6px) / 0 2px no-repeat;
  transition:background-size .5s var(--ease-out), color .3s;
}
.email:hover, .email-link:hover{ color:var(--brand-hi); background-size:100% 2px; }
@media (pointer: coarse){
  .nav-menu a{ padding-top:13px; padding-bottom:13px; }
  .contact-social-btn{ min-height:44px; }
  .mockup-dot{ position:relative; }
  .mockup-dot::after{ content:""; position:absolute; inset:-16px -5px; }
}
.contact-socials{ display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.contact-social-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:var(--r-pill);
  border:1px solid var(--line-strong); background:rgba(255,255,255,.04);
  color:var(--ink); text-decoration:none; font-size:.92rem; font-weight:600;
  transition:border-color .3s, background-color .3s, transform .18s var(--ease-spring);
}
.contact-social-btn:hover{ border-color:var(--brand); background:rgba(203,108,230,.12); transform:translateY(-2px); }
.contact-social-btn:active{ transform:scale(.95); }
.contact-social-btn svg{ fill:currentColor; }

/* Socials / post cards (kept for markup that may return) */
.socials{ display:grid; grid-template-columns:repeat(2, minmax(0,200px)); gap:14px; margin:8px 0 40px; }
.social{
  display:flex; align-items:center; gap:12px; padding:15px 20px;
  border-radius:var(--r-sm); text-decoration:none; color:var(--ink);
  background:var(--card); border:1px solid var(--line); font-weight:700; font-size:.95rem;
}
.social svg{ width:20px; height:20px; fill:currentColor; flex-shrink:0; }
.social-posts{ display:grid; grid-template-columns:repeat(3, minmax(0,220px)); gap:16px; margin-top:24px; justify-content:center; }
.post-card{ display:block; position:relative; aspect-ratio:9 / 16; border-radius:var(--r-md); overflow:hidden; background:var(--card); text-decoration:none; }
.post-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:2rem; color:#fff; background:rgba(0,0,0,.25); opacity:0; transition:opacity .18s; }
.post-card:hover .post-play{ opacity:1; }
.post-platform-icon{ position:absolute; bottom:10px; right:10px; background:rgba(0,0,0,.45); border-radius:50%; width:36px; height:36px; display:flex; align-items:center; justify-content:center; }
.post-fallback{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#fff; font-weight:700; font-size:.9rem; }
.post-fallback--instagram{ background:linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); }
.post-fallback--tiktok{ background:#010101; }

/* ================================
   Legal pages
================================= */
main.section{ max-width:780px; padding-top:clamp(48px, 7vw, 88px); }
main.section h1{ font-size:clamp(2.1rem, 5vw, 3.25rem); margin-bottom:10px; }
main.section h2{ font-size:1.3rem; letter-spacing:-.02em; line-height:1.3; margin:2.4em 0 .6em; }
main.section h3{ font-size:1.08rem; margin:1.8em 0 .5em; }
main.section article{ color:#d4d4d8; }
main.section a{ color:var(--brand-hi); text-underline-offset:3px; }
main.section a:hover{ color:#fff; }
main.section li{ margin-bottom:.4em; }

/* ================================
   Footer
================================= */
.site-footer{
  margin-top:40px;
  padding:56px 20px 64px;
  text-align:center; color:var(--muted);
  border-top:1px solid var(--line);
  font-size:.92rem;
}
.site-footer p{ margin:0; }
.site-footer .footer-links{ margin-top:12px; }
.site-footer a{
  color:var(--muted); text-decoration:none; font-weight:600;
  background:linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition:color .3s;
}
.site-footer a:hover{ color:var(--ink); }

/* ================================
   Event modal
================================= */
.modal{ display:none; position:fixed; inset:0; z-index:2000; }
.modal.active{ display:block; }
.modal-overlay{
  position:fixed; inset:0; background:rgba(5,5,8,.72);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  animation:modal-fade .3s var(--ease-out);
}
.modal-content, .modal-card{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:calc(100% - 32px); max-height:calc(100dvh - 48px); overflow-y:auto;
  background:var(--card);
  border:1px solid var(--line-strong); border-radius:var(--r-lg);
  padding:28px;
  box-shadow:0 30px 90px rgba(0,0,0,.7);
  z-index:2001;
  animation:modal-in .5s var(--ease-spring);
}
.modal-content{ max-width:900px; }
.modal-card{ max-width:560px; }
.modal-card h3, .modal-body h3{ margin:0 0 6px; font-size:1.5rem; }
.modal-card p, .modal-body p{ margin:0 0 12px; color:var(--ink); }
.modal-card .meta, .modal-body .meta{ color:var(--muted); }
@keyframes modal-fade{ from{ opacity:0; } }
@keyframes modal-in{ from{ opacity:0; transform:translate(-50%,-46%) scale(.94); } }
.modal-close{
  position:absolute; right:16px; top:16px; z-index:2;
  min-width:36px; height:36px; padding:0 12px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.94); color:#0b0b0d;
  border:none; border-radius:var(--r-pill);
  font-family:var(--font); font-size:.88rem; font-weight:700; line-height:1;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.3);
  transition:transform .18s var(--ease-spring);
}
.modal-close:active{ transform:scale(.9); }
.modal-body{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.modal-body img{ width:100%; height:auto; border-radius:var(--r-sm); }
.modal-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; width:100%; }
.modal-flyer{ display:block; max-width:520px; width:100%; }
.modal-flyer img{ display:block; width:100%; height:auto; border-radius:var(--r-sm); }
.modal-info{ display:flex; flex-direction:column; gap:12px; justify-content:flex-start; }
@media (max-width:900px){ .modal-grid{ grid-template-columns:1fr; } .modal-flyer{ max-width:100%; } }
@media (max-width:600px){
  .modal-content, .modal-card{ padding:20px; border-radius:var(--r-md); }
  .modal-close{ position:sticky; top:0; float:right; margin:0 0 -36px 8px; }
}

/* ================================
   Reveal on scroll
   Hidden start states apply only once the page's script is known to be
   running (html.js), so content is never lost if it is not.
================================= */
html.js .fade-up,
html.js [data-reveal]{ opacity:0; transform:translate3d(0,34px,0); }
html.js [data-reveal="scale"]{ transform:scale(.94); }
html.js .fade-up.revealed,
html.js [data-reveal].revealed{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease-out) calc(var(--i,0) * 70ms), transform .9s var(--ease-out) calc(var(--i,0) * 70ms);
}

/* ================================
   Responsive
================================= */
@media (max-width: 1240px) and (min-width: 981px){
  .app-hero-inner{ gap:32px; }
  .mockup-carousel{ --x1:150px; --x2:232px; height:460px; }
  .mockup-slide{ width:208px; border-radius:31px; }
}
@media (max-width: 980px){
  .app-hero{ padding:28px 24px 56px; min-height:auto; }
  .app-hero-inner{ grid-template-columns:1fr; gap:40px; text-align:center; }
  .app-hero-text{ align-items:center; }
  .app-cta-row{ margin-inline:auto; }
  .app-mockups{ order:-1; }
  .mockup-carousel{ height:400px; }
  .mockup-carousel{ --x1:146px; --x2:250px; --far:.14; }
  .mockup-slide{ width:176px; border-radius:28px; }
}
@media (max-width: 860px){
  .org-children{ flex-direction:column; align-items:center; gap:0; }
  .org-children::before{ display:none; }
  .org-child{ --fly-x:0px !important; width:100%; }
  .org-card{ max-width:360px; width:100%; }
  .about-grid, .services-grid, .why-grid{ grid-template-columns:1fr; }
  .feature-row{ grid-template-columns:1fr; gap:36px; text-align:center; }
  .feature-row.reverse{ direction:ltr; }
  .feature-phone{ order:-1; }
  .feature-text{ align-items:center; }
  .feature-pills{ justify-content:center; }
  .contact-card, .contact-card-inner{ grid-template-columns:1fr; gap:28px; }
  .partnership-card{ grid-template-columns:1fr; }
  .founders-grid{ flex-direction:column; align-items:center; }
  .founder-img{ width:170px; height:170px; }
}
@media (max-width: 540px){
  .app-hero{ padding:20px 0 48px; }
  .app-hero-text{ padding:0 20px; min-width:0; }
  .app-headline{ font-size:clamp(2rem, 10.6vw, 2.9rem); }
  .sub-hero h1, .page-header h1{ font-size:clamp(2rem, 10.6vw, 2.9rem); }
  h2, .feature-text h2{ font-size:clamp(1.7rem, 8.4vw, 2.3rem); }
  .btn-app-store, .app-store-link, .partnership-cta{ white-space:normal; text-align:center; }
  .review-card{ padding:26px 22px; }
  .section{ padding-left:18px; padding-right:18px; }
  .org-card{ max-width:none; }
  .nav{ padding-left:8px; }
  .site-header{ padding:0 10px; }
  .app-cta-row{ width:100%; }
  .btn-app-store{ width:100%; }
  .mockup-carousel{ height:360px; overflow:hidden; }
  .mockup-carousel{ --x1:126px; --far:0; }
  .mockup-slide{ width:158px; }
  .mockup-slide[data-pos="2"], .mockup-slide[data-pos="-2"]{ pointer-events:none; }
  .listen{ padding:80px 20px; }
  .feature-phone-img{ width:210px; border-radius:32px; }
  .launch-download{ margin-left:20px; margin-right:20px; padding:20px; flex-direction:column; align-items:stretch; gap:14px; text-align:center; border-radius:var(--r-md); }
  .partnership-cta{ width:100%; overflow-wrap:anywhere; }
  .card{ grid-template-columns:1fr; }
  .card > div:last-child{ grid-column:1; grid-row:auto; margin-top:8px; }
  .gallery-grid.gallery-rows{ margin-left:-18px; margin-right:-18px; }
  .gallery-rows .gallery-item{ width:260px; }
  .gallery-rows .gallery-item img{ height:190px; }
  .gallery-item img{ height:220px; }
  .feature-marquee .pill{ padding:11px 18px; font-size:.95rem; }
  .review-mini{ width:276px; padding:22px 20px 20px; }
}

/* ================================
   Reduced motion
================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
  }
  html.js .fade-up, html.js [data-reveal], html.js .line-in{ opacity:1; transform:none; }
  .org-child, .feature-phone-img, .org-trunk, .org-child-stem, .org-children::before{ --p:1; }
}