/* ─── Fonts ─────────────────────────────────────────────────────── */
@font-face { font-family:'AstaSans'; src:url('AstaSans-Light.ttf') format('truetype'); font-weight:300; }
@font-face { font-family:'AstaSans'; src:url('AstaSans-Regular.ttf') format('truetype'); font-weight:400; }
@font-face { font-family:'AstaSans'; src:url('AstaSans-Medium.ttf') format('truetype'); font-weight:500; }
@font-face { font-family:'AstaSans'; src:url('AstaSans-SemiBold.ttf') format('truetype'); font-weight:600; }
@font-face { font-family:'AstaSans'; src:url('AstaSans-Bold.ttf') format('truetype'); font-weight:700; }
@font-face { font-family:'AstaSans'; src:url('AstaSans-ExtraBold.ttf') format('truetype'); font-weight:800; }

/* ─── Reset & Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html, body {
  height:100%;
  font-family:'AstaSans', sans-serif;
  background:#fff;
  color:#1a1a1a;
  overflow-x:hidden;
}

/* ─── Keyframes ──────────────────────────────────────────────────── */
@keyframes fadeIn        { from{opacity:0}                     to{opacity:1} }
@keyframes slideUp       { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideDown     { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideInLeft   { from{opacity:0;transform:translateX(-32px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideInRight  { from{opacity:0;transform:translateX(32px)}  to{opacity:1;transform:translateX(0)} }
@keyframes scaleIn       { from{opacity:0;transform:scale(.88)}        to{opacity:1;transform:scale(1)} }
@keyframes popNumber     { 0%{transform:scale(.6);opacity:0} 70%{transform:scale(1.12)} 100%{transform:scale(1);opacity:1} }
@keyframes pulse         { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes shake         { 0%,100%{transform:rotate(0deg)} 25%{transform:rotate(-6deg)} 75%{transform:rotate(6deg)} }
@keyframes msgSlideLeft  { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} }
@keyframes msgSlideRight { from{opacity:0;transform:translateX(20px)}  to{opacity:1;transform:translateX(0)} }
@keyframes panelSlideIn  { from{opacity:0;transform:translateX(40px)}  to{opacity:1;transform:translateX(0)} }
@keyframes ripple        { to{transform:scale(4);opacity:0} }
@keyframes spin          { to{transform:rotate(360deg)} }
@keyframes drawLine      { from{stroke-dashoffset:300} to{stroke-dashoffset:0} }
@keyframes floatBob      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ─── Logo ───────────────────────────────────────────────────────── */
.logo {
  display:flex; align-items:center; gap:6px;
  font-size:1.15rem; font-weight:700; color:#1a1a1a; text-decoration:none;
  animation: slideDown .5s ease both;
}
.logo svg { width:26px; height:26px; }
.logo-sm  { font-size:.95rem; }

/* ─── Navbar ─────────────────────────────────────────────────────── */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 20px;
  background:#fff;
  border-bottom:1px solid #f0f0f0;
  animation: slideDown .4s ease both;
}
.navbar-icon {
  width:36px; height:36px; border-radius:50%;
  background:#f0f0f0; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, transform .2s;
}
.navbar-icon:hover { background:#e0e0e0; transform:scale(1.08); }
.navbar-icon svg { width:20px; height:20px; }

/* ─── Cards ──────────────────────────────────────────────────────── */
.card {
  background:#fff;
  border:1.5px solid #e8e8e8;
  border-radius:14px;
  padding:32px 36px;
  animation: scaleIn .45s cubic-bezier(.34,1.56,.64,1) both;
}

/* ─── Buttons ────────────────────────────────────────────────────── */
.btn {
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-weight:600; border:none; cursor:pointer;
  border-radius:8px; padding:10px 22px; font-size:.95rem;
  transition:transform .18s, box-shadow .18s, background .18s;
}
.btn::after {
  content:''; position:absolute; border-radius:50%;
  width:16px; height:16px;
  background:rgba(255,255,255,.35);
  transform:scale(0); opacity:1;
  pointer-events:none;
}
.btn:active::after { animation: ripple .5s ease-out; }
.btn:hover  { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.14); }
.btn:active { transform:translateY(0);    box-shadow:none; }

.btn-primary  { background:#1A6BCC; color:#fff; width:100%; padding:11px; border-radius:8px; }
.btn-primary:hover  { background:#1558B0; }
.btn-danger   { background:#c4364a; color:#fff; width:100%; padding:11px; }
.btn-danger:hover   { background:#a82a3c; }
.btn-outline  { background:transparent; color:#c4364a; border:1.5px solid #c4364a; width:100%; padding:10px; }
.btn-outline:hover  { background:#fde8eb; }
.btn-secondary{ background:#1A6BCC; color:#fff; border-radius:50px; padding:10px 28px; font-size:.88rem; }
.btn-ghost    { background:transparent; color:#555; border:none; padding:8px 16px; font-size:.88rem; cursor:pointer; transition:color .2s; }
.btn-ghost:hover { color:#1A6BCC; }
.btn-social {
  width:46px; height:46px; border-radius:10px;
  background:#1A6BCC; color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s, box-shadow .2s, background .2s;
  font-size:1.1rem; font-weight:700;
}
.btn-social:hover { transform:translateY(-3px) scale(1.08); box-shadow:0 8px 20px rgba(26,107,204,.35); background:#1558B0; }
.btn-social svg  { width:22px; height:22px; fill:#fff; }

/* ─── Form controls  ─────────────────────────────────────────────── */
select, input[type="text"], textarea {
  font-family:inherit; font-size:.93rem; font-weight:500;
  border:1.5px solid #d0d0d0; border-radius:8px;
  padding:8px 12px; background:#fff; color:#1a1a1a;
  outline:none; transition:border-color .2s, box-shadow .2s;
  appearance:none; -webkit-appearance:none;
}
select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-right:28px; }
select:focus, input:focus, textarea:focus { border-color:#1A6BCC; box-shadow:0 0 0 3px rgba(26,107,204,.12); }

/* ─── Radio ──────────────────────────────────────────────────────── */
.radio-group { display:flex; flex-direction:column; gap:10px; }
.radio-item  { display:flex; align-items:center; gap:10px; cursor:pointer; padding:4px 0; }
.radio-item input[type="radio"] { accent-color:#c4364a; width:16px; height:16px; cursor:pointer; }
.radio-item label { font-size:.9rem; font-weight:500; cursor:pointer; transition:color .18s; }
.radio-item:hover label { color:#c4364a; }

/* ─── Badge / Tag ────────────────────────────────────────────────── */
.badge { display:flex; align-items:center; gap:8px; font-size:.82rem; font-weight:500; color:#444; }
.badge svg { width:18px; height:18px; flex-shrink:0; }

/* ─── Utility ────────────────────────────────────────────────────── */
.text-center { text-align:center; }
.mt-1 { margin-top:6px; }
.mt-2 { margin-top:12px; }
.mt-3 { margin-top:18px; }
.mt-4 { margin-top:24px; }
.small { font-size:.82rem; color:#777; line-height:1.5; }

/* ─── Page transitions ───────────────────────────────────────────── */
.page-exit { animation: fadeIn .3s ease reverse forwards; }