
/* Vivid light theme for Pranaloji Akademi (ThetaHealing vibe)
   Palette: Violet (#6B5BFF), Lilac (#EAE4FF), Sky (#E7F0FF), Teal (#2BC0A2), Warm coral (#FF7A59)
*/
:root{
  --bg:#F7F8FC;
  --surface:#FFFFFF;
  --muted:#647087;
  --text:#1C2230;
  --heading:#111827;
  --line:#E7EAF3;
  --accent:#6B5BFF;   /* violet */
  --accent2:#2BC0A2;  /* teal   */
  --warm:#FF7A59;     /* coral  */
}
*{box-sizing:border-box}
body{background:var(--bg); color:var(--text); font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

.hero{
  position:relative; isolation:isolate;
  background:
    radial-gradient(800px 380px at 12% 0%, rgba(107,91,255,.20), transparent 60%),
    radial-gradient(700px 360px at 90% 20%, rgba(43,192,162,.18), transparent 60%),
    linear-gradient(180deg, #EEF0FF 0%, #F7F8FC 60%);
  color:var(--heading);
  overflow:hidden;
}
.hero .wrap{max-width:1120px;margin:0 auto;padding:72px 20px 56px; display:grid; grid-template-columns: 1.05fr .95fr; gap:36px; align-items:center}
.hero h1{font-size:clamp(32px,4.6vw,58px); line-height:1.05; margin:0 0 12px; letter-spacing:-.02em; color:var(--heading)}
.hero p.lead{font-size:clamp(16px,2.1vw,19px); color:#334155; margin:0 0 18px; max-width:56ch}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap}
.hero .cta a{display:inline-block; padding:12px 16px; border-radius:12px; font-weight:700; text-decoration:none}
.hero .cta .primary{background:var(--accent); color:#fff; box-shadow:0 8px 20px rgba(107,91,255,.25)}
.hero .cta .ghost{background:#fff; border:1px solid var(--line); color:var(--heading)}
.hero .art{
  position:relative; height:360px; border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.3));
  border:1px solid rgba(107,91,255,.24);
  box-shadow:0 12px 50px rgba(17,24,39,.12);
  overflow:hidden;
}
.hero .art::before{
  content:""; position:absolute; inset:-20% -10%;
  background:
    radial-gradient(520px 240px at 70% 20%, rgba(107,91,255,.22), transparent 72%),
    radial-gradient(460px 220px at 20% 60%, rgba(43,192,162,.20), transparent 70%);
}
.hero .art img{width:100%; height:100%; object-fit:cover; opacity:.9; mix-blend:multiply}

.section{padding:48px 20px}
.container{max-width:1120px; margin:0 auto}
.section h2{font-size:28px; margin:0 0 10px; color:var(--heading)}
.section p.sub{color:var(--muted); margin:0 0 24px}

.grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:18px}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px; padding:16px;
  box-shadow:0 6px 20px rgba(17,24,39,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(17,24,39,.08); border-color:#DBE0F0}

.badge{display:inline-block; padding:4px 8px; border-radius:999px;
  background:#EEF0FF; border:1px solid #DFE4FF; color:#424B6A; font-size:12px}
.item h3{margin:6px 0 10px; font-size:18px; color:#111827}
.item p{margin:0 0 10px}
.item .muted{color:var(--muted)}

.btn{display:inline-block; padding:9px 12px; border-radius:10px; border:1px solid var(--line);
  background:#fff; color:#111827; text-decoration:none; font-weight:700}
.btn:hover{border-color:#CBD5E1}
.btn.primary{background:var(--accent); border-color:transparent; color:#fff}
.btn.warm{background:var(--warm); border-color:transparent; color:#121212}

.blog .thumb{border-radius:12px; overflow:hidden; height:140px; background:#F4F6FF; border:1px solid var(--line)}
.blog img{width:100%; height:100%; object-fit:cover}

.kicker{display:inline-flex; align-items:center; gap:8px; font-weight:700; color:#344256; letter-spacing:.06em; text-transform:uppercase; font-size:12px}
.kicker::before{content:""; width:8px; height:8px; border-radius:99px; background:var(--accent2)}

@media (max-width: 900px){
  .hero .wrap{grid-template-columns:1fr}
  .hero .art{height:240px}
}
