/* ═══════════════════════════════════════════════════
   SCROLL PROGRESS BAR (A)
   ═══════════════════════════════════════════════════ */
.scroll-progress{
  position:fixed;top:0;left:0;z-index:100;
  height:3px;width:0;
  background:linear-gradient(90deg,var(--accentA),var(--accentB),var(--accentC));
  transition:none;
  pointer-events:none;
}

/* ═══════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════ */
.topnav{
  position:fixed;
  top:12px;
  left:50%;
  right:auto;
  width:min(1160px,calc(100% - 26px));
  z-index:90;
  border:1px solid rgba(120,146,214,.28);
  border-radius:26px;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  background:linear-gradient(110deg,rgba(6,11,26,.92),rgba(9,17,34,.78) 46%,rgba(18,24,44,.9));
  box-shadow:0 26px 55px rgba(4,8,20,.45),0 4px 18px rgba(40,84,193,.18),inset 0 1px 0 rgba(255,255,255,.18);
  transform:translate(-50%,-130%);
  opacity:0;
  transition:transform .72s var(--ease-out-expo),opacity .72s var(--ease-out-expo),box-shadow .3s ease,border-color .3s ease;
  overflow:hidden;
  background-clip:padding-box;
}
.topnav::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:linear-gradient(120deg,rgba(64,126,255,.25),rgba(255,95,52,.18),rgba(255,170,62,.22),rgba(64,126,255,.22));
  filter:blur(26px);
  opacity:.55;
  z-index:-1;
  pointer-events:none;
}
.topnav::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(90deg,rgba(255,255,255,.07),transparent 26%,transparent 74%,rgba(255,255,255,.04)),radial-gradient(circle at 14% -32%,rgba(82,138,255,.2),transparent 54%),radial-gradient(circle at 88% 135%,rgba(255,115,67,.14),transparent 56%);
  pointer-events:none;
}
.topnav.visible{transform:translate(-50%,0);opacity:1}

.topnav-inner{
  position:relative;
  max-width:unset;
  margin:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;
  gap:14px;
}
.topnav-start,
.topnav-actions{
  display:flex;
  align-items:center;
  gap:12px;
}
.topnav-start{min-width:0}
.topnav-actions{margin-left:auto}
.brand{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 14px;
  border-radius:15px;
  font-weight:700;
  text-decoration:none;
  color:#e9f0ff;
  background:linear-gradient(125deg,rgba(64,126,255,.2),rgba(255,110,70,.16));
  border:1px solid rgba(132,161,232,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
  background-clip:padding-box;
  white-space:nowrap;
  transition:transform .28s var(--ease-out-quart),border-color .25s ease,background .25s ease;
}
.brand:hover{
  transform:translateY(-1px);
  border-color:rgba(255,182,122,.55);
  background:linear-gradient(125deg,rgba(64,126,255,.26),rgba(255,120,75,.22));
}
.brand-dot{
  width:9px;height:9px;border-radius:50%;
  background:linear-gradient(135deg,#4693ff 0%,#ff6a43 70%,#ffb241 100%);
  box-shadow:0 0 0 6px rgba(70,147,255,.12),0 0 16px rgba(255,118,65,.42);
}
.theme-toggle{
  position:relative;
  width:58px;
  height:42px;
  flex:0 0 auto;
  border-radius:16px;
  border:1px solid rgba(132,161,232,.35);
  background:linear-gradient(125deg,rgba(15,25,48,.88),rgba(20,31,58,.76));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 24px rgba(6,12,26,.24);
  color:#dce7ff;
  cursor:pointer;
  padding:0;
  overflow:hidden;
  background-clip:padding-box;
  transition:transform .28s var(--ease-out-quart),border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
.theme-toggle:hover{
  transform:translateY(-1px);
  border-color:rgba(162,190,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 16px 28px rgba(10,18,36,.3);
}
.theme-toggle-rail{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
}
.theme-toggle-thumb{
  position:absolute;
  left:5px;
  top:5px;
  width:30px;
  height:30px;
  border-radius:12px;
  background:linear-gradient(135deg,rgba(72,133,255,.5),rgba(255,146,96,.4));
  box-shadow:0 10px 22px rgba(57,114,244,.26),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .35s var(--ease-out-expo),background .25s ease,box-shadow .25s ease;
}
.theme-icon{
  position:absolute;
  top:50%;
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform:translateY(-50%);
  pointer-events:none;
  transition:opacity .25s ease,color .25s ease,transform .35s var(--ease-out-expo);
}
.theme-icon-sun{
  right:10px;
  opacity:.35;
  color:#7f8baa;
}
.theme-icon-moon{
  left:10px;
  opacity:.96;
  color:#eef4ff;
}
html[data-theme="light"] .theme-toggle{
  border-color:rgba(118,145,196,.24);
  background:linear-gradient(125deg,rgba(255,255,255,.9),rgba(242,247,255,.78));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.94),0 12px 24px rgba(126,146,181,.16);
  color:#5d6f8e;
}
html[data-theme="light"] .theme-toggle:hover{
  border-color:rgba(104,134,190,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98),0 16px 28px rgba(126,146,181,.22);
}
html[data-theme="light"] .theme-toggle-thumb{
  transform:translateX(18px);
  background:linear-gradient(135deg,rgba(255,213,122,.95),rgba(255,145,100,.82));
  box-shadow:0 10px 22px rgba(255,156,98,.22),inset 0 1px 0 rgba(255,255,255,.48);
}
html[data-theme="light"] .theme-icon-sun{
  opacity:1;
  color:#de7f33;
  transform:translateY(-50%) scale(1.04);
}
html[data-theme="light"] .theme-icon-moon{
  opacity:.28;
  color:#6b7a9f;
}
.nav-links{
  position:relative;
  display:flex;
  gap:8px;
  padding:6px;
  border-radius:18px;
  border:1px solid rgba(128,148,208,.3);
  background:linear-gradient(120deg,rgba(13,21,44,.72),rgba(8,13,29,.66));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 22px rgba(2,6,20,.3);
  overflow:hidden;
  background-clip:padding-box;
}
.nav-links::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(circle at 10% 0%,rgba(77,136,255,.2),transparent 42%),radial-gradient(circle at 88% 100%,rgba(255,122,76,.16),transparent 46%);
}
.nav-link{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:10px 18px;
  border-radius:12px;
  color:#a8b7dc;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
  border:1px solid transparent;
  background-clip:padding-box;
  transition:color .25s ease,transform .3s var(--ease-out-quart),border-color .25s ease,background .25s ease,box-shadow .25s ease;
  cursor:pointer;
}
.nav-link::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:linear-gradient(125deg,rgba(80,145,255,.16),rgba(255,108,66,.14),rgba(255,171,75,.13));
  opacity:0;
  transition:opacity .24s ease;
  z-index:-1;
}
.nav-link:hover{
  color:#eef4ff;
  transform:translateY(-2px);
  border-color:rgba(153,184,255,.38);
  box-shadow:0 8px 16px rgba(39,88,200,.22);
}
.nav-link:hover::before{opacity:1}
.nav-link.active{
  color:#fff;
  border-color:rgba(255,186,133,.58);
  background:linear-gradient(122deg,rgba(63,122,255,.35),rgba(255,103,66,.36),rgba(255,159,58,.3));
  box-shadow:0 12px 22px rgba(255,103,66,.22),0 8px 18px rgba(53,107,241,.26),inset 0 1px 0 rgba(255,255,255,.35);
}
.nav-link.active::before{opacity:0}
.nav-link:active{transform:translateY(0) scale(.98)}
.brand:focus-visible,
.theme-toggle:focus-visible,
.nav-link:focus-visible,
.btn-mag:focus-visible,
.btn-ghost:focus-visible,
.project-card:focus-visible,
.stat-link:focus-visible,
.hamburger:focus-visible,
.contact-close:focus-visible,
.mob-link:focus-visible,
.contact-send:focus-visible{
  outline:2px solid var(--accentB);
  outline-offset:3px;
}
html[data-theme="light"] .topnav{
  border-color:rgba(120,145,191,.26);
  background:linear-gradient(110deg,rgba(255,255,255,.86),rgba(248,250,255,.82) 46%,rgba(240,246,255,.9));
  box-shadow:0 26px 55px rgba(130,147,182,.18),0 4px 18px rgba(62,116,210,.12),inset 0 1px 0 rgba(255,255,255,.88);
}
html[data-theme="light"] .topnav::before{
  background:linear-gradient(120deg,rgba(74,108,255,.12),rgba(255,138,101,.08),rgba(255,193,93,.12),rgba(74,108,255,.08));
  opacity:.72;
}
html[data-theme="light"] .topnav::after{
  background:
    linear-gradient(90deg,rgba(255,255,255,.58),transparent 24%,transparent 76%,rgba(255,255,255,.42)),
    radial-gradient(circle at 14% -32%,rgba(74,108,255,.12),transparent 54%),
    radial-gradient(circle at 88% 135%,rgba(255,138,101,.1),transparent 56%);
}
html[data-theme="light"] .brand{
  color:#18304d;
  background:linear-gradient(125deg,rgba(255,255,255,.86),rgba(242,247,255,.74));
  border-color:rgba(113,140,196,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 24px rgba(120,145,188,.14);
}
html[data-theme="light"] .brand:hover{
  border-color:rgba(255,153,110,.38);
  background:linear-gradient(125deg,rgba(255,255,255,.94),rgba(239,246,255,.82));
}
html[data-theme="light"] .nav-links{
  border-color:rgba(122,145,196,.22);
  background:linear-gradient(120deg,rgba(255,255,255,.82),rgba(244,247,255,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 10px 22px rgba(130,150,185,.14);
}
html[data-theme="light"] .nav-link{
  color:#566681;
}
html[data-theme="light"] .nav-link:hover{
  color:#20314f;
  border-color:rgba(122,154,217,.3);
  box-shadow:0 8px 16px rgba(108,140,201,.14);
}
html[data-theme="light"] .nav-link.active{
  color:#fff;
  border-color:rgba(255,171,122,.42);
  background:linear-gradient(122deg,rgba(74,108,255,.62),rgba(255,122,76,.52),rgba(255,171,75,.44));
  box-shadow:0 12px 22px rgba(118,142,214,.18),0 8px 18px rgba(255,124,82,.16),inset 0 1px 0 rgba(255,255,255,.42);
}

/* ═══════════════════════════════════════════════════
   B. PAGE TRANSITION OVERLAY
   ═══════════════════════════════════════════════════ */
.page-transition{
  position:fixed;inset:0;z-index:200;
  pointer-events:none;
  display:flex;
}
.page-transition .slab{
  flex:1;
  background:var(--bg0);
  transform:scaleY(0);
  transform-origin:bottom;
}
.page-transition.enter .slab{
  animation:slabUp .55s var(--ease-out-expo) forwards;
  animation-delay:var(--d);
}
.page-transition.exit .slab{
  transform:scaleY(1);
  transform-origin:top;
  animation:slabDown .55s var(--ease-out-expo) forwards;
  animation-delay:var(--d);
}
@keyframes slabUp{
  from{transform:scaleY(0);transform-origin:bottom}
  to{transform:scaleY(1);transform-origin:bottom}
}
@keyframes slabDown{
  from{transform:scaleY(1);transform-origin:top}
  to{transform:scaleY(0);transform-origin:top}
}

/* ═══════════════════════════════════════════════════
   PAGES CONTAINER
   ═══════════════════════════════════════════════════ */
.page{
  display:none;
  min-height:100vh;
}
.page.active{display:block}

/* ═══════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════ */
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
section{padding:80px 0}