/* ============================================================
   GLM - Design tokens
   Цвета, шрифты, радиусы. Правки цветовой схемы - только здесь.
   Тёмная тема: переопределение под prefers-color-scheme
   и через атрибут <html data-theme="dark|light">.
   ============================================================ */
/* ============ TOKENS ============ */
:root{
  --ink:#120F2D; --ink-2:#1B1740; --ink-3:#26214F;
  --violet:#6C5CE7; --violet-deep:#4A3BD6; --violet-soft:#A99BFF;
  --coral:#FF7A59; --coral-deep:#F25C3A; --peach:#FFE1D6;
  --lilac:#F4F2FF; --lilac-2:#EAE6FF; --paper:#FFFFFF;
  --text:#17142B; --muted:#5D5A78; --line:rgba(35,28,90,.12);
  --mint:#2FC98B; --sky:#41B6F5; --pink:#E1306C; --wa:#25D366;
  --bg:#FFFFFF; --surface:#F4F2FF; --surface-2:#FFFFFF; --card-shadow:0 30px 80px -30px rgba(50,35,140,.35);
  --display:'Unbounded',system-ui,sans-serif; --body:'Golos Text',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r-xl:28px; --r-lg:20px; --r-md:14px; --r-pill:999px;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D0B22; --surface:#141130; --surface-2:#1B1740; --text:#F1EFFF; --muted:#B4AFD4; --line:rgba(255,255,255,.1); --lilac:#141130; --lilac-2:#1F1A48; --paper:#1B1740;
  }
}
:root[data-theme="dark"]{
  --bg:#0D0B22; --surface:#141130; --surface-2:#1B1740; --text:#F1EFFF; --muted:#B4AFD4; --line:rgba(255,255,255,.1); --lilac:#141130; --lilac-2:#1F1A48; --paper:#1B1740;
}

/* ============================================================
   GLM - Основные стили
   Порядок: база → кнопки → навигация → герой → секции по порядку
   на странице → подвал → анимации/медиа.
   Брейкпоинты: 1300 / 1100 / 960 / 768 / 640 / 380 px.
   ============================================================ */

html{overflow-x:clip; scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 92px);}
*,*::before,*::after{box-sizing:border-box}
body{margin:0; font-family:var(--body); font-size:19px; line-height:1.6; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-x:clip;}
img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}
:focus-visible{outline:3px solid var(--coral); outline-offset:3px; border-radius:6px}
.wrap{width:min(1240px, 100% - 48px); margin-inline:auto}
@media (max-width:640px){ .wrap{width:min(1200px, 100% - 32px)} }

h1,h2,h3{font-family:var(--display); letter-spacing:-.01em; margin:0; line-height:1.1; text-wrap:balance}
h1{font-size:clamp(2.1rem, 3.9vw, 3.1rem); font-weight:700; line-height:1.08}
h2{font-size:clamp(1.9rem, 3.8vw, 3.1rem); font-weight:700}
h3{font-size:clamp(1.25rem, 1.8vw, 1.55rem); font-weight:600; line-height:1.25}
p{margin:0}
.lead{font-size:clamp(1.15rem, 1.6vw, 1.35rem); color:var(--muted); line-height:1.55; max-width:36ch}
.sec{padding:clamp(48px, 5.5vw, 76px) 0}
.sec-head{max-width:760px; margin-bottom:clamp(28px,3.5vw,44px)}
.sec-head h2{margin-bottom:16px}
.kicker{display:inline-flex; align-items:center; gap:10px; padding:8px 16px; border-radius:var(--r-pill); background:var(--lilac-2); color:var(--violet-deep); font-weight:600; font-size:.95rem; margin-bottom:16px}
.kicker::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--coral)}

/* ============ BUTTONS ============ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:16px 28px; border-radius:var(--r-pill); font-weight:600; font-size:1.05rem; border:0; transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s; white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-coral{background:linear-gradient(135deg, var(--coral), var(--coral-deep)); color:#fff; box-shadow:0 14px 34px -12px rgba(242,92,58,.7)}
.btn-coral:hover{box-shadow:0 20px 44px -12px rgba(242,92,58,.8)}
.btn-ghost{background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(10px)}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.btn-violet{background:var(--violet); color:#fff; box-shadow:0 14px 34px -14px rgba(108,92,231,.8)}
.btn-violet:hover{background:var(--violet-deep)}
.btn-outline{background:transparent; color:var(--text); border:2px solid var(--line)}
.btn-outline:hover{border-color:var(--violet); color:var(--violet)}
.btn-lg{padding:20px 36px; font-size:1.15rem}

/* ============ NAV ============ */
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; padding:14px 0; transition:background .3s, box-shadow .3s}
.nav.solid{background:rgba(18,15,45,.72); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); box-shadow:0 1px 0 rgba(255,255,255,.08)}
.nav .wrap{display:flex; align-items:center; gap:28px}
.logo{display:flex; align-items:center; gap:12px; font-family:var(--display); font-weight:800; font-size:1.3rem; color:#fff; letter-spacing:.02em}
.logo-mark{width:40px; height:40px; border-radius:13px; background:conic-gradient(from 210deg, var(--coral), var(--violet), var(--sky), var(--coral)); display:grid; place-items:center; position:relative; box-shadow:0 8px 24px -8px rgba(108,92,231,.9)}
.logo-mark::after{content:""; position:absolute; inset:3px; border-radius:10px; background:var(--ink)}
.logo-mark span{position:relative; z-index:1; color:#fff; font-size:1rem}
.nav-links{display:flex; gap:6px; margin-inline:auto}
.nav-links a{white-space:nowrap; padding:10px 16px; border-radius:var(--r-pill); color:rgba(255,255,255,.8); font-weight:500; transition:background .2s, color .2s}
.nav-links a:hover{background:rgba(255,255,255,.1); color:#fff}
.nav-cta{display:flex; align-items:center; gap:8px}
.nav-cta .login{color:rgba(255,255,255,.85); padding:10px 16px; font-weight:500}
.nav .btn{padding:12px 22px; font-size:1rem}
.burger{display:none; width:44px; height:44px; border-radius:12px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff; align-items:center; justify-content:center}
.mobile-menu{display:none}
@media (max-width:960px){
  .nav-links,.nav-cta .login{display:none}
  .burger{display:inline-flex; margin-left:auto}
  .nav-cta{margin-left:auto}
  .mobile-menu.open{display:flex; flex-direction:column; gap:6px; padding:16px 20px 24px; background:rgba(18,15,45,.96); backdrop-filter:blur(18px)}
  .mobile-menu a{color:#fff; padding:14px 12px; font-size:1.15rem; border-radius:12px}
  .mobile-menu a:hover{background:rgba(255,255,255,.08)}
}
@media (max-width:640px){ .nav-cta .btn{display:none} }

/* ============ HERO ============ */
.hero{position:relative; background:var(--ink); color:#fff; overflow:hidden; padding:clamp(24px,4vw,56px) 0 clamp(40px,5vw,72px); isolation:isolate}
.hero-top-wrap{background:var(--ink)}
.aurora{position:absolute; inset:-20% -10%; z-index:-1; filter:blur(70px); opacity:.9; pointer-events:none}
.aurora span{position:absolute; border-radius:50%; mix-blend-mode:screen; animation:drift 22s ease-in-out infinite alternate}
.aurora .a1{width:60vw; height:60vw; left:-15vw; top:-10vw; background:radial-gradient(circle, rgba(108,92,231,.9), transparent 65%)}
.aurora .a2{width:50vw; height:50vw; right:-10vw; top:5vw; background:radial-gradient(circle, rgba(255,122,89,.55), transparent 65%); animation-delay:-8s}
.aurora .a3{width:45vw; height:45vw; right:15vw; bottom:-20vw; background:radial-gradient(circle, rgba(65,182,245,.5), transparent 65%); animation-delay:-14s}
@keyframes drift{from{transform:translate(0,0) scale(1)} to{transform:translate(6vw,4vw) scale(1.12)}}
.grid-lines{position:absolute; inset:0; z-index:-1; background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse at 50% 20%, black 30%, transparent 75%); -webkit-mask-image:radial-gradient(ellipse at 50% 20%, black 30%, transparent 75%)}
.hero .wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(40px,5vw,72px); align-items:center}
.hero-copy .kicker{background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.14)}
.hero h1{margin-bottom:22px}
.hero .lead{color:rgba(255,255,255,.8); margin-bottom:30px; max-width:46ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:28px}
.hero-facts{display:flex; flex-wrap:wrap; gap:10px 22px; color:rgba(255,255,255,.7); font-size:1rem}
.hero-facts span{display:inline-flex; align-items:center; gap:8px}
.hero-facts svg{width:18px; height:18px; color:var(--mint)}
.channels{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; align-items:center; color:rgba(255,255,255,.65); font-size:.95rem}
.chip-ch{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:var(--r-pill); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:#fff; font-weight:500}
.chip-ch i{width:10px; height:10px; border-radius:50%}
@media (max-width:1100px){
  .nav-links a{padding:10px 12px; font-size:.95rem}
  .hero .wrap{grid-template-columns:1fr}
  .hero-copy{max-width:720px}
  .hero .lead{max-width:52ch}
  .hero-scene{margin:20px auto 0; width:min(100%, 620px)}
  .f-sched{left:0} .f-crm{right:0}
}

/* ---- Hero scene ---- */
.hero-scene{position:relative; min-height:640px; perspective:1400px}
@media (max-width:1100px){ .hero-scene{min-height:620px} .scene-inner{height:620px} }
.scene-inner{position:relative; width:100%; height:640px; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.phone{position:absolute; left:50%; top:20px; transform:translateX(-50%); width:290px; height:590px; border-radius:46px; background:#0A0820; padding:12px; box-shadow:0 60px 120px -40px rgba(0,0,0,.8), inset 0 0 0 2px rgba(255,255,255,.12); transform-style:preserve-3d}
.phone::before{content:""; position:absolute; top:14px; left:50%; transform:translateX(-50%); width:110px; height:30px; background:#0A0820; border-radius:20px; z-index:3}
.phone-screen{position:relative; width:100%; height:100%; border-radius:36px; background:#fff; overflow:hidden; color:#17142B; display:flex; flex-direction:column}
.ph-head{padding:52px 18px 12px; display:flex; align-items:center; gap:12px; border-bottom:1px solid #EEE9FF}
.avatar{width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#F9CE34,#EE2A7B,#6228D7); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.95rem; flex:none}
.ph-head b{display:block; font-size:.95rem}
.ph-head small{font-size:.75rem; color:#7B7796}
.ch-ico{margin-left:auto; width:24px; height:24px; display:grid; place-items:center}
.ch-ico svg{width:24px; height:24px}
.phone-screen.fade .ph-head,.phone-screen.fade .ph-body{opacity:0; transform:translateY(8px)}
.ph-head,.ph-body{transition:opacity .45s, transform .45s}
.scene-tabs{position:absolute; left:50%; bottom:-58px; transform:translateX(-50%); display:flex; gap:8px; padding:6px; border-radius:var(--r-pill); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(10px)}
.scene-tabs button{position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border:0; border-radius:var(--r-pill); background:transparent; color:rgba(255,255,255,.65); font-weight:600; font-size:.92rem; transition:color .25s, background .25s}
.scene-tabs button i{width:9px; height:9px; border-radius:50%; flex:none}
.scene-tabs button.on{color:#fff; background:rgba(255,255,255,.12)}
.scene-tabs .prog{position:absolute; left:0; bottom:0; height:2px; width:0; background:linear-gradient(90deg,var(--coral),var(--violet-soft))}
.scene-tabs button.on .prog{animation:fill var(--dur,14s) linear forwards}
.hero-scene{margin-bottom:64px}
@media (max-width:640px){ .scene-tabs{margin-left:0} .scene-tabs button:not(.on) .lbl{display:none} .scene-tabs button:not(.on){padding:8px 10px} }
.ph-body{flex:1; min-height:0; padding:14px 14px 10px; display:flex; flex-direction:column; justify-content:flex-end; gap:10px; overflow:hidden; background:linear-gradient(#fff, #F7F5FF)}
.msg{max-width:82%; padding:11px 14px; border-radius:18px; font-size:.9rem; line-height:1.4; opacity:0; transform:translateY(10px) scale(.96); transition:opacity .4s, transform .5s cubic-bezier(.2,.8,.2,1)}
.msg.show{opacity:1; transform:none}
.msg.in{align-self:flex-start; background:#EFECFF; border-bottom-left-radius:6px}
.msg.out{align-self:flex-end; background:linear-gradient(135deg, var(--violet), #8A7BFF); color:#fff; border-bottom-right-radius:6px}
.msg .tag{display:inline-flex; gap:6px; align-items:center; margin-top:6px; font-size:.7rem; color:#5D5A78; opacity:.9}
.msg.out .tag{color:rgba(255,255,255,.85)}
.typing{align-self:flex-start; display:none; gap:5px; padding:12px 14px; background:#EFECFF; border-radius:18px; border-bottom-left-radius:6px}
.typing.show{display:inline-flex}
.typing i{width:7px; height:7px; border-radius:50%; background:#8A83B5; animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.3; transform:translateY(0)}40%{opacity:1; transform:translateY(-3px)}}
.ph-input{margin:6px 12px 14px; padding:12px 16px; border-radius:24px; background:#F1EEFF; color:#8A83B5; font-size:.9rem; display:flex; justify-content:space-between; align-items:center}
.ph-input i{width:28px; height:28px; border-radius:50%; background:var(--violet); display:grid; place-items:center}
.ph-input svg{width:14px; height:14px; color:#fff}

.float{position:absolute; background:rgba(255,255,255,.92); color:#17142B; border-radius:20px; padding:16px 18px; box-shadow:0 30px 60px -20px rgba(20,10,80,.55), 0 0 0 1px rgba(255,255,255,.6) inset; backdrop-filter:blur(12px); width:250px; opacity:0; transform:translateY(20px) scale(.94); transition:opacity .6s, transform .7s cubic-bezier(.2,.8,.2,1)}
.float.show{opacity:1; transform:translateZ(40px)}
.float .lbl{font-size:.75rem; color:#7B7796; margin-bottom:6px; display:flex; align-items:center; gap:6px}
.float .lbl i{width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(47,201,139,.2)}
.float b{display:block; font-size:.98rem; margin-bottom:3px; line-height:1.25}
.float span{font-size:.85rem; color:#5D5A78}
.f-sched{left:-50px; top:150px; width:200px}
.f-crm{right:-50px; bottom:36px; width:210px}
@media (max-width:1300px) and (min-width:1101px){ .f-sched{left:-10px} .f-crm{right:-10px} }
@media (max-width:640px){ .scene-tabs{position:static; transform:none; margin:16px auto 0; width:max-content; max-width:100%} .scene-tabs button{padding:8px 11px; font-size:.82rem; gap:6px} .hero-scene{margin-bottom:0} .f-sched{top:-8px; left:-4px; width:190px} .f-crm{bottom:-4px; right:-4px; width:200px} }
.f-crm .f-row{display:flex; justify-content:space-between; gap:10px; font-size:.85rem; padding:6px 0; border-top:1px solid #EEE9FF; background:transparent}
.f-crm .f-row:first-of-type{border-top:0}
.f-crm .f-row em{font-style:normal; color:#7B7796}
.f-crm .f-row span{color:#17142B}
.badge{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--r-pill); font-size:.75rem; font-weight:600}
.badge.ok{background:rgba(47,201,139,.14); color:#1F9D6A}
.badge.ai{background:rgba(108,92,231,.14); color:var(--violet-deep)}
.badge.warn{background:rgba(255,122,89,.16); color:#D14A2A}
.badge.gray{background:#F0EEF8; color:#6B6885}
.glow-ring{position:absolute; left:50%; top:50%; width:520px; height:520px; transform:translate(-50%,-50%); border-radius:50%; border:1px solid rgba(255,255,255,.08); z-index:-1}
.glow-ring::after{content:""; position:absolute; inset:60px; border-radius:50%; border:1px solid rgba(255,255,255,.06)}
@media (max-width:640px){
  .hero-scene{min-height:600px}
  .scene-inner{height:600px}
  .phone{width:270px; height:560px; top:20px}
  .float{width:200px; padding:12px 14px}
    .glow-ring{width:min(380px, 92vw); height:min(380px, 92vw)}
}

/* ============ LOGO STRIP ============ */
.strip{background:var(--ink); color:rgba(255,255,255,.6); padding:18px 0 26px; border-top:1px solid rgba(255,255,255,.06)}
.strip .wrap{display:flex; flex-wrap:wrap; gap:14px 34px; align-items:center; justify-content:center; font-size:.95rem}
.strip b{color:#fff; font-weight:600; font-size:1.05rem; opacity:.9}

/* ============ EXPLAINER ============ */
.explain{background:var(--bg)}
.problems{padding-top:0}
.flow{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:18px; align-items:stretch}
.flow-step{padding:34px 30px; border-radius:var(--r-xl); background:var(--surface); position:relative}
.flow-ico{width:60px; height:60px; border-radius:18px; display:grid; place-items:center; color:#fff; margin-bottom:22px}
.flow-ico svg{width:28px; height:28px}
.flow-n{display:inline-block; font-weight:600; color:var(--violet); font-size:.95rem; margin-bottom:8px}
.flow-step h3{margin-bottom:12px}
.flow-step p{color:var(--muted); font-size:1.05rem}
.flow-arrow{display:grid; place-items:center; color:var(--violet-soft)}
.flow-arrow svg{width:34px; height:34px}
.who{margin-top:28px; display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.who b{margin-right:6px}
.who span{padding:9px 16px; border-radius:var(--r-pill); background:var(--lilac-2); color:var(--violet-deep); font-weight:500; font-size:.98rem}
@media (max-width:1100px){ .flow{grid-template-columns:1fr; gap:12px} .flow-arrow{transform:rotate(90deg); height:34px} }

/* ============ PROBLEMS ============ */
.problems{background:var(--bg)}
.prob-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.prob{padding:36px 32px; border-radius:var(--r-xl); background:var(--surface); position:relative; overflow:hidden; transition:transform .3s, box-shadow .3s}
.prob:hover{transform:translateY(-6px); box-shadow:var(--card-shadow)}
.prob .ico{width:64px; height:64px; border-radius:20px; display:grid; place-items:center; margin-bottom:26px; color:#fff}
.prob .ico svg{width:30px; height:30px}
.prob:nth-child(1) .ico{background:linear-gradient(135deg,#E1306C,#F77737)}
.prob:nth-child(2) .ico{background:linear-gradient(135deg,var(--violet),#41B6F5)}
.prob:nth-child(3) .ico{background:linear-gradient(135deg,#FF7A59,#FFB199)}
.prob h3{margin-bottom:14px}
.prob p{color:var(--muted); font-size:1.05rem}
@media (max-width:1100px){ .prob-grid{grid-template-columns:1fr} }
@media (min-width:768px) and (max-width:1100px){ .prob-grid,.steps{grid-template-columns:repeat(2,1fr)} .prob:last-child,.step:last-child{grid-column:1/-1} }

/* ============ FEATURES ============ */
.features{background:var(--surface)}
.feat{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; padding:clamp(28px,3.5vw,48px) 0}
.feat:last-child{padding-bottom:0}
.feat + .feat{border-top:1px solid var(--line)}
.feat:nth-child(even) .feat-copy{order:2}
.feat-copy h3{font-size:clamp(1.6rem,2.6vw,2.2rem); margin-bottom:18px; font-weight:700}
.feat-copy p{color:var(--muted); font-size:1.15rem; max-width:44ch}
.feat-copy .pts{list-style:none; padding:0; margin:24px 0 0; display:flex; flex-direction:column; gap:12px}
.feat-copy .pts li{display:flex; gap:12px; align-items:flex-start; font-size:1.05rem}
.feat-copy .pts svg{width:22px; height:22px; flex:none; color:var(--violet); margin-top:3px}
@media (max-width:960px){ .feat{grid-template-columns:1fr} .feat:nth-child(even) .feat-copy{order:0} }

.screen{background:var(--paper); border-radius:var(--r-xl); box-shadow:var(--card-shadow), 0 0 0 1px var(--line); overflow:hidden; color:var(--text); position:relative}
.screen-bar{display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--surface-2)}
.screen-bar i{width:11px; height:11px; border-radius:50%; background:#E7E3FA}
.screen-bar i:nth-child(1){background:#FF7A59}.screen-bar i:nth-child(2){background:#FFC857}.screen-bar i:nth-child(3){background:#2FC98B}
.screen-bar span{margin-left:auto; font-size:.8rem; color:var(--muted)}
.screen-body{padding:22px}
.tabs{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap}
.tab{padding:8px 14px; border-radius:var(--r-pill); font-size:.9rem; font-weight:500; background:var(--lilac-2); color:var(--muted)}
.tab.on{background:var(--violet); color:#fff}
.tab b{margin-left:6px; opacity:.8}
.inbox{display:flex; flex-direction:column; gap:10px}
.thread{display:flex; gap:14px; align-items:center; padding:14px 16px; border-radius:16px; background:var(--surface); transition:transform .25s, background .25s}
.thread:hover{transform:translateX(4px); background:var(--lilac-2)}
.ch{width:42px; height:42px; border-radius:14px; display:grid; place-items:center; font-weight:700; color:#fff; font-size:.8rem; flex:none}
.ch.ig{background:linear-gradient(135deg,#F9CE34,#EE2A7B,#6228D7)}
.ch.wa{background:var(--wa)}
.ch.tg{background:var(--sky)}
.thread .t{flex:1; min-width:0}
.thread .t b{display:block; font-size:1rem}
.thread .t span{display:block; font-size:.9rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.qa{display:flex; flex-direction:column; gap:14px}
.qa .msg{opacity:1; transform:none; font-size:1rem; max-width:88%}
.qa .msg.in{background:var(--lilac-2)}
.src{display:inline-flex; align-items:center; gap:8px; margin-top:8px; padding:6px 12px; border-radius:var(--r-pill); background:var(--surface); font-size:.85rem; color:var(--muted)}
.src svg{width:14px; height:14px; color:var(--violet)}

.sched{display:flex; flex-direction:column; gap:8px}
.sched-head{display:flex; justify-content:space-between; align-items:center; padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:8px}
.sched-head b{font-size:1.05rem}
.sched-head span{color:var(--muted); font-size:.95rem}
.slot{display:grid; grid-template-columns:64px 1fr; gap:14px; align-items:center; padding:12px 14px; border-radius:14px}
.slot time{font-weight:600; color:var(--muted)}
.slot.busy{background:var(--surface)}
.slot.new{background:linear-gradient(135deg, rgba(108,92,231,.14), rgba(255,122,89,.14)); outline:2px solid var(--violet); outline-offset:-2px}
.slot.free{border:2px dashed var(--line); color:var(--muted)}
.slot b{display:block}
.slot small{color:var(--muted); font-size:.85rem}

.crm{display:grid; grid-template-columns:1fr; gap:10px}
.crm-top{display:flex; gap:16px; align-items:center; margin-bottom:12px}
.crm-top .avatar{width:56px; height:56px; font-size:1.3rem}
.crm-top b{font-size:1.2rem; display:block}
.crm-top span{color:var(--muted)}
.field{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; border-radius:14px; background:var(--surface)}
.field span{color:var(--muted); font-size:.95rem}
.field b{font-weight:600; text-align:right}

/* ============ CONTROL (dark) ============ */
.control{background:var(--ink); color:#fff; position:relative; overflow:hidden}
.control .glow{position:absolute; width:70vw; height:70vw; left:50%; top:-30vw; transform:translateX(-50%); background:radial-gradient(circle, rgba(108,92,231,.45), transparent 60%); filter:blur(60px); pointer-events:none}
.control .kicker{background:rgba(255,255,255,.1); color:#fff}
.control .lead{color:rgba(255,255,255,.75)}
.ctrl-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-bottom:20px}
.ctrl{padding:34px; border-radius:var(--r-xl); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(8px); transition:background .3s, transform .3s}
.ctrl:hover{background:rgba(255,255,255,.08); transform:translateY(-4px)}
.ctrl h3{margin-bottom:14px; color:#fff}
.ctrl p{color:rgba(255,255,255,.75); font-size:1.05rem}
.ctrl .num{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; margin-bottom:22px; background:linear-gradient(135deg,var(--coral),var(--violet)); color:#fff}
.ctrl .num svg{width:22px; height:22px}
.modes{padding:34px; border-radius:var(--r-xl); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); display:grid; grid-template-columns:1fr 1.2fr; gap:36px; align-items:center}
.seg{display:inline-flex; padding:6px; border-radius:var(--r-pill); background:rgba(0,0,0,.35); gap:4px; position:relative}
.seg button{border:0; background:transparent; color:rgba(255,255,255,.7); padding:12px 22px; border-radius:var(--r-pill); font-weight:600; font-size:1rem; transition:color .25s, background .25s}
.seg button.on{background:#fff; color:var(--ink)}
.mode-desc{min-height:110px}
.mode-desc h3{color:#fff; margin-bottom:10px}
.mode-desc p{color:rgba(255,255,255,.75)}
.timer{display:flex; align-items:center; gap:12px; margin-top:16px; color:rgba(255,255,255,.7); font-size:.95rem}
.timer .bar{flex:1; height:6px; border-radius:3px; background:rgba(255,255,255,.12); overflow:hidden}
.timer .bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--coral),var(--violet-soft)); animation:fill 8s linear infinite}
@keyframes fill{from{width:0}to{width:100%}}
@media (max-width:960px){ .ctrl-grid{grid-template-columns:1fr} .modes{grid-template-columns:1fr} .seg{flex-wrap:wrap} }

/* ============ DEMO ============ */
.demo{background:var(--bg)}
.demo-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:stretch}
.demo-chat{display:flex; flex-direction:column; min-height:440px}
.demo-chat .screen-body{flex:1; display:flex; flex-direction:column; gap:12px; overflow:auto; max-height:360px; min-height:200px}
.demo-chat .msg{opacity:1; transform:none; font-size:1rem; max-width:85%}
.demo-chat .msg.in{background:var(--lilac-2)}
.quick{display:flex; flex-wrap:wrap; gap:10px; padding:16px 22px 22px; border-top:1px solid var(--line)}
.quick button{padding:12px 18px; border-radius:var(--r-pill); border:2px solid var(--line); background:var(--surface-2); color:var(--text); font-weight:500; transition:border-color .2s, background .2s, transform .2s}
.quick button:hover{border-color:var(--violet); color:var(--violet); transform:translateY(-2px)}
.quick button:disabled{opacity:.4; cursor:not-allowed; transform:none}
.log{padding:22px}
.log h3{margin-bottom:16px}
.log-list{display:flex; flex-direction:column; gap:10px}
.log-item{display:flex; gap:14px; padding:14px 16px; border-radius:14px; background:var(--surface); align-items:flex-start; opacity:0; transform:translateX(12px); animation:slidein .5s forwards}
@keyframes slidein{to{opacity:1; transform:none}}
.log-item i{width:34px; height:34px; border-radius:11px; display:grid; place-items:center; flex:none; color:#fff; background:var(--violet)}
.log-item i.ok{background:var(--mint)}.log-item i.warn{background:var(--coral)}
.log-item svg{width:16px; height:16px}
.log-item b{display:block; font-size:.98rem}
.log-item span{color:var(--muted); font-size:.9rem}
.log-empty{color:var(--muted); padding:24px; border:2px dashed var(--line); border-radius:16px; text-align:center}
@media (max-width:960px){ .demo-grid{grid-template-columns:1fr} }

/* ============ CRM & CHANNELS ============ */
.integrations{background:var(--surface)}
.int-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px}
.card{background:var(--paper); border-radius:var(--r-xl); padding:36px; box-shadow:0 0 0 1px var(--line)}
.card h3{margin-bottom:12px}
.card > p{color:var(--muted); font-size:1.05rem}
.mini{margin-top:26px; display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px}
.mini div{padding:16px; border-radius:16px; background:var(--surface)}
.mini b{display:block; font-family:var(--display); font-size:1.6rem; font-weight:700; color:var(--violet)}
.mini span{font-size:.9rem; color:var(--muted)}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.chips span{padding:10px 18px; border-radius:var(--r-pill); background:var(--surface); font-weight:500; display:inline-flex; gap:8px; align-items:center}
.chips span::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--violet)}
.rows{margin-top:22px; display:flex; flex-direction:column; gap:10px}
.row{display:grid; grid-template-columns:130px 1fr; gap:16px; padding:16px 18px; border-radius:14px; background:var(--surface); align-items:center}
.row b{font-size:1.05rem}
.row span{color:var(--muted); font-size:1rem}
.row.ch3{grid-template-columns:120px 1fr 1.3fr}
.row.head{background:transparent; padding-block:6px; color:var(--muted); font-size:.9rem}
.row.head b{font-weight:500; font-size:.9rem; color:var(--muted)}
.brand{display:flex; align-items:center; gap:10px}
.brand i{width:36px; height:36px; border-radius:11px; display:grid; place-items:center; color:#fff; font-weight:700; font-size:.75rem; flex:none}
.note{color:var(--muted); font-size:1rem; margin-top:18px}
@media (max-width:960px){ .int-grid{grid-template-columns:1fr} }
@media (max-width:640px){ .row,.row.ch3{grid-template-columns:1fr; gap:8px} .row.head{display:none} .row.ch3 span[data-l]::before{content:attr(data-l); display:block; font-size:.8rem; color:var(--violet); font-weight:600; margin-bottom:2px} .card{padding:26px} }

/* ============ ONBOARDING ============ */
.onboard{background:var(--bg)}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative}
.step{padding:36px 32px; border-radius:var(--r-xl); background:var(--surface); position:relative}
.step .n{font-family:var(--display); font-weight:800; font-size:3rem; line-height:1; background:linear-gradient(135deg,var(--violet),var(--coral)); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:18px}
.step h3{margin-bottom:18px}
.step ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.step li{display:flex; gap:12px; align-items:flex-start; font-size:1.05rem}
.step li svg{width:22px; height:22px; flex:none; color:var(--mint); margin-top:3px}
@media (max-width:767px){ .steps{grid-template-columns:1fr} }

/* ============ PRICING ============ */
.pricing{background:var(--surface); position:relative}
.trial{display:inline-flex; gap:12px; align-items:center; padding:12px 20px; border-radius:var(--r-pill); background:var(--peach); color:#B23F1F; font-weight:600; margin-bottom:28px}
.trial svg{width:20px; height:20px}
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch}
.plan{background:var(--paper); border-radius:var(--r-xl); padding:38px 34px; display:flex; flex-direction:column; position:relative; box-shadow:0 0 0 1px var(--line); transition:transform .3s, box-shadow .3s}
.plan:hover{transform:translateY(-8px); box-shadow:var(--card-shadow), 0 0 0 1px var(--line)}
.plan.hot{background:linear-gradient(var(--paper),var(--paper)) padding-box, linear-gradient(135deg,var(--violet),var(--coral)) border-box; border:2px solid transparent; box-shadow:0 40px 90px -30px rgba(108,92,231,.55)}
.plan.hot .rec{position:absolute; top:-16px; left:34px; padding:8px 16px; border-radius:var(--r-pill); background:linear-gradient(135deg,var(--violet),var(--coral)); color:#fff; font-weight:600; font-size:.9rem}
.plan h3{font-size:1.5rem; margin-bottom:6px}
.plan .for{color:var(--muted); margin-bottom:24px}
.price{font-family:var(--display); font-size:clamp(2rem,2.9vw,2.6rem); font-weight:700; letter-spacing:-.02em; line-height:1; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px}
.price > small{white-space:nowrap}
.price small{font-family:var(--body); font-weight:500; font-size:1rem; color:var(--muted); letter-spacing:0}
.dialogs{margin:22px 0; padding:16px 18px; border-radius:16px; background:var(--surface); display:flex; align-items:baseline; gap:10px}
.dialogs b{font-size:1.7rem; font-family:var(--display); font-weight:700; white-space:nowrap}
.dialogs span{color:var(--muted); font-size:.95rem}
.plan .lim{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px}
.plan .lim span{padding:6px 12px; border-radius:var(--r-pill); background:var(--lilac-2); color:var(--violet-deep); font-weight:600; font-size:.9rem}
.plan .inc{font-weight:600; margin-bottom:12px}
.plan ul{list-style:none; margin:0 0 30px; padding:0; display:flex; flex-direction:column; gap:12px; flex:1}
.plan li{display:flex; gap:12px; align-items:flex-start; font-size:1.02rem}
.plan li svg{width:20px; height:20px; flex:none; color:var(--violet); margin-top:3px}
.plan .btn{width:100%}
.every{margin-top:28px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; color:var(--muted)}
.every span{padding:10px 18px; border-radius:var(--r-pill); background:var(--paper); box-shadow:0 0 0 1px var(--line); color:var(--text); font-weight:500}
.addons{margin-top:44px}
.addons h3{font-size:1.7rem; margin-bottom:10px}
.addons > p{color:var(--muted); margin-bottom:20px}
.addon-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.addon{background:var(--paper); border-radius:var(--r-lg); padding:26px; box-shadow:0 0 0 1px var(--line)}
.addon b{display:block; font-size:1.1rem; margin-bottom:8px}
.addon .p{font-family:var(--display); font-weight:700; font-size:1.3rem; color:var(--violet); margin-bottom:8px}
.addon span{color:var(--muted); font-size:.95rem}
.fine{margin-top:28px; display:grid; grid-template-columns:1fr 1fr; gap:20px; color:var(--muted); font-size:1rem}
.fine b{color:var(--text)}
@media (max-width:1100px){ .addon-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:1100px){ .plans{grid-template-columns:1fr; max-width:640px; margin-inline:auto} .plan.hot{transform:none} }
@media (max-width:960px){ .fine{grid-template-columns:1fr} }
@media (max-width:560px){ .addon-grid{grid-template-columns:1fr} }

/* ============ FAQ ============ */
.faq{background:var(--bg)}
.faq-grid{display:grid; grid-template-columns:1fr 1.4fr; gap:48px; align-items:start}
.faq-list{display:flex; flex-direction:column; gap:12px}
.q{border-radius:var(--r-lg); background:var(--surface); overflow:hidden}
.q summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 26px; font-weight:600; font-size:1.15rem}
.q summary::-webkit-details-marker{display:none}
.q summary i{width:34px; height:34px; border-radius:50%; background:var(--paper); display:grid; place-items:center; flex:none; transition:transform .3s, background .3s}
.q summary i::before{content:"+"; font-size:1.4rem; line-height:1; color:var(--violet); font-weight:500}
.q[open] summary i{transform:rotate(45deg); background:var(--violet)}
.q[open] summary i::before{color:#fff}
.q .a{padding:0 26px 24px; color:var(--muted); font-size:1.05rem; max-width:64ch}
@media (max-width:960px){ .faq-grid{grid-template-columns:1fr; gap:24px} }

/* ============ CTA / FORM ============ */
.cta{background:var(--ink); color:#fff; position:relative; overflow:hidden}
.cta .aurora{opacity:.7}
.cta-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,80px); align-items:center}
.cta h2{margin-bottom:20px}
.cta .lead{color:rgba(255,255,255,.75)}
.cta-contacts{margin-top:32px; display:flex; flex-direction:column; gap:12px; font-size:1.1rem}
.cta-contacts a{display:inline-flex; gap:12px; align-items:center; color:#fff}
.cta-contacts svg{width:22px; height:22px; color:var(--coral)}
.form{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(14px); border-radius:var(--r-xl); padding:clamp(26px,3vw,40px)}
.form h3{color:#fff; margin-bottom:6px; font-size:1.6rem}
.form > p{color:rgba(255,255,255,.7); margin-bottom:26px}
.fld{display:flex; flex-direction:column; gap:8px; margin-bottom:16px}
.fld label{font-size:.95rem; color:rgba(255,255,255,.8); font-weight:500}
.fld input,.fld select{width:100%; padding:16px 18px; border-radius:14px; border:1px solid rgba(255,255,255,.16); background:rgba(0,0,0,.25); color:#fff; font:inherit; font-size:1.05rem; transition:border-color .2s, box-shadow .2s}
.fld input::placeholder{color:rgba(255,255,255,.4)}
.fld input:focus{outline:0; border-color:var(--coral); box-shadow:0 0 0 4px rgba(255,122,89,.2)}
.form .btn{width:100%; margin-top:8px}
.form small{display:block; margin-top:14px; color:rgba(255,255,255,.55); font-size:.9rem; text-align:center}
.form small a{text-decoration:underline}
.success{display:none; text-align:center; padding:30px 10px}
.success svg{width:72px; height:72px; margin:0 auto 18px; color:var(--mint)}
.success h3{color:#fff; margin-bottom:10px}
.success p{color:rgba(255,255,255,.75)}
.form.sent .fields{display:none}.form.sent .success{display:block}
@media (max-width:960px){ .cta-grid{grid-template-columns:1fr} }

/* ============ FOOTER ============ */
footer{background:#0A0820; color:rgba(255,255,255,.7); padding:48px 0 28px; font-size:1rem}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:32px; margin-bottom:36px}
.foot-grid h4{color:#fff; font-size:1.05rem; margin:0 0 16px; font-weight:600}
.foot-grid a{display:block; padding:6px 0; transition:color .2s}
.foot-grid a:hover{color:#fff}
.foot-grid .logo{margin-bottom:16px; display:flex}
.req{border-top:1px solid rgba(255,255,255,.08); padding-top:26px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px 32px; font-size:.95rem}
.req dt{color:rgba(255,255,255,.45); font-size:.85rem; margin-bottom:4px}
.req dd{margin:0; color:rgba(255,255,255,.85)}
.copy{margin-top:26px; padding-top:20px; border-top:1px solid rgba(255,255,255,.08); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:.9rem; color:rgba(255,255,255,.45)}
@media (max-width:960px){ .foot-grid{grid-template-columns:1fr} }

/* ============ MOTION ============ */
.js-reveal .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1)}
.js-reveal .reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}
.hero .wrap>*,.feat>*,.demo-grid>*,.cta-grid>*,.faq-grid>*,.int-grid>*,.modes>*{min-width:0}
@media (max-width:640px){ .btn{white-space:normal; text-align:center} .hero-actions .btn{width:100%} .kicker{font-size:.85rem; padding:7px 13px} .sec{padding:44px 0} .sec-head{margin-bottom:24px} .feat{padding:22px 0} .plan{padding:30px 22px} .price{font-size:1.9rem} .modes,.ctrl,.card,.prob,.step,.flow-step{padding:26px 22px} .screen-body{padding:16px} .row.ch3 span{font-size:.95rem} }
@media (max-width:380px){ body{font-size:17px} h1{font-size:1.6rem; letter-spacing:-.02em} h2{font-size:1.6rem} .float{width:168px; padding:10px 12px} .float b{font-size:.9rem} .float span{font-size:.8rem} .f-sched{display:none} .f-crm{bottom:20px; right:0} .wrap{width:calc(100% - 28px)} .hero-facts{font-size:.9rem} .seg button{padding:10px 14px; font-size:.9rem} .quick button{padding:10px 14px; font-size:.95rem} .dialogs b{font-size:1.4rem} }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s !important; transition-duration:.001s !important}
  .reveal{opacity:1; transform:none}
  .msg,.float{opacity:1; transform:none}
}
.wa-fab{position:fixed; right:22px; bottom:calc(22px + env(safe-area-inset-bottom,0px)); z-index:60; width:62px; height:62px; border-radius:50%; background:var(--wa); display:grid; place-items:center; box-shadow:0 16px 40px -10px rgba(37,211,102,.7); transition:transform .3s}
.wa-fab:hover{transform:scale(1.08)}
.wa-fab svg{width:32px; height:32px; color:#fff}

/* Same-origin replacements for inline presentation. */
#landing-page .landing-inline-0{background:#25D366}
#landing-page .landing-inline-1{background:linear-gradient(135deg,#F9CE34,#EE2A7B,#6228D7)}
#landing-page .landing-inline-2{background:#41B6F5}
#landing-page .landing-inline-3{margin-top:10px}
#landing-page .landing-inline-4{background:linear-gradient(135deg,#F9CE34,#EE2A7B,#6228D7)}
#landing-page .landing-inline-5{background:#25D366}
#landing-page .landing-inline-6{background:#41B6F5}
#landing-page .landing-inline-7{background:linear-gradient(135deg,#E1306C,#F77737)}
#landing-page .landing-inline-8{background:linear-gradient(135deg,var(--violet),#41B6F5)}
#landing-page .landing-inline-9{background:linear-gradient(135deg,#FF7A59,#FFB199)}
#landing-page .landing-inline-10{color:#fff; margin-bottom:12px; font-size:1.5rem}
#landing-page .landing-inline-11{color:rgba(255,255,255,.7); margin-bottom:22px}
#landing-page .landing-inline-12{border-style:dashed}
#landing-page .landing-inline-13{background:#3D5AFE}
#landing-page .landing-inline-14{background:#0FA0E8}
#landing-page .landing-inline-15{background:#FF6B4A}
#landing-page .landing-inline-16{background:#1E1B4B}
#landing-page .landing-inline-17{background:#25D366}
#landing-page .landing-inline-18{background:linear-gradient(135deg,#F9CE34,#EE2A7B,#6228D7)}
#landing-page .landing-inline-19{background:#41B6F5}
#landing-page .landing-inline-20{background:transparent; box-shadow:none; color:var(--muted); padding-left:0}
#landing-page .landing-inline-21{margin-bottom:0}
#landing-page .landing-inline-22{margin-top:28px}
.skip-link{position:fixed;left:16px;top:-100px;z-index:100;background:white;color:#120F2D;padding:12px 18px;border-radius:10px}.skip-link:focus{top:16px}.lead-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.form-status{color:#FFE1D6;font-size:1rem;line-height:1.5}.form-status:empty{display:none}.form button:disabled{cursor:wait;opacity:.65}.form [aria-invalid="true"]{border-color:var(--coral)}
@media(prefers-reduced-motion:reduce){.js-reveal .reveal{opacity:1;transform:none}}

/* Copy update: longer captions, additional benefits and revenue calculator. */
.scene-caption{font-size:1rem;text-align:center;color:rgba(255,255,255,.8);margin:0 0 18px}
.hero-facts{max-width:48ch}
.float .lbl{line-height:1.4}
.prob-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.prob:last-child{grid-column:auto}
.feature-extras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:44px}
.feature-extra-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:var(--lilac-2);color:var(--violet);margin-bottom:20px}
.feature-extra-icon svg{width:26px;height:26px}
.feature-extras h3{margin-bottom:16px}
.feature-extras p{color:var(--muted)}
.integration-details{margin-top:24px}
.integration-details > .card{margin:0 18px 18px}
.roi{background:var(--bg)}
.roi .lead{max-width:65ch}
.roi-calculator{padding:clamp(24px,4vw,40px);border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--line)}
.roi-calculator label{display:block;font-weight:600;margin-bottom:12px}
.roi-calculator input{display:block;width:100%;max-width:320px;border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;background:var(--paper);color:var(--text);font:inherit;font-size:1.3rem}
.roi-calculator input:focus{outline:2px solid var(--violet);outline-offset:3px}
.roi-calculator input[aria-invalid="true"]{border-color:var(--coral)}
.roi-result{margin-top:24px;font-size:clamp(1.1rem,2vw,1.4rem);font-weight:600;overflow-wrap:anywhere}
.form .fields > p:first-of-type{margin:18px 0 26px;font-size:1.05rem;color:rgba(255,255,255,.75)}
.plan .for{min-height:4.8em}
@media(max-width:767px){.prob-grid,.feature-extras{grid-template-columns:1fr}.integration-details > .card{margin:0 8px 12px}.integration-details > summary{padding:22px 18px}.integration-details > .card{padding:22px 18px}.plan .for{min-height:0}}