/* ===== Theme tokens ===== */
:root{
  --ink:#0f172a;
  --muted:#5b6474;
  --brand:#3b82f6;
  --brand2:#8b5cf6;
  --panel:#ffffff;
  --radius:18px;
  --maxw:1100px;
  --marquee-duration: 40s; /* Control marquee speed here */
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--ink);
  background: linear-gradient(135deg, #eaf1ff, #ffffff);
  line-height:1.6;
}
a{color:var(--brand);text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:40px 24px}

/* ===== Decorative BG (WITH SUBTLE PARALLAX) ===== */
.bg .blob{position:fixed;filter:blur(42px);opacity:.45;z-index:-2}
.bg .b1{width:420px;height:420px;background:#a5b4fc;top:-80px;right:-60px;border-radius:50%}
.bg .b2{width:360px;height:360px;background:#93c5fd;bottom:-120px;left:-80px;border-radius:50%}
.bg .b3{width:260px;height:260px;background:#fbcfe8;top:40%;left:-120px;border-radius:50%}

.bg .grid{
  position:fixed;
  inset:0;
  z-index:-3;
  opacity:.18;
  transform: scale(1.02); 
  background:
    radial-gradient(circle at 0 0,rgba(59,130,246,.18),transparent 40%),
    linear-gradient(#eef2ff 1px, transparent 1px),
    linear-gradient(90deg,#eef2ff 1px, transparent 1px);
  background-size:100% 100%, 30px 30px, 30px 30px;
}
.bg .shine{
    position:fixed;
    inset:0;
    transform: scale(1.01);
    background:radial-gradient(1200px 600px at 70% -10%,rgba(59,130,246,.1),transparent);
    z-index:-1;
}

/* ===== Header ===== */
.site-header{position:sticky;top:0;background:rgba(255,255,255,.7);backdrop-filter:blur(10px);border-bottom:1px solid #e7ecf3;z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between}
.brand{
  display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;font-weight:800;
  box-shadow:0 6px 18px rgba(59,130,246,.3);
}
.menu{display:flex;gap:18px;align-items:center}
.menu a{font-weight:600;color:#223;opacity:.9}

/* ===== Cards / sections ===== */
.card{
  background:var(--panel);
  border:1px solid #dbe6ff;
  border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(16,24,40,.06);
}
.glass {
    background: rgba(255, 255, 255, 0.8); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
}
.section{margin-top:36px}
.section-head{margin:8px 0 18px;text-align:center}
.section-head h2{margin:0;font-size:clamp(22px,3.6vw,34px)}
.section-sub{margin:6px 0 0;color:#6c7482}

/* ===== Hero (Content is centered) ===== */
.hero{
  display:flex;
  flex-direction:column; 
  align-items:center; 
  text-align:center;
  padding:48px 24px;
  gap:12px;
}
.eyebrow{margin:0;color:#667085;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.title{margin:0;font-size:clamp(28px,5vw,48px);letter-spacing:.2px}
.grad-text{background:linear-gradient(90deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent}
.role{margin:4px 0 4px;color:var(--muted);font-weight:700}
.typecycle{display:inline-block;position:relative}
.typecycle.typing{animation:typing 1.1s steps(18,end)}
@keyframes typing{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.lead{margin:8px 0 16px;color:#3d4756;max-width:70ch}

.meta{list-style:none;margin:8px 0 18px;padding:0;display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.meta-item{display:flex;align-items:center;gap:8px;color:#3d4756;font-size:15px}
.meta-item svg{width:18px;height:18px;fill:#7b8794}
/* Force phone icon to fill when the SVG changes */
.meta-item:last-child svg {
    fill: var(--ink);
}
.actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* DYNAMIC BORDER ON BUTTONS */
.btn{
  display:inline-block;padding:10px 16px;border-radius:999px;font-weight:700;
  border:1px solid transparent; 
  color:#0b1220;
  background:#fff;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  transition:transform .18s, box-shadow .18s;
}
.btn:hover{
    transform:translateY(-2px); 
    box-shadow:0 8px 18px rgba(0,0,0,.08);
    background-image: linear-gradient(var(--panel), var(--panel)), 
                      linear-gradient(90deg, var(--brand), var(--brand2)); 
}
.btn.primary{
    color:#fff;
    border-color:transparent;
    background:linear-gradient(90deg,var(--brand),var(--brand2));
    background-image: linear-gradient(90deg, var(--brand), var(--brand2));
}

/* MARQUEE ANIMATION FIX */
.marquee {
    overflow: hidden;
    white-space: nowrap;
    padding: 10px 0;
    width: 100%;
}
.track {
    display: inline-block;
    animation: marquee var(--marquee-duration) linear infinite;
    padding-left: 100%; /* Start off-screen */
}
.track span {
    display: inline-block;
    padding: 0 10px;
    font-weight: 600;
    color: var(--muted);
    opacity: 0.9;
    font-size: 14px;
}
@keyframes marquee {
    from { transform: translateX(0%); }
    to { transform: translateX(-50%); } /* Half of the doubled content */
}


/* ===== Experience (timeline) ===== */
.timeline{
  position:relative;
  width:min(1000px,92%);
  margin:0 auto;
  display:grid;
  row-gap:40px;
}
.timeline::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:4px;
  background:linear-gradient(#6ea8ff,#6ea8ff);border-radius:999px;transform:translateX(-50%);
}
.timeline .dot{
  justify-self:center;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #60a5fa, #3b82f6);
  box-shadow:0 0 0 7px rgba(59,130,246,.14);
}
.timeline article.exp{
  position:relative;width:calc(50% - 40px);
  border:1px solid #cfe3ff;border-radius:20px;padding:18px 20px;background:#fff;
  box-shadow:0 16px 40px rgba(81,140,201,.18);justify-self:start;
}
.timeline article.exp:nth-of-type(even){justify-self:end}
.timeline article.exp::before{
  content:"";position:absolute;top:50%;transform:translateY(-50%);width:28px;height:2px;background:#6ea8ff;
}
.timeline article.exp:nth-of-type(odd)::before{ right:-28px; }
.timeline article.exp:nth-of-type(even)::before{ left:-28px; }

/* Experience Content Styling */
.exp-main h3{margin:0 0 6px; font-size: 18px;}
.company{font-weight:800;color:#0f172a; display: inline-block;}
.exp-main .mini {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 15px;
    font-size: 14px;
    color: var(--muted);
}
.exp-main .mini .row {
    margin: 0;
    display: inline-block;
}

/* Remove unused experience elements */
.exp-left, .tags, .bullets, .desc {
    display: none !important;
}

/* Mobile collapse timeline */
@media (max-width:800px){
  .timeline{row-gap:24px}
  .timeline::before{left:12px;transform:none}
  .timeline .dot{justify-self:start;margin-left:6px}
  .timeline article.exp{width:100%;justify-self:center !important;padding:16px 18px}
  .timeline article.exp::before{display:none}
}

/* ===== Project cards ===== */
.projects{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:900px){.projects{grid-template-columns:1fr}}
.proj{padding:18px}
.proj-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.chip{display:inline-block;padding:6px 10px;border-radius:999px;background:#eef2ff;color:#3b4adc;border:1px solid #dfe6ff;font-weight:700}

/* ===== INTERACTIVE GLOW EFFECT (For Project Cards) ===== */
.glow {
    position: relative;
    z-index: 1; 
    overflow: hidden;
    transition: transform 0.3s ease;
}
.glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%; 
    height: 200%; 
    background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), 
                                rgba(59, 130, 246, 0.4), 
                                transparent 50%);
    opacity: 0;
    transition: opacity 0.5s;
    transform: translate(-50%, -50%); 
    pointer-events: none; 
}
.glow:hover::before {
    opacity: 0.5;
}
.glow:hover {
    transform: scale(1.01); 
    box-shadow: 0 16px 40px rgba(59, 130, 246, 0.2); 
}


/* ===== Skills & Education Sections (Now stacked, no grid) ===== */
.skills-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}
@media (max-width:980px){
    .skills-grid{grid-template-columns:repeat(2,1fr)}
}
.skillcard{padding:18px}
.skillcard h3{margin:4px 0 10px}
.pillset{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0;padding:0;list-style:none}
.pillset li{
  padding:6px 10px;border-radius:999px;background:#f6f8ff;border:1px solid #e3e9ff;
  font-weight:600;color:#223
}

/* ===== Education (edu-list) ===== */
.edu-list{
    display:grid;
    grid-template-columns:repeat(2, 1fr); /* Two columns for education items */
    gap:16px;
} 
@media (max-width: 700px) {
    .edu-list{
        grid-template-columns: 1fr;
    }
}
.edu{padding:18px}
.field{font-weight:700;color:#3b82f6}
.school{margin:6px 0 0;color:#3d4756}


/* ===== CTA ===== */
.cta{padding:26px;text-align:center}
.actions.center{justify-content:center}

/* ===== Footer ===== */
.footer{border-top:1px solid #e7ecf3;background:#fff}
.fgrid{display:flex;align-items:center;justify-content:center;gap:12px}

/* ===== Animations / reveals ===== */
.fade-up{opacity:0; transform:translateY(10px); animation:fadeUp .7s ease forwards .05s}
@keyframes fadeUp{to{opacity:1; transform:none}}
.reveal{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* ===== Reduced motion: Disable complex animations/transforms ===== */
@media (prefers-reduced-motion: reduce){
  .fade-up, .reveal{animation:none;transition:none}
  .bg .grid, .bg .shine{transform: none;}
  .track {animation: none !important;}
}