/* ═══════════════════════════════════════════════════
   STYLE.CSS — Layout, Navigation, Typography, Grid
   ═══════════════════════════════════════════════════ */

   @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Share+Tech+Mono&family=Rajdhani:wght@300;400;500;600;700&display=swap');

   /* ── Reset & Base ── */
   *, *::before, *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   
   :root {
     --bg:         #050510;
     --bg2:        #080820;
     --bg3:        #0d0d2b;
     --cyan:       #00ffff;
     --cyan-dim:   rgba(0,255,255,0.5);
     --purple:     #9b5cff;
     --purple-dim: rgba(155,92,255,0.5);
     --pink:       #ff2d78;
     --blue:       #3a7bd5;
     --text-hi:    #e0f7ff;
     --text-mid:   rgba(224,247,255,0.7);
     --text-lo:    rgba(224,247,255,0.4);
     --nav-h:      64px;
     --sidebar-w:  0px;
     --max-w:      1320px;
     --section-pad: 80px 0;
   }
   
   html { scroll-behavior: smooth; }
   
   body {
     background-color: var(--bg);
     color: var(--text-hi);
     font-family: 'Rajdhani', sans-serif;
     font-size: 16px;
     line-height: 1.6;
     min-height: 100vh;
     overflow-x: hidden;
   }
   
   /* ── Typography ── */
   h1, h2, h3, h4, h5, h6 {
     font-family: 'Orbitron', monospace;
     line-height: 1.1;
     letter-spacing: 0.05em;
   }
   h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900; }
   h2 { font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 700; }
   h3 { font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 600; }
   h4 { font-size: 1rem; font-weight: 600; }
   p  { font-family: 'Rajdhani', sans-serif; font-size: 1.05rem; color: var(--text-mid); }
   a  { color: var(--cyan); text-decoration: none; transition: color 0.2s; }
   a:hover { color: #fff; }
   
   /* ── Layout ── */
   .container {
     width: 100%;
     max-width: var(--max-w);
     margin: 0 auto;
     padding: 0 32px;
   }
   
   .page-content {
     position: relative;
     z-index: 2;
     padding-top: var(--nav-h);
   }
   
   .section {
     padding: var(--section-pad);
   }
   
   /* ── Navigation ── */
   #nav {
     position: fixed;
     top: 0; left: 0; right: 0;
     height: var(--nav-h);
     z-index: 100;
     background: rgba(5,5,16,0.92);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border-bottom: 1px solid rgba(0,255,255,0.12);
     display: flex;
     align-items: center;
   }
   #nav::after {
     content: '';
     position: absolute;
     bottom: 0; left: 0; right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, rgba(0,255,255,0.5), rgba(155,92,255,0.5), transparent);
   }
   .nav-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
     max-width: var(--max-w);
     margin: 0 auto;
     padding: 0 32px;
   }
   .nav-logo {
     display: flex;
     align-items: center;
     gap: 12px;
     text-decoration: none;
     flex-shrink: 0;
   }
   .nav-logo-mark {
     width: 36px; height: 36px;
     border: 1px solid var(--cyan);
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: 'Orbitron', monospace;
     font-size: 0.65rem;
     font-weight: 700;
     color: var(--cyan);
     box-shadow: 0 0 10px rgba(0,255,255,0.3), inset 0 0 10px rgba(0,255,255,0.05);
     clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
   }
   .nav-logo-text {
     font-family: 'Orbitron', monospace;
     font-size: 0.9rem;
     font-weight: 700;
     color: var(--text-hi);
     letter-spacing: 0.1em;
   }
   .nav-logo-text span { color: var(--cyan); }
   .nav-links {
     display: flex;
     align-items: center;
     gap: 4px;
     list-style: none;
   }
   .nav-links a {
     display: flex;
     align-items: center;
     padding: 8px 14px;
     font-family: 'Orbitron', monospace;
     font-size: 0.65rem;
     font-weight: 600;
     letter-spacing: 0.12em;
     color: var(--text-lo);
     text-decoration: none;
     text-transform: uppercase;
     transition: all 0.2s ease;
     position: relative;
     border-bottom: 2px solid transparent;
   }
   .nav-links a::before {
     content: '◈ ';
     font-size: 0.55rem;
     opacity: 0;
     transition: opacity 0.2s;
     color: var(--cyan);
   }
   .nav-links a:hover,
   .nav-links a.active {
     color: var(--cyan);
     text-shadow: 0 0 8px var(--cyan);
     border-bottom-color: var(--cyan);
   }
   .nav-links a:hover::before,
   .nav-links a.active::before { opacity: 1; }
   
   .nav-status {
     display: flex;
     align-items: center;
     gap: 8px;
     flex-shrink: 0;
   }
   .nav-status-dot {
     width: 6px; height: 6px;
     background: var(--cyan);
     border-radius: 50%;
     box-shadow: 0 0 6px var(--cyan);
     animation: blink 2s ease-in-out infinite;
   }
   .nav-status-text {
     font-family: 'Orbitron', monospace;
     font-size: 0.55rem;
     letter-spacing: 0.15em;
     color: var(--cyan-dim);
   }
   
   /* Mobile hamburger */
   .nav-hamburger {
     display: none;
     flex-direction: column;
     gap: 5px;
     cursor: pointer;
     padding: 8px;
     background: none;
     border: none;
   }
   .nav-hamburger span {
     display: block;
     width: 24px; height: 2px;
     background: var(--cyan);
     transition: all 0.3s ease;
   }
   .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
   .nav-hamburger.open span:nth-child(2) { opacity: 0; }
   .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
   
   /* ── Hero ── */
   .hero {
     min-height: 100vh;
     display: flex;
     align-items: center;
     padding-top: var(--nav-h);
     position: relative;
     overflow: hidden;
   }
   .hero-content {
     position: relative;
     z-index: 2;
     padding: 60px 0;
   }
   .hero-eyebrow {
     font-family: 'Orbitron', monospace;
     font-size: 0.65rem;
     letter-spacing: 0.3em;
     color: var(--cyan);
     text-transform: uppercase;
     margin-bottom: 16px;
     display: flex;
     align-items: center;
     gap: 12px;
   }
   .hero-eyebrow::before {
     content: '';
     width: 30px; height: 1px;
     background: var(--cyan);
     box-shadow: 0 0 6px var(--cyan);
   }
   .hero-name {
     color: var(--text-hi);
     margin-bottom: 8px;
     position: relative;
     display: inline-block;
   }
   .hero-title {
     font-family: 'Orbitron', monospace;
     font-size: clamp(1rem, 2.5vw, 1.4rem);
     font-weight: 400;
     color: var(--cyan);
     letter-spacing: 0.08em;
     margin-bottom: 24px;
   }
   .hero-subtitle {
     font-size: 1.1rem;
     color: var(--text-mid);
     max-width: 520px;
     line-height: 1.7;
     margin-bottom: 40px;
   }
   .hero-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin-bottom: 40px;
   }
   .hero-tag {
     padding: 5px 14px;
     border: 1px solid rgba(0,255,255,0.25);
     font-family: 'Orbitron', monospace;
     font-size: 0.6rem;
     letter-spacing: 0.15em;
     color: var(--cyan-dim);
     clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
     background: rgba(0,255,255,0.04);
   }
   .hero-btns {
     display: flex;
     flex-wrap: wrap;
     gap: 16px;
   }
   
   /* ── KPI Cards ── */
   .kpi-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
     gap: 16px;
     margin-top: 60px;
   }
   .kpi-card {
     padding: 24px 20px;
     text-align: center;
   }
   .kpi-value {
     font-family: 'Orbitron', monospace;
     font-size: 2.2rem;
     font-weight: 900;
     color: var(--cyan);
     text-shadow: 0 0 20px var(--cyan), 0 0 40px rgba(0,255,255,0.5);
     display: block;
     line-height: 1;
     margin-bottom: 6px;
   }
   .kpi-label {
     font-family: 'Orbitron', monospace;
     font-size: 0.58rem;
     letter-spacing: 0.2em;
     color: var(--text-lo);
     text-transform: uppercase;
   }
   .kpi-sublabel {
     font-size: 0.75rem;
     color: var(--text-lo);
     margin-top: 4px;
   }
   
   /* ── Stats bar ── */
   .stats-bar {
     background: rgba(0,255,255,0.04);
     border-top: 1px solid rgba(0,255,255,0.1);
     border-bottom: 1px solid rgba(0,255,255,0.1);
     padding: 12px 0;
     overflow: hidden;
   }
   .stats-bar-inner {
     display: flex;
     gap: 40px;
     animation: marquee 20s linear infinite;
     white-space: nowrap;
   }
   .stats-bar-item {
     display: flex;
     align-items: center;
     gap: 10px;
     flex-shrink: 0;
   }
   .stats-bar-item .key {
     font-family: 'Orbitron', monospace;
     font-size: 0.55rem;
     letter-spacing: 0.2em;
     color: var(--cyan-dim);
   }
   .stats-bar-item .val {
     font-family: 'Share Tech Mono', monospace;
     font-size: 0.75rem;
     color: var(--cyan);
     text-shadow: 0 0 6px var(--cyan);
   }
   @keyframes marquee {
     from { transform: translateX(0); }
     to   { transform: translateX(-50%); }
   }
   
   /* ── About Layout ── */
   .about-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 60px;
     align-items: start;
   }
   
   /* ── Skills Layout ── */
   .skills-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 40px;
   }
   .skill-row {
     margin-bottom: 24px;
   }
   .skill-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 8px;
   }
   .skill-name {
     font-family: 'Orbitron', monospace;
     font-size: 0.7rem;
     letter-spacing: 0.12em;
     color: var(--text-hi);
   }
   .skill-pct {
     font-family: 'Share Tech Mono', monospace;
     font-size: 0.75rem;
     color: var(--cyan);
   }
   
   /* ── Projects Layout ── */
   .projects-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 24px;
   }
   .project-card {
     padding: 32px 28px 40px;
   }
   .project-card .tag-list {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
     margin-top: 16px;
   }
   .project-tag {
     padding: 3px 10px;
     border: 1px solid rgba(155,92,255,0.3);
     font-family: 'Orbitron', monospace;
     font-size: 0.55rem;
     letter-spacing: 0.1em;
     color: var(--purple-dim);
     background: rgba(155,92,255,0.05);
     border-radius: 2px;
   }
   .insight-box {
     margin-top: 20px;
     padding: 14px 16px;
     background: rgba(0,255,255,0.04);
     border-left: 3px solid var(--cyan);
     border-radius: 0 2px 2px 0;
   }
   .insight-label {
     font-family: 'Orbitron', monospace;
     font-size: 0.55rem;
     letter-spacing: 0.15em;
     color: var(--cyan);
     margin-bottom: 4px;
   }
   
   /* ── Dashboards ── */
   .dashboard-embed {
     background: rgba(0,255,255,0.02);
     border: 1px solid rgba(0,255,255,0.12);
     border-radius: 4px;
     overflow: hidden;
     position: relative;
   }
   .dashboard-embed iframe {
     width: 100%;
     height: 600px;
     border: none;
     display: block;
   }
   .dashboard-placeholder {
     height: 400px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 16px;
     color: var(--text-lo);
   }
   .dashboard-placeholder .icon {
     font-size: 3rem;
     opacity: 0.4;
   }
   
   /* ── Contact Layout ── */
   .contact-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 60px;
   }
   .terminal-window {
     background: rgba(0,0,0,0.5);
     border: 1px solid rgba(0,255,255,0.2);
     border-radius: 6px 6px 4px 4px;
     overflow: hidden;
   }
   .terminal-titlebar {
     background: rgba(0,255,255,0.06);
     border-bottom: 1px solid rgba(0,255,255,0.15);
     padding: 10px 16px;
     display: flex;
     align-items: center;
     gap: 8px;
   }
   .terminal-dot { width: 10px; height: 10px; border-radius: 50%; }
   .terminal-body {
     padding: 24px;
     font-family: 'Share Tech Mono', monospace;
     font-size: 0.85rem;
     line-height: 1.8;
     min-height: 300px;
   }
   .t-prompt { color: var(--cyan); }
   .t-cmd    { color: var(--text-hi); }
   .t-output { color: var(--purple); }
   .t-cursor {
     display: inline-block;
     width: 8px; height: 14px;
     background: var(--cyan);
     animation: cursorBlink 1s steps(1) infinite;
     vertical-align: bottom;
     margin-left: 2px;
   }
   @keyframes cursorBlink {
     0%, 50% { opacity: 1; }
     51%, 100% { opacity: 0; }
   }
   
   /* ── Social Links ── */
   .social-links {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 12px;
     margin-top: 32px;
   }
   .social-link {
     display: flex;
     align-items: center;
     gap: 14px;
     padding: 16px 20px;
     border: 1px solid rgba(0,255,255,0.15);
     text-decoration: none;
     transition: all 0.3s;
     background: rgba(0,255,255,0.02);
     border-radius: 2px;
   }
   .social-link:hover {
     border-color: rgba(0,255,255,0.5);
     background: rgba(0,255,255,0.06);
     transform: translateX(4px);
   }
   .social-link .icon {
     width: 36px; height: 36px;
     border: 1px solid rgba(0,255,255,0.3);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1rem;
     flex-shrink: 0;
     color: var(--cyan);
   }
   .social-link .info .name {
     font-family: 'Orbitron', monospace;
     font-size: 0.65rem;
     letter-spacing: 0.1em;
     color: var(--text-hi);
     display: block;
   }
   .social-link .info .handle {
     font-family: 'Share Tech Mono', monospace;
     font-size: 0.75rem;
     color: var(--cyan-dim);
   }
   
   /* ── Lab Upload ── */
   .lab-drop-zone {
     border: 2px dashed rgba(0,255,255,0.25);
     border-radius: 6px;
     padding: 60px 40px;
     text-align: center;
     cursor: pointer;
     transition: all 0.3s;
     background: rgba(0,255,255,0.02);
   }
   .lab-drop-zone:hover, .lab-drop-zone.drag-over {
     border-color: rgba(0,255,255,0.6);
     background: rgba(0,255,255,0.05);
     box-shadow: 0 0 30px rgba(0,255,255,0.1);
   }
   .lab-results { margin-top: 40px; }
   .stat-box {
     padding: 20px;
     background: rgba(0,255,255,0.03);
     border: 1px solid rgba(0,255,255,0.12);
     border-radius: 4px;
   }
   .stat-box .stat-value {
     font-family: 'Share Tech Mono', monospace;
     font-size: 1.3rem;
     color: var(--cyan);
   }
   .stat-box .stat-key {
     font-family: 'Orbitron', monospace;
     font-size: 0.55rem;
     color: var(--text-lo);
     letter-spacing: 0.15em;
   }
   
   /* ── Footer ── */
   #footer {
     background: rgba(0,0,0,0.5);
     border-top: 1px solid rgba(0,255,255,0.1);
     padding: 32px 0;
     text-align: center;
     position: relative;
     z-index: 2;
   }
   #footer::before {
     content: '';
     position: absolute;
     top: 0; left: 20%; right: 20%;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--cyan), transparent);
     box-shadow: 0 0 10px var(--cyan);
   }
   
   /* ── Page Hero Banner ── */
   .page-hero {
     padding: 80px 0 40px;
     position: relative;
   }
   .page-hero-path {
     font-family: 'Orbitron', monospace;
     font-size: 0.6rem;
     letter-spacing: 0.25em;
     color: var(--cyan-dim);
     margin-bottom: 16px;
   }
   
   /* ── Utility ── */
   .text-cyan    { color: var(--cyan); }
   .text-purple  { color: var(--purple); }
   .text-mid     { color: var(--text-mid); }
   .text-lo      { color: var(--text-lo); }
   .mt-8  { margin-top: 8px; }
   .mt-16 { margin-top: 16px; }
   .mt-24 { margin-top: 24px; }
   .mt-32 { margin-top: 32px; }
   .mt-40 { margin-top: 40px; }
   .mt-60 { margin-top: 60px; }
   .mb-8  { margin-bottom: 8px; }
   .mb-12 { margin-bottom: 12px; }
   .mb-16 { margin-bottom: 16px; }
   .mb-24 { margin-bottom: 24px; }
   .mb-32 { margin-bottom: 32px; }
   .mb-40 { margin-bottom: 40px; }
   .mb-60 { margin-bottom: 60px; }
   .flex  { display: flex; }
   .flex-col { flex-direction: column; }
   .gap-8  { gap: 8px; }
   .gap-12 { gap: 12px; }
   .gap-16 { gap: 16px; }
   .gap-24 { gap: 24px; }
   .items-center { align-items: center; }
   .justify-between { justify-content: space-between; }
   .w-full { width: 100%; }
   .text-center { text-align: center; }
   
   /* ── Responsive ── */
   @media (max-width: 1024px) {
     .about-grid, .skills-grid, .contact-grid { grid-template-columns: 1fr; }
   }
   @media (max-width: 768px) {
     :root { --nav-h: 56px; }
     .nav-links { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0;
       background: rgba(5,5,16,0.97); flex-direction: column; padding: 24px 32px;
       border-bottom: 1px solid rgba(0,255,255,0.15); gap: 0; }
     .nav-links.open { display: flex; }
     .nav-links a { padding: 14px 0; border-bottom: 1px solid rgba(0,255,255,0.06); width: 100%; }
     .nav-hamburger { display: flex; }
     .nav-status { display: none; }
     .container { padding: 0 20px; }
     .kpi-grid { grid-template-columns: 1fr 1fr; }
     .projects-grid { grid-template-columns: 1fr; }
     .social-links { grid-template-columns: 1fr; }
   }
   @media (max-width: 480px) {
     .kpi-grid { grid-template-columns: 1fr; }
     .hero-btns { flex-direction: column; }
   }