/* ═══════════════════════════════════════════════════════════════
   DigiRise 3.0 — Midnight Gold iOS Edition (ios26.css)
   Layer 3: loads AFTER nextgen.css + redesign.css, overrides both.
   Zero libraries. GPU transforms only. Snapdragon 4xx safe.
   FIX-3.0 series — APEX protocol applied.
═══════════════════════════════════════════════════════════════ */

:root{
  /* iOS motion tokens */
  --spring: cubic-bezier(0.32, 0.72, 0, 1);          /* Apple signature */
  --spring-pop: cubic-bezier(0.34, 1.56, 0.64, 1);   /* overshoot pop */
  --dur-fast: .28s; --dur-med: .5s; --dur-slow: .75s;
  --island-bg: rgba(14,11,6,.78);
  --island-border: rgba(240,168,37,.28);
  --glass-blur: 22px;
  --sheet-bg: #14100a;
}
[data-theme="light"]{
  --island-bg: rgba(255,252,244,.82);
  --island-border: rgba(184,123,10,.25);
  --sheet-bg: #fffaf0;
}

/* ── Universal iOS press feel (haptic) — FIX-301 ── */
.btn-primary,.nav-cta,.fab-btn,.pkg-cta,button,.ig-acc-box,.soc-btn,.sticky-cta-btn{
  transition: transform var(--dur-fast) var(--spring), box-shadow var(--dur-fast) var(--spring), background var(--dur-fast) ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary:active,.nav-cta:active,.fab-btn:active,.pkg-cta:active,button:active,.ig-acc-box:active,.soc-btn:active{
  transform: scale(.96);
}

/* ═══════════════════════════════════════════════
   🏝️ DYNAMIC ISLAND NAVIGATION — FIX-302
   #mainNav is morphed into a floating pill by ios26.js
═══════════════════════════════════════════════ */
#mainNav.island{
  position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%);
  width: min(94%, 1080px);
  border-radius: 100px;
  background: var(--island-bg);
  border: 1px solid var(--island-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  box-shadow: 0 14px 44px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.09), 0 0 0 .5px rgba(240,168,37,.12);
  padding: 8px 14px;
  display: flex; align-items: center; gap: 12px;
  z-index: 9990;
  transition: width var(--dur-med) var(--spring), padding var(--dur-med) var(--spring),
              top var(--dur-med) var(--spring), box-shadow var(--dur-med) ease, background .4s ease;
  will-change: width, padding;
}
[data-theme="light"] #mainNav.island{
  box-shadow: 0 14px 40px rgba(120,80,10,.16), inset 0 1px 0 rgba(255,255,255,.7);
}
#mainNav.island .logo-wrap{ flex-shrink:0; transform: scale(.86); transform-origin:left center; }
#mainNav.island .logo-tagline{ display:none; }
#mainNav.island .nav-links{ margin:0 auto; gap:4px; }
#mainNav.island .nav-links a{ padding:8px 12px; border-radius:100px; font-size:13.5px; transition: background var(--dur-fast) ease, color var(--dur-fast) ease; }
#mainNav.island .nav-links a:hover,
#mainNav.island .nav-links a.island-active{ background: rgba(240,168,37,.14); color: var(--gold); }
#mainNav.island .nav-cta{ padding:9px 16px; font-size:12.5px; }

/* Island status chip (🔥 slots / section name morph) */
.island-status{
  display:flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:100px;
  background: rgba(240,168,37,.12);
  border: 1px solid rgba(240,168,37,.22);
  font-size:11.5px; font-weight:800; letter-spacing:.4px;
  color: var(--gold); white-space:nowrap;
  overflow:hidden; max-width:190px;
}
.island-status .is-dot{
  width:7px; height:7px; border-radius:50%; background:#25d366; flex-shrink:0;
  animation: isPulse 2s ease infinite;
}
@keyframes isPulse{ 0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.5);} 50%{box-shadow:0 0 0 5px rgba(37,211,102,0);} }
.island-status .is-txt{ transition: opacity .25s ease, transform .25s var(--spring); display:inline-block; }
.island-status .is-txt.morph{ opacity:0; transform: translateY(8px); }

/* Scroll progress ring inside island */
.island-ring{ width:30px; height:30px; flex-shrink:0; transform: rotate(-90deg); }
.island-ring circle{ fill:none; stroke-width:3; }
.island-ring .ir-bg{ stroke: rgba(240,168,37,.15); }
.island-ring .ir-fg{ stroke: var(--gold); stroke-linecap:round; stroke-dasharray:75.4; stroke-dashoffset:75.4; transition: stroke-dashoffset .15s linear; }

/* Collapsed island (scroll down) */
#mainNav.island.collapsed{
  width: min(64%, 420px);
  padding: 6px 12px;
  top: 10px;
}
#mainNav.island.collapsed .nav-links,
#mainNav.island.collapsed .nav-cta{ display:none; }
#mainNav.island.collapsed .island-status{ max-width:150px; }
#mainNav.island.collapsed .hamburger{ display:flex !important; }

@media(max-width: 980px){
  #mainNav.island{ width: calc(100% - 20px); top:10px; padding:7px 12px; }
  #mainNav.island .nav-links, #mainNav.island .nav-cta{ display:none; }
  #mainNav.island .hamburger{ display:flex !important; margin-left:auto; }
  #mainNav.island .island-status{ margin-left:auto; max-width:145px; }
  #mainNav.island .hamburger{ margin-left:8px; }
}

/* Mobile menu → iOS sheet feel */
.mobile-menu{
  border-radius: 26px !important;
  top: 72px !important;
  left: 12px; right: 12px;
  background: var(--island-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  border: 1px solid var(--island-border) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  transform-origin: top center;
}
body{ padding-top: 0; }
main#main-content{ scroll-margin-top: 90px; }
section[id]{ scroll-margin-top: 92px; }

/* ═══════════════════════════════════════════════
   ✨ 3D TILT CARDS — FIX-303 (JS sets --rx/--ry)
═══════════════════════════════════════════════ */
.tilt3d{
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition: transform .35s var(--spring);
  /* will-change set dynamically by animation gate IIFE in ios26.js */
}
.tilt3d.tilting{ transition: transform .06s linear; }

/* Staggered fade-up entry */
.ios-reveal{ opacity:0; transform: translateY(26px); }
.ios-reveal.in{
  opacity:1; transform:none;
  transition: opacity var(--dur-slow) ease, transform var(--dur-slow) var(--spring);
  transition-delay: var(--stag, 0s);
}

/* ═══════════════════════════════════════════════
   📱 iPHONE 15 PRO FRAME — FIX-304
   Injected by ios26.js around .proj-img-panel imgs on demand,
   plus standalone .iphone-frame component
═══════════════════════════════════════════════ */
.iphone-frame{
  position:relative; width: 270px; aspect-ratio: 270/556;
  border-radius: 44px;
  background: linear-gradient(145deg,#3a3a3c,#1c1c1e 40%,#48484a);
  padding: 10px;
  box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.14), inset 0 0 0 5px #0a0a0a;
  transform-style: preserve-3d;
  transition: transform .5s var(--spring);
  touch-action: pan-y;
  margin: 0 auto;
}
.iphone-frame::before{ /* Dynamic Island notch */
  content:""; position:absolute; top:18px; left:50%; transform:translateX(-50%);
  width:82px; height:24px; border-radius:100px; background:#000; z-index:5;
  box-shadow: inset 0 0 4px rgba(255,255,255,.08);
}
.iphone-frame::after{ /* screen glare */
  content:""; position:absolute; inset:10px; border-radius:36px; z-index:4; pointer-events:none;
  background: linear-gradient(115deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.03) 28%, transparent 45%);
}
.iphone-btn{ position:absolute; background:#2c2c2e; border-radius:3px; }
.iphone-btn.power{ right:-3px; top:150px; width:3px; height:64px; }
.iphone-btn.volup{ left:-3px; top:120px; width:3px; height:40px; }
.iphone-btn.voldn{ left:-3px; top:168px; width:3px; height:40px; }
.iphone-screen{
  position:relative; width:100%; height:100%; border-radius:35px; overflow:hidden;
  background:#000;
}
.iphone-screen img{
  width:100%; display:block;
  animation: screenScroll 14s ease-in-out infinite alternate; /* live auto-scroll preview */
}
@keyframes screenScroll{ 0%,8%{ transform: translateY(0);} 92%,100%{ transform: translateY(calc(-100% + 536px)); } }
.iphone-glow{
  position:absolute; inset:-40px; z-index:-1; border-radius:50%;
  background: radial-gradient(circle, rgba(240,168,37,.32), transparent 65%);
  animation: ambient 5s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes ambient{ from{opacity:.55; transform:scale(.94);} to{opacity:1; transform:scale(1.06);} }

/* ═══════════════════════════════════════════════
   💰 PRICING 3.0 — FIX-305
═══════════════════════════════════════════════ */
/* iOS segmented control (region + billing) */
.ios-seg{
  display:flex; position:relative; margin: 26px auto 8px; width:max-content; max-width:100%;
  background: rgba(128,110,70,.14); border-radius:100px; padding:4px;
  border:1px solid var(--island-border);
}
.ios-seg .seg-pill{
  position:absolute; top:4px; bottom:4px; border-radius:100px;
  background: var(--gold);
  box-shadow: 0 4px 14px rgba(240,168,37,.4);
  transition: left var(--dur-med) var(--spring), width var(--dur-med) var(--spring);
  z-index:0;
}
.ios-seg button{
  position:relative; z-index:1; border:none; background:transparent; cursor:pointer;
  padding: 9px 18px; border-radius:100px; font-weight:800; font-size:13px;
  color: var(--text2); font-family:inherit; transition: color .3s ease;
  display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.ios-seg button.on{ color:#fff; }
[data-theme="light"] .ios-seg button.on{ color:#fff; }
.seg-save{
  font-size:9.5px; background:#16a34a; color:#fff; padding:2px 7px; border-radius:100px;
  animation: badgeBounce 2.4s var(--spring-pop) infinite;
}
@keyframes badgeBounce{ 0%,80%,100%{transform:translateY(0);} 88%{transform:translateY(-4px);} }

/* Price odometer roll */
.pkg-price-num{ display:inline-block; font-variant-numeric: tabular-nums; }
.pkg-price-num.rolling{ animation:none; }

/* Most Popular — rotating conic gold border */
.pkg-card.popular-3{
  position:relative; z-index:1; transform: scale(1.04);
  animation: popPulse 3.6s ease-in-out infinite;
}
@keyframes popPulse{ 0%,100%{box-shadow:0 18px 50px rgba(240,168,37,.22);} 50%{box-shadow:0 22px 64px rgba(240,168,37,.4);} }
.pkg-card.popular-3::before{
  content:""; position:absolute; inset:-2.5px; border-radius:inherit; z-index:-1;
  background: conic-gradient(from var(--spin,0deg), #f0a825, #6b4a08 30%, #f5d78a 50%, #6b4a08 70%, #f0a825);
  animation: conicSpin 4.5s linear infinite;
}
@property --spin{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes conicSpin{ to{ --spin: 360deg; } }
@supports not (background: conic-gradient(from var(--spin,0deg), red, blue)){
  .pkg-card.popular-3::before{ background: linear-gradient(135deg,#f0a825,#f5d78a,#f0a825); }
}
@media(max-width:640px){
  .pkg-card.popular-3{ transform: scale(1.02); }
}

/* Expandable features (iOS accordion) */
.pkg-feat-hidden{ display:none; }
.pkg-card.feat-open .pkg-feat-hidden{ display:flex; animation: featIn .4s var(--spring) both; }
@keyframes featIn{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;} }
.pkg-more-btn{
  background:transparent; border:1px dashed var(--island-border); color:var(--gold);
  border-radius:100px; padding:7px 14px; font-size:12px; font-weight:800; cursor:pointer;
  margin-top:8px; width:100%; font-family:inherit;
}

/* Trust micro-chips per card */
.pkg-trust-chip{
  display:inline-flex; align-items:center; gap:5px; margin-top:10px;
  font-size:10.5px; font-weight:800; color:var(--gold);
  background:rgba(240,168,37,.1); border:1px solid rgba(240,168,37,.2);
  padding:4px 10px; border-radius:100px;
}

/* Live scarcity fill bar */
.pkg-slot-fill{ height:6px; border-radius:100px; background:rgba(128,110,70,.22); overflow:hidden; margin-top:6px; }
.pkg-slot-fill i{
  display:block; height:100%; border-radius:inherit; width:0;
  background: linear-gradient(90deg,#f0a825,#e3552a);
  transition: width 1.1s var(--spring) .3s;
}

/* Sticky mini price bar */
.pkg-mini-bar{
  position:fixed; bottom:86px; left:50%; transform: translateX(-50%) translateY(140px);
  z-index:9800; display:flex; align-items:center; gap:12px;
  background: var(--island-bg); border:1px solid var(--island-border);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius:100px; padding:9px 10px 9px 20px;
  box-shadow: 0 16px 44px rgba(0,0,0,.4);
  transition: transform var(--dur-med) var(--spring);
  max-width: calc(100% - 28px);
}
.pkg-mini-bar.show{ transform: translateX(-50%) translateY(0); }
.pkg-mini-bar .pmb-name{ font-size:12px; font-weight:800; color:var(--text2); letter-spacing:.5px; }
.pkg-mini-bar .pmb-price{ font-size:16px; font-weight:800; color:var(--gold); white-space:nowrap; }
.pkg-mini-bar a{
  background:var(--gold); color:#fff; text-decoration:none; font-weight:800; font-size:13px;
  padding:10px 18px; border-radius:100px; white-space:nowrap;
}

/* ── iOS Bottom Sheet — FIX-306 ── */
.ios-sheet-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9950;
  opacity:0; pointer-events:none; transition:opacity .35s ease;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.ios-sheet-backdrop.open{ opacity:1; pointer-events:auto; }
.ios-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:9960;
  background: var(--sheet-bg);
  border-radius: 26px 26px 0 0;
  border-top: 1px solid var(--island-border);
  box-shadow: 0 -24px 70px rgba(0,0,0,.55);
  transform: translateY(105%);
  transition: transform var(--dur-med) var(--spring);
  max-height: 82dvh; overflow-y:auto; overscroll-behavior: contain;
  padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
  touch-action: pan-y;
}
.ios-sheet.open{ transform: translateY(0); }
.sheet-grab{ width:42px; height:5px; border-radius:100px; background:rgba(150,130,90,.4); margin:6px auto 16px; }
.sheet-title{ font-size:21px; font-weight:800; color:var(--text); margin:0 0 4px; }
.sheet-price{ font-size:30px; font-weight:800; color:var(--gold); margin:2px 0 14px; }
.sheet-price small{ font-size:13px; color:var(--text2); font-weight:600; }
.sheet-feat{ display:flex; gap:9px; align-items:flex-start; padding:8px 0; border-bottom:1px dashed rgba(150,130,90,.18); font-size:14px; color:var(--text2); }
.sheet-feat b{ color:#25d366; flex-shrink:0; }
.sheet-cta{
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:18px;
  background:#25d366; color:#fff; text-decoration:none; font-weight:800; font-size:15px;
  padding:15px; border-radius:16px; box-shadow:0 8px 24px rgba(37,211,102,.3);
}

/* ═══════════════════════════════════════════════
   🎠 CLIENT LOGO MARQUEE — FIX-307 (JS wraps grid)
═══════════════════════════════════════════════ */
.marquee-wrap{ 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:14px; width:max-content; animation: marquee 32s linear infinite; will-change: transform; }
.marquee-track:hover, .marquee-wrap:active .marquee-track{ animation-play-state: paused; }
.marquee-track.rev{ animation-direction: reverse; animation-duration: 38s; }
@keyframes marquee{ to{ transform: translateX(-50%); } }
.marquee-track > *{ flex-shrink:0; }

/* ═══════════════════════════════════════════════
   ⌚ ACTIVITY RINGS (stats) — FIX-308
═══════════════════════════════════════════════ */
.stat-ring{ position:relative; width:96px; height:96px; margin:0 auto 8px; }
.stat-ring svg{ transform:rotate(-90deg); width:100%; height:100%; }
.stat-ring circle{ fill:none; stroke-width:8; stroke-linecap:round; }
.stat-ring .sr-bg{ stroke: rgba(240,168,37,.14); }
.stat-ring .sr-fg{ stroke: url(#goldRingGrad); stroke-dasharray: 251.3; stroke-dashoffset: 251.3; transition: stroke-dashoffset 1.6s var(--spring) .2s; }
.stat-ring .sr-val{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:19px; color:var(--gold); }

/* ═══════════════════════════════════════════════
   📈 SCROLL-DRIVEN TIMELINE — FIX-309
═══════════════════════════════════════════════ */
#results-timeline .rtl-grid{ position:relative; }
.rtl-line{
  position:absolute; left:18px; top:0; bottom:0; width:3px; border-radius:100px;
  background: rgba(150,130,90,.2); z-index:0;
}
.rtl-line i{
  display:block; width:100%; border-radius:inherit; height: var(--fill,0%);
  background: linear-gradient(180deg,#f5d78a,#f0a825);
  box-shadow: 0 0 12px rgba(240,168,37,.55);
  transition: height .2s linear;
}
@media(max-width:768px){ .rtl-line{ left:14px; } }

/* ═══════════════════════════════════════════════
   🎬 REELS — CENTER-SNAP CAROUSEL — FIX-310
═══════════════════════════════════════════════ */
.reels-grid{
  display:flex !important; grid-template-columns:none !important;
  overflow-x:auto; scroll-snap-type: x mandatory;
  gap:18px; padding: 12px 8% 22px;
  scrollbar-width:none; -ms-overflow-style:none;
  scroll-padding: 0 8%;
}
.reels-grid::-webkit-scrollbar{ display:none; }
.reel-card{
  scroll-snap-align:center; flex: 0 0 min(66vw, 300px);
  transition: transform var(--dur-med) var(--spring), filter var(--dur-med) ease, opacity var(--dur-med) ease;
  transform: scale(.9); filter: blur(1px) brightness(.65); opacity:.75;
}
.reel-card.reel-active{ transform: scale(1); filter:none; opacity:1; }
@media(min-width:900px){ .reel-card{ flex-basis: 300px; } }

/* ═══════════════════════════════════════════════
   💬 TESTIMONIAL CARD STACK — FIX-311
═══════════════════════════════════════════════ */
.tstack-wrap{ position:relative; max-width:520px; margin:26px auto 0; height:300px; touch-action: pan-y; }
.tstack-card{
  position:absolute; inset:0; border-radius:24px; padding:26px;
  background: var(--island-bg); border:1px solid var(--island-border);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  transition: transform var(--dur-med) var(--spring), opacity var(--dur-med) ease;
  cursor: grab; user-select:none;
  display:flex; flex-direction:column; gap:12px; overflow:hidden;
}
.tstack-card:active{ cursor:grabbing; }
.tstack-card[data-pos="0"]{ z-index:3; }
.tstack-card[data-pos="1"]{ z-index:2; transform: translateY(16px) scale(.95); opacity:.7; pointer-events:none; }
.tstack-card[data-pos="2"]{ z-index:1; transform: translateY(32px) scale(.9); opacity:.4; pointer-events:none; }
.tstack-card[data-pos="h"]{ opacity:0; pointer-events:none; transform: translateY(40px) scale(.86); }
.tstack-card.flyout{ transition: transform .45s ease-in, opacity .45s ease-in; opacity:0 !important; }
.tstack-quote{ font-size:15px; line-height:1.65; color:var(--text); flex:1; overflow:hidden; }
.tstack-who{ display:flex; align-items:center; gap:11px; }
.tstack-av{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,#f0a825,#8a5a06); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px;
}
.tstack-name{ font-weight:800; font-size:13.5px; color:var(--text); display:flex; align-items:center; gap:5px; }
.tstack-role{ font-size:11.5px; color:var(--text2); }
.tstack-hint{ text-align:center; font-size:11px; color:var(--text2); margin-top:12px; letter-spacing:.5px; }
.ig-verified{ width:14px; height:14px; flex-shrink:0; }

/* ═══════════════════════════════════════════════
   🔘 FAB — RADIAL EXPAND — FIX-312
═══════════════════════════════════════════════ */
.premium-fab-bar{ gap:8px; }
.fab-idle-bounce{ animation: fabBounce .9s var(--spring-pop); }
@keyframes fabBounce{ 0%,100%{transform:translateX(-50%) translateY(0);} 35%{transform:translateX(-50%) translateY(-10px);} 65%{transform:translateX(-50%) translateY(-4px);} }
.fab-tip{
  position:fixed; bottom:92px; left:50%; transform:translateX(-50%) translateY(8px);
  background:var(--island-bg); border:1px solid var(--island-border);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:var(--text); font-size:12.5px; font-weight:700;
  padding:9px 16px; border-radius:100px; z-index:9899;
  opacity:0; pointer-events:none; transition:opacity .4s ease, transform .4s var(--spring);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.fab-tip.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* Back-to-top scroll ring — FIX-313 */
.btt-ring{
  position:fixed; right:16px; bottom:96px; width:46px; height:46px; z-index:9800;
  border-radius:50%; background:var(--island-bg); border:1px solid var(--island-border);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  opacity:0; pointer-events:none; transform:scale(.7);
  transition: opacity .3s ease, transform .3s var(--spring-pop);
  box-shadow:0 10px 26px rgba(0,0,0,.3);
}
.btt-ring.show{ opacity:1; pointer-events:auto; transform:scale(1); }
.btt-ring svg{ position:absolute; inset:3px; transform:rotate(-90deg); }
.btt-ring circle{ fill:none; stroke-width:2.6; }
.btt-ring .bt-bg{ stroke:rgba(240,168,37,.16); }
.btt-ring .bt-fg{ stroke:var(--gold); stroke-linecap:round; stroke-dasharray:113; stroke-dashoffset:113; }
.btt-ring span{ color:var(--gold); font-size:16px; font-weight:800; line-height:1; }

/* ═══════════════════════════════════════════════
   🌗 THEME — VIEW TRANSITION REVEAL — FIX-314
═══════════════════════════════════════════════ */
::view-transition-old(root){ animation:none; }
::view-transition-new(root){ animation: themeReveal .55s var(--spring); }
@keyframes themeReveal{
  from{ clip-path: circle(0 at var(--tx,90%) var(--ty,92%)); }
  to{ clip-path: circle(150% at var(--tx,90%) var(--ty,92%)); }
}
#dm-toggle{ position:relative; overflow:hidden; }
#dm-toggle .dm-ico{ display:inline-block; transition: transform .5s var(--spring-pop), opacity .3s ease; }
#dm-toggle.switching .dm-ico{ transform: rotate(180deg) scale(.4); opacity:0; }

/* Hero shimmer + mesh aurora — FIX-315 */
.hero h1 .shimmer, .hero-title .shimmer{
  color: var(--gold); /* solid fallback */
}
@supports(-webkit-background-clip:text) or (background-clip:text){
  .hero h1 .shimmer, .hero-title .shimmer{
    background: linear-gradient(100deg, var(--gold) 20%, #ffe9b0 40%, var(--gold) 60%);
    background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
    animation: shimmer 3.6s linear infinite;
  }
}
@keyframes shimmer{ to{ background-position:-200% center; } }
.hero-aurora{
  position:absolute; inset:-10%; z-index:0; pointer-events:none; opacity:.5;
  background:
    radial-gradient(38% 30% at 22% 28%, rgba(240,168,37,.16), transparent 70%),
    radial-gradient(30% 26% at 78% 66%, rgba(227,85,42,.10), transparent 70%),
    radial-gradient(26% 24% at 55% 15%, rgba(245,215,138,.09), transparent 70%);
  animation: aurora 13s ease-in-out infinite alternate;
  /* will-change set dynamically by animation gate IIFE in ios26.js */
}
@keyframes aurora{ from{ transform:translate3d(-2.5%,-1.5%,0) scale(1);} to{ transform:translate3d(2.5%,2%,0) scale(1.07);} }
[data-theme="light"] .hero-aurora{ opacity:.32; }

/* CTA gold ripple */
.gold-ripple{ position:relative; overflow:hidden; }
.gold-ripple .ripple{
  position:absolute; border-radius:50%; background:rgba(255,236,180,.55);
  transform:scale(0); animation: rip .55s ease-out forwards; pointer-events:none;
}
@keyframes rip{ to{ transform:scale(3.2); opacity:0; } }

/* Footer wave + glass — FIX-316 */
footer{ position:relative; }
.footer-wave{ display:block; width:100%; height:34px; margin-bottom:-6px; }
.footer-wave path{
  fill:none; stroke:url(#footWaveGrad); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray: 1600; stroke-dashoffset: 1600;
  animation: waveDraw 3.4s var(--spring) forwards;
}
@keyframes waveDraw{ to{ stroke-dashoffset:0; } }

/* Service card flip — FIX-317 */
.flip-ready{ perspective:1000px; }
.flip-inner{ position:relative; transition: transform .7s var(--spring); transform-style:preserve-3d; }
.flip-ready.flipped .flip-inner{ transform: rotateY(180deg); }
.flip-back{
  position:absolute; inset:0; transform: rotateY(180deg); backface-visibility:hidden;
  border-radius:inherit; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:14px; background:linear-gradient(150deg,#20180c,#0e0a05);
  border:1px solid var(--island-border); color:var(--text); font-size:12px; text-align:center;
}
[data-theme="light"] .flip-back{ background:linear-gradient(150deg,#fff6e2,#fdefd0); }
.flip-front{ backface-visibility:hidden; }

/* ═══════════════════════════════════════════════
   ♿ REDUCED MOTION — hard stop everything — FIX-318
═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .ios-reveal{ opacity:1; transform:none; }
  .reel-card{ transform:none; filter:none; opacity:1; }
  .iphone-screen img{ animation:none; }
}

/* ═══ FIX-304b: HERO PHONE SHOWCASE placement ═══ */
.hero-phone-zone{
  position:relative; display:flex; flex-direction:column; align-items:center;
  margin: 34px auto 6px; max-width: 340px; z-index:2;
  perspective: 1200px;
}
.hero-phone-zone .iphone-frame{ cursor: grab; }
.hero-phone-zone .iphone-frame:active{ cursor: grabbing; }
.hero-phone-hint{ margin-top:14px; font-size:11px; letter-spacing:.6px; color:var(--text2); font-weight:700; }
.hero-mascot{
  position:absolute; right:-26px; bottom:-10px; width:110px; z-index:3;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.4));
  animation: mascotFloat 4.5s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes mascotFloat{ from{ transform: translateY(0) rotate(-2deg);} to{ transform: translateY(-12px) rotate(3deg);} }
@media(min-width:1100px){
  .hero-phone-zone{ position:absolute; right:4%; top:50%; transform:translateY(-50%); margin:0; }
}
@media (prefers-reduced-motion: reduce){ .hero-mascot{ animation:none; } }

/* ═══════════════════════════════════════════════════════════════
   PHASE 6 — GAPS CLOSURE (FIX-320 series)
═══════════════════════════════════════════════════════════════ */

/* ── FIX-320: CLIENT LOGO DUAL MARQUEE + tooltips ── */
.client-marquee-sec{ padding: 40px 0 46px; border-top:1px solid var(--divider); border-bottom:1px solid var(--divider); background:var(--bg); overflow:hidden; }
.client-marquee-sec .cm-title{ text-align:center; font-size:12px; font-weight:800; letter-spacing:2.5px; text-transform:uppercase; color:var(--text2); margin-bottom:22px; }
.cm-row{ overflow:visible; margin-bottom:14px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.cm-track{ display:flex; gap:16px; width:max-content; animation: marquee 30s linear infinite; }
.cm-track.rev{ animation-direction:reverse; animation-duration:36s; }
.cm-row:hover .cm-track, .cm-row:active .cm-track{ animation-play-state:paused; }
.cm-chip{
  position:relative; flex-shrink:0; display:flex; align-items:center; gap:12px;
  background: var(--island-bg); border:1px solid var(--island-border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius:18px; padding:12px 20px; cursor:default;
  transition: transform var(--dur-fast) var(--spring), box-shadow var(--dur-fast) ease;
}
.cm-chip:hover{ transform: translateY(-4px); box-shadow:0 14px 34px rgba(0,0,0,.3); }
.cm-chip img{
  height:34px; width:auto; max-width:110px; object-fit:contain; border-radius:8px;
  filter: grayscale(1) opacity(.75); transition: filter .35s ease;
}
.cm-chip:hover img{ filter:none; }
.cm-chip .cm-name{ font-weight:800; font-size:14px; color:var(--text); }
.cm-chip .cm-cat{ font-size:10.5px; color:var(--text2); font-weight:700; letter-spacing:.4px; }
.cm-tip{
  position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(6px) scale(.92);
  background:var(--gold); color:#fff; font-size:11px; font-weight:800; white-space:nowrap;
  padding:7px 13px; border-radius:100px; opacity:0; pointer-events:none;
  transition: opacity .25s ease, transform .3s var(--spring-pop);
  box-shadow:0 8px 22px rgba(240,168,37,.4); z-index:5;
}
.cm-tip::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--gold); }
.cm-chip:hover .cm-tip{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
/* v3.7: tap-toggle for mobile */
.cm-chip.tip-open .cm-tip{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); }

/* ── FIX-370: TRUST CHIP MARQUEE ── */
.trust-marquee-sec{
  padding: 18px 0 22px; border-bottom:1px solid var(--divider);
  background:var(--bg); overflow:hidden;
}
.tm-chip{
  flex-shrink:0; display:flex; align-items:center; gap:10px;
  background: var(--island-bg); border:1px solid var(--island-border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius:14px; padding:10px 18px; white-space:nowrap;
}
.tm-icon{ font-size:18px; flex-shrink:0; }
.tm-label{ font-weight:800; font-size:12.5px; color:var(--text); line-height:1.3; }
.tm-sub{ font-size:10px; color:var(--text2); font-weight:600; }

/* ── FIX-321: ACTIVITY RINGS on stats ── */
.stat-item{ position:relative; }
.stat-item .stat-ring-wrap{ position:relative; width:104px; height:104px; margin:0 auto 10px; }
.stat-item .stat-ring-wrap svg{ position:absolute; inset:0; transform:rotate(-90deg); }
.stat-item .stat-ring-wrap circle{ fill:none; stroke-width:7; stroke-linecap:round; }
.stat-item .stat-ring-wrap .srw-bg{ stroke: rgba(240,168,37,.13); }
.stat-item .stat-ring-wrap .srw-fg{ stroke:url(#goldRingGrad); stroke-dasharray:283; stroke-dashoffset:283; transition: stroke-dashoffset 1.7s var(--spring) .25s; }
.stat-item .stat-ring-wrap .num{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }

/* ── FIX-322: SERVICE CARD 3D FLIP (desktop hover) ── */
@media (hover:hover) and (pointer:fine){
  .ind-card{ perspective:800px; background:transparent !important; border:none !important; box-shadow:none !important; }
  .ind-card .ifl{
    position:relative; width:100%; height:100%; transform-style:preserve-3d;
    transition: transform .65s var(--spring);
  }
  .ind-card:hover .ifl{ transform: rotateY(180deg); }
  .ind-card .ifl-face{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    border-radius:18px; padding:16px 12px; backface-visibility:hidden; min-height:100%;
    background:var(--bg2); border:1px solid var(--divider);
  }
  .ind-card .ifl-back{
    position:absolute; inset:0; transform:rotateY(180deg);
    background: linear-gradient(155deg, color-mix(in srgb, var(--ic) 16%, var(--bg2)), var(--bg2));
    border:1px solid var(--ic); justify-content:flex-start; text-align:left;
    align-items:flex-start; padding:13px; gap:5px; overflow:hidden;
  }
  .ifl-back .ib-pain{ font-size:10px; font-weight:800; color:var(--ic); line-height:1.35; }
  .ifl-back .ib-svc{ font-size:9.8px; color:var(--text2); line-height:1.4; display:flex; gap:4px; }
  .ifl-back .ib-svc b{ color:var(--ic); }
  .ifl-back .ib-tap{ margin-top:auto; font-size:9px; font-weight:800; color:var(--gold); letter-spacing:.5px; }
}

/* ── FIX-323: PROCESS STEPS light-up + progress ── */
.steps-progress{
  height:4px; border-radius:100px; background:rgba(150,130,90,.18);
  margin:18px auto 0; max-width:520px; overflow:hidden;
}
.steps-progress i{ display:block; height:100%; width:0; border-radius:inherit;
  background:linear-gradient(90deg,#f5d78a,#f0a825); box-shadow:0 0 10px rgba(240,168,37,.5);
  transition: width .5s var(--spring); }
.scard{ transition: box-shadow .5s ease, border-color .5s ease, transform .5s var(--spring); }
.scard.lit{ border-color: var(--gold) !important; box-shadow: 0 0 0 1px rgba(240,168,37,.35), 0 14px 36px rgba(240,168,37,.14); }
.scard.lit .scard-num{ color: var(--gold); }

/* ── FIX-324: REEL SOUND — island style ── */
.reel-sound-btn{
  top:auto !important; bottom:12px; right:50% !important; transform:translateX(50%);
  width:auto !important; height:auto !important; border-radius:100px !important;
  padding:8px 16px; display:flex; gap:7px; font-size:12px !important; font-weight:800;
  background: rgba(10,8,4,.68) !important; border:1px solid rgba(240,168,37,.35) !important;
  backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px);
  color:#f5d78a !important; letter-spacing:.4px;
  transition: transform .25s var(--spring-pop), background .25s ease !important;
}
.reel-sound-btn:active{ transform:translateX(50%) scale(.92); }
.reel-card:not(.reel-active) .reel-sound-btn{ opacity:0; pointer-events:none; }

/* ── FIX-325: RADIAL FAB MENU ── */
.fab-cluster{ position:fixed; right:16px; bottom:calc(18px + env(safe-area-inset-bottom)); z-index:9905; display:flex; flex-direction:column; align-items:flex-end; gap:12px; pointer-events: none !important; }
.fab-cluster .fab-main{ pointer-events: auto !important; }
.fab-main{
  width:60px; height:60px; border-radius:50%; border:none; cursor:pointer;
  background: linear-gradient(145deg,#f0a825,#b87b0a); color:#fff; font-size:24px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 34px rgba(240,168,37,.45), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .35s var(--spring-pop), box-shadow .3s ease;
  position:relative; z-index:2;
}
.fab-main:active{ transform:scale(.92); }
.fab-cluster.open .fab-main{ transform: rotate(135deg); }
.fab-item{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  opacity:0; transform: translateY(16px) scale(.7); pointer-events:none;
  transition: opacity .3s ease, transform .42s var(--spring-pop);
}
.fab-cluster.open .fab-item{ opacity:1; transform:none; pointer-events:auto !important; }
.fab-cluster.open .fab-item:nth-child(1){ transition-delay:.14s; }
.fab-cluster.open .fab-item:nth-child(2){ transition-delay:.10s; }
.fab-cluster.open .fab-item:nth-child(3){ transition-delay:.06s; }
.fab-cluster.open .fab-item:nth-child(4){ transition-delay:.02s; }
.fab-item .fi-lbl{
  background:var(--island-bg); border:1px solid var(--island-border);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  color:var(--text); font-size:12px; font-weight:800; padding:7px 13px; border-radius:100px;
  box-shadow:0 8px 22px rgba(0,0,0,.3); white-space:nowrap;
}
.fab-item .fi-ico{
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:19px; box-shadow:0 10px 26px rgba(0,0,0,.35);
}
.fab-scrim{ position:fixed; inset:0; z-index:9904; background:rgba(0,0,0,.3); opacity:0; pointer-events:none; transition:opacity .3s ease; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.fab-scrim.open{ opacity:1; pointer-events:auto; }
/* old bar → sirf theme switch bacha, left side */
.premium-fab-bar{ left:16px; right:auto; transform:none !important; bottom:18px; padding:5px; animation:none; opacity:1; }
/* .premium-fab-bar .fab-call, .premium-fab-bar .fab-wa{ display:none !important; } - Disabled to keep buttons visible on mobile */
/* @keyframes fabBounce defined at line ~410 above — no duplicate needed */
.fab-main.fab-idle-bounce{ animation: fabBounce .9s var(--spring-pop); }
.fab-tip{ left:auto; right:86px; bottom:32px; transform:translateY(6px); }
.fab-tip.show{ transform:translateY(0); }
.btt-ring{ bottom:calc(92px + env(safe-area-inset-bottom)); }

/* ── FIX-326: iOS SUN↔MOON THEME SWITCH ── */
#dm-toggle.ios-switch{
  width:66px; height:36px; border-radius:100px; padding:0 !important; position:relative;
  background: linear-gradient(145deg,#2c2510,#171207) !important;
  border:1px solid var(--island-border) !important;
  transition: background .5s ease !important; overflow:visible;
}
[data-theme="light"] #dm-toggle.ios-switch{ background: linear-gradient(145deg,#ffe9b8,#f5d78a) !important; }
#dm-toggle.ios-switch .sw-knob{
  position:absolute; top:3px; left:3px; width:28px; height:28px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #fff8e6, #f0c860 70%);
  box-shadow: 0 3px 9px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center; font-size:14px;
  transition: left .45s var(--spring-pop), transform .45s var(--spring-pop);
}
[data-theme="dark"] #dm-toggle.ios-switch .sw-knob{ left: calc(100% - 31px); background: radial-gradient(circle at 35% 30%, #e8e4da, #9b937f 75%); }
#dm-toggle.ios-switch .sw-ico{ transition: transform .5s var(--spring-pop); display:block; }
#dm-toggle.ios-switch:active .sw-knob{ transform: scaleX(1.15); }
#dm-toggle.ios-switch .sw-stars, #dm-toggle.ios-switch .sw-rays{
  position:absolute; font-size:10px; top:50%; transform:translateY(-50%); opacity:.85; pointer-events:none;
  transition: opacity .4s ease;
}
#dm-toggle.ios-switch .sw-rays{ right:9px; } #dm-toggle.ios-switch .sw-stars{ left:9px; }
[data-theme="dark"] #dm-toggle.ios-switch .sw-rays{ opacity:0; }
[data-theme="light"] #dm-toggle.ios-switch .sw-stars{ opacity:0; }
[data-theme="light"] #dm-toggle.ios-switch .sw-rays{ opacity:.9; }
[data-theme="dark"] #dm-toggle.ios-switch .sw-stars{ opacity:.9; }

/* ── FIX-327: COMPARE MODE morph ── */
.cmp-mode-btn{
  display:flex; align-items:center; gap:8px; margin:22px auto 0; cursor:pointer;
  background:transparent; border:1.5px solid var(--island-border); color:var(--gold);
  font-weight:800; font-size:13px; padding:11px 22px; border-radius:100px; font-family:inherit;
  transition: background .3s ease, transform .3s var(--spring);
}
.cmp-mode-btn:hover{ background:rgba(240,168,37,.1); }
#pkgGrid.cmp-hidden{
  transform: scale(.94); opacity:0; height:0 !important; overflow:hidden; margin:0; pointer-events:none;
  transition: transform .5s var(--spring), opacity .4s ease;
}
#pkgGrid{ transition: transform .5s var(--spring), opacity .4s ease; }
.cmp-highlight{ animation: cmpGlow 1.2s ease 2; border-radius:18px; }
@keyframes cmpGlow{ 0%,100%{ box-shadow:none; } 50%{ box-shadow:0 0 0 3px rgba(240,168,37,.45), 0 16px 44px rgba(240,168,37,.18); } }

/* ── FIX-328: MAGNETIC CTA ── */
.magnetic{ transition: transform .3s var(--spring); will-change:transform; }
.magnetic.magnet-on{ transition: transform .08s linear; }

/* Trust chip real tiers */
.pkg-trust-chip b{ font-weight:800; }

@media (prefers-reduced-motion: reduce){
  .cm-track{ animation:none; } .fab-item{ transition:none; } .scard.lit{ transition:none; }
}

/* ── FIX-330: Reel view toggle — Grid ↔ Carousel (real, functional) ── */
.reel-view-toggle{ display:flex; gap:4px; background:rgba(150,130,90,.14); border:1px solid var(--island-border); border-radius:100px; padding:4px; }
.rvt-btn{ border:none; background:transparent; cursor:pointer; font-family:inherit; font-weight:800; font-size:12.5px;
  padding:9px 18px; border-radius:100px; color:var(--text2); transition:background .3s var(--spring), color .3s ease; }
.rvt-btn.active{ background:var(--gold); color:#fff; box-shadow:0 4px 14px rgba(240,168,37,.35); }
.reels-grid.grid-mode{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:16px; overflow:visible; padding:12px 0 22px; }
.reels-grid.grid-mode .reel-card{ scroll-snap-align:none; transform:none !important; filter:none !important; opacity:1 !important; min-width: 0 !important; }
@media(max-width:900px){ .reels-grid.grid-mode{ grid-template-columns:repeat(2,1fr) !important; gap:12px; } }

/* ── FIX-8 (v3.7): hero service strip — marquee on mobile, flex-wrap on desktop ── */
.hero-service-strip{
  overflow:hidden; margin:22px 0 6px; font-size:12.5px; font-weight:800; color:var(--text2); letter-spacing:.3px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.hero-service-strip .hss-track{
  display:flex; align-items:center; gap:10px; width:max-content;
  animation: marquee 40s linear infinite;
}
.hero-service-strip .hss-dot{ color:var(--gold); opacity:.6; }
@media(min-width:769px){
  .hero-service-strip{ -webkit-mask-image:none; mask-image:none; }
  .hero-service-strip .hss-track{ flex-wrap:wrap; width:auto; animation:none; }
}
.hero-scroll-cue{ display:inline-flex; flex-direction:column; align-items:center; gap:6px; margin:34px auto 4px; text-decoration:none;
  color:var(--text2); font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; opacity:.85; transition:opacity .3s ease; }
.hero-scroll-cue:hover{ opacity:1; }
.hero-scroll-cue svg{ animation: scrollBob 1.8s ease-in-out infinite; color:var(--gold); }
@keyframes scrollBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }
@media (prefers-reduced-motion: reduce){ .hero-scroll-cue svg{ animation:none; } }

/* ── FIX-400: Premium FAB Bar separation and layout on mobile ── */
@media(max-width:768px){
  .premium-fab-bar {
    gap: 8px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 20px) !important;
  }
  .premium-fab-bar .fab-call, .premium-fab-bar .fab-wa {
    display: inline-flex !important;
  }
  .fab-led-brand {
    background: #0a0a0a !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 100px !important;
    padding: 0 14px !important;
    margin: 0 !important;
  }
}

/* ═══════════════════════════════════════════════
   📱 PWA MAX — Standalone, Toasts, Install Card
═══════════════════════════════════════════════ */
html.pwa-standalone body {
  overscroll-behavior-y: none; /* Native app feel, no rubber-banding */
}

/* Install Card */
.pwa-install-card {
  position: fixed; bottom: -120%; left: 16px; right: 16px; max-width: 400px; margin: 0 auto;
  background: var(--island-bg); border: 1px solid var(--gold); border-radius: 20px;
  padding: 20px; z-index: 9999;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 20px rgba(240,168,37,0.1);
  transition: bottom 0.5s var(--spring);
}
.pwa-install-card.show { bottom: calc(24px + env(safe-area-inset-bottom)); }
.pic-content { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.pic-icon { width: 56px; height: 56px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.pic-text h4 { font-size: 16px; font-weight: 700; color: var(--gold); margin-bottom: 4px; line-height: 1.2; }
.pic-text p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.4; }
.pic-actions { display: flex; gap: 12px; }
.pic-btn {
  flex: 1; padding: 12px; border-radius: 12px; font-weight: 700; font-size: 14px;
  cursor: pointer; border: none; text-align: center;
}
.pic-install { background: linear-gradient(135deg, #f0a825, #b87b0a); color: #fff; box-shadow: 0 4px 14px rgba(184,123,10,0.3); }
.pic-snooze { background: rgba(255,255,255,0.05); color: var(--text); border: 1px solid rgba(255,255,255,0.1); }
.pic-ios-sheet p { font-size: 14px; color: var(--text); line-height: 1.5; text-align: center; margin-bottom: 12px; }

/* Status Toast (Online/Offline/Share) */
.pwa-toast {
  position: fixed; top: -60px; left: 50%; transform: translateX(-50%);
  background: var(--island-bg); border: 1px solid var(--gold); border-radius: 100px;
  padding: 8px 16px; font-size: 13px; font-weight: 700; color: var(--gold);
  z-index: 10000; transition: top 0.4s var(--spring);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.3); pointer-events: none;
}
.pwa-toast.error { border-color: #ef4444; color: #ef4444; }
.pwa-toast.show { top: calc(84px + env(safe-area-inset-top)); }

/* SW Update Toast */
.pwa-update-toast {
  position: fixed; bottom: -80px; left: 50%; transform: translateX(-50%);
  background: var(--island-bg); border: 1px solid var(--gold); border-radius: 100px;
  padding: 8px 8px 8px 20px; font-size: 13.5px; font-weight: 600; color: var(--text);
  z-index: 10000; transition: bottom 0.4s var(--spring);
  display: flex; align-items: center; gap: 16px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(184,123,10,0.2);
}
.pwa-update-toast.show { bottom: calc(24px + env(safe-area-inset-bottom)); }
.pwa-update-toast button {
  background: var(--gold); color: #fff; border: none; padding: 6px 16px;
  border-radius: 100px; font-weight: 700; font-size: 13px; cursor: pointer;
}