.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:44px;padding:.7rem 1.15rem;border-radius:12px;
  font-weight:700;text-decoration:none;border:1px solid transparent;
  transition:background .15s ease,transform .15s ease,border-color .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--primary);color:#fff}
.btn--primary:hover{background:var(--primary-hover);color:#fff}
.btn--secondary{background:var(--surface);border-color:var(--border);color:var(--text)}
.btn--secondary:hover{border-color:var(--primary);color:var(--primary)}
.btn--ghost{background:transparent;color:var(--text-muted)}
.btn--lg{min-height:52px;padding:.85rem 1.4rem;font-size:1.05rem}
.btn--download{width:100%;max-width:360px}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}

.badge{
  display:inline-flex;align-items:center;padding:.35rem .7rem;
  border-radius:999px;background:rgba(15,122,108,.1);color:var(--primary);
  font-weight:700;font-size:.85rem;
}

.alert{
  padding:1rem 1.1rem;border-radius:var(--radius-sm);margin-bottom:1rem;
  border:1px solid var(--border);background:var(--surface-secondary);
}
.alert--warning{border-color:#f0d39a;background:#fff8e8;color:#7a5710}
.alert--error{border-color:#f0b4ae;background:#fff1ef;color:var(--error)}

.hero{
  display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:24px;
  box-shadow:var(--shadow);padding:clamp(1.5rem,3vw,2.75rem);margin-bottom:1.75rem;
  overflow:hidden;position:relative;
}
.hero::after{
  content:"";position:absolute;inset:auto -20% -40% auto;width:280px;height:280px;
  background:radial-gradient(circle,rgba(228,87,46,.18),transparent 70%);pointer-events:none;
}
.hero__brand{
  font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,3vw,2.2rem);
  color:var(--primary);margin-bottom:.35rem;
}
.hero__sub{color:var(--text-muted);font-size:1.08rem;max-width:36rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.25rem 0 1rem}
.hero__badges{display:flex;flex-wrap:wrap;gap:.5rem}
.hero__visual{position:relative}
.flow-anim{
  display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:1rem;
}
.flow-anim__file{
  min-width:64px;padding:.55rem .7rem;border-radius:10px;background:#123047;color:#fff;
  font-weight:800;font-size:.8rem;text-align:center;
  animation:pulseIn 2.4s ease-in-out infinite;
}
.flow-anim__file--out{background:var(--primary);animation-name:pulseOut}
.flow-anim__arrow{
  width:42px;height:3px;background:linear-gradient(90deg,var(--accent),var(--primary));
  position:relative;border-radius:999px;
}
.flow-anim__arrow::after{
  content:"";position:absolute;right:-2px;top:50%;transform:translateY(-50%);
  border:6px solid transparent;border-left-color:var(--primary);
}
@keyframes pulseIn{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@keyframes pulseOut{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}

.tool-cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-bottom:2rem;
}
.tool-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.4rem;text-decoration:none;box-shadow:var(--shadow-soft);
  transition:transform .15s ease,border-color .15s ease;
  display:flex;flex-direction:column;gap:.55rem;min-height:240px;
}
.tool-card:hover{transform:translateY(-3px);border-color:rgba(15,122,108,.45);color:inherit}
.tool-card h2{font-size:1.35rem;margin:0}
.tool-card p{color:var(--text-muted);margin:0;flex:1}
.tool-card__cta{font-weight:800;color:var(--primary)}

.content-section{
  background:rgba(255,255,255,.72);border:1px solid rgba(213,222,232,.8);
  border-radius:var(--radius);padding:1.4rem 1.5rem;margin-bottom:1rem;
}
.feature-list{display:grid;gap:.7rem}
.feature-list li{padding-left:0;color:var(--text-muted)}
.feature-list strong{color:var(--text)}
.steps{display:grid;gap:.55rem;counter-reset:step}
.steps li{
  counter-increment:step;padding:.7rem .9rem .7rem 3rem;border-radius:12px;
  background:var(--surface);border:1px solid var(--border);position:relative;
}
.steps li::before{
  content:counter(step);position:absolute;left:.7rem;top:50%;transform:translateY(-50%);
  width:1.6rem;height:1.6rem;border-radius:50%;background:var(--primary);color:#fff;
  display:grid;place-items:center;font-size:.85rem;font-weight:800;
}
.format-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.format-grid p{color:var(--text-muted);margin:0}

.faq{display:grid;gap:.6rem}
.faq__item{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.85rem 1rem}
.faq__item summary{cursor:pointer;font-weight:700}
.faq__item p{margin:.65rem 0 0;color:var(--text-muted)}

.breadcrumbs{margin-bottom:1rem;font-size:.92rem}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.breadcrumbs li:not(:last-child)::after{content:"›";margin-left:.35rem;color:var(--text-muted)}
.breadcrumbs a{text-decoration:none;color:var(--primary);font-weight:600}

.page-intro{margin-bottom:1.25rem}
.page-intro p{color:var(--text-muted);font-size:1.05rem}
.prose,.error-page{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.6rem;box-shadow:var(--shadow-soft);
}
.prose h2{margin-top:1.5rem}
.error-page{text-align:center;padding:3rem 1.5rem}
.error-page .btn{margin-top:1rem}