/* ============================================================
   Anjali Devi — v8 "Growth Console"  (marketing dashboard)
   ============================================================ */
:root{
  --bg:#0a0e16; --panel:#10151f; --panel-2:#141b27; --line:rgba(255,255,255,.08);
  --ink:#eef2f9; --muted:rgba(238,242,249,.55); --dim:rgba(238,242,249,.38);
  --go:#34d399; --go-2:#a3e635; --warn:#fbbf24;
  --sans:"Space Grotesk",system-ui,sans-serif; --mono:"IBM Plex Mono",monospace;
  --ease:cubic-bezier(.22,1,.36,1); --side:236px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:26px 26px;
}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono)}
.dim{color:var(--dim)}
em{font-style:normal;color:var(--go)}
::selection{background:var(--go);color:#06281c}

/* ---------- sidebar ---------- */
.side{
  position:fixed; top:0; left:0; bottom:0; width:var(--side); z-index:40;
  border-right:1px solid var(--line); background:rgba(10,14,22,.7); backdrop-filter:blur(10px);
  display:flex; flex-direction:column; padding:1.4rem 1.1rem;
}
.side__brand{ display:flex; align-items:center; gap:.6rem; font-weight:600; font-size:1rem; margin-bottom:2.2rem; }
.side__brand .mono{ display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,var(--go),var(--go-2)); color:#06281c; font-weight:700; font-size:.8rem; }
.side__nav{ display:flex; flex-direction:column; gap:.2rem; }
.side__nav a{ display:flex; align-items:center; gap:.7rem; padding:.6rem .7rem; border-radius:8px; font-size:.92rem; color:var(--muted); transition:.25s; }
.side__nav a[data-dot]::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--line); transition:.25s; }
.side__nav a:hover{ color:var(--ink); background:rgba(255,255,255,.03); }
.side__nav a.active{ color:var(--ink); background:rgba(52,211,153,.08); }
.side__nav a.active::before{ background:var(--go); box-shadow:0 0 10px var(--go); }
.side__foot{ margin-top:auto; display:flex; flex-direction:column; gap:.8rem; }
.status{ display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--muted); }
.status i{ width:8px; height:8px; border-radius:50%; background:var(--go); box-shadow:0 0 0 0 rgba(52,211,153,.5); animation:pulse 2s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)} 70%{box-shadow:0 0 0 8px rgba(52,211,153,0)} 100%{box-shadow:0 0 0 0 rgba(52,211,153,0)} }
.cmdk-open{ font-family:var(--mono); font-size:.78rem; color:var(--muted); background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:.5rem .7rem; cursor:pointer; text-align:left; transition:.25s; }
.cmdk-open:hover{ color:var(--ink); border-color:var(--go); }
.cmdk-open .mono{ color:var(--go); margin-right:.3rem; }

/* ---------- topbar ---------- */
.topbar{
  position:fixed; top:0; left:var(--side); right:0; z-index:30; height:52px;
  display:flex; align-items:center; justify-content:space-between; padding:0 clamp(1.2rem,3vw,2.4rem);
  border-bottom:1px solid var(--line); background:rgba(10,14,22,.7); backdrop-filter:blur(10px); font-size:.82rem;
}
.topbar__crumb b{ color:var(--ink); font-weight:600; }
.topbar__right{ display:flex; align-items:center; gap:1rem; color:var(--muted); }
.topbar__right .cmdk-open{ padding:.35rem .6rem; }

/* ---------- main ---------- */
.main{ margin-left:var(--side); padding:52px 0 0; }
.view{ padding:clamp(3rem,7vh,6rem) clamp(1.4rem,5vw,4.5rem); border-bottom:1px solid var(--line); max-width:1100px; }
.view__head{ display:flex; align-items:baseline; gap:1rem; margin-bottom:2rem; }
.view__head h2{ font-size:1.5rem; font-weight:600; }
.chip{ border:1px solid var(--go); color:var(--go); border-radius:100px; padding:.2rem .7rem; font-size:.78rem; }

.tag{ display:inline-block; font-size:.8rem; color:var(--go); letter-spacing:.04em; margin-bottom:1.6rem; }
.display{ font-size:clamp(2.2rem,5.5vw,4.4rem); font-weight:600; line-height:1.02; letter-spacing:-.02em; max-width:16ch; }
.display.sm{ font-size:clamp(1.8rem,4.5vw,3.2rem); max-width:none; margin-bottom:2rem; }
.sub{ font-size:clamp(1rem,1.5vw,1.2rem); color:var(--muted); line-height:1.6; max-width:54ch; margin-top:1.6rem; }
.sub b{ color:var(--ink); }
#overview{ min-height:calc(100vh - 52px); display:flex; flex-direction:column; justify-content:center; }
.overview__actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.4rem; }
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1.3rem; border-radius:10px; font-size:.92rem; font-weight:500; cursor:pointer; transition:.25s; font-family:var(--sans); }
.btn--go{ background:linear-gradient(135deg,var(--go),var(--go-2)); color:#06281c; font-weight:600; }
.btn--go:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(52,211,153,.25); }
.btn--ghost{ border:1px solid var(--line); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--go); }
.btn--ghost .mono{ color:var(--go); }

/* ---------- KPIs ---------- */
.kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.kpi{ position:relative; padding:1.4rem 1.4rem 1.6rem; border:1px solid var(--line); border-radius:14px; background:var(--panel); overflow:hidden; transition:.3s; }
.kpi:hover{ border-color:rgba(52,211,153,.4); transform:translateY(-3px); }
.kpi__n{ display:block; font-size:2.4rem; font-weight:600; color:var(--go); letter-spacing:-.02em; }
.kpi__l{ display:block; margin-top:.4rem; font-size:.88rem; color:var(--muted); }
.kpi__spark{ position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--line); }
.kpi__spark::after{ content:""; position:absolute; left:0; bottom:0; height:100%; width:calc(var(--p)*100%); background:linear-gradient(90deg,var(--go),var(--go-2)); }
@media(max-width:820px){ .kpis{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .kpis{ grid-template-columns:1fr; } }

/* ---------- chart ---------- */
.chart{ border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:1.4rem; }
.chart svg{ width:100%; height:auto; display:block; }
.chart .grid line{ stroke:var(--line); stroke-width:1; }
.chart__x{ display:flex; justify-content:space-between; margin-top:.6rem; font-size:.74rem; color:var(--dim); }
.note{ margin-top:1rem; font-size:.82rem; }

/* ---------- cases ---------- */
.cases__tabs{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.4rem; }
.cases__tabs button{ font-family:var(--mono); font-size:.82rem; padding:.5rem .9rem; border-radius:100px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; transition:.25s; }
.cases__tabs button:hover{ color:var(--ink); }
.cases__tabs button.active{ background:var(--go); color:#06281c; border-color:var(--go); font-weight:600; }
.cases__body{ border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:1.8rem; min-height:230px; }
.case__role{ font-size:1.3rem; font-weight:600; }
.case__meta{ font-family:var(--mono); font-size:.82rem; color:var(--dim); margin:.3rem 0 1.2rem; }
.case__points{ list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.case__points li{ padding-left:1.4rem; position:relative; color:var(--muted); line-height:1.5; }
.case__points li::before{ content:"▲"; position:absolute; left:0; color:var(--go); font-size:.7rem; top:.25rem; }
.case__points b{ color:var(--ink); }

/* ---------- capabilities ---------- */
.caps{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem 2.4rem; }
.cap__top{ display:flex; justify-content:space-between; font-size:.95rem; margin-bottom:.5rem; }
.cap__top .mono{ color:var(--go); }
.bar{ height:6px; border-radius:100px; background:var(--line); overflow:hidden; }
.bar i{ display:block; height:100%; width:0; border-radius:100px; background:linear-gradient(90deg,var(--go),var(--go-2)); transition:width 1.2s var(--ease); }
.cap.in i{ width:var(--w); }
.cloud{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2rem; }
.cloud span{ font-family:var(--mono); font-size:.78rem; padding:.35rem .7rem; border:1px solid var(--line); border-radius:8px; color:var(--muted); transition:.25s; }
.cloud span:hover{ color:var(--go); border-color:var(--go); }
@media(max-width:680px){ .caps{ grid-template-columns:1fr; } }

/* ---------- contact ---------- */
.contact__rows{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--panel); max-width:620px; }
.crow{ display:flex; align-items:center; gap:1rem; padding:1rem 1.3rem; border-bottom:1px solid var(--line); transition:.25s; }
.crow:last-child{ border-bottom:none; }
.crow:hover{ background:rgba(52,211,153,.06); }
.crow .mono{ width:90px; flex:none; }
.crow span:nth-child(2){ flex:1; }
.crow i{ font-style:normal; color:var(--go); }

/* ---------- footer ---------- */
.footer{ margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; font-size:.82rem; }
.footer__versions{ display:flex; flex-wrap:wrap; gap:.4rem .8rem; align-items:center; }
.footer__vlabel{ color:var(--dim); }
.footer__versions a{ color:var(--muted); transition:.25s; }
.footer__versions a:hover{ color:var(--ink); }
.footer__versions a.is-current{ color:var(--go); font-weight:600; }

/* ---------- command palette ---------- */
.cmdk{ position:fixed; inset:0; z-index:100; display:none; align-items:flex-start; justify-content:center; padding-top:14vh; background:rgba(5,8,13,.6); backdrop-filter:blur(4px); }
.cmdk.open{ display:flex; }
.cmdk__panel{ width:min(560px,92vw); background:var(--panel-2); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.cmdk__input{ width:100%; padding:1.1rem 1.3rem; background:transparent; border:none; border-bottom:1px solid var(--line); color:var(--ink); font-family:var(--sans); font-size:1.05rem; outline:none; }
.cmdk__list{ list-style:none; max-height:46vh; overflow-y:auto; padding:.5rem; }
.cmdk__list li{ display:flex; align-items:center; gap:.8rem; padding:.7rem .9rem; border-radius:10px; cursor:pointer; font-size:.95rem; color:var(--muted); }
.cmdk__list li .k{ font-family:var(--mono); font-size:.72rem; color:var(--dim); margin-left:auto; }
.cmdk__list li.sel,.cmdk__list li:hover{ background:rgba(52,211,153,.1); color:var(--ink); }
.cmdk__foot{ display:flex; gap:1.2rem; padding:.7rem 1.1rem; border-top:1px solid var(--line); font-size:.72rem; color:var(--dim); }
.cmdk__foot kbd{ font-family:var(--mono); border:1px solid var(--line); border-radius:5px; padding:0 .35rem; margin-right:.2rem; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }

/* ---------- responsive ---------- */
@media(max-width:780px){
  :root{ --side:0px; }
  .side{ position:static; width:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; border-right:none; border-bottom:1px solid var(--line); }
  .side__brand{ margin-bottom:0; }
  .side__nav{ flex-direction:row; flex-wrap:wrap; gap:.2rem .4rem; }
  .side__nav a[data-dot]::before{ display:none; }
  .side__foot{ margin:0 0 0 auto; flex-direction:row; align-items:center; }
  .status{ display:none; }
  .topbar{ display:none; }
  .main{ margin-left:0; padding-top:0; }
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .reveal{opacity:1;transform:none} }