:root{
  color-scheme: dark;              
  --primary-color:#7fd1c1;          
  --accent-color:#c8d6f0;            
  --bg-color:#0f1b24;               
  --text-color:#e7f0f4;              
  --border-color:#213241;          

  --container:1100px;
  --card-color:#111f2a;            
  --radius:14px;
  --shadow:0 10px 26px rgba(0,0,0,.45);
  --shadow-lg:0 22px 54px rgba(0,0,0,.6);

  --nav-h:84px;
  --section-y: clamp(1rem, 2.5vw, 2rem);
  --section-y-bottom: clamp(1.25rem, 3vw, 2.5rem);
}

html{ font-size:clamp(16px,1.6vw,18px); -webkit-text-size-adjust:100%; }
*{ box-sizing:border-box; }

body{
  margin:0; line-height:1.6;
  font-family:'Inter',sans-serif;
  color:var(--text-color);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(127,209,193,.10), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(200,214,240,.08), transparent 60%),
    var(--bg-color);
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
  scroll-behavior:smooth;
}

h1{ font-size:clamp(2rem,6vw,3.5rem); margin:.25rem 0; }
h2{ font-size:clamp(1.4rem,3.2vw,2.2rem); color:var(--accent-color); margin:.25rem 0 1rem; }
h3{ font-size:clamp(1.05rem,2.2vw,1.35rem); }
p { font-size:clamp(1rem,1.7vw,1.15rem); }
img,video,canvas{ max-width:100%; height:auto; display:block; }
ul{ list-style:none; padding:0; margin:0; }

html,body{ overflow-x:hidden; }
section{ max-width:100vw; }

/*Scroll Progress Bar*/
#scroll-progress{
  position:fixed; inset:0 0 auto 0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--primary-color), var(--accent-color));
  z-index:1000; transition:width .15s linear;
}

/*Sections/Cards*/
section{
  min-height:auto;
  padding:var(--section-y) 1.25rem var(--section-y-bottom);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; scroll-snap-align:start;
}
.section-container{
  width:100%; max-width:var(--container); margin:0 auto;
  display:grid; gap:1rem;
}
.section-card{
  background:var(--card-color); border:1px solid var(--border-color);
  border-radius:var(--radius); padding:1.25rem 1.5rem;
  box-shadow:var(--shadow);
  transition:transform .22s ease, box-shadow .22s ease;
}
.section-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }

/* Reveal*/
.reveal{ opacity:0; transform:translateY(14px) scale(.98); }
.reveal.is-visible{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.65,.2,1); }
@media (prefers-reduced-motion:reduce){ .reveal,.reveal.is-visible{ opacity:1; transform:none !important; } }

/*Header*/
.site-nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  min-height: var(--nav-h);
  backdrop-filter: saturate(140%) blur(6px);
  background: rgba(17,31,42,.72);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  padding: .75rem 1.25rem;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1rem, 4vw, 2rem);
}
.site-nav a{
  text-decoration:none; font-weight:600;
  color: var(--text-color);
  position:relative; padding:.25rem .1rem;
}
.site-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-4px; height:2px; background:var(--accent-color);
  transition:right .25s ease;
}
.site-nav a:hover::after{ right:0; }

@media (min-width: 821px){
  .site-nav .nav-links a + a{
    position: relative;
    padding-left: .9rem;                 
  }
  .site-nav .nav-links a + a::before{
    content: " ";
    position: absolute;
    left: -.45rem;                   
    top: 50%;
    transform: translateY(-50%);
    color: var(--border-color);
    opacity: .7;                        
    pointer-events: none;                
  }
}

/* Reserve space for fixed header on desktop */
@media (min-width: 821px){ body{ padding-top: var(--nav-h); } }

/* Anchor offset for sticky header */
#home,#experience,#projects,#education,#community,#achievements,#contact,#quote{ scroll-margin-top:var(--nav-h); }

/* Hide header on phones */
@media (max-width:820px){ .site-nav{ display:none !important; } :root{ --nav-h:0px; } }

/* Branding*/
.brand{ display:flex; align-items:center; gap:.5rem; margin-right:auto; color:var(--text-color); text-decoration:none; font-weight:700; }
.brand-mark{
  display:inline-grid; place-items:center;
  width:36px; height:36px; border-radius:10px; color:#0b1814; background:var(--primary-color);
  font-family:"Playfair Display", serif; font-size:1.05rem; letter-spacing:.5px;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}

/*Hero*/
.eyebrow{ color:#9ab6c9; letter-spacing:.08em; text-transform:uppercase; font-size:.9rem; }
.title{ font-family:"Playfair Display", serif; color:var(--text-color); }
.subtitle{ color:var(--accent-color); margin-top:.1rem; }
.lede{ max-width:60ch; margin:.6rem auto 1.1rem; }

.badges{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 1.25rem; }
.badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .7rem; border-radius:999px; border:1px solid var(--border-color);
  background:var(--card-color); color:var(--text-color); font-size:.92rem;
}
.badge i{ font-size:.9rem; }

.cta-row{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.75rem 1.05rem; border-radius:12px; text-decoration:none; font-weight:700; cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  border:2px solid var(--primary-color);
}
.btn-primary{ background:var(--primary-color); color:#0c1814; box-shadow:0 8px 20px rgba(127,209,193,.22); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(127,209,193,.32); }
.btn:active{ transform:translateY(0); }

.home-content{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(1.25rem,4vw,5rem); flex-wrap:wrap;
  max-width:1400px; margin:auto; padding:3rem 1.25rem;
}
.home-text{ flex:1; min-width:260px; max-width:650px; }
.home-image{ flex:1; display:flex; justify-content:center; align-items:center; min-width:260px; }
.home-image img{
  width:100%; max-width:min(90vw,520px);
  border-radius:20px; border:3px solid var(--border-color);
  box-shadow:0 16px 36px rgba(0,0,0,.25); object-fit:cover;
}

/* Subtle 3D hint if you add class="tilt" */
.tilt{ transform-style:preserve-3d; will-change:transform; }

/*Quote*/
#quote{ padding:2.25rem 0 0; }
.quote-container{
  display:flex; align-items:center; justify-content:center; gap:2rem; flex-wrap:wrap;
  max-width:900px; margin:0 auto; padding:0 1rem;
}
blockquote{
  position:relative; flex:1 1 320px; text-align:left;
  font-size:clamp(1.2rem,3.2vw,1.9rem); line-height:1.45; font-weight:700; font-style:italic;
  color:var(--accent-color);
}
blockquote::before{
  content:"“"; position:absolute; left:-.25rem; top:-.8rem;
  font-size:3.6rem; color:var(--accent-color); opacity:.35; line-height:1;
}
blockquote span{ display:block; margin-top:.5rem; font-weight:600; color:var(--primary-color); font-style:normal; }

/*Experience (Timeline)*/
.experience-section{
  padding:calc(var(--section-y) + .5rem) 1.25rem;
  border-top:1px solid var(--border-color); border-bottom:1px solid var(--border-color);
}
.timeline{
  position:relative; display:flex; flex-direction:column; gap:1.5rem; width:100%; max-width:900px; margin:0 auto;
}
.timeline::before{
  content:""; position:absolute; left:28px; top:0; bottom:0; width:2px; background:#1c2a36;
}
.timeline-item{
  position:relative; display:flex; align-items:flex-start; gap:1rem;
  background:var(--card-color);
  border:1px solid var(--border-color); border-radius:12px; padding:1rem 1.25rem;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  transition:transform .25s ease, box-shadow .25s ease;
}
.timeline-item:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.35); }
.timeline-pin{
  position:absolute; left:20px; top:1.2rem; width:18px; height:18px; border-radius:50%;
  background:var(--primary-color); box-shadow:0 0 0 4px rgba(127,209,193,.16);
}
.timeline-logo{ flex-shrink:0; width:48px; height:48px; border-radius:50%; object-fit:contain; margin-left:28px; }
.timeline-content{ flex:1; text-align:left; }
.timeline-content p{ color:#b5c9d6; font-weight:600; font-size:.95rem; margin:.25rem 0 1rem; }

/*Projects*/
.project-grid{
  width:100%; max-width:var(--container); margin:0 auto;
  display:grid; gap:1.25rem; grid-template-columns:1fr;
}
@media (min-width:760px){  .project-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .project-grid{ grid-template-columns:repeat(3,1fr); } }

.project-card{
  position:relative; overflow:hidden; background:var(--card-color); border:1px solid var(--border-color);
  border-radius:14px; box-shadow:var(--shadow); display:flex; flex-direction:column;
  transition:transform .22s ease, box-shadow .22s ease;
}
.project-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.project-card img{ width:100%; height:200px; object-fit:cover; border-bottom:1px solid var(--border-color); }
.project-info{ padding:1rem 1.1rem; text-align:left; }
.project-info h3{ margin:.2rem 0 .4rem; color:var(--accent-color); font-size:1.08rem; }
.project-info p{ color:#c6d6de; font-size:.95rem; }

.project-overlay{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(15,27,36,0), rgba(15,27,36,.82));
  opacity:0; transition:opacity .3s ease;
}
.project-card:hover .project-overlay{ opacity:1; }
.overlay-btn{ background:var(--text-color); color:#0c1814; border:2px solid var(--text-color); }

/*Skills*/
.skills-subsection{ margin-top:2rem; }
.skills-grid{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.skill-tag{
  background:#0f2530; border:1px solid var(--border-color); color:var(--text-color);
  border-radius:999px; padding:.45rem .85rem; font-size:.9rem; transition:transform .2s ease, background .2s ease, color .2s ease;
}
.skill-tag:hover{ background:var(--primary-color); color:#0c1814; transform:translateY(-2px); }

/*Education / Community / Achievements*/
#education,#community,#achievements{
  min-height:auto; background:transparent;
  padding:calc(var(--section-y) + 1rem) 1.25rem var(--section-y-bottom);
  scroll-margin-top:var(--nav-h);
}
#education h2,#community h2,#achievements h2,#experience h2,#projects h2{
  font-family:"Playfair Display",serif; font-weight:700; color:var(--accent-color);
}

.item-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem; }
.item-head h3{ margin:0; font-size:clamp(1.05rem,1.8vw,1.16rem); color:var(--text-color); }
.item-meta{ color:#9ab6c9; font-weight:600; font-size:.95rem; }
.small{ font-size:.96rem; color:#b6c7cf; margin:.25rem 0 .5rem; }

#education h4,#community h4{ margin:.25rem 0 .5rem; font-size:1rem; color:var(--accent-color); font-weight:700; }
.grid-2{ display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:820px){ .grid-2{ grid-template-columns:1fr 1fr; } }

.pills{ display:flex; flex-wrap:wrap; gap:.5rem; }
.pill{
  display:inline-block; padding:.4rem .7rem; border-radius:999px;
  background:#0f2530; border:1px solid var(--border-color);
  font-size:.92rem; line-height:1; color:var(--text-color); white-space:nowrap;
}
.pill:hover{ background:var(--primary-color); color:#0c1814; }

#achievements .section-container{ gap:0; max-width:720px; }
#achievements .timeline-cards{ display:grid; gap:1.05rem; margin-top:.6rem; width:100%; }
@media (min-width:880px){ #achievements .timeline-cards{ grid-template-columns:1fr 1fr; gap:1.15rem; } }

#achievements .year-card{
  background:var(--card-color); border:1px solid var(--border-color); border-radius:14px;
  box-shadow:0 1px 6px rgba(0,0,0,.25); overflow:hidden; transition: box-shadow 140ms ease, transform 80ms ease;
}
#achievements .year-card:hover{ box-shadow:0 6px 18px rgba(0,0,0,.35); }
#achievements .year-header{
  background:linear-gradient(180deg, color-mix(in oklab, var(--accent-color) 28%, #0f1b24) 0%, var(--card-color) 100%);
  border-bottom:1px solid var(--border-color); padding:.55rem .9rem;
}
#achievements .year-title{ margin:0; font-size:1.05rem; font-weight:650; color:var(--accent-color); letter-spacing:.01em; }
#achievements .year-items{ list-style:none; margin:0; padding:.6rem .9rem .85rem; display:grid; gap:.4rem; color:var(--text-color); }
#achievements .year-items li{
  position:relative; padding-left:1.05rem; line-height:1.25; font-size:.95rem;
}
#achievements .year-items li::before{
  content:""; position:absolute; left:.35rem; top:.55em; width:6px; height:6px; border-radius:50%;
  background:var(--primary-color); opacity:.45;
}

/* separators between sections */
#education::after,#community::after,#achievements::after{
  content:""; display:block; height:1px; width:100%; max-width:var(--container);
  margin:1rem auto 0; background:linear-gradient(to right,transparent,#1b2a35,transparent);
}

/*Social icons in home*/
.social-links-top{ display:flex; gap:1rem; }
.social-links-top a{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%;
  border:2px solid var(--primary-color); color:var(--primary-color); background:var(--card-color); text-decoration:none;
  transition:transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.social-links-top a:hover{ background:var(--primary-color); color:#0c1814; transform:translateY(-2px); box-shadow:0 10px 24px rgba(127,209,193,.24); }

/*Responsiveness*/
@media (max-width:768px){
  section{ padding:3rem 1rem 1.5rem; }
  .home-content{ padding:2rem 1rem; }
}

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

/*Print*/
@media print{
  .site-nav, footer{ display:none !important; }
  body{ background:#fff; color:#000; }
  #education,#community,#achievements{ padding:0; }
  .section-card{ box-shadow:none; break-inside:avoid; }
}