/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 22px; border-radius:var(--r-md); font-weight:600; font-size:var(--fs-15);
  border:1px solid transparent; cursor:pointer; transition:transform var(--dur-1) var(--ease),
  box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  white-space:nowrap; line-height:1;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue-700); color:#fff; box-shadow:var(--sh-sm)}
.btn-primary:hover{background:var(--blue-800); color:#fff; box-shadow:var(--sh-md)}
.btn-accent{background:var(--orange-500); color:#fff; box-shadow:0 6px 20px rgba(242,122,26,.28)}
.btn-accent:hover{background:var(--orange-600); color:#fff}
.btn-ghost{background:transparent; color:var(--blue-700); border-color:var(--line)}
.btn-ghost:hover{background:var(--blue-50); border-color:var(--blue-200)}
.btn-light{background:#fff; color:var(--blue-800); border-color:var(--line)}
.btn-light:hover{background:var(--blue-50)}
.btn-lg{padding:16px 28px; font-size:var(--fs-16)}
.btn-sm{padding:9px 14px; font-size:var(--fs-13)}
.btn-block{width:100%}
.btn[disabled]{opacity:.55; cursor:not-allowed}
.btn-arrow svg{transition:transform var(--dur-2) var(--ease)}
.btn-arrow:hover svg{transform:translateX(3px)}

/* ============ Cards ============ */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s6); box-shadow:var(--sh-xs); transition:transform var(--dur-2) var(--ease),
  box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.card-hover:hover{transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--blue-100)}
.card-lg{padding:var(--s8)}
.card-flat{box-shadow:none}
.card-icon{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--blue-50); color:var(--blue-700); margin-bottom:var(--s4);
}
.card-icon.orange{background:var(--orange-50); color:var(--orange-600)}
.card h3{margin:0 0 8px; font-size:var(--fs-20)}
.card p{margin:0; color:var(--body)}

/* ============ Badges & Pills ============ */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:var(--r-pill);
  background:var(--blue-50); color:var(--blue-700);
  font-size:var(--fs-12); font-weight:700; letter-spacing:.02em;
}
.badge-orange{background:var(--orange-50); color:var(--orange-700)}
.badge-ok{background:var(--ok-bg); color:var(--ok)}
.badge-warn{background:var(--warn-bg); color:var(--warn)}
.badge-err{background:var(--err-bg); color:var(--err)}

/* ============ Inputs ============ */
.field{display:block; margin-bottom:var(--s4)}
.field label{display:block; font-size:var(--fs-13); font-weight:600; color:var(--ink-2); margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-md);
  font-size:var(--fs-15); background:#fff; color:var(--ink); outline:none;
  transition:border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--blue-500); box-shadow:0 0 0 4px rgba(47,97,224,.12)
}
.field small{display:block; color:var(--muted); font-size:var(--fs-12); margin-top:6px}

.alert{padding:12px 14px; border-radius:var(--r-md); font-size:var(--fs-14); margin-bottom:var(--s4); border:1px solid transparent}
.alert-ok{background:var(--ok-bg); color:var(--ok); border-color:#bfe6cd}
.alert-warn{background:var(--warn-bg); color:var(--warn); border-color:#ffe0b5}
.alert-err{background:var(--err-bg); color:var(--err); border-color:#f6c7c1}
.alert-info{background:var(--info-bg); color:var(--info); border-color:#c7d9ff}

/* ============ Header / Nav ============ */
.site-header{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.88);
  backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line);
}
.site-header .container-wide{display:flex; align-items:center; gap:var(--s6); height:var(--header-h)}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.01em; font-size:20px; color:var(--ink)}
.brand-logo{width:65px; height:65px; display:block; flex:none; border-radius:14px; box-shadow:var(--sh-sm)}
.nav-v2 .brand-logo{width:55px; height:55px; border-radius:12px}
.brand-text span{color:var(--blue-700)} .brand-text strong{color:var(--orange-500)}

.nav{display:flex; align-items:center; gap:4px; margin-left:var(--s6)}
.nav a{padding:10px 12px; border-radius:10px; color:var(--ink-2); font-weight:500; font-size:var(--fs-15)}
.nav a:hover{background:var(--blue-50); color:var(--blue-700)}
.nav a.active{color:var(--blue-700); background:var(--blue-50)}
.nav-cta{margin-left:auto; display:flex; align-items:center; gap:10px}

.nav-toggle{
  display:none; margin-left:auto; background:transparent; border:1px solid var(--line);
  border-radius:10px; padding:8px 10px; cursor:pointer;
}
.nav-close{display:none}
@media (min-width:961px){.nav-close{display:none !important}}
.nav-toggle span{display:block; width:20px; height:2px; background:var(--ink); margin:4px 0; border-radius:2px; transition:transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease)}

@media (max-width:960px){
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0; flex-direction:column; gap:2px;
    background:#fff; padding:16px 20px 24px; border-bottom:1px solid var(--line);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
    max-height:calc(100dvh - var(--header-h)); overflow:auto;
  }
  .nav.open{opacity:1; transform:none; pointer-events:auto}
  .nav-close{display:block !important; align-self:flex-end; margin:0 0 8px; padding:8px 2px; border:0; background:transparent; color:var(--blue-700); font:inherit; font-size:13px; font-weight:600; cursor:pointer}
  .nav a{padding:14px 12px; font-size:var(--fs-16)}
  .nav-cta{display:none}
  .nav-toggle{display:block}
  .nav.open ~ .nav-cta{display:flex; position:fixed; top:auto; left:20px; right:20px; bottom:20px; gap:10px}
  .nav.open ~ .nav-cta .btn{flex:1}
}

/* ============ Footer ============ */
.site-footer{background:var(--blue-900); color:#c9d4ea; padding:var(--s16) 0 var(--s6); margin-top:var(--s20)}
.site-footer h4{color:#fff; font-size:var(--fs-14); text-transform:uppercase; letter-spacing:.12em; margin-bottom:var(--s4)}
.site-footer a{color:#c9d4ea}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:var(--s8)}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr; gap:var(--s6)}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08); margin-top:var(--s10); padding-top:var(--s5);
  display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:space-between;
  font-size:var(--fs-13); color:#9ab0d5;
}
.footer-brand .brand-text span{color:#fff} .footer-brand .brand-text strong{color:var(--orange-400)}
.footer-brand p{color:#9ab0d5; margin-top:var(--s4); max-width:36ch}
.footer-list{list-style:none; padding:0; margin:0; display:grid; gap:10px; font-size:var(--fs-14)}

/* ============ Reveal animation ============ */
.reveal{opacity:0; transform:translateY(14px); transition:opacity 600ms var(--ease), transform 600ms var(--ease)}
.reveal.in{opacity:1; transform:none}