/* ==========================================================================
   Unitora — design tokens
   ========================================================================== */
:root {
  --bg: #f5f3ef;
  --bg-soft: #edeae3;
  --surface: #ffffff;
  --surface-alt: #fbfaf8;
  --border: #e6e2da;
  --text: #171b26;
  --text-muted: #6f7178;
  --accent: #8d87f0;
  --accent-light: #d7d3fa;
  --accent-contrast: #171b26;
  --danger: #e8827d;
  --danger-light: #f8dedc;
  --success: #4caf7d;
  --success-light: #d9f0e4;
  --radius-lg: 28px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 2px 4px rgba(23, 27, 38, 0.05), 0 10px 20px rgba(23, 27, 38, 0.08), 0 28px 50px -8px rgba(23, 27, 38, 0.16);
  --shadow-card-hover: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 4px 10px rgba(23, 27, 38, 0.08), 0 18px 34px rgba(23, 27, 38, 0.12), 0 42px 74px -10px rgba(23, 27, 38, 0.24);
  --shadow-btn: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 2px 4px rgba(23, 27, 38, 0.08), 0 8px 16px -4px rgba(23, 27, 38, 0.2);
  --shadow-btn-hover: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 5px 12px rgba(23, 27, 38, 0.12), 0 16px 28px -6px rgba(23, 27, 38, 0.28);
  --shadow-btn-active: 0 1px 3px rgba(23, 27, 38, 0.18) inset;
  --shadow-inset: inset 0 2px 5px rgba(23, 27, 38, 0.07), inset 0 1px 1px rgba(23, 27, 38, 0.05);
  --shadow-badge: 0 6px 14px -4px rgba(23, 27, 38, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  --container: 1200px;
  --cta-bg: var(--text);
  --cta-text: var(--bg);
}

:root[data-theme="dark"] {
  --bg: #13141c;
  --bg-soft: #1a1c26;
  --surface: #1c1f2a;
  --surface-alt: #21242f;
  --border: #2b2e3b;
  --text: #f2f1f4;
  --text-muted: #9a9ca6;
  --accent: #a7a0ff;
  --accent-light: #33314f;
  --accent-contrast: #f2f1f4;
  --danger: #e8827d;
  --danger-light: #3a2529;
  --success: #4caf7d;
  --success-light: #1f322a;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 26px rgba(0, 0, 0, 0.42), 0 32px 58px -8px rgba(0, 0, 0, 0.55);
  --shadow-card-hover: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 4px 10px rgba(0, 0, 0, 0.35), 0 20px 40px rgba(0, 0, 0, 0.5), 0 48px 84px -10px rgba(0, 0, 0, 0.65);
  --shadow-btn: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 2px 5px rgba(0, 0, 0, 0.35), 0 10px 20px -4px rgba(0, 0, 0, 0.5);
  --shadow-btn-hover: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 5px 12px rgba(0, 0, 0, 0.4), 0 16px 30px -6px rgba(0, 0, 0, 0.6);
  --shadow-btn-active: 0 1px 4px rgba(0, 0, 0, 0.55) inset;
  --shadow-inset: inset 0 2px 5px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(0, 0, 0, 0.25);
  --shadow-badge: 0 6px 16px -4px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  /* Dark mode: don't invert to a light pill with dark text — keep these
     "solid" buttons on a rich, dark-enough-for-white-text purple so the
     label stays white and the button still pops off the dark surfaces. */
  --cta-bg: #5a52e0;
  --cta-text: #ffffff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* Site-wide default: every plain icon renders at a fixed 20x20 box (the SVG
   fills it exactly, independent of the surrounding font-size) in the same
   near-black color as body text. Badge-style icons (feature icons, the tool
   widget's header icon) keep their own accent-colored circle and are sized
   by their own rule, layered on top of this. */
.icon svg { display: block; width: 100%; height: 100%; }
.icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--text); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 12px 24px -18px rgba(23, 27, 38, 0.35);
}
:root[data-theme="dark"] .site-header {
  box-shadow: 0 12px 24px -16px rgba(0, 0, 0, 0.6);
}

.header-inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  margin-right: 8px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
}
.nav-link {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-muted);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.nav-link:hover { color: var(--text); }
.nav-link.active { color: var(--text); border-color: var(--accent); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 14px;
  width: 220px;
  box-shadow: var(--shadow-inset);
}
.search-box .icon { flex-shrink: 0; }
.search-box input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 13.5px;
  color: var(--text);
  width: 100%;
}
.search-box input::placeholder { color: var(--text-muted); }

.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  max-height: 280px;
  overflow-y: auto;
}
.search-results button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  background: none;
  border: none;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
}
.search-results button:hover { background: var(--bg-soft); }
.search-results .no-results { padding: 12px 14px; font-size: 13px; color: var(--text-muted); }

.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: var(--shadow-btn);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.theme-toggle:hover { background: var(--bg-soft); transform: translateY(-2px) scale(1.06); box-shadow: var(--shadow-btn-hover); }
.theme-toggle:active { transform: translateY(0) scale(0.96); box-shadow: var(--shadow-btn-active); }
.theme-toggle.spin svg { animation: spinOnce 0.45s ease; }

/* Hamburger button: only ever shown below the tablet breakpoint, see the
   responsive section for the media query that reveals it. */
.menu-toggle {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: var(--shadow-btn);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.menu-toggle:hover { background: var(--bg-soft); box-shadow: var(--shadow-btn-hover); transform: translateY(-2px); }
.menu-toggle:active { box-shadow: var(--shadow-btn-active); transform: translateY(0); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 40px;
  padding: 64px 24px 40px;
}

.eyebrow { font-size: 14px; color: var(--text-muted); margin: 0 0 16px; }

.hero-copy h1 {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.accent-text { color: var(--accent); }

.hero-desc {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 460px;
  margin: 0 0 20px;
}

.related-converter { margin: -8px 0 16px; font-size: 14px; }
.related-converter a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--accent-light);
  padding-bottom: 1px;
}
.related-converter a:hover { border-bottom-color: var(--accent); }

.hero-note { width: 220px; margin-top: 8px; opacity: 0.9; transition: filter 0.25s ease; }
:root[data-theme="dark"] .hero-note { filter: invert(1) brightness(1.9); opacity: 0.85; }

.hero-visual { display: flex; flex-direction: column; align-items: center; }
.hero-visual img { width: 100%; max-width: 460px; filter: drop-shadow(0 30px 40px rgba(23, 27, 38, 0.18)); }
:root[data-theme="dark"] .hero-visual img { filter: drop-shadow(0 30px 44px rgba(0, 0, 0, 0.5)); }
.theme-img-dark { display: none; }
:root[data-theme="dark"] .theme-img-light { display: none; }
:root[data-theme="dark"] .theme-img-dark { display: block; }

/* Tool page: a second hero-style row, right under the main hero, that
   mirrors the same column proportions — the widget's intro copy sits on
   the left (the opposite side from where the widget itself will land),
   and the widget lives on the right, directly under the hero graphic
   above it, with both sides vertically aligned to each other. */
.hero-widget-row {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 40px;
  padding: 28px 24px 0;
}
.hero-widget-copy .section-label { margin: 0 0 10px; }
.hero-widget-copy .tool-widget-section-heading { font-size: 26px; margin: 0 0 12px; }
.hero-widget-copy .tool-widget-section-intro { font-size: 16px; line-height: 1.6; color: var(--text-muted); max-width: 420px; margin: 0; }
.hero-widget-slot { width: 100%; max-width: 460px; margin: 0 auto; }
.hero-widget-slot .tool-widget { max-width: 100%; margin: 0 auto; }

/* Hero entrance */
.eyebrow, .hero-copy h1, .hero-desc, .hero-note, .hero-visual, .converter-card {
  opacity: 0;
  animation: fadeInUp 0.7s ease forwards;
}
.eyebrow { animation-delay: 0.05s; }
.hero-copy h1 { animation-delay: 0.15s; }
.hero-desc { animation-delay: 0.28s; }
.hero-note { animation-delay: 0.4s; }
.hero-visual { animation-delay: 0.22s; }
.converter-card { animation-delay: 0.5s; }
.hero-visual img { animation: floatY 5.5s ease-in-out 1.1s infinite; }

/* ==========================================================================
   Converter widget
   ========================================================================== */
.converter-section { padding: 8px 24px 0; }

.converter-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px;
  transition: box-shadow 0.35s ease, transform 0.35s ease, border-color 0.35s ease;
}
.converter-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--accent);
  transform: translateY(-6px);
}

.tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.tabs::-webkit-scrollbar { height: 6px; }

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}
.tab-btn .icon { transition: transform 0.2s ease; }
.tab-btn { transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
.tab-btn:hover { color: var(--text); background: var(--bg-soft); transform: translateY(-1px); }
.tab-btn:hover .icon { transform: scale(1.12); }
.tab-btn.active:hover { transform: none; }
.tab-btn.active {
  background: var(--accent-light);
  color: var(--accent-contrast);
  font-weight: 600;
  animation: tabPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tab-more { margin-left: auto; text-decoration: none; }

.converter-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
  margin-top: 26px;
}

.field-col { display: flex; flex-direction: column; gap: 10px; }
.field-label { font-size: 13px; color: var(--text-muted); font-weight: 500; }

.select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  height: 48px;
  box-shadow: var(--shadow-inset);
  transition: border-color 0.2s ease, background-color 0.25s ease, box-shadow 0.25s ease,
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.select-wrap .select-icon {
  position: absolute;
  left: 14px;
  color: var(--text-muted);
  width: 17px;
  height: 17px;
  pointer-events: none;
  transition: color 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.select-wrap .chevron {
  position: absolute;
  right: 12px;
  color: var(--text-muted);
  width: 16px;
  height: 16px;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
}
/* The real <select> stays in the DOM purely as the data source (its .value
   drives the conversion math) but is fully invisible/inert — the button +
   listbox below are the actual clickable, animatable UI. */
.select-wrap .sr-select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  border: 0;
  padding: 0;
}
.select-wrap .select-trigger {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  height: 100%;
  padding: 0 40px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  text-align: left;
}
.select-trigger-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* click/tap anywhere in the box — including over the icon/arrow — now hits
   the trigger button, since it spans the full width/height of the wrap and
   the icons above it are pointer-events:none */
.select-wrap:hover {
  border-color: var(--accent);
  background: var(--bg-soft);
  transform: translateY(-1px);
}
.select-wrap:hover .select-icon,
.select-wrap:hover .chevron { color: var(--accent); }
.select-wrap:hover .chevron { transform: translateY(1px); }
.select-wrap:focus-within,
.select-wrap.is-open {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: var(--shadow-inset), 0 0 0 4px var(--accent-light);
  transform: translateY(-1px);
}
.select-wrap.is-open .chevron {
  transform: rotate(180deg) scale(1.15);
  color: var(--accent);
}
.select-wrap.is-open .select-icon {
  transform: scale(1.12);
  color: var(--accent);
}

/* Custom dropdown panel — this is what actually gets the slide-down open
   animation; a native <select>'s own popup can't be styled/animated by any
   browser, which is why the visible list here is hand-built. It's rendered
   as a direct child of <body> (position: fixed, top/left/width set in JS)
   so it always paints above every other section on the page, no matter what
   stacking context its trigger happens to sit inside. */
.select-panel {
  position: fixed;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-card-hover);
  overscroll-behavior: contain;
  max-height: 260px;
  overflow-y: auto;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scaleY(0.95);
  transform-origin: top center;
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s;
}
.select-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scaleY(1);
}
.select-panel::-webkit-scrollbar { width: 6px; }
.select-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.select-option {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.select-option:hover,
.select-option.is-active {
  background: var(--accent-light);
  color: var(--accent-contrast);
  transform: translateX(2px);
}
.select-option.is-selected {
  font-weight: 700;
  color: var(--accent);
}
.select-option.is-selected::after {
  content: '✓';
  float: right;
  margin-left: 8px;
}

.number-wrap input {
  width: 100%;
  height: 56px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 0 16px;
  font-size: 21px;
  font-weight: 600;
  color: var(--text);
  outline: none;
  box-shadow: var(--shadow-inset);
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.number-wrap input:hover { border-color: var(--accent); }
.number-wrap input:focus {
  border-color: var(--accent);
  box-shadow: var(--shadow-inset), 0 0 0 4px var(--accent-light);
  transform: translateY(-1px);
}
.result-wrap input {
  background: var(--bg-soft);
  color: var(--text);
  cursor: default;
}
.result-wrap input:hover, .result-wrap input:focus {
  border-color: var(--border);
  transform: none;
  box-shadow: var(--shadow-inset);
}

.swap-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  align-self: center;
  margin-top: 26px;
  box-shadow: var(--shadow-btn);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
}
.swap-btn:hover { background: var(--bg-soft); border-color: var(--accent); box-shadow: var(--shadow-btn-hover), 0 0 0 4px var(--accent-light); transform: translateY(-2px); }
.swap-btn:active { box-shadow: var(--shadow-btn-active); transform: translateY(0) scale(0.94); }
.swap-btn.is-rotated { transform: rotate(180deg); }
.swap-btn.is-rotated:hover { transform: rotate(180deg) translateY(-2px); }
.result-wrap.flash input { animation: resultFlash 0.5s ease; }

.currency-note {
  font-size: 12.5px;
  color: var(--text-muted);
  font-style: italic;
  margin: 14px 2px 0;
}

.convert-btn {
  width: 100%;
  margin-top: 22px;
  height: 54px;
  border-radius: 14px;
  border: none;
  background: var(--cta-bg);
  color: var(--cta-text);
  font-size: 15.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: background-color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
}
.convert-btn:hover {
  background: var(--accent);
  color: #171b26;
  transform: translateY(-3px);
  box-shadow: var(--shadow-btn-hover), 0 10px 22px -6px var(--accent);
}
.convert-btn:active { transform: translateY(0) scale(0.97); box-shadow: var(--shadow-btn-active); }
.convert-btn .icon { transition: transform 0.25s ease; }
.convert-btn:hover .icon { transform: rotate(-50deg); }
.reset-btn.is-resetting .icon { animation: resetSpin 0.5s ease; }
@keyframes resetSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

/* ==========================================================================
   Features
   ========================================================================== */
.features {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
  padding: 56px 48px;
  margin-top: 40px;
  margin-bottom: 8px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.feature {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.feature:hover { box-shadow: var(--shadow-btn-hover); border-color: var(--accent); transform: perspective(800px) rotateX(3deg) translateY(-7px); }
.feature-icon {
  width: 22px;
  height: 22px;
  font-size: 12px;
  border-radius: 8px;
  background: var(--accent-light);
  color: var(--accent);
  margin-bottom: 16px;
  box-shadow: var(--shadow-badge);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature:hover .feature-icon { transform: translateY(-3px) scale(1.12) rotate(-6deg); box-shadow: var(--shadow-btn-hover); }
.feature h3 { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.feature p { font-size: 13.5px; color: var(--text-muted); margin: 0; line-height: 1.5; }

/* ==========================================================================
   Split sections (popular / categories)
   ========================================================================== */
.split-section {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: start;
  padding: 56px 48px;
  margin-top: 32px;
  margin-bottom: 8px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.section-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}
.split-copy h2 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 14px;
}
.section-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 400px;
  margin: 0 0 24px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.2s ease, opacity 0.2s ease;
}
.btn-outline { background: var(--surface); border-color: var(--border); color: var(--text); box-shadow: var(--shadow-btn); }
.btn-outline:hover { background: var(--surface-alt); box-shadow: var(--shadow-btn-hover); transform: translateY(-3px); border-color: var(--accent); }
.btn-outline:active { box-shadow: var(--shadow-btn-active); transform: translateY(0); }
.btn-dark { background: var(--cta-bg); color: var(--cta-text); box-shadow: var(--shadow-btn); }
.btn-dark:hover { opacity: 0.94; box-shadow: var(--shadow-btn-hover); transform: translateY(-3px); }
.btn-dark:active { box-shadow: var(--shadow-btn-active); transform: translateY(0); }

.popular-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.popular-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  text-decoration: none;
}
.popular-card:hover { box-shadow: var(--shadow-card-hover); border-color: var(--accent); transform: perspective(800px) rotateX(3deg) translateY(-7px); }
.popular-card { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.popular-card-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.popular-card-icon {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 19px;
  height: 19px;
  font-size: 10px;
  border-radius: 7px;
  background: var(--accent-light);
  color: var(--accent);
  box-shadow: var(--shadow-badge);
  flex-shrink: 0;
}
.popular-card-icon.danger { background: var(--danger-light); color: var(--danger); }
.popular-card-icon.success { background: var(--success-light); color: var(--success); }
.popular-card-text { min-width: 0; display: flex; flex-direction: column; }
.popular-card-text .title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.popular-card-text .subtitle { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; display: block; }
.popular-card-arrow { color: var(--text-muted); width: 17px; height: 17px; flex-shrink: 0; transition: transform 0.25s ease; }
.popular-card:hover .popular-card-arrow { transform: translateX(3px); }
.popular-card:hover .popular-card-icon { transform: scale(1.1) rotate(-6deg); }

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.category-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font-family: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.category-card:hover { box-shadow: var(--shadow-card-hover); border-color: var(--accent); transform: perspective(800px) rotateX(3deg) translateY(-7px); }
.category-card:hover .category-card-icon { transform: translateY(-2px) scale(1.12) rotate(-6deg); box-shadow: var(--shadow-btn-hover); }
.category-card-icon {
  width: 35px;
  height: 35px;
  padding: 8px;
  border-radius: 10px;
  background: var(--accent-light);
  color: var(--accent);
  margin-bottom: 14px;
  box-shadow: var(--shadow-badge);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.category-card .title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.category-card .example { font-size: 12.5px; color: var(--text-muted); }

/* ==========================================================================
   Trust grid (6-up "Key Measurement Inputs" -- same look as .features)
   ========================================================================== */
.trust-grid {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding: 56px 48px;
  margin-top: 28px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* ==========================================================================
   Architecture cards (4-up category breakdown)
   ========================================================================== */
.arch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 28px;
  text-align: left;
}
.arch-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-card);
}
.arch-card h3 { font-size: 19px; font-weight: 700; margin: 0 0 8px; }
.arch-card .arch-desc { color: var(--text-muted); font-size: 14.5px; line-height: 1.6; margin: 0 0 14px; }
.arch-card .arch-logic { font-size: 13px; color: var(--text-muted); margin: 0 0 16px; line-height: 1.5; }
.arch-card .arch-logic strong { color: var(--text); }
.arch-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.arch-tag { font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: var(--accent-light); color: var(--accent); }
.arch-tag.more { background: transparent; border: 1px dashed var(--border); color: var(--text-muted); }

/* ==========================================================================
   Panel block -- a single unified card combining a heading with the grid
   of cards below it (How It Works / Architecture / Key Measurement Inputs),
   so each reads as ONE section instead of two stacked boxes.
   ========================================================================== */
.panel-block {
  position: relative;
  padding: 56px 48px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.panel-block-head { max-width: 620px; margin: 0 auto 40px; text-align: center; }
.panel-block-head h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; margin: 6px 0 14px; }
.panel-block-head p { font-size: 15px; line-height: 1.7; color: var(--text-muted); margin: 0 auto; }
.panel-block .feature:hover { box-shadow: none; }
.panel-block .trust-grid,
.panel-block .arch-grid,
.panel-block .numbered-grid,
.panel-block .conversion-table-wrap {
  margin-top: 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* ==========================================================================
   Numbered cards (Understanding the Modern Unit Systems)
   ========================================================================== */
.numbered-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: left;
}
.numbered-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.numbered-card:hover {
  box-shadow: var(--shadow-btn-hover);
  border-color: var(--accent);
  transform: translateY(-4px);
}
.numbered-index {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 10px;
}
.numbered-card h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.numbered-card p { color: var(--text-muted); font-size: 14.5px; line-height: 1.6; margin: 0; }

/* ==========================================================================
   Conversion reference table (Comprehensive Conversion Table)
   ========================================================================== */
.conversion-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.conversion-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 480px;
}
.conversion-table thead th {
  text-align: left;
  padding: 14px 18px;
  font-weight: 700;
  color: var(--text);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}
.conversion-table tbody td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}
.conversion-table tbody tr:last-child td { border-bottom: none; }
.conversion-table .group-row td {
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-light);
  padding: 10px 18px;
}

/* ==========================================================================
   Homepage marketing blocks (Why System Leads / How It Works / Architecture /
   Trust / Privacy / FAQ) -- one consistent spacing + card rhythm so these
   read as distinct sections instead of a long undifferentiated scroll.
   ========================================================================== */
.home-block { margin-top: 64px; }
main#home { display: block; padding-bottom: 64px; }

.home-heading { max-width: 640px; margin: 0 auto; text-align: center; }
.home-heading h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; margin: 6px 0 10px; }
.home-heading p { font-size: 15px; color: var(--text-muted); line-height: 1.6; margin: 0; }

.info-panel {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  padding: 40px 44px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  text-align: center;
}
.info-panel h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; margin: 6px 0 14px; }
.info-panel p { font-size: 15px; line-height: 1.7; color: var(--text-muted); max-width: 620px; margin: 0 auto 10px; }
.info-panel p:last-child { margin-bottom: 0; }
.info-panel strong { color: var(--text); }

/* ==========================================================================
   Why Unitora banner
   ========================================================================== */
.why-banner {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
  background: linear-gradient(135deg, var(--bg-soft) 0%, var(--accent-light) 130%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 56px;
  margin: 32px 0 96px;
}
/* Animated background glow for the panel sections (features / popular / categories / why-banner) */
.features::before,
.split-section::before,
.why-banner::before {
  content: "";
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(circle at 18% 25%, var(--accent) 0%, transparent 42%),
    radial-gradient(circle at 82% 75%, var(--accent) 0%, transparent 38%);
  opacity: 0.1;
  filter: blur(50px);
  z-index: 0;
  animation: panelDrift 20s ease-in-out infinite;
  pointer-events: none;
}
.split-section::before { animation-duration: 24s; }
.why-banner::before {
  background:
    radial-gradient(circle at 18% 25%, #ffffff 0%, transparent 45%),
    radial-gradient(circle at 82% 75%, var(--text) 0%, transparent 45%);
  opacity: 0.22;
  animation-duration: 22s;
}

:root[data-theme="dark"] .features::before,
:root[data-theme="dark"] .split-section::before {
  opacity: 0.16;
}
:root[data-theme="dark"] .why-banner::before {
  background:
    radial-gradient(circle at 18% 25%, #ffffff 0%, transparent 45%),
    radial-gradient(circle at 82% 75%, var(--accent) 0%, transparent 45%);
  opacity: 0.3;
}

.features > *, .split-section > *, .why-banner > * {
  position: relative;
  z-index: 1;
}

.why-list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.why-list li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 500; }

.why-visual { display: flex; justify-content: center; align-items: center; }
.why-shape {
  position: relative;
  width: 100%;
  max-width: 300px;
  height: 240px;
  border-radius: 40px;
  background: linear-gradient(160deg, var(--text) 0%, var(--accent) 100%);
  transform: perspective(900px) rotateY(-8deg) rotate(-6deg);
  box-shadow: var(--shadow-card-hover);
  transition: transform 0.4s ease;
}
.why-shape:hover { transform: perspective(900px) rotateY(-3deg) rotate(-4deg) translateY(-4px); }
.why-sphere {
  position: absolute;
  right: -18px;
  top: -18px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #ffffff 0%, var(--bg-soft) 55%, var(--border) 100%);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.25), 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { border-top: 1px solid var(--border); padding: 32px 0; }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-nav { display: flex; gap: 22px; }
.footer-nav a { font-size: 13.5px; color: var(--text-muted); }
.footer-nav a:hover { color: var(--text); }
.copyright { font-size: 13px; color: var(--text-muted); margin: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  /* Header: collapse the nav + search into a hamburger dropdown. Kept at
     the same breakpoint as the hero/grid changes below since a tablet in
     portrait (~768-810px) is already too narrow for five nav links, a
     search box and the logo to fit on one line. */
  .header-inner { flex-wrap: wrap; row-gap: 12px; }
  .menu-toggle { display: inline-flex; }
  .header-actions { order: 1; margin-left: auto; }
  .main-nav, .search-box { display: none; width: 100%; }
  .site-header.nav-open .main-nav,
  .site-header.nav-open .search-box { display: flex; }
  .main-nav {
    order: 3;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: none;
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }
  .nav-link { padding: 8px 2px; width: 100%; border-bottom: none; }
  .nav-link.active { background: var(--surface-alt); border-radius: var(--radius-sm); }
  .search-box { order: 2; width: 100%; margin-top: 2px; }

  .hero { grid-template-columns: 1fr; padding-top: 40px; }
  .hero-visual { order: -1; max-width: 320px; margin: 0 auto; }
  /* On the tool pages read the headline/intro first and let the graphic
     follow instead of jumping to the top like the homepage does. */
  .page-hero .hero-visual { order: 0; max-width: 420px; }
  .page-hero .hero-visual img { max-width: 280px; }
  .hero-widget-row { grid-template-columns: 1fr; gap: 20px; padding-top: 20px; }
  .hero-widget-copy .tool-widget-section-intro { max-width: none; }
  .hero-widget-slot { max-width: 420px; }
  .features { grid-template-columns: repeat(3, 1fr); row-gap: 32px; padding: 40px 32px; }
  .split-section { grid-template-columns: 1fr; padding: 40px 32px; }
  .popular-grid, .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-banner { grid-template-columns: 1fr; padding: 40px; }
  .why-visual { order: -1; }
  .trust-grid { grid-template-columns: repeat(3, 1fr); row-gap: 32px; padding: 40px 32px; }
  .arch-grid { grid-template-columns: 1fr; }
  .numbered-grid { grid-template-columns: 1fr; }
  .info-panel, .panel-block { padding: 32px 28px; }
  .panel-block .trust-grid, .panel-block .arch-grid, .panel-block .numbered-grid, .panel-block .conversion-table-wrap { padding: 0; }
}

@media (max-width: 720px) {
  .features { grid-template-columns: repeat(2, 1fr); padding: 32px 20px; }
  .split-section { padding: 32px 20px; }
  .converter-body { grid-template-columns: 1fr; }
  .swap-btn { justify-self: center; margin: 0; transform: rotate(90deg); }
  .swap-btn.is-rotated { transform: rotate(270deg); }
  .popular-grid, .category-grid { grid-template-columns: minmax(0, 1fr); }
  .why-banner { padding: 28px; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); padding: 32px 20px; }
  .home-block { margin-top: 48px; }
  main#home { padding-bottom: 48px; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .features, .split-section { border-radius: var(--radius-md); padding: 28px 18px; }
  .why-banner { border-radius: var(--radius-md); }
  .split-copy h2 { font-size: 24px; }
  .trust-grid { grid-template-columns: 1fr; border-radius: var(--radius-md); padding: 28px 18px; }
  .info-panel, .panel-block { padding: 26px 20px; border-radius: var(--radius-md); }
  .panel-block .trust-grid, .panel-block .arch-grid, .panel-block .numbered-grid, .panel-block .conversion-table-wrap { padding: 0; border-radius: 0; }
  .conversion-table { min-width: 420px; }
  .article-content { padding: 8px 16px 48px; }
  .article-panel { padding: 22px 16px 26px; }
  .popular-card { padding: 14px; }
}

/* ==========================================================================
   Motion — keyframes, scroll-reveal, reduced-motion support
   ========================================================================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes panelDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(3%, -4%) scale(1.08); }
  66% { transform: translate(-4%, 3%) scale(0.96); }
}
@keyframes tabPop {
  0% { transform: scale(0.9); }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
@keyframes spinOnce {
  from { transform: rotate(0deg); }
  to { transform: rotate(180deg); }
}
@keyframes resultFlash {
  0% { background-color: var(--accent-light); }
  100% { background-color: var(--bg-soft); }
}

/* Scroll reveal: JS toggles .in-view on elements marked .reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.2, 0.65, 0.3, 1), transform 0.65s cubic-bezier(0.2, 0.65, 0.3, 1);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
  .eyebrow, .hero-copy h1, .hero-desc, .hero-note, .hero-visual, .converter-card { opacity: 1 !important; animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .hero-visual img { animation: none !important; }
  .reveal { opacity: 1; transform: none; }
  .eyebrow, .hero-copy h1, .hero-desc, .hero-note, .hero-visual, .converter-card { opacity: 1; animation: none; }
}

/* ==========================================================================
   Dedicated converter landing pages (/*-converter)
   ========================================================================== */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 18px 24px 0;
  font-size: 13px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .icon { opacity: 0.7; }
.breadcrumb .current { color: var(--text); font-weight: 500; }

/* .page-hero reuses the homepage's .hero grid (copy + floating visual) —
   just a touch tighter since a breadcrumb already sits above it. */
.page-hero { padding-top: 12px; }

.section-label { margin-top: 0; }

.tool-widget-section-heading {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 14px;
}
.tool-widget-section-intro { font-size: 15px; color: var(--text-muted); margin: 0 0 20px; max-width: 640px; }

.tool-widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 26px 28px 24px;
  max-width: 620px;
}
.tool-widget-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.tool-widget-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--accent-light);
  color: var(--accent);
  flex-shrink: 0;
  box-shadow: var(--shadow-badge);
}
.tool-widget-head-text h3 { font-size: 17px; font-weight: 700; margin: 0 0 2px; }
.tool-widget-direction {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}
.tool-widget-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  margin-top: 20px;
}
.tool-widget .swap-btn { margin-top: 22px; width: 40px; height: 40px; }
.tool-widget-formula {
  margin: 18px 2px 0;
  font-size: 13px;
  color: var(--text-muted);
  font-family: 'Courier New', monospace;
}

.article-content { max-width: 900px; padding: 8px 24px 64px; }
.article-section { margin-top: 32px; text-align: center; }
.article-section h2 { font-size: 30px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 12px; }
.article-section h3 { font-size: 16.5px; font-weight: 600; margin: 0 0 6px; }
.article-section p:not(.section-label) { font-size: 15.5px; line-height: 1.7; color: var(--text-muted); margin: 0 auto 4px; max-width: 640px; }

/* Long-form legal content (Privacy Policy, Terms of Service) -- left
   aligned prose instead of the centered marketing-copy look the rest of
   .article-section uses, since paragraphs/lists here are long and are
   meant to be read top-to-bottom, not skimmed as short centered blurbs. */
.legal-content { max-width: 760px; }
.legal-content .article-section { text-align: left; margin-top: 30px; }
.legal-content .article-section:first-child { margin-top: 8px; }
.legal-content .article-section h2 { font-size: 22px; margin: 0 0 10px; }
.legal-content .article-section h3 { font-size: 17px; margin: 22px 0 8px; }
.legal-content .article-section p:not(.section-label) { margin: 0 0 14px; max-width: none; text-align: left; }
.legal-content .article-section ul,
.legal-content .article-section ol {
  margin: 0 0 14px;
  padding-left: 22px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-muted);
}
.legal-content .article-section li { margin-bottom: 6px; }
.legal-content .updated-note { color: var(--text-muted); font-size: 14px; margin: 0 0 4px; }

/* Panels — same visual chrome as the homepage's .features / .split-section:
   soft surface background, border, shadow and a drifting accent glow. */
.article-panel {
  position: relative;
  overflow: hidden;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 40px 40px 44px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.article-panel:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: var(--shadow-card-hover);
}
.article-panel::before {
  content: "";
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(circle at 18% 25%, var(--accent) 0%, transparent 42%),
    radial-gradient(circle at 82% 75%, var(--accent) 0%, transparent 38%);
  opacity: 0.1;
  filter: blur(50px);
  z-index: 0;
  animation: panelDrift 22s ease-in-out infinite;
  pointer-events: none;
}
:root[data-theme="dark"] .article-panel::before { opacity: 0.16; }
.article-panel > * { position: relative; z-index: 1; }

.use-case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 20px;
}
.use-case-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.use-case-card:hover {
  transform: translateY(-7px);
  border-color: var(--accent);
  box-shadow: var(--shadow-card-hover);
}
.use-case-card h3 { color: var(--text); transition: color 0.2s ease; }
.use-case-card:hover h3 { color: var(--accent); }
.use-case-card p { margin: 0; }

.conv-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-top: 20px;
}
.conv-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.conv-table th, .conv-table td { padding: 11px 16px; text-align: center; white-space: nowrap; }
.conv-table thead th {
  background: var(--surface-alt);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}
.conv-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--border); }
.conv-table tbody tr:hover { background: var(--surface-alt); }

.faq-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.faq-item:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: var(--shadow-card-hover);
}
.faq-item summary {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: '+';
  display: inline-block;
  width: 18px;
  color: var(--accent);
  font-weight: 700;
}
.faq-item[open] summary::before { content: '\2212'; }
.faq-item p { margin: 12px auto 0; max-width: 560px; font-size: 15.5px; line-height: 1.7; color: var(--text-muted); }

.cta-banner {
  text-align: center;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.cta-banner:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: var(--shadow-card-hover);
}
.cta-banner p { margin: 0; font-size: 15px; color: var(--text); }
.cta-banner a { color: var(--accent); font-weight: 600; }
.cta-banner a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .use-case-grid { grid-template-columns: 1fr; }
  .tool-widget-body { grid-template-columns: 1fr; }
  .tool-widget .swap-btn { justify-self: center; margin: 0; transform: rotate(90deg); }
  .article-panel { padding: 28px 20px 32px; border-radius: var(--radius-md); }
}

/* ===== FORMS (Contact page, Admin panel) ===== */
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.form-row label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.form-row input,
.form-row textarea,
.admin-code-textarea {
  font-family: inherit;
  font-size: 14.5px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  width: 100%;
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-row input:focus,
.form-row textarea:focus,
.admin-code-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(141, 135, 240, 0.18);
}
.contact-form { max-width: 560px; margin: 0 auto; text-align: left; }
.form-notice {
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 16px;
}
.form-notice-success { background: var(--success-light); color: var(--success); }
.form-notice-error { background: var(--danger-light); color: var(--danger); }

/* ===== ADMIN PANEL ===== */
.admin-auth-wrap { display: flex; justify-content: center; padding: 80px 16px; }
.admin-auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px;
}
.admin-auth-card h1 { font-size: 22px; margin: 0 0 6px; }
.admin-auth-submit { width: 100%; justify-content: center; margin-top: 4px; }

.admin-wrap { padding: 40px 16px 80px; max-width: 760px; }
.admin-header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.admin-header-row h1 { margin: 0; font-size: 26px; }
.admin-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  margin: 24px 0;
}
.admin-card h2 { font-size: 17px; margin: 0 0 6px; }
.admin-code-textarea { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 13px; }
.admin-ad-slots { display: flex; flex-direction: column; gap: 20px; margin-top: 16px; }
.admin-ad-slot { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; background: var(--surface-alt); }
.admin-ad-slot-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.admin-toggle { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; cursor: pointer; }
.admin-toggle input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.admin-ad-slot-format { font-size: 12px; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; }
.admin-ad-slot-hint { font-size: 13px; color: var(--text-muted); margin: 8px 0 10px; }

/* ===== AD SLOTS (public site) ===== */
.ad-slot:empty { display: none; }
.ad-slot-site-banner { display: flex; justify-content: center; padding: 10px 16px; }