/* EtikStudio — shared design system */
:root {
  --brand-blue: #1E3A8A;
  --accent-blue: #2D74FF;
  --success-green: #10B981;
  --ink: #1F2937;
  --ink-soft: #6B7280;
  --surface-alt: #F8FAFC;
  --footer-dark: #0F1E3D;
  --card-shadow: 0 6px 16px rgba(12, 34, 80, 0.10);
}
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: var(--ink); }
h1, h2, h3, .display { font-family: 'Plus Jakarta Sans', sans-serif; }
.mono { font-family: 'JetBrains Mono', monospace; }

.text-brand { color: var(--brand-blue); }
.bg-brand { background-color: var(--brand-blue); }
.text-accent { color: var(--accent-blue); }
.bg-accent { background-color: var(--accent-blue); }
.text-success { color: var(--success-green); }
.gradient-band { background: linear-gradient(90deg, #1E3A8A 0%, #4C1D95 100%); }

.btn-primary {
  background: var(--accent-blue); color: #fff; font-weight: 600;
  padding: .875rem 1.75rem; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(45, 116, 255, .35);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  display: inline-flex; align-items: center; gap: .5rem;
}
.btn-primary:hover { background: #1e63f0; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(45, 116, 255, .4); }
.btn-ghost {
  color: var(--brand-blue); font-weight: 600; padding: .875rem 1.75rem;
  border-radius: 999px; border: 2px solid #C7D6F5;
  transition: border-color .15s ease, background .15s ease;
  display: inline-flex; align-items: center; gap: .5rem;
}
.btn-ghost:hover { border-color: var(--accent-blue); background: #F3F7FF; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--accent-blue); outline-offset: 2px; border-radius: 6px;
}

.card { background: #fff; border: 1px solid #E5EAF3; border-radius: 12px; box-shadow: var(--card-shadow); }

/* Mobile nav */
#nav-mobile { display: none; }
#nav-mobile.open { display: block; }

/* Language select */
.lang-select {
  border: 1px solid #D6DEEC; border-radius: 8px; background: #fff;
  font-size: .85rem; padding: .4rem 1.9rem .4rem .6rem; color: var(--ink);
}
footer .lang-select { background: transparent; border-color: rgba(147, 197, 253, .3); color: #DBEAFE; }
footer .lang-select option { color: var(--ink); }

/* Thermal label (hero) */
.thermal-label {
  background: #fff; width: 300px; border-radius: 6px; border: 1px solid #D8DEE9;
  box-shadow: 0 18px 40px rgba(12, 34, 80, .22);
  padding: 16px 18px 14px; position: relative; transform: rotate(4deg);
}
.thermal-label::before {
  content: ""; position: absolute; top: -6px; left: 12px; right: 12px; height: 6px;
  background-image: radial-gradient(circle at 6px 0, transparent 4px, #fff 4.5px);
  background-size: 16px 6px; background-repeat: repeat-x;
}
.barcode-svg rect { fill: #111827; }
.print-toast {
  background: #fff; border: 1px solid #D7F5E8; border-radius: 10px;
  box-shadow: 0 10px 24px rgba(12, 34, 80, .16);
  padding: .6rem .9rem; display: flex; align-items: center; gap: .55rem;
  font-size: .82rem; font-weight: 600; color: var(--ink);
}

/* Hero entrance sequence */
@media (prefers-reduced-motion: no-preference) {
  .hero-seq { opacity: 0; animation: rise .7s ease forwards; }
  .hero-seq.d1 { animation-delay: .15s; }
  .hero-seq.d2 { animation-delay: .45s; }
  .hero-seq.d3 { animation-delay: .9s; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
  .thermal-label.hero-seq.d2 { animation-name: printout; }
  @keyframes printout {
    from { opacity: 0; transform: rotate(4deg) translateY(-26px); }
    to { opacity: 1; transform: rotate(4deg) translateY(0); }
  }
}

/* FAQ accordion */
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.faq-item[data-open="true"] .faq-answer { grid-template-rows: 1fr; }
.faq-answer > div { overflow: hidden; }
.faq-item[data-open="true"] .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform .2s ease; }

/* Pricing toggle */
.toggle-btn { padding: .5rem 1.25rem; border-radius: 999px; color: var(--ink-soft); font-weight: 600; }
.toggle-btn.toggle-on { background: var(--brand-blue); color: #fff; }

/* Checklists */
.check-item { display: flex; gap: .6rem; align-items: flex-start; }
.check-item i { color: var(--success-green); margin-top: .2rem; }

/* Feature matrix table */
.matrix-table th, .matrix-table td { padding: .65rem .75rem; }
.matrix-table tbody tr:nth-child(odd) { background: var(--surface-alt); }
.matrix-yes { color: var(--success-green); }
.matrix-no { color: #C3CAD6; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .faq-answer, .faq-chevron, .btn-primary, .btn-ghost { transition: none; }
}

/* Mega-menu dropdowns */
.nav-dd-panel { display: none; }
.nav-dd:hover .nav-dd-panel, .nav-dd.open .nav-dd-panel, .nav-dd:focus-within .nav-dd-panel { display: block; }
.dd-item { display: block; padding: .55rem .75rem; border-radius: 8px; font-size: .9rem; color: var(--ink); }
.dd-item:hover { background: var(--surface-alt); color: var(--brand-blue); }
.nav-dd.open .nav-dd-btn, .nav-dd:hover .nav-dd-btn { color: var(--brand-blue); }

/* Keep dropdown open while the cursor crosses the gap between button and panel */
.nav-dd { padding-bottom: .75rem; margin-bottom: -.75rem; }
.nav-dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }

/* custom color variant not covered by the compiled utilities */
.group:hover .group-hover\:text-brand { color: var(--brand-blue); }

/* Mobile menu (full-screen panel) */
body.nav-open { overflow: hidden; }
.mnav-chev { transition: transform .2s ease; }
.mnav-toggle[aria-expanded="true"] .mnav-chev { transform: rotate(180deg); }
.mnav-toggle[aria-expanded="true"] { color: var(--brand-blue); }