/* ════════════════════════════════════════════
   STYLES v4 — Polished, Credly-inspired
   ════════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;color-scheme:light}
body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);line-height:1.65;overflow-x:hidden;font-size:var(--text-base)}
::selection{background:var(--color-accent);color:#fff}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}ul{list-style:none}

/* ═══════ TOP MARQUEE ═══════ */
.top-bar{position:fixed;top:0;left:0;right:0;z-index:200;background:var(--color-bg-dark);padding:9px 0;overflow:hidden}
.top-bar__track{display:flex;gap:40px;animation:marquee 45s linear infinite;width:max-content;align-items:center}
.top-bar__item{display:flex;align-items:center;gap:8px;white-space:nowrap;color:rgba(255,255,255,.5);font-size:var(--text-sm);font-weight:500}
.top-bar__item img{width:16px;height:16px;object-fit:contain;filter:brightness(0) invert(1);opacity:.5}
.top-bar__dot{width:3px;height:3px;border-radius:50%;background:var(--color-accent);opacity:.5}

/* ═══════ NAV ═══════ */
.nav{position:fixed;top:38px;left:0;right:0;height:var(--nav-height);display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-2xl);z-index:100;transition:background .4s ease,box-shadow .3s ease}
.nav.scrolled{background:var(--color-bg-glass);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);box-shadow:0 1px 0 var(--color-border)}
.nav.in-hero{background:transparent}
.nav.in-hero.scrolled{background:rgba(0,0,0,.15);backdrop-filter:blur(16px);box-shadow:none}
.nav__logo{font-weight:800;font-size:var(--text-xl);letter-spacing:-.03em;display:flex;align-items:center;gap:6px;overflow:visible;text-decoration:none}
.nav__logo-dot{width:8px;height:8px;background:var(--color-accent);border-radius:50%}

/* Fixed diagonal greeting */
.visit-text{position:fixed;top:160px;left:10px;font-family:var(--font-sig);font-size:1.5rem;font-weight:700;color:var(--color-text);transform:rotate(-32deg);transform-origin:center center;white-space:nowrap;z-index:50;pointer-events:none;opacity:.85;transition:opacity .4s ease,color .4s ease}
.nav.in-hero ~ .visit-text,.visit-text.in-hero{color:#fff}

.nav__links{display:flex;align-items:center;gap:var(--space-xl)}
/* Default nav link: gray (for white sections) */
.nav__link{font-family:var(--font-sans);font-size:var(--text-lg);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);transition:color .2s;overflow:hidden;display:block;height:1.4em;position:relative}
.nav__flip{display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.65,0,.35,1)}
.nav__flip span{display:block;line-height:1.4em}
.nav__link:hover .nav__flip{transform:translateY(-50%)}
.nav__link:hover{color:var(--color-text)}
.nav__link.active{color:var(--color-text)}
/* Nav link when over hero color slides: white */
.nav.in-hero .nav__link{color:rgba(255,255,255,.7)}
.nav.in-hero .nav__link:hover,.nav.in-hero .nav__link.active{color:#fff}
/* Default CTA: dark bg, white text */
.nav__cta{font-family:var(--font-sans);font-size:var(--text-lg);font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:12px 30px;background:var(--color-bg-dark);color:var(--color-text-inverse);border-radius:var(--radius-full);transition:all .2s var(--ease-spring)}
.nav__cta:hover{transform:scale(1.04);box-shadow:var(--shadow-lg)}
/* CTA when over hero color slides: white bg, dark text */
.nav.in-hero .nav__cta{background:#fff;color:var(--color-text)}
/* Toggle default: dark */
.nav__toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;flex-direction:column;gap:5px}
.nav__toggle span{display:block;width:22px;height:1.5px;background:var(--color-text);transition:.2s;transform-origin:center}
.nav.in-hero .nav__toggle span{background:#fff}
.nav__toggle.active span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__toggle.active span:nth-child(2){opacity:0}
.nav__toggle.active span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ═══════ CLASSIC / WHITE HERO STATE ═══════ */

.bug-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2}
.hero{min-height:100vh;display:flex;align-items:center;padding:calc(38px + var(--nav-height) + var(--space-lg)) var(--space-2xl) var(--space-2xl);background:#fff;position:relative;overflow:hidden}
.hero__slide-panel{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;transform:translateX(-100%);will-change:transform}
/* Hero in white/default state */
.hero--white .hero__name{color:var(--color-text)}
.hero--white .hero__name-accent{color:var(--color-accent);-webkit-text-fill-color:var(--color-accent)}
.hero--white .hero__title{color:var(--color-text-secondary)}
.hero--white .hero__title strong{color:var(--color-text)}
.hero--white .hero__desc{color:var(--color-text-secondary)}
.hero--white .hero__badge{color:var(--color-accent-dark);background:var(--color-accent-bg);border-color:rgba(37,99,235,.12);backdrop-filter:none}
.hero--white .btn--primary{background:var(--color-bg-dark);color:var(--color-text-inverse)}
.hero--white .btn--ghost{color:var(--color-text-secondary);border-color:var(--color-border-strong)}
.hero--white .btn--ghost:hover{border-color:var(--color-accent);color:var(--color-accent)}
.hero--white .hero__resume-btn{color:var(--color-accent);border-color:var(--color-accent);background:var(--color-accent-bg);backdrop-filter:none}
.hero--white .hero__resume-btn:hover{background:var(--color-accent);color:#fff;box-shadow:0 8px 30px var(--color-accent-glow)}
/* Hero in color-slide state */
.hero--colored .hero__name{color:#fff}
.hero--colored .hero__name-accent{color:#fff;-webkit-text-fill-color:#fff}
.hero--colored .hero__title{color:rgba(255,255,255,.75)}
.hero--colored .hero__title strong{color:#fff}
.hero--colored .hero__desc{color:rgba(255,255,255,.8)}
.hero--colored .hero__badge{color:#fff;background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.25);backdrop-filter:blur(4px)}
.hero--colored .btn--primary{background:#fff;color:#333}
.hero--colored .btn--ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.hero--colored .btn--ghost:hover{border-color:#fff;color:#fff}
.hero--colored .hero__resume-btn{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.1);backdrop-filter:blur(4px)}
.hero--colored .hero__resume-btn:hover{background:#fff;color:#333;box-shadow:0 8px 30px rgba(0,0,0,.2)}
.hero__content{position:relative;z-index:1}
.hero__content{max-width:var(--max-width);margin:0 auto;width:100%;display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-4xl);align-items:center}
.hero__text{display:flex;flex-direction:column;gap:var(--space-lg)}
.hero__badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:#fff;background:rgba(255,255,255,.15);padding:7px 16px;border-radius:var(--radius-full);width:fit-content;border:1px solid rgba(255,255,255,.25);animation:fadeUp .6s var(--ease-out) both;backdrop-filter:blur(4px)}
.hero__badge-dot{width:7px;height:7px;background:#22c55e;border-radius:50%;animation:statusPulse 2s infinite}
.hero__name{font-family:var(--font-display-condensed);font-size:var(--text-hero);font-weight:900;line-height:.92;letter-spacing:-.02em;text-transform:uppercase;animation:fadeUp .7s var(--ease-out) .1s both;color:var(--color-text);transition:color .6s ease}
.hero__name-accent{color:var(--color-accent);-webkit-text-fill-color:var(--color-accent);background:none;-webkit-background-clip:unset;background-clip:unset;transition:color .6s ease}
.hero__name-accent.dotted{background:radial-gradient(circle, #1e3a8a 1.6px, transparent 1.6px);background-size:5.5px 5.5px;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero__name-accent.morphing{animation:dotToSolid 1s ease-out forwards}
@keyframes dotToSolid{
  0%{background:radial-gradient(circle, #1e3a8a 1.6px, transparent 1.6px);background-size:5.5px 5.5px;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  50%{background:radial-gradient(circle, var(--color-accent) 2.5px, transparent 2.5px);background-size:5.5px 5.5px;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  100%{background:var(--color-accent);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:var(--color-accent)}
}
.hero--colored .hero__name-accent.dotted{background:radial-gradient(circle, rgba(255,255,255,.6) 1.6px, transparent 1.6px);background-size:5.5px 5.5px;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero--colored .hero__name-accent.morphing{animation:dotToSolidWhite 1s ease-out forwards}
@keyframes dotToSolidWhite{
  0%{background:radial-gradient(circle, rgba(255,255,255,.6) 1.6px, transparent 1.6px);background-size:5.5px 5.5px;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  50%{background:radial-gradient(circle, #fff 2.5px, transparent 2.5px);background-size:5.5px 5.5px;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  100%{background:#fff;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:#fff}
}
.hero__title{font-family:var(--font-mono);font-size:var(--text-base);color:var(--color-text-secondary);animation:fadeUp .7s var(--ease-out) .2s both;transition:color .6s ease}
.hero__title strong{font-weight:700;color:var(--color-text);transition:color .6s ease}
.hero__desc{font-size:var(--text-lg);color:var(--color-text-secondary);max-width:480px;line-height:1.75;animation:fadeUp .7s var(--ease-out) .3s both;transition:color .6s ease}
.hero__actions{display:flex;gap:var(--space-md);animation:fadeUp .7s var(--ease-out) .4s both}
.btn{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:14px 30px;border-radius:var(--radius-full);display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:none;transition:all .3s var(--ease-spring)}
.btn--primary{background:var(--color-bg-dark);color:var(--color-text-inverse)}
.btn--primary:hover{transform:scale(1.03);box-shadow:var(--shadow-xl)}
.btn--ghost{background:transparent;color:var(--color-text-secondary);border:1.5px solid var(--color-border-strong)}
.btn--ghost:hover{border-color:var(--color-accent);color:var(--color-accent)}
.btn__arrow{transition:transform .2s}
.btn:hover .btn__arrow{transform:translateX(3px)}

/* Download Resume button */
.hero__resume-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-sans);font-size:var(--text-lg);font-weight:700;color:var(--color-accent);padding:16px 36px;border:2px solid var(--color-accent);border-radius:var(--radius-full);transition:all .3s var(--ease-spring);animation:fadeUp .7s var(--ease-out) .55s both;position:relative;overflow:hidden;background:var(--color-accent-bg);cursor:pointer}
.hero__resume-btn svg{width:22px;height:22px;animation:bounceDown 1.5s ease-in-out infinite}
.hero__resume-btn:hover{background:var(--color-accent);color:#fff;transform:scale(1.05);box-shadow:0 8px 30px var(--color-accent-glow)}
.hero__resume-btn:hover svg{animation:none;transform:translateY(2px)}
.hero__resume-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:translateX(-100%);transition:transform .6s}
.hero__resume-btn:hover::after{transform:translateX(100%)}
.hero__resume-btn:active{transform:scale(.95);box-shadow:none;transition:transform .1s}
.hero__resume-btn.clicked{animation:btnImpact .5s ease-out}
@keyframes btnImpact{
  0%{transform:scale(.92);box-shadow:0 0 0 0 var(--color-accent-glow)}
  40%{transform:scale(1.08);box-shadow:0 0 0 12px rgba(37,99,235,0)}
  100%{transform:scale(1);box-shadow:none}
}
@keyframes bounceDown{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* Hero visual */
.hero__visual{position:relative;display:flex;justify-content:center;animation:scaleIn .8s var(--ease-out) .3s both}
.hero__image-wrap{position:relative;width:360px;height:440px}
.hero__image-frame{width:100%;height:100%;border-radius:var(--radius-xl);overflow:hidden;background:var(--color-bg-elevated);border:1px solid var(--color-border-strong)}
.hero__image-frame img{width:100%;height:100%;object-fit:cover}
.hero__image-deco{position:absolute;inset:0;top:10px;left:10px;border:2px solid var(--color-accent);border-radius:var(--radius-xl);opacity:.15;z-index:-1}
.hero__float{position:absolute;background:var(--color-bg-alt);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);padding:8px 14px;box-shadow:var(--shadow-md);font-size:var(--text-sm);font-weight:600;white-space:nowrap;animation:float 5s ease-in-out infinite}
.hero__float span{color:var(--color-accent);font-weight:800}
.hero__float--1{top:30px;right:-45px}
.hero__float--2{bottom:80px;left:-40px;animation-delay:1.2s}
.hero__float--3{bottom:-8px;right:-25px;animation-delay:2.4s}

/* ═══════ TECH ICON ROW — inside Skills ═══════ */
.tech-strip__row{display:flex;justify-content:center;align-items:center;gap:var(--space-2xl);flex-wrap:wrap;max-width:1000px;margin:0 auto}
.tech-strip__icon{display:flex;flex-direction:column;align-items:center;gap:8px;transition:transform .3s var(--ease-out)}
.tech-strip__icon:hover{transform:translateY(-5px)}
.tech-strip__icon img{width:56px;height:56px;object-fit:contain;transition:transform .3s}
.tech-strip__icon:hover img{transform:scale(1.12)}
.tech-strip__icon span{font-size:var(--text-xs);font-weight:500;color:var(--color-text-muted);letter-spacing:.02em}

/* iOS wiggle animation */
.tech-strip__icon.wiggle{animation:iosWiggle .12s ease-in-out infinite alternate}
.tech-strip__icon.wiggle:nth-child(even){animation-delay:.06s;animation-direction:alternate-reverse}
@keyframes iosWiggle{
  0%{transform:rotate(-2.5deg) scale(1.02)}
  100%{transform:rotate(2.5deg) scale(1.02)}
}

/* ═══════ SECTIONS ═══════ */
.section{padding:var(--space-5xl) var(--space-2xl)}
.section__inner{max-width:var(--max-width);margin:0 auto}
.section__label{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-accent);letter-spacing:.06em;margin-bottom:var(--space-sm)}
.section__heading{font-family:var(--font-display-condensed);font-size:var(--text-4xl);font-weight:800;letter-spacing:-.01em;line-height:1.05;margin-bottom:var(--space-sm);text-transform:uppercase}
.section__sub{font-size:var(--text-lg);color:var(--color-text-secondary);max-width:540px;line-height:1.7}
.section__line{width:60px;height:4px;background:linear-gradient(90deg,var(--color-accent),var(--color-accent-light));border-radius:var(--radius-full);margin:var(--space-md) 0 var(--space-2xl);position:relative}
.section__line::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,var(--color-accent),var(--color-accent-light));border-radius:var(--radius-full);filter:blur(8px);opacity:.5}

/* ═══════ ABOUT ═══════ */
.about__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--space-4xl)}
.about__text{font-size:var(--text-base);color:var(--color-text-secondary);line-height:1.85}
.about__text strong{color:var(--color-text);font-weight:600}
.about__stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg)}
.dice-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);padding:var(--space-lg) var(--space-md)}
.dice-card__label{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);text-align:center}

/* Per-dice colors — all use accent */
.dice-card .dice-face{color:var(--color-accent)}

/* 3D Dice — Ludo style */
.dice-scene{width:120px;height:120px;perspective:400px;margin:0 auto}
.dice-cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform 1.8s cubic-bezier(.2,.8,.2,1)}
.dice-cube.rolling{animation:diceRoll 1.8s cubic-bezier(.2,.8,.2,1) forwards}
.dice-face{position:absolute;width:120px;height:120px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display-condensed);font-size:3.2rem;font-weight:900;color:var(--color-accent);background:var(--color-bg-alt);border:2px solid var(--color-border);border-radius:16px;backface-visibility:hidden;user-select:none;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.dice-front{transform:translateZ(60px)}
.dice-back{transform:rotateY(180deg) translateZ(60px)}
.dice-right{transform:rotateY(90deg) translateZ(60px)}
.dice-left{transform:rotateY(-90deg) translateZ(60px)}
.dice-top{transform:rotateX(90deg) translateZ(60px)}
.dice-bottom{transform:rotateX(-90deg) translateZ(60px)}

/* Roll keyframes — full 3D tumble */
@keyframes diceRoll{
  0%{transform:rotateX(0) rotateY(0) rotateZ(0)}
  20%{transform:rotateX(300deg) rotateY(200deg) rotateZ(100deg)}
  50%{transform:rotateX(500deg) rotateY(400deg) rotateZ(200deg)}
  75%{transform:rotateX(640deg) rotateY(520deg) rotateZ(280deg)}
  100%{transform:rotateX(720deg) rotateY(720deg) rotateZ(360deg)}
}
.dice-cube.land-front{transform:rotateX(0) rotateY(0)}

/* ═══════ SKILLS — Logo Grid ═══════ */
.skills__grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:var(--space-md);margin-top:var(--space-2xl)}
.skill-card{background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-xl) var(--space-md);text-align:center;transition:all .3s var(--ease-out);position:relative;overflow:hidden}
.skill-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2.5px;background:var(--color-accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out)}
.skill-card:hover::before{transform:scaleX(1)}
.skill-card:hover{border-color:var(--color-accent);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.skill-card__icon{width:44px;height:44px;margin:0 auto var(--space-sm)}
.skill-card__icon img{width:100%;height:100%;object-fit:contain}
.skill-card__title{font-size:var(--text-sm);font-weight:700;margin-bottom:4px}
.skill-card__sub{font-size:11px;color:var(--color-text-muted);line-height:1.5}

/* ═══════ EXPERIENCE ═══════ */
.exp-counter{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg);background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-2xl) var(--space-3xl)}
.exp-counter__heading{font-family:var(--font-mono);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-muted);font-weight:600}
.exp-counter__row{display:flex;align-items:center;gap:var(--space-3xl)}
.exp-counter__block{display:flex;flex-direction:column;align-items:center;gap:4px}
.exp-counter__num{font-family:var(--font-display-condensed);font-size:clamp(5rem,12vw,8rem);font-weight:900;color:var(--color-accent);line-height:1;letter-spacing:-.02em}
.exp-counter__label{font-family:var(--font-display-condensed);font-size:var(--text-xl);font-weight:700;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em}
.exp-counter__sep{width:2px;height:80px;background:linear-gradient(to bottom,transparent,var(--color-border-strong),transparent)}
.timeline{margin-top:var(--space-2xl);position:relative}
.timeline::before{content:'';position:absolute;left:23px;top:0;bottom:0;width:1.5px;background:linear-gradient(to bottom,var(--color-accent),var(--color-border))}
.exp{display:grid;grid-template-columns:46px 1fr;gap:var(--space-lg);margin-bottom:var(--space-2xl)}
.exp__dot{width:12px;height:12px;background:var(--color-accent);border:3px solid var(--color-bg);border-radius:50%;position:relative;top:6px;left:17px;z-index:1;box-shadow:0 0 0 3px var(--color-accent-bg)}
.exp__card{background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-xl) var(--space-2xl);transition:all .3s}
.exp__card:hover{border-color:var(--color-accent);transform:scale(1.04);box-shadow:0 16px 50px rgba(37,99,235,.15)}
.exp__header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-md);margin-bottom:var(--space-lg);flex-wrap:wrap}
.exp__company-row{display:flex;align-items:center;gap:var(--space-md)}
.exp__logo{width:44px;height:44px;border-radius:var(--radius-md);object-fit:contain;background:#fff;padding:4px;border:1px solid var(--color-border)}
.exp__logo--placeholder{display:flex;align-items:center;justify-content:center;font-size:var(--text-xl);font-weight:800;color:var(--color-accent);background:var(--color-accent-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);width:44px;height:44px;flex-shrink:0}
.exp__company{font-size:var(--text-xl);font-weight:700;letter-spacing:-.02em}
.exp__company-link{text-decoration:none;color:inherit;transition:color .2s}
.exp__company-link:hover{color:var(--color-accent)}
.exp__company-link:hover .exp__company{color:var(--color-accent)}
.exp__role{font-size:var(--text-sm);color:var(--color-accent-dark);font-weight:500}
.exp__location{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:2px}
.exp__period{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-muted);padding:5px 12px;background:var(--color-bg-elevated);border-radius:var(--radius-full);white-space:nowrap}
.exp__list{display:flex;flex-direction:column;gap:6px}
.exp__list li{padding-left:20px;position:relative;font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.75;text-align:justify;cursor:default;transition:all .3s ease;border-radius:6px;padding-top:4px;padding-bottom:4px;padding-right:8px}
.exp__list li:hover{background:var(--color-accent-bg);color:var(--color-text);transform:translateX(4px)}
.exp__list li::before{content:'▹';position:absolute;left:0;top:4px;color:var(--color-accent);font-size:1.1rem;font-weight:700;line-height:1.75;transition:transform .3s ease}
.exp__list li:hover::before{transform:translateX(3px)}
.exp__tech{display:flex;flex-wrap:wrap;gap:5px;margin-top:var(--space-lg);padding-top:var(--space-lg);border-top:1px solid var(--color-border)}
.tag{font-family:var(--font-mono);font-size:11px;padding:4px 10px;background:var(--color-bg-elevated);border-radius:var(--radius-sm);color:var(--color-text-secondary)}

/* ═══════ EDUCATION ═══════ */
.edu__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);margin-top:var(--space-2xl)}
.edu{background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-xl);display:flex;gap:var(--space-lg);align-items:flex-start;transition:all .3s}
.edu:hover{border-color:var(--color-accent)}
.edu__logo{width:120px;height:120px;border-radius:var(--radius-lg);object-fit:contain;background:#fff;padding:8px;border:1px solid var(--color-border);flex-shrink:0}
.edu__degree{font-size:var(--text-lg);font-weight:700}
.edu__school{font-size:var(--text-sm);color:var(--color-text-secondary);margin-top:2px}
.edu__meta{display:flex;gap:8px;margin-top:8px}
.edu__tag{font-family:var(--font-mono);font-size:11px;padding:4px 10px;background:var(--color-bg-elevated);border-radius:var(--radius-sm);color:var(--color-text-muted)}
.edu__tag--gpa{background:#ECFDF5;color:#15803D;font-weight:700;box-shadow:0 0 12px rgba(34,197,94,.3),0 0 4px rgba(34,197,94,.2);border:1px solid rgba(34,197,94,.25);animation:glowPulse 2.5s ease-in-out infinite}

/* ═══════ CERTIFICATIONS — Credly style ═══════ */
.certs__grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--space-lg);margin-top:var(--space-2xl)}
.cert-card{background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-2xl) var(--space-xl);transition:all .3s;text-align:center;display:flex;flex-direction:column;align-items:center}
.cert-card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.cert-card__badge{width:110px;height:110px;margin-bottom:var(--space-lg)}
.cert-card__badge img{width:100%;height:100%;object-fit:contain}
.cert-card__name{font-size:var(--text-base);font-weight:700;margin-bottom:6px;line-height:1.4}
.cert-card__issuer{font-size:var(--text-sm);color:var(--color-text-secondary);margin-bottom:var(--space-sm)}
.cert-card__date{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-accent-dark);margin-bottom:var(--space-md)}
.cert-card__verify{font-size:var(--text-xs);font-weight:600;color:var(--color-accent);margin-top:auto}
.cert-card:hover .cert-card__verify{text-decoration:underline}

/* ═══════ GITHUB ═══════ */
.github__grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));gap:var(--space-lg);margin-top:var(--space-2xl)}
.gh-card{background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-xl);transition:all .3s var(--ease-out);display:flex;flex-direction:column}
.gh-card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.gh-card__header{display:flex;align-items:center;gap:10px;margin-bottom:var(--space-md)}
.gh-card__icon{color:var(--color-text-muted);flex-shrink:0}
.gh-card__name{font-size:var(--text-lg);font-weight:700;color:var(--color-accent-dark)}
.gh-card__desc{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.75;flex-grow:1}
.gh-card__footer{display:flex;align-items:center;gap:var(--space-lg);margin-top:var(--space-lg);padding-top:var(--space-md);border-top:1px solid var(--color-border)}
.gh-card__lang{display:flex;align-items:center;gap:5px;font-size:var(--text-xs);color:var(--color-text-muted)}
.gh-card__lang-dot{width:10px;height:10px;border-radius:50%}
.gh-card__tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:var(--space-sm)}

/* ═══════ PROJECTS ═══════ */
.projects__grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));gap:var(--space-lg);margin-top:var(--space-2xl)}
.project{background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-xl);transition:all .3s}
.project:hover{border-color:var(--color-accent);box-shadow:var(--shadow-md)}
.project__company{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-accent);margin-bottom:6px}
.project__title{font-size:var(--text-xl);font-weight:700;letter-spacing:-.02em;margin-bottom:var(--space-sm)}
.project__desc{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.75}
.project__tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:var(--space-md)}

/* ═══════ CONTACT ═══════ */
.contact{background:var(--color-bg-dark);color:var(--color-text-inverse)}
.contact .section__label{color:var(--color-accent-light)}
.contact .section__heading{color:var(--color-text-inverse)}
.contact .section__sub{color:rgba(255,255,255,.5)}
.contact__center{text-align:center}
.contact__fields{display:flex;flex-direction:column;gap:var(--space-md);max-width:600px;margin:var(--space-2xl) auto 0}
.contact__field-row{display:flex;align-items:center;gap:12px}
.contact__field{flex:1;display:flex;align-items:center;justify-content:center;gap:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);padding:14px 20px;transition:border-color .2s;min-width:0}
.contact__field:hover{border-color:rgba(255,255,255,.25)}
.contact__field>svg{width:20px;height:20px;color:rgba(255,255,255,.4);flex-shrink:0}
.contact__input{background:none;border:none;outline:none;color:rgba(255,255,255,.85);font-family:var(--font-sans);font-size:var(--text-xl);font-weight:700;letter-spacing:.01em;cursor:default;text-align:center;width:100%}
.contact__copy{background:linear-gradient(135deg,#22c55e,#16a34a);border:none;cursor:pointer;padding:14px 22px;border-radius:var(--radius-lg);color:#fff;font-size:var(--text-sm);font-weight:700;font-family:var(--font-sans);display:flex;align-items:center;gap:6px;transition:all .3s var(--ease-spring);box-shadow:0 4px 15px rgba(34,197,94,.3);white-space:nowrap;flex-shrink:0}
.contact__copy:hover{transform:scale(1.06);box-shadow:0 6px 25px rgba(34,197,94,.45)}
.contact__copy:active{transform:scale(.95)}
.contact__copy svg{width:18px;height:18px}
.contact__copy--copied{background:linear-gradient(135deg,#FBBF24,#F59E0B)!important;box-shadow:0 4px 15px rgba(245,158,11,.35)!important;animation:copyBounce .5s var(--ease-spring)}
@keyframes copyBounce{0%{transform:scale(1)}30%{transform:scale(1.15)}60%{transform:scale(.96)}100%{transform:scale(1)}}
.contact__socials{display:flex;justify-content:center;gap:var(--space-md);margin-top:var(--space-xl);width:100%;max-width:600px;margin-left:auto;margin-right:auto}
.contact__social-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;font-size:var(--text-sm);font-weight:600;color:rgba(255,255,255,.7);padding:12px 28px;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-full);transition:all .2s}
.contact__social-btn:hover{color:#fff;border-color:var(--color-accent);background:rgba(255,255,255,.05);transform:translateY(-2px)}
.contact__social-btn svg{width:18px;height:18px}
.footer{background:var(--color-bg-dark);color:rgba(255,255,255,.3);padding:var(--space-2xl) var(--space-2xl) var(--space-lg);border-top:1px solid rgba(255,255,255,.06);font-size:var(--text-xs);text-align:center}
.footer__signature{font-family:var(--font-sig);font-size:2.5rem;color:rgba(255,255,255,.5);margin-bottom:var(--space-md);letter-spacing:.02em;cursor:pointer;transition:all .4s var(--ease-out)}
.footer__signature:hover{color:rgba(255,255,255,.8)}
.footer__signature.glow{color:var(--color-accent-light);text-shadow:0 0 10px var(--color-accent),0 0 30px var(--color-accent),0 0 60px var(--color-accent-light),0 0 100px var(--color-accent);transition:all .2s}

/* ═══════ RESPONSIVE ═══════ */
@media(max-width:1024px){
  .hero__content{grid-template-columns:1fr;text-align:center}
  .hero__text{align-items:center}.hero__desc{margin:0 auto}
  .hero__visual{display:none}
  .about__grid{grid-template-columns:1fr}
  .skills__grid{grid-template-columns:repeat(3,1fr)}
  .certs__grid{grid-template-columns:1fr 1fr}
  .exp__header{flex-direction:column;align-items:flex-start}
}
@media(max-width:768px){
  :root{--text-hero:2.5rem;--text-4xl:2.5rem;--space-5xl:4.5rem;--space-4xl:3rem}
  .top-bar{padding:7px 0;top:0}
  .nav{top:34px;padding:0 var(--space-md)}
  .visit-text{display:none!important}
  .hero{padding-top:calc(34px + var(--nav-height) + var(--space-lg));padding-bottom:var(--space-xl);min-height:auto}
  /* Mobile hamburger menu overlay */
  .nav__links{display:none;position:fixed;inset:0;background:var(--color-bg-dark);flex-direction:column;justify-content:center;align-items:center;gap:var(--space-xl);z-index:999;padding:var(--space-2xl)}
  .nav__links.open{display:flex}
  .nav__link{font-size:var(--text-xl);color:rgba(255,255,255,.7)!important;height:auto;overflow:visible}
  .nav__link:hover,.nav__link.active{color:#fff!important}
  .nav__flip{display:inline!important}
  .nav__flip span:last-child{display:none}
  .nav__link:hover .nav__flip{transform:none}
  .nav__cta{background:var(--color-accent)!important;color:#fff!important;font-size:var(--text-lg);padding:14px 32px}
  .nav__toggle{display:flex;z-index:1000}
  /* Hero mobile */
  .hero__badge{font-size:10px;padding:6px 12px}
  .hero__name{font-size:var(--text-hero);line-height:.95}
  .hero__title{font-size:var(--text-sm)}
  .hero__desc{font-size:var(--text-sm);line-height:1.65}
  .hero__actions{flex-direction:column;width:100%;gap:var(--space-sm)}
  .hero__actions .btn{width:100%;justify-content:center;padding:14px 20px;font-size:var(--text-xs)}
  .hero__resume-btn{font-size:var(--text-sm);padding:14px 24px;width:100%;justify-content:center}
  /* Sections */
  .timeline::before{left:12px}
  .exp{grid-template-columns:24px 1fr;gap:var(--space-md)}
  .exp__dot{left:6px;width:10px;height:10px}
  .skills__grid{grid-template-columns:1fr 1fr}
  .edu__grid,.certs__grid{grid-template-columns:1fr}
  .github__grid,.projects__grid{grid-template-columns:1fr}
  .tech-strip__row{gap:var(--space-lg)}
  .tech-strip__icon img{width:44px;height:44px}
  .exp__company-row{flex-wrap:wrap}
  .exp__period{align-self:flex-start}
  .exp__tech{gap:4px}
  .exp-total{padding:var(--space-xl) var(--space-lg)}
  .exp-total__inner{flex-direction:column;text-align:center}
  .exp-total__value{justify-content:center}
  .exp-total__num{font-size:var(--text-4xl)}
  .exp-counter{padding:var(--space-xl) var(--space-lg)}
  .exp-counter__row{gap:var(--space-xl)}
  .exp-counter__num{font-size:3rem}
  .exp-counter__sep{height:40px}
  /* Contact mobile */
  .contact__field-row{flex-direction:column;gap:8px}
  .contact__copy{width:auto;min-width:100px;justify-content:center;flex-shrink:0}
  .contact__field{width:100%}
  .contact__field-row{flex-direction:row;gap:8px}
  .contact__socials{flex-direction:column;gap:var(--space-sm)}
  .contact__social-btn{width:100%;justify-content:center}
  .edu{flex-direction:column;align-items:center;text-align:center}
  .edu__logo{width:80px;height:80px}
}
@media(max-width:480px){
  .nav{padding:0 var(--space-sm)}
  .section{padding:var(--space-4xl) var(--space-md)}
  .hero{padding-left:var(--space-md);padding-right:var(--space-md)}
  .hero__name{font-size:2rem}
  .about__stats{grid-template-columns:1fr 1fr}
  .dice-scene{width:90px;height:90px}
  .dice-face{width:90px;height:90px;font-size:2.2rem;border-radius:12px}
  .dice-front{transform:translateZ(45px)}
  .dice-back{transform:rotateY(180deg) translateZ(45px)}
  .dice-right{transform:rotateY(90deg) translateZ(45px)}
  .dice-left{transform:rotateY(-90deg) translateZ(45px)}
  .dice-top{transform:rotateX(90deg) translateZ(45px)}
  .dice-bottom{transform:rotateX(-90deg) translateZ(45px)}
  .skills__grid{grid-template-columns:1fr}
  .exp__card{padding:var(--space-lg) var(--space-md)}
  .exp__list li{font-size:var(--text-xs);line-height:1.7}
  .tag{font-size:10px;padding:3px 8px}
  .stat__num{font-size:var(--text-4xl)}
  .exp-total__value{font-size:var(--text-3xl)}
  .exp-total__num{font-size:var(--text-4xl)}
  .exp-total{padding:var(--space-lg)}
  .contact__input{font-size:var(--text-xs)}
  .contact__field-row{flex-direction:column;gap:8px}
  .contact__copy{width:100%}
}