/* ============================================================
   bliss — design tokens (from the Halo Logo Kit)
   ============================================================ */
:root{
  --sattva:#30009B;
  --midnight:#150E2E;
  --midnight-2:#1C1338;
  --ink:#0B0718;
  --violet:#7C3AED;
  --orchid:#C084FC;
  --peach:#FDBA74;
  --gold:#FFD9A8;
  --cloud:#F4F1FF;

  --text:#F4F1FF;
  --text-soft:rgba(244,241,255,.72);
  --text-mute:rgba(244,241,255,.52);
  --line:rgba(192,132,252,.16);
  --line-strong:rgba(192,132,252,.32);

  --halo:linear-gradient(45deg,var(--violet) 0%,var(--orchid) 55%,var(--peach) 100%);
  --cta:linear-gradient(100deg,#6D28D9 0%,#8B5CF6 24%,#C084FC 48%,#E9A07E 76%,#FB923C 100%);
  --halo-soft:linear-gradient(135deg,rgba(124,58,237,.22),rgba(192,132,252,.14) 55%,rgba(253,186,116,.14));
  --glass:rgba(244,241,255,.045);
  --glass-2:rgba(244,241,255,.07);

  --r-sm:14px; --r:20px; --r-lg:28px; --r-xl:40px;
  --shadow:0 30px 80px -30px rgba(5,2,16,.9);
  --shadow-glow:0 0 60px -12px rgba(124,58,237,.55);

  --maxw:1200px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --nav-h:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px);-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--midnight);
  color:var(--text);
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:300;
  font-size:clamp(16px,.4vw + 15px,17.5px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:300;line-height:1.08;letter-spacing:-.02em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:rgba(192,132,252,.35);color:#fff}
:focus-visible{outline:2px solid var(--orchid);outline-offset:3px;border-radius:6px}

/* ---- layout ---- */
.wrap{width:min(100% - 44px,var(--maxw));margin-inline:auto}
.section{position:relative;padding:clamp(58px,6.4vw,104px) 0}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.72rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--orchid);margin-bottom:22px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--halo)}
h2.h{font-size:clamp(2.1rem,5.2vw,3.7rem);letter-spacing:-.035em}
h3.h{font-size:clamp(1.5rem,3vw,2.1rem)}
.lead{color:var(--text-soft);font-size:clamp(1.02rem,1.3vw,1.18rem);max-width:62ch}
.grad{
  background:var(--halo);-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* animated gradient on the hero's second line */
.grad.flow{
  background:linear-gradient(100deg,#7C3AED,#C084FC 22%,#FDBA74 42%,#FB923C 55%,#C084FC 74%,#7C3AED 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gradFlow 9s linear infinite;
  line-height:120px;
}
@keyframes gradFlow{from{background-position:0% 50%}to{background-position:280% 50%}}
@media (prefers-reduced-motion:reduce){.grad.flow{animation:none;background-position:22% 50%}}

.serif{font-family:'Fraunces',Georgia,serif;font-weight:300;font-style:normal}

/* ---- ambient background ---- */
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora span{
  position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;
  will-change:transform;
}
.aurora .a1{width:60vw;height:60vw;left:-18vw;top:-22vw;background:radial-gradient(circle,rgba(124,58,237,.55),transparent 68%);animation:drift1 26s var(--ease-soft) infinite alternate}
.aurora .a2{width:52vw;height:52vw;right:-16vw;top:8vh;background:radial-gradient(circle,rgba(192,132,252,.34),transparent 68%);animation:drift2 32s var(--ease-soft) infinite alternate}
.aurora .a3{width:44vw;height:44vw;left:24vw;top:52vh;background:radial-gradient(circle,rgba(253,186,116,.20),transparent 66%);animation:drift3 38s var(--ease-soft) infinite alternate}
.aurora .a4{width:50vw;height:50vw;right:2vw;bottom:-14vw;background:radial-gradient(circle,rgba(48,0,155,.6),transparent 70%);animation:drift1 30s var(--ease-soft) infinite alternate-reverse}
@keyframes drift1{to{transform:translate3d(9vw,7vh,0) scale(1.16)}}
@keyframes drift2{to{transform:translate3d(-11vw,10vh,0) scale(1.1)}}
@keyframes drift3{to{transform:translate3d(7vw,-9vh,0) scale(1.2)}}
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.34;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.page{position:relative;z-index:2}

/* ---- buttons ---- */
.btn{
  --bg:var(--halo);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:999px;font-weight:500;font-size:.97rem;letter-spacing:.01em;
  color:#fff;background-image:var(--cta);background-size:100% 100%;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),filter .45s var(--ease);
  box-shadow:0 12px 34px -12px rgba(168,85,247,.65);
  overflow:hidden;isolation:isolate;white-space:nowrap;
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
  transform:translateX(-130%);transition:transform .9s var(--ease);
}
.btn:hover{transform:translateY(-3px);box-shadow:0 20px 50px -14px rgba(251,146,60,.75);filter:saturate(1.18) brightness(1.09)}
.btn:hover::after{transform:translateX(130%)}
.btn.ghost{
  color:var(--text);background:var(--glass);border:1px solid var(--line-strong);box-shadow:none;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.btn.ghost:hover{background:var(--glass-2);border-color:var(--orchid);box-shadow:0 0 30px -8px rgba(192,132,252,.5)}
.btn.sm{padding:11px 22px;font-size:.88rem}

/* store buttons */
.stores{display:flex;flex-wrap:wrap;gap:14px}
.store{
  display:inline-flex;align-items:center;gap:13px;padding:12px 24px 12px 20px;border-radius:16px;
  background:rgba(244,241,255,.055);border:1px solid var(--line-strong);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .45s var(--ease),border-color .35s,background .35s,box-shadow .45s;
}
.store:hover{transform:translateY(-4px);border-color:rgba(253,186,116,.6);background:rgba(244,241,255,.09);box-shadow:0 18px 40px -18px rgba(192,132,252,.7)}
.store svg{width:26px;height:26px;flex:none;fill:var(--cloud)}
.store i{font-style:normal;display:block;font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-mute);line-height:1.5}
.store b{display:block;font-weight:500;font-size:1.02rem;letter-spacing:-.01em;line-height:1.15}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .5s var(--ease-soft),backdrop-filter .5s,border-color .5s,height .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.stuck{
  height:64px;
  background:rgba(15,9,32,.72);
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  border-bottom-color:var(--line);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand .mark{width:34px;height:34px;transition:transform .7s var(--ease)}
.brand:hover .mark{transform:rotate(90deg) scale(1.06)}
.brand .name{
  font-size:1.42rem;font-weight:600;letter-spacing:.07em;line-height:1;
  background:linear-gradient(100deg,#F4F1FF,#E6DCFF 55%,#FFD9A8);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand .tag{
  display:block;font-size:.53rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-mute);font-weight:400;margin-top:3px;
}
.navlinks{display:flex;align-items:center;gap:4px}
.navlinks a{
  position:relative;padding:9px 15px;border-radius:999px;font-size:.92rem;color:var(--text-soft);
  transition:color .3s,background .3s;
}
.navlinks a::after{
  content:"";position:absolute;left:15px;right:15px;bottom:4px;height:1px;
  background:var(--halo);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.navlinks a:hover{color:var(--text)}
.navlinks a:hover::after,.navlinks a[aria-current="true"]::after{transform:scaleX(1)}
.navlinks a[aria-current="true"]{color:var(--text)}
.nav-actions{display:flex;align-items:center;gap:12px}
.burger{display:none;flex-direction:column;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-strong);align-items:center;justify-content:center;background:var(--glass)}
.burger span{display:block;width:18px;height:1.5px;background:var(--cloud);border-radius:2px;transition:transform .4s var(--ease),opacity .3s}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobilemenu{
  position:fixed;inset:0;z-index:99;display:grid;place-content:center;gap:8px;text-align:center;
  background:rgba(11,7,24,.94);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
}
.mobilemenu.open{opacity:1;visibility:visible;}
.mobilemenu a{font-size:1.35rem;font-weight:400;padding:8px;letter-spacing:-.02em;color:var(--text-soft);transition:color .3s;}
.mobilemenu a:hover{color:var(--text)}
.mobilemenu .btn{margin-top:22px;justify-self:center;display:flex;width:calc(100vw - 64px);max-width:380px}
.scrollbar{position:fixed;top:0;left:0;height:2px;z-index:101;background:var(--halo);width:0;transition:width .1s linear}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding-top:calc(var(--nav-h) + clamp(48px,7vw,90px));padding-bottom:clamp(70px,9vw,120px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,5vw,72px);align-items:center}
.pill{
  display:inline-flex;align-items:center;gap:10px;padding:7px 8px 7px 7px;border-radius:999px;
  background:var(--glass);border:1px solid var(--line-strong);font-size:.79rem;color:var(--text-soft);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);margin-bottom:26px;
}
.pill b{
  display:inline-block;padding:3px 11px;border-radius:999px;background:var(--cta);
  color:#fff;font-weight:600;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
}
.pill em{font-style:normal;padding-right:10px}
h1.hero-h{
  font-size:clamp(2.6rem,7.2vw,5.1rem);font-weight:200;letter-spacing:-.045em;line-height:1.02;
}
h1.hero-h .line{display:block;overflow:hidden}
h1.hero-h .line>span{display:block;transform:translateY(105%);animation:riseIn 1.05s var(--ease) forwards}
h1.hero-h .line:nth-child(1)>span{animation-delay:.12s}
h1.hero-h .line:nth-child(2)>span{animation-delay:.24s}
h1.hero-h .line:nth-child(3)>span{animation-delay:.36s}
@keyframes riseIn{to{transform:translateY(0)}}
.hero p.lead{margin-top:26px;font-size:clamp(1.04rem,1.5vw,1.22rem);max-width:52ch}
.hero .stores{margin-top:36px}
.hero-trust{display:flex;align-items:center;gap:18px;margin-top:34px;flex-wrap:wrap}
.stars{display:flex;gap:3px}
.stars svg{width:16px;height:16px;fill:var(--gold)}
.hero-trust small{color:var(--text-mute);font-size:.85rem}
.faces{display:flex}
.faces i{
  width:32px;height:32px;border-radius:50%;border:2px solid var(--midnight);margin-left:-11px;
  background:var(--halo);display:block;
}
.faces i:first-child{margin-left:0}
.faces i:nth-child(2){background:linear-gradient(45deg,#30009B,#C084FC)}
.faces i:nth-child(3){background:linear-gradient(45deg,#C084FC,#FDBA74)}
.faces i:nth-child(4){background:linear-gradient(45deg,#FDBA74,#FFD9A8)}

/* halo stage */
.stage{position:relative;display:grid;place-items:center;aspect-ratio:1;min-height:340px}
.halo-svg{width:min(100%,470px);height:auto;overflow:visible}
.halo-ring{
  stroke-dasharray:327;stroke-dashoffset:327;
  animation:draw 2.1s var(--ease) .35s forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
.halo-spark{opacity:0;transform-box:fill-box;transform-origin:center;animation:spark 1s var(--ease) 2.15s forwards}
@keyframes spark{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.55)}100%{opacity:1;transform:scale(1)}}
.halo-orbit{animation:spin 34s linear infinite;transform-origin:72px 72px}
@keyframes spin{to{transform:rotate(360deg)}}
.breathe{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.breathe i{
  position:absolute;border-radius:50%;border:1px solid rgba(192,132,252,.2);
  width:64%;height:64%;animation:pulse 6s var(--ease-soft) infinite;
}
.breathe i:nth-child(2){animation-delay:2s}
.breathe i:nth-child(3){animation-delay:4s}
@keyframes pulse{0%{transform:scale(.86);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.stage .glowblob{
  position:absolute;width:78%;height:78%;border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.5),rgba(192,132,252,.16) 45%,transparent 70%);
  filter:blur(40px);animation:breath 8s var(--ease-soft) infinite alternate;
}
@keyframes breath{to{transform:scale(1.18);opacity:.75}}
.orbit-dot{
  position:absolute;width:100%;height:100%;animation:spin 26s linear infinite;
}
.orbit-dot::before{
  content:"";position:absolute;top:6%;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 22px 5px rgba(255,217,168,.65);
}
.orbit-dot.b{animation-duration:40s;animation-direction:reverse;width:76%;height:76%;top:12%;left:12%}
.orbit-dot.b::before{width:6px;height:6px;background:var(--orchid);box-shadow:0 0 18px 4px rgba(192,132,252,.6)}

/* ============================================================
   MARQUEE / PRESS
   ============================================================ */
.press{padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(11,7,24,.35)}
.press-label{text-align:center;font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--text-mute);margin-bottom:22px}
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:0;width:max-content;animation:slide 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee-track span{
  display:flex;align-items:center;padding:0 clamp(28px,4vw,58px);white-space:nowrap;
}
.marquee-track img{height:clamp(28px,3.4vw,40px);width:auto;opacity:.44;filter:brightness(0) invert(1);transition:opacity .4s}
.marquee-track span:hover img{opacity:.9}

/* ============================================================
   FEATURE CARDS
   ============================================================ */
.sec-head{max-width:820px;margin-bottom:clamp(36px,4.4vw,58px)}
.sec-head.tight{margin-bottom:clamp(28px,3.4vw,44px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.note{color:var(--text-mute);font-size:.85rem}
.sec-head p.lead{margin-top:20px}
.sec-head.center p.lead{margin-inline:auto}
.sec-head.center .note{margin-inline:auto}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
  position:relative;padding:34px 30px 36px;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(165deg,rgba(244,241,255,.065),rgba(244,241,255,.018));
  border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .5s var(--ease),border-color .45s,box-shadow .5s var(--ease);
  transform-style:preserve-3d;
}
.card::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(192,132,252,.16),transparent 65%);
}
.card::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--halo);opacity:0;transition:opacity .5s;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow),0 0 50px -20px rgba(192,132,252,.55)}
.card:hover::before,.card:hover::after{opacity:1}
.card .ico{
  width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin-bottom:24px;
  background:linear-gradient(150deg,rgba(124,58,237,.35),rgba(253,186,116,.18));
  border:1px solid var(--line-strong);
  transition:transform .55s var(--ease);
}
.card:hover .ico{transform:translateY(-3px) rotate(-6deg) scale(1.06)}
.card .ico svg{width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:1.22rem;font-weight:500;letter-spacing:-.015em;margin-bottom:12px;line-height:1.25}
.card p{color:var(--text-soft);font-size:.955rem;line-height:1.68}
.card .num{
  position:absolute;top:24px;right:28px;font-size:.7rem;letter-spacing:.16em;color:var(--text-mute);
  font-variant-numeric:tabular-nums;
}

/* ============================================================
   INTERACTIVE SHOWCASE
   ============================================================ */
.showcase{position:relative;overflow:hidden}
.showcase-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(34px,5vw,80px);align-items:center}
.tabs{display:flex;flex-direction:column;gap:10px}
.tab{
  position:relative;text-align:left;padding:22px 26px;border-radius:var(--r);
  border:1px solid transparent;background:transparent;
  transition:background .45s var(--ease),border-color .45s,transform .45s var(--ease);
}
.tab:hover{background:rgba(244,241,255,.035)}
.tab[aria-selected="true"]{
  background:linear-gradient(120deg,rgba(124,58,237,.22),rgba(192,132,252,.07));
  border-color:var(--line-strong);
}
.tab::before{
  content:"";position:absolute;left:0;top:22%;bottom:22%;width:2px;border-radius:2px;
  background:var(--halo);transform:scaleY(0);transform-origin:center;transition:transform .5s var(--ease);
}
.tab[aria-selected="true"]::before{transform:scaleY(1)}
.tab h4{font-size:1.1rem;font-weight:500;letter-spacing:-.01em;display:flex;align-items:center;gap:12px}
.tab h4 svg{width:19px;height:19px;stroke:var(--orchid);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tab p{
  color:var(--text-mute);font-size:.92rem;margin-top:0;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .55s var(--ease),opacity .4s,margin-top .5s var(--ease);
}
.tab[aria-selected="true"] p{max-height:130px;opacity:1;margin-top:10px}
.tab[aria-selected="true"] h4 svg{stroke:var(--gold)}

/* phone */
.phone-wrap{
  position:relative;display:grid;place-items:center;
  /* Makes .phone-wrap its own stacking context, so its z-indexed children (.phone-halo:0,
     .phone-stage:2, .float:3) are only ever compared against each other. */
  isolation:isolate;
}
.phone-stage{
  position:relative;width:100%;z-index:2;display:grid;place-items:center;
  /* .phone is no longer a direct grid item of .phone-wrap now that .phone-stage sits between them,
     so .phone-stage has to re-apply the centering itself or .phone left-aligns inside this full-width
     wrapper instead of sitting centered like before. */
  /* perspective lives here, on a wrapper around ONLY .phone, instead of on .phone-wrap. Safari has a
     long-standing bug where z-index-stacked 2D siblings (.phone-halo, .float) of an element that
     establishes a perspective/3D rendering context can paint in the wrong order relative to that 3D
     content, regardless of isolation/z-index — isolation:isolate above does not fix that specific bug,
     only ordinary 2D stacking-context ambiguity. Scoping perspective to just .phone-stage keeps
     .phone-halo and .float completely outside any 3D rendering context, which is what actually stops
     the halo from painting over the phone in Safari. */
  perspective:1400px;
}
.phone{
  position:relative;width:min(100%,320px);aspect-ratio:9/19;border-radius:44px;
  background:linear-gradient(160deg,#241550,#120B28 60%);
  border:1px solid rgba(192,132,252,.3);
  box-shadow:0 50px 110px -40px rgba(0,0,0,.95),0 0 90px -30px rgba(124,58,237,.6),inset 0 1px 0 rgba(244,241,255,.14);
  padding:11px;overflow:hidden;
  transition:transform .8s var(--ease);
  /* Safari fails to clip overflow:hidden+border-radius on elements inside a 3D transform; clip-path clips reliably where overflow:hidden does not */
  clip-path:inset(0 round 44px);
  -webkit-clip-path:inset(0 round 44px);
  /* Safari also drops that clip-path once a transformed descendant (.screen-pane) exists inside this
     3D-transformed ancestor, so the screenshot bleeds past the rounded frame. Forcing this element
     onto its own compositing layer with a mask makes Safari re-apply the clip correctly. translateZ(0)
     must stay on every value the transform takes (including the hover state below), or Safari drops
     back out of its own layer and the bleed returns. */
  mask-image:radial-gradient(circle,#fff 100%,#000 100%);
  -webkit-mask-image:-webkit-radial-gradient(circle,#fff 100%,#000 100%);
  transform-style:flat;
  -webkit-transform-style:flat;
  transform:translateZ(0) rotateY(-11deg) rotateX(4deg);
  -webkit-transform:translateZ(0) rotateY(-11deg) rotateX(4deg);
}
.phone-wrap:hover .phone{
  transform:translateZ(0) rotateY(-4deg) rotateX(1deg) translateY(-6px);
  -webkit-transform:translateZ(0) rotateY(-4deg) rotateX(1deg) translateY(-6px);
}
.phone .notch{
  position:absolute;top:11px;left:50%;width:96px;height:23px;
  background:#0B0718;border-radius:0 0 14px 14px;z-index:5;
  /* .screen (below) is forced onto its own Safari compositing layer to fix the clip-path bleed bug;
     that leaves .notch as the only non-composited sibling, and Safari can paint a composited layer
     above a non-composited one even when z-index says otherwise. Giving .notch its own layer too
     restores a correct layer-vs-layer z-index comparison. */
  transform:translateX(-50%) translateZ(0);
  -webkit-transform:translateX(-50%) translateZ(0);
}
.screen{
  position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 0%,#2A1660,#130B2C 62%);
  display:flex;flex-direction:column;
  clip-path:inset(0 round 34px);
  -webkit-clip-path:inset(0 round 34px);
  /* same Safari fix as .phone: this sits directly above the transformed .screen-pane, so it needs its
     own compositing layer too or the pane's screenshot bleeds past this rounded edge. */
  mask-image:radial-gradient(circle,#fff 100%,#000 100%);
  -webkit-mask-image:-webkit-radial-gradient(circle,#fff 100%,#000 100%);
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}
.screen-pane{
  position:absolute;inset:0;padding:44px 20px 20px;display:flex;flex-direction:column;gap:14px;
  opacity:0;transform:translateY(16px) scale(.985);pointer-events:none;
  transition:opacity .55s var(--ease),transform .6s var(--ease);
}
.screen-pane.on{opacity:1;transform:none;pointer-events:auto}
/* --- the mark, glowing behind the phone --- */
.phone-halo{
  position:absolute;left:50%;top:46%;translate:-50% -50%;z-index:0;
  width:min(128%,540px);aspect-ratio:1;pointer-events:none;
  /* .phone (z-index:2) is on its own Safari compositing layer (see .phone's clip-path fix above);
     .phone-halo itself wasn't, only its ::before/svg children were, so Safari compared a composited
     layer against a non-composited one and let this z-index:0 halo paint over the phone. Promoting
     this wrapper too restores a correct layer-vs-layer comparison. */
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}
@media (max-width:760px){
  .grad.flow{
  line-height:60px !important;
}
  .phone-halo{width:min(94vw,430px);top:44%}
  .phone-wrap .phone{width:min(66vw,250px)}
}
.phone-halo::before{
  content:"";position:absolute;inset:6%;border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.42),rgba(192,132,252,.14) 52%,transparent 72%);
  filter:blur(46px);
  animation:haloBreathe 8s var(--ease-soft) infinite alternate;
}
.phone-halo svg{
  position:relative;width:100%;height:100%;overflow:visible;opacity:.9;
  animation:haloBreathe 8s var(--ease-soft) infinite alternate;
}
@keyframes haloBreathe{from{transform:scale(.97);opacity:.72}to{transform:scale(1.05);opacity:1}}
.phone-wrap .phone{position:relative;z-index:2}
.phone-wrap .float{z-index:3}
@media (prefers-reduced-motion:reduce){.phone-halo svg,.phone-halo::before{animation:none}}

/* floating chips beside phone */
.float{
  position:absolute;padding:11px 16px;border-radius:14px;font-size:.78rem;
  background:rgba(28,19,56,.82);border:1px solid var(--line-strong);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 20px 44px -22px rgba(0,0,0,.9);display:flex;align-items:center;gap:9px;
  animation:bob 7s var(--ease-soft) infinite alternate;white-space:nowrap;
}
.float svg{width:15px;height:15px;stroke:var(--gold);fill:none;stroke-width:1.6;stroke-linecap:round}
.float.f1{top:12%;left:-6%;animation-delay:0s}
.float.f2{bottom:20%;right:-8%;animation-delay:1.6s}
.float.f3{bottom:6%;left:-2%;animation-delay:3.2s}
@keyframes bob{to{transform:translateY(-14px)}}

/* ============================================================
   STATS
   ============================================================ */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border-radius:var(--r-lg);overflow:hidden;
  background:var(--line);border:1px solid var(--line);
}
.stat{
  padding:clamp(30px,4vw,44px) 26px;text-align:center;background:rgba(21,14,46,.82);
  transition:background .5s;
}
.stat:hover{background:rgba(35,22,74,.9)}
.stat b{display:block;font-size:clamp(2.1rem,4.4vw,3.2rem);font-weight:200;letter-spacing:-.045em;line-height:1}
.stat>span{display:block;margin-top:12px;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-mute)}
.stat b .count{font-size:inherit;letter-spacing:inherit;text-transform:none;color:inherit}

/* ============================================================
   ABOUT / HERITAGE
   ============================================================ */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);align-items:start}
.quote-card{
  position:relative;padding:clamp(32px,4vw,52px);border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(155deg,rgba(48,0,155,.5),rgba(21,14,46,.7));
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow);
}
.quote-card::before{
  content:"";position:absolute;top:-40%;right:-30%;width:70%;height:100%;border-radius:50%;
  background:radial-gradient(circle,rgba(253,186,116,.28),transparent 68%);filter:blur(50px);
}
.quote-card .mk{width:52px;height:52px;margin-bottom:26px;position:relative}
.quote-card q{
  display:block;font-family:'Fraunces',Georgia,serif;font-weight:300;quotes:none;
  font-size:clamp(1.3rem,2.5vw,1.75rem);line-height:1.42;letter-spacing:-.02em;position:relative;
}
.quote-card cite{
  display:block;margin-top:28px;font-style:normal;font-size:.86rem;color:var(--text-mute);
  letter-spacing:.1em;text-transform:uppercase;position:relative;
}
.about-body p+p{margin-top:20px}
.about-body p{color:var(--text-soft);line-height:1.75}

.everything{margin-top:clamp(56px,7vw,90px)}
.feat-list{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;border-radius:var(--r);overflow:hidden;background:var(--line)}
.feat-list li{
  display:flex;align-items:flex-start;gap:12px;padding:18px 22px;background:rgba(21,14,46,.75);
  font-size:.93rem;color:var(--text-soft);transition:background .4s,color .4s;
}
.feat-list li:hover{background:rgba(40,25,84,.9);color:var(--text)}
.feat-list li svg{width:16px;height:16px;flex:none;margin-top:5px;stroke:var(--gold);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.feat-list li b{font-weight:500;color:var(--text)}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.qc{
  padding:32px 30px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(244,241,255,.06),rgba(244,241,255,.015));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .5s var(--ease),border-color .4s,box-shadow .5s;
  display:flex;flex-direction:column;
}
.qc:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:var(--shadow)}
.qc .stars{margin-bottom:18px}
.qc p{color:var(--text-soft);font-size:.97rem;line-height:1.7;flex:1}
.qc footer{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.qc footer i{width:38px;height:38px;border-radius:50%;background:var(--cta);flex:none;display:grid;place-items:center;font-style:normal;font-size:.85rem;font-weight:600;color:#fff}
.qc footer b{display:block;font-weight:500;font-size:.92rem}
.qc footer small{color:var(--text-mute);font-size:.78rem}

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta{
  position:relative;text-align:center;padding:clamp(56px,8vw,110px) clamp(24px,5vw,70px);
  border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(150deg,rgba(48,0,155,.62),rgba(21,14,46,.85));
  border:1px solid var(--line-strong);
}
.cta::before{
  content:"";position:absolute;width:120%;height:200%;left:-10%;top:-70%;
  background:conic-gradient(from 0deg,transparent,rgba(124,58,237,.32),transparent 30%,rgba(253,186,116,.22),transparent 60%);
  animation:spin 22s linear infinite;
}
.cta::after{
  content:"";position:absolute;inset:1px;border-radius:inherit;
  background:linear-gradient(150deg,rgba(30,17,68,.93),rgba(15,9,32,.96));
}
.cta>*{position:relative;z-index:2}
.cta h2{font-size:clamp(2.2rem,5.6vw,4rem);font-weight:200;letter-spacing:-.045em}
.cta p{margin:22px auto 0;color:var(--text-soft);max-width:52ch}
.cta .stores{justify-content:center;margin-top:38px}
.cta small{display:block;margin-top:26px;color:var(--text-mute);font-size:.82rem}

/* ============================================================
   FOOTER
   ============================================================ */
footer.site{border-top:1px solid var(--line);padding:clamp(56px,7vw,86px) 0 34px;background:rgba(11,7,24,.55)}
.f-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--line)}
.f-brand .brand{margin-bottom:20px}
.f-brand,.f-col{min-width:0}
.f-brand p{color:var(--text-mute);font-size:.92rem;max-width:34ch}
.news{display:flex;gap:9px;margin-top:24px;max-width:380px;flex-wrap:wrap}
.news input{
  flex:1;min-width:0;padding:13px 18px;border-radius:999px;border:1px solid var(--line-strong);
  background:var(--glass);color:var(--text);font:inherit;font-size:.92rem;transition:border-color .3s,background .3s;
}
.news input::placeholder{color:var(--text-mute)}
.news input:focus{outline:none;border-color:var(--orchid);background:var(--glass-2)}
.f-col h5{margin:0 0 18px;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-mute);font-weight:500}
.f-col li+li{margin-top:11px}
.f-col a{color:var(--text-soft);font-size:.93rem;transition:color .3s,padding-left .35s var(--ease);display:inline-block}
.f-col a:hover{color:var(--gold);padding-left:5px}
.f-bot{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:28px;flex-wrap:wrap}
.f-bot small{color:var(--text-mute);font-size:.83rem}
.social{display:flex;gap:10px}
.social a{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--glass);
  transition:transform .45s var(--ease),border-color .35s,background .35s;
}
.social a:hover{transform:translateY(-3px);border-color:var(--orchid);background:var(--glass-2)}
.social svg{width:17px;height:17px;fill:var(--text-soft)}
.social a:hover svg{fill:var(--gold)}

/* ============================================================
   PILLARS — rebuilt from the bliss app onboarding (Figma)
   ============================================================ */
.pillar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);align-items:center;padding:clamp(38px,4.6vw,64px) 0}
.pillar:first-of-type{padding-top:0}
.pillar+.pillar{border-top:1px solid var(--line)}
.pillar:nth-child(even) .pillar-art{order:-1}
.pillar-copy{min-width:0}
.pillar-copy .eyebrow{margin-bottom:18px}
.pillar-copy h3{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:200;letter-spacing:-.035em;line-height:1.1}
.pillar-copy p{margin-top:18px;color:var(--text-soft);font-size:1.02rem;line-height:1.7;max-width:46ch}
.pillar-art{position:relative;min-width:0;aspect-ratio:1/.92;display:grid;place-items:center;border-radius:var(--r-xl);overflow:hidden;
  background:radial-gradient(120% 100% at 50% 8%,rgba(61,15,196,.55),rgba(21,14,46,.85) 68%);
  border:1px solid var(--line)}
.pillar-art::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 100%,rgba(11,7,24,.6),transparent)}

/* --- A. fanned card deck --- */
.deck{--ds:1;position:relative;width:560px;aspect-ratio:0.98;display:grid;place-items:center;transform:scale(var(--ds));transform-origin:center}
.deck .dcard{
  position:absolute;width:112px;height:92px;border-radius:14px;padding:10px 11px;
  display:flex;align-items:flex-end;font-size:.7rem;line-height:1.25;font-weight:500;letter-spacing:-.005em;
  color:#fff;box-shadow:0 18px 34px -16px rgba(0,0,0,.85);border:1px solid rgba(255,255,255,.16);
  transition:transform .7s var(--ease),box-shadow .7s var(--ease);
  transform:translate(var(--x),var(--y)) rotate(var(--r));
}
.deck:hover .dcard{transform:translate(calc(var(--x) * 1.08),calc(var(--y) * 1.08)) rotate(calc(var(--r) * 1.3))}
.deck .dcard span{text-shadow:0 1px 6px rgba(0,0,0,.55)}
.deck .medallion{
  position:relative;z-index:5;width:112px;height:112px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 30%,#3D0FC4,#1B0A4A);
  border:3px solid rgba(244,241,255,.92);
  box-shadow:0 0 0 12px rgba(11,7,24,.62),0 0 54px -4px rgba(192,132,252,.9),0 20px 44px -14px rgba(0,0,0,.95);
}
.deck .medallion svg{width:58%;height:58%;overflow:visible}
.deck .medallion b{position:absolute;bottom:-34px;font-size:.6rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--text-mute);white-space:nowrap}

/* --- B. mantra orbs --- */
.orbs{position:relative;width:min(94%,430px);aspect-ratio:1;display:grid;place-items:center}
.orbs .mandala{position:absolute;width:100%;height:100%;fill:rgba(192,132,252,.13);animation:spin 90s linear infinite}
.orbs .orb{
  position:absolute;border-radius:50%;display:grid;place-content:center;text-align:center;padding:8px;
  color:#fff;box-shadow:0 16px 36px -14px rgba(0,0,0,.8),inset 0 2px 10px rgba(255,255,255,.28);
  border:1px solid rgba(255,255,255,.22);animation:bob 8s var(--ease-soft) infinite alternate;
  transition:transform .6s var(--ease);
}
.orbs .orb:hover{transform:translateY(-8px) scale(1.05)}
.orbs .orb b{display:block;font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:.82rem;line-height:1.15;letter-spacing:-.01em;text-shadow:0 1px 5px rgba(0,0,0,.5)}
.orbs .orb i{display:block;font-style:normal;font-size:.56rem;line-height:1.3;margin-top:4px;color:rgba(255,255,255,.85)}
.orb.o1{width:44%;height:44%;background:radial-gradient(circle at 38% 26%,#A855F7,#6D28D9);z-index:4}
.orb.o2{width:30%;height:30%;background:radial-gradient(circle at 38% 26%,#8B5CF6,#4C1D95);left:2%;top:26%}
.orb.o3{width:31%;height:31%;background:radial-gradient(circle at 38% 26%,#38BDF8,#1D4ED8);right:0;top:32%}
.orb.o4{width:29%;height:29%;background:radial-gradient(circle at 38% 26%,#FB923C,#B45309);left:11%;bottom:12%}
.orb.o5{width:29%;height:29%;background:radial-gradient(circle at 38% 26%,#4ADE80,#15803D);right:13%;bottom:10%}

/* --- heritage, condensed --- */
.quote-card.wide{max-width:900px;margin-inline:auto;text-align:center}
.quote-card.wide .mk{margin:0 auto 26px}
.center-lead{max-width:56ch;margin:34px auto 0;text-align:center}
.everything-h{font-size:clamp(1.15rem,2.2vw,1.5rem);text-align:center;margin-bottom:26px;color:var(--text-soft);font-weight:300}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:960px;margin-inline:auto}
.chips li{
  padding:10px 20px;border-radius:999px;font-size:.9rem;color:var(--text-soft);
  border:1px solid var(--line);background:var(--glass);
  transition:transform .4s var(--ease),border-color .35s,color .35s,background .35s;
}
.chips li:hover{transform:translateY(-3px);border-color:var(--line-strong);color:var(--text);background:var(--glass-2)}

/* --- C. chakra petal ring --- */
.lotus{position:relative;width:min(94%,400px);aspect-ratio:1}
.lotus .petals{position:absolute;inset:0;width:100%;height:100%}
.lotus .petals ellipse{opacity:.82;transition:opacity .5s}
.lotus:hover .petals ellipse{opacity:1}
.lotus .halo-bg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52%;height:52%;border-radius:50%;background:radial-gradient(circle,rgba(192,132,252,.4),transparent 68%);filter:blur(22px)}
.lotus .core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.lotus .core i{width:16px;height:16px;border-radius:50%;display:block;border:1.5px solid rgba(11,7,24,.45)}
.lotus .core i:nth-child(1){background:#C084FC;box-shadow:0 0 16px -2px #C084FC}
.lotus .core i:nth-child(2){background:#6366F1;box-shadow:0 0 16px -2px #6366F1}
.lotus .core i:nth-child(3){background:#38BDF8;box-shadow:0 0 16px -2px #38BDF8}
.lotus .core i:nth-child(4){background:#4ADE80;box-shadow:0 0 16px -2px #4ADE80}
.lotus .core i:nth-child(5){background:#FACC15;box-shadow:0 0 16px -2px #FACC15}
.lotus .core i:nth-child(6){background:#F97316;box-shadow:0 0 16px -2px #F97316}
.lotus .core i:nth-child(7){background:#EF4444;box-shadow:0 0 16px -2px #EF4444}
.lotus .tag{
  position:absolute;z-index:5;display:flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:999px;white-space:nowrap;
  font-size:.66rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#fff;
  background:rgba(11,7,24,.55);border:1px solid rgba(244,241,255,.28);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 12px 28px -14px rgba(0,0,0,.9);
  transition:transform .5s var(--ease),border-color .4s,background .4s;
}
.lotus .tag:hover{transform:scale(1.06);border-color:var(--gold);background:rgba(11,7,24,.75)}
.lotus .tag svg{width:14px;height:14px;stroke:var(--gold);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.lotus .t1{left:2%;top:20%}
.lotus .t2{right:2%;top:20%}
.lotus .t3{left:4%;bottom:20%}
.lotus .t4{right:4%;bottom:20%}

/* ============================================================
   REBRAND NOTE
   ============================================================ */
.rebrand{
  display:flex;align-items:center;gap:clamp(20px,3vw,40px);flex-wrap:wrap;
  padding:clamp(28px,4vw,44px);border-radius:var(--r-xl);
  background:linear-gradient(140deg,rgba(48,0,155,.4),rgba(21,14,46,.7));border:1px solid var(--line-strong);
}
.rebrand .swap{display:flex;align-items:center;gap:16px;flex:none}
.rebrand .chip{
  width:72px;height:72px;border-radius:20px;display:grid;place-items:center;
  border:1px solid var(--line-strong);font-weight:600;font-size:.82rem;letter-spacing:.04em;
}
.rebrand .chip.old{background:linear-gradient(150deg,#3D0FC4,#26007A)}
.rebrand .chip.old img{width:68%;height:68%;object-fit:contain}
.rebrand .chip.new{background:radial-gradient(circle at 50% 35%,#3D0FC4,#1B0A4A)}
.rebrand .chip.new svg{width:60%;height:60%;overflow:visible}
.rebrand .arrow{color:var(--orchid);font-size:1.3rem}
.rebrand .txt{flex:1;min-width:260px}
.rebrand .txt b{display:block;font-size:1.2rem;font-weight:500;letter-spacing:-.015em;margin-bottom:8px}
.rebrand .txt p{color:var(--text-soft);font-size:.96rem;line-height:1.65}

@media (max-width:1180px){.float.f1{left:0}.float.f2{right:0}}
@media (max-width:1240px){.deck{--ds:.84}}
@media (max-width:1080px){.deck{--ds:.76}}
@media (max-width:880px){.deck{--ds:.92}}
@media (max-width:760px){.deck{--ds:.78}}
@media (max-width:620px){.deck{--ds:.64}}
@media (max-width:470px){.deck{--ds:.54}}
@media (max-width:390px){.deck{--ds:.48}}

@media (max-width:880px){}

@media (max-width:880px){
  .pillar{grid-template-columns:1fr;gap:30px}
  .pillar:nth-child(even) .pillar-art{order:0}
  .pillar-art{aspect-ratio:1/.95}
}

  .rebrand{flex-direction:column;align-items:flex-start}
}

/* ============================================================
   PORTAL HERO — scroll pushes the camera through the halo
   ============================================================ */
.portal-wrap{position:relative;height:240vh}
.portal{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:grid;place-items:center;
  background:#0B0718;
}
/* the world beyond the ring */
.sky{
  position:absolute;inset:0;
  background:
    radial-gradient(64% 46% at 50% 84%,rgba(253,186,116,.62),transparent 60%),
    radial-gradient(80% 58% at 50% 62%,rgba(192,132,252,.6),transparent 66%),
    linear-gradient(180deg,#180C3E 0%,#2E1266 26%,#5B21B6 54%,#A855F7 82%,#E3A6C8 100%);
  transform:scale(var(--skyScale,1));
  transform-origin:50% 45%;
  will-change:transform;
}
.sky i{
  position:absolute;border-radius:50%;filter:blur(34px);background:rgba(255,255,255,.5);
}
.sky .c1{width:38%;height:26%;left:8%;bottom:14%;opacity:.5}
.sky .c2{width:46%;height:30%;right:2%;bottom:6%;opacity:.62}
.sky .c3{width:30%;height:20%;left:40%;bottom:26%;opacity:.4}
.sky .c4{width:26%;height:16%;left:16%;top:22%;opacity:.28}
.sky .c5{width:34%;height:20%;right:10%;top:14%;opacity:.24}

/* dark foreground with a growing hole punched in it */
.curtain{
  position:absolute;inset:-2px;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,
    transparent calc(var(--hole,90) * 1px),
    #150E2E calc(var(--hole,90) * 1px + 1.5px));
}
.curtain-glow{
  position:absolute;left:50%;top:45%;translate:-50% -50%;pointer-events:none;
  width:calc(var(--hole,90) * 2.9px);height:calc(var(--hole,90) * 2.9px);border-radius:50%;
  background:radial-gradient(circle,transparent 34%,rgba(124,58,237,.5) 48%,transparent 72%);
  opacity:var(--glowO,1);
}
/* the halo ring, sitting exactly on the hole's edge */
.portal-ring{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}

/* drifting motes */
.motes{position:absolute;inset:0;pointer-events:none;opacity:var(--moteO,.9)}
.motes i{
  position:absolute;width:3px;height:3px;border-radius:50%;background:#FFD9A8;
  box-shadow:0 0 10px 2px rgba(255,217,168,.75);
  animation:rise linear infinite;
}
@keyframes rise{
  from{transform:translateY(20vh) scale(.5);opacity:0}
  15%{opacity:.9}
  85%{opacity:.9}
  to{transform:translateY(-95vh) scale(1.15);opacity:0}
}

/* hero copy over the portal */
.portal-copy::before{
  content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:-1;
  width:150%;height:190%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(11,7,24,.72),rgba(11,7,24,.42) 55%,transparent 78%);
  filter:blur(14px);
}
.portal-copy{
  position:relative;z-index:6;text-align:center;padding:0 22px;isolation:isolate;
  transform:translateY(calc(var(--copyY,0) * 1px)) scale(var(--copyS,1));
  opacity:var(--copyO,1);will-change:transform,opacity;
}
.portal-copy h1{
  font-size:clamp(2.9rem,11vw,6rem);font-weight:200;letter-spacing:-.045em;line-height:1.02;
  text-shadow:0 8px 44px rgba(11,7,24,.8);
}
.portal-copy h1 .l2{display:block}
.portal-copy .sub{
  margin:22px auto 0;max-width:40ch;color:rgba(244,241,255,.86);font-size:clamp(1rem,1.5vw,1.2rem);
  text-shadow:0 3px 20px rgba(11,7,24,.85);
}
.portal-copy .stores{justify-content:center;margin-top:32px}
.portal-copy .pill{margin-bottom:24px}

/* the payoff, revealed once you are through */
.through{
  position:absolute;z-index:6;text-align:center;padding:0 24px;
  opacity:var(--thruO,0);transform:translateY(calc(var(--thruY,40) * 1px));
  pointer-events:none;will-change:opacity,transform;
}
.through .tnum{font-size:clamp(2.4rem,7vw,5rem);font-weight:200;letter-spacing:-.05em;line-height:1;color:#fff;text-shadow:0 6px 40px rgba(24,12,62,.85)}
.through .tnum .grad{background:linear-gradient(92deg,#FFF3E0,#FFD9A8);-webkit-background-clip:text;background-clip:text;color:transparent}
.through .tsub{margin-top:14px;color:rgba(255,255,255,.92);text-shadow:0 3px 22px rgba(24,12,62,.9);font-size:clamp(.98rem,1.4vw,1.14rem)}

/* scroll hint */
.hint{
  position:absolute;left:50%;bottom:30px;translate:-50% 0;z-index:7;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(244,241,255,.6);
  opacity:var(--hintO,1);transition:opacity .3s;
}
.hint .track{width:1px;height:42px;background:linear-gradient(180deg,transparent,rgba(244,241,255,.5));position:relative;overflow:hidden}
.hint .track::after{content:"";position:absolute;top:-42px;left:0;width:1px;height:42px;background:var(--gold);animation:drop 2.1s var(--ease) infinite}
@keyframes drop{to{top:42px}}

/* bridge from the bright portal back down to Midnight */
.emerge-bridge{height:clamp(150px,20vw,280px);background:linear-gradient(180deg,#C88BE0 0%,#8B4FD4 22%,#5B21B6 48%,#2A1660 74%,var(--midnight) 100%)}

@media (max-width:880px){
  .portal-wrap{height:220vh}
  .portal-copy .sub{font-size:1.04rem;max-width:30ch;margin-top:18px}
  .portal-copy .pill{font-size:.82rem;margin-bottom:18px}
  .portal-copy .stores{margin-top:26px}
  .portal-copy .stores{flex-direction:column;align-items:stretch;max-width:280px;margin-inline:auto}
}
@media (max-width:400px){
  .portal-copy h1{font-size:clamp(2.5rem,12vw,3.2rem)}
  .portal-copy{padding:0 16px}
}
@media (prefers-reduced-motion:reduce){
  .portal-wrap{height:auto}
  .portal{position:relative;height:auto;padding:calc(var(--nav-h) + 60px) 0 80px}
  .curtain{display:none}
  .fg,.motes,.hint{display:none}
  .sky{opacity:.55}
  .emerge-bridge{display:none}
  .through{display:none}
  .portal-copy{opacity:1 !important;transform:none !important}
}

/* ============================================================
   WISDOM — Gurudev video library
   ============================================================ */

/* --- wisdom banner --- */
.wbanner{
  position:relative;width:100%;aspect-ratio:21/9;border-radius:var(--r-xl);overflow:hidden;
  background:
    radial-gradient(80% 120% at 22% 18%,rgba(192,132,252,.5),transparent 62%),
    radial-gradient(70% 100% at 82% 80%,rgba(253,186,116,.28),transparent 64%),
    linear-gradient(150deg,#5B21B6,#2A1160 58%,#160A38);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow),0 0 70px -30px rgba(168,85,247,.7);
  isolation:isolate;
}
.wbanner::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 38%,rgba(11,7,24,.5) 72%,rgba(11,7,24,.86));
}
.wbanner img{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;
  object-fit:cover;object-position:50% 32%;opacity:0;transition:opacity .6s var(--ease);
}
.wbanner.has-img img{opacity:1}
.wb-play{
  position:absolute;left:50%;top:46%;translate:-50% -50%;z-index:3;
  width:clamp(54px,5vw,72px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:rgba(244,241,255,.14);border:1.5px solid rgba(244,241,255,.5);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 0 40px -8px rgba(255,217,168,.7);
}
.wb-play svg{width:38%;height:38%;fill:#fff;margin-left:8%}
.wb-meta{
  position:absolute;left:clamp(20px,3vw,42px);bottom:clamp(18px,2.6vw,34px);right:clamp(20px,3vw,42px);z-index:3;
}
.wb-meta b{display:block;font-size:clamp(1.15rem,2.4vw,1.9rem);font-weight:400;letter-spacing:-.025em;line-height:1.15}
.wb-meta i{display:block;font-style:normal;margin-top:6px;font-size:clamp(.74rem,1vw,.9rem);color:var(--text-soft)}
@media (max-width:700px){.wbanner{aspect-ratio:4/3}}

@media (max-width:900px){}
@media (max-width:420px){}

}

@media (max-width:1080px){}

/* ============================================================
   IMAGE SLOTS — drop a file beside the page and it appears
   ============================================================ */
.slot{position:relative;overflow:hidden;isolation:isolate}
.slot>img{
  position:absolute;inset:0;z-index:2;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity .6s var(--ease);
}
.slot.has-img>img{opacity:1}
/* Safari-only: -webkit-hyphens is recognized by WebKit but not Chrome/Firefox, so this @supports block only ever matches Safari */
@supports (-webkit-hyphens:none){
  .slot>img{
    padding-bottom: 30px;
    border-bottom-left-radius: 12%;
    border-bottom-right-radius: 12%;
  }
}
.slot .ph{
  position:absolute;inset:0;z-index:1;display:grid;place-content:center;justify-items:center;gap:12px;
  text-align:center;padding:22px;
}
.slot.has-img .ph{display:none}
.slot .ph svg{width:34px;height:34px;stroke:rgba(244,241,255,.42);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.slot .ph b{font-size:.78rem;font-weight:500;color:rgba(244,241,255,.6);letter-spacing:-.005em}
.slot .ph code{
  font-size:.66rem;color:var(--gold);background:rgba(255,217,168,.1);
  border:1px solid rgba(255,217,168,.24);border-radius:999px;padding:4px 11px;
}

/* pillar art becomes a droppable frame */
.pillar-art.slot{
  background:linear-gradient(150deg,rgba(124,58,237,.28),rgba(21,14,46,.85));
}

/* phone screens become droppable frames */
.screen-pane.shotpane{padding:0;background:transparent}
.screen-pane.shotpane .slot{
  position:absolute;inset:0;border-radius:32px;
  clip-path:inset(0 round 32px);-webkit-clip-path:inset(0 round 32px);
  /* .screen-pane (this element's direct parent) is itself the transformed element (see .screen-pane's
     translateY/scale below) — Safari won't honor clip-path on a child of a transformed box unless that
     child also gets its own compositing layer, so the screenshot bled past this rounded corner too. */
  mask-image:radial-gradient(circle,#fff 100%,#000 100%);
  -webkit-mask-image:-webkit-radial-gradient(circle,#fff 100%,#000 100%);
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}
.screen-pane.shotpane .slot .ph svg{width:26px;height:26px}
.screen-pane.shotpane .slot .ph b{font-size:.68rem}
.screen-pane.shotpane .slot .ph code{font-size:.56rem;padding:3px 9px}

/* ============================================================
   REVEAL + RESPONSIVE + A11Y
   ============================================================ */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}
.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}
.rv[data-d="4"]{transition-delay:.32s}
.rv[data-d="5"]{transition-delay:.4s}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:10px;z-index:200}
.skip:focus{left:16px;padding:12px 20px;border-radius:10px;background:var(--cta);color:#fff}

@media (max-width:1080px){
  .cards,.quotes,.feat-list{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .f-top{grid-template-columns:1fr 1fr;gap:36px}
  .f-brand{grid-column:1/-1}
}
@media (max-width:880px){
  .navlinks{display:none}
  .nav-actions .btn{display:none}
  .burger{display:flex}
  .hero-grid,.showcase-grid,.about-grid{grid-template-columns:1fr}
  .stage{order:-1;min-height:270px;max-width:400px;margin-inline:auto}
  .halo-svg{width:min(78%,330px)}
  .float.f1{left:0}
  .float.f2{right:0}
  .float.f3{display:none}
  .tab p{max-height:none;opacity:1;margin-top:10px}
}
@media (max-width:620px){
  .wrap{width:calc(100% - 32px)}
  .cards,.quotes,.feat-list{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .f-top{grid-template-columns:1fr}
  .news{max-width:none}
  .hero .stores,.cta .stores{flex-direction:column;align-items:stretch}
  .store{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .rv{opacity:1;transform:none}
  h1.hero-h .line>span{transform:none}
  .halo-ring{stroke-dashoffset:0}
  .halo-spark{opacity:1}
  .phone{transform:none}
}