:root {
 --navy: #1a2744;
 --navy-deep: #0f1726;
 --navy-darker: #080d18;
 --accent: #c79a3c;
 --accent-bright: #c9a24a;
 --accent-hover: #a87d24;
 --gold: #d4a843;
 --white: #ffffff;
 --off-white: #f8f8f6;
 --text: #1a1a1a;
 --muted: rgba(255,255,255,.62);
 --muted-strong: rgba(255,255,255,.78);
 --border: rgba(255,255,255,.08);
 --border-hover: rgba(232,160,32,.5);
 --tile: rgba(255,255,255,.04);
 --tile-hover: rgba(255,255,255,.08);
 }
 *, *::before, *::after { box-sizing: border-box; }
 html, body { margin: 0; padding: 0; }
 body {
 font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 background: var(--navy-darker);
 color: var(--white);
 min-height: 100vh;
 padding: 32px 18px calc(env(safe-area-inset-bottom) + 28px);
 display: flex;
 flex-direction: column;
 align-items: center;
 position: relative;
 overflow-x: hidden;
 -webkit-font-smoothing: antialiased;
 letter-spacing: -0.01em;
 }
 /* Subtle radial glow + electrical hairline accents */
 body::before {
 content: '';
 position: fixed;
 inset: 0;
 pointer-events: none;
 background:
 radial-gradient(ellipse 80% 50% at 50% -10%, rgba(232,160,32,.18), transparent 60%),
 radial-gradient(ellipse 60% 40% at 90% 100%, rgba(232,160,32,.08), transparent 60%),
 linear-gradient(180deg, var(--navy-deep) 0%, var(--navy-darker) 60%);
 z-index: -1;
 }
 body::after {
 content: '';
 position: fixed;
 left: 0; right: 0; top: 0;
 height: 2px;
 background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent-bright) 50%, var(--accent) 70%, transparent);
 opacity: .55;
 z-index: 1;
 }

 .wrap {
 width: 100%;
 max-width: 460px;
 display: flex;
 flex-direction: column;
 gap: 14px;
 }

 .hero {
 text-align: center;
 padding: 12px 8px 4px;
 }
 .avatar-wrap {
 position: relative;
 width: 124px;
 height: 124px;
 margin: 0 auto 16px;
 }
 .avatar {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 background: var(--off-white);
 overflow: hidden;
 border: 2px solid rgba(232,160,32,.4);
 box-shadow: 0 12px 40px rgba(232, 160, 32, .22), 0 0 0 6px rgba(232,160,32,.06);
 }
 .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
 .avatar-badge {
 position: absolute;
 bottom: -2px;
 right: -2px;
 width: 38px;
 height: 38px;
 background: linear-gradient(135deg, var(--accent), var(--accent-bright));
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 border: 3px solid var(--navy-darker);
 box-shadow: 0 6px 14px rgba(232,160,32,.4);
 }
 .avatar-badge svg { width: 18px; height: 18px; color: #0f1726; }

 .name { font-size: 1.65rem; font-weight: 800; margin: 0 0 6px; line-height: 1.15; letter-spacing: -0.025em; }
 .tagline { font-size: .95rem; color: var(--muted-strong); margin: 0 0 8px; font-weight: 500; }
 .badges { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
 .pill {
 font-size: .7rem;
 letter-spacing: .04em;
 text-transform: uppercase;
 color: var(--muted-strong);
 padding: 5px 10px;
 border: 1px solid var(--border);
 border-radius: 999px;
 background: var(--tile);
 font-weight: 600;
 }
 .pill .dot { display: inline-block; width: 6px; height: 6px; background: #22c55e; border-radius: 50%; margin-right: 6px; vertical-align: middle; box-shadow: 0 0 8px #22c55e; }

 .actions { display: flex; flex-direction: column; gap: 11px; margin-top: 14px; }
 .btn {
 display: flex;
 align-items: center;
 gap: 14px;
 padding: 16px 18px;
 border-radius: 14px;
 background: var(--tile);
 border: 1px solid var(--border);
 color: var(--white);
 text-decoration: none;
 font-size: 1rem;
 font-weight: 600;
 transition: transform .18s cubic-bezier(.4,0,.2,1), background .18s ease, border-color .18s ease, box-shadow .18s ease;
 -webkit-tap-highlight-color: transparent;
 position: relative;
 overflow: hidden;
 }
 .btn:hover, .btn:focus-visible { background: var(--tile-hover); border-color: var(--border-hover); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
 .btn:active { transform: translateY(0); }
 .btn .icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
 .btn .icon svg { width: 100%; height: 100%; }
 .btn .label { flex: 1; }
 .btn .label-sub { display: block; font-size: .78rem; color: var(--muted); font-weight: 400; margin-top: 2px; }
 .btn .chevron { color: var(--muted); }
 .btn .chevron svg { width: 18px; height: 18px; }

 .btn.primary {
 background: linear-gradient(135deg, var(--accent), var(--accent-bright));
 color: #0f1726;
 border: none;
 box-shadow: 0 8px 24px rgba(232,160,32,.25);
 }
 .btn.primary .icon { color: #0f1726; }
 .btn.primary .label-sub { color: rgba(15,23,38,.7); }
 .btn.primary .chevron { color: rgba(15,23,38,.6); }
 .btn.primary:hover { background: linear-gradient(135deg, var(--accent-hover), var(--accent)); box-shadow: 0 12px 32px rgba(232,160,32,.32); }

 .btn.review { background: rgba(212,168,67,.08); border-color: rgba(212,168,67,.35); }
 .btn.review .icon { color: var(--gold); }
 .btn.review:hover { border-color: var(--gold); background: rgba(212,168,67,.13); }

 .divider {
 display: flex;
 align-items: center;
 gap: 12px;
 margin: 14px 4px 4px;
 color: var(--muted);
 font-size: .72rem;
 letter-spacing: .12em;
 text-transform: uppercase;
 font-weight: 600;
 }
 .divider::before, .divider::after {
 content: '';
 flex: 1;
 height: 1px;
 background: linear-gradient(90deg, transparent, var(--border), transparent);
 }

 .grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 10px;
 }
 .tile {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 16px 8px;
 border-radius: 14px;
 background: var(--tile);
 border: 1px solid var(--border);
 color: var(--muted-strong);
 text-decoration: none;
 font-size: .78rem;
 font-weight: 600;
 letter-spacing: .01em;
 transition: transform .18s cubic-bezier(.4,0,.2,1), background .18s ease, border-color .18s ease, color .18s ease;
 -webkit-tap-highlight-color: transparent;
 }
 .tile:hover, .tile:focus-visible { background: var(--tile-hover); border-color: var(--border-hover); transform: translateY(-2px); color: var(--white); }
 .tile .icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
 .tile .icon svg { width: 100%; height: 100%; }

 /* Brand color tints on hover for socials */
 .tile.tiktok:hover { border-color: #ff2c55; color: var(--white); }
 .tile.tiktok:hover .icon { color: #ff2c55; }
 .tile.instagram:hover { border-color: #e1306c; color: var(--white); }
 .tile.instagram:hover .icon { color: #e1306c; }
 .tile.facebook:hover { border-color: #1877f2; color: var(--white); }
 .tile.facebook:hover .icon { color: #1877f2; }
 .tile.linkedin:hover { border-color: #0a66c2; color: var(--white); }
 .tile.linkedin:hover .icon { color: #0a66c2; }
 .tile.maps:hover .icon { color: #4285f4; }
 .tile.website:hover .icon { color: var(--accent); }

 .foot { text-align: center; font-size: .72rem; color: var(--muted); padding: 22px 6px 0; line-height: 1.7; }
 .foot a { color: var(--muted-strong); text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: 1px; }
 .foot a:hover { color: var(--accent); border-color: var(--accent); }
 .foot .reg { font-weight: 600; color: var(--muted-strong); letter-spacing: .02em; }

 @media (max-width: 360px) {
 .name { font-size: 1.4rem; }
 .btn { padding: 14px 14px; }
 .tile { padding: 14px 6px; font-size: .72rem; }
 }