/* ===== Urge Surf — shared site styles (home / features / why) ===== */
*{margin:0;padding:0;box-sizing:border-box;}
:root{--accent:#5A8CF0;--teal:#2BD6C0;--ink:#EAF1FB;--dim:#a6b6d2;}
html,body{background:#050a14;}
.page{width:100%;font-family:-apple-system,'Helvetica Neue',Arial,sans-serif;color:var(--ink);}
.serif{font-family:Georgia,'Times New Roman',serif;font-weight:400;}
.phone{border-radius:46px;padding:9px;background:linear-gradient(160deg,#2a3550,#0a1020);
  box-shadow:0 44px 100px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05),0 0 80px rgba(90,140,240,.26);}
.phone img{display:block;width:100%;border-radius:38px;}
.eyebrow{font-size:14px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;}

/* ===== NAV ===== */
.nav{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:30px 56px;}
.brand{display:flex;align-items:center;gap:12px;font-size:21px;font-weight:600;text-decoration:none;color:var(--ink);}
.brand img{width:34px;height:34px;filter:drop-shadow(0 0 14px rgba(90,140,240,.5));}
.links{display:flex;align-items:center;gap:34px;font-size:17px;color:var(--dim);}
.links a{text-decoration:none;color:var(--dim);cursor:pointer;transition:color .15s;}
.links a:hover{color:var(--ink);}
.links a.active{color:var(--ink);}
.links .navcta{color:var(--ink);font-weight:600;border:1px solid rgba(130,175,255,.4);
  background:rgba(90,140,240,.12);padding:11px 22px;border-radius:999px;
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);}

/* ===== BUTTONS — subtle no-glow glass (used everywhere) ===== */
.fill,.ghost{display:inline-block;text-decoration:none;font-size:18px;font-weight:600;border-radius:999px;cursor:pointer;
  color:var(--ink);border:1px solid rgba(130,175,255,.4);background:rgba(90,140,240,.12);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);transition:background .15s, transform .07s;}
.fill{padding:17px 32px;} .ghost{padding:17px 28px;}
.fill:hover,.ghost:hover{background:rgba(110,160,245,.2);} .fill:active,.ghost:active{transform:scale(.99);}

/* ===== HERO (home, immersive sea) ===== */
.hero{position:relative;overflow:hidden;}
.hero-inner{position:relative;z-index:3;}
.hero .sea{position:absolute;inset:0;background:url('sea_hero.jpg') center 30%/cover no-repeat;}
.hero .scrim{position:absolute;inset:0;background:
  linear-gradient(90deg, rgba(5,8,15,.46) 0%, rgba(5,8,15,.34) 40%, rgba(5,8,15,.20) 72%, rgba(5,8,15,.12) 100%),
  linear-gradient(180deg, rgba(5,8,15,.34) 0%, rgba(5,8,15,0) 24%, rgba(5,8,15,0) 70%, rgba(5,10,20,1) 100%);}
.hwrap{max-width:1240px;margin:0 auto;padding:24px 56px 96px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px;min-height:680px;}
.hwrap h1{font-size:86px;line-height:1.0;letter-spacing:-.01em;margin-top:18px;text-shadow:0 4px 50px rgba(0,0,0,.5);}
.lead{margin-top:24px;max-width:520px;font-size:22px;line-height:1.5;color:#c4d4ee;}
.lead-mob{display:none;} /* short mobile-only subhead; shown at <=560px */
.btns{margin-top:34px;display:flex;align-items:center;gap:16px;}
.tagline{margin-top:24px;font-size:16px;color:#92a6c6;}
.hphone{display:flex;justify-content:center;}
.hphone .phone{width:316px;transform:rotate(1.5deg);}

/* ===== SUB-PAGE HEADER (features / why) ===== */
.phead{position:relative;overflow:hidden;}
.phead .sea{position:absolute;inset:0;background:url('sea_hero.jpg') center 24%/cover no-repeat;}
.phead .scrim{position:absolute;inset:0;background:
  linear-gradient(180deg, rgba(5,8,15,.5) 0%, rgba(5,8,15,.34) 30%, rgba(5,8,15,.55) 74%, #050a14 100%);}
.phead-inner{position:relative;z-index:3;}
.phtext{max-width:920px;margin:0 auto;padding:20px 56px 96px;text-align:center;}
.phtext .eyebrow{color:#7fa6ff;}
.phead h1{font-size:62px;line-height:1.06;letter-spacing:-.01em;margin-top:16px;text-shadow:0 4px 50px rgba(0,0,0,.5);}
.phead .sub{margin:22px auto 0;max-width:660px;font-size:21px;line-height:1.5;color:#c4d4ee;}

/* ===== MIDDLE BANDS (each section on its own ocean backdrop) ===== */
.deep{background:#050a14;}
.band{position:relative;overflow:hidden;background:#050a14;}
.band .bg{position:absolute;inset:0;background-size:cover;background-position:center;}
.band .scrim2{position:absolute;inset:0;}
.band::after{content:'';position:absolute;left:0;right:0;top:0;height:150px;background:linear-gradient(180deg,#050a14,transparent);z-index:1;pointer-events:none;}
.band .foot{position:absolute;left:0;right:0;bottom:0;height:150px;background:linear-gradient(0deg,#050a14,transparent);z-index:1;pointer-events:none;}
.band1 .bg{background-image:url('bg_feat1.jpg');}
.band2 .bg{background-image:url('bg_feat2.jpg');}
.band3 .bg{background-image:url('bg_feat3.jpg');}
.bandp .bg{background-image:url('bg_pillars.jpg');background-position:center 72%;}
/* directional darkening: heavy over the copy, open over the phone */
.band1 .scrim2,.band3 .scrim2{background:linear-gradient(90deg,rgba(5,10,20,.92) 0%,rgba(5,10,20,.60) 32%,rgba(5,10,20,.18) 60%,rgba(5,10,20,0) 100%);}
.band2 .scrim2{background:linear-gradient(270deg,rgba(5,10,20,.92) 0%,rgba(5,10,20,.60) 32%,rgba(5,10,20,.18) 60%,rgba(5,10,20,0) 100%);}
.bandp .scrim2{background:linear-gradient(180deg,rgba(5,10,20,.58),rgba(5,10,20,.36) 42%,rgba(5,10,20,.54));}

.feat{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:120px 56px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px;}
.feat .copy h2{font-size:46px;line-height:1.12;margin-top:14px;}
.feat .copy p{margin-top:18px;font-size:21px;line-height:1.55;color:var(--dim);max-width:480px;}
.feat .copy .mini{margin-top:18px;display:flex;flex-direction:column;gap:10px;}
.feat .copy .mini li{list-style:none;display:flex;gap:12px;font-size:16px;color:#c4d4ee;}
.feat .copy .mini li::before{content:'';flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-top:9px;opacity:.85;}
.feat .shot{position:relative;display:flex;justify-content:center;align-items:center;}
.feat .shot::before{content:'';position:absolute;left:50%;top:50%;width:560px;height:600px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(90,140,240,.18),transparent 70%);filter:blur(8px);z-index:0;}
.feat .shot .phone{position:relative;z-index:1;width:300px;}
.feat .shot.duo .phone{width:224px;}
.feat .shot.duo .p-back{transform:rotate(-5deg);margin-right:-44px;z-index:1;filter:brightness(.9) saturate(.96);}
.feat .shot.duo .p-front{transform:rotate(4deg) translateY(30px);z-index:2;}

/* ===== SECTION TITLE (centered) ===== */
.sectionTitle{max-width:1180px;margin:0 auto;padding:96px 56px 0;text-align:center;}
.sectionTitle .k{font-size:14px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);}
.sectionTitle h2{font-size:42px;margin-top:12px;}
.sectionTitle p{margin:16px auto 0;max-width:620px;font-size:18px;line-height:1.55;color:var(--dim);}

/* ===== PILLARS / FEATURE GRID / SCIENCE CARDS ===== */
.pillars{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:60px 56px 110px;text-align:center;}
.pillars .k{font-size:14px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);}
.pgrid{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.pcard{border-radius:26px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);padding:34px;text-align:left;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.pcard h3{font-size:27px;}
.pcard p{margin-top:10px;font-size:17px;line-height:1.5;color:var(--dim);}

.gridwrap{max-width:1180px;margin:0 auto;padding:48px 56px 110px;}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.fcard{border-radius:22px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);padding:28px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.fcard .ic{width:32px;height:4px;border-radius:2px;margin-bottom:18px;background:var(--accent);opacity:.85;}
.fcard h3{font-size:20px;}
.fcard p{margin-top:8px;font-size:15px;line-height:1.5;color:var(--dim);}

.scigrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.sci{border-radius:22px;padding:30px;
  background:linear-gradient(157deg, rgba(72,114,194,.26), rgba(42,76,150,.20) 55%, rgba(28,54,114,.24));
  border:1px solid rgba(150,186,240,.28);
  box-shadow:0 24px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25);}
.sci .stat{font-family:-apple-system,'Helvetica Neue',Arial,sans-serif;font-weight:650;font-size:38px;color:var(--ink);line-height:1;letter-spacing:-.015em;}
.sci p{margin-top:12px;font-size:16px;line-height:1.5;color:var(--dim);}
.sci .src{margin-top:16px;font-size:12px;letter-spacing:.03em;color:#7e8ba6;}

/* ===== COMPARISON (why page) ===== */
.vswrap{max-width:1040px;margin:0 auto;padding:40px 56px 110px;}
.vsgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.vscol{border-radius:24px;padding:34px 32px;border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.vscol.them{background:rgba(255,255,255,.02);}
.vscol.us{background:rgba(90,140,240,.1);border-color:rgba(130,175,255,.35);}
.vscol h3{font-size:14px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:22px;}
.vscol.us h3{color:#9cc0ff;}
.vscol ul{list-style:none;display:flex;flex-direction:column;gap:16px;}
.vscol li{display:flex;gap:12px;font-size:17px;line-height:1.45;color:#c4d4ee;}
.vscol li .m{flex:0 0 auto;}
.vscol.us li .m{color:var(--teal);}
.vscol.them li .m{color:#7e8ba6;}

/* ===== CTA finale (immersive sea bookend) ===== */
.cta{position:relative;height:560px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.cta .sea{position:absolute;inset:0;background:url('sea_hero_BACKUP.jpg') center 60%/cover no-repeat;}
.cta .scrim{position:absolute;inset:0;background:linear-gradient(180deg,#050a14 0%,rgba(5,10,20,.55) 30%,rgba(5,10,20,.55) 70%,#050a14 100%);}
.cta .in{position:relative;z-index:3;}
.cta h2{font-size:62px;}
.cta .sub{margin-top:22px;font-size:16px;color:#9fb1cf;}

/* ===== FOOTER ===== */
.footer{border-top:1px solid rgba(255,255,255,.08);padding:34px 56px;}
.fin{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;font-size:15px;color:#7e8ba6;}
.fin a{color:#7e8ba6;text-decoration:none;}
.fin .fl{display:flex;gap:28px;}

/* ===== WAITLIST POPUP (shared) ===== */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px;
  background:rgba(3,6,12,.66);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.modal.show{display:flex;animation:modalIn .26s ease both;}
@keyframes modalIn{from{opacity:0;}to{opacity:1;}}
.modal.show .modalCard{animation:cardIn .32s cubic-bezier(.22,.61,.36,1) both;}
@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:none;}}
.modalCard{width:100%;max-width:430px;border-radius:26px;padding:36px 32px;text-align:center;color:var(--ink);
  background:linear-gradient(157deg, rgba(40,66,126,.58), rgba(13,28,64,.74));
  border:1px solid rgba(150,186,240,.32);
  box-shadow:0 50px 110px rgba(0,0,0,.66), 0 0 70px rgba(90,140,240,.14), inset 0 1px 0 rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(26px) saturate(1.25);backdrop-filter:blur(26px) saturate(1.25);}
.meyebrow{font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#2BD6C0;}
.modalCard h3{font-size:28px;margin-top:9px;font-weight:400;}
.msub{margin-top:12px;color:#cfdcf2;font-size:15px;line-height:1.5;}
#wlForm{margin-top:22px;display:flex;flex-direction:column;gap:12px;}
#wlEmail{width:100%;padding:16px 18px;border-radius:14px;font-size:16px;color:var(--ink);
  background:rgba(6,12,28,.6);border:1px solid rgba(150,186,240,.32);outline:none;}
#wlEmail::placeholder{color:#8fa4c6;}
#wlEmail:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(90,140,240,.25);}
.mbtn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;color:var(--ink);font-size:16px;font-weight:700;
  padding:16px;border-radius:999px;cursor:pointer;text-decoration:none;border:1px solid rgba(130,175,255,.4);
  background:rgba(90,140,240,.12);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);}
.mbtn.sec{background:transparent;box-shadow:none;border-color:rgba(160,196,250,.3);font-weight:600;}
/* contact popup: a GPT ocean background behind the frosted glass + scrim for legibility */
#contactModal .modalCard{
  background:
    linear-gradient(165deg, rgba(8,16,36,.62), rgba(6,12,26,.80)),
    url('why1.jpg') center/cover no-repeat;
  border-color:rgba(170,202,255,.42);
  box-shadow:0 50px 110px rgba(0,0,0,.7), 0 0 80px rgba(90,140,240,.18), inset 0 1px 0 rgba(255,255,255,.22);}
/* waitlist popup: its own generated ocean (liquid water) behind the glass */
#modal .modalCard{
  background:
    linear-gradient(165deg, rgba(8,16,36,.60), rgba(6,12,26,.80)),
    url('wl_bg.jpg') center/cover no-repeat;
  border-color:rgba(170,202,255,.42);
  box-shadow:0 50px 110px rgba(0,0,0,.7), 0 0 80px rgba(90,140,240,.18), inset 0 1px 0 rgba(255,255,255,.22);}
.closelink{display:inline-block;margin-top:4px;cursor:pointer;color:#8fa4c6;text-decoration:none;}
.closelink:hover{color:var(--ink);}
.mfine{margin-top:12px;font-size:12px;color:#8fa4c6;}
#wlThanks{text-align:center;}
.thanksIcon{width:58px;height:58px;margin:0 auto 8px;border-radius:50%;display:grid;place-items:center;font-size:27px;color:#fff;
  background:linear-gradient(180deg, rgba(43,214,192,.42), rgba(43,214,192,.18));
  border:1px solid rgba(120,240,220,.6);box-shadow:0 0 32px rgba(43,214,192,.5), inset 0 1px 0 rgba(255,255,255,.4);}

/* ===== WHY PAGE — its own distinct background set (not the feature oceans) ===== */
.whypage .phead .sea{background-image:url('why_hero.jpg');}
.whypage .cta .sea{background-image:url('why_hero.jpg');}
.whypage .band1 .bg{background-image:url('why1.jpg');}
.whypage .band2 .bg{background-image:url('why2.jpg');}
.whypage .band3 .bg{background-image:url('why3.jpg');}

/* ===== HOME ELEVATIONS (hero focal phone + science strip) ===== */
.hphone{position:relative;}
.hphone::before{content:'';position:absolute;left:50%;top:50%;width:560px;height:600px;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(90,140,240,.20),rgba(43,214,192,.06),transparent 72%);filter:blur(8px);}
.hphone .phone{width:352px;position:relative;}
.tagline b{color:#dceaff;font-weight:600;}
.sciHome{position:relative;padding:64px 0 36px;}
.sciHome::before{content:'';position:absolute;left:50%;top:46%;width:980px;height:560px;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(90,140,240,.085),rgba(43,214,192,.025),transparent 72%);pointer-events:none;}
.sciHome .sectionTitle{position:relative;padding-top:0;}
.sciHome .gridwrap{position:relative;padding-top:38px;padding-bottom:0;}
.sciHome .sci{display:flex;flex-direction:column;padding:32px;}
.sciHome .sci .stat{font-size:54px;}
.sciHome .sci .src{margin-top:auto;padding-top:16px;}

/* ===== MOTION (calm, edge-of-perception; the layer award sites have) ===== */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth;}
  /* hero entrance on load */
  @keyframes heroIn{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
  .hwrap>div:first-child{animation:heroIn .9s cubic-bezier(.22,.61,.36,1) both;}
  .hphone{animation:heroIn 1s .12s cubic-bezier(.22,.61,.36,1) both;}
  .phtext{animation:heroIn .9s cubic-bezier(.22,.61,.36,1) both;}
  /* slow ambient drift on the immersive seas (hero + finale only) */
  @keyframes seaDrift{from{transform:scale(1);}to{transform:scale(1.045);}}
  .hero .sea,.cta .sea,.phead .sea{animation:seaDrift 30s ease-in-out infinite alternate;}
  /* scroll reveals (rv class is added by JS so no-JS still shows everything) */
  .rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);}
  .rv.in-view{opacity:1;transform:none;}
  /* soft hover response on glass */
  .sci,.pcard,.vscol{transition:transform .5s cubic-bezier(.22,.61,.36,1),border-color .5s ease;}
  .sci:hover,.pcard:hover{transform:translateY(-5px);border-color:rgba(170,205,255,.42);}
  .fill,.ghost,.navcta,.mbtn{transition:background .15s,transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease;}
  .fill:hover,.ghost:hover{transform:translateY(-2px);}
}

/* ===== RESPONSIVE ===== */
@media (max-width:980px){
  .hwrap{grid-template-columns:1fr;gap:30px;min-height:0;padding-bottom:70px;}
  .hwrap h1{font-size:56px;} .hphone{justify-content:flex-start;}
  .feat{grid-template-columns:1fr;gap:40px;padding:90px 40px;}
  .feat .copy h2{font-size:40px;}
  .feat .copy{order:2 !important;} .feat .shot{order:1 !important;}
  /* STACKED layout: the desktop side-darkened scrims no longer sit under the copy,
     so text lands over the BRIGHT half of the photo and washes out. Darken uniformly
     (heavier toward the bottom, where the copy is) so every band stays legible. */
  .band1 .scrim2,.band2 .scrim2,.band3 .scrim2{background:linear-gradient(180deg,rgba(5,9,17,.50) 0%,rgba(5,9,17,.72) 44%,rgba(5,9,17,.88) 100%);}
  .pgrid,.fgrid,.scigrid,.vsgrid{grid-template-columns:1fr;}
  .nav{padding:22px 24px;} .links{gap:16px;font-size:15px;}
  .phead h1{font-size:42px;} .cta h2{font-size:44px;}
  .sectionTitle{padding:70px 32px 0;} .gridwrap,.sciwrap,.vswrap{padding:40px 32px 80px;}
  .sciHome{padding:56px 0 24px;}
  .sciHome .gridwrap{padding-top:28px;padding-bottom:0;}
  .sciHome .sci{padding:24px;}
  .sciHome .sci .stat{font-size:40px;}
  .sciHome .sectionTitle h2{font-size:30px;}
}
@media (max-width:560px){
  .links a:not(.navcta){display:none;}
  .navcta{padding:9px 16px;font-size:14px;}
  .phead h1{font-size:32px;line-height:1.12;} .cta h2{font-size:32px;}
  /* ===== MOBILE HERO — rebuilt from a study of Reflect / Jomo / Endel / Opal / Superhuman ===== */
  .hwrap{padding:24px 22px 20px;gap:0;}
  .hwrap .eyebrow{font-size:12px;letter-spacing:.18em;margin-bottom:0;}
  .hwrap h1{font-size:36px;line-height:1.12;letter-spacing:-.015em;margin-top:12px;}
  .lead-desk{display:none;}
  .lead-mob{display:block;margin-top:13px;max-width:330px;font-size:16px;line-height:1.45;color:#c4d4ee;}
  .tagline{display:none;}
  /* hero buttons removed on mobile — the nav "Join the waitlist" pill carries the CTA (Reflect / one-sec / Linear pattern) */
  .btns{display:none;}
  /* phone: tilted, emerging from a glow, clipped at the bottom edge (the Reflect move) */
  .hphone{position:relative;margin-top:18px;}
  .hphone::before{content:'';position:absolute;left:50%;bottom:-24px;width:300px;height:280px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(43,214,192,.22),rgba(90,140,240,.16),transparent 72%);filter:blur(6px);z-index:0;}
  .hphone .phone{width:300px;transform:rotate(-3deg);position:relative;z-index:1;}
  /* feature sections: contain headlines + shrink phones so nothing clips off-screen */
  .feat{padding:64px 22px;gap:32px;}
  .feat .copy h2{font-size:32px;line-height:1.16;}
  .feat .copy p{font-size:18px;}
  .feat .shot .phone{width:248px;}
  .feat .shot.duo .phone{width:150px;}
  .feat .shot.duo .p-back{margin-right:-30px;}
  .feat .shot.duo .p-front{transform:rotate(4deg) translateY(18px);}
}