*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,sans-serif;
  background:#f6f8fb;
  color:#1f2937;
  line-height:1.6;
}

img{
  max-width:100%;
  height:auto;
}

/* Skip link */
.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  z-index:2000;
  padding:.6rem .85rem;
  border-radius:12px;
  background:#111827;
  color:#fff;
  font-weight:900;
}

.skip-link:focus{
  left:12px;
  top:12px;
  width:auto;
  height:auto;
  overflow:visible;
  outline:2px solid #bfdbfe;
  outline-offset:3px;
}

/* Navigation */
nav{
  position:sticky;
  top:0;
  z-index:1000;
  background:#fff;
  border-bottom:1px solid #e5e7eb;
}

.nav-container{
  display:flex;
  align-items:center;
  max-width:1100px;
  margin:auto;
  padding:.65rem 1.25rem;
}

.nav-left{
  display:flex;
  align-items:center;
  gap:2rem;
  min-width:0;
}

.brand{
  display:flex;
  align-items:center;
  flex:0 0 auto;
}

.brand a{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}

.brand img{
  display:block;
}

.nav-main{
  display:flex;
  align-items:center;
  gap:.35rem;
  white-space:nowrap;
}

.nav-main a,
.nav-right a,
.nav-mobile-menu a{
  text-decoration:none;
}

.nav-link{
  padding:.34rem .58rem;
  border-radius:8px;
  color:#6b7280;
  font-size:.92rem;
  font-weight:450;
  line-height:1.2;
  transition:color .15s ease,background .15s ease;
}

.nav-link:hover{
  background:#f8fafc;
  color:#374151;
}

.nav-link.is-active{
  background:#f1f3f5;
  color:#374151;
  font-weight:600;
}

.nav-right{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-left:auto;
  white-space:nowrap;
}

.nav-login{
  color:#6b7280;
  font-size:.92rem;
  font-weight:450;
}

.nav-login:hover{
  color:#374151;
}

.nav-login.is-active{
  color:#374151;
  font-weight:600;
}

.nav-cta{
  padding:.5rem 1rem;
  border-radius:10px;
  background:#2563eb;
  color:#fff;
  font-size:.95rem;
  font-weight:700;
  box-shadow:0 8px 20px rgba(37,99,235,.16);
}

.nav-cta:hover,
.nav-cta.is-active{
  background:#1d4ed8;
}

/* Mobile menu */
.nav-toggle{
  display:none;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  align-items:center;
  justify-content:center;
}

.nav-toggle-lines{
  display:grid;
  gap:4px;
}

.nav-toggle-lines span{
  display:block;
  width:18px;
  height:2px;
  border-radius:2px;
  background:#374151;
  transition:transform .18s ease,opacity .18s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-lines span:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-lines span:nth-child(2){
  opacity:0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-lines span:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}

.nav-mobile-menu{
  display:none;
  border-top:1px solid #eef2f7;
  background:#fff;
}

.nav-mobile-inner{
  display:grid;
  max-width:1100px;
  margin:auto;
  padding:.65rem .9rem .8rem;
}

.nav-mobile-menu a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:52px;
  padding:.55rem .2rem;
  border-bottom:1px solid #f1f5f9;
  color:#374151;
  font-size:.94rem;
  font-weight:600;
}

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

.nav-mobile-link-main{
  display:flex;
  align-items:center;
  gap:.7rem;
  min-width:0;
}

.nav-mobile-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:28px;
  height:28px;
  color:#64748b;
}

.nav-mobile-icon svg,
.nav-mobile-chevron svg{
  display:block;
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.nav-mobile-chevron{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  color:#94a3b8;
}

.nav-mobile-chevron svg{
  width:17px;
  height:17px;
}

.nav-mobile-menu a:hover,
.nav-mobile-menu a.is-active{
  color:#2563eb;
}

.nav-mobile-menu a:hover .nav-mobile-icon,
.nav-mobile-menu a.is-active .nav-mobile-icon{
  color:#2563eb;
}

.nav-mobile-menu a:hover .nav-mobile-chevron,
.nav-mobile-menu a.is-active .nav-mobile-chevron{
  color:#2563eb;
}

/* Layout */
.container{
  max-width:1100px;
  margin:auto;
  padding:2rem 1.25rem;
}

.card{
  padding:2rem;
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 25px rgba(0,0,0,.06);
}

.crumbs{
  margin:0 0 .5rem;
  color:#6b7280;
  font-size:.92rem;
}

.crumbs a{
  color:#374151;
  font-weight:800;
  text-decoration:none;
}

.crumbs a:hover{
  color:#2563eb;
}

.crumbs .sep{
  margin:0 .4rem;
  color:#9ca3af;
}

footer{
  margin-top:4rem;
  padding:2rem 0;
  border-top:1px solid #e5e7eb;
  color:#6b7280;
  font-size:.9rem;
}

@media(max-width:700px){
  .nav-container{
    gap:.65rem;
    padding:.6rem .9rem;
  }

  .nav-left{
    gap:.45rem;
    margin-right:auto;
  }

  .brand img{
    width:122px;
    height:auto;
  }

  .nav-main{
    display:none;
  }

  .nav-toggle{
    display:inline-flex;
  }

  .nav-mobile-menu.is-open{
    display:block;
  }

  .nav-right{
    gap:.5rem;
    margin-left:0;
  }

  .nav-login{
    font-size:.9rem;
  }

  .nav-cta{
    padding:.48rem .78rem;
    border-radius:9px;
    font-size:.9rem;
  }
}

@media(max-width:520px){
  .nav-container{
    gap:.45rem;
    padding:.55rem .7rem;
  }

  .nav-left{
    gap:.4rem;
  }

  .brand img{
    width:104px;
  }

  .nav-toggle{
    width:36px;
    height:36px;
  }

  .nav-right{
    gap:.4rem;
  }

  .nav-login{
    font-size:.84rem;
  }

  .nav-cta{
    padding:.42rem .62rem;
    border-radius:8px;
    font-size:.84rem;
  }

  .card{
    padding:1.25rem;
  }
}

@media(max-width:390px){
  .brand img{
    width:104px;
  }

  .nav-login{
    display:none;
  }
}

@media print{
  nav{
    position:static !important;
    top:auto !important;
    z-index:auto !important;
  }

  .nav-container{
    max-width:1100px;
    padding:.55rem 1.25rem;
  }

  .nav-toggle,
  .nav-mobile-menu{
    display:none !important;
  }

  .nav-cta{
    box-shadow:none !important;
    print-color-adjust:exact;
    -webkit-print-color-adjust:exact;
  }

  .skip-link{
    display:none !important;
  }
}