/* =========================
   Global Reset & Base Styles
========================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  --brand:#398FBA;
  --ink:#1f1f1f;
  --accent:#FF6C63;
}

body{
  font-family:'Montserrat',sans-serif;
  overflow-x:hidden;
  color:var(--ink);
}

/* =========================
   Header
========================= */
.header{
  position:fixed; inset:0 auto auto 0; width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem 1rem;
  transition:all .4s ease;
  z-index:1001;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  animation:fadeInDown .6s ease-out;
}
.header.scrolled{
  background:rgba(255,255,255,.97);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  padding:.6rem 1rem;
}

/* =========================
   Logo
========================= */
.logo img{
  height:130px;
  transition:transform .3s ease, height .35s ease;
}
.header.scrolled .logo img{ height:100px; }
.logo img:hover{ transform:scale(1.05); }

/* =========================
   Navigation Links
========================= */
.nav-links{
  display:flex; gap:2rem; flex:1; justify-content:center;
  transition:opacity .4s ease, transform .4s ease;
  font-weight: 800;
}
.header.scrolled .nav-links{ opacity:.9; transform:translateY(-2px); }

.nav-links a{
  position:relative; display:inline-block; text-decoration:none;
  color:var(--ink); font-weight:500;
  opacity:0; transform:translateY(20px);
  transition:color .3s ease;
  animation:navFadeSlide .6s ease forwards;
  animation-delay:calc(var(--i) * .15s);
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-4px;
  width:0%; height:2px; background:var(--accent);
  transition:width .3s ease;
}
.nav-links a.active{ color:var(--brand); font-weight:700; }
.nav-links a.active::after{ width:100%; }
.header .nav-links a:not(.active):hover,
.header .nav-links a:not(.active):focus-visible{ color:var(--ink); }
.header .nav-links a:hover::after,
.header .nav-links a:focus-visible::after{ width:100%; animation:bounceLine .4s ease; }

/* =========================
   Switch to Dev button
========================= */
.web-dev-btn{
  --btn-radius:10px;

  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;

  padding:10px 14px;
  border:2px solid var(--brand);
  border-radius:var(--btn-radius);
  background:#fff; color:var(--brand);
  font-weight:700; line-height:1.08; text-decoration:none;
  transition:box-shadow .2s ease, transform .2s ease, background-color .2s ease, color .2s ease;
}
.web-dev-btn span{ display:block; text-align:center; text-wrap:balance; }
.web-dev-btn__icon{ width:18px; height:18px; flex:0 0 18px; transition:transform .2s ease; }

/* gradient sweep */
.web-dev-btn::before{
  content:""; position:absolute; inset:0; border-radius:var(--btn-radius);
  background:linear-gradient(90deg, rgba(57,143,186,.25) 0%, rgba(245,245,245,.4) 50%, rgba(255,108,99,.25) 100%);
  transform:translateX(-110%); transition:transform .28s ease; z-index:0; pointer-events:none;
}
@media (hover:hover){
  .web-dev-btn:hover::before{ transform:translateX(0); }
  .web-dev-btn:hover .web-dev-btn__icon{ transform:translateX(2px); }
}
.web-dev-btn:focus-visible::before{ transform:translateX(0); }
.web-dev-btn:focus{ outline:none; box-shadow:0 0 0 3px rgba(22,92,125,.25); }
.web-dev-btn:active{ transform:translateY(1px); }

/* =========================
   Hamburger, new animations
========================= */
.hamburger{
  display:none;                               /* shown on mobile */
  position:relative;
  flex-direction:column; justify-content:center; align-items:center;
  gap:6px; cursor:pointer; z-index:1002;
  width:42px; height:42px; border-radius:10px;
  transition:transform .28s ease, background-color .28s ease;
}
@media (hover:hover){
  .hamburger:hover{ background-color:rgba(22,92,125,.06); transform:translateY(-1px); }
}

/* pulse ring when toggled */
.hamburger::after{
  content:""; position:absolute; inset:2px;
  border:2px solid var(--brand); border-radius:10px;
  opacity:0; transform:scale(.6); pointer-events:none;
}
.hamburger.active::after{ animation:hbPulse .55s ease-out forwards; }

/* bars */
.hamburger span{
  width:28px; height:3px; background:var(--brand); border-radius:2px;
  transform-origin:center;
  transition:
    transform .42s cubic-bezier(.2,.7,.2,1.1),
    opacity .25s ease,
    width .28s ease,
    background-color .25s ease;
}
/* equalizer-like hover */
@media (hover:hover){
  .hamburger:hover span:nth-child(1){ transform:translateY(-1px) scaleX(.92); }
  .hamburger:hover span:nth-child(2){ transform:scaleX(1.08); }
  .hamburger:hover span:nth-child(3){ transform:translateY(1px) scaleX(.92); }
}

/* stagger for nicer morph */
.hamburger span:nth-child(1),
.hamburger span:nth-child(3){ transition-delay:.04s; }
.hamburger span:nth-child(2){ transition-delay:0s; }
.hamburger.active span:nth-child(1),
.hamburger.active span:nth-child(3){ transition-delay:0s; }
.hamburger.active span:nth-child(2){ transition-delay:.04s; }

/* morph to X plus quick spin */
.hamburger.active{ animation:hbSpin .42s ease-out; }
.hamburger.active span:nth-child(1){ transform:rotate(45deg) translate(5px,5px); }
.hamburger.active span:nth-child(2){ opacity:0; transform:translateX(-12px) scaleX(.6); }
.hamburger.active span:nth-child(3){ transform:rotate(-45deg) translate(6px,-6px); }

/* =========================
   Mobile Menu
========================= */
.mobile-menu{
  position:fixed; top:0; right:0; width:100%; height:100%;
  background:var(--brand);
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  padding:88px 24px 24px; gap:1rem;
  opacity:0; pointer-events:none; transform:translateX(100%);
  transition:opacity .25s ease, transform .35s ease;
  z-index:2147483647; min-height:100dvh;
}
.mobile-menu.show{ opacity:1; pointer-events:auto; transform:translateX(0); }

.mobile-menu .nav-links{
  width:100%; max-width:360px; margin:0 auto; list-style:none;
  display:flex; flex-direction:column; align-items:stretch; gap:12px;
}
.mobile-menu .nav-links li{ width:100%; }

.mobile-menu a,
.mobile-menu .nav-links a{
  display:block; width:100%; max-width:360px;
  padding:14px 0; font-size:1.25rem; font-weight:400; color:#fff;
  text-decoration:none; border-bottom:1px solid rgba(255,255,255,.2);
  opacity:0; transform:translateY(10px); transition:color .3s ease;
}
.mobile-menu.show a,
.mobile-menu.show .nav-links a{ animation:menuItemIn .35s ease forwards; }
.mobile-menu.show a:nth-child(1){ animation-delay:.05s; }
.mobile-menu.show a:nth-child(2){ animation-delay:.12s; }
.mobile-menu.show a:nth-child(3){ animation-delay:.19s; }
.mobile-menu.show a:nth-child(4){ animation-delay:.26s; }

.mobile-menu a:hover{ color:var(--accent); }
.mobile-menu a.active,
.mobile-menu .nav-links a.active{ color:#fff; font-weight:700; }

/* hide web-dev button in overlay */
.mobile-menu .web-dev-btn{ display:none !important; }

/* close button */
.mobile-menu .close-btn{
  position:absolute; top:max(20px, env(safe-area-inset-top));
  right:max(25px, env(safe-area-inset-right));
  font-size:2.5rem; color:#fff; cursor:pointer;
  transition:transform .3s ease, color .3s ease;
}
.mobile-menu .close-btn:hover{ transform:rotate(90deg) scale(1.2); color:var(--accent); }

/* body state when menu is open */
.menu-open{ overflow:hidden; }

/* =========================
   Mobile Responsive
   Logo + hamburger on top row
   Button on its own row
========================= */
@media (max-width:768px){
  .nav-links{ display:none; }
  .logo img{ height:100px; }

  .header{
    padding:.9rem 1rem;
    flex-wrap:wrap;                          /* allow second row */
    align-items:center;
    justify-content:space-between;           /* logo left, hamburger right */
    row-gap:10px;
  }

  .logo{ order:1; flex:0 0 auto; }
  .hamburger{ order:2; display:flex; margin-left:auto; position:static !important; }

  .web-dev-btn{
    order:3;                                 /* second row */
    flex:1 1 100%; width:100%;
    max-width:520px; margin:0 auto;
    padding:10px 12px; border-radius:10px;
    justify-content:center; text-align:center; text-wrap:balance;
  }
  .web-dev-btn__icon{ width:18px; height:18px; transform:none !important; }
}

/* extra small phones */
@media (max-width:420px){
  .web-dev-btn{ font-size:.95rem; padding:9px 10px; max-width:none; }
  .logo img{ height:110px; }
}

/* =========================
   Animations
========================= */
@keyframes fadeInDown{ from{opacity:0; transform:translateY(-20px)} to{opacity:1; transform:translateY(0)} }
@keyframes navFadeSlide{ from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:translateY(0)} }
@keyframes bounceLine{ 0%{transform:scaleX(0)} 50%{transform:scaleX(1.2)} 100%{transform:scaleX(1)} }
@keyframes menuItemIn{ to{ opacity:1; transform:translateY(0) } }

/* hamburger extras */
@keyframes hbPulse{ 0%{opacity:.35; transform:scale(.6)} 70%{opacity:.18; transform:scale(1.28)} 100%{opacity:0; transform:scale(1.55)} }
@keyframes hbSpin{ 0%{transform:rotate(0deg)} 100%{transform:rotate(90deg)} }

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .hamburger, .hamburger *{ animation:none !important; transition:none !important; }
}

/* =========================
   Helpful defaults
========================= */
[id]{ scroll-margin-top:calc(64px + 16px); }

.header .nav-links a{
  position:relative; display:inline-block; color:#1f1f1f;
  padding:6px 2px; text-decoration:none;
}
.header .nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px;
  height:2px; background:linear-gradient(90deg,#165C7D,#FF6C63);
  transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
}
.header .nav-links a:hover::after,
.header .nav-links a.active::after{ transform:scaleX(1); }

.mobile-menu .nav-links li:last-child a{ border-bottom:0; }


/* Equal spacing for logo and button edges */
.logo {
  margin-left: 1rem;       /* same as header horizontal padding */
}

.web-dev-btn {
  margin-right: 1rem;      /* same offset as logo */
}