/* ===== RESET & ROOT ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --white:   #ffffff;
  --off:     #f8f8f6;
  --gray-50: #f4f4f2;
  --gray-100:#ebebea;
  --gray-200:#d6d6d4;
  --gray-400:#9a9a97;
  --gray-600:#5c5c58;
  --gray-800:#2a2a26;
  --black:   #141412;
  --blue:    #2563EB;
  --blue-light:#dbeafe;
  --blue-dark:#1d4ed8;
  --green:   #16a34a;
  --orange:  #ea580c;
  --red:     #dc2626;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', monospace;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --shadow:    0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.05);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);

  --transition: 160ms cubic-bezier(.4,0,.2,1);
}

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--gray-800);
  background: var(--white);
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--gray-50); }
::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 3px; }

/* ===== TYPOGRAPHY ===== */
h1,h2,h3,h4 { font-family: var(--font-display); line-height: 1.2; color: var(--black); }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== LAYOUT ===== */
.container       { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.container-wide  { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.container-narrow{ max-width: 720px;  margin: 0 auto; padding: 0 24px; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--radius); font-family: var(--font-body);
  font-size: 14px; font-weight: 600; cursor: pointer; border: none;
  transition: var(--transition); text-decoration: none; white-space: nowrap;
}
.btn-primary {
  background: var(--blue); color: #fff;
  box-shadow: 0 2px 8px rgba(37,99,235,.25);
}
.btn-primary:hover { background: var(--blue-dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(37,99,235,.3); text-decoration: none; color: #fff; }
.btn-ghost {
  background: transparent; color: var(--gray-800);
  border: 1.5px solid var(--gray-200);
}
.btn-ghost:hover { border-color: var(--gray-400); background: var(--gray-50); text-decoration: none; }

.btn-text {
  background: none; border: none; cursor: pointer; font-family: var(--font-body);
  font-size: 13px; color: var(--blue); padding: 0; font-weight: 500;
}
.btn-text:hover { text-decoration: underline; }
.btn-text-muted { color: var(--gray-400); }
.btn-text-muted:hover { color: var(--gray-600); }

/* ===== NAV ===== */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-100);
}
.nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  height: 64px; display: flex; align-items: center; gap: 16px;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; flex-shrink: 0;
}
.nav-logo-mark {
  width: 36px; height: 36px; background: var(--blue-light);
  border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
}
.nav-logo-text {
  font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--black);
}
.nav-logo-text em { font-style: normal; color: var(--blue); }
.nav-tags { display: flex; gap: 6px; margin-left: 4px; }
.nav-tag {
  font-family: var(--font-mono); font-size: 11px; padding: 3px 8px;
  background: var(--gray-50); border: 1px solid var(--gray-100);
  border-radius: 100px; color: var(--gray-600);
}
.nav-tag-blue { background: var(--blue-light); border-color: #bfdbfe; color: var(--blue-dark); }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav-link {
  font-size: 14px; color: var(--gray-600); padding: 8px 14px;
  border-radius: var(--radius-sm); transition: var(--transition);
}
.nav-link:hover { color: var(--black); background: var(--gray-50); text-decoration: none; }
.nav-cta {
  font-size: 14px; font-weight: 600; color: var(--white);
  background: var(--blue); padding: 8px 18px; border-radius: var(--radius-sm);
  margin-left: 8px; transition: var(--transition);
}
.nav-cta:hover { background: var(--blue-dark); text-decoration: none; }

/* ===== HERO ===== */
.hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
  max-width: 1280px; margin: 0 auto; padding: 80px 24px 100px;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; color: var(--gray-600);
  background: var(--gray-50); border: 1px solid var(--gray-100);
  padding: 6px 14px; border-radius: 100px; margin-bottom: 24px;
}
.hero-badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 2px rgba(22,163,74,.2);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(22,163,74,.2); }
  50%       { box-shadow: 0 0 0 5px rgba(22,163,74,.1); }
}
.hero-h1 {
  font-size: clamp(36px, 5vw, 56px); font-weight: 700; line-height: 1.1;
  color: var(--black); margin-bottom: 20px;
}
.hero-h1 em { font-style: italic; color: var(--blue); font-weight: 300; }
.hero-sub {
  font-size: 17px; color: var(--gray-600); line-height: 1.7; margin-bottom: 32px; max-width: 520px;
}
.hero-sub strong { color: var(--black); }
.hero-actions { display: flex; gap: 12px; margin-bottom: 48px; flex-wrap: wrap; }
.hero-stats { display: flex; align-items: center; gap: 0; }
.stat { display: flex; flex-direction: column; padding: 0 20px; }
.stat:first-child { padding-left: 0; }
.stat-n { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--black); }
.stat-l { font-size: 12px; color: var(--gray-400); margin-top: 2px; }
.stat-div { width: 1px; height: 36px; background: var(--gray-100); }

/* Hero Visual */
.hero-visual { display: flex; justify-content: center; align-items: center; }
.label-preview-stack {
  display: flex; align-items: center; gap: 20px;
  animation: floatUp 6s ease-in-out infinite;
}
@keyframes floatUp {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.label-card {
  width: 190px; border-radius: var(--radius); background: var(--white);
  border: 1px solid var(--gray-100); box-shadow: var(--shadow);
  position: relative;
}
.label-card-back  { height: 270px; transform: rotate(-3deg) translate(-15px, 8px); opacity: .4; }
.label-card-mid   { height: 270px; transform: rotate(-1.5deg) translate(-6px, 4px); opacity: .65; position: absolute; }
.label-card-front {
  height: 270px; padding: 14px; display: flex; flex-direction: column; gap: 10px;
  z-index: 2; position: relative;
}
.lc-header { display: flex; justify-content: space-between; align-items: center; }
.lc-courier { font-family: var(--font-mono); font-size: 9px; font-weight: 500; color: var(--gray-800); }
.lc-badge {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  background: #fef2f2; color: var(--red); border: 1px solid #fecaca;
  padding: 2px 6px; border-radius: 4px;
}
.lc-barcode { display: flex; flex-direction: column; gap: 4px; }
.lc-bars { display: flex; align-items: flex-end; gap: 1px; height: 36px; }
.lc-code { font-family: var(--font-mono); font-size: 8px; color: var(--gray-600); }
.lc-address { flex: 1; }
.lc-name { font-weight: 600; font-size: 12px; color: var(--black); }
.lc-loc { font-size: 10px; color: var(--gray-600); margin-top: 2px; }
.lc-footer {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 9px; color: var(--gray-600);
  border-top: 1px dashed var(--gray-200); padding-top: 8px;
}
.label-arrow { font-size: 24px; color: var(--blue); flex-shrink: 0; z-index: 3; }
.thermal-card {
  width: 160px; height: 107px; /* 6:4 ratio */
  border-radius: var(--radius-sm); background: var(--white);
  border: 2px solid var(--blue); padding: 10px; display: flex; flex-direction: column;
  justify-content: space-between; box-shadow: 0 4px 20px rgba(37,99,235,.15);
}
.tc-label { font-family: var(--font-mono); font-size: 8px; color: var(--blue); font-weight: 500; }
.tc-lines { display: flex; flex-direction: column; gap: 3px; }
.tc-line { height: 4px; background: var(--gray-200); border-radius: 2px; }
.tc-line-thick { height: 6px; background: var(--gray-800); }
.tc-short { width: 60%; }
.tc-barcode-row { display: flex; align-items: flex-end; gap: 1.5px; margin-top: 2px; }
.tc-bar { width: 3px; background: var(--gray-800); border-radius: 1px; }
.tc-badge {
  font-family: var(--font-mono); font-size: 8px; font-weight: 600; color: var(--green);
  text-align: right;
}

/* ===== SECTIONS ===== */
.section { padding: 96px 0; }
.section-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 14px;
}
.section-h2 { font-size: clamp(28px, 3.5vw, 40px); font-weight: 700; margin-bottom: 12px; }
.section-sub { font-size: 17px; color: var(--gray-600); margin-bottom: 56px; }

/* How it works section */
.how-section { background: var(--off); }
.steps {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 0;
  align-items: start; margin-bottom: 40px;
}
.step { padding: 32px; background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--gray-100); }
.step-num {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--blue);
  margin-bottom: 16px;
}
.step-icon {
  width: 56px; height: 56px; background: var(--blue-light); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--blue);
}
.step-title { font-size: 17px; font-weight: 600; margin-bottom: 10px; }
.step-desc { font-size: 14px; color: var(--gray-600); line-height: 1.65; }
.step-arrow {
  font-size: 22px; color: var(--gray-200); padding: 0 8px;
  display: flex; align-items: center; margin-top: 40px;
}
.format-note {
  display: flex; gap: 32px; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg); padding: 20px 28px;
}
.fn-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--gray-600); }
.fn-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fn-blue   { background: var(--blue); }
.fn-green  { background: var(--green); }
.fn-orange { background: var(--orange); }

/* ===== CONVERTER SECTION ===== */
.converter-section { background: var(--white); }
.tool-layout { display: grid; grid-template-columns: 1fr 420px; gap: 32px; align-items: start; }

/* Upload Box */
.upload-box {
  border: 2px dashed var(--gray-200); border-radius: var(--radius-lg);
  background: var(--gray-50); transition: var(--transition); cursor: pointer;
  margin-bottom: 20px;
}
.upload-box:hover, .upload-box.drag-over {
  border-color: var(--blue); background: var(--blue-light);
}
.upload-inner { padding: 52px 40px; text-align: center; }
.upload-icon { margin: 0 auto 20px; }
.upload-title { font-size: 18px; font-weight: 600; color: var(--black); margin-bottom: 8px; }
.upload-sub { font-size: 14px; color: var(--gray-600); margin-bottom: 12px; }
.upload-browse {
  color: var(--blue); font-weight: 600; background: none; border: none;
  cursor: pointer; font-size: 14px; font-family: var(--font-body); padding: 0;
}
.upload-browse:hover { text-decoration: underline; }
.upload-note { font-size: 12px; color: var(--gray-400); font-family: var(--font-mono); }

/* File List */
.file-list-wrap {
  background: var(--white); border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 20px;
}
.file-list-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; border-bottom: 1px solid var(--gray-100); background: var(--gray-50);
}
.fl-title { font-size: 13px; font-weight: 600; color: var(--gray-800); }
.fl-count {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; background: var(--blue); color: #fff;
  border-radius: 50%; font-size: 11px; font-weight: 700; margin-left: 6px;
}
.fl-clear {
  font-size: 12px; color: var(--gray-400); background: none; border: none;
  cursor: pointer; font-family: var(--font-body);
}
.fl-clear:hover { color: var(--red); }
.file-list { list-style: none; max-height: 260px; overflow-y: auto; }
.file-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 20px;
  border-bottom: 1px solid var(--gray-50); transition: var(--transition);
}
.file-item:last-child { border-bottom: none; }
.file-item:hover { background: var(--gray-50); }
.fi-icon {
  width: 34px; height: 34px; background: #fef2f2; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.fi-info { flex: 1; min-width: 0; }
.fi-name { font-size: 13px; font-weight: 500; color: var(--black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-size { font-size: 11px; color: var(--gray-400); font-family: var(--font-mono); }
.fi-status {
  font-family: var(--font-mono); font-size: 11px; padding: 2px 8px;
  border-radius: 100px; flex-shrink: 0;
}
.fi-status-ready   { background: var(--blue-light); color: var(--blue-dark); }
.fi-status-done    { background: #dcfce7; color: var(--green); }
.fi-status-error   { background: #fef2f2; color: var(--red); }
.fi-remove {
  width: 24px; height: 24px; border-radius: 50%; border: none; background: var(--gray-100);
  color: var(--gray-400); cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 12px; flex-shrink: 0; transition: var(--transition);
}
.fi-remove:hover { background: #fef2f2; color: var(--red); }

/* Convert Button */
.convert-area { margin-bottom: 20px; }
.btn-convert { width: 100%; justify-content: center; padding: 16px; font-size: 15px; }
.convert-hint { text-align: center; font-size: 12px; color: var(--gray-400); margin-top: 8px; font-family: var(--font-mono); }

/* Progress */
.progress-wrap {
  background: var(--white); border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px;
}
.progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.progress-label { font-size: 14px; font-weight: 600; color: var(--black); }
.progress-pct { font-family: var(--font-mono); font-size: 14px; color: var(--blue); font-weight: 500; }
.progress-bar-bg {
  height: 6px; background: var(--gray-100); border-radius: 3px;
  overflow: hidden; margin-bottom: 20px;
}
.progress-bar-fill {
  height: 100%; background: var(--blue); border-radius: 3px;
  transition: width 400ms ease; width: 0%;
}
.progress-steps { display: flex; flex-direction: column; gap: 10px; }
.ps-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--gray-400); transition: var(--transition);
}
.ps-item.ps-active { color: var(--black); }
.ps-item.ps-done   { color: var(--green); }
.ps-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gray-200); transition: var(--transition); flex-shrink: 0;
}
.ps-item.ps-active .ps-dot { background: var(--blue); animation: pulse 1.2s infinite; }
.ps-item.ps-done   .ps-dot { background: var(--green); }

/* ===== SETTINGS CARD ===== */
.settings-card {
  background: var(--white); border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 20px;
}
.settings-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; cursor: pointer; user-select: none;
  background: var(--gray-50); border-bottom: 1px solid var(--gray-100);
  transition: var(--transition);
}
.settings-header:hover { background: var(--gray-100); }
.settings-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--gray-800);
}
.settings-arrow { font-size: 16px; color: var(--gray-400); transition: transform var(--transition); }
.settings-arrow.open { transform: rotate(180deg); }
.settings-body { padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.settings-body.hidden { display: none; }

.setting-group {}
.setting-label { display: block; font-size: 12px; font-weight: 600; color: var(--gray-600); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .04em; }
.slider-row { display: flex; align-items: center; gap: 14px; }
.slider {
  flex: 1; -webkit-appearance: none; height: 4px; border-radius: 2px;
  background: var(--gray-200); outline: none; cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--blue); cursor: pointer; box-shadow: 0 1px 4px rgba(37,99,235,.3);
  transition: var(--transition);
}
.slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.slider-val { font-family: var(--font-mono); font-size: 12px; color: var(--blue); font-weight: 500; min-width: 40px; text-align: right; }
.setting-hint { font-size: 11px; color: var(--gray-400); margin-top: 6px; }

.toggle-group { display: flex; gap: 0; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); overflow: hidden; }
.toggle-btn {
  flex: 1; padding: 8px 4px; font-size: 12px; font-family: var(--font-body);
  font-weight: 500; background: var(--white); border: none; cursor: pointer;
  color: var(--gray-600); transition: var(--transition); border-right: 1px solid var(--gray-200);
}
.toggle-btn:last-child { border-right: none; }
.toggle-btn:hover { background: var(--gray-50); }
.toggle-btn.active { background: var(--blue); color: #fff; }

.settings-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 16px; border-top: 1px solid var(--gray-100);
}

/* ===== PREVIEW CARD ===== */
.preview-card {
  background: var(--white); border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 20px;
}
.preview-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; border-bottom: 1px solid var(--gray-100); background: var(--gray-50);
}
.preview-title { font-size: 13px; font-weight: 600; color: var(--gray-800); }
.preview-nav { display: flex; align-items: center; gap: 8px; }
.prev-btn {
  width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px solid var(--gray-200);
  background: var(--white); cursor: pointer; font-size: 16px; display: flex;
  align-items: center; justify-content: center; transition: var(--transition); color: var(--gray-600);
}
.prev-btn:hover { border-color: var(--blue); color: var(--blue); }
.prev-info { font-family: var(--font-mono); font-size: 12px; color: var(--gray-600); }
.preview-frame {
  aspect-ratio: 6/4; background: var(--gray-50); display: flex;
  align-items: center; justify-content: center; overflow: hidden;
}
.preview-frame img { width: 100%; height: 100%; object-fit: contain; }
.preview-placeholder { font-size: 13px; color: var(--gray-400); text-align: center; padding: 20px; }
.preview-badge {
  padding: 10px 20px; background: var(--blue-light);
  font-family: var(--font-mono); font-size: 11px; color: var(--blue-dark); text-align: center;
}

/* ===== OUTPUT ACTIONS ===== */
.output-actions { display: flex; flex-direction: column; gap: 10px; }
.btn-download { width: 100%; justify-content: center; padding: 15px; font-size: 15px; }
.btn-print { width: 100%; justify-content: center; }
.output-meta {
  text-align: center; font-family: var(--font-mono); font-size: 11px; color: var(--gray-400);
  padding: 4px 0;
}

/* ===== FEATURES ===== */
.features-section { background: var(--off); }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card {
  background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-lg);
  padding: 28px; transition: var(--transition);
}
.feature-card:hover { border-color: var(--blue); box-shadow: var(--shadow); transform: translateY(-2px); }
.fc-icon { font-size: 28px; margin-bottom: 14px; }
.feature-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.feature-card p { font-size: 14px; color: var(--gray-600); line-height: 1.65; }

/* ===== FAQ ===== */
.faq-section { background: var(--white); }
.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-item { border-bottom: 1px solid var(--gray-100); }
.faq-q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 22px 0; font-size: 16px; font-family: var(--font-display); font-weight: 600;
  color: var(--black); transition: var(--transition);
}
.faq-q:hover { color: var(--blue); }
.faq-arrow { font-size: 20px; color: var(--blue); flex-shrink: 0; transition: transform var(--transition); }
.faq-q[aria-expanded="true"] .faq-arrow { transform: rotate(45deg); }
.faq-a { padding: 0 0 22px; }
.faq-a p { font-size: 15px; color: var(--gray-600); line-height: 1.75; }

/* ===== FOOTER ===== */
.footer {
  background: var(--black); color: rgba(255,255,255,.7); padding: 64px 0 32px;
}
.footer-inner {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 48px;
}
.footer-brand { }
.footer-logo {
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  color: var(--white); display: block; margin-bottom: 12px;
}
.footer-logo em { font-style: normal; color: #93c5fd; }
.footer-brand p { font-size: 13px; line-height: 1.7; max-width: 280px; }
.footer-links h4 {
  font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 16px;
}
.footer-links { display: flex; flex-direction: column; gap: 0; }
.footer-links a {
  font-size: 14px; color: rgba(255,255,255,.6); padding: 5px 0; transition: var(--transition);
}
.footer-links a:hover { color: var(--white); text-decoration: none; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08); padding-top: 24px;
  font-size: 12px; color: rgba(255,255,255,.3); text-align: center;
}

/* ===== TOAST ===== */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 1000;
  background: var(--black); color: var(--white);
  padding: 14px 20px; border-radius: var(--radius); font-size: 14px;
  box-shadow: var(--shadow-lg); transform: translateY(80px); opacity: 0;
  transition: all 300ms ease; max-width: 340px;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast-success { border-left: 3px solid var(--green); }
.toast-error   { border-left: 3px solid var(--red); }
.toast-info    { border-left: 3px solid var(--blue); }

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-inner > * { animation: fadeInUp .5s ease both; }
.hero-badge          { animation-delay: .05s; }
.hero-h1             { animation-delay: .12s; }
.hero-sub            { animation-delay: .19s; }
.hero-actions        { animation-delay: .26s; }
.hero-stats          { animation-delay: .33s; }
.hero-visual         { animation: fadeInUp .6s ease .2s both; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .hero               { grid-template-columns: 1fr; gap: 48px; padding: 60px 24px 72px; }
  .hero-visual        { display: none; }
  .tool-layout        { grid-template-columns: 1fr; }
  .steps              { grid-template-columns: 1fr; }
  .step-arrow         { display: none; }
  .features-grid      { grid-template-columns: repeat(2, 1fr); }
  .footer-inner       { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .nav-tags           { display: none; }
  .nav-links .nav-link{ display: none; }
  .hero-h1            { font-size: 32px; }
  .hero-stats         { flex-wrap: wrap; gap: 16px; }
  .stat-div           { display: none; }
  .features-grid      { grid-template-columns: 1fr; }
  .footer-inner       { grid-template-columns: 1fr; }
  .format-note        { flex-direction: column; gap: 12px; }
  .section            { padding: 64px 0; }
}

/* ===== SINGLE COLUMN TOOL LAYOUT ===== */
.tool-layout-single {
  max-width: 720px;
  margin: 0 auto;
}
.tool-single {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.btn-convert { width: 100%; justify-content: center; padding: 16px; font-size: 15px; }
.btn-download { width: 100%; justify-content: center; }
.btn-print    { width: 100%; justify-content: center; }
.output-actions { display: flex; flex-direction: column; gap: 10px; }