.voip-hero {
    overflow: hidden;
    padding: 76px 0 68px;
    background: linear-gradient(135deg, #ffffff 0%, #eef7ff 58%, #f8fcff 100%);
}

.voip-hero__layout {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr);
    align-items: center;
    gap: 54px;
}

.voip-hero__copy,
.voip-flow,
.voip-flow__stage,
.voip-feature-grid > article,
.voip-guide__layout > * { min-width: 0; }

.voip-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: #2563eb;
    font-size: .78rem;
    font-weight: 900;
}

.voip-eyebrow .lucide { width: 20px; height: 20px; }
.voip-hero h1 { margin: 0; color: #0b1b3a; font-size: clamp(2rem, 3.4vw, 3.35rem); line-height: 1.45; }
.voip-hero__copy > p { max-width: 700px; margin: 20px 0 24px; color: #526b83; line-height: 2.05; }
.voip-hero__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 27px; }
.voip-hero__badges span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid #cbdff1; border-radius: 7px; color: #294b6a; background: #fff; font-size: .68rem; font-weight: 800; }
.voip-hero__badges .lucide { width: 16px; height: 16px; color: #168466; }
.voip-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.btn--voip-secondary { border: 1px solid #93c5e8; color: #164f85; background: #f4faff; }
.voip-hero__guide { min-height: 44px; display: inline-flex; align-items: center; gap: 5px; padding: 9px 2px; color: #255b8a; font-size: .7rem; font-weight: 900; }
.voip-hero__guide .lucide { width: 16px; height: 16px; }

.voip-flow { margin: 0; padding: 18px; border: 1px solid #ccdfef; border-radius: 22px; background: rgba(255, 255, 255, .88); box-shadow: 0 24px 62px rgba(11, 27, 58, .12); }
.voip-flow__stage { position: relative; display: grid; grid-template-columns: 1fr 82px 1.15fr 82px 1fr; align-items: center; min-height: 330px; }
.voip-flow__node { position: relative; z-index: 2; min-height: 145px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 10px; border: 1px solid #cfdfed; border-radius: 17px; background: #fff; text-align: center; box-shadow: 0 12px 26px rgba(11, 27, 58, .08); }
.voip-flow__node > .lucide { width: 32px; height: 32px; color: #2563eb; }
.voip-flow__node small { color: #627990; font-size: .61rem; }
.voip-flow__node strong { color: #0b1b3a; font-size: .72rem; overflow-wrap: anywhere; }
.voip-flow__node--app { min-height: 180px; border-color: #2563eb; color: #fff; background: #0b1b3a; }
.voip-flow__node--app > .lucide { color: #38bdf8; }
.voip-flow__node--app small { color: #9bdffc; }
.voip-flow__node--app strong { color: #fff; font-size: .85rem; }
.voip-flow__node--crm { border-color: #a8ddc9; }
.voip-flow__node--crm > .lucide { color: #168466; }
.voip-flow__node--crm strong { color: #147357; }
.voip-flow__connector { display: grid; place-items: center; color: #2563eb; }
.voip-flow__connector svg { width: 76px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.voip-flow__connector small { margin-top: 4px; color: #64819b; font-size: .52rem; font-weight: 900; }
.voip-flow__missed { position: absolute; z-index: 3; inset: auto 17% 5px auto; width: 66%; display: grid; grid-template-columns: minmax(0, 1fr) 82px minmax(0, 1.35fr); align-items: center; gap: 4px; }
.voip-flow__missed span { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px; border: 1px solid #d9e5ef; border-radius: 9px; color: #405f79; background: #fff; font-size: .53rem; }
.voip-flow__missed span:last-child { color: #087f62; border-color: #b5dfcf; background: #effaf6; }
.voip-flow__missed .lucide { flex: 0 0 auto; width: 15px; height: 15px; }
.voip-flow__missed b { overflow-wrap: anywhere; }
.voip-flow__missed svg { width: 76px; fill: none; stroke: #38bdf8; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.voip-flow figcaption { margin: 14px 4px 0; color: #60778e; font-size: .62rem; line-height: 1.9; }
.voip-flow__toggle { display: none; align-items: center; gap: 6px; margin-top: 11px; padding: 7px 10px; border: 1px solid #bcd4e7; border-radius: 7px; color: #214f76; background: #fff; font: inherit; font-size: .62rem; font-weight: 800; cursor: pointer; }
.voip-motion-ready .voip-flow__toggle { display: inline-flex; }
.voip-flow__toggle:focus-visible { outline: 3px solid rgba(37, 99, 235, .3); outline-offset: 3px; }
.voip-flow__toggle .lucide { width: 15px; height: 15px; }

.voip-motion-ready [data-flow-step] { animation: voipFlowReveal 11s ease-in-out infinite both; }
.voip-motion-ready [data-flow-step="2"] { animation-delay: .8s; }
.voip-motion-ready [data-flow-step="3"] { animation-delay: 1.7s; }
.voip-motion-ready [data-flow-step="4"] { animation-delay: 2.7s; }
.voip-motion-ready [data-flow-step="5"] { animation-delay: 3.6s; }
.voip-motion-ready [data-flow-step="6"] { animation-delay: 5.2s; }
.voip-motion-paused [data-flow-step] { animation-play-state: paused; }
@keyframes voipFlowReveal { 0%, 7% { opacity: .28; transform: translateY(4px); } 14%, 78% { opacity: 1; transform: translateY(0); } 92%, 100% { opacity: .28; transform: translateY(4px); } }

.voip-compatibility { border-block: 1px solid #dbe8f2; background: #fff; }
.voip-compatibility .container { min-height: 82px; display: flex; align-items: center; justify-content: center; gap: 24px; }
.voip-compatibility strong { color: #173c60; font-size: .75rem; }
.voip-compatibility ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.voip-compatibility li { padding: 6px 10px; border-radius: 6px; color: #285774; background: #edf7fc; font-size: .64rem; font-weight: 800; }

.voip-features { background: #fff; }
.voip-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.voip-feature-grid > article { padding: 27px; border: 1px solid #dbe7f1; border-radius: 18px; background: #fbfdff; }
.voip-feature-grid__icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; color: #2563eb; background: #e8f4ff; }
.voip-feature-grid__icon .lucide { width: 24px; height: 24px; }
.voip-feature-grid h3 { margin: 15px 0; color: #0b1b3a; font-size: 1rem; }
.voip-feature-grid ul { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.voip-feature-grid li { display: grid; grid-template-columns: 19px minmax(0, 1fr); gap: 8px; }
.voip-feature-grid li > .lucide { width: 17px; height: 17px; margin-top: 3px; color: #168466; }
.voip-feature-grid li strong { display: block; color: #28445f; font-size: .72rem; }
.voip-feature-grid li p { margin: 3px 0 0; color: #6a7d90; font-size: .64rem; line-height: 1.85; }

.voip-guide { background: #f3f8fd; }
.voip-guide__layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .72fr); gap: 30px; }
.voip-guide h2 { margin: 8px 0 10px; color: #0b1b3a; }
.voip-guide__layout > div > p { color: #60768a; line-height: 2; }
.voip-guide ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.voip-guide ol li { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 9px; padding: 13px; border: 1px solid #d5e4ef; border-radius: 11px; background: #fff; }
.voip-guide ol b { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: #2563eb; }
.voip-guide ol span { display: flex; flex-direction: column; }
.voip-guide ol strong { color: #24425e; font-size: .68rem; }
.voip-guide ol small { margin-top: 3px; color: #718497; font-size: .57rem; }
.voip-guide aside { padding: 28px; border-radius: 18px; color: #fff; background: #0b1b3a; }
.voip-guide aside > .lucide { width: 38px; height: 38px; color: #38bdf8; }
.voip-guide aside h2 { color: #fff; font-size: 1.05rem; }
.voip-guide aside ul { display: grid; gap: 10px; margin: 18px 0; padding: 0 17px 0 0; color: #d2e0ed; font-size: .67rem; line-height: 1.9; }
.voip-guide aside p { margin: 0; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.12); color: #8fb1ce; font-size: .59rem; line-height: 1.85; }

.voip-trial { background: #fff; }
.voip-trial__panel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 30px; border: 1px solid #cce2f3; border-radius: 20px; background: #f5faff; }
.voip-trial__panel > .lucide { width: 48px; height: 48px; padding: 10px; border-radius: 13px; color: #2563eb; background: #fff; }
.voip-trial small { color: #2563eb; font-weight: 900; }
.voip-trial h2 { margin: 4px 0; color: #0b1b3a; font-size: 1.25rem; }
.voip-trial p { margin: 0; color: #657b8f; font-size: .68rem; line-height: 1.9; }
.voip-faq { background: #f8fbfe; }
.voip-faq__layout { display: grid; grid-template-columns: minmax(260px, .62fr) minmax(0, 1.38fr); gap: 38px; }
.voip-faq h2 { margin: 8px 0; color: #0b1b3a; }
.voip-faq__layout > div:first-child p { color: #677c91; line-height: 1.95; }
.voip-final { padding: 34px 0; color: #fff; background: #0b1b3a; }
.voip-final .container { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.voip-final .container > div { display: flex; align-items: center; gap: 15px; }
.voip-final .container > div > .lucide { width: 45px; height: 45px; padding: 10px; border-radius: 12px; color: #38bdf8; background: rgba(56,189,248,.1); }
.voip-final h2 { margin: 0 0 5px; font-size: 1.25rem; }
.voip-final p { margin: 0; color: #a9bfd3; font-size: .68rem; }

@media (max-width: 1040px) {
    .voip-hero__layout { grid-template-columns: minmax(0, 1fr); }
    .voip-hero__copy { max-width: 780px; }
    .voip-guide__layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
    .voip-hero { padding: 48px 0; }
    .voip-hero h1 { font-size: 1.8rem; }
    .voip-hero__actions .btn { width: 100%; }
    .voip-flow { padding: 12px; border-radius: 15px; }
    .voip-flow__stage { grid-template-columns: minmax(0, 1fr); gap: 26px; min-height: 690px; padding-bottom: 150px; }
    .voip-flow__node { width: min(260px, 100%); min-height: 115px; margin-inline: auto; }
    .voip-flow__node--app { min-height: 130px; }
    .voip-flow__connector { transform: rotate(-90deg); }
    .voip-motion-ready .voip-flow__connector { animation-name: voipFlowRevealVertical; }
    .voip-flow__connector small { transform: rotate(90deg); }
    .voip-flow__missed { inset: auto 0 4px; width: 100%; grid-template-columns: minmax(0, 1fr); }
    .voip-flow__missed svg { width: 48px; margin: -5px auto; transform: rotate(-90deg); }
    .voip-compatibility .container { align-items: flex-start; flex-direction: column; gap: 10px; padding-block: 18px; }
    .voip-feature-grid { grid-template-columns: minmax(0, 1fr); }
    .voip-feature-grid > article { padding: 21px; }
    .voip-guide ol { grid-template-columns: minmax(0, 1fr); }
    .voip-trial__panel { grid-template-columns: auto minmax(0, 1fr); padding: 22px; }
    .voip-trial__panel .btn { grid-column: 1 / -1; width: 100%; }
    .voip-faq__layout { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .voip-final .container { align-items: stretch; flex-direction: column; }
    .voip-final .btn { width: 100%; }
}

@keyframes voipFlowRevealVertical { 0%, 7% { opacity: .28; transform: rotate(-90deg) translateX(-4px); } 14%, 78% { opacity: 1; transform: rotate(-90deg) translateX(0); } 92%, 100% { opacity: .28; transform: rotate(-90deg) translateX(-4px); } }

@media (max-width: 360px) {
    .voip-hero__layout { gap: 30px; }
    .voip-flow__stage { min-height: 680px; }
    .voip-flow__missed span { font-size: .49rem; }
    .voip-guide aside { padding: 21px; }
}

@media (prefers-reduced-motion: reduce) {
    .voip-motion-ready [data-flow-step] { animation: none !important; opacity: 1 !important; }
    .voip-motion-ready .voip-flow__toggle { display: none; }
}