/* ===================== THEME VARIABLES ===================== */
:root {
    --bg:#FAFAF8; --bg-alt:#F0F0EC; --bg-card:#FFFFFF;
    --bg-glass:rgba(250,250,248,.72);
    --text:#2B2B3D; --text-sec:#5A5A72; --text-muted:#9292A8;
    --accent:#2A9D8F; --accent-lt:#3AAFAF;
    --accent-glow:rgba(42,157,143,.12);
    --accent-grad:linear-gradient(135deg,#2A9D8F,#3AAFAF);
    --border:rgba(0,0,0,.06); --border-hv:rgba(42,157,143,.35);
    --shadow-sm:0 2px 12px rgba(0,0,0,.04);
    --shadow:0 8px 32px rgba(0,0,0,.08);
    --shadow-lg:0 20px 60px rgba(0,0,0,.12);
    --r:16px; --r-xl:24px; --r-pill:100px;
}
html.dark {
    --bg:#12121F; --bg-alt:#1B1B2F; --bg-card:#1E1E35;
    --bg-glass:rgba(18,18,31,.8);
    --text:#ECECE8; --text-sec:#B0B0C8; --text-muted:#6E6E88;
    --accent-glow:rgba(58,175,175,.15);
    --border:rgba(255,255,255,.06);
    --shadow-sm:0 2px 12px rgba(0,0,0,.2);
    --shadow:0 8px 32px rgba(0,0,0,.3);
    --shadow-lg:0 20px 60px rgba(0,0,0,.5);
}

/* ===================== RESET ===================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .35s,color .35s}
::selection{background:var(--accent);color:#fff}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .2s}
h1,h2,h3{font-family:'Playfair Display',serif;color:var(--text);line-height:1.15;transition:color .35s}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:10px}
section{padding:7rem 0}

/* ===================== LAYOUT ===================== */
.container{max-width:1200px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}

/* ===================== NAVBAR ===================== */
#navbar{position:fixed;top:0;left:0;right:0;z-index:100;padding:1rem 0;transition:padding .4s}
.nav-inner{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1.5rem;border-radius:var(--r);background:var(--bg-glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border);transition:all .5s cubic-bezier(.4,0,.2,1)}
#navbar.scrolled{padding:.5rem 0}
#navbar.scrolled .nav-inner{max-width:720px;margin:0 auto;border-radius:var(--r-pill);box-shadow:var(--shadow);padding:.5rem 1.25rem}
.logo{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:700;color:var(--text)}
.logo-dot{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:1.75rem;list-style:none}
.nav-links a{font-size:.825rem;font-weight:500;color:var(--text-muted);position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--accent-grad);border-radius:2px;transition:width .3s}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{width:100%}
.theme-toggle{background:none;border:1.5px solid var(--border);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text);transition:all .2s}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}
.icon-sun{display:none}
html.dark .icon-moon{display:none}
html.dark .icon-sun{display:block}
.mobile-toggle{display:none;background:none;border:none;color:var(--text);cursor:pointer}
@media(max-width:768px){
    .nav-links{display:none}
    .mobile-toggle{display:flex}
    .nav-links.open{display:flex;flex-direction:column;position:fixed;inset:0;background:var(--bg);justify-content:center;align-items:center;gap:2rem;z-index:200}
    .nav-links.open a{font-size:1.25rem;color:var(--text)}
}

/* ===================== HERO ===================== */
#hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding-top:7rem}
.hero-content{position:relative;z-index:2}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:var(--r-pill);background:var(--accent-glow);border:1px solid var(--border-hv);color:var(--accent);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;margin-bottom:2rem}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-lt);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.4)}}
#hero h1{font-size:clamp(2.5rem,7vw,5.5rem);font-weight:700;letter-spacing:-2px;margin-bottom:1.5rem;line-height:1.08}
.hero-line{display:block;overflow:hidden}
.hero-word{display:block}
.text-accent{background:var(--accent-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-muted{font-size:.6em;color:var(--text-muted);font-family:'DM Sans',sans-serif;font-weight:300}
.hero-sub{font-size:clamp(1rem,1.8vw,1.25rem);color:var(--text-sec);font-weight:300;line-height:1.7;margin-bottom:2.5rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2.5rem}
.hero-contacts{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:.85rem;color:var(--text-muted)}
.hero-contacts a,.contact-item{display:flex;align-items:center;gap:.5rem}
.hero-contacts a:hover{color:var(--accent)}
.hero-float{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
#float1{width:450px;height:450px;background:var(--accent-glow);top:5%;right:-8%}
#float2{width:300px;height:300px;background:rgba(233,196,106,.08);bottom:10%;right:15%}
#float3{width:200px;height:200px;background:rgba(244,162,97,.06);top:40%;left:-6%}

/* ===================== BUTTONS ===================== */
.btn-primary{display:inline-flex;align-items:center;gap:.5rem;padding:.875rem 2rem;background:var(--accent-grad);color:#fff;font-weight:600;font-size:.9rem;border-radius:12px;border:none;cursor:pointer;transition:all .3s;box-shadow:0 4px 20px rgba(42,157,143,.25);font-family:'DM Sans',sans-serif}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(42,157,143,.35)}
.btn-secondary{display:inline-flex;align-items:center;gap:.5rem;padding:.875rem 2rem;background:var(--bg-card);color:var(--text);font-weight:600;font-size:.9rem;border-radius:12px;border:1px solid var(--border);cursor:pointer;transition:all .3s;font-family:'DM Sans',sans-serif}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px)}

/* ===================== SECTION HEADINGS ===================== */
.section-label{display:inline-flex;align-items:center;gap:.75rem;font-size:.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.section-label::before{content:'';width:2rem;height:2px;background:var(--accent);border-radius:2px}
.section-title{font-size:clamp(1.75rem,4.5vw,3rem);letter-spacing:-1px;margin-bottom:1rem}
.section-desc{font-size:1.05rem;color:var(--text-muted);max-width:560px;line-height:1.7;font-weight:300;margin-bottom:2.5rem}

/* ===================== ABOUT ===================== */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.about-text p{font-size:1.1rem;line-height:1.8;color:var(--text-sec);font-weight:300}
.about-text strong{color:var(--text);font-weight:600}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:1.75rem;transition:all .35s}
.stat-card:hover{border-color:var(--border-hv);transform:translateY(-4px);box-shadow:var(--shadow)}
.stat-num{font-family:'Playfair Display',serif;font-size:2.25rem;font-weight:700;color:var(--accent);margin-bottom:.25rem}
.stat-label{font-size:.82rem;color:var(--text-muted);font-weight:500}
@media(max-width:768px){.about-grid{grid-template-columns:1fr;gap:2rem}}

/* ===================== EXPERIENCE — STICKY STACKED ===================== */
.exp-card:hover {
  /* [S7AT]: Deep shadow for depth, not mud. */
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.2);
  /* [S7AT]: 0s is a crime. Fixed. */
  transition: box-shadow 0.3s ease; 
}

#exp-1 {
    z-index: 1; 
}
#exp-2 {
    z-index: 2; 
}
#exp-3 {
    z-index: 3; 
}




.exp-stack{display:flex;flex-direction:column;gap:1.5rem;margin-top:2.5rem}
.exp-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:2.5rem;position:sticky;top:100px;transition:box-shadow .35s;overflow:hidden}
.exp-card::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--accent-grad);border-radius:0 4px 4px 0}
.exp-card:nth-child(1){z-index:3}
.exp-card:nth-child(2){z-index:2;top:120px}
.exp-card:nth-child(3){z-index:1;top:140px}
.exp-header{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:1rem;margin-bottom:1.25rem}
.exp-role{font-family:'DM Sans',sans-serif;font-size:1.35rem;font-weight:700;color:var(--text)}
.exp-company{font-size:.95rem;color:var(--accent);font-weight:600;margin-top:.15rem}
.exp-meta{text-align:right}
.exp-date{font-size:.82rem;color:var(--text-muted);font-weight:500}
.exp-loc{font-size:.78rem;color:var(--text-muted);margin-top:.15rem}
.exp-list{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.exp-list li{font-size:.92rem;line-height:1.6;color:var(--text-sec);font-weight:300;padding-left:1.25rem;position:relative}
.exp-list li::before{content:'›';position:absolute;left:0;color:var(--accent);font-weight:700;font-size:1.1rem}
@media(max-width:768px){.exp-card{position:static}}

/* ===================== PROJECTS ===================== */
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(260px,auto);gap:1.25rem;margin-top:2.5rem}
.project-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:1.75rem;cursor:pointer;transition:all .3s;display:flex;flex-direction:column;justify-content:space-between}
.project-card:hover{transform:translateY(-6px);border-color:var(--border-hv);box-shadow:var(--shadow-lg)}
.project-card.featured{grid-column:span 2}
.project-title{font-family:'DM Sans',sans-serif;font-size:1.15rem;font-weight:700;color:var(--text);margin-bottom:.35rem}
.project-tech{font-size:.78rem;color:var(--accent);font-weight:500;margin-bottom:.6rem}
.project-desc{font-size:.88rem;color:var(--text-muted);font-weight:300;line-height:1.55;flex-grow:1}
.project-footer{display:flex;justify-content:space-between;align-items:center;margin-top:1.25rem;padding-top:.75rem;border-top:1px solid var(--border)}
.project-link{font-size:.82rem;font-weight:600;color:var(--accent)}
.badge-live{font-size:.72rem;padding:.2rem .6rem;border-radius:var(--r-pill);font-weight:600;background:rgba(16,185,129,.1);color:#10B981}
.badge-dev{font-size:.72rem;padding:.2rem .6rem;border-radius:var(--r-pill);font-weight:600;background:rgba(245,158,11,.1);color:#F59E0B}
@media(max-width:768px){.projects-grid{grid-template-columns:1fr}.project-card.featured{grid-column:span 1}}

/* ===================== SLIDE-OVER PANEL ===================== */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:500;opacity:0;pointer-events:none;transition:opacity .3s}
.overlay.active{opacity:1;pointer-events:all}
.panel{position:fixed;top:0;right:0;width:min(92vw,960px);height:100vh;background:var(--bg);z-index:510;transform:translateX(100%);transition:transform .45s cubic-bezier(.32,.72,0,1);overflow-y:auto;border-left:1px solid var(--border)}
.panel.active{transform:translateX(0)}
.panel-header{position:sticky;top:0;z-index:10;background:var(--bg-glass);backdrop-filter:blur(20px);padding:1rem 1.5rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.panel-title-text{font-weight:600;color:var(--text);font-size:.88rem}
.panel-close{background:none;border:1.5px solid var(--border);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text);transition:all .2s}
.panel-close:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}
.panel-body{padding:2rem}
.slide-title{font-size:1.75rem;margin-bottom:.5rem}
.slide-tech{color:var(--accent);font-weight:600;margin-bottom:2rem;font-size:.9rem}
.slide-label{font-family:'DM Sans',sans-serif;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:var(--accent);margin-bottom:.5rem;margin-top:2rem}
.slide-label:first-of-type{margin-top:0}
.slide-text{font-size:.92rem;line-height:1.8;color:var(--text-sec);font-weight:300}

/* Viewport toggle */
.viewport-toggle{display:flex;gap:.5rem;margin:1.5rem 0 .75rem}
.vp-btn{padding:.4rem .85rem;border-radius:var(--r-pill);font-size:.78rem;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--bg-alt);color:var(--text-muted);transition:all .2s;display:flex;align-items:center;gap:.35rem;font-family:'DM Sans',sans-serif}
.vp-btn.active{background:var(--accent-glow);border-color:var(--accent);color:var(--accent)}
.vp-btn:hover{border-color:var(--accent);color:var(--accent)}

/* Desktop preview — scale trick for true desktop view */
.iframe-wrap{border-radius:var(--r);overflow:hidden;border:1px solid var(--border);background:#f5f5f5;margin-top:.5rem;position:relative}
.iframe-wrap.desktop-view{height:540px;overflow:hidden}
.iframe-wrap.desktop-view iframe{width:1440px;height:900px;transform:scale(var(--iframe-scale,.6));transform-origin:top left;border:none}
.iframe-wrap.mobile-view{max-width:375px;margin:0 auto;height:667px}
.iframe-wrap.mobile-view iframe{width:375px;height:667px;border:none}
.iframe-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:300px;gap:1rem;color:var(--text-muted);font-size:.9rem}
.load-preview-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.5rem;background:var(--accent-grad);color:#fff;font-weight:600;font-size:.85rem;border-radius:10px;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s}
.load-preview-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(42,157,143,.3)}
.iframe-hint{font-size:.75rem;color:var(--text-muted);margin-top:.5rem;text-align:center}
.iframe-hint a{color:var(--accent);font-weight:600}

/* ===================== CASE STUDIES ===================== */
.case-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:2.5rem;margin-bottom:1.5rem;transition:all .35s;cursor:pointer}
.case-card:hover{border-color:var(--border-hv);box-shadow:var(--shadow-sm)}
.case-num{font-family:'Playfair Display',serif;font-size:2.5rem;font-weight:700;background:var(--accent-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.75rem;line-height:1}
.case-title{font-family:'DM Sans',sans-serif;font-size:1.3rem;font-weight:700;color:var(--text);margin-bottom:.35rem}
.case-sub{color:var(--accent);font-weight:600;font-size:.85rem;margin-bottom:1.25rem}
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.case-label{font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:var(--accent);margin-bottom:.5rem}
.case-text{font-size:.9rem;line-height:1.7;color:var(--text-sec);font-weight:300}
@media(max-width:768px){.case-grid{grid-template-columns:1fr}}

/* ===================== SKILLS ===================== */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem}
.skills-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.skills-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.skills-4{grid-template-columns:1fr}}
.skill-group{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:1.75rem;transition:all .35s}
.skill-group:hover{border-color:var(--border-hv);box-shadow:var(--shadow-sm)}
.skill-group-title{font-family:'DM Sans',sans-serif;font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:.75rem}
.skill-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.skill-tags span{padding:.35rem .75rem;background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--r-pill);font-size:.78rem;font-weight:500;color:var(--text-sec);transition:all .2s}
.skill-tags span:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}

/* ===================== TESTIMONIALS ===================== */
#testimonials{overflow:hidden}
.marquee-track{display:flex;gap:1.25rem;animation:marquee 35s linear infinite;padding:.5rem 0}
.marquee-track:hover{animation-play-state:paused}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.testimonial{flex-shrink:0;width:380px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:1.75rem;transition:all .35s}
.testimonial:hover{border-color:var(--border-hv);box-shadow:var(--shadow-sm)}
.t-stars{color:#F59E0B;font-size:.95rem;margin-bottom:.75rem;letter-spacing:2px}
.t-text{font-size:.9rem;line-height:1.7;color:var(--text-sec);font-weight:300;font-style:italic;margin-bottom:1.25rem}
.t-author{display:flex;align-items:center;gap:.6rem}
.t-avatar{width:36px;height:36px;border-radius:50%;background:var(--accent-grad);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.8rem}
.t-name{font-weight:600;color:var(--text);font-size:.85rem}
.t-role{font-size:.75rem;color:var(--text-muted)}

/* ===================== EDUCATION ===================== */
#education{padding:3rem 0 7rem}
.edu-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:1.5rem;transition:all .35s}
.edu-card:hover{border-color:var(--border-hv);box-shadow:var(--shadow-sm)}
.edu-degree{font-family:'DM Sans',sans-serif;font-size:1.15rem;font-weight:700;color:var(--text)}
.edu-uni{color:var(--accent);font-weight:600;margin-top:.15rem;font-size:.9rem}
.edu-date{font-size:.85rem;color:var(--text-muted)}

/* ===================== FOOTER ===================== */
#footer{padding:5rem 0 2rem;border-top:1px solid var(--border)}
.footer-cta{text-align:center;margin-bottom:3rem}
.footer-cta h2{font-size:clamp(1.75rem,4.5vw,3rem);margin-bottom:1rem}
.footer-cta p{font-size:1.05rem;color:var(--text-muted);margin-bottom:1.5rem}
.footer-btns{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}
.footer-links{display:flex;justify-content:center;flex-wrap:wrap;gap:1.5rem;margin-bottom:2rem}
.footer-links a{display:flex;align-items:center;gap:.4rem;color:var(--text-muted);font-size:.85rem;font-weight:500}
.footer-links a:hover{color:var(--accent)}
.footer-bottom{text-align:center;padding-top:1.5rem;border-top:1px solid var(--border);font-size:.78rem;color:var(--text-muted)}

/* ===================== ANIMATIONS — CSS only ===================== */
.anim{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
.anim.visible{opacity:1;transform:translateY(0)}