/* Base */
:root{
  --bg: #0B1220;
  --bg-alt: #0E1626;
  --text: #E5E7EB;
  --muted: #A5B4FC;
  --accent: #2563EB;
  --card: #121A2B;
  --border: #1F2A44;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.6;
}

.container{width:min(1100px, 92%); margin-inline:auto}

h1,h2,h3{line-height:1.2; margin:0 0 .6rem}
h1{font-size: clamp(2rem, 2.2rem + 1.5vw, 3.2rem); font-weight:800}
h2{font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); font-weight:700}
h3{font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem); font-weight:600}

.lead{color:#C7D2FE; font-size:clamp(1rem, .95rem + .5vw, 1.2rem)}

.btn{
  display:inline-block; border:1px solid var(--border);
  padding:.75rem 1rem; border-radius:.75rem; text-decoration:none;
  color:var(--text); box-shadow: var(--shadow);
}
.btn.primary{background:var(--accent); border-color:transparent; color:white; font-weight:600}
.btn.ghost{background:transparent}
.btn.small{padding:.5rem .75rem; font-size:.95rem}

.section{padding: clamp(48px, 5vw, 96px) 0}
.section.alt{background: var(--bg-alt)}

.list{padding-left:1.1rem}
.list li{margin:.4rem 0}

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.25rem;
}
@media (max-width: 900px){ .grid{grid-template-columns: repeat(2, minmax(0,1fr));}}
@media (max-width: 640px){ .grid{grid-template-columns: 1fr;}}

.card{
  background: var(--card);
  border:1px solid var(--border);
  padding:1rem;
  border-radius:1rem;
  box-shadow: var(--shadow);
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem max(4%, 16px);
  background: rgba(11, 18, 32, .8); backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:.6rem; color:var(--text); text-decoration:none; font-weight:700}
.brand img{width:28px; height:28px; display:block}

.site-nav{display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.site-nav a{color:var(--text); text-decoration:none}
.nav-toggle{display:none}

@media (max-width: 900px){
  .nav-toggle{display:inline-flex; border:1px solid var(--border); background:transparent; color:var(--text);
    padding:.5rem .75rem; border-radius:.5rem}
  .site-nav{position:absolute; right:16px; top:64px; background:var(--bg);
    border:1px solid var(--border); border-radius:.75rem; padding:.6rem; flex-direction:column; display:none}
  .site-nav.open{display:flex}
}

/* Hero */
.hero{
  padding: clamp(64px, 10vw, 140px) 0;
  background:
    radial-gradient(800px 400px at 10% 10%, rgba(37,99,235,.18), transparent 60%),
    radial-gradient(700px 360px at 90% 40%, rgba(99,102,241,.12), transparent 60%);
  border-bottom:1px solid var(--border);
  text-align: center;
  background: linear-gradient(180deg, #0b0b0b 0%, #111 100%);
  color: #fff;
}
.hero-logo {
  margin-bottom: 1rem;
}
.hero h1 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
}
.hero-details {
  list-style: none;
  margin: 0 auto 2rem;
  padding: 0;
  max-width: 700px;
  line-height: 1.6;
}
.hero-details li {
  margin-bottom: 0.8rem;
  color: #fff;
}

.hero-content{width:min(1000px, 92%); margin:auto; text-align:center}
.metrics{
  display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center;
  margin:1rem 0 1.5rem; padding:0; list-style:none;
}
.metrics li{
  background:var(--card); border:1px solid var(--border);
  padding:.65rem .9rem; border-radius:.6rem;
  display:flex; align-items:center; gap:.5rem;
}
.metrics strong{color:white; font-weight:800}
.metrics span{color:#C7D2FE; font-size:.95rem}
.metrics {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2.5rem;
  list-style: none;
  padding: 0;
}
.metrics li {
  font-size: 1.1rem;
}
.metrics strong {
  display: block;
  font-size: 1.8rem;
  color: #00c6ff;
}

/* Timeline */
.timeline{
  margin:1rem 0 0; padding:0; list-style:none; position:relative;
  border-left:2px solid var(--border);
}
.timeline li{position:relative; padding:0 0 1.25rem 1.25rem}
.timeline .t-dot{
  width:.85rem; height:.85rem; background:var(--accent); border-radius:50%;
  position:absolute; left:-.46rem; top:.2rem; box-shadow: var(--shadow);
}
.timeline .t-content h3{margin-bottom:.25rem}

/* Skills */
.skills-grid{
  display:grid; gap:1rem; grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 900px){ .skills-grid{grid-template-columns: 1fr;}}
.tags{display:flex; flex-wrap:wrap; gap:.5rem; padding:0; list-style:none; margin:.5rem 0 0}
.tags li{
  background:var(--card); border:1px solid var(--border);
  padding:.35rem .6rem; border-radius:.6rem; font-size:.95rem
}

/* Contact */
.contact-grid{
  display:grid; gap:1rem; grid-template-columns: repeat(3, minmax(0,1fr));
}
.contact-item{
  display:flex; flex-direction:column; gap:.2rem;
  padding:1rem; background: var(--card); border:1px solid var(--border); border-radius:.75rem; text-decoration:none; color:var(--text)
}
.contact-item .label{color:#9CA3AF; font-size:.9rem}
.contact-item .value{font-weight:600}
@media (max-width: 900px){ .contact-grid{grid-template-columns: 1fr;}}

.site-footer{padding:2rem 0; border-top:1px solid var(--border); background: #0A1120}

/* About profile image */
.about-profile{
  width: 140px; height: 140px; object-fit: cover;
  border-radius: 999px; border:2px solid var(--border);
  display:block; margin: 0 auto 1rem;
  box-shadow: var(--shadow);
}

/* Achievements figure */
.achv-figure{margin:1rem 0 0}
.achv-figure img{width:100%; height:auto; border:1px solid var(--border); border-radius:.75rem; box-shadow: var(--shadow)}
.achv-figure figcaption{color:#9CA3AF; font-size:.9rem; margin-top:.4rem}


/* Quick section navigation (chips) */
.quick-nav{border-bottom:1px solid var(--border); background:transparent}
.quick-nav-inner{
  width:min(1000px,92%); margin:0 auto; display:flex; gap:.5rem;
  padding:.5rem 0 .75rem; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.quick-nav .chip{
  display:inline-block; white-space:nowrap;
  padding:.5rem .75rem; border:1px solid var(--border);
  border-radius:999px; background:var(--card); color:var(--text);
  text-decoration:none; font-weight:600; box-shadow: var(--shadow);
}
.quick-nav .chip:hover,.quick-nav .chip:focus{border-color:#3B82F6; outline:none}
@media (max-width:520px){
  .cta-row .btn{flex:1 1 auto; min-width: calc(50% - .6rem); text-align:center}
  .metrics li{width:100%; justify-content:center}
}


/* ========== New Sections Navigation (chips) ========== */
.sections-nav{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(180%) blur(10px);
  background: rgba(15, 23, 42, 0.72); /* translucent dark to match theme */
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.sn-inner{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.5rem 0; }
.sn-brand{ display:flex; align-items:center; gap:.5rem; color:var(--text, #e5e7eb); text-decoration:none; font-weight:700; }
.sn-logo{ border-radius:8px; display:block; }
.sn-name{ font-size: .98rem; }

.sn-links{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; justify-content:center; }
.sn-links .chip{
  display:inline-block; padding:.5rem .75rem; line-height:1;
  border-radius:999px; border:1px solid var(--border, rgba(255,255,255,0.08));
  background: rgba(255,255,255,0.04); color: var(--text, #e5e7eb);
  text-decoration:none; white-space:nowrap; font-weight:600; box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.sn-links .chip:hover, .sn-links .chip:focus{ outline: none; border-color: rgba(59,130,246,.8); }

.sn-contact.btn.primary{ margin-left:auto; }

@media (max-width: 780px){
  .sn-inner{ flex-wrap:wrap; }
  .sn-contact{ order: 3; width: 100%; text-align: center; margin-top:.25rem; }
  .sn-links{ order:2; width:100%; justify-content:flex-start; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:.25rem; }
}

/* ========== Hero tweaks: title color to accent & goal line spacing ========== */
.hero h1{ color: var(--accent, #3B82F6); }
.hero .hero-goal{ margin:.2rem 0 .55rem; color: var(--muted, #9CA3AF); font-weight:600; }

/* ========== Floating FAB to reveal nav when scrolled below About ========== */
.nav-fab{
  position: fixed; right: 14px; bottom: 16px; z-index: 60;
  width: 52px; height: 52px; border-radius: 26px;
  border:1px solid var(--border, rgba(255,255,255,0.10));
  background: var(--accent, #3B82F6); color: #fff; font-size: 20px; font-weight:700;
  box-shadow: 0 12px 28px rgba(0,0,0,.28); cursor:pointer; display:none; align-items:center; justify-content:center;
}
.nav-fab.show{ display:flex; }

/* ensure hero CTAs wrap nicely on small screens */
.cta-row{ display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center; }
@media (max-width:520px){
  .cta-row .btn{ flex:1 1 auto; min-width: calc(50% - .6rem); }
}

/* Added: user-provided hero / metrics / cta / btn styles (will override previous rules where specific) */
.hero {
  text-align: center;
  padding: 6rem 2rem;
  background: linear-gradient(180deg, #0b0b0b 0%, #111 100%);
  color: #fff;
}

.hero-logo {
  margin-bottom: 1rem;
}

.hero h1 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.hero-details {
  list-style: none;
  margin: 0 auto 2rem;
  padding: 0;
  max-width: 700px;
  line-height: 1.6;
}

.hero-details li {
  margin-bottom: 0.8rem;
  color: #fff;
}

.metrics {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2.5rem;
  list-style: none;
  padding: 0;
}

.metrics li {
  font-size: 1.1rem;
}

.metrics strong {
  display: block;
  font-size: 1.8rem;
  color: #00c6ff;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  list-style: none;
  padding: 0;
}

.btn {
  padding: 0.8rem 1.4rem;
  border-radius: 0.6rem;
  text-decoration: none;
  font-weight: 600;
  border: 2px solid #fff;
  transition: background 0.3s ease;
}

.btn.primary {
  background: #00c6ff;
  border-color: #00c6ff;
  color: #000;
}

.btn.ghost {
  background: transparent;
  color: #fff;
}

.btn:hover {
  background: #fff;
  color: #000;
}
/* End added styles */

/* --- Fix brand spelling + nav responsiveness + chip/primary sizing --- */
.sections-nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(180%) blur(10px);background:rgba(15,23,42,.72);border-bottom:1px solid var(--border,rgba(255,255,255,.08));}
.sn-inner{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;flex-wrap:wrap;}
.sn-brand{display:flex;align-items:center;gap:.5rem;font-weight:700;}
.sn-links{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;flex:1 1 320px;min-width:260px;}
.sn-links .chip{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 .9rem;border-radius:999px;border:1px solid var(--border,rgba(255,255,255,.08));background:rgba(255,255,255,.04);white-space:nowrap;font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.15);}
.sn-links .chip:hover,.sn-links .chip:focus{outline:none;border-color:rgba(59,130,246,.8);}
.sn-contact{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 1rem;border-radius:999px;}
@media (max-width:780px){.sn-links{overflow-x:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start;padding-bottom:.25rem;} .sn-contact{order:3;width:100%;}}
/* Hero title colour and goal line */
:root{--accent:#3B82F6;}
.hero h1{color:var(--accent) !important;}
.hero .hero-goal{margin:.25rem 0 .55rem;color:var(--muted,#9CA3AF);font-weight:600;}
/* Ensure hero CTAs behave well on small screens */
.cta-row{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;}
@media (max-width:520px){.cta-row .btn{flex:1 1 auto;min-width:calc(50% - .6rem);}}