/* Base Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Poppins',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Ubuntu,'Helvetica Neue',sans-serif;background:radial-gradient(circle at 30% 65%,rgba(255,180,0,.08),transparent 60%),linear-gradient(180deg,#0a0b12 0%,#090a12 60%,#08090f 100%);color:#d5d7dd;line-height:1.5;-webkit-font-smoothing:antialiased;}
img,svg{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
:focus-visible{outline:2px solid #ffb400;outline-offset:3px;}

/* Layout */
.container{width:min(1200px,92%);margin-inline:auto;}
.section-padding{padding:clamp(4rem,10vh,7rem) 0;}
.flex{display:flex;}
.align-center{align-items:center;}
.between{justify-content:space-between;}

/* Typography */
.eyebrow{font-size:0.85rem;letter-spacing:.18em;font-weight:600;text-transform:uppercase;color:#9ca3af;margin-bottom:.9rem;opacity:.9;}
.hero-heading{font-size:clamp(2.8rem,6vw,4.5rem);display:flex;flex-direction:column;font-weight:800;line-height:1.05;letter-spacing:-.02em;}
.hero-heading span:nth-child(2){color:#ffb400;}
.tagline{font-weight:500;font-size:1.05rem;margin-top:1rem;letter-spacing:.05em;text-transform:uppercase;color:#b4b8c5;}
.section-title{font-size:clamp(2rem,4vw,2.8rem);font-weight:700;letter-spacing:-.02em;margin-bottom:2.5rem;}
.highlight{color:#ffb400;}
.logo-text{font-weight:700;letter-spacing:.05em;}

/* Header */
.site-header{position:fixed;--header-gap:20px;top:0;left:0;right:0;z-index:100;background:linear-gradient(180deg,#0b0c14 10%,rgba(11,12,20,.65) 60%,rgba(11,12,20,0));backdrop-filter:blur(8px);padding-top:var(--header-gap);}/* header now flush to top; extra space is internal padding so background fills */
.site-header .container{gap:2.2rem;padding:0 0 1rem 0;}/* remove top padding (handled by header itself) */
.logo{margin-right:auto;}
.logo{display:inline-flex;align-items:center;font-weight:700;font-size:1.15rem;}
.logo-img{display:block;height:36px;width:auto;max-width:120px;object-fit:contain;}
@media (max-width:640px){
  .logo-img{height:32px;}
}
.primary-nav{position:relative;}
.nav-list{display:flex;gap:1.75rem;font-weight:500;}
.nav-link{padding:.25rem .25rem;position:relative;}
.nav-link.active,.nav-link:focus-visible,.nav-link:hover{color:#ffb400;}

/* CTA / pointer note */
.cta-wrapper{display:flex;align-items:center;gap:.9rem;position:relative;margin-left:.75rem;}
.btn{--btn-bg:#1a1d27;--btn-color:#fff;--btn-pad:.95rem 1.4rem;--btn-radius:6px;--btn-border:2px solid transparent;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:.95rem;border:var(--btn-border);padding:var(--btn-pad);border-radius:var(--btn-radius);cursor:pointer;transition:.35s background,.35s color,.35s transform,.35s border-color;}
.btn-accent{--btn-bg:#ffb400;--btn-color:#14151b;color:var(--btn-color);background:var(--btn-bg);}
.btn-accent:hover{background:#ffc53a;}
.btn-outline{background:transparent;border-color:#ffb400;color:#ffb400;}
.btn-outline:hover{background:#ffb400;color:#14151b;}
.btn:active{transform:translateY(2px);}
.btn.full-width{width:100%;}
.btn-small{--btn-pad:.55rem 1.05rem;font-size:.82rem;line-height:1;}
.pointer-note{position:absolute;top:112%;right:-1.5rem;display:flex;flex-direction:row-reverse;align-items:flex-start;gap:.5rem;font-size:.9rem;font-family:'Poppins';color:#ffb400;font-style:italic;animation:float 3.2s ease-in-out infinite;white-space:nowrap;pointer-events:none;text-align:left;}
.pointer-note .arrow{position:relative;top:0;left:0;transform:rotate(205deg);width:60px;height:60px;flex:0 0 60px;}
.pointer-note .arrow::before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 120 120" fill="none" stroke="%23ffb400" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"><path d="M60 18 C46 26 40 42 46 57 C51 69 60 74 69 82"/><path d="M69 82 L55 79"/><path d="M69 82 L65 69"/></svg>') center/contain no-repeat;filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}

/* Hero */
.hero{min-height:100dvh;display:flex;align-items:center;}
.hero.section-padding{padding-top:clamp(3rem,6vh,4rem);}/* aggressively tightened gap below header */
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(300px,460px) minmax(400px,520px);justify-content:center;gap:3.5rem;min-height:calc(100dvh - 90px);align-items:center;}
.hero-visual{width:100%;}
.hero-avatar{width:100%;max-width:420px;aspect-ratio:1/1;border-radius:50%;position:relative;}
.hero-avatar .circle{position:absolute;inset:0;border-radius:inherit;overflow:hidden;/* 2D darker disc */
background:radial-gradient(circle at 46% 42%,#f2b84a 0%,#d58309 48%,#803f04 82%,#241804 100%);
box-shadow:0 10px 28px -10px rgba(0,0,0,.65),0 3px 8px -3px rgba(0,0,0,.45),0 0 0 1px rgba(200,120,20,.18);
animation:disc-breathe 6.2s ease-in-out infinite;
}
/* large ambient back halo */
.hero-avatar::before{content:"";position:absolute;inset:-32%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(255,190,60,.55) 0%,rgba(255,150,20,.25) 33%,rgba(150,70,10,.06) 67%,rgba(0,0,0,0) 78%);
  filter:blur(48px);opacity:.55;animation:back-halo 7.8s ease-in-out infinite;
}
/* ensure circle sits above halo */
.hero-avatar .circle{z-index:2;}
/* breathing aura: tone + glow */
.hero-avatar .circle::before,.hero-avatar .circle::after{content:"";position:absolute;border-radius:inherit;pointer-events:none;}
.hero-avatar .circle::before{inset:0;background:radial-gradient(circle at 46% 42%,rgba(255,230,170,.55) 0%,rgba(230,160,70,.25) 34%,rgba(170,100,30,.08) 58%,rgba(0,0,0,0) 74%);mix-blend-mode:screen;animation:highlight-breathe 5.8s ease-in-out infinite;}
.hero-avatar .circle::after{inset:-14%;background:radial-gradient(circle at 50% 50%,rgba(220,140,30,.55) 0%,rgba(200,110,20,.26) 30%,rgba(140,70,15,.08) 55%,rgba(60,30,0,0) 74%);filter:blur(22px);opacity:.78;animation:aura-breathe 4.8s ease-in-out infinite;}
/* spin removed */
/* Light now brightens at peak expansion */
@keyframes highlight-breathe{0%,100%{opacity:.55;transform:scale(1);}50%{opacity:.95;transform:scale(1.05);} }
@keyframes aura-breathe{0%,100%{transform:scale(1);opacity:.42;}50%{transform:scale(1.18);opacity:.9;}}
@keyframes disc-breathe{0%,100%{transform:scale(1);}50%{transform:scale(1.04);} }
@keyframes back-halo{0%,100%{transform:scale(1);opacity:.32;}50%{transform:scale(1.24);opacity:.62;}}
@media (prefers-reduced-motion:reduce){
  .hero-avatar .circle::before,.hero-avatar .circle::after{animation:none;}
}
.hero-copy{max-width:640px;z-index:2;display:flex;flex-direction:column;justify-content:center;min-height:480px;}
.hero-actions{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:1rem;}
.hero-socials{margin-top:1.5rem;display:flex;gap:.75rem;flex-wrap:wrap;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;}
.hero-socials a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#151821;border:1px solid #1f222c;color:#c9ccd2;transition:.35s background,.35s color,.35s transform,.35s border-color;}
.hero-socials a .icon{width:20px;height:20px;fill:currentColor;stroke:currentColor;stroke-width:0.8;}
.hero-socials a:hover .icon{transform:scale(1.1);} 
.hero-socials a .icon{transition:.35s transform,.35s filter;} 
/* Brand hovers */
.hero-socials a[data-platform=facebook]:hover{background:#1877f2;border-color:#1877f2;color:#fff;}
.hero-socials a[data-platform=instagram]:hover{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);border-color:#d6249f;color:#fff;}
.hero-socials a[data-platform=linkedin]:hover{background:#0a66c2;border-color:#0a66c2;color:#fff;}
.hero-socials a[data-platform=x]:hover{background:#fff;border-color:#fff;color:#000;}
.hero-socials a[data-platform=github]:hover{background:#24292f;border-color:#24292f;color:#f0f3f6;}
.hero-socials a[data-platform]:hover{box-shadow:0 4px 14px -4px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);} 
@media (prefers-reduced-motion:reduce){
  .hero-socials a .icon{transition:none;}
  .hero-socials a:hover .icon{transform:none;}
}
.hero-socials a:hover{background:#ffb400;color:#14151b;border-color:#ffb400;transform:translateY(-3px);} 
.hero-socials a:active{transform:translateY(-1px);} 
.hero-socials a:focus-visible{outline:2px solid #ffb400;outline-offset:3px;}
.hero-aside{display:flex;align-self:stretch;}
.aside-blurb{margin-top:auto;font-size:.78rem;letter-spacing:.03em;max-width:230px;color:#a2a6b3;font-weight:500;line-height:1.4;}

/* Heading accent styles */
.hero-heading{position:relative;}
.hero-heading .stroke{color:#d9dbde;}
.hero-heading .accent-block{color:#ffb400;}

@media (max-width:1400px){
  .hero-grid{gap:3rem;grid-template-columns:minmax(280px,440px) minmax(360px,500px);}
}
@media (max-width:1150px){
  .hero-grid{grid-template-columns:minmax(260px,420px) minmax(340px,500px);}
  .hero-aside{display:none;}
}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;min-height:unset;gap:2.5rem;}
  .hero-visual{margin:0 auto;max-width:420px;}
  .hero-copy{text-align:center;margin-inline:auto;min-height:unset;}
  .hero-actions{justify-content:center;}
  .hero-socials{justify-content:center;}
}

/* removed previous mid-breakpoint tweaks now handled above */

/* Projects */
.projects-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.project-card{background:linear-gradient(145deg,#12141d,#090a12);border:1px solid #1e2029;border-radius:16px;padding:1.25rem;display:flex;flex-direction:column;gap:1rem;position:relative;overflow:hidden;transition:.5s border-color,.5s transform;}
.project-card::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,180,0,.12),transparent 40%);opacity:0;transition:.5s opacity;pointer-events:none;}
.project-card:hover{border-color:#323644;transform:translateY(-4px);}
.project-card:hover::before{opacity:1;}
.project-media.placeholder{height:140px;border-radius:12px;background:repeating-linear-gradient(45deg,#1f212b,#1f212b 10px,#222530 10px,#222530 20px);}
.project-title{font-size:1.25rem;font-weight:600;}
.project-text{font-size:.9rem;color:#b5bac5;}

/* About */
.about-grid{display:grid;gap:3rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start;}
.skills{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1rem;}
.skills li{background:#151821;padding:.55rem .85rem;border-radius:30px;font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#ffb400;}
.about-details{margin-top:1.4rem;display:grid;gap:.6rem;font-size:.85rem;}
.about-details li{display:flex;align-items:center;gap:.55rem;padding:.7rem 1rem;background:#12141d;border:1px solid #1f222c;border-radius:10px;min-height:58px;}
.about-details .detail-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:#151921;border:1px solid #1f242c;color:#ffb400;flex:0 0 34px;box-shadow:0 0 0 1px rgba(255,180,0,.08),0 2px 4px -1px rgba(0,0,0,.4);} 
.about-details .detail-icon svg{width:19px;height:19px;display:block;}
.about-details .detail-label{font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.62rem;color:#9ca3af;margin-right:.25rem;}
.about-details .detail-value{font-weight:500;color:#d8dade;line-height:1.2;}
/* Inline grouping for first three details */
.about-details.inline-group{grid-auto-flow:dense;}
.about-details.inline-group > li:nth-child(1),
.about-details.inline-group > li:nth-child(2),
.about-details.inline-group > li:nth-child(3){min-width:0;}
@media (min-width:640px){
  .about-details.inline-group{grid-template-columns:repeat(3,1fr);} /* three equal columns */
  .about-details.inline-group > li:nth-child(1),
  .about-details.inline-group > li:nth-child(2),
  .about-details.inline-group > li:nth-child(3){grid-column:auto;}
  .about-details.inline-group > li.work-experience{grid-column:1 / -1;}
}
@media (max-width:639.98px){
  .about-details.inline-group{grid-template-columns:1fr;}/* fallback stack */
}
/* Work experience multi-line formatting */
.about-details li.work-experience{flex-direction:column;align-items:flex-start;padding-top:.9rem;padding-bottom:.95rem;grid-column:1 / -1;}
.about-details li.work-experience .work-main-line{display:flex;align-items:center;gap:.7rem;width:100%;}
.about-details li.work-experience .work-main-line{flex-wrap:wrap;}
.about-details li.work-experience .work-main-line .dates-inline{margin-left:auto;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:#9ea3ac;white-space:nowrap;}
@media (max-width:520px){
  .about-details li.work-experience .work-main-line .dates-inline{margin-left:0;flex-basis:100%;margin-top:.25rem;}
}
.about-details li.work-experience .work-main-line .detail-icon{margin-bottom:0;}
.about-details li.work-experience .work-title{font-size:.82rem;line-height:1.3;font-weight:600;color:#f0f2f5;}
.about-details li.work-experience .work-title .role{color:#ffb400;font-weight:600;}
/* .work-meta removed (date now inline) */
.about-details li.work-experience .work-desc{margin-top:.55rem;font-size:.7rem;line-height:1.4;color:#b8bcc4;font-weight:500;}
.about-details li.work-experience a.inline-link{color:#ffb400;}
.about-details li.work-experience a.inline-link:hover{text-decoration:underline;}
/* Education experience formatting */
.about-details li.education-experience{flex-direction:column;align-items:flex-start;padding-top:.9rem;padding-bottom:.95rem;grid-column:1 / -1;}
.about-details li.education-experience .edu-main-line{display:flex;align-items:center;gap:.7rem;width:100%;flex-wrap:wrap;}
.about-details li.education-experience .edu-main-line .detail-icon{margin-bottom:0;}
.about-details li.education-experience .edu-title{font-size:.82rem;line-height:1.3;font-weight:600;color:#f0f2f5;}
.about-details li.education-experience .edu-title .degree{color:#ffb400;font-weight:600;}
.about-details li.education-experience .dates-inline{margin-left:auto;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:#9ea3ac;white-space:nowrap;}
@media (max-width:520px){
  .about-details li.education-experience .dates-inline{margin-left:0;flex-basis:100%;margin-top:.25rem;}
}
.about-details li.education-experience .edu-desc{margin-top:.55rem;font-size:.7rem;line-height:1.4;color:#b8bcc4;font-weight:500;}
@media (min-width:640px){
  .about-details{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
}
.about-stats{display:grid;gap:1.25rem;grid-auto-flow:column;grid-auto-columns:1fr;justify-items:start;}
.about-copy .about-stats.moved{margin-top:2rem;display:flex;gap:1.25rem;flex-wrap:nowrap;}
@media (max-width:620px){
  .about-copy .about-stats.moved{flex-wrap:wrap;}
  .about-copy .about-stats.moved .stat{flex:1 1 160px;}
}
.stat{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;padding:1rem 1.1rem;background:#12141d;border:1px solid #1f222c;border-radius:14px;min-width:140px;}
.stat .num{font-size:2rem;font-weight:700;color:#ffb400;}
.stat .label{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#9ca3af;font-weight:600;}

/* Contact */
.contact-grid{display:grid;gap:3.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start;}
.contact-list{display:grid;gap:.5rem;margin-top:1rem;font-size:.9rem;}
.contact-form{display:grid;gap:1.25rem;background:linear-gradient(145deg,#12141d,#0d0f15);padding:2rem;border:1px solid #1f222c;border-radius:18px;}
.form-field{display:flex;flex-direction:column;gap:.45rem;}
.form-field label{font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#c3c7ce;}
.form-field input,.form-field textarea{background:#151821;border:1px solid #242732;color:#e3e5e9;padding:.9rem 1rem;border-radius:10px;font:inherit;resize:vertical;min-height:52px;}
.form-field input:focus,.form-field textarea:focus{border-color:#ffb400;}
.error{border-color:#e54848!important;}
.error-msg{font-size:.7rem;min-height:1em;color:#e54848;font-weight:500;}
.form-status{margin-top:.25rem;font-size:.75rem;color:#8b919c;}

/* Footer */
.site-footer{padding:3rem 0 4rem;background:#06070c;border-top:1px solid #14171f;font-size:.8rem;}
.footer-grid{display:grid;gap:1.75rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:start;}
.footer-nav{display:flex;flex-wrap:wrap;gap:1rem;}
.footer-nav a:hover{color:#ffb400;}
.socials{display:flex;gap:.75rem;}
.social-link{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#151821;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;border:1px solid #1f222c;transition:.3s background,.3s color,.3s transform;}
.social-link:hover{background:#ffb400;color:#14151b;transform:translateY(-2px);}

/* Nav Toggle (mobile) */
.nav-toggle{display:none;flex-direction:column;gap:5px;background:transparent;border:none;cursor:pointer;padding:.5rem .25rem;margin-right:.5rem;}
.nav-toggle .bar{width:26px;height:3px;background:#ffb400;border-radius:2px;transition:.4s;}

/* Responsive */
@media (max-width:860px){
  .nav-toggle{display:flex;}
  .nav-list{position:absolute;top:calc(100% + .75rem);right:0;flex-direction:column;background:#11131a;padding:1.2rem 1.4rem;border:1px solid #1d2028;border-radius:14px;min-width:180px;opacity:0;transform:translateY(-10px);pointer-events:none;transition:.4s;}
  .nav-list.open{opacity:1;transform:translateY(0);pointer-events:auto;}
  .nav-link{padding:.35rem 0;}
  .pointer-note{display:none;}
  .hero-grid{gap:2.5rem;}
  .about-stats{grid-auto-flow:row;grid-auto-columns:unset;}
}

@media (max-width:560px){
  .hero-heading{font-size:clamp(2.3rem,10vw,3.1rem);} 
  .site-header .container{padding:.65rem 0;}
  .section-padding{padding:3.5rem 0;}
}

/* Smaller hero orb on narrow phones */
@media (max-width:560px){
  .hero-visual{max-width:300px;margin-inline:auto;}
  .hero-avatar{max-width:300px;}
  /* tighten halo inset proportionally */
  .hero-avatar::before{inset:-24%;}
}

/* Extra small phones: shrink further */
@media (max-width:420px){
  .hero-visual{max-width:260px;}
  .hero-avatar{max-width:260px;}
  .hero-avatar::before{inset:-20%;}
}

/* Ultra small devices */
@media (max-width:360px){
  .hero-visual{max-width:220px;}
  .hero-avatar{max-width:220px;}
  .hero-avatar::before{inset:-18%;}
  .hero-heading{font-size:clamp(2rem,11vw,2.4rem);} /* slightly reduce heading */
  .eyebrow{font-size:.72rem;letter-spacing:.16em;}
  .tagline{font-size:.78rem;}
  .hero-copy{min-height:unset;}
}

/* Fluid scaling version (mobile only) – ensures visible change across widths.
   Uses width instead of only max-width so orb shrinks smoothly. */
@media (max-width:640px){
  .hero-avatar,.hero-visual{width:clamp(180px,55vw,420px);} /* 420px cap matches desktop visual scale */
}

/* Mobile-only performance optimizations (scoped so desktop unaffected) */
@media (max-width:640px){
  /* Defer rendering of off-screen sections; intrinsic size prevents large layout shifts */
  #projects,#about,#contact{content-visibility:auto;contain-intrinsic-size:1000px 720px;}
}

/* Throttle glow / breathing animations on very small devices to reduce paint & battery */
@media (max-width:560px){
  .hero-avatar::before{filter:blur(28px);opacity:.4;animation:back-halo-mobile 11s ease-in-out infinite;}
  .hero-avatar .circle{animation:disc-breathe-mobile 9s ease-in-out infinite;}
  .hero-avatar .circle::before{animation:highlight-breathe-mobile 10s ease-in-out infinite;}
  .hero-avatar .circle::after{filter:blur(14px);opacity:.55;animation:aura-breathe-mobile 9s ease-in-out infinite;}
}

/* Additional reduced motion: disable primary disc + halo (children already handled above) */
@media (prefers-reduced-motion:reduce){
  .hero-avatar::before,
  .hero-avatar .circle{animation:none;}
}

/* Mobile keyframes (smaller scale + lower opacity peaks) */
@keyframes disc-breathe-mobile{0%,100%{transform:scale(1);}50%{transform:scale(1.02);} }
@keyframes highlight-breathe-mobile{0%,100%{opacity:.5;transform:scale(1);}50%{opacity:.8;transform:scale(1.03);} }
@keyframes aura-breathe-mobile{0%,100%{transform:scale(1);opacity:.32;}50%{transform:scale(1.1);opacity:.65;} }
@keyframes back-halo-mobile{0%,100%{transform:scale(1);opacity:.25;}50%{transform:scale(1.15);opacity:.48;}}

/* Utility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;}
.gradient{background:linear-gradient(160deg,#ffb400 0%,#ff8a00 33%,#0d0f15 70%);}