/* =====================================================================
   home.css  —  Home page layout. Colours come from theme.css tokens.
   ===================================================================== */

/* ---------- Hero ---------- */
.hero{ background:var(--surface-alt); border-bottom:1px solid var(--border); overflow:hidden; }
.hero__in{ max-width:var(--container); margin-inline:auto; padding:clamp(2.5rem,6vw,4.5rem) 18px; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.hero__txt h1{ font-size:var(--fs-hero); margin:.2em 0 .3em; }
.hero__txt h1 .em{ color:var(--accent); }
.hero__lead{ font-size:var(--fs-lead); color:var(--text-dim); max-width:32em; margin:0 0 1.4rem; }
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; }
.hero__trust{ display:flex; gap:22px; flex-wrap:wrap; margin-top:1.6rem; }
.hero__trust .n{ font-family:var(--font-head); font-weight:700; font-size:1.5rem; color:var(--accent); line-height:1; }
.hero__trust .l{ font-size:var(--fs-xs); color:var(--text-dim); }

.hero__art{ justify-self:center; width:min(340px,80vw); }
.kundli{ width:100%; height:auto; }
.kundli .frame{ fill:var(--surface); stroke:var(--accent); stroke-width:2; }
.kundli .lines{ fill:none; stroke:var(--accent); stroke-width:1.4; opacity:.85; }
.kundli .num{ fill:var(--text-dim); font:600 12px var(--font-body); }
.kundli .planet{ fill:var(--action); font:700 13px var(--font-head); }
@media (prefers-reduced-motion:no-preference){
  .kundli .lines path,.kundli .frame{ stroke-dasharray:1400; stroke-dashoffset:1400; animation:kdraw 2.2s ease forwards; }
  @keyframes kdraw{ to{ stroke-dashoffset:0; } }
}
@media (max-width:820px){
  .hero__in{ grid-template-columns:1fr; text-align:center; }
  .hero__lead{ margin-inline:auto; }
  .hero__cta,.hero__trust{ justify-content:center; }
  .hero__art{ order:-1; width:min(260px,66vw); }
}

/* ---------- Tool cards ---------- */
.tool-card{ display:flex; gap:14px; align-items:flex-start; text-decoration:none; }
.tool-card .card__title{ font-size:1.15rem; }
.tool-card .go{ color:var(--accent); font-weight:700; font-size:var(--fs-sm); margin-top:6px; display:inline-block; }

/* ---------- Pillar cards ---------- */
.pillar{ display:flex; flex-direction:column; }
.pillar .card__title{ font-size:1.25rem; }
.pillar p{ color:var(--text-dim); font-size:var(--fs-sm); flex:1; margin:.4rem 0 1rem; }

/* ---------- Mentor strip ---------- */
.mentor{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.2rem,4vw,2.5rem); align-items:center; }
.mentor__photo{ width:150px; height:150px; border-radius:20px; object-fit:cover; border:1px solid var(--border); }
.mentor__ph{ width:150px; height:150px; border-radius:20px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:3.4rem; }
.mentor h2{ margin-bottom:.2em; }
.mentor .role{ color:var(--accent); font-weight:700; font-size:var(--fs-sm); margin-bottom:.6rem; }
@media (max-width:640px){ .mentor{ grid-template-columns:1fr; text-align:center; justify-items:center; } }

/* ---------- Why choose ---------- */
.why-card{ text-align:left; }
.why-card .ico{ width:46px; height:46px; border-radius:12px; background:var(--surface-alt); color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.why-card .ico svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; }
.why-card h3{ font-size:1.1rem; margin-bottom:.3rem; }
.why-card p{ color:var(--text-dim); font-size:var(--fs-sm); margin:0; }