/* ============================================================
   Sriansh OS — sections.css
   Per-section layout.
   ============================================================ */

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(80px, 14vw, 160px); overflow: hidden; }
.hero__aura { position: absolute; inset: -20% -10% auto -10%; height: 70%; z-index: 0; pointer-events: none; filter: blur(60px); opacity: .55; }
.hero__aura::before, .hero__aura::after { content: ""; position: absolute; border-radius: 50%; }
.hero__aura::before { width: 480px; height: 480px; left: 8%; top: 0; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%); animation: drift 18s var(--ease-in-out) infinite; }
.hero__aura::after { width: 420px; height: 420px; right: 10%; top: 30px; background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 40%, transparent), transparent 70%); animation: drift 22s var(--ease-in-out) infinite reverse; }
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr .9fr; gap: var(--s-12); align-items: center; }
.hero__title { font-size: var(--fs-2xl); }
.hero__title .accent-text { display: inline-block; }
.hero__sub { margin-top: var(--s-6); font-size: var(--fs-md); color: var(--txt-1); max-width: 52ch; }
.hero__cta { margin-top: var(--s-8); display: flex; gap: var(--s-3); flex-wrap: wrap; }
.hero__card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-win); padding: var(--s-6); box-shadow: var(--sh-2); position: relative; }
.hero__avatar { width: 96px; height: 96px; border-radius: var(--r-md); background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 2rem; color: #07101f; }
.hero__name { margin-top: var(--s-4); font-weight: 600; font-size: var(--fs-md); }
.hero__role { color: var(--accent-2); font-family: var(--font-mono); font-size: var(--fs-sm); }
.hero__float { position: absolute; right: -8px; bottom: -10px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-pill); padding: var(--s-2) var(--s-4); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--txt-1); box-shadow: var(--sh-1); }
.hero__stats { display: flex; gap: var(--s-6); margin-top: var(--s-8); flex-wrap: wrap; }
.hero__stat b { font-size: var(--fs-lg); display: block; }
.hero__stat span { font-size: var(--fs-xs); color: var(--txt-2); font-family: var(--font-mono); }

/* ---------- About ---------- */
.about__grid { display: grid; grid-template-columns: .9fr 1.3fr; gap: var(--s-12); align-items: center; }
.about__figure { background: linear-gradient(160deg, var(--bg-2), var(--bg-1)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-8); aspect-ratio: 4/5; display: grid; place-items: center; }
.about__figure .hero__avatar { width: 140px; height: 140px; font-size: 3rem; }
.about__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); margin-top: var(--s-6); }
.about__stat { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); }
.about__stat b { font-size: var(--fs-lg); }
.about__stat span { display: block; font-size: var(--fs-xs); color: var(--txt-2); font-family: var(--font-mono); }

/* ---------- Philosophy ---------- */
.philo__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); margin-top: var(--s-8); }
.philo__item { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-6); font-family: var(--font-mono); }
.philo__item .key { color: var(--accent); }
.philo__item .val { color: var(--accent-2); }
.philo__item p { font-family: var(--font-sans); color: var(--txt-1); margin-top: var(--s-3); font-size: var(--fs-sm); }

/* ---------- Capabilities ---------- */
.caps__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-6); margin-top: var(--s-8); }
.cap__skill { margin-top: var(--s-4); }
.cap__skill .row { display: flex; justify-content: space-between; font-size: var(--fs-sm); }
.cap__skill .row span:last-child { font-family: var(--font-mono); color: var(--txt-2); }

/* ---------- Tech stack ---------- */
.tech__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-6); margin-top: var(--s-8); }
.tech__group h4 { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--accent-2); margin-bottom: var(--s-3); }
.tech__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* ---------- AI engineering diagram ---------- */
.ai__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12); align-items: center; margin-top: var(--s-8); }
.ai__diagram { display: flex; flex-direction: column; gap: var(--s-4); align-items: center; }
.ai__node { width: 100%; max-width: 280px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4) var(--s-6); font-family: var(--font-mono); font-size: var(--fs-sm); display: flex; align-items: center; gap: var(--s-3); animation: fadeUp var(--dur-3) var(--ease-out) both; }
.ai__node:nth-child(2) { animation-delay: .1s; }
.ai__node:nth-child(4) { animation-delay: .2s; }
.ai__node:nth-child(6) { animation-delay: .3s; }
.ai__node .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.ai__conn { width: 2px; height: 22px; background: linear-gradient(var(--line-strong), var(--accent)); }
.ai__cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.ai__card { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s-4); transition: border-color var(--dur-1) var(--ease-out); }
.ai__card:hover { border-color: var(--accent); }
.ai__card h4 { font-size: var(--fs-sm); }
.ai__card p { font-size: var(--fs-xs); margin-top: 4px; }

/* ---------- Hosting ---------- */
.host__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-4); margin-top: var(--s-8); }
.host__item { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-6); transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.host__item:hover { transform: translateY(-2px); border-color: var(--accent-2); }
.host__item .ico { color: var(--accent-2); }
.host__item h4 { margin-top: var(--s-3); font-size: var(--fs-md); }
.host__item p { font-size: var(--fs-sm); margin-top: var(--s-2); }

/* ---------- Projects ---------- */
.proj__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-6); margin-top: var(--s-8); }
.proj__card { cursor: pointer; text-align: left; width: 100%; }
.proj__icon { width: 56px; height: 56px; border-radius: var(--r-sm); background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: #07101f; font-family: var(--font-mono); font-weight: 700; }
.proj__card h4 { margin-top: var(--s-4); }
.proj__card p { font-size: var(--fs-sm); margin-top: var(--s-2); }
.proj__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-4); }

/* ---------- Timeline ---------- */
.timeline { position: relative; margin-top: var(--s-8); padding-left: var(--s-8); }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--accent), transparent); }
.tl__item { position: relative; padding-bottom: var(--s-8); }
.tl__item::before { content: ""; position: absolute; left: calc(-1 * var(--s-8) + 1px); top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg-0); border: 2px solid var(--accent); }
.tl__item .hash { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent-2); }
.tl__item h4 { margin-top: var(--s-2); }
.tl__item .date { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--txt-2); }
.tl__item ul { margin-top: var(--s-2); color: var(--txt-1); font-size: var(--fs-sm); }
.tl__item li { padding-left: var(--s-4); position: relative; }
.tl__item li::before { content: "+"; position: absolute; left: 0; color: var(--accent); }

/* ---------- Certificates ---------- */
.cert__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-4); margin-top: var(--s-8); }
.cert__card { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-6); text-align: center; position: relative; overflow: hidden; }
.cert__badge { width: 72px; height: 72px; margin: 0 auto var(--s-4); border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-3)); display: grid; place-items: center; color: #fff; font-family: var(--font-mono); font-weight: 700; position: relative; }
.cert__card h4 { font-size: var(--fs-sm); }
.cert__card .iss { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--txt-2); margin-top: var(--s-1); }

/* ---------- Testimonials ---------- */
.testi__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-6); margin-top: var(--s-8); }
.testi__card { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-6); }
.testi__card .prompt { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent-2); }
.testi__card blockquote { margin: var(--s-3) 0; color: var(--txt-0); }
.testi__card .who { font-size: var(--fs-sm); color: var(--txt-2); }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin-top: var(--s-8); }

/* ---------- Contact ---------- */
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12); margin-top: var(--s-8); align-items: start; }
.contact__channels { display: grid; gap: var(--s-3); margin-top: var(--s-6); }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding-block: var(--s-12); margin-top: var(--s-24); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-8); }
.footer__bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--txt-2); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero__grid, .about__grid, .ai__grid, .contact__grid { grid-template-columns: 1fr; }
  .hero__aura { display: none; }
  .philo__grid { grid-template-columns: 1fr; }
  .ai__cards { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .menubar__nav { display: none; }
  .menubar__burger { display: grid; }
  .about__stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .about__stats { grid-template-columns: 1fr; }
}