.wa-page { --wa: #25d366; --wa-page-gutter: clamp(20px, 5vw, 40px); overflow: clip; }
.wa-page .sec { padding-block: clamp(76px, 9vw, 132px); padding-inline: var(--wa-page-gutter); }
.wa-hero { position: relative; min-height: min(900px, calc(100svh - 72px)); padding-block: clamp(72px, 9vw, 128px); padding-inline: var(--wa-page-gutter); color: #fff; background: var(--color-ink); overflow: hidden; display: grid; align-items: center; }
.wa-hero::before { content: ""; position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, #000, transparent 88%); }
.wa-hero__glow { position: absolute; width: 720px; aspect-ratio: 1; inset-inline-end: -200px; inset-block-start: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(37,211,102,.28), transparent 68%); }
.wa-hero__grid, .wa-split { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, .92fr); gap: clamp(44px, 7vw, 104px); align-items: center; }
.wa-hero__grid { width: 100%; }
.wa-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px; margin-top:50px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.wa-kicker__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--wa); box-shadow: 0 0 0 7px rgba(37,211,102,.12); }
.wa-hero h1 { max-width: 820px; margin: 0; font: 800 clamp(48px, 6vw, 88px)/.98 var(--font-display); letter-spacing: -.055em; }
.wa-hero h1 span { color: var(--wa); }
.wa-hero__statement { max-width: 620px; margin: 30px 0 0; white-space: pre-line; font: 600 clamp(23px, 2.6vw, 38px)/1.18 var(--font-display); letter-spacing: -.025em; }
.wa-hero__lead { margin: 24px 0 0; color: rgba(255,255,255,.68); font-size: clamp(16px, 1.4vw, 20px); }
.wa-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.wa-console, .wa-ai-ui, .wa-team-ui { border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-xl); background: rgba(255,255,255,.08); box-shadow: 0 28px 80px rgba(0,0,0,.3); backdrop-filter: blur(18px); overflow: hidden; }
.wa-console { transform: rotate(1.5deg); }
.wa-console__top { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.12); }
.wa-console__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.wa-console__brand i, .wa-node--green { background: var(--wa) !important; color: #082b15 !important; }
.wa-console__brand i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; font-style: normal; }
.wa-live { padding: 6px 10px; border-radius: var(--radius-pill); color: #91f2b5; background: rgba(37,211,102,.13); font-size: 11px; font-weight: 700; }
.wa-console__body { padding: 24px; }
.wa-chat { display: grid; gap: 12px; }
.wa-bubble { width: fit-content; max-width: 84%; padding: 14px 16px; border-radius: 18px 18px 18px 5px; font-size: 14px; line-height: 1.5; }
.wa-bubble small { display: block; margin-top: 5px; opacity: .55; font-size: 10px; text-align: end; }
.wa-bubble--client { background: var(--color-bg-surface-2); color: var(--color-text-primary); }
.wa-bubble--business { justify-self: end; border-radius: 18px 18px 5px 18px; background: #d9ffe7; color: #0b2a16; }
.wa-deal { display: flex; gap: 12px; align-items: center; margin-top: 22px; padding: 14px; border: 1px solid rgba(37,211,102,.3); border-radius: var(--radius-md); background: rgba(37,211,102,.09); }
.wa-deal > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--wa); color: #092d16; }
.wa-deal svg { width: 18px; }.wa-deal b,.wa-deal small { display: block; }.wa-deal small { margin-top: 2px; color: rgba(255,255,255,.55); }
.wa-console__rail { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border-top: 1px solid rgba(255,255,255,.12); font-size: 11px; font-weight: 700; color: rgba(255,255,255,.65); }
.wa-console__rail i { width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--wa)); }
.wa-heading h2 { max-width: 850px; margin: 12px 0 20px; font: 750 clamp(38px, 5vw, 72px)/1.02 var(--font-display); letter-spacing: -.045em; white-space: pre-line; }
.wa-heading > p { max-width: 720px; margin: 0; color: var(--color-text-secondary); font-size: clamp(17px, 1.7vw, 23px); line-height: 1.55; white-space: pre-line; }
.wa-heading--light h2, .wa-heading--light p { color: #fff; }.wa-heading--center { text-align: center; margin-inline: auto; }.wa-heading--center h2 { margin-inline: auto; }
.wa-channel-map { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 32px 32px 140px; border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); background: var(--color-bg-surface); box-shadow: var(--shadow-lg); }
.wa-channel { display: flex; flex-direction: column; gap: 10px; align-items: center; padding: 18px 10px; border-radius: var(--radius-lg); background: var(--color-bg-page); border: 1px solid var(--color-border-default); font-size: 13px; }
.wa-node { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: var(--color-ink); color: #fff; font-style: normal; font-weight: 800; }.wa-node svg { width: 21px; }
.wa-channel-map__hub { position: absolute; inset-inline: 12%; inset-block-end: 28px; display: flex; align-items: center; gap: 15px; padding: 18px; border-radius: var(--radius-lg); background: var(--color-ink); color: #fff; }
.wa-channel-map__hub::before { content: ""; position: absolute; inset-block-end: 100%; inset-inline-start: 50%; width: 1px; height: 46px; background: var(--wa); box-shadow: -130px 0 var(--wa), 130px 0 var(--wa); }.wa-channel-map__hub span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--wa); color: #092d16; font-weight: 800; }
.wa-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 56px; }.wa-points span { padding: 22px; border-inline-start: 3px solid var(--wa); background: var(--color-bg-surface); font: 650 clamp(17px,1.6vw,22px)/1.35 var(--font-display); }
.wa-split--reverse > :first-child { order: 2; }.wa-team-ui { padding: 28px; color: var(--color-text-primary); background: var(--color-bg-page); border-color: var(--color-border-default); box-shadow: var(--shadow-lg); }
.wa-team-ui__number { display: flex; gap: 14px; align-items: center; padding-bottom: 22px; border-bottom: 1px solid var(--color-border-default); }.wa-team-ui__number small,.wa-team-ui__number b { display:block }.wa-team-ui__number small { color: var(--color-text-muted); }.wa-team-ui__people { display: flex; align-items: center; padding-block: 24px; }.wa-team-ui__people span,.wa-team-ui__people i { width: 48px; height: 48px; display: grid; place-items: center; margin-inline-end: -8px; border: 3px solid var(--color-bg-page); border-radius: 50%; background: var(--color-brand-tint); color: var(--color-text-brand); font-style: normal; font-weight: 800; }.wa-team-ui__people i { background: var(--color-ink); color:#fff; }.wa-team-ui__rows { display:grid; gap:10px }.wa-team-ui__rows p { margin:0; padding:14px; border-radius:var(--radius-md); background:var(--color-bg-surface); font-weight:600 }.wa-team-ui__rows i { display:inline-block; width:8px; height:8px; margin-inline-end:10px; border-radius:50%; background:var(--wa) }
.wa-emphasis { margin-top: 24px !important; font-weight: 750; color: var(--color-text-primary) !important; }
.wa-flow-section { position: relative; }.wa-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 52px; }.wa-flow__step { position:relative; min-height:210px; padding:22px; border:1px solid rgba(255,255,255,.13); border-radius:var(--radius-lg); background:rgba(255,255,255,.06); }.wa-flow__step::after { content:"→"; position:absolute; inset-inline-start:calc(100% - 5px); inset-block-start:50%; z-index:2; color:var(--wa); font-size:24px }.wa-flow__step:last-child::after { display:none }.wa-flow__step > span { color:var(--wa); font:700 12px var(--font-display) }.wa-flow__step svg { display:block; width:34px; height:34px; margin:42px 0 18px; color:#fff }.wa-flow__step b { display:block; color:#fff; font-size:16px; line-height:1.45 }.wa-flow__result { margin:36px 0 0; color:var(--wa); font:700 clamp(22px,2.5vw,34px) var(--font-display) }
.wa-ai-ui { padding:28px; color:var(--color-text-primary); background:var(--color-ink); }.wa-ai-ui__head { display:flex; align-items:center; gap:12px; color:#fff; margin-bottom:28px }.wa-ai-ui__head span { width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:var(--wa);color:#092d16;font-weight:900 }.wa-ai-ui__head i { margin-inline-start:auto;color:#91f2b5;font-size:11px;font-style:normal }.wa-ai-ui .wa-bubble { margin-block:12px }.wa-ai-ui__contact { display:flex;gap:12px;align-items:center;margin-top:24px;padding:15px;border:1px solid rgba(255,255,255,.13);border-radius:var(--radius-md);color:#fff }.wa-ai-ui__contact svg { width:24px;color:var(--wa) }.wa-ai-ui__contact small,.wa-ai-ui__contact b{display:block}.wa-ai-ui__contact small{color:rgba(255,255,255,.5)}.wa-daynight { display:flex;flex-wrap:wrap;gap:10px;margin-top:24px }.wa-daynight span { padding:10px 14px;border:1px solid var(--color-border-default);border-radius:var(--radius-pill);font-weight:700 }
.wa-feature-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:52px }.wa-feature { min-height:220px;padding:24px;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);background:var(--color-bg-page);transition:transform var(--motion-duration-standard),box-shadow var(--motion-duration-standard) }.wa-feature:hover { transform:translateY(-5px);box-shadow:var(--shadow-md) }.wa-feature > span { width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:var(--color-brand-tint);color:var(--color-text-brand) }.wa-feature svg{width:22px}.wa-feature h3{margin:30px 0 8px;font:700 18px var(--font-display)}.wa-feature p{margin:0;color:var(--color-text-secondary);line-height:1.55}.wa-feature:first-child{grid-column:span 2;background:var(--color-ink);color:#fff}.wa-feature:first-child p{color:rgba(255,255,255,.65)}
.wa-statuses { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:52px }.wa-status { display:flex;align-items:center;gap:14px;padding:20px;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);background:var(--color-bg-surface);font-weight:700 }.wa-status span{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#d9ffe7;color:#08702d}.wa-status svg{width:17px}.wa-center-note{text-align:center;margin:36px 0 0;font:700 clamp(20px,2vw,28px) var(--font-display)}
.wa-delivery__rail{display:flex;flex-wrap:wrap;gap:10px;margin-top:50px}.wa-delivery__rail span{padding:13px 17px;border:1px solid rgba(255,255,255,.17);border-radius:var(--radius-pill);color:#fff;background:rgba(255,255,255,.05);font-weight:650}.wa-delivery__rail span::before{content:"";display:inline-block;width:7px;height:7px;margin-inline-end:9px;border-radius:50%;background:var(--wa)}.wa-delivery__result{margin:42px 0 0;color:var(--wa);font:700 clamp(22px,2.5vw,34px) var(--font-display)}
.wa-final { background:var(--color-bg-surface) }.wa-final__card { display:grid;grid-template-columns:1.25fr .75fr;gap:60px;padding:clamp(32px,6vw,76px);border-radius:clamp(28px,4vw,52px);background:var(--color-ink);color:#fff;box-shadow:var(--shadow-xl) }.wa-final h2{max-width:760px;margin:14px 0 22px;font:750 clamp(40px,5vw,72px)/1.02 var(--font-display);letter-spacing:-.045em;white-space:pre-line}.wa-final p{max-width:650px;color:rgba(255,255,255,.66);font-size:18px;line-height:1.6;white-space:pre-line}.wa-final strong{display:block;margin-top:22px;color:var(--wa);font-size:18px}.wa-final__signature{align-self:end;padding:26px;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-xl);background:rgba(255,255,255,.06)}.wa-final__signature b{display:block;color:var(--wa);font:800 46px var(--font-display)}.wa-final__signature span{display:block;margin:8px 0 18px;font-weight:700}.wa-final__signature p{margin:0;font-size:14px}.wa-final .btn--wa span{font-weight:900}
@media (max-width: 980px){.wa-hero__grid,.wa-split,.wa-final__card{grid-template-columns:minmax(0,1fr)}.wa-hero{min-height:auto}.wa-console{max-width:680px;transform:none}.wa-split--reverse>:first-child{order:0}.wa-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.wa-flow__step:nth-child(2)::after{display:none}.wa-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wa-statuses{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 620px){.wa-page .sec{padding-block:68px}.wa-hero{padding-block:64px 76px}.wa-hero h1{font-size:clamp(43px,10vw,48px)}.wa-hero__statement{font-size:22px}.wa-console__body{padding:16px}.wa-console__rail{gap:6px}.wa-heading h2{font-size:39px}.wa-channel-map{padding:18px 14px 128px;gap:7px}.wa-channel{padding:12px 5px;font-size:11px}.wa-channel-map__hub{inset-inline:7%;font-size:12px}.wa-channel-map__hub::before{box-shadow:-85px 0 var(--wa),85px 0 var(--wa)}.wa-points,.wa-flow,.wa-feature-grid,.wa-statuses{grid-template-columns:minmax(0,1fr)}.wa-flow__step{min-height:165px}.wa-flow__step::after{display:none}.wa-flow__step svg{margin:28px 0 15px}.wa-feature:first-child{grid-column:auto}.wa-feature{min-height:auto}.wa-final__card{gap:40px;padding:28px 22px}.wa-actions .btn{width:100%;justify-content:center}.wa-final h2{font-size:40px}.wa-bubble{max-width:92%}}
@media (prefers-reduced-motion: reduce){.wa-feature{transition:none}.wa-feature:hover{transform:none}}