/* ==========================================================================
   MEHTA PROPERTIES — DIGITAL APPOINTMENT CARD
   Design language: deep navy + warm bronze/gold, on a warm stone-white base.
   Deliberately NOT reusing the pink/butterfly Tech Brains palette — this is
   built for trust and authority (real estate, high-value transactions),
   not a beauty/coaching persona. Signature element: a rotating "property
   seal" ring in the hero, evoking an architect's compass / wax seal rather
   than a generic gradient blob.
   ========================================================================== */

:root{
  --navy:        #0F1B3D;
  --navy-deep:   #08112A;
  --navy-mid:    #1B2A55;
  --gold:        #C9A24B;
  --gold-soft:   rgba(201,162,75,0.16);
  --gold-dk:     #A8853A;
  --stone:       #F7F5F1;
  --stone-dk:    #EDE9E1;
  --white:       #FFFFFF;
  --ink:         #1B2030;
  --slate:       #5A6373;
  --slate-soft:  rgba(90,99,115,0.10);
  --emerald:     #1F7A5C;
  --emerald-soft:rgba(31,122,92,0.12);
  --shadow-card: 0 14px 40px rgba(15,27,61,0.10);
  --shadow-sm:   0 6px 18px rgba(15,27,61,0.08);
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 10px;
  --font-display: 'Playfair Display', serif;
  --font-body: 'Manrope', sans-serif;
  --bottomnav-h: 64px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--navy); }
body{
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family:inherit; }

/* ── App frame: locked to phone-card width on every screen size ── */
.app-frame{
  max-width: 440px;
  margin: 0 auto;
  background: var(--stone);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding-bottom: calc(var(--bottomnav-h) + 90px + env(safe-area-inset-bottom,0px));
}

/* ── Section rhythm ── */
.section{ padding: 26px 18px 0; position:relative; }
.section-eyebrow{
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold-dk); margin: 0 0 6px; display:flex; align-items:center; gap:8px;
}
.section-eyebrow::after{ content:''; flex:1; height:1px; background: linear-gradient(to right, rgba(201,162,75,0.4), transparent); }
.section-title{
  font-family: var(--font-display); font-weight:600; font-size: 1.3rem;
  color: var(--navy); margin: 0 0 14px; line-height:1.25;
}

/* ── Card ── */
.card{
  background: var(--white);
  border: 1px solid rgba(15,27,61,0.06);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 18px;
}

/* ── Reveal-on-scroll ── */
[data-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  background: radial-gradient(ellipse 120% 80% at 50% -10%, var(--navy-mid) 0%, var(--navy) 55%, var(--navy-deep) 100%);
  padding: 26px 18px 34px;
  position: relative;
  overflow: hidden;
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(201,162,75,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,162,75,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 0%, transparent 75%);
  pointer-events:none;
}
.hero-top-row{
  display:flex; align-items:center; justify-content:space-between;
  position:relative; z-index:2; margin-bottom: 18px;
}
.hero-brand{ display:flex; align-items:center; gap:9px; }
.hero-brand-mark{
  width:34px; height:34px; border-radius:50%;
  border:1.5px solid var(--gold); display:flex; align-items:center; justify-content:center;
  color: var(--gold); font-family: var(--font-display); font-weight:700; font-size:1rem;
}
.hero-brand-name{ color: var(--white); font-weight:700; font-size:.86rem; letter-spacing:.3px; }
.hero-status-pill{
  display:inline-flex; align-items:center; gap:6px;
  background: rgba(31,122,92,0.18); border:1px solid rgba(31,122,92,0.45);
  color:#7CDDB8; font-size:.7rem; font-weight:700; letter-spacing:.3px;
  padding:5px 11px; border-radius:30px;
}
.hero-status-pill .dot{ width:6px; height:6px; border-radius:50%; background:#3FE39B; box-shadow:0 0 6px #3FE39B; }

/* -- property seal orbit (signature element) -- */
.seal-stage{
  position:relative; width:240px; height:240px; margin:6px auto 0;
  z-index:2;
}
.seal-ring{
  position:absolute; inset:0; border-radius:50%;
  border: 1px dashed rgba(201,162,75,0.35);
}
.seal-ring.inner{ inset:26px; border-style:solid; border-color:rgba(201,162,75,0.18); }
.seal-track{ position:absolute; inset:0; animation: sealSpin 26s linear infinite; }
.seal-stage.is-paused .seal-track{ animation-play-state:paused; }
.seal-slot{ position:absolute; top:50%; left:50%; width:0; height:0; transform: rotate(var(--angle)); }
.seal-badge{
  position:absolute; top:0; left:108px; transform:translate(-50%,-50%) rotate(calc(var(--angle) * -1));
  width:46px; height:46px; border-radius:50%;
  background: linear-gradient(150deg, var(--gold) 0%, var(--gold-dk) 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
  color: var(--navy-deep); font-size:1.05rem;
  animation: sealCounterSpin 26s linear infinite;
}
.seal-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:128px; height:128px; border-radius:50%;
  background: var(--white);
  border: 4px solid var(--gold);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
  overflow:hidden; z-index:3;
  display:flex; align-items:center; justify-content:center;
}
.seal-center img{ width:100%; height:100%; object-fit:cover; }
.seal-center .ph-icon{ font-size:2.6rem; color: var(--navy-mid); }

.hero-name-block{ text-align:center; margin-top:16px; position:relative; z-index:2; }
.hero-name{
  font-family: var(--font-display); font-weight:700; font-size:1.5rem;
  color: var(--white); margin:0 0 3px;
}
.hero-role{ color: rgba(255,255,255,0.72); font-size:.86rem; margin:0 0 3px; }
.hero-agency{ color: var(--gold); font-size:.82rem; font-weight:700; letter-spacing:.4px; margin:0; }
.hero-credential-label{
  text-align:center; color: rgba(255,255,255,0.55); font-size:.72rem;
  margin-top:10px; min-height:1.4em; letter-spacing:.3px;
}

.hero-cta-row{ display:flex; flex-direction:column; gap:10px; margin-top:20px; position:relative; z-index:2; }
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:14px 20px; border-radius:30px; border:none;
  font-weight:700; font-size:.92rem; text-decoration:none; cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn:active{ transform: scale(0.98); }
.btn-gold{
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dk) 100%);
  color: var(--navy-deep);
  box-shadow: 0 12px 28px rgba(201,162,75,0.35);
}
.btn-outline-light{
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.35);
  color: var(--white);
}
.btn-whatsapp{
  background: #25D366; color:#fff;
  box-shadow: 0 12px 28px rgba(37,211,102,0.30);
}
.btn-navy{
  background: var(--navy); color:#fff;
  box-shadow: 0 12px 28px rgba(15,27,61,0.30);
}
.btn-ghost-navy{
  background: var(--white);
  border: 1.5px solid var(--navy);
  color: var(--navy);
}
.btn-sm{ padding:10px 16px; font-size:.8rem; width:auto; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about-bio{ font-size:.9rem; line-height:1.7; color: var(--slate); margin:0 0 14px; }
.about-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.about-tag{
  background: var(--gold-soft); color: var(--gold-dk);
  font-size:.74rem; font-weight:700; padding:6px 12px; border-radius:20px;
}
.about-rera{
  display:flex; align-items:center; gap:8px; margin-top:14px; padding-top:14px;
  border-top:1px solid rgba(15,27,61,0.08);
  font-size:.78rem; color: var(--slate);
}
.about-rera i{ color: var(--emerald); }

/* ==========================================================================
   LISTINGS
   ========================================================================== */
.listing-scroll{
  display:flex; gap:14px; overflow-x:auto; padding-bottom:6px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.listing-scroll::-webkit-scrollbar{ display:none; }
.listing-card{
  flex: 0 0 250px; scroll-snap-align:start;
  background: var(--white); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm); overflow:hidden; cursor:pointer;
  border: 1px solid rgba(15,27,61,0.06);
  transition: transform .25s ease;
}
.listing-card:active{ transform: scale(0.98); }
.listing-photo{
  height:150px; background: linear-gradient(135deg, var(--navy-mid), var(--navy));
  display:flex; align-items:center; justify-content:center; position:relative;
}
.listing-photo img{ width:100%; height:100%; object-fit:cover; }
.listing-photo .ph-icon{ color: rgba(255,255,255,0.35); font-size:2.2rem; }
.listing-badge{
  position:absolute; top:10px; left:10px;
  font-size:.66rem; font-weight:800; letter-spacing:.3px;
  padding:4px 10px; border-radius:20px; text-transform:uppercase;
}
.badge-emerald{ background: var(--emerald); color:#fff; }
.badge-gold{ background: var(--gold); color: var(--navy-deep); }
.badge-slate{ background: var(--slate); color:#fff; }
.listing-body{ padding:13px; }
.listing-price{ font-family: var(--font-display); font-weight:700; color: var(--navy); font-size:1.05rem; margin:0 0 2px; }
.listing-title{ font-size:.82rem; font-weight:700; color: var(--ink); margin:0 0 3px; line-height:1.35; }
.listing-area{ font-size:.74rem; color: var(--slate); margin:0 0 8px; }
.listing-specs{ display:flex; gap:10px; font-size:.72rem; color: var(--slate); }
.listing-specs span{ display:flex; align-items:center; gap:4px; }

/* ==========================================================================
   BOOKING (the core conversion engine)
   ========================================================================== */
.booking-card{
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-mid) 100%);
  border-radius: var(--r-lg); padding:22px 18px; color:#fff;
  box-shadow: 0 18px 44px rgba(15,27,61,0.28);
  position:relative; overflow:hidden;
}
.booking-card::before{
  content:''; position:absolute; top:-40px; right:-40px; width:160px; height:160px;
  border-radius:50%; border:1px solid rgba(201,162,75,0.25);
}
.booking-card .section-eyebrow{ color: var(--gold); }
.booking-card .section-eyebrow::after{ background: linear-gradient(to right, rgba(201,162,75,0.5), transparent); }
.booking-title{ font-family: var(--font-display); font-size:1.2rem; font-weight:700; margin:0 0 6px; }
.booking-sub{ font-size:.82rem; color: rgba(255,255,255,0.65); margin:0 0 18px; line-height:1.5; }

.field-label{ font-size:.7rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color: rgba(255,255,255,0.55); margin-bottom:6px; display:block; }
.field-group{ margin-bottom:14px; }
.field-input, .field-select, .field-textarea{
  width:100%; padding:12px 14px; border-radius:10px;
  border:1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06);
  color:#fff; font-family:inherit; font-size:.85rem;
}
.field-input::placeholder, .field-textarea::placeholder{ color: rgba(255,255,255,0.4); }
.field-select option{ color: var(--ink); }
.field-row{ display:flex; gap:10px; }
.field-row .field-group{ flex:1; }

/* ==========================================================================
   PAST SALES
   ========================================================================== */
.sale-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; border-bottom:1px solid rgba(15,27,61,0.07);
}
.sale-row:last-child{ border-bottom:none; }
.sale-area{ font-weight:700; font-size:.84rem; color: var(--ink); margin:0 0 2px; }
.sale-label{ font-size:.72rem; color: var(--slate); }
.sale-meta{ text-align:right; }
.sale-price{ font-weight:700; color: var(--navy); font-size:.82rem; }
.sale-days{ font-size:.68rem; color: var(--emerald); font-weight:700; }

/* ==========================================================================
   EXPERTISE
   ========================================================================== */
.skill-row{ margin-bottom:14px; }
.skill-row:last-child{ margin-bottom:0; }
.skill-top{ display:flex; justify-content:space-between; font-size:.8rem; margin-bottom:6px; }
.skill-name{ font-weight:700; color: var(--ink); }
.skill-pct{ font-weight:700; color: var(--gold-dk); }
.skill-bar{ height:6px; background: var(--stone-dk); border-radius:6px; overflow:hidden; }
.skill-fill{ height:100%; background: linear-gradient(90deg, var(--gold), var(--gold-dk)); border-radius:6px; width:0; transition: width 1.2s ease; }

/* ==========================================================================
   GALLERY / VIDEOS
   ========================================================================== */
.media-scroll{ display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; }
.media-scroll::-webkit-scrollbar{ display:none; }
.media-item{
  flex:0 0 160px; height:120px; border-radius: var(--r-sm); overflow:hidden;
  background: linear-gradient(135deg, var(--navy-mid), var(--navy));
  position:relative; display:flex; align-items:center; justify-content:center;
}
.media-item img{ width:100%; height:100%; object-fit:cover; }
.media-item .ph-icon{ color: rgba(255,255,255,0.4); font-size:1.8rem; }
.media-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.media-play i{
  width:36px; height:36px; border-radius:50%; background: rgba(255,255,255,0.92);
  color: var(--navy); display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.media-caption{
  position:absolute; bottom:0; left:0; right:0; padding:8px;
  background: linear-gradient(0deg, rgba(0,0,0,0.65), transparent);
  color:#fff; font-size:.68rem; font-weight:600;
}

/* ==========================================================================
   MORTGAGE CALCULATOR
   ========================================================================== */
.calc-row{ margin-bottom:14px; }
.calc-row label{ display:flex; justify-content:space-between; font-size:.8rem; font-weight:700; color: var(--ink); margin-bottom:6px; }
.calc-row label .val{ color: var(--gold-dk); }
.calc-row input[type=range]{
  width:100%; accent-color: var(--gold-dk);
}
.calc-result{
  background: var(--navy); color:#fff; border-radius: var(--r-md);
  padding:16px; text-align:center; margin-top:6px;
}
.calc-result .emi-label{ font-size:.7rem; color: rgba(255,255,255,0.6); letter-spacing:.4px; text-transform:uppercase; }
.calc-result .emi-amount{ font-family: var(--font-display); font-size:1.6rem; font-weight:700; color: var(--gold); margin:4px 0 0; }

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.review-card{ padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid rgba(15,27,61,0.07); }
.review-card:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.review-stars{ color: var(--gold); font-size:.78rem; margin-bottom:6px; }
.review-text{ font-size:.84rem; color: var(--ink); line-height:1.6; margin:0 0 6px; font-style:italic; }
.review-name{ font-size:.74rem; color: var(--slate); font-weight:700; }

/* ==========================================================================
   LEAD FORM / GET IN TOUCH
   ========================================================================== */
.lead-form .field-input, .lead-form .field-select, .lead-form .field-textarea{
  border-color: rgba(15,27,61,0.14); background: var(--stone);
  color: var(--ink);
}
.lead-form .field-input::placeholder, .lead-form .field-textarea::placeholder{ color: var(--slate); }
.lead-form .field-select option{ color: var(--ink); }
.lead-form .field-label{ color: var(--slate); }

/* ==========================================================================
   VISITOR COUNTER / FOOTER
   ========================================================================== */
.counter-card{
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
  border-radius: var(--r-lg); padding:18px; color:#fff;
  display:flex; align-items:center; gap:14px;
}
.counter-icon{ width:46px; height:46px; border-radius:50%; background: rgba(201,162,75,0.18); display:flex; align-items:center; justify-content:center; color: var(--gold); font-size:1.2rem; flex-shrink:0; }
.counter-num{ font-family: var(--font-display); font-size:1.5rem; font-weight:700; margin:0; }
.counter-label{ font-size:.7rem; color: rgba(255,255,255,0.6); margin:0; }

.app-footer{ text-align:center; padding:22px 18px 8px; font-size:.72rem; color: var(--slate); }
.app-footer a{ color: var(--navy); font-weight:700; text-decoration:none; }

/* ==========================================================================
   BOTTOM NAV
   ========================================================================== */
.bottom-nav{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom: 12px; z-index:50;
  width: calc(100% - 28px); max-width: 412px;
  background: rgba(15,27,61,0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 26px;
  box-shadow: 0 16px 40px rgba(15,27,61,0.35);
  display:flex; align-items:center; justify-content:space-around;
  padding: 8px 4px;
  border: 1px solid rgba(255,255,255,0.08);
}
.nav-tab{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:none; border:none; color: rgba(255,255,255,0.5);
  font-size:.62rem; font-weight:700; padding:6px 8px; border-radius:16px;
  cursor:pointer; text-decoration:none; transition: color .2s ease;
}
.nav-tab i{ font-size:1.05rem; }
.nav-tab.active{ color: var(--gold); background: rgba(201,162,75,0.12); }
.nav-tab:active{ transform: scale(0.92); }

/* ==========================================================================
   FLOATING QUICK-ACTION CLUSTER
   ========================================================================== */
.fab-cluster{
  position:fixed; right: max(14px, calc(50% - 220px + 14px));
  bottom: 92px; z-index:49;
  display:flex; flex-direction:column; gap:10px;
}
.fab{
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 22px rgba(15,27,61,0.28);
  text-decoration:none; font-size:1.05rem; color:#fff;
  border: none; cursor:pointer;
}
.fab:active{ transform: scale(0.9); }
.fab-call{ background: var(--navy); }
.fab-whatsapp{ background: #25D366; }
.fab-location{ background: var(--gold-dk); color: var(--navy-deep); }
.fab-share{ background: var(--slate); }
.fab-save{ background: var(--emerald); }

/* ==========================================================================
   AI CHAT WIDGET
   ========================================================================== */
.chat-fab{
  position:fixed; left: max(14px, calc(50% - 220px + 14px));
  bottom: 92px; z-index:49;
  width:50px; height:50px; border-radius:50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-dk));
  color: var(--navy-deep); display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; border:none; box-shadow: 0 10px 26px rgba(201,162,75,0.4);
  cursor:pointer;
}
.chat-fab:active{ transform: scale(0.9); }
.chat-panel{
  position:fixed; inset:0; z-index:200;
  background: rgba(15,27,61,0.55);
  display:none; align-items:flex-end; justify-content:center;
}
.chat-panel.open{ display:flex; }
.chat-sheet{
  width:100%; max-width:440px; background: var(--stone);
  border-radius: 24px 24px 0 0; max-height:80vh; display:flex; flex-direction:column;
  animation: chatSlideUp .3s ease both;
}
.chat-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; background: var(--navy); color:#fff; border-radius:24px 24px 0 0;
}
.chat-head-title{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:.9rem; }
.chat-head-title i{ color: var(--gold); }
.chat-close{ background:none; border:none; color: rgba(255,255,255,0.7); font-size:1.2rem; cursor:pointer; }
.chat-messages{ flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:10px; }
.chat-bubble{ max-width:80%; padding:10px 14px; border-radius:16px; font-size:.82rem; line-height:1.5; }
.chat-bubble.bot{ background:#fff; color: var(--ink); align-self:flex-start; border:1px solid rgba(15,27,61,0.08); border-bottom-left-radius:4px; }
.chat-bubble.user{ background: var(--navy); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.chat-suggest{ display:flex; flex-wrap:wrap; gap:6px; padding:0 18px 10px; }
.chat-chip{
  background:#fff; border:1px solid rgba(15,27,61,0.12); color: var(--navy);
  font-size:.72rem; font-weight:600; padding:6px 12px; border-radius:20px; cursor:pointer;
}
.chat-input-row{ display:flex; gap:8px; padding:12px 18px; border-top:1px solid rgba(15,27,61,0.08); }
.chat-input-row input{
  flex:1; padding:10px 14px; border-radius:20px; border:1px solid rgba(15,27,61,0.14);
  font-family:inherit; font-size:.82rem;
}
.chat-send{
  width:38px; height:38px; border-radius:50%; background: var(--navy); color:#fff;
  border:none; display:flex; align-items:center; justify-content:center; cursor:pointer;
}

/* ==========================================================================
   LISTING DETAIL MODAL
   ========================================================================== */
.listing-modal{
  position:fixed; inset:0; z-index:210; background: rgba(15,27,61,0.6);
  display:none; align-items:flex-end; justify-content:center;
}
.listing-modal.open{ display:flex; }
.listing-modal-sheet{
  width:100%; max-width:440px; max-height:88vh; overflow-y:auto;
  background:#fff; border-radius:24px 24px 0 0; animation: chatSlideUp .3s ease both;
}
.lm-photo{ height:220px; background: linear-gradient(135deg, var(--navy-mid), var(--navy)); display:flex; align-items:center; justify-content:center; position:relative; }
.lm-photo .ph-icon{ color: rgba(255,255,255,0.35); font-size:3rem; }
.lm-close{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%;
  background: rgba(0,0,0,0.4); color:#fff; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.lm-body{ padding:20px; }
.lm-price{ font-family: var(--font-display); font-size:1.5rem; font-weight:700; color: var(--navy); margin:0 0 4px; }
.lm-title{ font-weight:700; font-size:.95rem; margin:0 0 2px; }
.lm-area{ font-size:.8rem; color: var(--slate); margin:0 0 12px; }
.lm-specs{ display:flex; gap:16px; margin-bottom:14px; padding:12px 0; border-top:1px solid rgba(15,27,61,0.08); border-bottom:1px solid rgba(15,27,61,0.08); }
.lm-spec{ text-align:center; flex:1; }
.lm-spec .n{ font-weight:700; color: var(--navy); display:block; font-size:1rem; }
.lm-spec .l{ font-size:.66rem; color: var(--slate); text-transform:uppercase; letter-spacing:.3px; }
.lm-desc{ font-size:.84rem; color: var(--slate); line-height:1.65; margin-bottom:16px; }

/* ==========================================================================
   LEAD-GATE OVERLAY
   ========================================================================== */
.gate-overlay{
  position:absolute; inset:0; background: rgba(247,245,241,0.92);
  backdrop-filter: blur(3px); display:flex; align-items:center; justify-content:center;
  border-radius: var(--r-lg); z-index:5; padding:20px; text-align:center;
}
.gate-overlay.hidden{ display:none; }
.gate-icon{ width:44px; height:44px; border-radius:50%; background: var(--gold-soft); color: var(--gold-dk); display:flex; align-items:center; justify-content:center; margin:0 auto 10px; font-size:1.2rem; }
.gate-text{ font-size:.82rem; color: var(--slate); margin:0 0 14px; max-width:240px; }

/* ==========================================================================
   TOAST
   ========================================================================== */
.toast{
  position:fixed; left:50%; bottom: 170px; transform:translateX(-50%) translateY(20px);
  background: var(--navy); color:#fff; padding:11px 20px; border-radius:30px;
  font-size:.8rem; font-weight:600; z-index:300; opacity:0; pointer-events:none;
  transition: opacity .3s ease, transform .3s ease;
  box-shadow: 0 12px 28px rgba(0,0,0,0.3);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */
@keyframes sealSpin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
@keyframes sealCounterSpin{ from{ transform:translate(-50%,-50%) rotate(calc(var(--angle) * -1));} to{ transform:translate(-50%,-50%) rotate(calc(var(--angle) * -1 - 360deg));} }
@keyframes chatSlideUp{ from{ transform:translateY(40px); opacity:0; } to{ transform:translateY(0); opacity:1; } }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}

@media (max-width: 360px){
  .seal-stage{ width:210px; height:210px; }
  .seal-badge{ left:96px; }
  .seal-center{ width:112px; height:112px; }
}