@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  --void:       #F2EFE9;
  --surface:    #FDFBF7;
  --surface-2:  #F5F1E9;
  --surface-3:  #ECE6D9;
  --border:     rgba(143,20,37,0.16);
  --border-2:   rgba(143,20,37,0.10);

  --volt:       #D6293C;
  --volt-2:     #B81F30;
  --volt-glow:  #C4203A;
  --volt-deep:  #6E0F1F;
  --acid:       #F5A623;
  --acid-dim:   rgba(245,166,35,0.14);
  --coral:      #EC4899;

  --text:       #211A17;
  --text-2:     #6B6058;
  --text-3:     #9C9086;

  --success:    #16A34A;
  --warning:    #F59E0B;
  --danger:     #DC2626;
  --info:       #3B82F6;

  --radius:     14px;
  --radius-sm:  9px;
  --radius-lg:  20px;
  --radius-xl:  26px;

  --shadow-glow: 0 0 44px rgba(214,41,60,0.16);
  --shadow-card: 0 6px 24px rgba(33,26,23,0.08);

  --transition: 0.2s cubic-bezier(0.4,0,0.2,1);
  --transition-slow: 0.4s cubic-bezier(0.4,0,0.2,1);

  --font-display: 'Sora', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'Space Mono', monospace;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-tap-highlight-color:transparent; }
body {
  background: var(--void);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
img { max-width: 100%; display: block; }
input, select, textarea { font-family: inherit; }

.display-1 { font-family:var(--font-display); font-size:clamp(2.2rem,5vw,3.8rem); font-weight:800; line-height:1.08; letter-spacing:-0.03em; }
.display-2 { font-family:var(--font-display); font-size:clamp(1.7rem,3.2vw,2.5rem); font-weight:700; line-height:1.15; letter-spacing:-0.02em; }
.h3 { font-family:var(--font-display); font-size:1.25rem; font-weight:600; }
.h4 { font-family:var(--font-display); font-size:1.05rem; font-weight:600; }
.label { font-size:0.7rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-3); }
.mono { font-family: 'SF Mono', 'Fira Code', monospace; }

.container { max-width:1160px; margin:0 auto; padding:0 20px; }
@media(max-width:380px) { .container { padding:0 14px; } }
.section { padding:64px 0; }
@media(max-width:768px) { .section { padding:44px 0; } }

.topbar {
  background:var(--surface); border-bottom:1px solid var(--border);
  font-size:0.78rem; color:var(--text-3);
  display:flex; align-items:center; height:34px;
}
.topbar .container { display:flex; align-items:center; justify-content:space-between; }
.topbar-links { display:flex; gap:18px; }
.topbar-links a:hover { color:var(--text-2); }
@media(max-width:640px) { .topbar { display:none; } }

.navbar {
  position: sticky; top:0; left:0; right:0; z-index:100;
  height: 66px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
}
.navbar .container { display:flex; align-items:center; gap:24px; width:100%; }
.nav-logo {
  font-family:var(--font-display);
  font-weight:800; font-size:1.25rem;
  display:flex; align-items:center; gap:9px; flex-shrink:0;
}
.nav-logo .logo-icon {
  width:34px; height:34px; border-radius:9px;
  background: linear-gradient(135deg, var(--volt), var(--volt-glow));
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:0 0 18px rgba(214,41,60,0.45);
}
.nav-logo .logo-x { color:var(--acid); }
.site-logo-img { height:34px; width:auto; object-fit:contain; display:block; }
@media(max-width:480px) { .site-logo-img { height:28px; } }

.nav-search { flex:1; max-width:420px; position:relative; display:none; }
.nav-search input {
  width:100%; padding:9px 14px 9px 38px;
  background:var(--surface-2); border:1px solid var(--border-2);
  border-radius:99px; color:var(--text); font-size:0.85rem; outline:none;
  transition:var(--transition);
}
.nav-search input:focus { border-color:var(--volt); background:var(--surface-3); }
.nav-search .search-icon { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text-3); font-size:0.85rem; }
@media(min-width:1024px) { .nav-search { display:block; } }

.nav-links { display:flex; align-items:center; gap:2px; margin-left:auto; }
.nav-links a {
  padding:8px 13px; border-radius:var(--radius-sm);
  font-size:0.86rem; font-weight:500; color:var(--text-2);
  transition:var(--transition); white-space:nowrap;
}
.nav-links a:hover, .nav-links a.active { color:var(--text); background:var(--surface-2); }
.nav-actions { display:flex; align-items:center; gap:10px; }

/* Round icon-button cluster (search + hamburger), visible on mobile only —
   mirrors the two-circle icon pattern in the reference header. */
.nav-mobile-icons { display:none; align-items:center; gap:8px; margin-left:auto; }
.nav-icon-btn {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-2);
  transition:var(--transition);
}
.nav-icon-btn:hover { border-color:var(--volt); color:var(--volt-glow); }
.nav-icon-btn-solid { background:var(--text); color:var(--surface); border-color:var(--text); }
.nav-icon-btn-solid:hover { background:var(--volt-deep); border-color:var(--volt-deep); color:#fff; }
.nav-icon-btn.open .bar-1 { transform:translateY(6px) rotate(45deg); }
.nav-icon-btn.open .bar-2 { opacity:0; }
.nav-icon-btn.open .bar-3 { transform:translateY(-6px) rotate(-45deg); }
.hamburger-bar { transform-origin:11px 11px; transition:var(--transition); }

.nav-mobile-search-row { display:none; max-height:0; overflow:hidden; transition:var(--transition-slow); padding:0 20px; }
.nav-mobile-search-row.open { max-height:70px; padding-bottom:12px; }
.nav-mobile-search-row .nav-search { display:block; max-width:none; }

@media(max-width:900px) {
  .nav-links { display:none; }
  .nav-actions { display:none; }
  .nav-mobile-icons { display:flex; }
  .nav-mobile-search-row { display:block; }
}

/* --- Sidebar drawer (mobile) — slides in from the left, matches reference structure --- */
.drawer-overlay {
  display:none; position:fixed; inset:0; z-index:150;
  background:rgba(20,14,12,0.5); backdrop-filter:blur(2px);
}
.drawer-overlay.open { display:block; }
.drawer {
  position:fixed; top:0; left:0; bottom:0; z-index:151; width:min(300px,84vw);
  background:var(--surface); box-shadow:0 0 40px rgba(20,14,12,0.25);
  display:flex; flex-direction:column; padding:18px 0 24px;
  transform:translateX(-100%); transition:transform 0.28s cubic-bezier(0.4,0,0.2,1);
  overflow-y:auto;
}
.drawer.open { transform:translateX(0); }
.drawer-header { display:flex; align-items:center; justify-content:space-between; padding:0 20px 16px; }
.drawer-close {
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--text-2); background:var(--surface-2); border:1px solid var(--border); flex-shrink:0;
  transition:var(--transition);
}
.drawer-close:hover { color:var(--text); border-color:var(--volt); }
.drawer-divider { height:1px; background:var(--border); margin:8px 0; flex-shrink:0; }
.drawer-list { display:flex; flex-direction:column; padding:6px 10px; }
.drawer-link {
  display:flex !important; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 12px; border-radius:var(--radius); font-size:0.95rem; font-weight:500; color:var(--text);
  transition:var(--transition);
}
.drawer-link:hover { background:var(--surface-2); }
.drawer-link svg { color:var(--text-3); flex-shrink:0; }
.icon { flex-shrink:0; vertical-align:-3px; }
.topbar-links span { display:inline-flex; align-items:center; gap:6px; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px; border-radius:var(--radius);
  font-size:0.9rem; font-weight:600; font-family:var(--font-body);
  transition:var(--transition); white-space:nowrap; border:1px solid transparent;
}
.btn-primary { background: linear-gradient(135deg, var(--volt), var(--volt-2)); color:#fff; }
.btn-primary:hover { transform:translateY(-1px); box-shadow: 0 6px 24px rgba(214,41,60,0.5); }
.btn-primary:active { transform:translateY(0); }
.btn-acid { background:var(--acid); color:#241900; }
.btn-acid:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(255,176,32,0.35); }
.btn-ghost { background:transparent; color:var(--text-2); border-color:var(--border-2); }
.btn-ghost:hover { color:var(--text); background:var(--surface-2); border-color:var(--border); }
.btn-outline { background:transparent; color:var(--volt-glow); border-color:rgba(214,41,60,0.35); }
.btn-outline:hover { background:rgba(214,41,60,0.08); border-color:var(--volt-glow); }
.btn-sm { padding:8px 16px; font-size:0.83rem; border-radius:var(--radius-sm); }
.btn-lg { padding:14px 28px; font-size:1rem; border-radius:var(--radius-lg); }
.btn-full { width:100%; }
.btn:disabled { opacity:0.45; pointer-events:none; }
.btn-loading { position:relative; color:transparent !important; }
.btn-loading::after {
  content:''; position:absolute; inset:0; margin:auto;
  width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.3); border-top-color:#fff;
  animation:spin 0.7s linear infinite;
}

.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); transition:var(--transition); }
.card:hover { border-color:rgba(214,41,60,0.3); }
.card-glow:hover { box-shadow:var(--shadow-glow); border-color:rgba(214,41,60,0.45); }

.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:99px;
  font-size:0.72rem; font-weight:600; letter-spacing:0.04em;
}
.badge-violet { background:rgba(59,130,246,0.12); color:var(--info); border:1px solid rgba(59,130,246,0.22); }
.badge-acid   { background:var(--acid-dim); color:var(--acid); border:1px solid rgba(255,176,32,0.25); }
.badge-green  { background:rgba(46,230,166,0.13);  color:var(--success); border:1px solid rgba(46,230,166,0.22); }
.badge-yellow { background:rgba(255,197,66,0.13);  color:var(--warning); border:1px solid rgba(255,197,66,0.22); }
.badge-red    { background:rgba(255,92,124,0.13);  color:var(--danger); border:1px solid rgba(255,92,124,0.22); }
.badge-discount { background:linear-gradient(135deg, var(--coral), #FF8FA3); color:#fff; font-weight:700; }

.form-group { display:flex; flex-direction:column; gap:6px; }
.form-label { font-size:0.82rem; font-weight:500; color:var(--text-2); display:flex; align-items:center; gap:6px; }
.form-input {
  width:100%; padding:11px 14px;
  background:var(--surface-2); border:1px solid var(--border-2);
  border-radius:var(--radius); color:var(--text); font-size:0.93rem;
  transition:var(--transition); outline:none;
}
.form-input::placeholder { color:var(--text-3); }
.form-input:focus { border-color:var(--volt); box-shadow:0 0 0 3px rgba(214,41,60,0.14); background:var(--surface-3); }
.form-input.error { border-color:var(--danger); }
.form-input:disabled { opacity:0.5; cursor:not-allowed; }
.form-error { font-size:0.78rem; color:var(--danger); display:flex; align-items:center; gap:4px; }
.form-hint  { font-size:0.78rem; color:var(--text-3); }

.divider { height:1px; background:var(--border); }

.toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast {
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-radius:var(--radius);
  background:var(--surface-2); border:1px solid var(--border);
  box-shadow:var(--shadow-card); font-size:0.88rem; font-weight:500;
  pointer-events:all; animation:toastIn 0.3s cubic-bezier(0.34,1.56,0.64,1) forwards;
  max-width:340px;
}
.toast.removing { animation:toastOut 0.25s ease forwards; }
.toast-icon { font-size:1rem; flex-shrink:0; }
.toast-success { border-color:rgba(46,230,166,0.3); }
.toast-error   { border-color:rgba(255,92,124,0.3); }
.toast-info    { border-color:rgba(214,41,60,0.3); }

@keyframes toastIn  { from { opacity:0; transform:translateX(20px) scale(0.95); } to { opacity:1; transform:none; } }
@keyframes toastOut { from { opacity:1; transform:none; } to { opacity:0; transform:translateX(20px); } }

.skeleton {
  background:linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size:200% 100%; border-radius:var(--radius-sm); animation:shimmer 1.5s infinite;
}
@keyframes shimmer { from{background-position:200% 0} to{background-position:-200% 0} }

.spinner {
  display:inline-block; width:20px; height:20px; border-radius:50%;
  border:2px solid rgba(214,41,60,0.2); border-top-color:var(--volt-glow);
  animation:spin 0.7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

.modal-overlay {
  position:fixed; inset:0; z-index:200; background:rgba(0,0,0,0.72);
  backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center;
  padding:20px; animation:fadeIn 0.2s ease;
}
.modal-overlay.closing { animation:fadeOut 0.2s ease forwards; }
.modal-box {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-xl); width:100%; max-width:480px;
  max-height:90vh; overflow-y:auto; animation:modalIn 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
.modal-overlay.closing .modal-box { animation:modalOut 0.2s ease forwards; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px 0; }
.modal-body { padding:20px 24px 24px; }
.modal-close { width:32px; height:32px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; color:var(--text-3); transition:var(--transition); }
.modal-close:hover { background:var(--surface-2); color:var(--text); }

@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes fadeOut { from{opacity:1} to{opacity:0} }
@keyframes modalIn  { from{opacity:0;transform:scale(0.94) translateY(10px)} to{opacity:1;transform:none} }
@keyframes modalOut { from{opacity:1;transform:none} to{opacity:0;transform:scale(0.94) translateY(10px)} }

/* page transition */
.page { display:none; }
.page.active { display:block; animation:pageIn 0.3s ease; }
@keyframes pageIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}
.mt-20{margin-top:20px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-40{margin-top:40px}.mt-48{margin-top:48px}
.mb-4{margin-bottom:4px}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}
.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}
.flex{display:flex}.flex-col{flex-direction:column}
.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px}
.text-center{text-align:center}
.text-volt{color:var(--volt-glow)}.text-muted{color:var(--text-2)}.text-dim{color:var(--text-3)}
.text-acid{color:var(--acid)}.text-success{color:var(--success)}.text-danger{color:var(--danger)}
.w-full{width:100%}.hidden{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

.gradient-text {
  background: linear-gradient(135deg, var(--volt-glow), var(--acid));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}