/* =========================================================
   MADHAWA NEXUS — DESIGN SYSTEM
   Concept: personal site as a live quality-operations
   dashboard. Glass panels behave like instrument panels;
   the recurring SPC control-chart line is the signature.
========================================================= */

:root{
  --void:#05070a;
  --panel-bg: rgba(18,24,32,0.55);
  --panel-border: rgba(140,180,200,0.16);
  --panel-border-strong: rgba(45,212,232,0.4);
  --cyan:#2dd4e8;
  --cyan-dim: rgba(45,212,232,0.15);
  --amber:#e8a33d;
  --amber-dim: rgba(232,163,61,0.15);
  --green:#3ddc84;
  --white:#eef2f5;
  --mist:#7c8a99;
  --mist-dim:#4a5560;
  --line: rgba(140,180,200,0.12);

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --radius: 14px;
  --radius-sm: 6px;
  --maxw: 1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--void);
  color:var(--white);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}

/* Ambient backdrop: faint drafting grid + vignette, fixed */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(140,180,200,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140,180,200,0.05) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 90%);
}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; margin:0 0 .5em; letter-spacing:-0.01em}
p{margin:0 0 1em}
.container{max-width:var(--maxw); margin:0 auto; padding:0 28px; position:relative; z-index:1}
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cyan); display:flex; align-items:center; gap:8px; margin-bottom:14px;
}
.eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:13px; letter-spacing:.03em;
  padding:12px 22px; border-radius:var(--radius-sm);
  border:1px solid var(--panel-border-strong);
  color:var(--white); background:rgba(45,212,232,0.06);
  transition:all .2s ease; cursor:pointer;
}
.btn:hover{background:rgba(45,212,232,0.16); border-color:var(--cyan); box-shadow:0 0 24px rgba(45,212,232,0.15)}
.btn-solid{background:var(--cyan); color:#04141a; border-color:var(--cyan); font-weight:600}
.btn-solid:hover{background:#5fe4f4; box-shadow:0 0 28px rgba(45,212,232,0.35)}
.btn-ghost{background:transparent; border-color:var(--panel-border)}

/* ---------- Glass panel ---------- */
.panel{
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position:relative;
}
.panel::before{
  content:""; position:absolute; top:0; left:16px; right:16px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:14px; z-index:50;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; height:70px;
  background:rgba(14,19,26,0.68);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--panel-border);
  border-radius:20px;
  box-shadow:0 12px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  padding:0 22px;
}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:17px}
.brand .dot{width:9px; height:9px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan)}
.brand .role{font-family:var(--font-mono); font-size:11px; color:var(--mist); letter-spacing:.06em; margin-left:2px}

.main-nav ul{list-style:none; display:flex; gap:2px; margin:0; padding:0}
.main-nav li{position:relative}
.main-nav a{
  display:block; font-family:var(--font-mono); font-size:13px; letter-spacing:.03em; padding:10px 16px; border-radius:var(--radius-sm);
  color:var(--mist); transition:.2s;
}
.main-nav a:hover, .main-nav .current-menu-item > a{color:var(--white); background:rgba(255,255,255,0.06)}

/* Glass dropdown submenus */
.main-nav ul ul.sub-menu{
  position:absolute; top:calc(100% + 10px); left:0; min-width:230px;
  list-style:none; margin:0; padding:8px; display:flex; flex-direction:column; gap:2px;
  background:rgba(14,19,26,0.85);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--panel-border); border-radius:16px;
  box-shadow:0 20px 48px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
.main-nav li:hover > ul.sub-menu, .main-nav li:focus-within > ul.sub-menu{
  opacity:1; transform:translateY(0); pointer-events:auto;
}
.main-nav ul ul.sub-menu a{padding:10px 14px; border-radius:10px; font-size:13px}
.main-nav li.menu-item-has-children > a::after{content:"⌄"; margin-left:6px; opacity:.6; font-family:var(--font-body)}

.nav-toggle{display:none; background:none; border:1px solid var(--panel-border); color:var(--white); padding:8px 10px; border-radius:var(--radius-sm)}

/* ---------- Hero identity block ---------- */
.hero-identity{display:flex; align-items:center; gap:18px; margin-bottom:18px}
.hero-portrait{
  width:76px; height:76px; border-radius:50%; overflow:hidden; flex-shrink:0;
  border:2px solid var(--panel-border-strong); box-shadow:0 0 0 6px rgba(45,212,232,0.08), 0 10px 30px rgba(0,0,0,0.4);
}
.hero-portrait img{width:100%; height:100%; object-fit:cover}
.hero-name{
  font-size:clamp(30px,3.6vw,42px); line-height:1.05; margin:0;
  background:linear-gradient(120deg,#ffffff 40%,var(--cyan) 120%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.slogan{
  font-family:var(--font-mono); font-size:15px; letter-spacing:.02em; color:var(--cyan);
  margin:0 0 16px; padding-left:2px;
}

/* ---------- About portrait ---------- */
.about-portrait{padding:10px; overflow:hidden; aspect-ratio:4/5}
.about-portrait img{width:100%; height:100%; object-fit:cover; border-radius:calc(var(--radius) - 4px)}

/* ---------- Hero ---------- */
.hero{padding:88px 0 64px; position:relative}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center}
.hero h1{font-size:clamp(34px,4.4vw,54px); line-height:1.08}
.hero h1 .accent{color:var(--cyan)}
.hero .lede{font-size:18px; color:var(--mist); max-width:46ch}
.hero-cta{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap}

/* HMI status panel — signature element */
.hmi{padding:22px}
.hmi-head{display:flex; justify-content:space-between; align-items:center; font-family:var(--font-mono); font-size:11px; color:var(--mist); letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line)}
.hmi-head .live{display:flex; align-items:center; gap:6px; color:var(--green)}
.hmi-head .live::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hmi-rows{display:grid; gap:14px}
.hmi-row{display:flex; justify-content:space-between; align-items:baseline}
.hmi-row .label{font-size:13px; color:var(--mist)}
.hmi-row .value{font-family:var(--font-mono); font-size:20px; font-weight:500}
.hmi-row .value.cyan{color:var(--cyan)}
.hmi-row .value.amber{color:var(--amber)}
.hmi-row .value.green{color:var(--green)}
.hmi-chart{margin-top:18px; height:64px}
.hmi-chart svg{width:100%; height:100%}

/* ---------- SPC control-chart divider (signature, recurring) ---------- */
.spc-divider{position:relative; height:90px; margin:0; overflow:hidden}
.spc-divider svg{width:100%; height:100%}
.spc-divider .band{opacity:.18}
.spc-divider .line{fill:none; stroke:var(--cyan); stroke-width:1.6}
.spc-divider .limit{fill:none; stroke:var(--mist-dim); stroke-width:1; stroke-dasharray:4 5}
.spc-divider .label{font-family:var(--font-mono); font-size:10px; fill:var(--mist)}

/* ---------- Sections ---------- */
section{padding:72px 0; position:relative}
.section-head{max-width:640px; margin-bottom:44px}
.section-head h2{font-size:clamp(26px,3vw,36px)}
.section-head p{color:var(--mist); font-size:16px}

/* ---------- Capability grid ---------- */
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.cap-card{padding:26px 22px; transition:.25s}
.cap-card:hover{border-color:var(--panel-border-strong); transform:translateY(-3px)}
.cap-card .idx{font-family:var(--font-mono); font-size:12px; color:var(--mist-dim); margin-bottom:14px}
.cap-card h3{font-size:17px; margin-bottom:8px}
.cap-card p{font-size:14px; color:var(--mist); margin:0}

/* ---------- Cards (blog/highlights/publications) ---------- */
.card{overflow:hidden; display:flex; flex-direction:column}
.card-media{aspect-ratio:16/10; background:linear-gradient(135deg, rgba(45,212,232,0.08), rgba(232,163,61,0.05)); display:flex; align-items:center; justify-content:center; color:var(--mist-dim); font-family:var(--font-mono); font-size:11px; border-bottom:1px solid var(--line)}
.card-body{padding:20px 22px; display:flex; flex-direction:column; gap:10px; flex:1}
.tag{display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--cyan); background:var(--cyan-dim); padding:4px 10px; border-radius:20px; align-self:flex-start}
.card h3{font-size:17px}
.card p{font-size:14px; color:var(--mist); margin:0; flex:1}
.card-foot{display:flex; justify-content:space-between; align-items:center; margin-top:8px; font-family:var(--font-mono); font-size:12px; color:var(--mist)}

/* ---------- CTA band ---------- */
.cta-band{padding:64px 0}
.cta-band .panel{padding:52px 48px; display:flex; justify-content:space-between; align-items:center; gap:32px}
.cta-band h2{font-size:28px; margin-bottom:6px}
.cta-band p{color:var(--mist); margin:0}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line); padding:52px 0 28px; margin-top:40px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px}
.footer-grid h4{font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--mist); margin-bottom:14px}
.footer-grid ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.footer-grid a{font-size:14px; color:var(--white); opacity:.85}
.footer-grid a:hover{color:var(--cyan)}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:24px; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:12px; color:var(--mist-dim); flex-wrap:wrap; gap:12px}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{padding:64px 0 40px}
.page-hero h1{font-size:clamp(30px,4vw,44px)}
.page-hero .lede{color:var(--mist); font-size:17px; max-width:60ch}
.breadcrumb{font-family:var(--font-mono); font-size:12px; color:var(--mist-dim); margin-bottom:18px}
.breadcrumb a{color:var(--mist)}
.breadcrumb a:hover{color:var(--cyan)}

/* ---------- Timeline (About/CV) ---------- */
.timeline{position:relative; padding-left:32px; border-left:1px solid var(--line)}
.tl-item{position:relative; padding-bottom:40px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:""; position:absolute; left:-37px; top:4px; width:11px; height:11px; border-radius:50%; background:var(--void); border:2px solid var(--cyan); box-shadow:0 0 10px rgba(45,212,232,0.5)}
.tl-date{font-family:var(--font-mono); font-size:12px; color:var(--cyan); letter-spacing:.04em; margin-bottom:6px}
.tl-item h3{font-size:18px; margin-bottom:4px}
.tl-item .org{font-size:14px; color:var(--mist); margin-bottom:10px}
.tl-item ul{margin:0; padding-left:18px; color:var(--mist); font-size:14px; display:grid; gap:6px}

/* ---------- Stat strip ---------- */
.stat-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.stat{background:rgba(10,14,18,0.6); padding:24px 20px; text-align:center}
.stat .n{font-family:var(--font-mono); font-size:30px; color:var(--cyan); font-weight:500}
.stat .l{font-size:12px; color:var(--mist); margin-top:4px}

/* ---------- Skills matrix ---------- */
.skill-row{display:grid; grid-template-columns:220px 1fr 60px; align-items:center; gap:16px; padding:14px 0; border-bottom:1px solid var(--line)}
.skill-row .name{font-size:14px}
.skill-track{height:6px; border-radius:3px; background:rgba(255,255,255,0.06); overflow:hidden}
.skill-fill{height:100%; background:linear-gradient(90deg,var(--cyan),#5fe4f4); border-radius:3px}
.skill-row .pct{font-family:var(--font-mono); font-size:12px; color:var(--mist); text-align:right}

/* ---------- Forms ---------- */
.form-grid{display:grid; gap:18px}
.form-row-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
label{font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--mist); text-transform:uppercase; display:block; margin-bottom:8px}
input[type=text], input[type=email], input[type=url], select, textarea{
  width:100%; background:rgba(255,255,255,0.03); border:1px solid var(--panel-border);
  border-radius:var(--radius-sm); padding:13px 14px; color:var(--white); font-family:var(--font-body); font-size:15px;
}
textarea{resize:vertical; min-height:140px}
input:focus, textarea:focus, select:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px var(--cyan-dim)}
.hp-field{position:absolute; left:-9999px}
.form-status{font-family:var(--font-mono); font-size:13px; padding:12px 14px; border-radius:var(--radius-sm); display:none}
.form-status.ok{display:block; color:var(--green); background:rgba(61,220,132,0.1); border:1px solid rgba(61,220,132,0.3)}
.form-status.err{display:block; color:#ff8a8a; background:rgba(255,90,90,0.1); border:1px solid rgba(255,90,90,0.3)}

/* ---------- Contact page layout ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:40px; align-items:start}
.contact-info .row{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line)}
.contact-info .row:last-child{border-bottom:none}
.contact-info .k{font-family:var(--font-mono); font-size:11px; color:var(--mist); text-transform:uppercase; letter-spacing:.06em; width:120px; flex-shrink:0}
.contact-info .v{font-size:14px}

/* ---------- Utility ---------- */
.mt-0{margin-top:0}
.center{text-align:center; margin-left:auto; margin-right:auto}
.small{font-size:13px; color:var(--mist)}
.divider-fade{height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); margin:56px 0}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .stat-strip{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 720px){
  .main-nav{position:fixed; top:76px; left:0; right:0; background:rgba(5,7,10,0.98); border-bottom:1px solid var(--line); padding:12px; transform:translateY(-8px); opacity:0; pointer-events:none; transition:.2s}
  .main-nav.open{transform:translateY(0); opacity:1; pointer-events:auto}
  .main-nav ul{flex-direction:column}
  .nav-toggle{display:block}
  .grid-4, .grid-3, .grid-2, .form-row-2{grid-template-columns:1fr}
  .cta-band .panel{flex-direction:column; text-align:center}
  .footer-grid{grid-template-columns:1fr}
  .skill-row{grid-template-columns:1fr; gap:6px}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important}
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--cyan); outline-offset:2px;
}