/* ============================================================
   Home Page — Vibrant v2
   ============================================================ */

/* ── HERO ─────────────────────────────────────────────────── */
.hero {
  min-height: 100vh; padding: 8rem 2rem 5rem;
  position: relative; overflow: hidden; display: flex; align-items: center;
  background: linear-gradient(140deg, var(--deep) 0%, #0A3D3D 40%, #0F5050 70%, var(--teal-dark) 100%);
}
.hero-orb { position:absolute; border-radius:50%; pointer-events:none; }
.hero-orb-1 { width:700px; height:700px; background:radial-gradient(circle, rgba(20,168,174,0.18) 0%, transparent 70%); top:-250px; right:-150px; }
.hero-orb-2 { width:400px; height:400px; background:radial-gradient(circle, rgba(108,59,170,0.15) 0%, transparent 70%); bottom:-100px; left:-100px; }
.hero-orb-3 { width:250px; height:250px; background:radial-gradient(circle, rgba(224,123,42,0.12) 0%, transparent 70%); top:40%; left:38%; }

.hero-inner { max-width:1200px; margin:0 auto; width:100%; display:grid; grid-template-columns:1.05fr 0.95fr; gap:4rem; align-items:center; position:relative; z-index:2; }

.hero-tag { display:inline-flex; align-items:center; gap:0.5rem; background:rgba(20,168,174,0.18); color:var(--teal-light); border:1px solid rgba(20,168,174,0.3); padding:0.38rem 1rem; border-radius:2rem; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:600; margin-bottom:1.5rem; width:fit-content; }
.tag-dot { width:6px; height:6px; background:var(--teal-light); border-radius:50%; display:inline-block; animation:pulse-dot 2s ease-in-out infinite; }

.hero-content h1 { color:var(--white); margin-bottom:1.2rem; line-height:1.05; font-weight:700; }
.hero-content h1 em { color:var(--teal-light); font-style:italic; }
.hero-desc { font-size:0.97rem; color:rgba(255,255,255,0.7); line-height:1.8; max-width:480px; margin-bottom:2rem; }
.hero-btns { display:flex; gap:0.8rem; flex-wrap:wrap; margin-bottom:2.5rem; }

.hero-stats { display:flex; align-items:center; gap:1.5rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,0.12); flex-wrap:wrap; }
.stat-item  { display:flex; flex-direction:column; }
.stat-num   { font-family:var(--font-head); font-size:2rem; font-weight:700; color:var(--white); line-height:1; }
.stat-num span { font-size:1.3rem; color:var(--teal-light); }
.stat-label { font-size:0.63rem; color:rgba(255,255,255,0.45); letter-spacing:0.1em; text-transform:uppercase; margin-top:3px; }
.stat-divider { width:1px; height:36px; background:rgba(255,255,255,0.12); }

/* Profile card */
.hero-card-wrap { display:flex; flex-direction:column; gap:1rem; }
.hero-profile-card { background:var(--white); border-radius:var(--radius-xl); padding:2rem; box-shadow:0 20px 60px rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.15); }

.profile-photo-wrap { position:relative; margin-bottom:1.2rem; }
.profile-photo {
  width:90px; height:90px; border-radius:50%;
  object-fit:cover; object-position:center top;
  border:3px solid var(--teal-light);
  box-shadow: 0 4px 20px rgba(13,115,119,0.3);
}
.profile-online-dot {
  position:absolute; bottom:4px; right:4px;
  width:14px; height:14px; background:#22c55e;
  border-radius:50%; border:2px solid white;
}
.profile-name { font-family:var(--font-head); font-size:1.3rem; font-weight:700; color:var(--deep); }
.profile-role { font-size:0.72rem; color:var(--teal); font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin:3px 0 2px; }
.profile-affil { font-size:0.78rem; color:var(--muted); margin-bottom:1rem; }
.profile-badges { display:flex; gap:0.4rem; flex-wrap:wrap; margin-bottom:1rem; }

.profile-slot { display:flex; align-items:center; gap:0.8rem; background:var(--teal-bg); border-radius:var(--radius-md); padding:0.75rem 1rem; border:1px solid var(--border); }
.slot-dot { width:9px; height:9px; min-width:9px; background:#22c55e; border-radius:50%; }
@keyframes pulse-dot { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0.5);}50%{box-shadow:0 0 0 6px rgba(34,197,94,0);} }
.slot-label { font-size:0.79rem; font-weight:600; color:var(--teal-dark); }
.slot-modes { font-size:0.68rem; color:var(--muted); margin-top:1px; }

.hero-media-card { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:var(--radius-md); padding:1rem 1.4rem; }
.media-card-label { font-size:0.6rem; color:rgba(255,255,255,0.4); letter-spacing:0.15em; text-transform:uppercase; margin-bottom:0.6rem; }
.media-logos { display:flex; flex-wrap:wrap; gap:0.5rem; }
.media-logos span { background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); color:rgba(255,255,255,0.75); padding:0.25rem 0.7rem; border-radius:var(--radius-sm); font-size:0.7rem; font-weight:500; }

/* ── TRUST BAR ──────────────────────────────────────────────── */
.trust-bar { background:var(--white); padding:2.5rem 2rem; border-bottom:1px solid var(--border); }
.trust-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:2rem; flex-wrap:wrap; }
.trust-item { display:flex; align-items:center; gap:0.8rem; }
.trust-icon { font-size:1.7rem; }
.trust-item strong { display:block; font-size:0.85rem; font-weight:600; color:var(--deep); }
.trust-item span   { font-size:0.74rem; color:var(--muted); }
.trust-sep { width:1px; height:42px; background:var(--border); }

/* ── SERVICES ───────────────────────────────────────────────── */
.home-services { background:var(--cream); }
.section-head { margin-bottom:3rem; }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-bottom:2.5rem; }
.service-card { display:flex; flex-direction:column; gap:0.6rem; text-decoration:none; color:inherit; }
.service-icon { width:54px; height:54px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:0.4rem; }
.service-card h4 { font-size:1.05rem; font-weight:600; color:var(--deep); }
.service-card p  { font-size:0.8rem; color:var(--mid); line-height:1.65; flex:1; }
.service-arrow { font-size:1.1rem; color:var(--teal); opacity:0; transition:opacity var(--transition), transform var(--transition); margin-top:0.3rem; }
.service-card:hover .service-arrow { opacity:1; transform:translateX(4px); }
.section-cta { text-align:center; margin-top:1rem; }

/* ── ABOUT TEASER ───────────────────────────────────────────── */
.about-teaser { background:linear-gradient(135deg, var(--deep) 0%, #0A3D3D 100%); }
.about-teaser .section-label { color:var(--teal-light); }
.about-teaser .section-title { color:var(--white); }
.about-teaser .section-sub   { color:rgba(255,255,255,0.65); }
.about-teaser-inner { display:grid; grid-template-columns:1fr 1.3fr; gap:5rem; align-items:center; }

.about-image-block { display:flex; flex-direction:column; align-items:center; gap:1.5rem; }
.about-photo-large {
  width:220px; height:220px; border-radius:50%;
  object-fit:cover; object-position:center top;
  border:4px solid var(--teal-light);
  box-shadow:0 0 0 8px rgba(20,168,174,0.15), 0 20px 50px rgba(0,0,0,0.4);
}
.about-credential-cards { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; width:100%; }
.mini-cred-card { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12); border-radius:var(--radius-md); padding:0.8rem; display:flex; flex-direction:column; gap:2px; }
.mini-cred-card strong { font-size:0.9rem; color:var(--teal-light); font-family:var(--font-head); font-weight:700; }
.mini-cred-card span   { font-size:0.68rem; color:rgba(255,255,255,0.45); }
.expertise-grid { display:flex; flex-wrap:wrap; gap:0.4rem; }

/* ── FEES TEASER ────────────────────────────────────────────── */
.fees-teaser { background:var(--white); }
.fees-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:2.5rem 0 2rem; }
.fee-card { background:var(--cream); border:2px solid var(--border); border-radius:var(--radius-lg); padding:1.8rem 1.4rem; display:flex; flex-direction:column; gap:0.5rem; transition:all var(--transition); position:relative; }
.fee-card:hover { border-color:var(--teal); transform:translateY(-4px); box-shadow:var(--shadow-card); }
.fee-card.fee-featured { background:var(--deep); border-color:var(--teal-light); }
.fee-popular-badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:linear-gradient(90deg,var(--teal),var(--teal-light)); color:white; font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; padding:0.22rem 0.9rem; border-radius:2rem; white-space:nowrap; font-weight:600; }
.fee-icon   { font-size:2rem; margin-bottom:0.3rem; }
.fee-type   { font-size:0.68rem; color:var(--muted); letter-spacing:0.12em; text-transform:uppercase; font-weight:600; }
.fee-featured .fee-type { color:rgba(255,255,255,0.45); }
.fee-amount { font-family:var(--font-head); font-size:2.6rem; font-weight:700; color:var(--deep); line-height:1; }
.fee-featured .fee-amount { color:var(--white); }
.fee-desc   { font-size:0.78rem; color:var(--mid); line-height:1.6; flex:1; }
.fee-featured .fee-desc { color:rgba(255,255,255,0.6); }

/* ── TESTIMONIALS ───────────────────────────────────────────── */
.testimonials { background:var(--cream); }
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem; }
.testimonial-card { display:flex; flex-direction:column; gap:0.8rem; }
.stars { color:var(--amber); font-size:0.95rem; letter-spacing:2px; }
.testimonial-card p { font-size:0.85rem; color:var(--mid); line-height:1.75; font-style:italic; flex:1; }
.testimonial-author { display:flex; align-items:center; gap:0.8rem; padding-top:0.8rem; border-top:1px solid var(--border); }
.author-avatar { width:42px; height:42px; min-width:42px; border-radius:50%; background:var(--teal-bg); color:var(--teal-dark); display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:700; border:2px solid var(--teal); }
.testimonial-author strong { display:block; font-size:0.82rem; color:var(--deep); font-weight:600; }
.testimonial-author span  { font-size:0.72rem; color:var(--muted); }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width:1024px) { .fees-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px) {
  .hero-inner { grid-template-columns:1fr; }
  .hero-card-wrap { max-width:420px; }
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .about-teaser-inner { grid-template-columns:1fr; }
  .testimonials-grid { grid-template-columns:1fr; max-width:540px; margin-left:auto; margin-right:auto; }
}
@media (max-width:600px) {
  .hero { padding:7rem 1.5rem 4rem; }
  .services-grid { grid-template-columns:1fr; }
  .fees-grid { grid-template-columns:1fr; }
  .hero-stats { gap:1rem; }
  .stat-divider { display:none; }
  .trust-inner { flex-direction:column; }
  .trust-sep { width:80px; height:1px; }
}