/* ═══════════════════════════════════════════════════════
   ConvertEngineering — Design System
   Identity: Deep Slate + Electric Teal + Warm Amber,
   Inter type, glassmorphism, engineering precision
   ═══════════════════════════════════════════════════════ */
:root {
   --brand: #0ea5e9;
   --brand-dark: #0284c7;
   --brand-light: #7dd3fc;
   --brand-accent: #f59e0b;
   --brand-accent-dark: #d97706;
   --brand-accent-light: #fde68a;
   --brand-gradient: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 50%, #0ea5e9 100%);
   --brand-gradient-accent: linear-gradient(135deg, #0c1222 0%, #1a2744 100%);
   --brand-gradient-subtle: linear-gradient(135deg, #f0f9ff 0%, #fffbeb 100%);
   --brand-gradient-hero: linear-gradient(135deg, #0c1222 0%, #162033 40%, #0f1b2e 100%);
   --bg-body: #f8fafc;
   --bg-card: #fff;
   --bg-elevated: #fff;
   --bg-input: #f1f5f9;
   --border: #e2e8f0;
   --border-focus: #0ea5e9;
   --text-primary: #0f172a;
   --text-secondary: #475569;
   --text-muted: #94a3b8;
   --text-on-brand: #fff;
   --text-brand: #0ea5e9;
   --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(0, 0, 0, .04);
   --shadow-md: 0 4px 16px rgba(15, 23, 42, .08), 0 2px 4px rgba(0, 0, 0, .04);
   --shadow-lg: 0 12px 40px rgba(15, 23, 42, .12), 0 4px 8px rgba(0, 0, 0, .04);
   --shadow-glow: 0 0 24px rgba(14, 165, 233, .25);
   --shadow-brand: 0 4px 20px rgba(14, 165, 233, .15);
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 16px;
   --radius-xl: 20px;
   --radius-pill: 50px;
   --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
   --transition: .2s cubic-bezier(.4, 0, .2, 1);
   --container: 1120px;
   --rate-up: #10b981;
   --rate-down: #ef4444
}

[data-theme="dark"] {
   --bg-body: #080d18;
   --bg-card: #111827;
   --bg-elevated: #162033;
   --bg-input: #1e293b;
   --border: #1e3048;
   --border-focus: #38bdf8;
   --text-primary: #f1f5f9;
   --text-secondary: #94a3b8;
   --text-muted: #64748b;
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
   --shadow-md: 0 4px 16px rgba(0, 0, 0, .4);
   --shadow-lg: 0 12px 40px rgba(0, 0, 0, .5);
   --shadow-glow: 0 0 32px rgba(14, 165, 233, .2);
   --brand-gradient-subtle: linear-gradient(135deg, #111827 0%, #162033 100%)
}

*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0
}

html {
   scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%
}

body {
   font-family: var(--font-sans);
   color: var(--text-primary);
   background: var(--bg-body);
   line-height: 1.7;
   font-size: 16px;
   -webkit-font-smoothing: antialiased
}

img {
   max-width: 100%;
   display: block
}

a {
   color: var(--brand);
   text-decoration: none;
   transition: color var(--transition)
}

a:hover {
   color: var(--brand-dark)
}

button {
   font-family: inherit;
   cursor: pointer
}

table {
   border-collapse: collapse;
   width: 100%
}

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

.hidden {
   display: none !important
}

.mt-24 {
   margin-top: 24px
}

.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   border: 0
}

/* ── Header ── */
.site-header {
   position: sticky;
   top: 0;
   z-index: 100;
   background: rgba(248, 250, 252, .88);
   backdrop-filter: blur(20px) saturate(180%);
   -webkit-backdrop-filter: blur(20px) saturate(180%);
   border-bottom: 1px solid var(--border);
   transition: background var(--transition)
}

[data-theme="dark"] .site-header {
   background: rgba(8, 13, 24, .88)
}

.site-header .container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 64px
}

/* ── Logo ── */
.logo {
   display: flex;
   align-items: center;
   gap: 10px;
   text-decoration: none;
   font-weight: 800;
   font-size: 1.15rem;
   color: var(--text-primary)
}

.logo-img {
   width: 36px;
   height: 36px;
   border-radius: var(--radius-sm);
   box-shadow: var(--shadow-brand);
   transition: transform var(--transition), box-shadow var(--transition);
   object-fit: contain
}

.logo:hover .logo-img {
   transform: scale(1.08) rotate(-2deg);
   box-shadow: var(--shadow-glow)
}

.logo-text {
   letter-spacing: -.02em
}

.logo-text span {
   color: var(--brand)
}

/* ── Navigation ── */
.site-nav ul {
   list-style: none;
   display: flex;
   align-items: center;
   gap: 4px
}

.site-nav a,
.nav-trigger {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 8px 14px;
   border-radius: var(--radius-pill);
   font-size: .88rem;
   font-weight: 500;
   color: var(--text-secondary);
   background: transparent;
   border: none;
   transition: all var(--transition)
}

.site-nav a:hover,
.nav-trigger:hover {
   color: var(--brand);
   background: rgba(14, 165, 233, .08)
}

.chevron {
   font-size: .6em;
   transition: transform var(--transition)
}

.nav-dropdown {
   position: relative
}

.dropdown-menu {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   background: var(--bg-elevated);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   padding: 8px;
   padding-top: 16px;
   min-width: 260px;
   box-shadow: var(--shadow-lg);
   z-index: 200
}

.nav-dropdown::after {
   content: '';
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   height: 14px;
   display: none
}

@media(hover:hover) {
   .nav-dropdown:hover::after {
      display: block
   }

   .nav-dropdown:hover .dropdown-menu,
   .nav-dropdown:focus-within .dropdown-menu {
      display: block
   }

   .nav-dropdown:hover .chevron {
      transform: rotate(180deg)
   }
}

.dropdown-menu a {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px 14px;
   border-radius: var(--radius-sm);
   font-size: .88rem;
   color: var(--text-primary)
}

.dropdown-menu a:hover {
   background: rgba(14, 165, 233, .06);
   color: var(--brand)
}

.dd-icon {
   width: 32px;
   height: 32px;
   border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: .85rem;
   font-weight: 700;
   background: var(--brand-gradient-subtle);
   color: var(--brand)
}

.dd-sep {
   height: 1px;
   background: var(--border);
   margin: 6px 14px
}

/* ── Theme Toggle ── */
.btn-theme {
   width: 38px;
   height: 38px;
   border-radius: var(--radius-pill);
   background: var(--bg-input);
   border: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1rem;
   transition: all var(--transition);
   color: var(--text-secondary)
}

.btn-theme:hover {
   background: rgba(14, 165, 233, .1);
   border-color: var(--brand);
   color: var(--brand)
}

/* ── Mobile Nav Toggle ── */
.nav-toggle {
   display: none;
   flex-direction: column;
   gap: 5px;
   background: none;
   border: none;
   padding: 6px
}

.nav-toggle span {
   display: block;
   width: 22px;
   height: 2px;
   background: var(--text-primary);
   border-radius: 2px;
   transition: all var(--transition)
}

/* ── Hero ── */
.page-hero {
   padding: 52px 0 44px;
   background: var(--brand-gradient-hero);
   color: #fff;
   position: relative;
   overflow: hidden
}

.page-hero::before {
   content: '';
   position: absolute;
   top: -40%;
   right: -10%;
   width: 500px;
   height: 500px;
   background: radial-gradient(circle, rgba(14, 165, 233, .12) 0%, transparent 70%);
   border-radius: 50%
}

.page-hero::after {
   content: '';
   position: absolute;
   bottom: -30%;
   left: -5%;
   width: 350px;
   height: 350px;
   background: radial-gradient(circle, rgba(245, 158, 11, .08) 0%, transparent 70%);
   border-radius: 50%
}

.page-hero h1 {
   font-size: clamp(1.6rem, 4vw, 2.2rem);
   font-weight: 800;
   line-height: 1.2;
   letter-spacing: -.03em;
   position: relative;
   z-index: 1
}

.page-hero p {
   font-size: 1.05rem;
   opacity: .85;
   max-width: 620px;
   margin-top: 12px;
   position: relative;
   z-index: 1
}

.hero-badges {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 18px;
   position: relative;
   z-index: 1
}

.badge {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 6px 14px;
   border-radius: var(--radius-pill);
   font-size: .78rem;
   font-weight: 600;
   background: rgba(14, 165, 233, .15);
   color: var(--brand-light);
   border: 1px solid rgba(14, 165, 233, .25);
   backdrop-filter: blur(8px)
}

/* ── Breadcrumbs ── */
.breadcrumbs {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: .82rem;
   padding: 14px 0;
   color: var(--text-muted);
   flex-wrap: wrap;
   position: relative;
   z-index: 1
}

.breadcrumbs a {
   color: var(--brand-light);
   font-weight: 500
}

.breadcrumbs a:hover {
   color: #fff;
   text-decoration: underline
}

.breadcrumbs .sep {
   opacity: .4
}

/* ── Page Navigation ── */
.page-navigation {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 14px 20px;
   background: var(--bg-input);
   border-radius: var(--radius-md);
   border: 1px solid var(--border);
   margin: 16px 0;
   flex-wrap: wrap;
   gap: 8px;
   font-size: .85rem
}

.page-navigation a {
   color: var(--brand);
   font-weight: 500;
   transition: all var(--transition)
}

.page-navigation a:hover {
   color: var(--brand-dark)
}

.page-navigation .nav-sep {
   color: var(--text-muted)
}

/* ── Page Body + Layout ── */
.page-body {
   padding: 32px 0 60px
}

.layout--with-sidebar {
   max-width: 860px;
   margin: 0 auto
}

.main-col {
   min-width: 0
}

/* ── Card (converter) ── */
.card {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-md);
   overflow: hidden;
   position: relative
}

.card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: var(--brand-gradient)
}

.card-header {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 20px 24px 0
}

.card-icon {
   width: 40px;
   height: 40px;
   border-radius: var(--radius-sm);
   background: var(--brand-gradient);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #0c1222;
   font-weight: 800;
   font-size: .95rem;
   font-family: var(--font-mono)
}

.card-header h2 {
   font-size: 1.15rem;
   font-weight: 700;
   letter-spacing: -.02em
}

.card-body {
   padding: 20px 24px 24px
}

/* ── Converter Widget ── */
.converter-widget {
   display: flex;
   flex-direction: column;
   gap: 0;
   position: relative
}

.converter-row-pair {
   position: relative
}

.convert-box {
   display: flex;
   align-items: center;
   gap: 0;
   background: var(--bg-input);
   border: 2px solid var(--border);
   padding: 0;
   transition: all var(--transition);
   position: relative
}

.convert-box:first-child {
   border-radius: var(--radius-lg) var(--radius-lg) 0 0;
   border-bottom: 1px solid var(--border)
}

.convert-box:last-child {
   border-radius: 0 0 var(--radius-lg) var(--radius-lg);
   border-top: 1px solid var(--border)
}

.convert-box:focus-within {
   border-color: var(--brand);
   background: var(--bg-card);
   box-shadow: 0 0 0 3px rgba(14, 165, 233, .10);
   z-index: 2;
   position: relative
}

.convert-box .box-label {
   position: absolute;
   top: 8px;
   left: 18px;
   font-size: .7rem;
   font-weight: 700;
   color: var(--text-secondary);
   text-transform: uppercase;
   letter-spacing: .08em;
   pointer-events: none;
   z-index: 1;
   background: var(--bg-input);
   padding: 0 4px
}

.convert-box:focus-within .box-label {
   color: var(--brand);
   background: var(--bg-card)
}

.convert-box .box-amount {
   flex: 1;
   min-width: 0;
   padding: 32px 16px 12px 18px;
   border: none;
   background: transparent;
   font-size: 1.6rem;
   font-weight: 700;
   color: var(--text-primary);
   outline: none;
   font-family: var(--font-mono);
   letter-spacing: -.01em
}

.convert-box .box-amount::placeholder {
   color: var(--text-muted);
   opacity: .4
}

.convert-box .box-amount:read-only {
   color: var(--brand);
   cursor: default
}

.convert-box .box-amount::-webkit-inner-spin-button,
.convert-box .box-amount::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0
}

.convert-box .box-amount[type="number"] {
   -moz-appearance: textfield
}

.convert-box .box-unit {
   padding: 8px 14px 8px 12px;
   margin: 10px 12px 10px 0;
   border: 1px solid var(--border);
   border-radius: var(--radius-pill);
   background: var(--bg-card);
   font-size: .9rem;
   font-weight: 700;
   color: var(--text-primary);
   font-family: var(--font-sans);
   white-space: nowrap;
   min-width: 80px;
   text-align: center
}

/* Swap button */
.swap-float {
   position: absolute;
   top: 50%;
   right: 24px;
   transform: translateY(-50%);
   z-index: 5
}

.swap-btn {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: var(--brand-gradient);
   border: 3px solid var(--bg-card);
   color: #0c1222;
   font-size: 1rem;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: var(--shadow-brand);
   transition: all var(--transition);
   cursor: pointer
}

.swap-btn:hover {
   transform: rotate(180deg) scale(1.1);
   box-shadow: var(--shadow-glow)
}

/* ── Formula display ── */
.formula-display {
   padding: 14px 18px;
   background: var(--brand-gradient-subtle);
   border-radius: var(--radius-md);
   border: 1px solid var(--border);
   margin-top: 16px;
   font-family: var(--font-mono);
   font-size: .9rem;
   color: var(--brand);
   text-align: center;
   font-weight: 600
}

/* ── Result display ── */
.conversion-result {
   text-align: center;
   padding: 24px;
   background: var(--brand-gradient-hero);
   border-radius: var(--radius-md);
   color: #fff;
   position: relative;
   overflow: hidden
}

.conversion-result::before {
   content: '';
   position: absolute;
   top: -50%;
   right: -20%;
   width: 200px;
   height: 200px;
   background: radial-gradient(circle, rgba(14, 165, 233, .15) 0%, transparent 70%);
   border-radius: 50%
}

.conversion-result .result-amount {
   font-size: 2rem;
   font-weight: 800;
   font-family: var(--font-mono);
   color: var(--brand-light);
   letter-spacing: -.02em;
   position: relative;
   z-index: 1
}

.conversion-result .result-label {
   font-size: .82rem;
   opacity: .7;
   margin-top: 4px;
   position: relative;
   z-index: 1
}

/* ── Buttons ── */
.btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 10px 22px;
   border: none;
   border-radius: var(--radius-pill);
   font-size: .85rem;
   font-weight: 600;
   transition: all var(--transition);
   cursor: pointer
}

.btn--primary {
   background: var(--brand-gradient);
   color: #0c1222;
   box-shadow: var(--shadow-brand)
}

.btn--primary:hover {
   box-shadow: var(--shadow-glow);
   transform: translateY(-1px)
}

.btn--secondary {
   background: var(--bg-input);
   color: var(--text-secondary);
   border: 1px solid var(--border)
}

.btn--secondary:hover {
   border-color: var(--brand);
   color: var(--brand);
   background: rgba(14, 165, 233, .06)
}

/* ── Stats Bar ── */
.stats-bar {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px
}

.stat-item {
   text-align: center;
   padding: 20px 12px;
   background: var(--bg-card);
   border-radius: var(--radius-md);
   border: 1px solid var(--border);
   transition: all var(--transition)
}

.stat-item:hover {
   border-color: var(--brand);
   box-shadow: var(--shadow-brand);
   transform: translateY(-2px)
}

.stat-num {
   font-size: 1.4rem;
   font-weight: 800;
   font-family: var(--font-mono);
   color: var(--brand)
}

.stat-label {
   font-size: .75rem;
   font-weight: 600;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: .05em;
   margin-top: 4px
}

/* ── Content Sections ── */
.content-section {
   margin-top: 36px
}

.content-section h2 {
   font-size: 1.35rem;
   font-weight: 800;
   letter-spacing: -.02em;
   margin-bottom: 14px;
   color: var(--text-primary)
}

.content-section h3 {
   font-size: 1.05rem;
   font-weight: 700;
   margin: 20px 0 10px
}

.content-section p {
   color: var(--text-secondary);
   margin-bottom: 12px
}

.content-section ul {
   padding-left: 20px;
   color: var(--text-secondary);
   margin-bottom: 16px
}

.content-section li {
   margin-bottom: 8px
}

.content-section li strong {
   color: var(--text-primary)
}

/* Info Box */
.info-box {
   padding: 16px 20px;
   border-radius: var(--radius-md);
   background: rgba(14, 165, 233, .06);
   border-left: 4px solid var(--brand);
   font-size: .88rem;
   color: var(--text-secondary);
   margin-top: 16px
}

/* ── Feature Grid (hub pages) ── */
.feature-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
   gap: 12px;
   margin-top: 12px
}

.feature-card {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 16px 18px;
   border-radius: var(--radius-md);
   background: var(--bg-card);
   border: 1px solid var(--border);
   transition: all var(--transition);
   text-decoration: none;
   color: var(--text-primary)
}

.feature-card:hover {
   border-color: var(--brand);
   box-shadow: var(--shadow-brand);
   transform: translateY(-2px)
}

.fc-icon {
   width: 44px;
   height: 44px;
   border-radius: var(--radius-md);
   background: var(--brand-gradient-subtle);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.3rem;
   flex-shrink: 0
}

.fc-title {
   font-weight: 700;
   font-size: .9rem
}

.fc-desc {
   font-size: .78rem;
   color: var(--text-muted)
}

/* ── Reference Links ── */
.reference-links {
   list-style: none !important;
   padding: 0 !important;
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin: 12px 0
}

.reference-links li {
   margin: 0 !important
}

.reference-links a {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 6px 14px;
   background: var(--bg-input);
   border: 1px solid var(--border);
   border-radius: 999px;
   font-size: .78rem;
   font-weight: 500;
   color: var(--text-secondary);
   text-decoration: none;
   transition: all .2s ease;
   white-space: nowrap
}

.reference-links a::before {
   content: "\2197";
   font-size: .7rem;
   opacity: .5
}

.reference-links a:hover {
   border-color: var(--brand);
   color: var(--brand);
   background: var(--brand-gradient-subtle);
   transform: translateY(-1px);
   box-shadow: var(--shadow-brand)
}

/* ── Data Table ── */
.data-table-wrap {
   overflow-x: auto;
   margin-top: 12px;
   border-radius: var(--radius-md);
   border: 1px solid var(--border)
}

.data-table {
   min-width: 400px
}

.data-table th {
   text-align: left;
   padding: 12px 16px;
   font-size: .75rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .06em;
   color: var(--text-muted);
   background: var(--bg-input);
   border-bottom: 1px solid var(--border)
}

.data-table td {
   padding: 10px 16px;
   font-size: .88rem;
   border-bottom: 1px solid var(--border);
   color: var(--text-secondary)
}

.data-table tr:last-child td {
   border-bottom: none
}

.data-table .highlight {
   font-weight: 700;
   color: var(--brand);
   font-family: var(--font-mono)
}

.data-table tr:hover td {
   background: rgba(14, 165, 233, .03)
}

/* ── FAQ ── */
.faq-list {
   display: flex;
   flex-direction: column;
   gap: 8px
}

.faq-item {
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   overflow: hidden;
   transition: border-color var(--transition)
}

.faq-item:hover {
   border-color: rgba(14, 165, 233, .3)
}

.faq-question {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   padding: 16px 20px;
   text-align: left;
   font-size: .92rem;
   font-weight: 600;
   color: var(--text-primary);
   background: transparent;
   border: none;
   cursor: pointer;
   transition: color var(--transition)
}

.faq-question:hover {
   color: var(--brand)
}

.faq-icon {
   font-style: normal;
   font-weight: 300;
   font-size: 1.3rem;
   color: var(--brand);
   transition: transform var(--transition);
   flex-shrink: 0;
   margin-left: 12px
}

.faq-answer {
   display: none;
   padding: 0 20px 16px;
   font-size: .88rem;
   color: var(--text-secondary);
   line-height: 1.7
}

.faq-item.open .faq-answer {
   display: block;
   animation: fadeIn .2s ease
}

.faq-item.open .faq-icon {
   transform: rotate(45deg)
}

@keyframes fadeIn {
   from {
      opacity: 0
   }

   to {
      opacity: 1
   }
}

@keyframes slideUp {
   from {
      opacity: 0;
      transform: translateY(16px)
   }

   to {
      opacity: 1;
      transform: translateY(0)
   }
}

@keyframes pulse {

   0%,
   100% {
      opacity: 1
   }

   50% {
      opacity: .5
   }
}

.live-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--rate-up);
   display: inline-block;
   animation: pulse 2s infinite;
   margin-right: 6px
}

/* ── Author Byline ── */
.author-byline {
   max-width: 800px;
   margin: 2rem auto 0;
   padding: 1.5rem;
   border-top: 1px solid var(--border);
   text-align: center;
   font-size: .85rem;
   color: var(--text-secondary)
}

.author-byline a {
   color: var(--brand);
   text-decoration: none;
   font-weight: 500
}

/* ── Footer ── */
.site-footer {
   background: var(--bg-card);
   border-top: 1px solid var(--border);
   padding: 48px 0 24px;
   margin-top: 40px
}

.footer-grid {
   display: grid;
   grid-template-columns: 1.5fr repeat(3, 1fr);
   gap: 32px
}

.footer-brand p {
   font-size: .85rem;
   color: var(--text-muted);
   margin-top: 12px;
   line-height: 1.6
}

.footer-col h4 {
   font-size: .72rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .08em;
   color: var(--text-muted);
   margin-bottom: 14px
}

.footer-col ul {
   list-style: none
}

.footer-col li {
   margin-bottom: 8px
}

.footer-col a {
   font-size: .88rem;
   color: var(--text-secondary)
}

.footer-col a:hover {
   color: var(--brand)
}

.footer-bottom {
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-top: 1px solid var(--border);
   margin-top: 36px;
   padding-top: 20px;
   font-size: .78rem;
   color: var(--text-muted)
}

/* ── 404 ── */
.page-404 {
   text-align: center;
   padding: 60px 20px
}

.page-404 .big-num {
   font-size: 6rem;
   font-weight: 900;
   font-family: var(--font-mono);
   background: var(--brand-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   line-height: 1
}

.page-404 h1 {
   font-size: 1.5rem;
   margin: 12px 0
}

.page-404 p {
   color: var(--text-muted);
   margin-bottom: 24px
}

/* ── Converter specific classes ── */
.converter-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
   margin: 16px 0
}

.converter-grid .field-group {
   display: flex;
   flex-direction: column;
   gap: 6px
}

.converter-grid .field-group label {
   font-size: .78rem;
   font-weight: 600;
   color: var(--text-secondary);
   text-transform: uppercase;
   letter-spacing: .04em
}

.converter-grid .field-group input,
.converter-grid .field-group select {
   width: 100%;
   padding: 12px 14px;
   border: 2px solid var(--border);
   border-radius: var(--radius-md);
   background: var(--bg-input);
   font-size: .95rem;
   color: var(--text-primary);
   outline: none;
   font-family: var(--font-sans);
   transition: all var(--transition)
}

.converter-grid .field-group input:focus,
.converter-grid .field-group select:focus {
   border-color: var(--brand);
   background: var(--bg-card);
   box-shadow: 0 0 0 3px rgba(14, 165, 233, .12)
}

.result-display {
   margin: 20px 0;
   padding: 20px;
   background: var(--brand-gradient-subtle);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   text-align: center
}

.result-display .result-value {
   font-size: 2rem;
   font-weight: 800;
   font-family: var(--font-mono);
   background: var(--brand-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   letter-spacing: -.02em
}

.result-display .result-desc {
   font-size: .82rem;
   color: var(--text-muted);
   margin-top: 4px
}

/* ── Spoke links list ── */
.spoke-links {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   gap: 10px;
   margin-top: 12px
}

.spoke-link {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 14px 16px;
   border-radius: var(--radius-md);
   background: var(--bg-card);
   border: 1px solid var(--border);
   font-size: .88rem;
   font-weight: 500;
   color: var(--text-secondary);
   transition: all var(--transition);
   text-decoration: none
}

.spoke-link:hover {
   border-color: var(--brand);
   color: var(--brand);
   box-shadow: var(--shadow-brand);
   transform: translateY(-2px)
}

.spoke-link .spoke-icon {
   width: 32px;
   height: 32px;
   border-radius: var(--radius-sm);
   background: var(--brand-gradient-subtle);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: .9rem;
   color: var(--brand);
   flex-shrink: 0
}

/* ═══ RESPONSIVE ═══ */
@media(max-width:900px) {
   .layout--with-sidebar {
      grid-template-columns: 1fr
   }

   .footer-grid {
      grid-template-columns: 1fr 1fr;
      gap: 24px
   }

   .converter-grid {
      grid-template-columns: 1fr
   }
}

@media(max-width:700px) {
   .site-header .container {
      height: 56px
   }

   .nav-toggle {
      display: flex
   }

   .site-nav {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--bg-body);
      z-index: 999;
      padding: 12px 20px 20px;
      overflow-y: auto;
      max-height: calc(100vh - 56px);
      border-top: 1px solid var(--border);
      box-shadow: 0 8px 32px rgba(0, 0, 0, .15)
   }

   .site-nav.open {
      display: block
   }

   .site-nav ul {
      flex-direction: column;
      gap: 4px
   }

   .site-nav a,
   .nav-trigger {
      padding: 14px 18px;
      border-radius: var(--radius-sm);
      width: 100%;
      justify-content: flex-start;
      font-size: 1rem
   }

   .nav-dropdown {
      position: static
   }

   .dropdown-menu {
      position: static;
      display: none;
      box-shadow: none;
      border: none;
      padding: 4px 0 4px 20px;
      min-width: unset;
      background: transparent
   }

   .dropdown-menu a {
      padding: 12px 16px;
      font-size: .95rem
   }

   .nav-dropdown.open .dropdown-menu {
      display: block
   }

   .page-hero {
      padding: 32px 0 28px
   }

   .page-hero h1 {
      font-size: 1.4rem
   }

   .card-body {
      padding: 16px 18px 20px
   }

   .footer-grid {
      grid-template-columns: 1fr;
      gap: 20px
   }

   .footer-bottom {
      flex-direction: column;
      gap: 6px;
      text-align: center
   }

   .stats-bar {
      grid-template-columns: 1fr
   }

   .feature-grid {
      grid-template-columns: 1fr
   }

   .spoke-links {
      grid-template-columns: 1fr
   }

   .conversion-result .result-amount {
      font-size: 1.5rem
   }

   .page-navigation {
      flex-direction: column;
      text-align: center
   }

   .page-navigation .nav-sep {
      display: none
   }
}

@media(max-width:500px) {
   .convert-box .box-amount {
      font-size: 1.3rem
   }

   .swap-float {
      right: 16px
   }

   .converter-grid {
      gap: 10px
   }
}