/* =========================================================
   TOKENS
   ========================================================= */
:root{
  --c-primary:#1A3B5C; --c-primary-hover:#142e4a; --c-primary-soft:rgba(26,59,92,.06);
  --c-accent:#FF9F1C;  --c-accent-hover:#f08e0a; --c-accent-soft:#FFF3E0;
  --c-bg:#fff;         --c-bg-alt:#F4F6F8;
  --c-text:#2C3E50;    --c-text-muted:#7F8C8D;
  --c-border:#E5E9EF;
  --c-success:#27AE60; --c-error:#E74C3C; --c-warning:#F1C40F;

  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --r-card:12px; --r-btn:8px; --r-lg:20px; --r-pill:999px;
  --sh-sm:0 4px 12px rgba(0,0,0,.05);
  --sh-md:0 10px 30px rgba(0,0,0,.08);
  --sh-lg:0 24px 60px rgba(26,59,92,.14);

  --header-h:64px; --container:1280px; --gutter:16px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font); font-size:16px; line-height:24px;
  color:var(--c-text); background:var(--c-bg);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{display:block; max-width:100%}
button{font:inherit; color:inherit}
a{color:var(--c-primary); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.01em; color:var(--c-text)}
h1{font-size:32px; line-height:1.15; font-weight:800; letter-spacing:-.02em}
h2{font-size:24px; line-height:1.2; font-weight:800; letter-spacing:-.015em}
h3{font-size:17px; line-height:1.3; font-weight:600}
p{margin:0}

.container{max-width:var(--container); margin:0 auto; padding:0 var(--gutter)}
.muted{color:var(--c-text-muted)}
.caption{font-size:12px; line-height:16px; color:var(--c-text-muted)}
.hidden{display:none !important}
:focus-visible{outline:3px solid rgba(255,159,28,.55); outline-offset:2px; border-radius:6px}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px; border-radius:var(--r-btn); border:1px solid transparent;
  font-weight:600; font-size:15px; cursor:pointer; white-space:nowrap;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease), box-shadow .2s var(--ease);
  text-decoration:none !important;
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--c-primary); color:#fff}
.btn-primary:hover{background:var(--c-primary-hover)}
.btn-accent{background:var(--c-accent); color:#1A1A1A}
.btn-accent:hover{background:var(--c-accent-hover); box-shadow:0 8px 20px rgba(255,159,28,.35)}
.btn-ghost{background:transparent; color:var(--c-primary); border-color:var(--c-border)}
.btn-ghost:hover{border-color:var(--c-primary); background:var(--c-primary-soft)}
.btn-lg{padding:16px 28px; font-size:16px; border-radius:12px}
.btn-block{width:100%}
.btn-sm{padding:8px 14px; font-size:14px}

/* =========================================================
   CARDS / BADGES
   ========================================================= */
.card{
  background:#fff; border-radius:var(--r-card); border:1px solid var(--c-border);
  box-shadow:var(--sh-sm); padding:20px;
}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:var(--r-pill);
  font-size:13px; font-weight:600;
  background:var(--c-primary-soft); color:var(--c-primary);
}
.badge--accent{background:var(--c-accent-soft); color:#7A4A00}
.badge--success{background:#E8F8EF; color:#127A41}
.badge--danger{background:#FDECEA; color:#A0261B}
.eyebrow{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--c-accent); margin-bottom:12px;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s, box-shadow .2s;
}
.site-header.is-scrolled{border-bottom-color:var(--c-border); box-shadow:0 4px 20px rgba(0,0,0,.04)}
.header-inner{display:flex; align-items:center; gap:24px; min-height:var(--header-h)}
.logo{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:800; font-size:20px; letter-spacing:-.02em; color:var(--c-primary);
  text-decoration:none !important; flex:0 0 auto;
}
.logo svg{color:var(--c-primary)}
.logo .dot{color:var(--c-accent)}
.header-nav{display:none; align-items:center; gap:4px; margin-left:8px}
.header-nav a{
  padding:10px 14px; border-radius:10px;
  font-size:15px; font-weight:500; color:var(--c-text);
  text-decoration:none !important; transition:background .15s, color .15s;
}
.header-nav a:hover{background:var(--c-bg-alt)}
.header-nav a.is-active{color:var(--c-primary); background:var(--c-primary-soft)}
.header-right{margin-left:auto; display:flex; align-items:center; gap:8px}
.burger{
  width:44px; height:44px; border-radius:12px;
  background:transparent; border:1px solid var(--c-border);
  display:grid; place-items:center; cursor:pointer;
}
.burger svg{width:22px; height:22px; stroke:var(--c-text); fill:none; stroke-width:2; stroke-linecap:round}
.icon-btn{
  width:40px; height:40px; border-radius:50%; border:none; background:transparent;
  display:grid; place-items:center; cursor:pointer;
  transition:background .15s;
}
.icon-btn:hover{background:var(--c-bg-alt)}
.icon-btn svg{width:22px; height:22px; stroke:var(--c-text); fill:none; stroke-width:2}

/* =========================================================
   DRAWER
   ========================================================= */
.drawer{position:fixed; inset:0; z-index:80; visibility:hidden; opacity:0; transition:opacity .2s, visibility .2s}
.drawer.is-open{visibility:visible; opacity:1}
.drawer__overlay{position:absolute; inset:0; background:rgba(20,30,45,.5)}
.drawer__panel{
  position:absolute; right:0; top:0; bottom:0; width:min(360px,88vw);
  background:#fff; padding:20px; display:flex; flex-direction:column; gap:8px;
  transform:translateX(100%); transition:transform .28s var(--ease); overflow-y:auto;
}
.drawer.is-open .drawer__panel{transform:translateX(0)}
.drawer__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px}
.drawer__nav{display:flex; flex-direction:column; gap:2px; margin-bottom:24px}
.drawer__nav a{
  display:flex; align-items:center; gap:12px; padding:14px 12px; border-radius:10px;
  font-size:16px; font-weight:500; color:var(--c-text); text-decoration:none !important;
}
.drawer__nav a:hover{background:var(--c-bg-alt)}
.drawer__nav svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2}

/* =========================================================
   BOTTOM NAV
   ========================================================= */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  display:grid; grid-template-columns:repeat(5,1fr);
  background:#fff; border-top:1px solid var(--c-border);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.bottom-nav__item{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 2px; font-size:11px; color:var(--c-text-muted);
  text-decoration:none !important; position:relative;
}
.bottom-nav__item svg{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:2}
.bottom-nav__item.is-active{color:var(--c-primary); font-weight:600}
.bottom-nav__badge{
  position:absolute; top:2px; right:calc(50% - 20px);
  min-width:18px; height:18px; padding:0 5px;
  background:var(--c-error); color:#fff; border-radius:999px;
  font-size:11px; font-weight:700; display:grid; place-items:center;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--c-primary); color:#fff; padding:48px 0 24px}
.footer-grid{
  display:grid; gap:32px; grid-template-columns:1fr;
  padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.15);
}
.footer-brand .logo{color:#fff; margin-bottom:12px}
.footer-brand .logo svg{color:#fff}
.footer-brand p{color:rgba(255,255,255,.7); font-size:14px; line-height:1.6; max-width:340px}
.footer-social{display:flex; gap:10px; margin-top:16px}
.footer-social a{
  width:40px; height:40px; border-radius:10px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.1); color:#fff;
  transition:background .15s, transform .15s;
}
.footer-social a:hover{background:rgba(255,255,255,.2); transform:translateY(-2px)}
.footer-social svg{width:20px; height:20px; fill:currentColor}
.footer-col h4{
  font-size:13px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:16px;
}
.footer-col ul{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.footer-col a{color:rgba(255,255,255,.85); font-size:14px; text-decoration:none}
.footer-col a:hover{color:var(--c-accent); text-decoration:none}
.footer-bottom{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  padding-top:24px; font-size:13px; color:rgba(255,255,255,.6);
}
.footer-bottom a{color:rgba(255,255,255,.7); text-decoration:none}
.footer-bottom a:hover{color:var(--c-accent)}

/* =========================================================
   UTILITIES
   ========================================================= */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.reveal.is-visible{opacity:1; transform:translateY(0)}
.has-bottom-nav{padding-bottom:84px}
.desktop-only{display:none}
.mobile-only{display:block}

/* =========================================================
   MEDIA
   ========================================================= */
@media (min-width:560px){
  :root{--gutter:20px}
  h1{font-size:40px}
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr}
}
@media (min-width:768px){
  :root{--gutter:24px; --header-h:70px}
  h1{font-size:48px; line-height:1.1}
  h2{font-size:32px}
  .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr; gap:48px}
}
@media (min-width:1024px){
  :root{--header-h:76px; --gutter:32px}
  .header-nav{display:flex}
  .burger{display:none}
  .bottom-nav{display:none}
  .has-bottom-nav{padding-bottom:0}
  .desktop-only{display:block !important}
  .mobile-only{display:none !important}
  h1{font-size:56px; line-height:1.05}
  .site-footer{padding:64px 0 32px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1; transform:none}
}