/* ═══════════════════════════════════════════════════════════════ CyberVoice — micro-site Design language: "voice as light". Deep space ground, duotone red→blue (from the logo mark), and the waveform used as the recurring structural motif. ═══════════════════════════════════════════════════════════════ */ /* ── tokens ───────────────────────────────────────────────────── Light is the default; dark is applied via [data-theme="dark"] on . A blocking script in stamps that attribute from localStorage (falling back to the OS preference) before first paint, so there is no flash and no need to duplicate the dark block inside a prefers-color-scheme media query. ─────────────────────────────────────────────────────────────── */ :root{ --ink:#FFFFFF; --ink-2:#F4F7FB; --ink-3:#EAF0F7; --well:#F1F5FA; /* recessed wells inside panels */ --card:#F8FAFD; --card-2:#EFF4FA; --line:rgba(11,18,32,.10); --line-2:rgba(11,18,32,.20); --blue:#0B6FC4; --blue-br:#0B6FC4; /* readable on white, unlike cyan */ --blue-dp:#0A5A9E; --red:#C4161C; --red-dp:#A5121A; --text:#0B1220; --muted:#4E5E75; --muted-2:#5F7189; /* 4.99:1 on white — AA for small text */ --ok:#0B7A52; /* 5.36:1 on white */ --warn:#B45309; --scrim:rgba(255,255,255,.86); /* sticky nav / menu / toast bg */ --scrim-solid:#FFFFFF; --foot-bg:#F4F7FB; --grid-line:rgba(11,18,32,.05); --glow-blue-a:.16; /* backdrop glow strength */ --glow-red-a:.12; --orb-opacity:1; /* solid sphere: only feather the very edge, don't eat into the form */ --orb-mask:radial-gradient(circle at 50% 50%,#000 74%,rgba(0,0,0,.9) 84%,transparent 94%); --orb-shadow:drop-shadow(0 26px 44px rgba(11,18,32,.16)); --grad-rb:linear-gradient(96deg,var(--red) 0%,#8B2FBF 46%,var(--blue) 100%); --grad-btn:linear-gradient(96deg,var(--red-dp) 0%,var(--red) 28%,var(--blue-dp) 74%,var(--blue) 100%); --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:34px; --wrap:1200px; --shadow:0 22px 50px -24px rgba(11,18,32,.28); --glow-b:0 10px 30px -14px rgba(11,111,196,.45); --glow-r:0 10px 30px -14px rgba(196,22,28,.35); --f-disp:"Sora",system-ui,sans-serif; --f-body:"Inter",system-ui,sans-serif; --f-mono:"JetBrains Mono",ui-monospace,monospace; --ease:cubic-bezier(.22,1,.36,1); } :root[data-theme="dark"]{ --ink:#0B1220; --ink-2:#101A2C; --ink-3:#141E33; --well:rgba(6,11,22,.42); --card:rgba(148,178,222,.055); --card-2:rgba(148,178,222,.09); --line:rgba(148,178,222,.15); --line-2:rgba(148,178,222,.28); --blue:#2E9BF0; --blue-br:#63CCFF; --blue-dp:#0B6FC4; --red:#E8433F; --red-dp:#C4161C; --text:#EAF0F8; --muted:#93A8C4; --muted-2:#6B7E9B; --ok:#34D399; --warn:#FBBF24; --scrim:rgba(11,18,32,.86); --scrim-solid:#101A2C; --foot-bg:rgba(6,11,22,.35); --grid-line:rgba(255,255,255,.028); --glow-blue-a:.5; --glow-red-a:.42; --orb-opacity:.95; --orb-mask:radial-gradient(circle at 50% 50%,#000 52%,rgba(0,0,0,.55) 66%,transparent 76%); --orb-shadow:none; --grad-rb:linear-gradient(96deg,var(--red) 0%,#B23BD8 46%,var(--blue-br) 100%); --shadow:0 30px 80px -30px rgba(0,0,0,.9); --glow-b:0 0 60px -12px rgba(46,155,240,.55); --glow-r:0 0 60px -12px rgba(232,67,63,.45); } /* colour changes should feel deliberate, not jarring */ body,.nav,.panel,.plan,.uc-card,.ind-card,.bento__card,.step,.acc__item,.foot{ transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease); } *,*::before,*::after{box-sizing:border-box} /* author display rules outrank the UA [hidden] rule — restore it */ [hidden]{display:none!important} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } body{ margin:0;background:var(--ink);color:var(--text); font-family:var(--f-body);font-size:16px;line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} h1,h2,h3,h4{font-family:var(--f-disp);font-weight:700;line-height:1.08;letter-spacing:-.025em;margin:0} p{margin:0} ul,ol{margin:0;padding:0;list-style:none} .mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--blue);color:#001;padding:12px 20px;border-radius:0 0 10px 0} .skip-link:focus{left:0} :focus-visible{outline:2px solid var(--blue-br);outline-offset:3px;border-radius:6px} .wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto} .wrap--narrow{width:min(100% - 40px,860px)} .grad-rb{background:var(--grad-rb);-webkit-background-clip:text;background-clip:text;color:transparent} /* ── backdrop ───────────────────────────────────────────────── */ .bg-fx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden} .bg-fx__grid{ position:absolute;inset:-2px; background-image:linear-gradient(var(--grid-line) 1px,transparent 1px), linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 75%); } .bg-fx__glow{position:absolute;border-radius:50%;filter:blur(120px);opacity:.5} .bg-fx__glow--blue{width:60vw;height:60vw;max-width:820px;max-height:820px;top:-22vw;right:-14vw;background:radial-gradient(circle,rgba(46,155,240,var(--glow-blue-a)),transparent 62%);animation:drift 22s var(--ease) infinite alternate} .bg-fx__glow--red{width:48vw;height:48vw;max-width:660px;max-height:660px;top:24vw;left:-16vw;background:radial-gradient(circle,rgba(196,22,28,var(--glow-red-a)),transparent 62%);animation:drift 27s var(--ease) infinite alternate-reverse} @keyframes drift{to{transform:translate3d(6%,8%,0) scale(1.14)}} .bg-fx__noise{ position:absolute;inset:0;opacity:.035;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ── scroll progress (waveform) ─────────────────────────────── */ .scroll-wave{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;background:var(--card-2)} .scroll-wave span{display:block;height:100%;width:0;background:var(--grad-btn);box-shadow:0 0 14px rgba(46,155,240,.85)} /* ── buttons ────────────────────────────────────────────────── */ .btn{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:14px 26px;border-radius:100px;border:1px solid transparent; font-family:var(--f-disp);font-weight:600;font-size:15px;letter-spacing:-.01em; cursor:pointer;background:none;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,border-color .3s; white-space:nowrap;overflow:hidden;isolation:isolate; } .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn__ico{width:18px;height:18px;fill:currentColor;flex:none} .btn--sm{padding:10px 18px;font-size:14px} .btn--lg{padding:17px 34px;font-size:16.5px} .btn--block{display:flex;width:100%} .btn--primary{background:var(--grad-btn);color:#fff;box-shadow:0 12px 34px -12px rgba(46,155,240,.75),0 8px 26px -14px rgba(232,67,63,.7)} .btn--primary:hover{box-shadow:0 18px 48px -14px rgba(46,155,240,.9),0 12px 34px -14px rgba(232,67,63,.85)} .btn--outline{border-color:var(--line-2);color:var(--text);background:var(--card);backdrop-filter:blur(10px)} .btn--outline:hover{border-color:var(--blue);background:rgba(46,155,240,.1)} .btn--ghost{color:var(--muted)} .btn--ghost:hover{color:var(--text)} .btn[disabled]{opacity:.5;pointer-events:none} /* travelling sheen */ .btn__pulse{position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%);transform:translateX(-120%);animation:sheen 4.2s var(--ease) infinite} @keyframes sheen{0%,72%{transform:translateX(-120%)}100%{transform:translateX(120%)}} /* ── nav ────────────────────────────────────────────────────── */ .nav{position:fixed;top:0;left:0;right:0;z-index:110;padding:16px 0;transition:padding .35s var(--ease),background .35s,border-color .35s;border-bottom:1px solid transparent} .nav.is-stuck{padding:9px 0;background:var(--scrim);backdrop-filter:blur(18px) saturate(160%);border-bottom-color:var(--line)} .nav__inner{display:flex;align-items:center;gap:24px} .brand{display:flex;align-items:center;gap:11px;flex:none} .brand__mark{width:42px;height:42px;object-fit:contain} /* One text node so the app name reads as the literal string "CyberVoice" to crawlers and text extractors; the two-tone is done with a gradient rather than by splitting the word across two elements. */ /* The supplied horizontal lockup carries the mark, the wordmark and the tagline in one file, so the page no longer sets any brand type itself. */ /* cropped lockup is ~4.9:1, so 46px tall reads about 225px wide — close to the proportion the brand sheet shows in a header */ .brand__logo{height:46px;width:auto;display:block} .foot__brand .brand__logo{height:42px} @media (max-width:640px){.brand__logo{height:34px}} /* The supplied lockup sets its wordmark in near-black navy (#021254). Measured against the dark theme background rgb(11,18,32) that is 1.09:1 — the name and the tagline simply vanish, leaving a floating icon. The artwork is not ours to recolour, so in dark mode it sits on a light chip and reads as drawn. Delete this block if a dark-mode version of the logo is supplied. */ [data-theme="dark"] .brand__logo{ background:#fff;border-radius:10px;padding:5px 11px;box-sizing:content-box; } [data-theme="dark"] .cal__logo{background:#fff;border-radius:9px;padding:4px} .nav__links{display:flex;gap:28px;margin-inline:auto;font-size:14.5px;font-weight:500;color:var(--muted)} .nav__links a{position:relative;padding:6px 0;transition:color .25s} .nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--grad-btn);transition:right .35s var(--ease)} .nav__links a:hover{color:var(--text)} .nav__links a:hover::after{right:0} .nav__cta{display:flex;align-items:center;gap:10px;flex:none} .theme-toggle{ width:40px;height:40px;flex:none;display:grid;place-items:center;cursor:pointer; border:1px solid var(--line);border-radius:12px;background:var(--card); transition:border-color .3s,background .3s,transform .3s var(--ease); } .theme-toggle:hover{border-color:var(--line-2);transform:translateY(-2px)} .theme-toggle svg{width:18px;height:18px;fill:var(--muted);transition:fill .3s} .theme-toggle:hover svg{fill:var(--text)} /* show the icon for the theme you would switch *to* */ .theme-toggle .ico-sun{display:none} [data-theme="dark"] .theme-toggle .ico-sun{display:block} [data-theme="dark"] .theme-toggle .ico-moon{display:none} .nav__burger{display:none;flex-direction:column;gap:5px;width:42px;height:42px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);cursor:pointer} .nav__burger span{width:18px;height:2px;background:var(--text);border-radius:2px;transition:transform .3s var(--ease),opacity .2s} .nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0} .nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .mobile-menu{position:fixed;inset:64px 0 auto;z-index:105;background:var(--scrim);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);padding:22px 20px 28px} .mobile-menu nav{display:grid;gap:4px} .mobile-menu nav a{padding:13px 4px;font-family:var(--f-disp);font-size:18px;font-weight:600;border-bottom:1px solid var(--line)} .mobile-menu__cta{display:grid;gap:10px;margin-top:20px} /* ── hero ───────────────────────────────────────────────────── */ .hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:130px 0 90px;overflow:hidden} .hero__orb{opacity:var(--orb-opacity); position:absolute;top:50%;right:-6%;transform:translateY(-52%); width:min(60vw,760px);height:min(60vw,760px);pointer-events:none;opacity:.95; /* feather the canvas edge so the GL surface never shows a hard rectangle, regardless of how a given browser composites the alpha channel */ -webkit-mask-image:var(--orb-mask); mask-image:var(--orb-mask); filter:var(--orb-shadow); } .hero__inner{position:relative;z-index:2} .hero__copy{max-width:660px} .eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 16px 7px 12px;border:1px solid var(--line);border-radius:100px;background:var(--card);backdrop-filter:blur(10px);font-size:13px;font-weight:500;color:var(--muted);margin-bottom:26px} .eyebrow__dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(52,211,153,.7);animation:ping 2.2s infinite} @keyframes ping{70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}} .hero__h1{font-size:clamp(2.5rem,6.2vw,4.6rem);font-weight:800;margin-bottom:22px} .hero__h1 .grad-rb{display:block} .hero__sub{font-size:clamp(1.02rem,1.6vw,1.2rem);color:var(--muted);max-width:600px;margin-bottom:34px} .hero__sub strong{color:var(--text);font-weight:600} .hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:16px} .hero__micro{font-size:13.5px;color:var(--muted-2);margin-bottom:46px} .hero__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:600px} .hero__stats li{padding:16px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);backdrop-filter:blur(10px)} .hero__stats b{display:block;font-family:var(--f-disp);font-size:clamp(1.35rem,2.6vw,1.85rem);font-weight:800;background:var(--grad-rb);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1} .hero__stats span{font-size:12.2px;color:var(--muted-2)} /* ── hero conversation bubbles ──────────────────────────────── */ .hero__convo{ position:absolute;top:50%;right:4%;transform:translateY(-50%); width:min(34vw,400px);z-index:3;pointer-events:none; display:none; /* shown from 960px up — see media query */ } .convo__stack{display:flex;flex-direction:column;gap:12px;justify-content:center;min-height:340px} .cbub{ position:relative;max-width:88%;padding:13px 17px;border-radius:18px; font-size:14.2px;line-height:1.45; border:1px solid var(--line);background:var(--scrim-solid); box-shadow:0 14px 34px -18px rgba(11,18,32,.45); backdrop-filter:blur(10px); /* transition-driven, not animation-driven: an animation with `forwards` pins opacity and would beat the .is-out state */ opacity:0;transform:translateY(14px) scale(.96); transition:opacity .5s var(--ease),transform .5s var(--ease); } .cbub.is-in{opacity:1;transform:none} .cbub--ai{align-self:flex-start;border-bottom-left-radius:6px; background:linear-gradient(150deg,rgba(46,155,240,.16),rgba(46,155,240,.06)),var(--scrim-solid); border-color:rgba(46,155,240,.32)} .cbub--cust{align-self:flex-end;border-bottom-right-radius:6px; background:linear-gradient(150deg,rgba(232,67,63,.13),rgba(232,67,63,.05)),var(--scrim-solid); border-color:rgba(232,67,63,.3)} .cbub.is-old{opacity:.42;transform:translateY(-4px) scale(.965)} .cbub.is-out{opacity:0;transform:translateY(-16px) scale(.94)} .cbub__who{ display:block;font-family:var(--f-mono);font-size:10px;font-weight:600; letter-spacing:.14em;text-transform:uppercase;margin-bottom:5px; } .cbub--ai .cbub__who{color:var(--blue)} .cbub--cust .cbub__who{color:var(--red)} /* three bars that jump while the agent is mid-sentence */ .cbub__eq{display:inline-flex;align-items:flex-end;gap:2px;height:9px;margin-left:7px;vertical-align:-1px} .cbub__eq i{width:2px;height:100%;border-radius:2px;background:var(--blue);animation:eqbar .9s ease-in-out infinite} .cbub__eq i:nth-child(2){animation-delay:.15s} .cbub__eq i:nth-child(3){animation-delay:.3s} @keyframes eqbar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}} /* ── live ticker ────────────────────────────────────────────── */ .ticker{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:0;border-top:1px solid var(--line);background:var(--scrim);backdrop-filter:blur(14px);z-index:3;overflow:hidden} .ticker__label{display:flex;align-items:center;gap:8px;padding:12px 20px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);border-right:1px solid var(--line);flex:none} .live-dot{width:7px;height:7px;border-radius:50%;background:var(--red);animation:ping 1.8s infinite} .ticker__track{overflow:hidden;flex:1} .ticker__move{display:flex;gap:44px;white-space:nowrap;padding:12px 20px;font-size:13.5px;color:var(--muted);animation:ticker 40s linear infinite;will-change:transform} .ticker__move span b{color:var(--text);font-weight:600} @keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ── section shell ──────────────────────────────────────────── */ .section{padding:clamp(26px,2.9vw,42px) 0;position:relative} .sec-head{max-width:760px;margin-bottom:clamp(24px,2.6vw,36px)} .sec-kicker{display:inline-block;font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin-bottom:14px} .sec-kicker::before{content:"◆ ";color:var(--red)} .sec-h2{font-size:clamp(1.9rem,4.2vw,3.1rem);margin-bottom:16px} .sec-lede{color:var(--muted);font-size:clamp(1rem,1.4vw,1.1rem);max-width:640px} /* reveal-on-scroll */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .reveal.is-in{opacity:1;transform:none} /* ── demo section ───────────────────────────────────────────── */ .demo__modes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:26px} .mode{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);cursor:pointer;text-align:left;transition:border-color .3s,background .3s,transform .3s var(--ease)} .mode:hover{transform:translateY(-3px);border-color:var(--line-2)} .mode.is-active{border-color:var(--blue);background:linear-gradient(180deg,rgba(46,155,240,.14),rgba(46,155,240,.04));box-shadow:var(--glow-b)} .mode__ico{font-size:22px} .mode__t{font-family:var(--f-disp);font-weight:700;font-size:16px} .mode__d{font-size:13px;color:var(--muted-2)} .demo__stage{display:grid;grid-template-columns:290px 1fr;gap:20px;align-items:start} .demo__rail{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);padding:18px;position:sticky;top:96px} .demo__rail-title{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px} .demo__rail-list{display:grid;gap:6px;max-height:min(52vh,460px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;padding-right:4px} .ind-btn{display:flex;align-items:center;gap:11px;width:100%;padding:11px 13px;border:1px solid transparent;border-radius:12px;background:none;cursor:pointer;text-align:left;transition:background .25s,border-color .25s} .ind-btn:hover{background:var(--card-2)} .ind-btn.is-active{background:linear-gradient(96deg,rgba(232,67,63,.18),rgba(46,155,240,.18));border-color:var(--blue)} .ind-btn__ico{font-size:19px;flex:none} .ind-btn__n{font-size:14.5px;font-weight:600} .ind-btn__r{display:block;font-size:12px;color:var(--muted-2);font-weight:400} .demo__panels{display:grid;gap:18px;min-width:0} .demo__ctx{border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(150deg,rgba(46,155,240,.09),rgba(232,67,63,.06));padding:24px 26px} .demo__ctx-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap} .demo__ctx-ico{font-size:32px;line-height:1} .demo__ctx-head h3{font-size:20px} .demo__ctx-head p{font-size:13.5px;color:var(--muted)} .pill{margin-left:auto;padding:6px 14px;border-radius:100px;font-size:12.5px;font-weight:700;font-family:var(--f-mono);white-space:nowrap} .pill--ok{background:rgba(52,211,153,.14);color:var(--ok);border:1px solid rgba(52,211,153,.3)} .demo__ctx-line{font-size:15.5px;font-style:italic;color:var(--text);padding:14px 18px;border-left:3px solid;border-image:var(--grad-btn) 1;background:var(--card-2);border-radius:0 12px 12px 0;margin-bottom:16px} .demo__ctx-bullets{display:flex;flex-wrap:wrap;gap:8px} .demo__ctx-bullets li{font-size:12.8px;padding:6px 13px;border:1px solid var(--line);border-radius:100px;color:var(--muted);background:var(--card)} .demo__ctx-bullets li::before{content:"✓ ";color:var(--ok);font-weight:700} .panel{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);padding:28px} .panel__hint{font-size:14px;color:var(--muted);margin-bottom:18px} .panel__err{margin-top:12px;font-size:13.5px;color:#FF8A85} .field{display:grid;gap:6px;margin-bottom:14px} .field label{font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.02em} .field input,.field select{padding:14px 16px;border:1px solid var(--line-2);border-radius:12px;background:var(--ink);transition:border-color .25s,background .25s} .field input:focus,.field select:focus{border-color:var(--blue);background:rgba(46,155,240,.07);outline:none} .field input::placeholder{color:var(--muted-2)} .field--grow{flex:1;min-width:0} .field--cc{width:118px;flex:none} .field-row{display:flex;gap:12px;align-items:flex-end} .field-row .field{margin-bottom:14px} .check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);margin-bottom:18px;cursor:pointer} .check input{margin-top:3px;width:16px;height:16px;accent-color:var(--blue);flex:none} .check a{color:var(--blue-br);text-decoration:underline} .callstate{text-align:center;padding:20px 0} .callstate__ring{position:relative;width:96px;height:96px;margin:0 auto 22px} .callstate__ring span{position:absolute;inset:0;border:2px solid var(--blue);border-radius:50%;opacity:0;animation:ripple 2.4s var(--ease) infinite} .callstate__ring span:nth-child(2){animation-delay:.8s} .callstate__ring span:nth-child(3){animation-delay:1.6s} @keyframes ripple{0%{transform:scale(.35);opacity:1}100%{transform:scale(1);opacity:0}} .callstate h4{font-size:20px;margin-bottom:8px} .callstate p{font-size:14px;color:var(--muted);margin-bottom:18px} .webcall__viz{border:1px solid var(--line);border-radius:var(--r);background:var(--well);margin-bottom:18px;overflow:hidden} #webViz{width:100%;height:120px;display:block} .webcall__transcript{max-height:230px;overflow-y:auto;display:grid;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)} .bubble{padding:11px 15px;border-radius:14px;font-size:14px;max-width:86%} .bubble--ai{background:linear-gradient(96deg,rgba(46,155,240,.16),rgba(46,155,240,.07));border:1px solid rgba(46,155,240,.28);justify-self:start;border-bottom-left-radius:4px} .bubble--me{background:var(--card-2);border:1px solid var(--line);justify-self:end;border-bottom-right-radius:4px} .player__wave{display:flex;align-items:center;gap:3px;height:88px;padding:0 4px;margin-bottom:18px} .player__wave i{flex:1;min-width:2px;border-radius:2px;background:var(--line-2);transition:background .18s,transform .18s} .player__wave i.on{background:var(--grad-btn)} .player__bar{display:flex;align-items:center;gap:16px;margin-bottom:20px} .player__play{width:54px;height:54px;flex:none;border:none;border-radius:50%;background:var(--grad-btn);cursor:pointer;display:grid;place-items:center;box-shadow:var(--glow-b)} .player__play svg{width:22px;height:22px;fill:#fff} .player__meta{display:flex;flex-direction:column;gap:2px;font-size:14px} .player__meta span:last-child{font-size:12.5px;color:var(--muted-2)} .player__script{display:grid;gap:9px;max-height:240px;overflow-y:auto} .player__script .line{padding:10px 14px;border-radius:12px;font-size:14px;opacity:.42;transition:opacity .3s,background .3s} .player__script .line.is-now{opacity:1;background:rgba(46,155,240,.12)} .player__script .line b{color:var(--blue-br);font-weight:600;margin-right:6px} .player__script .line.line--cust b{color:var(--red)} .skel{border-radius:12px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.09),rgba(255,255,255,.04));background-size:200% 100%;animation:shimmer 1.4s linear infinite} .skel--row{height:46px;margin-bottom:6px} @keyframes shimmer{to{background-position:-200% 0}} /* ── industries grid ────────────────────────────────────────── */ .ind-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px} .ind-card{position:relative;padding:26px 24px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);overflow:hidden;transition:transform .4s var(--ease),border-color .4s;cursor:pointer} .ind-card::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(46,155,240,.16),transparent 45%);opacity:0;transition:opacity .4s} .ind-card:hover{transform:translateY(-6px);border-color:var(--line-2)} .ind-card:hover::before{opacity:1} .ind-card__ico{font-size:32px;margin-bottom:14px;display:block} .ind-card h3{font-size:17.5px;margin-bottom:6px} .ind-card__role{font-size:13.5px;color:var(--muted);margin-bottom:14px} .ind-card__stat{display:inline-block;font-family:var(--f-mono);font-size:12.5px;font-weight:700;color:var(--ok);padding:5px 12px;border:1px solid rgba(52,211,153,.28);border-radius:100px;background:rgba(52,211,153,.1)} .ind-card__try{position:absolute;right:20px;bottom:24px;font-size:13px;font-weight:600;color:var(--blue-br);opacity:0;transform:translateX(-6px);transition:.35s var(--ease)} .ind-card:hover .ind-card__try{opacity:1;transform:none} .industries__note{margin-top:18px;font-size:14.5px;color:var(--muted);text-align:center} .industries__note a{color:var(--blue-br);text-decoration:underline} /* ── use cases ──────────────────────────────────────────────── */ .uc-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:24px} .uc-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:1px solid var(--line);border-radius:100px;background:var(--card);cursor:pointer;font-size:14px;font-weight:500;color:var(--muted);transition:.28s var(--ease)} .uc-chip:hover{border-color:var(--line-2);color:var(--text);transform:translateY(-2px)} .uc-chip.is-active{background:var(--grad-btn);border-color:transparent;color:#fff;font-weight:600;box-shadow:var(--glow-b)} .uc-chip span{font-size:16px} .uc-body{display:grid;grid-template-columns:272px 1fr;gap:20px;align-items:start} .uc-side{padding:28px 26px;border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(165deg,rgba(46,155,240,.11),rgba(232,67,63,.06));position:sticky;top:96px} .uc-side__ico{font-size:40px;display:block;margin-bottom:14px;line-height:1} .uc-side h3{font-size:20px;margin-bottom:5px} .uc-side p{font-size:13.5px;color:var(--muted);margin-bottom:22px} .uc-side__legend{display:grid;gap:9px;padding:16px 0;margin-bottom:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .uc-side__legend span{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted)} .dot{width:8px;height:8px;border-radius:50%;flex:none} .dot--in{background:var(--blue-br)} .dot--out{background:var(--red)} .dot--fu{background:var(--ok)} .uc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:14px;min-width:0} .uc-card{position:relative;padding:24px 24px 24px 26px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);overflow:hidden;transition:transform .38s var(--ease),border-color .38s} .uc-card:hover{transform:translateY(-4px);border-color:var(--line-2)} .uc-card::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 3px 3px 0} .uc-card--inbound::before{background:var(--blue-br)} .uc-card--outbound::before{background:var(--red)} .uc-card--followup::before{background:var(--ok)} .uc-card__kind{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;padding:5px 11px;border-radius:100px;margin-bottom:13px;border:1px solid} .uc-card--inbound .uc-card__kind{color:var(--blue-br);border-color:rgba(99,204,255,.32);background:rgba(99,204,255,.1)} .uc-card--outbound .uc-card__kind{color:var(--red);border-color:rgba(232,67,63,.34);background:rgba(232,67,63,.1)} .uc-card--followup .uc-card__kind{color:var(--ok);border-color:rgba(52,211,153,.32);background:rgba(52,211,153,.1)} .uc-card h4{font-family:var(--f-disp);font-size:16.5px;font-weight:700;margin-bottom:9px;line-height:1.25} .uc-card p{font-size:13.8px;color:var(--muted)} /* ── voice examples ─────────────────────────────────────────── */ .voice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px} .voice{display:flex;align-items:center;gap:13px;padding:15px 17px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);cursor:pointer;text-align:left;transition:transform .3s var(--ease),border-color .3s} .voice:hover{transform:translateY(-3px);border-color:var(--line-2)} .voice.is-playing{border-color:var(--blue);background:linear-gradient(150deg,rgba(46,155,240,.14),transparent);box-shadow:var(--glow-b)} .voice__play{width:38px;height:38px;flex:none;border-radius:50%;background:var(--grad-btn);display:grid;place-items:center;color:#fff;font-size:13px} .voice__meta{min-width:0} .voice__n{display:block;font-family:var(--f-disp);font-weight:700;font-size:15px} .voice__d{display:block;font-size:12.5px;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .voice__tag{margin-left:auto;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ok);flex:none} /* ── steps ──────────────────────────────────────────────────── */ .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;counter-reset:s} .step{position:relative;padding:30px 24px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);overflow:hidden} .step::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--grad-btn);transition:width 1s var(--ease) .2s} .step.is-in::after{width:100%} .step__n{font-family:var(--f-mono);font-size:34px;font-weight:600;background:var(--grad-rb);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;margin-bottom:14px;opacity:.85} .step h3{font-size:17.5px;margin-bottom:8px} .step p{font-size:14px;color:var(--muted)} /* ── bento ──────────────────────────────────────────────────── */ .bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .bento__card{position:relative;grid-column:span 1;padding:28px 26px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);overflow:hidden;transition:border-color .4s,transform .4s var(--ease)} .bento__card:hover{border-color:var(--line-2);transform:translateY(-4px)} .bento__card--wide{grid-column:span 2} .bento__card h3{font-size:18px;margin-bottom:10px} .bento__card p{font-size:14.2px;color:var(--muted)} .bento__wave{position:absolute;left:0;right:0;bottom:0;height:60px;opacity:.32; background:repeating-linear-gradient(90deg,var(--blue) 0 2px,transparent 2px 7px); mask-image:radial-gradient(ellipse 90% 100% at 50% 130%,#000,transparent 70%); animation:eq 3.2s ease-in-out infinite alternate} @keyframes eq{to{opacity:.12;transform:scaleY(.55)}} /* ── ROI ────────────────────────────────────────────────────── */ .roi__box{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:start} .roi__controls{display:grid;gap:26px;padding:32px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)} .slider label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;color:var(--muted);margin-bottom:12px} .slider label b{font-family:var(--f-mono);font-size:17px;color:var(--blue-br);font-weight:600} input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:100px;background:linear-gradient(90deg,var(--red) 0%,var(--blue) var(--pct,30%),var(--card-2) var(--pct,30%));outline:none;cursor:pointer} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--blue);cursor:grab;box-shadow:0 0 18px rgba(46,155,240,.75);transition:transform .2s} input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)} input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--blue);cursor:grab;box-shadow:0 0 18px rgba(46,155,240,.75)} .roi__result{padding:32px;border:1px solid rgba(232,67,63,.28);border-radius:var(--r-lg);background:linear-gradient(165deg,rgba(232,67,63,.12),rgba(46,155,240,.08));position:sticky;top:96px} .roi__label{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:8px} .roi__big{font-family:var(--f-disp);font-size:clamp(2.2rem,5vw,3.2rem);font-weight:800;background:var(--grad-rb);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.05;margin-bottom:22px;font-variant-numeric:tabular-nums} .roi__split{display:grid;gap:12px;padding-bottom:20px;margin-bottom:18px;border-bottom:1px solid var(--line)} .roi__split div{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;color:var(--muted)} .roi__split b{font-family:var(--f-mono);color:var(--text);font-weight:600} .roi__net{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:22px;font-size:14px;color:var(--muted)} .roi__net b{font-family:var(--f-mono);font-size:22px;color:var(--ok);font-weight:700} .roi__fine{margin-top:12px;font-size:11.5px;color:var(--muted-2);text-align:center} /* ── pricing ────────────────────────────────────────────────── */ .billing-toggle{display:inline-flex;gap:4px;padding:5px;border:1px solid var(--line);border-radius:100px;background:var(--card);margin-bottom:36px} .bt{padding:10px 24px;border:none;border-radius:100px;background:none;cursor:pointer;font-family:var(--f-disp);font-weight:600;font-size:14.5px;color:var(--muted);transition:.3s var(--ease);display:inline-flex;align-items:center;gap:8px} .bt.is-active{background:var(--grad-btn);color:#fff;box-shadow:var(--glow-b)} .bt__save{font-size:11px;padding:3px 8px;border-radius:100px;background:rgba(52,211,153,.2);color:var(--ok);font-family:var(--f-mono)} .bt.is-active .bt__save{background:rgba(255,255,255,.22);color:#fff} .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;align-items:start} .plan{position:relative;padding:32px 28px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--card);transition:transform .4s var(--ease),border-color .4s} .plan:hover{transform:translateY(-6px);border-color:var(--line-2)} .plan--pop{border-color:var(--blue);background:linear-gradient(170deg,rgba(46,155,240,.13),rgba(232,67,63,.05));box-shadow:var(--glow-b)} .plan__tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);padding:6px 18px;border-radius:100px;background:var(--grad-btn);font-family:var(--f-disp);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;box-shadow:var(--glow-r)} .plan__name{font-size:20px;margin-bottom:6px} .plan__desc{font-size:13.5px;color:var(--muted);margin-bottom:22px;min-height:40px} .plan__price{display:flex;align-items:baseline;gap:5px;margin-bottom:4px} .plan__cur{font-size:22px;font-weight:600;color:var(--muted)} .plan__amt{font-family:var(--f-disp);font-size:44px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums} .plan__per{font-size:14px;color:var(--muted-2)} .plan__was{font-size:13px;color:var(--muted-2);text-decoration:line-through;margin-bottom:6px;min-height:19px} .plan__gst{font-size:12px;color:var(--muted-2);margin-bottom:8px} .plan__setup{display:inline-block;font-size:12px;font-family:var(--f-mono);padding:5px 12px;border-radius:100px;border:1px solid var(--line);color:var(--muted);margin-bottom:22px} .plan__feats{display:grid;gap:10px;margin-bottom:26px} .plan__feats li{display:flex;gap:10px;font-size:13.8px;color:var(--muted);align-items:flex-start} .plan__feats li::before{content:"✓";color:var(--ok);font-weight:800;flex:none} .plan__rate{padding:12px 14px;border-radius:12px;background:var(--well);border:1px solid var(--line);font-size:12.5px;color:var(--muted);margin-bottom:20px;font-family:var(--f-mono)} .plan__rate b{color:var(--blue-br)} .pricing__note{margin-top:18px;font-size:13.5px;color:var(--muted-2);text-align:center;max-width:680px;margin-inline:auto} .pricing__note a{color:var(--blue-br);text-decoration:underline} /* ── comparison ─────────────────────────────────────────────── */ .table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)} .cmp{width:100%;border-collapse:collapse;min-width:720px} .cmp th,.cmp td{padding:16px 20px;text-align:left;font-size:14px;border-bottom:1px solid var(--line)} .cmp thead th{font-family:var(--f-disp);font-size:14.5px;font-weight:700;color:var(--muted);background:var(--well)} .cmp thead th.cmp__us{color:var(--blue-br)} .cmp tbody th{font-weight:500;color:var(--muted)} .cmp td{color:var(--muted-2)} .cmp .cmp__us{background:linear-gradient(180deg,rgba(46,155,240,.09),rgba(46,155,240,.03));color:var(--text)} .cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:none} /* ── proof ──────────────────────────────────────────────────── */ .proof__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px} .quote{padding:28px 26px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)} .quote p{font-size:15px;margin-bottom:18px} .quote footer{display:flex;align-items:center;gap:12px;font-size:13.5px} .quote__av{width:40px;height:40px;border-radius:50%;background:var(--grad-btn);display:grid;place-items:center;font-weight:700;flex:none} .quote__who b{display:block} .quote__who span{color:var(--muted-2);font-size:12.5px} /* ── booking ────────────────────────────────────────────────── */ .book__box{display:grid;grid-template-columns:1fr 1.05fr;gap:0;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:var(--card)} .book__left{padding:44px 40px;background:linear-gradient(165deg,rgba(232,67,63,.1),rgba(46,155,240,.07))} .book__left .sec-h2{font-size:clamp(1.6rem,3vw,2.3rem)} .book__left .sec-lede{font-size:15px;margin-bottom:26px} .book__list{display:grid;gap:12px} .book__list li{display:flex;gap:11px;font-size:14.2px;color:var(--muted);align-items:flex-start} .book__list li::before{content:"✓";color:var(--ok);font-weight:800;flex:none} .book__scarcity{margin-top:24px;padding:13px 17px;border:1px solid rgba(251,191,36,.3);border-radius:12px;background:rgba(251,191,36,.09);font-size:13.5px;color:var(--warn);font-weight:600} .book__right{padding:40px} .bookform__legend{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin:0 0 12px} .bookform__step[data-step="2"]{margin-top:26px;padding-top:26px;border-top:1px solid var(--line)} .tzhint{text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted-2);margin-left:6px} .daystrip{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin-bottom:22px;scrollbar-width:thin} .day{flex:none;width:66px;padding:12px 0;border:1px solid var(--line);border-radius:14px;background:var(--card);cursor:pointer;text-align:center;transition:.28s var(--ease)} .day:hover:not(.is-off){border-color:var(--line-2);transform:translateY(-2px)} .day.is-active{background:var(--grad-btn);border-color:transparent;box-shadow:var(--glow-b)} .day.is-off{opacity:.32;pointer-events:none} .day__d{display:block;font-size:11px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.08em} .day.is-active .day__d{color:rgba(255,255,255,.85)} .day__n{display:block;font-family:var(--f-disp);font-size:19px;font-weight:700} .slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;min-height:60px} .slots__empty{grid-column:1/-1;font-size:13.5px;color:var(--muted-2)} .slot{padding:11px 6px;border:1px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer;font-family:var(--f-mono);font-size:13.5px;transition:.25s var(--ease)} .slot:hover:not(:disabled){border-color:var(--blue);transform:translateY(-2px)} .slot.is-active{background:var(--grad-btn);border-color:transparent;box-shadow:var(--glow-b)} .slot:disabled{opacity:.28;cursor:not-allowed;text-decoration:line-through} .bookform__done{text-align:center;padding:30px 0} .tick{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:rgba(52,211,153,.16);border:2px solid var(--ok);color:var(--ok);font-size:30px;display:grid;place-items:center} .bookform__done h3{font-size:22px;margin-bottom:10px} .bookform__done p{font-size:14.5px;color:var(--muted);margin-bottom:20px} /* ── FAQ ────────────────────────────────────────────────────── */ .acc{display:grid;gap:10px} .acc__item{border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden;transition:border-color .3s} .acc__item.is-open{border-color:var(--blue)} .acc__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 24px;background:none;border:none;cursor:pointer;text-align:left;font-family:var(--f-disp);font-size:16px;font-weight:600} .acc__ico{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-size:17px;color:var(--blue-br);transition:transform .35s var(--ease),background .3s} .acc__item.is-open .acc__ico{transform:rotate(45deg);background:var(--grad-btn);color:#fff;border-color:transparent} .acc__a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)} .acc__a p{padding:0 24px 22px;font-size:14.5px;color:var(--muted)} /* ── final CTA ──────────────────────────────────────────────── */ .final__box{position:relative;text-align:center;padding:clamp(46px,7vw,84px) 30px;border:1px solid var(--line);border-radius:var(--r-xl);background:linear-gradient(160deg,rgba(232,67,63,.13),rgba(46,155,240,.11));overflow:hidden} .final__box::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;opacity:.2;background:repeating-linear-gradient(90deg,var(--blue-br) 0 2px,transparent 2px 9px);mask-image:radial-gradient(ellipse 70% 100% at 50% 140%,#000,transparent 70%);animation:eq 3.6s ease-in-out infinite alternate} .final__box h2{font-size:clamp(1.7rem,4vw,2.9rem);margin-bottom:14px;max-width:840px;margin-inline:auto} .final__box p{color:var(--muted);font-size:1.05rem;margin-bottom:30px} .final__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;position:relative;z-index:1} /* ── footer ─────────────────────────────────────────────────── */ .foot{border-top:1px solid var(--line);padding:56px 0 26px;background:var(--foot-bg)} .foot__inner{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px;padding-bottom:34px} .foot__brand p{font-size:13.5px;color:var(--muted-2);margin-top:14px;max-width:290px} .foot__col h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px} .foot__col a{display:block;font-size:14px;color:var(--muted);padding:5px 0;transition:color .25s} .foot__col a:hover{color:var(--blue-br)} .foot__base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted-2)} /* ── sticky mobile CTA + toast ──────────────────────────────── */ .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:100;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--scrim);backdrop-filter:blur(16px);border-top:1px solid var(--line);transform:translateY(120%);transition:transform .45s var(--ease);display:none} .sticky-cta.is-in{transform:none} .toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,140%);z-index:200;padding:14px 24px;border-radius:100px;background:var(--scrim-solid);border:1px solid var(--line-2);backdrop-filter:blur(16px);font-size:14px;box-shadow:var(--shadow);transition:transform .5s var(--ease);max-width:calc(100% - 40px)} .toast.is-in{transform:translate(-50%,0)} .toast--ok{border-color:rgba(52,211,153,.5)} .toast--err{border-color:rgba(255,138,133,.5)} /* ── responsive ─────────────────────────────────────────────── */ /* the conversation needs real estate beside the copy to avoid colliding */ @media (min-width:960px){ .hero__convo{display:block} } @media (max-width:1080px){ .nav__links{display:none} .nav__burger{display:flex} .hero__orb{opacity:var(--orb-opacity);opacity:.4;right:-24%} .demo__stage{grid-template-columns:1fr} .uc-body{grid-template-columns:1fr} .uc-side{position:static} .demo__rail{position:static} .demo__rail-list{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));display:grid;max-height:none} .roi__box{grid-template-columns:1fr} .roi__result{position:static} .book__box{grid-template-columns:1fr} .bento{grid-template-columns:repeat(2,1fr)} .bento__card--wide{grid-column:span 2} .foot__inner{grid-template-columns:1fr 1fr} } @media (max-width:720px){ .hero{padding:110px 0 96px;min-height:auto} .hero__orb{opacity:var(--orb-opacity);display:none} .hero__stats{grid-template-columns:repeat(2,1fr)} .hero__actions .btn{width:100%} .demo__modes{grid-template-columns:1fr} .mode{flex-direction:row;align-items:center;gap:12px} .mode__t{flex:none} .mode__d{display:none} .bento{grid-template-columns:1fr} .bento__card--wide{grid-column:span 1} .panel,.book__left,.book__right,.roi__controls,.roi__result{padding:24px 20px} .sticky-cta{display:block} .ticker__label{padding:10px 14px;font-size:11px} .foot__inner{grid-template-columns:1fr;gap:26px} .final__actions .btn{width:100%} body{padding-bottom:0} .section{padding:30px 0} } /* ══════════════════════════════════════════════════════════════════════ /book — standalone booking page, scheduler layout Event details on the left, month grid + times on the right, then a details step. Two steps rather than one long form: choosing a time and typing contact details are different jobs, and mixing them makes the page read as a wall of fields. ══════════════════════════════════════════════════════════════════════ */ .bookpage{padding-top:clamp(84px,9vw,112px);min-height:70vh} .bookpage .book{padding-top:0} .bookpage__back{margin-top:22px;text-align:center;color:var(--muted-2);font-size:14.5px} .bookpage__back a{color:var(--blue-br);text-decoration:underline} .cal{ display:grid;grid-template-columns:320px 1fr; border:1px solid var(--line);border-radius:var(--r-xl); background:var(--card);overflow:hidden;box-shadow:var(--shadow); } /* ── left: what you are booking ─────────────────────────────────────── */ .cal__host{padding:30px 28px;border-right:1px solid var(--line);background:var(--card-2)} .cal__logo{border-radius:12px;margin-bottom:14px} .cal__org{color:var(--muted-2);font-size:14px;margin:0 0 4px} .cal__event{font-family:var(--f-disp);font-size:clamp(1.4rem,2.1vw,1.75rem);line-height:1.2;margin:0 0 16px;color:var(--text)} .cal__meta{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:9px} .cal__meta li{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:14.5px;font-weight:500} .cal__ico{font-size:15px;line-height:1;width:18px;text-align:center} .cal__desc{color:var(--muted);font-size:14.5px;line-height:1.6;margin:0 0 18px} .cal__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px} .cal__list li{position:relative;padding-left:22px;color:var(--muted);font-size:13.5px;line-height:1.5} .cal__list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--blue-br);font-weight:700} .cal__chosen{margin-top:20px;padding:13px 15px;border-radius:var(--r);border:1px solid var(--blue-br);background:color-mix(in srgb,var(--blue-br) 9%,transparent)} .cal__chosen-label{margin:0 0 3px;font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted-2)} .cal__chosen-when{margin:0;font-weight:700;color:var(--text);font-size:15px} /* ── right: the flow ────────────────────────────────────────────────── */ .cal__main{padding:30px 30px 34px} .cal__h{font-family:var(--f-disp);font-size:1.3rem;margin:0 0 20px;color:var(--text)} .cal__cols{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:32px;align-items:start;justify-content:start} /* Cap the month: cells are square, so an uncapped column made them ~71px and the calendar towered over the times. ~52px is the usual scheduler size. */ .cal__monthwrap{max-width:392px} .cal__nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px} .cal__month{font-weight:700;font-size:16px;color:var(--text)} .cal__navbtn{ width:34px;height:34px;border-radius:50%;border:1px solid var(--line); background:transparent;color:var(--text);font-size:19px;line-height:1;cursor:pointer; transition:background .15s var(--ease),border-color .15s var(--ease); } .cal__navbtn:hover:not(:disabled){background:var(--well);border-color:var(--blue-br)} .cal__navbtn:disabled{opacity:.3;cursor:not-allowed} .cal__dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px} .cal__dow span{text-align:center;font-size:11.5px;font-weight:600;color:var(--muted-2);text-transform:uppercase;letter-spacing:.04em} .cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px} .cal__cell{ aspect-ratio:1;display:flex;align-items:center;justify-content:center; border:0;border-radius:50%;background:transparent; font-size:14px;font-weight:600;font-family:var(--f-body);cursor:pointer; color:var(--muted-2);transition:background .14s var(--ease),color .14s var(--ease); } .cal__cell--pad{cursor:default} .cal__cell.is-open{background:color-mix(in srgb,var(--blue-br) 11%,transparent);color:var(--blue-br)} .cal__cell.is-open:hover{background:color-mix(in srgb,var(--blue-br) 22%,transparent)} .cal__cell.is-closed{color:var(--muted-2);opacity:.4;cursor:not-allowed} .cal__cell.is-today{box-shadow:inset 0 0 0 1px var(--blue-br)} .cal__cell.is-active{background:var(--blue-br);color:#fff} .cal__cell.is-active:hover{background:var(--blue-dp)} .cal__legend{display:flex;align-items:center;gap:7px;margin:14px 0 0;font-size:12.5px;color:var(--muted-2)} .cal__dot{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--blue-br) 40%,transparent);display:inline-block} .cal__slotcol{min-width:0} .cal__slotshead{margin:0 0 12px;font-weight:600;font-size:14.5px;color:var(--text)} /* Two columns and no scroller: a day holds ~18 slots, which stacked in one scrolling column left the list cramped while the calendar beside it towered over empty space. Two columns put every time on screen at once and bring the two halves to roughly the same height. */ .cal__slots{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;align-content:start} .cal__slots .slots__empty{grid-column:1/-1} .cal__slots .slot{ width:100%;padding:10px 8px;border:1px solid var(--blue-br);border-radius:var(--r-sm); background:transparent;color:var(--blue-br);font-weight:600;font-size:14px;text-align:center; font-family:var(--f-body);cursor:pointer;transition:background .14s var(--ease),color .14s var(--ease); } .cal__slots .slot:hover:not(:disabled){background:var(--blue-br);color:#fff} .cal__slots .slot:disabled{opacity:.35;cursor:not-allowed;border-color:var(--line);color:var(--muted-2)} .cal__slots .slots__empty{color:var(--muted-2);font-size:14px;margin:0} .cal__back{ background:none;border:0;color:var(--muted);font-size:14.5px;font-weight:600; cursor:pointer;padding:0;margin-bottom:12px;font-family:var(--f-body); } .cal__back:hover{color:var(--blue-br)} .cal__step[hidden]{display:none!important} /* ── responsive ─────────────────────────────────────────────────────── */ @media (max-width:900px){ .cal{grid-template-columns:1fr} .cal__host{border-right:0;border-bottom:1px solid var(--line)} .cal__cols{grid-template-columns:1fr;gap:24px} .cal__slots{grid-template-columns:repeat(3,1fr)} .cal__main{padding:24px 20px 28px;min-height:0} } @media (max-width:520px){ .cal__host{padding:24px 20px} .cal__slots{grid-template-columns:repeat(2,1fr)} }