/* === BASE === */
:root {
  --c-white: #FFFFFF;
  --c-paper: #FFFFFF;
  --c-paper-2: #F8F9FA;
  --bg: var(--c-paper);
  --bg-alt: #F8F9FA;
  --c-ink: #1F2937;
  --c-mute: #6B7280;
  --c-line: #E5E7EB;
  --c-brand: #0D2E5C;
  --c-accent: #F5A623;
  --c-coral: #F5A623;
  --c-lime: #0D2E5C;
  --c-success: #059669;
  --f-body: 'Inter', system-ui, sans-serif;
  --f-display: 'Plus Jakarta Sans', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --container: 1440px;
  --gutter: 2rem;
  --section-py: 1.5rem;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--f-body);background:var(--bg);color:var(--c-ink);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,textarea{font:inherit}
::selection{background:var(--c-brand);color:var(--c-white)}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section-py) 0;position:relative}

/* === SECTION HEAD === */
.section__head{margin-bottom:1.5rem;max-width:700px}
.section__num{display:inline-block;font-family:var(--f-mono);font-size:.7rem;font-weight:600;letter-spacing:1.5px;color:var(--c-brand);text-transform:uppercase;margin-bottom:.75rem}
.section__title{font-family:var(--f-display);font-size:clamp(2rem,4vw,3.2rem);font-weight:700;line-height:1.15;letter-spacing:-0.02em;color:var(--c-brand);margin-bottom:.6rem}
.section__title em{font-style:italic;font-weight:400;color:var(--c-accent)}
.section__subtitle{display:block;font-size:1rem;color:var(--c-mute);line-height:1.65}

/* === BUTTONS === */
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.8rem 1.5rem;font-weight:600;font-size:.92rem;border-radius:10px;transition:all .25s ease;white-space:nowrap;border:1.5px solid transparent;font-family:var(--f-display)}
.btn--primary{background:var(--c-accent);color:var(--c-white);border-color:var(--c-accent)}
.btn--primary:hover{background:var(--c-white);color:var(--c-brand);border-color:var(--c-white);transform:translateY(-2px);box-shadow:0 6px 20px rgba(245,166,35,.25)}
.btn--ghost{background:transparent;color:var(--c-white);border-color:rgba(255,255,255,.35)}
.btn--ghost:hover{background:var(--c-white);color:var(--c-brand);border-color:var(--c-white);transform:translateY(-2px)}
.btn--accent{background:var(--c-accent);color:var(--c-white);border-color:var(--c-accent)}
.btn--accent:hover{background:var(--c-brand);transform:translateY(-2px);box-shadow:0 6px 20px rgba(13,46,92,.25)}
.btn--full{width:100%;justify-content:center}

/* === NAV === */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--c-brand);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}

.header.scrolled {
  border-bottom-color: rgba(245,166,35,.3);
}

/* Membatasi lebar maksimal header agar sejajar dengan konten bawah */
.header .container {
  max-width: var(--container);
  /* Mengikuti batas 1320px */
  margin: 0 auto;
  padding: 0 var(--gutter);
  /* Memberikan padding aman di kiri-kanan */
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 72px;
  width: 100%;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--c-white);
}

.logo-mark {
  font-family: var(--f-mono);
  background: var(--c-white);
  color: var(--c-brand);
  padding: .3rem .5rem;
  border-radius: 6px;
  font-size: .8rem;
  font-weight: 600;
}

.logo-dot {
  color: var(--c-accent);
}

.nav__list {
  display: flex;
  gap: .2rem;
  align-items: center;
}

.nav__link {
  position: relative;
  padding: .5rem .85rem;
  font-size: .88rem;
  font-weight: 500;
  color: rgba(255,255,255,.75);
  border-radius: 8px;
  transition: all .2s ease;
}

.nav__link:hover {
  color: var(--c-white);
  background: rgba(255,255,255,.1);
}

.nav__link.active-link {
  background: var(--c-white);
  color: var(--c-brand);
}

.nav__link--cta {
  background: var(--c-accent);
  color: var(--c-white);
  margin-left: .5rem;
  border: 1.5px solid var(--c-accent);
}

.nav__link--cta:hover {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: var(--c-white);
}

.nav__toggle,
.nav__close {
  display: none;
  color: var(--c-white);
}

.nav__toggle {
  flex-direction: column;
  gap: 5px;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
}

.nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--c-white);
  border-radius: 2px;
  transition: all .3s ease;
}

/* === HERO === */
.hero{min-height:100vh;padding:6.5rem 0 4rem;position:relative;overflow:hidden;background:var(--c-brand)}
.hero__container{display:grid;grid-template-columns:1.2fr 1fr;gap:4rem;align-items:center;position:relative;z-index:1}
.status-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .8rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:999px;font-size:.8rem;font-weight:500;color:rgba(255,255,255,.7);margin-bottom:1.5rem}
.status-dot{width:8px;height:8px;background:var(--c-success);border-radius:50%;position:relative;animation:pulse 2s ease-in-out infinite}
.status-dot::after{content:'';position:absolute;inset:-4px;border:1.5px solid var(--c-success);border-radius:50%;opacity:0;animation:pulse-ring 2s ease-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@keyframes pulse-ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(2)}}
.hero__greeting{font-family:var(--f-mono);font-size:.88rem;color:rgba(255,255,255,.65);margin-bottom:1rem}
.hero__name{font-family:var(--f-display);font-size:clamp(2.6rem,6vw,4.5rem);font-weight:700;line-height:.95;letter-spacing:-0.03em;margin-bottom:1.2rem;color:var(--c-white)}
.hero__name-line{display:block}
.hero__name-line--accent em{font-style:italic;font-weight:400;color:var(--c-accent);display:inline-block;position:relative}
.hero__name-line--accent em::after{content:'';position:absolute;bottom:4%;left:-2%;right:-2%;height:30%;background:rgba(245,166,35,.12);z-index:-1;border-radius:4px;transform:skewX(-6deg)}
.hero__role{display:flex;align-items:center;gap:.5rem;font-family:var(--f-mono);font-size:.95rem;margin-bottom:1.5rem;color:rgba(255,255,255,.85)}
.hero__role-prefix{color:rgba(255,255,255,.55)}
.hero__role-text{color:var(--c-white);font-weight:600;min-width:9ch;display:inline-block}
.hero__role-cursor{color:var(--c-accent);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.hero__description{font-size:1.05rem;line-height:1.7;color:rgba(255,255,255,.7);max-width:52ch;margin-bottom:2rem}
.hero__description strong{color:var(--c-accent);font-weight:600}
.hero__buttons{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:2.5rem}
.hero__contact{display:flex;flex-direction:column;gap:.5rem;margin-bottom:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.15)}
.hero__contact li{display:flex;align-items:center;gap:.8rem;font-size:.88rem}
.contact-key{font-family:var(--f-mono);font-size:.7rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:1px;min-width:50px}
.hero__contact a{color:var(--c-white);border-bottom:1px solid transparent;transition:border-color .2s}
.hero__contact a:hover{border-bottom-color:var(--c-accent);color:var(--c-accent)}
.hero__socials{display:flex;gap:.55rem}
.social-link{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:1.5px solid rgba(255,255,255,.25);color:rgba(255,255,255,.6);transition:all .25s ease}
.social-link:hover{background:var(--c-accent);color:var(--c-white);border-color:var(--c-accent);transform:translateY(-3px)}
.hero__right{position:relative;display:flex;flex-direction:column;align-items:center;gap:2rem}

/* === PHONE MOCKUP — Aesthetic Trio Layout === */
.hero__photo-wrap{position:relative;width:100%;max-width:520px;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.8rem;padding:2rem 0}
.phone-mockup{position:relative;aspect-ratio:9/19.5;border-radius:38px;overflow:hidden;flex-shrink:0;transition:all .5s cubic-bezier(.22,.61,.36,1)}
.phone-mockup::before{content:'';position:absolute;inset:-3px;border-radius:41px;background:linear-gradient(145deg, rgba(255,255,255,.5), rgba(255,255,255,.08) 40%, rgba(13,46,92,.15) 60%, rgba(245,166,35,.3));z-index:-1;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:3px;pointer-events:none}
.phone-mockup::after{content:'';position:absolute;inset:0;border-radius:35px;background:linear-gradient(180deg, rgba(255,255,255,.25) 0%, transparent 30%, transparent 70%, rgba(0,0,0,.15) 100%);z-index:4;pointer-events:none;opacity:0;transition:opacity .5s ease}
.phone-mockup:hover::after{opacity:1}
.phone-mockup--center{width:100%;max-width:250px;z-index:3;transform:scale(1);box-shadow:0 20px 60px rgba(13,46,92,.25),0 8px 24px rgba(13,46,92,.1),0 0 0 1px rgba(255,255,255,.1)}
.phone-mockup--side{width:100%;max-width:170px;z-index:1;opacity:.65;filter:saturate(.5) brightness(.9);box-shadow:0 10px 30px rgba(13,46,92,.12),0 4px 12px rgba(13,46,92,.06),0 0 0 1px rgba(255,255,255,.06)}
.phone-mockup--side:hover{opacity:1;filter:saturate(1) brightness(1);z-index:4;box-shadow:0 25px 50px rgba(13,46,92,.25),0 10px 20px rgba(13,46,92,.1)}
.phone-mockup--left{transform:rotate(-8deg) translateX(12px) translateY(8px);animation:float-phone-l 7s ease-in-out infinite}
.phone-mockup--left:hover{transform:rotate(-2deg) translateX(16px) translateY(4px) scale(1.05)}
.phone-mockup--right{transform:rotate(8deg) translateX(-12px) translateY(8px);animation:float-phone-r 7s ease-in-out infinite 1s}
.phone-mockup--right:hover{transform:rotate(2deg) translateX(-16px) translateY(4px) scale(1.05)}
@keyframes float-phone-l{0%,100%{transform:rotate(-8deg) translateX(12px) translateY(8px)}50%{transform:rotate(-8deg) translateX(12px) translateY(2px)}}
@keyframes float-phone-r{0%,100%{transform:rotate(8deg) translateX(-12px) translateY(8px)}50%{transform:rotate(8deg) translateX(-12px) translateY(2px)}}
.phone-notch{position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:44%;height:30px;background:rgba(13,46,92,.95);backdrop-filter:blur(4px);border-radius:0 0 20px 20px;z-index:6;border:1px solid rgba(255,255,255,.08);border-top:0}
.phone-notch::before{content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);width:18%;height:6px;background:rgba(255,255,255,.15);border-radius:999px}
.phone-notch::after{content:'';position:absolute;top:16px;left:50%;transform:translateX(calc(-50% + 22px));width:7px;height:7px;border-radius:50%;background:rgba(245,166,35,.6);box-shadow:0 0 6px rgba(245,166,35,.3)}
.phone-screen{position:absolute;inset:0;overflow:hidden;border-radius:34px;background:linear-gradient(145deg, #0a1f3d, #143860);display:flex;align-items:center;justify-content:center}
.phone-screen::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg, rgba(255,255,255,.2) 0%, transparent 50%, rgba(245,166,35,.05) 100%);z-index:2;pointer-events:none;opacity:0;transition:opacity .5s ease}
.phone-mockup:hover .phone-screen::before{opacity:1}
.phone-screen img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.61,.36,1),filter .6s ease}
.phone-mockup:hover .phone-screen img{transform:scale(1.08);filter:brightness(1.05) contrast(1.05)}
.phone-home-indicator{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:100px;height:3px;background:rgba(255,255,255,.35);backdrop-filter:blur(2px);border-radius:999px;z-index:6}
.phone-mockup--side .phone-home-indicator{width:70px;height:2.5px;background:rgba(255,255,255,.25)}
.hero__photo-sticker{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:130%;height:130%;animation:spin 35s linear infinite;color:rgba(255,255,255,.08);z-index:1;pointer-events:none}
.hero__photo-wrap:hover .hero__photo-sticker{color:rgba(245,166,35,.2)}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.deco-tag{position:absolute;padding:.5rem .85rem;border-radius:999px;font-size:.8rem;font-weight:700;z-index:4;animation:float-tag 5s ease-in-out infinite;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);letter-spacing:-0.01em}
@keyframes float-tag{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.deco-tag--1{top:-2%;left:0%;background:rgba(245,166,35,.85);backdrop-filter:blur(8px);color:var(--c-white);border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 15px rgba(245,166,35,.3);animation-delay:0s}
.deco-tag--2{top:-2%;right:0%;background:rgba(13,46,92,.8);backdrop-filter:blur(8px);color:var(--c-white);border:1px solid rgba(255,255,255,.15);box-shadow:0 4px 15px rgba(13,46,92,.25);animation-delay:1.2s}
.deco-tag--3{bottom:-2%;left:0%;background:rgba(255,255,255,.75);backdrop-filter:blur(8px);color:var(--c-brand);border:1px solid rgba(13,46,92,.1);box-shadow:0 4px 15px rgba(13,46,92,.1);animation-delay:2.4s}
.deco-tag--4{bottom:-2%;right:-8%;background:rgba(245,166,35,.85);backdrop-filter:blur(8px);color:var(--c-white);border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 15px rgba(245,166,35,.3);animation-delay:3.6s}
.hero__metric{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;width:100%;max-width:380px}
.metric{padding:1rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:var(--r-md);text-align:center;transition:all .3s ease}
.metric:hover{background:var(--c-accent);color:var(--c-white);transform:translateY(-3px);box-shadow:0 6px 20px rgba(245,166,35,.25)}
.metric__num{display:block;font-family:var(--f-display);font-size:1.8rem;font-weight:700;line-height:1;margin-bottom:.25rem;color:var(--c-white)}
.metric:hover .metric__num{color:var(--c-white)}
.metric__label{display:block;font-size:.7rem;color:rgba(255,255,255,.65);font-weight:500;line-height:1.3}
.metric:hover .metric__label{color:rgba(255,255,255,.85)}
/* === WAVE === */
.wave-divider{width:100%;line-height:0;color:var(--bg-alt)}
.wave-divider svg{width:100%;height:50px;display:block}
.wave-divider--bottom{color:var(--c-brand);margin-top:-1px}
.wave-divider--top{color:var(--bg);margin-bottom:-1px;transform:scaleY(-1)}

/* === ABOUT === */
.about{background:var(--bg-alt)}
.about__grid{display:grid;grid-template-columns:1.4fr 1fr;gap:2.5rem;align-items:start}
.about__main{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:2.5rem}
.about__label{display:inline-block;font-family:var(--f-mono);font-size:.7rem;font-weight:600;letter-spacing:1.5px;color:var(--c-white);background:var(--c-brand);padding:.3rem .7rem;border-radius:6px;margin-bottom:1.5rem}
.about__description{font-size:1rem;line-height:1.75;color:var(--c-ink);margin-bottom:1.2rem}
.about__description--small{color:var(--c-mute);font-size:.9rem}
.about__description strong{color:var(--c-brand);font-weight:600}
.about__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:2rem 0}
.stat-card{padding:1.2rem 1rem;background:var(--bg-alt);border:1px solid var(--c-line);border-radius:var(--r-md);text-align:center;transition:all .3s ease}
.stat-card:hover{background:var(--c-brand);color:var(--c-white);transform:translateY(-3px)}
.stat-card:hover .stat-card__label{color:rgba(255,255,255,.85)}
.stat-card--accent{background:var(--c-accent);color:var(--c-white);border-color:var(--c-accent)}
.stat-card--accent .stat-card__label{color:rgba(255,255,255,.85)}
.stat-card--accent:hover{background:var(--c-brand);border-color:var(--c-brand)}
.stat-card__num{display:block;font-family:var(--f-display);font-size:1.8rem;font-weight:700;line-height:1;margin-bottom:.35rem;color:var(--c-brand)}
.stat-card:hover .stat-card__num{color:var(--c-white)}
.stat-card--accent .stat-card__num{color:var(--c-white)}
.stat-card__label{display:block;font-size:.7rem;color:var(--c-mute);font-weight:500;line-height:1.3}
.about__side{display:flex;flex-direction:column;gap:1.2rem}
.info-card{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:1.5rem}
.info-card--dark{background:var(--c-brand);color:var(--c-white);border-color:var(--c-brand)}
.info-card--dark .info-card__title{color:var(--c-white)}
.info-card--dark .info-card__text{color:rgba(255,255,255,.8)}
.info-card--dark .info-card__text strong{color:var(--c-accent)}
.info-card__title{font-family:var(--f-display);font-size:1rem;font-weight:700;margin-bottom:1rem;color:var(--c-brand)}
.info-card--dark .info-card__title{color:var(--c-white)}
.info-card__text{font-size:.9rem;line-height:1.7;color:var(--c-mute)}
.now-list{display:flex;flex-direction:column;gap:.5rem}
.now-list li{position:relative;padding-left:1.4rem;font-size:.88rem;line-height:1.6;list-style:none}
.now-list li::before{content:'';position:absolute;left:0;top:.55rem;width:8px;height:8px;background:var(--c-accent);border-radius:50%;flex-shrink:0}
.now-list li:nth-child(2)::before,.now-list li:nth-child(4)::before{background:var(--c-brand)}
.now-list strong{font-weight:600;color:var(--c-ink)}

/* === GDRIVE BUTTON (Certificates) === */
.cert__gdrive-wrap{display:flex;justify-content:flex-start;margin-bottom:1rem}
.cert__gdrive-btn{background:var(--bg-alt);color:var(--c-brand);border-color:var(--c-line)}
.cert__gdrive-btn:hover{background:var(--c-brand);color:var(--c-white);border-color:var(--c-brand);transform:translateY(-2px);box-shadow:0 6px 20px rgba(13,46,92,.15)}

/* === BENTO SKILLS === */
.skills{background:var(--bg)}
.bento{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.bento__cell{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:1.6rem;display:flex;flex-direction:column;gap:.8rem;position:relative;transition:all .3s ease;min-height:170px}
.bento__cell:hover{transform:translateY(-4px);box-shadow:0 8px 25px rgba(13,46,92,.08)}
.bento__cell--accent{background:var(--c-brand);color:var(--c-white);border-color:var(--c-brand)}
.bento__cell--accent .bento__text{color:rgba(255,255,255,.85)}
.bento__cell--dark{background:var(--c-ink);color:var(--c-white);border-color:var(--c-ink)}
.bento__icon{font-size:1.6rem}
.bento__title{font-family:var(--f-display);font-size:1.1rem;font-weight:700;letter-spacing:-0.01em;color:var(--c-brand)}
.bento__cell--accent .bento__title{color:var(--c-white)}
.bento__cell--dark .bento__title{color:var(--c-white)}
.bento__text{font-size:.85rem;line-height:1.55;color:var(--c-mute)}
.bento__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto}
.tag{display:inline-block;padding:.25rem .6rem;background:var(--bg-alt);border:1px solid var(--c-line);border-radius:8px;font-size:.75rem;font-weight:500;color:var(--c-mute);transition:all .2s ease}
.tag:hover{background:var(--c-brand);color:var(--c-white);border-color:var(--c-brand);transform:translateY(-2px)}
.tag--alt{background:transparent;border-style:dashed;font-style:italic}
.tag--light{background:rgba(255,255,255,.1);color:var(--c-white);border-color:rgba(255,255,255,.25)}
.tag--light:hover{background:var(--c-accent);color:var(--c-white);border-color:var(--c-accent)}

/* === PROJECT SHOT STACK === */
.project-row__visual--shots{overflow:hidden;position:relative;background:var(--c-brand)!important}
.project__shot-stack{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.project__shot{position:absolute;width:65%;height:auto;object-fit:contain;border-radius:var(--r-sm);border:2px solid var(--c-white);transition:all .4s cubic-bezier(.2,.7,.3,1);filter:drop-shadow(0 4px 12px rgba(0,0,0,.2))}
.project__shot--front{z-index:2;transform:rotate(-3deg) translateX(-4px)}
.project__shot--back{z-index:1;transform:rotate(6deg) translateX(8px) translateY(4px);opacity:.75;filter:brightness(.85) drop-shadow(0 4px 8px rgba(0,0,0,.2))}
.project-row__visual--shots:hover .project__shot--front{transform:rotate(0deg) translateX(0) scale(1.05)}
.project-row__visual--shots:hover .project__shot--back{transform:rotate(0deg) translateX(0) translateY(0) scale(1.05);opacity:1;filter:brightness(1) drop-shadow(0 6px 12px rgba(0,0,0,.25))}
.project-row--alt .project__shot{border-color:var(--c-white)}

/* === PROJECTS === */
.projects{background:var(--bg-alt)}
.projects__list{display:flex;flex-direction:column;gap:1.2rem}
.project-row{display:grid;grid-template-columns:80px 1fr 200px;gap:1.5rem;align-items:stretch;background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:1.5rem;transition:all .3s ease;position:relative;overflow:hidden}
.project-row:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(13,46,92,.08)}
.project-row--alt{background:var(--c-brand);color:var(--c-white);border-color:var(--c-brand)}
.project-row--alt .project-row__cat{color:var(--c-accent)}
.project-row--alt .pill{background:rgba(255,255,255,.1);color:var(--c-white);border-color:rgba(255,255,255,.25)}
.project-row--alt .pill:hover{background:var(--c-accent);border-color:var(--c-accent)}
.project-row--alt .project-row__desc{color:rgba(255,255,255,.75)}
.project-row--alt .project-row__meta{color:rgba(255,255,255,.55)}
.project-row__index{font-family:var(--f-mono);font-size:1.3rem;font-weight:600;color:var(--c-accent);display:flex;align-items:flex-start;padding-top:.3rem}
.project-row--alt .project-row__index{color:var(--c-accent)}
.project-row__main{display:flex;flex-direction:column;gap:.6rem}
.project-row__head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem}
.project-row__cat{font-family:var(--f-mono);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--c-brand)}
.project-row--alt .project-row__cat{color:var(--c-accent)}
.project-row__play{display:inline-flex;align-items:center;gap:.3rem;background:var(--c-accent);color:var(--c-white);padding:.25rem .65rem;border-radius:8px;font-size:.73rem;font-weight:600;border:1.5px solid var(--c-accent);transition:all .2s}
.project-row__play:hover{background:var(--c-brand);border-color:var(--c-brand)}
.project-row__title{font-family:var(--f-display);font-size:1.25rem;font-weight:700;letter-spacing:-0.01em;line-height:1.25;color:var(--c-brand)}
.project-row--alt .project-row__title{color:var(--c-white)}
.project-row__desc{font-size:.9rem;line-height:1.6;color:var(--c-mute)}
.project-row__meta{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.75rem;color:var(--c-mute);font-family:var(--f-mono)}
.project-row__tags{display:flex;flex-wrap:wrap;gap:.35rem}
.pill{display:inline-block;padding:.2rem .55rem;background:var(--bg-alt);border:1px solid var(--c-line);border-radius:8px;font-size:.7rem;font-weight:500;color:var(--c-mute);transition:all .2s}
.pill:hover{background:var(--c-brand);color:var(--c-white);border-color:var(--c-brand)}
.project-row__visual{border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:3.5rem;border:1px solid var(--c-line)}
.project-row__visual[data-color="a"]{background:linear-gradient(135deg,#0D2E5C,#1a4a8a);color:#fff}
.project-row__visual[data-color="b"]{background:linear-gradient(135deg,#F5A623,#f7c45a);color:#fff}
.project-row__visual[data-color="c"]{background:linear-gradient(135deg,#1F2937,#374151);color:#fff}
.project-row__visual[data-color="d"]{background:linear-gradient(135deg,#0D2E5C,#2563eb);color:#fff}
.project-row__visual[data-color="e"]{background:linear-gradient(135deg,#374151,#4b5563);color:#F5A623}

/* === CERTIFICATES === */
.certificates{background:var(--bg)}
.cert__layout{display:grid;grid-template-columns:1fr 1.5fr;gap:2rem;align-items:start}
.cert__featured{display:flex;flex-direction:column;gap:1.2rem;position:sticky;top:90px}
.cert__featured-card{background:var(--bg-alt);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:1.5rem;position:relative}
.cert__featured-card--alt{background:var(--c-brand);color:var(--c-white);border-color:var(--c-brand)}
.cert__badge-big{position:absolute;top:-16px;right:20px;width:44px;height:44px;background:var(--c-accent);color:var(--c-white);border:2px solid var(--c-white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:700}
.cert__featured-card--alt .cert__badge-big{background:var(--c-accent);color:var(--c-white);border-color:var(--c-white)}
.cert__featured-title{font-family:var(--f-display);font-size:1.1rem;font-weight:700;margin-bottom:.4rem;line-height:1.2;padding-right:50px;color:var(--c-brand)}
.cert__featured-card--alt .cert__featured-title{color:var(--c-white)}
.cert__featured-org{font-size:.82rem;color:var(--c-mute);margin-bottom:.2rem}
.cert__featured-card--alt .cert__featured-org{color:rgba(255,255,255,.7)}
.cert__featured-name{font-size:.75rem;font-family:var(--f-mono);color:var(--c-accent);text-transform:uppercase;letter-spacing:1px;margin-bottom:1rem;font-weight:600}
.cert__featured-card--alt .cert__featured-name{color:var(--c-accent)}
.cert__score-badge{display:inline-block;background:var(--c-brand);color:var(--c-white);padding:.25rem .65rem;border-radius:8px;font-size:.78rem;font-weight:600}
.cert__score-badge--alt{background:var(--c-accent);color:var(--c-white)}
.cert__list-title{font-family:var(--f-display);font-size:1.1rem;font-weight:700;margin-bottom:1rem;color:var(--c-brand)}
.cert__items{display:flex;flex-direction:column;gap:.4rem}
.cert__item{display:flex;align-items:flex-start;gap:.7rem;padding:.8rem 1rem;background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-md);font-size:.85rem;line-height:1.4;transition:all .25s ease}
.cert__item:hover{background:var(--c-brand);color:var(--c-white);transform:translateX(6px);border-color:var(--c-brand)}
.cert__item:hover .cert__check{color:var(--c-accent)}
.cert__check{color:var(--c-brand);font-weight:700;font-size:1rem;flex-shrink:0;line-height:1.3}

/* === TIMELINE === */
.experience{background:var(--bg-alt)}
.timeline{position:relative;max-width:800px;margin:0;padding-left:3.2rem}
.timeline::before{content:'';position:absolute;left:1.1rem;top:0;bottom:0;width:2px;background:var(--c-line)}
.timeline__item{position:relative;padding-bottom:2.2rem}
.timeline__pin{position:absolute;left:-3.2rem;top:0;width:2.4rem;height:2.4rem;background:var(--c-white);border:1.5px solid var(--c-line);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;z-index:1}
.timeline__pin--accent{background:var(--c-accent);color:var(--c-white);border-color:var(--c-accent)}
.timeline__date{display:inline-block;font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.5px;color:var(--c-mute);margin-bottom:.4rem;text-transform:uppercase}
.timeline__title{font-family:var(--f-display);font-size:1.2rem;font-weight:700;letter-spacing:-0.01em;margin-bottom:.15rem;color:var(--c-brand)}
.timeline__org{font-size:.9rem;color:var(--c-mute);font-weight:500;margin-bottom:.5rem}
.timeline__chip{display:inline-block;background:var(--c-accent);color:var(--c-white);padding:.25rem .7rem;border-radius:8px;font-size:.78rem;font-weight:600;margin-top:.5rem}
.timeline__list{padding-left:1.2rem;list-style:disc;margin-top:.4rem}
.timeline__list li{color:var(--c-ink);font-size:.88rem;margin-bottom:.3rem;line-height:1.55}
.timeline__content{background:var(--c-white);padding:1.5rem;border-radius:var(--r-md);border:1px solid var(--c-line);transition:all .3s ease;margin-left:.5rem}
.timeline__content:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(13,46,92,.08)}

/* === CONTACT === */
.contact{background:var(--c-brand);color:var(--c-white)}
.contact .section__title{color:var(--c-white)}
.contact .section__title em{color:var(--c-accent)}
.contact .section__subtitle{color:rgba(255,255,255,.65)}
.contact .section__num{color:var(--c-accent)}
.contact__layout{display:grid;grid-template-columns:1fr 1.1fr;gap:2.5rem;align-items:start}
.contact__channels{display:flex;flex-direction:column;gap:.7rem}
.channel{display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);transition:all .3s ease;color:var(--c-white)}
.channel:hover{background:var(--c-accent);color:var(--c-white);border-color:var(--c-accent);transform:translateY(-3px);box-shadow:0 6px 20px rgba(245,166,35,.2)}
.channel__icon{font-size:1.3rem;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border-radius:var(--r-sm);flex-shrink:0}
.channel:hover .channel__icon{background:rgba(255,255,255,.15)}
.channel__label{display:block;font-family:var(--f-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:.1rem;opacity:.7}
.channel__value{display:block;font-size:.9rem;font-weight:500;word-break:break-word}
.channel__arrow{margin-left:auto;opacity:.4;transition:all .3s ease}
.channel:hover .channel__arrow{opacity:1;transform:translateX(4px)}
.channel--featured{background:rgba(245,166,35,.12);border-color:var(--c-accent)}
.contact__form-wrap{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:2rem}
.contact__form-title{font-family:var(--f-display);font-size:1.2rem;font-weight:700;color:var(--c-brand);margin-bottom:1.5rem}
.contact__form{display:flex;flex-direction:column;gap:1rem}
.contact__field{display:flex;flex-direction:column;gap:.35rem}
.contact__field label{font-family:var(--f-mono);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--c-mute)}
.contact__field input,.contact__field textarea{padding:.8rem 1rem;border:1.5px solid var(--c-line);border-radius:var(--r-sm);background:var(--c-white);font-size:.92rem;transition:all .2s ease;outline:none;font-family:var(--f-body);color:var(--c-ink);resize:vertical}
.contact__field input:focus,.contact__field textarea:focus{border-color:var(--c-brand);box-shadow:0 0 0 3px rgba(13,46,92,.08)}
.contact__field input::placeholder,.contact__field textarea::placeholder{color:#b0b7c3}
.contact__form-status{font-size:.85rem;min-height:1.2rem;margin-top:.5rem;font-weight:500}
.contact__form-status.success{color:var(--c-accent)}
.contact__form-status.error{color:#e74c3c}

/* === FOOTER === */
.footer{background:var(--c-accent);padding:2rem 0;border-top:1px solid rgba(255,255,255,.12)}
.footer__grid{display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center}
.footer__brand{display:flex;flex-direction:column;gap:.2rem}
.footer__logo{font-family:var(--f-display);font-weight:700;font-size:1.1rem;color:var(--c-white);display:inline-block;letter-spacing:-0.01em}
.footer__tagline{font-size:.78rem;color:rgba(255,255,255,.65);font-weight:500}
.footer__links{display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap}
.footer__link{font-size:.85rem;font-weight:500;color:rgba(255,255,255,.75);padding:.3rem .4rem;border-radius:6px;transition:all .2s ease}
.footer__link:hover{color:var(--c-white);background:rgba(255,255,255,.1)}
.footer__dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.3);display:inline-block}
.footer__aside{display:flex;align-items:center;gap:1.2rem}
.footer__social{display:flex;align-items:center;gap:.4rem}
.footer__social-link{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.2);transition:all .25s ease}
.footer__social-link:hover{background:var(--c-white);color:var(--c-brand);border-color:var(--c-white);transform:translateY(-2px)}
.footer__copy{font-size:.75rem;color:rgba(255,255,255,.5);white-space:nowrap}

@media (max-width:768px){
  .footer{padding:1.8rem 0}
  .footer__grid{grid-template-columns:1fr;gap:1.2rem;text-align:center}
  .footer__brand{align-items:center}
  .footer__links{justify-content:center}
  .footer__aside{flex-direction:column;gap:.6rem;align-items:center}
}

/* === LIGHTBOX === */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, .88);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  cursor: pointer;
  padding: 1rem;
}
.lightbox.show {
  opacity: 1;
  visibility: visible;
}
.lightbox__img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  cursor: default;
  transition: transform .3s ease;
}
.lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-size: 2.5rem;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  opacity: .7;
  transition: opacity .2s;
  z-index: 1;
}
.lightbox__close:hover {
  opacity: 1;
}
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.5);
  color: #fff;
  border: none;
  font-size: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .6;
  transition: opacity .2s, background .2s;
  z-index: 1;
  line-height: 1;
}
.lightbox__nav:hover {
  opacity: 1;
  background: rgba(0,0,0,.8);
}
.lightbox__prev { left: 1rem; }
.lightbox__next { right: 1rem; }
.lightbox__counter {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.7);
  font-family: var(--f-mono);
  font-size: .85rem;
  letter-spacing: 1px;
  z-index: 1;
}
@media (max-width: 768px) {
  .lightbox__nav {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }
  .lightbox__prev { left: .5rem; }
  .lightbox__next { right: .5rem; }
}

/* === SCROLL TOP === */
.scroll-top{position:fixed;bottom:1.5rem;right:1.5rem;width:44px;height:44px;border-radius:12px;background:var(--c-brand);color:var(--c-white);border:1px solid var(--c-brand);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(20px);transition:all .3s ease;z-index:99;cursor:pointer}
.scroll-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.scroll-top:hover{background:var(--c-accent);border-color:var(--c-accent);transform:translateY(-4px);box-shadow:0 6px 20px rgba(245,166,35,.25)}

/* === REVEAL === */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.is-visible{opacity:1;transform:translateY(0)}

/* === RESPONSIVE === */
@media (max-width:1024px){
  .hero__container{grid-template-columns:1fr;gap:3rem;text-align:left}
  .hero__photo-wrap{max-width:420px}
  .phone-mockup--center{max-width:220px}
  .phone-mockup--side{max-width:150px}
  .about__grid{grid-template-columns:1fr}
  .contact__layout{grid-template-columns:1fr}
  .bento{grid-template-columns:repeat(2,1fr)}
  .project-row{grid-template-columns:60px 1fr;gap:1rem}
  .project-row__visual{display:none}
  .project-row__visual--shots{display:flex}
  .cert__layout{grid-template-columns:1fr}
  .cert__featured{position:static}
}
@media (max-width:768px){
  :root{--section-py:1.5rem;--gutter:1.25rem}
  .nav__menu{position:fixed;top:0;right:-100%;width:80%;max-width:340px;height:100vh;background:var(--c-white);border-left:1px solid var(--c-line);padding:5rem 2rem 2rem;transition:right .4s cubic-bezier(.2,.7,.3,1);z-index:99;display:flex;flex-direction:column}
  .info-card{padding:1.2rem}
  .now-list{gap:.5rem}
  .now-list li{font-size:.85rem;gap:.5rem}
  .nav__menu .nav__link{color:var(--c-mute)}
  .nav__menu .nav__link:hover{color:var(--c-brand);background:rgba(13,46,92,.05)}
  .nav__menu .nav__link.active-link{background:var(--c-brand);color:var(--c-white)}
  .nav__menu.show-menu{right:0}
  .nav__list{flex-direction:column;align-items:stretch;gap:.4rem;width:100%}
  .nav__link{padding:.85rem 1rem;font-size:1rem}
  .nav__toggle,.nav__close{display:flex}
  .nav__close{position:absolute;top:1rem;right:1rem;width:38px;height:38px;align-items:center;justify-content:center;color:var(--c-ink)}
  body.no-scroll{overflow:hidden}
  .about__stats{grid-template-columns:repeat(2,1fr)}
  .footer__container{grid-template-columns:1fr;text-align:center}
  .footer__col--right{text-align:center}
  .hero__name{font-size:clamp(2.2rem,10vw,3.2rem)}
  .hero__photo-wrap{max-width:380px;gap:.6rem}
  .phone-mockup--center{max-width:200px}
  .phone-mockup--side{max-width:130px}
  .deco-tag{font-size:.7rem;padding:.35rem .65rem}
  .timeline{padding-left:2.5rem}
  .timeline__pin{left:-2.5rem;width:2rem;height:2rem;font-size:.85rem}
  .timeline__content{margin-left:.5rem}
}
@media (max-width:520px){
  .hero__buttons{flex-direction:column;align-items:stretch}
  .hero__buttons .btn{justify-content:center}
  .bento{grid-template-columns:1fr}
  .project-row{grid-template-columns:1fr}
  .project-row__index{font-size:1.1rem}
  .section__title{font-size:clamp(1.8rem,8vw,2.4rem)}
  .hero__photo-wrap{max-width:340px;gap:.4rem;padding:1.5rem 0}
  .phone-mockup--center{max-width:170px}
  .phone-mockup--side{max-width:110px}
  .phone-notch{height:24px;border-radius:0 0 14px 14px}
  .phone-notch::before{height:4px;top:5px}
  .phone-notch::after{top:13px;width:5px;height:5px}
  .phone-mockup--left{transform:rotate(-8deg) translateX(8px) translateY(6px)}
  .phone-mockup--right{transform:rotate(8deg) translateX(-8px) translateY(6px)}
  .deco-tag{font-size:.65rem;padding:.3rem .5rem}
  .deco-tag--2{display:none}
  .deco-tag--3{display:none}
}