/* ==========================================================================
   Simplex Solutions — home page layer (loaded on / only, on top of sx.css)
   ========================================================================== */

.btn-lg{ min-height:52px; padding:14px 26px; font-size:15px; }
.btn-block{ width:100%; }
.btn svg{ width:18px; height:18px; }

/* ---------- 1. Hero with background video ---------- */
.hx{ position:relative; isolation:isolate; overflow:hidden; color:#fff; background:#06101F; min-height:min(88vh,760px); display:flex; align-items:center; }
@supports (min-height:100svh){ .hx{ min-height:min(88svh,760px); } }
.hx-media,.hx-overlay{ position:absolute; inset:0; z-index:-2; }
.hx-poster,.hx-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hx-video{ opacity:0; transition:opacity 1.2s ease; }
.hx-video.is-playing{ opacity:1; }
.hx-overlay{ z-index:-1;
  background:
    linear-gradient(90deg, rgba(6,16,31,.94) 0%, rgba(6,16,31,.80) 42%, rgba(6,16,31,.35) 100%),
    linear-gradient(0deg, rgba(6,16,31,.85) 0%, rgba(6,16,31,0) 40%);
}
@media (max-width:767px){ .hx-overlay{ background:linear-gradient(180deg, rgba(6,16,31,.55) 0%, rgba(6,16,31,.72) 45%, rgba(6,16,31,.92) 100%); } .hx-video,.hx-poster{ object-position:70% center; } }
.hx-inner{ padding-block:72px 64px; }
@media (min-width:1024px){ .hx-inner{ padding-block:110px 96px; } }
.hx-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#C7D7EE; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); padding:7px 14px; border-radius:999px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.hx-dot{ width:8px; height:8px; border-radius:50%; background:#34D399; box-shadow:0 0 0 0 rgba(52,211,153,.6); animation:livePulse 2s infinite; }
@keyframes livePulse{ 70%{ box-shadow:0 0 0 8px rgba(52,211,153,0); } 100%{ box-shadow:0 0 0 0 rgba(52,211,153,0); } }
.hx h1{ font-size:clamp(34px,6.4vw,68px); line-height:1.04; letter-spacing:-.03em; max-width:15ch; margin-top:22px; }
@media (min-width:1280px){ .hx h1{ max-width:16ch; } }
.hx-accent{ background:linear-gradient(90deg,#FDBA59,var(--brand-orange) 55%,#FF7A45); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hx-lead{ font-size:clamp(16px,1.6vw,19px); line-height:1.65; color:rgba(255,255,255,.86); max-width:620px; margin-top:22px; }
.hx-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
@media (max-width:479px){ .hx-ctas .btn{ width:100%; } }
.hx-trust{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:30px; font-size:14px; color:rgba(255,255,255,.75); }
.hx-trust li{ display:flex; align-items:center; gap:8px; }
.hx-trust li::before{ content:""; width:16px; height:16px; flex-shrink:0; border-radius:50%; background:rgba(52,211,153,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%2334D399' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.hx-toggle{ position:absolute; right:16px; top:16px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(6,16,31,.5); color:#fff; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px); }
.hx-toggle .i-pause{ width:10px; height:12px; border-left:3px solid currentColor; border-right:3px solid currentColor; }
.hx-toggle[aria-pressed="true"] .i-pause{ width:0; height:0; border:0; border-left:11px solid currentColor; border-top:7px solid transparent; border-bottom:7px solid transparent; margin-left:3px; }
.page-home .site-header{ border-bottom-color:transparent; }

/* ---------- 2. Proof counters ---------- */
.proof{ position:relative; z-index:2; margin-top:-44px; }
.proof-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); overflow:hidden; }
@media (min-width:768px){ .proof-grid{ grid-template-columns:repeat(min(var(--n),5),minmax(0,1fr)); } }
.proof-item{ padding:22px 18px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); display:flex; flex-direction:column-reverse; gap:4px; }
@media (min-width:768px){ .proof-item{ padding:28px 26px; border-bottom:0; } .proof-item:last-child{ border-right:0; } }
@media (max-width:767px){ .proof-item:last-child:nth-child(odd){ grid-column:1 / -1; } .proof-item:nth-child(even){ border-right:0; } }
.proof-item dt{ font-size:13.5px; color:var(--muted); font-weight:500; }
.proof-item dd{ font-family:var(--font-head); font-weight:700; font-size:clamp(28px,2.9vw,40px); line-height:1.1; white-space:nowrap; color:var(--brand); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.count-unit{ margin-left:2px; }
.count-suffix{ color:var(--brand-orange); margin-left:2px; }

/* ---------- 3. Solutions explorer ---------- */
.sol{ padding-top:72px; }
.sol-tabs{ display:flex; gap:8px; overflow-x:auto; padding:6px; margin:0 auto 26px; background:#fff; border:1px solid var(--border); border-radius:999px; width:max-content; max-width:100%; scrollbar-width:none; }
.sol-tabs::-webkit-scrollbar{ display:none; }
.sol-tab{ flex-shrink:0; display:inline-flex; align-items:center; gap:10px; min-height:46px; padding:10px 20px; border:0; border-radius:999px; background:none; font-weight:600; font-size:14.5px; color:var(--ink-2); transition:background .2s, color .2s; }
.sol-tab:hover{ color:var(--brand-blue); }
.sol-tab[aria-selected="true"]{ background:var(--brand); color:#fff; box-shadow:0 8px 18px -8px rgba(11,42,69,.6); }
.sol-tab-n{ font-family:var(--font-head); font-size:12px; opacity:.6; }
.sol-panel{ display:grid; grid-template-columns:1fr; gap:28px; background:#fff; border:1px solid var(--border); border-radius:var(--r-xl); padding:26px 22px; box-shadow:var(--shadow); animation:panelIn .45s var(--ease); }
@media (min-width:960px){ .sol-panel{ grid-template-columns:1.05fr 1fr; gap:48px; padding:48px; align-items:center; } }
@keyframes panelIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.sol-copy h3{ font-size:clamp(24px,3vw,34px); line-height:1.15; }
.sol-copy > p{ color:var(--muted); font-size:16px; margin-top:14px; }
.ticks{ margin-top:18px; display:grid; gap:10px; }
.ticks li{ position:relative; padding-left:30px; font-size:15px; color:var(--ink-2); }
.ticks li::before{ content:""; position:absolute; left:0; top:2px; width:20px; height:20px; border-radius:50%; background:#E8F1FB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%231B75BB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }
.sol-ctas{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }

.sol-visual{ position:relative; border-radius:var(--r-lg); padding:26px 20px; background:radial-gradient(circle at 80% 10%,rgba(27,117,187,.5),transparent 55%),linear-gradient(150deg,#0B2A45,#06101F); overflow:hidden; isolation:isolate; }
.sol-visual::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.35; background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1px); background-size:18px 18px; }
.flow{ display:grid; gap:14px; counter-reset:f; }
.flow-node{ position:relative; display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); color:#fff; font-weight:600; font-size:15px; backdrop-filter:blur(4px); opacity:0; transform:translateX(-12px); animation:nodeIn .5s var(--ease) forwards; animation-delay:calc(var(--i) * .12s + .1s); }
.flow-node:not(:last-child)::after{ content:""; position:absolute; left:33px; top:100%; width:2px; height:14px; background:linear-gradient(var(--brand-orange),rgba(246,146,30,.2)); }
.flow-node:last-child{ background:rgba(246,146,30,.16); border-color:rgba(246,146,30,.5); }
.flow-n{ width:36px; height:36px; flex-shrink:0; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--brand-orange); color:var(--orange-ink); font-family:var(--font-head); font-size:15px; }
.flow-node::before{ content:""; position:absolute; right:16px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:#34D399; box-shadow:0 0 0 4px rgba(52,211,153,.18); }
@keyframes nodeIn{ to{ opacity:1; transform:none; } }

/* ---------- 4. Calculator ---------- */
.calc{ display:grid; grid-template-columns:1fr; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--border); background:#fff; }
@media (min-width:960px){ .calc{ grid-template-columns:1.1fr 1fr; } }
.calc-intro{ padding:30px 22px; }
@media (min-width:768px){ .calc-intro{ padding:44px; } }
.calc-intro h2{ font-size:clamp(24px,3vw,34px); }
.calc-intro > p{ color:var(--muted); margin-top:10px; }
.calc-form{ margin-top:26px; display:grid; gap:24px; }
.calc-label{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }
.calc-label label{ font-weight:600; font-size:15px; }
.calc-num{ display:inline-flex; align-items:center; gap:4px; border:1px solid #D0D5DD; border-radius:10px; padding:0 10px; background:#fff; }
.calc-num:focus-within{ border-color:var(--brand-blue); box-shadow:0 0 0 4px rgba(27,117,187,.15); }
.calc-num .unit{ color:var(--muted); font-weight:600; font-size:14px; }
.calc-n{ width:96px; min-height:42px; border:0; outline:0; text-align:right; font-weight:700; font-size:16px; font-variant-numeric:tabular-nums; background:none; -moz-appearance:textfield; }
.calc-n::-webkit-inner-spin-button,.calc-n::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.calc-range{ -webkit-appearance:none; appearance:none; width:100%; height:28px; background:transparent; cursor:pointer; --p:50%; }
.calc-range::-webkit-slider-runnable-track{ height:8px; border-radius:999px; background:linear-gradient(90deg,var(--brand-orange) var(--p),#E4E7EC var(--p)); }
.calc-range::-moz-range-track{ height:8px; border-radius:999px; background:#E4E7EC; }
.calc-range::-moz-range-progress{ height:8px; border-radius:999px; background:var(--brand-orange); }
.calc-range::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:26px; margin-top:-9px; border-radius:50%; background:#fff; border:3px solid var(--brand-orange); box-shadow:0 4px 10px rgba(0,0,0,.18); transition:transform .15s; }
.calc-range::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid var(--brand-orange); box-shadow:0 4px 10px rgba(0,0,0,.18); }
.calc-range:active::-webkit-slider-thumb{ transform:scale(1.12); }
.calc-out{ background:radial-gradient(circle at 100% 0%,rgba(246,146,30,.25),transparent 50%),linear-gradient(160deg,#0B2A45,#06101F); color:#fff; padding:30px 22px; display:flex; flex-direction:column; gap:20px; }
@media (min-width:768px){ .calc-out{ padding:44px; } }
.calc-cap{ display:block; font-size:14px; color:#C7D7EE; }
.calc-hero{ display:block; font-family:var(--font-head); font-weight:700; font-size:clamp(38px,5.4vw,58px); line-height:1.05; letter-spacing:-.03em; margin-top:6px; font-variant-numeric:tabular-nums; }
.calc-metrics{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.calc-metrics > div{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:14px; }
.calc-metrics dt{ font-size:12.5px; color:#A9B8CE; }
.calc-metrics dd{ font-family:var(--font-head); font-size:clamp(18px,2vw,22px); font-weight:700; margin-top:4px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.calc-bar{ height:6px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden; }
.calc-bar span{ display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,#FDBA59,var(--brand-orange)); transition:width .4s var(--ease); }
.calc-note{ font-size:12.5px; color:#93A0B5; line-height:1.55; }

/* ---------- 5. Logo marquee ---------- */
.logos{ padding:20px 0 30px; }
.logos-title{ text-align:center; font-family:var(--font); font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:20px; }
.logo-marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.logo-track{ display:flex; width:max-content; }
.logo-set{ display:flex; gap:16px; padding-right:16px; animation:logoScroll 55s linear infinite; }
.logo-marquee:hover .logo-set{ animation-play-state:paused; }
.logo-set li{ width:88px; height:88px; flex-shrink:0; border-radius:18px; overflow:hidden; background:#fff; border:1px solid var(--border); box-shadow:var(--shadow-sm); transition:transform .2s; }
.logo-set li:hover{ transform:translateY(-4px); }
.logo-set img{ width:100%; height:100%; object-fit:cover; }
@keyframes logoScroll{ to{ transform:translateX(-100%); } }

/* ---------- 7. Client stories ---------- */
.stories-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; }
.stories-nav{ display:flex; gap:8px; margin-bottom:28px; }
.round-btn{ width:46px; height:46px; border-radius:50%; border:1px solid var(--border); background:#fff; display:inline-flex; align-items:center; justify-content:center; color:var(--ink); transition:all .2s; }
.round-btn:hover{ background:var(--brand); color:#fff; border-color:var(--brand); }
.round-btn svg{ width:18px; height:18px; }
.stories-track{ display:grid; grid-auto-flow:column; grid-auto-columns:min(88%,420px); gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px; scrollbar-width:thin; }
@media (min-width:1024px){ .stories-track{ grid-auto-columns:calc((100% - 36px)/3); } }
.story{ scroll-snap-align:start; display:flex; flex-direction:column; gap:18px; background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow-sm); }
.story-metric{ align-self:flex-start; font-size:13px; font-weight:700; color:#067647; background:#ECFDF3; padding:5px 12px; border-radius:999px; }
.story blockquote p{ font-size:17px; line-height:1.6; color:var(--ink); }
.story figcaption{ margin-top:auto; display:flex; flex-direction:column; gap:2px; padding-top:16px; border-top:1px solid var(--border); }
.story-logo{ height:32px; width:auto; margin-bottom:10px; filter:grayscale(1); opacity:.8; }
.story-name{ font-weight:700; }
.story-role{ font-size:14px; color:var(--muted); }
.story-link{ margin-top:10px; display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:14px; color:var(--brand-blue); }
.story-link svg{ width:16px; height:16px; }

/* ---------- 8. Final CTA ---------- */
.cta-final{ display:flex; flex-direction:column; gap:24px; align-items:flex-start; padding:36px 24px; border-radius:var(--r-xl); color:#fff; background:radial-gradient(circle at 90% 0%,rgba(246,146,30,.35),transparent 50%),linear-gradient(130deg,var(--brand-blue),var(--brand)); }
@media (min-width:900px){ .cta-final{ flex-direction:row; align-items:center; justify-content:space-between; padding:52px 56px; } }
.cta-final h2{ font-size:clamp(24px,3vw,34px); }
.cta-final p{ color:rgba(255,255,255,.86); margin-top:8px; max-width:560px; }
.cta-final-actions{ display:flex; flex-wrap:wrap; gap:12px; flex-shrink:0; }
.cta-final .btn svg{ width:20px; height:20px; fill:currentColor; }

/* ---------- 9. Onboarding modal ---------- */
.onb{ width:min(640px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); margin:auto; padding:0; border:0; border-radius:22px; background:#fff; color:var(--ink); box-shadow:0 40px 80px -20px rgba(6,16,31,.5); overflow:auto; }
.onb::backdrop{ background:rgba(6,16,31,.6); backdrop-filter:blur(4px); }
.onb[open]{ animation:dlgIn .3s var(--ease); }
@keyframes dlgIn{ from{ opacity:0; transform:translateY(16px) scale(.98); } to{ opacity:1; transform:none; } }
.onb-form{ padding:24px 22px 22px; }
@media (min-width:600px){ .onb-form{ padding:30px 32px 28px; } }
.onb-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.onb-head h2{ font-size:24px; }
.onb-sub{ font-size:14px; color:var(--muted); margin-top:2px; }
.onb-close{ width:44px; height:44px; border-radius:50%; border:0; background:var(--bg); font-size:26px; line-height:1; color:var(--ink-2); }
.onb-close:hover{ background:#E4E7EC; }
.onb-progress{ height:6px; border-radius:999px; background:#EEF1F4; margin:16px 0 22px; overflow:hidden; }
.onb-progress span{ display:block; height:100%; width:33.3%; background:linear-gradient(90deg,var(--brand-blue),var(--brand-orange)); border-radius:inherit; transition:width .35s var(--ease); }
.onb-step{ border:0; }
.onb-step legend{ font-family:var(--font-head); font-size:18px; font-weight:700; margin-bottom:14px; }
.choice-grid{ display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:520px){ .choice-grid{ grid-template-columns:1fr 1fr; } }
.choice{ position:relative; display:block; cursor:pointer; }
.choice input{ position:absolute; opacity:0; }
.choice-body{ display:flex; flex-direction:column; gap:4px; min-height:84px; padding:16px; border:2px solid var(--border); border-radius:14px; transition:border-color .15s, background .15s; }
.choice-body small{ color:var(--muted); font-size:13.5px; }
.choice:hover .choice-body{ border-color:#B9C7D8; }
.choice input:checked + .choice-body{ border-color:var(--brand-blue); background:#F2F7FD; box-shadow:0 0 0 4px rgba(27,117,187,.12); }
.choice input:focus-visible + .choice-body{ outline:3px solid var(--brand-blue); outline-offset:2px; }
.onb-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:520px){ .onb-grid{ grid-template-columns:1fr 1fr; } }
.onb-step label{ display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:600; color:var(--ink-2); }
.onb-step[data-step="3"]{ display:grid; gap:14px; }
.onb-step[data-step="3"][hidden],.onb-step[hidden]{ display:none; }
.onb .field{ font-weight:400; }
.onb .field[aria-invalid="true"]{ border-color:#D92D20; box-shadow:0 0 0 4px rgba(217,45,32,.12); }
.onb textarea.field{ min-height:110px; resize:vertical; }
.consent{ flex-direction:row!important; align-items:flex-start; gap:10px!important; font-weight:400!important; font-size:13.5px!important; color:var(--muted)!important; }
.consent input{ width:20px; height:20px; margin-top:2px; flex-shrink:0; accent-color:var(--brand-blue); }
.consent a{ color:var(--brand-blue); text-decoration:underline; }
.onb-foot{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.onb-foot .btn[hidden]{ display:none; }
.onb-done{ text-align:center; padding:20px 0 6px; }
.onb-done[hidden]{ display:none; }
.onb-check{ width:64px; height:64px; margin:0 auto 14px; border-radius:50%; background:#ECFDF3; color:#067647; font-size:32px; display:flex; align-items:center; justify-content:center; }
.onb-done h3{ font-size:22px; }
.onb-done p{ color:var(--muted); margin:8px 0 20px; }
body.dlg-open{ overflow:hidden; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  .hx-video,.hx-toggle{ display:none!important; }
  .logo-set{ animation:none; } .logo-set[aria-hidden="true"]{ display:none; }
  .logo-marquee{ overflow-x:auto; }
  .flow-node{ opacity:1; transform:none; animation:none; }
}

/* ---------- Buy-now strip (hero) + WhatsApp channel card ---------- */
.hx-buy{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-top:28px; padding:10px 16px 10px 10px; border-radius:16px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); font-size:14.5px; color:rgba(255,255,255,.88); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:background .2s, border-color .2s; max-width:100%; }
.hx-buy:hover{ background:rgba(255,255,255,.14); border-color:rgba(246,146,30,.6); }
.hx-buy-tag{ background:var(--brand-orange); color:var(--orange-ink); font-weight:700; font-size:12px; padding:4px 10px; border-radius:999px; }
.hx-buy b{ display:inline-flex; align-items:center; gap:6px; color:#FDBA59; overflow-wrap:anywhere; }
.hx-buy svg{ width:16px; height:16px; }
.channel-card{ display:flex; flex-direction:column; gap:18px; align-items:flex-start; margin-top:20px; padding:26px 24px; border-radius:var(--r-xl); background:#fff; border:1px solid var(--border); box-shadow:var(--shadow-sm); }
@media (min-width:900px){ .channel-card{ flex-direction:row; align-items:center; padding:28px 40px; } .channel-card > div{ flex:1; } }
.channel-icon{ width:56px; height:56px; flex-shrink:0; border-radius:16px; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; }
.channel-icon svg{ width:30px; height:30px; fill:currentColor; }
.channel-card h2{ font-size:clamp(19px,2.2vw,23px); }
.channel-card p{ color:var(--muted); margin-top:4px; }
.btn-wa{ background:#25D366; color:#06301A; }
.btn-wa:hover{ box-shadow:0 12px 24px -10px rgba(37,211,102,.7); }