@import url("https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&display=swap");

:root {
  --navy-950: #04172b;
  --navy-900: #071d36;
  --navy-800: #0d2948;
  --text: #0b1d38;
  --muted: #5c6b82;
  --surface: #f5f7fc;
  --white: #fff;
  --line: #e4e9f2;
  --cyan: #28d6d5;
  --blue: #4092ff;
  --violet: #7359ff;
  --icon: #546cff;
  --gradient: linear-gradient(100deg, var(--cyan), var(--blue) 55%, var(--violet));
  --font: "Onest", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shadow: 0 16px 42px rgba(7, 29, 54, .09);
}

* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; background: var(--surface); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased }
a { color: inherit }
button, a { -webkit-tap-highlight-color: transparent }
.container { width: min(1200px, calc(100% - 48px)); margin: 0 auto; position: relative }
.hero { min-height: 520px; overflow: hidden; position: relative; background: radial-gradient(circle at 68% 32%, #173d64 0, var(--navy-950) 42%, #031223 100%); color: #fff; border-radius: 0 0 34px 34px }
.hero-mesh, .footer-mesh { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none }
.nav { height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px }
.brand img { display: block; width: 166px; height: auto }
.nav-languages { color: #c8d3e4; font-size: 13px; letter-spacing: .08em }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(440px, .97fr); min-height: 438px; align-items: center }
.hero-copy { position: relative; z-index: 3; padding: 34px 0 68px }
.eyebrow { margin: 0 0 14px; color: #d4ddea; font-size: 13px; letter-spacing: .04em }
h1 { margin: 0; max-width: 680px; font-size: clamp(42px, 4vw, 64px); line-height: 1.04; letter-spacing: -.04em }
h1 span { color: #51a0ff }
.hero-lead { max-width: 550px; margin: 20px 0 0; color: #e0e7f0; font-size: 19px }
.hero-processes { max-width: 680px; margin: 18px 0 0; color: #b7c5d8; font-size: 13px }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 22px; border: 1px solid transparent; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease }
.button:hover { transform: translateY(-2px) }
.button img { width: 19px; height: 19px; filter: brightness(0) invert(1) }
.button-primary { color: #fff; background: var(--gradient); box-shadow: 0 12px 28px rgba(64, 146, 255, .25) }
.button-secondary { color: #fff; border-color: #7970ff; background: rgba(7, 29, 54, .48) }
.hero-visual { align-self: stretch; min-width: 0; position: relative }
.hero-agent { position: absolute; z-index: 1; left: 0; bottom: -18px; width: 64%; max-height: 460px; object-fit: contain; object-position: bottom center }
.routing-visual { position: absolute; z-index: 2; right: -52px; top: 82px; width: 70%; height: auto }

.section { padding: 68px 0 }
.section-heading { margin-bottom: 24px }
.section-heading h2, .benefits-section h2, .footer h2 { margin: 0; font-size: clamp(27px, 2.5vw, 38px); line-height: 1.13; letter-spacing: -.035em }
.section-heading p { max-width: 780px; margin: 8px 0 0; color: var(--muted) }
.split-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px }
.filters { display: flex; gap: 8px; padding: 5px; background: #eaf0fa; border-radius: 999px }
.filter { border: 0; border-radius: 999px; padding: 8px 14px; color: var(--muted); background: transparent; font: 500 13px var(--font); cursor: pointer }
.filter.is-active { color: #fff; background: linear-gradient(100deg, var(--blue), var(--violet)) }
.audio-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px }
.audio-card, .feature-card, .compact-card, .mini-card { border: 1px solid var(--line); background: #fff; border-radius: 18px; box-shadow: var(--shadow) }
.audio-card { padding: 18px; min-width: 0 }
.audio-card[hidden] { display: none }
.audio-meta { display: flex; align-items: start; justify-content: space-between; gap: 8px }
.audio-meta strong { font-size: 15px }
.audio-meta span { flex: 0 0 auto; padding: 4px 8px; color: #566780; background: #f0f4fb; border-radius: 999px; font-size: 11px }
.audio-control { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 16px 0 13px }
.play-button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #d6ddf0; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 5px 12px rgba(64, 146, 255, .12) }
.play-button img { width: 24px; height: 24px }
.audio-control time { color: #40516b; font-size: 12px; font-variant-numeric: tabular-nums }
.wave { height: 28px; display: flex; align-items: center; gap: 2px }
.wave i { flex: 1; min-width: 1px; border-radius: 2px; background: #a9b9ff }
.wave i:nth-child(4n+1) { height: 36% }.wave i:nth-child(4n+2) { height: 72% }.wave i:nth-child(4n+3) { height: 48% }.wave i:nth-child(4n) { height: 88% }
.audio-card.is-playing .wave i { animation: pulse .65s ease-in-out infinite alternate }
.audio-card.is-playing .wave i:nth-child(2n) { animation-delay: .2s }
@keyframes pulse { to { height: 100%; background: var(--blue) } }
.audio-card > p { margin: 0; color: var(--muted); font-size: 13px }

.capabilities-section { padding-top: 54px }
.capability-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px }
.feature-card { min-height: 230px; padding: 22px 18px }
.feature-card > img, .compact-card > img { width: 38px; height: 38px }
.feature-card h3, .compact-card h3 { margin: 17px 0 8px; font-size: 16px; line-height: 1.18 }
.feature-card p, .compact-card p, .mini-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.42 }

.benefits-section { padding: 54px 0 34px; color: #fff; background: radial-gradient(circle at 90% 20%, #123e62, var(--navy-950) 50%) }
.benefit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 24px }
.benefit-grid article { min-height: 138px; padding: 10px 30px 18px 0 }
.benefit-grid article + article { padding-left: 30px; border-left: 1px solid rgba(255, 255, 255, .24) }
.benefit-grid strong { display: block; min-height: 48px; color: var(--cyan); font-size: 36px; line-height: 1.05; letter-spacing: -.03em }
.benefit-grid .benefit-title { font-size: 21px }
.benefit-grid p { max-width: 230px; margin: 10px 0 0; color: #d8e2ed; font-size: 13px }
.disclaimer { margin: 8px 0 0; color: #8296ac; font-size: 11px }

.process-section { padding-bottom: 36px }
.process-flow { display: grid; grid-template-columns: repeat(11, auto); align-items: center; justify-content: space-between; gap: 12px }
.process-flow article { min-width: 110px; text-align: center }
.process-flow img { width: 42px; height: 42px; padding: 8px; border-radius: 50%; background: #edf2ff }
.process-flow h3 { margin: 8px 0 0; font-size: 14px }
.process-flow p { margin: 2px 0 0; color: var(--muted); font-size: 12px }
.process-flow > span { color: var(--icon); font-size: 28px }
.process-summary { margin: 26px 0 0; color: #40516b; font-size: 14px }

.industry-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
.compact-card { display: flex; align-items: flex-start; gap: 16px; padding: 20px }
.compact-card h3 { margin: 0 0 8px }
.region-section { padding-top: 16px }
.region-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px }
.mini-card { min-height: 104px; display: flex; align-items: flex-start; gap: 12px; padding: 16px }
.mini-card img { flex: 0 0 auto; width: 28px; height: 28px }
.llm-section { padding-top: 28px }
.llm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }

.footer { position: relative; overflow: hidden; padding: 58px 0 24px; color: #fff; background: var(--navy-950); border-radius: 34px 34px 0 0 }
.footer-grid { display: grid; grid-template-columns: 1.6fr .65fr .65fr; gap: 34px; align-items: center }
.footer-cta p { margin: 12px 0 0; color: #bdcadd }
.contact { display: flex; flex-direction: column; align-items: flex-start; font-size: 13px }
.contact strong { font-size: 14px }
.contact span { margin-bottom: 12px; color: #9fb0c5 }
.contact a { margin-top: 7px; color: #dce5ef; text-decoration: none }
.footer-bottom { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 18px; margin-top: 42px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); color: #9fb0c5; font-size: 12px }
.footer-bottom img { width: 106px }
.footer-bottom a { color: #8ab7ff; text-decoration: none }

@media (max-width: 1060px) {
  .hero-grid { grid-template-columns: 1fr 430px }
  .routing-visual { right: -80px }
  .capability-grid { grid-template-columns: repeat(3, 1fr) }
  .feature-card { min-height: 210px }
  .region-grid { grid-template-columns: repeat(3, 1fr) }
  .audio-grid { grid-template-columns: repeat(2, 1fr) }
}

@media (max-width: 720px) {
  body { font-size: 16px }
  .container { width: min(100% - 32px, 520px) }
  .hero { min-height: auto; border-radius: 0 0 26px 26px }
  .nav { height: 68px }
  .brand img { width: 132px }
  .nav-languages { font-size: 12px }
  .hero-grid { display: block; min-height: 0 }
  .hero-copy { padding: 40px 0 0 }
  .eyebrow { font-size: 11px }
  h1 { max-width: none; font-size: clamp(37px, 11vw, 50px) }
  .hero-lead { font-size: 17px }
  .hero-processes { font-size: 12px; line-height: 1.55 }
  .hero-actions { display: grid; grid-template-columns: 1fr; width: 100% }
  .button { width: 100% }
  .hero-visual { height: 370px; margin-top: 8px }
  .hero-agent { left: 50%; bottom: -26px; width: 90%; max-height: 385px; transform: translateX(-50%) }
  .routing-visual { display: none }
  .section { padding: 50px 0 }
  .section-heading { margin-bottom: 20px }
  .section-heading h2, .benefits-section h2, .footer h2 { font-size: 28px }
  .split-heading { display: block }
  .filters { width: max-content; margin-top: 18px }
  .audio-grid { display: flex; gap: 12px; width: calc(100vw - 16px); margin-right: -16px; padding: 2px 16px 18px 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none }
  .audio-grid::-webkit-scrollbar { display: none }
  .audio-card { flex: 0 0 min(82vw, 330px); scroll-snap-align: start }
  .capabilities-section { padding-top: 30px }
  .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
  .feature-card { min-height: 245px; padding: 18px 15px }
  .feature-card h3 { font-size: 15px }
  .feature-card p { font-size: 13px }
  .benefits-section { padding: 48px 0 30px }
  .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 18px }
  .benefit-grid article { min-height: 170px; padding: 16px 14px 22px 0 }
  .benefit-grid article + article { padding-left: 14px }
  .benefit-grid article:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .18) }
  .benefit-grid article:nth-child(4) { border-top: 1px solid rgba(255, 255, 255, .18) }
  .benefit-grid strong { min-height: 40px; font-size: 31px }
  .benefit-grid .benefit-title { font-size: 18px }
  .process-flow { grid-template-columns: 1fr; gap: 0 }
  .process-flow article { min-width: 0; display: grid; grid-template-columns: 48px 92px 1fr; align-items: center; gap: 10px; padding: 12px 0; text-align: left; border-bottom: 1px solid var(--line) }
  .process-flow h3, .process-flow p { margin: 0 }
  .process-flow > span { display: none }
  .process-summary { font-size: 13px }
  .industry-grid, .llm-grid, .region-grid { grid-template-columns: 1fr }
  .compact-card, .mini-card { min-height: 0 }
  .footer { padding-top: 48px; border-radius: 26px 26px 0 0 }
  .footer-grid { grid-template-columns: 1fr; gap: 30px }
  .contact { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14) }
  .footer-bottom { grid-template-columns: 1fr auto; gap: 12px }
  .footer-bottom span:first-of-type { display: none }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; animation: none !important; transition: none !important }
}
/* Layout matched to the supplied desktop and mobile references. */
:root { --shadow:0 2px 8px rgba(7,29,54,.025); --muted:#263b5b }
h1 span { background:var(--gradient);background-clip:text;-webkit-background-clip:text;color:transparent }
.audio-card,.feature-card,.compact-card,.mini-card { border-radius:16px }
.wave { position:relative;cursor:pointer }
.wave i { transition:background .15s }
.wave i.played { background:#546cff }
button:focus-visible,a:focus-visible,.wave:focus-visible { outline:3px solid #4092ff;outline-offset:4px }
.audio-error { font-size:12px;color:#b42318;margin-top:8px }
.benefits-section { border-radius:28px }
@media(min-width:721px) {
.container { width:88%;max-width:1350px }
.hero { min-height:0 }
.nav { height:76px }
.brand img { width:195px }
.nav-languages { display:none }
.hero-grid { min-height:390px;grid-template-columns:1.1fr 1fr }
.hero-copy { padding:8px 0 24px }
h1 { font-size:clamp(32px,3.15vw,49px);line-height:1.06;letter-spacing:-.025em;width:650px;max-width:115% }
.eyebrow { margin-bottom:16px }
.hero-lead { margin-top:14px;font-size:20px;max-width:460px;line-height:1.3 }
.hero-processes { width:800px;max-width:140%;margin-top:16px;font-size:15px }
.hero-actions { margin-top:18px }
.hero-agent { left:-8%;width:72%;max-height:420px;bottom:-20px }
.routing-visual { right:-5%;top:10px;width:78% }
.section { padding:20px 0 }
.section-heading { margin-bottom:14px }
.section-heading h2,.benefits-section h2,.footer h2 { font-size:28px;letter-spacing:-.025em }
.section-heading p { margin-top:3px }
.audio-grid { grid-template-columns:repeat(4,minmax(0,1fr)) }
.audio-card { padding:18px 20px }
.audio-meta strong { font-size:14px }
.audio-meta span { padding:2px 6px }
.audio-card>p { font-size:15px;line-height:1.4 }
.audio-control { margin:12px 0 10px;gap:8px }
.capabilities-section { padding-top:12px }
.capability-grid { grid-template-columns:repeat(6,minmax(0,1fr)) }
.feature-card { padding:18px 20px;min-height:235px }
.feature-card>img { width:46px;height:46px }
.feature-card h3 { font-size:18px;margin-top:14px }
.feature-card p { font-size:15px;line-height:1.3 }
.benefits-section { padding:18px 0 16px }
.benefit-grid { margin-top:20px }
.benefit-grid article { min-height:112px }
.benefit-grid strong { font-size:46px }
.benefit-grid p { font-size:16px;line-height:1.3 }
.benefit-grid .benefit-title { font-size:24px }
.disclaimer { font-size:13px;margin-top:16px }
.process-section { padding:18px 0 0 }
.process-flow article { min-width:0;max-width:190px }
.process-flow img { width:64px;height:64px;padding:14px }
.process-flow h3 { font-size:16px;margin-top:0 }
.process-flow p { font-size:15px;line-height:1.15 }
.process-summary { font-size:16px;margin-top:18px }
.industries-section { padding:18px 0 10px }
.compact-card { padding:16px;gap:15px }
.compact-card>img { flex-shrink:0;width:42px;height:42px }
.compact-card h3 { font-size:14px }
.compact-card p { font-size:14px;line-height:1.3 }
.region-section { padding:10px 0 16px }
.region-grid { grid-template-columns:repeat(5,minmax(0,1fr)) }
.mini-card { min-height:78px;padding:14px;align-items:center }
.mini-card p { font-size:12px;line-height:1.3 }
.llm-section { padding:10px 0 22px }
.footer { padding:24px 0 20px }
.footer-grid { grid-template-columns:1.9fr .52fr .52fr;gap:28px }
.footer h2 { font-size:26px }
.footer-cta p { font-size:15px }
.footer-bottom { margin-top:22px;padding-top:12px;border:0 }
}
@media(min-width:721px) and (max-width:1150px) {
.container { width:90% }
.hero-grid { min-height:350px;grid-template-columns:1.2fr 1fr }
h1 { font-size:34px }
.hero-lead { font-size:17px }
.hero-processes { font-size:12px }
.button { font-size:12px;padding:0 17px }
.feature-card { padding:16px 12px }
.feature-card h3 { font-size:15px }
.feature-card p,.audio-card>p { font-size:13px }
.audio-card { padding:14px 12px }
.audio-meta { flex-wrap:wrap }
.section-heading h2,.benefits-section h2 { font-size:24px }
.compact-card { padding:12px;gap:10px }
.compact-card h3 { font-size:12px }
.compact-card p { font-size:12px }
.footer-grid { grid-template-columns:1.5fr .7fr .7fr }
.contact { font-size:11px }
}
@media(max-width:720px) {
.container { width:calc(100% - 40px) }
.hero { border-radius:0 }
.hero-copy { padding:12px 0 0 }
h1 { font-size:clamp(28px,8.5vw,48px);line-height:1.08;letter-spacing:-.02em }
.hero-lead { font-size:15px;margin-top:12px }
.hero-processes { font-size:11px }
.hero-actions { margin-top:20px;gap:10px }
.hero-visual { height:300px }
.hero-agent { max-height:320px;width:95%;bottom:-18px }
.section { padding:28px 0 }
.section-heading h2,.benefits-section h2,.footer h2 { font-size:24px;line-height:1.15 }
.section-heading p { font-size:13px }
.audio-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;margin:0;padding:0;overflow:visible;gap:12px }
.audio-card { padding:12px 10px;border-radius:13px }
.audio-meta { display:block;min-height:45px }
.audio-meta strong { font-size:12px;display:block;line-height:1.25 }
.audio-meta span { font-size:10px;padding:0;background:transparent }
.audio-control { grid-template-columns:30px minmax(0,1fr) auto;gap:4px;margin:8px 0 }
.play-button { width:30px;height:30px }
.play-button img { width:19px;height:19px }
.audio-control time { font-size:10px }
.audio-card>p { font-size:12px;line-height:1.35 }
.wave { gap:1px;height:22px }
.feature-card { min-height:215px }
.benefits-section { padding:28px 0; background:#123d5e }
.disclaimer { margin-top:24px }
.process-flow { gap:12px }
.process-flow article { position:relative;background:white;border:0;border-radius:12px;padding:12px;grid-template-columns:38px 1fr;column-gap:12px }
.process-flow img { grid-row:1/3;width:36px;height:36px }
.process-flow h3 { font-size:14px }
.process-flow p { grid-column:2;font-size:12px }
.process-flow article:not(:last-child)::after { content:'›';position:absolute;right:12px;color:#546cff }
.compact-card h3 { font-size:14px }
.mini-card { align-items:center }
.footer { padding-top:28px;background:#123d5e }
}
@media (min-width: 721px) {
  .hero-agent {
    transform: translateX(-60px);
  }
}