/* Reset / Base */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    margin:0;
    font-family:'Inter',system-ui,Arial,sans-serif;
    line-height:1.55;
    color:var(--color-text);
    background:var(--color-bg);
    -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3{line-height:1.15;font-weight:600;margin:0 0 .75em;}
p{margin:0 0 1.25em;}
:root{
    --color-accent:#1a73e8;
    --color-accent-rgb:26 115 232;
    --color-accent-alt:#0d47a1;
    --color-bg:#f7f9fc;
    --color-bg-alt:#ffffff;
    --color-surface:#ffffff;
    --color-border:#e2e8f0;
    --color-shadow:rgba(15,23,42,.06);
    --color-shadow-strong:rgba(15,23,42,.12);
    --color-text:#1d2734;
    --color-text-soft:#4a5a6b;
    --radius-sm:4px;
    --radius-md:10px;
    --radius-lg:18px;
    --container-max:1120px;
    --transition: .28s cubic-bezier(.4,0,.2,1);
    --gradient-hero:linear-gradient(120deg,#0d47a1,#1a73e8 45%,#4c8ffb);
}

/* Dark mode */
@media (prefers-color-scheme:dark){
  :root{
    --color-bg:#0e141b;
    --color-bg-alt:#131c26;
    --color-surface:#182430;
    --color-border:#25313d;
    --color-text:#eef4fa;
    --color-text-soft:#9bb1c7;
    --color-shadow:rgba(0,0,0,.4);
    --color-shadow-strong:rgba(0,0,0,.55);
    --gradient-hero:linear-gradient(125deg,#0d253f,#0d47a1 55%,#1a73e8);
  }
}

/* Containers */
.container{
    width:100%;
    max-width:var(--container-max);
    margin-inline:auto;
    padding-inline:clamp(1rem,2vw,2rem);
}

/* Header */
.site-header{
    position:sticky;
    top:0;
    z-index:90;
    background:rgba(var(--color-accent-rgb),0.08);
    backdrop-filter:blur(14px) saturate(160%);
    border-bottom:1px solid var(--color-border);
    transition:var(--transition);
}
.site-header.scrolled{
    background:rgba(var(--color-bg-alt),0.9);
    box-shadow:0 4px 14px -2px var(--color-shadow);
}
.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:64px;
}
.logo{
    font-size:1.35rem;
    font-weight:700;
    letter-spacing:.5px;
    color:var(--color-text);
    text-decoration:none;
    position:relative;
}
.logo span{color:var(--color-accent);}
.primary-nav ul{
    display:flex;
    gap:clamp(.75rem,2vw,1.75rem);
    font-weight:500;
}
.primary-nav a{
    text-decoration:none;
    color:var(--color-text-soft);
    padding:.65rem .2rem;
    position:relative;
    transition:var(--transition);
}
.primary-nav a::after{
    content:'';
    position:absolute;
    left:0;right:0;bottom:.35rem;
    height:2px;
    background:var(--color-accent);
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .35s;
    border-radius:2px;
}
.primary-nav a:hover,
.primary-nav a:focus{
    color:var(--color-text);
}
.primary-nav a:hover::after,
.primary-nav a:focus::after{
    transform:scaleX(1);
    transform-origin:left;
}

/* Mobile Nav */
.nav-toggle{
    display:none;
    background:none;
    border:none;
    padding:.5rem;
    cursor:pointer;
}
.nav-toggle:focus-visible{outline:2px solid var(--color-accent);}
.nav-toggle-bar{
    display:block;
    width:26px;
    height:3px;
    background:var(--color-text);
    border-radius:2px;
    position:relative;
    transition:var(--transition);
}
.nav-toggle-bar+.nav-toggle-bar{margin-top:5px;}
body.nav-open .nav-toggle-bar:nth-child(1){transform:translateY(8px) rotate(45deg);}
body.nav-open .nav-toggle-bar:nth-child(2){opacity:0;}
body.nav-open .nav-toggle-bar:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
@media (max-width:820px){
  .nav-toggle{display:inline-block;}
  .primary-nav{
      position:absolute;
      top:100%;
      right:0;
      background:var(--color-surface);
      border:1px solid var(--color-border);
      padding:1rem 1.25rem;
      border-radius:var(--radius-md);
      box-shadow:0 12px 32px -8px var(--color-shadow-strong);
      opacity:0;
      transform:translateY(-8px);
      pointer-events:none;
      transition:var(--transition);
      min-width:200px;
  }
  body.nav-open .primary-nav{
      opacity:1;
      transform:translateY(0);
      pointer-events:auto;
  }
  .primary-nav ul{flex-direction:column;align-items:flex-start;}
}

/* Hero */
.hero{
    position:relative;
    padding:clamp(4rem,10vh,7rem) 0 clamp(3rem,8vh,5rem);
    background:var(--gradient-hero);
    color:#fff;
    overflow:hidden;
}
.hero::after{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.18),transparent 60%);
    pointer-events:none;
}
.hero-inner{position:relative;z-index:2;text-align:center;max-width:820px;}
.hero-title{
    font-size:clamp(2.15rem,4.6vw,3.25rem);
    font-weight:700;
    letter-spacing:-.5px;
    margin:0 0 1rem;
}
.hero-sub{
    font-size:clamp(1rem,1.35vw,1.25rem);
    color:rgba(255,255,255,.9);
    margin:0 0 2rem;
}
.hero-cta{
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
    justify-content:center;
}

/* Buttons */
.btn{
    --btn-bg:var(--color-accent);
    --btn-color:#fff;
    --btn-bg-hover:var(--color-accent-alt);
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    text-decoration:none;
    font-weight:600;
    padding:.85rem 1.35rem;
    font-size:.95rem;
    border-radius:var(--radius-md);
    background:var(--btn-bg);
    color:var(--btn-color);
    border:1px solid transparent;
    transition:var(--transition);
    position:relative;
}
.btn.primary:hover,
.btn.primary:focus{background:var(--btn-bg-hover);}
.btn.ghost{
    --btn-bg:rgba(255,255,255,.12);
    --btn-color:#fff;
    border:1px solid rgba(255,255,255,.35);
    backdrop-filter:blur(4px);
}
.btn.ghost:hover{background:rgba(255,255,255,.22);}

/* Sections */
.section-pad{padding:clamp(3.5rem,8vh,5rem) 0;}
.section-title{
    font-size:clamp(1.8rem,3.2vw,2.4rem);
    margin:0 0 1.25rem;
    text-align:center;
}
.lead{
    font-size:clamp(1rem,1.15vw,1.125rem);
    color:var(--color-text-soft);
    max-width:780px;
    margin-inline:auto;
}

/* About skill tags */
.skill-tags{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem .65rem;
    justify-content:center;
    margin-top:2rem;
}
.skill-tags li{
    padding:.45rem .75rem;
    font-size:.75rem;
    font-weight:600;
    letter-spacing:.5px;
    text-transform:uppercase;
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:40px;
    color:var(--color-text-soft);
}

/* Projects */
.project-grid{
    display:grid;
    gap:clamp(1.4rem,2vw,1.9rem);
    grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
    margin-top:2rem;
}
.project-card{
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    display:flex;
    flex-direction:column;
    min-height:230px;
    box-shadow:0 4px 12px -4px var(--color-shadow);
    position:relative;
    overflow:hidden;
    transition:var(--transition);
}

.project-card-hit{
    position:absolute;
    inset:0;
    z-index:1;
    text-indent:-9999px;
}
.project-actions .project-link{position:relative;z-index:2;}

.project-card::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(145deg,rgba(var(--color-accent-rgb),0.08),transparent 60%);
    opacity:0;
    transition:var(--transition);
}
.project-card:hover,
.project-card:focus-within{
    transform:translateY(-4px);
    box-shadow:0 10px 28px -8px var(--color-shadow-strong);
}
.project-card:hover::before{opacity:1;}
.project-card-body{
    padding:1.15rem 1.15rem 0;
    flex-grow:1;
}
.project-title{
    margin:0 0 .5rem;
    font-size:1.05rem;
    letter-spacing:.25px;
}
.project-desc{
    font-size:.87rem;
    color:var(--color-text-soft);
    margin:0 0 1rem;
}
.meta-tags{
    display:flex;
    flex-wrap:wrap;
    gap:.4rem;
    margin:0 0 .75rem;
    padding:0;
}
.meta-tags li{
    font-size:.65rem;
    font-weight:600;
    letter-spacing:.6px;
    padding:.35rem .55rem;
    background:var(--color-bg);
    border:1px solid var(--color-border);
    border-radius:6px;
    color:var(--color-text-soft);
}
.project-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:.75rem 1.15rem 1.15rem;
    gap:.75rem;
}
.project-link{
    font-size:.8rem;
    font-weight:600;
    text-decoration:none;
    color:var(--color-accent);
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    transition:var(--transition);
}
.project-link:hover{color:var(--color-accent-alt);}
.badge{
    font-size:.6rem;
    font-weight:600;
    letter-spacing:.6px;
    text-transform:uppercase;
    padding:.4rem .55rem;
    border-radius:6px;
    background:linear-gradient(120deg,#ffd761,#ffb347);
    color:#3b2d09;
}
.badge.inprogress{
    background:linear-gradient(120deg,#ffdd57,#ffae42);
}

/* Contact */
.contact-actions{
    display:flex;
    justify-content:center;
    margin-top:1.75rem;
}

/* Footer */
.site-footer{
    margin-top:4rem;
    background:var(--color-bg-alt);
    border-top:1px solid var(--color-border);
    padding:2.2rem 0 2.4rem;
    font-size:.8rem;
}
.footer-inner{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
}
.site-footer a{
    color:var(--color-text-soft);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:50%;
    border:1px solid var(--color-border);
    background:var(--color-surface);
    text-decoration:none;
    transition:var(--transition);
}
.site-footer a:hover{
    color:var(--color-accent);
    border-color:var(--color-accent);
}

#name{
    position: relative;
    margin-top: 2%;
    margin-bottom: 3%;
    font-size: 1.5rem;
}

/* Links base */
a{color:var(--color-accent);}
a:hover{color:var(--color-accent-alt);}

/* Accessibility helpers */
a:focus-visible,button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}
.sr-only{
    position:absolute;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    border:0;
}

/* Responsive tweaks */
@media (min-width:1100px){
  .hero-inner{text-align:left;}
  .hero-title{max-width:760px;}
  .hero-sub{max-width:620px;}
  .hero-cta{justify-content:flex-start;}
}
@media (max-width:640px){
  .project-card-body{padding:1rem 1rem 0;}
  .project-actions{padding:.65rem 1rem 1rem;}
  .hero{padding:4.5rem 0 3.5rem;}
}

/* Motion preference */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}