/* ===========================================================
   SHRAVANI PMP PODCAST — design system
   "Community graph" theme: deep space navy + violet + coral,
   nodes & connecting lines as the structural motif.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap');

:root{
  --void:       #0B0E16;
  --void-soft:  #12151F;
  --panel:      #EDEFEA;
  --panel-dim:  #DCDFD4;
  --violet:     #7C5CFF;
  --violet-dim: #5E3FE0;
  --coral:      #FF6B4A;
  --line-dark:  #232838;
  --line-light: #D3D6C9;
  --text-hi:    #F2F3EE;
  --text-mid:   #9BA0B4;
  --text-low:   #5C6178;

  --display: 'Sora', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --body: 'Inter', sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--void);
  color:var(--text-hi);
  font-family:var(--body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(circle at 15% 8%, rgba(124,92,255,.10), transparent 40%),
    radial-gradient(circle at 85% 30%, rgba(255,107,74,.07), transparent 40%);
  background-attachment:fixed;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{ max-width:1120px; margin:0 auto; padding:0 28px; }

/* ---------- nav ---------- */
header.site{
  border-bottom:1px solid var(--line-dark);
  position:sticky; top:0; z-index:50;
  background:rgba(11,14,22,.9);
  backdrop-filter:blur(8px);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 28px;
  max-width:1120px; margin:0 auto;
}
.brand{
  font-family:var(--display);
  font-weight:700;
  font-size:15px;
  letter-spacing:.01em;
  display:flex; align-items:center; gap:10px;
}
.brand .node{ width:8px; height:8px; background:var(--violet); border-radius:50%; box-shadow:0 0 0 4px rgba(124,92,255,.18); display:inline-block; }
nav.links{ display:flex; gap:30px; font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; }
nav.links a{ color:var(--text-mid); transition:color .15s ease; padding-bottom:4px; border-bottom:1px solid transparent; }
nav.links a:hover, nav.links a.active{ color:var(--text-hi); border-bottom-color:var(--coral); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--violet); outline-offset:3px;
}

@media (max-width:640px){
  nav.links{ gap:16px; font-size:10.5px; }
  .nav-row{ flex-direction:column; gap:14px; align-items:flex-start; }
}

/* ---------- eyebrow ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--coral);
  display:flex; align-items:center; gap:10px;
  margin-bottom:18px;
}
.eyebrow::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--violet); box-shadow:0 0 0 3px rgba(124,92,255,.2); display:inline-block; }

/* ---------- hero ---------- */
.hero{ padding:88px 0 56px; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; }
.hero h1{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(36px,5.4vw,62px);
  line-height:1.06;
  letter-spacing:-.01em;
}
.hero h1 em{ color:var(--violet); font-style:normal; }
.hero p.lede{ font-size:18px; color:var(--text-mid); max-width:520px; margin-top:22px; }
@media (max-width:800px){ .hero{ grid-template-columns:1fr; } }

/* ---------- constellation graphic (signature element) ---------- */
.constellation{ width:100%; height:auto; }
.constellation circle.node{ fill:var(--violet); }
.constellation circle.node.coral{ fill:var(--coral); }
.constellation line{ stroke:var(--line-dark); stroke-width:1; }
.constellation circle.pulse{
  fill:none; stroke:var(--violet); stroke-width:1;
  animation:pulseRing 3s ease-out infinite;
  transform-origin:center;
}
@keyframes pulseRing{
  0%{ opacity:.7; transform:scale(.4); }
  100%{ opacity:0; transform:scale(2.6); }
}
@media (prefers-reduced-motion: reduce){ .constellation circle.pulse{ animation:none; opacity:0; } }

/* ---------- section ---------- */
section{ padding:68px 0; border-top:1px solid var(--line-dark); }
h2.section-title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(25px,3.2vw,36px);
  letter-spacing:-.01em;
  margin-bottom:34px;
}

/* ---------- host card ---------- */
.host-card{ display:grid; grid-template-columns:210px 1fr; gap:40px; align-items:start; }
.host-photo{
  aspect-ratio:1;
  background:linear-gradient(155deg,var(--panel-dim),var(--panel));
  border:1px solid var(--line-dark);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); color:var(--void); font-size:12px; text-align:center; padding:16px;
  position:relative; overflow:hidden;
}
.host-name{ font-family:var(--display); font-weight:700; font-size:26px; margin-bottom:6px; }
.host-role{ font-family:var(--mono); font-size:12.5px; color:var(--coral); letter-spacing:.03em; margin-bottom:20px; line-height:1.6; }
.host-bio p{ color:var(--text-mid); margin-bottom:14px; max-width:660px; }
.host-bio p:last-child{ margin-bottom:0; }
.credentials{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.credentials span{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  border:1px solid var(--line-dark); color:var(--text-mid);
  padding:6px 10px; border-radius:20px; text-transform:uppercase;
}
@media (max-width:640px){ .host-card{ grid-template-columns:1fr; } .host-photo{ width:140px; } }

/* ---------- premise grid ---------- */
.premise-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); }
.premise-grid .cell{ background:var(--void); padding:32px 28px; position:relative; }
.premise-grid .mark{ width:10px; height:10px; border-radius:50%; background:var(--violet); margin-bottom:16px; }
.premise-grid h3{ font-family:var(--display); font-size:19px; font-weight:700; margin-bottom:10px; }
.premise-grid p{ color:var(--text-mid); font-size:14.5px; }
@media (max-width:800px){ .premise-grid{ grid-template-columns:1fr; } }

/* ---------- cta band ---------- */
.cta-band{ background:var(--panel); color:var(--void); border-top:1px solid var(--line-dark); padding:60px 0; }
.cta-band .wrap{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.cta-band h2{ font-family:var(--display); font-size:clamp(22px,2.8vw,30px); font-weight:700; max-width:520px; }
.cta-band p{ color:#5B5F52; margin-top:8px; }

/* ---------- buttons ---------- */
.btn{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; text-transform:uppercase;
  padding:14px 26px; border-radius:30px; display:inline-flex; align-items:center; gap:10px;
  transition:transform .15s ease, background .15s ease; white-space:nowrap;
}
.btn-primary{ background:var(--violet); color:#fff; }
.btn-primary:hover{ background:var(--violet-dim); transform:translateY(-1px); }
.btn-outline{ border:1px solid var(--void); color:var(--void); }
.btn-outline:hover{ background:var(--void); color:var(--panel); }

/* ---------- footer ---------- */
footer.site{ border-top:1px solid var(--line-dark); padding:34px 0; }
footer.site .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
footer.site .fine{ font-family:var(--mono); font-size:11px; color:var(--text-low); letter-spacing:.04em; }

/* ---------- GUEST WALL (template) ---------- */
.wall-hero{ padding:68px 0 36px; }
.empty-state{
  border:1px dashed var(--line-dark);
  padding:56px 32px; text-align:center; margin-top:8px;
}
.empty-state .eyebrow{ justify-content:center; }
.empty-state h3{ font-family:var(--display); font-size:23px; margin-bottom:12px; }
.empty-state p{ color:var(--text-mid); max-width:460px; margin:0 auto 26px; }

.guest-wall{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line-dark);
  border:1px solid var(--line-dark);
  margin-top:32px;
}
.guest-node{
  background:var(--void);
  padding:30px 26px;
  position:relative;
}
.guest-node .avatar{
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(145deg,var(--violet),var(--coral));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; font-size:17px; color:var(--void);
  margin-bottom:18px;
}
.guest-node .g-ep{ font-family:var(--mono); font-size:11px; color:var(--text-low); letter-spacing:.06em; margin-bottom:8px; text-transform:uppercase; }
.guest-node .g-name{ font-family:var(--display); font-weight:700; font-size:18px; margin-bottom:4px; }
.guest-node .g-role{ color:var(--text-mid); font-size:13.5px; margin-bottom:14px; }
.guest-node .g-story{ color:var(--text-mid); font-size:13.5px; margin-bottom:18px; }
.guest-node .listen{
  font-family:var(--mono); font-size:11px; color:var(--violet); letter-spacing:.05em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:6px;
}
.guest-node .listen:hover{ color:var(--coral); }
@media (max-width:860px){ .guest-wall{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .guest-wall{ grid-template-columns:1fr; } }

/* ---------- form page ---------- */
.form-shell{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; padding:60px 0 92px; }
.form-side h2{ font-family:var(--display); font-size:clamp(25px,3vw,32px); font-weight:700; margin-bottom:18px; }
.form-side p{ color:var(--text-mid); margin-bottom:16px; }
.form-side ul{ list-style:none; margin-top:24px; }
.form-side li{ font-family:var(--mono); font-size:12.5px; color:var(--text-mid); padding:10px 0; border-top:1px solid var(--line-dark); display:flex; gap:12px; }
.form-side li::before{ content:'—'; color:var(--violet); }

.field{ margin-bottom:22px; }
.field label{ display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-mid); margin-bottom:8px; }
.field input, .field textarea{
  width:100%; background:var(--void-soft); border:1px solid var(--line-dark); color:var(--text-hi);
  font-family:var(--body); font-size:15px; padding:13px 14px; border-radius:8px;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--text-low); }
.field textarea{ min-height:120px; resize:vertical; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:640px){ .form-shell{ grid-template-columns:1fr; } .field-row{ grid-template-columns:1fr; } }

.hp-field{ position:absolute; left:-9999px; }

.form-note{ font-family:var(--mono); font-size:12px; color:var(--text-low); margin-top:14px; }
.success-box{ border:1px solid var(--violet); background:rgba(124,92,255,.1); padding:24px; border-radius:8px; display:none; }
.success-box.show{ display:block; }
.success-box h3{ font-family:var(--display); color:var(--violet); margin-bottom:6px; }
.success-box p{ color:var(--text-mid); font-size:14px; }