/* ============================================================
   BAGAS ADITYA — Portfolio v2
   style.css
   ============================================================ */

/* ── GOOGLE FONTS ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Space+Mono:wght@400;700&family=Poppins:wght@300;400;500;600&display=swap');

/* ── VARIABLES ─────────────────────────────────────────────── */
:root {
  --bg:        #0a0e27;
  --bg2:       #151a35;
  --card:      rgba(21, 26, 53, 0.85);
  --cyan:      #00f5ff;
  --magenta:   #ff00e5;
  --yellow:    #ffd700;
  --green:     #00ff88;
  --orange:    #ff6b35;
  --purple:    #a855f7;
  --text:      #e8eaf0;
  --muted:     #a8b2d1;
  --border:    rgba(0, 245, 255, 0.12);
  --grad1:     linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --grad2:     linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --grad3:     linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --grad4:     linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

/* ── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: 'Poppins', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.6;
  cursor: none;
}

/* ── CUSTOM CURSOR ─────────────────────────────────────────── */
#cursor-dot {
  width: 8px; height: 8px;
  background: var(--cyan);
  border-radius: 50%;
  position: fixed; z-index: 99999;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: transform 0.1s, background 0.2s;
  box-shadow: 0 0 10px var(--cyan);
}
#cursor-ring {
  width: 36px; height: 36px;
  border: 2px solid var(--magenta);
  border-radius: 50%;
  position: fixed; z-index: 99998;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, border-color 0.2s;
  opacity: 0.7;
}
@media (pointer: coarse) {
  #cursor-dot, #cursor-ring { display: none; }
  body { cursor: auto; }
}

/* ── BACKGROUND FX ─────────────────────────────────────────── */
#starfield {
  position: fixed; inset: 0;
  z-index: 0; pointer-events: none;
}
.grid-overlay {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,245,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.scanline {
  position: fixed; inset: 0; z-index: 5000; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,245,255,.012) 2px, rgba(0,245,255,.012) 4px
  );
}
.bg-shapes {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.bg-shape {
  position: absolute; opacity: 0.05; border-radius: 50%;
  animation: floatShape 20s infinite ease-in-out;
}
.bg-shape-1 { width: 300px; height: 300px; background: var(--grad3); top: 10%; left: 8%; animation-delay: 0s; }
.bg-shape-2 { width: 200px; height: 200px; background: var(--grad2); top: 60%; right: 8%; animation-delay: 5s; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
.bg-shape-3 { width: 250px; height: 250px; background: var(--grad4); bottom: 20%; left: 45%; animation-delay: 10s; }
@keyframes floatShape {
  0%,100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-28px) rotate(5deg); }
  50%      { transform: translateY(-55px) rotate(-5deg); }
  75%      { transform: translateY(-28px) rotate(3deg); }
}

/* particle */
.particle {
  position: fixed; border-radius: 50%; pointer-events: none; z-index: 1;
  animation: particleDrift linear infinite; opacity: 0;
}
@keyframes particleDrift {
  0%   { transform: translateY(100vh) scale(0); opacity: 0; }
  10%  { opacity: 0.5; }
  90%  { opacity: 0.25; }
  100% { transform: translateY(-20px) scale(1.2); opacity: 0; }
}

/* ── LOADER ────────────────────────────────────────────────── */
#loader {
  position: fixed; inset: 0; background: var(--bg);
  z-index: 90000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2rem;
  transition: opacity 0.6s, visibility 0.6s;
}
#loader.out { opacity: 0; visibility: hidden; }

.loader-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2rem, 6vw, 5rem);
  font-weight: 900; color: var(--cyan);
  letter-spacing: 0.5rem; position: relative;
}
.loader-title::before, .loader-title::after {
  content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.loader-title::before { left: 2px; text-shadow: -2px 0 var(--magenta); clip-path: inset(44px 0 0 0); animation: glitchA 4s infinite linear alternate-reverse; }
.loader-title::after  { left:-2px; text-shadow: -2px 0 var(--yellow);  clip-path: inset(44px 0 0 0); animation: glitchB 4s infinite linear alternate-reverse; }
@keyframes glitchA { 0%{clip-path:inset(61px 0 0 0);transform:skew(.7deg)} 25%{clip-path:inset(32px 0 0 0);transform:skew(.2deg)} 50%{clip-path:inset(45px 0 0 0);transform:skew(.5deg)} 75%{clip-path:inset(12px 0 0 0);transform:skew(.8deg)} 100%{clip-path:inset(88px 0 0 0);transform:skew(.4deg)} }
@keyframes glitchB { 0%{clip-path:inset(26px 0 0 0);transform:skew(.5deg)} 25%{clip-path:inset(4px 0 0 0);transform:skew(.4deg)} 50%{clip-path:inset(70px 0 0 0);transform:skew(.6deg)} 75%{clip-path:inset(54px 0 0 0);transform:skew(.7deg)} 100%{clip-path:inset(91px 0 0 0);transform:skew(.3deg)} }

.loader-bar-wrap { width: min(420px,80vw); height: 5px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; }
.loader-bar {
  height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--yellow), var(--green));
  background-size: 300% 100%;
  animation: barFill 2s ease forwards, barShimmer 1.5s infinite;
  box-shadow: 0 0 18px rgba(0,245,255,.6);
}
@keyframes barFill { to { width: 100%; } }
@keyframes barShimmer { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.loader-pct { font-family: 'Space Mono', monospace; font-size: 1rem; color: var(--magenta); font-weight: 700; }

/* ── MAIN CONTENT ──────────────────────────────────────────── */
#main-content { position: relative; z-index: 10; overflow-x: hidden; width: 100%; }

/* ── NAVBAR (desktop) ──────────────────────────────────────── */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 0 5%;
  height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  transition: all 0.4s cubic-bezier(.4,0,.2,1);
}
#navbar.scrolled {
  background: rgba(10,14,39,.92);
  backdrop-filter: blur(24px) saturate(1.4);
  border-bottom: 1px solid rgba(0,245,255,.1);
  box-shadow: 0 8px 40px rgba(0,0,0,.4), 0 1px 0 rgba(0,245,255,.06);
  height: 60px;
}
.nav-logo {
  font-family: 'Orbitron', sans-serif; font-size: 1.5rem; font-weight: 900;
  background: linear-gradient(135deg, var(--cyan), var(--magenta));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  text-decoration: none; cursor: none; letter-spacing: .05em;
  flex-shrink: 0;
}
.nav-links {
  display: flex; gap: 0; list-style: none;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 99px;
  padding: .3rem .4rem;
}
.nav-links li a {
  color: var(--muted); text-decoration: none; font-size: .8rem; font-weight: 500;
  transition: all .25s; cursor: none; position: relative;
  padding: .45rem .85rem; border-radius: 99px; display: block;
  letter-spacing: .01em; white-space: nowrap;
}
.nav-links li a:hover {
  color: var(--text);
  background: rgba(0,245,255,.07);
}
.nav-links li a.active {
  color: var(--bg);
  background: linear-gradient(135deg, var(--cyan), var(--magenta));
  box-shadow: 0 2px 14px rgba(0,245,255,.28);
}

/* ── BOTTOM NAV (mobile) — floating pill ───────────────────── */
#bottom-nav {
  display: none;
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  z-index: 2000;
  width: 80%; max-width: calc(100vw - 32px);
}
.bnav-items {
  display: flex; align-items: center; justify-content: space-around;
  gap: 4px;
  background: rgba(10, 14, 39, 0.75);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid rgba(0,245,255,.15);
  border-radius: 99px;
  padding: 6px 8px;
  box-shadow:
    0 8px 32px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 4px 16px rgba(0,245,255,.08);
}
.bnav-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0.5rem 0.85rem; border-radius: 99px;
  text-decoration: none; cursor: pointer; background: none; border: none;
  transition: all 0.25s cubic-bezier(.4,0,.2,1);
  min-width: 54px; position: relative;
  font-family: 'Poppins', sans-serif;
}
.bnav-item i {
  font-size: 1.1rem; color: var(--muted);
  transition: color 0.25s, transform 0.25s;
}
.bnav-item span {
  font-size: 0.58rem; color: var(--muted);
  transition: color 0.25s; font-weight: 500; letter-spacing: .02em;
}
.bnav-item.active {
  background: linear-gradient(135deg, rgba(0,245,255,.18), rgba(255,0,229,.12));
  box-shadow: 0 0 16px rgba(0,245,255,.15);
}
.bnav-item.active i { color: var(--cyan); transform: translateY(-2px); }
.bnav-item.active span { color: var(--cyan); }
.bnav-item:hover i { color: var(--cyan); transform: translateY(-2px); }
.bnav-item:hover span { color: var(--cyan); }

/* More drawer */
#more-drawer {
  position: fixed;
  bottom: calc(90px + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%) translateY(20px);
  width: 80%; max-width: calc(100vw - 32px);
  z-index: 1999;
  background: rgba(10, 14, 39, 0.85);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid rgba(0,245,255,.15);
  border-radius: 24px;
  padding: 1.2rem 1rem 1.4rem;
  box-shadow:
    0 -4px 40px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 4px 24px rgba(0,245,255,.08);
  opacity: 0;
  visibility: hidden;
  transition: all 0.35s cubic-bezier(.4,0,.2,1);
}
#more-drawer.open {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}
.drawer-title {
  font-family: 'Orbitron', sans-serif; font-size: .8rem;
  color: var(--muted); letter-spacing: .1em;
  margin-bottom: 1rem; text-align: center;
}
.drawer-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem;
}
.drawer-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 1rem .5rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(0,245,255,.08);
  border-radius: 16px;
  text-decoration: none; cursor: pointer;
  transition: all .25s cubic-bezier(.4,0,.2,1);
  font-family: 'Poppins', sans-serif;
}
.drawer-item:hover, .drawer-item.active {
  background: rgba(0,245,255,.1);
  border-color: rgba(0,245,255,.28);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,245,255,.12);
}
.drawer-item i { font-size: 1.3rem; color: var(--cyan); }
.drawer-item span { font-size: .72rem; color: var(--muted); font-weight: 500; }
.drawer-item.active i { color: var(--magenta); }
.drawer-item.active span { color: var(--magenta); }
#drawer-overlay {
  display: none; position: fixed; inset: 0; z-index: 1998;
  background: rgba(0,0,0,.5);
}
#drawer-overlay.show { display: block; }

/* ── DIVIDER ───────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--magenta), transparent);
  opacity: 0.2;
}

/* ── REVEAL ────────────────────────────────────────────────── */
.reveal       { opacity: 0; transform: translateY(36px);  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal-left  { opacity: 0; transform: translateX(-36px) translateY(12px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal-right { opacity: 0; transform: translateX(36px) translateY(12px);  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.visible, .reveal-left.visible, .reveal-right.visible { opacity: 1; transform: translate(0); }
[data-delay="1"] { transition-delay: .1s; }
[data-delay="2"] { transition-delay: .2s; }
[data-delay="3"] { transition-delay: .3s; }
[data-delay="4"] { transition-delay: .4s; }
[data-delay="5"] { transition-delay: .5s; }
[data-delay="6"] { transition-delay: .6s; }

/* ── SECTIONS COMMON ───────────────────────────────────────── */
section { padding: 6rem 5%; position: relative; }
.section-alt { background: var(--bg2); }
.container { max-width: 1300px; margin: 0 auto; }

.sec-header { text-align: center; margin-bottom: 4rem; }
.sec-tag {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'Space Mono', monospace; font-size: .78rem;
  color: var(--magenta); background: rgba(255,0,229,.08);
  border: 1px solid rgba(255,0,229,.25);
  padding: .35rem .9rem; border-radius: 99px;
  margin-bottom: 1rem; letter-spacing: .08em;
}
.sec-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 900;
  background: linear-gradient(135deg, var(--cyan), var(--magenta));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: .8rem;
}
.sec-sub { color: var(--muted); font-size: 1rem; }

/* ── HERO ──────────────────────────────────────────────────── */
#home {
  min-height: 80vh;
  margin-bottom: 200px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5%;
}
.hero-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center;
  max-width: 1300px; width: 100%;
}
.hero-text { opacity: 0; transform: translateY(40px); }
.hero-text.in { animation: fadeUp .9s ease forwards; }
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }

.hero-label {
  font-family: 'Space Mono', monospace; font-size: .95rem;
  color: var(--cyan); margin-bottom: .8rem;
  display: flex; align-items: center; gap: .6rem;
}
.hero-label i { animation: waveHand 1.6s infinite; }
@keyframes waveHand { 0%,100%{transform:rotate(0)} 25%{transform:rotate(20deg)} 75%{transform:rotate(-10deg)} }
.typed-cursor { color: var(--magenta); animation: blink .8s infinite; }
@keyframes blink { 50%{opacity:0} }

.hero-name {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2.5rem, 5vw, 5rem); font-weight: 900; line-height: 1.1; margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--cyan), var(--magenta), var(--yellow));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-role { font-size: clamp(.95rem, 1.6vw, 1.3rem); color: var(--muted); font-weight: 300; margin-bottom: 2rem; line-height: 1.7; }
.hero-role span { color: var(--cyan); font-weight: 500; }

.hero-badges { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.badge {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem 1rem; background: rgba(0,245,255,.06);
  border: 1px solid rgba(0,245,255,.2); border-radius: 99px;
  font-size: .78rem; color: var(--cyan); transition: all .3s; cursor: none;
}
.badge:hover { background: rgba(0,245,255,.14); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,245,255,.2); }
.badge i { font-size: .72rem; }

.hero-cta { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.btn-primary {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .9rem 2.2rem; border-radius: 99px; font-size: .95rem; font-weight: 600;
  text-decoration: none; border: none; cursor: none; transition: all .3s;
  background: linear-gradient(135deg, var(--cyan), var(--magenta));
  color: #fff; box-shadow: 0 8px 28px rgba(0,245,255,.28);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 38px rgba(0,245,255,.45); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .9rem 2.2rem; border-radius: 99px; font-size: .95rem; font-weight: 600;
  text-decoration: none; cursor: none; transition: all .3s;
  background: transparent; color: var(--text); border: 2px solid var(--cyan);
}
.btn-ghost:hover { background: var(--cyan); color: var(--bg); transform: translateY(-3px); }
.btn-cv {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .9rem 2.2rem; border-radius: 99px;
  font-size: .95rem; font-weight: 600;
  text-decoration: none; cursor: none; transition: all .3s;
  background: linear-gradient(135deg, var(--yellow), var(--orange));
  color: var(--bg); border: none;
  box-shadow: 0 8px 28px rgba(255,215,0,.25);
}
.btn-cv:hover { transform: translateY(-3px); box-shadow: 0 14px 38px rgba(255,215,0,.45); }

/* Hero Visual */
.hero-visual { display:flex; align-items:center; justify-content:center; position:relative; opacity:0; transform:translateY(20px); max-width:100%; }
.hero-visual.in { animation: fadeRight .9s .3s ease forwards; }
@keyframes fadeRight { to { opacity:1; transform:translateY(0); } }

.avatar-ring {
  position: relative;
  margin-top: 35px;
  width: clamp(220px, 28vw, 380px);
  height: clamp(220px, 28vw, 380px);
  flex-shrink: 0;
}
.avatar-ring::before {
  content: ''; position: absolute; inset: -18px; border-radius: 50%;
  background: conic-gradient(var(--cyan), var(--magenta), var(--yellow), var(--cyan));
  animation: spinRing 5s linear infinite; z-index: -1;
}
.avatar-ring::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; background: var(--bg); }
@keyframes spinRing { to { transform: rotate(360deg); } }

.avatar-inner {
  position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%;
  overflow: hidden; border: 4px solid var(--cyan);
  box-shadow: 0 0 60px rgba(0,245,255,.35);
  animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse { 0%,100%{box-shadow:0 0 60px rgba(0,245,255,.35)} 50%{box-shadow:0 0 90px rgba(0,245,255,.6)} }
.avatar-inner img { width:100%; height:100%; object-fit:cover; display:block; }

.orbit-badge {
  position: absolute; width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.4);
  animation: floatBadge 3s ease-in-out infinite; z-index: 2;
}
.orbit-badge:nth-child(2) { top:4%;right:-3%;background:linear-gradient(135deg,#e44d26,#f16524);animation-delay:0s; }
.orbit-badge:nth-child(3) { bottom:4%;right:-3%;background:linear-gradient(135deg,#2965f1,#00a0ff);animation-delay:.5s; }
.orbit-badge:nth-child(4) { top:4%;left:-3%;background:linear-gradient(135deg,#1ba0d7,#0066cc);animation-delay:1s; }
.orbit-badge:nth-child(5) { bottom:4%;left:-3%;background:linear-gradient(135deg,var(--green),#00cc66);animation-delay:1.5s; }
.orbit-badge:nth-child(6) { top:50%;right:-9%;transform:translateY(-50%);background:linear-gradient(135deg,var(--yellow),#e5ca00);color:#000;animation:floatBadgeMid 3s ease-in-out infinite;animation-delay:2s; }
.orbit-badge:nth-child(7) { top:50%;left:-9%;transform:translateY(-50%);background:linear-gradient(135deg,var(--orange),var(--purple));animation:floatBadgeMid 3s ease-in-out infinite;animation-delay:.8s; }
@keyframes floatBadge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes floatBadgeMid { 0%,100%{transform:translateY(-50%)} 50%{transform:translateY(calc(-50% - 8px))} }

/* ── ABOUT ─────────────────────────────────────────────────── */
.about-grid {
  display: grid; grid-template-columns: 1fr 1.6fr;
  gap: 4rem; align-items: center; max-width: 1200px; margin: 0 auto;
}
.about-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 24px;
  padding: 3rem; backdrop-filter: blur(10px); position: relative; overflow: hidden;
}
.about-card::before {
  content: ''; position: absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--yellow));
}
.about-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--magenta));
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: #fff; margin: 0 auto 1.5rem;
  box-shadow: 0 8px 28px rgba(0,245,255,.3);
}
.about-name { font-family:'Orbitron',sans-serif;font-size:1.2rem;font-weight:700;color:var(--cyan);text-align:center;margin-bottom:.4rem; }
.about-loc { text-align:center;color:var(--muted);font-size:.85rem;margin-bottom:1rem; }
.about-loc i { color:var(--magenta);margin-right:.4rem; }

/* Open to Work badge */
.otw-badge {
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(0,200,100,.12);border:1px solid rgba(0,200,100,.35);
  color:#00c864;border-radius:99px;padding:.35rem 1rem;
  font-size:.78rem;font-weight:600;margin:0 auto 1.5rem;
  animation:otwPulse 2.5s ease-in-out infinite;
}
.otw-dot {
  width:8px;height:8px;border-radius:50%;background:#00c864;
  animation:dotBlink 1.2s ease-in-out infinite;flex-shrink:0;
}
@keyframes otwPulse { 0%,100%{box-shadow:0 0 0 0 rgba(0,200,100,.25)} 50%{box-shadow:0 0 0 8px rgba(0,200,100,0)} }
@keyframes dotBlink { 0%,100%{opacity:1} 50%{opacity:.3} }

.about-stats { display:flex;gap:1rem;margin-bottom:1rem; }
.astat { flex:1;background:rgba(0,245,255,.05);border:1px solid var(--border);border-radius:12px;padding:.9rem;text-align:center; }
.astat-val { font-family:'Orbitron',sans-serif;font-size:1.3rem;font-weight:700;color:var(--cyan); }
.astat-lbl { font-size:.72rem;color:var(--muted);margin-top:.2rem; }

.about-bio p { color:var(--muted);line-height:1.85;margin-bottom:1.2rem;font-size:.95rem; }
.about-bio p:last-child { margin-bottom:0; }
.about-bio strong { color:var(--cyan);font-weight:600; }

/* ── EDUCATION ─────────────────────────────────────────────── */
.timeline { position:relative;max-width:860px;margin:0 auto; }
.timeline::before {
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--cyan),var(--magenta),var(--purple));
}
.tl-item { position:relative;display:flex;align-items:center;margin-bottom:3rem; }
.tl-item:nth-child(odd)  { flex-direction:row; }
.tl-item:nth-child(even) { flex-direction:row-reverse; }
.tl-card {
  width:44%;background:var(--card);border:1px solid var(--border);
  border-radius:18px;padding:2rem;position:relative;
  transition:transform .3s,box-shadow .3s;
}
.tl-card:hover { transform:translateY(-5px);box-shadow:0 14px 44px rgba(0,245,255,.18); }
.tl-item:nth-child(odd)  .tl-card { margin-right:auto; }
.tl-item:nth-child(even) .tl-card { margin-left:auto; }
.tl-dot {
  position:absolute;left:50%;transform:translateX(-50%);
  width:18px;height:18px;border-radius:50%;border:3px solid var(--bg);
  z-index:2;box-shadow:0 0 16px rgba(0,245,255,.8);
}
.tl-icon { width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:#fff;margin-bottom:1rem; }
.tl-card h3 { color:var(--text);font-size:1.05rem;font-weight:600;margin-bottom:.4rem; }
.tl-year { font-family:'Space Mono',monospace;font-size:.8rem;color:var(--magenta);margin-bottom:.5rem; }
.tl-card p { color:var(--muted);font-size:.88rem; }

/* ── SKILLS ────────────────────────────────────────────────── */
.skills-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:1.5rem;margin-bottom:3rem;
}
.skill-card {
  background:var(--card);border:1px solid var(--border);border-radius:18px;
  padding:1.8rem 1rem;text-align:center;
  transition:all .3s;position:relative;overflow:hidden;cursor:none;
}
.skill-card::before {
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  transition:left .5s;
}
.skill-card:hover::before { left:100%; }
.skill-card:hover { transform:translateY(-8px) scale(1.04);box-shadow:0 18px 48px rgba(0,245,255,.25);border-color:rgba(0,245,255,.35); }
.skill-card i { font-size:2.6rem;margin-bottom:.8rem;display:block;transition:transform .6s; }
.skill-card:hover i { transform:rotateY(360deg); }
.skill-logo-img { width:2.6rem;height:2.6rem;object-fit:contain;margin-bottom:.8rem;display:block;margin-left:auto;margin-right:auto;transition:transform .6s;filter:drop-shadow(0 0 6px rgba(0,120,215,.5)); }
.skill-card:hover .skill-logo-img { transform:rotateY(360deg); }
.skill-card span { font-size:.85rem;font-weight:600;color:var(--text);margin-bottom:.6rem;display:block; }

/* ── SKILL BAR ─────────────────────────────────────────────── */
.skill-bar { width:100%;height:4px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden;margin-top:.4rem; }
.skill-bar-fill { height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--cyan),var(--magenta));transition:width 1.2s cubic-bezier(.22,1,.36,1);box-shadow:0 0 8px rgba(0,245,255,.4); }

/* ── SERVICES ──────────────────────────────────────────────── */
.services-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem;max-width:1100px;margin:0 auto; }
.svc-card {
  background:var(--card);border:1px solid var(--border);border-radius:20px;
  padding:2.2rem;cursor:pointer;transition:all .3s;position:relative;overflow:hidden;
}
.svc-card::before { content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--cyan),var(--magenta)); }
.svc-card:hover { transform:translateY(-8px);box-shadow:0 20px 50px rgba(0,245,255,.2);border-color:rgba(0,245,255,.3); }
.svc-icon { width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:#fff;margin-bottom:1.4rem;box-shadow:0 8px 24px rgba(0,0,0,.3); }
.svc-card h3 { font-size:1.1rem;font-weight:700;color:var(--cyan);margin-bottom:.8rem; }
.svc-card p { color:var(--muted);font-size:.88rem;line-height:1.7;margin-bottom:1.2rem; }
.svc-tags { display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.2rem; }
.svc-tags span { padding:.25rem .8rem;background:rgba(0,245,255,.08);border:1px solid rgba(0,245,255,.2);border-radius:99px;font-size:.74rem;color:var(--cyan); }
.svc-more { display:flex;align-items:center;gap:.5rem;color:var(--magenta);font-size:.85rem;font-weight:600; }
.svc-more i { transition:transform .3s; }
.svc-card:hover .svc-more i { transform:translateX(4px); }

/* Services Modal */
.svc-modal { position:fixed;inset:0;z-index:20000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .3s; }
.svc-modal.active { opacity:1;visibility:visible; }
.svc-modal-overlay { position:absolute;inset:0;background:rgba(0,0,0,.88);backdrop-filter:blur(10px); }
.svc-modal-content {
  position:relative;max-width:640px;width:90%;background:var(--card);border-radius:24px;
  padding:2.5rem;border:1px solid rgba(0,245,255,.2);box-shadow:0 20px 60px rgba(0,245,255,.25);
  max-height:88vh;overflow-y:auto;animation:modalUp .4s ease;z-index:1;
}
.svc-modal-content h2 { font-family:'Orbitron',sans-serif;font-size:1.3rem;color:var(--cyan);margin-bottom:1rem; }
.svc-modal-content p { color:var(--muted);font-size:.92rem;line-height:1.8;margin-bottom:.8rem; }
.svc-modal-content ul { list-style:none;display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.2rem; }
.svc-modal-content ul li { color:var(--muted);font-size:.9rem;padding-left:1.4rem;position:relative; }
.svc-modal-content ul li::before { content:'';position:absolute;left:0;top:.55rem;width:6px;height:6px;border-radius:50%;background:var(--cyan); }
.svc-modal-content .svc-cta { display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.8rem;border-radius:99px;background:linear-gradient(135deg,var(--cyan),var(--magenta));color:#fff;font-weight:600;font-size:.9rem;text-decoration:none;margin-top:.5rem; }

/* ── CONTACT FORM ──────────────────────────────────────────── */
.contact-form-wrap {
  background:var(--card);border:1px solid var(--border);border-radius:20px;padding:2.5rem;
}
.contact-form-wrap h3 { font-family:'Orbitron',sans-serif;font-size:1.1rem;color:var(--cyan);margin-bottom:1.8rem;display:flex;align-items:center;gap:.6rem; }
.form-group { margin-bottom:1.2rem; }
.form-group label { display:block;font-size:.82rem;color:var(--muted);margin-bottom:.4rem;font-weight:500; }
.form-group input, .form-group textarea {
  width:100%;background:rgba(0,245,255,.04);border:1px solid var(--border);
  border-radius:12px;padding:.8rem 1rem;color:var(--text);font-family:'Poppins',sans-serif;
  font-size:.9rem;transition:border-color .3s,box-shadow .3s;resize:vertical;
}
.form-group input:focus, .form-group textarea:focus {
  outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,245,255,.1);
}
.form-group input::placeholder, .form-group textarea::placeholder { color:rgba(168,178,209,.4); }
.btn-submit {
  width:100%;padding:.9rem;border-radius:12px;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--cyan),var(--magenta));color:#fff;
  font-size:.95rem;font-weight:600;font-family:'Poppins',sans-serif;
  transition:all .3s;display:flex;align-items:center;justify-content:center;gap:.6rem;
}
.btn-submit:hover { transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,245,255,.35); }
.btn-submit:disabled { opacity:.6;cursor:not-allowed;transform:none; }
#formStatus { margin-top:.8rem;text-align:center;font-size:.88rem;font-weight:500;min-height:1.4rem; }
#formStatus.success { color:var(--green); }
#formStatus.error   { color:#ff4444; }
.cta-mini { display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border); }
.cta-mini .btn-primary, .cta-mini .wa-btn, .cta-mini .btn-cv { padding:.7rem 1.3rem;font-size:.83rem;flex:1;justify-content:center; }

.soft-title { text-align:center;color:var(--magenta);font-size:1.3rem;margin-bottom:1.5rem;font-weight:600; }
.soft-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.2rem; }
.soft-item {
  background:var(--card);border:1px solid var(--border);border-left:4px solid var(--cyan);
  border-radius:12px;padding:1.2rem 1.4rem;
  display:flex;align-items:center;gap:1rem;transition:all .3s;cursor:none;
}
.soft-item:hover { transform:translateX(8px);border-left-color:var(--magenta);box-shadow:0 6px 24px rgba(0,245,255,.12); }
.soft-item i { font-size:1.3rem;flex-shrink:0; }
.soft-item span { font-size:.9rem;font-weight:600; }

/* ── EXPERIENCE ────────────────────────────────────────────── */
.exp-list { max-width:960px;margin:0 auto;position:relative;padding-left:3rem; }
.exp-list::before {
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--cyan),var(--magenta),var(--purple));
}
.exp-item { position:relative;margin-bottom:2.5rem;padding-left:2rem; }
.exp-item::before {
  content:'';position:absolute;left:-1.6rem;top:.4rem;
  width:28px;height:28px;border-radius:50%;border:3px solid var(--bg);
  z-index:1;box-shadow:0 0 16px rgba(0,245,255,.7);
  background:var(--cyan);
}
.exp-item:nth-child(2)::before { background:var(--magenta);box-shadow:0 0 16px rgba(255,0,229,.7); }
.exp-item:nth-child(3)::before { background:var(--yellow);box-shadow:0 0 16px rgba(255,215,0,.7); }
.exp-card {
  background:var(--card);border:1px solid var(--border);border-radius:18px;
  padding:2rem;transition:all .3s;
}
.exp-card:hover { transform:translateX(8px);box-shadow:0 10px 36px rgba(0,245,255,.15); }
.exp-header { display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:.5rem;margin-bottom:.6rem; }
.exp-company { color:var(--cyan);font-size:1.15rem;font-weight:700; }
.exp-period {
  font-family:'Space Mono',monospace;font-size:.78rem;color:var(--magenta);
  background:rgba(255,0,229,.08);border:1px solid rgba(255,0,229,.2);
  padding:.3rem .8rem;border-radius:99px;
}
.exp-role { color:var(--muted);font-size:.9rem;margin-bottom:1.2rem; }
.exp-points { list-style:none;display:flex;flex-direction:column;gap:.5rem; }
.exp-points li { color:var(--muted);font-size:.88rem;padding-left:1.4rem;position:relative;line-height:1.6; }
.exp-points li::before { content:'';position:absolute;left:0;top:.55rem;width:6px;height:6px;border-radius:50%;background:var(--cyan); }

/* ── COMPANY LOGO in Experience & About ───────────────────── */
.exp-company img,
.astat-val img {
  background: #fff;
  border-radius: 6px;
  padding: 2px 5px;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}

/* ── CERTIFICATES ──────────────────────────────────────────── */
.cert-filter { display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-bottom:3rem; }
.flt-btn {
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.55rem 1.4rem;border:1px solid rgba(0,245,255,.22);border-radius:99px;
  background:var(--card);color:var(--muted);font-size:.85rem;font-weight:500;
  cursor:none;transition:all .3s;font-family:'Poppins',sans-serif;
}
.flt-btn:hover { border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px); }
.flt-btn.active {
  background:linear-gradient(135deg,var(--cyan),var(--magenta));
  color:#fff;border-color:transparent;
  box-shadow:0 6px 22px rgba(0,245,255,.35);
}
.cert-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));
  gap:1.5rem;max-width:1200px;margin:0 auto;
}
.cert-card {
  background:var(--card);border:1px solid var(--border);border-radius:18px;
  overflow:visible;transition:all .35s;position:relative;
  display:flex;flex-direction:column;width:100%;
}
.cert-card.hidden { display:none; }
.cert-card:hover { transform:translateY(-8px);box-shadow:0 20px 56px rgba(0,245,255,.25);border-color:rgba(0,245,255,.35); }
.cert-top-bar { height:4px; }
.cert-img-wrap { position:relative;overflow:hidden; }
.cert-img-wrap img { width:100%;height:180px;object-fit:cover;display:block;transition:transform .4s; }
.cert-card:hover .cert-img-wrap img { transform:scale(1.08); }
/* placeholder when no image */
.cert-img-placeholder {
  width:100%;height:180px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(0,245,255,.08),rgba(255,0,229,.08));
  font-size:3rem;color:var(--cyan);
}
.cert-overlay {
  position:absolute;inset:0;background:rgba(0,0,0,.75);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .3s;
}
.cert-card:hover .cert-overlay { opacity:1; }
.cert-overlay a {
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1.4rem;
  background:linear-gradient(135deg,var(--cyan),var(--magenta));
  color:#fff;border-radius:99px;font-size:.85rem;font-weight:600;
  text-decoration:none;transition:transform .2s;cursor:none;
}
.cert-overlay a:hover { transform:scale(1.05); }
.cert-badge-icon {
  position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--yellow),var(--orange));
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;color:#fff;
  box-shadow:0 4px 16px rgba(255,215,0,.4);
  animation:badgePulse 2s infinite;
}
@keyframes badgePulse { 50%{transform:scale(1.12)} }
.cert-body { padding:1.4rem; }
.cert-cat {
  display:inline-block;font-size:.72rem;font-weight:600;
  padding:.25rem .8rem;border-radius:99px;margin-bottom:.8rem;
}
.cert-body h3 { font-size:1rem;font-weight:600;color:var(--text);margin-bottom:.6rem; }
.cert-meta { display:flex;flex-direction:column;gap:.3rem; }
.cert-meta span { display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--muted); }
.cert-meta i { font-size:.75rem;color:var(--magenta); }
.cert-actions { display:flex;gap:.6rem;margin-top:1rem; }
.cert-actions a {
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.55rem;border-radius:10px;font-size:.8rem;font-weight:600;
  text-decoration:none;border:1px solid;transition:all .25s;cursor:none;
}
.cert-verify { color:var(--green);border-color:var(--green);background:rgba(0,255,136,.06); }
.cert-verify:hover { background:var(--green);color:var(--bg);transform:translateY(-2px); }
.cert-dl { color:var(--cyan);border-color:var(--cyan);background:rgba(0,245,255,.06); }
.cert-dl:hover { background:var(--cyan);color:var(--bg);transform:translateY(-2px); }

/* Certificate Modal */
.cert-modal {
  position:fixed;inset:0;z-index:20000;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:all .3s;
}
.cert-modal.active { opacity:1;visibility:visible; }
.modal-overlay {
  position:absolute;inset:0;background:rgba(0,0,0,.9);
  backdrop-filter:blur(10px);cursor:none;
}
.modal-content {
  position:relative;max-width:900px;width:90%;
  background:var(--card);border-radius:20px;padding:2rem;
  border:1px solid rgba(0,245,255,.2);
  box-shadow:0 20px 60px rgba(0,245,255,.3);
  max-height:90vh;overflow-y:auto;
  animation:modalUp .4s ease;
  z-index:1;
}
@keyframes modalUp { from{transform:translateY(50px);opacity:0} to{transform:translateY(0);opacity:1} }
.modal-close {
  position:absolute;top:1rem;right:1rem;
  width:40px;height:40px;background:rgba(255,0,0,.15);
  border:none;border-radius:50%;color:#ff4444;
  font-size:1.2rem;cursor:none;transition:all .3s;
  display:flex;align-items:center;justify-content:center;z-index:2;
}
.modal-close:hover { background:#ff4444;color:#fff;transform:rotate(90deg); }
.modal-img { width:100%;border-radius:15px;margin-bottom:1.5rem;box-shadow:0 10px 40px rgba(0,245,255,.2); }
.modal-info h3 { color:var(--cyan);font-size:1.6rem;margin-bottom:.8rem; }
.modal-info p { color:var(--muted);margin-bottom:.4rem;font-size:.95rem; }
.modal-actions { display:flex;gap:1rem;margin-top:1.5rem; }
.modal-btn {
  flex:1;padding:.9rem 2rem;border-radius:99px;font-size:.95rem;font-weight:600;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;transition:all .3s;border:2px solid;cursor:none;
}
.modal-btn.verify { background:linear-gradient(135deg,var(--green),#38f9d7);color:#fff;border-color:transparent; }
.modal-btn.verify:hover { transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,255,136,.4); }
.modal-btn.dl { background:transparent;color:var(--cyan);border-color:var(--cyan); }
.modal-btn.dl:hover { background:var(--cyan);color:var(--bg);transform:translateY(-3px); }

/* ── PROJECTS ──────────────────────────────────────────────── */
.proj-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:2rem;max-width:1200px;margin:0 auto;
}
.proj-card {
  background:var(--card);border:1px solid var(--border);border-radius:20px;
  overflow:hidden;transition:all .3s;cursor:none;position:relative;
}
.proj-card:hover { transform:translateY(-10px);box-shadow:0 22px 60px rgba(0,245,255,.25);border-color:rgba(0,245,255,.3); }
.proj-thumb {
  height:180px;display:flex;align-items:center;justify-content:center;
  font-size:4rem;position:relative;overflow:hidden;
}
.proj-thumb i { color:#fff;z-index:1;position:relative; }
.proj-body { padding:1.8rem; }
.proj-body h3 { color:var(--cyan);font-size:1.15rem;font-weight:700;margin-bottom:.8rem; }
.proj-body p { color:var(--muted);font-size:.88rem;line-height:1.7;margin-bottom:1.4rem; }
.proj-tags { display:flex;flex-wrap:wrap;gap:.5rem; }
.proj-tag {
  padding:.3rem .9rem;background:rgba(0,245,255,.08);
  border:1px solid rgba(0,245,255,.2);border-radius:99px;
  font-size:.76rem;color:var(--cyan);
}
.proj-link {
  display:inline-flex;align-items:center;gap:.5rem;
  margin-top:1.2rem;padding:.6rem 1.4rem;
  background:linear-gradient(135deg,var(--cyan),var(--magenta));
  color:#fff;border-radius:99px;font-size:.85rem;font-weight:600;
  text-decoration:none;transition:all .3s;cursor:none;
  box-shadow:0 5px 15px rgba(0,245,255,.25);
}
.proj-link:hover { transform:translateY(-3px);box-shadow:0 8px 25px rgba(0,245,255,.45); }

/* ── CONTACT ───────────────────────────────────────────────── */
.contact-grid {
  display:grid;grid-template-columns:1fr 1fr;
  gap:3rem;max-width:1100px;margin:0 auto;
}
.contact-card {
  background:var(--card);border:1px solid var(--border);
  border-radius:20px;padding:2.5rem;
}
.contact-card h3 {
  font-family:'Orbitron',sans-serif;font-size:1.1rem;color:var(--cyan);margin-bottom:2rem;
  display:flex;align-items:center;gap:.6rem;
}
.contact-item {
  display:flex;align-items:center;gap:1.2rem;
  padding:1.1rem;border-radius:14px;
  background:rgba(0,245,255,.04);border:1px solid var(--border);
  margin-bottom:.9rem;transition:all .3s;
  text-decoration:none;cursor:none;
}
.contact-item:hover { background:rgba(0,245,255,.1);transform:translateX(8px);border-color:rgba(0,245,255,.25); }
.c-icon {
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;color:#fff;flex-shrink:0;
}
.c-lbl { font-size:.78rem;color:var(--muted);margin-bottom:.1rem; }
.c-val { font-size:.93rem;color:var(--text);font-weight:500; }

.cta-card {
  background:linear-gradient(135deg,rgba(0,245,255,.05),rgba(255,0,229,.05));
  border:1px solid rgba(0,245,255,.18);border-radius:20px;padding:2.5rem;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  justify-content:center;gap:1.4rem;
}
.cta-card > i { font-size:3rem;color:var(--cyan); }
.cta-card h3 {
  font-family:'Orbitron',sans-serif;font-size:1.3rem;
  background:linear-gradient(135deg,var(--cyan),var(--magenta));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.cta-card p { color:var(--muted);font-size:.92rem;line-height:1.7; }
.wa-btn {
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.9rem 2.2rem;border-radius:99px;font-size:.95rem;font-weight:600;
  text-decoration:none;cursor:none;transition:all .3s;
  background:linear-gradient(135deg,#25d366,#128c7e);color:#fff;
  box-shadow:0 8px 28px rgba(37,211,102,.28);
}
.wa-btn:hover { transform:translateY(-3px);box-shadow:0 14px 38px rgba(37,211,102,.45); }

/* ── FOOTER ────────────────────────────────────────────────── */
footer {
  background:var(--bg2);border-top:1px solid var(--border);
  padding:3rem 5%;text-align:center;
}
.footer-socials { display:flex;gap:1.2rem;justify-content:center;margin-bottom:1.8rem;flex-wrap:wrap; }
.soc-icon {
  width:48px;height:48px;border-radius:50%;
  background:rgba(0,245,255,.08);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;color:var(--cyan);text-decoration:none;
  transition:all .3s;cursor:none;
}
.soc-icon:hover { background:var(--cyan);color:var(--bg);transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,245,255,.3); }
footer p { color:var(--muted);font-size:.85rem; }
footer strong { color:var(--cyan); }

/* ── BACK TO TOP ───────────────────────────────────────────── */
#btt {
  position:fixed;bottom:212px;right:28px;
  width:50px;height:50px;border-radius:50%;
  background:linear-gradient(135deg,var(--cyan),var(--magenta));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.1rem;cursor:none;
  opacity:0;visibility:hidden;transition:all .3s;z-index:1500;
  box-shadow:0 6px 24px rgba(0,245,255,.3);text-decoration:none;
}
#btt.show { opacity:1;visibility:visible; }
#btt:hover { transform:translateY(-4px);box-shadow:0 10px 32px rgba(0,245,255,.5); }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns:1fr;text-align:center;gap:2rem;padding-top:100px; }
  .hero-badges, .hero-cta { justify-content:center; }
  .about-grid { grid-template-columns:1fr;gap:2.5rem; }
  .timeline::before { left:20px; }
  .tl-item { flex-direction:column !important;align-items:flex-start;padding-left:3rem; }
  .tl-card { width:100% !important;margin:0 !important; }
  .tl-dot { left:20px;top:1.2rem;transform:none; }
  .contact-grid { grid-template-columns:1fr; }
  section { padding:5rem 5%; }
  /* Tighten nav links on medium screens */
  .nav-links li a { font-size:.75rem; padding:.4rem .65rem; }
  #navbar { padding:0 3%; }
}

@media (max-width: 768px) {
  #navbar .nav-links { display:none; }
  #bottom-nav { display:block; }
  body { padding-bottom: 90px; }
  #btt {
    right: 16px;
    bottom: 212px;
    width: 46px; height: 46px;
  }
  #btt:hover { transform: translateY(-4px); }
  .skills-grid { grid-template-columns:repeat(3,1fr); }
  .soft-grid { grid-template-columns:1fr 1fr; }
  .cert-grid { grid-template-columns:1fr 1fr; gap:.7rem; }
  #certificates { padding-left:3%;padding-right:3%; }
  .cert-img-wrap img { height:130px; }
  .cert-img-placeholder { height:130px; }
  .cert-body { padding:.9rem .8rem; }
  .cert-cat { font-size:.62rem; padding:.2rem .6rem; margin-bottom:.5rem; }
  .cert-body h3 { font-size:.82rem; margin-bottom:.45rem; }
  .cert-meta span { font-size:.72rem; gap:.3rem; }
  .cert-badge-icon { width:34px; height:34px; font-size:.95rem; top:8px; right:8px; }
  .cert-actions { gap:.4rem; margin-top:.7rem; }
  .cert-actions a { font-size:.7rem; padding:.45rem .3rem; border-radius:8px; }
  #projects { padding-left:3%; padding-right:3%; }
  .proj-grid { grid-template-columns:1fr 1fr; gap:.7rem; }
  .proj-thumb { height:100px; font-size:2.4rem; }
  .proj-body { padding:.9rem .8rem; }
  .proj-body h3 { font-size:.82rem; margin-bottom:.4rem; }
  .proj-body p { font-size:.74rem; line-height:1.5; margin-bottom:.7rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .proj-tags { gap:.3rem; }
  .proj-tag { font-size:.66rem; padding:.2rem .6rem; }
  .proj-link { font-size:.74rem; padding:.45rem .9rem; margin-top:.7rem; }
  .services-grid { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .cta-mini { flex-direction:column; }
  .modal-actions { flex-direction:column; }
  section { padding:4rem 5%; }
}

@media (max-width: 480px) {
  .orbit-badge { width:40px; height:40px; font-size:.9rem; }
  .orbit-badge:nth-child(6),
  .orbit-badge:nth-child(7) { right:-6%; left:-6%; }
  .hero-name { font-size:2.2rem; }
  .avatar-ring { width:220px;height:220px; }
  .skills-grid { grid-template-columns:repeat(2,1fr); }
  .cert-grid { grid-template-columns:1fr 1fr; gap:.5rem; }
  .cert-img-wrap img { height:110px; }
  .cert-img-placeholder { height:110px; }
  .cert-body { padding:.75rem .65rem; }
  .cert-body h3 { font-size:.78rem; }
  .cert-meta span { font-size:.68rem; }
  .cert-actions a { font-size:.65rem; padding:.4rem .25rem; }
  .cert-badge-icon { width:30px; height:30px; font-size:.8rem; }
  .soft-grid { grid-template-columns:1fr; }
  .about-stats { flex-wrap:wrap; }
  .astat { min-width:calc(50% - .5rem); }
  #navbar { padding:1rem 4%; }
  .nav-logo { font-size:1.4rem; }
  .proj-grid { grid-template-columns:1fr 1fr; gap:.5rem; }
  .proj-thumb { height:85px; font-size:2rem; }
  .proj-body p { -webkit-line-clamp:2; }
}
/* ── LANGUAGE TOGGLE ───────────────────────────────────────── */
.lang-toggle {
  display:flex;align-items:center;gap:.35rem;
  background:rgba(0,245,255,.06);border:1px solid rgba(0,245,255,.18);
  border-radius:99px;padding:.38rem .9rem;cursor:pointer;
  font-family:'Space Mono',monospace;font-size:.75rem;font-weight:700;
  transition:all .3s;color:var(--muted);flex-shrink:0;
  margin-left: .8rem;
}
.lang-toggle:hover { border-color:var(--cyan);background:rgba(0,245,255,.12); color: var(--text); }
.lang-id, .lang-en { transition:color .3s; }
.lang-sep { color:var(--border);font-size:.7rem; }
body.lang-id .lang-id { color:var(--cyan); }
body.lang-id .lang-en { color:var(--muted); }
body.lang-en .lang-en { color:var(--cyan); }
body.lang-en .lang-id { color:var(--muted); }
.lang-toggle-mobile {
  background:rgba(0,245,255,.06) !important;
  border:1px solid rgba(0,245,255,.2) !important;
  border-radius:14px !important;cursor:pointer;
  font-family:'Poppins',sans-serif;
}
.lang-toggle-mobile i { color:var(--cyan) !important; }
.lang-toggle-mobile span { color:var(--muted) !important;font-size:.72rem !important; }