/* =====================================================================
   Miljana & Andreja — v6
   Mobile-first (iPhone 7 = 375x667, iPhone 11 = 414x896), desktop enhanced
   ===================================================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#12080e;--bg2:#1c0e16;--pink:#ff4f7b;--rose:#f2a9b8;--deep:#9a3452;--gold:#dcb88f;
  --fg:#f8ede9;--mut:#bba8ad;--line:rgba(242,169,184,.16);--glass:rgba(30,14,22,.62);
  --spring:cubic-bezier(.32,.72,0,1);
  --pad:clamp(20px,6vw,40px);
  --nav-h:58px;--nav-b:max(10px,env(safe-area-inset-bottom));
  --r-lg:28px;--r-md:22px;
  --heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M50 97C31 82 4 63 2 35C0 15 14 2 29 2C39 2 46 7 50 18C54 7 61 2 71 2C86 2 100 15 98 35C96 63 69 82 50 97Z'/%3E%3C/svg%3E");
}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:Manrope,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--fg);overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.55}
h1,h2,h3{font-family:"Instrument Serif",Georgia,serif;font-weight:400;letter-spacing:-.02em;line-height:1.05}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
.ch{display:inline-block;will-change:transform}

/* scroll locks (loader / lightbox / lenis) */
html.lenis,html.lenis body{height:auto}
html.lenis-smooth{scroll-behavior:auto!important}
html.lenis-stopped,html.lenis-stopped body,html.loading,html.loading body,html.lb-open,html.lb-open body{overflow:hidden}
html.lb-open body{touch-action:none}

/* every heart shape in the page is one mask — reliable on iOS Safari */
.rim,.inner,.pr,.hi,.hi img,.blob,.sec::before{-webkit-mask:var(--heart) center/100% 100% no-repeat;mask:var(--heart) center/100% 100% no-repeat}

@keyframes beat{0%,100%{transform:scale(1)}12%{transform:scale(1.05)}24%{transform:scale(1)}38%{transform:scale(1.035)}56%{transform:scale(1)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes halo{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.9;transform:scale(1.08)}}
@keyframes pr{0%{transform:scale(.98);opacity:.55}100%{transform:scale(1.55);opacity:0}}
@keyframes wave{to{transform:translateX(-50px)}}
@keyframes kb{0%,100%{transform:scale(1.08) translate(0,0)}50%{transform:scale(1.2) translate(-2%,-2%)}}
@keyframes spinr{to{transform:rotate(270deg)}}

/* ---------- background layers ---------- */
#gl{position:fixed;left:0;top:0;width:100%;height:100%;z-index:0}
.aurora{position:fixed;border-radius:50%;will-change:transform;pointer-events:none;opacity:.5;z-index:0}
.a1{width:62vw;height:62vw;left:-16vw;top:-14vw;background:radial-gradient(circle,rgba(220,60,100,.3),transparent 65%)}
.a2{width:54vw;height:54vw;right:-14vw;bottom:-12vw;background:radial-gradient(circle,rgba(220,150,110,.2),transparent 65%)}
#fx{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:2}
#fxTop{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:95}   /* bursts sit above content + lightbox */
.grain{position:fixed;inset:0;pointer-events:none;z-index:3;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.spot{position:fixed;inset:0;z-index:4;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(520px circle at var(--sx,50%) var(--sy,40%),rgba(255,110,150,.14),transparent 70%)}

/* ---------- loader ---------- */
#loader{position:fixed;inset:0;z-index:100;background:#0b0508;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;touch-action:none}
#loader svg{width:min(52vw,190px);overflow:visible;filter:drop-shadow(0 0 34px rgba(255,79,123,.4))}
.lo{fill:rgba(255,79,123,.08);stroke:var(--rose);stroke-width:.016;stroke-dasharray:3.6;stroke-dashoffset:3.6}
#wave{animation:wave 1.1s linear infinite}
.ldn{font-family:"Instrument Serif",serif;font-size:42px;font-weight:300}.ldn small{font-size:16px;color:var(--rose);margin-left:3px}
#loader p{font-size:12px;color:var(--mut);letter-spacing:.18em}
.lring{position:absolute;left:0;top:0;width:min(52vw,190px);aspect-ratio:1;opacity:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,110,150,.5),rgba(255,79,123,.08));-webkit-mask:var(--heart) center/100% 100% no-repeat;mask:var(--heart) center/100% 100% no-repeat}
.lp{position:absolute;left:0;top:0;color:var(--pink);font-size:14px;pointer-events:none;opacity:0;filter:drop-shadow(0 0 8px rgba(255,79,123,.7))}
.lc{display:inline-block}

/* ---------- nav ---------- */
.nav{position:fixed;z-index:60;top:max(14px,env(safe-area-inset-top));left:0;right:0;margin:0 auto;width:max-content;max-width:calc(100% - 24px);display:flex;align-items:center;gap:4px;padding:6px;border-radius:100px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.35);transition:background .6s,box-shadow .6s}
.nav.sm{background:rgba(18,8,14,.82);box-shadow:0 18px 50px rgba(0,0,0,.55)}.nav.sm .days{display:none}
.nav a{position:relative;z-index:1;display:flex;gap:8px;align-items:center;padding:9px 16px;border-radius:100px;font-size:13.5px;font-weight:600;color:var(--mut);transition:color .3s}
.nav a i{font-size:13px;transition:color .3s}
.nav a.on{color:var(--fg)}.nav a.on i{color:var(--pink)}
.pill{position:absolute;left:0;top:6px;bottom:6px;width:0;border-radius:100px;background:linear-gradient(135deg,rgba(255,79,123,.28),rgba(255,255,255,.08));border:1px solid var(--line);box-shadow:0 0 24px rgba(255,79,123,.25);pointer-events:none}
.days{display:flex;gap:6px;align-items:center;padding:0 14px 0 8px;font-size:12px;color:var(--mut)}.days i{color:var(--pink)}
.days b{font-family:"Instrument Serif",serif;font-weight:400;font-size:18px;color:var(--fg)}
.bar{position:absolute;left:0;bottom:0;right:0;height:2px}
#barFill{height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--deep),var(--pink))}

/* ---------- stage (hero + orbit) ---------- */
.pin{--bs:min(72vw,46vh);--cs:92px;--oy:44%;position:relative;height:100vh;height:100svh;overflow:hidden;z-index:5}
.kicker{position:absolute;top:calc(max(14px,env(safe-area-inset-top)) + 72px);left:0;right:0;text-align:center;font-size:13px;font-weight:600;color:var(--rose);z-index:6}
.kin{display:inline-flex;gap:9px;align-items:center}.kin i{font-size:11px;animation:beat 2.4s infinite}
.orbit{position:absolute;left:50%;top:var(--oy);width:0;height:0;z-index:4}
.goo{position:absolute;inset:0;filter:url(#goo);display:none;z-index:3;pointer-events:none}
.blob{position:absolute;left:50%;top:var(--oy);width:var(--cs);height:var(--cs);margin:calc(var(--cs)/-2) 0 0 calc(var(--cs)/-2);background:#e8466f}
#cb{width:var(--bs);height:var(--bs);margin:calc(var(--bs)/-2) 0 0 calc(var(--bs)/-2)}
.shock{position:absolute;left:50%;top:var(--oy);width:240px;height:240px;margin:-120px 0 0 -120px;border-radius:50%;border:2px solid var(--rose);box-shadow:0 0 60px rgba(255,79,123,.6),inset 0 0 60px rgba(255,79,123,.4);opacity:0;transform:scale(0);z-index:2;pointer-events:none}

/* four wrappers, four owners: .bhs scroll · .bhw scroll-wobble · .bhi intro/tap · .bh css heartbeat */
.bhs{position:absolute;left:0;top:0;width:var(--bs);height:var(--bs);margin:calc(var(--bs)/-2) 0 0 calc(var(--bs)/-2)}
.bhs::after{content:"";position:absolute;left:14%;right:14%;bottom:-7%;height:15%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);z-index:-1;pointer-events:none}
.bhw,.bhi,.bh{position:absolute;left:0;top:0;width:100%;height:100%}
.bh{animation:beat 2.6s ease-in-out infinite;transform-origin:50% 90%}
.halo{position:absolute;inset:-14%;background:radial-gradient(circle,rgba(255,79,123,.5),transparent 62%);animation:halo 2.6s ease-in-out infinite;pointer-events:none}
.pr{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,110,150,.38),rgba(255,79,123,.05));animation:pr 2.6s cubic-bezier(.2,.6,.3,1) infinite;pointer-events:none}.pr.p2{animation-delay:1.3s}
.rim,.inner{position:absolute}
.rim{inset:0;background:linear-gradient(165deg,#ffc2d1 0%,#ee5a82 34%,#a42a4f 70%,#5a1a30 100%)}
.inner{inset:2.6%;background:#2a0f19;overflow:hidden}
.inner::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 80% at 50% 38%,transparent 52%,rgba(34,6,18,.5));pointer-events:none}
.zm{position:absolute;inset:0}
.zm img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kb 18s ease-in-out infinite;filter:saturate(1.05) contrast(1.03)}
.tap{position:absolute;left:4%;right:4%;top:6%;bottom:10%;border-radius:50%;z-index:3}

/* heart-shaped photo cards (orbit + story cluster) */
.hi{position:absolute;inset:0;background:linear-gradient(145deg,#ff7a99,#8a2a47)}
.hi img{position:absolute;inset:3%;width:94%;height:94%;object-fit:cover}
.hc{position:absolute;isolation:isolate;left:0;top:0;width:var(--cs);height:var(--cs);margin:calc(var(--cs)/-2) 0 0 calc(var(--cs)/-2);opacity:0;will-change:transform,opacity}
.hc::before,.fl::after{content:"";position:absolute;left:8%;right:8%;top:64%;height:44%;background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent);z-index:-1;pointer-events:none}
.hc .n{position:absolute;left:0;right:0;bottom:24%;margin:0 auto;width:max-content;font-size:11px;font-weight:700;padding:3px 9px;border-radius:100px;background:rgba(12,5,8,.7)}

.hero-text{position:absolute;left:0;right:0;bottom:max(7vh,60px);bottom:max(7svh,60px);text-align:center;padding:0 var(--pad);z-index:6}
.title{font-size:clamp(44px,10.5vw,112px);line-height:1}
.title span{display:inline-block;overflow:hidden;padding:0 .02em .12em;vertical-align:bottom}
.title em{font-style:italic;font-weight:300;color:var(--rose);font-size:.6em;margin:0 .2em;display:inline-block}
.script{font-family:"Pinyon Script",cursive;font-size:clamp(24px,3.6vw,36px);color:var(--gold);line-height:1.25}
.hint{display:inline-flex;gap:8px;align-items:center;margin-top:12px;font-size:12px;color:var(--mut)}.hint i{color:var(--rose);animation:bob 1.8s ease-in-out infinite}
.orb-text{position:absolute;left:0;right:0;bottom:max(6vh,70px);bottom:max(6svh,70px);text-align:center;opacity:0;pointer-events:none;padding:0 var(--pad);z-index:20}
.orb-text h2{font-size:clamp(32px,6vw,64px)}.orb-text p{color:var(--mut);font-size:14px;margin-top:8px}.orb-text i{color:var(--pink);margin-right:8px}

/* ---------- marquee ---------- */
.marquee{position:relative;z-index:6;overflow:hidden;padding:16px 0;border-block:1px solid var(--line);background:rgba(18,8,14,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mq{display:flex;width:max-content;font-family:"Instrument Serif",serif;font-style:italic;font-weight:300;font-size:clamp(22px,4vw,36px);color:var(--rose);white-space:nowrap}
.mq span{display:flex;align-items:center}.mq i{color:var(--pink);font-size:.5em;margin:0 .9em}

/* ---------- story ---------- */
.story{position:relative;z-index:5;max-width:1100px;margin:0 auto;padding:clamp(84px,15vw,170px) var(--pad) clamp(60px,10vw,110px)}
.story-in{position:relative;z-index:3;max-width:820px}
.eyebrow{display:inline-flex;gap:8px;align-items:center;font-size:13px;font-weight:600;color:var(--rose);padding:7px 15px;border:1px solid var(--line);border-radius:100px;background:rgba(255,255,255,.03)}
.lit{font-size:clamp(36px,9.6vw,98px);line-height:1.06;margin:18px 0 0;letter-spacing:-.03em;text-shadow:0 4px 30px rgba(18,8,14,.8)}
.lit .w{display:inline-block;opacity:.13;margin-right:.22em;will-change:transform}
.lit .s2 .w{font-style:italic;font-weight:300;color:var(--rose)}

/* photo cluster: in flow, never overlaps what follows */
.flwrap{position:relative;z-index:2;width:100%;margin-top:clamp(44px,10vw,76px)}
.flwrap::before{content:"";display:block;padding-top:98%}
.fl{position:absolute;display:block;isolation:isolate}
.fl::before{content:"";display:block;padding-top:102%}
.fl.a{left:0;top:0;width:46%}
.fl.c{right:0;top:4%;width:40%}
.fl.b{left:32%;top:60%;width:36%}

.rings{position:relative;z-index:4;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,2.4vw,22px);margin-top:clamp(72px,14vw,120px)}
.tile{position:relative;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.05),rgba(18,8,14,.7));border:1px solid var(--line);display:grid;place-items:center;transition:border-color .4s,box-shadow .6s}
.tile svg{position:absolute;inset:3%;width:94%;height:94%;transform:rotate(-90deg);overflow:visible}
.tile circle{fill:none;stroke-width:3.4;stroke-linecap:round}.tr{stroke:rgba(255,255,255,.07)}
.pg{stroke:var(--pink);filter:drop-shadow(0 0 5px rgba(255,79,123,.8));stroke-dasharray:327;stroke-dashoffset:327}
.tile.inf svg{animation:spinr 10s linear infinite}
.tc{text-align:center;display:grid;gap:2px;padding:0 6%}.tc i{color:var(--pink);font-size:clamp(14px,3vw,22px)}
.tc b{font-family:"Instrument Serif",serif;font-weight:400;font-size:clamp(22px,6vw,50px);line-height:1}
.tc span{font-size:clamp(10px,2.7vw,13px);color:var(--mut);line-height:1.25}

/* ---------- sections ---------- */
.sec{position:relative;z-index:5;max-width:720px;margin:0 auto;padding:clamp(76px,14vw,140px) var(--pad) calc(var(--nav-b) + var(--nav-h) + 52px);text-align:center}
.sec::before{content:"";position:absolute;left:50%;top:50%;width:min(86vw,680px);aspect-ratio:1;transform:translate(-50%,-50%) scale(var(--hs,.7));background:radial-gradient(circle at 50% 30%,rgba(255,79,123,.16),transparent 68%);z-index:-1;pointer-events:none;opacity:var(--ho,.8)}
.mt{font-size:clamp(34px,9.4vw,68px);margin:10px 0 14px}
.ln{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .04em .12em}.ln>span{display:inline-block;will-change:transform}
.sub{color:var(--mut);font-size:14px}.sub i{color:var(--pink);margin-right:8px}

.chap{max-width:860px;text-align:left}.chap .mt{margin-bottom:clamp(30px,8vw,56px)}
.tl{position:relative;display:grid;gap:clamp(24px,6vw,64px);padding-left:clamp(26px,6vw,60px);--ln:0}
.tl::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;border-radius:2px;background:linear-gradient(var(--pink),var(--gold));transform-origin:top;transform:scaleY(var(--ln));box-shadow:0 0 14px rgba(255,79,123,.6)}
.ch2{position:relative;--dot:1;padding:clamp(20px,4.6vw,30px);border-radius:var(--r-md);border:1px solid var(--line);background:linear-gradient(160deg,rgba(44,21,33,.7),rgba(21,10,16,.5));transition:border-color .4s,box-shadow .6s}
.ch2::before{content:"";position:absolute;left:calc(clamp(26px,6vw,60px)*-1 + 1px);top:calc(clamp(20px,4.6vw,30px) + .2em);width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--pink);box-shadow:0 0 0 5px rgba(255,79,123,.14);transform:scale(var(--dot))}
.ch2 time{font-size:13px;font-weight:700;color:var(--gold)}
.ch2 h3{font-size:clamp(27px,6.6vw,44px);margin:6px 0 10px}
.ch2 p{color:#e6d4d6;max-width:56ch;font-size:clamp(15px,4vw,16px);line-height:1.7}

/* letter deck */
.deck{position:relative;width:min(100%,400px);height:clamp(320px,88vw,390px);margin:40px auto 0;outline-offset:12px;touch-action:pan-y}
.lt{position:absolute;left:0;top:0;width:100%;height:100%;padding:26px 24px 22px;border-radius:var(--r-lg);text-align:left;overflow:hidden;background:linear-gradient(160deg,#2f1723,#160b11);border:1px solid var(--line);box-shadow:0 26px 50px -22px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.06);cursor:grab;touch-action:pan-y;display:flex;flex-direction:column;will-change:transform;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transform-origin:50% 88%;transition:box-shadow .3s}
.lt.drag{cursor:grabbing;box-shadow:0 44px 70px -22px rgba(0,0,0,.9),0 0 0 1px rgba(255,79,123,.28),inset 0 1px 0 rgba(255,255,255,.08)}
.lt::after{content:"\f004";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;right:-14px;bottom:-26px;font-size:130px;line-height:1;color:rgba(255,79,123,.06);transform:rotate(-14deg);pointer-events:none}
.lt-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid rgba(220,184,143,.35);background:rgba(220,184,143,.07);color:var(--gold);font-size:17px}
.lt h3{font-size:clamp(26px,7vw,30px);margin:16px 0 8px}
.lt p{color:#e9d8da;font-size:clamp(14.5px,3.9vw,16px);line-height:1.62}
.lt .sig{margin-top:auto;font-family:"Pinyon Script",cursive;font-size:30px;color:var(--rose);line-height:1.2}
.dots{display:flex;gap:8px;justify-content:center;margin-top:78px}
.dots i{width:7px;height:7px;border-radius:7px;background:rgba(255,255,255,.18);transition:width .4s var(--spring),background .3s}.dots i.on{width:22px;background:var(--pink)}

/* finale */
.duo{position:relative;display:flex;justify-content:center;margin:clamp(26px,7vw,40px) 0}.duo .av.r{margin-left:-34px}
.duo .l{transform:rotate(-6deg)}.duo .r{transform:rotate(6deg)}
.av{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--deep);border:4px solid var(--bg)}
.av.xl{width:clamp(124px,34vw,200px);height:clamp(124px,34vw,200px);box-shadow:0 20px 40px rgba(0,0,0,.45)}
.badge{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;display:grid;place-items:center;font-size:28px;color:#fff;background:linear-gradient(135deg,var(--pink),#ff7a59);box-shadow:0 12px 36px rgba(255,79,123,.55);z-index:3}
.counter b{display:block;font-family:"Instrument Serif",serif;font-weight:300;font-size:clamp(54px,15vw,84px);color:var(--rose);line-height:1.1}.counter span{color:var(--mut);font-size:14px}
.cta{display:inline-flex;gap:10px;align-items:center;margin-top:24px;padding:17px 44px;border-radius:100px;font-weight:800;font-size:16px;color:#fff;background:linear-gradient(135deg,var(--pink),#ff7a59);box-shadow:0 14px 40px rgba(255,79,123,.4);transition:box-shadow .4s}
.cta:hover{box-shadow:0 18px 56px rgba(255,79,123,.6)}.cta:active{opacity:.92}

/* ---------- lightbox ---------- */
#lb{position:fixed;inset:0;z-index:90;display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 14px);touch-action:none;overscroll-behavior:contain}
.lb-bg{position:absolute;inset:0;background:rgba(10,4,7,.8);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}
.lb-stack{position:relative;flex:1 1 auto;min-height:240px;max-height:640px;width:min(100%,420px)}
.lb-under,.lb-card{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:var(--r-lg);overflow:hidden;background:var(--bg2)}
.lb-under{transform:translateY(14px) scale(.93);opacity:.55;pointer-events:none}
.lb-card{touch-action:none;cursor:grab;box-shadow:0 40px 90px rgba(0,0,0,.6);will-change:transform;-webkit-user-select:none;user-select:none}
.lb-card:active{cursor:grabbing}
.lb-card img,.lb-under img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.lb-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 24%,transparent 52%,rgba(0,0,0,.82));pointer-events:none}
.segs{position:absolute;top:12px;left:14px;right:60px;display:flex;gap:4px;z-index:2}
.segs i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.3);transition:background .4s}.segs i.on{background:#fff}
.x{position:absolute;top:8px;right:10px;width:40px;height:40px;border-radius:50%;z-index:3;display:grid;place-items:center;background:rgba(0,0,0,.4)}
.stamp{position:absolute;top:70px;left:24px;z-index:2;font-size:44px;color:var(--pink);opacity:0;transform:rotate(-14deg);filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}
.info{position:absolute;left:22px;right:22px;bottom:22px;z-index:2}
.info h3{font-size:clamp(28px,8vw,34px)}.info p{color:#eadada;font-size:15px;margin-top:4px}
.acts-lb{position:relative;flex:none;display:flex;gap:18px;align-items:center}
.acts-lb button{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:20px;background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.acts-lb button:active{opacity:.85}
.acts-lb .lk{width:72px;height:72px;font-size:30px;color:#fff;border:0;background:linear-gradient(135deg,var(--pink),#ff7a59);box-shadow:0 12px 36px rgba(255,79,123,.5)}

/* ---------- desktop enhancements ---------- */
@media(min-width:701px){
  .flwrap::before{padding-top:38%}
  .fl.a{left:4%;top:6%;width:24%}
  .fl.b{left:38%;top:34%;width:21%}
  .fl.c{left:70%;right:auto;top:2%;width:26%}
  .tile:hover{border-color:rgba(255,79,123,.45);box-shadow:0 0 50px -10px rgba(255,79,123,.4)}
  .ch2:hover{border-color:rgba(255,79,123,.4);box-shadow:0 26px 50px -22px rgba(255,79,123,.35)}
  .lt:hover{box-shadow:0 36px 70px -18px rgba(255,79,123,.28)}
  .hc .hi{transition:filter .5s}.hc:hover .hi{filter:brightness(1.12) saturate(1.1)}
}

/* ---------- touch devices: cheaper effects ---------- */
@media(hover:none){
  .spot{display:none}
  .grain{mix-blend-mode:normal;opacity:.035}
  .hc:active .hi{filter:brightness(1.15)}
}

/* ---------- phones ---------- */
@media(max-width:700px){
  .nav{top:auto;bottom:var(--nav-b);width:calc(100% - 24px);max-width:420px;justify-content:space-between;padding:5px;gap:2px}
  .nav a{flex:1;flex-direction:column;justify-content:center;gap:3px;padding:7px 2px;font-size:10.5px}
  .nav a i{font-size:15px}
  .pill{top:5px;bottom:5px}.days{display:none}
  .kicker{top:calc(max(12px,env(safe-area-inset-top)) + 14px);font-size:12px}
  .hero-text{bottom:calc(var(--nav-b) + var(--nav-h) + 18px)}
  .orb-text{bottom:calc(var(--nav-b) + var(--nav-h) + 20px)}
  .orb-text h2{font-size:clamp(28px,8.5vw,40px)}
  .title{font-size:clamp(38px,12.4vw,64px)}
  .script{font-size:clamp(22px,6.4vw,30px)}
  .hint{margin-top:6px}
  .tc i{display:none}
  .rings{gap:10px}
  .lb-stack{width:min(100%,400px)}
  .acts-lb{gap:16px}
}
@media(max-width:340px){.nav a span{display:none}.nav a{padding:11px 2px}}
@media(max-height:560px) and (max-width:700px){.script{display:none}.hint{margin-top:2px}}