/* Layout: 1180px landing page, glass hero + one aura panel, clean white sections between. Tokens come from the Booqs brand book. */
:root{--surface:#F7F8FA;--surface-raised:#FFFFFF;--surface-sunken:#EFF1F4;--brand-night:#14163A;--glass:rgba(255, 255, 255, 0.55);--glass-strong:rgba(255, 255, 255, 0.78);--glass-stroke:rgba(255, 255, 255, 0.92);--ink:#14163A;--ink-muted:#565B7E;--ink-subtle:#64698C;--line:#E2E4EA;--primary:#4B4FD8;--on-primary:#FFFFFF;--primary-soft:#E3EEFD;--on-primary-soft:#3A3DC0;--periwinkle:#6F95F0;--lilac:#B8C2F8;--aqua:#8FE6F7;--blush:#9FDCF5;--glow-1:#BFDDFB;--glow-2:#CFE8FB;--glow-3:#D3F4FB;--glow-4:#DDF1FC;--success:#12805A;--danger:#C42F46;--warning:#A35F00;--focus:#4B4FD8;--shadow-glass:0 30px 80px -30px rgba(40, 42, 120, 0.32);--shadow-glow:0 18px 44px -16px rgba(75, 79, 216, 0.7);--shadow-soft:0 6px 18px -10px rgba(20, 22, 58, 0.25);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-24:96px;--radius-sm:10px;--radius-md:16px;--radius-lg:24px;--radius-xl:36px;--radius-pill:999px;--font-sans:"Inter", "Inter Display", system-ui, -apple-system, "Segoe UI", sans-serif;color-scheme:light}
.lp[data-mode="dark"]{--surface:#0D0E26;--surface-raised:#17193F;--surface-sunken:#0A0B1F;--brand-night:#14163A;--glass:rgba(255, 255, 255, 0.06);--glass-strong:rgba(255, 255, 255, 0.10);--glass-stroke:rgba(255, 255, 255, 0.14);--ink:#F4F5FB;--ink-muted:#A9ADCF;--ink-subtle:#868AAE;--line:#262A5C;--primary:#8F8CF7;--on-primary:#0D0E26;--primary-soft:#25276B;--on-primary-soft:#CFCBFF;--periwinkle:#9C99F7;--lilac:#B8C2F8;--aqua:#8FE6F7;--blush:#9FDCF5;--glow-1:#3B3FC9;--glow-2:#5B3FC8;--glow-3:#1F4A86;--glow-4:#1F5A7A;--success:#4ED39A;--danger:#FF7A8C;--warning:#F3B54A;--focus:#8FE6F7;--shadow-glass:0 40px 100px -30px rgba(0, 0, 0, 0.6);--shadow-glow:0 18px 44px -14px rgba(143, 140, 247, 0.6);--shadow-soft:0 6px 18px -10px rgba(0, 0, 0, 0.6);color-scheme:dark}
/* Booqs component styles. Every colour, space and radius comes from tokens.css. */
:root{
  --bq-aurora: linear-gradient(125deg, var(--aqua) 0%, var(--periwinkle) 40%, var(--primary) 62%, var(--blush) 100%);
  --bq-aurora-text: linear-gradient(100deg, #4B4FD8 0%, #4A86EE 48%, #3FB4E6 100%);
  --bq-blur: 28px;
  --bq-ease: cubic-bezier(.22,1,.36,1);
}
.lp[data-mode="dark"]{ --bq-aurora-text: linear-gradient(100deg, #A9C8FF 0%, #B8C2F8 50%, #9FDCF5 100%); }

.bq{font-family:var(--font-sans);color:var(--ink);-webkit-font-smoothing:antialiased;font-optical-sizing:auto}
.bq *{box-sizing:border-box}

/* ambient light: blurred orbs that glass sits on */
.bq-ambient{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bq-orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.9}
.bq-orb.g1{background:var(--glow-1)} .bq-orb.g2{background:var(--glow-2)} .bq-orb.g3{background:var(--glow-3)} .bq-orb.g4{background:var(--glow-4)}
@media (prefers-reduced-motion: no-preference){
  .bq-orb.drift{animation:bq-drift 18s ease-in-out infinite alternate}
  .bq-orb.drift.b{animation-duration:23s;animation-delay:-6s}
}
@keyframes bq-drift{to{transform:translate(80px,-60px) scale(1.08)}}

/* glass */
.bq-glass{background:var(--glass);border:1px solid var(--glass-stroke);border-radius:var(--radius-lg);
  backdrop-filter:blur(var(--bq-blur)) saturate(140%);-webkit-backdrop-filter:blur(var(--bq-blur)) saturate(140%);
  box-shadow:var(--shadow-glass), inset 0 1px 0 var(--glass-stroke)}
.bq-glass.strong{background:var(--glass-strong)}
.bq-glass.xl{border-radius:var(--radius-xl)}

/* text helpers */
.bq-aurora-text{background:var(--bq-aurora-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.bq-muted{color:var(--ink-muted)} .bq-subtle{color:var(--ink-subtle)}
.bq-eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 14px/1 var(--font-sans);color:var(--ink-muted);
  padding:8px 14px 8px 10px;border-radius:var(--radius-pill)}
.bq-dot{width:10px;height:10px;border-radius:50%;background:var(--bq-aurora);box-shadow:0 0 12px var(--aqua);flex:none}

/* buttons */
.bq-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 var(--space-6);
  border-radius:var(--radius-pill);font:500 15px/1 var(--font-sans);letter-spacing:-.01em;border:1px solid transparent;
  cursor:pointer;text-decoration:none;transition:transform .2s var(--bq-ease),box-shadow .2s var(--bq-ease),background .2s}
.bq-btn:hover{transform:translateY(-1px)}
.bq-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.bq-btn.primary{background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-glow)}
.bq-btn.glass{background:var(--glass-strong);color:var(--ink);border-color:var(--glass-stroke);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.bq-btn.ghost{background:transparent;color:var(--ink)}
.bq-btn.ghost:hover{background:var(--primary-soft);color:var(--on-primary-soft)}
.bq-btn.sm{height:38px;padding:0 var(--space-4);font-size:14px}
.bq-btn.lg{height:56px;padding:0 28px;font-size:16px}
.bq-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* chips */
.bq-chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 var(--space-4);border-radius:var(--radius-pill);
  font:500 14px/1 var(--font-sans);color:var(--ink);background:var(--glass);border:1px solid var(--glass-stroke);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);white-space:nowrap}
.bq-chip.hot{background:var(--primary);color:var(--on-primary);border-color:transparent;box-shadow:var(--shadow-glow)}
.bq-chip.soft{background:var(--primary-soft);color:var(--on-primary-soft);border-color:transparent;backdrop-filter:none}

/* status pills */
.bq-status{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--radius-pill);
  font:600 12px/1 var(--font-sans);background:var(--surface-raised);border:1px solid var(--line)}
.bq-status.ok{color:var(--success)} .bq-status.miss{color:var(--danger)} .bq-status.warn{color:var(--warning)}

/* chat */
.bq-chat{display:flex;flex-direction:column;gap:10px}
.bq-bubble{max-width:82%;padding:12px 16px 9px;border-radius:var(--radius-lg);font:400 15px/1.35 var(--font-sans)}
.bq-bubble small{display:block;margin-top:4px;font-size:11px;opacity:.7}
.bq-bubble.in{align-self:flex-start;background:var(--surface-raised);color:var(--ink);border-bottom-left-radius:6px;box-shadow:var(--shadow-soft)}
.bq-bubble.out{align-self:flex-end;background:var(--primary);color:var(--on-primary);border-bottom-right-radius:6px;box-shadow:var(--shadow-glow)}
.bq-typing{align-self:flex-end;display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:var(--radius-pill);
  background:var(--glass-strong);border:1px solid var(--glass-stroke);font:500 12px/1 var(--font-sans);color:var(--ink-muted)}

/* stat tiles */
.bq-stat{padding:18px 20px;border-radius:var(--radius-md);background:var(--glass-strong);border:1px solid var(--glass-stroke)}
.bq-stat .l{font:500 13px/1.2 var(--font-sans);color:var(--ink-muted)}
.bq-stat .v{font:600 34px/1.1 var(--font-sans);letter-spacing:-.04em;margin-top:6px;font-variant-numeric:tabular-nums}
.bq-stat.key{background:var(--primary);border-color:transparent;box-shadow:var(--shadow-glow)}
.bq-stat.key .l,.bq-stat.key .v{color:var(--on-primary)}

/* theme toggle */
.bq-toggle{display:inline-flex;position:relative;padding:4px;border-radius:var(--radius-pill);background:var(--surface-sunken);border:1px solid var(--line)}
.bq-toggle button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border:0;background:none;
  border-radius:var(--radius-pill);font:500 13px/1 var(--font-sans);color:var(--ink-muted);cursor:pointer}
.bq-toggle button[aria-pressed="true"]{color:var(--ink)}
.bq-toggle button:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.bq-toggle .knob{position:absolute;top:4px;bottom:4px;left:4px;border-radius:var(--radius-pill);background:var(--surface-raised);
  box-shadow:var(--shadow-soft);transition:transform .35s var(--bq-ease),width .35s var(--bq-ease)}

/* the animated mark (motion system) */
.bq-mark{display:block;overflow:visible}
.bq-mark .ring-grad{transform-origin:60px 60px}
.bq-mark .dot{transform-origin:60px 60px;transform-box:view-box}
@media (prefers-reduced-motion: no-preference){
  .bq-mark.is-thinking .ring-grad{animation:bq-spin 3.2s linear infinite}
  .bq-mark.is-thinking .dot{animation:bq-breathe 1.4s var(--bq-ease) infinite}
  .bq-mark.is-intro .ring{animation:bq-ring-in 1.1s var(--bq-ease) both}
  .bq-mark.is-intro .dot{animation:bq-dot-in .7s .55s cubic-bezier(.34,1.56,.64,1) both}
  .bq-mark.is-booked .dot{animation:bq-booked 2.4s var(--bq-ease) infinite}
}
@keyframes bq-spin{to{transform:rotate(360deg)}}
@keyframes bq-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
@keyframes bq-ring-in{from{transform:scale(.6) rotate(-90deg);opacity:0}to{transform:none;opacity:1}}
@keyframes bq-dot-in{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes bq-booked{0%,60%,100%{transform:scale(1)}20%{transform:scale(1.6)}35%{transform:scale(.9)}}
.bq-mark .ring{transform-origin:60px 60px}

html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:#FFFFFF;font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
.lp{position:relative;overflow:clip;min-height:100vh;color:var(--ink);background:var(--clean-bg)}
.lp{--clean-bg:var(--surface-raised);--card-bg:var(--surface)}
.lp[data-mode="dark"]{--clean-bg:var(--surface);--card-bg:var(--surface-raised)}
.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding-inline:24px}
section{position:relative;padding-block:80px}
h1,h2,h3,p{margin:0}
.h-xl{font-size:84px;line-height:1;font-weight:500;letter-spacing:-.045em;text-wrap:balance}
.h-1{font-size:52px;line-height:1.06;font-weight:500;letter-spacing:-.038em;text-wrap:balance}
.h-2{font-size:22px;line-height:1.2;font-weight:600;letter-spacing:-.02em}
.lead{font-size:20px;line-height:1.5;color:var(--ink-muted);letter-spacing:-.01em;max-width:560px}
.body{font-size:16px;line-height:1.55;color:var(--ink-muted)}
.cap{font-size:12px;font-weight:500;color:var(--ink-subtle);letter-spacing:.02em}
a{color:inherit}

/* scroll progress */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--aqua),var(--periwinkle),var(--primary));z-index:50}

/* nav */
.nav{position:sticky;top:14px;z-index:30;margin:14px auto 0;max-width:1180px;display:flex;align-items:center;gap:24px;
  padding:10px 10px 10px 22px;border-radius:999px;transition:box-shadow .3s,background .3s,max-width .4s var(--bq-ease),padding .3s}
.nav.scrolled{max-width:1100px;background:var(--glass-strong);box-shadow:var(--shadow-glass)}
.nav .links{display:flex;gap:6px;margin-left:8px}
.nav .links a{font-size:14px;font-weight:500;color:var(--ink-muted);text-decoration:none;padding:8px 12px;border-radius:999px;transition:color .2s,background .2s}
.nav .links a:hover{color:var(--ink)}
.nav .links a.active{color:var(--ink);background:var(--primary-soft)}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav .brand{display:flex;align-items:center;color:var(--ink);text-decoration:none}
.burger{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--surface-raised);color:var(--ink);cursor:pointer;font-size:18px}
.mobile-menu{display:none}
.icon-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface-raised);color:var(--ink);display:grid;place-items:center;cursor:pointer;font-size:16px}
.icon-btn:focus-visible,.burger:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* hero */
.top{position:relative;overflow:hidden;background:var(--surface);margin-top:-76px;padding-top:76px}
.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(to bottom,transparent,var(--clean-bg));pointer-events:none}
.top .bq-ambient{will-change:transform}
.hero{padding-top:80px;padding-bottom:40px}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero .ctas{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.hero .ticks{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:32px;font-size:14px;color:var(--ink-muted)}
.hero .ticks span{display:inline-flex;align-items:center;gap:8px}
.tick{width:18px;height:18px;border-radius:50%;background:var(--primary-soft);color:var(--on-primary-soft);display:grid;place-items:center;font-size:11px;font-weight:700;font-style:normal}
.hero-word{display:inline-block}
.stage{position:relative;height:640px}
.phone{position:absolute;left:110px;top:0;width:340px;height:640px;padding:10px;border-radius:48px}
.screen{height:100%;border-radius:40px;background:var(--surface);overflow:hidden;display:flex;flex-direction:column}
.ph-head{display:flex;align-items:center;gap:12px;padding:44px 18px 14px;border-bottom:1px solid var(--line)}
.av{width:40px;height:40px;border-radius:50%;background:var(--primary-soft);color:var(--on-primary-soft);display:grid;place-items:center;font-weight:600}
.ph-name{font-weight:600;font-size:16px}
.ph-tag{align-self:flex-start;margin-top:4px;font:600 11px/1 var(--font-sans);padding:6px 9px;border-radius:999px;background:var(--primary-soft);color:var(--on-primary-soft);white-space:nowrap}
.ph-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.online{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--success);margin-right:5px;vertical-align:1px;box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 20%,transparent)} .ph-sub{font-size:12px;color:var(--ink-subtle)}
.screen .bq-chat{padding:18px 14px;flex:1;position:relative}
#heroTyping{position:absolute;right:14px;bottom:18px}
.chat-item{transition:opacity .45s var(--bq-ease),transform .45s var(--bq-ease)}
.chat-item.off{opacity:0;transform:translateY(10px) scale(.97)}
.float{position:absolute;padding:14px 16px;border-radius:var(--radius-lg);display:flex;align-items:center;gap:12px;font-size:14px;transition:opacity .5s,transform .5s var(--bq-ease)}
.float b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.float .ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:none}
.f1{right:-40px;top:-22px} .f2{left:-10px;top:540px} .f3{right:-40px;bottom:-14px}
.float.off{opacity:0;transform:translateY(12px)}
@media (prefers-reduced-motion: no-preference){
  .float.bob{animation:bob 6s ease-in-out infinite} .f2.bob{animation-delay:-2s} .f3.bob{animation-delay:-4s}
}
@keyframes bob{50%{transform:translateY(-8px)}}
.ic.ok{background:color-mix(in srgb,var(--success) 16%,transparent);color:var(--success)}
.ic.pri{background:var(--primary-soft);color:var(--on-primary-soft)}

/* industries: a chip cloud that pops in, bubble by bubble */
.strip{padding-block:28px 48px}
.strip .note{text-align:center;margin-bottom:22px}
.cloud{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:1080px;margin:0 auto}
.strip .bq-chip:not(.hot){background:var(--card-bg);border-color:var(--line);backdrop-filter:none}
.cloud .bq-chip.last{background:var(--ink);color:var(--clean-bg);border-color:transparent;font-weight:600;box-shadow:0 0 0 4px var(--primary-soft)}
.js .cloud .bq-chip{opacity:0;transform:scale(.55) translateY(8px)}
.js .cloud.go .bq-chip{animation:pop .5s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:var(--d,0s)}
@keyframes pop{to{opacity:1;transform:none}}
.js .cloud.done .bq-chip,.cloud.done .bq-chip{animation:none;opacity:1;transform:none;position:relative;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .25s,color .25s,box-shadow .3s,border-color .25s}
.cloud.done .bq-chip:hover{transform:scale(1.12);z-index:2;cursor:default;color:#FFFFFF;border-color:transparent;
  background:linear-gradient(120deg,var(--primary) 0%,var(--periwinkle) 60%,#5FB8E6 100%);box-shadow:var(--shadow-glow)}
@media (prefers-reduced-motion: reduce){.js .cloud .bq-chip{opacity:1;transform:none;animation:none!important}}
/* reveal on scroll (only once JS is running, so the page is complete without it) */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--bq-ease),transform .8s var(--bq-ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* cards */
.card{background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius-lg);transition:transform .35s var(--bq-ease),box-shadow .35s,border-color .35s}
.card.hov:hover{transform:translateY(-4px);box-shadow:var(--shadow-glass);border-color:transparent}
.card.xl{border-radius:var(--radius-xl)}
.card.tint{background:linear-gradient(160deg,var(--primary-soft) 0%,var(--card-bg) 55%)}
.soft-eye{background:var(--primary-soft);color:var(--on-primary-soft);border-radius:999px}

/* problem */
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.pain{padding:24px;display:flex;flex-direction:column;gap:12px;min-height:210px}
.pain .when{font-size:13px;font-weight:600;color:var(--primary)}
.pain .bq-status{margin-top:auto;align-self:flex-start}

/* how it works */
.howpanel{position:relative;overflow:hidden;border-radius:var(--radius-xl);padding:64px 56px;
  background:radial-gradient(120% 140% at 0% 0%,var(--glow-3) 0%,transparent 45%),radial-gradient(110% 120% at 100% 0%,var(--glow-2) 0%,transparent 50%),
   radial-gradient(90% 120% at 70% 110%,var(--glow-4) 0%,transparent 55%),radial-gradient(80% 100% at 30% 100%,var(--glow-1) 0%,transparent 60%),var(--surface)}
.lp[data-mode="dark"] .howpanel{background:radial-gradient(120% 140% at 0% 0%,#163A6E 0%,transparent 45%),radial-gradient(110% 120% at 100% 0%,#3A2C8C 0%,transparent 50%),
   radial-gradient(90% 120% at 70% 110%,#4A2466 0%,transparent 55%),radial-gradient(80% 100% at 30% 100%,#2B2FA8 0%,transparent 60%),#0D0E26}
.howpanel > .bq-orb{position:absolute;filter:blur(70px);opacity:.8}
.howpanel > *:not(.bq-orb){position:relative;z-index:1}
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.rail{position:absolute;left:24px;right:24px;top:-18px;height:3px;border-radius:3px;background:var(--glass-strong)}
.rail i{position:absolute;inset:0;border-radius:3px;background:linear-gradient(90deg,var(--aqua),var(--primary));transform-origin:0 50%;transform:scaleX(0)}
.step{padding:24px;display:flex;flex-direction:column;gap:10px;transition:transform .4s var(--bq-ease),box-shadow .4s}
.step .n{font:600 13px/1 var(--font-sans);color:var(--ink-subtle);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:8px}
.step .n i{width:10px;height:10px;border-radius:50%;background:var(--line);transition:background .4s,box-shadow .4s}
.step.lit .n i{background:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)}
.step.lit{transform:translateY(-4px)}
.step .q{margin-top:8px;padding:10px 12px;border-radius:14px;background:var(--glass-strong);border:1px solid var(--glass-stroke);font-size:13px;color:var(--ink-muted)}

/* features */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(200px,auto);gap:16px;margin-top:48px}
.feat{padding:24px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.feat.big{grid-column:span 2;grid-row:span 2}
.feat .ficon{width:40px;height:40px;border-radius:12px;background:var(--primary-soft);color:var(--on-primary-soft);display:grid;place-items:center;font-size:18px;margin-bottom:6px}
.slots{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.slot{display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:var(--radius-md);background:var(--clean-bg);border:1px solid var(--line);font-size:15px;transition:all .5s var(--bq-ease)}
.slot .t{font-weight:600;width:56px;font-variant-numeric:tabular-nums}
.slot .w{flex:1;color:var(--ink-muted);position:relative}
.slot .w s{text-decoration:none;position:relative}
.slot .w s::after{content:"";position:absolute;left:0;right:0;top:52%;height:2px;background:var(--danger);transform:scaleX(var(--strike,0));transform-origin:0 50%;transition:transform .5s var(--bq-ease)}
.slot.fill{border-color:transparent;background:var(--primary-soft)}
.slot.fill .w{color:var(--on-primary-soft);font-weight:500}
.arrow{font-size:13px;color:var(--ink-muted);padding-left:18px;display:flex;align-items:center;gap:8px;transition:opacity .5s,transform .5s var(--bq-ease)}
.demo-off{opacity:0;transform:translateY(8px)}
.replay{align-self:flex-start;margin-top:14px;font:500 13px/1 var(--font-sans);color:var(--primary);background:none;border:0;cursor:pointer;padding:6px 0}
.replay:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}

/* dashboard */
.dash{margin-top:48px;padding:24px;display:grid;grid-template-columns:200px 1fr;gap:24px;min-height:430px}
.side{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--ink-muted);padding:8px}
.side button{all:unset;cursor:pointer;padding:10px 12px;border-radius:12px;display:flex;align-items:center;gap:10px;transition:background .2s,color .2s}
.side button:hover{color:var(--ink)}
.side button[aria-selected="true"]{color:var(--ink);font-weight:600;background:var(--clean-bg);box-shadow:var(--shadow-soft)}
.side button:focus-visible{outline:2px solid var(--focus)}
.view[hidden]{display:none!important}
.view{animation:fade .4s var(--bq-ease)}
@keyframes fade{from{opacity:0;transform:translateY(6px)}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.dash .bq-stat{background:var(--clean-bg);border-color:var(--line)}
.dash .bq-stat.key{background:var(--primary);border-color:transparent}
.today{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.tr{display:flex;align-items:center;gap:16px;padding:12px 16px;border-radius:var(--radius-md);background:var(--clean-bg);border:1px solid var(--line);font-size:14px}
.tr .t{font-weight:600;width:70px;font-variant-numeric:tabular-nums} .tr .w{flex:1;color:var(--ink-muted)}
.cal{display:grid;grid-template-columns:56px repeat(5,1fr);gap:6px;font-size:12px}
.cal .hd{font-weight:600;color:var(--ink-muted);padding:6px 4px;text-align:center}
.cal .hr{color:var(--ink-subtle);padding-top:6px;font-variant-numeric:tabular-nums}
.cal .c{min-height:44px;border-radius:10px;background:var(--clean-bg);border:1px dashed var(--line)}
.cal .b{border:0;padding:6px 8px;color:var(--on-primary-soft);background:var(--primary-soft);font-weight:500;line-height:1.3}
.cal .b.ai{background:var(--primary);color:var(--on-primary)}
.chats{display:flex;flex-direction:column;gap:8px}
.chatrow{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:var(--radius-md);background:var(--clean-bg);border:1px solid var(--line);font-size:14px}
.chatrow .w{flex:1;min-width:0} .chatrow .w b{display:block;font-weight:600} .chatrow .w span{color:var(--ink-muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* faq */
.faq{max-width:820px;margin:40px auto 0;display:flex;flex-direction:column;gap:10px}
.qa{border-radius:var(--radius-lg);background:var(--card-bg);border:1px solid var(--line);overflow:hidden}
.qa button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;font:600 17px/1.3 var(--font-sans);letter-spacing:-.01em}
.qa button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:var(--radius-lg)}
.qa .pm{width:28px;height:28px;border-radius:50%;background:var(--primary-soft);color:var(--on-primary-soft);display:grid;place-items:center;flex:none;transition:transform .35s var(--bq-ease)}
.qa[data-open="true"] .pm{transform:rotate(45deg)}
.qa .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--bq-ease)}
.qa[data-open="true"] .ans{grid-template-rows:1fr}
.qa .ans > div{overflow:hidden}
.qa .ans p{padding:0 24px 22px;color:var(--ink-muted);font-size:15px;line-height:1.6}

/* cta band */
.band{margin-top:24px;border-radius:var(--radius-xl);background:var(--brand-night);color:#F4F5FB;padding:72px;position:relative;overflow:hidden;display:grid;grid-template-columns:1.3fr .7fr;align-items:center;gap:32px}
.band .bq-orb{filter:blur(80px)}
.band .inner,.band .bigmark{position:relative;z-index:1}
.band .bigmark{justify-self:center;width:260px;height:300px;perspective:900px;display:grid;place-items:center}
/* 3D mark: stacked one-colour layers give it thickness, the aura mark is the face */
.mark3d{position:relative;width:220px;height:220px;transform-style:preserve-3d}
.mark3d .pulse{position:absolute;inset:0;transform-style:preserve-3d}
.mark3d .layer{position:absolute;inset:0}
.mark3d .layer svg{display:block;width:220px;height:220px}
.mark3d .face{filter:drop-shadow(0 0 22px rgba(111,149,240,.45))}
.bigmark .floor{position:absolute;bottom:6px;left:50%;width:170px;height:22px;margin-left:-85px;border-radius:50%;background:radial-gradient(closest-side,rgba(122,120,240,.6),rgba(122,120,240,0));filter:blur(4px)}
@media (prefers-reduced-motion: no-preference){
  .mark3d{animation:bq-turn 9s cubic-bezier(.45,0,.55,1) infinite alternate,bq-float 4.6s cubic-bezier(.45,0,.55,1) infinite alternate}
  .bigmark .floor{animation:bq-floor 4.6s cubic-bezier(.45,0,.55,1) infinite alternate}
}
@media (prefers-reduced-motion: reduce){.mark3d{transform:rotateX(10deg) rotateY(-20deg)}}
@keyframes bq-turn{0%{transform:rotateX(14deg) rotateY(-34deg) rotateZ(-3deg)}100%{transform:rotateX(6deg) rotateY(34deg) rotateZ(3deg)}}
@keyframes bq-float{0%{translate:0 -10px}100%{translate:0 10px}}
@keyframes bq-floor{0%{transform:scaleX(.78);opacity:.55}100%{transform:scaleX(1);opacity:1}}
.band .bq-btn.glass{background:rgba(255,255,255,.1);color:#F4F5FB;border-color:rgba(255,255,255,.18)}
footer{padding-block:32px;display:flex;align-items:center;gap:24px;font-size:13px;color:var(--ink-subtle);border-top:1px solid var(--line);margin-top:48px;flex-wrap:wrap}
footer .sp{margin-left:auto;display:flex;gap:24px}
footer a{text-decoration:none} footer a:hover{color:var(--ink)}

/* modals */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(10,11,31,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s}
.modal.open{opacity:1;pointer-events:auto}
.sheet{position:relative;width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;border-radius:var(--radius-xl);padding:32px;background:var(--clean-bg);box-shadow:0 40px 120px -30px rgba(0,0,0,.5);transform:translateY(16px) scale(.98);transition:transform .4s var(--bq-ease)}
.modal.open .sheet{transform:none}
.sheet.video{width:min(960px,100%);padding:0;background:#000;overflow:hidden}
.sheet.video video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000}
.close{position:absolute;top:14px;right:14px;z-index:2}
.form{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font:500 13px/1 var(--font-sans);color:var(--ink-muted)}
.field input,.field select{font:400 15px/1.2 var(--font-sans);color:var(--ink);background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px 14px;outline:none;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)}
.field .err{font-size:12px;color:var(--danger);min-height:14px}
.field.bad input,.field.bad select{border-color:var(--danger)}
.done{text-align:center;padding:12px 0}
.done .ok{width:64px;height:64px;border-radius:50%;background:color-mix(in srgb,var(--success) 14%,transparent);color:var(--success);display:grid;place-items:center;font-size:28px;margin:6px auto 16px}

/* compare logos bar */
.cmpbar{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:10px;padding:6px 6px 6px 18px;border-radius:999px;max-width:calc(100vw - 32px);box-sizing:border-box;transition:transform .4s var(--bq-ease),opacity .3s}
.cmpbar.hide{transform:translate(-50%,120px);opacity:0}
.cmplab{font:600 12px/1 var(--font-sans);color:var(--ink-muted);white-space:nowrap}
.cmp{display:flex;gap:2px}
.cmp button{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 8px;border:0;border-radius:999px;background:transparent;color:var(--ink-muted);font:500 13px/1 var(--font-sans);cursor:pointer;white-space:nowrap}
.cmp button b{font-weight:700;color:var(--ink)}
.cmp button[aria-pressed="true"]{background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-glow)}
.cmp button[aria-pressed="true"] b{color:var(--on-primary)}
.cmp button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

@media (max-width:1000px){
  .nav .links,.nav .bq-toggle,.nav .cta-desk{display:none}
  .burger{display:grid;place-items:center}
  .mobile-menu{display:flex;flex-direction:column;gap:4px;position:fixed;top:78px;left:16px;right:16px;z-index:29;padding:12px;border-radius:24px;transform:translateY(-12px);opacity:0;pointer-events:none;transition:all .3s var(--bq-ease)}
  .mobile-menu.open{transform:none;opacity:1;pointer-events:auto}
  .mobile-menu a{padding:14px 16px;border-radius:14px;text-decoration:none;font-weight:500}
  .mobile-menu a:hover{background:var(--primary-soft)}
  .mobile-menu .row{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 6px 4px}
  .hero .grid,.two,.dash{grid-template-columns:1fr}
  .cards3,.steps{grid-template-columns:1fr 1fr} .rail{display:none}
  .bento{grid-template-columns:1fr} .feat.big{grid-column:auto;grid-row:auto}
  .h-xl{font-size:56px} .h-1{font-size:38px}
  .stage{height:620px;max-width:420px;margin:0 auto;width:100%}
  .phone{left:50%;transform:translateX(-50%)}
  .f1,.f3{right:-6px} .f2{left:-6px}
  .band{grid-template-columns:1fr;padding:40px}
  .band .bigmark{width:200px;height:220px} .band .mark3d{scale:.7}
  .howpanel{padding:40px 24px}
  .side{flex-direction:row;flex-wrap:wrap}
}
@media (max-width:640px){
  .wrap{padding-inline:16px}
  .nav{margin:12px 16px 0;padding-left:16px}
  .cards3,.steps,.stats{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .h-xl{font-size:44px} .h-1{font-size:32px} .lead{font-size:18px}
  .f1,.f2,.f3{display:none}
  .cal{grid-template-columns:44px repeat(3,1fr)} .cal .x{display:none}
  .cmplab{display:none} .cmp button span{display:none} .cmp button{padding:0 10px}
  section{padding-block:56px}
}


/* Always on: week view of team hours vs Booqs */
.always{padding:48px;display:flex;flex-direction:column;gap:36px}
.al-head{display:grid;grid-template-columns:1.4fr .6fr;gap:40px;align-items:end}
.hours .big{font:600 84px/1 var(--font-sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums;background:var(--bq-aurora-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.hours .big small{font-size:34px;letter-spacing:-.03em}
.hours .body{margin-top:8px}
.week{display:flex;flex-direction:column;gap:12px}
.wk-row{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center}
.wk-row .who{font:600 14px/1.2 var(--font-sans);color:var(--ink-muted);display:flex;align-items:center}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.lab .days span{font:600 12px/1 var(--font-sans);color:var(--ink-subtle);text-align:center}
.days.ticks{grid-template-columns:repeat(4,1fr) 0;width:calc(100%/7)}
.days.ticks span{text-align:left;font-weight:500;font-size:10px}
.seg{position:relative;height:40px;border-radius:12px;background:var(--surface-sunken);overflow:hidden}
.seg i{position:absolute;top:6px;bottom:6px;border-radius:8px;background:var(--line)}
.seg.off{display:grid;place-items:center;font:600 11px/1 var(--font-sans);color:var(--ink-subtle);background:repeating-linear-gradient(135deg,var(--surface-sunken) 0 8px,transparent 8px 16px)}
.seg.on i{left:4px;right:4px;background:linear-gradient(90deg,var(--aqua),var(--periwinkle) 45%,var(--primary));box-shadow:0 6px 18px -8px var(--primary);transform-origin:0 50%;transform:scaleX(1)}
.js .week:not(.go) .seg.on i{transform:scaleX(0)}
.week.go .seg.on i{transition:transform .9s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0s)}
.moments{display:flex;flex-wrap:wrap;gap:10px}
.moments .bq-chip{background:var(--clean-bg);border-color:var(--line);backdrop-filter:none;font-weight:400}
.moments .bq-chip b{font-weight:600;margin-right:4px}
.moments .bq-chip.hot{background:var(--primary);color:var(--on-primary);border-color:transparent}
@media (max-width:1000px){.always .cap{margin-left:0!important}.al-head{grid-template-columns:1fr}.always{padding:28px}.wk-row{grid-template-columns:1fr}.hours .big{font-size:64px}}
.bq-chat .photo{display:block;width:150px;height:96px;border-radius:14px;margin:-4px -6px 8px;background:radial-gradient(60% 80% at 30% 30%,#F4D1B5,transparent 70%),radial-gradient(70% 90% at 70% 70%,#B9875F,transparent 70%),linear-gradient(135deg,#E8C7A6,#8C5E3C)}

/* How it works: no background panel, flat cards like the rest of the page */
.howpanel,.lp[data-mode="dark"] .howpanel{background:none!important;padding:0!important;border-radius:0;overflow:visible}
.howpanel > .bq-orb{display:none}
.howpanel .step.bq-glass{background:var(--card-bg);border:1px solid var(--line);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.howpanel .step.lit{box-shadow:var(--shadow-glass);border-color:transparent}
.howpanel .step .q{background:var(--clean-bg);border-color:var(--line)}
.howpanel .bq-eyebrow.bq-glass{background:var(--primary-soft);color:var(--on-primary-soft);border:0;box-shadow:none;backdrop-filter:none}
.rail{background:var(--line)}

/* ===== cleaner pass: colour only where it means something ===== */
.bq-aurora-text:not(.hero-word){background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--ink-subtle)}
.soft-eye{background:none!important;color:var(--ink-muted)!important;padding-left:0!important;border:0}
.bq-eyebrow.bq-glass:not(.hero .bq-eyebrow){background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding-left:0;color:var(--ink-muted)}
.nav .links a.active{background:none;color:var(--ink);font-weight:600}
.bq-btn.primary{box-shadow:0 10px 24px -14px rgba(75,79,216,.55)}
.cloud .bq-chip.hot,.moments .bq-chip.hot{background:var(--card-bg);color:var(--ink);border-color:var(--line);box-shadow:none}
.cloud .bq-chip.hot::before,.moments .bq-chip.hot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--primary);flex:none}
.card.tint{background:var(--card-bg)}
.feat .bq-chip.soft{background:none;padding:0;height:auto;color:var(--primary);font-weight:600;border:0}
.ficon{background:var(--clean-bg)!important;border:1px solid var(--line);color:var(--ink)!important}
.slot.fill{background:var(--clean-bg);border:1px solid var(--line)}
.slot.fill .w{color:var(--ink)}
.dash .bq-stat.key{background:var(--clean-bg);border-color:var(--line);box-shadow:none}
.dash .bq-stat.key .l{color:var(--ink-muted)} .dash .bq-stat.key .v{color:var(--primary)}
.tr .bq-chip.soft{background:none;color:var(--ink-subtle);font-weight:500;padding:0;border:0}
.cal .b{background:var(--clean-bg);border:1px solid var(--line);color:var(--ink-muted)}
.cal .b.ai{background:var(--clean-bg);color:var(--ink);border-color:var(--line)}
.cal .b.ai::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--primary);margin-right:6px;vertical-align:1px}
.qa .pm{background:none;color:var(--ink-muted);border:1px solid var(--line)}
.seg.on i{top:15px;bottom:15px;box-shadow:none}
.side button[aria-selected="true"]{box-shadow:none;border:1px solid var(--line)}


/* ===== open layout: white page, no section boxes ===== */
.always.card{background:none;border:0;padding:0;border-radius:0;box-shadow:none}
.pain.card,.howpanel .step.bq-glass,.step.bq-glass,.feat.card{background:none!important;border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;box-shadow:none!important;padding:28px 0 0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;min-height:0}
.card.hov:hover{transform:none;box-shadow:none;border-color:var(--line)}
.step.lit,.howpanel .step.lit{transform:none;box-shadow:none!important;border-top-color:var(--ink)!important}
.rail{display:none}
.steps,.cards3{gap:40px}
.bento{gap:48px 40px;grid-auto-rows:auto}
.feat.big{padding-right:40px!important}
.feat.big .slots{max-width:620px}
.feat .ficon{margin-bottom:2px}
.qa{background:none!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important}
.faq .qa:first-child{border-top:1px solid var(--line)!important}
.qa button{padding:24px 0!important}
.qa .ans p{padding:0 48px 24px 0!important}
.dash.card{background:var(--clean-bg);border-color:var(--line);box-shadow:0 40px 90px -50px rgba(20,22,58,.25)}
.lp[data-mode="dark"] .dash.card{box-shadow:0 40px 90px -50px rgba(0,0,0,.7)}

/* ===== section rhythm: alternating full-width bands ===== */
.lp{--band:#F7F8FA}
.lp[data-mode="dark"]{--band:#12143A}
#problem,#always,#how,#features,#dashboard,#faq{padding-block:104px!important}
#always,#features,#faq{background:var(--band)}
#always .moments .bq-chip,#faq .qa{background:transparent}
#always .moments .bq-chip{background:var(--clean-bg)}
.feat.card{background:var(--clean-bg)!important;border:1px solid var(--line)!important;border-radius:var(--radius-lg)!important;padding:28px!important}
.feat.big.card{border-radius:var(--radius-xl)!important;padding:36px!important}
.lp[data-mode="dark"] .feat.card{background:var(--surface-raised)!important}
#faq .faq{background:var(--clean-bg);border-radius:var(--radius-xl);padding:8px 32px;border:1px solid var(--line)}
#faq .qa:first-child{border-top:0!important} #faq .qa:last-child{border-bottom:0!important}
.lp[data-mode="dark"] #faq .faq{background:var(--surface-raised)}
#faq .band{margin-top:96px!important}

/* ===== calmer hero ===== */
.hero{padding-top:96px!important;padding-bottom:72px!important}
.hero .grid{grid-template-columns:1fr .85fr!important;gap:96px!important}
.hero .h-xl{font-size:76px}
.hero .lead{max-width:500px;font-size:19px}
.hero .ctas{margin-top:36px}
.hero .ticks{margin-top:28px;gap:10px 22px;font-size:13.5px}
.hero .ticks span:nth-child(3){display:none}
.stage{height:600px}
.phone{transform:scale(.92);transform-origin:50% 0;left:60px!important}
.float.f3{display:none!important}
.float{padding:12px 14px;gap:10px;font-size:13px}
.float b{font-size:14px}
.float .ic{width:32px;height:32px;border-radius:10px}
.f1{right:-56px!important;top:-38px!important}
.f2{left:-40px!important;top:auto!important;bottom:48px}
.cmpbar{padding:5px 5px 5px 14px;gap:6px}
.cmplab{font-size:11px}
.cmp button{height:34px;padding:0 9px}
.cmp button span{display:none}
.cmp button:hover span,.cmp button:focus-visible span{display:inline}
@media (max-width:1000px){.hero .grid{grid-template-columns:1fr!important;gap:48px!important}.phone{left:50%!important;transform:translateX(-50%) scale(.92)}}

/* shorter hero copy */
.hero .ticks{display:none!important}
.hero .lead{max-width:440px}
.hero .ctas{margin-top:32px}

/* glass nav bar */
.nav.bq-glass,.nav.bq-glass.strong{background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,.18))!important;
  border:1px solid rgba(255,255,255,.7)!important;backdrop-filter:blur(24px) saturate(180%)!important;-webkit-backdrop-filter:blur(24px) saturate(180%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 30px -18px rgba(20,22,58,.25)!important}
.nav.scrolled{background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.38))!important}
.lp[data-mode="dark"] .nav.bq-glass{background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.03))!important;border-color:rgba(255,255,255,.14)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 30px -18px rgba(0,0,0,.6)!important}
.lp[data-mode="dark"] .nav.scrolled{background:linear-gradient(135deg,rgba(23,25,63,.7),rgba(13,14,38,.55))!important}
.nav .bq-toggle{background:rgba(255,255,255,.35);border-color:rgba(255,255,255,.6)}
.lp[data-mode="dark"] .nav .bq-toggle{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}

/* nav: blends into the hero at the top, turns into frosted glass once you scroll */
.nav.bq-glass,.nav.bq-glass.strong{background:rgba(255,255,255,0)!important;border-color:rgba(255,255,255,0)!important;box-shadow:none!important;
  -webkit-backdrop-filter:blur(0px) saturate(100%)!important;backdrop-filter:blur(0px) saturate(100%)!important;
  transition:background-color .45s ease,border-color .45s ease,box-shadow .45s ease,backdrop-filter .45s ease,-webkit-backdrop-filter .45s ease,max-width .55s cubic-bezier(.22,1,.36,1),padding .45s ease}
.nav.bq-glass.scrolled,.nav.bq-glass.strong.scrolled{background:rgba(255,255,255,.55)!important;border-color:rgba(255,255,255,.8)!important;
  -webkit-backdrop-filter:blur(24px) saturate(180%)!important;backdrop-filter:blur(24px) saturate(180%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 32px -18px rgba(20,22,58,.28)!important;max-width:1100px}
.lp[data-mode="dark"] .nav.bq-glass{background:rgba(13,14,38,0)!important;border-color:rgba(255,255,255,0)!important}
.lp[data-mode="dark"] .nav.bq-glass.scrolled{background:rgba(23,25,63,.55)!important;border-color:rgba(255,255,255,.14)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 12px 32px -18px rgba(0,0,0,.6)!important}
.nav:not(.scrolled) .bq-toggle{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.45)}
.lp[data-mode="dark"] .nav:not(.scrolled) .bq-toggle{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}

.lp{display:flow-root}

/* wavy, slowly moving hero background */
.top .waves{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;filter:blur(32px);opacity:1}
.top .bq-ambient{opacity:.35}

/* hero buttons: white primary, glass secondary */
.hero .ctas .bq-btn.primary{background:#FFFFFF;color:#14163A;border:1px solid rgba(255,255,255,.9);box-shadow:0 14px 34px -16px rgba(20,22,58,.35),inset 0 1px 0 #fff}
.hero .ctas .bq-btn.primary:hover{box-shadow:0 18px 40px -16px rgba(20,22,58,.42)}
.hero .ctas .bq-btn.glass{background:linear-gradient(135deg,rgba(255,255,255,.38),rgba(255,255,255,.14));color:var(--ink);border:1px solid rgba(255,255,255,.75);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 28px -18px rgba(20,22,58,.3)}
.lp[data-mode="dark"] .hero .ctas .bq-btn.glass{background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04));color:#F4F5FB;border-color:rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}

/* no small tags above section headings */
#always .bq-eyebrow,#how .bq-eyebrow,#features .feat.big > .bq-chip.soft{display:none!important}
#always .h-1,#how .h-1{margin-top:0!important}

/* wider, shorter chat window in the hero */
.stage{height:540px!important}
.phone{width:460px!important;height:520px!important;transform:none!important;left:20px!important;top:10px!important;border-radius:40px!important}
.phone .screen{border-radius:32px!important}
.phone .ph-head{padding:22px 20px 14px!important}
.screen .bq-chat{padding:16px 18px!important}
.screen .bq-bubble{max-width:74%}
.f1{right:-50px!important;top:-26px!important}
.f2{left:-56px!important;bottom:22px!important}
@media (max-width:1000px){.phone{left:50%!important;transform:translateX(-50%)!important;width:min(460px,92vw)!important}.stage{max-width:520px!important}}

/* aligned, proportional hero */
.nav:not(.scrolled){padding-left:24px!important;padding-right:24px!important}
.hero{padding-top:84px!important;padding-bottom:96px!important}
.hero .grid{grid-template-columns:1fr 1fr!important;gap:64px!important;align-items:center!important}
.hero .grid > div:first-child{align-self:center}
.stage{width:100%;height:540px!important}
.phone{left:auto!important;right:0!important;top:10px!important}
.f1{right:28px!important;top:-26px!important}
.f2{left:24px!important;right:auto!important;bottom:30px!important}
@media (max-width:1000px){.phone{right:auto!important;left:50%!important}.f2{left:-6px!important}}

/* chat window nudged left so the top card can hang off its right edge; text a little lower */
.phone{right:64px!important}
.f1{right:0!important;top:-30px!important}
.f2{left:-4px!important}
.hero .grid > div:first-child{margin-top:56px}
@media (max-width:1000px){.hero .grid > div:first-child{margin-top:0}}

.f2{left:-28px!important;bottom:-18px!important}

/* industry bubbles: glass, always gently floating */
.strip{position:relative;overflow:hidden}
.strip::before,.strip::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0}
.strip::before{width:620px;height:320px;left:12%;top:60px;background:var(--glow-3);opacity:.9}
.strip::after{width:680px;height:340px;right:10%;top:110px;background:var(--glow-2);opacity:.9}
.strip > *{position:relative;z-index:1}
.strip .cloud::before{content:"";position:absolute;width:520px;height:260px;left:50%;top:50%;margin:-130px 0 0 -260px;border-radius:50%;background:var(--glow-1);filter:blur(70px);opacity:.8;z-index:-1}
.cloud{position:relative}
.cloud .bq-chip,.cloud .bq-chip.hot,.strip .bq-chip:not(.hot){background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.22))!important;color:var(--ink)!important;
  border:1px solid rgba(255,255,255,.85)!important;backdrop-filter:blur(14px) saturate(170%)!important;-webkit-backdrop-filter:blur(14px) saturate(170%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 20px -14px rgba(20,22,58,.3)!important}
.cloud .bq-chip.hot{font-weight:600}
.cloud .bq-chip.hot::before{display:none!important}
.cloud .bq-chip.last{background:#14163A!important;color:#fff!important;border-color:transparent!important}
.lp[data-mode="dark"] .cloud .bq-chip:not(.last){background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04))!important;border-color:rgba(255,255,255,.16)!important;color:#F4F5FB!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)!important}
.lp[data-mode="dark"] .cloud .bq-chip.last{background:#F4F5FB!important;color:#14163A!important}
.cloud.done .bq-chip:hover{background:linear-gradient(120deg,var(--primary) 0%,var(--periwinkle) 60%,#5FB8E6 100%)!important;color:#fff!important;border-color:transparent!important}
@media (prefers-reduced-motion: no-preference){
  .cloud .bq-chip{animation-name:pop,chipfloat!important}
  .js .cloud.go .bq-chip{animation:pop .5s cubic-bezier(.34,1.56,.64,1) forwards var(--d,0s),chipfloat var(--fd,5s) ease-in-out var(--fdl,0s) infinite alternate}
  .cloud.done .bq-chip,.js .cloud.done .bq-chip{animation:chipfloat var(--fd,5s) ease-in-out var(--fdl,0s) infinite alternate;opacity:1}
  .cloud:not(.go) .bq-chip{animation:chipfloat var(--fd,5s) ease-in-out var(--fdl,0s) infinite alternate}
}
@keyframes chipfloat{0%{translate:0 -5px}100%{translate:0 5px}}

.cloudh{font-size:clamp(26px,3vw,36px);font-weight:500;letter-spacing:-.035em;line-height:1.15;color:var(--ink);text-align:center;margin:0 0 28px}

/* hover: no colour, half the grow, faint shadow */
.cloud.done .bq-chip:hover,.cloud .bq-chip:hover{transform:scale(1.06)!important;background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.28))!important;color:var(--ink)!important;border-color:rgba(255,255,255,.9)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 22px -12px rgba(20,22,58,.22)!important}
.cloud .bq-chip.last:hover{background:#14163A!important;color:#fff!important;border-color:transparent!important}
.lp[data-mode="dark"] .cloud .bq-chip:not(.last):hover{background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.06))!important;color:#F4F5FB!important;border-color:rgba(255,255,255,.2)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 22px -12px rgba(0,0,0,.5)!important}
.lp[data-mode="dark"] .cloud .bq-chip.last:hover{background:#F4F5FB!important;color:#14163A!important}

/* pop, don't float: chips swap names with a pop */
.cloud .bq-chip,.cloud.done .bq-chip,.js .cloud.done .bq-chip,.cloud:not(.go) .bq-chip{translate:none}
@media (prefers-reduced-motion: no-preference){
  .js .cloud.go .bq-chip{animation:pop .5s cubic-bezier(.34,1.56,.64,1) forwards var(--d,0s)!important}
  .cloud.done .bq-chip,.js .cloud.done .bq-chip{animation:none!important;opacity:1}
  .js .cloud:not(.go) .bq-chip{animation:none!important;opacity:0;transform:scale(.55) translateY(8px)}
}
.cloud.done .bq-chip.sw-out{transition:transform .22s cubic-bezier(.55,0,.75,.2),opacity .2s!important;transform:scale(.4)!important;opacity:0!important}
.cloud.done .bq-chip.sw-in{animation:popin .45s cubic-bezier(.34,1.56,.64,1) both!important}
@keyframes popin{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}

.cloud .bq-chip{box-sizing:border-box;justify-content:center;text-align:center;white-space:nowrap}
.cloud .bq-chip.meas{animation:none!important;transform:none!important}

#problem .pb-head{text-align:center;max-width:760px;margin:0 auto 44px}
#problem .pb-head .h-1{margin:0 0 14px}
#problem .pb-head .lead{margin:0 auto;max-width:none}
#problem .pain .body{margin-bottom:0}
#problem .pain .pb-ic{margin-bottom:14px}#problem .pain .h-2{margin-top:0}

#problem .pb-ic{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;margin-bottom:18px;color:var(--primary);
  background:linear-gradient(135deg,rgba(75,79,216,.10),rgba(111,149,240,.06));border:1px solid rgba(75,79,216,.12)}
.lp[data-mode="dark"] #problem .pb-ic{background:rgba(111,149,240,.12);border-color:rgba(111,149,240,.22)}

#problem .pain,#problem .pain.card{border:0!important;border-top:0!important;box-shadow:none!important;background:none!important;padding-top:0!important}
#problem .pain::before,#problem .pain::after{display:none!important}
#problem .cards3{text-align:center}
#problem .pain .h-2{font-size:24px;margin:0 0 8px}#problem .pain .body{text-wrap:balance}

#problem .pb-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left}
#problem .pb-card{background:#F7F8FA;border-radius:24px;padding:32px 30px 28px;display:flex;flex-direction:column;align-items:flex-start;min-height:210px}
#problem .pb-card h3{font-size:26px;font-weight:500;letter-spacing:-.03em;line-height:1.15;color:var(--ink);margin:0 0 10px}
#problem .pb-card p{font-size:16px;line-height:1.5;color:var(--ink-muted,#5A5E7A);margin:0 0 24px;text-wrap:balance}
#problem .pb-done{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--ink);background:#fff;border-radius:999px;padding:7px 14px 7px 12px;box-shadow:0 1px 0 rgba(20,22,58,.04),0 0 0 1px rgba(20,22,58,.06)}
#problem .pb-done::before{content:"";width:7px;height:7px;border-radius:50%;background:#22B07D;box-shadow:0 0 0 3px rgba(34,176,125,.15)}
.lp[data-mode="dark"] #problem .pb-card{background:rgba(255,255,255,.05)}
.lp[data-mode="dark"] #problem .pb-done{background:rgba(255,255,255,.08);color:#F4F5FB;box-shadow:none}
@media (max-width:820px){#problem .pb-cards{grid-template-columns:1fr}#problem .pb-card{min-height:0}}

/* glass cards on soft glow */
#problem{position:relative;overflow:hidden}
#problem .pb-cards{position:relative;isolation:isolate}
#problem .pb-cards::before,#problem .pb-cards::after{content:"";position:absolute;border-radius:50%;filter:blur(60px);z-index:-1;pointer-events:none}
#problem .pb-cards::before{width:46%;height:120%;left:4%;top:-10%;background:var(--glow-3);opacity:.85}
#problem .pb-cards::after{width:50%;height:120%;right:2%;top:-5%;background:var(--glow-2);opacity:.85}
#problem .pb-card{background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.28))!important;border:1px solid rgba(255,255,255,.9);
  backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 18px 40px -26px rgba(20,22,58,.28)}
#problem .pb-done{background:rgba(255,255,255,.7);box-shadow:0 0 0 1px rgba(255,255,255,.9)}
.lp[data-mode="dark"] #problem .pb-card{background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.03))!important;border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}

#problem .pb-cards::before,#problem .pb-cards::after{display:none}

#problem .pb-card{border-color:rgba(20,22,58,.07);box-shadow:inset 0 1px 0 #fff,0 20px 44px -28px rgba(20,22,58,.30)}
#problem .pb-done{background:#F7F8FA;box-shadow:none}
.lp[data-mode="dark"] #problem .pb-done{background:rgba(255,255,255,.08)}

#problem .pb-card{min-height:0;padding:30px 30px 32px}
#problem .pb-card p{margin:0}

#problem .pb-head{max-width:960px}

/* 24/7: centred header + schedule only */
#always .al-head{display:block!important;text-align:center;max-width:760px;margin:0 auto 48px}
#always .al-head .lead{margin:16px auto 0!important;max-width:640px!important;text-wrap:balance}
#always .week{width:100%;max-width:1000px;margin:0 auto;align-self:center}
#always .wk-row{width:100%}

#always .al-body{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:48px;align-items:center;max-width:1180px;margin:0 auto}
#always .al-body .week{max-width:none}
#always .al-hours{padding-left:40px;border-left:1px solid rgba(20,22,58,.08)}
#always .al-hours .big{font-size:72px;white-space:nowrap}#always .al-hours .body{text-wrap:balance}
.lp[data-mode="dark"] #always .al-hours{border-left-color:rgba(255,255,255,.1)}
@media (max-width:1000px){#always .al-body{grid-template-columns:1fr;gap:28px}#always .al-hours{padding-left:0;border-left:0;text-align:center}}

#always .al-wake{text-align:center;margin:56px 0 0;font-size:clamp(24px,2.6vw,32px);font-weight:500;letter-spacing:-.035em;color:var(--ink);width:100%}

#dashboard .dash-head{text-align:center;max-width:760px;margin:0 auto 48px}
#dashboard .dash-head .h-1{margin:0 0 14px}
#dashboard .dash-head .lead{margin:0 auto;max-width:none}

#dashboard .dash-two .lead{text-wrap:balance}

#dashboard .dash-two{text-align:left;margin:0 0 44px}
#dashboard .dash-two .h-1{margin:0 0 14px;white-space:nowrap}
#dashboard .dash-two .lead{margin:0;max-width:none}
@media (max-width:700px){#dashboard .dash-two .h-1{white-space:normal}}

/* hand-off notification on the dashboard */
#dashboard .dash-wrap{position:relative}
#dashboard .hand-note{position:absolute;z-index:5;top:-62px;right:-22px;width:370px;display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:20px;
  background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,255,255,.6));border:1px solid rgba(255,255,255,.95);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:inset 0 1px 0 #fff,0 24px 48px -20px rgba(20,22,58,.35);opacity:0;transform:translateY(-14px) scale(.96);transition:opacity .45s,transform .6s cubic-bezier(.34,1.56,.64,1)}
#dashboard .hand-note.in{opacity:1;transform:none}
#dashboard .hn-ic{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:17px;color:#B45309;background:rgba(245,158,11,.16)}
#dashboard .hn-tx{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
#dashboard .hn-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
#dashboard .hn-top b{font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
#dashboard .hn-t{font-size:12px;color:var(--ink-muted,#5A5E7A)}
#dashboard .hn-msg{text-wrap:pretty;font-size:13.5px;line-height:1.4;color:var(--ink-muted,#5A5E7A)}
.lp[data-mode="dark"] #dashboard .hand-note{background:linear-gradient(135deg,rgba(40,42,90,.82),rgba(30,32,70,.65));border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 24px 48px -20px rgba(0,0,0,.6)}
.lp[data-mode="dark"] #dashboard .hn-top b{color:#F4F5FB}
@media (max-width:820px){#dashboard .hand-note{right:8px;left:8px;width:auto;top:-28px}}

/* on/off switch in the dashboard sidebar */
#dashCard .side{align-self:stretch}
#dashCard .bq-power{margin-top:auto;padding:14px 12px 6px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
#dashCard .bp-row{display:flex;align-items:center;justify-content:space-between}
#dashCard .bp-name{font-weight:600;color:var(--ink);font-size:14px}
#dashCard .side .bp-sw{all:unset;cursor:pointer;width:44px;height:26px;border-radius:999px;background:#C9CBD8;position:relative;transition:background .25s;box-shadow:inset 0 0 0 1px rgba(20,22,58,.06)}
#dashCard .side .bp-sw i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(20,22,58,.25);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
#dashCard .side .bp-sw[aria-checked="true"]{background:var(--primary)}
#dashCard .side .bp-sw[aria-checked="true"] i{transform:translateX(18px)}
#dashCard .side .bp-sw:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
#dashCard .bp-state{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-muted)}
#dashCard .bp-dot{width:7px;height:7px;border-radius:50%;background:#22B07D;box-shadow:0 0 0 3px rgba(34,176,125,.15);transition:background .25s,box-shadow .25s}
#dashCard.bq-paused .bp-dot{background:#A3A6B8;box-shadow:0 0 0 3px rgba(163,166,184,.18)}
#dashCard.bq-paused .main,#dashCard.bq-paused [role="tabpanel"]{opacity:.55;filter:saturate(.4);transition:opacity .3s,filter .3s}

/* clients tab */
#dashCard .cl-search{display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;border-radius:12px;border:1px solid var(--line);color:var(--ink-muted);font-size:14px;margin-bottom:12px;background:var(--clean-bg)}
#dashCard .cl-table{display:flex;flex-direction:column;gap:6px}
#dashCard .cl-row{display:grid;grid-template-columns:36px minmax(0,1.6fr) 1fr 60px 1fr 1fr;gap:14px;align-items:center;padding:10px 14px;border:1px solid var(--line);border-radius:14px;font-size:13.5px;color:var(--ink-muted);background:var(--clean-bg)}
#dashCard .cl-hd{border:0;background:none;padding:2px 14px;font-size:12px;font-weight:500}
#dashCard .cl-row .av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:13px;color:var(--primary);background:var(--primary-soft)}
#dashCard .cl-who{display:flex;flex-direction:column;min-width:0}
#dashCard .cl-who b{color:var(--ink);font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dashCard .cl-who span{font-size:12px}
#dashCard .cl-c.num{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
#dashCard .cl-tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:500;background:#F7F8FA;color:var(--ink)}
#dashCard .cl-tag.vip{background:var(--primary-soft);color:var(--primary)}
#dashCard .cl-tag.need{background:rgba(245,158,11,.14);color:#B45309}
@media (max-width:820px){#dashCard .cl-row{grid-template-columns:32px 1fr 50px}#dashCard .cl-row > .cl-c:not(.num){display:none}}

/* business info tab */
#dashCard .st-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#dashCard .st-card{border:1px solid var(--line);border-radius:16px;padding:14px 16px;background:var(--clean-bg);font-size:13.5px;color:var(--ink-muted)}
#dashCard .st-wide{grid-column:1 / -1}
#dashCard .st-t{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;color:var(--ink);font-size:14px;margin-bottom:10px}
#dashCard .st-hours{display:grid;grid-template-columns:1fr;gap:4px}
#dashCard .st-h{display:flex;justify-content:space-between}
#dashCard .st-h b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
#dashCard .st-h b.off{color:var(--ink-muted)}
#dashCard .st-s{display:grid;grid-template-columns:1fr auto 80px;gap:12px;padding:7px 0;border-bottom:1px solid var(--line)}
#dashCard .st-s b{font-weight:600;color:var(--ink);text-align:right}
#dashCard .st-s span:first-child{color:var(--ink)}
#dashCard .st-q{display:grid;grid-template-columns:200px 1fr;gap:14px;padding:8px 0;border-bottom:1px solid var(--line)}
#dashCard .st-q b{font-weight:600;color:var(--ink)}
#dashCard .st-q [contenteditable]{outline:none;border-radius:6px}
#dashCard .st-q [contenteditable]:focus{background:var(--primary-soft)}
#dashCard .st-add{margin-top:10px;font-weight:600;color:var(--primary);font-size:13px;cursor:pointer}
#dashCard .st-rules{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
@media (max-width:820px){#dashCard .st-grid{grid-template-columns:1fr}#dashCard .st-q{grid-template-columns:1fr;gap:2px}}

/* How it works: off the home page, opens from the nav as an overlay */
#how{display:none!important}
.lp.how-open #how{display:flex!important;align-items:center;position:fixed;inset:0;z-index:200;overflow:auto;padding:72px 0!important;
  background:rgba(245,246,250,.72);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);animation:howIn .35s cubic-bezier(.22,1,.36,1)}
.lp[data-mode="dark"].how-open #how{background:rgba(13,14,38,.78)}
.lp.how-open #how .wrap{width:100%}
.lp.how-open #how .rv{opacity:1!important;transform:none!important}
#how .how-x{all:unset;cursor:pointer;position:fixed;top:22px;right:26px;z-index:2;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:16px;color:var(--ink);
  background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.95);box-shadow:0 8px 20px -12px rgba(20,22,58,.35);backdrop-filter:blur(12px)}
#how .how-x:focus-visible{outline:2px solid var(--focus)}
@keyframes howIn{from{opacity:0}to{opacity:1}}
body.how-lock{overflow:hidden}

/* features: one switcher, one live chat */
#features .fx-head{margin-bottom:48px}
#features .fx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
#features .fx-list{display:flex;flex-direction:column}
#features .fx-item{all:unset;cursor:pointer;display:grid;grid-template-columns:3px 1fr;column-gap:20px;padding:16px 0;border-radius:0}
#features .fx-item .fx-bar{grid-row:1 / span 2;background:rgba(20,22,58,.08);border-radius:3px;overflow:hidden;position:relative}
#features .fx-item .fx-bar i{position:absolute;left:0;top:0;width:100%;height:0;background:linear-gradient(180deg,#5FB8E6,var(--primary))}
#features .fx-item.on .fx-bar i{height:100%;transition:height var(--fxd,6s) linear}
#features .fx-item b{font-size:20px;font-weight:500;letter-spacing:-.02em;color:var(--ink-muted);transition:color .3s}
#features .fx-item > span:last-child{font-size:15px;color:var(--ink-muted);max-height:0;opacity:0;overflow:hidden;transition:max-height .45s cubic-bezier(.22,1,.36,1),opacity .35s,margin .35s}
#features .fx-item.on b{color:var(--ink)}
#features .fx-item.on > span:last-child{max-height:60px;opacity:1;margin-top:6px}
#features .fx-item:hover b{color:var(--ink)}
#features .fx-item:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:8px}
#features .fx-stage{position:relative;display:grid;place-items:center;min-height:460px;border-radius:32px;overflow:hidden;
  background:radial-gradient(60% 60% at 25% 30%,var(--glow-3),transparent 70%),radial-gradient(60% 60% at 80% 75%,var(--glow-2),transparent 70%),radial-gradient(50% 50% at 60% 20%,var(--glow-1),transparent 70%),var(--clean-bg)}
#features .fx-phone{width:min(380px,88%);border-radius:28px;padding:16px;display:flex;flex-direction:column;gap:12px;min-height:340px}
#features .fx-top{display:flex;align-items:center;gap:10px;padding:2px 4px 10px;border-bottom:1px solid rgba(20,22,58,.06)}
#features .fx-top b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
#features .fx-top small{font-size:11.5px;color:var(--ink-muted)}
#features .fx-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:13px;color:#fff;background:linear-gradient(135deg,#5FB8E6,var(--primary))}
#features .fx-chat{display:flex;flex-direction:column;gap:8px;padding:4px 2px}
#features .fx-m{max-width:80%;padding:9px 13px;border-radius:16px;font-size:14px;line-height:1.4;opacity:0;transform:translateY(8px) scale(.97);animation:fxIn .45s cubic-bezier(.34,1.56,.64,1) forwards}
#features .fx-m.c{align-self:flex-start;background:#fff;color:var(--ink);border-bottom-left-radius:6px;box-shadow:0 1px 0 rgba(20,22,58,.06)}
#features .fx-m.b{align-self:flex-end;background:var(--primary);color:#fff;border-bottom-right-radius:6px}
#features .fx-typing{align-self:flex-end;display:flex;gap:4px;padding:11px 13px;border-radius:16px;background:rgba(75,79,216,.14)}
#features .fx-typing i{width:6px;height:6px;border-radius:50%;background:var(--primary);opacity:.5;animation:fxDot 1s infinite}
#features .fx-typing i:nth-child(2){animation-delay:.15s}#features .fx-typing i:nth-child(3){animation-delay:.3s}
#features .fx-tag{position:absolute;right:22px;bottom:22px;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--ink);
  background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.95);backdrop-filter:blur(14px);box-shadow:0 10px 24px -16px rgba(20,22,58,.35);opacity:0;transform:translateY(8px);transition:opacity .35s,transform .45s cubic-bezier(.34,1.56,.64,1)}
#features .fx-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:#22B07D;box-shadow:0 0 0 3px rgba(34,176,125,.15)}
#features .fx-tag.show{opacity:1;transform:none}
@keyframes fxIn{to{opacity:1;transform:none}}
@keyframes fxDot{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
.lp[data-mode="dark"] #features .fx-item .fx-bar{background:rgba(255,255,255,.1)}
.lp[data-mode="dark"] #features .fx-m.c{background:rgba(255,255,255,.1);color:#F4F5FB}
.lp[data-mode="dark"] #features .fx-tag{background:rgba(30,32,70,.75);border-color:rgba(255,255,255,.14);color:#F4F5FB}
@media (max-width:900px){#features .fx{grid-template-columns:1fr;gap:28px}#features .fx-stage{min-height:420px}}

#features .fx-head .lead{text-wrap:balance}

/* features: white section, one calm gradient on the chat stage */
#features{background:var(--clean-bg)!important}
#features .fx-stage{background:linear-gradient(135deg,#E3F4FB 0%,#E3EEFD 48%,#E6F2FC 100%)!important;box-shadow:inset 0 0 0 1px rgba(20,22,58,.04)}
.lp[data-mode="dark"] #features .fx-stage{background:linear-gradient(135deg,#132A44 0%,#1E1F55 50%,#2A1E4D 100%)!important}
/* industry strip: white, with a soft contained touch of colour behind the bubbles */
.strip::before,.strip::after{display:none!important}
.strip{background:var(--clean-bg)}
.strip .cloud::before{width:900px!important;height:300px!important;margin:-150px 0 0 -450px!important;filter:blur(80px)!important;opacity:.55!important;
  background:linear-gradient(90deg,#CFEFFA,#D3E6FB 50%,#DDE9FC)!important}
.lp[data-mode="dark"] .strip .cloud::before{opacity:.35!important;background:linear-gradient(90deg,#1B3E5E,#2B2C78 50%,#3D2A6A)!important}

/* features: colour as a soft wash in the section, no box behind the chat */
#features{position:relative;overflow:hidden;isolation:isolate}
#features::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:50%;top:50%;width:1500px;height:760px;transform:translate(-36%,-42%);
  background:radial-gradient(closest-side at 62% 45%,rgba(111,149,240,.30),transparent 70%),radial-gradient(closest-side at 44% 58%,rgba(95,184,230,.28),transparent 72%),radial-gradient(closest-side at 78% 62%,rgba(140,205,245,.22),transparent 70%);filter:blur(30px)}
#features .fx-stage{background:none!important;box-shadow:none!important;overflow:visible}
.lp[data-mode="dark"] #features::before{opacity:.7}
.lp[data-mode="dark"] #features .fx-stage{background:none!important}

#features .fx-head .lead{text-wrap:wrap!important;max-width:none!important}
#features::before{filter:none!important}

/* one continuous wash from the win-back section into the industry bubbles */
#features{overflow:visible!important;overflow-x:clip!important;z-index:1}
#features::before{left:50%!important;top:22%!important;transform:translateX(-50%)!important;width:1700px!important;height:1650px!important;
  background:
    radial-gradient(420px 320px at 64% 22%,rgba(111,149,240,.30),transparent 70%),
    radial-gradient(460px 340px at 44% 30%,rgba(95,184,230,.26),transparent 72%),
    radial-gradient(380px 300px at 80% 34%,rgba(140,205,245,.20),transparent 70%),
    radial-gradient(520px 300px at 34% 74%,rgba(95,184,230,.20),transparent 72%),
    radial-gradient(560px 320px at 60% 78%,rgba(111,149,240,.22),transparent 72%),
    radial-gradient(420px 280px at 82% 72%,rgba(140,205,245,.16),transparent 70%)!important}
.strip{background:transparent!important;position:relative;z-index:2;overflow:visible!important}
.strip .cloud::before{display:none!important}
.lp{overflow-x:clip}

#features::before{height:1300px!important;-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent);mask-image:linear-gradient(180deg,#000 80%,transparent);
  background:
    radial-gradient(420px 320px at 64% 22%,rgba(111,149,240,.30),transparent 70%),
    radial-gradient(460px 340px at 44% 30%,rgba(95,184,230,.26),transparent 72%),
    radial-gradient(380px 300px at 80% 34%,rgba(140,205,245,.20),transparent 70%),
    radial-gradient(560px 300px at 32% 72%,rgba(95,184,230,.26),transparent 72%),
    radial-gradient(600px 320px at 58% 74%,rgba(111,149,240,.28),transparent 72%),
    radial-gradient(440px 280px at 82% 70%,rgba(140,205,245,.22),transparent 70%)!important}
#faq{position:relative;z-index:3}

#features::before{
  background:
    radial-gradient(420px 320px at 64% 22%,rgba(111,149,240,.30),transparent 70%),
    radial-gradient(460px 340px at 44% 30%,rgba(95,184,230,.26),transparent 72%),
    radial-gradient(380px 300px at 80% 34%,rgba(140,205,245,.20),transparent 70%),
    radial-gradient(520px 340px at 54% 48%,rgba(111,149,240,.22),transparent 72%),
    radial-gradient(480px 320px at 36% 52%,rgba(95,184,230,.20),transparent 72%),
    radial-gradient(420px 300px at 76% 54%,rgba(140,205,245,.18),transparent 70%),
    radial-gradient(560px 300px at 32% 72%,rgba(95,184,230,.26),transparent 72%),
    radial-gradient(600px 320px at 58% 74%,rgba(111,149,240,.28),transparent 72%),
    radial-gradient(440px 280px at 82% 70%,rgba(140,205,245,.22),transparent 70%)!important}

#features::before{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 var(--wf1,860px),transparent var(--wf2,1060px))!important;mask-image:linear-gradient(180deg,#000 0,#000 var(--wf1,860px),transparent var(--wf2,1060px))!important}

#faq{background:var(--clean-bg)!important}

#features::before{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(var(--wf1,860px) - 140px),transparent calc(var(--wf1,860px) + 30px)),radial-gradient(440px 230px at 28% calc(var(--wf1,860px) + 10px),#000 0,transparent 70%),radial-gradient(560px 290px at 50% calc(var(--wf1,860px) + 70px),#000 0,transparent 70%),radial-gradient(380px 200px at 70% calc(var(--wf1,860px) - 10px),#000 0,transparent 70%),radial-gradient(300px 170px at 40% calc(var(--wf1,860px) + 120px),rgba(0,0,0,.7) 0,transparent 70%),radial-gradient(320px 180px at 80% calc(var(--wf1,860px) + 50px),rgba(0,0,0,.6) 0,transparent 70%)!important;mask-image:linear-gradient(180deg,#000 0,#000 calc(var(--wf1,860px) - 140px),transparent calc(var(--wf1,860px) + 30px)),radial-gradient(440px 230px at 28% calc(var(--wf1,860px) + 10px),#000 0,transparent 70%),radial-gradient(560px 290px at 50% calc(var(--wf1,860px) + 70px),#000 0,transparent 70%),radial-gradient(380px 200px at 70% calc(var(--wf1,860px) - 10px),#000 0,transparent 70%),radial-gradient(300px 170px at 40% calc(var(--wf1,860px) + 120px),rgba(0,0,0,.7) 0,transparent 70%),radial-gradient(320px 180px at 80% calc(var(--wf1,860px) + 50px),rgba(0,0,0,.6) 0,transparent 70%)!important;-webkit-mask-composite:source-over;mask-composite:add}

#always .al-head{text-align:left!important;max-width:none!important;margin:0 0 48px!important}
#always .al-head .lead{margin:14px 0 0!important;max-width:none!important}

/* bubbles never stop: gentle float + drift with the scroll */
@media (prefers-reduced-motion: no-preference){
  .cloud.done .bq-chip:not(.sw-in):not(.sw-out){animation:chipfloat var(--fd,4.5s) ease-in-out var(--fdl,0s) infinite alternate!important}
}
@keyframes chipfloat{0%{translate:0 -4px}100%{translate:0 4px}}

/* nav CTA in white */
.lp .bq-btn.cta-desk{background:#fff!important;color:#14163A!important;border:1px solid rgba(20,22,58,.08)!important;box-shadow:0 6px 16px -10px rgba(20,22,58,.35)!important}
.lp .bq-btn.cta-desk:hover{background:#fff!important;box-shadow:0 10px 22px -12px rgba(20,22,58,.4)!important}

/* one rhythm for every section header */
#problem h2.h-1,#always h2.h-1,#dashboard h2.h-1,#features h2.h-1,.strip h2.h-1,#faq h2.h-1{font-size:clamp(34px,4.2vw,52px)!important;line-height:1.08!important;letter-spacing:-.038em!important;margin:0!important}
#problem .pb-head .lead,#always .al-head .lead,#dashboard .dash-two .lead,#features .fx-head .lead,.strip .sec-head .lead,#faq .sec-head .lead{font-size:20px!important;line-height:1.5!important;margin-top:14px!important;margin-bottom:0!important}
#problem .pb-head,#always .al-head,#dashboard .dash-two,#features .fx-head,.strip .sec-head,#faq .sec-head{margin-bottom:48px!important;padding:0!important}
#problem .pb-cards,#always .al-body,#dashboard .dash-wrap,#features .fx,.strip .cloud,#faq .faq{margin-top:0!important}
#always .al-head > div{margin:0!important}
#always .al-head h2{margin-top:0!important}
.strip .sec-head,#faq .sec-head{text-align:center}
.strip .sec-head .lead,#faq .sec-head .lead{max-width:none}

#always .always{gap:0!important;row-gap:0!important}

.cmpsep{width:1px;height:22px;background:var(--line);margin:0 6px}
.cmpfont{font:500 13px/1 var(--font-sans);color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:999px;padding:6px 10px;cursor:pointer}

/* industries: crowded rows that walk across the screen, fading into soft white at both edges */
.marq{position:relative;display:flex;flex-direction:column;gap:12px;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 7%,#000 20%,#000 80%,rgba(0,0,0,.35) 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 7%,#000 20%,#000 80%,rgba(0,0,0,.35) 93%,transparent 100%)}
.marq::before,.marq::after{content:"";position:absolute;top:-20%;bottom:-20%;width:16%;z-index:2;pointer-events:none;
  background:radial-gradient(60% 40% at 30% 30%,#fff,transparent 70%),radial-gradient(55% 35% at 60% 70%,#fff,transparent 70%),radial-gradient(70% 45% at 20% 85%,rgba(255,255,255,.9),transparent 70%);filter:blur(10px)}
.marq::before{left:0}.marq::after{right:0;transform:scaleX(-1)}
.lp[data-mode="dark"] .marq::before,.lp[data-mode="dark"] .marq::after{display:none}
.mq-row{display:flex;overflow:visible}
.mq-row:nth-child(odd){padding-left:40px}
.mq-track{display:flex;gap:10px;flex:none;width:max-content;animation:mqMove var(--mqd,90s) linear infinite}
.mq-dup{display:flex;gap:10px;padding-left:10px}
.mq-row.rev .mq-track{animation-direction:reverse}
.marq:hover .mq-track{animation-play-state:running}
@keyframes mqMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marq .bq-chip{flex:none;white-space:nowrap;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.marq .bq-chip,.marq .bq-chip.hot{background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.28));color:var(--ink);border:1px solid rgba(255,255,255,.9);
  backdrop-filter:blur(14px) saturate(170%);-webkit-backdrop-filter:blur(14px) saturate(170%);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 20px -14px rgba(20,22,58,.3)}
.marq .bq-chip.hot{font-weight:600}
.marq .bq-chip.hot::before{display:none}
.marq .bq-chip:hover{transform:scale(1.06);box-shadow:inset 0 1px 0 #fff,0 10px 22px -12px rgba(20,22,58,.22)}
.lp[data-mode="dark"] .marq .bq-chip{background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border-color:rgba(255,255,255,.16);color:#F4F5FB;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.mq-last{display:flex;justify-content:center;margin-top:22px}
.mq-last .bq-chip.last{background:#14163A!important;color:#fff!important;border-color:transparent!important;font-weight:600;box-shadow:0 10px 24px -14px rgba(20,22,58,.5)!important}
.lp[data-mode="dark"] .mq-last .bq-chip.last{background:#F4F5FB!important;color:#14163A!important}
@media (prefers-reduced-motion: reduce){.mq-track{animation:none}}

/* industry chips: clearer glass */
.marq .bq-chip,.marq .bq-chip.hot{background:linear-gradient(135deg,rgba(255,255,255,.38),rgba(255,255,255,.08))!important;border:1px solid rgba(255,255,255,.75)!important;
  backdrop-filter:blur(18px) saturate(190%) brightness(1.05)!important;-webkit-backdrop-filter:blur(18px) saturate(190%) brightness(1.05)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.25),0 6px 18px -12px rgba(40,44,120,.28)!important}
.marq .bq-chip:hover{background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.14))!important}

/* lighter hero: softer colour with white mist */
.top .waves{opacity:.62!important}
.top .hero-mist{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(40% 45% at 22% 30%,rgba(255,255,255,.85),transparent 70%),radial-gradient(35% 40% at 78% 18%,rgba(255,255,255,.6),transparent 70%),
             radial-gradient(45% 40% at 55% 85%,rgba(255,255,255,.7),transparent 72%),linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,.1) 60%,rgba(255,255,255,.55))}
.lp[data-mode="dark"] .top .hero-mist{display:none}
.lp[data-mode="dark"] .top .waves{opacity:1!important}

/* Booqs reply bubbles: soft grey instead of purple */
.lp .bq-bubble.out{background:#DCEBFD!important;color:#14163A!important;box-shadow:0 1px 0 rgba(20,22,58,.05)!important}
.lp .bq-bubble.out *{color:inherit}
.lp .bq-bubble.out .t,.lp .bq-bubble.out small,.lp .bq-bubble.out .time{color:#6B6F8A!important;opacity:1!important}
#features .fx-m.b{background:#DCEBFD!important;color:#14163A!important}
.lp[data-mode="dark"] .bq-bubble.out,.lp[data-mode="dark"] #features .fx-m.b{background:rgba(255,255,255,.14)!important;color:#F4F5FB!important}
.lp[data-mode="dark"] .bq-bubble.out .t,.lp[data-mode="dark"] .bq-bubble.out small{color:rgba(244,245,251,.6)!important}

/* industry chips: see-through glass */
.marq .bq-chip,.marq .bq-chip.hot{background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.04))!important;border:1px solid rgba(255,255,255,.6)!important;
  backdrop-filter:blur(10px) saturate(180%)!important;-webkit-backdrop-filter:blur(10px) saturate(180%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 0 0 .5px rgba(120,124,200,.12),0 4px 14px -10px rgba(40,44,120,.25)!important}
.marq .bq-chip:hover{background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.08))!important}

/* ---------- phone layout ---------- */
@media (max-width:1000px){
  .hero .grid{display:flex!important;flex-direction:column!important;gap:44px!important;align-items:stretch!important}
  .hero .grid > div:first-child{margin-top:0!important}
  .stage{height:auto!important;max-width:460px!important;width:100%!important;margin:0 auto!important;padding:26px 0 30px}
  .phone{position:relative!important;left:auto!important;right:auto!important;top:auto!important;transform:none!important;width:100%!important;height:470px!important;margin:0 auto}
  .float.f1{right:-6px!important;left:auto!important;top:0!important}
  .float.f2{left:-6px!important;bottom:6px!important}
}
@media (max-width:600px){
  .hero{padding-top:28px!important;padding-bottom:56px!important}
  .hero .h-xl{font-size:clamp(42px,12.5vw,60px)!important;line-height:1.02!important;letter-spacing:-.045em!important}
  .hero .lead{font-size:17px!important}
  .hero .ctas{display:flex;flex-direction:column;align-items:stretch;gap:10px}
  .hero .ctas .bq-btn{width:100%;justify-content:center}
  .phone{height:500px!important;border-radius:32px!important}
  .float{transform:scale(.88)}
  .float.f1{transform-origin:100% 0}.float.f2{transform-origin:0 100%}
  #problem,#always,#dashboard,#features,#faq{padding-block:72px!important}
  #problem h2.h-1,#always h2.h-1,#dashboard h2.h-1,#features h2.h-1,.strip h2.h-1,#faq h2.h-1{font-size:34px!important}
  #problem .pb-head .lead,#always .al-head .lead,#dashboard .dash-two .lead,#features .fx-head .lead,.strip .sec-head .lead,#faq .sec-head .lead{font-size:17px!important}
  #problem .pb-head,#always .al-head,#dashboard .dash-two,#features .fx-head,.strip .sec-head,#faq .sec-head{margin-bottom:32px!important}
  #dashboard .dash-two .h-1{white-space:normal!important}
  #always .al-hours{text-align:left!important}
  /* dashboard sidebar: tabs in a scroll row, switch on its own line */
  #dashCard .side{flex-direction:row!important;flex-wrap:nowrap!important;overflow-x:auto;gap:6px;padding:4px 2px 10px;scrollbar-width:none}
  #dashCard .side::-webkit-scrollbar{display:none}
  #dashCard .side #dashLogo{display:none}
  #dashCard .side button[role="tab"]{flex:none;white-space:nowrap;padding:8px 12px}
  #dashCard .bq-power{display:none}
  #dashCard .cl-row{grid-template-columns:32px 1fr 44px!important}
  #dashboard .hand-note{top:-40px!important}
  #features .fx{gap:24px}
  #features .fx-stage{min-height:380px}
  #features .fx-item b{font-size:18px}
  .cmpbar .cmplab,.cmpbar .cmpsep,.cmpbar .cmpfont{display:none!important}
  .marq .mq-row:nth-child(odd){padding-left:20px}
}

/* hero: what Booqs is */
.hero-what{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 15px 0 12px;margin-bottom:22px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink);
  background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.18));border:1px solid rgba(255,255,255,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 #fff,0 6px 16px -12px rgba(20,22,58,.3)}
.hero-what .hw-dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#5FB8E6,var(--primary));box-shadow:0 0 0 3px rgba(75,79,216,.14)}
.lp[data-mode="dark"] .hero-what{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#F4F5FB;box-shadow:none}
/* hero floating notes: clear glass */
.hero .float.f1,.hero .float.f2{background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,.12))!important;border:1px solid rgba(255,255,255,.8)!important;
  backdrop-filter:blur(16px) saturate(180%)!important;-webkit-backdrop-filter:blur(16px) saturate(180%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 32px -20px rgba(20,22,58,.35)!important}
.lp[data-mode="dark"] .hero .float.f1,.lp[data-mode="dark"] .hero .float.f2{background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04))!important;border-color:rgba(255,255,255,.16)!important}

/* CTA box: night colour stays for dark mode; light mode gets a soft aura panel */
.lp:not([data-mode="dark"]) .band{background:linear-gradient(135deg,#E6F5FC 0%,#E3EEFC 48%,#E4F2FC 100%)!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 30px 60px -40px rgba(40,44,120,.35)}
.lp:not([data-mode="dark"]) .band .bq-orb:nth-of-type(1){background:#BFEAFB!important;opacity:.8!important}
.lp:not([data-mode="dark"]) .band .bq-orb:nth-of-type(2){background:#D3E6FB!important;opacity:.9!important}
.lp:not([data-mode="dark"]) .band h2.h-1{color:var(--ink)!important}
.lp:not([data-mode="dark"]) .band .lead{color:var(--ink-muted)!important}
.lp:not([data-mode="dark"]) .band .bq-btn[data-open="signup"]{background:var(--primary)!important;color:#fff!important}
.lp:not([data-mode="dark"]) .band .bq-btn.glass{background:rgba(255,255,255,.55)!important;color:var(--ink)!important;border-color:rgba(255,255,255,.95)!important;backdrop-filter:blur(12px)}

/* gradient words: room for descenders (g, y, p) so they are not clipped */
.lp .bq-aurora-text{padding-bottom:.14em;margin-bottom:-.14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* bottom box (light): white primary, clear glass secondary */
.lp:not([data-mode="dark"]) .band .bq-btn[data-open="signup"]{background:#fff!important;color:#14163A!important;box-shadow:0 10px 24px -14px rgba(20,22,58,.35)!important}
.lp:not([data-mode="dark"]) .band .bq-btn.glass{background:linear-gradient(135deg,rgba(255,255,255,.35),rgba(255,255,255,.08))!important;border:1px solid rgba(255,255,255,.85)!important;
  backdrop-filter:blur(14px) saturate(170%)!important;-webkit-backdrop-filter:blur(14px) saturate(170%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important}

/* ---------- dashboard v2 (glass workspace) ---------- */
#dashCard.dv2{display:grid!important;grid-template-columns:64px 1fr!important;gap:0!important;padding:14px!important;min-height:0;background:#F7F8FA!important;border:1px solid rgba(255,255,255,.9)!important;border-radius:32px!important;box-shadow:0 40px 80px -50px rgba(20,22,58,.35)!important}
#dashCard .dv-rail{display:flex!important;flex-direction:column!important;align-items:center;gap:10px!important;padding:64px 0 8px!important;overflow:visible!important}
#dashCard .dv-rail button[role="tab"]{all:unset;cursor:pointer;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#565B7E;background:rgba(255,255,255,.7);box-shadow:0 1px 0 rgba(20,22,58,.04);transition:background .2s,color .2s}
#dashCard .dv-rail button[aria-selected="true"]{background:#14163A!important;color:#fff!important;border:0!important}
#dashCard .dv-rail button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
#dashCard .dv-main{min-width:0;padding:4px 6px 4px 10px}
#dashCard .dv-top{display:flex;align-items:center;gap:14px;height:44px;margin-bottom:14px}
#dashCard .dv-top #dashLogo{display:flex;align-items:center;padding:0!important}
#dashCard .dv-top .bq-power{margin:0 0 0 auto!important;padding:4px 6px 4px 14px!important;border:0!important;border-radius:999px;background:rgba(255,255,255,.75);display:flex!important;flex-direction:row!important;align-items:center;gap:10px!important}
#dashCard .dv-top .bp-sw{all:unset;cursor:pointer;width:40px;height:24px;border-radius:999px;background:#C9CBD8;position:relative;transition:background .25s}
#dashCard .dv-top .bp-sw i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(20,22,58,.25);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
#dashCard .dv-top .bp-sw[aria-checked="true"]{background:var(--primary)}
#dashCard .dv-top .bp-sw[aria-checked="true"] i{transform:translateX(16px)}
#dashCard .dv-me{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:14px;color:#fff;background:linear-gradient(135deg,#7ED6F4,#5B5FE6)}
#dashCard .view{background:none}
#dashCard .dv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:18px;flex-wrap:wrap}
#dashCard .dv-hi{font-size:34px;font-weight:500;letter-spacing:-.035em;line-height:1.1;color:var(--ink);margin:0}
#dashCard .dv-sub{margin:6px 0 0;font-size:14px;color:var(--ink-muted)}
#dashCard .dv-sub .cap{margin-left:8px;opacity:.8}
#dashCard .dv-kpis{display:flex;align-items:flex-end;gap:34px}
#dashCard .dv-kpis > div span{display:block;font-size:12.5px;color:var(--ink-muted);margin-bottom:2px}
#dashCard .dv-kpis b{font-size:34px;font-weight:500;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
#dashCard .dv-kpis b i{font-style:normal}
#dashCard .dv-kpis em{font-style:normal;font-size:15px;vertical-align:top;margin-left:3px;color:var(--ink-muted)}
#dashCard .dv-add{all:unset;cursor:pointer;height:44px;padding:0 20px;border-radius:999px;background:#14163A;color:#fff;font-size:14px;font-weight:500}
#dashCard .dv-grid{display:grid;grid-template-columns:300px 1fr;grid-template-rows:auto auto;gap:14px}
#dashCard .dv-card{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);border-radius:24px;padding:16px 18px;box-shadow:0 1px 0 rgba(20,22,58,.03);min-width:0}
#dashCard .dv-ch{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
#dashCard .dv-ch b{display:block;font-size:15px;font-weight:600;color:var(--ink)}
#dashCard .dv-subt{display:block;font-size:12px;color:var(--ink-muted);margin-top:2px}
#dashCard .dv-pill{font-size:12px;font-weight:600;height:24px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;background:#F7F8FA;color:var(--ink)}
#dashCard .dv-pill.up{background:#E3F6EC;color:#147A4E}
/* chat */
#dashCard .dv-chat{display:flex;flex-direction:column}
#dashCard .dv-msgs{display:flex;flex-direction:column;gap:8px;flex:1}
#dashCard .dv-m{max-width:88%;padding:9px 12px;border-radius:16px;font-size:13px;line-height:1.4;color:var(--ink)}
#dashCard .dv-m small{display:block;font-size:10.5px;color:var(--ink-muted);margin-top:3px}
#dashCard .dv-m.in{align-self:flex-start;background:#F1F2F5;border-bottom-left-radius:6px}
#dashCard .dv-m.out{align-self:flex-end;background:#DCEBFD;border-bottom-right-radius:6px}
#dashCard .dv-input{margin-top:12px;height:42px;border-radius:999px;border:1px solid #E3E5EE;display:flex;align-items:center;justify-content:space-between;padding:0 6px 0 16px;font-size:13px;color:var(--ink-muted);background:#fff}
#dashCard .dv-input span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#14163A;color:#fff;font-size:13px}
/* timeline */
#dashCard .dv-legend{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-muted);white-space:nowrap}
#dashCard .dv-legend i{width:10px;height:10px;border-radius:3px;margin-left:8px}
#dashCard .tl{background:#fff;border-radius:18px;padding:12px 14px 14px}
#dashCard .tl-hours{display:grid;grid-template-columns:92px 1fr;font-size:11px;color:var(--ink-muted);margin-bottom:8px}
#dashCard .tl-hours > div{display:grid;grid-template-columns:repeat(8,1fr) 0;position:relative}
#dashCard .tl-hours > div span{transform:translateX(-50%);white-space:nowrap}
#dashCard .tl-hours > div span:first-child{transform:none}
#dashCard .tl-body{position:relative;display:flex;flex-direction:column;gap:10px}
#dashCard .tl-lane{display:grid;grid-template-columns:92px 1fr;align-items:center}
#dashCard .tl-who{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--ink)}
#dashCard .tl-who i{font-style:normal;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;background:#F7F8FA;color:var(--ink)}
#dashCard .tl-track{position:relative;height:50px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(12.5% - 1px),#EEF0F5 calc(12.5% - 1px),#EEF0F5 12.5%)}
#dashCard .tl-b{position:absolute;top:2px;bottom:2px;border-radius:12px;padding:6px 10px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;min-width:0}
#dashCard .tl-b b{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dashCard .tl-b span{font-size:11px;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dashCard .tl-b.aq,#dashCard .dv-legend i.aq{background:#D9F1FB}
#dashCard .tl-b.lv{background:#DCEBFD}
#dashCard .tl-b.gy,#dashCard .dv-legend i.gy{background:#F7F8FA}
#dashCard .tl-b.in,#dashCard .dv-legend i.in{background:#BFD9FA}
#dashCard .tl-b.free{background:repeating-linear-gradient(135deg,#F7F8FA 0 6px,#E8EAF0 6px 12px);border:1.5px dashed #B9BBEA}
#dashCard .tl-now{position:absolute;top:-6px;bottom:-4px;width:0;border-left:1.5px solid #14163A}
#dashCard .tl-now::before{content:"";position:absolute;top:-4px;left:-4.5px;width:8px;height:8px;border-radius:50%;background:#14163A}
#dashCard .tl-now i{position:absolute;top:-22px;left:6px;font-style:normal;font-size:10.5px;font-weight:600;color:#fff;background:#14163A;border-radius:6px;padding:1px 6px}
/* needs you */
#dashCard .dv-n{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:10px 0;border-top:1px solid #EEF0F5}
#dashCard .dv-n .av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:13px;background:#FFF1DE;color:#A15C07}
#dashCard .dv-n.done .av{background:#F7F8FA;color:var(--ink)}
#dashCard .dv-n b{display:block;font-size:13px;font-weight:600;color:var(--ink)}
#dashCard .dv-n.done b{text-decoration:line-through;text-decoration-color:rgba(20,22,58,.35);font-weight:500}
#dashCard .dv-n small{font-size:11.5px;color:var(--ink-muted)}
#dashCard .dv-n button{all:unset;cursor:pointer;height:32px;padding:0 14px;border-radius:999px;background:#14163A;color:#fff;font-size:12.5px;font-weight:500}
#dashCard .dv-n > i{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#D9F5E6;color:#147A4E;font-weight:700}
/* chart */
#dashCard .dv-chart{width:100%;height:130px;display:block;overflow:visible}
#dashCard .dv-chart text{font-size:11px;fill:#8A8EAA;font-family:var(--font-sans)}
/* other tabs keep working inside the new frame */
#dashCard .view:not(#v-dash){background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);border-radius:24px;padding:20px}
/* paused state */
#dashCard.bq-paused .dv-grid,#dashCard.bq-paused .dv-head{opacity:.55;filter:saturate(.4);transition:opacity .3s,filter .3s}
/* dark */
.lp[data-mode="dark"] #dashCard.dv2{background:linear-gradient(160deg,#171936,#11132C)!important;border-color:rgba(255,255,255,.08)!important}
.lp[data-mode="dark"] #dashCard .dv-card,.lp[data-mode="dark"] #dashCard .view:not(#v-dash){background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)}
.lp[data-mode="dark"] #dashCard .tl,.lp[data-mode="dark"] #dashCard .dv-input{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.lp[data-mode="dark"] #dashCard .dv-rail button[role="tab"]{background:rgba(255,255,255,.08);color:#C9CCE6}
.lp[data-mode="dark"] #dashCard .dv-rail button[aria-selected="true"]{background:#F4F5FB!important;color:#14163A!important}
.lp[data-mode="dark"] #dashCard .dv-add,.lp[data-mode="dark"] #dashCard .dv-n button,.lp[data-mode="dark"] #dashCard .dv-input span{background:#F4F5FB;color:#14163A}
.lp[data-mode="dark"] #dashCard .dv-m.in{background:rgba(255,255,255,.08)} .lp[data-mode="dark"] #dashCard .dv-m.out{background:rgba(111,149,240,.22)}
.lp[data-mode="dark"] #dashCard .tl-track{background:repeating-linear-gradient(90deg,transparent 0,transparent calc(12.5% - 1px),rgba(255,255,255,.06) calc(12.5% - 1px),rgba(255,255,255,.06) 12.5%)}
.lp[data-mode="dark"] #dashCard .tl-b.aq{background:rgba(126,214,244,.2)} .lp[data-mode="dark"] #dashCard .tl-b.lv{background:rgba(111,149,240,.2)}
.lp[data-mode="dark"] #dashCard .tl-b.gy{background:rgba(255,255,255,.08)} .lp[data-mode="dark"] #dashCard .tl-b.in{background:rgba(111,149,240,.38)}
.lp[data-mode="dark"] #dashCard .tl-now{border-color:#F4F5FB} .lp[data-mode="dark"] #dashCard .tl-now::before,.lp[data-mode="dark"] #dashCard .tl-now i{background:#F4F5FB;color:#14163A}
.lp[data-mode="dark"] #dashCard .dv-top .bq-power{background:rgba(255,255,255,.08)}
/* tablet / phone */
@media (max-width:1000px){#dashCard .dv-grid{grid-template-columns:1fr}#dashCard .dv-chat{order:2}}
@media (max-width:600px){
  #dashCard.dv2{grid-template-columns:1fr!important;padding:12px!important;border-radius:24px!important}
  #dashCard .dv-rail{flex-direction:row!important;justify-content:center;padding:0 0 10px!important;order:-1}
  #dashCard .dv-top{margin-bottom:10px}#dashCard .dv-top .bq-power{display:flex!important}#dashCard .dv-top .bp-state{display:none}
  #dashCard .dv-hi{font-size:26px}#dashCard .dv-kpis{gap:18px;flex-wrap:wrap}#dashCard .dv-kpis b{font-size:26px}#dashCard .dv-add{display:none}
  #dashCard .tl{overflow-x:auto}#dashCard .tl-hours,#dashCard .tl-body{min-width:560px}
}

#dashCard .tl-hours > div{display:block!important;position:relative;height:14px}
#dashCard .tl-hours > div span{position:absolute;top:0;transform:translateX(-50%)!important}
#dashCard .tl-hours > div span:first-child{transform:none!important}
#dashCard .tl-hours > div span:last-child{transform:translateX(-100%)!important}
#dashCard .dv-cal{display:flex;flex-direction:column}
#dashCard .dv-cal .tl{flex:1;display:flex;flex-direction:column}
#dashCard .dv-cal .tl-body{flex:1;justify-content:space-around}
#dashCard .tl-track{height:56px}
#dashCard .tl-now i{top:auto!important;bottom:-20px;left:-16px!important}
#dashCard .tl{padding-bottom:26px}

#dashCard .dv-n > span:not(.av){text-align:left;min-width:0}

@media (max-width:600px){#dashCard .dv-legend{display:none}#dashboard .hand-note{top:-70px!important}}

/* hero: more white, cleaner; waves stay soft and flowing */
.top .waves{opacity:.72!important;filter:blur(38px)!important}
.top .hero-mist{background:
  radial-gradient(48% 55% at 24% 46%,rgba(255,255,255,.92),rgba(255,255,255,0) 72%),
  radial-gradient(30% 32% at 78% 12%,rgba(255,255,255,.55),transparent 70%),
  radial-gradient(60% 40% at 50% 100%,rgba(255,255,255,.95),transparent 70%),
  linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.08) 45%,rgba(255,255,255,.75))!important}

/* hero chat: white screen, customer bubbles in Mist Grey */
.hero .phone .screen{background:#FFFFFF!important}
.hero .phone .bq-bubble.in{background:#F1F2F5!important;box-shadow:none!important}
.lp[data-mode="dark"] .hero .phone .screen{background:#17193F!important}
.lp[data-mode="dark"] .hero .phone .bq-bubble.in{background:rgba(255,255,255,.08)!important}

/* hero phone frame: clear glass */
.hero .phone{background:linear-gradient(140deg,rgba(255,255,255,.42),rgba(255,255,255,.10) 55%,rgba(255,255,255,.28))!important;
  border:1px solid rgba(255,255,255,.85)!important;backdrop-filter:blur(22px) saturate(180%)!important;-webkit-backdrop-filter:blur(22px) saturate(180%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.25),0 40px 80px -40px rgba(40,60,120,.35)!important}
.lp[data-mode="dark"] .hero .phone{background:linear-gradient(140deg,rgba(255,255,255,.12),rgba(255,255,255,.03))!important;border-color:rgba(255,255,255,.16)!important}

/* customer typing dots in the hero chat */
#heroChat{position:relative}
#heroChat .cust-typing{position:absolute;display:flex;gap:4px;padding:12px 14px;border-radius:18px;border-bottom-left-radius:6px;background:#F1F2F5;opacity:0;transform:translateY(6px) scale(.96);transition:opacity .25s,transform .35s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
#heroChat .cust-typing.on{opacity:1;transform:none}
#heroChat .cust-typing i{width:6px;height:6px;border-radius:50%;background:#8A8EAA;animation:fxDot 1s infinite}
#heroChat .cust-typing i:nth-child(2){animation-delay:.15s}#heroChat .cust-typing i:nth-child(3){animation-delay:.3s}
.lp[data-mode="dark"] #heroChat .cust-typing{background:rgba(255,255,255,.08)}
@keyframes fxDot{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
/* hero phone frame: neutral clear glass, not blue */
.hero .phone{background:linear-gradient(140deg,rgba(255,255,255,.55),rgba(255,255,255,.22) 55%,rgba(255,255,255,.4))!important;
  backdrop-filter:blur(18px) saturate(105%) brightness(1.06)!important;-webkit-backdrop-filter:blur(18px) saturate(105%) brightness(1.06)!important;
  border:1px solid rgba(255,255,255,.9)!important;box-shadow:inset 0 1px 0 #fff,0 40px 80px -44px rgba(20,22,58,.28)!important}

/* hero: let the moving colour and white bands show through */
.top .waves{opacity:.95!important;filter:blur(26px)!important}
.top .hero-mist{background:
  radial-gradient(40% 50% at 22% 48%,rgba(255,255,255,.78),rgba(255,255,255,0) 72%),
  radial-gradient(60% 34% at 50% 104%,rgba(255,255,255,.95),transparent 70%),
  linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 40%,rgba(255,255,255,.6))!important}

/* hero: extra white wash from the top and the left */
.top .hero-mist{background:
  linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.55) 16%,rgba(255,255,255,0) 38%),
  linear-gradient(90deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.6) 22%,rgba(255,255,255,.12) 45%,rgba(255,255,255,0) 58%),
  radial-gradient(40% 50% at 22% 48%,rgba(255,255,255,.7),rgba(255,255,255,0) 72%),
  radial-gradient(60% 34% at 50% 104%,rgba(255,255,255,.95),transparent 70%),
  linear-gradient(180deg,rgba(255,255,255,0) 60%,rgba(255,255,255,.6))!important}

/* hero: white dominant, colour as a soft moving tint */
.top .waves{opacity:.7!important}
.top .hero-mist{background:
  linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.65) 20%,rgba(255,255,255,.2) 45%,rgba(255,255,255,0) 60%),
  linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.75) 28%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.1) 70%),
  radial-gradient(40% 50% at 22% 48%,rgba(255,255,255,.8),rgba(255,255,255,0) 72%),
  radial-gradient(60% 34% at 50% 104%,rgba(255,255,255,.98),transparent 70%),
  linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,.7))!important}

/* hero: white page, a light moving gradient only on the right side */
.lp:not([data-mode="dark"]) .top{background:#FFFFFF!important}
.lp:not([data-mode="dark"]) .top .waves{opacity:.75!important;filter:blur(34px)!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 34%,rgba(0,0,0,.6) 52%,#000 68%);
  mask-image:linear-gradient(90deg,transparent 0%,transparent 34%,rgba(0,0,0,.6) 52%,#000 68%)}
.lp:not([data-mode="dark"]) .top .hero-mist{background:
  linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 22%,rgba(255,255,255,0) 72%,#FFFFFF 100%),
  linear-gradient(90deg,#FFFFFF 0%,#FFFFFF 30%,rgba(255,255,255,.35) 50%,rgba(255,255,255,0) 66%)!important}
.lp:not([data-mode="dark"]) .top .bq-ambient{display:none}
.lp:not([data-mode="dark"]) .top::before,.lp:not([data-mode="dark"]) .top::after{opacity:0!important}
.lp:not([data-mode="dark"]) .top .waves{opacity:1!important}

/* 24/7 section: no hours counter, schedule uses the full width */
#always .al-body{grid-template-columns:1fr!important}
#always .al-hours{display:none!important}
#always .week{width:100%}

/* dashboard: live chat plays on a loop, a guide cursor shows what can be clicked */
#dashCard{position:relative}
#dashCard .dv-msgs{min-height:236px;justify-content:flex-start}
#dashCard .dv-m{transition:opacity .35s ease,transform .45s cubic-bezier(.22,1,.36,1)}
#dashCard .dv-m.pre{opacity:0;transform:translateY(8px) scale(.98)}
#dashCard .dv-msgs.fade .dv-m{opacity:0;transform:translateY(-6px)}
#dashCard .dv-m.typing{display:inline-flex;gap:4px;align-items:center;padding:12px 14px}
#dashCard .dv-m.typing i{width:6px;height:6px;border-radius:50%;background:#8D93B5;animation:dvDot 1.1s infinite ease-in-out}
#dashCard .dv-m.typing i:nth-child(2){animation-delay:.15s}#dashCard .dv-m.typing i:nth-child(3){animation-delay:.3s}
@keyframes dvDot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-3px);opacity:1}}
.dv-guide{position:absolute;left:0;top:0;z-index:20;width:26px;height:26px;pointer-events:none;opacity:0;
  transition:transform 1.1s cubic-bezier(.65,0,.35,1),opacity .4s ease;filter:drop-shadow(0 6px 10px rgba(20,22,58,.28))}
.dv-guide.on{opacity:1}
.dv-guide svg{width:26px;height:26px;display:block}
.dv-guide .rip{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:2px solid var(--primary);opacity:0}
.dv-guide.tap .rip{animation:dvRip .7s ease-out}
.dv-guide.tap svg{animation:dvPress .35s ease}
@keyframes dvRip{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.9);opacity:0}}
@keyframes dvPress{50%{transform:scale(.86)}}
#dashCard .dv-hint{animation:dvHint 1.4s ease-out 2}
@keyframes dvHint{0%{box-shadow:0 0 0 0 rgba(75,79,216,.45)}100%{box-shadow:0 0 0 12px rgba(75,79,216,0)}}
@media (prefers-reduced-motion:reduce){.dv-guide{display:none}#dashCard .dv-hint{animation:none}}

/* hero headline: cleaner 24/7 */
.hero .lead{max-width:570px!important;text-wrap:pretty}
.hero .hero-word{background:linear-gradient(100deg,#4B4FD8 0%,#4F6FE6 55%,#3F8FE4 100%);-webkit-background-clip:text;background-clip:text}
.lp[data-mode="dark"] .hero .hero-word{background:var(--bq-aurora-text);-webkit-background-clip:text;background-clip:text}
.hero .h247{letter-spacing:-.025em;font-feature-settings:"tnum" 0}
.hero .h247 .sl{display:inline-block;margin:0 -.015em;transform:translateY(-.045em) scaleY(.86);color:#4C7DE8;-webkit-text-fill-color:#4C7DE8;background:none}
.lp[data-mode="dark"] .hero .h247 .sl{color:#A9C8FF;-webkit-text-fill-color:#A9C8FF}
/* guide cursor label */
.dv-guide .lab{position:absolute;left:22px;top:20px;white-space:nowrap;font:600 12px/1 var(--font-sans);color:#fff;background:#14163A;padding:7px 10px;border-radius:999px;
  box-shadow:0 8px 18px -8px rgba(20,22,58,.5);opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .4s cubic-bezier(.22,1,.36,1)}
.dv-guide.on .lab{opacity:1;transform:none}
.lp[data-mode="dark"] .dv-guide .lab{background:#fff;color:#14163A}


/* ===== site chrome: dropdown nav, mobile accordion, footer, Instagram button ===== */
.nav .site-links{display:flex;align-items:center;gap:8px;margin:0 auto}
.nav .nav-a,.nav .dd-btn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--ink-muted);
  padding:8px 16px;border-radius:999px;cursor:pointer;text-decoration:none;line-height:20px;transition:color .25s,background .25s}
.nav .nav-a:hover,.nav .dd-btn:hover,.nav .dd.open .dd-btn,.nav .nav-a.on,.nav .dd-btn.on{color:var(--ink)}
.nav .nav-a.on,.nav .dd-btn.on{background:var(--primary-soft)}
.nav .nav-a:focus-visible,.nav .dd-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.nav .dd-btn{gap:5px;padding-right:12px} .nav .dd-btn svg{width:10px;height:10px;opacity:.6;transition:transform .35s var(--bq-ease)}
.nav .dd.open .dd-btn svg{transform:rotate(180deg)}
.nav .dd{position:relative}
.dd-panel{position:absolute;top:calc(100% + 16px);left:-14px;z-index:40;padding:10px;border-radius:26px;
  background:rgba(255,255,255,.97);border:1px solid rgba(255,255,255,.95);
  backdrop-filter:blur(30px) saturate(150%);-webkit-backdrop-filter:blur(30px) saturate(150%);
  box-shadow:0 34px 80px -30px rgba(40,42,120,.38),0 2px 6px rgba(20,22,58,.04),inset 0 1px 0 #fff;
  opacity:0;transform:translateY(-8px) scale(.98);transform-origin:12% 0;pointer-events:none;visibility:hidden;
  transition:opacity .28s ease,transform .45s cubic-bezier(.16,1,.3,1),visibility 0s .45s}
.dd-panel::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.dd.open .dd-panel{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .28s ease,transform .45s cubic-bezier(.16,1,.3,1),visibility 0s}
.dd-panel > *{opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.dd.open .dd-panel > *{opacity:1;transform:none}
.dd.open .dd-panel > *:nth-child(2){transition-delay:.03s} .dd.open .dd-panel > *:nth-child(3){transition-delay:.06s}
.dd.open .dd-panel > *:nth-child(4){transition-delay:.09s} .dd.open .dd-panel > *:nth-child(5){transition-delay:.12s}
.lp[data-mode="dark"] .dd-panel{background:rgba(23,25,63,.92);border-color:rgba(255,255,255,.1);box-shadow:0 34px 80px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08)}
.dd-panel.mega{display:grid;grid-template-columns:268px 268px 230px;width:max-content;gap:4px}
.dd-panel.small{width:330px;display:flex;flex-direction:column;gap:2px}
.dd-item{display:flex;gap:13px;align-items:flex-start;padding:12px;border-radius:18px;text-decoration:none;color:var(--ink);transition:background .2s}
.dd-item:hover,.dd-item:focus-visible{background:var(--surface);outline:none}
.lp[data-mode="dark"] .dd-item:hover,.lp[data-mode="dark"] .dd-item:focus-visible{background:rgba(255,255,255,.06)}
.dd-ic{flex:none;width:38px;height:38px;border-radius:13px;display:grid;place-items:center;color:var(--primary);
  background:linear-gradient(145deg,#FFFFFF,var(--primary-soft));border:1px solid var(--line);transition:transform .3s var(--bq-ease)}
.dd-item:hover .dd-ic{transform:translateY(-1px) scale(1.04)}
.lp[data-mode="dark"] .dd-ic{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#A9C8FF}
.dd-ic svg{width:19px;height:19px}
.dd-item b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.dd-item b+span{display:block;font-size:13px;color:var(--ink-muted);line-height:1.45;margin-top:2px}
.dd-film{all:unset;box-sizing:border-box;grid-column:3;grid-row:1 / span 2;position:relative;overflow:hidden;cursor:pointer;border-radius:20px;padding:18px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:4px;min-height:184px;color:var(--ink);text-decoration:none;
  background:var(--surface);border:1px solid var(--line)}
.dd-film:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dd-film-glow{position:absolute;inset:0;z-index:0;background:
  radial-gradient(70% 60% at 85% 10%,var(--glow-1),transparent 70%),radial-gradient(60% 55% at 15% 20%,rgba(196,190,248,.55),transparent 70%),
  radial-gradient(70% 60% at 60% 70%,var(--glow-3),transparent 70%);filter:blur(6px);transition:transform .6s var(--bq-ease)}
.dd-film:hover .dd-film-glow{transform:scale(1.08)}
.dd-film>*:not(.dd-film-glow){position:relative;z-index:1}
.dd-play{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;margin-bottom:auto;color:var(--primary);
  background:rgba(255,255,255,.85);box-shadow:0 10px 24px -10px rgba(75,79,216,.6)}
.dd-play svg{width:16px;height:16px;margin-left:2px}
.dd-film b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.dd-film b+span{font-size:12.5px;line-height:1.45;color:var(--ink-muted)}
.lp[data-mode="dark"] .dd-film{background:#12143A;border-color:rgba(255,255,255,.08)}
.lp[data-mode="dark"] .dd-film-glow{opacity:.35}
.dd-foot{display:flex;gap:8px;align-items:center;padding:10px 14px 4px;margin-top:4px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-subtle)}
.dd-foot a{text-decoration:none;color:var(--ink-muted)} .dd-foot a:hover{color:var(--ink)}
.lp[data-mode="dark"] .dd-foot{border-color:rgba(255,255,255,.08)}

/* mobile accordion */
.mobile-menu .m-acc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:14px;font-weight:500;cursor:pointer}
.mobile-menu .m-acc summary::-webkit-details-marker{display:none}
.mobile-menu .m-acc summary svg{width:12px;height:12px;transition:transform .3s var(--bq-ease)}
.mobile-menu .m-acc[open] summary svg{transform:rotate(180deg)}
.mobile-menu .m-sub{display:flex;flex-direction:column;padding:0 0 6px 12px}
.mobile-menu .m-sub a{padding:11px 16px!important;font-size:15px;color:var(--ink-muted)}

/* footer */
footer.sf{display:block;border-top:1px solid var(--line);margin-top:72px;padding:56px 0 28px;font-size:14px;color:var(--ink-muted)}
.sf-top{display:grid;grid-template-columns:1.15fr 2fr;gap:48px}
.sf-logo{display:inline-flex;color:var(--ink)}
.sf-brand p{margin:16px 0 0;line-height:1.6;max-width:320px}
.sf-act{display:flex;align-items:center;gap:10px;margin-top:22px}
.sf-ig{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink);border:1px solid var(--line);background:var(--surface-raised);transition:transform .25s var(--bq-ease),color .2s}
.sf-ig:hover{transform:translateY(-2px);color:var(--primary)}
.sf-ig svg{width:18px;height:18px}
.sf-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.sf-cols h4{margin:0 0 14px;font-size:13px;font-weight:600;color:var(--ink);letter-spacing:0}
.sf-cols a{display:block;padding:5px 0;text-decoration:none;color:var(--ink-muted);transition:color .2s}
.sf-cols a:hover{color:var(--ink)}
.sf-bot{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:48px;padding-top:22px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-subtle)}
.sf-bot a{text-decoration:none} .sf-bot a:hover{color:var(--ink)}

/* one type style for every nav label */
.nav .nav-a,.nav .dd-btn,.nav .demo-link{font:500 16px/20px var(--font-sans)!important;letter-spacing:-.005em!important;color:var(--ink)!important}
.nav .nav-a:hover,.nav .dd-btn:hover,.nav .demo-link:hover,.nav .dd.open .dd-btn{color:var(--primary)!important}
.lp[data-mode="dark"] .nav .nav-a:hover,.lp[data-mode="dark"] .nav .dd-btn:hover,.lp[data-mode="dark"] .nav .demo-link:hover,.lp[data-mode="dark"] .nav .dd.open .dd-btn{color:#A9C8FF!important}
.nav .nav-a.on{color:var(--ink)!important}
/* nav items share one height and centre line */
.nav{align-items:center}
.nav .site-links,.nav .right{align-items:center}
.nav .nav-a,.nav .dd-btn,.nav .demo-link{height:40px!important;display:inline-flex!important;align-items:center!important;padding-top:0!important;padding-bottom:0!important;box-sizing:border-box}
.nav .demo-link{padding-left:14px!important;padding-right:14px!important}
/* one CTA size for nav and footer: 40px tall, 15px text */
.sf-act .bq-btn{height:40px!important;padding:0 22px!important;font-size:15px!important;font-weight:500!important}
/* nav CTA matches the hero and bottom-band CTAs */
.nav .right .bq-btn{height:56px!important;padding:0 28px!important;font-size:16px!important;font-weight:500!important}
.nav{padding:8px 8px 8px 24px!important}
.sf-ig{width:40px;height:40px}
.nav .right{gap:6px}
/* footer bottom row: theme switch, copyright, back to top */
.sf-bot .sf-copy{margin-right:auto}
.sf-bot{gap:18px}
/* dropdown: text only, no icons */
.dd-panel .dd-ic{display:none}
.dd-panel .dd-item{padding:14px 16px}
.dd-panel.mega{grid-template-columns:240px 240px 230px}
/* nav shrinks more on scroll */
@media (min-width:981px){
  .nav{transition:max-width .5s var(--bq-ease),padding .4s var(--bq-ease),box-shadow .3s,background .3s,top .4s var(--bq-ease)!important}
  .nav.scrolled{max-width:880px!important;
    background:rgba(255,255,255,.84)!important;backdrop-filter:blur(24px) saturate(160%)!important;-webkit-backdrop-filter:blur(24px) saturate(160%)!important}
  .lp .nav.bq-glass.scrolled,.lp .nav.scrolled{background:rgba(255,255,255,.84)!important}
  .lp[data-mode="dark"] .nav.bq-glass.scrolled,.lp[data-mode="dark"] .nav.scrolled{background:rgba(20,22,58,.86)!important}
}
/* About us dropdown: three links stacked + video card */
.dd-panel.mega.mega3{grid-template-columns:290px 230px!important}
.dd-panel.mega3 .dd-film{grid-column:2;grid-row:1 / span 3}
/* floating WhatsApp button */
.wa-fab{position:fixed;right:22px;bottom:22px;z-index:45;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#25D366;
  box-shadow:0 16px 34px -12px rgba(18,140,70,.6),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .3s var(--bq-ease),box-shadow .3s;animation:waIn .6s var(--bq-ease) .8s both}
.wa-fab svg{width:29px;height:29px}
.wa-fab:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 20px 40px -12px rgba(18,140,70,.7),inset 0 1px 0 rgba(255,255,255,.35)}
.wa-fab:focus-visible{outline:3px solid rgba(37,211,102,.45);outline-offset:3px}
.wa-fab::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:waPulse 3.2s ease-out 2s infinite;pointer-events:none}
@keyframes waIn{from{opacity:0;transform:translateY(16px) scale(.8)}to{opacity:1;transform:none}}
@keyframes waPulse{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.wa-fab,.wa-fab::after{animation:none}}
.demo-link{text-decoration:none;padding:8px 6px;white-space:nowrap;transition:color .25s}
.demo-link:hover{color:var(--primary)}
.demo-link:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:8px}
.lp[data-mode="dark"] .demo-link:hover{color:#A9C8FF}
.nav .right{gap:14px;margin-left:0}
.mobile-menu .row{flex-wrap:wrap;gap:10px}
.mobile-menu .row .bq-toggle{flex-basis:100%;width:max-content;max-width:max-content}
.mobile-menu .row .bq-btn{flex:1 1 0}
.mobile-menu .row .demo-link{padding:12px 10px}
@media (max-width:980px){
  .nav .site-links{display:none}
  .nav .right{margin-left:auto}
  .nav .demo-link.cta-desk{display:none!important}
  .sf-top{grid-template-columns:1fr;gap:36px}
}
@media (max-width:620px){
  .sf-cols{grid-template-columns:1fr 1fr}
  .sf-cols>div:last-child{grid-column:1 / -1}
  footer.sf{padding-top:44px;margin-top:48px}
  .sf-bot{flex-direction:column;align-items:flex-start}
  .wa-fab{right:16px;bottom:16px;width:54px;height:54px}
}
/* ===== end site chrome ===== */

/* ===== sub-pages ===== */
body{margin:0}
.sub{min-height:100vh;background:var(--surface-raised)}
.pg-hero{position:relative;overflow:hidden;margin-top:-76px;padding:180px 0 72px}
.pg-hero .wrap{position:relative;z-index:2}
.pg-aura{position:absolute;inset:-10% -5% 0;z-index:0;pointer-events:none;filter:blur(30px);opacity:.95;
  background:
   radial-gradient(38% 55% at 82% 18%,var(--glow-1),transparent 70%),
   radial-gradient(30% 45% at 62% 4%,rgba(196,190,248,.55),transparent 70%),
   radial-gradient(34% 50% at 98% 62%,var(--glow-3),transparent 70%),
   radial-gradient(28% 40% at 40% 30%,var(--glow-4),transparent 70%);
  animation:pgDrift 22s ease-in-out infinite alternate}
@keyframes pgDrift{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.06)}}
.pg-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.55) 35%,rgba(255,255,255,0) 65%),
  linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 60%,#fff 100%)}
.lp[data-mode="dark"] .pg-aura{opacity:.35}
.lp[data-mode="dark"] .pg-hero::after{background:linear-gradient(90deg,rgba(13,14,38,.9),rgba(13,14,38,.4) 45%,transparent 70%),linear-gradient(180deg,rgba(13,14,38,.5),transparent 35%,transparent 60%,var(--surface))}
.lp[data-mode="dark"].sub{background:var(--surface)}
.plan .bq-btn.glass,.cta-strip .bq-btn.glass{background:var(--surface-raised);border:1px solid var(--line);box-shadow:0 8px 20px -14px rgba(20,22,58,.35)}
.lp[data-mode="dark"] .plan .bq-btn.glass,.lp[data-mode="dark"] .cta-strip .bq-btn.glass{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.pg-hero .h-1{margin:0;max-width:760px}
.pg-hero .lead{margin-top:18px}
.pg-meta{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:13px;color:var(--ink-subtle)}
.pg-meta i{width:6px;height:6px;border-radius:50%;background:var(--primary);display:inline-block}
.pg-sec{padding:24px 0 40px}
.pg-sec+.pg-sec{padding-top:64px}
.sec-h{font-size:32px;line-height:1.1;font-weight:500;letter-spacing:-.03em;margin:0}
.sec-sub{font-size:16px;color:var(--ink-muted);margin:10px 0 0;max-width:560px;line-height:1.55}

/* cards */
.gcard{position:relative;border-radius:28px;background:rgba(255,255,255,.72);border:1px solid var(--line);
  box-shadow:0 30px 70px -44px rgba(40,42,120,.35);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.lp[data-mode="dark"] .gcard{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09);box-shadow:0 30px 70px -44px rgba(0,0,0,.8)}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{padding:30px 28px 28px;display:flex;flex-direction:column}
.plan .pn{font-size:15px;font-weight:600;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:10px}
.plan .pf{font-size:14px;color:var(--ink-muted);margin-top:6px;min-height:21px}
.plan .pp{display:flex;align-items:baseline;gap:6px;margin-top:26px;color:var(--ink)}
.plan .pp small{font-size:15px;font-weight:600;color:var(--ink-muted)}
.plan .pp b{font-size:56px;line-height:1;font-weight:500;letter-spacing:-.045em}
.plan .pp em{font-style:normal;font-size:15px;color:var(--ink-muted)}
.plan .pp.talk b{font-size:44px}
.plan .pv{margin-top:10px;font-size:14px;font-weight:500;color:var(--primary)}
.plan ul{list-style:none;padding:0;margin:24px 0 28px;display:flex;flex-direction:column;gap:12px;font-size:14.5px;color:var(--ink)}
.plan li{display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.plan li::before{content:"";flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;
  background:var(--primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.5L13 6.4' fill='none' stroke='%234B4FD8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.plan .bq-btn{margin-top:auto;width:100%}
.plan.hot{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.8));border:1.5px solid rgba(75,79,216,.45);box-shadow:0 40px 90px -40px rgba(75,79,216,.45)}
.plan.hot::before{content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;filter:blur(36px);opacity:.55;
  background:radial-gradient(60% 50% at 50% 0%,var(--glow-1),transparent 70%)}
.lp[data-mode="dark"] .plan.hot{background:rgba(75,79,216,.14);border-color:rgba(169,200,255,.4)}
.pill{font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--primary);color:#fff;letter-spacing:.01em}
.plans-note{margin-top:18px;font-size:13px;color:var(--ink-subtle);text-align:center}
.incl{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.incl .it{display:flex;gap:14px;align-items:flex-start;padding:20px;border-radius:22px;background:var(--surface);border:1px solid var(--line)}
.lp[data-mode="dark"] .incl .it{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08)}
.incl .it b{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.incl .it span{display:block;font-size:13.5px;color:var(--ink-muted);margin-top:3px;line-height:1.45}
.qa-list{margin-top:28px;display:flex;flex-direction:column;gap:10px}
.qa-list details{border-radius:20px;border:1px solid var(--line);background:var(--surface-raised);padding:0 22px}
.lp[data-mode="dark"] .qa-list details{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08)}
.qa-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-size:16px;font-weight:500;color:var(--ink)}
.qa-list summary::-webkit-details-marker{display:none}
.qa-list summary::after{content:"+";font-size:22px;font-weight:300;color:var(--ink-subtle);transition:transform .3s var(--bq-ease)}
.qa-list details[open] summary::after{transform:rotate(45deg)}
.qa-list p{margin:0 0 20px;color:var(--ink-muted);line-height:1.6;font-size:15px}
.cta-strip{margin-top:72px;padding:44px;border-radius:32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;position:relative;overflow:hidden;
  background:radial-gradient(60% 120% at 100% 0%,var(--glow-1),transparent 60%),radial-gradient(50% 120% at 70% 100%,var(--glow-3),transparent 60%),radial-gradient(40% 90% at 40% 0%,rgba(196,190,248,.35),transparent 70%),var(--surface);border:1px solid var(--line)}
.lp[data-mode="dark"] .cta-strip{background:radial-gradient(60% 120% at 100% 0%,#1E3F7A,transparent 60%),radial-gradient(50% 120% at 70% 100%,#2A2F7A,transparent 60%),#12143A;border-color:rgba(255,255,255,.08)}
.cta-strip h3{margin:0;font-size:30px;font-weight:500;letter-spacing:-.03em;color:var(--ink)}
.cta-strip p{margin:8px 0 0;color:var(--ink-muted)}
.cta-strip .acts{display:flex;gap:10px;flex-wrap:wrap}

/* legal */
.legal-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:56px;align-items:start}
.toc{position:sticky;top:104px;display:flex;flex-direction:column;gap:2px;font-size:13.5px}
.toc b{font-size:12px;font-weight:600;color:var(--ink-subtle);text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px 12px}
.toc a{padding:7px 12px;border-radius:10px;text-decoration:none;color:var(--ink-muted);border-left:2px solid transparent;transition:all .2s}
.toc a:hover{color:var(--ink);background:var(--surface)}
.toc a.on{color:var(--primary);background:var(--primary-soft)}
.lp[data-mode="dark"] .toc a.on{color:#A9C8FF;background:rgba(169,200,255,.1)}
.legal{max-width:740px;color:var(--ink-muted);font-size:16px;line-height:1.7}
.legal .summary{padding:24px 26px;border-radius:22px;background:var(--surface);border:1px solid var(--line);margin-bottom:40px;color:var(--ink)}
.lp[data-mode="dark"] .legal .summary{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.legal .summary b{display:block;font-size:13px;font-weight:600;color:var(--primary);margin-bottom:8px}
.lp[data-mode="dark"] .legal .summary b{color:#A9C8FF}
.legal .summary ul{margin:0;padding-left:18px}
.legal h2{font-size:22px;line-height:1.25;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:44px 0 12px;scroll-margin-top:110px}
.legal h2:first-of-type{margin-top:0}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 14px;padding-left:20px}
.legal li{margin:6px 0}
.legal a{color:var(--primary)}
.lp[data-mode="dark"] .legal a{color:#A9C8FF}
.legal strong{color:var(--ink);font-weight:600}

/* data deletion + contact */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.steps3 .st{padding:26px}
.steps3 .num{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-weight:600;font-size:15px;color:var(--primary);background:var(--primary-soft);margin-bottom:18px}
.steps3 b{display:block;font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.steps3 p{margin:6px 0 0;font-size:14.5px;color:var(--ink-muted);line-height:1.55}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;align-items:start}
.list-card{padding:26px 28px}
.list-card h3{margin:0 0 12px;font-size:17px;font-weight:600;color:var(--ink)}
.list-card ul{margin:0;padding-left:18px;color:var(--ink-muted);line-height:1.7;font-size:15px}
.form-card{padding:30px}
.form-card h3{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.form-card .body{margin-top:6px}
.sform{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.sform .full{grid-column:1 / -1}
.sform label{display:block;font-size:13px;font-weight:500;color:var(--ink);margin-bottom:6px}
.sform input,.sform select,.sform textarea{width:100%;box-sizing:border-box;height:48px;padding:0 16px;border-radius:14px;border:1px solid var(--line);background:var(--surface-raised);
  font:15px var(--font-sans);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.sform textarea{height:120px;padding:14px 16px;resize:vertical}
.sform input:focus,.sform select:focus,.sform textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(75,79,216,.12)}
.lp[data-mode="dark"] .sform input,.lp[data-mode="dark"] .sform select,.lp[data-mode="dark"] .sform textarea{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.sform .err{display:block;font-size:12px;color:var(--danger);min-height:0;margin-top:4px}
.sform .bq-btn{grid-column:1 / -1;width:100%;margin-top:6px}
.sform .cap{grid-column:1 / -1;text-align:center}
.sent{display:none;text-align:center;padding:30px 10px}
.sent .ok{width:56px;height:56px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;font-size:24px;color:#fff;background:var(--primary);box-shadow:var(--shadow-glow)}
.sent b{display:block;font-size:22px;color:var(--ink);font-weight:600}
.sent p{color:var(--ink-muted);margin:8px 0 0}
.form-card.done .sform,.form-card.done .fhead{display:none}
.form-card.done .sent{display:block}
.ways{display:flex;flex-direction:column;gap:12px}
.way{display:flex;gap:16px;align-items:center;padding:20px 22px;text-decoration:none;color:var(--ink);transition:transform .3s var(--bq-ease)}
a.way:hover{transform:translateY(-2px)}
.way .dd-ic{width:46px;height:46px;border-radius:15px}
.way .dd-ic svg{width:21px;height:21px}
.way b{display:block;font-size:15.5px;font-weight:600}
.way span span{display:block;font-size:14px;color:var(--ink-muted);margin-top:2px}
.way .go{margin-left:auto;color:var(--ink-subtle);font-size:18px}

@media (max-width:980px){
  .plans,.incl,.steps3{grid-template-columns:1fr}
  .plans{max-width:520px;margin:0 auto}
  .legal-grid{grid-template-columns:1fr;gap:24px}
  .toc{position:static;flex-direction:row;flex-wrap:wrap;gap:6px}
  .toc b{width:100%;margin-left:0}
  .toc a{border:1px solid var(--line);padding:6px 12px;border-radius:999px;font-size:13px}
  .two{grid-template-columns:1fr}
}
@media (max-width:620px){
  .pg-hero{padding:150px 0 44px}
  .pg-hero .h-1{font-size:40px}
  .sec-h{font-size:26px}
  .plan .pp b{font-size:48px}
  .sform{grid-template-columns:1fr}
  .cta-strip{padding:30px 24px;border-radius:26px}
  .cta-strip h3{font-size:24px}
  .form-card{padding:24px 20px}
  .toc{display:none}
}