/* ── TOKENS ── */
:root {
  --bg-deep:     #020510;
  --bg-mid:      #050d1f;
  --bg-card:     rgba(8,20,50,0.75);
  --cyan:        #00d4ff;
  --cyan-dim:    rgba(0,212,255,0.12);
  --cyan-glow:   rgba(0,212,255,0.4);
  --blue:        #0a84ff;
  --purple:      #7b2fff;
  --green:       #00e5a0;
  --orange:      #ff8c42;
  --yellow:      #ffd166;
  --text:        #e8f4ff;
  --text-dim:    #7aa8cc;
  --text-muted:  #3a5878;
  --border:      rgba(0,212,255,0.18);
  --border-hi:   rgba(0,212,255,0.38);
  --font-display:'Orbitron', monospace;
  --font-body:   'Exo 2', sans-serif;
  --radius:      14px;
  --radius-lg:   22px;
  --t:           0.3s cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{background:var(--bg-deep);color:var(--text);font-family:var(--font-body);overflow-x:hidden;min-height:100vh}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}

#stars{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}
.star{position:absolute;background:#fff;border-radius:50%;animation:twinkle var(--d,3s) ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:0.08;transform:scale(1)}to{opacity:0.9;transform:scale(1.4)}}

.grid-bg{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(0,212,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,0.025) 1px,transparent 1px);
  background-size:72px 72px}

nav{position:fixed;top:0;width:100%;z-index:200;padding:0 40px;height:68px;display:flex;align-items:center;justify-content:space-between;background:rgba(2,5,16,0.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);transition:box-shadow var(--t)}
.nav-logo{font-family:var(--font-display);font-size:0.85rem;color:var(--cyan);letter-spacing:3px;font-weight:700}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{color:var(--text-dim);font-size:0.72rem;letter-spacing:2px;text-transform:uppercase;transition:color var(--t)}
.nav-links a:hover,.nav-links a.active{color:var(--cyan)}
.nav-cta{background:var(--cyan)!important;color:#000!important;padding:8px 20px!important;border-radius:30px;font-weight:700!important;letter-spacing:1px!important}
.nav-cta:hover{box-shadow:0 0 20px var(--cyan-glow)!important;transform:translateY(-2px)}
.hamburger{display:none;flex-direction:column;gap:5px;padding:6px;background:none;border:none;cursor:pointer}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:var(--t)}
.nav-mobile{display:none;flex-direction:column;padding:12px 24px 20px;border-top:1px solid var(--border);background:rgba(2,5,16,0.98)}
.nav-mobile.open{display:flex}
.mobile-link{font-size:0.8rem;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);padding:12px 0;border-bottom:1px solid var(--border);transition:color var(--t)}
.mobile-link:hover{color:var(--cyan)}

.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:110px 20px 80px;z-index:1;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 50% 40%,rgba(0,100,200,0.2) 0%,transparent 70%),radial-gradient(ellipse 40% 30% at 20% 80%,rgba(123,47,255,0.15) 0%,transparent 60%);z-index:0}
.hero-orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:0.28;pointer-events:none}
.hero-orb-1{width:500px;height:500px;background:radial-gradient(circle,rgba(0,212,255,0.4),transparent 70%);top:-150px;right:-150px;animation:float 9s ease-in-out infinite}
.hero-orb-2{width:350px;height:350px;background:radial-gradient(circle,rgba(123,47,255,0.35),transparent 70%);bottom:-80px;left:-80px;animation:float 11s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-28px)}}
.hero-content{position:relative;z-index:1;max-width:740px;animation:fadeUp 1s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}

.profile-ring{width:175px;height:175px;margin:0 auto 32px;position:relative}
.profile-ring::before{content:'';position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(var(--cyan),var(--blue),var(--purple),var(--cyan));animation:spin 6s linear infinite}
.profile-ring::after{content:'';position:absolute;inset:-13px;border-radius:50%;border:1px solid rgba(0,212,255,0.14);animation:spin 14s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.profile-pic{width:167px;height:167px;border-radius:50%;object-fit:cover;object-position:center 10%;position:relative;z-index:1;border:3px solid var(--bg-deep)}

.hero-avail{display:inline-flex;align-items:center;gap:8px;font-size:0.65rem;letter-spacing:3px;color:var(--green);border:1px solid rgba(0,229,160,0.25);padding:5px 16px 5px 10px;border-radius:20px;margin-bottom:14px;background:rgba(0,229,160,0.06);text-transform:uppercase}
.bdot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulsedot 2s ease-in-out infinite}
@keyframes pulsedot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:0.5}}
.hero-tag{display:inline-block;font-size:0.65rem;letter-spacing:4px;color:var(--cyan);text-transform:uppercase;border:1px solid var(--border);padding:6px 18px;border-radius:20px;margin-bottom:18px;background:var(--cyan-dim)}
h1.hero-title{font-family:var(--font-display);font-size:clamp(1.8rem,5vw,3.1rem);font-weight:900;line-height:1.1;margin-bottom:14px;background:linear-gradient(135deg,#fff 0%,var(--cyan) 60%,var(--blue) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:1rem;color:var(--text-dim);max-width:520px;margin:0 auto 10px;line-height:1.75}
.hero-desc{font-size:0.86rem;color:var(--text-dim);max-width:560px;margin:0 auto 28px;line-height:1.9;opacity:0.85}
.hero-desc strong{color:var(--green)}
.hero-stats{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.stat{display:flex;flex-direction:column;align-items:center}
.stat-num{font-family:var(--font-display);font-size:1.6rem;font-weight:900;color:var(--cyan);line-height:1}
.stat-label{font-size:0.6rem;color:var(--text-muted);margin-top:4px;letter-spacing:2px;text-transform:uppercase}
.stat-div{width:1px;height:38px;background:var(--border)}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-p{padding:13px 28px;background:linear-gradient(135deg,var(--cyan),var(--blue));color:#000;border-radius:30px;font-weight:700;font-size:1rem;letter-spacing:1px;cursor:pointer;text-decoration:none;transition:transform 0.2s,box-shadow 0.2s;box-shadow:0 0 20px var(--cyan-glow);display:inline-flex;align-items:center;gap:8px}
.btn-p:hover{transform:translateY(-3px);box-shadow:0 0 40px var(--cyan-glow)}
.btn-g{padding:13px 28px;background:transparent;color:var(--cyan);border:1px solid var(--border);border-radius:30px;font-weight:500;font-size:1rem;letter-spacing:1px;cursor:pointer;text-decoration:none;transition:all 0.2s;display:inline-flex;align-items:center;gap:8px}
.btn-g:hover{background:var(--cyan-dim);border-color:var(--cyan);transform:translateY(-3px)}
.scroll-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-muted);font-size:0.6rem;letter-spacing:3px;text-transform:uppercase;animation:bounce 2.5s ease-in-out infinite}
.scroll-line{width:1px;height:44px;background:linear-gradient(to bottom,var(--cyan),transparent)}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}

section{position:relative;z-index:1;padding:80px 20px}
.s-center{max-width:740px;margin:0 auto}
.s-full{max-width:1120px;margin:0 auto}
.s-head{text-align:center;margin-bottom:56px}
.s-tag{font-size:0.6rem;letter-spacing:4px;color:var(--cyan);text-transform:uppercase;display:block;margin-bottom:12px}
.s-title{font-family:var(--font-display);font-size:clamp(1.2rem,3.5vw,1.85rem);font-weight:700;color:var(--text);margin-bottom:14px}
.s-line{width:60px;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);margin:0 auto}

.about-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px;backdrop-filter:blur(12px);line-height:1.9;color:var(--text-dim);font-size:0.9rem}
.about-card strong{color:var(--text)}

.case-wrap{background:linear-gradient(135deg,rgba(0,212,255,0.05),rgba(0,229,160,0.03));border:1px solid rgba(0,212,255,0.22);border-radius:var(--radius-lg);padding:40px;position:relative;overflow:hidden;max-width:960px;margin:0 auto}
.case-wrap::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--cyan),var(--green))}
.case-story{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:32px}
.sstep{background:rgba(5,15,40,0.85);border:1px solid var(--border);border-radius:var(--radius);padding:22px;transition:border-color var(--t),transform var(--t)}
.sstep:hover{border-color:var(--border-hi);transform:translateY(-4px)}
.sstep.hi{background:linear-gradient(135deg,rgba(0,212,255,0.07),rgba(0,229,160,0.04));border-color:rgba(0,229,160,0.3)}
.sstep-icon{width:38px;height:38px;border-radius:10px;background:var(--cyan-dim);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--cyan);font-size:0.9rem;margin-bottom:12px}
.sstep.hi .sstep-icon{background:var(--green);color:#000;border:none}
.sstep h4{font-family:var(--font-display);font-size:0.58rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-muted);margin-bottom:8px}
.sstep p{font-size:0.9rem;color:var(--text-dim);line-height:1.65}
.impact-num{font-family:var(--font-display);font-size:1.5rem!important;font-weight:900!important;color:var(--green)!important;margin-bottom:6px!important}
.case-meta{display:flex;gap:24px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--border)}
.cmeta{display:flex;align-items:center;gap:8px;font-size:0.8rem;color:var(--text-dim)}
.cmeta i{color:var(--cyan)}
.cmeta strong{color:var(--text)}

.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(265px,1fr));gap:18px}
.pcat{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;backdrop-filter:blur(12px);transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.pcat:hover{border-color:var(--border-hi);box-shadow:0 0 28px rgba(0,212,255,0.08);transform:translateY(-4px)}
.cat-header{display:flex;align-items:center;gap:12px;padding:20px 22px;cursor:pointer;user-select:none}
.cat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;border:1px solid var(--border);background:var(--cyan-dim)}
.cat-label{font-family:var(--font-display);font-size:0.85rem;font-weight:700;color:var(--text);letter-spacing:2px;flex:1}
.cat-arr{font-size:0.65rem;color:var(--cyan);transition:transform 0.3s}
.cat-header.open .cat-arr{transform:rotate(180deg)}
.cat-submenu{display:flex;flex-direction:column;gap:8px;padding:0 14px 16px}
.cat-submenu.hidden{display:none}
.sub-btn{width:100%;padding:11px 14px;background:rgba(0,212,255,0.04);border:1px solid rgba(0,212,255,0.1);border-radius:10px;color:var(--text-dim);font-size:0.9rem;cursor:pointer;text-align:left;transition:all 0.2s;position:relative;overflow:hidden;display:flex;align-items:center;gap:8px}
.sub-btn::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cyan);transform:scaleY(0);transition:transform 0.2s;border-radius:0 2px 2px 0}
.sub-btn:hover{background:rgba(0,212,255,0.09);border-color:rgba(0,212,255,0.3);color:var(--text);transform:translateX(4px)}
.sub-btn:hover::before{transform:scaleY(1)}
.sub-btn i{font-size:0.8rem;color:var(--cyan);flex-shrink:0}
.pcat.sql .cat-icon{background:rgba(79,142,247,0.12);border-color:rgba(79,142,247,0.25)}
.pcat.excel .cat-icon{background:rgba(0,229,160,0.1);border-color:rgba(0,229,160,0.25)}
.pcat.pbi .cat-icon{background:rgba(255,140,66,0.1);border-color:rgba(255,140,66,0.25)}
.pcat.python .cat-icon{background:rgba(155,109,255,0.1);border-color:rgba(155,109,255,0.25)}
.pcat.ia .cat-icon{background:rgba(255,94,125,0.1);border-color:rgba(255,94,125,0.25)}
.pcat.slides .cat-icon{background:rgba(255,209,102,0.1);border-color:rgba(255,209,102,0.25)}

.skill-list{display:flex;flex-direction:column;gap:22px}
.skill-meta{display:flex;justify-content:space-between;margin-bottom:8px}
.skill-name{font-size:0.84rem;font-weight:500;color:var(--text);letter-spacing:1px}
.skill-pct{font-family:var(--font-display);font-size:0.72rem;color:var(--cyan)}
.skill-track{height:7px;background:rgba(255,255,255,0.05);border-radius:10px;overflow:hidden}
.skill-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,var(--blue),var(--cyan));box-shadow:0 0 10px var(--cyan-glow);width:0;transition:width 1.3s cubic-bezier(0.4,0,0.2,1)}

footer{position:relative;z-index:1;padding:64px 20px;text-align:center;border-top:1px solid var(--border);background:linear-gradient(to top,rgba(0,20,50,0.4),transparent)}
.footer-title{font-family:var(--font-display);font-size:1.1rem;color:var(--text);margin-bottom:8px;letter-spacing:3px}
.footer-sub{font-size:0.8rem;color:var(--text-dim);margin-bottom:44px}
.contact-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:40px}
.chip{display:flex;align-items:center;gap:9px;padding:12px 22px;background:var(--bg-card);border:1px solid var(--border);border-radius:30px;color:var(--text-dim);font-size:0.82rem;text-decoration:none;transition:all 0.2s;backdrop-filter:blur(8px)}
.chip:hover{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-dim);transform:translateY(-3px);box-shadow:0 0 16px rgba(0,212,255,0.15)}
.chip.wa:hover{border-color:#25d366;color:#25d366;background:rgba(37,211,102,0.08)}
.chip.li:hover{border-color:#0a66c2;color:#0a66c2;background:rgba(10,102,194,0.08)}
.chip.cv:hover{border-color:var(--orange);color:var(--orange);background:rgba(255,140,66,0.08)}
.footer-copy{font-size:0.72rem;color:rgba(120,160,200,0.45);letter-spacing:1px}
.footer-copy span{color:var(--cyan)}

.reveal{opacity:0;transform:translateY(28px);transition:opacity 0.7s ease,transform 0.7s ease}
.reveal.visible{opacity:1;transform:none}

@media(max-width:900px){.case-story{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
  nav{padding:0 20px}
  .nav-links{display:none}
  .hamburger{display:flex}
  .hero{padding:100px 16px 70px}
  h1.hero-title{font-size:1.8rem}
  .hero-stats{gap:16px}
  .stat-num{font-size:1.3rem}
  .case-story{grid-template-columns:1fr}
  .case-wrap{padding:24px 18px}
  .cta-row{flex-direction:column;align-items:center}
  .btn-p,.btn-g{width:100%;max-width:280px;justify-content:center}
  .contact-grid{flex-direction:column;align-items:center}
  .chip{width:100%;max-width:280px;justify-content:center}
}