/* =========================================================
   Finesse Tap Card — Liquid Glass template
   Finesse Media LLC

   Per client, edit ONLY the "BRAND TOKENS" block below.
   Everything else is the shared glass system.
   ========================================================= */

@font-face{ font-family:"Display"; font-weight:600; font-style:normal; font-display:swap; src:url("../fonts/display-600.woff2") format("woff2"); }
@font-face{ font-family:"Display"; font-weight:700; font-style:normal; font-display:swap; src:url("../fonts/display-700.woff2") format("woff2"); }

/* ================= BRAND TOKENS (edit per client) ================= */
:root{
  --display-font:"Display", Georgia, "Times New Roman", serif;
  --name-weight:700; --name-transform:uppercase; --name-tracking:.05em;
  --accent:#F0C95E; --accent-soft:#E9CF86;
  --badge-a:#2A2008; --badge-b:#5E4612; --badge-ink:#F6DC8C;
  --icon-ink:#F3D57E; --motif:#F0C95E;
  --field-1:#1E4FFF; --field-2:#0A1F7A; --field-3:#B8861A; --field-4:#2B6BFF;
  --halo-a:rgba(255,214,110,.32); --halo-b:rgba(47,107,255,.25);
}
:root:root:root{ --bg:#061038; --field-o:.75; --solid-bg:#0A1A55; --solid-bg-hi:#14287A; }
/* crown-point pattern */
.fields::before{ content:""; position:absolute; inset:0; z-index:1; opacity:.08; background-color:#F0C95E;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><path d='M8 32 12 18 20 26 24 14 28 26 36 18 40 32Z' fill='none' stroke='black' stroke-width='1.3'/></svg>") 0 0/48px 48px repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><path d='M8 32 12 18 20 26 24 14 28 26 36 18 40 32Z' fill='none' stroke='black' stroke-width='1.3'/></svg>") 0 0/48px 48px repeat; }
/* --- shared: always-dark system tokens so the card reads black/gold/blue on every phone --- */
:root:root:root{
  --ink:#F4EEDF; --ink-2:rgba(244,238,223,.76); --ink-3:rgba(244,238,223,.54);
  --field-o:.6;
  --glass:rgba(255,255,255,.07); --glass-strong:rgba(255,255,255,.12);
  --glass-rim-a:rgba(255,255,255,.40); --glass-rim-b:rgba(255,255,255,.05); --glass-edge:rgba(0,0,0,.3);
  --glass-shadow:0 12px 34px -12px rgba(0,0,0,.7), 0 2px 6px -2px rgba(0,0,0,.45);
  --spec:rgba(255,255,255,.22);
  --blur:blur(20px) saturate(1.7) brightness(.95);
  --prominent:rgba(240,201,94,.97); --prominent-ink:#0A0D1C;
  --solid-pop:#F0C95E; --solid-pop-ink:#0A0D1C; --solid-icon:#F3D57E;
  color-scheme:dark;
}
/* --- shared: bigger logo that breaks out of the glass orb --- */
body .hero.logo-only{ width:min(286px, 72vw); margin:40px auto 48px; }
body .hero.logo-only .orb{ background:radial-gradient(closest-side, var(--halo-a) 0%, var(--halo-b) 58%, transparent 100%);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:0 0 70px -6px var(--halo-a); }
body .hero.logo-only .orb::after{ display:none; }
body .hero.logo-only .orb::before{ inset:-6px; border-color:rgba(240,201,94,.6); }
body .hero.logo-only .orb .logo{ width:114%; height:114%; max-width:none;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(240,201,94,.3)); }
#name::after{ content:""; display:block; width:160px; height:10px; margin:12px auto 0;
  background:
    radial-gradient(circle,#4D86FF 0 3px,rgba(47,107,255,.45) 4px,transparent 7px) center/14px 10px no-repeat,
    linear-gradient(90deg,transparent,#D9A92E 18%,#FFE08A 50%,#D9A92E 82%,transparent) center/100% 2px no-repeat; }
#name{ font-size:clamp(26px,7.6vw,40px); line-height:1.08;
  background:linear-gradient(180deg,#FFF2C2 0%,#F0C95E 45%,#B88A22 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* --- epic logo animation: twin counter-rotating crown rings, pulsing sapphire halo, gold light sweep --- */
body .hero.logo-only::before, body .hero.logo-only::after{ content:""; position:absolute; border-radius:50%; pointer-events:none; z-index:0; }
/* outer ring: gold and sapphire comets chasing around */
body .hero.logo-only::before{ inset:-26px;
  background:conic-gradient(from var(--ring-a), transparent 0 20%, rgba(240,201,94,.25) 32%, #FFD86A 45%, #FFF6D0 48%, transparent 49% 70%, rgba(77,134,255,.3) 82%, #6FA0FF 95%, #E6EEFF 98%, transparent 99%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  filter:drop-shadow(0 0 8px rgba(255,214,110,.95)) drop-shadow(0 0 14px rgba(77,134,255,.6)); animation:ringA 3.6s linear infinite; }
/* inner ring: gold dashes turning the other way */
body .hero.logo-only::after{ inset:-12px;
  background:repeating-conic-gradient(from var(--ring-b), rgba(255,214,110,.95) 0 4deg, transparent 4deg 12deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  opacity:.7; filter:drop-shadow(0 0 4px rgba(255,214,110,.9)); animation:ringB 16s linear infinite; }
/* rings spin their gradient angle, not their box, so nothing grows past the screen edge */
@property --ring-a{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
@property --ring-b{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
@keyframes ringA{ to{ --ring-a:360deg; } }
@keyframes ringB{ to{ --ring-b:-360deg; } }
/* old thin arc off */
body .hero.logo-only .orb::before{ display:none; }
/* halo breathes */
body .hero.logo-only .orb{ animation:float 6s ease-in-out infinite, haloPulse 3.2s ease-in-out infinite; }
@keyframes haloPulse{ 0%,100%{ box-shadow:0 0 50px -10px rgba(77,134,255,.55), 0 0 0 0 rgba(240,201,94,0); }
  50%{ box-shadow:0 0 90px 4px rgba(77,134,255,.75), 0 0 30px -4px rgba(255,214,110,.45); } }
/* gold glint sweeps across the crest every few seconds */
body .hero.logo-only .orb::after{ display:block; content:""; position:absolute; inset:-11%; top:-11%; left:-11%; width:auto; height:auto;
  border-radius:50%; opacity:1; z-index:4; pointer-events:none; overflow:hidden;
  background:linear-gradient(105deg, transparent 40%, rgba(255,240,190,.0) 44%, rgba(255,240,190,.38) 50%, rgba(255,240,190,0) 56%, transparent 60%) 0 0/250% 100% no-repeat;
  mix-blend-mode:screen; transform:none; animation:glint 4.8s ease-in-out infinite; }
@keyframes glint{ 0%,55%{ background-position:120% 0; } 85%,100%{ background-position:-20% 0; } }
@media (prefers-reduced-motion: reduce){
  body .hero.logo-only::before, body .hero.logo-only::after, body .hero.logo-only .orb, body .hero.logo-only .orb::after{ animation:none; }
}

/* --- no sideways scroll: nothing may push the page wider than the screen --- */
html, body{ max-width:100%; overflow-x:hidden; }
@supports (overflow:clip){ html, body{ overflow-x:clip; } }
body{ touch-action:pan-y pinch-zoom; overscroll-behavior-x:none; }

/* --- frosted glass + contrast pass --- */
:root:root:root:root{
  --bg:#030926;
  --field-o:.62;
  --ink-2:rgba(255,250,238,.86); --ink-3:rgba(255,236,190,.78);
  --glass:rgba(255,255,255,.16); --glass-strong:rgba(255,255,255,.24);
  --glass-rim-a:rgba(255,255,255,.6); --glass-rim-b:rgba(255,255,255,.1);
  --blur:blur(26px) saturate(1.8) brightness(1.1);
  --solid-bg:#06102E; --solid-bg-hi:#0E1C4D;
}
/* frosted panels: brighter fill, crisp white edge, deeper lift */
body :is(.tile, .hours, .about, .reviews, .shot).glass, body .glass:not(.cap):not(.row):not(.cta):not(.dock):not(.save){
  background:linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.22), 0 18px 34px -16px rgba(0,0,0,.75);
}
/* solid buttons: deep navy with a stronger gold edge so they pop off the blue */
body.solid-btns :is(.cap, .row, .cta, .dock).glass, .solid-btns :is(.cap, .row, .cta, .dock).glass{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(240,201,94,.55), 0 16px 32px -14px rgba(0,0,0,.8);
}
/* section titles in gold */
body p.sec{ color:#F3D57E; }

/* --- dock: anchored flush to the bottom as a solid tab bar, no floating or slide-in --- */
body .dock, body .dock.reveal, .booted body .dock.reveal, body.booted .dock.reveal{
  position:fixed; left:0; right:0; bottom:0; width:100%; max-width:none;
  transform:none !important; translate:none; animation:none !important; opacity:1 !important;
  border-radius:22px 22px 0 0; padding:6px 10px calc(6px + env(safe-area-inset-bottom));
}
body.solid-btns .dock.glass, .solid-btns .dock.glass{
  background:linear-gradient(180deg, #0E1C4D, #050C26);
  box-shadow:inset 0 1px 0 rgba(240,201,94,.55), 0 -10px 30px -12px rgba(0,0,0,.8);
}
body:not(.no-dock){ padding-bottom:calc(92px + env(safe-area-inset-bottom)) !important; }

/* --- Save contact: polished gold bar with a moving shimmer --- */
body button.save.glass, body .save.glass{
  position:relative; overflow:hidden; isolation:isolate;
  color:#1A1203; font-weight:800; letter-spacing:.01em;
  background:linear-gradient(180deg, #FFF1B8 0%, #F7D36A 22%, #E3AE2E 52%, #B98318 78%, #E6B63D 100%);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), inset 0 -2px 0 rgba(120,80,0,.45), 0 0 0 1px rgba(255,220,130,.7), 0 10px 28px -8px rgba(240,190,60,.65), 0 0 40px -10px rgba(255,214,110,.6);
  text-shadow:0 1px 0 rgba(255,240,200,.6);
}
body .save.glass svg{ color:#1A1203; }
body .save.glass::before{ content:""; position:absolute; top:-20%; bottom:-20%; left:0; width:38%; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 80%, transparent 100%);
  transform:translateX(-160%) skewX(-20deg); animation:saveShimmer 3.2s ease-in-out infinite; mix-blend-mode:soft-light; }
body .save.glass::after{ content:""; position:absolute; top:-20%; bottom:-20%; left:0; width:16%; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
  transform:translateX(-160%) skewX(-20deg); animation:saveShimmer 3.2s ease-in-out infinite; animation-delay:.08s; }
body .save.glass > *{ position:relative; z-index:2; }
@keyframes saveShimmer{ 0%,35%{ transform:translateX(-160%) skewX(-20deg); } 75%,100%{ transform:translateX(420%) skewX(-20deg); } }
body .save.done{ background:linear-gradient(100deg, #2B8A57, #36A76A); color:#fff; text-shadow:none; }
@media (prefers-reduced-motion: reduce){ body .save.glass::before, body .save.glass::after{ animation:none; display:none; } }

/* --- top spacing: notch padding only when the card runs full screen (home screen app) --- */
html body{ padding-top:10px; }
@media (display-mode: standalone), (display-mode: fullscreen){ html body{ padding-top:max(10px, env(safe-area-inset-top)); } }
body .topbar{ margin-top:2px; }
/* ================= /BRAND TOKENS ================= */

/* ---------- System tokens (shared, rarely edited) ---------- */
:root{
  --bg:#F3F2F7; --ink:#141B30; --ink-2:#4A5470; --ink-3:#7D849A;
  --gold:var(--accent); --navy:var(--icon-ink);
  --field-o:.85;
  --glass:rgba(255,255,255,.34); --glass-strong:rgba(255,255,255,.55);
  --glass-rim-a:rgba(255,255,255,.95); --glass-rim-b:rgba(255,255,255,.25); --glass-edge:rgba(20,27,48,.06);
  --glass-shadow:0 10px 30px -12px rgba(28,38,64,.28), 0 2px 6px -2px rgba(28,38,64,.10);
  --spec:rgba(255,255,255,.75);
  --sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif:var(--display-font);
  --blur:blur(20px) saturate(1.9) brightness(1.06);
  --spring:cubic-bezier(.34,1.56,.64,1); --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0C0E18; --ink:#F2F0EA; --ink-2:rgba(242,240,234,.74); --ink-3:rgba(242,240,234,.52);
    --field-o:.55;
    --glass:rgba(255,255,255,.08); --glass-strong:rgba(255,255,255,.14);
    --glass-rim-a:rgba(255,255,255,.45); --glass-rim-b:rgba(255,255,255,.06); --glass-edge:rgba(0,0,0,.25);
    --glass-shadow:0 12px 34px -12px rgba(0,0,0,.6), 0 2px 6px -2px rgba(0,0,0,.4);
    --spec:rgba(255,255,255,.28);
    --blur:blur(20px) saturate(1.7) brightness(.95);
  }
}
:root[data-theme="dark"]{
  --bg:#0C0E18; --ink:#F2F0EA; --ink-2:rgba(242,240,234,.74); --ink-3:rgba(242,240,234,.52);
  --field-o:.55;
  --glass:rgba(255,255,255,.08); --glass-strong:rgba(255,255,255,.14);
  --glass-rim-a:rgba(255,255,255,.45); --glass-rim-b:rgba(255,255,255,.06); --glass-edge:rgba(0,0,0,.25);
  --glass-shadow:0 12px 34px -12px rgba(0,0,0,.6), 0 2px 6px -2px rgba(0,0,0,.4);
  --spec:rgba(255,255,255,.28);
  --blur:blur(20px) saturate(1.7) brightness(.95);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--bg); -webkit-tap-highlight-color:transparent; scroll-padding-top:env(safe-area-inset-top,0px); }
html,body{ margin:0; }
/* never let anything (glows, spinning rings, fields) push the page wider than the screen */
html, body{ max-width:100%; overflow-x:hidden; }
@supports (overflow:clip){ html, body{ overflow-x:clip; } }
body{
  min-height:100svh;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  display:flex; justify-content:center;
  padding:
    12px
    16px
    calc(118px + env(safe-area-inset-bottom));
}
/* notch padding only when running full screen; in Safari and in-app previews the browser already clears it */
@media (display-mode: standalone), (display-mode: fullscreen){ body{ padding-top:max(12px, env(safe-area-inset-top)); } }
button{ font:inherit; color:inherit; }
a{ color:inherit; }

/* ---------- Color fields behind the glass ---------- */
.fields{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.fields i{ position:absolute; border-radius:50%; filter:blur(64px); opacity:var(--field-o); will-change:transform; }
.fields .f1{ width:340px; height:340px; background:var(--field-1); top:-90px; left:-110px; animation:driftA 22s ease-in-out infinite alternate; }
.fields .f2{ width:300px; height:300px; background:var(--field-2); top:28%; right:-140px; animation:driftB 26s ease-in-out infinite alternate; }
.fields .f3{ width:320px; height:320px; background:var(--field-3); top:58%; left:-150px; animation:driftA 30s ease-in-out infinite alternate-reverse; }
.fields .f4{ width:260px; height:260px; background:var(--field-4); bottom:-80px; right:-60px; animation:driftB 24s ease-in-out infinite alternate-reverse; }
.fields::after{ /* fine grain so the glass has texture to refract */
  content:""; position:absolute; inset:0; opacity:.05;
  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='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Liquid glass material ---------- */
.glass{
  position:relative; isolation:isolate;
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);
          backdrop-filter:var(--blur);
  box-shadow:
    inset 0 1px 1px var(--glass-rim-a),
    inset 0 -1px 1px var(--glass-edge),
    var(--glass-shadow);
}
.glass::before{ /* gradient rim: bright top-left, fading, catch-light bottom-right */
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:2;
  background:linear-gradient(135deg, var(--glass-rim-a), var(--glass-rim-b) 38%, transparent 55%, var(--glass-rim-b) 75%, var(--glass-rim-a));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.glass::after{ /* specular highlight that follows the finger */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
  background:radial-gradient(120px 80px at var(--mx,30%) var(--my,0%), var(--spec), transparent 70%);
  opacity:.55; transition:opacity .3s ease;
}
.glass.lit::after{ opacity:1; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{ background:var(--glass-strong); }
}

/* pressable liquid behavior */
.press{
  cursor:pointer; border:0; text-decoration:none; user-select:none; -webkit-user-select:none; touch-action:manipulation;
  transition:transform .45s var(--spring), box-shadow .3s ease, background .3s ease;
}
.press:active, .press.down{ transform:scale(.955); transition:transform .12s ease; }
.press .drop{ /* liquid drop that swells from the touch point */
  position:absolute; z-index:0; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,.35) 45%, transparent 70%);
  animation:drop .6s var(--ease) forwards;
}
.press > *{ position:relative; z-index:3; }
.press > .drop{ position:absolute; z-index:0; }

/* ---------- Card ---------- */
.card{ position:relative; z-index:2; width:100%; max-width:430px; }

.topbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:6px 0 4px; }
.pill{
  display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 14px; border-radius:999px;
  font-size:12px; font-weight:600; letter-spacing:.01em; color:var(--ink-2);
}
.pill .dot{ width:7px; height:7px; border-radius:50%; background:#2FBF6A; box-shadow:0 0 0 3px rgba(47,191,106,.18); }
.icon-pill{ width:40px; height:40px; min-height:40px; padding:0; justify-content:center; border-radius:50%; }
.icon-pill svg{ width:18px; height:18px; }
.icon-pill[aria-pressed="false"] .wave{ display:none; }

/* ---------- Hero: portrait + logo badge ---------- */
.hero{ position:relative; margin:26px auto 30px; perspective:900px; }
.hero.portrait{ width:min(248px, 64vw); aspect-ratio:4/5; }
.tilt{
  position:absolute; inset:0; transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d; transition:transform .6s var(--spring); animation:float 7s ease-in-out infinite;
}
.rim{ position:absolute; inset:-8px; border-radius:42px; }
.photo{ position:absolute; inset:0; margin:0; border-radius:34px; overflow:hidden; background:#D9D6E0;
  box-shadow:0 34px 60px -26px rgba(28,38,64,.55), 0 0 0 1px rgba(255,255,255,.4); }
.photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; display:block; }
.photo::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(155deg, rgba(255,255,255,.34), rgba(255,255,255,0) 32%),
    radial-gradient(140px 90px at var(--gx,30%) var(--gy,8%), rgba(255,255,255,.28), transparent 70%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7), inset 0 0 0 1px rgba(255,255,255,.18); }
.badge-orb, .orb{
  display:grid; place-items:center; padding:0; border-radius:50%;
  background:radial-gradient(60% 60% at 32% 26%, rgba(255,255,255,.95), rgba(255,255,255,0) 62%), var(--glass-strong);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  box-shadow:inset 0 2px 2px var(--glass-rim-a), inset 0 -6px 16px rgba(120,100,200,.18), inset 0 0 0 1px rgba(255,255,255,.45), 0 16px 30px -12px rgba(28,38,64,.5);
}
.badge-orb{ position:absolute; right:-22px; bottom:-22px; z-index:5; width:92px; height:92px; animation:float 7s ease-in-out infinite; animation-delay:-2s; }
.badge-orb::before, .orb::before{ content:""; position:absolute; inset:-7px; border-radius:50%; border:1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  -webkit-mask:conic-gradient(#000 0 260deg, transparent 260deg); mask:conic-gradient(#000 0 260deg, transparent 260deg); animation:spin 22s linear infinite; pointer-events:none; }
.badge-orb::after, .orb::after{ content:""; position:absolute; top:8%; left:18%; width:44%; height:20%; border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0)); transform:rotate(-24deg); pointer-events:none; z-index:2; opacity:.8; }
.badge-orb .logo{ width:76%; height:76%; object-fit:contain; filter:drop-shadow(0 4px 6px rgba(28,38,64,.25)); position:relative; z-index:3; }

/* ---------- Hero: logo only (no portrait) ---------- */
.hero.logo-only{ width:min(208px, 56vw); aspect-ratio:1; }
.orb{ position:absolute; inset:0; transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .6s var(--spring); animation:float 6s ease-in-out infinite;
  box-shadow:inset 0 2px 2px var(--glass-rim-a), inset 0 -8px 24px rgba(120,100,200,.18), inset 0 0 0 1px rgba(255,255,255,.35), 0 30px 50px -22px rgba(28,38,64,.45); }
.orb::before{ inset:-12px; }
.orb .logo{ width:74%; height:74%; object-fit:contain; filter:drop-shadow(0 6px 10px rgba(28,38,64,.22)); position:relative; z-index:3; }
.orb.still{ pointer-events:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.orb.still .logo{ -webkit-user-drag:none; }
.orb .mono{ font-family:var(--serif); font-weight:700; font-size:64px; color:var(--accent); position:relative; z-index:3; }
.halo{ position:absolute; inset:-24px; border-radius:50%; pointer-events:none; border:1px solid rgba(120,140,255,.28);
  -webkit-mask:conic-gradient(#000 0 200deg, transparent 200deg); mask:conic-gradient(#000 0 200deg, transparent 200deg); animation:spin 40s linear infinite reverse; }
.halo.h2{ display:none; }

/* identity */
h1{
  font-family:var(--serif); font-weight:var(--name-weight); font-size:clamp(38px, 11.5vw, 48px); line-height:.98;
  letter-spacing:var(--name-tracking); text-transform:var(--name-transform); text-align:center; margin:0; color:var(--ink);
}
.role{ text-align:center; font-size:13px; line-height:1.6; color:var(--ink-2); margin:12px auto 0; max-width:34ch; }
.role .r{ white-space:nowrap; }
.role .s{ color:var(--gold); padding:0 3px; }
.org{ text-align:center; margin:8px 0 22px; font-size:11px; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); }

/* primary + secondary capsules */
.save{
  width:100%; min-height:56px; border-radius:999px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:16px; font-weight:600; letter-spacing:.01em;
  color:var(--prominent-ink); background:var(--prominent);
}
.save .ic{ display:inline-flex; } .save svg{ width:19px; height:19px; }
.save.glass{ background:var(--prominent); }
.save.done{ background:linear-gradient(100deg, #2B8A57, #36A76A); color:#fff; }
.pair{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.cap{
  min-height:50px; border-radius:999px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:14px; font-weight:600; color:var(--ink);
}
.cap svg{ width:18px; height:18px; color:var(--gold); }

/* sections */
.sec{ display:flex; align-items:center; gap:10px; margin:26px 4px 10px; font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.sec::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(125,132,154,.35), transparent); }

.svc{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tile{ border-radius:22px; padding:14px 14px 13px; overflow:hidden; }
.tile .ti{ width:34px; height:34px; border-radius:11px; display:grid; place-items:center; margin-bottom:10px; color:var(--navy);
  background:linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.45));
  box-shadow:inset 0 1px 1px #fff, 0 3px 8px -4px rgba(28,38,64,.35); }
.tile .ti svg{ width:18px; height:18px; }
.tile b{ display:block; font-size:14px; font-weight:700; color:var(--ink); }
.tile small{ display:block; font-size:12px; color:var(--ink-2); margin-top:2px; line-height:1.35; }

/* photo tiles: image fills the tile, dark scrim keeps the label readable */
.tile.has-img{ position:relative; min-height:132px; display:flex; flex-direction:column; justify-content:flex-end; isolation:isolate; }
.tile.has-img .tile-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .8s var(--ease); }
.tile.has-img::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(0,0,0,.05) 20%, rgba(0,0,0,.72) 100%); }
.tile.has-img .ti{ position:absolute; top:12px; left:12px; margin:0; }
.tile.has-img b{ color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.tile.has-img small{ color:rgba(255,255,255,.85); }
.tile.has-img:hover .tile-img{ transform:scale(1.05); }
/* link rows */
.list{ display:flex; flex-direction:column; gap:10px; }
.row{
  display:flex; align-items:center; gap:14px; min-height:64px; padding:10px 16px 10px 12px; border-radius:24px; overflow:hidden; color:var(--ink);
}
.row .badge{ width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center; color:var(--badge-ink);
  background:linear-gradient(135deg, var(--badge-a), var(--badge-b)); box-shadow:inset 0 1px 1px rgba(255,255,255,.8), 0 3px 8px -4px rgba(120,90,20,.5); }
.row .badge svg{ width:19px; height:19px; }
.row .tx{ flex:1; min-width:0; }
.row .tx b{ display:block; font-size:15px; font-weight:650; }
.row .tx small{ display:block; font-size:12.5px; color:var(--ink-2); margin-top:2px; }
.row .go{ width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center; color:var(--ink-2);
  background:rgba(255,255,255,.35); box-shadow:inset 0 1px 1px rgba(255,255,255,.8); }
.row .go svg{ width:14px; height:14px; transition:transform .35s var(--spring); }
.row.lit .go svg{ transform:translate(2px,-2px); }

footer{ margin-top:26px; text-align:center; font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); }
footer a{ text-decoration:none; color:var(--gold); }
footer p{ margin:6px 0 0; font-weight:500; letter-spacing:.14em; }

/* ---------- Floating dock (Call / WhatsApp / Email) ---------- */
.dock{
  position:fixed; z-index:30; left:50%; bottom:calc(14px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:min(398px, calc(100% - 28px));
  display:grid; grid-template-columns:repeat(3,1fr); gap:4px;
  padding:6px; border-radius:999px;
}
.dock.glass{ background:var(--glass-strong); -webkit-backdrop-filter:blur(28px) saturate(2) brightness(1.08); backdrop-filter:blur(28px) saturate(2) brightness(1.08); }
.dock a{
  min-height:58px; border-radius:999px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  font-size:11px; font-weight:600; color:var(--ink); text-decoration:none;
  background:transparent;
}
.dock a svg{ width:22px; height:22px; color:var(--navy); }
.dock a.wa svg{ color:#1FA855; }
.dock a.em svg{ color:var(--gold); }
.dock a.lit, .dock a:active{ background:rgba(255,255,255,.45); box-shadow:inset 0 1px 1px rgba(255,255,255,.9); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .dock a svg{ color:var(--icon-ink); }
  :root:not([data-theme="light"]) .dock a.wa svg{ color:#3DDC84; }
  :root:not([data-theme="light"]) .dock a.em svg{ color:var(--gold); }
  :root:not([data-theme="light"]) .dock a.lit{ background:rgba(255,255,255,.12); }
  :root:not([data-theme="light"]) .tile .ti{ color:#E8ECFF; background:linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.06)); box-shadow:inset 0 1px 1px rgba(255,255,255,.35); }
  :root:not([data-theme="light"]) .row .go{ background:rgba(255,255,255,.08); box-shadow:inset 0 1px 1px rgba(255,255,255,.2); }
}


/* ---------- Top bar extras ---------- */
.tb-right{ display:flex; gap:8px; }
.lang{ width:auto; min-width:40px; padding:0 12px; font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--ink-2); }
body.no-dock{ padding-bottom:max(28px, env(safe-area-inset-bottom)); }

/* ---------- Section blocks ---------- */
#sections > .section:first-child{ margin-top:18px; }
.section + .section{ margin-top:10px; }
.mini{
  flex:none; min-height:36px; padding:0 14px; border-radius:999px; border:0; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; font-size:13px; font-weight:650; color:var(--prominent-ink); background:var(--prominent);
  position:relative; overflow:hidden;
}
.cta{ display:flex; align-items:center; gap:14px; min-height:76px; padding:12px 12px 12px 14px; border-radius:26px; overflow:hidden; text-decoration:none; color:var(--ink);
  background:linear-gradient(120deg, color-mix(in srgb, var(--field-1) 38%, transparent), color-mix(in srgb, var(--field-3) 30%, transparent)), var(--glass); }
.cta .cta-ic{ width:46px; height:46px; flex:none; border-radius:15px; display:grid; place-items:center; color:var(--badge-ink);
  background:linear-gradient(135deg, var(--badge-a), var(--badge-b)); box-shadow:inset 0 1px 1px rgba(255,255,255,.8); }
.cta .cta-ic svg{ width:22px; height:22px; }
.cta .tx{ flex:1; min-width:0; }
.cta .tx b{ display:block; font-size:16px; font-weight:700; }
.cta .tx small{ display:block; font-size:12.5px; color:var(--ink-2); margin-top:2px; }
.cta .cta-btn{ flex:none; padding:10px 14px; border-radius:999px; font-size:13px; font-weight:700; color:var(--prominent-ink); background:var(--prominent); }

.about{ border-radius:24px; padding:16px 18px; }
.about p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-2); }

.loc, .pay{ display:flex; align-items:center; gap:14px; min-height:64px; padding:10px 12px; border-radius:24px; }
.loc .badge{ width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center; color:var(--badge-ink); background:linear-gradient(135deg, var(--badge-a), var(--badge-b)); }
.loc .badge svg{ width:19px; height:19px; }
.loc .tx{ flex:1; min-width:0; } .loc .tx b{ display:block; font-size:15px; } .loc .tx small{ display:block; font-size:12.5px; color:var(--ink-2); margin-top:2px; }

.hours{ border-radius:24px; padding:14px 16px; }
.hours .st{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; margin-bottom:8px; }
.hours .st::before{ content:""; width:8px; height:8px; border-radius:50%; }
.hours .st.on{ color:#1F9A57; } .hours .st.on::before{ background:#2FBF6A; box-shadow:0 0 0 3px rgba(47,191,106,.18); }
.hours .st.off{ color:#C0463B; } .hours .st.off::before{ background:#E0584C; }
.hr{ display:flex; justify-content:space-between; gap:10px; padding:7px 0; font-size:13.5px; color:var(--ink-2); border-top:1px solid rgba(125,132,154,.18); }
.hr.today{ color:var(--ink); font-weight:700; }
.hn{ margin:8px 0 0; font-size:12px; color:var(--ink-3); }


/* Event section */
.event{ border-radius:26px; padding:16px 16px 14px; }
.event .ev-kick{ margin:0 0 10px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.event .ev-head{ display:flex; align-items:center; gap:14px; }
.event .ev-date{ flex:none; width:56px; height:62px; border-radius:16px; display:grid; place-content:center; text-align:center; color:var(--prominent-ink); background:var(--prominent); }
.event .ev-date small{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.85; }
.event .ev-date b{ font-family:var(--display-font); font-size:26px; line-height:1; }
.event .tx{ min-width:0; }
.event .tx b{ display:block; font-family:var(--display-font); font-size:19px; line-height:1.2; }
.event .tx small{ display:block; font-size:12.5px; color:var(--ink-2); margin-top:3px; }
.event .ev-list{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:8px; }
.event .ev-list li{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--ink-2); line-height:1.35; }
.event .ev-ic{ flex:none; width:18px; height:18px; color:var(--accent); margin-top:1px; }
.event .ev-ic svg{ width:18px; height:18px; }
.event .ev-prices{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.event .chip{ flex:1 1 0; min-width:84px; padding:8px 10px; border-radius:14px; background:var(--glass-strong); border:1px solid var(--glass-edge); text-align:center; }
.event .chip small{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.event .chip b{ display:block; font-size:16px; margin-top:2px; }
.event .ev-actions{ display:flex; gap:8px; margin-top:14px; align-items:center; }
.event .ev-btn{ flex:1; min-height:44px; display:grid; place-items:center; border-radius:999px; font-size:14px; font-weight:700; text-decoration:none; color:var(--prominent-ink); background:var(--prominent); }
.event .ev-actions .mini{ min-height:44px; display:grid; place-items:center; }

/* CTA shimmer: opt in per section with shine:true (draws the eye to one key action) */
.cta.cta-shine{ animation:ctaGlow 3.6s ease-in-out infinite; }
.cta.cta-shine .cta-btn{ position:relative; overflow:hidden; isolation:isolate; }
.cta.cta-shine .cta-btn::after{ content:""; position:absolute; top:-20%; bottom:-20%; left:0; width:55%; z-index:1; pointer-events:none;
  background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,.0) 20%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 80%, transparent 100%);
  transform:translateX(-160%) skewX(-18deg); animation:ctaSweep 3.6s cubic-bezier(.4,0,.2,1) infinite; }
.cta.cta-shine{ position:relative; }
.cta.cta-shine .cta-sheen{ position:absolute; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none; z-index:0; }
.cta.cta-shine .cta-sheen::before{ content:""; position:absolute; top:-30%; bottom:-30%; left:0; width:38%;
  background:linear-gradient(105deg, transparent, color-mix(in srgb, var(--accent) 35%, rgba(255,255,255,.35)), transparent);
  opacity:.55; transform:translateX(-140%) skewX(-18deg); animation:ctaSheen 3.6s cubic-bezier(.4,0,.2,1) infinite; }
.cta.cta-shine > :not(.cta-sheen){ position:relative; z-index:1; }
@keyframes ctaSheen{ 0%{ transform:translateX(-140%) skewX(-18deg); } 34%,100%{ transform:translateX(330%) skewX(-18deg); } }
.cta.cta-shine .cta-ic{ animation:ctaIcon 3.6s ease-in-out infinite; }
@keyframes ctaSweep{ 0%,8%{ transform:translateX(-160%) skewX(-18deg); } 42%,100%{ transform:translateX(260%) skewX(-18deg); } }
@keyframes ctaGlow{ 0%,100%{ box-shadow:var(--glass-shadow), 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
  45%{ box-shadow:var(--glass-shadow), 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 22px -4px color-mix(in srgb, var(--accent) 55%, transparent); } }
@keyframes ctaIcon{ 0%,30%,100%{ transform:scale(1); } 40%{ transform:scale(1.08); } 50%{ transform:scale(1); } }

/* Referral cta ("Get your own vCard"): heading and subtitle always stay on one line.
   On narrow cards the icon tile moves into the button so the text keeps its room. */
.section.s-cta{ container-type:inline-size; }
.cta.cta-ref .tx b, .cta.cta-ref .tx small{ white-space:nowrap; }
.cta.cta-ref .cta-btn{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.cta.cta-ref .cta-btn .bi{ display:none; width:16px; height:16px; }
.cta.cta-ref .cta-btn .bi svg{ width:16px; height:16px; }
@container (max-width: 400px){
  .cta.cta-ref{ padding-left:18px; }
  .cta.cta-ref .cta-ic{ display:none; }
  .cta.cta-ref .cta-btn .bi{ display:inline-block; }
}
@container (max-width: 330px){
  .cta.cta-ref{ padding-left:16px; gap:10px; }
  .cta.cta-ref .tx b{ font-size:15px; }
  .cta.cta-ref .tx small{ font-size:12px; }
  .cta.cta-ref .cta-btn{ padding:10px 12px; }
  .cta.cta-ref .cta-btn .bi{ display:none; }
}

/* Booking request sheet */
.modal .sheet.book-sheet{ max-width:380px; max-height:calc(100dvh - 40px); overflow:auto; text-align:left; padding:22px 18px 16px; -webkit-overflow-scrolling:touch; }
.book-sheet h2{ text-align:center; }
.book-sheet .bk-sub{ margin:4px 0 6px; text-align:center; font-size:13px; color:var(--ink-2); }
.book-sheet .bk-label{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin:14px 2px 6px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.book-sheet .bk-label b{ font-size:12.5px; letter-spacing:0; text-transform:none; color:var(--accent); text-align:right; }
.book-sheet .bk-label i{ font-style:normal; font-weight:600; letter-spacing:0; text-transform:none; }
.cal{ border-radius:20px; padding:10px; background:var(--glass); border:1px solid var(--glass-edge); }
.cal-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; font-weight:700; font-size:15px; color:var(--ink); }
.cal-nav{ width:40px; height:40px; border-radius:50%; border:0; background:var(--glass-strong); color:var(--ink); display:grid; place-items:center; font-size:22px; line-height:1; }
.cal-nav:disabled{ opacity:.3; }
.cal-nav svg{ width:18px; height:18px; }
.cal-grid{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:3px; }
.cal-wd span{ text-align:center; font-size:11px; font-weight:700; color:var(--ink-3); padding:4px 0; }
.cal-d{ aspect-ratio:1; min-height:38px; border:0; border-radius:12px; background:transparent; color:var(--ink); font-size:14.5px; font-weight:600; font-variant-numeric:tabular-nums; }
.cal-d.today{ box-shadow:inset 0 0 0 1.5px var(--accent); }
.cal-d.sel{ background:var(--prominent); color:var(--prominent-ink); box-shadow:none; }
.cal-d:disabled{ color:var(--ink-3); opacity:.4; }
.bk-in{ width:100%; box-sizing:border-box; min-height:46px; border-radius:14px; border:1px solid var(--glass-edge); background:var(--glass); color:var(--ink); padding:10px 14px; font:inherit; font-size:16px; }
select.bk-in{ appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size:5px 5px; background-repeat:no-repeat; }
.bk-in:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.bk-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.bk-chip{ min-height:40px; padding:8px 14px; border-radius:999px; border:1px solid var(--glass-edge); background:var(--glass); color:var(--ink); font-size:14px; font-weight:600; }
.bk-chip.sel{ background:var(--prominent); color:var(--prominent-ink); border-color:transparent; }
.bk-send{ width:100%; margin-top:18px; min-height:52px; border:0; border-radius:999px; background:var(--prominent); color:var(--prominent-ink); font-size:16px; font-weight:700; }
.bk-send:disabled{ opacity:.45; }

/* Solid buttons (C.buttons = "solid", or Design studio "Solid"): tappable surfaces become warm charcoal
   with light text and an accent hairline, so they hold up over busy backgrounds and photos.
   Text tokens are re-scoped inside each button, so everything nested stays readable in light and dark. */
:root{ --solid-bg:#1D1915; --solid-bg-hi:#2A241E; --solid-pop:#F3EBDD; --solid-pop-ink:#16120E; --solid-icon:rgba(246,240,230,.92); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --solid-bg:#2B251F; --solid-bg-hi:#3A3129; } }
:root[data-theme="dark"]{ --solid-bg:#2B251F; --solid-bg-hi:#3A3129; }
.solid-btns :is(.cap, .row, .cta, .dock).glass{
  --ink:#F6F0E6; --ink-2:rgba(246,240,230,.76); --ink-3:rgba(246,240,230,.56);
  --glass-rim-a:rgba(255,255,255,.20); --glass-rim-b:rgba(255,255,255,.03); --spec:rgba(255,255,255,.10);
  --prominent:var(--solid-pop); --prominent-ink:var(--solid-pop-ink); --icon-ink:var(--solid-icon); --navy:var(--solid-icon); --gold:var(--solid-icon);
  background:linear-gradient(180deg, var(--solid-bg-hi), var(--solid-bg));
  color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent), 0 14px 30px -14px rgba(0,0,0,.6);
}
.solid-btns .cta.glass{ background:linear-gradient(180deg, var(--solid-bg-hi), var(--solid-bg)); }
.solid-btns .row .go{ background:rgba(255,255,255,.08); }
.solid-btns .dock.glass{ -webkit-backdrop-filter:none; backdrop-filter:none; }

/* Contact row with action buttons (one person, several ways to reach them) */
.row.contact-row{ cursor:default; }
.row.contact-row .tx small.sub2{ white-space:nowrap; font-variant-numeric:tabular-nums; margin-top:1px; }
.row.contact-row .acts{ display:flex; gap:8px; flex:none; }
.row.contact-row .act{ min-width:52px; height:52px; padding:0 6px; border-radius:16px; display:grid; place-items:center; align-content:center; gap:2px; text-decoration:none;
  background:var(--prominent); color:var(--prominent-ink); font-size:10.5px; font-weight:700; }
.row.contact-row .act svg{ width:18px; height:18px; }

.gallery{ display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 10px; margin:0 -2px; scrollbar-width:none; }
.gallery::-webkit-scrollbar{ display:none; }
.shot{ flex:0 0 72%; margin:0; border-radius:24px; overflow:hidden; scroll-snap-align:start; padding:6px; }
.shot img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:19px; display:block; }
.shot figcaption{ font-size:12.5px; font-weight:600; color:var(--ink-2); padding:8px 6px 4px; }

.reviews{ border-radius:24px; padding:16px; }
.rv-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.rv-head b{ font-size:18px; } .rv-head small{ font-size:12.5px; color:var(--ink-3); }
.stars{ display:inline-flex; gap:2px; } .stars i{ width:16px; height:16px; color:rgba(125,132,154,.35); } .stars i.on{ color:#E7A928; } .stars svg{ width:100%; height:100%; }
.reviews blockquote{ margin:10px 0 0; padding:10px 0 0; border-top:1px solid rgba(125,132,154,.18); }
.reviews blockquote p{ margin:0; font-size:14px; line-height:1.55; color:var(--ink); }
.reviews cite{ display:block; margin-top:4px; font-style:normal; font-size:12px; font-weight:600; color:var(--ink-3); }
.reviews .mini{ margin-top:12px; }

.video{ position:relative; display:grid; place-items:center; aspect-ratio:16/9; border-radius:24px; overflow:hidden; color:#fff; text-decoration:none;
  background:linear-gradient(135deg, color-mix(in srgb, var(--field-1) 70%, #000), color-mix(in srgb, var(--field-2) 60%, #000)); }
.video img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video .play{ position:relative; z-index:3; width:62px; height:62px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:inset 0 1px 1px rgba(255,255,255,.8); }
.video .play svg{ width:34px; height:34px; }
.video .vt{ position:absolute; z-index:3; left:14px; bottom:12px; font-size:14px; font-weight:700; text-shadow:0 1px 8px rgba(0,0,0,.5); }

.dock a.bk svg{ color:var(--accent); }

/* ---------- Toast (drops from the top like a notification) ---------- */
#toast{
  position:fixed; z-index:70; left:50%; top:calc(10px + env(safe-area-inset-top));
  transform:translate(-50%, -140%); opacity:0; pointer-events:none;
  max-width:88vw; min-height:44px; padding:12px 18px; border-radius:999px;
  display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap;
  background:var(--glass-strong);
  transition:transform .55s var(--spring), opacity .25s ease;
}
#toast.show{ opacity:1; transform:translate(-50%, 0); }
#toast svg{ width:16px; height:16px; color:#2FBF6A; flex:none; }

/* ---------- Sheets (QR + Share) ---------- */
.modal{
  position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center; padding:24px;
  background:rgba(20,27,48,.28); -webkit-backdrop-filter:blur(10px) saturate(1.3); backdrop-filter:blur(10px) saturate(1.3);
}
.modal.show{ display:flex; }
.modal .sheet{ width:100%; max-width:340px; border-radius:36px; padding:22px 20px 18px; text-align:center; background:var(--glass-strong); animation:sheetIn .5s var(--spring); }
.modal h2{ margin:0; font-family:var(--serif); font-weight:700; font-size:26px; color:var(--ink); }
.modal .u{ margin:4px 0 14px; font-size:12px; color:var(--ink-2); word-break:break-all; }
.modal .close{ width:100%; margin-top:14px; }
.qrbox{ padding:12px; border-radius:22px; background:#fff; box-shadow:inset 0 0 0 1px rgba(20,27,48,.06); }
.qrbox svg{ width:100%; height:auto; display:block; }

.urlbox{
  width:100%; margin:12px 0 14px; min-height:44px; padding:0 16px; border:0; border-radius:999px;
  font:500 13px/1 var(--sans); color:var(--ink-2); text-align:center; text-overflow:ellipsis;
  background:rgba(255,255,255,.55); box-shadow:inset 0 1px 2px rgba(20,27,48,.08), inset 0 0 0 1px rgba(20,27,48,.06);
}
.urlbox:focus{ outline:2px solid #6E8CFF; outline-offset:2px; }
.share-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.share-grid .cap{ min-height:52px; font-size:13.5px; }
.share-grid .wa-ic{ color:#1FA855; }
.share-grid .cap.ok svg{ color:#2FBF6A; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .urlbox{ background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
  :root:not([data-theme="light"]) .modal{ background:rgba(0,0,0,.4); }
}

/* ---------- Entrance ---------- */
.reveal{ opacity:0; transform:translateY(14px) scale(.98); }
.booted .reveal{ animation:rise .8s var(--spring) forwards; animation-delay:calc(var(--i,0) * 60ms); }
.dock.reveal{ transform:translate(-50%, 30px); }
.booted .dock.reveal{ animation:dockIn .8s var(--spring) forwards; animation-delay:.5s; }

:focus-visible{ outline:2px solid #6E8CFF; outline-offset:3px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes float{ 0%,100%{ translate:0 0; } 50%{ translate:0 -6px; } }
@keyframes driftA{ to{ transform:translate(70px,60px) scale(1.12); } }
@keyframes driftB{ to{ transform:translate(-60px,80px) scale(.92); } }
@keyframes drop{ from{ transform:scale(1); opacity:1; } to{ transform:scale(28); opacity:0; } }
@keyframes rise{ to{ opacity:1; transform:none; } }
@keyframes dockIn{ to{ opacity:1; transform:translate(-50%, 0); } }
@keyframes sheetIn{ from{ opacity:0; transform:scale(.9); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  .dock.reveal{ transform:translateX(-50%); }
}

[hidden]{ display:none !important; }