/* ============================================================
   GLOWME MED SPA — Design System
   Preset: Champagne + Elevate  |  21st.dev animation layer
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=DM+Sans:wght@400;500;600;700;800&display=swap');

/* ─── Tokens ─────────────────────────────────────────────── */
:root {
  --bar-h: 40px;
  --nav-h: 72px;
  --offset: calc(var(--bar-h) + var(--nav-h));
  --radius: 8px;
  --radius-lg: 16px;
  --shadow: 0 4px 32px rgba(0,0,0,0.07);
  --shadow-hover: 0 20px 64px rgba(0,0,0,0.14);
  --shadow-gold: 0 12px 40px rgba(184,151,74,0.25);
  --transition: 0.28s cubic-bezier(0.4,0,0.2,1);
  --spring: 0.55s cubic-bezier(0.34,1.56,0.64,1);
  --ease-out: 0.65s cubic-bezier(0.22,1,0.36,1);

  /* Champagne palette */
  --bg: #fdfbf5;
  --bg-rgb: 253,251,245;
  --surface: #fffef9;
  --accent: #b8974a;
  --accent-2: #8c7035;
  --text: #1e1c18;
  --text-muted: #7a7060;
  --border: rgba(0,0,0,0.07);

  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
}

/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  padding-top: var(--offset);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2 { font-weight: 300; letter-spacing: 0.01em; }
h3 { font-weight: 400; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(184,151,74,0.35); border-radius: 3px; }

/* ─── 21st.dev Keyframes ─────────────────────────────────── */
@keyframes blink        { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes badge-float  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes hero-rise    { from{opacity:0;transform:translateY(28px) scale(0.97)} to{opacity:1;transform:none} }
@keyframes pulse-green  { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.4)} 50%{box-shadow:0 0 0 7px rgba(34,197,94,0)} }
@keyframes shimmer-text { 0%{background-position:150% 50%} 100%{background-position:-150% 50%} }
@keyframes marquee      { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes gold-line    { from{width:0} to{width:var(--gl-w,44px)} }
@keyframes fade-up      { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }
@keyframes scale-in     { from{opacity:0;transform:scale(0.85)} to{opacity:1;transform:none} }
@keyframes slide-x      { from{opacity:0;transform:translateX(-22px)} to{opacity:1;transform:none} }
@keyframes icon-bounce  { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-9px)} 70%{transform:translateY(-4px)} }
@keyframes perk-spring  { from{transform:scale(0.7);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes float-card   { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-6px) rotate(0.4deg)} }

/* Scroll-triggered reveal utility */
.reveal           { opacity:0; transform:translateY(28px); transition:opacity var(--ease-out),transform var(--ease-out); }
.reveal.visible   { opacity:1; transform:none; }
.reveal-x         { opacity:0; transform:translateX(-22px); transition:opacity var(--ease-out),transform var(--ease-out); }
.reveal-x.visible { opacity:1; transform:none; }
.reveal-scale         { opacity:0; transform:scale(0.88); transition:opacity var(--spring),transform var(--spring); }
.reveal-scale.visible { opacity:1; transform:none; }

/* ─── Layout ─────────────────────────────────────────────── */
.container { max-width:1320px; margin:0 auto; padding:0 clamp(16px,3vw,40px); }
.section { padding:96px 0; }
.section-alt { background:var(--surface); }
@media(max-width:768px){ .section{padding:64px 0;} }

/* ─── Promo Bar ───────────────────────────────────────────── */
#promo-bar {
  position:fixed; top:0; left:0; right:0; height:var(--bar-h);
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; gap:12px;
  font-size:.78rem; font-family:var(--font-body); letter-spacing:.04em; z-index:1000;
}
#promo-bar a { color:inherit; text-decoration:underline; }
.bar-close {
  position:absolute; right:16px; background:none; border:none; cursor:pointer;
  color:inherit; display:flex; align-items:center; opacity:.8; transition:opacity .2s;
}
.bar-close:hover { opacity:1; }

/* ─── Nav ────────────────────────────────────────────────── */
.nav {
  position:fixed; top:var(--bar-h); left:0; right:0; height:var(--nav-h);
  background:rgba(var(--bg-rgb),.97); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border); z-index:999;
  transition:box-shadow var(--transition), top var(--transition);
}
.nav.scrolled { box-shadow:var(--shadow); }
.nav-inner {
  max-width:1320px; margin:0 auto; padding:0 clamp(16px,3vw,40px);
  height:100%; display:flex; align-items:center; justify-content:space-between;
}
.nav-logo img { height:44px; transition:height var(--transition); }
.nav.scrolled .nav-logo img { height:36px; }
.nav-logo-text { font-family:var(--font-heading); font-size:1.5rem; font-weight:400; color:var(--text); letter-spacing:.04em; }
.nav-logo-text span { color:var(--accent); }
.nav-links { display:flex; align-items:center; gap:28px; }
.nav-links a {
  font-family:var(--font-body); font-size:.85rem; font-weight:500;
  color:var(--text); letter-spacing:.03em; transition:color var(--transition);
}
.nav-links a:hover { color:var(--accent); }
.nav-cta {
  background:var(--accent); color:#fff !important; padding:10px 24px !important;
  border-radius:100px; font-weight:600 !important; letter-spacing:.06em;
  padding-bottom:10px !important; transition:opacity .25s, transform .28s var(--ease-out) !important;
}
.nav-cta::after { display:none !important; }
.nav-cta:hover { opacity:.88 !important; color:#fff !important; transform:translateY(-2px) !important; }
.nav-hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:4px;
}
.nav-hamburger span { display:block; width:24px; height:2px; background:var(--text); border-radius:2px; transition:var(--transition); }
.nav-mobile {
  position:fixed; top:var(--offset); left:0; right:0; background:var(--surface);
  padding:24px; display:flex; flex-direction:column; gap:0;
  transform:translateY(-110%); transition:transform var(--transition); z-index:998; box-shadow:var(--shadow);
}
.nav-mobile.open { transform:translateY(0); }
.nav-mobile a { font-size:1rem; color:var(--text); padding:14px 0; border-bottom:1px solid var(--border); }
.nav-mobile .nav-cta { margin-top:12px; display:inline-flex; align-items:center; justify-content:center; border-bottom:none; }
body.bar-hidden .nav   { top:0; }
body.bar-hidden .nav-mobile { top:var(--nav-h); }
body.bar-hidden { padding-top:var(--nav-h); }
#progress-bar {
  position:fixed; top:var(--offset); left:0; right:auto;
  height:2px; width:0%; background:var(--accent); z-index:1001; transition:width .1s linear;
}
@media(max-width:768px){ .nav-links{display:none;} .nav-hamburger{display:flex;} }

/* ─── Buttons — Magnetic-ready ───────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 36px; border-radius:100px;
  font-family:var(--font-body); font-weight:600; font-size:.875rem;
  letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; border:none;
  position:relative; overflow:hidden;
  transition:opacity .25s, box-shadow .28s, transform .28s var(--ease-out);
}
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { opacity:.88; transform:translateY(-3px); box-shadow:var(--shadow-gold); }
.btn-primary::after {
  content:''; position:absolute; top:-50%; left:-75%;
  width:50%; height:200%; background:rgba(255,255,255,.18);
  transform:skewX(-20deg); transition:left .5s ease;
}
.btn-primary:hover::after { left:125%; }
.btn-secondary { background:transparent; color:var(--accent); border:1.5px solid var(--accent); }
.btn-secondary:hover { background:var(--accent); color:#fff; transform:translateY(-2px); }

/* Magnetic wrapper — JS handles transform via inline style */
.mag-btn { display:inline-block; }

/* ─── Section headings ───────────────────────────────────── */
.section-header { margin-bottom:48px; }
.section-header.center { text-align:center; }
.section-header.center .section-sub { margin:0 auto; }
.section-eyebrow {
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:10px; font-weight:600; display:block;
}

/* Gold line — animated on reveal */
.gold-line {
  height:1px; background:var(--accent); margin-bottom:16px;
  width:0; animation:gold-line var(--ease-out) .15s forwards;
}
.gold-line.visible { width:var(--gl-w,44px); }

.section-heading {
  font-family:var(--font-heading); font-size:clamp(2rem,4vw,3.2rem);
  font-weight:300; line-height:1.15; margin-bottom:16px; color:var(--text);
}
.section-heading em { font-style:italic; font-weight:300; color:var(--accent); }
.section-sub { font-size:1rem; color:var(--text-muted); max-width:540px; line-height:1.7; }

/* TextShimmer — gold sweep on CTA heading */
.shimmer-heading {
  font-family:var(--font-heading); font-weight:300;
  font-size:clamp(2.2rem,4vw,3.4rem); display:block;
  background:linear-gradient(90deg,#fff 0%,#fff 35%,var(--accent) 50%,#fff 65%,#fff 100%);
  background-size:300% 100%;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:shimmer-text 3.2s ease-in-out infinite;
}
/* Dark-bg shimmer (for CTA on dark bg) already above */
/* Light-bg shimmer (headings on ivory) */
.shimmer-heading-dark {
  font-family:var(--font-heading); font-weight:300;
  font-size:clamp(2rem,4vw,3rem); display:inline;
  background:linear-gradient(90deg,var(--text) 0%,var(--text) 35%,var(--accent) 50%,var(--text) 65%,var(--text) 100%);
  background-size:300% 100%;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:shimmer-text 4s ease-in-out infinite;
}

/* ─── Marquee ─────────────────────────────────────────────── */
.marquee-section {
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:10px 0; overflow:hidden;
}
.marquee-wrap { overflow:hidden; }
.marquee-track { display:flex; gap:0; width:max-content; animation:marquee 32s linear infinite; }
.marquee-wrap:hover .marquee-track { animation-duration:10s; }
.marquee-item {
  white-space:nowrap; font-size:.74rem; font-weight:500;
  color:var(--text-muted); letter-spacing:.05em; padding:0 28px;
}
.marquee-dot { display:inline-block; width:3px; height:3px; background:var(--accent); border-radius:50%; vertical-align:middle; margin-left:28px; }

/* ─── Hero ───────────────────────────────────────────────── */
.hero { min-height:calc(100vh - var(--offset)); display:flex; align-items:center; position:relative; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; width:100%; padding:60px 0; }
@media(max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:40px;} .hero-image{display:none;} }

/* Booking ticker */
.booking-ticker { display:flex; align-items:center; gap:8px; margin-bottom:20px; }
.ticker-dot { width:8px; height:8px; border-radius:50%; background:#22c55e; flex-shrink:0; animation:pulse-green 2s ease infinite; }
.ticker-text { font-size:.76rem; color:var(--text-muted); font-weight:500; transition:opacity .3s ease; }

.hero-eyebrow { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; font-weight:600; display:block; }
.hero-heading {
  font-family:var(--font-heading); font-size:clamp(2.8rem,5.5vw,4.8rem);
  font-weight:300; line-height:1.08; color:var(--text); margin-bottom:20px;
  min-height:2.3em; white-space:pre-wrap;
}
.typed-cursor {
  display:inline-block; width:2px; height:.85em; background:var(--accent);
  margin-left:2px; vertical-align:baseline; animation:blink .9s step-end infinite;
  position:relative; top:.05em;
}
.hero-sub { font-size:1.05rem; color:var(--text-muted); margin-bottom:32px; max-width:460px; line-height:1.75; }
.hero-ctas { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:20px; }
.scarcity-line { font-size:.76rem; color:var(--text-muted); margin-bottom:28px; }

/* Hero image + floaters */
.hero-image-wrap { position:relative; }
.hero-image img {
  border-radius:var(--radius-lg); box-shadow:var(--shadow-hover); width:100%;
  aspect-ratio:4/5; object-fit:cover;
  animation:hero-rise 1.1s var(--ease-out) .1s both;
}
.hero-badges { display:flex; gap:10px; flex-wrap:wrap; }
.hero-badge {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:10px 16px; box-shadow:var(--shadow);
}
.hero-badge:nth-child(1){ animation:badge-float 4s ease-in-out 0s infinite; }
.hero-badge:nth-child(2){ animation:badge-float 4s ease-in-out 1.3s infinite; }
.hero-badge:nth-child(3){ animation:badge-float 4s ease-in-out 2.6s infinite; }
.hero-badge strong { display:block; font-size:.75rem; font-weight:700; color:var(--text); margin-bottom:2px; }
.hero-badge span   { font-size:.68rem; color:var(--text-muted); }

/* Hero pill accent */
.hero-pill-accent {
  position:absolute; bottom:-16px; left:-16px;
  background:var(--accent); color:#fff; border-radius:100px; padding:10px 22px;
  font-weight:700; font-size:.8rem; letter-spacing:.04em;
  box-shadow:0 8px 24px rgba(184,151,74,.45);
  animation:badge-float 3.5s ease-in-out .7s infinite;
}
/* Floating review card */
.float-review {
  position:absolute; top:24px; right:-18px;
  background:var(--surface); border-radius:12px; padding:14px 18px;
  box-shadow:0 8px 32px rgba(0,0,0,.1); border:1px solid var(--border);
  max-width:200px; animation:badge-float 4s ease-in-out 1.2s infinite;
}
.float-review .stars { color:var(--accent); font-size:.82rem; letter-spacing:1px; display:block; margin-bottom:6px; }
.float-review p { font-family:var(--font-heading); font-style:italic; font-size:.84rem; color:var(--text); line-height:1.55; margin:0; }
.float-review small { color:var(--text-muted); font-size:.69rem; display:block; margin-top:6px; }
@media(max-width:1100px){ .float-review{display:none;} .hero-pill-accent{display:none;} }

/* ─── Stats Band ─────────────────────────────────────────── */
.stats-band { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:52px 0; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; text-align:center; }
@media(max-width:768px){ .stats-grid{grid-template-columns:repeat(2,1fr);} }
.stat-number { display:block; font-family:var(--font-heading); font-size:clamp(2.2rem,4vw,3.2rem); font-weight:300; color:var(--accent); line-height:1; margin-bottom:6px; }
.stat-label  { font-size:.76rem; font-weight:500; color:var(--text-muted); letter-spacing:.05em; }

/* ─── Cards ──────────────────────────────────────────────── */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
@media(max-width:960px){ .grid-3{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .grid-3,.grid-2{grid-template-columns:1fr;} }
.card {
  background:var(--surface); border-radius:var(--radius-lg); padding:32px;
  border:1px solid var(--border); box-shadow:var(--shadow);
  display:flex; flex-direction:column; height:100%;
  transition:transform var(--ease-out), box-shadow var(--transition), border-color var(--transition);
}
.card:hover { transform:translateY(-6px) rotate3d(1,1,0,.7deg); box-shadow:var(--shadow-hover); border-color:rgba(184,151,74,.4); }
.service-card-icon {
  width:46px; height:46px; background:rgba(184,151,74,.09); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:var(--accent);
  font-size:1.1rem;
  transition:transform var(--spring), background var(--transition);
}
.card:hover .service-card-icon { transform:scale(1.12) rotate(-8deg); background:rgba(184,151,74,.18); }
.card h3 { font-family:var(--font-heading); font-size:1.35rem; margin-bottom:10px; }
.card p  { color:var(--text-muted); font-size:.88rem; line-height:1.7; flex:1; }
.card-price { font-family:var(--font-heading); font-size:1.15rem; color:var(--accent); margin:16px 0 18px; font-style:italic; }
.card-link { display:inline-flex; align-items:center; gap:6px; font-size:.76rem; font-weight:600; color:var(--accent); letter-spacing:.06em; text-transform:uppercase; transition:gap var(--transition); opacity:.4; }
.card:hover .card-link { opacity:1; gap:10px; }

/* ─── Reviews ─────────────────────────────────────────────── */
.review-card {
  background:var(--surface); border-radius:var(--radius-lg); padding:32px;
  border:1px solid var(--border); box-shadow:var(--shadow);
  display:flex; flex-direction:column;
  transition:transform var(--ease-out), box-shadow var(--transition), border-color var(--transition);
}
.review-card:hover { transform:translateY(-5px); box-shadow:0 16px 48px rgba(184,151,74,.1); border-color:rgba(184,151,74,.4); }
.review-stars { display:flex; gap:3px; margin-bottom:14px; color:var(--accent); font-size:.88rem; letter-spacing:1px; }
.review-quote { font-family:var(--font-heading); font-size:1.1rem; font-style:italic; font-weight:300; line-height:1.65; color:var(--text); margin-bottom:20px; flex:1; }
.review-author { display:flex; align-items:center; gap:12px; margin-top:auto; }
.review-avatar { width:38px; height:38px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.88rem; flex-shrink:0; }
.review-name { font-weight:600; font-size:.86rem; }
.review-source { font-size:.73rem; color:var(--text-muted); }

/* ─── Two-col ─────────────────────────────────────────────── */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.two-col.reverse { direction:rtl; }
.two-col.reverse > * { direction:ltr; }
@media(max-width:768px){ .two-col{grid-template-columns:1fr;gap:40px;} .two-col.reverse{direction:ltr;} }
.two-col-image img { border-radius:var(--radius-lg); box-shadow:var(--shadow-hover); width:100%; aspect-ratio:4/5; object-fit:cover; }

/* ─── Differentiators ─────────────────────────────────────── */
.diff-list { display:flex; flex-direction:column; gap:20px; }
.diff-item { display:flex; gap:16px; align-items:flex-start; }
.diff-icon {
  width:44px; height:44px; flex-shrink:0; border-radius:var(--radius);
  background:rgba(184,151,74,.09); display:flex; align-items:center; justify-content:center;
  color:var(--accent); font-size:1.05rem;
  transition:transform var(--spring), background var(--transition);
}
.diff-item:hover .diff-icon { transform:translateY(-5px) scale(1.08); background:rgba(184,151,74,.18); }
.diff-text h4 { font-size:.95rem; font-weight:600; margin-bottom:4px; }
.diff-text p  { font-size:.86rem; color:var(--text-muted); line-height:1.65; }

/* ─── FAQ ─────────────────────────────────────────────────── */
.faq-list { display:flex; flex-direction:column; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-q {
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:20px 0; background:none; border:none; cursor:pointer;
  font-family:var(--font-body); font-size:.95rem; font-weight:500;
  color:var(--text); text-align:left; gap:16px; transition:color var(--transition);
}
.faq-q:hover { color:var(--accent); }
.faq-icon { flex-shrink:0; color:var(--accent); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .38s ease, padding .38s ease; }
.faq-a p { padding-bottom:20px; color:var(--text-muted); font-size:.9rem; line-height:1.75; }
.faq-item.open .faq-a { max-height:420px; }
.faq-item.open .icon-plus  { display:none; }
.faq-item.open .icon-minus { display:block !important; }

/* ─── Page Hero (inner pages) ─────────────────────────────── */
.page-hero { padding-top:72px; padding-bottom:64px; text-align:center; }
.page-hero h1 { font-family:var(--font-heading); font-size:clamp(2rem,4vw,3.5rem); font-weight:300; margin-bottom:12px; }
.page-hero h1 em { font-style:italic; color:var(--accent); }
.page-hero p { color:var(--text-muted); font-size:1rem; max-width:480px; margin:0 auto; }

/* ─── Pricing tables ─────────────────────────────────────── */
.treatment-table { width:100%; border-collapse:collapse; }
.treatment-table th { text-align:left; padding:12px 20px; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); border-bottom:2px solid var(--border); font-weight:600; }
.treatment-table td { padding:14px 20px; border-bottom:1px solid var(--border); font-size:.9rem; }
.treatment-table tr { transition:background var(--transition); }
.treatment-table tr:hover td { background:rgba(184,151,74,.04); }
.treatment-table .price-col { color:var(--accent); font-family:var(--font-heading); font-size:1.05rem; font-weight:300; font-style:italic; }
.membership-card { background:var(--surface); border:2px solid var(--accent); border-radius:var(--radius-lg); padding:48px; text-align:center; }
.membership-price { font-family:var(--font-heading); font-size:4rem; font-weight:300; color:var(--accent); line-height:1; margin:16px 0 4px; }

/* ─── Results / B/A ─────────────────────────────────────── */
.results-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:28px; }
.result-card { background:var(--surface); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); transition:transform var(--ease-out),box-shadow var(--transition); }
.result-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-hover); }
.ba-slider { position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; cursor:col-resize; user-select:none; }
.ba-before,.ba-after { position:absolute; inset:0; }
.ba-before img,.ba-after img { width:100%; height:100%; object-fit:cover; }
.ba-before { clip-path:inset(0 50% 0 0); }
.ba-handle { position:absolute; top:0; bottom:0; left:50%; width:3px; background:#fff; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; }
.ba-handle-btn { width:36px; height:36px; background:var(--accent); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.result-info { padding:20px 24px; }
.result-info h3 { font-family:var(--font-heading); font-size:1.3rem; margin-bottom:6px; }
.result-info p  { font-size:.85rem; color:var(--text-muted); margin-bottom:16px; }

/* ─── Team ───────────────────────────────────────────────── */
.team-card { background:var(--surface); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); transition:transform var(--ease-out),box-shadow var(--transition),border-color var(--transition); }
.team-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-hover); border-color:rgba(184,151,74,.35); }
.team-card-img { width:100%; aspect-ratio:3/4; object-fit:cover; background:#f0ebe0; }
.team-card-body { padding:24px; }
.team-card-body h3 { font-family:var(--font-heading); font-size:1.4rem; margin-bottom:4px; }
.team-card-role { font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:12px; display:block; }
.team-card-body p { font-size:.86rem; color:var(--text-muted); line-height:1.7; }

/* ─── Timeline ───────────────────────────────────────────── */
.timeline { position:relative; padding-left:32px; }
.timeline::before { content:''; position:absolute; left:0; top:6px; bottom:0; width:1px; background:var(--border); }
.timeline-item { position:relative; margin-bottom:36px; }
.timeline-item::before { content:''; position:absolute; left:-36px; top:6px; width:10px; height:10px; border-radius:50%; background:var(--accent); }
.timeline-year { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:4px; }
.timeline-item h3 { font-family:var(--font-heading); font-size:1.2rem; margin-bottom:6px; }
.timeline-item p  { font-size:.88rem; color:var(--text-muted); line-height:1.7; }

/* ─── Quiz ───────────────────────────────────────────────── */
.quiz-section { background:var(--surface); border-radius:var(--radius-lg); padding:48px; border:1px solid var(--border); box-shadow:var(--shadow); }
@media(max-width:600px){ .quiz-section{padding:28px 20px;} }
.quiz-progress { height:3px; background:var(--border); border-radius:2px; margin-bottom:32px; overflow:hidden; }
.quiz-progress-fill { height:100%; background:var(--accent); transition:width .4s ease; }
.quiz-step { display:none; }
.quiz-step.active { display:block; }
.quiz-q { font-family:var(--font-heading); font-size:1.6rem; font-weight:300; margin-bottom:24px; }
.quiz-options { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:28px; }
@media(max-width:500px){ .quiz-options{grid-template-columns:1fr;} }
.quiz-opt { padding:14px 18px; border:1.5px solid var(--border); border-radius:var(--radius); background:var(--bg); font-family:var(--font-body); font-size:.9rem; color:var(--text); cursor:pointer; transition:all var(--transition); text-align:left; }
.quiz-opt:hover,.quiz-opt.selected { border-color:var(--accent); background:rgba(184,151,74,.08); color:var(--accent); }
.quiz-nav { display:flex; gap:12px; align-items:center; }
.quiz-back { background:none; border:1.5px solid var(--border); border-radius:100px; padding:10px 24px; font-family:var(--font-body); font-size:.85rem; cursor:pointer; color:var(--text-muted); transition:all var(--transition); }
.quiz-back:hover { border-color:var(--accent); color:var(--accent); }
.quiz-result { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-bottom:12px; }
.quiz-result h4 { font-family:var(--font-heading); font-size:1.3rem; margin-bottom:4px; }
.quiz-result p  { font-size:.88rem; color:var(--text-muted); margin-bottom:12px; }

/* ─── Contact ────────────────────────────────────────────── */
.contact-input,.contact-textarea,.contact-select {
  width:100%; padding:12px 16px; border:1.5px solid var(--border); border-radius:var(--radius);
  font-family:var(--font-body); font-size:.9rem; background:var(--bg); color:var(--text);
  transition:border-color var(--transition);
}
.contact-input:focus,.contact-textarea:focus,.contact-select:focus { outline:none; border-color:var(--accent); }
.contact-textarea { resize:vertical; min-height:120px; }
.contact-form-group { margin-bottom:16px; }
.contact-form-group label { display:block; font-size:.82rem; font-weight:600; margin-bottom:6px; letter-spacing:.03em; }
.info-card { background:var(--surface); border-radius:var(--radius-lg); padding:32px; border:1px solid var(--border); box-shadow:var(--shadow); }
.info-card-icon { width:48px; height:48px; background:rgba(184,151,74,.1); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:var(--accent); margin-bottom:16px; }
.info-card h3 { font-family:var(--font-heading); font-size:1.3rem; margin-bottom:8px; }
.info-card a { color:var(--accent); display:block; font-size:.9rem; margin-bottom:4px; }
.info-card p  { color:var(--text-muted); font-size:.88rem; line-height:1.6; }

/* ─── Tab bar ─────────────────────────────────────────────── */
.tab-bar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:40px; }
.tab-btn { padding:8px 20px; background:transparent; border:1.5px solid var(--border); border-radius:100px; font-family:var(--font-body); font-size:.82rem; font-weight:500; color:var(--text-muted); cursor:pointer; transition:all var(--transition); }
.tab-btn:hover,.tab-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }

/* ─── Popup ───────────────────────────────────────────────── */
.popup-overlay { position:fixed; inset:0; background:rgba(30,28,24,.65); z-index:2000; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity var(--transition); }
.popup-overlay.open { opacity:1; pointer-events:all; }
.popup-box { background:var(--surface); border-radius:var(--radius-lg); padding:48px 40px; max-width:480px; width:90%; position:relative; transform:translateY(24px); transition:transform var(--transition); }
.popup-overlay.open .popup-box { transform:translateY(0); }
.popup-close { position:absolute; top:16px; right:16px; background:none; border:none; cursor:pointer; color:var(--text-muted); width:32px; height:32px; display:flex; align-items:center; justify-content:center; }
.popup-input { width:100%; padding:12px 16px; border:1.5px solid var(--border); border-radius:var(--radius); font-family:var(--font-body); background:var(--bg); color:var(--text); margin-bottom:12px; font-size:.9rem; }
.popup-input:focus { outline:none; border-color:var(--accent); }

/* ─── CTA section ─────────────────────────────────────────── */
.cta-section { background:var(--text); color:#fff; padding:96px 0; text-align:center; }
.cta-section .section-heading { color:#fff; }
.cta-section .section-heading em { color:var(--accent); }
.cta-section .section-sub { color:rgba(255,255,255,.6); margin:0 auto 36px; }
.cta-btns { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }

/* ─── Mobile sticky ───────────────────────────────────────── */
.sticky-mobile { position:fixed; bottom:0; left:0; right:0; display:none; grid-template-columns:1fr 1fr; height:56px; z-index:997; }
.sticky-mobile a { display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-body); font-weight:600; font-size:.875rem; text-decoration:none; color:#fff; }
.sticky-call { background:var(--text); }
.sticky-book { background:var(--accent); }
@media(max-width:768px){ .sticky-mobile{display:grid!important;} }
@media(min-width:769px){ .sticky-mobile{display:none!important;} }

/* ─── Footer ─────────────────────────────────────────────── */
.footer { background:var(--text); color:rgba(255,255,255,.55); padding:72px 0 0; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:48px; margin-bottom:48px; }
@media(max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:600px){ .footer-grid{grid-template-columns:1fr;} }
.footer-name { font-family:var(--font-heading); font-size:1.6rem; color:#fff; margin-bottom:8px; }
.footer-name span { color:var(--accent); }
.footer-tagline { font-size:.85rem; line-height:1.7; margin-bottom:20px; max-width:280px; }
.footer-socials { display:flex; gap:16px; }
.footer-socials a { width:36px; height:36px; border:1px solid rgba(255,255,255,.15); border-radius:50%; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.55); transition:all var(--transition); }
.footer-socials a:hover { border-color:var(--accent); color:var(--accent); }
.footer-col h4 { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:16px; font-weight:600; }
.footer-col a  { display:block; color:rgba(255,255,255,.55); font-size:.86rem; margin-bottom:10px; transition:color var(--transition); }
.footer-col a:hover { color:var(--accent); }
.footer-col p  { font-size:.86rem; margin-bottom:6px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding:20px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-bottom p { font-size:.78rem; color:rgba(255,255,255,.3); }
.footer-bottom a { color:rgba(255,255,255,.3); transition:color var(--transition); }
.footer-bottom a:hover { color:var(--accent); }

/* ─── Particles canvas ───────────────────────────────────── */
.particles-canvas { position:absolute; inset:0; pointer-events:none; z-index:0; }
.hero .container { position:relative; z-index:1; }