/* Digital business card — futuristic. Glass panels over a deep-space backdrop, neon edges in the card's own colour.
   Themes: dark (default), aurora (stronger colour, moving light), light ("pearl": white, iridescent).
   The card sets --accent, --accent-2 (darker), --accent-soft (pale), --on-accent. */
@property --spin{syntax:"<angle>";inherits:false;initial-value:0deg}
*,*::before,*::after{box-sizing:border-box}
:root{
  --neon-2:#22d3ee;--neon-3:#d946ef;
  --bg:#05060d;--text:#eef2ff;--muted:#8f97b3;--line:rgba(255,255,255,.09);
  --glass:rgba(255,255,255,.045);--glass-2:rgba(255,255,255,.08);
  --glow:color-mix(in srgb,var(--accent) 65%,transparent);
  --gold:color-mix(in srgb,var(--accent) 35%,#ead9b0);
  /* Metallic sheen in the card's own colour (luxury), not a rainbow. */
  --holo:conic-gradient(from var(--spin),var(--accent),rgba(255,255,255,.85) 12%,var(--gold) 22%,var(--accent-2) 45%,var(--accent) 62%,rgba(255,255,255,.7) 75%,var(--accent));
  --r:22px;
}
.theme-light{
  --bg:#eef1f8;--text:#0b1020;--muted:#5b6478;--line:rgba(11,16,32,.09);
  --glass:rgba(255,255,255,.62);--glass-2:rgba(255,255,255,.85);
  --glow:color-mix(in srgb,var(--accent) 40%,transparent);
}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;min-height:100vh;font-family:Rubik,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text);
  line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
img{display:block;max-width:100%}
.tag,.panel h2::before{font-family:Orbitron,Rubik,monospace;letter-spacing:.04em}
.num{font-variant-numeric:tabular-nums;letter-spacing:.06em}

/* ── Backdrop: glows, stars, a perspective grid floor ── */
.space{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.g1{width:70vmax;height:70vmax;background:var(--accent);top:-45vmax;inset-inline-start:-25vmax;opacity:.45}
.g2{width:55vmax;height:55vmax;background:var(--neon-2);bottom:-38vmax;inset-inline-end:-25vmax;opacity:.18}
.g3{width:40vmax;height:40vmax;background:var(--neon-3);top:35%;inset-inline-end:-22vmax;opacity:.12}
.theme-aurora .glow{animation:drift 18s ease-in-out infinite alternate}
.theme-aurora .g2{opacity:.32;animation-delay:-6s}.theme-aurora .g3{opacity:.26;animation-delay:-12s}
@keyframes drift{to{transform:translate3d(10vmax,8vmax,0) scale(1.2)}}
.stars{position:absolute;inset:-50%;background-image:
  radial-gradient(1px 1px at 20% 30%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 70% 80%,#fff 50%,transparent 51%),
  radial-gradient(1.5px 1.5px at 40% 70%,#c7d2fe 50%,transparent 51%),radial-gradient(1px 1px at 85% 15%,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 55% 45%,#a5f3fc 50%,transparent 51%),radial-gradient(1.5px 1.5px at 10% 85%,#fff 50%,transparent 51%);
  background-size:260px 260px;opacity:.55;animation:stars 120s linear infinite}
@keyframes stars{to{transform:translateY(260px)}}
.floor{position:absolute;left:-50%;right:-50%;bottom:-10vh;height:55vh;transform:perspective(420px) rotateX(62deg);transform-origin:bottom;
  background-image:linear-gradient(color-mix(in srgb,var(--accent) 55%,transparent) 1px,transparent 1px),
  linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,transparent) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:linear-gradient(to top,#000 10%,transparent 85%);mask-image:linear-gradient(to top,#000 10%,transparent 85%);
  opacity:.35;animation:grid 3.5s linear infinite}
@keyframes grid{to{background-position:0 56px}}
.theme-light .stars{opacity:0}
.theme-light .glow{opacity:.35}.theme-light .g2{opacity:.3}.theme-light .g3{opacity:.25}
.floor{display:none}.theme-aurora .floor{display:block}
.stars{opacity:.3}
/* The card's field picture, blurred, fills the whole screen behind it. */
.bgimg{position:absolute;inset:-60px;background-size:cover;background-position:center;filter:blur(34px) brightness(.38) saturate(1.25);transform:scale(1.1)}
.bgimg~.glow{opacity:.22}
.bgimg~.g2,.bgimg~.g3{display:none}
.theme-light .bgimg{filter:blur(40px) brightness(1.15) saturate(1.1);opacity:.45}

/* ── The card ── */
.card{position:relative;z-index:1;max-width:460px;margin:0 auto;padding:18px 16px calc(30px + env(safe-area-inset-bottom));counter-reset:sec}
@media (min-width:560px){.card{padding-top:36px}}

/* ── Top ── */
.hero{position:relative;text-align:center;padding:0 16px 24px;border-radius:30px;isolation:isolate;overflow:hidden;
  background:linear-gradient(180deg,var(--glass-2),var(--glass));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 30px 80px -40px var(--glow),inset 0 1px 0 rgba(255,255,255,.12);animation:boot .8s cubic-bezier(.2,.8,.2,1) both}
/* A neon edge that travels round the panel. */
.hero::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--holo);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:spin 10s linear infinite;z-index:3;opacity:.85;pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-2;opacity:.5;
  background:radial-gradient(90% 60% at 50% 0,color-mix(in srgb,var(--accent) 35%,transparent),transparent 70%)}
@keyframes spin{to{--spin:360deg}}
@keyframes boot{from{opacity:0;transform:translateY(18px) scale(.97);filter:blur(6px)}}
/* The field picture across the top; without one, a dark brushed-metal band in the card's colour. */
.cover{position:relative;height:230px;margin:0 -16px -104px;background-size:cover;background-position:center;
  background-color:#0b0d16;background-image:radial-gradient(120% 90% at 85% 0,color-mix(in srgb,var(--accent) 70%,transparent),transparent 60%),
  radial-gradient(90% 80% at 0 100%,color-mix(in srgb,var(--accent-2) 80%,transparent),transparent 70%),
  repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 1px,transparent 1px 7px);animation:kenburns 26s ease-in-out infinite alternate;
  -webkit-mask-image:linear-gradient(#000 50%,transparent 98%);mask-image:linear-gradient(#000 50%,transparent 98%)}
.theme-light .cover{background-color:color-mix(in srgb,var(--accent) 18%,#fff)}
@keyframes kenburns{from{background-position:50% 35%}to{background-position:50% 65%}}
.veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,13,.35) 0,rgba(5,6,13,0) 35%),radial-gradient(130% 100% at 50% 30%,transparent 55%,rgba(0,0,0,.4))}
.theme-light .veil{background:linear-gradient(180deg,rgba(0,0,0,.2) 0,transparent 40%)}
.hud{position:absolute;top:14px;left:14px;right:14px;z-index:2;display:flex;justify-content:space-between;align-items:center;min-height:44px}
.logo-chip{background:#fff;border-radius:14px;padding:6px 8px;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 8px 24px -10px var(--glow)}
.logo-chip.on-dark{background:#0b1020}
.logo-chip img{height:34px;width:auto;max-width:100px;object-fit:contain}
.tag{display:inline-flex;align-items:center;gap:7px;font-size:10px;color:rgba(255,255,255,.85);padding:6px 11px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);background:rgba(5,6,13,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tag i{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 #22c55e;animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 7px transparent}}

/* The portrait in two holographic rings, a dot in orbit, a scan line passing. */
.portrait{position:relative;z-index:2;width:168px;height:168px;margin:0 auto 4px;display:grid;place-items:center}
.ring{position:absolute;inset:0;border-radius:50%;padding:3px;background:var(--holo);animation:spin 5s linear infinite;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  filter:drop-shadow(0 0 6px var(--glow))}
.ring.r2{inset:-12px;opacity:.45;animation-duration:16s;animation-direction:reverse;
  background:repeating-conic-gradient(from var(--spin),var(--gold) 0 2deg,transparent 2deg 12deg)}
.orbit{position:absolute;inset:-12px;animation:spin2 7s linear infinite}
.orbit i{position:absolute;top:-4px;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px var(--accent),0 0 2px #fff}
@keyframes spin2{to{transform:rotate(360deg)}}
.avatar{position:relative;width:146px;height:146px;border-radius:50%;overflow:hidden;background:#0b1020;box-shadow:0 0 40px -6px var(--glow)}
.avatar img,.avatar>span{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.avatar.is-logo{background:#fff}.avatar.is-logo img{object-fit:contain;padding:16px}
.avatar.on-dark,.avatar.on-dark img{background:#0b1020}
.avatar>span{display:grid;place-items:center;font-size:58px;font-weight:800;color:var(--accent)}
.scan{position:absolute;left:0;right:0;height:38%;top:-40%;background:linear-gradient(transparent,color-mix(in srgb,var(--neon-2) 35%,transparent),transparent);
  mix-blend-mode:screen;animation:scan 4.5s ease-in-out 1s infinite}
@keyframes scan{0%{top:-40%}45%,100%{top:110%}}

.name{position:relative;margin:14px 0 6px;font-size:32px;font-weight:800;line-height:1.1;letter-spacing:-.01em;
  background:linear-gradient(100deg,var(--text) 0 40%,var(--gold) 50%,var(--text) 60% 100%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 5s ease-in-out 1.2s infinite}
@keyframes sheen{0%{background-position:100% 0}50%,100%{background-position:-50% 0}}
.theme-light .name{background-image:linear-gradient(100deg,var(--text) 0 40%,var(--accent) 50%,var(--text) 60% 100%)}
.role{margin:0;font-size:15.5px;font-weight:500;color:var(--gold);min-height:1.5em;letter-spacing:.01em}
.theme-light .role{color:var(--accent-2)}
.role span::after{content:"";display:inline-block;width:2px;height:1em;margin-inline-start:3px;vertical-align:-2px;background:currentColor;animation:blink 1s steps(1) infinite;opacity:0}
.role span.typing::after{opacity:1}
@keyframes blink{50%{opacity:0}}
.company{display:flex;align-items:center;justify-content:center;gap:10px;margin:8px 0 0;color:var(--muted);font-size:13.5px;letter-spacing:.02em}
.company i{width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.company i:last-child{transform:scaleX(-1)}

.cta{display:flex;gap:10px;justify-content:center;margin:20px 0 0}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:16px;padding:15px 20px;font-weight:700;font-size:16px;
  transition:transform .15s ease,box-shadow .25s ease,filter .2s;-webkit-tap-highlight-color:transparent;overflow:hidden}
.btn:active{transform:scale(.96)}
.btn.primary{flex:1;max-width:320px;color:var(--on-accent);background:linear-gradient(120deg,var(--accent),var(--accent-2));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 60%,#fff) inset,0 12px 30px -10px var(--glow),0 0 24px -6px var(--glow)}
.btn.primary::after{content:"";position:absolute;top:0;bottom:0;width:45%;inset-inline-start:-60%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:swipe 3.8s ease-in-out 1.5s infinite}
@keyframes swipe{0%,60%{inset-inline-start:-60%}100%{inset-inline-start:130%}}
.btn.primary:hover{filter:brightness(1.1);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 60%,#fff) inset,0 14px 34px -8px var(--glow),0 0 36px -4px var(--glow)}
.btn.ghost{min-width:56px;background:var(--glass-2);border:1px solid var(--line);backdrop-filter:blur(10px)}
.btn.wide{width:100%;max-width:none}

/* ── Quick actions: glass keys with a glowing icon; rows of 4 (5 fit one row, 6 make two rows of 3) ── */
.actions{--cols:4;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:16px 0 0}
.actions.n1{--cols:1}.actions.n2{--cols:2}.actions.n3,.actions.n6{--cols:3}.actions.n5{--cols:5;gap:8px}
.tile{position:relative;width:calc((100% - (var(--cols) - 1) * 10px) / var(--cols));display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:15px 2px 12px;border-radius:18px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .2s ease,border-color .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent;animation:rise .55s both;transform-style:preserve-3d}
.tile::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 80% at 50% 0,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%);opacity:.7}
.tile:hover{border-color:color-mix(in srgb,var(--accent) 60%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent),0 10px 30px -12px var(--glow)}
.tile:active{transform:scale(.93)}
.tile .ic{position:relative;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:18px;color:#fff;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));box-shadow:0 0 18px -3px var(--glow),inset 0 1px 0 rgba(255,255,255,.35)}
.tile[data-t=whatsapp] .ic{background:linear-gradient(140deg,#2be36f,#0f9d58);box-shadow:0 0 18px -3px rgba(37,211,102,.7),inset 0 1px 0 rgba(255,255,255,.35)}
.tile .lb{position:relative;font-size:12.5px;font-weight:600;white-space:nowrap;opacity:.92}
.actions.n5 .tile .ic{width:40px;height:40px;font-size:16px}.actions.n5 .tile .lb{font-size:11.5px}
.actions .tile:nth-child(2){animation-delay:.05s}.actions .tile:nth-child(3){animation-delay:.1s}.actions .tile:nth-child(4){animation-delay:.15s}
.actions .tile:nth-child(5){animation-delay:.2s}.actions .tile:nth-child(6){animation-delay:.25s}.actions .tile:nth-child(7){animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}

/* ── Panels: glass with HUD corner brackets and a numbered label ── */
.panel{position:relative;margin-top:14px;padding:18px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);animation:rise .6s both .15s}
.panel::before,.panel::after{content:"";position:absolute;width:16px;height:16px;border:2px solid var(--accent);opacity:.8;pointer-events:none;
  filter:drop-shadow(0 0 4px var(--glow))}
.panel::before{top:-1px;inset-inline-start:-1px;border-bottom:0;border-inline-end:0;border-start-start-radius:var(--r)}
.panel::after{bottom:-1px;inset-inline-end:-1px;border-top:0;border-inline-start:0;border-end-end-radius:var(--r)}
.panel h2{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:16.5px;font-weight:700}
.panel h2::before{counter-increment:sec;content:counter(sec,decimal-leading-zero);font-size:10.5px;font-weight:700;color:var(--accent);
  padding:3px 7px;border-radius:7px;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.theme-dark .panel h2::before,.theme-aurora .panel h2::before{color:color-mix(in srgb,var(--accent) 50%,#fff)}
.panel h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
[dir=rtl] .panel h2::after{background:linear-gradient(-90deg,var(--line),transparent)}

.rows{padding:6px}
.row{display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:14px;transition:background .2s}
.row+.row{border-top:1px solid var(--line)}
.row:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.row .ic{width:36px;height:36px;flex:none;border-radius:11px;display:grid;place-items:center;font-size:14px;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.theme-dark .row .ic,.theme-aurora .row .ic{color:color-mix(in srgb,var(--accent) 50%,#fff)}
.row .tx{font-weight:500;overflow-wrap:anywhere;font-size:15px}
.row .tx.num{font-size:16px;font-weight:600}
[dir=rtl] .row .tx[dir=ltr]{text-align:right}

.about{color:color-mix(in srgb,var(--text) 82%,var(--muted));font-size:15.5px}
.services{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.services li{display:flex;gap:11px;align-items:flex-start;font-size:15px}
.services i{flex:none;margin-top:5px;width:18px;height:18px;border-radius:6px;display:grid;place-items:center;font-size:9.5px;color:#fff;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));box-shadow:0 0 10px -2px var(--glow)}
.links{display:grid;gap:9px}
.link{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-radius:14px;font-weight:600;
  background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 16%,transparent),transparent);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  transition:transform .15s,box-shadow .2s}
.link:hover{box-shadow:0 0 22px -8px var(--glow)}
.link:active{transform:scale(.98)}
.link i{color:var(--accent);font-size:13px;transition:transform .2s}
.theme-dark .link i,.theme-aurora .link i{color:#fff}
.link:hover i{transform:translateX(-3px)}[dir=ltr] .link:hover i{transform:translateX(3px)}

.gallery{padding-inline:0;padding-bottom:14px}
.gallery h2{padding-inline:18px}
.strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 18px 6px;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.shot{position:relative;flex:none;width:74%;aspect-ratio:4/3;border:0;padding:0;border-radius:16px;overflow:hidden;scroll-snap-align:center;background:#0b1020;
  box-shadow:0 0 0 1px var(--line),0 14px 30px -18px #000}
.shot::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  background:linear-gradient(transparent 60%,rgba(0,0,0,.35))}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.shot:hover img{transform:scale(1.05)}

.icons{display:flex;flex-wrap:wrap;gap:12px}
.icons a{position:relative;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:20px;color:#fff;transition:transform .2s,box-shadow .2s}
.icons a:hover{transform:translateY(-3px)}
.icons a:active{transform:scale(.92)}
.s-facebook{background:#1877f2;box-shadow:0 0 22px -6px #1877f2}
.s-instagram{background:radial-gradient(circle at 30% 107%,#fdf497 0,#fd5949 45%,#d6249f 60%,#285aeb 90%);box-shadow:0 0 22px -6px #d6249f}
.s-linkedin{background:#0a66c2;box-shadow:0 0 22px -6px #0a66c2}.s-youtube{background:#ff0033;box-shadow:0 0 22px -6px #ff0033}
.s-tiktok,.s-x{background:#111;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 0 22px -8px #22d3ee}.s-waze{background:#33ccff;box-shadow:0 0 22px -6px #33ccff}

/* Contact form: glass fields, floating labels, neon focus */
.contact form{display:grid;gap:10px}
.f{position:relative;display:block}
.f input,.f textarea{width:100%;font:inherit;font-size:16px;color:var(--text);padding:23px 14px 8px;border-radius:14px;border:1px solid var(--line);
  background:rgba(0,0,0,.18);outline:none;transition:border-color .2s,box-shadow .2s;resize:vertical}
.theme-light .f input,.theme-light .f textarea{background:rgba(255,255,255,.7)}
.f input:focus,.f textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent),0 0 24px -8px var(--glow)}
.f span{position:absolute;inset-inline-start:15px;top:15px;color:var(--muted);font-size:15px;pointer-events:none;transition:all .18s}
.f input:focus+span,.f input:not(:placeholder-shown)+span,.f textarea:focus+span,.f textarea:not(:placeholder-shown)+span{top:6px;font-size:11px;color:var(--accent);letter-spacing:.04em}
.theme-dark .f input:focus+span,.theme-aurora .f input:focus+span,.theme-dark .f textarea:focus+span,.theme-aurora .f textarea:focus+span{color:color-mix(in srgb,var(--accent) 50%,#fff)}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);opacity:0;pointer-events:none}
.note{margin:2px 0 0;font-size:14.5px;font-weight:600;min-height:1em}
.note.ok{color:#22c55e}.note.err{color:#f43f5e}

.foot{text-align:center;margin-top:24px;font-size:12.5px;color:var(--muted)}
.foot a{display:inline-flex;gap:8px;align-items:center;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(10px)}
.foot a:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 50%,transparent)}

/* Share sheet */
.sheet{position:fixed;inset:0;z-index:20;background:rgba(3,4,10,.6);backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
.sheet[hidden],.viewer[hidden]{display:none}
.sheet-in{position:relative;width:100%;max-width:460px;background:#0b1020;color:#eef2ff;border-radius:28px 28px 0 0;padding:30px 22px calc(24px + env(safe-area-inset-bottom));
  text-align:center;animation:up .3s cubic-bezier(.2,.9,.3,1.2);border:1px solid rgba(255,255,255,.1);box-shadow:0 -20px 60px -20px var(--glow)}
@media (min-width:560px){.sheet{align-items:center}.sheet-in{border-radius:28px}}
.qr{position:relative;width:216px;height:216px;margin:6px auto 4px;padding:12px;border-radius:20px;background:#fff;box-shadow:0 0 0 2px var(--accent),0 0 40px -6px var(--glow)}
.qr canvas,.qr img{width:100%!important;height:100%!important}
.muted{color:#8f97b3;margin:12px 0 18px;font-size:14px}
.share-btns{display:grid;gap:10px}
.share-btns .btn{width:100%}
.btn.wa{background:linear-gradient(120deg,#2be36f,#0f9d58);color:#fff;box-shadow:0 0 24px -8px rgba(37,211,102,.8)}
.sheet .btn.ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#eef2ff}
.x{position:absolute;top:12px;inset-inline-end:12px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:#eef2ff;display:grid;place-items:center;font-size:17px}
.viewer{position:fixed;inset:0;z-index:30;background:rgba(3,4,10,.94);display:flex;align-items:center;justify-content:center;padding:16px;animation:fade .2s}
.viewer img{max-height:90vh;border-radius:14px;box-shadow:0 0 60px -10px var(--glow)}
@keyframes fade{from{opacity:0}} @keyframes up{from{transform:translateY(40px);opacity:.4}}

/* Light ("pearl") details */
.theme-light .hero{box-shadow:0 30px 70px -40px var(--glow),inset 0 1px 0 #fff}
.theme-light .tile .lb{opacity:1}
.theme-light .sheet-in{background:#fff;color:#0b1020}
.theme-light .sheet .btn.ghost{background:#f1f5f9;border-color:#e2e8f0;color:#0b1020}
.theme-light .x{background:rgba(0,0,0,.06);color:#0b1020}

/* Admin preview and the home page's phones: still, no scrollbar */
.is-preview .hero,.is-preview .tile,.is-preview .panel{animation:none}
html:has(.is-preview){scrollbar-width:none}
.is-preview::-webkit-scrollbar,html:has(.is-preview)::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Save the card to the phone's home screen */
.install{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;max-width:386px;margin:12px auto 0;padding:11px 16px;border-radius:14px;
  border:1px dashed color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--text);font-weight:600;font-size:14.5px;
  transition:background .2s,transform .15s}
.install:hover{background:color-mix(in srgb,var(--accent) 18%,transparent)}.install:active{transform:scale(.98)}
.install i{color:var(--gold);font-size:16px}
.install[hidden]{display:none}
.inst-ic{width:84px;height:84px;margin:4px auto 10px;border-radius:22px;overflow:hidden;box-shadow:0 0 0 2px var(--accent),0 14px 30px -12px var(--glow)}
.inst-ic img{width:100%;height:100%;object-fit:cover}
#install h3{margin:0 0 8px;font-size:18px}
#install p{margin:0 auto;max-width:330px;line-height:1.7;color:#4b5563}
.theme-dark #install p,.theme-aurora #install p{color:#c7cbe0}
#install p i{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:7px;background:#e0e7ff;color:#1d4ed8;margin:0 2px;vertical-align:middle}
#install .ios,#install .other{display:none}#install.is-ios .ios,#install.is-other .other{display:block}