.wa-hero { position: relative; overflow: hidden; color: white; background: radial-gradient(circle at 82% 15%, rgba(37,211,102,.22), transparent 25%), linear-gradient(130deg,#002d42 0%,#005a78 62%,#007fa6 100%); }
.wa-hero::after { content:""; position:absolute; inset:auto 0 0; height:62px; background:url('/assets/african-geometric-pattern.svg') center 48% / 330px 124px repeat-x; opacity:.06; }
.wa-hero-grid { position:relative; z-index:1; min-height:720px; display:grid; grid-template-columns:1.02fr .98fr; gap:70px; align-items:center; padding-block:95px 120px; }
.wa-hero-copy h1 { max-width:690px; margin:0 0 22px; font-size:clamp(3.2rem,5.8vw,5.8rem); line-height:.94; letter-spacing:-.06em; }
.wa-hero-line { margin:0 0 18px; color:#7ce7a2; font-size:1.25rem; font-weight:800; }
.wa-hero-copy > p:not(.wa-hero-line) { max-width:710px; margin:0 0 30px; color:rgba(255,255,255,.8); font-size:1.05rem; }
.wa-btn-ghost { color:white; border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.06); }
.wa-console { margin:0; padding:14px; color:#1b343e; border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.1); box-shadow:0 30px 70px rgba(0,20,30,.34); backdrop-filter:blur(10px); }
.wa-console figcaption { padding:0 0 10px; color:rgba(255,255,255,.7); font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.wa-console-bar { min-height:42px; display:flex; align-items:center; gap:6px; padding:0 14px; background:#eaf0f2; border-bottom:1px solid #ccdadd; }
.wa-console-bar > span { width:8px; height:8px; border-radius:50%; background:#b8c7cc; }
.wa-console-bar > span:first-child { background:#eb2227; }
.wa-console-bar strong { margin-left:auto; font-size:.7rem; }
.wa-console-body { min-height:430px; display:grid; grid-template-columns:48px 1fr; background:#f7f9fa; }
.wa-console-nav { padding:16px 10px; display:flex; flex-direction:column; align-items:center; gap:17px; background:#043b51; }
.wa-console-nav b { color:white; font-size:.72rem; }
.wa-console-nav i { width:17px; height:17px; border:1px solid rgba(255,255,255,.35); border-radius:4px; }
.wa-console-main { min-width:0; padding:19px; }
.wa-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.wa-metrics div,.wa-campaign,.wa-conversation,.wa-delivery { padding:13px; border:1px solid #dce5e9; background:white; }
.wa-metrics span,.wa-campaign > span,.wa-conversation > span,.wa-delivery > span { display:block; color:#6c8088; font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.wa-metrics strong { display:block; margin-top:5px; font-size:.7rem; }
.wa-console-panels { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:9px; }
.wa-campaign > strong { display:block; margin:10px 0; font-size:.88rem; }
.wa-campaign ol { margin:0; padding:0; list-style:none; }
.wa-campaign li { position:relative; padding:7px 0 7px 18px; color:#78909a; border-top:1px solid #edf1f2; font-size:.67rem; }
.wa-campaign li::before { content:""; position:absolute; left:0; top:11px; width:7px; height:7px; border-radius:50%; background:#cbd6da; }
.wa-campaign li.done::before { background:#25d366; }
.wa-campaign li.active { color:#15323d; font-weight:800; }
.wa-campaign li.active::before { background:#00aeef; box-shadow:0 0 0 4px rgba(0,174,239,.12); }
.wa-message { max-width:90%; margin-top:10px; padding:9px; font-size:.65rem; line-height:1.35; }
.wa-message.in { background:#edf2f4; }
.wa-message.out { margin-left:auto; background:#dff8e8; }
.wa-conversation small { display:block; margin-top:14px; color:#6c8088; font-size:.58rem; }
.wa-delivery { margin-top:9px; }
.wa-chart { height:58px; display:flex; align-items:end; gap:6px; margin-top:8px; border-bottom:1px solid #d9e3e6; }
.wa-chart i { flex:1; height:var(--h,45%); background:linear-gradient(#00aeef,#007eae); }
.wa-chart i:nth-child(2){--h:60%}.wa-chart i:nth-child(3){--h:42%}.wa-chart i:nth-child(4){--h:78%}.wa-chart i:nth-child(5){--h:67%}.wa-chart i:nth-child(6){--h:88%}.wa-chart i:nth-child(7){--h:72%}
.wa-problem-grid,.wa-industry-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.wa-problem-grid article,.wa-industry-grid article { min-height:210px; padding:28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.wa-problem-grid article:nth-child(2),.wa-problem-grid article:nth-child(6) { background:#f4f8fa; }
.wa-problem-grid h3,.wa-industry-grid h3 { margin:28px 0 10px; font-size:1.2rem; }
.wa-problem-grid p,.wa-industry-grid p { margin:0; color:var(--muted); }
.wa-feature-grid { display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.wa-feature-grid article { min-height:260px; padding:24px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:white; }
.wa-feature-grid span,.wa-delivery-steps span { color:var(--blue); font-size:.7rem; font-weight:900; letter-spacing:.1em; }
.wa-feature-grid h3 { margin:60px 0 10px; font-size:1.12rem; line-height:1.25; }
.wa-feature-grid p { margin:0; color:var(--muted); font-size:.87rem; }
.wa-workflow-tabs { display:flex; gap:0; border-bottom:1px solid var(--line); }
.wa-workflow-tabs button { flex:1; min-height:62px; padding:15px; color:var(--muted); border:0; border-top:3px solid transparent; background:#f5f8f9; font-weight:800; cursor:pointer; }
.wa-workflow-tabs button[aria-selected="true"] { color:var(--blue-ink); border-top-color:var(--blue); background:white; }
.wa-workflow-panel { padding:38px; border:1px solid var(--line); border-top:0; background:white; }
.wa-workflow-panel ol { display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin:0; padding:0; list-style:none; counter-reset:steps; }
.wa-workflow-panel li { position:relative; min-height:190px; padding:50px 25px 20px; border-right:1px solid var(--line); counter-increment:steps; }
.wa-workflow-panel li:last-child { border:0; }
.wa-workflow-panel li::before { content:counter(steps,decimal-leading-zero); position:absolute; top:0; color:var(--blue); font-weight:900; }
.wa-workflow-panel strong,.wa-workflow-panel span { display:block; }
.wa-workflow-panel span { margin-top:9px; color:var(--muted); font-size:.86rem; }
.wa-workflow-panel > p { margin:26px 0 0; padding:20px; color:var(--blue-ink); background:#e9f8fd; font-weight:700; }
.wa-team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.wa-team-grid article { min-height:340px; padding:34px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.07); }
.wa-team-grid h3 { margin:80px 0 18px; font-size:1.55rem; }
.wa-team-grid ul { margin:0; padding-left:18px; color:rgba(255,255,255,.78); }
.wa-split { display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:start; }
.wa-split h2,.wa-pricing h2 { margin:0 0 20px; font-size:clamp(2.4rem,4.6vw,4.6rem); line-height:1; letter-spacing:-.045em; }
.wa-split p { color:var(--muted); }
.wa-governance ul { display:grid; grid-template-columns:1fr 1fr; gap:0; margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.wa-governance li { padding:18px 12px 18px 28px; border-bottom:1px solid var(--line); font-weight:750; }
.wa-governance li::before { content:""; display:inline-block; width:7px; height:7px; margin:0 12px 2px -19px; background:var(--blue); }
.wa-api-examples { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.wa-api-examples span { min-height:92px; display:flex; align-items:end; padding:20px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:white; font-weight:800; }
.wa-delivery-steps { display:grid; grid-template-columns:repeat(3,1fr); margin:0; padding:0; list-style:none; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.wa-delivery-steps li { min-height:230px; display:flex; flex-direction:column; padding:28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:white; }
.wa-delivery-steps strong { margin-top:auto; font-size:1.25rem; }
.wa-delivery-steps p { margin:8px 0 0; color:var(--muted); }
.wa-pricing { color:white; background:#032f44; }
.wa-pricing-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:start; }
.wa-pricing-grid > div:first-child p { color:rgba(255,255,255,.75); }
.wa-pricing-grid .btn { margin-top:20px; }
.wa-price-lines { border-top:1px solid rgba(255,255,255,.22); }
.wa-price-lines article { padding:22px 0; border-bottom:1px solid rgba(255,255,255,.22); }
.wa-price-lines h3 { margin:0 0 5px; }
.wa-price-lines p { margin:0; color:rgba(255,255,255,.68); }
.wa-final-actions { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.wa-final-link { color:white; font-weight:800; }
@media (max-width:980px){.wa-hero-grid{grid-template-columns:1fr;gap:35px}.wa-console{max-width:680px}.wa-feature-grid{grid-template-columns:repeat(2,1fr)}.wa-feature-grid article:last-child{grid-column:1/-1}.wa-workflow-panel ol{grid-template-columns:1fr 1fr}.wa-workflow-panel li{border-bottom:1px solid var(--line)}.wa-team-grid{grid-template-columns:1fr}.wa-team-grid article{min-height:260px}.wa-split,.wa-pricing-grid{grid-template-columns:1fr;gap:45px}}
@media (max-width:720px){.wa-hero-grid{min-height:0;padding-block:70px 90px}.wa-hero-copy h1{font-size:clamp(2.75rem,14vw,4.3rem)}.wa-hero .hero-actions{display:grid}.wa-console{padding:8px}.wa-console-body{grid-template-columns:36px 1fr;min-height:380px}.wa-console-nav{padding-inline:7px}.wa-console-main{padding:10px}.wa-metrics{grid-template-columns:1fr}.wa-metrics div:nth-child(n+2){display:none}.wa-console-panels{grid-template-columns:1fr}.wa-campaign{display:none}.wa-problem-grid,.wa-industry-grid,.wa-feature-grid,.wa-delivery-steps{grid-template-columns:1fr}.wa-feature-grid article:last-child{grid-column:auto}.wa-workflow-tabs{display:grid}.wa-workflow-tabs button{text-align:left;border-top:0;border-left:3px solid transparent}.wa-workflow-tabs button[aria-selected="true"]{border-left-color:var(--blue)}.wa-workflow-panel{padding:20px}.wa-workflow-panel ol{grid-template-columns:1fr}.wa-workflow-panel li{min-height:0;padding:44px 0 22px;border-right:0}.wa-governance ul,.wa-api-examples{grid-template-columns:1fr}.wa-split h2,.wa-pricing h2{font-size:clamp(2.25rem,11vw,3.5rem)}}
@media (prefers-reduced-motion:reduce){.wa-btn-ghost,.wa-workflow-tabs button{transition:none}}
