/* ── WOWCONVERTER — Design System ──
   Fonts    : Geist (headings, buttons) · Inter (body)
   Spacing  : IBM Carbon Design System — base-8 scale
   Type     : IBM Carbon type scale
─────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;1,14..32,400&display=swap');
@import url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/font/geist-sans/style.css');

:root {
  /* IBM Carbon Spacing — base-8 */
  --s-01:   2px;
  --s-02:   4px;
  --s-03:   8px;
  --s-04:  12px;
  --s-05:  16px;
  --s-06:  24px;
  --s-07:  32px;
  --s-08:  40px;
  --s-09:  48px;
  --s-10:  64px;
  --s-11:  80px;
  --s-12:  96px;

  /* IBM Carbon Type Scale */
  --type-01: 0.75rem;
  --type-02: 0.875rem;
  --type-03: 1rem;
  --type-04: 1.125rem;
  --type-05: 1.25rem;
  --type-06: 1.5rem;
  --type-07: 2rem;
  --type-08: 2.625rem;
  --type-09: 3.375rem;

  /* IBM Carbon Line Heights */
  --lh-tight  : 1.25;
  --lh-snug   : 1.375;
  --lh-normal : 1.5;
  --lh-relaxed: 1.625;

  /* Colors */
  --ink:            #161616;
  --ink-2:          #393939;
  --ink-3:          #6f6f6f;
  --ink-4:          #a8a8a8;
  --paper:          #f4f4f4;
  --paper-2:        #e8e8e8;
  --paper-3:        #c6c6c6;
  --white:          #ffffff;
  --accent:         #da1e28;
  --accent-hover:   #ba1b23;
  --accent-light:   #fff1f1;
  --accent-2:       #0f62fe;
  --accent-2-light: #edf5ff;
  --green:          #198038;
  --green-light:    #defbe6;
  --border:         #e0e0e0;
  --border-strong:  #c6c6c6;

  /* Shape */
  --radius:    4px;
  --radius-md: 8px;
  --radius-lg: 8px;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow:    0 2px 6px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.12);

  /* Fonts */
  --font-head: 'Geist Sans', 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0.38, 0.9);
  --dur:  150ms;
  --dur-fast: 70ms;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--type-03);
  line-height: var(--lh-normal);
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--ink);
}

/* ── NAV ── */
nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(244,244,244,0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--s-06);
}
.nav-inner {
  max-width: 1152px; margin: 0 auto;
  display: flex; align-items: center;
  justify-content: space-between;
  height: var(--s-09);
}
.logo {
  font-family: var(--font-head);
  font-size: var(--type-05);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.logo span { color: var(--accent); }
.nav-links { display: flex; gap: var(--s-01); list-style: none; }
.nav-links a {
  font-family: var(--font-body);
  font-size: var(--type-02);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding: var(--s-02) var(--s-04);
  border-radius: var(--radius-md);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap;
}
.nav-links a:hover { background: var(--paper-2); color: var(--ink); }
.nav-links a.active { background: var(--paper-2); color: var(--accent); font-weight: 600; }
.nav-mobile-toggle {
  display: none; background: none; border: none;
  cursor: pointer; padding: var(--s-02); color: var(--ink); font-size: var(--type-04);
}

/* ── PAGE HERO ── */
.page-hero {
  background: var(--ink); color: var(--paper);
  padding: var(--s-10) var(--s-06) var(--s-09);
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute;
  top: -80px; right: -80px;
  width: 320px; height: 320px;
  background: var(--accent); opacity: 0.07; border-radius: 50%;
}
.page-hero-inner { max-width: 1152px; margin: 0 auto; position: relative; }
.page-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(var(--type-07), 5vw, var(--type-08));
  font-weight: 600; letter-spacing: -0.03em;
  line-height: var(--lh-tight); margin-bottom: var(--s-03); color: var(--white);
}
.page-hero h1 em { color: var(--accent); font-style: normal; }
.page-hero p {
  font-size: var(--type-03); color: rgba(244,244,244,0.6);
  max-width: 480px; line-height: var(--lh-relaxed);
}

/* ── HOME HERO ── */
.home-hero {
  padding: var(--s-11) var(--s-06) var(--s-08);
  max-width: 1152px; margin: 0 auto;
}
.home-tagline {
  font-family: var(--font-head);
  font-size: clamp(var(--type-07), 6vw, var(--type-09));
  font-weight: 600; letter-spacing: -0.04em;
  line-height: var(--lh-tight); margin-bottom: var(--s-05);
}
.home-tagline em { color: var(--accent); font-style: normal; }
.home-sub {
  font-size: var(--type-04); color: var(--ink-2);
  max-width: 480px; line-height: var(--lh-relaxed);
  margin-bottom: var(--s-08); font-weight: 400;
}

/* ── TOOL GRID ── */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s-05);
  padding: 0 var(--s-06) var(--s-11);
  max-width: 1152px; margin: 0 auto;
}
.tool-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--s-06);
  text-decoration: none; color: var(--ink);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
  display: flex; flex-direction: column; gap: var(--s-03);
  box-shadow: var(--shadow-sm);
}
.tool-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.tool-card-icon {
  font-size: 22px; width: var(--s-09); height: var(--s-09);
  display: flex; align-items: center; justify-content: center;
  background: var(--paper); border-radius: var(--radius-md);
  margin-bottom: var(--s-02); flex-shrink: 0;
}
.tool-card h3 {
  font-family: var(--font-head);
  font-size: var(--type-03); font-weight: 600;
  letter-spacing: -0.01em; line-height: var(--lh-snug);
}
.tool-card p {
  font-size: var(--type-02); color: var(--ink-3); line-height: var(--lh-normal);
}
.tool-card .tag {
  font-family: var(--font-head); font-size: 11px; font-weight: 500;
  padding: var(--s-01) var(--s-03); border-radius: var(--radius);
  background: var(--accent-light); color: var(--accent);
  align-self: flex-start; margin-top: auto;
}
.tool-card.featured { background: var(--ink); color: var(--white); border-color: var(--ink); }
.tool-card.featured .tool-card-icon { background: rgba(255,255,255,0.08); }
.tool-card.featured p { color: rgba(244,244,244,0.6); }
.tool-card.featured .tag { background: var(--accent); color: var(--white); }

/* ── CONVERTER LAYOUT ── */
.converter-page {
  max-width: 1152px; margin: 0 auto;
  padding: var(--s-07) var(--s-06) var(--s-11);
  display: grid; grid-template-columns: 1fr 336px;
  gap: var(--s-06); align-items: start;
}
@media (max-width: 900px) { .converter-page { grid-template-columns: 1fr; } }

/* ── CONVERTER CARD ── */
.converter-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden;
}
.converter-card + .converter-card { margin-top: var(--s-05); }
.converter-card-header {
  padding: var(--s-05) var(--s-06);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  gap: var(--s-03); background: var(--paper);
}
.converter-card-header h2 {
  font-family: var(--font-head);
  font-size: var(--type-04); font-weight: 600;
  letter-spacing: -0.02em; line-height: var(--lh-tight);
}
.converter-card-body { padding: var(--s-06); }

/* ── TABS / PILLS ── */
.cat-tabs { display: flex; gap: var(--s-02); flex-wrap: wrap; margin-bottom: var(--s-06); }
.cat-tab {
  font-family: var(--font-head);
  font-size: var(--type-02); font-weight: 500;
  padding: var(--s-02) var(--s-04);
  border-radius: var(--radius); border: 1px solid var(--border-strong);
  background: transparent; color: var(--ink-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.cat-tab:hover { background: var(--paper); border-color: var(--accent); color: var(--accent); }
.cat-tab.active { background: var(--accent); color: var(--white); border-color: var(--accent); font-weight: 600; }

/* ── INPUTS ── */
.converter-row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: var(--s-05); align-items: end; margin-bottom: var(--s-05);
}
.swap-btn {
  width: var(--s-08); height: var(--s-08);
  border-radius: 50%; border: 1px solid var(--border-strong);
  background: var(--paper); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--type-04); color: var(--ink-2);
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  flex-shrink: 0;
}
.swap-btn:hover {
  background: var(--accent); color: var(--white);
  border-color: var(--accent); transform: rotate(180deg);
}
.input-group { display: flex; flex-direction: column; gap: var(--s-02); }
.input-group label {
  font-family: var(--font-body); font-size: var(--type-01);
  font-weight: 600; color: var(--ink-2);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.input-group select,
.input-group input[type="number"],
.input-group input[type="text"] {
  width: 100%; height: var(--s-09);
  padding: 0 var(--s-05);
  border: 1px solid var(--border-strong);
  border-bottom: 2px solid var(--border-strong);
  border-radius: var(--radius);
  font-family: var(--font-body); font-size: var(--type-03);
  color: var(--ink); background: var(--white);
  transition: border-color var(--dur-fast) var(--ease);
  -moz-appearance: textfield;
}
.input-group select { cursor: pointer; }
.input-group input:focus,
.input-group select:focus {
  outline: none; border-bottom-color: var(--accent); background: var(--white);
}
.input-group input::placeholder { color: var(--ink-4); }
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ── RESULT ── */
.result-display {
  background: var(--paper); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--s-05) var(--s-06); margin-top: var(--s-05);
}
.result-value {
  font-family: var(--font-head);
  font-size: var(--type-07); font-weight: 600;
  letter-spacing: -0.03em; line-height: var(--lh-tight); color: var(--ink);
}
.result-label {
  font-size: var(--type-02); color: var(--ink-3);
  margin-top: var(--s-01); line-height: var(--lh-normal);
}
.result-formula {
  font-size: var(--type-01); color: var(--ink-4);
  margin-top: var(--s-03); padding-top: var(--s-03);
  border-top: 1px solid var(--border);
}

/* ── TABLE ── */
.ref-table { width: 100%; border-collapse: collapse; font-size: var(--type-02); }
.ref-table th {
  text-align: left; font-size: var(--type-01); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3);
  padding: var(--s-03) var(--s-05); border-bottom: 1px solid var(--border);
  background: var(--paper);
}
.ref-table td {
  padding: var(--s-03) var(--s-05);
  border-bottom: 1px solid var(--border); color: var(--ink-2);
}
.ref-table tr:last-child td { border-bottom: none; }
.ref-table tr:hover td { background: var(--paper); }
.ref-table .val { font-family: var(--font-head); font-weight: 600; color: var(--ink); font-size: var(--type-03); }

/* ── SIDEBAR ── */
.sidebar { display: flex; flex-direction: column; gap: var(--s-05); }
.sidebar-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--s-05) var(--s-06); box-shadow: var(--shadow-sm);
}
.sidebar-card h3 {
  font-family: var(--font-head); font-size: var(--type-03); font-weight: 600;
  letter-spacing: -0.01em; margin-bottom: var(--s-04); color: var(--ink);
}
.sidebar-card p { font-size: var(--type-02); color: var(--ink-3); line-height: var(--lh-relaxed); }
.fact-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-03) 0; border-bottom: 1px solid var(--border); gap: var(--s-05);
}
.fact-item:last-child { border-bottom: none; }
.fact-item .label { font-size: var(--type-02); color: var(--ink-3); }
.fact-item .value { font-family: var(--font-head); font-size: var(--type-02); font-weight: 600; color: var(--ink); }

/* ── GST ── */
.gst-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-03); margin-top: var(--s-05); }
.gst-box {
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--s-05); text-align: center;
}
.gst-box .label {
  font-family: var(--font-body); font-size: var(--type-01); font-weight: 600;
  color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em;
  display: block; margin-bottom: var(--s-02);
}
.gst-box .val {
  font-family: var(--font-head); font-size: var(--type-06);
  font-weight: 600; color: var(--ink); letter-spacing: -0.02em;
}
.gst-box.highlight { background: var(--accent); border-color: var(--accent); }
.gst-box.highlight .label { color: rgba(255,255,255,0.75); }
.gst-box.highlight .val { color: var(--white); }

/* ── FOOTER ── */
footer { background: var(--ink); color: rgba(244,244,244,0.65); padding: var(--s-08) var(--s-06); }
.footer-inner {
  max-width: 1152px; margin: 0 auto;
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: center; gap: var(--s-05);
}
.footer-brand { font-family: var(--font-head); font-size: var(--type-05); font-weight: 700; color: var(--white); letter-spacing: -0.02em; }
.footer-brand span { color: var(--accent); }
.footer-links { display: flex; gap: var(--s-06); flex-wrap: wrap; }
.footer-links a { font-size: var(--type-02); color: rgba(244,244,244,0.5); text-decoration: none; transition: color var(--dur) var(--ease); }
.footer-links a:hover { color: var(--white); }

/* ── AD SLOT ── */
.ad-slot {
  background: var(--paper); border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md); padding: var(--s-06);
  text-align: center; color: var(--ink-4);
  font-size: var(--type-01); letter-spacing: 0.04em;
  min-height: 100px; display: flex; align-items: center; justify-content: center;
}

/* ── LIVE BADGE ── */
.live-badge {
  display: inline-flex; align-items: center; gap: var(--s-02);
  font-size: var(--type-01); font-weight: 500;
  color: var(--green); background: var(--green-light);
  padding: var(--s-01) var(--s-03); border-radius: var(--radius);
}
.live-dot {
  width: 6px; height: 6px; background: var(--green); border-radius: 50%;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ── UTILITY ── */
.section-label {
  font-family: var(--font-body); font-size: var(--type-01); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-4);
  margin-bottom: var(--s-05); display: block;
}
.divider { border: none; border-top: 1px solid var(--border); margin: var(--s-06) 0; }
.text-accent { color: var(--accent); }
.info-box {
  background: var(--accent-2-light); border-left: 3px solid var(--accent-2);
  padding: var(--s-04) var(--s-05); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--type-02); color: var(--ink-2); margin-top: var(--s-05); line-height: var(--lh-relaxed);
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-mobile-toggle { display: flex; }
  .nav-links.open {
    display: flex; flex-direction: column;
    position: absolute; top: var(--s-09); left: 0; right: 0;
    background: var(--paper); border-bottom: 1px solid var(--border);
    padding: var(--s-05) var(--s-06); gap: var(--s-01); z-index: 99;
    box-shadow: var(--shadow-lg);
  }
  .nav-links.open a { padding: var(--s-03) var(--s-04); border-radius: var(--radius-md); }
  .converter-row { grid-template-columns: 1fr; gap: var(--s-04); }
  .swap-btn { transform: rotate(90deg); align-self: center; }
  .swap-btn:hover { transform: rotate(270deg); }
  .gst-grid { grid-template-columns: 1fr; }
  .page-hero { padding: var(--s-09) var(--s-05) var(--s-08); }
  .home-hero { padding: var(--s-09) var(--s-05) var(--s-07); }
  .tool-grid { padding: 0 var(--s-05) var(--s-09); gap: var(--s-04); }
  .converter-card-body { padding: var(--s-05); }
}
@media (max-width: 480px) {
  .converter-page { padding: var(--s-05) var(--s-04) var(--s-09); }
  .tool-grid { padding: 0 var(--s-04) var(--s-09); grid-template-columns: 1fr; }
  .result-value { font-size: var(--type-06); }
  .gst-box .val { font-size: var(--type-05); }
}

/* ── LOGO SVG ──
   Header : images/logo-header.svg  (black text, red accent)
   Footer : images/logo-footer.svg  (white text, red accent)
   To update logos: swap files in /images/ — no code changes needed
─────────────────────────────────────── */
.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-img {
  height: 28px;
  width: auto;
  display: block;
}
.logo-img--footer {
  height: 24px;
  width: auto;
  display: block;
}