.wcx{ --ink:#0A0A0A; --ivory:#FAF7F2; --blue:#1D4ED8; --blue-soft:#60A5FA; --dark:#0F1118; --blue-wash:#EEF3FE; --ink-60:rgba(10,10,10,.62); --ink-55:rgba(10,10,10,.58); --blue-line:rgba(29,78,216,.14); --hair:rgba(10,10,10,.08); --ivory-70:rgba(250,247,242,.72); --white-14:rgba(255,255,255,.14); --grad:linear-gradient(135deg,#1D4ED8 0%,#3B82F6 55%,#60A5FA 100%); --gutter:clamp(20px,5vw,64px); --r-sm:12px; --r-md:20px; --r-lg:28px; --r-xl:40px; --r-pill:999px; --sh-1:0 2px 8px rgba(15,17,24,.06); --sh-2:0 18px 40px -12px rgba(15,17,24,.18); --sh-3:0 40px 90px -24px rgba(29,78,216,.28); --sh-dark:0 30px 90px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(96,165,250,.10); font-family:var(--font-inter,'Inter',system-ui,-apple-system,'Segoe UI',sans-serif); color:var(--ink); background:var(--ivory); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .wcx *{box-sizing:border-box;} .wcx img{max-width:100%;} .wcx__wrap{max-width:1200px; margin:0 auto; padding-inline:var(--gutter);} .wcx__wrap--wide{max-width:1440px;} .wcx-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:.8125rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); } .wcx-eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--blue);} .wcx-eyebrow--pill{ background:#fff; border:1px solid var(--blue-line); padding:8px 16px; border-radius:var(--r-pill); box-shadow:var(--sh-1); } .wcx-eyebrow--onDark{color:var(--blue-soft);} .wcx-eyebrow--onDark .dot{background:var(--blue-soft); box-shadow:0 0 0 4px rgba(96,165,250,.20);} .wcx-lead{font-size:clamp(0.875rem,0.7vw,1rem); line-height:1.45; color:var(--ink-60);} .wcx-lead b{color:var(--ink); font-weight:600;} .wcx-lead a{color:inherit; text-decoration:underline; text-decoration-color:rgba(10,10,10,.35); text-underline-offset:2px;} .wcx-lead a:hover{color:var(--blue); text-decoration-color:var(--blue);} .wcx-tag{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:.7rem; font-weight:700; letter-spacing:.02em; line-height:1.3; white-space:nowrap; vertical-align:middle;} .wcx-tag::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.9;} .wcx-tag--inc{background:rgba(5,150,105,.12); color:#047857;} .wcx-tag--growth{background:rgba(29,78,216,.1); color:var(--blue);} .wcx-tag--prem{background:rgba(124,58,237,.13); color:#6D28D9;} .wcx-tag--addon{background:rgba(180,83,9,.12); color:#B45309;} .wcx-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-size:1.0625rem; font-weight:600; letter-spacing:-.01em; text-decoration:none; padding:16px 28px; border-radius:var(--r-pill); cursor:pointer; border:1px solid transparent; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; } .wcx-btn svg{width:18px; height:18px;} .wcx-btn--primary{background:var(--blue); color:#fff; box-shadow:0 12px 26px -10px rgba(29,78,216,.7);} .wcx-btn--primary:hover{transform:translateY(-2px); box-shadow:0 18px 34px -10px rgba(29,78,216,.85);} .wcx-btn--grad{background:var(--grad); color:#fff; box-shadow:0 14px 40px -12px rgba(29,78,216,.75);} .wcx-btn--grad:hover{transform:translateY(-2px); box-shadow:0 20px 54px -14px rgba(29,78,216,.9);} .wcx-btn--ghost{background:#fff; color:var(--ink); border-color:var(--blue-line);} .wcx-btn--ghost:hover{transform:translateY(-2px); border-color:var(--blue);} .wcx-btn--ghostDark{background:rgba(255,255,255,.05); color:#fff; border-color:rgba(255,255,255,.24);} .wcx-btn--ghostDark:hover{transform:translateY(-2px); background:rgba(255,255,255,.12);} .wcx-hero{ position:relative; overflow:hidden; isolation:isolate; background: radial-gradient(58% 52% at 84% 10%, rgba(96,165,250,.18), transparent 70%), radial-gradient(40% 40% at 6% 88%, rgba(29,78,216,.08), transparent 70%), var(--ivory); padding:clamp(84px,10vw,140px) 0 clamp(56px,7vw,88px); } .wcx-hero__aurora{ position:absolute; z-index:0; top:-12%; right:-8%; width:min(720px,66vw); aspect-ratio:1; pointer-events:none; background:radial-gradient(circle at 50% 50%,rgba(29,78,216,.28),rgba(96,165,250,.10) 46%,transparent 70%); filter:blur(14px); } .wcx-hero__inner{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(32px,5vw,72px); align-items:start; } .wcx-hero h1{ margin:22px 0 0; font-weight:800; letter-spacing:-.035em; line-height:1.02; font-size:clamp(2.5rem,5.4vw,4.75rem); text-wrap:balance; } .wcx-hero h1 .grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; position:relative; transform-origin:0% 70%; animation:wcx-h1reveal 1.15s cubic-bezier(.22,1,.36,1) both; } @keyframes wcx-h1reveal{ 0%{transform:translateY(7px)} 45%{transform:translateY(0); animation-timing-function:ease-in-out} 70%{transform:scale(1.022)} 100%{transform:none} } .wcx-hero h1 .grad-u{ position:relative; display:inline-block; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; } .wcx-hero h1 .grad-u::after{ content:""; position:absolute; left:.03em; right:.08em; bottom:.02em; height:.055em; border-radius:999px; background:var(--grad); transform:scaleX(0); transform-origin:0 50%; animation:wcx-h1line .55s cubic-bezier(.22,1,.36,1) 1.8s forwards; } @keyframes wcx-h1line{to{transform:scaleX(1)}} .wcx-hero__lead{margin:38px 0 0; max-width:36ch;} .wcx-hero__cta{display:flex; flex-wrap:wrap; gap:16px; margin-top:36px;} .wcx-hero__trust{ display:flex; flex-wrap:wrap; align-items:stretch; gap:clamp(20px,3vw,40px); margin-top:34px; padding-top:26px; border-top:1px solid var(--hair); } .wcx-hero__trust > div{min-width:96px;} .wcx-hero__num{ font-size:clamp(2rem,3.4vw,2.75rem); font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--blue); font-variant-numeric:tabular-nums; } .wcx-hero__lbl{margin-top:7px; font-size:.8125rem; line-height:1.35; color:var(--ink-55);} .wcx-hero__partner{ margin-top:20px; max-width:48ch; font-size:.9375rem; line-height:1.5; color:var(--ink-60); } .wcx-hero__partner b{color:var(--ink); font-weight:600;} .wcx-hero__partner .g{display:inline-block; width:6px; height:6px; margin-right:9px; border-radius:50%; background:var(--blue); vertical-align:middle;} .wcx-hero__tour{margin:18px 0 0; font-size:.875rem; color:var(--ink-60);} .wcx-hero__tour a{display:inline-flex; align-items:center; gap:9px; color:var(--ink); font-weight:600; text-decoration:none;} .wcx-hero__tour a:hover{color:var(--blue);} .wcx-hero__tour .p{width:26px; height:26px; border-radius:50%; background:var(--blue); flex:none; display:inline-grid; place-items:center; box-shadow:0 6px 14px -6px rgba(29,78,216,.6);} .wcx-hero__tour .p::after{content:""; margin-left:2px; border-style:solid; border-width:5px 0 5px 8px; border-color:transparent transparent transparent #fff;} .wcx-hero__tour .s{color:var(--ink-55); font-weight:400;} .wcx-hero__trustline{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr)); column-gap:clamp(22px,3vw,44px); row-gap:18px; margin:28px 0 0; padding-top:22px; border-top:1px solid var(--hair); } .wcx-hero__trustline .stat--partner .num{font-size:1.3rem; font-variant-numeric:normal;} .wcx-hero__trustline .stat{min-width:0;} .wcx-hero__trustline .num{ display:flex; align-items:baseline; gap:5px; font-size:1.5rem; font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; } .wcx-hero__trustline .lbl{margin-top:6px; font-size:.8125rem; line-height:1.35; color:var(--ink-55);} .wcx-hero__trustline .star{color:var(--blue); font-size:.86em; line-height:1;} @media (max-width:560px){ .wcx-hero__trustline{column-gap:20px;} .wcx-hero__trustline .num{font-size:1.3rem;} } .wcx-cluster{position:relative; min-height:600px;} .wcx-frame{ position:absolute; border-radius:var(--r-lg); overflow:hidden; background:#fff; box-shadow:var(--sh-3); border:1px solid rgba(255,255,255,.9); } .wcx-frame img{display:block; width:100%; height:100%; object-fit:cover; object-position:top center;} .wcx-frame__bar{ position:absolute; top:0; left:0; right:0; height:38px; background:#fff; z-index:2; display:flex; align-items:center; gap:7px; padding:0 14px; border-bottom:1px solid rgba(10,10,10,.06); } .wcx-frame__bar i{width:9px; height:9px; border-radius:50%; background:#E4E1DB; flex:none;} .wcx-frame__url{ margin-left:8px; flex:1; height:24px; border-radius:7px; background:#F4F1EC; display:flex; align-items:center; gap:7px; padding:0 12px; min-width:0; font-size:12px; color:var(--ink-55); } .wcx-frame__url img{height:13px; width:auto; flex:none; object-fit:contain;} .wcx-frame__url span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .wcx-anchor{top:22px; left:0; width:80%; aspect-ratio:16/11; padding-top:38px; transform:rotate(-1.2deg);} .wcx-phone{ bottom:2px; right:0; width:38%; aspect-ratio:9/17; border-radius:26px; transform:rotate(3deg); border:6px solid #0F1118; background:#0F1118; z-index:3; } .wcx-phone img{border-radius:20px;} .wcx-chip{ position:absolute; display:flex; align-items:center; gap:12px; z-index:4; background:rgba(255,255,255,.86); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.9); border-radius:16px; padding:12px 15px; box-shadow:var(--sh-2); } .wcx-chip .t{font-size:.8125rem; line-height:1.25;} .wcx-chip .t b{display:block; font-size:.9375rem; color:var(--ink);} .wcx-chip .t span{color:var(--ink-60);} .wcx-chip--lead{top:-10px; left:-14px; width:214px;} .wcx-chip--lead img{width:34px; height:34px; flex:none;} .wcx-chip--speed{top:44%; right:-16px; width:196px;} .wcx-chip--speed .tile{ width:44px; height:44px; border-radius:12px; flex:none; display:grid; place-items:center; background:var(--grad); color:#fff; font-weight:800; font-size:.9375rem; letter-spacing:-.02em; } .wcx-video{ position:absolute; bottom:126px; left:-22px; width:55%; z-index:5; background:rgba(15,17,24,.92); backdrop-filter:blur(6px); border-radius:18px; padding:14px; box-shadow:var(--sh-3); color:var(--ivory); border:1px solid rgba(96,165,250,.35); transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease; } .wcx-video:hover{transform:translateY(-3px);} .wcx-video__facade:hover .wcx-video__play{transform:translateX(-50%) scale(1.08);} .wcx-video__play{transition:transform .2s cubic-bezier(.22,1,.36,1);} .wcx-video__facade{ position:relative; display:block; width:100%; padding:0; border:0; cursor:pointer; border-radius:12px; overflow:hidden; aspect-ratio:16/9; background:#000; } .wcx-video__facade img{width:100%; height:100%; object-fit:cover; opacity:.68;} .wcx-video__facade iframe{position:absolute; inset:0; width:100%; height:100%; border:0;} .wcx-video__play{ position:absolute; left:50%; top:auto; bottom:16%; transform:translateX(-50%); width:52px; height:52px; border-radius:50%; background:var(--blue); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(29,78,216,.6); } .wcx-video__play::after{ content:""; margin-left:3px; border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent #fff; } .wcx-video__label{ margin-top:10px; font-size:.8125rem; font-weight:600; } .wcx-video__label span{color:var(--ivory-70); font-weight:400;} .wcx-hero__scroll{ position:relative; z-index:2; display:flex; align-items:center; gap:12px; margin:clamp(30px,3.6vw,48px) auto 0; max-width:1200px; padding-inline:var(--gutter); font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-55); } .wcx-hero__scroll span{width:46px; height:1px; background:currentColor; display:inline-block;} .wcx-how{padding:clamp(80px,10vw,140px) 0; background:var(--ivory);} .wcx-head{max-width:720px;} .wcx-head--center{margin:0 auto; text-align:center;} .wcx-head h2{margin:22px 0 0; font-weight:800; letter-spacing:-.03em; line-height:1.06; font-size:clamp(2.25rem,4.4vw,4rem);} .wcx-head p{margin:32px 0 0;} .wcx-head--center p{margin-inline:auto; max-width:60ch;} .wcx-steps{ margin-top:clamp(40px,5vw,64px); display:grid; gap:20px; grid-template-columns:repeat(3,1fr); } .wcx-step{ position:relative; display:flex; flex-direction:column; background:var(--blue-wash); border:1px solid var(--blue-line); border-radius:var(--r-md); padding:18px 18px 30px; overflow:hidden; } .wcx-step__media{position:relative; width:100%; height:238px; border-radius:14px; overflow:hidden; border:1px solid var(--blue-line); background:#0F1118; box-shadow:var(--sh-2); margin-bottom:24px;} .wcx-step__no{position:absolute; top:28px; right:28px; z-index:6; padding:3px 11px; border-radius:999px; background:rgba(255,255,255,.94); box-shadow:var(--sh-1); font-size:.8125rem; font-weight:800; color:var(--blue); letter-spacing:.02em;} .wcx-step h3{padding:0 10px;} .wcx-step p{padding:0 10px;} .wcx-step__more{display:inline-flex; align-self:flex-start; align-items:center; gap:5px; margin:16px 10px 0; font-size:.9rem; font-weight:700; color:var(--blue); text-decoration:none;} .wcx-step p{margin-bottom:0;} .wcx-step p + .wcx-step__more{margin-top:auto; padding-top:16px;} .wcx-step__more:hover{text-decoration:underline;} .wcx-step__more span{transition:transform .2s ease;} .wcx-step__more:hover span{transform:translateX(3px);} @keyframes wcx-kenburns{0%{transform:scale(1)}100%{transform:scale(1.07)}} .wcx-sc__site{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center;} .wcx-sc__chip{position:absolute; left:12px; bottom:12px; z-index:5; display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.95); box-shadow:var(--sh-1); font-size:.75rem; font-weight:700; color:var(--ink);} .wcx-sc__chip::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 4px rgba(29,78,216,.18);} @keyframes wcx-blink{50%{opacity:.25}} .wcx-bld{position:relative; background:radial-gradient(120% 120% at 28% 0%,#1b2740,#0F1118); padding:18px;} .wcx-bld__canvas{position:relative; width:100%; height:100%; background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 14px 34px rgba(0,0,0,.35);} .wcx-lnch{position:relative; overflow:hidden;} .wcx-lnch__site{position:absolute; top:0; left:0; width:100%; height:auto; display:block;} .wcx-lnch__veil{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(15,17,24,.32),rgba(15,17,24,.55));} .wcx-lnch__pub{position:absolute; z-index:3; left:50%; top:46%; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:999px; background:var(--blue); color:#fff; font-size:.82rem; font-weight:800; box-shadow:0 14px 30px -8px rgba(29,78,216,.8); animation:wcx-pubpress 6s ease-in-out infinite;} .wcx-lnch__pub svg{width:15px; height:15px;} @keyframes wcx-pubpress{0%{transform:translate(-50%,-50%) scale(1);opacity:1}18%{transform:translate(-50%,-50%) scale(1);opacity:1}24%{transform:translate(-50%,-50%) scale(.9)}30%{transform:translate(-50%,-50%) scale(1)}44%{opacity:1}52%,100%{opacity:0;transform:translate(-50%,-50%) scale(.96)}} .wcx-lnch__prog{position:absolute; z-index:3; left:16px; right:16px; bottom:44px; height:9px; border-radius:999px; background:rgba(255,255,255,.35); overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.25);} .wcx-lnch__prog i{display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,#60A5FA,#1D4ED8); animation:wcx-deploy 6s cubic-bezier(.45,0,.15,1) infinite;} @keyframes wcx-deploy{0%,26%{width:0}56%{width:100%}92%{width:100%}100%{width:0}} .wcx-lnch__plbl{position:absolute; z-index:3; left:16px; bottom:57px; font-size:.68rem; font-weight:700; color:#fff; opacity:0; animation:wcx-deploylbl 6s ease-in-out infinite;} @keyframes wcx-deploylbl{0%,26%{opacity:0}32%{opacity:.9}55%{opacity:.9}60%,100%{opacity:0}} .wcx-lnch__live{position:absolute; z-index:4; top:14px; left:14px; display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px; background:#12873D; color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.06em; box-shadow:0 10px 24px -6px rgba(22,163,74,.6); transform:scale(.2); opacity:0; animation:wcx-livepop 6s ease-in-out infinite;} .wcx-lnch__live::before{content:""; width:8px; height:8px; border-radius:50%; background:#fff; animation:wcx-blink 1.3s steps(2,jump-none) infinite;} @keyframes wcx-livepop{0%,58%{transform:scale(.2);opacity:0}64%{transform:scale(1.16);opacity:1}70%{transform:scale(1)}92%{transform:scale(1);opacity:1}98%,100%{opacity:0}} .wcx-lnch__toast{position:absolute; z-index:4; left:50%; top:50%; transform:translate(-50%,-50%) scale(.9); display:inline-flex; align-items:center; gap:8px; padding:10px 15px; border-radius:12px; background:#fff; color:#15803D; font-size:.8rem; font-weight:800; box-shadow:0 18px 40px -12px rgba(0,0,0,.5); opacity:0; animation:wcx-toast 6s ease-in-out infinite;} .wcx-lnch__toast svg{width:16px; height:16px;} @keyframes wcx-toast{0%,60%{opacity:0;transform:translate(-50%,-50%) scale(.9)}67%{opacity:1;transform:translate(-50%,-50%) scale(1)}90%{opacity:1}96%,100%{opacity:0;transform:translate(-50%,-50%) scale(.9)}} .wcx-grw{background:radial-gradient(120% 100% at 20% 0%, #182338, #0F1118);} .wcx-grw__panel{position:absolute; inset:0; padding:18px 20px 16px; display:flex; flex-direction:column;} .wcx-grw__hd{display:flex; align-items:center; justify-content:space-between; color:#fff;} .wcx-grw__hd b{font-size:.92rem; letter-spacing:-.01em;} .wcx-grw__hd .up{display:inline-flex; align-items:center; gap:4px; font-size:.72rem; font-weight:800; color:#93C5FD;} .wcx-grw__kpis{display:flex; gap:20px; margin-top:12px;} .wcx-grw__kpi{display:flex; flex-direction:column;} .wcx-grw__kpi b{font-size:1.5rem; font-weight:800; letter-spacing:-.02em; color:#fff; font-variant-numeric:tabular-nums; line-height:1;} .wcx-grw__kpi span{margin-top:3px; font-size:.66rem; font-weight:700; color:rgba(255,255,255,.7); display:inline-flex; align-items:center; gap:4px;} .wcx-grw__kpi span::before{content:"\25B2"; font-size:.6rem; color:#4ADE80;} .wcx-grw__chart{position:relative; flex:1; margin-top:12px;} .wcx-grw__bars{position:absolute; inset:auto 0 0 0; height:100%; display:flex; align-items:flex-end; gap:8px;} .wcx-grw__bars i{flex:1; height:0; border-radius:5px 5px 0 0; background:linear-gradient(180deg,#60A5FA,#1D4ED8); opacity:.92; animation:wcx-grow 4s cubic-bezier(.35,0,.2,1) infinite;} @keyframes wcx-grow{0%{height:6%}52%{height:var(--h)}88%{height:var(--h)}100%{height:6%}} .wcx-grw__line{position:absolute; inset:0; z-index:2; width:100%; height:100%;} .wcx-grw__line path{fill:none; stroke:#BFDBFE; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:230; stroke-dashoffset:230; animation:wcx-draw2 4s ease infinite;} @keyframes wcx-draw2{0%{stroke-dashoffset:230}52%{stroke-dashoffset:0}88%{stroke-dashoffset:0}100%{stroke-dashoffset:230}} .wcx-grw__line circle{fill:#DBEAFE; opacity:0; animation:wcx-grwdot 4s ease infinite;} @keyframes wcx-grwdot{0%,50%{opacity:0}58%{opacity:1}88%{opacity:1}100%{opacity:0}} @media(prefers-reduced-motion:reduce){ .wcx-bld__blk,.wcx-bld__swatch,.wcx-bld__cursor{animation:none;} .wcx-bld__blk{opacity:1; transform:none;} .wcx-bld__swatch{opacity:1; transform:none;} .wcx-bld__hero::after{animation:none; opacity:.9;} .wcx-bld__cursor{transform:translate(70px,176px);} .wcx-lnch__site{animation:none;} .wcx-lnch__pub{animation:none; opacity:0;} .wcx-lnch__prog i{animation:none; width:100%;} .wcx-lnch__plbl{animation:none; opacity:0;} .wcx-lnch__live{animation:none; opacity:1; transform:scale(1);} .wcx-lnch__live::before{animation:none;} .wcx-lnch__toast{animation:none; opacity:1; transform:translate(-50%,-50%) scale(1);} .wcx-grw__bars i{animation:none; height:var(--h);} .wcx-grw__line path{animation:none; stroke-dashoffset:0;} .wcx-grw__line circle{animation:none; opacity:1;} } .wcx-step h3{margin:20px 0 14px; font-size:1.375rem; font-weight:700; letter-spacing:-.02em;} .wcx-step p{font-size:1rem; line-height:1.55; color:var(--ink-60);} .wcx-team{ position:relative; overflow:hidden; isolation:isolate; color:#fff; background:radial-gradient(60% 60% at 18% 0%, rgba(96,165,250,.20), transparent 70%), var(--dark); padding:clamp(88px,11vw,150px) 0; } .wcx-team__inner{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(36px,5vw,72px); align-items:center;} .wcx-team h2{margin:22px 0 0; font-weight:800; letter-spacing:-.03em; line-height:1.06; font-size:clamp(2.25rem,4.4vw,4rem); color:#fff;} .wcx-team__lead{margin:32px 0 0; max-width:44ch; font-size:clamp(0.875rem,0.7vw,1rem); line-height:1.5; color:var(--ivory-70);} .wcx-team__proof{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px;} .wcx-team__proof span{ display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:var(--r-pill); background:rgba(255,255,255,.06); border:1px solid var(--white-14); font-size:.875rem; font-weight:500; color:#fff; } .wcx-team__proof span::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--blue-soft); flex:none;} .wcx-team__link{display:inline-flex; align-items:center; gap:6px; margin-top:26px; font-size:.95rem; font-weight:700; color:#60A5FA; text-decoration:none;} .wcx-team__link:hover{text-decoration:underline;} .wcx-team__link span{transition:transform .2s ease;} .wcx-team__link:hover span{transform:translateX(3px);} .wcx-cloud{position:relative; min-height:460px;} .wcx-face{ position:absolute; border-radius:50%; overflow:hidden; border:3px solid rgba(255,255,255,.14); box-shadow:0 24px 60px -20px rgba(0,0,0,.7); } .wcx-face img{width:100%; height:100%; object-fit:cover; display:block;} .wcx-face--1{width:172px; height:172px; top:8%; left:20%;} .wcx-face--2{width:118px; height:118px; top:2%; left:58%;} .wcx-face--3{width:140px; height:140px; top:38%; left:2%;} .wcx-face--4{width:184px; height:184px; top:40%; left:42%; border-color:rgba(96,165,250,.45);} .wcx-face--5{width:112px; height:112px; top:30%; left:76%;} .wcx-face--6{width:126px; height:126px; top:72%; left:22%;} .wcx-face--7{width:104px; height:104px; top:70%; left:60%;} .wcx-face--8{width:96px; height:96px; top:62%; left:83%;} .wcx-badge{ position:absolute; z-index:4; display:flex; align-items:center; gap:10px; background:rgba(20,23,32,.86); backdrop-filter:blur(10px); border:1px solid var(--white-14); border-radius:14px; padding:11px 15px; box-shadow:0 18px 44px -18px rgba(0,0,0,.7); } .wcx-badge b{display:block; font-size:1rem; font-weight:800; color:#fff; line-height:1.1;} .wcx-badge span{font-size:.75rem; color:rgba(255,255,255,.6);} .wcx-badge .tile{width:36px; height:36px; border-radius:10px; flex:none; display:grid; place-items:center; background:var(--grad); color:#fff; font-weight:800;} .wcx-badge--tl{top:1%; left:-10px;} .wcx-badge--br{bottom:8%; right:-6px;} .wcx-out{padding:clamp(80px,10vw,140px) 0; background:var(--ivory);} .wcx-out__head{max-width:760px;} .wcx-out__head h2{margin:22px 0 0; font-weight:800; letter-spacing:-.03em; line-height:1.06; font-size:clamp(2.25rem,4.4vw,4rem);} .wcx-out__lead{margin:32px 0 0; max-width:60ch;} .wcx-row{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(32px,5vw,72px); align-items:center; margin-top:clamp(56px,7vw,104px); } .wcx-row--rev .wcx-row__copy{order:2;} .wcx-row--rev .wcx-row__media{order:1;} .wcx-row__copy h3{margin:22px 0 0; font-weight:800; letter-spacing:-.03em; line-height:1.05; font-size:clamp(1.875rem,3.2vw,2.75rem);} .wcx-row__copy p{margin:26px 0 0; max-width:42ch;} .wcx-row__list{margin:22px 0 0; padding:0; list-style:none; display:grid; gap:12px;} .wcx-row__list li{display:flex; align-items:flex-start; gap:11px; font-size:1rem; line-height:1.5; color:var(--ink-60);} .wcx-row__list-link{font-weight:700; color:var(--blue); text-decoration:none; white-space:nowrap;} .wcx-row__list-link:hover{text-decoration:underline;} .wcx-row__note{margin:10px 0 0; font-size:.8125rem; line-height:1.4; color:var(--ink-55);} .wcx-row__note-link{color:inherit; text-decoration:underline; text-decoration-color:rgba(10,10,10,.3); text-underline-offset:2px;} .wcx-row__note-link:hover{color:var(--blue); text-decoration-color:var(--blue);} .wcx-row__list li::before{ content:""; margin-top:3px; width:18px; height:18px; border-radius:50%; flex:none; background:var(--blue-wash); border:1px solid var(--blue-line); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12l4 4 10-10' stroke='%231D4ED8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:12px; background-repeat:no-repeat; background-position:center; } .wcx-stage{position:relative;} .wcx-stage__frame{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:#fff; box-shadow:var(--sh-3); border:1px solid rgba(255,255,255,.9); } .wcx-stage__frame img{display:block; width:100%; height:auto;} .wcx-stage__bar{height:38px; background:#fff; border-bottom:1px solid rgba(10,10,10,.06); display:flex; align-items:center; gap:7px; padding:0 14px;} .wcx-stage__bar i{width:9px; height:9px; border-radius:50%; background:#E4E1DB;} .wcx-float{ position:absolute; display:flex; align-items:center; gap:12px; z-index:3; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.9); border-radius:16px; padding:13px 16px; box-shadow:var(--sh-2); } .wcx-float img{width:38px; height:38px; flex:none;} .wcx-float .t{font-size:.8125rem; line-height:1.25;} .wcx-float .t b{display:block; font-size:.9375rem; color:var(--ink);} .wcx-float .t span{color:var(--ink-60);} .wcx-float--bl{bottom:-18px; left:-18px;} .wcx-float--tr{top:-18px; right:-18px;} .wcx-chartcard{display:block; width:224px; padding:15px 16px 14px; text-align:left;} .wcx-chartcard__hd{display:flex; align-items:center; justify-content:space-between; margin-bottom:9px;} .wcx-chartcard__hd b{font-size:.9375rem; color:var(--ink);} .wcx-chartcard__up{display:inline-flex; align-items:center; gap:4px; font-size:.75rem; font-weight:800; color:var(--blue);} .wcx-chart{display:block; width:100%; height:58px;} .wcx-chart__area{opacity:0; transition:opacity .7s ease .9s;} .wcx-chart__line{fill:none; stroke:var(--blue); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:400; stroke-dashoffset:400;} .wcx-chart__dot{opacity:0; transform-box:fill-box; transform-origin:center;} .wcx-stage.is-in .wcx-chart__line{animation:wcx-draw 1.4s cubic-bezier(.4,0,.2,1) .25s forwards;} .wcx-stage.is-in .wcx-chart__area{opacity:1;} .wcx-stage.is-in .wcx-chart__dot{animation:wcx-dotin .35s ease 1.55s forwards;} @keyframes wcx-draw{to{stroke-dashoffset:0;}} @keyframes wcx-dotin{from{opacity:0; transform:scale(0);} to{opacity:1; transform:scale(1);}} .wcx-chartcard__ft{margin-top:8px; font-size:.8125rem; color:var(--ink-60);} @media(prefers-reduced-motion:reduce){.wcx-chart__line{stroke-dashoffset:0;} .wcx-chart__area{opacity:1;} .wcx-chart__dot{opacity:1;}} .wcx-demos{padding:clamp(80px,10vw,140px) 0 clamp(72px,9vw,120px); background:var(--ivory); overflow:hidden;} .wcx-demos__head{text-align:center; max-width:900px; margin:0 auto;} .wcx-demos__head h2{ margin:22px 0 0; font-weight:800; letter-spacing:-.04em; line-height:1.0; font-size:clamp(2.75rem,7vw,5.75rem); text-wrap:balance; } .wcx-demos__head p{margin:42px auto 0; max-width:56ch;} .wcx-cf-wrap{position:relative; margin-top:clamp(36px,4.5vw,68px); --cf-card-w:420px;} .wcx-cf-wrap::before, .wcx-cf-wrap::after{ content:""; position:absolute; top:0; bottom:0; width:clamp(30px,9vw,170px); z-index:6; pointer-events:none; } .wcx-cf-wrap::before{left:0; background:linear-gradient(90deg,var(--ivory),transparent);} .wcx-cf-wrap::after{right:0; background:linear-gradient(270deg,var(--ivory),transparent);} .wcx-cf-track{ perspective:1800px; perspective-origin:50% 38%; height:clamp(480px,46vw,560px); padding:40px 0 40px; overflow-x:auto; overflow-y:visible; scroll-snap-type:x proximity; scroll-padding-left:calc(50% - var(--cf-card-w) / 2); scroll-padding-right:50%; scrollbar-width:none; -ms-overflow-style:none; } .wcx-cf-track::-webkit-scrollbar{display:none;} .wcx-cf-rail{ display:flex; align-items:center; height:100%; padding-left:calc(50% - var(--cf-card-w) / 2); padding-right:calc(50% - var(--cf-card-w) / 2); transform-style:preserve-3d; } .wcx-cf-shell{ --cf-tier:0; --cf-sign:1; flex:0 0 var(--cf-card-w); width:var(--cf-card-w); scroll-snap-align:center; transform-origin:50% 145%; opacity:1; transition:none; filter:drop-shadow(0 30px 60px rgba(0,0,0,0)); } .wcx-cf-wrap--in-view .wcx-cf-shell{will-change:transform, opacity;} @media (min-width:821px) and (prefers-reduced-motion: no-preference){ .wcx-cf-wrap--in-view .wcx-cf-shell{ transition:transform 440ms cubic-bezier(.25,.8,.3,1), opacity 440ms cubic-bezier(.25,.8,.3,1), filter 440ms cubic-bezier(.25,.8,.3,1); } } .wcx-cf-shell, .wcx-cf-shell[style*="--cf-tier: 0"]{transform:translateZ(0) translateY(0) rotateZ(0deg) rotateY(0deg) scale(1.12);} .wcx-cf-shell[style*="--cf-tier: 0"]{filter:drop-shadow(0 36px 66px rgba(15,23,42,.3)); z-index:5;} .wcx-cf-shell[style*="--cf-tier: 1"]{transform:translateZ(-60px) translateY(14px) rotateZ(calc(var(--cf-sign) * 3.5deg)) rotateY(calc(var(--cf-sign) * -14deg)) scale(.94); opacity:.96; filter:drop-shadow(0 28px 48px rgba(15,23,42,.24)); z-index:4;} .wcx-cf-shell[style*="--cf-tier: 2"]{transform:translateZ(-140px) translateY(34px) rotateZ(calc(var(--cf-sign) * 7deg)) rotateY(calc(var(--cf-sign) * -20deg)) scale(.86); opacity:.82; filter:drop-shadow(0 22px 38px rgba(15,23,42,.2)); z-index:3;} .wcx-cf-shell[style*="--cf-tier: 3"]{transform:translateZ(-230px) translateY(58px) rotateZ(calc(var(--cf-sign) * 10.5deg)) rotateY(calc(var(--cf-sign) * -26deg)) scale(.78); opacity:.5; filter:drop-shadow(0 18px 30px rgba(15,23,42,.16)); z-index:2;} .wcx-cf-card{ position:relative; display:block; width:var(--cf-card-w); border-radius:15px; overflow:hidden; background:#fff; border:1px solid var(--hair); text-decoration:none; color:inherit; box-shadow:0 20px 44px -22px rgba(15,23,42,.4); } .wcx-cf-card img{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top center;} .wcx-cf-tag{ position:absolute; left:14px; bottom:14px; padding:7px 15px; border-radius:999px; background:rgba(255,255,255,.94); backdrop-filter:blur(6px); border:1px solid var(--hair); font-size:.8125rem; font-weight:700; letter-spacing:.01em; color:var(--ink); z-index:4; } .wcx-cf-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:8; width:54px; height:54px; border-radius:50%; border:1px solid var(--hair); background:rgba(255,255,255,.97); box-shadow:0 14px 32px -12px rgba(15,23,42,.45); display:grid; place-items:center; cursor:pointer; color:var(--ink); transition:opacity .3s ease, box-shadow .2s ease, background .2s ease; } .wcx-cf-arrow:hover{box-shadow:0 18px 40px -12px rgba(15,23,42,.55); background:#fff;} .wcx-cf-arrow svg{width:20px; height:20px;} .wcx-cf-arrow--prev{left:clamp(6px,3vw,44px);} .wcx-cf-arrow--next{right:clamp(6px,3vw,44px);} .wcx-cf-arrow--hidden{opacity:0; pointer-events:none;} .wcx-cf-cta{margin-top:clamp(30px,3.5vw,48px); text-align:center;} @media (min-width:821px) and (max-height:860px){ .wcx-demos{padding:28px 0 28px;} .wcx-demos__head h2{font-size:clamp(1.75rem,3.6vw,2.5rem); line-height:1;} .wcx-demos__head p{margin-top:18px; font-size:.9rem;} .wcx-cf-wrap{margin-top:20px; --cf-card-w:270px;} .wcx-cf-track{height:clamp(278px,25vw,318px); padding:20px 0 20px;} .wcx-cf-arrow{width:46px; height:46px;} .wcx-inds{margin-top:22px;} } @media (min-width:821px) and (max-height:760px){ .wcx-demos__head p{display:none;} } @media (max-width:820px){ .wcx-cf-track{perspective:none; height:auto; scroll-snap-type:x mandatory; scroll-padding-inline:6vw; padding:8px 0 14px;} .wcx-cf-rail{padding-left:6vw; padding-right:6vw; transform-style:flat; gap:14px; align-items:stretch;} .wcx-cf-shell{flex:0 0 82vw; width:82vw; transform:none !important; opacity:1 !important; filter:none !important; scroll-snap-align:center;} .wcx-cf-card{width:100%;} .wcx-cf-arrow{display:none;} .wcx-cf-wrap::before, .wcx-cf-wrap::after{display:none;} } @media (prefers-reduced-motion: reduce){ .wcx-cf-track{perspective:none; height:auto; padding:8px 0 14px;} .wcx-cf-rail{transform-style:flat;} .wcx-cf-shell{transition:none !important; transform:none !important; opacity:1 !important; filter:none !important;} } .wcx-proof{ position:relative; overflow:hidden; isolation:isolate; color:#fff; background:radial-gradient(60% 60% at 50% 0%, rgba(96,165,250,.18), transparent 70%), var(--dark); padding:clamp(80px,10vw,140px) 0; } .wcx-proof__head{text-align:center; max-width:760px; margin:0 auto;} .wcx-proof__head h2{margin:16px 0 0; font-weight:800; letter-spacing:-.03em; line-height:1.02; font-size:clamp(2.25rem,4.4vw,4rem); color:#fff;} .wcx-stats{ margin-top:clamp(44px,6vw,72px); display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,4vw,48px); text-align:center; } .wcx-stat__num{ font-size:clamp(2.75rem,5vw,4.5rem); font-weight:800; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; } .wcx-stat__lbl{margin-top:12px; font-size:.9375rem; color:var(--ivory-70);} .wcx-quote{ margin:clamp(44px,6vw,64px) auto 0; max-width:760px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px; } .wcx-quote__stars{display:flex; gap:4px; color:#FBBF24; font-size:1.25rem; letter-spacing:2px;} .wcx-quote blockquote{margin:0; font-size:clamp(1.25rem,2.2vw,1.625rem); font-weight:600; letter-spacing:-.02em; line-height:1.4; color:#fff;} .wcx-quote figcaption{display:flex; align-items:center; gap:12px; font-size:.9375rem; color:var(--ivory-70);} .wcx-quote figcaption .mark{ width:44px; height:44px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--grad); color:#fff; border:2px solid var(--white-14); box-shadow:0 8px 22px -8px rgba(29,78,216,.7); } .wcx-quote figcaption .mark svg{width:22px; height:22px;} .wcx-quote figcaption b{color:#fff; font-weight:600;} .wcx-price{padding:clamp(88px,11vw,150px) 0; background:var(--ivory); text-align:center;} .wcx-price__inner{max-width:820px; margin:0 auto;} .wcx-price h2{ margin:22px 0 0; font-weight:800; letter-spacing:-.035em; line-height:1.0; font-size:clamp(2.25rem,5vw,4.25rem); text-wrap:balance; } .wcx-price h2 .accent{color:var(--blue);} .wcx-price :where(p){margin:34px auto 0; max-width:60ch;} .wcx-price__pills{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:30px 0 34px;} .wcx-price__pills span{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:var(--r-pill); background:#fff; border:1px solid var(--blue-line); box-shadow:var(--sh-1); font-size:.9375rem; font-weight:500; color:var(--ink); } .wcx-price__pills span::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--blue); flex:none;} .wcx-tiers{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; text-align:left; --wcx-tiers-w:min(1180px, calc(100vw - 96px)); width:var(--wcx-tiers-w); margin:44px calc((100% - var(--wcx-tiers-w)) / 2) 24px;} @media (max-width:1200px){.wcx-tiers{grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; --wcx-tiers-w:min(760px, calc(100vw - 96px));}} .wcx-tier{position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--hair); border-radius:16px; padding:26px 24px; box-shadow:var(--sh-1);} .wcx-tier--pop{border-color:var(--blue); box-shadow:0 18px 40px -18px rgba(29,78,216,.35);} .wcx-tier__flag{position:absolute; top:-11px; left:20px; background:var(--blue); color:#fff; font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:4px 10px; border-radius:999px;} .wcx-tier__name{font-size:.82rem; font-weight:800; letter-spacing:.05em; color:var(--ink-55); text-transform:uppercase;} .wcx-tier__price{font-size:clamp(1.55rem,2.3vw,2.3rem); font-weight:800; letter-spacing:-.03em; color:var(--ink); margin-top:6px; line-height:1; white-space:nowrap;} .wcx-tier__price span{font-size:1rem; font-weight:600; color:var(--ink-55);} .wcx-tier__desc{flex:1; margin-top:11px; font-size:.92rem; line-height:1.45; color:var(--ink-60);} .wcx-tiers__inc{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 14px; margin:40px 0 18px; font-size:.875rem; color:var(--ink-60);} .wcx-tiers__inc b{font-weight:700; color:var(--ink);} .wcx-tiers__inc span{display:inline-flex; align-items:center; gap:6px;} .wcx-tiers__inc a{color:inherit; text-decoration:underline; text-decoration-color:rgba(10,10,10,.3); text-underline-offset:2px;} .wcx-tiers__inc a:hover{color:var(--blue); text-decoration-color:var(--blue);} .wcx-tiers__inc span::before{content:""; width:12px; height:12px; border-radius:50%; flex:none; background:rgba(5,150,105,.14) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="%23047857" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/8px no-repeat;} .wcx-tiers__note{font-size:.9rem; color:var(--ink-55); margin:22px auto 44px; max-width:60ch;} @media(max-width:760px){.wcx-tiers{grid-template-columns:1fr; --wcx-tiers-w:min(420px, calc(100vw - 48px));}} .wcx-ent{--wcx-ent-w:min(1180px, calc(100vw - 96px)); width:var(--wcx-ent-w); margin:0 calc((100% - var(--wcx-ent-w)) / 2) 24px; box-sizing:border-box; display:grid; grid-template-columns:minmax(0,1fr) 260px 220px; gap:28px; align-items:center; text-align:left; padding:24px 28px; border-radius:16px; background:#08090f; border:1.5px solid rgba(217,119,6,.25);} .wcx-ent__badge{display:inline-block; background:#D97706; color:#0A0A0A; font-size:.6875rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:4px 12px; border-radius:999px;} .wcx-ent__name{margin-top:10px; font-weight:800; font-size:1.05rem; letter-spacing:-.02em; color:#fff;} .wcx-ent__desc{margin-top:8px; font-size:.86rem; line-height:1.55; color:#9ca3af;} .wcx-ent__video{margin-top:0;} .wcx-ent__buy{display:flex; flex-direction:column; align-items:flex-start; gap:8px;} .wcx-ent__price{font-size:1.25rem; font-weight:800; letter-spacing:-.02em; color:#fff; white-space:nowrap;} .wcx-ent__price span{font-size:.8rem; font-weight:600; color:#9ca3af;} .wcx-ent__note{font-size:.75rem; line-height:1.45; color:#9ca3af;} .wcx-ent__cta{display:inline-flex; align-items:center; gap:6px; padding:.6rem 1.1rem; border-radius:10px; background:#D97706; color:#0A0A0A; font-weight:700; font-size:.85rem; text-decoration:none;} .wcx-ent__cta:hover{background:#B45309; color:#fff;} @media (max-width:1200px){.wcx-ent{--wcx-ent-w:min(760px, calc(100vw - 96px)); grid-template-columns:minmax(0,1fr) 240px; } .wcx-ent__buy{grid-column:1 / -1; flex-direction:row; align-items:center; gap:16px; flex-wrap:wrap;} .wcx-ent__note{flex:1; min-width:180px;}} @media (max-width:760px){.wcx-ent{--wcx-ent-w:min(420px, calc(100vw - 48px)); grid-template-columns:1fr; gap:18px;} .wcx-ent__video{width:100%;}} .wcx-final{ position:relative; overflow:hidden; isolation:isolate; color:#fff; text-align:center; background:var(--grad); padding:clamp(96px,13vw,180px) 0; } .wcx-final__glow{ position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(50% 60% at 50% -10%, rgba(255,255,255,.28), transparent 70%), radial-gradient(60% 60% at 50% 120%, rgba(15,17,24,.45), transparent 70%); } .wcx-final__stage{ position:absolute; inset:auto 0 -7% 0; z-index:1; height:clamp(330px,42vw,540px); perspective:1500px; overflow:hidden; pointer-events:none; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 100%); mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 100%); } .wcx-final__plane{ position:absolute; left:50%; bottom:-4%; transform:translateX(-50%) rotateX(24deg); transform-origin:center bottom; transform-style:preserve-3d; } .wcx-final__strip{display:flex; gap:28px; width:max-content; animation:wcx-slide-l 90s linear infinite;} @keyframes wcx-slide-l{from{transform:translateX(0)}to{transform:translateX(-50%)}} .wcx-final__strip img{ width:clamp(280px,28vw,400px); height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top center; border-radius:16px; border:3px solid rgba(255,255,255,.7); box-shadow:0 40px 80px -18px rgba(0,0,0,.6); } .wcx-final__inner{position:relative; z-index:2;} .wcx-final h2{ margin:20px auto 0; max-width:16ch; font-weight:800; letter-spacing:-.04em; line-height:.94; font-size:clamp(2.75rem,7vw,6.25rem); color:#fff; text-wrap:balance; } .wcx-final__lead{margin:24px auto 0; max-width:44ch; font-size:clamp(0.875rem,0.7vw,1rem); line-height:1.5; color:rgba(255,255,255,.86);} .wcx-final__cta{display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin-top:44px;} .wcx-final .wcx-btn--primary{background:#fff; color:var(--blue); box-shadow:0 16px 40px -12px rgba(0,0,0,.4);} .wcx-final .wcx-btn--primary:hover{box-shadow:0 22px 50px -12px rgba(0,0,0,.5);} .wcx-final .wcx-btn--ghostDark{border-color:rgba(255,255,255,.5);} .wcx-final__micro{margin-top:24px; font-size:.75rem; color:rgba(255,255,255,.8);} .wcx-final__eyebrow{color:#fff;} .wcx-final__eyebrow .dot{background:#fff;} @media (max-width:960px){ .wcx-hero__inner{grid-template-columns:1fr; gap:48px;} .wcx-hero__inner > *{min-width:0;} .wcx-hero__copy{max-width:560px; margin:0 auto;} .wcx-hero__trustline{max-width:560px; margin-left:auto; margin-right:auto;} .wcx-cluster{min-height:540px; max-width:560px; width:100%; margin:0 auto;} .wcx-anchor{width:70%;} .wcx-phone{width:24%;} .wcx-video{width:50%; top:46%; bottom:auto;} .wcx-chip--lead{width:160px;} .wcx-chip--speed{width:150px;} .wcx-team__inner, .wcx-row, .wcx-out .wcx-row{grid-template-columns:1fr; gap:40px;} .wcx-row--rev .wcx-row__copy, .wcx-row--rev .wcx-row__media{order:initial;} .wcx-cloud{min-height:0; max-width:560px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; padding:8px 0 4px;} .wcx-face{position:static !important; transform:none !important; width:clamp(64px,15vw,104px) !important; height:clamp(64px,15vw,104px) !important;} .wcx-badge{position:static; order:9; flex:0 1 auto; margin-top:8px; padding:10px 14px; border-radius:12px; gap:9px;} .wcx-badge b{font-size:.85rem;} .wcx-badge span{font-size:.7rem;} .wcx-badge .tile{width:30px; height:30px; border-radius:8px;} } @media (max-width:760px){ .wcx-steps{grid-template-columns:1fr;} .wcx-stats{grid-template-columns:repeat(2,1fr); gap:36px 24px;} } @media (max-width:560px){ .wcx-hero{padding-top:44px; padding-bottom:40px;} .wcx-eyebrow{font-size:.6875rem; letter-spacing:.06em; gap:7px;} .wcx-eyebrow--pill{padding:7px 13px;} .wcx-hero h1{font-size:clamp(2.25rem,8.6vw,2.5rem); margin-top:14px;} .wcx-hero__lead{margin-top:22px;} .wcx-hero__cta{margin-top:22px; gap:10px;} .wcx-hero__cta .wcx-btn{padding:15px 22px;} .wcx-hero__inner{gap:28px;} } @media (max-width:560px){ .wcx-float--bl{left:6px; bottom:-14px;} .wcx-float--tr{right:6px; top:-14px;} } @media (prefers-reduced-motion:reduce){ .wcx-final__strip{animation:none;} .wcx-hero h1 .grad{animation:none; opacity:1; clip-path:none;} .wcx-hero h1 .grad-u::after{animation:none; transform:scaleX(1);} } .wcx-chip__ic{width:36px; height:36px; border-radius:9px; flex:none; display:grid; place-items:center; background:linear-gradient(150deg,#3b82f6,#1d4ed8); box-shadow:0 6px 14px -6px rgba(29,78,216,.6);} .wcx-chip__ic svg{width:20px; height:20px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;} .wcx-show__slide{position:absolute; inset:0; opacity:0; pointer-events:none; animation:wcx-showcycle 42s ease infinite;} .wcx-show__slide--1{opacity:1; animation-delay:0s;} .wcx-show__slide--2{animation-delay:-36s;} .wcx-show__slide--3{animation-delay:-30s;} .wcx-show__slide--4{animation-delay:-24s;} .wcx-show__slide--5{animation-delay:-18s;} .wcx-show__slide--6{animation-delay:-12s;} .wcx-show__slide--7{animation-delay:-6s;} @keyframes wcx-showcycle{ 0%{opacity:1} 10.7%{opacity:1} 14.3%{opacity:0} 96.4%{opacity:0} 100%{opacity:1} } .wcx-showcase:hover .wcx-show__slide{animation-play-state:paused;} .wcx-showcase .wcx-video{width:48%; bottom:108px;} .wcx-show__tag{ position:absolute; left:-14px; top:26%; z-index:4; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.9); border-radius:14px; padding:10px 16px; box-shadow:var(--sh-2); font-size:.8125rem; line-height:1.3; color:var(--ink-60); } .wcx-show__tag b{display:block; font-size:.9375rem; color:var(--ink);} .wcx-showcase .wcx-chip--lead{top:2px; left:auto; right:-24px; opacity:0; animation:wcx-story-lead 14s ease infinite;} .wcx-bubble{ position:absolute; right:0; top:41%; width:218px; z-index:6; background:#fff; border:1px solid rgba(10,10,10,.06); border-radius:14px 14px 4px 14px; padding:10px 13px; box-shadow:var(--sh-2); font-size:.75rem; line-height:1.4; color:var(--ink); opacity:0; animation:wcx-story-bubble 14s ease infinite; } .wcx-bubble b{display:block; font-size:.625rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--blue); margin-bottom:3px;} .wcx-chip--count{bottom:0; left:-22px; width:236px; opacity:0; animation:wcx-story-count 14s ease infinite;} @keyframes wcx-story-bubble{0%,4%{opacity:0} 8%,90%{opacity:1} 96%,100%{opacity:0}} @keyframes wcx-story-lead{0%,24%{opacity:0} 29%,90%{opacity:1} 96%,100%{opacity:0}} @keyframes wcx-story-count{0%,52%{opacity:0} 57%,90%{opacity:1} 96%,100%{opacity:0}} @media (max-width:960px){ .wcx-show__tag{left:-6px; top:30%;} .wcx-bubble{right:0; top:40%; width:180px; font-size:.6875rem;} .wcx-chip--count{width:180px; bottom:0; left:-8px;} } @media (max-width:560px){ .wcx-cluster.wcx-showcase{min-height:500px;} .wcx-showcase .wcx-anchor{width:88%; top:0;} .wcx-showcase .wcx-phone{width:30%; top:34px; bottom:auto;} .wcx-show__tag{top:200px; left:-6px; padding:8px 13px; font-size:.75rem;} .wcx-show__tag b{font-size:.875rem;} .wcx-showcase .wcx-video{width:50%; top:auto; bottom:0; left:-6px;} .wcx-showcase .wcx-chip--lead{top:auto; bottom:0; right:0; left:auto; width:160px; padding:11px 12px;} .wcx-showcase .wcx-chip--lead .wcx-chip__ic{width:28px; height:28px;} .wcx-showcase .wcx-chip--lead .t b{font-size:.8125rem;} .wcx-showcase .wcx-chip--lead .t span{font-size:.75rem;} .wcx-bubble, .wcx-chip--count{display:none;} } @media (max-width:360px){ .wcx-showcase .wcx-chip--lead{display:none;} } @media (prefers-reduced-motion:reduce){ .wcx-show__slide{animation:none;} .wcx-bubble, .wcx-showcase .wcx-chip--lead, .wcx-chip--count{animation:none; opacity:1;} } .wcx-stage2{position:relative; overflow:hidden; isolation:isolate; padding:clamp(30px,5vw,60px) 0 clamp(56px,8vw,104px); background: radial-gradient(60% 55% at 20% 8%, rgba(96,165,250,.16), transparent 70%), radial-gradient(52% 50% at 88% 92%, rgba(29,78,216,.10), transparent 70%), var(--ivory);} .wcx-stage2__cluster{position:relative; min-height:clamp(360px,44vw,560px);} .wcx-stage2__main{ position:relative; z-index:3; width:min(760px,90%); margin:0 auto; border-radius:var(--r-lg); overflow:hidden; background:#fff; border:1px solid rgba(255,255,255,.9); box-shadow:0 60px 120px -40px rgba(15,23,42,.5), 0 24px 50px -24px rgba(29,78,216,.26); animation:wcx-hfloat 9s ease-in-out infinite; } @keyframes wcx-hfloat{0%,100%{translate:0 0}50%{translate:0 -11px}} .wcx-stage2 .wcx-player{aspect-ratio:16/9;} .wcx-stage2__side{position:absolute; z-index:1; border-radius:16px; overflow:hidden; background:#fff; border:4px solid rgba(255,255,255,.85); box-shadow:0 40px 80px -30px rgba(15,23,42,.5); opacity:1;} .wcx-stage2__side img{display:block; width:100%; height:100%; object-fit:cover; object-position:top center;} .wcx-stage2__side--l{width:clamp(160px,21vw,272px); aspect-ratio:16/11; top:12%; left:0; rotate:-5deg; animation:wcx-hfloat 11s ease-in-out infinite .6s;} .wcx-stage2__side--r{width:clamp(160px,21vw,272px); aspect-ratio:16/11; bottom:8%; right:0; rotate:5deg; animation:wcx-hfloat 10s ease-in-out infinite .3s;} .wcx-stage2__side--phone{width:clamp(100px,12.5vw,158px); aspect-ratio:9/17; border-radius:22px; bottom:2%; left:8%; rotate:-3deg; opacity:1; animation:wcx-hfloat 12s ease-in-out infinite .9s;} .wcx-stage2__ai{position:absolute; z-index:5; right:clamp(-6px,2vw,34px); top:26%; width:clamp(240px,26vw,310px); overflow:hidden; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.9); border-radius:18px; padding:15px 16px; box-shadow:var(--sh-2); animation:wcx-hfloat 8s ease-in-out infinite .4s;} .wcx-stage2__aihd{display:flex; align-items:center; gap:8px; font-size:.78rem; font-weight:700; color:var(--ink); margin-bottom:10px;} .wcx-stage2__aidot{width:20px; height:20px; border-radius:50%; background:var(--grad); flex:none; display:grid; place-items:center; color:#fff; font-size:.62rem; font-weight:800;} .wcx-stage2__prompt{font-size:.85rem; line-height:1.4; color:var(--ink); min-height:2.6em; overflow:hidden;} .wcx-stage2__cyc{color:var(--blue); font-weight:700;} .wcx-stage2__cyc b{display:inline-block; vertical-align:bottom; white-space:nowrap; font-weight:700; box-shadow:2px 0 0 0 var(--blue); min-height:1em;} .wcx-stage2__type{display:inline-block; width:max-content; max-width:0; overflow:hidden; white-space:nowrap; vertical-align:bottom; max-width:0; border-right:2px solid var(--blue); animation:wcx-type 9s steps(30,end) infinite, wcx-caret .8s step-end infinite;} @keyframes wcx-type{0%{max-width:0}42%{max-width:15em}90%{max-width:15em}100%{max-width:0}} @keyframes wcx-caret{50%{border-color:transparent}} .wcx-stage2__reply{margin-top:11px; padding:9px 12px; border-radius:12px; background:var(--blue-wash); color:var(--blue); font-size:.8rem; font-weight:600; line-height:1.4; opacity:0; transform:translateY(6px); animation:wcx-s2reply 9s ease-in-out infinite;} @keyframes wcx-s2reply{0%,50%{opacity:0;transform:translateY(6px)}58%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(6px)}} .wcx-stage2__chip{position:absolute; z-index:6; left:clamp(-4px,2vw,30px); top:16%; display:inline-flex; align-items:center; gap:9px; padding:10px 15px; border-radius:999px; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); box-shadow:var(--sh-2); font-size:.8125rem; font-weight:700; color:var(--ink); animation:wcx-hfloat 7s ease-in-out infinite .5s;} .wcx-stage2__chip .d{width:8px; height:8px; border-radius:50%; background:#16A34A; box-shadow:0 0 0 4px rgba(22,163,74,.2); animation:wcx-blink 1.4s steps(2,jump-none) infinite;} @media (max-width:760px){ .wcx-stage2__side--l,.wcx-stage2__side--r,.wcx-stage2__side--phone{display:none;} .wcx-stage2__ai{position:static; width:auto; max-width:360px; margin:18px auto 0; animation:none;} .wcx-stage2__chip{top:6px; left:6px;} } @media (prefers-reduced-motion:reduce){ .wcx-stage2__main,.wcx-stage2__side--l,.wcx-stage2__side--r,.wcx-stage2__side--phone, .wcx-stage2__ai,.wcx-stage2__chip{animation:none;} .wcx-stage2__type{max-width:15em; animation:none; border-color:transparent;} .wcx-stage2__show img{transition:none;} .wcx-stage2__reply{opacity:1; transform:none; animation:none;} .wcx-stage2__chip .d{animation:none;} } .wcx-stage2__cluster [data-focusable]{cursor:zoom-in; transition:transform .55s cubic-bezier(.22,1,.36,1), opacity .4s ease, filter .4s ease, box-shadow .4s ease; outline:none;} .wcx-stage2__cluster.has-focus [data-focusable]:not(.is-focused){opacity:.28; filter:blur(1.5px) saturate(.9);} .wcx-stage2__cluster [data-focusable].is-focused{position:absolute; top:50%; left:50%; right:auto; bottom:auto; margin:0; z-index:40; transform:translate(-50%,-50%) scale(var(--fscale,1.5)); animation:none !important; box-shadow:0 60px 120px -30px rgba(15,23,42,.62); cursor:zoom-out; opacity:1; filter:none;} .wcx-stage2__side--l.is-focused,.wcx-stage2__side--r.is-focused{--fscale:1.95;} .wcx-stage2__side--phone.is-focused{--fscale:1.6;} .wcx-stage2__main.is-focused{--fscale:1.16;} .wcx-stage2__ai.is-focused{--fscale:1.6;} .wcx-stage2__cluster.has-focus::after{content:"Click anywhere to close"; position:absolute; left:50%; bottom:6px; transform:translateX(-50%); font-size:.72rem; font-weight:600; color:var(--ink-55); z-index:41; pointer-events:none;} .wcx-stage2__cluster [data-focusable]:focus-visible{box-shadow:0 0 0 3px rgba(29,78,216,.55);} .wcx-stage2__cluster .wcx-stage2__side,.wcx-stage2__cluster .wcx-stage2__main,.wcx-stage2__cluster .wcx-stage2__ai{cursor:pointer; transition:scale .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease; will-change:scale;} .wcx-stage2__cluster .wcx-stage2__side:hover{animation-play-state:paused; scale:1.3; z-index:50; box-shadow:0 52px 96px -28px rgba(15,23,42,.62);} .wcx-stage2__cluster .wcx-stage2__side--phone:hover{scale:1.24;} .wcx-stage2__cluster .wcx-stage2__main:hover{scale:1.05; z-index:50; box-shadow:0 62px 116px -30px rgba(15,23,42,.55);} .wcx-stage2__cluster .wcx-stage2__ai:hover{animation-play-state:paused; scale:1.12; z-index:50; box-shadow:0 44px 84px -24px rgba(15,23,42,.5);} @media(prefers-reduced-motion:reduce){.wcx-stage2__cluster .wcx-stage2__side:hover,.wcx-stage2__cluster .wcx-stage2__main:hover,.wcx-stage2__cluster .wcx-stage2__ai:hover{scale:1;}} .wcx-stage2__show{position:relative; aspect-ratio:16/9; overflow:hidden; background:#0F1118;} .wcx-stage2__show img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; opacity:0; transition:opacity .6s ease;} .wcx-stage2__show img.is-on{opacity:1;} .wcx-stage2__imv{ position:relative; z-index:3; display:flex; width:fit-content; margin:18px auto 0; align-items:center; gap:8px; padding:11px 18px; border-radius:999px; background:rgba(9,10,14,.9); color:#fff; font-size:.86rem; font-weight:600; line-height:1; text-decoration:none; white-space:nowrap; border:1px solid rgba(255,255,255,.22); box-shadow:0 8px 28px rgba(0,0,0,.28); transition:background .2s ease, transform .2s ease; pointer-events:auto; } .wcx-stage2__imv:hover{background:#000; transform:scale(1.03);} .wcx-stage2__imv:focus-visible{outline:2px solid #0a0a0a; outline-offset:3px;} @media (prefers-reduced-motion:reduce){ .wcx-stage2__imv{transition:none;} .wcx-stage2__imv:hover{transform:none;} } .wcx-stage2__tags{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; max-width:880px; margin:clamp(26px,3.5vw,44px) auto 0; padding:0 20px;} .wcx .wcx-stage2__tag{display:inline-flex; align-items:center; padding:8px 15px; border-radius:999px; background:#fff; border:1px solid var(--hair); font-size:.875rem; font-weight:600; color:var(--ink); cursor:pointer; transition:border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease;} .wcx .wcx-stage2__tag:hover{border-color:var(--blue); color:var(--blue); box-shadow:0 8px 20px -10px rgba(29,78,216,.4);} .wcx .wcx-stage2__tag.is-active{background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 10px 24px -10px rgba(29,78,216,.55);} .wcx-stage2__tags-lbl{width:100%; text-align:center; font-size:.8125rem; font-weight:700; color:var(--ink-55); margin-bottom:2px;} .wcx-bld{position:relative; background:radial-gradient(120% 120% at 28% 0%,#1b2740,#0F1118); padding:18px;} .wcx-bld__canvas{position:relative; width:100%; height:100%; background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 14px 34px rgba(0,0,0,.35);} .wcx-bld{--bld:12s;} .wcx-bld__blk{position:absolute; opacity:0;} @keyframes wcx-bld-chrome{ 0%{opacity:0;transform:translateY(8px) scale(.985)} 4%{opacity:1;transform:none} 90%{opacity:1;transform:none} 95%,100%{opacity:0;transform:translateY(6px) scale(.99)} } @keyframes wcx-bld-rail{ 0%,4%{opacity:0;transform:translateX(-10px)} 9%{opacity:1;transform:none} 90%{opacity:1;transform:none} 95%,100%{opacity:0;transform:translateX(-6px)} } @keyframes wcx-bld-heroin{ 0%,8%{opacity:0;transform:translateY(10px) scale(.985)} 14%{opacity:1;transform:none} 90%{opacity:1;transform:none} 95%,100%{opacity:0;transform:translateY(6px) scale(.99)} } .wcx-bld__header{top:8px; left:8px; right:8px; height:20px; border-radius:6px; background:#F1EFEA; display:flex; align-items:center; gap:6px; padding:0 9px; animation:wcx-bld-chrome var(--bld) cubic-bezier(.22,1,.36,1) infinite;} .wcx-bld__header .logo{width:11px; height:11px; border-radius:50%; background:var(--blue,#1D4ED8);} .wcx-bld__header .nav{height:5px; width:24px; border-radius:3px; background:#D9D5CD;} .wcx-bld__header .nav:nth-child(3){width:18px;} .wcx-bld__rail{top:34px; left:8px; width:26px; bottom:8px; border-radius:7px; background:#F5F3EE; border:1px solid var(--hair,rgba(10,10,10,.08)); display:flex; flex-direction:column; align-items:center; gap:8px; padding:8px 0; animation:wcx-bld-rail var(--bld) cubic-bezier(.22,1,.36,1) infinite;} .wcx-bld__rail .ri{width:16px; height:12px; border-radius:3px; background:#DED9CF;} .wcx-bld__rail .ri--cta{background:linear-gradient(120deg,var(--blue,#1D4ED8),#60A5FA); animation:wcx-bld-railcta var(--bld) ease infinite;} @keyframes wcx-bld-railcta{0%,44%{opacity:1}47%,56%{opacity:.16}60%,90%{opacity:1}95%,100%{opacity:0}} .wcx-bld__hero{top:34px; left:40px; right:8px; height:70px; border-radius:8px; background:linear-gradient(120deg,#DCE4F5,#EEF3FE); overflow:hidden; animation:wcx-bld-heroin var(--bld) cubic-bezier(.22,1,.36,1) infinite;} .wcx-bld__hero::after{content:""; position:absolute; inset:0; z-index:1; background:var(--grad,linear-gradient(135deg,#1D4ED8,#3B82F6,#60A5FA)); mix-blend-mode:multiply; opacity:0; animation:wcx-bldtint var(--bld) ease infinite;} @keyframes wcx-bldtint{0%,20%{opacity:0}25%{opacity:.28}90%{opacity:.28}95%,100%{opacity:0}} .wcx-bld__pic{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; opacity:0; animation:wcx-bldpic var(--bld) cubic-bezier(.22,1,.36,1) infinite;} @keyframes wcx-bldpic{0%,15%{opacity:0;transform:scale(1.05)}21%{opacity:1;transform:none}90%{opacity:1;transform:none}95%,100%{opacity:0;transform:scale(1.01)}} .wcx-bld__hero .htxt{position:absolute; left:12px; top:20px; z-index:2; width:58%; height:10px; border-radius:4px; background:rgba(255,255,255,.9);} .wcx-bld__hero .htxt2{position:absolute; left:12px; top:36px; z-index:2; width:38%; height:8px; border-radius:4px; background:rgba(255,255,255,.7);} .wcx-bld__prods{position:absolute; top:112px; left:40px; right:8px; display:flex; gap:6px;} .wcx-bld__prod{flex:1; border-radius:7px; background:#fff; border:1px solid var(--hair,rgba(10,10,10,.08)); box-shadow:0 3px 10px rgba(15,17,24,.08); padding:4px; opacity:0; transform:translateY(8px) scale(.92);} .wcx-bld__prod .ph{display:block; height:30px; border-radius:5px; overflow:hidden; background:linear-gradient(120deg,#E7ECF7,#F4F1EC);} .wcx-bld__prod .ph img{width:100%; height:100%; object-fit:cover;} .wcx-bld__prod .ph img{object-position:top center;} .wcx-bld__prod .pr{display:block; margin-top:5px; height:7px; width:70%; border-radius:3px; background:var(--blue,#1D4ED8);} .wcx-bld__prod{animation:none;} .wcx-bld__prod1{animation:wcx-bld-prod1 var(--bld) cubic-bezier(.34,1.4,.5,1) infinite;} .wcx-bld__prod2{animation:wcx-bld-prod2 var(--bld) cubic-bezier(.34,1.4,.5,1) infinite;} .wcx-bld__prod3{animation:wcx-bld-prod3 var(--bld) cubic-bezier(.34,1.4,.5,1) infinite;} @keyframes wcx-bld-prod1{0%,27%{opacity:0;transform:translateY(8px) scale(.92)}33%{opacity:1;transform:none}90%{opacity:1;transform:none}95%,100%{opacity:0;transform:translateY(6px) scale(.96)}} @keyframes wcx-bld-prod2{0%,30%{opacity:0;transform:translateY(8px) scale(.92)}36%{opacity:1;transform:none}90%{opacity:1;transform:none}95%,100%{opacity:0;transform:translateY(6px) scale(.96)}} @keyframes wcx-bld-prod3{0%,33%{opacity:0;transform:translateY(8px) scale(.92)}39%{opacity:1;transform:none}90%{opacity:1;transform:none}95%,100%{opacity:0;transform:translateY(6px) scale(.96)}} .wcx-bld__drag{position:absolute; left:auto; right:12px; top:168px; width:86px; height:20px; border-radius:999px; z-index:5; opacity:0; animation:wcx-bld-dragin var(--bld) cubic-bezier(.22,1,.36,1) infinite;} .wcx-bld__drag .dl{position:absolute; inset:0; border-radius:999px; background:var(--grad,linear-gradient(135deg,#1D4ED8,#3B82F6)); box-shadow:0 6px 16px -6px rgba(29,78,216,.7);} .wcx-bld__drag::after{content:""; position:absolute; inset:-4px; border-radius:999px; border:1.5px dashed rgba(29,78,216,.55); opacity:0; animation:wcx-bld-dragring var(--bld) ease infinite;} @keyframes wcx-bld-dragin{ 0%,46%{opacity:0; transform:translate(-160px,-124px) scale(.8)} 49%{opacity:.9; transform:translate(-160px,-124px) scale(.86)} 58%{opacity:1; transform:translate(0,0) scale(1)} 90%{opacity:1; transform:none} 95%,100%{opacity:0; transform:translateY(5px) scale(.97)} } @keyframes wcx-bld-dragring{0%,50%{opacity:0}54%,59%{opacity:1}65%,100%{opacity:0}} .wcx-bld__swatch{position:absolute; z-index:6; top:40px; right:12px; display:flex; gap:5px; opacity:0; animation:wcx-bldswatch var(--bld) cubic-bezier(.34,1.4,.5,1) infinite;} .wcx-bld__swatch i{width:13px; height:13px; border-radius:4px; box-shadow:0 2px 6px rgba(0,0,0,.25);} .wcx-bld__swatch i:nth-child(1){background:#1D4ED8;} .wcx-bld__swatch i:nth-child(2){background:#60A5FA;} .wcx-bld__swatch i:nth-child(3){background:#0F1118;} @keyframes wcx-bldswatch{0%,66%{opacity:0;transform:translateY(6px) scale(.9)}71%{opacity:1;transform:none}90%{opacity:1;transform:none}95%,100%{opacity:0;transform:translateY(4px)}} .wcx-bld__cursor{position:absolute; z-index:7; left:0; top:0; width:19px; height:19px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); animation:wcx-bldcursor var(--bld) cubic-bezier(.5,0,.2,1) infinite;} @keyframes wcx-bldcursor{ 0%,6%{transform:translate(40px,30px)} 13%{transform:translate(120px,60px)} 20%{transform:translate(120px,60px)} 26%{transform:translate(96px,140px)} 39%{transform:translate(96px,140px)} 45%{transform:translate(20px,140px)} 50%{transform:translate(20px,140px)} 57%{transform:translate(196px,176px)} 64%{transform:translate(196px,176px)} 69%{transform:translate(150px,52px)} 100%{transform:translate(150px,52px)} } .wcx-bld__click{position:absolute; z-index:6; left:0; top:0; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; border:2px solid rgba(29,78,216,.9); opacity:0; animation:wcx-bld-click var(--bld) ease-out infinite;} @keyframes wcx-bld-click{ 0%,45.5%{opacity:0; transform:translate(22px,142px) scale(.3)} 46.5%{opacity:.9; transform:translate(22px,142px) scale(.4)} 50%{opacity:0; transform:translate(22px,142px) scale(1.5)} 57.5%{opacity:0; transform:translate(198px,178px) scale(.3)} 58.5%{opacity:.9; transform:translate(198px,178px) scale(.4)} 62%,100%{opacity:0; transform:translate(198px,178px) scale(1.5)} } @media (prefers-reduced-motion:reduce){ .wcx-bld__blk,.wcx-bld__prod,.wcx-bld__drag,.wcx-bld__swatch,.wcx-bld__cursor, .wcx-bld__pic,.wcx-bld__hero::after,.wcx-bld__drag::after,.wcx-bld__rail .ri--cta, .wcx-bld__click{animation:none;} .wcx-bld__click{opacity:0;} .wcx-bld__blk,.wcx-bld__prod{opacity:1; transform:none;} .wcx-bld__pic{opacity:1;} .wcx-bld__hero::after{opacity:.28;} .wcx-bld__rail .ri--cta{opacity:1;} .wcx-bld__drag{opacity:1; transform:none;} .wcx-bld__drag::after{opacity:0;} .wcx-bld__swatch{opacity:1; transform:none;} .wcx-bld__cursor{transform:translate(150px,52px);} } .wcx-ticker{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 6px; margin-top:clamp(30px,4vw,46px);} .wcx-ticker__it{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:#fff; border:1px solid var(--hair); font-size:.875rem; font-weight:600; color:var(--ink); white-space:nowrap;} .wcx-ticker__it b{font-weight:800; color:var(--blue); font-size:.75rem; letter-spacing:.04em;} .wcx-ticker__sep{color:var(--ink-45,#b9b5ac); font-size:.9rem;} .wcx-ticker__foot{margin-top:14px; text-align:center; font-size:.875rem; color:var(--ink-55);} .wcx-ticker__foot a{color:var(--blue); font-weight:600; text-decoration:none;} .wcx-ticker__foot a:hover{text-decoration:underline;} @media(max-width:700px){.wcx-ticker{justify-content:flex-start;} .wcx-ticker__sep{display:none;} .wcx-ticker__it{font-size:.8125rem;}} .wcx-anchor img,.wcx-phone img{animation:wcx-kenburns 20s ease-in-out infinite alternate;} .wcx-phone img{animation-duration:24s; animation-delay:1s;} .wcx-face img{animation:wcx-kenburns 16s ease-in-out infinite alternate;} .wcx-face--2 img{animation-duration:19s; animation-delay:.6s;} .wcx-face--3 img{animation-duration:22s; animation-delay:1.1s;} .wcx-face--4 img{animation-duration:18s; animation-delay:.3s;} .wcx-face--5 img{animation-duration:21s; animation-delay:1.6s;} .wcx-face--6 img{animation-duration:17s; animation-delay:.9s;} .wcx-face--7 img{animation-duration:23s; animation-delay:1.9s;} .wcx-face--8 img{animation-duration:20s; animation-delay:.4s;} @media (prefers-reduced-motion:reduce){ .wcx-anchor img,.wcx-phone img,.wcx-face img{animation:none !important;} } .wcx-promise{padding:clamp(70px,9vw,120px) 0; background: radial-gradient(60% 70% at 15% 0%, rgba(29,78,216,.24), transparent 70%), radial-gradient(50% 60% at 90% 100%, rgba(96,165,250,.12), transparent 70%), var(--dark);} .wcx-promise__eyebrow{display:block; text-align:center; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#60A5FA; margin:0 0 14px;} .wcx-promise h2{margin:0; text-align:center; font-size:clamp(1.8rem,3.6vw,2.9rem); font-weight:800; letter-spacing:-.03em; line-height:1.08; color:var(--ivory);} .wcx-promise h2 b{color:#60A5FA; font-weight:800;} .wcx-promise__grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:38px;} @media (max-width:960px){.wcx-promise__grid{grid-template-columns:repeat(2,minmax(0,1fr));}} @media (max-width:560px){.wcx-promise__grid{grid-template-columns:1fr;}} .wcx-promise__card{display:flex; align-items:flex-start; gap:13px; padding:20px 21px; border-radius:18px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.12); transition:transform .2s ease, border-color .2s ease, background .2s ease;} .wcx-promise__card:hover{transform:translateY(-3px); border-color:rgba(96,165,250,.5); background:rgba(255,255,255,.07);} .wcx-promise__ic{flex:none; width:26px; height:26px; display:grid; place-items:center; color:#60A5FA; font-weight:800; font-size:.95rem; letter-spacing:-.03em; font-variant-numeric:tabular-nums;} .wcx-promise__ic svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;} .wcx-promise__card b{display:block; font-size:.96rem; color:var(--ivory); letter-spacing:-.01em; line-height:1.3;} .wcx-promise__d{display:block; margin-top:5px; font-size:.83rem; line-height:1.55; color:rgba(251,250,247,.66);} .wcx-promise__cta{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px; margin-top:34px;} .wcx-promise__link{display:inline-flex; align-items:center; padding:14px 24px; border-radius:12px; border:1.5px solid rgba(255,255,255,.25); color:var(--ivory); font-weight:600; font-size:.98rem; text-decoration:none; transition:border-color .15s ease, background .15s ease;} .wcx-promise__link:hover{border-color:#60A5FA; background:rgba(96,165,250,.1);} .wcx-promise__foot{margin:20px 0 0; text-align:center; font-size:.8rem; line-height:1.55; color:rgba(251,250,247,.55);} .wcx-leadcap{position:relative; aspect-ratio:16/11; overflow:hidden; background:#0F1118;} .wcx-leadcap__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; filter:blur(6px) brightness(.82); transform:scale(1.06);} .wcx-leadcap__tint{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(29,78,216,.26),rgba(15,17,24,.52));} .wcx-leadcap__chat{position:absolute; z-index:3; left:5%; top:6%; width:min(62%,352px); background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 34px 64px -22px rgba(0,0,0,.55);} .wcx-leadcap__chd{display:flex; align-items:center; gap:9px; padding:11px 14px; background:var(--blue); color:#fff; font-size:.82rem; font-weight:700;} .wcx-leadcap__chd .av{width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.18); display:grid; place-items:center; font-size:.66rem; font-weight:800;} .wcx-leadcap__chd .st{margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:.66rem; font-weight:600; opacity:.92;} .wcx-leadcap__chd .st::before{content:""; width:7px; height:7px; border-radius:50%; background:#4ADE80;} .wcx-leadcap__cbody{padding:13px 14px; display:flex; flex-direction:column;} .wcx-leadcap__msg{max-width:88%; padding:9px 12px; border-radius:14px; font-size:.8rem; line-height:1.38; margin-bottom:9px; opacity:0;} .wcx-leadcap__msg--in{align-self:flex-start; background:#F1EFEA; color:var(--ink); border-bottom-left-radius:4px; animation:wcx-lc-in 15s ease-in-out infinite;} .wcx-leadcap__msg--out{align-self:flex-end; background:var(--blue); color:#fff; border-bottom-right-radius:4px; animation:wcx-lc-out 15s ease-in-out infinite;} .wcx-leadcap__typing{align-self:flex-start; display:inline-flex; gap:5px; padding:11px 12px; border-radius:14px; background:#F1EFEA; margin-bottom:9px; opacity:0; animation:wcx-lc-type 15s ease-in-out infinite;} .wcx-leadcap__typing i{width:6px; height:6px; border-radius:50%; background:var(--ink-55); animation:wcx-chbounce 1.1s ease-in-out infinite;} .wcx-leadcap__typing i:nth-child(2){animation-delay:.15s;} .wcx-leadcap__typing i:nth-child(3){animation-delay:.3s;} .wcx-leadcap__input{display:flex; align-items:center; gap:8px; margin-top:2px; padding:7px 9px; border:1px solid var(--hair); border-radius:12px; opacity:0; animation:wcx-lc-input 15s ease-in-out infinite;} .wcx-leadcap__field{flex:1; font-size:.78rem; color:var(--ink); min-height:1.25em; overflow:hidden;} .wcx-leadcap__field span{display:inline-block; width:max-content; max-width:0; overflow:hidden; white-space:nowrap; vertical-align:bottom; border-right:2px solid var(--blue); animation:wcx-lc-typefield 15s steps(28,end) infinite, wcx-caret .8s step-end infinite;} .wcx-leadcap__send{width:28px; height:28px; border-radius:8px; background:var(--blue); display:grid; place-items:center; flex:none; animation:wcx-lc-send 15s ease-in-out infinite;} .wcx-leadcap__send svg{width:14px; height:14px; color:#fff;} .wcx-leadcap__done{display:flex; align-items:center; gap:8px; margin-top:9px; padding:8px 11px; border-radius:11px; background:rgba(22,163,74,.12); color:#147C3B; font-size:.76rem; font-weight:800; opacity:0; transform:scale(.9); animation:wcx-lc-done 15s ease-in-out infinite;} .wcx-leadcap__done svg{width:15px; height:15px; flex:none;} .wcx-leadcap__crm{position:absolute; z-index:5; right:4%; bottom:6%; width:min(52%,296px); background:#fff; border:1px solid var(--hair); border-radius:14px; padding:12px; box-shadow:0 30px 58px -20px rgba(0,0,0,.55);} .wcx-leadcap__crmhd{display:flex; align-items:center; justify-content:space-between; font-size:.66rem; font-weight:800; color:var(--ink); margin-bottom:9px; text-transform:uppercase; letter-spacing:.06em;} .wcx-leadcap__crmhd span{color:var(--ink-55); font-weight:600; text-transform:none; letter-spacing:0;} .wcx-leadcap__lead{display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:10px; font-size:.74rem;} .wcx-leadcap__lead .ic{width:26px; height:26px; border-radius:50%; background:var(--blue-wash); color:var(--blue); display:grid; place-items:center; font-weight:800; font-size:.68rem; flex:none;} .wcx-leadcap__lead b{display:block; color:var(--ink); line-height:1.15;} .wcx-leadcap__lead small{color:var(--ink-55);} .wcx-leadcap__lead--old{background:#F7F5F0;} .wcx-leadcap__lead--new{background:var(--blue-wash); border:1px solid var(--blue-line); margin-top:7px; opacity:0; transform:translateY(12px); animation:wcx-lc-crm 15s ease-in-out infinite;} .wcx-leadcap__tag{margin-left:auto; padding:3px 8px; border-radius:999px; background:var(--blue); color:#fff; font-size:.58rem; font-weight:800; flex:none;} @keyframes wcx-lc-in{0%,6%{opacity:0;transform:translateY(6px)}9%{opacity:1;transform:none}96%{opacity:1}99%,100%{opacity:0}} @keyframes wcx-lc-type{0%,16%{opacity:0}19%{opacity:1}30%{opacity:1}33%,100%{opacity:0}} @keyframes wcx-lc-out{0%,31%{opacity:0;transform:translateY(6px)}35%{opacity:1;transform:none}96%{opacity:1}99%,100%{opacity:0}} @keyframes wcx-lc-input{0%,40%{opacity:0}44%{opacity:1}96%{opacity:1}99%,100%{opacity:0}} @keyframes wcx-lc-typefield{0%,45%{max-width:0}60%{max-width:20em}96%{max-width:20em}100%{max-width:0}} @keyframes wcx-lc-send{0%,61%{transform:scale(1);opacity:.6}64%{transform:scale(.86)}67%{transform:scale(1);opacity:1}96%{opacity:1}100%{opacity:.6}} @keyframes wcx-lc-done{0%,64%{opacity:0;transform:scale(.9)}69%{opacity:1;transform:scale(1)}96%{opacity:1}99%,100%{opacity:0}} @keyframes wcx-lc-crm{0%,68%{opacity:0;transform:translateY(12px)}74%{opacity:1;transform:none}96%{opacity:1}99%,100%{opacity:0}} @media (max-width:520px){ .wcx-leadcap__crm{position:static; width:auto; margin:0; border-radius:0; border:0; border-top:1px solid var(--hair); box-shadow:none;} .wcx-leadcap{aspect-ratio:auto;} .wcx-leadcap__chat{position:static; width:auto; left:auto; top:auto; border-radius:0;} .wcx-leadcap__bg,.wcx-leadcap__tint{display:none;} } @media (prefers-reduced-motion:reduce){ .wcx-leadcap__msg,.wcx-leadcap__input,.wcx-leadcap__done,.wcx-leadcap__lead--new,.wcx-leadcap__send{animation:none; opacity:1; transform:none;} .wcx-leadcap__typing{display:none;} .wcx-leadcap__typing i{animation:none;} .wcx-leadcap__field span{animation:none; max-width:20em; border-color:transparent;} .wcx-leadcap__bg{transform:none;} } .wcx-diy{padding:clamp(70px,9vw,124px) 0; background:var(--ivory);} .wcx-diy__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center;} .wcx-diy__h{font-size:clamp(2.1rem,5vw,4rem); font-weight:800; letter-spacing:-.035em; line-height:1.04; color:var(--ink); margin:22px 0 0;} .wcx-diy__h b{color:var(--blue); font-weight:800;} .wcx-diy__sub{margin:34px 0 0; font-size:1.05rem; line-height:1.55; color:var(--ink-60); max-width:52ch;} .wcx-diy__labels{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:26px;} .wcx-diy__labels span{font-size:.72rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-55); padding:0 4px;} .wcx-diy__labels span:last-child{color:var(--blue);} .wcx-diy__vs{margin-top:8px; display:grid; gap:8px;} .wcx-diy__row{display:grid; grid-template-columns:1fr 1fr; gap:10px;} .wcx-diy__cell{display:flex; align-items:center; gap:9px; padding:11px 14px; border-radius:12px; font-size:.9375rem; line-height:1.35;} .wcx-diy__cell--them{background:#F0EDE6; color:var(--ink-55);} .wcx-diy__cell--us{background:#fff; border:1px solid var(--blue-line); color:var(--ink); font-weight:600; box-shadow:var(--sh-1);} .wcx-diy__ic{flex:none; width:18px; height:18px; border-radius:50%; display:grid; place-items:center;} .wcx-diy__ic svg{width:10px; height:10px;} .wcx-diy__ic--x{background:#DDD9D0; color:#8a867d;} .wcx-diy__ic--c{background:rgba(29,78,216,.12); color:var(--blue);} .wcx-diy__cta{display:flex; flex-wrap:wrap; gap:16px 22px; align-items:center; margin-top:30px;} .wcx-diy__link{display:inline-flex; align-items:center; gap:6px; font-size:.98rem; font-weight:700; color:var(--blue); text-decoration:none;} .wcx-diy__link:hover{text-decoration:underline;} .wcx-diy__links{display:inline-flex; flex-wrap:wrap; align-items:center; gap:10px;} .wcx-diy__links-sep{color:var(--ink-55); font-size:.98rem;} .wcx-diy__link--soft{font-weight:500; color:var(--ink-60);} .wcx-diy__link--soft:hover{color:var(--blue);} .wcx-diy__proof{position:relative; display:flex; justify-content:center;} .wcx-diy__phone{width:min(360px,100%); background:#fff; border:1px solid var(--hair); border-radius:22px; box-shadow:0 34px 70px -28px rgba(15,23,42,.4); overflow:hidden;} .wcx-diy__phd{display:flex; align-items:center; gap:11px; padding:14px 16px; border-bottom:1px solid var(--hair); background:#FBFAF7;} .wcx-diy__phd .av{width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--grad); color:#fff; font-weight:800; font-size:.95rem;} .wcx-diy__phd b{display:block; font-size:.9rem; color:var(--ink); line-height:1.2;} .wcx-diy__phd small{display:block; font-size:.72rem; color:var(--ink-55); margin-top:2px;} .wcx-diy__phd .st{margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:.7rem; font-weight:700; color:#047857;} .wcx-diy__phd .st i{width:7px; height:7px; border-radius:50%; background:#10B981;} .wcx-diy__thread{padding:16px 16px 18px; display:flex; flex-direction:column; gap:10px; min-height:250px;} .wcx-diy__msg{max-width:85%; padding:10px 14px; border-radius:16px; font-size:.875rem; line-height:1.4;} .wcx-diy__msg--me{align-self:flex-end; background:var(--blue); color:#fff; border-bottom-right-radius:5px; opacity:0; animation:wcx-diy-in 11s ease infinite;} .wcx-diy__msg--team{align-self:flex-start; background:#F1F0EC; color:var(--ink); border-bottom-left-radius:5px; opacity:0; animation:wcx-diy-in 11s ease infinite; animation-delay:3.4s;} .wcx-diy__typing{align-self:flex-start; display:inline-flex; gap:4px; padding:11px 14px; border-radius:16px; border-bottom-left-radius:5px; background:#F1F0EC; opacity:0; animation:wcx-diy-typing 11s ease infinite;} .wcx-diy__typing i{width:6px; height:6px; border-radius:50%; background:#b7b3aa; animation:wcx-diy-dot 1s ease-in-out infinite;} .wcx-diy__typing i:nth-child(2){animation-delay:.15s;} .wcx-diy__typing i:nth-child(3){animation-delay:.3s;} .wcx-diy__done{align-self:center; display:inline-flex; align-items:center; gap:8px; margin-top:6px; padding:9px 16px; border-radius:999px; background:rgba(5,150,105,.1); color:#047857; font-size:.8125rem; font-weight:700; opacity:0; transform:scale(.92); animation:wcx-diy-done 11s cubic-bezier(.22,1,.36,1) infinite;} .wcx-diy__done svg{width:14px; height:14px;} @keyframes wcx-diy-in{0%{opacity:0; transform:translateY(8px)}4%,88%{opacity:1; transform:none}95%,100%{opacity:0; transform:translateY(8px)}} @keyframes wcx-diy-typing{0%,10%{opacity:0}14%,28%{opacity:1}31%,100%{opacity:0}} @keyframes wcx-diy-dot{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} @keyframes wcx-diy-done{0%,52%{opacity:0; transform:scale(.92)}57%,88%{opacity:1; transform:scale(1)}95%,100%{opacity:0; transform:scale(.92)}} @media(max-width:900px){.wcx-diy__grid{grid-template-columns:1fr;} .wcx-diy__proof{margin-top:8px;}} @media(max-width:560px){.wcx-diy__row{grid-template-columns:1fr;} .wcx-diy__labels{display:none;}} @media(prefers-reduced-motion:reduce){ .wcx-diy__msg--me,.wcx-diy__msg--team,.wcx-diy__done{animation:none; opacity:1; transform:none;} .wcx-diy__typing{display:none;} } .wcx-learn{display:inline-flex; align-items:center; gap:5px; margin-top:18px; font-size:.9rem; font-weight:700; color:var(--blue); text-decoration:none;} .wcx-learn:hover{text-decoration:underline;} .wcx-learn span{transition:transform .2s ease;} .wcx-learn:hover span{transform:translateX(3px);} .wcx-checkcta{display:inline-flex; align-items:center; gap:8px; margin-top:24px; padding:12px 22px; border-radius:999px; border:1.5px solid var(--blue); color:var(--blue); font-weight:700; font-size:.95rem; text-decoration:none; transition:background .2s ease, color .2s ease, box-shadow .2s ease;} .wcx-checkcta:hover{background:var(--blue); color:#fff; box-shadow:0 12px 26px -10px rgba(29,78,216,.6);} .wcx-checkcta span{transition:transform .2s ease;} .wcx-checkcta:hover span{transform:translateX(3px);} .wcx-anx{position:relative; width:100%; aspect-ratio:16/10; background:radial-gradient(120% 100% at 18% 0%, #1a2438, #0F1118); color:#fff; padding:clamp(14px,2vw,20px); display:flex; flex-direction:column; gap:clamp(10px,1.4vw,15px);} .wcx-anx__hd{display:flex; align-items:center; justify-content:space-between;} .wcx-anx__title{font-size:.95rem; font-weight:700; letter-spacing:-.01em;} .wcx-anx__live{display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:800; color:#86efac;} .wcx-anx__live i{width:7px; height:7px; border-radius:50%; background:#22c55e; animation:wcx-anxpulse 1.7s infinite;} @keyframes wcx-anxpulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}} .wcx-anx__kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:9px;} .wcx-anx__kpi{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:11px; padding:10px 12px;} .wcx-anx__kpi b{display:block; font-size:clamp(1.1rem,2vw,1.5rem); font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1;} .wcx-anx__kpi span{display:block; font-size:.64rem; color:rgba(255,255,255,.6); margin-top:5px; line-height:1.3;} .wcx-anx__kpi em{font-style:normal; font-size:.64rem; font-weight:800; color:#93C5FD;} .wcx-anx__chart{position:relative; flex:1; min-height:0;} .wcx-anx__chart svg{position:absolute; inset:0; width:100%; height:100%;} .wcx-anx__area{opacity:0; transition:opacity .8s ease .8s;} .wcx-anx__line{fill:none; stroke:#93C5FD; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:640; stroke-dashoffset:640;} .wcx-anx__dot{opacity:0; transform-box:fill-box; transform-origin:center;} .wcx-stage.is-in .wcx-anx__line{animation:wcx-anxdraw 1.6s cubic-bezier(.4,0,.2,1) .3s forwards;} .wcx-stage.is-in .wcx-anx__area{opacity:1;} .wcx-stage.is-in .wcx-anx__dot{animation:wcx-dotin .4s ease 1.7s forwards;} @keyframes wcx-anxdraw{to{stroke-dashoffset:0;}} .wcx-anx__feed{position:relative; height:24px; overflow:hidden;} .wcx-anx__item{position:absolute; inset:0; display:flex; align-items:center; gap:8px; font-size:.72rem; color:rgba(255,255,255,.82); opacity:0; animation:wcx-anxfeed 9s infinite;} .wcx-anx__item:nth-child(2){animation-delay:3s;} .wcx-anx__item:nth-child(3){animation-delay:6s;} .wcx-anx__g{color:#4ade80; font-weight:800;} @keyframes wcx-anxfeed{0%{opacity:0; transform:translateY(8px)}4%{opacity:1; transform:none}29%{opacity:1; transform:none}33%{opacity:0; transform:translateY(-8px)}100%{opacity:0;}} @media(prefers-reduced-motion:reduce){.wcx-anx__line{stroke-dashoffset:0;} .wcx-anx__area{opacity:1;} .wcx-anx__dot{opacity:1;} .wcx-anx__item{animation:none;} .wcx-anx__item:first-child{opacity:1;} .wcx-anx__live i{animation:none;}} .wcx-bkp{position:relative; width:100%; aspect-ratio:16/10; display:grid; grid-template-columns:1.02fr .98fr; background:linear-gradient(180deg,#f7f9fc,#eef2f8);} .wcx-bkp__sched{padding:clamp(13px,1.7vw,20px); display:flex; flex-direction:column; gap:9px; background:#fff; border-right:1px solid var(--hair);} .wcx-bkp__hd b{display:block; font-size:.95rem; color:var(--ink); letter-spacing:-.01em;} .wcx-bkp__hd span{font-size:.7rem; color:var(--ink-55);} .wcx-bkp__label{font-size:.66rem; font-weight:800; color:var(--blue); text-transform:uppercase; letter-spacing:.08em;} .wcx-bkp__slots{display:grid; grid-template-columns:repeat(3,1fr); gap:7px;} .wcx-bkp__slots span{text-align:center; padding:8px 0; border-radius:9px; border:1px solid var(--blue-line); background:#fff; font-size:.78rem; font-weight:600; color:var(--ink);} .wcx-bkp__pick{animation:wcx-bkp-pick 8s infinite;} @keyframes wcx-bkp-pick{0%,16%{background:#fff; color:var(--ink); border-color:var(--blue-line);}24%,100%{background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:0 8px 16px -8px rgba(29,78,216,.6);}} .wcx-bkp__btn{margin-top:auto; text-align:center; padding:10px; border-radius:10px; background:var(--blue); color:#fff; font-weight:700; font-size:.82rem; animation:wcx-bkp-btn 8s infinite;} @keyframes wcx-bkp-btn{0%,30%{transform:scale(1);}36%{transform:scale(.95);}42%,100%{transform:scale(1);}} .wcx-bkp__ok{display:flex; align-items:center; gap:7px; font-size:.75rem; font-weight:700; color:#15803D; opacity:0; animation:wcx-bkp-ok 8s infinite;} .wcx-bkp__ok span{display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:#dcfce7; color:#15803D; font-size:11px;} @keyframes wcx-bkp-ok{0%,40%{opacity:0; transform:translateY(4px);}48%,92%{opacity:1; transform:none;}100%{opacity:0;}} .wcx-bkp__cal{padding:clamp(13px,1.7vw,20px); display:flex; flex-direction:column; gap:7px;} .wcx-bkp__cal-hd{font-size:.88rem; font-weight:800; color:var(--ink);} .wcx-bkp__dow{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; font-size:.58rem; color:var(--ink-55); text-align:center; font-weight:700;} .wcx-bkp__grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; flex:1;} .wcx-bkp__grid span{position:relative; display:flex; justify-content:center; padding-top:4px; border-radius:7px; background:#fff; border:1px solid var(--hair); font-size:.62rem; color:var(--ink-55);} .wcx-bkp__target{color:var(--ink); font-weight:800;} .wcx-bkp__appt{position:absolute; left:3px; right:3px; bottom:3px; font-style:normal; font-size:.5rem; font-weight:700; color:#fff; background:var(--blue); border-radius:4px; padding:2px 2px; text-align:center; opacity:0; transform:translateY(6px) scale(.9); animation:wcx-bkp-appt 8s infinite;} @keyframes wcx-bkp-appt{0%,48%{opacity:0; transform:translateY(6px) scale(.9);}56%,92%{opacity:1; transform:none;}100%{opacity:0;}} @media(prefers-reduced-motion:reduce){.wcx-bkp__pick,.wcx-bkp__btn,.wcx-bkp__ok,.wcx-bkp__appt{animation:none;}.wcx-bkp__pick{background:var(--blue);color:#fff;border-color:var(--blue);}.wcx-bkp__ok{opacity:1;}.wcx-bkp__appt{opacity:1;transform:none;}} @media(max-width:560px){.wcx-bkp{grid-template-columns:1fr;}.wcx-bkp__cal{display:none;}.wcx-bkp__sched{border-right:0;}} .wcx-dash { --wcx-dash-green: #047c57; --wcx-dash-amber: #d97706; --wcx-dash-radius: 16px; padding: 96px 24px; background: var(--ivory, #faf7f2); color: var(--ink, #0a0a0a); box-sizing: border-box; overflow: hidden; } .wcx-dash *, .wcx-dash *::before, .wcx-dash *::after { box-sizing: border-box; } .wcx-dash__inner { max-width: 1200px; margin: 0 auto; } .wcx-dash__head { max-width: 640px; margin-bottom: 48px; } .wcx-dash__eyebrow { margin: 0 0 20px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue, #1d4ed8); } .wcx-dash__h2 { margin: 0 0 26px; font-size: clamp(28px, 4vw, 44px); line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; } .wcx-dash__lead { margin: 0 0 22px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.55; color: var(--ink-60, rgba(10,10,10,0.6)); } .wcx-dash__cta { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--blue, #1d4ed8); text-decoration: none; } .wcx-dash__cta-arrow { width: 16px; height: 16px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.25s ease; } .wcx-dash__cta:hover .wcx-dash__cta-arrow { transform: translateX(3px) rotate(45deg); } .wcx-dash__stage { position: relative; padding-bottom: 40px; padding-left: 84px; } .wcx-dash__app { position: relative; border-radius: 20px; background: #ffffff; border: 1px solid var(--hair, rgba(10,10,10,0.08)); box-shadow: 0 30px 70px -30px rgba(10,10,10,0.28); overflow: hidden; transition: transform 0.4s ease, box-shadow 0.4s ease; will-change: transform; } .wcx-dash__app:hover { transform: translateY(-6px); box-shadow: 0 42px 90px -34px rgba(10,10,10,0.34); } .wcx-dash__topbar { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--hair, rgba(10,10,10,0.08)); background: #fbfbfc; } .wcx-dash__dots { display: flex; gap: 7px; } .wcx-dash__dots span { width: 11px; height: 11px; border-radius: 50%; background: var(--hair, rgba(10,10,10,0.14)); } .wcx-dash__addressbar { flex: 1; display: flex; align-items: center; gap: 8px; max-width: 320px; margin: 0 auto; padding: 7px 14px; border-radius: 8px; background: #f1f0ee; font-size: 12.5px; color: var(--ink-55, rgba(10,10,10,0.55)); } .wcx-dash__lock { width: 9px; height: 8px; border: 1.5px solid currentColor; border-radius: 2px; position: relative; opacity: 0.7; } .wcx-dash__lock::before { content: ""; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; border: 1.5px solid currentColor; border-bottom: none; border-radius: 3px 3px 0 0; } .wcx-dash__avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--grad, linear-gradient(135deg, #1d4ed8, #60a5fa)); } .wcx-dash__body { display: flex; } .wcx-dash__side { width: 200px; flex-shrink: 0; padding: 18px 14px; border-right: 1px solid var(--hair, rgba(10,10,10,0.08)); background: #fcfcfd; } .wcx-dash__brand { display: flex; align-items: center; gap: 9px; padding: 0 8px 18px; } .wcx-dash__brand-mark { width: 22px; height: 22px; border-radius: 6px; background: var(--blue, #1d4ed8); } .wcx-dash__brand-word { width: 84px; height: 9px; border-radius: 4px; background: var(--ink, #0a0a0a); opacity: 0.85; } .wcx-dash__navlist { list-style: none; margin: 0; padding: 0; } .wcx-dash__navlist li { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 8px; font-size: 13.5px; color: var(--ink-60, rgba(10,10,10,0.6)); font-weight: 500; } .wcx-dash__navlist li.is-active { background: var(--blue-wash, rgba(29,78,216,0.08)); color: var(--blue, #1d4ed8); font-weight: 600; } .wcx-dash__nav-ico { width: 15px; height: 15px; border-radius: 4px; background: var(--hair, rgba(10,10,10,0.16)); flex-shrink: 0; } .wcx-dash__navlist li.is-active .wcx-dash__nav-ico { background: var(--blue, #1d4ed8); } .wcx-dash__main { flex: 1; min-width: 0; padding: 22px 24px 26px; background: #fafafb; } .wcx-dash__welcome { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; } .wcx-dash__hello { margin: 0 0 3px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; } .wcx-dash__sub { margin: 0; font-size: 13px; color: var(--ink-55, rgba(10,10,10,0.55)); } .wcx-dash__date { font-size: 12.5px; color: var(--ink-55, rgba(10,10,10,0.55)); padding: 6px 12px; border: 1px solid var(--hair, rgba(10,10,10,0.08)); border-radius: 8px; background: #fff; } .wcx-dash__card { background: #fff; border: 1px solid var(--hair, rgba(10,10,10,0.08)); border-radius: var(--wcx-dash-radius); padding: 16px 18px; } .wcx-dash__card + .wcx-dash__card { margin-top: 14px; } .wcx-dash__card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .wcx-dash__card-title { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; } .wcx-dash__live { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: rgba(5,150,105,0.10); color: var(--wcx-dash-green); font-size: 12px; font-weight: 600; } .wcx-dash__live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wcx-dash-green); animation: wcx-dash-pulse 1.8s ease-in-out infinite; } .wcx-dash__live-roll { position: relative; display: inline-block; width: 2ch; height: 1.05em; overflow: hidden; vertical-align: bottom; } .wcx-dash__live-num { position: absolute; left: 0; right: 0; text-align: right; opacity: 0; transform: translateY(100%); animation: wcx-dash-roll 10s ease-in-out infinite; } .wcx-dash__live-num:nth-child(1) { animation-delay: 0s; } .wcx-dash__live-num:nth-child(2) { animation-delay: 2s; } .wcx-dash__live-num:nth-child(3) { animation-delay: 4s; } .wcx-dash__live-num:nth-child(4) { animation-delay: 6s; } .wcx-dash__live-num:nth-child(5) { animation-delay: 8s; } .wcx-dash__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .wcx-dash__stat { padding: 12px 14px; border-radius: 12px; background: #fafafb; border: 1px solid var(--hair, rgba(10,10,10,0.06)); } .wcx-dash__stat-label { margin: 0 0 6px; font-size: 12px; color: var(--ink-55, rgba(10,10,10,0.55)); } .wcx-dash__stat-num { margin: 0 0 4px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .wcx-dash__stat-delta { margin: 0; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--wcx-dash-green); } .wcx-dash__up { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid var(--wcx-dash-green); } .wcx-dash__spark { display: flex; align-items: flex-end; gap: 6px; height: 52px; margin-top: 16px; padding-top: 6px; } .wcx-dash__spark span { flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px; background: var(--blue-line, rgba(29,78,216,0.28)); transform-origin: bottom; animation: wcx-dash-bar 2.6s ease-in-out infinite; } .wcx-dash__spark span:last-child { background: var(--blue, #1d4ed8); } .wcx-dash__spark span:nth-child(1) { animation-delay: 0.00s; } .wcx-dash__spark span:nth-child(2) { animation-delay: 0.12s; } .wcx-dash__spark span:nth-child(3) { animation-delay: 0.24s; } .wcx-dash__spark span:nth-child(4) { animation-delay: 0.36s; } .wcx-dash__spark span:nth-child(5) { animation-delay: 0.48s; } .wcx-dash__spark span:nth-child(6) { animation-delay: 0.60s; } .wcx-dash__spark span:nth-child(7) { animation-delay: 0.72s; } .wcx-dash__spark span:nth-child(8) { animation-delay: 0.84s; } .wcx-dash__spark span:nth-child(9) { animation-delay: 0.96s; } .wcx-dash__spark span:nth-child(10) { animation-delay: 1.08s; } .wcx-dash__spark span:nth-child(11) { animation-delay: 1.20s; } .wcx-dash__spark span:nth-child(12) { animation-delay: 1.32s; } .wcx-dash__row { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; margin-top: 14px; } .wcx-dash__row .wcx-dash__card { margin-top: 0; } .wcx-dash__card--feed { display: flex; flex-direction: column; } .wcx-dash__feed-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--wcx-dash-green); } .wcx-dash__feed-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wcx-dash-green); animation: wcx-dash-pulse 1.8s ease-in-out infinite; } .wcx-dash__feed-window { position: relative; height: 176px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 20px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 20px), transparent 100%); } .wcx-dash__feed { list-style: none; margin: 0; padding: 0; animation: wcx-dash-scroll 16s linear infinite; } .wcx-dash__feed-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hair, rgba(10,10,10,0.06)); } .wcx-dash__feed-item:first-child { border-top: none; } .wcx-dash__feed-ico { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; position: relative; } .wcx-dash__feed-ico--lead { background: var(--blue-wash, rgba(29,78,216,0.10)); } .wcx-dash__feed-ico--lead::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--blue, #1d4ed8); } .wcx-dash__feed-ico--book { background: rgba(5,150,105,0.12); } .wcx-dash__feed-ico--book::after { content: ""; position: absolute; left: 9px; top: 8px; width: 12px; height: 9px; border: 2px solid var(--wcx-dash-green); border-radius: 2px; border-top-width: 4px; } .wcx-dash__feed-ico--star { background: rgba(217,119,6,0.14); } .wcx-dash__feed-ico--star::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%); background: var(--wcx-dash-amber); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } .wcx-dash__feed-ico--blog { background: rgba(10,10,10,0.06); } .wcx-dash__feed-ico--blog::after { content: ""; position: absolute; left: 9px; top: 9px; right: 9px; height: 2px; border-radius: 2px; background: var(--ink, #0a0a0a); box-shadow: 0 4px 0 rgba(10,10,10,0.55), 0 8px 0 rgba(10,10,10,0.3); } .wcx-dash__feed-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .wcx-dash__feed-t1 { font-size: 13.5px; font-weight: 600; } .wcx-dash__feed-t2 { font-size: 12px; color: var(--ink-55, rgba(10,10,10,0.55)); } .wcx-dash__card--insight { display: flex; flex-direction: column; } .wcx-dash__badge { padding: 4px 10px; border-radius: 999px; background: var(--blue-wash, rgba(29,78,216,0.10)); color: var(--blue, #1d4ed8); font-size: 11.5px; font-weight: 600; } .wcx-dash__insight-body { display: flex; align-items: center; gap: 12px; padding: 4px 0 14px; } .wcx-dash__insight-glyph { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; background: var(--grad, linear-gradient(135deg, #1d4ed8, #60a5fa)); position: relative; } .wcx-dash__insight-glyph::after { content: ""; position: absolute; left: 9px; bottom: 9px; width: 16px; height: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; background: linear-gradient(45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%); } .wcx-dash__insight-line { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.35; } .wcx-dash__reco { margin-top: auto; padding: 13px 14px; border-radius: 12px; background: #fafafb; border: 1px dashed var(--blue-line, rgba(29,78,216,0.28)); position: relative; } .wcx-dash__reco-label { margin: 0 0 5px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-55, rgba(10,10,10,0.55)); } .wcx-dash__reco-line { margin: 0 88px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-60, rgba(10,10,10,0.6)); } .wcx-dash__reco-btn { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); padding: 7px 15px; border-radius: 8px; background: var(--blue, #1d4ed8); color: #fff; font-size: 12.5px; font-weight: 600; } .wcx-dash__phone { position: absolute; left: 0; bottom: -12px; width: 268px; border-radius: 38px; padding: 12px; background: #0f1118; box-shadow: 0 30px 60px -18px rgba(10,10,10,0.46); z-index: 3; transform-origin: bottom left; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease; will-change: transform; } .wcx-dash__phone:hover { transform: scale(1.12) translateY(-12px); box-shadow: 0 50px 90px -22px rgba(10,10,10,0.55); z-index: 6; } .wcx-dash__phone-chip { position: absolute; top: 16px; right: -14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--hair, rgba(10,10,10,0.08)); box-shadow: 0 8px 20px -8px rgba(10,10,10,0.28); font-size: 11px; font-weight: 600; color: var(--blue, #1d4ed8); white-space: nowrap; z-index: 5; } .wcx-dash__phone-chip-ico { width: 8px; height: 8px; border-radius: 50%; background: var(--blue, #1d4ed8); animation: wcx-dash-pulse 1.8s ease-in-out infinite; } .wcx-dash__phone-notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 92px; height: 18px; border-radius: 0 0 12px 12px; background: #0f1118; z-index: 2; } .wcx-dash__phone-screen { border-radius: 28px; background: #fff; overflow: hidden; padding: 30px 0 0; } .wcx-dash__phone-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 12px; border-bottom: 1px solid var(--hair, rgba(10,10,10,0.06)); } .wcx-dash__phone-biz { display: flex; align-items: center; gap: 9px; min-width: 0; } .wcx-dash__phone-logo { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; background: var(--grad, linear-gradient(135deg, #1d4ed8, #60a5fa)); } .wcx-dash__phone-biz-txt { display: flex; flex-direction: column; min-width: 0; } .wcx-dash__phone-biz-name { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; } .wcx-dash__phone-biz-sub { font-size: 11px; color: var(--ink-55, rgba(10,10,10,0.5)); } .wcx-dash__phone-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .wcx-dash__phone-act { width: 18px; height: 18px; position: relative; color: var(--ink-60, rgba(10,10,10,0.55)); } .wcx-dash__phone-act--search::before { content: ""; position: absolute; left: 1px; top: 1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid currentColor; } .wcx-dash__phone-act--search::after { content: ""; position: absolute; right: 0; bottom: 0; width: 6px; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(45deg); } .wcx-dash__phone-act--bell::before { content: ""; position: absolute; left: 3px; top: 1px; width: 12px; height: 12px; border: 2px solid currentColor; border-radius: 50% 50% 6px 6px; border-bottom: none; } .wcx-dash__phone-act--bell::after { content: ""; position: absolute; left: 4px; bottom: 2px; width: 10px; height: 2px; border-radius: 2px; background: currentColor; } .wcx-dash__phone-tabtitle { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 8px; } .wcx-dash__phone-tabtitle-h { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; } .wcx-dash__phone-count { font-size: 11px; font-weight: 600; color: var(--blue, #1d4ed8); background: var(--blue-wash, rgba(29,78,216,0.10)); padding: 3px 9px; border-radius: 999px; } .wcx-dash__inbox { list-style: none; margin: 0; padding: 0; } .wcx-dash__inbox-row { display: flex; align-items: center; gap: 11px; padding: 11px 16px; border-top: 1px solid var(--hair, rgba(10,10,10,0.06)); position: relative; } .wcx-dash__inbox-row.is-unread { background: var(--blue-wash, rgba(29,78,216,0.05)); } .wcx-dash__inbox-ava { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; } .wcx-dash__inbox-ava--a { background: linear-gradient(135deg, #1d4ed8, #60a5fa); } .wcx-dash__inbox-ava--b { background: linear-gradient(135deg, #059669, #34d399); } .wcx-dash__inbox-ava--c { background: linear-gradient(135deg, #d97706, #fbbf24); } .wcx-dash__inbox-ava--d { background: linear-gradient(135deg, #7c3aed, #a78bfa); } .wcx-dash__inbox-ava--e { background: linear-gradient(135deg, #db2777, #f472b6); } .wcx-dash__inbox-txt { flex: 1; min-width: 0; } .wcx-dash__inbox-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .wcx-dash__inbox-name { font-size: 13.5px; font-weight: 600; } .wcx-dash__inbox-time { font-size: 11px; color: var(--ink-55, rgba(10,10,10,0.5)); flex-shrink: 0; } .wcx-dash__inbox-snip { display: block; font-size: 12px; color: var(--ink-55, rgba(10,10,10,0.55)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .wcx-dash__inbox-row.is-unread .wcx-dash__inbox-name { font-weight: 700; } .wcx-dash__inbox-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--blue, #1d4ed8); animation: wcx-dash-pulse 1.8s ease-in-out infinite; } .wcx-dash__tabbar { display: flex; align-items: center; justify-content: space-around; padding: 9px 8px 14px; margin-top: 6px; border-top: 1px solid var(--hair, rgba(10,10,10,0.08)); background: #fbfbfc; } .wcx-dash__tab { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--ink-55, rgba(10,10,10,0.5)); } .wcx-dash__tab.is-active { color: var(--blue, #1d4ed8); } .wcx-dash__tab-lbl { font-size: 10px; font-weight: 600; } .wcx-dash__tab-ico { width: 20px; height: 20px; position: relative; } .wcx-dash__tab-ico--home::before { content: ""; position: absolute; left: 2px; bottom: 1px; width: 16px; height: 10px; border: 2px solid currentColor; border-top: none; border-radius: 0 0 2px 2px; } .wcx-dash__tab-ico--home::after { content: ""; position: absolute; left: 50%; top: 1px; width: 11px; height: 11px; transform: translateX(-50%) rotate(45deg); border-top: 2px solid currentColor; border-left: 2px solid currentColor; border-radius: 3px 0 0 0; } .wcx-dash__tab-ico--chart::before { content: ""; position: absolute; left: 2px; bottom: 2px; width: 3px; height: 8px; border-radius: 1px; background: currentColor; box-shadow: 6px -4px 0 currentColor, 12px -8px 0 currentColor; } .wcx-dash__tab-ico--chart::after { content: ""; position: absolute; left: 2px; bottom: 1px; width: 16px; height: 2px; border-radius: 1px; background: currentColor; opacity: 0.5; } .wcx-dash__tab-ico--inbox::before { content: ""; position: absolute; left: 1px; top: 3px; width: 18px; height: 14px; border: 2px solid currentColor; border-radius: 3px; } .wcx-dash__tab-ico--inbox::after { content: ""; position: absolute; left: 3px; top: 5px; width: 14px; height: 8px; border-top: 2px solid currentColor; clip-path: polygon(0 0, 50% 70%, 100% 0); } .wcx-dash__tab-badge { position: absolute; top: -5px; right: -6px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 999px; background: var(--blue, #1d4ed8); color: #fff; font-size: 9px; font-weight: 700; line-height: 14px; text-align: center; z-index: 2; } .wcx-dash__tab-ico--manage::before { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 5px; } .wcx-dash__tab-ico--manage::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; transform: translate(-50%, -50%); border-radius: 50%; background: currentColor; } @keyframes wcx-dash-pulse { 0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(5,150,105,0.4); } 50% { transform: scale(1.25); opacity: 0.85; box-shadow: 0 0 0 5px rgba(5,150,105,0); } } @keyframes wcx-dash-roll { 0% { opacity: 0; transform: translateY(100%); } 3% { opacity: 1; transform: translateY(0); } 18% { opacity: 1; transform: translateY(0); } 21% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 0; transform: translateY(-100%); } } @keyframes wcx-dash-bar { 0%, 100% { transform: scaleY(0.72); } 50% { transform: scaleY(1); } } @keyframes wcx-dash-scroll { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } } @media (max-width: 1080px) { .wcx-dash__stage { padding-left: 0; } .wcx-dash__phone { position: relative; left: auto; bottom: auto; margin: -30px 0 0 24px; } } @media (max-width: 760px) { .wcx-dash { padding: 64px 16px; } .wcx-dash__stage { padding-bottom: 0; } .wcx-dash__side { display: none; } .wcx-dash__stats { grid-template-columns: 1fr; } .wcx-dash__spark { display: none; } .wcx-dash__row { grid-template-columns: 1fr; } .wcx-dash__main { padding: 16px; } .wcx-dash__stat { display: flex; align-items: baseline; gap: 10px; } .wcx-dash__stat-label { margin: 0; flex: 1; } .wcx-dash__stat-num { margin: 0; font-size: 20px; } .wcx-dash__reco-line { margin-right: 0; margin-bottom: 40px; } .wcx-dash__reco-btn { top: auto; bottom: 12px; transform: none; } .wcx-dash__feed-window { height: 200px; } .wcx-dash__phone { margin: 28px auto 0; width: 280px; } .wcx-dash__phone-chip { right: 8px; } .wcx-dash__phone:hover { transform: scale(1.04) translateY(-4px); } } @media (prefers-reduced-motion: reduce) { .wcx-dash__live-dot, .wcx-dash__feed-live-dot, .wcx-dash__phone-chip-ico, .wcx-dash__inbox-dot, .wcx-dash__spark span, .wcx-dash__feed, .wcx-dash__live-num { animation: none !important; } .wcx-dash__spark span { transform: scaleY(1); } .wcx-dash__feed { transform: none; } .wcx-dash__live-num { opacity: 0; transform: none; } .wcx-dash__live-num:nth-child(1) { opacity: 1; } .wcx-dash__app, .wcx-dash__phone, .wcx-dash__cta-arrow { transition: none; } } .wcx-cf-imv-row{position:relative; z-index:1; display:flex; justify-content:center; margin-top:14px;} .wcx-cf-imv{ display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px; border:1px solid rgba(10,10,10,.28); background:transparent; color:var(--ink); font-size:.82rem; font-weight:600; line-height:1; text-decoration:none; white-space:nowrap; transition:border-color .14s ease, background .14s ease; } .wcx-cf-imv:hover{border-color:var(--ink); background:rgba(10,10,10,.05);} .wcx-cf-imv:focus-visible{outline:2px solid var(--ink); outline-offset:3px;} .wcx-inds{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin-top:clamp(26px,3vw,38px); padding:0 20px;} .wcx-inds__lbl{font-size:.8125rem; font-weight:700; color:var(--ink-55); margin-right:4px;} .wcx-inds a,.wcx-inds button{display:inline-flex; align-items:center; padding:8px 15px; border-radius:999px; background:#fff; border:1px solid var(--hair); font-size:.875rem; font-weight:600; color:var(--ink); text-decoration:none; cursor:pointer; font-family:inherit; transition:border-color .2s ease, color .2s ease, box-shadow .2s ease;} .wcx-inds a:hover,.wcx-inds button:hover{border-color:var(--blue); color:var(--blue); box-shadow:0 8px 20px -10px rgba(29,78,216,.4);} .wcx-inds a.wcx-inds__all{border-color:var(--blue-line); color:var(--blue); font-weight:700;} .wcx-ilb{position:fixed; inset:0; z-index:9998; display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,48px); background:rgba(8,10,16,.82); backdrop-filter:blur(6px); opacity:0; transition:opacity .3s ease;} .wcx-ilb.is-open{opacity:1;} .wcx-ilb__panel{position:relative; display:flex; flex-direction:column; width:min(920px,100%); max-height:92vh; overflow:hidden; background:var(--ivory); border-radius:22px; box-shadow:0 60px 140px -30px rgba(0,0,0,.7); transform:scale(.94) translateY(10px); transition:transform .34s cubic-bezier(.22,1,.36,1);} .wcx-ilb__head,.wcx-ilb__strip,.wcx-ilb__foot{flex:none;} .wcx-ilb.is-open .wcx-ilb__panel{transform:none;} .wcx-ilb__head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:clamp(22px,3vw,32px) clamp(22px,3vw,36px) 0;} .wcx-ilb__eyebrow{font-size:.75rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--blue);} .wcx-ilb__title{margin:8px 0 0; font-size:clamp(1.5rem,3vw,2.2rem); font-weight:800; letter-spacing:-.03em; line-height:1.05; color:var(--ink);} .wcx-ilb__sub{margin:8px 0 0; font-size:.95rem; color:var(--ink-60); max-width:46ch;} .wcx-ilb__now{margin:10px 0 0; font-size:.8125rem; color:var(--ink-55);} .wcx-ilb__now strong{color:var(--ink); font-weight:700;} .wcx-ilb__close{flex:none; width:40px; height:40px; border:0; border-radius:50%; background:rgba(10,10,10,.06); color:var(--ink); font-size:22px; line-height:1; cursor:pointer; transition:background .2s ease;} .wcx-ilb__close:hover{background:rgba(10,10,10,.12);} .wcx-ilb__stage{position:relative; flex:1 1 auto; min-height:min(26vh,260px); height:clamp(220px,min(44vw,46vh),480px); margin:clamp(14px,2vw,22px) 0 0; overflow:hidden; perspective:1600px;} .wcx-ilb__desk{position:absolute; top:8%; left:6%; width:74%; border-radius:12px 12px 0 0; overflow:hidden; background:#fff; border:1px solid var(--hair); box-shadow:0 40px 90px -30px rgba(15,23,42,.55); height:92%; transform:rotateY(6deg) rotateX(2deg); transform-origin:left center; opacity:0; transition:transform .5s cubic-bezier(.22,1,.36,1) .05s, opacity .5s ease .05s;} .wcx-ilb.is-open .wcx-ilb__desk{opacity:1; transform:rotateY(3deg) rotateX(1deg);} .wcx-ilb__deskbar{height:26px; display:flex; align-items:center; gap:6px; padding:0 12px; background:#F4F1EC; border-bottom:1px solid var(--hair);} .wcx-ilb__deskbar i{width:8px; height:8px; border-radius:50%; background:#D4D0C8;} .wcx-ilb__scroll{ height:calc(100% - 26px); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin; } .wcx-ilb__scroll:focus-visible{outline:2px solid var(--blue); outline-offset:-2px;} .wcx-ilb__desk{position:relative;} .wcx-ilb__desk::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:56px; background:linear-gradient(to top, rgba(10,10,10,.34), transparent); opacity:0; transition:opacity .25s ease; pointer-events:none; z-index:2; } .wcx-ilb__desk[data-ilb-more]::after{opacity:1;} .wcx-ilb__desk[data-ilb-more].is-scrolled::after{opacity:0;} .wcx-ilb__scrollhint{ position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:3; display:none; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; background:rgba(10,10,10,.82); color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.02em; white-space:nowrap; pointer-events:none; transition:opacity .25s ease; } .wcx-ilb__desk[data-ilb-more] .wcx-ilb__scrollhint{display:inline-flex;} .wcx-ilb__desk[data-ilb-more].is-scrolled .wcx-ilb__scrollhint{opacity:0;} @media(prefers-reduced-motion:reduce){ .wcx-ilb__desk::after,.wcx-ilb__scrollhint{transition:none;} } .wcx-ilb__desk img{display:block; width:100%; height:auto;} .wcx-ilb__phone{pointer-events:none; position:absolute; right:7%; bottom:2%; width:20%; min-width:110px; height:74%; border-radius:20px; overflow:hidden; background:#fff; border:5px solid #fff; box-shadow:0 34px 70px -22px rgba(15,23,42,.6); transform:translateY(18px) rotate(4deg); opacity:0; transition:transform .55s cubic-bezier(.22,1,.36,1) .16s, opacity .5s ease .16s;} .wcx-ilb.is-open .wcx-ilb__phone{opacity:1; transform:rotate(3deg);} .wcx-ilb__phone img{display:block; width:100%; height:100%; object-fit:cover; object-position:top center;} .wcx-ilb__strip{padding:clamp(14px,2vw,20px) clamp(22px,3vw,36px) 0;} .wcx-ilb__strip-lbl{display:block; font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-55); margin-bottom:10px;} .wcx-ilb__strip-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0; padding:0; list-style:none;} .wcx-ilb__rel{display:block; border:1px solid var(--hair); border-radius:10px; overflow:hidden; background:#fff; cursor:pointer; padding:0; width:100%; text-align:left; font-family:inherit; transition:border-color .2s ease, box-shadow .2s ease;} .wcx-ilb__rel:hover{border-color:var(--blue); box-shadow:0 8px 20px -10px rgba(29,78,216,.45);} .wcx-ilb__rel[aria-current="true"]{border-color:var(--blue); box-shadow:0 0 0 1px var(--blue) inset;} .wcx-ilb__rel img{display:block; width:100%; height:clamp(64px,11vh,110px); object-fit:cover; object-position:top center;} .wcx-ilb__rel span{display:block; padding:7px 9px; font-size:.75rem; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} @media (min-width:641px){ .wcx-ilb__strip-grid:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,1fr);} .wcx-ilb__strip-grid:has(> :only-child){grid-template-columns:1fr;} } .wcx-ilb__foot{display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; padding:clamp(16px,2vw,22px) clamp(22px,3vw,36px) clamp(22px,3vw,32px);} .wcx-ilb__link{font-size:.9rem; font-weight:700; color:var(--ink-55); text-decoration:none;} .wcx-ilb__link:hover{color:var(--blue);} @media (max-height:620px){ .wcx-ilb__strip{display:none;} } @media (min-width:641px) and (max-height:860px){ .wcx-ilb__title{font-size:clamp(1.35rem,2.2vw,1.75rem);} .wcx-ilb__sub{display:none;} .wcx-ilb__head{padding-top:20px;} .wcx-ilb__now{margin-top:6px;} .wcx-ilb__rel span{padding:5px 8px; font-size:.7rem;} } @media(max-width:640px){ .wcx-ilb__stage{height:clamp(240px,60vw,320px);} .wcx-ilb__desk{width:82%; left:4%;} .wcx-ilb__phone{width:26%; right:3%;} } @media(prefers-reduced-motion:reduce){ .wcx-ilb,.wcx-ilb__panel,.wcx-ilb__desk,.wcx-ilb__phone{transition:none;} } .wcx-sw { --wcx-sw-loop: 9s; box-sizing: border-box; padding: clamp(48px, 8vw, 104px) clamp(20px, 5vw, 64px); color: var(--ink); background: var(--ivory); } .wcx-sw *, .wcx-sw *::before, .wcx-sw *::after { box-sizing: border-box; } .wcx-sw__imv { position: relative; z-index: 2; display: flex; width: fit-content; margin: 22px auto 0; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: rgba(9,10,14,.9); color: #fff; font-size: .86rem; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; border: 1px solid rgba(255,255,255,.22); box-shadow: 0 8px 28px rgba(0,0,0,.28); transition: background .2s ease, transform .2s ease; } .wcx-sw__imv:hover { background: #000; transform: scale(1.03); } .wcx-sw__imv:focus-visible { outline: 2px solid #0a0a0a; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .wcx-sw__imv { transition: none; } .wcx-sw__imv:hover { transform: none; } } .wcx-sw-wrap { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; } .wcx-sw-eyebrow { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); margin: 0 0 20px; } .wcx-sw-title { font-size: clamp(30px, 4vw, 48px); line-height: 1.06; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 28px; } .wcx-sw-lead { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.55; color: var(--ink-60); margin: 0 0 28px; max-width: 42ch; } .wcx-sw-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin: 0 0 30px; } .wcx-sw-btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px; border-radius: 999px; background: #fff; color: var(--ink); border: 1.5px solid var(--blue-line); font-size: 16px; font-weight: 600; text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .wcx-sw-btn:hover { transform: translateY(-1px); border-color: var(--blue); background: var(--blue-wash); } .wcx-sw-link { font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--blue-line); padding-bottom: 2px; transition: color 0.18s ease, border-color 0.18s ease; } .wcx-sw-link:hover { color: var(--blue); border-color: var(--blue); } .wcx-sw-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; } .wcx-sw-check { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink-55); } .wcx-sw-tick { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 999px; background: var(--blue-wash); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .wcx-sw-stage { position: relative; width: 100%; } .wcx-sw-browser { position: relative; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--hair); box-shadow: 0 30px 70px -30px rgba(15, 17, 24, 0.35); } .wcx-sw-canvas { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; } .wcx-sw-after { position: absolute; inset: 0; z-index: 1; overflow: hidden; } .wcx-sw-after img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .wcx-sw-before { position: absolute; inset: 0; z-index: 3; background: #eef1f4; font-family: Arial, Helvetica, sans-serif; overflow: hidden; animation: wcx-sw-wipe var(--wcx-sw-loop) ease-in-out infinite; } .wcx-sw-old-top { background: #2f3b4c; color: #c7d0da; text-align: right; padding: 4px 14px; font-size: 11px; } .wcx-sw-old-head { display: flex; align-items: center; justify-content: space-between; background: #fff; padding: 9px 14px; border-bottom: 3px solid #4a76a8; } .wcx-sw-old-logo { font-family: "Times New Roman", Times, serif; font-size: clamp(16px, 2.3vw, 22px); font-weight: 700; color: #24507f; letter-spacing: 0; } .wcx-sw-old-nav { display: flex; gap: 14px; } .wcx-sw-old-nav span { font-size: 11px; font-weight: 400; color: #24507f; text-transform: uppercase; letter-spacing: .02em; text-decoration: underline; } .wcx-sw-old-hero { display: grid; grid-template-columns: 1.05fr 1fr; background: #dfe4ea; min-height: 42%; } .wcx-sw-old-heroimg { position: relative; overflow: hidden; background: linear-gradient(160deg, #e4e9ee 0%, #ccd5dd 100%); } .wcx-sw-old-heroimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 38%; filter: saturate(.72) contrast(.92) brightness(1.06); } .wcx-sw-old-heroimg::after { content: "IMG_0234.JPG"; position: absolute; right: 6px; bottom: 5px; font-family: "Courier New", monospace; font-size: 9px; font-weight: 700; letter-spacing: .01em; color: rgba(255,255,255,.65); text-shadow: 0 1px 2px rgba(0,0,0,.4); } .wcx-sw-old-herotext { padding: 14px 16px; display: flex; flex-direction: column; justify-content: center; } .wcx-sw-old-herotext h3 { margin: 0 0 6px; font-family: "Times New Roman", Times, serif; font-size: clamp(15px, 2.1vw, 21px); color: #24507f; font-weight: 700; } .wcx-sw-old-herotext p { margin: 0 0 10px; font-size: 12px; color: #566675; line-height: 1.4; } .wcx-sw-old-btn { align-self: flex-start; display: inline-block; background: linear-gradient(#5b86bb, #3c6698); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 13px; border: 1px solid #2b4f77; border-radius: 3px; text-transform: uppercase; letter-spacing: .02em; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); text-shadow: 0 -1px 0 rgba(0,0,0,.25); } .wcx-sw-old-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 14px 16px; } .wcx-sw-old-feat { text-align: center; } .wcx-sw-old-feat .ic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #dfe4ea; border: 2px solid #b9c3cd; margin-bottom: 8px; color: #4a76a8; } .wcx-sw-old-feat .ic svg { width: 16px; height: 16px; } .wcx-sw-old-feat h4 { margin: 0 0 5px; font-size: 12px; color: #2f3b4c; font-weight: 700; } .wcx-sw-old-feat p { margin: 0; font-size: 10.5px; color: #636d78; line-height: 1.4; } .wcx-sw-sweep { position: absolute; top: 0; bottom: 0; width: 22%; z-index: 4; pointer-events: none; background: linear-gradient( 90deg, rgba(29, 78, 216, 0) 0%, rgba(29, 78, 216, 0.12) 35%, rgba(96, 165, 250, 0.85) 50%, rgba(255, 255, 255, 0.95) 52%, rgba(29, 78, 216, 0.12) 65%, rgba(29, 78, 216, 0) 100% ); opacity: 0; animation: wcx-sw-sweep var(--wcx-sw-loop) ease-in-out infinite; } .wcx-sw-migrate { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(70%, 300px); background: rgba(15, 17, 24, 0.82); color: var(--ivory); border-radius: 12px; padding: 14px 16px; text-align: center; backdrop-filter: blur(4px); opacity: 0; animation: wcx-sw-migrate var(--wcx-sw-loop) ease-in-out infinite; } .wcx-sw-migrate-label { font-size: 13px; font-weight: 600; letter-spacing: 0.01em; margin: 0 0 9px; font-family: inherit; } .wcx-sw-progress { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); overflow: hidden; } .wcx-sw-progress::after { content: ""; display: block; height: 100%; width: 100%; border-radius: 999px; background: var(--grad, linear-gradient(90deg, #60a5fa, #1d4ed8)); transform: scaleX(0); transform-origin: left center; animation: wcx-sw-progress var(--wcx-sw-loop) ease-in-out infinite; } .wcx-sw-chip { position: absolute; z-index: 5; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; font-family: system-ui, sans-serif; padding: 6px 11px; border-radius: 999px; line-height: 1; } .wcx-sw-chip-before { background: rgba(15, 17, 24, 0.72); color: #fff; animation: wcx-sw-chip-before var(--wcx-sw-loop) ease-in-out infinite; } .wcx-sw-chip-after { left: auto; right: 14px; background: rgba(255, 255, 255, 0.92); color: var(--ink); border: 1px solid var(--hair); box-shadow: 0 6px 16px -8px rgba(15, 17, 24, 0.4); opacity: 0; animation: wcx-sw-chip-after var(--wcx-sw-loop) ease-in-out infinite; } .wcx-sw-live { width: 8px; height: 8px; border-radius: 999px; background: #16a34a; box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); animation: wcx-sw-pulse 1.8s ease-out infinite; } .wcx-sw-plat { position: absolute; z-index: 5; bottom: 12px; left: 14px; font-size: 10.5px; font-weight: 600; font-family: Arial, Helvetica, sans-serif; color: rgba(255,255,255,.92); background: rgba(58, 10, 10, 0.85); padding: 4px 8px; border: 1px solid #b6ff00; border-radius: 4px; animation: wcx-sw-chip-before var(--wcx-sw-loop) ease-in-out infinite; } @keyframes wcx-sw-wipe { 0%, 20% { clip-path: inset(0 0 0 0); } 58%, 100% { clip-path: inset(0 100% 0 0); } } @keyframes wcx-sw-sweep { 18% { left: -25%; opacity: 0; } 22% { opacity: 1; } 54% { opacity: 1; } 60% { left: 100%; opacity: 0; } 100% { left: 100%; opacity: 0; } } @keyframes wcx-sw-migrate { 0%, 16% { opacity: 0; transform: translate(-50%, -50%) scale(0.96); } 24%, 50% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 60%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.98); } } @keyframes wcx-sw-progress { 0%, 20% { transform: scaleX(0); } 55% { transform: scaleX(1); } 100% { transform: scaleX(1); } } @keyframes wcx-sw-chip-before { 0%, 22% { opacity: 1; } 30%, 100% { opacity: 0; } } @keyframes wcx-sw-chip-after { 0%, 56% { opacity: 0; } 66%, 100% { opacity: 1; } } @keyframes wcx-sw-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes wcx-sw-pulse { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); } 70% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } } @media (max-width: 900px) { .wcx-sw-wrap { grid-template-columns: 1fr; gap: 36px; } .wcx-sw-stage { order: 2; } } @media (max-width: 520px) { .wcx-sw-checks { grid-template-columns: 1fr; } .wcx-sw-old-nav { display: none; } } @media (prefers-reduced-motion: reduce) { .wcx-sw-before { clip-path: inset(0 100% 0 0); animation: none; } .wcx-sw-sweep, .wcx-sw-migrate, .wcx-sw-chip-before, .wcx-sw-plat { opacity: 0; animation: none; } .wcx-sw-chip-after { opacity: 1; animation: none; } .wcx-sw-live { animation: none; } } .wcx-sw-scan{margin:6px 0 20px;} .wcx-sw-scan__row{display:flex; gap:8px; max-width:460px;} .wcx-sw-scan__input{flex:1; min-width:0; height:52px; padding:0 18px; border-radius:999px; border:1.5px solid var(--hair); background:#fff; font-size:.95rem; color:var(--ink); outline:none; transition:border-color .2s ease, box-shadow .2s ease;} .wcx-sw-scan__input::placeholder{color:var(--ink-45,#a5a199);} .wcx-sw-scan__input:focus{border-color:var(--blue); box-shadow:0 0 0 4px rgba(29,78,216,.12);} .wcx .wcx-sw-scan__btn{flex:none; height:52px; padding:0 22px; border:0; border-radius:999px; background:var(--blue); color:#fff; font-size:.95rem; font-weight:700; cursor:pointer; transition:box-shadow .2s ease, transform .2s ease;} .wcx .wcx-sw-scan__btn:hover{box-shadow:0 14px 30px -10px rgba(29,78,216,.6); transform:translateY(-1px);} .wcx-sw-scan__hint{margin:10px 2px 0; font-size:.8125rem; color:var(--ink-55);} @media(max-width:520px){ .wcx-sw-scan__row{flex-direction:column;} .wcx-sw-scan__input{flex:none; width:100%; height:52px;} .wcx-sw-scan__btn{flex:none; width:100%; height:48px;} } .wcx-sw-canvas{cursor:ew-resize; touch-action:pan-y;} .wcx-sw-handle{position:absolute; top:0; bottom:0; left:50%; width:0; z-index:6; pointer-events:none; opacity:0; transition:opacity .35s ease;} .wcx-sw-handle::before{content:""; position:absolute; top:0; bottom:0; left:-1.5px; width:3px; background:#fff; box-shadow:0 0 0 1px rgba(15,23,42,.18), 0 6px 18px rgba(15,23,42,.3);} .wcx-sw-handle__grip{position:absolute; top:50%; left:0; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:#fff; box-shadow:0 10px 26px -8px rgba(15,23,42,.5); display:grid; place-items:center; color:var(--ink);} .wcx-sw-handle__grip svg{width:20px; height:20px;} .wcx-sw-canvas.is-manual .wcx-sw-handle{opacity:1;} .wcx-sw-canvas.is-manual .wcx-sw-sweep, .wcx-sw-canvas.is-manual .wcx-sw-migrate{display:none;} .wcx-sw-hint{position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:6; padding:7px 14px; border-radius:999px; background:rgba(15,17,24,.78); color:#fff; font-size:.75rem; font-weight:600; pointer-events:none; backdrop-filter:blur(6px); white-space:nowrap;} .wcx-sw-canvas.is-manual .wcx-sw-hint{display:none;} @media(prefers-reduced-motion:reduce){.wcx-sw-hint{display:none;}} .wcx-quote__rot{position:relative; width:100%; min-height:8.4em;} .wcx-quote__rot blockquote{position:absolute; inset:0; margin:0; opacity:0; animation:wcx-qrot 24s ease-in-out infinite;} .wcx-quote__rot blockquote:nth-child(2){animation-delay:8s;} .wcx-quote__rot blockquote:nth-child(3){animation-delay:16s;} .wcx-quote__rot cite{display:block; margin-top:16px; font-style:normal; font-size:.9375rem; font-weight:600; color:var(--ivory-70);} @keyframes wcx-qrot{0%{opacity:0; transform:translateY(10px)}3%,30%{opacity:1; transform:none}34%,100%{opacity:0; transform:translateY(-8px)}} @media(max-width:640px){.wcx-quote__rot{min-height:13em;}} @media(prefers-reduced-motion:reduce){ .wcx-quote__rot{min-height:0;} .wcx-quote__rot blockquote{position:static; animation:none; opacity:0; height:0; overflow:hidden;} .wcx-quote__rot blockquote:first-child{opacity:1; height:auto;} } .wcx-why{padding:clamp(70px,9vw,120px) 0; background:var(--ivory);} .wcx-why__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center;} .wcx-why__h{font-size:clamp(2rem,4.4vw,3.4rem); font-weight:800; letter-spacing:-.03em; line-height:1.05; color:var(--ink); margin:22px 0 0;} .wcx-why__h b{color:var(--blue);} .wcx-why__p{margin:32px 0 0; font-size:1.1rem; line-height:1.55; color:var(--ink-60); max-width:46ch;} .wcx-why__cta{display:flex; flex-wrap:wrap; gap:16px 22px; align-items:center; margin-top:28px;} .wcx-why__link{display:inline-flex; align-items:center; gap:6px; font-size:.98rem; font-weight:700; color:var(--blue); text-decoration:none;} .wcx-why__link:hover{text-decoration:underline;} .wcx-why__card{background:#fff; border:1px solid var(--hair); border-radius:var(--r-lg); padding:clamp(24px,3vw,34px); box-shadow:0 30px 60px -34px rgba(15,23,42,.4);} .wcx-why__card-hd{font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-55);} .wcx-why__list{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:14px;} .wcx-why__list li{display:flex; align-items:flex-start; gap:12px; font-size:1.05rem; color:var(--ink); line-height:1.4;} .wcx-why__check{flex:none; width:26px; height:26px; border-radius:8px; background:var(--blue-wash); display:grid; place-items:center; margin-top:1px;} .wcx-why__check svg{width:15px; height:15px; fill:none; stroke:var(--blue); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;} .wcx-why__price{margin:20px 0 0; padding-top:18px; border-top:1px solid var(--hair); font-size:1.05rem; color:var(--ink);} .wcx-why__price b{font-weight:800;} @media(max-width:860px){.wcx-why__grid{grid-template-columns:1fr;}} .wcx-offer{padding:clamp(44px,6vw,72px) 0; background:var(--ivory); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);} .wcx-offer__grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,36px);} @media (max-width:820px){.wcx-offer__grid{grid-template-columns:1fr; gap:22px;}} .wcx-offer__cell{display:flex; align-items:flex-start; gap:15px;} .wcx-offer__n{flex:none; width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--blue); color:#fff; font-size:.95rem; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; box-shadow:0 8px 18px -8px rgba(29,78,216,.75);} .wcx-offer__t{display:block; font-size:1.02rem; font-weight:800; letter-spacing:-.02em; color:var(--ink); line-height:1.25;} .wcx-offer__d{display:block; margin-top:7px; font-size:.9rem; line-height:1.55; color:var(--ink-60);} .wcx-offer__d a{color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:2px;} .wcx-offer__cell--risk .wcx-offer__t{color:var(--blue);} .wcx-tier__video{position:relative; display:block; width:100%; aspect-ratio:16/9; margin-top:14px; border:1px solid rgba(10,10,10,.1); border-radius:12px; overflow:hidden; background:#0F1118; padding:0; cursor:pointer; text-align:left;} .wcx-tier__video img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .35s ease;} .wcx-tier__video:hover img{transform:scale(1.04);} .wcx-tier__play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:var(--blue,#1D4ED8); color:#fff; display:flex; align-items:center; justify-content:center; padding-left:3px; box-shadow:0 10px 30px rgba(10,10,10,.35); transition:transform .2s ease;} .wcx-tier__video:hover .wcx-tier__play{transform:translate(-50%,-50%) scale(1.1);} .wcx-tier__vlabel{position:absolute; left:8px; bottom:8px; font-size:.68rem; font-weight:700; color:#fff; background:rgba(10,10,10,.65); padding:.28rem .6rem; border-radius:999px;} .wcx-vmodal{position:fixed; inset:0; z-index:1200; background:rgba(10,10,14,.72); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:4vh 4vw;} .wcx-vmodal__box{position:relative; width:min(1080px,92vw,160vh); animation:wcxVIn .22s ease;} @keyframes wcxVIn{from{opacity:0; transform:scale(.96);} to{opacity:1; transform:scale(1);}} .wcx-vmodal__box video{display:block; width:100%; aspect-ratio:16/9; border-radius:16px; background:#0F1118; box-shadow:0 40px 120px rgba(0,0,0,.55);} .wcx-vmodal__box--portrait{width:min(520px,92vw,51vh);} .wcx-vmodal__box--portrait video{aspect-ratio:9/16;} .wcx-vmodal__close{position:absolute; top:-14px; right:-14px; z-index:2; width:38px; height:38px; border-radius:50%; border:none; background:#fff; color:#0A0A0A; font-size:1rem; font-weight:700; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center;} .wcx-vmodal__close:hover{transform:scale(1.08);} .wcx-vmodal__yt{display:block; width:max-content; margin:10px auto 0; font-size:.8rem; font-weight:600; color:rgba(255,255,255,.78); text-decoration:none;} .wcx-vmodal__yt:hover{color:#fff; text-decoration:underline;} .wcx-tiers__cmp{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,4vw,56px); align-items:center; margin:28px auto 32px; padding:clamp(22px,3vw,36px); border-radius:20px; background:#fff; border:1px solid rgba(10,10,10,.08); box-shadow:0 18px 50px rgba(10,10,10,.06); text-align:left;} .wcx-tiers__cmp-kicker{margin:0 0 20px; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--blue,#1D4ED8);} .wcx-tiers__cmp h3{margin:0; font-size:clamp(1.3rem,2.1vw,1.75rem); font-weight:800; letter-spacing:-.025em; line-height:1.1; color:var(--ink,#0A0A0A);} .wcx-tiers__cmp p.wcx-tiers__cmp-desc{margin:18px 0 0; font-size:.96rem; line-height:1.55; color:#4b5563; max-width:44ch;} .wcx-tiers__cmp .wcx-tier__video{margin-top:0; border-radius:16px;} .wcx-tiers__cmp .wcx-tier__play{width:64px; height:64px;} .wcx-tiers__cmp .wcx-tier__vlabel{font-size:.78rem; left:12px; bottom:12px; padding:.36rem .75rem;} @media (max-width:860px){ .wcx-tiers__cmp{grid-template-columns:1fr; gap:18px;} .wcx-tiers__cmp-video{order:-1;} } .wcx-faq{padding:clamp(80px,10vw,132px) 0; background:var(--ivory);} .wcx-faq__inner{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(32px,6vw,88px); align-items:start;} .wcx-faq__aside{position:sticky; top:96px;} .wcx-faq h2{margin:22px 0 0; font-weight:800; letter-spacing:-.03em; line-height:1.02; font-size:clamp(2.25rem,4.4vw,4rem);} .wcx-faq__aside p{margin:32px 0 0; max-width:36ch;} .wcx-faq__grid{margin:0;} @media (max-width:860px){ .wcx-faq__inner{grid-template-columns:1fr; gap:8px;} .wcx-faq__aside{position:static;} } .wcx-faq__item{border-top:1px solid var(--hair);} .wcx-faq__item:last-child{border-bottom:1px solid var(--hair);} .wcx-faq__item summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:22px; padding:24px 6px; font-size:clamp(1.0625rem,1.7vw,1.28rem); font-weight:700; letter-spacing:-.01em; color:var(--ink);} .wcx-faq__item summary::-webkit-details-marker{display:none;} .wcx-faq__item summary::after{content:"+"; flex:none; font-size:1.6rem; font-weight:400; line-height:1; color:var(--blue); transition:transform .25s cubic-bezier(.22,1,.36,1);} .wcx-faq__item[open] summary::after{transform:rotate(45deg);} .wcx-faq__item p{margin:-4px 6px 26px; font-size:1.0625rem; line-height:1.6; color:var(--ink-60); max-width:70ch;} .wcx-faq__item p a{color:inherit; text-decoration:underline; text-decoration-color:rgba(10,10,10,.3); text-underline-offset:2px;} .wcx-faq__item p a:hover{color:var(--blue); text-decoration-color:var(--blue);} section.wcx-how{content-visibility:auto; contain-intrinsic-size:auto 2310px;} section.wcx-team{content-visibility:auto; contain-intrinsic-size:auto 703px;} section.wcx-diy{content-visibility:auto; contain-intrinsic-size:auto 1349px;} section.wcx-dash{content-visibility:auto; contain-intrinsic-size:auto 1990px;} section.wcx-demos{content-visibility:auto; contain-intrinsic-size:auto 911px;} section.wcx-sw{content-visibility:auto; contain-intrinsic-size:auto 1147px;} section.wcx-proof{content-visibility:auto; contain-intrinsic-size:auto 907px;} section.wcx-why{content-visibility:auto; contain-intrinsic-size:auto 1036px;} section.wcx-price{content-visibility:auto; contain-intrinsic-size:auto 2327px;} section.wcx-faq{content-visibility:auto; contain-intrinsic-size:auto 1027px;} section.wcx-final{content-visibility:auto; contain-intrinsic-size:auto 695px;} @media print{ section{content-visibility:visible !important;} }