/* Landing page sheet.
 *
 * tokens.css and components.css are verbatim ports of the Voicron Connect
 * design system and must not be edited. Everything here is either layout for
 * this page or a modifier class stacked on a ported one, for example
 * `btn btn-primary btn-hero`. This file is linked after components.css, so an
 * equal-specificity modifier wins on source order.
 *
 * Note on brand colors: --color-brand-dark is #174ea6, which is NOT the
 * #1765cc that .btn-primary:hover already supplies. Do not swap the token in
 * for hover states here.
 */

a { color: inherit; text-decoration: none; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 4.5vw, 24px); }

/* Icons are inline svg sized by their container, never by the svg itself. */
.ico svg, .mark svg, .price-list svg, .price-card h3 svg,
.nav-toggle svg, .faq-chevron svg { width: 1em; height: 1em; display: block; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: #fff; color: var(--color-brand); font-weight: 600; font-size: 14px;
  padding: 10px 16px; border-radius: 0 0 10px 0; box-shadow: 0 2px 8px rgba(15,23,42,.12);
}
.skip-link:focus { left: 0; }

/* ── header and nav ─────────────────────────────────────────── */

.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(248,250,252,.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent; transition: border-color 200ms ease;
}
.site-head.scrolled { border-bottom-color: var(--color-border); }

.nav-row { display: flex; align-items: center; gap: 20px; padding-top: 14px; padding-bottom: 14px; }

.logo { font-weight: 800; font-size: 20px; letter-spacing: -.02em; color: #0f172a; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 9px; }

.nav-links { display: flex; align-items: center; gap: 26px; margin-left: 12px; }
.nav-link {
  font-size: 14.5px; font-weight: 500; color: #64748b;
  transition: color 150ms ease;
}
.nav-link:hover { color: #0f172a; }

.nav-actions { display: flex; gap: 10px; align-items: center; margin-left: auto; }

.btn-nav { padding: .625rem 1.25rem; border-radius: 9999px; }
.btn-nav:hover { box-shadow: 0 4px 6px -1px rgba(26,115,232,.15), 0 2px 4px -2px rgba(26,115,232,.15); }

.nav-toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--color-border);
  border-radius: 10px; padding: 8px; color: #475569; cursor: pointer; font-size: 20px;
  line-height: 0; transition: background 150ms ease, color 150ms ease;
}
.nav-toggle:hover { background: #fff; color: #0f172a; }

/* Language menu, top right. A <details> so it works without script; on a phone
   it stays in the bar next to the burger instead of hiding in the drawer. */
.lang-switch { position: relative; flex: 0 0 auto; }
.lang-switch summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 10px;
  font-size: 13.5px; font-weight: 600; color: #475569; line-height: 1;
  transition: background 150ms ease, color 150ms ease;
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary svg { width: 16px; height: 16px; display: block; }
.lang-switch summary:hover, .lang-switch[open] summary { background: #fff; color: #0f172a; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 150px;
  padding: 6px; background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(15,23,42,.12), 0 4px 10px -6px rgba(15,23,42,.1);
}
.lang-menu a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14.5px; color: #334155; }
.lang-menu a:hover { background: var(--color-surface); color: #0f172a; }
.lang-menu a[aria-current="true"] { font-weight: 700; color: #0f172a; }

.nav-panel { display: none; padding: 4px clamp(16px, 4.5vw, 24px) 18px; }
.nav-panel.open { display: block; }
.nav-panel nav { display: flex; flex-direction: column; border-top: 1px solid var(--color-border); }
.nav-panel nav a {
  padding: 13px 2px; font-size: 15.5px; font-weight: 500; color: #334155;
  border-bottom: 1px solid #eef2f7; min-height: 44px; display: flex; align-items: center;
}
.nav-panel-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.nav-panel-actions .btn { width: 100%; min-height: 46px; }

/* ── hero ───────────────────────────────────────────────────── */

.hero {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: 56px; align-items: center; padding: 60px 0 56px;
}

.hero h1 {
  font-size: clamp(30px, 5.2vw, 56px); line-height: 1.06; letter-spacing: -.03em;
  margin: 0 0 18px; color: #0f172a; font-weight: 800;
}
.hero h1 span { color: var(--color-brand); }

.lede { font-size: clamp(16.5px, 1.6vw, 19px); color: #64748b; margin: 0 0 28px; max-width: 34em; }

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.btn-hero {
  padding: 1rem 2.25rem; min-height: 54px; font-size: 1rem; border-radius: 9999px;
  transition: all 250ms cubic-bezier(.4, 0, .2, 1);
}
.btn-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(26,115,232,.2), 0 4px 6px -4px rgba(26,115,232,.2);
}
.btn-hero-ghost {
  padding: 1rem 1.75rem; min-height: 54px; font-size: 1rem; border-radius: 9999px;
  color: #334155; border: 1.5px solid var(--color-border); background: #fff; font-weight: 600;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}
.btn-hero-ghost:hover { background: #fff; color: var(--color-brand); border-color: #aecbfa; }
.btn-hero-secondary { width: 100%; min-height: 48px; border-radius: 9999px; margin-top: 20px; }

.note { margin-top: 18px; font-size: 14px; color: #64748b; }

.hero-demo { min-width: 0; }
.demo-tel { margin: 14px 2px 0; font-size: 13.5px; color: #64748b; text-align: center; }
.demo-tel a { color: var(--color-brand); font-weight: 600; }
.demo-tel a:hover { text-decoration: underline; }

/* ── sections ───────────────────────────────────────────────── */

section.block { padding: 64px 0; scroll-margin-top: 84px; }
section.block-tight { padding: 44px 0; }

/* A section jump moves focus to its target so keyboard and screen reader users
   land where the eye did instead of staying up in the nav. These elements carry
   tabindex="-1", which keeps them out of the tab order, so the focus is always
   programmatic and ringing a whole section would just be noise. */
main[tabindex="-1"]:focus,
.block[tabindex="-1"]:focus,
.demo-card[tabindex="-1"]:focus { outline: none; }

.block h2 {
  font-size: clamp(23px, 3.4vw, 36px); letter-spacing: -.02em; margin: 0 0 10px;
  text-align: center; color: #0f172a; font-weight: 800;
}
.sub { text-align: center; color: #64748b; max-width: 40em; margin: 0 auto 40px; font-size: 16.5px; }

.inline-mail { color: var(--color-brand); font-weight: 600; }
.inline-mail:hover { text-decoration: underline; }

/* features */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.feature-card { padding: clamp(18px, 5vw, 26px) clamp(16px, 4.5vw, 24px); transition: box-shadow 200ms ease, transform 200ms ease; }
.feature-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(15,23,42,.06), 0 12px 24px rgba(15,23,42,.06); }
.feature-card .ico {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px;
  border-radius: 12px; background: #e8f0fe; color: var(--color-brand); font-size: 22px;
}
.feature-card:nth-child(2) .ico { background: #ccfbf1; color: #0f766e; }
.feature-card:nth-child(3) .ico { background: #dcfce7; color: #15803d; }
.feature-card:nth-child(4) .ico { background: #fef3c7; color: #b45309; }
.feature-card:nth-child(5) .ico { background: #fee2e2; color: #b91c1c; }
.feature-card:nth-child(6) .ico { background: #e8f0fe; color: var(--color-brand); }
.feature-card h3 { margin: 0 0 8px; font-size: 17.5px; color: #0f172a; font-weight: 700; }
.feature-card p { margin: 0; color: #64748b; font-size: 15px; line-height: 1.6; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.step {
  background: #fff; border: 1px solid var(--color-border); border-radius: 16px;
  padding: clamp(18px, 5vw, 24px);
  box-shadow: 0 1px 2px rgba(15,23,42,.05);
}
.step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.step .n {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid;
  place-items: center; font-weight: 800; background: var(--color-brand); color: #fff;
}
.step h3 { margin: 0; font-size: 17px; color: #0f172a; font-weight: 700; }
.step p { margin: 0; color: #64748b; font-size: 15px; }

/* pricing */
.price-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.price-card { padding: clamp(18px, 5vw, 26px) clamp(16px, 4.5vw, 24px); }
.price-main { border-color: #aecbfa; background: linear-gradient(160deg, rgba(26,115,232,.05), rgba(20,184,166,.03)), #fff; }
.price-amount { margin: 0; font-size: clamp(36px, 11vw, 46px); font-weight: 800; letter-spacing: -.03em; color: #0f172a; line-height: 1; }
.price-unit { font-size: 17px; font-weight: 600; color: #64748b; letter-spacing: 0; margin-left: 4px; }
.price-caption { margin: 10px 0 0; color: #64748b; font-size: 14.5px; }
.price-list { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.price-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: #334155; }
.price-list svg { flex: 0 0 auto; width: 18px; height: 18px; color: #15803d; margin-top: 2px; }

.price-side { display: flex; flex-direction: column; gap: 18px; }
.price-card h3 {
  display: flex; align-items: center; gap: 9px; margin: 0 0 10px;
  font-size: 16px; font-weight: 700; color: #0f172a;
}
.price-card h3 svg { width: 18px; height: 18px; color: var(--color-brand); flex: 0 0 auto; }
.price-card p { margin: 0; color: #64748b; font-size: 14.5px; line-height: 1.65; }
.price-card-warn h3 svg { color: #b45309; }
.price-card-warn { border-color: #fde68a; background: #fffbeb; }

/* languages */
.lang-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 0; margin: 0; }
.lang-chip {
  background: #fff; border: 1px solid var(--color-border); color: #334155;
  padding: 8px 16px; border-radius: 999px; font-size: 14.5px; font-weight: 600;
}

/* comparison */
.comparison {
  max-width: 920px; margin: 0 auto; background: #fff; border: 1px solid var(--color-border);
  border-radius: 18px; padding: clamp(16px, 4.5vw, 26px);
  box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 12px 32px rgba(15,23,42,.06);
}
.compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.compare-card { border: 1px solid var(--color-border); border-radius: 14px;
  padding: clamp(15px, 4vw, 22px); background: #fff; }
.compare-card.featured {
  border-color: #aecbfa;
  background: linear-gradient(135deg, rgba(26,115,232,.07), rgba(20,184,166,.05)), #fff;
}
.compare-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.compare-title h4 { margin: 0; font-size: 16.5px; color: #0f172a; font-weight: 700; }
.rate { white-space: nowrap; color: var(--color-brand); font-size: 14px; font-weight: 700; }
.compare-list { list-style: none; padding: 0; margin: 0; }
.compare-list li {
  display: flex; gap: 10px; padding: 11px 0; color: #475569; font-size: 14.5px;
  border-top: 1px solid #eef2f7; align-items: flex-start;
}
.compare-list li:first-child { border-top: 0; }
.mark { flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; }
.mark svg { width: 16px; height: 16px; }
.mark-no { color: #b45309; }
.mark-yes { color: #0f766e; }

/* faq */
.faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: #fff; border: 1px solid var(--color-border); border-radius: 14px;
  padding: 0 clamp(14px, 4vw, 20px); transition: border-color 200ms ease;
}
.faq-item[open] { border-color: #aecbfa; }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 0; cursor: pointer; list-style: none;
  font-size: 15.5px; font-weight: 600; color: #0f172a; min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--color-brand); }
.faq-chevron { flex: 0 0 auto; width: 18px; height: 18px; position: relative; color: #94a3b8; }
.faq-chevron::before, .faq-chevron::after {
  content: ""; position: absolute; inset: 50% 3px auto 3px; height: 2px; border-radius: 2px;
  background: currentColor; transform: translateY(-50%); transition: transform 200ms ease;
}
.faq-chevron::after { transform: translateY(-50%) rotate(90deg); }
.faq-item[open] .faq-chevron::after { transform: translateY(-50%) rotate(0deg); }
.faq-item p { margin: 0; padding: 0 0 18px; color: #64748b; font-size: 15px; line-height: 1.65; }

/* closing */
.closing { text-align: center; }
.closing-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.closing .note { margin-top: 20px; }

/* ── footer ─────────────────────────────────────────────────── */

footer { border-top: 1px solid var(--color-border); background: #fff; margin-top: 40px; }
.footer-grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  gap: 32px; padding-top: 44px; padding-bottom: 36px;
}
.footer-brand p { margin: 12px 0 0; color: #64748b; font-size: 14.5px; max-width: 26em; line-height: 1.6; }
footer h3 {
  margin: 0 0 14px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #0f172a;
}
footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
footer ul a { color: #64748b; font-size: 14.5px; transition: color 150ms ease; }
footer ul a:hover { color: var(--color-brand); }
.footer-base {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  border-top: 1px solid var(--color-border); padding-top: 20px; padding-bottom: 24px;
  color: #94a3b8; font-size: 13.5px;
}
.footer-base a:hover { color: var(--color-brand); }

/* ── responsive ─────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .nav-links { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 44px 0 48px; }
  .hero-copy { max-width: 40em; }
  .hero-demo { max-width: 460px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .price-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .nav-toggle { display: block; margin-left: 0; }
  .nav-actions { display: none; }
  .lang-switch { margin-left: auto; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .compare-grid { grid-template-columns: minmax(0, 1fr); gap: 18px 0; }
  .compare-title { align-items: flex-start; flex-direction: column; gap: 4px; }
  section.block { padding: 48px 0; }
}

@media (max-width: 560px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-top: 34px; }
  .hero-actions .btn, .closing-actions .btn { width: 100%; }
  .footer-base { flex-direction: column; gap: 8px; }
  /* Vertical rhythm comes in with the horizontal. 64px of section padding is a
     desktop reading pause; once the cards stack into one column the same gap
     reads as dead space between things that belong together. */
  .hero { gap: 32px; padding: 34px 0 38px; }
  section.block { padding: 40px 0; }
  .sub { margin-bottom: 28px; }
  .lang-list { gap: 8px; }
}

/* Smallest phones (320px logical width). The fluid gutters and clamps above
   already carry the layout down here, so what is left is chrome that was sized
   assuming a wider row than 320px provides. */
@media (max-width: 400px) {
  .nav-row { gap: 12px; }
  .logo { font-size: 18px; }
  .compare-title h4 { font-size: 15.5px; }
  .rate { font-size: 13px; }
  .faq-item summary { gap: 10px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn-hero:hover, .feature-card:hover { transform: none; }
  .feature-card, .btn-hero, .btn-hero-ghost, .faq-chevron::before, .faq-chevron::after {
    transition: none;
  }
}