/* ===========================
   Krishna Sathvik — main.css
   =========================== */

/* --- Base / Typography --- */
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  letter-spacing: .01em;
  font-feature-settings: "ss01","case","calt","liga","tnum";
  background-color: #0B0F17; /* fallback if Tailwind doesn't load */
  color: #e5e7eb;
}
h1, h2, h3, .section-title {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  letter-spacing: -.02em;
}
h1 { font-weight: 800; }
h2, h3 { font-weight: 700; }

/* --- Minor utilities --- */
.list-tight li{ margin-bottom:.4rem; }
.hidden { display: none; } /* in case TW fails to load */

/* --- Section headings with gradient underline --- */
.section-title {
  position: relative;
  display: inline-block;
  padding-bottom: .35rem;
}
.section-title::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:56%; height:3px;
  background: linear-gradient(90deg, #7ED957, rgba(126,217,87,0));
  border-radius: 999px;
}

/* --- Glass card + subtle border glow --- */
.glass{
  background: rgba(15,20,34,.55);
  border: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  border-radius: 1.25rem;
}
.card { position: relative; overflow: hidden; border-radius: inherit; }
.card::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: inherit;
  background: radial-gradient(80% 60% at 10% 0%, rgba(126,217,87,.20), rgba(126,217,87,0) 60%);
  opacity: .3; pointer-events: none;
}

/* --- Buttons --- */
.btn-primary{
  background:#7ED957; color:#0b0f17; font-weight:600;
  padding:.85rem 1.25rem; border-radius:.85rem;
  transition:.2s transform, .2s box-shadow, .2s opacity;
  display:inline-flex; align-items:center; justify-content:center;
}
.btn-primary:hover{ opacity:.95; transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(126,217,87,.55); }
.btn-primary:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(126,217,87,.35); }

.btn-ghost{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:#e5e7eb;
  padding:.85rem 1.25rem; border-radius:.85rem;
  display:inline-flex; align-items:center; justify-content:center;
  transition: background .2s ease, transform .2s ease;
}
.btn-ghost:hover{ background: rgba(255,255,255,.09); transform: translateY(-1px); }
.btn-ghost:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(126,217,87,.28); }

/* --- Inputs --- */
.input{
  width:100%; padding: .85rem 1rem; border-radius:.9rem;
  background: rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.08); color:#e5e7eb;
}
.input::placeholder{ color:#94a3b8; }
.input:focus{ outline:none; box-shadow: 0 0 0 3px rgba(126,217,87,.28); border-color: rgba(126,217,87,.35); }

/* --- KPI chips in hero --- */
.stat-pill{
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius: .9rem;
  padding:.85rem 1rem;
  text-align:center;
}
.stat-num{ font-weight:800; font-size:1.25rem; color:#7ED957; line-height:1.1; }
.stat-label{ font-size:.72rem; color:#94a3b8; }

/* ===========================
   Experience — premium bullets
   =========================== */

/* Card accent stripe */
.exp-card{ position:relative; overflow:hidden; }
.exp-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background: linear-gradient(180deg, rgba(126,217,87,.7), rgba(126,217,87,.05));
  border-radius:999px;
}

/* Role/company header */
.exp-head { display:flex; flex-direction:column; gap:.15rem; }
@media (min-width:640px){ .exp-head{ flex-direction:row; align-items:center; justify-content:space-between; } }

.role-chip{
  font-size:.72rem; padding:.25rem .5rem; border-radius:.5rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  color:#d1d5db; white-space:nowrap;
}

/* Stylish bullet list with check icon and tighter rhythm */
.exp-points{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.55rem;
}
.exp-points li{
  display:grid; grid-template-columns: 18px 1fr; column-gap:.75rem;
  color:#cbd5e1;
  line-height:1.45;
}
.exp-points li::before{
  content:""; width:18px; height:18px; margin-top:.2rem; border-radius:.35rem;
  background:#7ED957;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="black" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>') center/12px 12px no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="black" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>') center/12px 12px no-repeat;
  box-shadow: 0 0 0 4px rgba(126,217,87,.12);
}

/* Highlight key numbers/metrics */
.metric { color:#7ED957; font-weight:700; }

/* ===========================
   Certifications in hero
   =========================== */

/* Tile that contains each badge */
.cert-tile{
  display:flex; align-items:center; justify-content:center;
  height: 8.5rem;                 /* mobile */
  padding:.75rem;
  border-radius: 1rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 22px 44px -24px rgba(0,0,0,.65);
}
@media (min-width: 640px){ .cert-tile{ height: 10rem; } }   /* sm */
@media (min-width: 768px){ .cert-tile{ height: 12rem; } }   /* md */
@media (min-width:1024px){ .cert-tile{ height: 13.5rem; } } /* lg */

/* The badge image itself fills the tile height */
.cert-badge{
  max-height: 100%;
  width: auto;
  border-radius:.75rem;
  transition: transform .2s ease;
}
.cert-badge:hover{ transform: scale(1.05); }

/* ===========================
   Project tech-stack covers
   =========================== */

.tech-cover{
  position: relative;
  padding-top: 56.25%;              /* 16:9 */
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at -10% -20%, rgba(126,217,87,.24), rgba(126,217,87,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.tech-badges{
  position:absolute; inset:0;
  display:flex; flex-wrap:wrap; gap:.5rem .6rem;
  align-content:center; justify-content:center;
  padding:1rem;
}
.tech-badges img{
  height: 26px; border-radius:.5rem; box-shadow:0 6px 18px -8px rgba(0,0,0,.55);
}
@media (min-width: 640px){ .tech-badges img{ height: 30px; } }
@media (min-width: 768px){ .tech-badges img{ height: 34px; } }
@media (min-width:1024px){ .tech-badges img{ height: 36px; } }

/* ===========================
   Accessibility niceties
   =========================== */

@media (prefers-reduced-motion: reduce){
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .btn-primary, .btn-ghost, .cert-badge { transform: none !important; }
}

/* === Experience: keep bullets plain, no highlights === */
.exp-plain li::marker { color: inherit; font-weight: 400; }
.exp-plain .metric { all: unset; }           /* neutralize any old metric styling */
.exp-plain b, .exp-plain strong { color: inherit; }  /* no colored emphasis */