/* ================================
   BASE, LAYOUT, NAVBAR, HERO
==================================== */

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
  scroll-behavior: smooth;
}

:root{
  --mnav-h: clamp(52px, 9vw, 64px); /* mobile fixed nav height */
}

body{
  font-family: 'IBM Plex Mono', monospace;
  background: radial-gradient(circle at center, #012c0f 5%, #000702 85%);
  color:#f3f4f3;
  font-size:.9rem;
  line-height:1.6;
  overflow-x:hidden;
}

/* Global span chip style (per your request) */
span{
  background:linear-gradient(90deg,#4e5351, #346981 60%);
  color:#e9c707;
  font-size:.85rem;
  font-weight:600;
  padding:.18rem .5rem;
  border-radius:1px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  -ms-border-radius:10px;
  -o-border-radius:10px;
}

/* Skip link (hidden until focus) */
.skip-link{
  position:absolute;
  top:-1000px;
  left:-1000px;
  background:#0f172a;
  color:#fff;
  padding:.6rem 1rem;
  border-radius:.5rem;
  border:1px solid #3b82f6;
  z-index:2000;
}
.skip-link:focus{
  top:.75rem;
  left:.75rem;
  outline:none;
}

/* Container */
.container{
  max-width:900px;
  margin:auto;
  padding:clamp(1rem,2vw,2rem);
  position:relative;
  z-index:1;
}

/* Headings (fluid) */
h1,h2,h3{
  color:#0aeae3;
}
h1{
  font-size:clamp(1.75rem,3.5vw,3.25rem);
}
h2{
  font-size:clamp(1.1rem,2vw,1.6rem);
}
h3{
  font-size:clamp(1rem,1.4vw,1.2rem);
}

/* Fixed mobile nav (simple links, no hamburger) */
.mnav{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--mnav-h);
  background: rgba(9,12,10,.95);
  backdrop-filter: saturate(120%) blur(8px);
  display: none; /* shown only on mobile */
  z-index: 1100;
  border-bottom: 1px solid #1a2531;
}
.mnav .mnav-links{
  max-width: 1100px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2.5vw, 2rem);
  padding: 0 clamp(1rem,2.5vw,2rem);
  justify-content: space-between;
}
.mnav .mnav-links a{
  display:inline-block;
  padding:.4rem .2rem;
  text-decoration: none;
  color: #c9d3e2;
  font-weight: 600;
  font-size: clamp(.85rem, 2.8vw, 1rem);
}
.mnav .mnav-links a:hover,
.mnav .mnav-links a:focus-visible{
  color:#fff;
  outline:none;
}

/* Split layout */
.split-layout{
  display:grid;
  grid-template-columns:clamp(260px,28vw,420px) 1fr;
  min-height:100svh;
}

/* LEFT rail */
.left-panel{
  padding:clamp(1rem,2.5vw,2rem) clamp(1rem,2vw,2rem) clamp(.5rem,1.5vw,1rem);
  position:sticky;
  top:0;
  align-self:start;
  height:100svh;
  overflow:auto;
  display:grid;
  grid-template-rows:auto auto 1fr auto; /* hero, about, nav, footer */
  gap:1rem;
  z-index:2;
}

/* RIGHT panel */
.right-panel{
  min-height:100svh;
  margin-top:4rem;
  padding-top:2rem;
  overflow:auto;
  position:relative;
  z-index:1;
}

/* Mobile: stack layout + show fixed top nav */
@media (max-width:1023px){
  .split-layout{
    grid-template-columns:1fr;
  }
  .left-panel{
    position:relative;
    height:auto;
    overflow:visible;
    z-index:0;
  }
  .left-nav{ display:none; }
  .mnav{
    display:flex;
    z-index:9999;
  }
  .right-panel{
    overflow:visible;
    min-height:auto;
    margin-top:0;
    padding-top: calc(var(--mnav-h) + 0.75rem);
    z-index:0;
  }
  .right-panel *{
    scroll-margin-top: calc(var(--mnav-h) + 12px) !important;
  }
}

/* Hide legacy .navbar if present anywhere */
.navbar{ display:none !important; }

/* Hero */
.hero-section{
  position:relative;
  text-align:center;
  padding:clamp(3rem,6vw,5rem) clamp(1rem,2vw,2rem) clamp(2rem,4vw,4rem);
  overflow:hidden;
}
#hero-code-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}
.hero-content{ position:relative; z-index:1; }
.hero-section h1{
  font-size:clamp(1.9rem,4vw,2.6rem);
  background:linear-gradient(135deg,#7ceda6,#f26603);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-buttons{ margin-top:clamp(1rem,2vw,2rem); }
.btn-primary,.btn-secondary{
  padding:.65rem 1.25rem;
  border-radius:.5rem;
  text-decoration:none;
  margin:0 .4rem;
  font-weight:600;
  display:inline-block;
  font-size:clamp(.9rem,1.2vw,1rem);
  transition:transform .3s ease, box-shadow .3s ease, outline-color .2s;
}

/* Force button links to keep their intended colors */
.btn-primary, .btn-primary:visited { color:#fff; text-decoration:none; }
.btn-secondary, .btn-secondary:visited { color:#eae2e2; text-decoration:none; }

.btn-primary:hover, .btn-primary:focus-visible { color:#ddda0d; text-decoration:none; }
.btn-secondary:hover, .btn-secondary:focus-visible { color:#ddda0d; text-decoration:none; }

.btn-primary{
  border:2px solid #3b82f6;
  background:linear-gradient(135deg,#556b8b,#163059);
  color:#fff;
}
.btn-secondary{
  border:2px solid #3b82f6;
  color:#0a0a0a;
  background:linear-gradient(135deg,#212222,#777f80);
}
.btn-primary:hover,.btn-secondary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.btn-primary:focus-visible,.btn-secondary:focus-visible{
  outline:2px solid #3b82f6;
  outline-offset:2px;
}

/* Rail-specific hero tweaks */
.left-panel .hero-section{
  padding:clamp(2rem,4vw,4.5rem) clamp(1rem,2vw,1.5rem) clamp(1rem,2.5vw,2rem);
  background:transparent;
}
.left-panel #hero-code-bg{ opacity:.55; }

/* Card scaffold & About */
.card{
  margin:-4rem auto 6rem;
  border-radius:20px;
  padding-top:3rem;
  backdrop-filter:blur(6px);
  position:relative;
  z-index:1;
}
.left-panel .card{ margin:0; padding-top:1.25rem; }

.about-section{ display:flex; justify-content:center; }
.about-container{
  display:flex; max-width:1100px; flex-wrap:wrap; align-items:center; gap:2rem;
}
.about-image{ position:relative; display:inline-block; }
.about-image img{
  width:min(400px,60%); height:auto; border-radius:10%;
  border:3px solid #eff1f5; box-shadow:0 5px 20px rgba(235,238,236,.15);
}
.image-caption{
  position:absolute; bottom:-30px; left:30%; transform:translateX(-50%);
  background:linear-gradient(145deg,#27314b,#03236e);
  padding:.6rem 1.2rem; border-radius:.5rem; text-align:center; color:#fff;
  box-shadow:0 4px 12px rgba(3,77,16,.3); min-width:150px;
}
.caption-number{ display:block; font-weight:700; font-size:1.2rem; color:#3b82f6; }
.caption-text{ display:block; font-size:.8rem; color:#ccc; }

.about-text{ flex:1; min-width:280px; }
.about-text p{ color:#a9ed9d; font-size:1rem; line-height:1.6; }

@media (max-width:768px){
  .about-container{ flex-direction:column; text-align:center; }
  .about-image img{ width:180px; }
  .image-caption{
    left:50%; transform:translateX(-50%); bottom:-22px;
    padding:.45rem .9rem; border-radius:999px; min-width:auto; white-space:nowrap;
  }
  .caption-number{ font-size:1rem; }
  .caption-text{ font-size:.75rem; }
}

/* ================================
   SECTIONS, TABS, SKILLS, PILLS, CONTACT
==================================== */

.section{ padding:2rem 0; }

.section-title{
  font-size:clamp(1.1rem,2vw,1.6rem);
  margin-bottom:.5rem; text-align:center;
}
.section-subtitle{
  text-align:center; color:#fff; margin-bottom:2rem; font-size:clamp(.9rem,1.4vw,1rem);
}

/* Tabs */
#profile{ margin:4rem auto; max-width:1100px; }
.tabs{
  display:flex; gap:.5rem; justify-content:center; margin-bottom:1.25rem; flex-wrap:wrap;
}
.tab{
  background:#0f172a; color:#e3b307; font-size:clamp(.9rem,1.3vw,1.05rem);
  border:1px solid #075fec; border-radius:9px; padding:.4rem .85rem; font-weight:800;
  cursor:pointer; transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.tab:hover,.tab:focus-visible{ background:#1f2937; color:#fff; outline:none; }
.tab.is-active{ background:#c2e7f1; color:#090909; border-color:#3b82f6; }

.tabpanels{ margin-top:1rem; }
.tabpanel{
  border-radius:12px; padding:1.25rem; box-shadow:0 5px 20px rgba(0,255,100,.05);
  opacity:0; transform:translateY(8px);
  transition:opacity .3s ease, transform .3s ease;
}
.tabpanel.is-visible{ display:block; opacity:1; transform:translateY(0); }

/* Skills matrix */
.skills-matrix{ display:grid; gap:.9rem; margin-top:.5rem; }
.sm-row{
  display:grid; grid-template-columns:220px 1fr; gap:1rem; align-items:start;
  background:rgba(2,10,6,.35); border:1px solid rgba(63,131,246,.15);
  border-radius:12px; padding:.85rem .9rem;
}
.sm-col{ min-width:0; }
.sm-col--domain{ font-weight:700; color:#9fe692; letter-spacing:.2px; }
.pillline{ display:flex; flex-wrap:wrap; gap:.45rem .5rem; align-items:center; }
.pillline .chip{
  display:inline-block; padding:.25rem .6rem; border-radius:999px; font-size:.8rem;
  background:linear-gradient(90deg,#384842, #474919 60%);
  color:#f9f7f4; border:1px solid rgba(63,131,246,.35);
}
.evidence{ margin-top:.45rem; font-size:.9rem; color:#cbd5e1; line-height:1.45; }
@media (max-width:860px){ .sm-row{ grid-template-columns:1fr; } }

/* Certifications pills */
.pill-section{ margin-bottom:3rem; }
.pill-section h3{ color:#f3a812; margin-bottom:1rem; font-size:clamp(1rem,1.5vw,1.25rem); }
.pill-container{ display:flex; flex-wrap:wrap; gap:.75rem; }
.pill{
  background-color:#1f2937;  padding:.5rem 1rem; border-radius:9999px;
  font-size:.85rem; border:1px solid #3b82f6; transition:background-color .2s ease, color .2s ease;
}
.pill:hover,.pill:focus-visible{ background-color:#3b82f6; color:#fff; outline:none; }

/* Contact buttons */
.contact-buttons{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:2rem;
}
.contact-pill{
  padding:.6rem 1.4rem; border-radius:999px; text-decoration:none; font-weight:600;
  background-color:#1f2937; color:#c4ea08; border:1px solid #3b82f6; transition:all .3s ease;
  font-size:clamp(.9rem,1.2vw,1rem);
}
.contact-pill:hover,.contact-pill:focus-visible{
  background-color:#3b82f6; color:#fff; transform:translateY(-2px); outline:none;
}

/* ================================
   LEFT NAV, PROJECTS, SERVICES, TIMELINE
==================================== */

/* Anchor offset for sticky rail (desktop baseline) */
.right-panel *{ scroll-margin-top:clamp(64px,7vh,84px); }

/* Left rail nav */
.left-nav{
  margin:.5rem 1.25rem 0; padding:1rem 0 0; border-top:1px dashed rgba(63,131,246,.25);
  display:grid; gap:.4rem;
}
.left-nav a{
  display:block; text-decoration:none; text-transform:uppercase; letter-spacing:.16em;
  font-size:.72rem; line-height:1; color:#aab7cf; padding:.55rem .5rem .55rem 1.25rem;
  border-radius:8px; position:relative;
  transition:color .2s ease, background .2s ease, transform .2s ease;
}
.left-nav a::before{
  content:""; position:absolute; left:.4rem; top:50%; width:14px; height:2px;
  background:rgba(168,189,255,.35); transform:translateY(-50%);
  transition:width .2s ease, background .2s ease;
}
.left-nav a:hover,.left-nav a:focus-visible{
  color:#e6f1ff; background:rgba(59,130,246,.08); transform:translateX(2px); outline:none;
}
.left-nav a:hover::before{ width:22px; background:#6aa9ff; }
.left-nav a.is-active{ color:#fff; background:rgba(59,130,246,.12); }
.left-nav a.is-active::before{ width:26px; background:#22d3a6; }
@media (max-width:1023px){ .left-nav{ display:none; } }

/* Projects grid — unified (2 / 1) */
.project-grid{
  display:grid; gap:1rem; grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:1rem;
}
@media (max-width:640px){ .project-grid{ grid-template-columns:1fr; } }

/* Services grid — original sizing (3/2/1) */
.services-section{ padding:3rem 0; }
.services-grid{
  display:grid; gap:1rem; align-items:stretch; grid-template-columns:repeat(2, minmax(0,1fr));
}
@media (max-width:1100px){ .services-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .services-grid{ grid-template-columns:1fr; } }

/* Shared tile look (projects + services) */
.project-card,
.services-grid .service-card{
  background:#0d1310; border:1px solid rgba(59,130,246,.25); border-radius:.85rem;
  box-shadow:0 6px 14px rgba(0,0,0,.28);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  transform-style:flat; will-change:transform, box-shadow, border-color;
}
.project-card:hover,
.project-card:focus-within,
.services-grid .service-card:hover{
  transform:translateY(-3px); border-color:rgba(139,92,246,.45); box-shadow:0 14px 28px rgba(0,0,0,.42);
}

/* Project horizontal layout */
.project-card{
  display:grid; grid-template-columns:92px 1fr; align-items:center; gap:.9rem; padding:.85rem .95rem;
}

/* Project media/thumb */
.project-media{
  width:92px; height:92px; border-radius:.55rem; overflow:hidden; background:#111827;
  border:1px solid rgba(59,130,246,.12); backface-visibility:hidden; transform:translateZ(0);
  transition:transform .25s ease;
}
.project-card:hover .project-media{ transform:scale(1.03); }

.project-thumb{
  width:100%; height:100%; object-fit:cover; transform:scale(1); transition:transform .35s ease;
}
.project-card:hover .project-thumb{ transform:scale(1.26); }

/* Project text */
.project-content{ min-width:0; }
.project-content h3{ margin:0 0 .25rem 0; color:#9fe692; font-size:.98rem; line-height:1.2; }
.project-content p{
  color:#cbd5e1; font-size:.9rem; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.project-table{
  display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.1rem; list-style:none; padding: 1px;
}

.project-table span{
  display:inline-block;
  padding:.25rem .6rem;
  border-radius:9px;
  font-size:.8rem; line-height:1; color:#aab7cf;
  background:rgba(59,130,246,.08);
}

/* Services specifics */
.services-grid .service-card{ padding:1rem; }
.services-grid .service-icon{
  width:46px; height:46px; display:grid; place-items:center; border-radius:12px; margin-bottom:.6rem;
  background:linear-gradient(135deg, rgba(59,130,246,.25), rgba(16,185,129,.18));
}
.services-grid .service-icon i{ font-size:1.1rem; color:#eeb406; }
.services-grid .service-card h3{ color:#9fe692; font-size:1rem; margin:0 0 .35rem 0; }
.services-grid .service-card p{ color:#cbd5e1; font-size:.92rem; line-height:1.45; margin:0; }

/* Tag chips */
.service-tags{
  display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.7rem; list-style:none; padding:0;
}


.service-tags span{
  display:inline-block;
  padding:.25rem .6rem;
  border-radius:9px;
  font-size:.8rem;
  border:1px solid rgba(63,131,246,.35);
  background:linear-gradient(90deg,#4e5351, #0a71a1 60%);
  -webkit-border-radius:;
  -moz-border-radius:;
  -ms-border-radius:;
  -o-border-radius:;
}

/* Add vertical spacing between stacked cards (e.g., Services sections) */
.services-section .service-card + .service-card{ margin-top:2rem; }

/* ================================
   BLOG (grid 2-up)
==================================== */

.blog-container{ max-width:1200px; margin:auto; padding:2rem; position:relative; z-index:2; }

.blog-strip{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.25rem; padding-block:1rem;
}
@media (max-width:768px){ .blog-strip{ grid-template-columns:1fr; } }

.blog-chip{
  background:#0d1310; border:1px solid rgba(59,130,246,.25); border-radius:.75rem;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.blog-chip:hover{ transform:translateY(-4px); border-color:rgba(139,92,246,.55); box-shadow:0 12px 24px rgba(0,0,0,.35); }
.chip-link{
  display:grid; grid-template-columns:80px 1fr; gap:.85rem; align-items:center;
  padding:.8rem .9rem; text-decoration:none; color:inherit;
}
.chip-thumb{
  width:80px; height:80px; object-fit:cover; border-radius:.5rem; box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.chip-meta{ min-width:0; }
.chip-title{ color:#0ddfee; font-size:.98rem; line-height:1.2; margin:0 0 .25rem 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chip-desc{
  color:#0bcf4c; font-size:.86rem; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ================================
   EXPERIENCE / TIMELINE (cards)
==================================== */

.vtimeline{ position:relative; padding:2rem 0; }
.vtimeline__content{ padding:.25rem 0; }
.vtimeline__time{ color:#62af0a; font-size:.82rem; font-style:italic; margin:.25rem 0; display:block; }
.vtimeline__bullets{ margin-top:.5rem; padding-left:1.25rem; }

.experience-card{
  background-color:#000702; padding:1rem; font-size:.9rem; color:#f9fafb; border-radius:8px;
  box-shadow:0 6px 14px rgba(0,0,0,.25); margin:1.5rem 0 1rem;
  transition:transform .25s ease, box-shadow .25s ease;
}
.experience-card:hover{ transform:translateY(-6px); box-shadow:0 14px 28px rgba(0,0,0,.35); }
.experience-card h3{ font-size:1.1rem; margin:0; color:#f7f7f5; font-weight:600; }
.experience-card .org{ color:#0aebe8; font-weight:600; font-size:.95rem; }
.experience-card .date{ color:#62af0a; font-size:.8rem; font-style:italic; }
.experience-card ul{ margin-top:.5rem; padding-left:1.25rem; }
.experience-card ul li{ list-style:disc; margin-bottom:.4rem; line-height:1.4; color:#f2efef; }
.experience-card .skills{
  margin:.5rem 0 .75rem 0;
}
.experience-card .skills span{
  display:inline-block; 
  background:linear-gradient(90deg,#4e5351, #346981 60%);
  padding:.25rem .6rem; border-radius:15px; font-size:.75rem; margin:0 .25rem .35rem 0;
}

/* ================================
   EDUCATION TIMELINE (centered spine + precise L/R)
==================================== */

.edu-timeline{
  /* geometry controls */
  --row-space: 0.5rem;   /* vertical spacing per item */
  --marker:    5px;     /* spine dot size */
  --spine-w:   2px;      /* spine width */
  --card-max:  240px;    /* hard ceiling for very wide screens */

  position:relative;
  list-style:none;
  margin:1rem 0 0;
  padding:2px;
}
.edu-timeline::before{
  content:"";
  position:absolute; top:0; bottom:0; left:50%;
  width:var(--spine-w);
  transform: translateX(calc(-1 * var(--spine-w)/2));
  background:linear-gradient(180deg, rgba(59,130,246,.35), rgba(16,185,129,.35));
  border-radius:1px;
}

/* Each stop */
.edu-item{
  position:relative;
  padding: var(--row-space) 0;
}

/* Marker on the spine */
.edu-marker{
  position:absolute; left:50%; top: var(--row-space); transform:translate(-50%, -50%);
  width:var(--marker); height:var(--marker); border-radius:50%;
  background:#0ddfee; border:2px solid #3b82f6; box-shadow:0 0 0 4px rgba(13,223,238,.18);
}

/* The card */
.edu-content{
  position:relative;
  background:#000702;
  border:1px solid rgba(59,130,246,.25);
  box-shadow:0 6px 14px rgba(0,0,0,.25);
  border-radius:12px;
  padding:1.1rem 1.2rem;
  width: min(calc(80% - var(--conn-gap)), var(--card-max));
  color:#f9fafb;
  transition:transform .25s ease, box-shadow .25s ease;
}
.edu-content:hover{ transform:translateY(-4px); box-shadow:0 14px 28px rgba(0,0,0,.35); }

/* Place left/right */
.edu-item.left  .edu-content{ margin-right:auto;  padding-right:1.4rem; }
.edu-item.right .edu-content{ margin-left:auto;   padding-left:1.4rem;  }

/* Connector from spine to the card — always meets spine */
.edu-item.left  .edu-content::after,
.edu-item.right .edu-content::after{
  content:"";
  position:absolute; top: calc(1.1rem + 0.2rem);
  height:2px; width: var(--conn-gap);
  background: rgba(59,130,246,.28);
}
.edu-item.left  .edu-content::after{ right: calc(-1 * var(--conn-gap)); }
.edu-item.right .edu-content::after{ left:  calc(-1 * var(--conn-gap)); }

/* keep org/date styles */
.edu-content .org{
  display:inline-block; margin-right:.75rem; color:#0aebe8; font-weight:600;
}
.edu-content .date{
  color:#62af0a; font-size:.82rem; font-style:italic; float:right;
}
.edu-content h3{ margin:.2rem 0 .5rem; color:#f7f7f5; font-size:1.1rem; }
.edu-content ul{ margin:.4rem 0 .6rem; padding-left:1.1rem; }
.edu-content ul li{ list-style:disc; margin-bottom:.35rem; color:#f2efef; }
.edu-content .skills{ display:flex; flex-wrap:wrap; gap:.4rem; }

/* Tidy spacing between items */
.edu-item + .edu-item{ margin-top:.2rem; }

/* Mobile: collapse to single column with spine on the left */
@media (max-width:900px){
  .edu-timeline{ --conn-gap: 1.2rem; }
  .edu-timeline::before{ left:20px; transform:none; }
  .edu-marker{ left:20px; transform: translate(-50%, -50%); }
  .edu-content{ width:auto; margin-left:3rem; margin-right:0; padding-left:1rem; padding-right:1rem; }
  .edu-item.right .edu-content::after,
  .edu-item.left  .edu-content::after{ left:-1.2rem; right:auto; width:1.2rem; }
}

/* ================================
   FOOTER, MOTION, CTA
==================================== */

.footer{
  text-align:center; padding:2rem; color:#777; font-size:.9rem;
  border-top:1px solid #333; margin-top:4rem;
}
@media (min-width:1024px){ .footer{ display:none; } }

/* Left-rail copy footer */
.left-copy{
  color:#9fb19a; font-size:.8rem; padding:1rem 0 0; text-align:center;
  border-top:1px dashed rgba(63,131,246,.2); margin:1rem 1.25rem 0;
}

/* Motion accessibility */
@media (prefers-reduced-motion:reduce){
  .btn-primary,.btn-secondary,
  .project-card,.experience-card,.project-thumb,.cta-card,.blog-chip,
  .services-grid .service-card { transition:none !important; }
}

/* CTA row */
.cta-row{
  display: grid; gap: 0.5rem; margin-top: 1.25rem; align-items: stretch; grid-template-columns: 1fr;
}
@media (min-width: 640px){
  .cta-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cta-card{
  display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; text-decoration: none; color: inherit;
  border: 1px solid rgba(59,130,246,.35); border-radius: .9rem;
  background: linear-gradient(145deg, rgba(59,130,246,.10), rgba(16,185,129,.10));
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
  height: 100%;
}
.cta-card i{
  font-size: 1.15rem; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px;
  background: #0f172a; border: 1px solid rgba(63,131,246,.35);
}
.cta-card strong{ color:#e6f1ff; font-size:.98rem; display:block; line-height:1.2; margin-bottom:.1rem; }
.cta-card span{ color:#9fe692; font-size:.9rem; }
.cta-card .arrow{
  margin-left: auto; font-size: 1rem; color: #9fe692; opacity: .85;
  transition: transform .2s ease, color .2s ease, opacity .2s ease;
}
.cta-card:hover{
  transform: translateY(-3px); border-color: rgba(139,92,246,.55);
  box-shadow: 0 12px 24px rgba(0,0,0,.35);
  background: linear-gradient(145deg, rgba(59,130,246,.18), rgba(16,185,129,.18));
}
.cta-card:hover .arrow{ transform: translateX(4px); color:#fff; opacity:1; }

/* Typography/space tweak */
.card{ margin-bottom:4.5rem; }

/* Left footer icons */
.left-footer a{
  color:#e0ebde; padding:10px;
  transition:transform .15s ease, border-color .15s ease, color .15s ease;
}
.left-footer a:hover{ transform:translateY(-2px); border-color:#8b5cf6; color:#0ddfee; }

/* ================================
   GLOBAL LINKS (override browser defaults)
==================================== */
a { color: #0aeae3; text-decoration: none; }
a:hover, a:focus-visible { color: #0aed43; text-decoration: underline; }
a:visited { color: #ef9905; }

/* Condensed services: clamp copy; progressive disclose */
.services-grid .service-card p{
  display: -webkit-box; -webkit-line-clamp: auto; -webkit-box-orient: vertical; overflow: hidden;
}

/* Details/summary styling */
.svc-more { margin-top: .6rem; }
.svc-more > summary{
  cursor: pointer; list-style: none; color: #9fe692; font-size: .9rem; padding: .25rem 0;
}
.svc-more > summary::-webkit-details-marker{ display:none; }
.svc-more[open] > summary{ color: #e6f1ff; }
.svc-more ul{ margin:.4rem 0 0 1rem; padding:0; }
.svc-more li{ margin:.25rem 0; color:#cbd5e1; }

/* Footer quick-contact layout when moved to mobile footer */
.footer .footer-quick-links{
  display:flex; justify-content:center; align-items:center; gap:.25rem;
  margin-top:.75rem; border-top:1px dashed rgba(63,131,246,.25); padding-top:.75rem;
}
.footer .footer-quick-links a{ padding:10px; }

/* Ensure the main footer shows on mobile (you already hide on desktop) */
@media (max-width:1023px){ .footer{ display:block; } }

/* ================================
   ADDENDUM: titles, project meta, contact form, accessibility
==================================== */

/* Section background rhythm to improve scan speed */
.section:nth-of-type(odd) .container{
  background: rgba(2,10,6,.22);
  border: 1px solid rgba(63,131,246,.12);
  border-radius: 14px;
}

/* Project meta (role/stack line) */
.project-content .meta{
  margin-top:.35rem; font-size:.82rem; color:#8fb6ff; opacity:.95;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Contact form (Netlify/Formspree) */
.contact-form{
  margin-top:1.25rem; max-width:720px; margin-left:auto; margin-right:auto;
}
.contact-form .hidden{ display:none !important; }
.contact-form .form-row{ display:grid; gap:.35rem; margin-bottom:.9rem; }
.contact-form label{ color:#9fe692; font-weight:600; font-size:.9rem; }
.contact-form input, .contact-form textarea{
  background:#0f172a; color:#e6f1ff; border:1px solid rgba(63,131,246,.35);
  border-radius:.6rem; padding:.6rem .75rem; font-size:.95rem;
}
.contact-form input:focus, .contact-form textarea:focus{
  outline:2px solid #3b82f6; outline-offset:2px;
}

/* Improve visited link contrast on dark backgrounds */
a:visited{ color:#c59bff; }

/* Optional: featured insight styling */
.blog-chip.featured{
  border-color: rgba(255,215,0,.55);
  box-shadow: 0 12px 28px rgba(255,215,0,.08);
}

/* optional: fine-tune new sections without touching existing layout */
#why-me .whyme-line { margin: .5rem 0; color:#0aed43; }

.skills-curated .skills-grid { display: grid; gap: 1rem; }
.skills-curated .skills-card {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1rem;
  padding: 1rem;
}

/* === Work & Education page: table === */
.table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(59,130,246,.25);
  border-radius: .75rem;
  background: #0d1310;
  box-shadow: 0 6px 14px rgba(0,0,0,.28);
}
.data-table { width: 100%; border-collapse: collapse; min-width: 700px; }
.data-table th, .data-table td {
  text-align: left;
  margin: 2%;
  padding: .75rem .9rem; border-bottom: 1px solid rgba(59,130,246,.15);
  font-size: .92rem; color: #e6f1ff;
}
.data-table thead th {
  background: linear-gradient(135deg, rgba(59,130,246,.25), rgba(16,185,129,.25));
  color: #fff; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
}
.data-table tbody tr:hover td { background: rgba(139,92,246,.08); }
.data-table a { text-decoration: underline; }

/* subtle striping for readability */
.data-table tbody tr:nth-child(odd) { background: rgba(255,255,255,.02); }
.data-table tbody tr:nth-child(even){ background: rgba(59,130,246,.05); }

/* hover highlight + inner glow */
.data-table tbody tr:hover td{
  background: rgba(139,92,246,.15); box-shadow: inset 0 0 8px rgba(139,92,246,.25);
}

/* title column accent: left bar + dot */
.title-cell {
  position: relative; font-weight: 700; color: #e6f1ff;
  padding-left: 1rem; border-left: 3px solid #3b82f6;
}
.title-cell .title-dot {
  position: absolute; left: -7px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #22d3a6);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}




/* skill chips inside table */
.skill-pill {
  display: inline-block;
  margin: 0 .25rem .25rem 0;
  padding: .25rem .6rem;
  font-size: .85rem;
  border-radius: 10%;
  background:linear-gradient(90deg,#06e654, #0ea5e9 60%);
  border: 1px solid rgba(101, 154, 239, 0.35);
  color: #070707;
  white-space: nowrap;
  -webkit-border-radius: 10%;
  -moz-border-radius: 10%;
  -ms-border-radius: 10%;
  -o-border-radius: 10%;
}

/* repo button with arrow */
.repo-btn {
  display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border-radius: .55rem;
  background: #0f172a; border: 1px solid rgba(63,131,246,.45); color: #cde9ff; text-decoration: none;
  font-weight: 700; font-size: .9rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.repo-btn i { font-size: .85rem; opacity: .9; }
.repo-btn:hover, .repo-btn:focus-visible {
  transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.25);
  border-color: rgba(139,92,246,.65);
  background: linear-gradient(135deg, rgba(59,130,246,.18), rgba(16,185,129,.18));
  color: #fff; outline: none;
}

/* narrow view tweaks */
@media (max-width: 640px){
  .data-table td, .data-table th { padding: .6rem .7rem; font-size: .9rem; }
}

/* Mobile-friendly table: turn rows into cards */
@media (max-width: 730px){
  .table-wrap{ border: 0; background: transparent; box-shadow: none; }
  .data-table{ width: 80%; border: 0; border-collapse: separate; }
  .data-table thead{ display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td{ display: block; width: 100%; }
  .data-table tr{
    margin: .85rem 0; border: 1px solid rgba(59,130,246,.25); border-radius: .75rem;
    background: #0d1310; overflow: hidden;
  }
  .data-table td{
    display: flex; gap: .65rem; align-items: flex-start; padding: .7rem .9rem;
    border: 0; border-bottom: 1px solid rgba(59,130,246,.15); word-break: break-word;
  }
  .data-table td:last-child{ border-bottom: 0; }
  .data-table td::before{
    content: attr(data-label); flex: 0 0 8.5rem; color: #9fe692; font-weight: 700; font-size: .9rem;
  }
  .repo-btn{
    display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem;
    border: 1px solid rgba(63,131,246,.35); border-radius: 999px; background: #0f172a; color: #e6f1ff;
    text-decoration: none; font-weight: 600; font-size: .9rem;
  }
  .repo-btn i{ font-size: .9rem; }
}

/* Desktop/tablet niceties */
.data-table{ table-layout: fixed; min-width: 0; }
.data-table th, .data-table td{ word-break: break-word; }
.data-table td.title-cell{ color: #9fe692; font-weight: 700; }

/* Button-y repo link (desktop/tablet) */
.repo-btn{
  display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem;
  border: 1px solid rgba(63,131,246,.35); border-radius: 999px; background: #0f172a; color: #e6f1ff;
  text-decoration: none; font-weight: 600;
}
.repo-btn:hover, .repo-btn:focus-visible{
  background: rgba(59,130,246,.18); border-color: rgba(139,92,246,.55); outline: none;
}
.repo-btn i{ font-size: .95rem; }

/* ================================
   EDUCATION TIMELINE
==================================== */
.edu-timeline{
  --row-space: 1rem;
  --conn-gap: 1rem;
  --card-max: 840px;
}