/* ZynTrail website v4 — AiderFlow-style presentation in ZynTrail's brand. Light by default; [data-theme="dark"] on switches the tokens. Mobile-first. Breakpoints: 560 · 768 · 900 · 1100 · 1180. */ /* ---------- fonts (self-hosted variable woff2, Google Fonts subsets) ---------- */ @font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/montserrat-var-cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F} @font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/montserrat-var-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/montserrat-var-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/montserrat-var-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Golos Text";font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/golos-var-cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F} @font-face{font-family:"Golos Text";font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/golos-var-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:"Golos Text";font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/golos-var-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Golos Text";font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/golos-var-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* ---------- tokens ---------- */ :root{ color-scheme:light; --font-d:"Montserrat","Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --font-b:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --bg:#f3f8fc; --surface:#ffffff; --surface-2:#f4f7fb; --card:rgba(255,255,255,.88); --glass:rgba(255,255,255,.66); --glass-strong:rgba(255,255,255,.9); --line:#dde5ee; --line-soft:rgba(15,40,80,.08); --ink:#0f1b2d; --ink-2:#44526a; --muted:#5b6679; --navy:#0f1b33; --navy-ink:#ffffff; --acc:#1675c4; --acc-text:#1668ae; --pill-bg:rgba(22,117,196,.08); --pill-bd:rgba(22,117,196,.2); --ok:#047857; --ok-bg:rgba(4,120,87,.1); --warn-text:#b45309; --danger:#b91c1c; --field-bg:#f8fafc; --grad-text:linear-gradient(92deg,#1675c4 0%,#0a86b8 52%,#0b8f7a 100%); --grad-btn:linear-gradient(90deg,#2fb6f2 0%,#1fd398 100%); --grad-btn-hover:linear-gradient(90deg,#19a5eb 0%,#12c78c 100%); --grad-bar:linear-gradient(90deg,rgba(47,182,242,0),#2fb6f2 28%,#1fd398 72%,rgba(31,211,152,0)); --sh-sm:0 1px 2px rgba(15,40,80,.06),0 2px 8px -2px rgba(15,40,80,.06); --sh:0 1px 2px rgba(15,40,80,.05),0 14px 34px -14px rgba(15,40,80,.2); --sh-lg:0 2px 6px rgba(15,40,80,.05),0 30px 70px -28px rgba(15,40,80,.32); --wash: radial-gradient(70vmax 60vmax at -12% 38%,rgba(47,182,242,.30),rgba(47,182,242,0) 62%), radial-gradient(60vmax 55vmax at 112% -6%,rgba(31,211,152,.24),rgba(31,211,152,0) 60%), radial-gradient(50vmax 45vmax at 104% 96%,rgba(31,211,152,.13),rgba(31,211,152,0) 60%), linear-gradient(118deg,#e8f4fd 0%,#f8fbfe 46%,#eefaf5 100%); --pad:16px; --maxw:1200px; --hdr-h:64px; } :root[data-theme="dark"]{ color-scheme:dark; --bg:#0b0f19; --surface:#0f1522; --surface-2:#141d2d; --card:rgba(16,23,37,.86); --glass:rgba(13,19,31,.66); --glass-strong:rgba(16,23,37,.94); --line:#243047; --line-soft:rgba(148,163,184,.14); --ink:#f1f5f9; --ink-2:#b3bfd0; --muted:#96a2b6; --navy:#e9f0f8; --navy-ink:#0b1a33; --acc:#4ea6ee; --acc-text:#6cb8f4; --pill-bg:rgba(93,176,242,.1); --pill-bd:rgba(93,176,242,.26); --ok:#34d399; --ok-bg:rgba(52,211,153,.12); --warn-text:#fbbf62; --danger:#fca5a5; --field-bg:#0b1220; --grad-text:linear-gradient(92deg,#5db0f2 0%,#3cc6e0 50%,#34d3a6 100%); --sh-sm:0 1px 2px rgba(0,0,0,.3),0 2px 8px -2px rgba(0,0,0,.3); --sh:0 1px 2px rgba(0,0,0,.3),0 16px 36px -16px rgba(0,0,0,.6); --sh-lg:0 2px 6px rgba(0,0,0,.3),0 30px 70px -28px rgba(0,0,0,.75); --wash: radial-gradient(70vmax 60vmax at -12% 38%,rgba(22,117,196,.26),rgba(22,117,196,0) 62%), radial-gradient(60vmax 55vmax at 112% -6%,rgba(2,202,150,.13),rgba(2,202,150,0) 60%), radial-gradient(50vmax 45vmax at 104% 96%,rgba(2,202,150,.08),rgba(2,202,150,0) 60%), linear-gradient(118deg,#0b1422 0%,#0b0f19 50%,#0a1513 100%); } @media (min-width:768px){:root{--pad:24px;--hdr-h:68px}} @media (min-width:1024px){:root{--pad:32px}} /* ---------- base ---------- */ *,*::before,*::after{box-sizing:border-box} html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:92px} body{margin:0;background:transparent;color:var(--ink);font:400 16px/1.6 var(--font-b);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none;overflow-x:clip;min-height:100vh} img,svg{display:block;max-width:100%} a{color:inherit} p,h1,h2,h3,h4,ul,ol,dl,dd,figure{margin:0} ul,ol{padding:0;list-style:none} button,input,textarea,select{font:inherit;color:inherit} button{cursor:pointer} .i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .nw{white-space:nowrap} :focus-visible{outline:3px solid #2f8fe0;outline-offset:3px;border-radius:6px} .skip{position:absolute;left:12px;top:-60px;z-index:100;display:inline-flex;align-items:center;min-height:44px;background:var(--navy);color:var(--navy-ink);padding:0 18px;border-radius:999px;font:700 14px var(--font-d);text-decoration:none;transition:top .2s} .skip:focus{top:12px} /* background: gradient wash + particle network (fixed, behind everything) */ .bg{position:fixed;inset:0;z-index:-1;background:var(--wash);pointer-events:none} .net{position:absolute;inset:0;width:100%;height:100%;opacity:.9} :root[data-theme="dark"] .net{opacity:.75} .wrap{width:100%;max-width:calc(var(--maxw) + 2*var(--pad));margin-inline:auto;padding-inline:var(--pad)} .wrap-wide{max-width:calc(1248px + 2*var(--pad))} .wrap-narrow{max-width:calc(860px + 2*var(--pad))} /* ---------- type ---------- */ .h1,.h2,.h3,h3,h4{font-family:var(--font-d);color:var(--ink);letter-spacing:-.018em} .h1{font-weight:800;font-size:clamp(2.2rem,1.3rem + 3.6vw,3.55rem);line-height:1.08;text-wrap:balance} .h1-main{display:block} .h1-acc{display:block;font-size:.7em;line-height:1.16;margin-top:.34em;letter-spacing:-.012em;text-wrap:balance} .h2{font-weight:800;font-size:clamp(1.8rem,1.15rem + 2.1vw,2.8rem);line-height:1.14;text-wrap:balance} .grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone} .db{display:block} .eyebrow{font:700 13px/1.2 var(--font-d);letter-spacing:.14em;text-transform:uppercase;color:var(--acc-text);margin-bottom:12px} .pill{display:inline-block;font:600 14px/1 var(--font-d);color:var(--acc-text);background:var(--pill-bg);border:1px solid var(--pill-bd);padding:8px 18px;border-radius:999px} .sh{text-align:center;max-width:860px;margin:0 auto clamp(32px,3.5vw,52px)} .sh-bar{display:block;width:170px;height:4px;margin:16px auto 14px;border-radius:4px;background:var(--grad-bar)} .sh-lede{font-size:clamp(1.02rem,.95rem + .3vw,1.15rem);color:var(--ink-2);margin:14px auto 0;max-width:720px;text-wrap:pretty} p{text-wrap:pretty} .tlink{color:var(--acc-text);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .tlink .i{display:inline-block;vertical-align:-2px;margin-left:4px;width:15px;height:15px} /* ---------- buttons ---------- */ .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:46px;padding:0 22px;border-radius:999px;border:1.5px solid transparent;font:700 15px/1.15 var(--font-d);letter-spacing:.005em;text-decoration:none;text-align:center;white-space:nowrap;transition:transform .15s ease,box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease;-webkit-tap-highlight-color:transparent} .btn .i{width:18px;height:18px} .btn-sm{min-height:44px;padding:0 18px;font-size:14px} .btn-lg{min-height:56px;padding:0 30px;font-size:16px} .btn-block{display:flex;width:100%;white-space:normal} .btn-grad{background:var(--grad-btn);color:#0b1a33;box-shadow:0 12px 26px -12px rgba(25,165,235,.7),inset 0 1px 0 rgba(255,255,255,.35)} .btn-grad:hover{background:var(--grad-btn-hover);transform:translateY(-1px);box-shadow:0 16px 30px -12px rgba(25,165,235,.75),inset 0 1px 0 rgba(255,255,255,.35)} .btn-navy{background:var(--navy);color:var(--navy-ink);box-shadow:0 10px 24px -12px rgba(15,27,51,.6)} .btn-navy:hover{transform:translateY(-1px);filter:brightness(1.15)} .btn-outline{background:var(--glass-strong);border-color:var(--ink);color:var(--ink)} .btn-outline:hover{background:var(--ink);color:var(--surface)} .btn-ghost{color:var(--ink);background:transparent;padding-inline:14px} .btn-ghost:hover{color:var(--acc-text)} .btn:active{transform:translateY(0) scale(.99)} .i-arr{transition:transform .2s} .btn:hover .i-arr{transform:translateX(3px)} .play-dot{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--glass-strong);box-shadow:var(--sh-sm);border:1px solid var(--line-soft);color:var(--acc)} .play-dot .i{width:15px;height:15px;fill:currentColor;stroke:none;margin-left:2px} .icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--glass-strong);color:var(--ink);padding:0;transition:background .2s,border-color .2s} .icon-btn:hover{border-color:var(--acc)} .icon-btn .i{width:20px;height:20px} /* ---------- header ---------- */ .hdr{position:sticky;top:0;z-index:50;padding-top:10px} .hdr-bar{position:relative;z-index:1;display:flex;align-items:center;gap:12px;height:var(--hdr-h)} .hdr-bar::before{content:"";position:absolute;inset:0 max(6px,calc(var(--pad) - 14px));border-radius:999px;background:var(--glass-strong);border:1px solid var(--line-soft);box-shadow:var(--sh);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);opacity:0;transition:opacity .25s;z-index:-1} .hdr.is-stuck .hdr-bar::before,.menu-open .hdr-bar::before{opacity:1} .menu-open .hdr-bar::before{background:var(--surface)} .brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:800 21px/1 var(--font-d);color:var(--ink);letter-spacing:-.02em;flex:none;min-height:44px} .brand img{width:36px;height:36px;border-radius:10px;box-shadow:0 2px 8px -2px rgba(15,40,80,.25)} .nav{display:none;margin-inline:auto} .nav ul{display:flex;gap:2px} .nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 13px;border-radius:999px;font:500 15px/1 var(--font-b);color:var(--ink-2);text-decoration:none;transition:background .2s,color .2s} .nav a:hover{color:var(--ink);background:var(--pill-bg)} .hdr-act{display:flex;align-items:center;gap:8px;margin-left:auto} .lang{display:inline-flex;align-items:center;padding:3px;border-radius:999px;border:1px solid var(--line);background:var(--glass-strong)} .lang a{display:inline-grid;place-items:center;min-width:40px;min-height:36px;padding:0 8px;border-radius:999px;font:700 12.5px/1 var(--font-d);letter-spacing:.04em;color:var(--muted);text-decoration:none} .lang a:hover{color:var(--ink)} .lang a[aria-current]{background:var(--ink);color:var(--surface)} .theme-btn .i-sun{display:none} :root[data-theme="dark"] .theme-btn .i-sun{display:block} :root[data-theme="dark"] .theme-btn .i-moon{display:none} .menu-btn .i-x{display:none} .menu-btn[aria-expanded="true"] .i-x{display:block} .menu-btn[aria-expanded="true"] .i-menu{display:none} .lang-hdr,.theme-hdr,.login-hdr{display:none} .mnav{position:absolute;left:0;right:0;top:100%;padding-top:8px} .mnav[hidden]{display:none} .mnav::before{content:"";position:fixed;inset:0;z-index:-1;background:rgba(8,12,20,.32)} .mnav-in{padding-inline:max(6px,calc(var(--pad) - 14px))} .mnav-card{display:grid;border-radius:26px;background:var(--surface);border:1px solid var(--line-soft);box-shadow:var(--sh-lg);overflow:hidden;max-height:calc(100dvh - 100px);overflow-y:auto} .mnav-card>nav{padding:8px} .mnav-links a{display:flex;align-items:center;min-height:52px;padding:0 16px;border-radius:16px;font:700 18px/1.2 var(--font-d);color:var(--ink);text-decoration:none} .mnav-links a:hover{background:var(--pill-bg)} .mnav-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--line)} .mnav-row .lang a{min-height:44px;min-width:52px;font-size:14px} .mnav-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px 16px;border-top:1px solid var(--line)} .mnav-cta .btn{white-space:normal;padding:0 12px} @media (min-width:768px){ .lang-hdr,.theme-hdr,.login-hdr{display:inline-flex} .mnav-row{display:none} .mnav-cta{display:none} } @media (min-width:1180px){ .nav{display:block} .hdr-act{margin-left:0} .menu-btn{display:none} .mnav{display:none!important} } /* ---------- hero ---------- */ .hero{padding:clamp(20px,3vw,44px) 0 8px;position:relative} .hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center} .hero-copy{text-align:center;max-width:760px;margin-inline:auto} .hero-lede{font-size:clamp(1.02rem,.96rem + .3vw,1.14rem);color:var(--ink-2);margin:22px auto 0;max-width:640px} .row-lbl{font-size:15px;color:var(--muted);flex:none} .connect{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 12px;margin-top:26px} .ch-list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px} .ch{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--glass-strong);border:1px solid var(--line-soft);box-shadow:var(--sh-sm)} .ch .i{width:22px;height:22px} .ch-email{color:#1675c4}.ch-messenger{color:#0866ff}.ch-instagram{color:#c62f7a}.ch-whatsapp{color:#15924a}.ch-phone{color:#e07a06}.ch-webform{color:#0b8f7a} :root[data-theme="dark"] .ch-email{color:#5db0f2} :root[data-theme="dark"] .ch-messenger{color:#6aa8ff} :root[data-theme="dark"] .ch-instagram{color:#f07ab3} :root[data-theme="dark"] .ch-whatsapp{color:#3ddc84} :root[data-theme="dark"] .ch-phone{color:#fbae3c} :root[data-theme="dark"] .ch-webform{color:#34d3a6} .hero-ctas{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:26px} .hero-ctas .btn-ghost{align-self:center} .hero-ctas .btn{white-space:normal;line-height:1.2;padding-block:8px} .micro{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-top:14px;font-size:14px;color:var(--muted)} .micro li{display:inline-flex;align-items:center;gap:6px} .micro .i{width:16px;height:16px;color:#0b8f7a;stroke-width:2.6} :root[data-theme="dark"] .micro .i{color:#34d3a6} .works{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 12px;margin-top:26px} .ww-list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px} .ww{display:flex;flex-direction:column;justify-content:center;min-height:50px;padding:6px 13px;border-radius:16px;background:var(--glass-strong);border:1px solid var(--line-soft);box-shadow:var(--sh-sm);text-align:left;line-height:1.25} .ww b{font:700 14px/1.2 var(--font-d);color:var(--ink)} .ww span{font-size:12px;color:var(--muted)} @media (max-width:559.98px){.ww-list{display:grid;grid-template-columns:1fr 1fr;width:100%}.ww{min-width:0}} @media (min-width:560px){ .hero-ctas{flex-direction:row;justify-content:center;align-items:center} } @media (min-width:1180px){ .hero-grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:40px} .hero-copy{text-align:left;margin:0} .hero-lede{margin-left:0} .connect,.works,.micro,.hero-ctas{justify-content:flex-start} .ch-list,.ww-list{justify-content:flex-start} .hero-ctas .btn-ghost{align-self:auto} } /* stats */ .stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(28px,4vw,48px)} .stat{padding:16px 10px 14px;border-radius:20px;background:var(--glass);border:1px solid var(--line-soft);box-shadow:var(--sh);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center} .stat-v{display:flex;align-items:baseline;justify-content:center;gap:6px;font-family:var(--font-d);color:var(--ink);line-height:1} .stat-v b{font-weight:800;font-size:clamp(2rem,1.6rem + 1.6vw,3.1rem);letter-spacing:-.03em} .stat-v span{font-weight:700;font-size:clamp(.98rem,.9rem + .3vw,1.15rem);color:var(--muted)} .stat-l{margin-top:6px;font-size:13.5px;line-height:1.4;color:var(--ink-2)} @media (min-width:900px){.stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.stat{padding:22px 18px 20px}.stat-l{font-size:15px}} /* ---------- hero visual (phone → ticket chips) ---------- */ .hero-vis{width:100%;max-width:600px;margin-inline:auto} .hv{container-type:inline-size;width:100%} .hv-stage{position:relative} .hv-trails{display:none} .phone{position:relative;border-radius:3.3em;padding:.62em;background:linear-gradient(150deg,#39414f,#0c1017 38%,#1a202b);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 2.6em 5em -1.6em rgba(15,40,80,.5),0 .8em 1.8em -.8em rgba(15,40,80,.35)} .phone::before,.phone::after{content:"";position:absolute;width:.28em;border-radius:.2em;background:#232a36} .phone::before{left:-.22em;top:18%;height:9%} .phone::after{right:-.22em;top:24%;height:14%} .ph-screen{position:relative;height:100%;border-radius:2.72em;overflow:hidden;background:#eef2f7;display:flex;flex-direction:column;color:#16191f} .ph-status{position:relative;display:flex;align-items:center;justify-content:space-between;height:3.4em;padding:.3em 1.5em 0 1.9em;flex:none} .ph-clock{font:700 1em/1 var(--font-b);letter-spacing:-.01em} .ph-sys{display:flex;align-items:center;gap:.22em} .ph-sys .i{width:1em;height:1em;stroke-width:2.8} .i-bat{width:1.65em;height:.8em;color:#16191f} .ph-island{position:absolute;top:.78em;left:50%;transform:translateX(-50%);width:6.1em;height:1.85em;border-radius:1em;background:#000;overflow:hidden;display:flex;align-items:center;justify-content:flex-start} .ph-call{position:absolute;left:.55em;right:.55em;top:3.2em;z-index:3;display:flex;align-items:center;gap:.7em;padding:.62em .8em .62em .62em;border-radius:1.35em;background:#121823;color:#fff;box-shadow:0 1em 2em -.8em rgba(0,0,0,.55);opacity:0;pointer-events:none} .pc-ic{position:relative;display:grid;place-items:center;width:2.45em;height:2.45em;border-radius:50%;background:#1675c4;flex:none} .pc-ic .i{position:absolute;width:1.2em;height:1.2em;stroke-width:2.3} .pc-miss{opacity:0} .pc-t{display:flex;flex-direction:column;line-height:1.25;min-width:0} .pc-t b{font:700 .95em/1.2 var(--font-b);white-space:nowrap} .pc-t small{display:grid;font-size:.78em} .pc-t small span{grid-area:1/1} .pc-ring{color:#b8c4d6} .pc-missed{color:#ffc266;font-weight:700;opacity:0} .ph-head{display:flex;align-items:center;gap:.6em;padding:.55em 1em .75em .7em;background:#fff;border-bottom:1px solid #e3e8ef;flex:none} .ph-back{width:1.5em;height:1.5em;color:#0866ff;stroke-width:2.4} .ph-av{display:grid;place-items:center;width:2.7em;height:2.7em;border-radius:50%;background:linear-gradient(135deg,#2fb6f2,#1675c4);color:#fff;font:700 .95em/1 var(--font-d);flex:none} .ph-who{display:flex;flex-direction:column;line-height:1.2;min-width:0} .ph-who b{font:700 1.02em/1.2 var(--font-b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ph-who small{display:flex;align-items:center;gap:.3em;font-size:.8em;color:#0866ff;font-weight:600} .ph-who small .i{width:1.1em;height:1.1em} .ph-chat{position:relative;flex:1;display:flex;flex-direction:column;gap:.75em;padding:1em .85em .6em;overflow:hidden} .msg{max-width:84%;display:flex;flex-direction:column} .msg p{padding:.72em .95em;border-radius:1.25em;font-size:.94em;line-height:1.42} .msg time{font-size:.7em;color:#5f6878;margin-top:.3em;padding-inline:.5em} .msg.in{align-self:flex-start} .msg.in p{background:#fff;border-bottom-left-radius:.4em;box-shadow:0 1px 2px rgba(15,40,80,.08)} .msg.out{align-self:flex-end;align-items:flex-end} .msg.out p{background:linear-gradient(135deg,#1f86d6,#1675c4);color:#fff;border-bottom-right-radius:.4em} .typing{position:absolute;top:1em;left:.85em;display:none;gap:.3em;padding:.85em 1em;border-radius:1.25em;border-bottom-left-radius:.4em;background:#fff;box-shadow:0 1px 2px rgba(15,40,80,.08)} .typing i{width:.45em;height:.45em;border-radius:50%;background:#9aa4b2;animation:dot 1s ease-in-out infinite} .typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s} .ph-input{display:flex;align-items:center;justify-content:space-between;gap:.6em;margin:.4em .75em 1.1em;padding:.4em .4em .4em 1.1em;border-radius:2em;background:#fff;border:1px solid #e1e6ee;color:#687182;font-size:.9em;flex:none} .ph-send{display:grid;place-items:center;width:2.3em;height:2.3em;border-radius:50%;background:#1675c4;color:#fff} .ph-send .i{width:1.1em;height:1.1em} :root[data-theme="dark"] .ph-screen{background:#0d131e;color:#e8edf4} :root[data-theme="dark"] .ph-head{background:#121a28;border-color:#1f2a3c} :root[data-theme="dark"] .msg.in p,:root[data-theme="dark"] .typing{background:#1b2537;color:#e8edf4;box-shadow:none} :root[data-theme="dark"] .ph-input{background:#151e2e;border-color:#243047} :root[data-theme="dark"] .i-bat{color:#e8edf4} .chips{display:flex;flex-direction:column;gap:.7em} .chip{display:flex;align-items:center;gap:.85em;padding:.78em 1.1em .78em .78em;border-radius:1.25em;background:var(--glass-strong);border:1px solid var(--line-soft);box-shadow:var(--sh);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .chip-ic{display:grid;place-items:center;width:2.75em;height:2.75em;border-radius:.85em;color:#fff;flex:none;box-shadow:0 .5em 1em -.5em rgba(15,40,80,.5)} .chip-ic .i{width:1.35em;height:1.35em} .chip-t{display:flex;flex-direction:column;min-width:0;line-height:1.25} .chip-t b{font:700 1.06em/1.25 var(--font-d);color:var(--ink)} .chip-t small{font-size:.88em;color:var(--muted);margin-top:.12em} .chip-1 .chip-ic{background:linear-gradient(135deg,#2fb6f2,#1675c4)} .chip-2 .chip-ic{background:linear-gradient(135deg,#1fd398,#0b8f7a)} .chip-3 .chip-ic{background:linear-gradient(135deg,#5b8def,#2448a8)} .chip-missed{border-color:rgba(254,152,2,.45)} .chip-missed .chip-ic{background:linear-gradient(135deg,#ffb23f,#f07a0a)} .hv-drop{display:none} /* narrow container: phone, then a short trail, then the chips stacked */ @container (max-width:539.98px){ .hv-stage{display:flex;flex-direction:column;align-items:center;font-size:clamp(11px,3.35cqw,13px);--ts:.6} .phone{width:19.2em;height:38em} .hv-drop{display:block;width:3px;height:2.6em;margin:.5em 0;border-radius:3px;background:repeating-linear-gradient(180deg,#2fb6f2 0 .35em,transparent .35em .7em);background-size:100% .7em;animation:drop 1s linear infinite;opacity:.9} .chips{width:100%;max-width:25em} .chip-missed{margin-top:.2em} } /* wide container: the AiderFlow composition, drawn in a 600×620 box */ @container (min-width:540px){ .hv-stage{aspect-ratio:600/620;font-size:calc(100cqw * 13 / 600)} .hv-trails{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible} .phone{position:absolute;left:calc(12 / 600 * 100%);top:calc(34 / 620 * 100%);width:calc(260 / 600 * 100%);height:calc(552 / 620 * 100%)} .chips{display:block} .chip{position:absolute;left:calc(378 / 600 * 100%);width:calc(222 / 600 * 100%);translate:0 -50%} .chip-1{top:calc(180 / 620 * 100%)} .chip-2{top:calc(256 / 620 * 100%)} .chip-3{top:calc(332 / 620 * 100%)} .chip-missed{left:calc(330 / 600 * 100%);width:calc(270 / 600 * 100%);top:calc(468 / 620 * 100%)} .chip-missed .chip-t b{font-size:.98em} } @media (min-width:1320px){.hero-vis{margin-right:-44px;max-width:none;width:calc(100% + 44px)}} .tr path{fill:none;stroke-linecap:round} .tr-glow{stroke-width:12;opacity:.14} .tr-dots{stroke-width:5;stroke-dasharray:.1 9;animation:flow 1.1s linear infinite} .tr-1{stroke:#19a5eb;fill:#19a5eb;color:#19a5eb} .tr-2{stroke:#1fd398;fill:#1fd398;color:#1fd398} .tr-3{stroke:#4f7fe0;fill:#4f7fe0;color:#4f7fe0} .tr-4{stroke:#fe9802;fill:#fe9802;color:#fe9802} .tr-comet{stroke:none;filter:drop-shadow(0 0 4px currentColor)} /* ---------- sections ---------- */ .sec{padding-block:clamp(52px,3.2vw + 32px,88px);position:relative} /* demo */ .demo{padding-top:clamp(56px,4vw + 32px,96px);padding-bottom:clamp(40px,2vw + 28px,64px)} .bframe{border-radius:22px;background:var(--surface);border:1px solid var(--line-soft);box-shadow:var(--sh-lg);overflow:hidden} .bf-bar{display:flex;align-items:center;gap:12px;height:44px;padding:0 14px;background:var(--surface-2);border-bottom:1px solid var(--line-soft)} .bf-dots{display:flex;gap:7px;flex:1 1 0} .bf-dots i{width:11px;height:11px;border-radius:50%;background:#ff5f57} .bf-dots i:nth-child(2){background:#febc2e}.bf-dots i:nth-child(3){background:#28c840} .bf-url{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;flex:0 1 380px;height:28px;padding:0 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line-soft);font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden} .bf-url .i{width:13px;height:13px;flex:none} .bf-url span{overflow:hidden;text-overflow:ellipsis} .bf-sp{flex:1 1 0} .bf-body{position:relative;background:#0b0f19} .bf-still{width:100%;height:auto;aspect-ratio:1280/800;object-fit:cover} .bf-cta{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 16px 20px;background:var(--surface)} .bf-note{font-size:14px;color:var(--muted);text-align:center} .bf-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .5s;background:#f7f8fa} .bf-body.is-live iframe{opacity:1} .bf-body.has-frame .bf-cta{display:none} .demo-hint{max-width:860px;margin:18px auto 0;text-align:center;font-size:15px;color:var(--muted);padding-inline:var(--pad)} .demo-hint .tlink{white-space:nowrap} @media (min-width:768px){ .bf-cta{position:absolute;inset:auto 0 0 0;padding:120px 24px 28px;background:linear-gradient(180deg,rgba(8,12,20,0),rgba(8,12,20,.78) 70%)} .bf-note{display:none} .bf-bar{height:46px} } @media (min-width:960px){ .bf-body.has-frame{aspect-ratio:1280/800} .bf-body.has-frame .bf-still{position:absolute;inset:0;height:100%} } /* how it works */ .steps{display:grid;gap:18px;max-width:1040px;margin:0 auto;position:relative} .step{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative} .step-num{position:relative;display:grid;place-items:center;width:92px;height:92px;border-radius:50%;border:2px solid transparent;background:radial-gradient(circle at 32% 28%,#ffffff 0%,#e4f4fd 55%,#d8f6ea 100%) padding-box,linear-gradient(140deg,#2fb6f2,#1fd398) border-box;box-shadow:0 18px 36px -18px rgba(25,165,235,.7),0 0 0 8px rgba(47,182,242,.07);margin-bottom:22px} .step-num span{font:800 36px/1 var(--font-d);color:var(--ink);letter-spacing:-.03em} :root[data-theme="dark"] .step-num{background:radial-gradient(circle at 32% 28%,#1c2940 0%,#132035 55%,#10261f 100%) padding-box,linear-gradient(140deg,#2fb6f2,#1fd398) border-box} .step-ic{position:absolute;right:-12px;bottom:-8px;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);color:var(--ink)} .step-ic .i{width:20px;height:20px} .step h3{font-size:clamp(1.15rem,1.05rem + .4vw,1.35rem);font-weight:700;line-height:1.25;margin-bottom:8px} .step p{color:var(--ink-2);max-width:330px;font-size:15.5px} .step:not(:last-child)::after{content:"";display:block;width:2px;height:34px;margin-top:18px;border-radius:2px;background:linear-gradient(180deg,rgba(47,182,242,.8),rgba(31,211,152,.8))} @media (min-width:900px){ .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px} .step:not(:last-child)::after{content:"";display:block;margin:0;border-radius:0;position:absolute;top:44px;left:calc(50% + 74px);width:calc(100% - 148px + 32px);height:2px;background:linear-gradient(90deg,rgba(47,182,242,.7),rgba(31,211,152,.7));-webkit-mask:linear-gradient(90deg,#000 calc(100% - 10px),transparent 0);mask:linear-gradient(90deg,#000 calc(100% - 10px),transparent 0)} .step:not(:last-child)::before{content:"";position:absolute;top:39px;left:calc(50% + 74px + 100% - 148px + 32px - 12px);width:10px;height:10px;border-top:2px solid #1fd398;border-right:2px solid #1fd398;transform:rotate(45deg)} } /* flow card: input → ticket → result */ .flow{margin-top:clamp(44px,5vw,72px)} .flow-in{display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 16px;border-radius:32px;background:var(--card);border:1px solid var(--line-soft);box-shadow:var(--sh-lg)} .f-col{width:100%;display:flex;justify-content:center} .mini-phone{width:204px;height:392px;padding:8px;border-radius:38px;background:linear-gradient(150deg,#39414f,#0c1017 38%,#1a202b);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 24px 44px -22px rgba(15,40,80,.55)} .mp-screen{height:100%;border-radius:31px;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:34px 16px 18px;text-align:center;color:#e8eef6;background:radial-gradient(120% 60% at 50% 22%,rgba(47,182,242,.28),rgba(47,182,242,0) 70%),linear-gradient(180deg,#132440,#0b1322)} .mp-title{font:600 12.5px/1 var(--font-b);letter-spacing:.06em;text-transform:uppercase;color:#9fb4cf} .mp-ring{position:relative;display:grid;place-items:center;width:92px;height:92px;margin:22px 0 16px} .mp-av{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#2fb6f2,#1675c4);color:#fff;z-index:1;box-shadow:0 10px 24px -8px rgba(47,182,242,.7)} .mp-av .i{width:28px;height:28px} .mp-pulse{position:absolute;inset:14px;border-radius:50%;border:2px solid rgba(47,182,242,.55)} .mp-num{font:700 17px/1.2 var(--font-d);color:#fff;white-space:nowrap} .mp-state{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:13.5px;color:#9fb4cf} .mp-dots{display:inline-flex;gap:3px} .mp-dots i{width:4px;height:4px;border-radius:50%;background:#2fb6f2;animation:dot 1s ease-in-out infinite} .mp-dots i:nth-child(2){animation-delay:.15s}.mp-dots i:nth-child(3){animation-delay:.3s} .mp-queue{margin-top:10px;white-space:nowrap;font-size:12px;color:#c9d6e6;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1)} .mp-missed{margin-top:auto;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:14px;background:rgba(254,152,2,.14);border:1px solid rgba(254,152,2,.4);color:#ffc266;font:700 14px/1 var(--font-d)} .mp-missed .i{width:17px;height:17px} .mp-missed time{font:500 12.5px/1 var(--font-b);color:#f4d7ab} .f-arrow{display:grid;place-items:center;width:56px;height:40px;flex:none;transform:rotate(90deg)} .f-arrow svg{width:64px;height:24px;overflow:visible} .fa-line,.fa-head{fill:none;stroke:url(#fa-g);stroke-width:3;stroke-linecap:round;stroke-linejoin:round} .fa-line{stroke-dasharray:7 7;animation:flow2 1s linear infinite} .fcard{flex-direction:column;justify-content:flex-start;max-width:380px;padding:18px 18px 20px;border-radius:22px;background:var(--surface);box-shadow:var(--sh)} .f-ticket{border:1.5px solid rgba(47,182,242,.6)} .f-result{border:1.5px solid rgba(31,211,152,.65);max-width:340px} .fc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line)} .fc-head b{font:800 18px/1.2 var(--font-d);color:var(--ink)} .badge{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;font:700 12.5px/1 var(--font-d);white-space:nowrap} .badge .i{width:13px;height:13px;stroke-width:3} .badge-blue{background:rgba(22,117,196,.1);color:var(--acc-text)} .badge-green{background:var(--ok-bg);color:var(--ok)} .fc-rows{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 14px;font-size:14px} .fr{display:contents} .fr dt{color:var(--muted);font-size:13px;padding-top:1px;white-space:nowrap} .fr dd{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px 7px;color:var(--ink);font-weight:500;min-width:0} .fr dd>span:not([class]){flex:1 1 0;min-width:0} .fr-ic{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;flex:none} .fr-ic .i{width:13px;height:13px;stroke-width:2.4} .fr-miss{background:rgba(254,152,2,.16);color:#c26405} :root[data-theme="dark"] .fr-miss{color:#fbae3c} .fr-sla{background:rgba(22,117,196,.12);color:var(--acc-text)} .fr-av{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#1fd398,#0b8f7a);color:#fff;font:700 9.5px/1 var(--font-d);flex:none} .sla-bar{flex:1 0 100%;height:5px;border-radius:5px;background:var(--surface-2);overflow:hidden;margin-top:2px} .sla-bar i{display:block;width:64%;height:100%;border-radius:5px;background:var(--grad-btn)} .fc-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px} .fbtn{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 8px;border-radius:12px;font:700 13px/1.1 var(--font-d);text-align:center;white-space:nowrap} .fbtn .i{width:15px;height:15px} .fbtn-p{background:linear-gradient(135deg,#1f86d6,#1675c4);color:#fff} .fbtn-s{border:1.5px solid var(--line);color:var(--ink)} .fc-res{display:grid;gap:10px} .fc-res li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--surface-2)} .fc-res b{display:block;font:700 14.5px/1.25 var(--font-d);color:var(--ink)} .fc-res small{display:block;font-size:13px;color:var(--muted);line-height:1.35} .rs-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#fff;flex:none} .rs-ic .i{width:20px;height:20px} .rs-call{background:linear-gradient(135deg,#1fd398,#0b8f7a)} .rs-rec{background:linear-gradient(135deg,#2fb6f2,#1675c4)} .rs-hist{background:linear-gradient(135deg,#3a5a8c,#0f1b33)} @media (min-width:768px) and (max-width:1179.98px){ .flow-in{display:grid;grid-template-columns:auto auto minmax(0,380px);justify-content:center;align-items:center;column-gap:14px;row-gap:6px;padding:36px 24px} .f-call{grid-column:1;grid-row:1/span 3} .flow-in>.f-arrow:nth-child(2){grid-column:2;grid-row:1/span 3;transform:none} .f-ticket{grid-column:3;grid-row:1} .flow-in>.f-arrow:nth-child(4){grid-column:3;grid-row:2;justify-self:center} .f-result{grid-column:3;grid-row:3;justify-self:center;width:100%} } @media (min-width:1180px){ .flow-in{flex-direction:row;justify-content:center;align-items:center;gap:18px;padding:44px 36px} .f-col{width:auto;flex:none} .f-ticket{width:372px} .f-result{width:318px} .f-arrow{transform:none;width:72px} .mini-phone{width:212px;height:420px} .mp-ring{margin:28px 0 18px} } /* pain + features */ .pain .sh{margin-bottom:clamp(36px,4vw,56px);max-width:1040px} .h2-q{font-size:clamp(1.7rem,1.1rem + 1.9vw,2.6rem)} .feat-h{text-align:center;font-size:clamp(1.3rem,1.1rem + .7vw,1.7rem);font-weight:700;margin-bottom:clamp(20px,2.5vw,32px)} .feats{display:grid;gap:14px} .feat{display:flex;gap:16px;align-items:flex-start;padding:20px 20px 22px;border-radius:22px;background:var(--card);border:1px solid var(--line-soft);box-shadow:var(--sh);transition:transform .25s ease,box-shadow .25s ease} .feat:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)} .feat-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;color:#fff;flex:none;box-shadow:0 12px 22px -12px rgba(15,40,80,.6),inset 0 1px 0 rgba(255,255,255,.25)} .feat-ic .i{width:26px;height:26px;stroke-width:1.9} .fi-inbox{background:linear-gradient(135deg,#2fb6f2,#1675c4)} .fi-phone{background:linear-gradient(135deg,#ffb23f,#ee7406)} .fi-ticket{background:linear-gradient(135deg,#1fd398,#0b8f7a)} .fi-sparkle{background:linear-gradient(135deg,#2fb6f2 0%,#1fd398 100%)} .fi-timeline{background:linear-gradient(135deg,#3a5a8c,#0f1b33)} .fi-chart{background:linear-gradient(135deg,#1f8fe0,#094f94)} .feat h4{font-size:1.1rem;font-weight:700;line-height:1.3;margin-bottom:6px} .feat p{font-size:15.5px;color:var(--ink-2);line-height:1.58} .feat .tag{display:inline-block;margin-top:10px;padding:5px 11px;border-radius:999px;font:700 12.5px/1.1 var(--font-d);color:var(--acc-text);background:var(--pill-bg)} .feat .tag-phone{color:var(--warn-text);background:rgba(254,152,2,.12)} @media (min-width:768px){.feats{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}} @media (min-width:1100px){.feats{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.feat{padding:24px 24px 26px}} /* pricing */ .billing{display:flex;align-items:center;gap:4px;width:fit-content;max-width:100%;margin:14px auto clamp(40px,4vw,56px);padding:5px;border-radius:999px;background:var(--glass-strong);border:1px solid var(--line);box-shadow:var(--sh-sm)} .bill-opt{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 22px;border:0;border-radius:999px;background:transparent;font:700 15px/1 var(--font-d);color:var(--ink-2);transition:background .25s,color .25s} .bill-opt[aria-pressed="true"]{background:var(--navy);color:var(--navy-ink);box-shadow:0 8px 18px -10px rgba(15,27,51,.6)} .save{position:absolute;top:-13px;right:-8px;display:inline-block;white-space:nowrap;padding:5px 9px;border-radius:999px;font:700 11.5px/1 var(--font-d);background:#d4f7ea;color:#046c4e;box-shadow:0 4px 10px -4px rgba(4,108,78,.35)} .bill-opt[data-period="y"]{padding-right:26px} :root[data-theme="dark"] .save{color:#6ee7b7;background:#0f3a2e} .bill-opt[aria-pressed="true"] .save{background:#1fd398;color:#06231a} html:not(.js) .billing{display:none} .plans{display:grid;gap:22px;align-items:stretch} .plan{position:relative;display:flex;flex-direction:column;padding:30px 22px 24px;border-radius:26px;background:var(--card);border:1px solid var(--line-soft);box-shadow:var(--sh)} .plan.is-rec{border:2px solid transparent;background:linear-gradient(var(--glass-strong),var(--glass-strong)) padding-box,linear-gradient(160deg,#2fb6f2,#1fd398) border-box;box-shadow:0 30px 60px -30px rgba(25,165,235,.55),var(--sh)} :root[data-theme="dark"] .plan.is-rec{background:linear-gradient(#111a2b,#111a2b) padding-box,linear-gradient(160deg,#2fb6f2,#1fd398) border-box} .plan.is-phone{border-color:rgba(254,152,2,.4)} .plan-badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;font:700 12.5px/1 var(--font-d);white-space:nowrap;background:var(--grad-btn);color:#0b1a33;box-shadow:0 8px 18px -10px rgba(25,165,235,.8)} .is-phone .plan-badge{background:linear-gradient(90deg,#ffb23f,#fe9802);box-shadow:0 8px 18px -10px rgba(254,152,2,.8)} .plan-badge .i{width:13px;height:13px;stroke-width:2.4} .plan-name{text-align:center;font-size:1.45rem;font-weight:800;letter-spacing:-.02em} .plan-for{text-align:center;font-size:14.5px;color:var(--muted);margin-top:6px;line-height:1.45} .plan-price{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:4px 8px;margin-top:18px} .pp-n{font:800 clamp(2.4rem,2rem + 1vw,2.9rem)/1 var(--font-d);letter-spacing:-.03em;color:var(--ink);white-space:nowrap} .pp-u{font-size:14.5px;color:var(--muted)} .plan-alt{text-align:center;font-size:13.5px;color:var(--muted);margin-top:6px;min-height:1.5em} .plan-seats{margin:14px auto 0;font-size:14.5px;font-weight:600;color:var(--ink);text-align:center;text-wrap:balance} .plan-seats .i{display:inline-block;vertical-align:-3px;margin-right:7px;width:16px;height:16px;color:var(--acc-text)} .plan-body{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)} .plan-plus{font-size:13.5px;font-weight:600;color:var(--ink-2);margin-bottom:10px} .plan-feats{display:grid;gap:9px} .plan-feats li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--ink-2)} .plan-feats .i{width:18px;height:18px;margin-top:2px;color:#0b8f7a;stroke-width:2.6} :root[data-theme="dark"] .plan-feats .i{color:#34d3a6} .plan-feats li.hl{color:var(--ink);font-weight:600} .plan-feats li.hl .i{color:#e07a06} :root[data-theme="dark"] .plan-feats li.hl .i{color:#fbae3c} .plan-cta{margin-top:18px;display:grid;gap:2px} .plan-altlink{display:flex;align-items:center;justify-content:center;min-height:44px;margin-bottom:-10px;font-size:14.5px;font-weight:600;color:var(--acc-text);text-underline-offset:3px} @media (min-width:720px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1180px){.plans{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.plan{padding:32px 20px 22px}.plan-for{min-height:4.35em}} .trial{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;margin-top:28px;padding:24px 20px;border-radius:26px;background:var(--card);border:1px solid var(--line-soft);box-shadow:var(--sh)} .trial-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--grad-btn);color:#0b1a33;flex:none} .trial-ic .i{width:26px;height:26px} .trial h3{font-size:1.25rem;font-weight:800;line-height:1.25} .trial p{color:var(--ink-2);font-size:15.5px;margin-top:4px} .trial .btn{white-space:normal} @media (min-width:900px){.trial{flex-direction:row;text-align:left;padding:24px 28px;gap:20px}.trial-t{flex:1}.trial .btn{white-space:nowrap}} .price-note{text-align:center;font-size:14px;color:var(--muted);margin-top:18px} /* FAQ */ .faq-list{display:grid;gap:12px} .qa{border-radius:20px;background:var(--card);border:1px solid var(--line-soft);box-shadow:var(--sh-sm);transition:box-shadow .2s} .qa[open]{box-shadow:var(--sh)} .qa summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:16px 20px;cursor:pointer;list-style:none;font:700 clamp(1rem,.96rem + .2vw,1.1rem)/1.35 var(--font-d);color:var(--ink);border-radius:20px} .qa summary::-webkit-details-marker{display:none} .qa-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--pill-bg);color:var(--acc-text);flex:none;transition:transform .25s,background .25s} .qa-ic .i{width:18px;height:18px} .qa[open] .qa-ic{transform:rotate(45deg);background:var(--grad-btn);color:#0b1a33} .qa-a{padding:0 20px 20px} .qa-a p{color:var(--ink-2);font-size:16px;line-height:1.65;max-width:720px} .faq-more{text-align:center;margin-top:24px;color:var(--ink-2)} .faq-more a{color:var(--acc-text);font-weight:600;text-underline-offset:3px} /* final CTA band + form */ .cta{padding-bottom:clamp(64px,5vw + 32px,110px)} .cta-panel{position:relative;overflow:hidden;display:grid;gap:28px;padding:30px 18px 18px;border-radius:30px;color:#c6d1e0;background:radial-gradient(640px 460px at 0% 0%,rgba(22,117,196,.55),rgba(22,117,196,0) 62%),radial-gradient(520px 380px at 104% 104%,rgba(254,152,2,.2),rgba(254,152,2,0) 60%),#080c14;box-shadow:0 44px 90px -40px rgba(8,12,20,.7);border:1px solid rgba(148,163,184,.12)} .cta-panel::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px;-webkit-mask:radial-gradient(ellipse 70% 60% at 25% 35%,#000 20%,transparent 75%);mask:radial-gradient(ellipse 70% 60% at 25% 35%,#000 20%,transparent 75%);pointer-events:none} .cta-copy{position:relative;padding-inline:4px} .cta .eyebrow{color:#7cc4f5} .cta .h2{color:#fff;font-size:clamp(1.75rem,1.2rem + 1.6vw,2.45rem)} .cta .grad{background:linear-gradient(92deg,#6ccaf7,#4fe0b0);-webkit-background-clip:text;background-clip:text} .cta-lede{margin-top:16px;font-size:clamp(1rem,.96rem + .2vw,1.1rem);color:#b8c4d6} .cta-steps{display:grid;gap:16px;margin-top:28px} .cta-steps li{display:flex;gap:14px;align-items:flex-start} .cs-n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(124,196,245,.45);color:#fff;font:800 14px/1 var(--font-d);flex:none;background:rgba(47,182,242,.1)} .cta-steps b{display:block;font:700 16px/1.3 var(--font-d);color:#fff} .cta-steps p{font-size:15px;color:#a9b6c9;margin-top:3px} .cta-contacts{display:grid;gap:14px;margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1)} .cta-contacts dt{font-size:13px;color:#8b99ad} .cta-contacts dd a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)} .cta-contacts dd a:hover{border-color:#6ccaf7} .cta-contacts .i{width:16px;height:16px;color:#6ccaf7} .form-card{position:relative;border-radius:24px;background:var(--surface);color:var(--ink);padding:22px 18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)} .form-title{font-size:1.4rem;font-weight:800;margin-bottom:16px} .intent{border:0;padding:0;margin:0 0 18px;min-width:0} .intent legend{padding:0;font-size:14px;font-weight:600;color:var(--ink-2);margin-bottom:10px} .int-grid{display:grid;gap:10px} .int-opt{position:relative;display:block;cursor:pointer} .int-opt input{position:absolute;opacity:0;width:1px;height:1px} .int-box{display:block;position:relative;height:100%;padding:12px 14px 12px 44px;border-radius:14px;border:1.5px solid var(--line);background:var(--field-bg);transition:border-color .2s,background .2s} .int-box::before{content:"";position:absolute;left:14px;top:14px;width:18px;height:18px;border-radius:50%;border:2px solid #94a3b8;background:var(--surface);transition:border .2s} .int-box b{display:block;font:700 15px/1.3 var(--font-d);color:var(--ink)} .int-box small{display:block;font-size:13px;color:var(--muted);line-height:1.4;margin-top:2px} .int-opt input:checked+.int-box{border-color:var(--acc);background:var(--pill-bg)} .int-opt input:checked+.int-box::before{border:6px solid var(--acc)} .int-opt input:focus-visible+.int-box{outline:3px solid #2f8fe0;outline-offset:2px} .fld-grid{display:grid;gap:0 14px} .fld{margin-bottom:14px;min-width:0} .fld label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:6px} .req{color:#c2410c} :root[data-theme="dark"] .req{color:#fbae3c} .fld input,.fld textarea{display:block;width:100%;min-height:50px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--field-bg);font-size:16px;line-height:1.4;color:var(--ink);transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none} .fld textarea{min-height:112px;resize:vertical} .fld input::placeholder,.fld textarea::placeholder{color:#8a94a6;opacity:1} .fld input:focus,.fld textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px rgba(22,117,196,.18)} .fld [aria-invalid="true"]{border-color:var(--danger)} .err{margin-top:6px;font-size:13.5px;font-weight:600;color:var(--danger)} .hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden} .form-req{font-size:13px;color:var(--muted);margin:-2px 0 14px} .form-status{margin-bottom:14px;padding:11px 14px;border-radius:12px;font-size:14.5px;font-weight:600;background:rgba(185,28,28,.07);border:1px solid rgba(185,28,28,.25);color:#991b1b} :root[data-theme="dark"] .form-status{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.3);color:#fecaca} .form-status a{color:inherit} .form-submit[disabled]{opacity:.7;cursor:progress} .form-privacy,.form-fallback,.form-noscript{font-size:13.5px;color:var(--muted);margin-top:12px;line-height:1.5} .form-privacy a,.form-fallback a,.form-noscript a{color:var(--acc-text);font-weight:600;text-underline-offset:2px} .form-ok{text-align:center;padding:48px 12px} .form-ok[hidden]{display:none} .form-ok:focus{outline:none} .ok-ic{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 18px;border-radius:50%;background:var(--ok-bg);color:var(--ok)} .ok-ic .i{width:36px;height:36px} .form-ok h3{font-size:1.45rem;font-weight:800} .form-ok p{color:var(--ink-2);margin-top:8px} @media (min-width:480px){.int-grid{grid-template-columns:1fr 1fr}} @media (min-width:560px){.fld-grid{grid-template-columns:1fr 1fr}.form-card{padding:28px 26px}.cta-panel{padding:40px 28px 28px}} @media (min-width:1024px){ .cta-panel{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:48px;padding:56px 48px;align-items:start} .cta-copy{padding:8px 0 0} .form-card{padding:32px} } /* footer */ .ftr{background:#080c14;color:#a9b6c9;padding:56px 0 24px;position:relative} :root[data-theme="dark"] .ftr{background:#060910;border-top:1px solid #1a2436} .ftr-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px 20px} .ftr-brand{grid-column:1/-1} .ftr-col:last-child{grid-column:1/-1} .ftr .brand{color:#fff} .ftr-brand p{margin-top:14px;max-width:360px;font-size:15px;line-height:1.6} .ftr-h{font:700 13px/1.2 var(--font-d);letter-spacing:.1em;text-transform:uppercase;color:#e8eef6;margin-bottom:12px} .ftr-col li{font-size:15px} .ftr-col a{display:inline-flex;align-items:center;min-height:36px;color:#a9b6c9;text-decoration:none} .ftr-col a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px} .ftr-co{padding-top:8px;color:#8b99ad} .ftr-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.09);font-size:14px} .ftr-copy{flex:1 1 100%;color:#8b99ad} .ftr-lang{display:flex;gap:4px} .ftr-lang a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;border-radius:8px;color:#a9b6c9;text-decoration:none} .ftr-lang a[aria-current]{color:#fff;font-weight:600;background:rgba(255,255,255,.07)} .ftr-lang a:hover{color:#fff} .ftr-main,.ftr-top{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:#a9b6c9;text-decoration:none} .ftr-main:hover,.ftr-top:hover{color:#fff} .ftr-main .i,.ftr-top .i{width:15px;height:15px} @media (min-width:768px){.ftr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ftr-brand{grid-column:1/-1}.ftr-col:last-child{grid-column:auto}} @media (min-width:1024px){.ftr-grid{grid-template-columns:1.5fr 1fr 1fr 1.15fr;gap:40px}.ftr-brand{grid-column:auto}.ftr-copy{flex:1 1 auto}} /* ---------- motion ---------- */ @keyframes flow{to{stroke-dashoffset:-9.1}} @keyframes flow2{to{stroke-dashoffset:-14}} @keyframes drop{to{background-position:0 .7em}} @keyframes dot{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-3px);opacity:1}} @keyframes pulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.9);opacity:0}} @keyframes sq-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}} @keyframes chip-in{from{opacity:0;transform:translateX(-16px) scale(.94)}to{opacity:1;transform:none}} @keyframes tr-in{from{opacity:0}to{opacity:1}} @keyframes typing{0%{opacity:0;transform:translateY(6px)}20%,80%{opacity:1;transform:none}100%{opacity:0}} @keyframes pc{0%{opacity:0;transform:translateY(-1.4em) scale(.96)}10%,84%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-.8em) scale(.97)}} @keyframes pc-a{0%,50%{opacity:1}56%,100%{opacity:0}} @keyframes pc-b{0%,50%{opacity:0}56%,100%{opacity:1}} @keyframes pc-ic{0%{box-shadow:0 0 0 0 rgba(47,182,242,.65)}16%{box-shadow:0 0 0 .6em rgba(47,182,242,0)}17%{box-shadow:0 0 0 0 rgba(47,182,242,.65)}33%{box-shadow:0 0 0 .6em rgba(47,182,242,0)}50%{background:#1675c4}56%,100%{background:#f07a0a;box-shadow:none}} .mp-pulse{animation:pulse 2.2s ease-out infinite} .mp-pulse.p2{animation-delay:1.1s} /* hero sequence: only with .anim (motion allowed + JS). Without it, the final state shows. */ .anim .sq{animation:sq-in .55s cubic-bezier(.2,.8,.2,1) calc(var(--d,0s) * var(--ts,1)) both} .anim .chip.sq{animation-name:chip-in} .anim .tr.sq{animation:tr-in .6s ease calc(var(--d,0s) * var(--ts,1)) both} .anim .typing{display:flex;animation:typing .85s ease calc(var(--d,0s) * var(--ts,1)) both} .anim .ph-call{animation:pc calc(2.9s * var(--ts,1)) cubic-bezier(.3,.7,.2,1) calc(5.9s * var(--ts,1)) both} .anim .pc-in,.anim .pc-ring{animation:pc-a calc(2.9s * var(--ts,1)) linear calc(5.9s * var(--ts,1)) both} .anim .pc-miss,.anim .pc-missed{animation:pc-b calc(2.9s * var(--ts,1)) linear calc(5.9s * var(--ts,1)) both} .anim .pc-ic{animation:pc-ic calc(2.9s * var(--ts,1)) linear calc(5.9s * var(--ts,1)) both} .anim:not(.go) .seq:not(.play) :is(.sq,.typing,.ph-call,.pc-in,.pc-ring,.pc-miss,.pc-missed,.pc-ic){animation-play-state:paused} @container (max-width:539.98px){.anim .chip.sq{animation-name:sq-in}} /* reveal on scroll */ .anim .rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.8,.2,1) var(--rd,0ms),transform .7s cubic-bezier(.2,.8,.2,1) var(--rd,0ms)} .anim .rv.in,.go .rv{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} .tr-comet{display:none} .tr-dots{animation:none} } /* print */ @media print{.bg,.hdr,.bframe,.cta-panel .form-card{display:none}.ftr{background:none;color:#000}.anim .rv{opacity:1;transform:none}} :root[data-theme="dark"] .ph-who small,:root[data-theme="dark"] .ph-back{color:#7cb4ff} :root[data-theme="dark"] .msg time{color:#8d97a8} :root[data-theme="dark"] .ph-input{color:#8d97a8} section[tabindex="-1"]:focus,main:focus{outline:none} .mp-missed time{white-space:nowrap} .fc-btns{display:flex;flex-wrap:wrap} .fbtn{flex:1 1 auto} @media (max-width:559.98px){ .fc-rows{grid-template-columns:minmax(min-content,7em) minmax(0,1fr)} .fr dt{white-space:normal} }