:root {
  color-scheme: light dark;
  --font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", monospace;
  --bg: #07080d;
  --bg-card: rgba(16,18,30,0.85);
  --bg-elevated: rgba(26,29,46,0.9);
  --bg-glass: rgba(16,18,30,0.55);
  --text: #f0f2ff;
  --muted: #8b95b0;
  --accent: #6ee7ff;
  --accent-hover: #a0f0ff;
  --accent-glow: rgba(110,231,255,0.15);
  --accent-2: #a78bfa;
  --accent-2-glow: rgba(167,139,250,0.12);
  --danger: #ff6b6b;
  --danger-hover: #ff9a9a;
  --ok: #5bf5a0;
  --ok-hover: #8ff7c7;
  --warning: #ffd166;
  --border: rgba(139,149,176,0.15);
  --border-strong: rgba(139,149,176,0.3);
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
  --glow: 0 0 30px rgba(110,231,255,0.08);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
}
:root[data-theme="light"],
:root:not([data-theme="dark"]):not([data-theme="light"]) {
  @media (prefers-color-scheme: light) {
    & {
      --bg:#f2f4fa;--bg-card:rgba(255,255,255,0.9);--bg-elevated:rgba(248,249,252,0.95);
      --bg-glass:rgba(255,255,255,0.6);--text:#141828;--muted:#54607c;
      --accent:#0066e0;--accent-hover:#0080ff;--accent-glow:rgba(0,102,224,0.1);
      --accent-2:#7c3aed;--accent-2-glow:rgba(124,58,237,0.08);
      --danger:#d32f2f;--danger-hover:#e05050;--ok:#0f7d48;--ok-hover:#13a05c;--warning:#c77b00;
      --border:rgba(84,96,124,0.12);--border-strong:rgba(84,96,124,0.25);
      --shadow:0 4px 24px rgba(0,0,0,0.06);--glow:0 0 30px rgba(0,102,224,0.06);
    }
  }
}
:root[data-theme="light"] {
  --bg:#f2f4fa;--bg-card:rgba(255,255,255,0.9);--bg-elevated:rgba(248,249,252,0.95);
  --bg-glass:rgba(255,255,255,0.6);--text:#141828;--muted:#54607c;
  --accent:#0066e0;--accent-hover:#0080ff;--accent-glow:rgba(0,102,224,0.1);
  --accent-2:#7c3aed;--accent-2-glow:rgba(124,58,237,0.08);
  --danger:#d32f2f;--danger-hover:#e05050;--ok:#0f7d48;--ok-hover:#13a05c;--warning:#c77b00;
  --border:rgba(84,96,124,0.12);--border-strong:rgba(84,96,124,0.25);
  --shadow:0 4px 24px rgba(0,0,0,0.06);--glow:0 0 30px rgba(0,102,224,0.06);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}

/* Animated mesh gradient background */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;
  background:
    radial-gradient(ellipse 80% 50% at 20% 0%,var(--accent-glow),transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 10%,var(--accent-2-glow),transparent 50%),
    radial-gradient(ellipse 50% 40% at 60% 90%,rgba(91,245,160,0.06),transparent 50%),
    radial-gradient(ellipse 40% 30% at 10% 60%,rgba(255,209,102,0.04),transparent 50%);
  animation:meshDrift 20s ease-in-out infinite alternate;
}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:256px;opacity:0.6;
}
@keyframes meshDrift{
  0%{transform:scale(1) translate(0,0)}
  33%{transform:scale(1.05) translate(2%,-1%)}
  66%{transform:scale(0.98) translate(-1%,2%)}
  100%{transform:scale(1.03) translate(1%,-2%)}
}
body>main{flex:1}

/* Scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;height:2px;z-index:500;background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--ok));border-radius:0 2px 2px 0;transform-origin:left;transition:none;box-shadow:0 0 10px var(--accent-glow)}

a{color:var(--accent);text-decoration:none;transition:color 0.2s,text-shadow 0.2s}
a:hover{text-decoration:underline;color:var(--accent-hover);text-shadow:0 0 12px var(--accent-glow)}
h1,h2,h3,h4{line-height:1.2;font-family:var(--font-display)}
h1{font-size:clamp(1.6rem,4vw,2.5rem)}
h2{font-size:clamp(1.25rem,3vw,1.6rem)}
h3{font-size:1.15rem}
p{max-width:72ch}
img{max-width:100%;height:auto}

/* Gradient text */
.gradient-text{background:linear-gradient(135deg,var(--accent),var(--accent-2),var(--ok));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% 200%;animation:gradientShift 6s ease-in-out infinite}
@keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}
button:focus-visible,.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip-link{position:absolute;top:-100px;left:0;background:var(--accent);color:#fff;padding:0.5rem 1rem;z-index:200;font-weight:600;border-radius:0 0 var(--radius-sm) 0;transition:top 0.2s}
.skip-link:focus{top:0}

.container{width:min(1140px,92vw);margin:0 auto;padding:0 0 3rem}
.section-gap{padding-top:2rem}

/* Header */
.site-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 0;flex-wrap:wrap;position:relative}
.site-logo{font-family:var(--font-display);font-weight:800;font-size:1.35rem;text-decoration:none;color:inherit;letter-spacing:-0.02em;transition:all 0.3s var(--ease-out);position:relative}
.site-logo:hover{text-decoration:none;color:var(--accent);text-shadow:0 0 20px var(--accent-glow);transform:scale(1.02)}
.site-nav{display:flex;gap:0.35rem;align-items:center;flex-wrap:wrap}
.site-nav a{padding:0.45rem 0.85rem;border-radius:var(--radius-pill);font-size:0.875rem;font-weight:500;transition:all 0.3s var(--ease-out);color:var(--muted);border:1px solid transparent;position:relative;overflow:hidden}
.site-nav a::before{content:"";position:absolute;bottom:0;left:50%;width:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:all 0.3s var(--ease-out);transform:translateX(-50%);border-radius:2px}
.site-nav a:hover{background:var(--accent-glow);text-decoration:none;color:var(--accent);border-color:var(--border);transform:translateY(-1px);box-shadow:0 4px 12px var(--accent-glow)}
.site-nav a:hover::before{width:60%}
.nav-toggle{display:none;background:none;border:none;color:var(--text);font-size:1.5rem;padding:0.25rem;cursor:pointer}
@media(max-width:560px){
  .nav-toggle{display:inline-flex}
  .site-nav{display:none;width:100%;flex-direction:column;gap:0.25rem;padding-top:0.5rem}
  .site-nav.open{display:flex;animation:slideDown 0.25s var(--ease-out)}
  .site-nav a{width:100%;text-align:left;padding:0.6rem 0.75rem}
}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* Glassmorphism card with animated border */
.card{background:var(--bg-card);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border:1px solid var(--border);border-radius:var(--radius);padding:1.35rem;box-shadow:var(--shadow);transition:all 0.4s var(--ease-out);position:relative}
.card-hover{cursor:pointer}
.card-hover::before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:conic-gradient(from var(--card-angle,0deg),transparent 40%,var(--accent-glow) 50%,transparent 60%);z-index:-1;opacity:0;transition:opacity 0.4s;padding:1px;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.card-hover:hover{box-shadow:var(--shadow),var(--glow);transform:translateY(-6px) scale(1.01);border-color:var(--border-strong)}
.card-hover:hover::before{opacity:1}
.card-hover:active{transform:translateY(-2px) scale(0.99)}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.6s var(--ease-out),transform 0.6s var(--ease-out)}
.reveal.revealed{opacity:1;transform:none}
.reveal-delay-1{transition-delay:0.08s}
.reveal-delay-2{transition-delay:0.16s}
.reveal-delay-3{transition-delay:0.24s}
.reveal-delay-4{transition-delay:0.32s}
.reveal-scale{opacity:0;transform:scale(0.92);transition:opacity 0.5s var(--ease-out),transform 0.5s var(--ease-spring)}
.reveal-scale.revealed{opacity:1;transform:none}
.reveal-left{opacity:0;transform:translateX(-24px);transition:opacity 0.5s var(--ease-out),transform 0.5s var(--ease-out)}
.reveal-left.revealed{opacity:1;transform:none}
.reveal-right{opacity:0;transform:translateX(24px);transition:opacity 0.5s var(--ease-out),transform 0.5s var(--ease-out)}
.reveal-right.revealed{opacity:1;transform:none}

.stack{display:grid;gap:1rem}
.stack-lg{display:grid;gap:1.5rem}
.stack-sm{display:grid;gap:0.5rem}
.grid{display:grid;gap:1rem}
@media(min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.grid-auto-fit{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
@media(min-width:960px){.grid-4{grid-template-columns:repeat(4,1fr)}}

.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-center{align-items:center}.flex-end{align-items:flex-end}
.flex-between{justify-content:space-between}.flex-col{flex-direction:column}
.gap-xs{gap:0.35rem}.gap-sm{gap:0.5rem}.gap-md{gap:0.75rem}.gap-lg{gap:1rem}
.muted{color:var(--muted)}.text-sm{font-size:0.875rem}.text-xs{font-size:0.75rem}
.text-lg{font-size:1.15rem}.text-xl{font-size:1.35rem}
.text-danger{color:var(--danger)}.text-ok{color:var(--ok)}.text-warning{color:var(--warning)}.text-accent{color:var(--accent)}
.font-bold{font-weight:700}.font-medium{font-weight:500}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mb-sm{margin-bottom:0.5rem}.mb-md{margin-bottom:1rem}
.mt-md{margin-top:0.75rem}.mt-lg{margin-top:1rem}.ml-sm{margin-left:0.5rem}.mt-xl{margin-top:3rem}

/* Forms with animated gradient focus borders */
input,textarea,select,button{font:inherit}
label{display:block;font-size:0.875rem;font-weight:500;margin-bottom:0.25rem;transition:color 0.2s}
label:has(input:focus),label:has(textarea:focus){color:var(--accent)}
label>input,label>textarea,label>select{margin-top:0.35rem}
input,textarea,select{width:100%;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--bg-glass);backdrop-filter:blur(8px);color:var(--text);padding:0.65rem 0.85rem;transition:border-color 0.3s,box-shadow 0.3s,transform 0.2s var(--ease-spring)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow),0 0 20px var(--accent-glow);transform:scale(1.005)}
input:not(:placeholder-shown):valid{border-color:var(--ok)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:0.5;transition:opacity 0.2s}
input:focus::placeholder,textarea:focus::placeholder{opacity:0.3}
textarea{resize:vertical}

/* Buttons with ripple effect */
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.4rem;border-radius:var(--radius-sm);border:1px solid transparent;padding:0.65rem 1.1rem;font-weight:600;font-size:0.875rem;cursor:pointer;transition:all 0.3s var(--ease-out);white-space:nowrap;position:relative;overflow:hidden}
button::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--ripple-x,50%) var(--ripple-y,50%),rgba(255,255,255,0.3) 0%,transparent 60%);opacity:0;transition:opacity 0.5s;pointer-events:none}
button:active::after{opacity:1;transition:opacity 0s}
button:active{transform:scale(0.96)}
button:disabled{opacity:0.4;cursor:not-allowed;transform:none}
button:disabled::after{display:none}
.btn-primary,button:not(.btn-secondary):not(.btn-danger):not(.btn-ok):not(.btn-ghost):not([class*="secondary"]):not(.nav-toggle){
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 80%,var(--ok)));
  color:#000;font-weight:700;box-shadow:0 2px 12px var(--accent-glow);
  background-size:200% 200%;animation:btnShimmer 3s ease-in-out infinite;
}
@keyframes btnShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.btn-primary:hover,button:not(.btn-secondary):not(.btn-danger):not(.btn-ok):not(.btn-ghost):not([class*="secondary"]):not(.nav-toggle):hover:not(:disabled){box-shadow:0 6px 25px var(--accent-glow),var(--glow);transform:translateY(-2px)}
.btn-secondary,button.secondary{background:var(--bg-glass);backdrop-filter:blur(8px);border-color:var(--border-strong);color:var(--text)}
.btn-secondary:hover,button.secondary:hover{background:var(--border);border-color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,0.2)}
.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{background:var(--danger-hover)}
.btn-ok{background:var(--ok);color:#000;font-weight:700}.btn-ok:hover{background:var(--ok-hover)}
.btn-ghost{background:transparent;border:none;color:var(--muted);padding:0.4rem 0.6rem}
.btn-ghost:hover{color:var(--accent);background:var(--accent-glow)}
.btn-sm{padding:0.35rem 0.65rem;font-size:0.8rem}
.btn-pill{border-radius:var(--radius-pill)}

/* Chips with spring hover */
.chip{display:inline-flex;align-items:center;gap:0.25rem;padding:0.35rem 0.75rem;border-radius:var(--radius-pill);font-size:0.8rem;font-weight:500;border:1px solid var(--border-strong);background:var(--bg-glass);backdrop-filter:blur(8px);color:var(--muted);cursor:pointer;transition:all 0.3s var(--ease-spring);text-decoration:none}
.chip:hover{border-color:var(--accent);color:var(--accent);text-decoration:none;box-shadow:0 0 16px var(--accent-glow);transform:translateY(-2px) scale(1.04)}
.chip:active{transform:translateY(0) scale(0.97)}
.chip-active{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 80%,var(--accent-2)));color:#000;border-color:transparent;font-weight:600;box-shadow:0 0 20px var(--accent-glow);transform:scale(1.03)}

/* Stars */
.stars{display:inline-flex;gap:2px;font-size:1.1rem}
.star-filled{color:var(--warning);filter:drop-shadow(0 0 6px rgba(255,209,102,0.5));transition:transform 0.2s var(--ease-spring)}
.star-filled:hover{transform:scale(1.2)}
.star-empty{color:var(--border-strong)}

/* Interactive star input */
.star-input{display:flex;gap:0.5rem;padding:0.5rem 0}
.star-input button{background:none;border:none;padding:0.2rem;font-size:2.5rem;cursor:pointer;color:var(--border-strong);transition:all 0.25s var(--ease-spring);line-height:1;filter:none}
.star-input button:hover{transform:scale(1.35) rotate(-8deg)}
.star-input button::after{display:none}
.star-input button.star-active{color:var(--warning);filter:drop-shadow(0 0 12px rgba(255,209,102,0.7));transform:scale(1.1);animation:starPop 0.35s var(--ease-spring)}
.star-input button.star-hover{color:var(--warning);opacity:0.7;transform:scale(1.25)}
@keyframes starPop{0%{transform:scale(0.6)}50%{transform:scale(1.25)}100%{transform:scale(1.1)}}

/* Rating bar */
.rating-bar{display:flex;align-items:center;gap:0.5rem}
.rating-bar-track{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.rating-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--warning),var(--ok));transition:width 0.8s var(--ease-out)}

/* Progress bar */
.progress-bar{display:flex;gap:0.4rem;margin-bottom:0.5rem}
.progress-step{flex:1;height:5px;border-radius:3px;background:var(--border-strong);transition:all 0.5s var(--ease-out)}
.progress-step-active{background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 10px var(--accent-glow);animation:progressPulse 2s ease-in-out infinite}
@keyframes progressPulse{0%,100%{box-shadow:0 0 8px var(--accent-glow)}50%{box-shadow:0 0 20px var(--accent-glow),0 0 30px rgba(110,231,255,0.08)}}
.progress-step-done{background:var(--ok);box-shadow:0 0 6px rgba(91,245,160,0.3)}

/* Badge */
.badge{display:inline-flex;align-items:center;padding:0.2rem 0.55rem;border-radius:var(--radius-pill);font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;transition:all 0.2s}
.badge-pending{background:rgba(255,209,102,0.15);color:var(--warning);border:1px solid rgba(255,209,102,0.2)}
.badge-approved{background:rgba(91,245,160,0.12);color:var(--ok);border:1px solid rgba(91,245,160,0.2)}
.badge-rejected{background:rgba(255,107,107,0.12);color:var(--danger);border:1px solid rgba(255,107,107,0.2)}
.badge-hidden{background:var(--border);color:var(--muted);border:1px solid var(--border-strong)}
.badge-count{background:var(--accent);color:#000;font-size:0.7rem;min-width:1.3rem;height:1.3rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700}

/* Breadcrumbs */
.breadcrumbs{display:flex;align-items:center;gap:0.35rem;font-size:0.85rem;color:var(--muted);flex-wrap:wrap}
.breadcrumbs a{color:var(--muted)}.breadcrumbs a:hover{color:var(--accent)}.breadcrumb-sep{user-select:none;opacity:0.4}
.divider{border:none;border-top:1px solid var(--border);margin:1rem 0}

/* Modal */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem;animation:fadeIn 0.25s var(--ease-out)}
.modal{background:var(--bg-card);backdrop-filter:blur(20px);border:1px solid var(--border-strong);border-radius:var(--radius);padding:1.5rem;width:min(480px,100%);box-shadow:0 8px 40px rgba(0,0,0,0.4),var(--glow);animation:modalIn 0.35s var(--ease-spring);max-height:90vh;overflow-y:auto}
@keyframes modalIn{from{opacity:0;transform:scale(0.92) translateY(12px)}to{opacity:1;transform:none}}

/* Hero */
.hero{padding:4rem 1.5rem;text-align:center;background:var(--bg-glass);backdrop-filter:blur(24px);border:1px solid var(--border);border-radius:var(--radius);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-60%;left:-30%;width:160%;height:160%;background:radial-gradient(circle at 40% 30%,var(--accent-glow),transparent 50%),radial-gradient(circle at 70% 80%,rgba(167,139,250,0.08),transparent 40%);pointer-events:none;animation:heroGlow 8s ease-in-out infinite alternate}
@keyframes heroGlow{0%{opacity:0.6;transform:scale(1) rotate(0deg)}100%{opacity:1;transform:scale(1.05) rotate(2deg)}}
.hero h1{margin-bottom:0.75rem;position:relative;font-size:clamp(1.8rem,5vw,3rem)}
.hero p{max-width:560px;margin:0 auto 1.5rem;position:relative}
.hero .flex{position:relative}

/* Floating orbs */
.hero-orbs{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-orb{position:absolute;border-radius:50%;filter:blur(40px);opacity:0.5;animation:orbFloat 12s ease-in-out infinite}
.hero-orb-1{width:180px;height:180px;background:var(--accent);top:-20%;left:10%;animation-delay:0s}
.hero-orb-2{width:140px;height:140px;background:var(--accent-2);bottom:-10%;right:15%;animation-delay:-4s;animation-duration:15s}
.hero-orb-3{width:100px;height:100px;background:var(--ok);top:20%;right:-5%;animation-delay:-8s;animation-duration:18s}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(15px,-20px) scale(1.1)}50%{transform:translate(-10px,15px) scale(0.95)}75%{transform:translate(-20px,-10px) scale(1.05)}}

/* CTA Banner */
.cta-banner{padding:3rem 1.5rem;text-align:center;background:var(--bg-glass);backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--radius);position:relative;overflow:hidden}
.cta-banner::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--accent-glow),var(--accent-2-glow),rgba(91,245,160,0.04));pointer-events:none;animation:ctaShift 8s ease-in-out infinite alternate}
@keyframes ctaShift{0%{opacity:0.5;transform:scale(1)}100%{opacity:0.9;transform:scale(1.02)}}
.cta-banner>*{position:relative}

/* Stat card */
.stat-card{text-align:center;padding:1.75rem 1rem;overflow:hidden;position:relative}
.stat-card::after{content:"";position:absolute;bottom:0;left:10%;right:10%;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0.5}
.stat-value{font-size:2.5rem;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--accent-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.stat-label{font-size:0.85rem;color:var(--muted);margin-top:0.4rem}

/* Timeline */
.timeline{position:relative;padding-left:2.5rem}
.timeline::before{content:"";position:absolute;left:1rem;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--accent),var(--accent-2),var(--ok));border-radius:1px;opacity:0.3}
.timeline-item{position:relative;padding-bottom:1.5rem}
.timeline-item:last-child{padding-bottom:0}
.timeline-dot{position:absolute;left:-1.5rem;top:0.25rem;width:1rem;height:1rem;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 0 12px var(--accent-glow);z-index:1}
.timeline-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--accent);opacity:0.3;animation:dotPulse 3s ease-in-out infinite}
@keyframes dotPulse{0%,100%{transform:scale(1);opacity:0.3}50%{transform:scale(1.3);opacity:0}}

.step-number{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#000;font-weight:700;font-size:0.9rem;margin-bottom:0.5rem;box-shadow:0 2px 12px var(--accent-glow)}

.char-counter{text-align:right;font-size:0.75rem;color:var(--muted);transition:color 0.2s}
.char-counter-warn{color:var(--danger)}

.empty-state{text-align:center;padding:3rem 1rem;color:var(--muted)}
.empty-state-icon{font-size:3rem;margin-bottom:0.75rem;opacity:0.4}

/* Toast */
.toast{position:fixed;bottom:1.5rem;right:1.5rem;padding:0.75rem 1.25rem;border-radius:var(--radius-sm);font-size:0.875rem;font-weight:500;color:#fff;z-index:200;animation:toastIn 0.4s var(--ease-spring),fadeOut 0.3s ease 2.7s forwards;box-shadow:0 4px 20px rgba(0,0,0,0.3);pointer-events:none;backdrop-filter:blur(8px)}
.toast-ok{background:rgba(91,245,160,0.9);color:#000}
.toast-danger{background:rgba(255,107,107,0.9)}
.toast-info{background:rgba(110,231,255,0.9);color:#000}
@keyframes toastIn{from{opacity:0;transform:translateY(20px) scale(0.9)}to{opacity:1;transform:none}}
@keyframes fadeOut{to{opacity:0;transform:translateY(12px)}}

.spinner{display:inline-block;width:1em;height:1em;border:2px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;animation:spin 0.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Trust indicators */
.trust-row{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;align-items:center;padding:0.75rem 0}
.trust-item{display:flex;align-items:center;gap:0.5rem;font-size:0.85rem;color:var(--muted);font-weight:500;padding:0.45rem 0.9rem;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--bg-glass);backdrop-filter:blur(8px);transition:all 0.3s var(--ease-spring)}
.trust-item:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 16px var(--accent-glow);transform:translateY(-2px) scale(1.03)}
.trust-icon{font-size:1rem;transition:transform 0.3s var(--ease-spring)}
.trust-item:hover .trust-icon{transform:scale(1.2)}

.reading-time{display:inline-flex;align-items:center;gap:0.35rem;font-size:0.8rem;color:var(--muted)}

/* Copy button */
.copy-btn{position:relative}
.copy-btn::after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);padding:0.25rem 0.5rem;background:var(--bg-elevated);color:var(--ok);font-size:0.7rem;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.2s}
.copy-btn.copied::after{opacity:1}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:2rem 0;margin-top:3rem;color:var(--muted);font-size:0.85rem}
.footer-inner{display:grid;gap:1.5rem}
@media(min-width:640px){.footer-inner{grid-template-columns:1fr auto;align-items:start}}
.footer-links{display:flex;gap:1rem;flex-wrap:wrap}
.footer-links a{color:var(--muted);transition:all 0.2s}.footer-links a:hover{color:var(--accent)}
.footer-tagline{font-size:0.8rem;max-width:360px}

/* Autocomplete */
.ac-wrap{position:relative;z-index:60}
.ac-list{position:absolute;top:100%;left:0;right:0;z-index:100;background:var(--bg-elevated);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);border:1px solid var(--border-strong);border-top:none;border-radius:0 0 var(--radius-sm) var(--radius-sm);box-shadow:0 8px 32px rgba(0,0,0,0.4),var(--glow);max-height:260px;overflow-y:auto;display:none}
.ac-list.open{display:block;animation:acOpen 0.2s var(--ease-out)}
@keyframes acOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ac-item{padding:0.65rem 0.85rem;cursor:pointer;font-size:0.875rem;transition:all 0.15s;display:flex;align-items:center;gap:0.6rem;border-left:3px solid transparent}
.ac-item:hover,.ac-item.ac-active{background:var(--accent-glow);color:var(--accent);border-left-color:var(--accent)}
.ac-item-city{font-weight:600;color:var(--text)}
.ac-item-region{color:var(--muted);font-size:0.8rem}
.ac-item-icon{color:var(--accent);font-size:1.1rem;flex-shrink:0;opacity:0.7}
.ac-loading{padding:0.65rem 0.85rem;font-size:0.8rem;color:var(--muted);text-align:center}
.card:has(.ac-list.open){overflow:visible}

/* City map preview */
.city-map-wrap{margin-top:0.75rem;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border);height:0;opacity:0;transition:height 0.4s var(--ease-out),opacity 0.4s ease,box-shadow 0.3s ease}
.city-map-wrap.visible{height:180px;opacity:1;box-shadow:var(--shadow),var(--glow)}
.city-map-wrap iframe{width:100%;height:100%;border:0;filter:grayscale(0.3) contrast(1.1);transition:filter 0.3s}
.city-map-wrap:hover iframe{filter:grayscale(0) contrast(1)}
.city-map-label{display:flex;align-items:center;gap:0.4rem;font-size:0.8rem;color:var(--muted);margin-top:0.35rem;opacity:0;transition:opacity 0.3s}
.city-map-label.visible{opacity:1}
.city-map-pin{color:var(--accent);font-size:0.9rem}

/* Social picker grid */
.social-picker{display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:0.5rem}
.social-picker-item{display:inline-flex;align-items:center;gap:0.3rem;padding:0.3rem 0.6rem;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--bg-glass);backdrop-filter:blur(8px);color:var(--muted);font-size:0.75rem;font-weight:500;cursor:pointer;transition:all 0.25s var(--ease-spring);white-space:nowrap}
.social-picker-item::after{display:none}
.social-picker-item:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 12px var(--accent-glow);transform:translateY(-1px)}
.social-picker-item:active{transform:scale(0.95)}
.social-picker-active{border-color:var(--ok);color:var(--ok);background:rgba(91,245,160,0.06)}
.social-picker-used{animation:pickerPop 0.3s var(--ease-spring)}
@keyframes pickerPop{0%{transform:scale(1)}50%{transform:scale(0.9)}100%{transform:scale(1)}}
.social-picker-item .icon svg{width:0.8em;height:0.8em}

/* Social inline rows */
.social-entries{display:grid;gap:0.35rem}
.social-row{display:flex;align-items:center;gap:0.5rem;padding:0.4rem 0.65rem;background:var(--bg-glass);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:var(--radius-sm);animation:scaleIn 0.2s var(--ease-spring)}
.social-row:hover{border-color:var(--border-strong)}
.social-row-label{font-size:0.75rem;font-weight:600;color:var(--muted);min-width:70px;flex-shrink:0}
.social-row-input{flex:1;background:transparent;border:none;border-radius:0;padding:0.3rem 0;font-size:0.85rem;color:var(--text);outline:none}
.social-row-input:focus{box-shadow:none;transform:none}
.social-row-input::placeholder{color:var(--muted);opacity:0.4}
.social-row-x{background:none;border:none;color:var(--muted);font-size:0.7rem;cursor:pointer;padding:0.2rem;border-radius:4px;transition:all 0.15s;line-height:1;opacity:0.5;flex-shrink:0}
.social-row-x::after{display:none}
.social-row-x:hover{color:var(--danger);opacity:1;background:rgba(255,107,107,0.1)}

/* Social display on review detail */
.social-grid{display:flex;flex-wrap:wrap;gap:0.5rem}
.social-link{display:inline-flex;align-items:center;gap:0.4rem;padding:0.4rem 0.75rem;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--bg-glass);backdrop-filter:blur(8px);font-size:0.82rem;font-weight:500;color:var(--muted);text-decoration:none;transition:all 0.3s var(--ease-spring)}
.social-link:hover{border-color:var(--accent);color:var(--accent);text-decoration:none;box-shadow:0 0 16px var(--accent-glow);transform:translateY(-2px) scale(1.03)}
.social-link:active{transform:translateY(0) scale(0.97)}
.social-link-icon{font-size:1rem}

/* Drag & Drop Photo Upload */
.drop-zone{position:relative;border:2px dashed var(--border-strong);border-radius:var(--radius);padding:2rem 1.5rem;text-align:center;cursor:pointer;transition:all 0.3s var(--ease-spring);background:var(--bg-glass);backdrop-filter:blur(8px);min-height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem}
.drop-zone:hover{border-color:var(--accent);background:var(--accent-glow);transform:scale(1.01)}
.drop-zone.drag-over{border-color:var(--accent);background:var(--accent-glow);box-shadow:0 0 40px var(--accent-glow),inset 0 0 40px var(--accent-glow);transform:scale(1.02)}
.drop-zone.drag-over .drop-icon{transform:scale(1.3) rotate(-10deg)}
.drop-zone input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop-icon{font-size:2.5rem;opacity:0.5;transition:all 0.3s var(--ease-spring);line-height:1}
.drop-text{font-size:0.9rem;color:var(--muted);font-weight:500}
.drop-text strong{color:var(--accent)}
.drop-hint{font-size:0.75rem;color:var(--muted);opacity:0.7}
.drop-zone.has-files{border-style:solid;border-color:var(--ok);background:rgba(91,245,160,0.05)}

/* Photo Preview Grid */
.photo-previews{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:0.75rem;margin-top:0.75rem}
.photo-preview{position:relative;border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:1;border:1px solid var(--border-strong);background:var(--bg-elevated);animation:scaleIn 0.3s var(--ease-spring)}
.photo-preview img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s var(--ease-out)}
.photo-preview:hover img{transform:scale(1.08)}
.photo-preview-remove{position:absolute;top:4px;right:4px;width:1.5rem;height:1.5rem;border-radius:50%;background:rgba(0,0,0,0.7);color:#fff;border:none;font-size:0.75rem;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all 0.2s;line-height:1;padding:0}
.photo-preview:hover .photo-preview-remove{opacity:1}
.photo-preview-remove:hover{background:var(--danger);transform:scale(1.15)}
.photo-preview-info{position:absolute;bottom:0;left:0;right:0;padding:0.25rem 0.4rem;background:linear-gradient(transparent,rgba(0,0,0,0.7));font-size:0.65rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity 0.2s}
.photo-preview:hover .photo-preview-info{opacity:1}
.photo-upload-progress{position:absolute;bottom:0;left:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--ok));border-radius:0 0 var(--radius-sm) var(--radius-sm);transition:width 0.3s ease}
.photo-count{font-size:0.8rem;color:var(--muted);margin-top:0.25rem}

/* Photo Gallery (review detail) */
.photo-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0.75rem;margin:1rem 0}
.photo-gallery-item{position:relative;border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:4/3;cursor:pointer;border:1px solid var(--border);transition:all 0.4s var(--ease-out)}
.photo-gallery-item:hover{border-color:var(--accent);box-shadow:0 8px 30px var(--accent-glow);transform:translateY(-4px) scale(1.02)}
.photo-gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s var(--ease-out)}
.photo-gallery-item:hover img{transform:scale(1.1)}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.92);backdrop-filter:blur(8px);z-index:300;display:flex;align-items:center;justify-content:center;animation:fadeIn 0.25s var(--ease-out);cursor:zoom-out}
.lightbox img{max-width:90vw;max-height:85vh;object-fit:contain;border-radius:var(--radius-sm);animation:lbIn 0.35s var(--ease-spring);box-shadow:0 8px 40px rgba(0,0,0,0.5)}
@keyframes lbIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:none}}
.lightbox-close{position:fixed;top:1rem;right:1rem;width:2.5rem;height:2.5rem;border-radius:50%;background:rgba(255,255,255,0.1);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.2);color:#fff;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;z-index:301}
.lightbox-close:hover{background:rgba(255,255,255,0.2);transform:scale(1.1)}
.lightbox-nav{position:fixed;top:50%;transform:translateY(-50%);width:3rem;height:3rem;border-radius:50%;background:rgba(255,255,255,0.1);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.2);color:#fff;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;z-index:301}
.lightbox-nav:hover{background:rgba(255,255,255,0.25);transform:translateY(-50%) scale(1.1)}
.lightbox-prev{left:1rem}
.lightbox-next{right:1rem}
.lightbox-counter{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);color:rgba(255,255,255,0.6);font-size:0.85rem;z-index:301}

/* Animations */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.92)}to{opacity:1;transform:scale(1)}}
@keyframes glowPulse{0%,100%{box-shadow:var(--shadow)}50%{box-shadow:var(--shadow),var(--glow)}}
.animate-in{animation:slideUp 0.6s var(--ease-out) both}
.animate-in > *:nth-child(1){animation:slideUp 0.6s var(--ease-out) 0.06s both}
.animate-in > *:nth-child(2){animation:slideUp 0.6s var(--ease-out) 0.12s both}
.animate-in > *:nth-child(3){animation:slideUp 0.6s var(--ease-out) 0.18s both}
.animate-in > *:nth-child(4){animation:slideUp 0.6s var(--ease-out) 0.24s both}
.animate-in > *:nth-child(5){animation:slideUp 0.6s var(--ease-out) 0.30s both}
.animate-in > *:nth-child(n+6){animation:slideUp 0.6s var(--ease-out) 0.36s both}

/* Step transitions */
.step-fade-out{animation:stepOut 0.2s ease forwards}
.step-fade-in{animation:stepIn 0.35s var(--ease-out) forwards}
@keyframes stepOut{to{opacity:0;transform:translateX(-16px)}}
@keyframes stepIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
.step-fade-back-out{animation:stepBackOut 0.2s ease forwards}
.step-fade-back-in{animation:stepBackIn 0.35s var(--ease-out) forwards}
@keyframes stepBackOut{to{opacity:0;transform:translateX(16px)}}
@keyframes stepBackIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}}

/* Magnetic hover (JS sets --mx, --my) */
.magnetic{transition:transform 0.2s var(--ease-out)}

/* Cursor glow on cards */
.card-glow{--glow-x:50%;--glow-y:50%}
.card-glow::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(400px circle at var(--glow-x) var(--glow-y),var(--accent-glow),transparent 70%);opacity:0;transition:opacity 0.3s;pointer-events:none}
.card-glow:hover::after{opacity:1}

/* Utility */
.text-center{text-align:center}.justify-center{justify-content:center}
.pre-wrap{white-space:pre-wrap}.cursor-pointer{cursor:pointer}
.link-card{text-decoration:none;color:inherit}.link-card:hover{text-decoration:none}
.flex-1{flex:1}.bg-elevated{background:var(--bg-elevated)}
.checkbox-inline input[type="checkbox"]{width:auto;accent-color:var(--accent)}
.not-found-code{font-size:7rem;opacity:0.15;font-weight:800;font-family:var(--font-display);line-height:1;background:linear-gradient(135deg,var(--accent),var(--accent-2),var(--danger));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 4s ease-in-out infinite;background-size:200% 200%}
.sr-only,.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

/* Feature grid items */
.feature-card{text-align:center;padding:2rem 1.5rem;transition:all 0.4s var(--ease-out)}
.feature-icon{font-size:2.5rem;margin-bottom:0.75rem;display:inline-block;transition:transform 0.4s var(--ease-spring)}
.feature-card:hover .feature-icon{transform:scale(1.2) rotate(-5deg)}

::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}

@media print{.site-header,.site-footer,.site-nav,.overlay,button,.scroll-progress{display:none!important}.card{box-shadow:none;border:1px solid #ccc;backdrop-filter:none}}

/* Google-esque search page */
.search-hero{text-align:center;padding:3rem 1.5rem;background:var(--bg-glass);backdrop-filter:blur(24px);border:1px solid var(--border);border-radius:var(--radius);position:relative;overflow:hidden}
.search-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,var(--accent-glow),transparent 60%);pointer-events:none;opacity:0.6}
.search-hero>*{position:relative}
.search-hero-compact{padding:1.25rem 1.5rem;text-align:left}
.search-bar-wrap{max-width:640px;margin:0 auto}
.search-hero-compact .search-bar-wrap{max-width:100%}
.search-bar{position:relative;display:flex;align-items:center}
.search-bar-icon{position:absolute;left:1rem;color:var(--muted);pointer-events:none;z-index:1;transition:color 0.2s}
.search-bar input{padding-left:3rem;padding-right:2.5rem;font-size:1.1rem;height:3.25rem;border-radius:var(--radius);background:var(--bg-card);backdrop-filter:blur(16px);border:2px solid var(--border-strong);box-shadow:var(--shadow);transition:all 0.3s var(--ease-out)}
.search-bar input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-glow),0 4px 30px var(--accent-glow)}
.search-bar input:focus ~ .search-bar-icon{color:var(--accent)}
.search-hero-compact .search-bar input{font-size:0.95rem;height:2.75rem}
.search-bar-clear{position:absolute;right:0.75rem;color:var(--muted);display:flex;align-items:center;transition:color 0.2s}
.search-bar-clear:hover{color:var(--danger);text-decoration:none}
.search-hints{display:flex;align-items:center;gap:0.5rem;justify-content:center;margin-top:1rem;flex-wrap:wrap}
.search-hint-chip{padding:0.25rem 0.6rem;border-radius:var(--radius-pill);border:1px solid var(--border);font-size:0.75rem;color:var(--muted);transition:all 0.2s var(--ease-spring);text-decoration:none}
.search-hint-chip:hover{border-color:var(--accent);color:var(--accent);text-decoration:none;box-shadow:0 0 12px var(--accent-glow)}
.search-results-bar{display:flex;justify-content:space-between;align-items:center;padding:0.5rem 0}
.search-filters{background:var(--bg-card);backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow)}
.search-filters-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;align-items:end}
.search-filter-group{display:flex;flex-direction:column;gap:0.3rem}
.search-filter-tags{grid-column:1/-1}
.search-filter-label{font-size:0.75rem;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:0.3rem}
.search-tag-check{display:inline-flex;align-items:center;gap:0.3rem;padding:0.2rem 0.55rem;border-radius:var(--radius-pill);border:1px solid var(--border);font-size:0.72rem;font-weight:500;color:var(--muted);cursor:pointer;transition:all 0.2s var(--ease-spring)}
.search-tag-check input{display:none}
.search-tag-check:hover{border-color:var(--accent);color:var(--accent)}
.search-tag-check.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#000;border-color:transparent;font-weight:600}

/* SVG Icon utility */
.icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle}
.icon svg{width:1em;height:1em}
.icon-xs svg{width:0.75em;height:0.75em}
.icon-sm svg{width:0.9em;height:0.9em}
.icon-heading svg{width:1.1em;height:1.1em;margin-right:0.35rem}
.icon-lg svg{width:1.4em;height:1.4em}

/* Email gate */
.gate-icon{margin-bottom:0.5rem}
.gate-icon .icon svg{width:3rem;height:3rem;color:var(--accent);filter:drop-shadow(0 0 20px var(--accent-glow))}
.gate-email-wrap{display:flex;flex-direction:column;gap:0.75rem;max-width:420px;margin:1.5rem auto 0}
.gate-email-field{position:relative;display:flex;align-items:center}
.gate-email-icon{position:absolute;left:0.85rem;color:var(--muted);pointer-events:none;z-index:1}
.gate-email-field input{padding-left:2.75rem;font-size:1.05rem;height:3.2rem;border-radius:var(--radius);background:var(--bg-glass);backdrop-filter:blur(12px);border:2px solid var(--border-strong);transition:all 0.3s var(--ease-out)}
.gate-email-field input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-glow),0 0 30px var(--accent-glow)}
.gate-email-wrap button{height:3rem;font-size:0.95rem;border-radius:var(--radius)}

/* Person profile page */
.person-hero{overflow:visible}
.person-hero-top{display:flex;align-items:center;gap:1.25rem}
.person-avatar{width:4.5rem;height:4.5rem;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:800;color:#000;flex-shrink:0;box-shadow:0 4px 20px var(--accent-glow);transition:transform 0.3s var(--ease-spring)}
.person-hero:hover .person-avatar{transform:scale(1.08) rotate(-3deg)}
.person-hero-info{flex:1;min-width:0}
.person-hero-info h1{font-size:clamp(1.5rem,4vw,2.2rem)}
.person-hero-info p{margin:0.25rem 0 0}
.person-stats{display:flex;gap:2rem;flex-wrap:wrap;padding:1rem 0 0;border-top:1px solid var(--border);margin-top:1rem}
.person-stat{display:flex;flex-direction:column;align-items:center;gap:0.15rem;min-width:80px}
.person-stat-value{font-size:1.6rem;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--accent-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1}
.person-stat-label{font-size:0.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;font-weight:600}

/* Person profile link on review page */
.person-profile-link{display:flex;align-items:center;gap:0.75rem;text-decoration:none;color:var(--text);transition:all 0.3s var(--ease-spring);cursor:pointer;border:1px solid var(--border)}
.person-profile-link:hover{border-color:var(--accent);box-shadow:0 0 20px var(--accent-glow);transform:translateY(-2px);text-decoration:none;color:var(--accent)}
.person-profile-link .icon:last-child{margin-left:auto;opacity:0.4;transition:all 0.2s}
.person-profile-link:hover .icon:last-child{opacity:1;transform:translateX(3px)}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
  .hero-orb,.scroll-progress{display:none!important}
  .reveal,.reveal-scale,.reveal-left,.reveal-right{opacity:1;transform:none}
}