/* auren-classic.css — the old Auren look (main branch) over the v2 markup.
   Loads LAST on index.html, ai-chat-agent.html and ai-receptionist.html,
   after auren-v2.css and auren-live-agent.css. Content, structure and all
   behaviour stay v2; only the look is the old one. Delete this file and its
   <link> to get the v2 look back.
   Five layers, in the order they were measured and tested together:
   1 global foundation · 2 hero/nav/buttons · 3 cards/panels/forms ·
   4 footer/chat/cookie banner · 5 mobile + motion. */

/* ==================================================================
   AUREN CLASSIC — 1. GLOBAL FOUNDATION
   Loads LAST on the three v2 pages (index, ai-chat-agent,
   ai-receptionist) — after auren-v2.css and auren-live-agent.css.
   (privacy, terms and 404 are already back on the old markup + old CSS
   since commit 4b04f80 and must NOT load this file.)
   Two old visual families, exactly as the old site had them:
   · DEFAULT  = old index.html (Webflow shell: Formular, white canvas,
                dashed background lines, #060910 hero, black footer).
   · PRODUCT  = old ai-chat-agent.html / ai-receptionist.html (".lp-*"
                system: Mulish 800 headings, Inter body, #f7f6f3 paper
                alternating with #060910 / #101114 / #0c1218 bands).
     Scoped with :root:has(canonical) so no markup change is needed.
   ================================================================== */

/* Inter + Mulish load from a <link> in each page's <head> (same families
   as old css/hero_cloned.css line 1, trimmed to the weights used). */

/* Formular — verbatim from old css/auren.webflow.shared.css (l.1819-1842) */
@font-face {
  font-family: Formular;
  src: url(https://cdn.prod.website-files.com/687d383c5c43a806fd4cd9cd/687d38ed30e97b3162bc7b0d_formular-regular-webfont.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Formular;
  src: url(https://cdn.prod.website-files.com/687d383c5c43a806fd4cd9cd/687d3909ad9e448eb655c393_formular-medium-webfont.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Formular Mono;
  src: url(https://cdn.prod.website-files.com/687d383c5c43a806fd4cd9cd/687d3922e498afe8bf1b0272_formular-mono-webfont.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------
   1.1 TOKENS
   ------------------------------------------------------------------ */
:root {
  /* type stacks */
  --c-font-primary: Formular, Arial, sans-serif;            /* webflow --_typography---font--primary-family */
  --c-font-mono: "Formular Mono", Georgia, sans-serif;      /* webflow --_typography---font--seconary-family */
  --c-font-display: Mulish, sans-serif;                     /* hero_cloned --main-font */
  --c-font-ui: Inter, sans-serif;                           /* hero_cloned --paragraph-font / auren-ui --aur-font */
  --c-font-lp-head: Mulish, Inter, sans-serif;              /* ai-chat-agent h1,h2,h3 */
  --c-font-lp-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* ai-chat-agent body */

  /* old palette */
  --c-dark: #060910;          /* auren-ui --aur-dark, hero --color--page-color, --lp-dark */
  --c-dark-soft: #0c1218;     /* auren-ui --aur-dark-soft, --lp-dark-2 */
  --c-ink-band: #101114;      /* --lp-ink (.lp-section--ink, .lp-marquee) */
  --c-paper: #f7f6f3;         /* --lp-paper */
  --c-orange: #f66f14;        /* auren-ui --aur-orange (button fill) */
  --c-orange-500: #f75d00;    /* webflow --color--orange-500 = --_theme---brand, --lp-orange */
  --c-orange-600: #c64a00;    /* webflow --color--orange-600 (.c-rich-text a) */
  --c-orange-soft: #ffad75;   /* auren-ui --aur-orange-soft, --lp-orange-soft */
  --c-orange-focus: #ff9a4d;  /* hero_cloned :focus-visible outline */
  --c-orange-900: #311300;    /* webflow --color--orange-900 (.faq_accordion_details) */
  --c-gray-50: #eff0f0;       /* webflow --_theme---onsurface-light-1 */
  --c-gray-200: #c5c7c8;      /* webflow --_theme---onsurface-weaker */
  --c-gray-700: #454748;      /* webflow --_theme---onsurface-soft */

  /* old layout */
  --c-margin: clamp(0.75rem, 0.608rem + 0.71vw, 1.25rem);   /* webflow --size--margin */
  --c-gutter: 1.25rem;                                     /* webflow --size--gutter */
  --c-max-main: 90rem;                                     /* webflow --max-width--main (90 * 1rem) */
  --c-ease-1: cubic-bezier(0.17, 0.25, 0.3, 1);            /* index inline --eas-1 */

  /* light palette of the current family (re-used by "light islands") */
  --c-l-ink: #000;            /* webflow --_theme---onsurface-dark (body colour) */
  --c-l-body: #000;
  --c-l-muted: var(--c-gray-700);
  --c-l-line: #e4e4e4;        /* index inline .aur-dna_list li border */
  --c-l-surface: var(--c-gray-50); /* .home_feat_content_card background */

  /* v2 token overrides */
  --bg: #ffffff;              /* webflow body background = --color--neutral-white */
  --surface: var(--c-l-surface);
  --line: var(--c-l-line);
  --ink: var(--c-l-ink);
  --muted: var(--c-l-muted);
  --accent: var(--c-orange-500);
  --accent-hover: var(--c-orange-600);
  --accent-soft: #fddfcc;                 /* webflow --_theme---brand-soft (= --color--orange-100) */
  --dark: var(--c-dark);
  --dark-2: var(--c-dark-soft);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);  /* auren-ui --aur-ease-out */
  --wrap: 72.75rem;                       /* webflow .c-container.cc-10cols */
}

/* PRODUCT family tokens (old ai-chat-agent.html / ai-receptionist.html :root) */
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) {
  --c-l-ink: #101114;         /* --lp-ink */
  --c-l-body: #43474d;        /* --lp-body */
  --c-l-muted: #43474d;
  --c-l-line: #e6e5e1;        /* --lp-line */
  --c-l-surface: #ffffff;     /* .lp-prod-card / .lp-enemy li background */
  --bg: var(--c-paper);
  --wrap: 72rem;              /* .lp-wrap max-width */
}

/* ------------------------------------------------------------------
   1.2 BASE
   ------------------------------------------------------------------ */
body {
  font-family: var(--c-font-primary);
  font-size: 1rem;                          /* .c-text-3 */
  line-height: 1.32;                        /* .c-text-3 (--line-height--1-32) */
  font-weight: 400;
  color: var(--c-l-body);
  background: var(--bg);
}
strong, b { font-weight: 700; }

h1, h2, h3 {
  font-family: var(--c-font-primary);
  font-weight: 400;                         /* .c-title-0/1/2 regular */
  letter-spacing: -0.05em;                  /* .c-title-2 */
  color: var(--ink);
}

:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) body,
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) body {
  font-family: var(--c-font-lp-body);
  font-size: 1.0625rem;
  line-height: 1.65;
}
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) :is(h1, h2, h3),
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) :is(h1, h2, h3) {
  font-family: var(--c-font-lp-head);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) strong,
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) strong { color: var(--ink); }

/* focus — old hero_cloned.css: outline 2px solid #ff9a4d; offset 3px */
:focus-visible { outline: 2px solid var(--c-orange-focus); outline-offset: 3px; }

/* ------------------------------------------------------------------
   1.3 CONTAINER + SECTION RHYTHM
   ------------------------------------------------------------------ */
/* .c-container.cc-10cols: width calc(100% - margin*2), no side padding */
.wrap {
  width: calc(100% - var(--c-margin) * 2);
  max-width: var(--wrap);
  padding: 0;
}
/* sections that sat in the full 90rem .c-container on the old index
   (#calculator, #business-excellence, #how-it-works, #faq) */
#ceni .wrap, #vaprosi .wrap { max-width: var(--c-max-main); }
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) :is(#ceni, #vaprosi) .wrap,
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) :is(#ceni, #vaprosi) .wrap { max-width: var(--wrap); }

/* .c-section-padding: 4.25rem / 3.125rem (<=767) / 3rem (<=479) */
main > section { padding: 4.25rem 0; }
@media (max-width: 767px) { main > section { padding: 3.125rem 0; } }
@media (max-width: 479px) { main > section { padding: 3rem 0; } }

:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) .wrap,
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) .wrap {
  width: 100%;
  max-width: var(--wrap);
  padding: 0 1.5rem;                        /* .lp-wrap */
}
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) main > section,
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) main > section {
  padding: clamp(4.5rem, 10vw, 8rem) 0;     /* .lp-section */
}
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) main > section.tagline,
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) main > section.tagline {
  padding: clamp(3rem, 7vw, 5rem) 0;        /* .lp-section--tight */
}

/* ------------------------------------------------------------------
   1.4 SECTION HEADS + TEXT UTILITIES
   ------------------------------------------------------------------ */
/* .section_header_wrap margin-bottom 3.75rem; title wrap .c-max-6-col */
.sec-head { max-width: 43.125rem; margin-bottom: 3.75rem; }
/* .c-title-2 */
.sec-head h2 {
  font-size: clamp(2.5rem, 2.322rem + 0.89vw, 3.125rem);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.05em;
}
/* .c-text-2 — 16px gap under the h2 measured in old #live-agent */
.sec-head p {
  margin-top: 1rem;
  font-size: clamp(1.125rem, 1.089rem + 0.18vw, 1.25rem);
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: var(--ink);
}
/* old #faq h2 + #how-it-works h2 were .c-title-0 */
#vaprosi .sec-head h2 {
  font-size: clamp(3.75rem, 3.108rem + 3.21vw, 6rem);
  line-height: 0.88;
  letter-spacing: -0.07em;
}

/* h3 in cards = .c-title-3 (uppercase medium) */
.door h3, .steps h3, .benefits h3, .rung h3, .split h3, .founder h3, .form-done h3 {
  font-family: var(--c-font-primary);
  font-size: clamp(1.125rem, 1.089rem + 0.18vw, 1.25rem);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.muted { color: var(--muted); }
/* .small = .c-text-4-mono */
.small { font-family: var(--c-font-mono); font-size: 0.75rem; line-height: 1.2; }
/* .fine = .aur-inline-cta_note size/colour, .aur-inline-cta_line leading */
.fine { font-size: 0.8rem; line-height: 1.45; color: rgba(10, 12, 16, 0.45); }

/* .link = .c-text-link + its ::before underline that retracts on hover */
.link {
  position: relative;
  font-weight: inherit;
  text-decoration: none;
  transition: color 0.3s;                    /* .c-text-link */
}
.link::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 2px;
  left: 0;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: bottom left;
  transition: transform 0.5s var(--c-ease-1) 0.15s;  /* --dur-3 --eas-1, delay .15s */
}
.link:hover { color: inherit; }
.link:hover::before { transform: scaleX(0); transform-origin: bottom right; }

/* PRODUCT family heads + text */
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) .sec-head,
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) .sec-head {
  max-width: 46rem;                          /* .lp-narrow */
  margin-bottom: 2.75rem;                    /* .lp-prod/.lp-steps/.lp-call margin-top */
}
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) .sec-head h2,
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) .sec-head h2,
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) #vaprosi .sec-head h2,
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) #vaprosi .sec-head h2 {
  font-size: clamp(1.8rem, 4.4vw, 3rem);     /* .lp-h2 */
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
}
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) .sec-head p,
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) .sec-head p {
  margin-top: 1.4rem;                        /* .lp-lead */
  font-size: clamp(1.075rem, 1.4vw, 1.3rem);
  line-height: 1.6;
  letter-spacing: normal;
  color: inherit;
}
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) :is(.door, .benefits, .rung, .split, .founder, .form-done) h3,
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) :is(.door, .benefits, .rung, .split, .founder, .form-done) h3 {
  font-family: var(--c-font-lp-head);
  font-size: 1.1rem;                         /* .lp-prod-card h3 */
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: none;
}
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) .steps h3,
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) .steps h3 {
  font-family: var(--c-font-lp-head);
  font-size: 1.05rem;                        /* .lp-step h3 */
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: none;
}
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) .small,
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) .small {
  font-family: inherit;
  font-size: 0.85rem;                        /* .lp-call-foot */
  line-height: inherit;
}
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) .fine,
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) .fine {
  font-size: 0.95rem;                        /* .lp-integrations */
  line-height: inherit;
  color: var(--muted);
}
/* product pages: plain underlined inline links (old inline style) */
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) .link,
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) .link {
  text-decoration: underline;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
}
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) .link::before,
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) .link::before { content: none; }

/* ------------------------------------------------------------------
   1.5 HERO TYPE (layout/visual left to the hero group)
   ------------------------------------------------------------------ */
.hero { font-family: var(--c-font-ui); }
/* hero_cloned.css #ovo-hero-wrapper .hero-title */
.hero h1 {
  font-family: var(--c-font-display);
  font-size: clamp(2.05rem, 5.2vw + 0.4rem, 4.3rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
  font-weight: 500;
  max-width: none;
  padding-bottom: 0;
  background: linear-gradient(178deg, #ffffff 0%, #ffffffdb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@media (max-width: 479px) { .hero h1 { line-height: 1.12; letter-spacing: -0.018em; } }
/* .hero-lead */
.hero .lead {
  font-size: clamp(1.02rem, 0.75vw + 0.62rem, 1.2rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.87);
}
/* .hero-trust */
.hero-proof { font-size: 0.85rem; color: rgba(255, 255, 255, 0.62); }

:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) .hero h1,
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) .hero h1 {
  font-family: var(--c-font-lp-head);
  font-weight: 800;
  font-size: clamp(2.05rem, 5.4vw, 3.7rem);  /* ai-chat-agent .lp-hero h1 */
  line-height: 1.1;
  letter-spacing: -0.025em;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #fff;
}
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) .hero h1 {
  font-size: clamp(2.15rem, 5.6vw, 3.9rem);  /* ai-receptionist .lp-hero h1 */
  line-height: 1.08;
}
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) .hero .lead,
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) .hero .lead {
  font-size: clamp(1.02rem, 1.25vw, 1.18rem); /* .lp-hero-lead */
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.74);
}
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) .hero-proof,
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) .hero-proof {
  font-size: 0.98rem;                        /* .lp-hero-sub */
  color: rgba(255, 255, 255, 0.55);
}

/* ------------------------------------------------------------------
   1.6 LIGHT / DARK SECTION MAP
   ------------------------------------------------------------------ */
/* DEFAULT (old index): hero dark, everything between hero and the offer
   bookend is light and transparent over the white canvas (so the dashed
   lines show through), the test is the dark inset panel the calculator
   was, .final is the dark rounded offer bookend, footer is black. */
.hero { background-color: var(--c-dark); }                      /* #ovo-hero-wrapper */
.test {
  width: calc(100% - var(--c-margin) * 2);                       /* .c-container */
  max-width: var(--c-max-main);
  margin: 0 auto;
  background: linear-gradient(165deg, #141416, #0d0d0f);         /* .aur-calc_panel */
  border: 1px solid #26262a;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.final {
  background: var(--c-dark);                                     /* .aur-offer */
  border-radius: clamp(20px, 4vw, 44px);
  margin: 5rem auto;
  max-width: min(96rem, calc(100% - 2rem));
  text-align: center;
  font-family: var(--c-font-ui);
}
main > section.test { padding: 2.75rem; }                       /* .aur-calc_panel >=768 */
@media (max-width: 767px) { main > section.test { padding: 1.75rem; } }
.test .wrap { width: 100%; }
main > section.final,
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) main > section.final,
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) main > section.final {
  padding: clamp(4rem, 9vw, 8.5rem) clamp(1.5rem, 6vw, 6rem);   /* .aur-offer */
}
.final .wrap,
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) .final .wrap,
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) .final .wrap { width: auto; padding: 0; }
.final h2 {                                                      /* .aur-offer_title */
  font-family: var(--c-font-ui);
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 46rem;                                              /* .aur-offer_inner */
  margin: 0 auto 1.75rem;
}
.final p {                                                       /* .aur-offer_lead */
  color: #b9bcbf;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.7;
  max-width: 38rem;
  margin: 0 auto 3rem;
}
.footer { background-color: #000; border-top: 0; }               /* .footer_wrap */

/* PRODUCT pages: old .lp-section rhythm */
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) .hero,
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) .hero {
  background: radial-gradient(120% 90% at 78% 0%, #14202e 0%, var(--c-dark) 55%);
}
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) :is(#demo, .tagline),
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) :is(#demo, .tagline) {
  background: var(--c-ink-band);             /* .lp-section--ink / .lp-marquee */
}
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) .test,
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) .test {
  width: auto; max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none;
  background: var(--c-dark);                 /* .lp-section--dark */
}
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) main > section:not(.test):has(.steps),
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) main > section:not(.test):has(.steps) {
  background: var(--c-dark-soft);            /* #kak-raboti */
}
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) main > section:has(.split),
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) main > section:has(.split) {
  background: var(--c-dark);                 /* #dna .lp-section--dark */
}
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) .final h2,
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) .final h2 {
  font-family: var(--c-font-lp-head);        /* page h2 rule wins over Inter on the old product pages */
  font-weight: 600;
}
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) .footer,
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) .footer {
  background-color: var(--c-dark);           /* .lp-foot */
  background-image: none;                    /* no dashed lines on the old product pages */
}

/* Shared dark-section behaviour (.lp-section--dark / #ovo-hero-wrapper):
   text rgba(255,255,255,.72), headings + strong #fff, cards on dark
   rgba(255,255,255,.04) / border rgba(255,255,255,.1) (.lp-section--dark .lp-enemy li) */
.hero, .test, .final, .footer,
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) :is(#demo, .tagline, main > section:not(.test):has(.steps), main > section:has(.split)),
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) :is(#demo, .tagline, main > section:not(.test):has(.steps), main > section:has(.split)) {
  --ink: #fff;
  --muted: rgba(255, 255, 255, 0.72);
  --line: rgba(255, 255, 255, 0.1);
  --surface: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.72);
}
:is(.hero, .test, .final, .footer) :is(h1, h2, h3, strong) { color: #fff; }
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) :is(#demo, .tagline, main > section:not(.test):has(.steps), main > section:has(.split)) :is(h2, h3, strong),
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) :is(#demo, .tagline, main > section:not(.test):has(.steps), main > section:has(.split)) :is(h2, h3, strong) { color: #fff; }
/* v2 .test hard-codes #B9C0BE grey text */
.test .sec-head p, .test .muted, .test .steps p { color: rgba(255, 255, 255, 0.72); }

/* light islands: v2 elements with a hard-coded white fill keep the light
   palette even inside a dark section (otherwise white-on-white) */
.bubble, .agent-mount, .btn-light, .tab[aria-selected="true"], .door {
  --ink: var(--c-l-ink);
  --muted: var(--c-l-muted);
  --line: var(--c-l-line);
  --surface: var(--c-l-surface);
  color: var(--ink);
}

/* ------------------------------------------------------------------
   1.7 TAGLINE TYPE
   ------------------------------------------------------------------ */
/* index: .c-title-0 type, words light up from webflow onsurface-weaker
   (old marquee colour) to onsurface-dark */
.tagline p {
  font-family: var(--c-font-primary);
  font-size: clamp(3.75rem, 3.108rem + 3.21vw, 6rem);
  line-height: 0.88;
  font-weight: 400;
  letter-spacing: -0.07em;
}
.tagline .w { color: var(--c-gray-200); }
.tagline .w.on { color: #000; }
/* product: .lp-marquee band — Mulish 800 white on #101114 */
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) .tagline p,
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) .tagline p {
  font-family: var(--c-font-lp-head);
  font-size: clamp(1.8rem, 4.4vw, 3rem);     /* .lp-h2 scale */
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.01em;                   /* .lp-marquee-track span */
}
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) .tagline .w,
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) .tagline .w { color: rgba(255, 255, 255, 0.34); } /* .aur-calc_assumption */
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) .tagline .w.on,
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) .tagline .w.on { color: #fff; }

/* ------------------------------------------------------------------
   1.8 DASHED BACKGROUND LINES (old .page_bg-lines_wrap, index family)
   fixed 4-col grid in .c-container, gap 1.25rem, each column shifted
   left by gutter/2, first column hidden -> 3 lines at 25%-5px, 50%,
   75%+5px; 1px, linear-gradient(black 60%, transparent 0) 1px x 12px,
   opacity .08. <=991px: centre line only.
   ------------------------------------------------------------------ */
body::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: calc(100% - var(--c-margin) * 2);
  max-width: var(--c-max-main);
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  opacity: 0.08;
  background-image:
    linear-gradient(black 60%, rgba(255, 255, 255, 0) 0%),
    linear-gradient(black 60%, rgba(255, 255, 255, 0) 0%),
    linear-gradient(black 60%, rgba(255, 255, 255, 0) 0%);
  background-size: 1px 12px;
  background-repeat: repeat-y;
  background-position: calc(25% - 5px) 0, 50% 0, calc(75% + 5px) 0;
}
@media (max-width: 991px) {
  body::before {
    background-image: linear-gradient(black 60%, rgba(255, 255, 255, 0) 0%);
    background-position: 50% 0;
  }
}
/* footer: data-wf--bg-dashed-lines--variant="dark-mode" — white lines,
   .w-variant-2f9a776c… opacity .16 (baked into the gradient colour here
   because the lines are a background, not an element) */
.footer {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.16) 60%, rgba(255, 255, 255, 0) 0%),
    linear-gradient(rgba(255, 255, 255, 0.16) 60%, rgba(255, 255, 255, 0) 0%),
    linear-gradient(rgba(255, 255, 255, 0.16) 60%, rgba(255, 255, 255, 0) 0%);
  background-size: 1px 12px;
  background-repeat: repeat-y;
  background-position:
    calc(50% - min(22.5rem, 25% - var(--c-margin) / 2) - 5px) 0,
    50% 0,
    calc(50% + min(22.5rem, 25% - var(--c-margin) / 2) + 5px) 0;
}
@media (max-width: 991px) {
  .footer {
    background-image: linear-gradient(rgba(255, 255, 255, 0.16) 60%, rgba(255, 255, 255, 0) 0%);
    background-position: 50% 0;
  }
}
/* no lines on the old product pages */
:root:has(link[rel="canonical"][href$="/ai-chat-agent.html"]) body::before,
:root:has(link[rel="canonical"][href$="/ai-receptionist.html"]) body::before { content: none; }


/* =====================================================================
   AUREN CLASSIC — hero, navigation, buttons
   Re-skins the v2 markup in the old (main-branch) visual language.
   Sources: css/hero_cloned.css (#ovo-hero-wrapper), css/auren-ui.css
   (.aur-nav, .aur-menu, .aur-sticky-cta, .aur-btn-glow), the inline <style>
   of the old ai-chat-agent.html / ai-receptionist.html (.lp-hero, .lp-phone,
   .lp-bub, .lp-ghost), css/booking.css (.booking-btn-primary) and the inline
   .c-button / .c-text-link rules of the old index.html.
   Needs Inter 400-700 and Mulish 500/800 (see notes).
   ===================================================================== */

:root{
  --aur-dark:#060910;            /* auren-ui.css --aur-dark, hero --color--page-color */
  --aur-dark-soft:#0c1218;       /* --aur-dark-soft */
  --aur-orange:#f66f14;          /* --aur-orange, hero --color--brand-color */
  --aur-orange-deep:#f75d00;     /* --aur-orange-deep, --lp-orange, webflow --color--orange-500 */
  --aur-orange-soft:#ffad75;     /* --aur-orange-soft, hero --color--gradient-color-01 */
  --aur-font:Inter,sans-serif;   /* --aur-font, hero --paragraph-font */
  --aur-font-head:Mulish,Inter,sans-serif; /* hero --main-font, .lp h1 */
  --aur-ease-out:cubic-bezier(0.16,1,0.3,1);
  --aur-eas-1:cubic-bezier(0.17,0.25,0.3,1);  /* old index :root --eas-1 */
  --hero-gap-s:clamp(0.5rem,0.8vw,0.75rem);
  --hero-gap-m:clamp(0.9rem,1.3vw,1.25rem);
  --hero-gap-l:clamp(1.25rem,2vw,1.75rem);
}

/* ---------------------------------------------------------------------
   1. NAVIGATION  (.aur-nav / .aur-nav_inner)
   --------------------------------------------------------------------- */
.nav-wrap{top:0;padding:1.1rem 1.5rem;font-family:var(--aur-font)}
.nav{
  width:100%;max-width:74rem;margin:0 auto;
  justify-content:space-between;gap:1.5rem;
  padding:.55rem .65rem .55rem 1.1rem;border-radius:18px;
  /* .aur-nav.is-scrolled .aur-nav_inner — the resting state when there is
     no scroll timeline, and on pages without a dark hero (legal pages) */
  background-color:rgba(6,9,16,.72);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(247,114,24,.16);
  box-shadow:0 12px 40px rgba(0,0,0,.35),inset 0 -8px 24px rgba(246,112,20,.08);
  transition:background-color .45s var(--aur-ease-out),border-color .45s var(--aur-ease-out),box-shadow .45s var(--aur-ease-out),transform .45s var(--aur-ease-out);
}
/* auren-ui.js toggled .is-scrolled at scrollY > 40. Same thing, CSS only:
   transparent over the hero, glass from 40px of scroll. */
@supports (animation-timeline:scroll()){
  body:has(.hero) .nav{animation:aurNavGlass linear both;animation-timeline:scroll(root);animation-range:0 40px}
  @keyframes aurNavGlass{
    from{background-color:rgba(6,9,16,0);border-color:rgba(247,114,24,0);box-shadow:0 12px 40px rgba(0,0,0,0),inset 0 -8px 24px rgba(246,112,20,0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}
  }
}

/* .aur-progress: 2px scroll-progress rule along the top edge (was JS-driven) */
@supports (animation-timeline:scroll()){
  .nav-wrap::before{
    content:"";position:absolute;z-index:3;top:0;left:0;right:0;height:2px;pointer-events:none;
    background:linear-gradient(90deg,var(--aur-orange-deep),var(--aur-orange-soft));
    transform-origin:0 50%;transform:scaleX(0);
    animation:aurProgress linear both;animation-timeline:scroll(root);
  }
  @keyframes aurProgress{to{transform:scaleX(1)}}
}

/* logo: .aur-nav_logo img {height:2rem} — the wordmark text stays for AT */
.brand{
  display:inline-flex;flex:none;width:2rem;height:2rem;
  background:url(/Auren_logo.webp) center/contain no-repeat;
  color:transparent;font-size:0;line-height:0;overflow:hidden;white-space:nowrap;
}

.nav-links{gap:2rem;margin:0 auto;align-items:center}
.nav-links a{
  display:inline-block;padding:.4rem 0;
  color:#e6e7e8;font-size:.9rem;line-height:1;font-weight:500;letter-spacing:.01em;
  transition:color .45s var(--aur-ease-out);   /* .aur-roll timing */
}
.nav-links a:hover{color:var(--aur-orange-soft)}         /* .aur-roll second line colour */
.nav-links a[aria-current="page"]{color:#e6e7e8;text-decoration-color:var(--aur-orange)}
.nav-links a[aria-current="page"]:hover{color:var(--aur-orange-soft)}

/* nav CTA: .aur-nav_cta */
.nav .btn-sm{
  min-height:0;gap:7px;padding:9px 16px;border-radius:13px;
  border:1px solid #ba530e;
  background:var(--aur-orange) radial-gradient(circle farthest-corner at 50% 100%,var(--aur-orange-soft),rgba(246,111,20,0) 79%);
  color:#fff;font-family:var(--aur-font);font-size:.875rem;line-height:1;font-weight:500;white-space:nowrap;
  box-shadow:0 0 24px rgba(242,147,84,.45);
  transition:box-shadow .375s,border-color .375s;
}
.nav .btn-sm::after{width:11px}
.nav .btn-sm:hover{
  transform:none;
  background:var(--aur-orange) radial-gradient(circle farthest-corner at 50% 100%,var(--aur-orange-soft),rgba(246,111,20,0) 79%);
  border-color:var(--aur-orange);
  box-shadow:inset 0 6px 5px rgba(255,255,255,.2),0 7px 30px rgba(246,112,20,.6);
}
.nav .btn-sm:focus-visible{border-radius:13px}

/* burger: .aur-nav_burger (3 bars; the middle one is ::before) */
.nav-toggle{flex:none;width:42px;height:42px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.04)}
.nav-toggle span,.nav-toggle::before{
  position:absolute;left:12px;right:12px;width:auto;height:1.5px;border-radius:0;background:#fff;
  transition:transform .4s var(--aur-ease-out),opacity .3s;
}
.nav-toggle::before{content:"";top:20.5px}
.nav-toggle span:first-child,.nav-toggle[aria-expanded="true"] span:first-child{top:15px}
.nav-toggle span:last-child,.nav-toggle[aria-expanded="true"] span:last-child{top:26px}
.nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(5.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"]::before{opacity:0}
.nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-5.5px) rotate(-45deg)}
.nav-toggle:focus-visible{border-radius:12px}

@media (max-width:991px){
  .nav-links,.nav .btn-sm{display:none}
  .nav-toggle{display:block;margin-left:auto}
  .nav{justify-content:flex-start;gap:.6rem}
}

/* fullscreen menu: .aur-menu */
.menu{
  flex-direction:column;justify-content:center;align-items:stretch;
  padding:6rem 2rem 3rem;
  background:var(--aur-dark);-webkit-backdrop-filter:none;backdrop-filter:none;
  font-family:var(--aur-font);
  transition:opacity .5s var(--aur-ease-out),visibility 0s .5s;
}
.menu.open{transition:opacity .5s var(--aur-ease-out)}
.menu ul{display:flex;flex-direction:column;gap:0}
/* .aur-menu_link is overflow:hidden and its <span> rises from 110%.
   v2 has no inner span, so the <li> is the mask and the <a> rises.
   4px of padding = room for the 2px + 2px v2 focus ring. */
.menu li{overflow:hidden;padding:4px;margin:-4px}
.menu a{
  display:block;padding:.35rem 0;
  color:#fff;font-size:clamp(2.2rem,9vw,3.4rem);line-height:1.25;font-weight:600;
  opacity:1;transform:translateY(110%);
  transition:transform .7s var(--aur-ease-out);
}
.menu.open a{transform:translateY(0)}
.menu.open li:nth-child(1) a{transition-delay:.08s}
.menu.open li:nth-child(2) a{transition-delay:.16s}
.menu.open li:nth-child(3) a{transition-delay:.24s}
.menu.open li:nth-child(4) a{transition-delay:.32s}
.menu.open li:nth-child(5) a{transition-delay:.4s}
.menu a:active{color:var(--aur-orange-soft)}
/* last item = .aur-menu_cta */
.menu li:last-child{overflow:visible;align-self:flex-start;margin:2rem 0 0;padding:0}
.menu li:last-child a{
  padding:1.05rem 1.6rem;border-radius:16px;
  border:1px solid #ba530e;
  background:var(--aur-orange) radial-gradient(circle farthest-corner at 50% 100%,var(--aur-orange-soft),rgba(246,111,20,0) 79%);
  box-shadow:0 0 32px rgba(242,147,84,.4);
  font-size:clamp(1.15rem,4.5vw,1.35rem);line-height:1;font-weight:600;
  opacity:0;transition:transform .7s var(--aur-ease-out),opacity .7s var(--aur-ease-out);
}
.menu.open li:last-child a{opacity:1}
.menu li:last-child a:active{color:#fff;box-shadow:inset 0 6px 5px rgba(255,255,255,.2),0 7px 30px rgba(246,112,20,.6)}
.menu li:last-child a:focus-visible{border-radius:16px}

/* ---------------------------------------------------------------------
   2. BUTTONS
   --------------------------------------------------------------------- */
/* .btn (plain) = .c-button, data-wf--button-main--variant="dark-m":
   black, white text, 10px corners, a soft disc grows from the centre. */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:0;gap:8px;padding:.625rem 1.25rem;border-radius:.625rem;
  border:1px solid transparent;background:#000;color:#fff;
  font-size:1rem;line-height:1.32;font-weight:400;
  transition:color .2s;
}
.btn::before{
  content:"";position:absolute;z-index:-1;top:50%;left:50%;
  width:110%;height:0;padding-bottom:110%;border-radius:50%;
  background:#e2e2e3;opacity:.2;pointer-events:none;
  transform:translate3d(-50%,-50%,0) scale3d(0,0,1);
  transition:transform .4s cubic-bezier(0.1,0,0.3,1);
}
.btn:hover{transform:none;background:#000;border-color:transparent}
.btn:hover::before{transform:translate3d(-50%,-50%,0) scale3d(1,1,1)}
.btn:focus-visible{border-radius:.625rem}

/* .btn-accent = .aur-btn-glow (+ its 12px button-arrow.svg) */
.btn-accent{
  overflow:visible;isolation:auto;
  gap:8px;padding:14px 26px;border-radius:15px;
  border:1px solid #ba530e;
  background:var(--aur-orange) radial-gradient(circle farthest-corner at 50% 100%,var(--aur-orange-soft),rgba(246,111,20,0) 79%);
  color:#fff;font-size:1rem;line-height:1;font-weight:500;
  box-shadow:inset 0 2px 5px rgba(0,0,0,0),0 0 30px rgba(242,147,84,.6);
  transition:all .375s,transform .375s cubic-bezier(0.175,0.885,0.32,1.275);
}
.btn-accent::before{content:none}
.btn-accent::after{
  content:"";flex:none;width:12px;aspect-ratio:11/9;
  background:url(/assets/hero/button-arrow.svg) center/contain no-repeat;
}
.btn-accent:hover{
  transform:scale(1.04);
  background:var(--aur-orange) radial-gradient(circle farthest-corner at 50% 100%,var(--aur-orange-soft),rgba(246,111,20,0) 79%);
  border-color:var(--aur-orange);
  box-shadow:inset 0 6px 5px rgba(255,255,255,.2),inset 1px -9px 13px rgba(0,0,23,.34),0 7px 30px rgba(246,112,20,.6);
}
.btn-accent:focus-visible{border-radius:15px}

/* .btn-light (the form submit on the dark test section) = .booking-btn-primary */
.btn-light{
  overflow:visible;isolation:auto;
  gap:.5rem;padding:.85rem 1.75rem;border-radius:12px;
  border:1px solid #ba530e;
  background:var(--aur-orange-deep) radial-gradient(circle farthest-corner at 50% 100%,#ffad75,rgba(246,111,20,0) 79%);
  color:#fff;font-family:var(--aur-font);font-size:.95rem;line-height:normal;font-weight:600;
  box-shadow:0 0 30px rgba(242,147,84,.3);
  transition:all .375s,transform .375s cubic-bezier(0.175,0.885,0.32,1.275);
}
.btn-light::before{content:none}
.btn-light:hover{
  transform:scale(1.03);
  background:var(--aur-orange-deep) radial-gradient(circle farthest-corner at 50% 100%,#ffad75,rgba(246,111,20,0) 79%);
  border-color:#ba530e;color:#fff;
  box-shadow:inset 0 6px 5px rgba(255,255,255,.2),inset 1px -9px 13px rgba(0,0,23,.1),0 7px 30px rgba(246,112,20,.35);
}
.btn-light:focus-visible{border-radius:12px}
.btn-light:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* .link = .c-text-link: a 1px rule that wipes away to the right on hover */
.link{
  position:relative;font-weight:inherit;
  text-decoration:none;transition:color .3s;
}
.link::before{
  content:"";position:absolute;left:0;bottom:2px;width:100%;height:1px;
  background:currentColor;transform:scaleX(1);transform-origin:bottom left;
  transition:transform .5s var(--aur-eas-1) .15s;
}
.link:hover{color:inherit}
.link:hover::before{transform:scaleX(0);transform-origin:bottom right}

/* mobile sticky CTA: .aur-sticky-cta / .aur-sticky-cta_main (≤991px in the old site) */
@media (max-width:991px){
  .sticky-cta{
    display:flex;position:fixed;left:.75rem;right:.75rem;bottom:.75rem;z-index:30;
    padding-bottom:env(safe-area-inset-bottom,0px);
    transition:opacity .35s var(--aur-eas-1),transform .35s var(--aur-eas-1);
  }
  .sticky-cta .btn{width:100%}
  .sticky-cta.hide{transform:translateY(130%);opacity:0;pointer-events:none}
  body{padding-bottom:80px}
}
.sticky-cta .btn{
  flex-direction:column;justify-content:center;gap:.1rem;
  min-height:56px;padding:.55rem 1rem;border-radius:14px;border:0;
  background:linear-gradient(180deg,#ff8b3d 0%,#f75d00 100%);
  box-shadow:0 10px 30px rgba(247,93,0,.35),0 2px 8px rgba(0,0,0,.4);
  color:#fff;font-size:1rem;line-height:1.2;font-weight:700;text-align:center;
}
.sticky-cta .btn::after{content:none}
.sticky-cta .btn:hover{
  transform:none;border:0;
  background:linear-gradient(180deg,#ff8b3d 0%,#f75d00 100%);
  box-shadow:0 10px 30px rgba(247,93,0,.35),0 2px 8px rgba(0,0,0,.4);
}
.sticky-cta .btn:focus-visible{border-radius:14px}
/* auren-ui.js showed the bar only once the hero was scrolled past
   (scrollY > hero bottom - 120px), so it never covered the hero's own CTA.
   Same trigger as a view timeline. Its scrollport is inset by v2's
   scroll-padding-top:96px, hence 120 - 96 = 24px. Uses `translate`, so
   v2's .hide (transform + opacity) keeps working on top of it. */
@supports (animation-timeline:view()){
  body:has(.hero){timeline-scope:--aur-hero}
  body:has(.hero) .hero{view-timeline:--aur-hero block}
  @media (max-width:991px){
    body:has(.hero) .sticky-cta{animation:aurStickyIn linear both;animation-timeline:--aur-hero;animation-range:exit calc(100% - 24px) exit 100%}
  }
  @keyframes aurStickyIn{from{translate:0 130%}to{translate:0 0}}
}

/* ---------------------------------------------------------------------
   3. HERO — default: the old landing-page hero (.lp-hero, two columns)
      Used by ai-chat-agent and ai-receptionist.
   --------------------------------------------------------------------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(7.5rem,13vw,10rem) 0 clamp(4rem,8vw,6rem);
  background:radial-gradient(120% 90% at 78% 0%,#14202e 0%,var(--aur-dark) 55%);
  color:rgba(255,255,255,.76);font-family:var(--aur-font);
}
.hero .wrap{max-width:72rem}                       /* .lp-wrap */
.hero-grid{grid-template-columns:minmax(0,1fr);gap:clamp(3rem,6vw,5rem);align-items:center}
@media (min-width:900px){.hero-grid{grid-template-columns:1.05fr .95fr}}

.hero h1{
  max-width:none;padding-bottom:0;
  font-family:var(--aur-font-head);font-size:clamp(2.05rem,5.4vw,3.7rem);
  font-weight:800;line-height:1.1;letter-spacing:-0.025em;
  background:none;color:#fff;-webkit-text-fill-color:currentColor;
}
.hero h1 .accent{display:block;color:var(--aur-orange-deep)}   /* .lp-hero h1 .acc — needs the markup hook */
.hero .lead{                                                    /* .lp-hero-lead */
  max-width:none;margin-top:1.5rem;                             /* .lp-hero-kicker margin */
  font-size:clamp(1.02rem,1.25vw,1.18rem);line-height:1.6;color:rgba(255,255,255,.74);
}
.hero .hero-actions{gap:.9rem 1.1rem;margin-top:2rem}            /* .lp-btnrow */
.hero .btn-accent{line-height:1.65}                             /* body 1.65 on the old landing pages */
.hero .link{                                                    /* .lp-ghost */
  display:inline-flex;align-items:center;gap:.5rem;
  padding:13px 22px;border-radius:15px;border:1px solid rgba(255,255,255,.2);
  color:#fff;font-size:1rem;line-height:1.65;font-weight:500;text-decoration:none;
  transition:border-color .3s,background-color .3s;
}
.hero .link::before{content:none}
.hero .link:hover{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.05)}
.hero .link:focus-visible{border-radius:15px}
.hero .hero-proof{                                              /* .lp-hero-trust li */
  position:relative;max-width:none;margin-top:1.9rem;padding-left:1.4rem;
  font-size:.9rem;line-height:1.65;color:rgba(255,255,255,.62);
}
.hero .hero-proof::before{
  content:"";position:absolute;left:0;top:.5em;width:.7rem;height:.38rem;
  border-left:2px solid var(--aur-orange-deep);border-bottom:2px solid var(--aur-orange-deep);
  transform:rotate(-45deg);
}

/* the conversation card = .lp-phone */
.hero .thread{
  position:relative;width:100%;max-width:22rem;margin:0 auto;
  gap:.55rem;padding:1.4rem 1.35rem 1.5rem;border-radius:26px;
  background:linear-gradient(170deg,#16171b,#0e0f12);border:1px solid #2a2b30;
  box-shadow:0 40px 90px rgba(0,0,0,.5);
}
.hero .thread::before{
  content:"";position:absolute;inset:-40% -25% auto auto;width:320px;height:320px;z-index:-1;
  background:radial-gradient(circle,rgba(247,93,0,.28),transparent 65%);pointer-events:none;
}
.hero .thread-head{margin-bottom:.65rem;font-size:.75rem;line-height:1.65;color:#8a8b90}  /* .lp-phone-top (+ the 1.2rem it kept above the thread) */
.hero .bubble{                                                   /* .lp-bub */
  max-width:88%;padding:.6rem .8rem;border:0;border-radius:13px;
  font-size:.84rem;line-height:1.5;
}
.hero .bubble.in{background:#1f2024;color:#d8d9dc;border-bottom-left-radius:4px}
.hero .bubble.out{border-bottom-right-radius:4px}
.hero .bubble.hit{background:var(--aur-orange-deep);color:#fff}
.hero .bubble.miss{background:#1f2024;color:#d8d9dc}
.hero .bubble.miss p{text-decoration-color:#ff9455}
.hero .bubble .meta{margin-bottom:.25rem;font-size:.62rem;line-height:1.5;font-weight:400;color:inherit;opacity:.6}  /* .lp-bub-time */
.hero .thread .note{font-size:.82rem;line-height:1.5;font-weight:700}
.hero .note.hit{color:#7ee2a8}       /* .lp-phone-booked .row1 */
.hero .note.miss{color:#ff9455}      /* the old pain highlight (.hero-kicker strong) */

/* ---------------------------------------------------------------------
   4. HERO — index: the centred #ovo-hero-wrapper with the orange sphere.
      Scoped with :has() on the only page whose logo is aria-current.
   --------------------------------------------------------------------- */
body:has(.nav .brand[aria-current="page"]) .hero{
  --orb-w:min(1136px,calc(100vw - 144px));    /* circle width = container content width */
  --orb-h:calc(var(--orb-w) * 2320 / 2256);   /* red-circle-no-glow.webp is 2256x2320 */
  --orb-lift:clamp(210px,23vw,320px);         /* .home-app-wrapper padding-top: ring top -> card top */
  --orb-gap:calc(1.15rem + .62rem + .5rem + 34px + clamp(-5rem,-3.4vw,-1.5rem)); /* .aur-scrollhint box + .home-app-wrapper margin-top */
  --orb-core-top:177px;                       /* .red-circle-center padding-top */
  --orb-core-w:.8;--orb-core-h:.6;            /* .red-circle width:80% height:60% */
  padding:calc(20px + clamp(64px,7vh,88px)) 0 20px;
  color:#fff;font-family:var(--aur-font-head);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.025 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/140px 140px,
    radial-gradient(90% 55% at 50% 32%,rgba(0,0,0,0) 38%,rgba(0,0,0,.5) 100%),
    radial-gradient(120% 62% at 50% -14%,rgba(246,111,20,.16),rgba(246,111,20,0) 62%),
    radial-gradient(75% 40% at 50% -6%,rgba(255,255,255,.07),rgba(255,255,255,0) 70%),
    var(--aur-dark);
}
body:has(.nav .brand[aria-current="page"]) .hero .wrap{max-width:var(--wrap)}
body:has(.nav .brand[aria-current="page"]) .hero p{font-family:var(--aur-font)}   /* #ovo-hero-wrapper p: --paragraph-font */
body:has(.nav .brand[aria-current="page"]) .hero-grid{
  position:relative;grid-template-columns:minmax(0,1fr);
  row-gap:calc(var(--orb-gap) + var(--orb-lift));justify-items:center;
}
body:has(.nav .brand[aria-current="page"]) .hero-grid > div:first-child{
  display:flex;flex-direction:column;align-items:center;max-width:720px;text-align:center;
}
body:has(.nav .brand[aria-current="page"]) .hero h1{                 /* .hero-title */
  max-width:720px;margin:0 auto;padding-bottom:var(--hero-gap-s);     /* .home-hero padding-bottom */
  font-size:clamp(2.05rem,5.2vw + .4rem,4.3rem);font-weight:500;line-height:1.06;letter-spacing:-0.028em;
  background:linear-gradient(178deg,#ffffff 0%,#ffffffdb 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:aurFadeInUp .8s var(--aur-ease-out) .2s both;
}
body:has(.nav .brand[aria-current="page"]) .hero h1 .accent{           /* .hero-title_accent */
  display:inline;
  background:linear-gradient(96deg,#ffd0a8 0%,#ff9a4d 42%,#f66f14 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
body:has(.nav .brand[aria-current="page"]) .hero .lead{                /* .hero-lead in .center-hero-paragraph-holder.smaller */
  max-width:600px;margin:0 auto var(--hero-gap-m);
  font-size:clamp(1.02rem,.75vw + .62rem,1.2rem);line-height:1.55;color:rgba(255,255,255,.87);
  animation:aurFadeInUp .8s var(--aur-ease-out) .35s both;
}
body:has(.nav .brand[aria-current="page"]) .hero .hero-actions{        /* .hero-button-holder */
  justify-content:center;gap:12px;margin-top:var(--hero-gap-l);
  animation:aurFadeInUp .8s var(--aur-ease-out) .45s both;
}
body:has(.nav .brand[aria-current="page"]) .hero .hero-proof{          /* .hero-trust (+ #ovo-hero-wrapper p line-height) */
  max-width:600px;margin:var(--hero-gap-m) auto 0;padding:0;
  font-size:.85rem;line-height:1.5;color:rgba(255,255,255,.62);
  animation:aurFadeInUp .8s var(--aur-ease-out) .45s both;
}
body:has(.nav .brand[aria-current="page"]) .hero .hero-proof::before{
  position:static;display:inline-block;width:9px;height:5px;margin-right:.55rem;vertical-align:.28em;
  border-left:1.5px solid var(--aur-orange);border-bottom:1.5px solid var(--aur-orange);
}

/* hero primary = .button-glow (gradient face, light sweep, 11px arrow) */
body:has(.nav .brand[aria-current="page"]) .hero .btn-accent{
  overflow:hidden;isolation:isolate;gap:8px;padding:13px 24px;border-radius:14px;
  border:1px solid rgba(255,179,122,.3);
  background:var(--aur-orange) linear-gradient(180deg,#ff9d4d 0%,#f66f14 58%,#e05f0a 100%);
  font-family:var(--aur-font);font-size:15px;line-height:1;font-weight:600;letter-spacing:.005em;
  box-shadow:inset 0 1px 0 #ffffff59,inset 0 -10px 18px #a53d0033,0 8px 24px #f6701440,0 0 44px #f6701426;
  transition:box-shadow .4s var(--aur-ease-out),transform .4s var(--aur-ease-out);
}
body:has(.nav .brand[aria-current="page"]) .hero .btn-accent::before{
  content:"";position:absolute;inset:0;z-index:-1;width:auto;height:auto;padding:0;border-radius:0;opacity:1;
  background:linear-gradient(105deg,transparent 32%,#ffffff5c 48%,transparent 64%);
  transform:translateX(-120%);transition:transform .7s var(--aur-ease-out);
}
body:has(.nav .brand[aria-current="page"]) .hero .btn-accent::after{width:11px;transition:transform .375s var(--aur-ease-out)}
body:has(.nav .brand[aria-current="page"]) .hero .btn-accent:hover{
  transform:translateY(-2px);
  background:var(--aur-orange) linear-gradient(180deg,#ff9d4d 0%,#f66f14 58%,#e05f0a 100%);
  border-color:rgba(255,179,122,.3);
  box-shadow:inset 0 1px 0 #ffffff73,inset 0 -10px 18px #a53d0033,0 12px 30px #f6701459,0 0 60px #f6701440;
}
body:has(.nav .brand[aria-current="page"]) .hero .btn-accent:hover::before{transform:translateX(120%)}
body:has(.nav .brand[aria-current="page"]) .hero .btn-accent:hover::after{transform:translateX(3px)}
/* hero secondary = .button-simple (+ the CSS caret) */
body:has(.nav .brand[aria-current="page"]) .hero .link{
  justify-content:center;gap:8px;padding:13px 22px;border-radius:14px;
  border:1px solid #ffffff1f;background-color:#ffffff08;
  color:rgba(255,255,255,.82);font-family:var(--aur-font);font-size:15px;line-height:1;font-weight:500;
  box-shadow:inset 0 -9px 24px #f6701421;
  transition:box-shadow .375s ease,border-color .375s ease,color .375s ease,background-color .375s ease,transform .375s var(--aur-ease-out);
}
body:has(.nav .brand[aria-current="page"]) .hero .link::after{
  content:"";width:7px;height:7px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .375s var(--aur-ease-out);
}
body:has(.nav .brand[aria-current="page"]) .hero .link:hover{
  color:#fff;border-color:#f6701466;background-color:#ffffff0f;transform:translateY(-2px);
  box-shadow:inset 0 -8px 28px #f670143d,inset 0 0 12px #ffffff14,0 10px 26px #00000040;
}
body:has(.nav .brand[aria-current="page"]) .hero .link:hover::after{transform:rotate(45deg) translate(1px,1px)}
body:has(.nav .brand[aria-current="page"]) .hero .btn-accent:focus-visible,
body:has(.nav .brand[aria-current="page"]) .hero .link:focus-visible{outline:2px solid #ff9a4d;outline-offset:3px;border-radius:14px}

/* the card sits on the sphere the way the dashboard (.app-holder) did */
body:has(.nav .brand[aria-current="page"]) .hero .thread{
  max-width:720px;gap:.55rem;padding:1.5rem;border-radius:14px;text-align:left;
  border:1px solid transparent;
  background:
    linear-gradient(#0b1017,#0b1017) padding-box,
    linear-gradient(180deg,#ffb37a5c,#ffffff00 42%) border-box,   /* .app-holder::before warm rim */
    linear-gradient(#ffffff14,#ffffff14) border-box;              /* .app-holder border */
  box-shadow:inset 0 1px 0 #ffffff1a,inset 0 24px 48px #c7d3ea0d,0 40px 80px -20px #00000073;
}

/* ---- the sphere: four layers, bottom to top, all behind the card ----
   glow.webp (.white-glow) -> red-glow.webp (.red-glow) ->
   red-circle-no-glow.webp (.circle-bg-image) -> orange core (.red-circle) */
body:has(.nav .brand[aria-current="page"]) .hero-grid::before,
body:has(.nav .brand[aria-current="page"]) .hero-grid::after,
body:has(.nav .brand[aria-current="page"]) .hero .thread::before,
body:has(.nav .brand[aria-current="page"]) .hero .thread::after{
  content:"";position:absolute;left:50%;right:auto;bottom:auto;translate:-50% 0;pointer-events:none;
}
body:has(.nav .brand[aria-current="page"]) .hero-grid::before,
body:has(.nav .brand[aria-current="page"]) .hero-grid::after{
  grid-row:2;grid-column:1;z-index:-3;width:var(--orb-w);
  opacity:.65;filter:blur(13px);
  animation:aurGlowFadeIn 2.5s ease-out .8s both,aurGlowDriftIn 2.5s ease-out .8s;
}
body:has(.nav .brand[aria-current="page"]) .hero-grid::before{       /* .white-glow  inset:0 0 auto */
  --m-off:0px;top:calc(-1 * var(--orb-lift));aspect-ratio:1152/649;
  background:url(/assets/hero/glow.webp) center/100% 100% no-repeat;
}
body:has(.nav .brand[aria-current="page"]) .hero-grid::after{        /* .red-glow  inset:-15% 0 auto */
  --m-off:calc(var(--orb-h) * .15);top:calc(-1 * var(--orb-lift) - var(--orb-h) * .15);aspect-ratio:2626/1528;
  background:url(/assets/hero/red-glow.webp) center/100% 100% no-repeat;
}
body:has(.nav .brand[aria-current="page"]) .hero .thread::before{    /* .circle-bg-image */
  --m-off:0px;inset:auto;left:50%;top:calc(-1 * var(--orb-lift));z-index:-2;
  width:var(--orb-w);height:auto;aspect-ratio:2256/2320;border-radius:0;
  background:url(/assets/hero/red-circle-no-glow.webp) center/100% 100% no-repeat;
  animation:aurCircleIn 2s var(--aur-ease-out) .6s both;
}
body:has(.nav .brand[aria-current="page"]) .hero .thread::after{     /* .red-circle in .red-circle-center */
  /* 48px (3 x the 16px blur) of transparent padding keeps the blur's
     halo inside the box, so the ≤991 mask does not cut it off */
  --m-off:calc(48px - var(--orb-core-top));
  top:calc(-1 * var(--orb-lift) + var(--orb-core-top) - 48px);z-index:-2;padding:48px;
  width:calc(var(--orb-w) * var(--orb-core-w));
  height:calc((var(--orb-h) - var(--orb-core-top)) * var(--orb-core-h));
  border-radius:1000px;opacity:.75;filter:blur(16px);
  background:radial-gradient(circle farthest-corner at 50% 50%,var(--aur-orange) 36%,#f66f1400 62%) content-box;
  transform-origin:50% calc(var(--orb-h) / 2 - var(--orb-core-top) + 48px);   /* spins with the circle container */
  animation:aurCoreIn 2s var(--aur-ease-out) .6s both,aurBreathe 7s ease-in-out 3.4s infinite;
}
/* light rays (.light-wrapper > .lights-holder > .light x3): one layer.
   opacity .6 x .34 x .4, the three 150/220/150 x 1000 bars 96px apart,
   shifted -60px / -217px, tilted -30deg around the hero-section centre. */
body:has(.nav .brand[aria-current="page"]) .hero::before{
  content:"";position:absolute;z-index:-4;pointer-events:none;
  top:calc(20px - 217px);bottom:20px;left:-300px;right:-300px;
  transform-origin:50% calc(50% + 108.5px);rotate:-30deg;
  opacity:calc(.6 * .34 * .4);filter:blur(34px);
  background:
    linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 18%,rgba(255,255,255,0) 78%) calc(50% - 341px) 0/150px 1000px no-repeat,
    linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 18%,rgba(255,255,255,0) 78%) calc(50% - 60px) 0/220px 1000px no-repeat,
    linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 18%,rgba(255,255,255,0) 78%) calc(50% + 221px) 0/150px 1000px no-repeat;
  animation:aurLightGrow 2s ease-out 1s both;
}
/* .dashboard-fade: the sphere melts into the page colour at the hero foot */
body:has(.nav .brand[aria-current="page"]) .hero::after{
  content:"";position:absolute;z-index:-1;left:0;right:0;bottom:-1px;height:200px;pointer-events:none;
  background-image:linear-gradient(180deg,#06091000 0%,var(--aur-dark) 90%);
}

/* auren-ui.js turned the circle 0.025deg per px of scroll, capped at 22deg */
@supports (animation-timeline:scroll()){
  body:has(.nav .brand[aria-current="page"]) .hero .thread::before{
    animation:aurCircleIn 2s var(--aur-ease-out) .6s both,aurCircleScroll linear both;
    animation-timeline:auto,scroll(root);animation-range:normal,0 880px;
  }
  @keyframes aurCircleScroll{from{rotate:0deg}to{rotate:22deg}}
}

@keyframes aurFadeInUp{from{opacity:0;transform:translate3d(0,30px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes aurCircleIn{from{transform:rotate(-360deg) scale(.7);opacity:0}to{transform:rotate(0deg) scale(1);opacity:1}}
@keyframes aurCoreIn{from{transform:rotate(-360deg) scale(.7);opacity:0}to{transform:rotate(0deg) scale(1);opacity:.75}}
@keyframes aurBreathe{0%,100%{opacity:.75}50%{opacity:.92}}
@keyframes aurGlowFadeIn{from{opacity:0;filter:blur(20px)}to{opacity:.65;filter:blur(13px)}}
@keyframes aurGlowDriftIn{from{transform:translate3d(-248px,95px,0) scale3d(.9,.9,1) rotateZ(-26deg)}to{transform:translate3d(0,0,0) scale3d(1,1,1) rotateZ(0deg)}}
@keyframes aurLightGrow{from{opacity:0}}

/* ≤991: no dashboard in the old hero — the sphere is a 360/300/240px
   window under the copy (.home-app-wrapper height) that melts into the
   page through .sphere-fade. Here the card follows that window. The
   veil is a mask on each layer, so nothing of the sphere leaks beside
   or below the card. */
@media (max-width:991px){
  body:has(.nav .brand[aria-current="page"]) .hero{
    --orb-gap:calc(1.15rem + .62rem + .5rem + 34px);   /* the scroll hint still shows */
    --orb-lift:360px;--orb-fade:185px;
    padding:calc(20px + 88px) 0 clamp(4rem,8vw,6rem);
  }
  /* .sphere-fade ramp (0/.45/.86/1 at 0/38/66/88%) as an inverse mask */
  body:has(.nav .brand[aria-current="page"]) .hero-grid::before,
  body:has(.nav .brand[aria-current="page"]) .hero-grid::after,
  body:has(.nav .brand[aria-current="page"]) .hero .thread::before,
  body:has(.nav .brand[aria-current="page"]) .hero .thread::after{
    -webkit-mask-image:linear-gradient(180deg,#000 calc(var(--orb-lift) + var(--m-off) - var(--orb-fade)),rgba(0,0,0,.55) calc(var(--orb-lift) + var(--m-off) - var(--orb-fade) * .62),rgba(0,0,0,.14) calc(var(--orb-lift) + var(--m-off) - var(--orb-fade) * .34),transparent calc(var(--orb-lift) + var(--m-off) - var(--orb-fade) * .12));
    mask-image:linear-gradient(180deg,#000 calc(var(--orb-lift) + var(--m-off) - var(--orb-fade)),rgba(0,0,0,.55) calc(var(--orb-lift) + var(--m-off) - var(--orb-fade) * .62),rgba(0,0,0,.14) calc(var(--orb-lift) + var(--m-off) - var(--orb-fade) * .34),transparent calc(var(--orb-lift) + var(--m-off) - var(--orb-fade) * .12));
  }
  body:has(.nav .brand[aria-current="page"]) .hero::after{display:none}
}
@media (max-width:767px){
  body:has(.nav .brand[aria-current="page"]) .hero{
    --orb-w:120vw;--orb-gap:0px;--orb-lift:300px;--orb-fade:150px;
    padding-top:calc(20px + 84px);
  }
  body:has(.nav .brand[aria-current="page"]) .hero .wrap{padding:0 20px}
  body:has(.nav .brand[aria-current="page"]) .hero .hero-actions{flex-direction:column;align-items:stretch;width:100%}
  body:has(.nav .brand[aria-current="page"]) .hero .btn-accent,
  body:has(.nav .brand[aria-current="page"]) .hero .link{width:100%;justify-content:center;padding:15px 20px;font-size:15px}
  body:has(.nav .brand[aria-current="page"]) .hero .hero-proof{font-size:.8rem;line-height:1.6}
}
@media (max-width:479px){
  body:has(.nav .brand[aria-current="page"]) .hero{
    --orb-w:130vw;--orb-gap:20px;--orb-lift:240px;--orb-fade:120px;
    --orb-core-top:80px;--orb-core-w:.95;--orb-core-h:.7;
  }
  body:has(.nav .brand[aria-current="page"]) .hero h1{line-height:1.12;letter-spacing:-0.018em}
  body:has(.nav .brand[aria-current="page"]) .hero .lead{font-size:1rem;line-height:1.5}
  body:has(.nav .brand[aria-current="page"]) .hero .hero-actions{gap:10px}
  body:has(.nav .brand[aria-current="page"]) .hero .btn-accent,
  body:has(.nav .brand[aria-current="page"]) .hero .link{padding:15px 16px;border-radius:12px;white-space:nowrap}
  body:has(.nav .brand[aria-current="page"]) .hero .hero-proof{line-height:1.65}
  body:has(.nav .brand[aria-current="page"]) .hero::before{opacity:calc(.6 * .25 * .4)}
}

@media (prefers-reduced-motion:reduce){
  .btn-accent:hover,.btn-light:hover,
  body:has(.nav .brand[aria-current="page"]) .hero .btn-accent:hover,
  body:has(.nav .brand[aria-current="page"]) .hero .link:hover{transform:none}
  body:has(.nav .brand[aria-current="page"]) .hero .btn-accent::before{display:none}
  .menu a{transform:none}
  .menu li:last-child a{opacity:1}
}


/* =====================================================================
   AUREN CLASSIC — cards, panels, forms, content blocks
   Two old families (same split as the global foundation):
   · DEFAULT  = old index.html (Webflow cards #eff0f0, the calculator
                panel, #311300 FAQ, orange-ruled testimonial, offer glow)
   · PRODUCT  = old ai-chat-agent.html / ai-receptionist.html (.lp-*:
                white cards on #f7f6f3 paper, dark .lp-step / .lp-vcard,
                .lp-call transcript, lined FAQ with orange plus)
     scoped with :root:has(link[rel="canonical"]:is(...)) — no markup hook.
   ===================================================================== */

:root {
  /* calculator panel — index inline <style> .aur-calc_* */
  --cp-panel-bg: linear-gradient(165deg, #141416, #0d0d0f);
  --cp-panel-line: #26262a;
  --cp-panel-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  --cp-panel-glow: radial-gradient(circle, rgba(247, 93, 0, 0.2), transparent 62%);
  --cp-field-bg: #1b1b1e;
  --cp-field-line: #2e2e33;
  --cp-field-label: #9a9a9f;
  --cp-field-dim: #6f6f75;                     /* .aur-calc_unit */
  --cp-ring: 0 0 0 3px rgba(247, 93, 0, 0.15); /* .aur-calc_inputrow:focus-within */
  /* the old real form — css/booking.css */
  --cp-error: #ef4444;                         /* --bk-error */
  --cp-success: #22c55e;                       /* --bk-success */
  --cp-text-2nd: #9e9e9e;                      /* --bk-text-secondary */
  /* webflow palette (css/auren.webflow.shared.css :root) */
  --cp-orange: #f75d00;                        /* --color--orange-500 */
  --cp-orange-400: #f97d33;
  --cp-orange-soft: #ffad75;                   /* auren-ui --aur-orange-soft */
  --cp-orange-900: #311300;
  --cp-grey-card: #eff0f0;                     /* --_theme---onsurface-light-1 */
  --cp-weaker: #c5c7c8;                        /* --_theme---onsurface-weaker */
  --cp-softer: #75777a;                        /* --_theme---onsurface-softer */
  --cp-muted-on-dark: #9da0a3;                 /* auren-ui --aur-text-muted */
  --cp-r10: 0.625rem;                          /* --size--radius--cornerradius-10 */
  --cp-gutter: 1.25rem;                        /* --size--gutter */
  /* product pages :root */
  --cp-lp-ink: #101114;
  --cp-lp-body: #43474d;
  --cp-lp-line: #e6e5e1;
  /* "miss" in the old palette: the orange-red of "Какво НЕ влиза"
     (auren-ui .aur-offer_scope em) — the same value the hero group uses */
  --miss: #ff9455;
}

/* =====================================================================
   1. DEFAULT FAMILY (old index)
   ===================================================================== */

/* ---- 1.1 grey feature card: .door  (= .home_feat_content_card) ---- */
.doors { gap: 3.75rem var(--cp-gutter); }              /* .g_feat_content_wrap */
.door {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.625rem;                                /* .home_feat_content_header */
  row-gap: 1.25rem;                                    /* .home_feat_content_header_wrap */
  align-content: start;
  padding: 1.25rem;
  border: 0;
  border-radius: var(--cp-r10);
  background: var(--cp-grey-card);
  color: #000;
  overflow: clip;
  transition: box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.door > :not(.icon, h3) { grid-column: 1 / -1; }
.door:hover {
  transform: none;
  border-color: transparent;
  box-shadow: 0 24px 60px -24px rgba(6, 9, 16, 0.18);
}
.door:active { transform: none; }
/* spotlight fill + ring that appear on hover (auren-ui.css section 8) */
.door::after,
.door::before {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.door::after {
  inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(247, 93, 0, 0.09), transparent 65%);
}
.door::before {
  inset: -1px;
  z-index: 2;
  padding: 1px;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(247, 93, 0, 0.55), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.door:hover::after,
.door:hover::before { opacity: 1; }
/* the bare 20px glyph left of the title (.home_feat_content_header_svg) */
.icon {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0;
  background: none;
  align-self: center;
}
.icon svg { width: 1.25rem; height: 1.25rem; }
/* card title = .c-text-3-mono */
.door h3 {
  font-family: var(--c-font-mono, "Formular Mono", Georgia, sans-serif);
  font-size: 1rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: uppercase;
  color: #000;
  align-self: center;
}
/* card text = .c-text-3 */
.door p { font-size: 1rem; line-height: 1.32; color: #000; }
.door .foot { font-weight: 400; }
@media (max-width: 991px) { .doors { grid-template-columns: 1fr; } }

/* ---- 1.2 the calculator panel: .test ---- */
/* the global layer already gives section.test the .aur-calc_panel
   background / border / radius / shadow / padding */
.test { position: relative; isolation: isolate; overflow: hidden; }
.test::before {                                         /* .aur-calc_panel_glow */
  content: "";
  position: absolute;
  z-index: -1;
  top: -45%;
  right: -12%;
  width: 460px;
  height: 460px;
  background: var(--cp-panel-glow);
  pointer-events: none;
}
.test-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
.test-grid > .form-box { padding-top: 1.5rem; border-top: 1px solid var(--cp-panel-line); }   /* .aur-calc_result <=767 */
@media (min-width: 768px) {
  .test-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; }
  .test-grid > .form-box {                              /* .aur-calc_result >=768 */
    padding-top: 0;
    padding-left: 2.75rem;
    border-top: 0;
    border-left: 1px solid var(--cp-panel-line);
  }
}

/* the form sits straight on the panel, like .aur-calc_fields */
.form,
.form-done {
  gap: 1.6rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
/* label = .aur-calc_label */
.field label {
  margin-bottom: 0.55rem;                               /* .aur-calc_field gap */
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cp-field-label);
}
/* box = .aur-calc_inputrow, type = .booking-form-input (the old text form) */
.field input,
.field select {
  min-height: 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--cp-field-line);
  border-radius: 12px;
  background-color: var(--cp-field-bg);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.2;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field input::placeholder { color: var(--cp-field-dim); }
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--cp-orange);
  box-shadow: var(--cp-ring);
}
/* the hero caret (hero_cloned.css #ovo-hero-wrapper .button-caret) as the select arrow */
.field:has(> select) { display: grid; grid-template-columns: minmax(0, 1fr); }
.field:has(> select) > label { grid-row: 1; }
.field:has(> select) > select { grid-row: 2; grid-column: 1; padding-right: 2.75rem; }
.field:has(> select) > .err { grid-row: 3; }
.field:has(> select)::after {
  content: "";
  grid-row: 2;
  grid-column: 1;
  justify-self: end;
  align-self: center;
  width: 7px;
  height: 7px;
  margin-right: 1.25rem;
  border-right: 1.5px solid var(--cp-field-label);
  border-bottom: 1.5px solid var(--cp-field-label);
  transform: rotate(45deg) translate(-1px, -1px);
  pointer-events: none;
}
/* error = .booking-form-error / .booking-form-input.error */
.field .err { margin-top: 0.5rem; font-size: 0.78rem; line-height: 1.5; color: var(--cp-error); }
.field.invalid input,
.field.invalid select {
  border-color: var(--cp-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
/* consent = .booking-checkbox-group / -input / -label */
.field .check {
  gap: 0.75rem;
  margin-bottom: 0;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  color: var(--cp-text-2nd);
}
.field .check input[type="checkbox"] {
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  padding: 0;
  border: 2px solid var(--cp-field-line);
  border-radius: 5px;
  background: var(--cp-field-bg);
  box-shadow: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.field .check input[type="checkbox"]:checked { border-color: var(--cp-orange); background: var(--cp-orange); }
.field .check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.field .check input[type="checkbox"]:focus { outline: none; box-shadow: 0 0 0 3px rgba(247, 93, 0, 0.1); }
.field .check input[type="checkbox"]:focus-visible { box-shadow: var(--cp-ring); }
.field.invalid .check input[type="checkbox"] { border-color: var(--cp-error); }
.check a { color: var(--cp-orange); text-decoration: underline; text-underline-offset: 2px; }
.check a:hover { color: var(--cp-orange-400); }
/* delivery failure = .booking-warning */
.form-status:not(:empty) {
  padding: 1.15rem 1.35rem;
  border: 1px solid rgba(247, 93, 0, 0.35);
  border-radius: 16px;
  background: rgba(247, 93, 0, 0.15);
  font-size: 0.95rem;
  line-height: 1.5;
  color: #fff;
}
/* success = .booking-success (+ its check circle, polyline from contact.html) */
.form-done { padding: 3rem 1rem; text-align: center; }
.form-done::before {
  content: "";
  display: block;
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  border: 2px solid rgba(34, 197, 94, 0.3);
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 40px 40px no-repeat;
}
.is-done .form-done { animation: cp-success-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.is-done .form-done::before { animation: cp-check-in 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s both; }
@keyframes cp-success-in { from { opacity: 0; transform: scale(0.95) translateY(20px); } }
@keyframes cp-check-in { from { opacity: 0; transform: scale(0); } }
.form-done h3,
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .form-done h3 {
  margin-bottom: 0.75rem;
  font-family: Mulish, sans-serif;
  font-size: 1.75rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.7) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.form-done p,
.test .form-done .muted { max-width: 460px; margin: 0 auto; font-size: 1rem; line-height: 1.6; color: var(--cp-text-2nd); }

/* ---- 1.3 steps inside the panel: "01 — ЕДНА СРЕЩА" (.home_time_top_col) ---- */
.test .steps { gap: var(--cp-gutter); }
.test .steps li { gap: 1.25rem; }
.test .steps li::before { content: none; }
.test .steps h3::before { content: counter(step, decimal-leading-zero) " — "; }
/* the timeline under each step at <=991 (.home_time_line_wrap:
   square · line · square · line · square), squares inverted for the dark panel */
.test .steps li::after {
  content: "";
  height: 0.5rem;
  background:
    linear-gradient(#fff, #fff) left center / 0.5rem 0.5rem no-repeat,
    linear-gradient(#fff, #fff) center / 0.5rem 0.5rem no-repeat,
    linear-gradient(#fff, #fff) right center / 0.5rem 0.5rem no-repeat,
    linear-gradient(var(--cp-panel-line), var(--cp-panel-line)) center / 100% 1px no-repeat;
}

/* ---- 1.4 proof: .testimonial + its avatar ---- */
.proof-grid { grid-template-columns: 1fr 1fr; gap: 3.75rem var(--cp-gutter); align-items: center; }   /* .home_intro_2-col_layout */
@media (max-width: 767px) { .proof-grid { grid-template-columns: 1fr; } }
.quote {                                     /* webflow blockquote + .testimonial */
  max-width: 42rem;
  padding: 0 0 0 1.25rem;
  border-left: 2px solid var(--cp-orange);
  font-size: clamp(1.125rem, 1.089rem + 0.18vw, 1.25rem);
  line-height: 1.4;
  font-weight: 500;
}
.quote p { font-size: 1.0625rem; line-height: 1.65; color: rgba(0, 0, 0, 0.82); }
.quote footer {                              /* .testimonial cite */
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: rgba(0, 0, 0, 0.55);
}
.quote footer strong { color: #111; font-weight: 700; }
.quote .link {                               /* .testimonial-link */
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(247, 93, 0, 0.5);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}
.quote .link::before { content: none; }
.quote .link:hover { text-decoration-color: var(--cp-orange); }
.founder {                                   /* grey card, .home_feat_content_card */
  gap: 1.25rem;
  padding: 1.25rem;
  border: 0;
  border-radius: var(--cp-r10);
  background: var(--cp-grey-card);
}
.avatar {                                    /* .testimonial-avatar */
  width: 48px;
  height: 48px;
  border: 1px solid rgba(247, 93, 0, 0.3);
  border-radius: 50%;
  background: rgba(247, 93, 0, 0.1);
  color: var(--cp-orange);
  font-size: 0.9rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---- 1.5 pricing ladder ---- */
.ladder { gap: var(--cp-gutter); }
.rung {
  gap: 1.25rem;
  padding: 1.25rem;
  border: 0;
  border-radius: var(--cp-r10);
  background: var(--cp-grey-card);
}
/* the highlighted rung = the "Спецификации, не обещания" card background:
   grey melting into brand orange (.home_time_visual_bg). Its luminosity
   sphere is left out: it was sized for a 783px-tall card and turns this
   short one dark in the corner. */
.rung.main {
  border: 0;
  background-image: linear-gradient(180deg, var(--cp-grey-card) 20%, var(--cp-orange));
}
.rung.main p:not(.price) { color: #000; }
/* label = .c-text-3-mono (card header type) */
.rung .step-no {
  font-family: var(--c-font-mono, "Formular Mono", Georgia, sans-serif);
  font-size: 1rem;
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
  color: #000;
}
/* price = .aur-calc_result_num, the old "money" number */
.rung .price {
  font-size: clamp(2.6rem, 6vw, 4rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--cp-orange);
  text-shadow: 0 4px 40px rgba(247, 93, 0, 0.28);
  font-variant-numeric: tabular-nums;
}
.rung .price span { font-size: 1rem; line-height: 1.32; font-weight: 400; color: var(--muted); text-shadow: none; }
@media (max-width: 991px) { .ladder { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .ladder { grid-template-columns: 1fr; } }

/* plans table = the old channels card (inline style in index #business-excellence:
   #111, 12px corners, 24px padding, orange bold head, #333 / #222 rules) */
.table-scroll {
  padding: 24px;
  border: 0;
  border-radius: 12px;
  background: #111;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.plans th,
.plans td { padding: 12px 12px 12px 0; border-bottom: 1px solid #222; font-size: 15px; line-height: 1.4; }
.plans thead th {
  padding-top: 0;
  border-bottom-color: #333;
  font-size: 14px;
  font-weight: 700;
  color: var(--cp-orange);
}
.plans tbody th { font-size: 14px; font-weight: 400; color: var(--cp-field-label); }
.plans .num { font-weight: 700; color: #fff; }
.plans tr:last-child th,
.plans tr:last-child td { padding-bottom: 0; }

/* ---- 1.6 limits: grey card + white list box with icon rows
        (.home_time_visual_box + .home_time_visual_box-2_item / _line) ---- */
.split { gap: var(--cp-gutter); }
.split > div {
  padding: 1.25rem;
  border: 0;
  border-radius: var(--cp-r10);
  background: var(--cp-grey-card);
}
.split h3 { margin-bottom: 1.25rem; }
.split ul {
  gap: 0.75rem;
  padding: 1.5rem;
  border-radius: var(--cp-r10);
  background: #fff;
}
.split li {
  grid-template-columns: 1.125rem minmax(0, 1fr);
  gap: 0.75rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--cp-weaker);
  font-size: 0.95rem;                        /* .feat-list li */
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.7);
}
.split li:last-child { padding-bottom: 0; border-bottom: 0; }
.split li svg { width: 1.125rem; height: 1.125rem; margin-top: 0.15em; }
.yes svg { color: var(--cp-orange); }       /* box-2 icons stroke #F75D00 */
.no svg { color: var(--cp-softer); }
@media (max-width: 991px) { .split { grid-template-columns: 1fr; } }

/* ---- 1.7 FAQ = .faq_accordion_* ---- */
.faq { display: flex; flex-direction: column; gap: 0.625rem; max-width: 57.88rem; }   /* .c-max-8-col */
.faq details,
.faq details:last-child {
  border: 0;
  border-radius: var(--cp-r10);
  background: var(--cp-orange-900);
  color: #fff;
}
.faq summary {
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  font-size: clamp(1.125rem, 1.089rem + 0.18vw, 1.25rem);   /* .c-text-2 */
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: -0.03em;
}
/* the 20px stroke-2 plus of .faq_accordion_icon_svg, drawn with two bars */
.faq summary::after {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1em;
  background:
    linear-gradient(currentColor, currentColor) center / 66.67% 8.33% no-repeat,
    linear-gradient(currentColor, currentColor) center / 8.33% 66.67% no-repeat;
  color: var(--cp-orange);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.faq .a {
  max-width: none;
  gap: 1.25rem;
  padding: 0 1.25rem 2.5rem;                 /* answer padding + .c-text-3 margin-bottom */
  font-size: 1rem;
  line-height: 1.32;
  color: #fff;
}
.faq details[open] .a { animation: cp-faq-in 0.5s cubic-bezier(0, 0, 0, 1) 0.1s backwards; }
@keyframes cp-faq-in { from { opacity: 0; transform: translateY(-0.75rem); } }
.faq .a .link { color: #fff; }

/* ---- 1.8 offer bookend: the orange glow + grain (.aur-offer_glow / .aur-grain) ---- */
.final { position: relative; z-index: 2; isolation: isolate; overflow: hidden; }
.final::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -32vw;
  width: 90vw;
  max-width: 1200px;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, rgba(246, 111, 20, 0.5), rgba(246, 111, 20, 0.12) 42%, transparent 68%);
  filter: blur(20px);
  pointer-events: none;
}
.final::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  pointer-events: none;
}
.final .wrap { position: relative; z-index: 2; }

/* ---- 1.9 tagline: the unlit words in the colour the old ticker really
        rendered (auren-ui.css overrides .home_intro_marquee_text to #7a7d82) ---- */
.tagline .w { color: #7a7d82; }

/* ---- 1.10 sample conversations outside the hero (#demo, product pages) =
        .lp-call transcript card; left = dark .lp-msg--bot, right = orange
        .lp-msg--user — same sides/colours as the hero .lp-phone ---- */
/* v2 bug this group inherits: the live-chat input's intrinsic min-content
   pushes the 1fr .demo-grid track past a 390px viewport (scrollWidth 438
   on plain v2). Same cure the old .aur-calc_panel used: minmax(0, …). */
.demo-grid > * { min-width: 0; }
#demo .thread {
  gap: 0.7rem;
  padding: 0 0 1.35rem;
  border: 1px solid #2a2a2a;
  border-radius: 18px;
  background: #0f0f10;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
#demo .thread-head {                         /* .lp-call-bar */
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid #222;
  font-size: 0.82rem;
  line-height: 1.65;
  color: #9a9a9f;
}
#demo .thread-head::before {                 /* the green live dot */
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #27ae60;
  box-shadow: 0 0 8px #27ae60;
}
#demo .thread-head span:first-child { margin-right: auto; }
#demo .bubble {                              /* .lp-msg */
  max-width: 82%;
  margin: 0 1.15rem;
  padding: 0.7rem 0.95rem;
  border: 0;
  border-radius: 14px;
  font-size: 0.95rem;
  line-height: 1.5;
}
#demo .bubble.in { background: #1c1c1f; color: #e9e9ec; border-bottom-left-radius: 5px; }
#demo .bubble.out { background: var(--cp-orange); color: #fff; border-bottom-right-radius: 5px; }
#demo .bubble.miss { background: #1c1c1f; color: #e9e9ec; }
#demo .bubble.miss p { text-decoration-color: var(--miss); }
#demo .thread .note { margin: 0 1.15rem; font-size: 0.82rem; line-height: 1.5; font-weight: 700; }
#demo .note.hit { color: #7ee2a8; }          /* .lp-phone-booked .row1 */
#demo .note.miss { color: var(--miss); }

/* =====================================================================
   2. PRODUCT FAMILY (old ai-chat-agent / ai-receptionist .lp-*)
   ===================================================================== */

/* ---- 2.1 benefit cards = .lp-prod / .lp-prod-card (+ its "01" .n) ---- */
.benefits { grid-template-columns: 1fr; gap: 1.1rem; counter-reset: cp-benefit; }
@media (min-width: 720px) { .benefits { grid-template-columns: 1fr 1fr; } }
.benefits > div {
  counter-increment: cp-benefit;
  padding: 1.5rem 1.5rem 1.6rem;
  border: 1px solid var(--cp-lp-line);
  border-radius: 16px;
  background: #fff;
}
.benefits > div::before {
  content: counter(cp-benefit, decimal-leading-zero);
  display: block;
  font-size: 0.7rem;
  line-height: 1.65;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--cp-orange);
}
.benefits h3 { margin-bottom: 0; }
.benefits p { margin-top: 0.5rem; font-size: 0.97rem; color: var(--cp-lp-body); }

/* ---- 2.2 channel chips = .lp-specs span ---- */
.chips { gap: 0.6rem; }
.chip {
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--cp-lp-line);
  border-radius: 999px;
  background: #fff;
  font-size: 0.82rem;
  line-height: 1.65;
  font-weight: 500;
  color: var(--cp-lp-ink);
}
.chip.extra { border-color: rgba(16, 17, 20, 0.22); color: var(--cp-lp-body); }   /* .lp-ghost--ink border, dashed kept */

/* ---- 2.3 steps = .lp-step on the #0c1218 band, "01" = .lp-step .num ---- */
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .steps { grid-template-columns: 1fr; gap: 1.2rem; }
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .steps li {
  display: block;
  padding: 1.6rem 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  font-family: Mulish, sans-serif;
  font-size: 1.4rem;
  line-height: 1.65;
  font-weight: 900;
  color: var(--cp-orange);
}
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .steps h3 { margin-top: 0.5rem; color: #fff; }
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .steps h3::before,
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .steps li::after { content: none; }
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .steps p,
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .test .steps p { margin-top: 0.5rem; font-size: 0.95rem; color: rgba(255, 255, 255, 0.68); }

/* ---- 2.4 the test: section stays the dark band, .test-grid becomes the
        .aur-calc_panel inside it (as #calculator .aur-calc_panel) ---- */
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .test { overflow: visible; isolation: auto; }
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .test::before { content: none; }
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .test .test-grid {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: calc(100% - 3rem);
  max-width: calc(var(--wrap) - 3rem);
  margin: 0 auto;
  padding: 1.75rem;
  border: 1px solid var(--cp-panel-line);
  border-radius: 22px;
  background: var(--cp-panel-bg);
  box-shadow: var(--cp-panel-shadow);
}
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .test .test-grid::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -45%;
  right: -12%;
  width: 460px;
  height: 460px;
  background: var(--cp-panel-glow);
  pointer-events: none;
}

/* ---- 2.5 limits on the dark band = .lp-vcard boxes, rows = .lp-dna-list ---- */
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .split { grid-template-columns: 1fr; gap: 1rem; }
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .split > div {
  padding: 1.4rem 1.3rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .split h3 { margin-bottom: 1.1rem; color: #fff; }
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .split ul { gap: 1.1rem; padding: 0; border-radius: 0; background: none; }
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .split li {
  grid-template-columns: 1.3rem minmax(0, 1fr);
  column-gap: 1.3rem;
  padding-bottom: 0;
  border-bottom: 0;
  font-size: inherit;
  line-height: inherit;
  color: rgba(255, 255, 255, 0.72);
}
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .split li svg { width: 1.3rem; height: 1.3rem; margin-top: 0.05rem; }
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .no svg { color: var(--cp-muted-on-dark); }

/* ---- 2.6 ladder = .lp-prod-card; the main rung = the dark #trust card ---- */
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .ladder { grid-template-columns: 1fr; gap: 1.1rem; }
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .rung {
  gap: 1rem;
  padding: 1.5rem 1.5rem 1.6rem;
  border: 1px solid var(--cp-lp-line);
  border-radius: 16px;
  background: #fff;
}
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .rung.main {
  padding: 1.6rem 1.5rem;
  border-color: transparent;
  background: var(--cp-lp-ink);
  color: rgba(255, 255, 255, 0.82);
}
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .rung p:not(.price) { font-size: 0.97rem; color: var(--cp-lp-body); }
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .rung.main p:not(.price) { color: rgba(255, 255, 255, 0.82); }
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .rung .step-no {                         /* .lp-eyebrow */
  font-family: inherit;
  font-size: 0.72rem;
  line-height: 1.65;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--cp-orange);
}
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .rung.main .step-no { color: var(--cp-orange-soft); }   /* .lp-section--dark .lp-eyebrow */
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .rung .price { font-family: Mulish, sans-serif; }
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .rung.main .price span { color: rgba(255, 255, 255, 0.55); }
/* plain .btn on the dark card = .lp-ghost */
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .rung.main .btn:not(.btn-accent) {
  padding: 13px 22px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  background: transparent;
  color: #fff;
  font-weight: 500;
  transition: border-color 0.3s, background-color 0.3s;
}
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .rung.main .btn:not(.btn-accent)::before { content: none; }
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .rung.main .btn:not(.btn-accent):hover { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.05); }

/* ---- 2.7 proof = .lp-2col: the quote is the dark ink card, the founder an .lp-enemy card ---- */
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .proof-grid { grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .quote {
  max-width: none;
  padding: 1.6rem 1.5rem;
  border-left: 0;
  border-radius: 16px;
  background: var(--cp-lp-ink);
  font-size: inherit;
  line-height: inherit;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
}
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .quote p { font-size: 1.02rem; line-height: 1.6; color: rgba(255, 255, 255, 0.82); }
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .quote footer { margin-top: 1rem; font-size: 0.9rem; line-height: 1.65; letter-spacing: normal; color: rgba(255, 255, 255, 0.55); }
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .quote footer strong,
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .quote .link { color: #ffbf9c; text-decoration-color: currentColor; }
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .founder {
  gap: 1rem;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--cp-lp-line);
  border-radius: 14px;
  background: #fff;
}
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .founder .muted { font-size: 0.97rem; color: var(--cp-lp-body); }
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .founder .link { color: var(--cp-orange); }

/* ---- 2.8 plans table ---- */
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .plans tbody th { color: var(--cp-field-label); }

/* ---- 2.9 FAQ = the lined .faq_accordion_* of the product pages ---- */
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .faq { display: block; max-width: 48rem; margin: 0 auto; }
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .faq details { border: 0; border-bottom: 1px solid var(--cp-lp-line); border-radius: 0; background: none; color: inherit; }
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .faq details:first-child { border-top: 1px solid var(--cp-lp-line); }
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .faq summary {
  align-items: center;
  gap: 1.5rem;
  padding: 1.3rem 0;
  font-family: Mulish, sans-serif;
  font-size: 1.05rem;
  line-height: 1.65;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--cp-lp-ink);
}
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .faq summary::after { margin: 3px; }   /* the 20px glyph sat in a 26px .faq_accordion_icon_wrap */
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .faq .a { gap: 1rem; padding: 0 0 1.5rem; font-size: 0.98rem; line-height: inherit; color: var(--cp-lp-body); }
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .faq .a .link { color: inherit; }
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .faq details[open] .a { animation: cp-faq-in-lp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.05s backwards; }

/* ---- 2.10 tagline on the ink band = the old outlined big line
        (.aur-offer_bigline: transparent fill, orange-soft stroke, fills on reveal) ---- */
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .tagline .w {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 173, 117, 0.55);
  transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1), -webkit-text-stroke-color 0.5s;
}
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .tagline .w.on { color: #fff; -webkit-text-stroke-color: #fff; }

@keyframes cp-faq-in-lp { from { opacity: 0; transform: translateY(-0.6rem); } }

@media (min-width: 720px) {
  :root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .split { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
  :root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .test .test-grid { padding: 2.75rem; }
}
@media (min-width: 820px) {
  :root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) main > section:not(.test) .steps { grid-template-columns: repeat(3, 1fr); }
  :root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .ladder { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 860px) {
  :root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .proof-grid { grid-template-columns: 1.15fr 0.85fr; }
}
@media (max-width: 767px) {
  .field input,
  .field select { font-size: 1rem; }          /* old .aur-chat_input: 16px or iOS zooms on focus */
  :root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .tagline .w { -webkit-text-stroke-width: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  :root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"], [href$="/ai-receptionist.html"])) .tagline .w { color: #fff; -webkit-text-stroke-color: #fff; }
  .tagline .w { color: var(--ink); }
}


/* =====================================================================
   AUREN CLASSIC — footer, live chat, cookie banner
   Loads after auren-v2.css + auren-live-agent.css on index,
   ai-chat-agent, ai-receptionist. Two old footers, same split as the
   rest of auren-classic.css:
   · DEFAULT (index)  = old index.html .footer_wrap (Webflow): black,
     dashed lines, AUREN wordmark, rotating orange globe, parallax reveal.
   · PRODUCT (ai-chat-agent / ai-receptionist) = old inline .lp-foot.
   privacy / terms / 404 are on the old markup + old CSS (commit 4b04f80)
   and do not load this file.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. FOOTER — DEFAULT (old index .footer_wrap)
   --------------------------------------------------------------------- */
.footer{
  position:relative;isolation:isolate;overflow:hidden;     /* .parallax-scroll_wrap */
  display:flex;flex-direction:column;                       /* .footer_wrap flex column */
  min-height:min(101svh,1000px);
  /* [r-footer] {margin-top:4.25rem} (old index inline). As a transparent
     border: a margin would collapse into the 5rem under .final. */
  margin-top:0;border-top:4.25rem solid transparent;background-clip:padding-box;
  padding:7.5rem 0 2rem;
  background-color:#000;                                     /* --_theme---onsurface-dark */
  color:#fff;                                                /* --_theme---onsurface-light */
  font-size:1rem;line-height:1.32;
}
.footer .wrap{
  flex:1;display:flex;flex-direction:column;justify-content:space-between;
  max-width:90rem;                                           /* .c-container (--max-width--main) */
}

/* .footer_top_wrap: 1fr 1fr, gutter 1.25rem; left column stacks the
   sitemap and the contact block 1.75rem apart (.footer_top_col gap);
   the right column is the CTA block (.footer_top_cta_content.c-max-4-col) */
.footer .footer-grid{
  position:relative;z-index:1;
  grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;
  column-gap:1.25rem;row-gap:1.75rem;
  margin-bottom:7.5rem;
  align-items:start;
}
.footer .footer-grid > div:nth-child(2){grid-column:1;grid-row:1}
.footer .footer-grid > div:nth-child(3){grid-column:1;grid-row:2}
.footer .footer-grid > div:first-child{
  grid-column:2;grid-row:1 / span 2;
  display:flex;flex-direction:column;
  width:calc(100% - clamp(0.75rem,0.608rem + 0.71vw,1.25rem) * 2);
  max-width:28.5rem;margin-left:auto;
}

/* "Auren" = .c-title-2 (undoes the nav logo treatment of .brand) */
.footer .footer-grid .brand{
  display:block;width:auto;height:auto;overflow:visible;white-space:normal;
  background:none;color:#fff;
  font-size:clamp(2.5rem,2.322rem + 0.89vw,3.125rem);
  line-height:1.1;letter-spacing:-0.05em;font-weight:400;
  margin-bottom:calc(2.5rem - 12px);   /* .footer_top_cta_content gap 2.5rem, minus the inline 12px */
}
/* description = .c-text-2 */
.footer .footer-grid .brand + p{
  max-width:none!important;            /* beats the inline max-width:360px; old block was 28.5rem */
  color:#fff;
  font-size:clamp(1.125rem,1.089rem + 0.18vw,1.25rem);
  line-height:1.4;letter-spacing:-0.03em;
}

/* "Продукти" = "Бързи връзки" (.c-text-4-mono.cc-onsurface-weak) */
.footer .footer-grid h2{
  margin:0 0 .75rem;                   /* .footer_top_sitemap_wrap gap */
  font-family:"Formular Mono",Georgia,sans-serif;
  font-size:.75rem;line-height:1.2;font-weight:400;letter-spacing:0;
  color:#9da0a3;                       /* --color--gray-300 */
}
/* "Контакт" = "Пиши или звънни" (.aur-contact_label) */
.footer .footer-grid > div:nth-child(3) h2{
  margin:0 0 .7rem;
  font-family:Inter,sans-serif;font-size:.78rem;line-height:1;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:#9da0a3;
}

/* sitemap links (.footer_top_sitemap_link + .c-text-3 + underline) */
.footer .footer-grid ul{gap:0}
.footer .footer-grid > div:nth-child(2) a{
  display:inline-block;padding:.25rem 0;
  color:#fff;font-size:1rem;line-height:1.32;
}
.footer .footer-grid > div:nth-child(2) a::after{
  content:"";display:block;width:0;height:1px;margin-top:20px;   /* .c-text-3 margin-bottom 20px */
  background-color:#fff;
  transition:width .5s cubic-bezier(0.165,0.84,0.44,1);
}
.footer .footer-grid > div:nth-child(2) a:hover{color:#fff}
.footer .footer-grid > div:nth-child(2) a:hover::after{width:100%}

/* phone / Viber = .aur-footer_contact .aur-contact_link pills */
.footer .footer-grid > div:nth-child(3) ul{display:flex;flex-wrap:wrap;gap:.6rem}
.footer .footer-grid a[href^="tel:"],
.footer .footer-grid a[href^="viber:"]{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.62rem 1rem;
  border:1px solid rgba(255,255,255,.14);border-radius:12px;
  background:rgba(255,255,255,.03);
  color:#fff;font-family:Inter,sans-serif;font-size:.92rem;font-weight:500;line-height:1;white-space:nowrap;
  transition:border-color .3s,background-color .3s,color .3s;
}
.footer .footer-grid a[href^="tel:"]::before,
.footer .footer-grid a[href^="viber:"]::before{
  content:"";flex:none;width:17px;height:17px;background-color:currentColor;
  -webkit-mask:var(--aur-ico) center/contain no-repeat;mask:var(--aur-ico) center/contain no-repeat;
}
.footer .footer-grid a[href^="tel:"]{--aur-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E")}
.footer .footer-grid a[href^="viber:"]{--aur-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E")}
.footer .footer-grid a[href^="tel:"]:hover{border-color:rgba(247,114,24,.55);background:rgba(247,114,24,.12);color:#fff}
.footer .footer-grid a[href^="viber:"]:hover{border-color:rgba(126,87,194,.7);background:rgba(126,87,194,.16);color:#fff}

/* Instagram = .footer_top_social_link: 2.5rem round icon button on its own
   row, 1.5rem (.aur-footer_contact margin) + 1.75rem (column gap) below the
   pills. The word stays in the DOM as the accessible name. */
.footer .footer-grid li:has(> a[href*="instagram.com"]){flex-basis:100%;margin-top:calc(1.5rem + 1.75rem - .6rem)}
.footer .footer-grid a[href*="instagram.com"]{
  display:flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;padding:.5rem;
  border:4px solid #202020;border-radius:100vw;background-color:#202020;   /* --color--gray-800 */
  color:#fff;font-size:0;line-height:0;
  transition:background-color .2s,color .2s;
}
.footer .footer-grid a[href*="instagram.com"]::before{
  content:"";width:16px;height:16px;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.051.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.051.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.footer .footer-grid a[href*="instagram.com"]:hover{background-color:#fff;color:#000}

/* AUREN wordmark (.aur-footer_wordmark, auren-ui.css): sits between the
   top and bottom rows, behind the globe. In-view state translateY(12%),
   the container clipped what slid below its edge. */
.footer .wrap::after{
  content:"AUREN";content:"AUREN" / "";
  order:1;display:block;
  margin-top:clamp(2rem,5vw,4rem);
  text-align:center;
  font-family:Inter,sans-serif;font-size:clamp(4.5rem,17.5vw,17rem);font-weight:800;
  line-height:.8;letter-spacing:.02em;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.02) 85%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transform:translateY(12%);clip-path:inset(0 0 12% 0);
  user-select:none;pointer-events:none;
}

/* bottom row (.footer_bottom_wrap): privacy left, © centred (white), the
   other legal links right; .c-text-link-mono.cc-footer-legal */
.footer .legal{
  order:2;position:relative;z-index:1;
  margin-top:0;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.25rem;
  font-family:"Formular Mono",Georgia,sans-serif;font-size:.75rem;line-height:1.2;
  color:#9da0a3;
}
.footer .legal a{color:#9da0a3;transition:color .2s}
.footer .legal a:hover{color:#fff}
.footer .legal a[href*="terms"]{margin-left:auto}
.footer .legal > span:first-child{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  white-space:nowrap;color:#fff;
}

/* the globe (.footer_globe_wrap.c-max-8-col + .footer_globe_img), rotating
   80s, and its dashed orbit lines (.footer_globe_lines, opacity .6,
   lighten) — the SVG is the old markup's, as an image */
.footer::before,
.footer::after{
  content:"";position:absolute;left:0;right:0;bottom:-70%;
  width:calc(100% - clamp(0.75rem,0.608rem + 0.71vw,1.25rem) * 2);max-width:57.88rem;
  aspect-ratio:1;margin:0 auto;border-radius:100vw;pointer-events:none;
  animation:aurFootGlobeSpin 80s linear infinite;
}
.footer::after{
  z-index:0;
  background-image:linear-gradient(126deg,#f75d00 10%,#000);
  box-shadow:0 6px 100px 60px rgba(247,93,0,.3),inset 0 6px 80px 60px rgba(192,193,159,.8);
}
.footer::before{
  z-index:1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 776 776' fill='none' opacity='.6'%3E%3Cstyle%3Eellipse%7Bstroke-dasharray:20 20;animation:d 24s ease-in-out infinite alternate%7Dg:nth-of-type(1) ellipse%7Banimation-delay:0s%7Dg:nth-of-type(2) ellipse%7Banimation-delay:.3s%7Dg:nth-of-type(3) ellipse%7Banimation-delay:.6s%7Dg:nth-of-type(4) ellipse%7Banimation-delay:.9s%7Dg:nth-of-type(5) ellipse%7Banimation-delay:1.2s%7Dg:nth-of-type(6) ellipse%7Banimation-delay:1.5s%7D%40keyframes d%7Bfrom%7Bstroke-dashoffset:2000%7Dto%7Bstroke-dashoffset:0%7D%7D%3C/style%3E%3Cg style='mix-blend-mode:lighten'%3E%3Cellipse cx='382.622' cy='116.016' rx='382.622' ry='116.016' transform='matrix(1 0 0 -1 5.38281 504.016)' stroke='%23F75D00'/%3E%3C/g%3E%3Cg style='mix-blend-mode:lighten'%3E%3Cellipse cx='381.001' cy='116.086' rx='381.001' ry='116.086' transform='matrix(0.866025 -0.5 -0.5 -0.866025 116.086 679.033)' stroke='%23F75D00'/%3E%3C/g%3E%3Cg style='mix-blend-mode:lighten'%3E%3Cellipse cx='381.001' cy='116.086' rx='381.001' ry='116.086' transform='matrix(0.5 -0.866025 -0.866025 -0.5 298.023 775.998)' stroke='%23F75D00'/%3E%3C/g%3E%3Cg style='mix-blend-mode:lighten'%3E%3Cellipse cx='381.853' cy='115.248' rx='381.853' ry='115.248' transform='matrix(-4.37114e-08 -1 -1 4.37114e-08 503.25 769.854)' stroke='%23F75D00'/%3E%3C/g%3E%3Cg style='mix-blend-mode:lighten'%3E%3Cellipse cx='381.001' cy='116.086' rx='381.001' ry='116.086' transform='matrix(-0.5 -0.866025 -0.866025 0.5 679.031 659.914)' stroke='%23F75D00'/%3E%3C/g%3E%3Cg style='mix-blend-mode:lighten'%3E%3Cellipse cx='381.001' cy='116.086' rx='381.001' ry='116.086' transform='matrix(-0.866025 -0.5 -0.5 0.866025 776 477.969)' stroke='%23F75D00'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat;
  mix-blend-mode:lighten;
}
@keyframes aurFootGlobeSpin{from{rotate:0deg}to{rotate:360deg}}

@media (max-width:991px){
  .footer{min-height:auto;padding-top:4rem}
  .footer .footer-grid{grid-template-columns:1fr;grid-template-rows:none;row-gap:1.75rem}
  .footer .footer-grid > div:first-child{
    order:-1;grid-column:auto;grid-row:auto;
    max-width:none;margin-left:0;margin-bottom:.75rem;   /* 2.5rem (.footer_top_wrap row gap) - 1.75rem */
  }
  .footer .footer-grid > div:nth-child(2),
  .footer .footer-grid > div:nth-child(3){grid-column:auto;grid-row:auto}
  .footer::before,.footer::after{bottom:-60vw}
}
@media (max-width:767px){
  .footer{padding-bottom:3rem}                          /* auren-ui.css */
  .footer::before,.footer::after{bottom:-108vw}         /* auren-ui.css: only the crown closes the page */
  .footer::after{box-shadow:0 6px 100px 60px rgba(247,93,0,.3),inset 0 6px 40px 30px rgba(192,193,159,.8)}
  .footer .legal{flex-direction:column;justify-content:center;gap:1rem}
  .footer .legal a{color:#fff}                          /* cc-footer-legal is onsurface-light here */
  .footer .legal a[href*="terms"]{margin-left:0}
  .footer .legal > span:first-child{position:static;transform:none;order:1;margin-top:1rem}
}
@media (max-width:380px){
  .footer .footer-grid a[href^="tel:"],
  .footer .footer-grid a[href^="viber:"]{padding:.6rem .8rem;font-size:.86rem}
  .footer .footer-grid > div:nth-child(3) ul{gap:.45rem}
}

/* Parallax footer reveal (Webflow IX2 a-7, desktop only): over the footer's
   entry the content rises from -50% and fades in from 30%, the globe from
   60% (opacity 0, +20%). Scroll-driven, so no JS. */
@supports (animation-timeline:view()){
  @media (min-width:992px) and (prefers-reduced-motion:no-preference){
    .footer{view-timeline:--aur-foot block}
    .footer .footer-grid,
    .footer .wrap::after,
    .footer .legal{
      animation:aurFootReveal linear both;
      animation-timeline:--aur-foot;animation-range:entry 4.25rem entry calc(100% + 4.25rem);   /* from the black edge, not the transparent border */
    }
    .footer::before,
    .footer::after{
      animation:aurFootGlobeSpin 80s linear infinite,aurFootGlobeReveal linear both;
      animation-timeline:auto,--aur-foot;animation-range:normal,entry 4.25rem entry calc(100% + 4.25rem);
    }
  }
}
@keyframes aurFootReveal{
  0%{translate:0 calc(min(101svh,1000px) * -.5);opacity:0}
  30%{opacity:0}
  100%{translate:0 0;opacity:1}
}
@keyframes aurFootGlobeReveal{
  0%{translate:0 calc(min(101svh,1000px) * -.5 + 20%);opacity:0}
  60%{translate:0 calc(min(101svh,1000px) * -.2 + 20%);opacity:0}
  100%{translate:0 0;opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .footer::before,.footer::after{animation:none}
}

/* ---------------------------------------------------------------------
   2. FOOTER — PRODUCT PAGES (old .lp-foot, inline in ai-chat-agent.html)
   --------------------------------------------------------------------- */
:root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer{
  min-height:0;border-top:0;
  padding:clamp(3.5rem,7vw,5.5rem) 0 3rem;
  background-color:#060910;                                  /* --lp-dark */
  color:rgba(255,255,255,.6);
}
:root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer::before,
:root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer::after{content:none}
:root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer .wrap{max-width:var(--wrap);justify-content:flex-start}

/* .lp-foot-grid: one column, two from 760px; left = links then contact
   (.aur-contact margin-top 1.5rem), right = the closing statement */
:root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer .footer-grid{
  grid-template-columns:1fr;grid-template-rows:none;gap:2.5rem;margin-bottom:0;
}
:root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer .footer-grid > div{grid-column:auto;grid-row:auto}
:root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer .footer-grid > div:first-child{
  order:1;width:auto;max-width:none;margin:0;
}
@media (min-width:760px){
  :root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer .footer-grid{
    grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;column-gap:2.5rem;row-gap:1.5rem;
  }
  :root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer .footer-grid > div:nth-child(2){grid-column:1;grid-row:1}
  :root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer .footer-grid > div:nth-child(3){grid-column:1;grid-row:2}
  :root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer .footer-grid > div:first-child{grid-column:2;grid-row:1 / span 2}
}

/* every column label = .lp-foot h4 */
:root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer .footer-grid :is(.brand,h2){
  display:block;width:auto;height:auto;overflow:visible;background:none;
  margin:0 0 1rem;
  font-family:Inter,sans-serif;font-size:.72rem;line-height:normal;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4);
}
:root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer .footer-grid .brand{margin-bottom:calc(1rem - 12px)}  /* + the inline 12px */
/* description = .lp-foot-cta */
:root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer .footer-grid .brand + p{
  font-family:Mulish,sans-serif;font-weight:800;font-size:clamp(1.2rem,2.4vw,1.6rem);
  line-height:1.25;letter-spacing:normal;color:#fff;
}
/* .lp-foot-links */
:root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer .footer-grid > div:nth-child(2) ul{gap:.6rem;font-size:.95rem}
:root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer .footer-grid > div:nth-child(2) a{
  display:inline;padding:0;font-size:inherit;line-height:inherit;color:rgba(255,255,255,.72);
}
:root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer .footer-grid > div:nth-child(2) a::after{content:none}
:root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer .footer-grid > div:nth-child(2) a:hover{color:#fff}
/* contact: plain .aur-contact pills (background .04 outside the index footer) */
:root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer .footer-grid :is(a[href^="tel:"],a[href^="viber:"]){background:rgba(255,255,255,.04)}
:root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer .footer-grid li:has(> a[href*="instagram.com"]){flex-basis:auto;margin-top:0}
:root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer .footer-grid a[href*="instagram.com"]{
  width:auto;height:auto;gap:.5rem;
  padding:.62rem 1rem;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.04);
  color:#fff;font-family:Inter,sans-serif;font-size:.92rem;font-weight:500;line-height:1;white-space:nowrap;
  transition:border-color .3s,background-color .3s,color .3s;
}
:root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer .footer-grid a[href*="instagram.com"]::before{width:17px;height:17px}
:root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer .footer-grid a[href*="instagram.com"]:hover{border-color:rgba(247,114,24,.55);background:rgba(247,114,24,.12);color:#fff}

/* .lp-foot-word */
:root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer .wrap::after{
  content:"Auren";content:"Auren" / "";
  margin-top:3rem;
  font-family:Mulish,sans-serif;font-size:clamp(4rem,16vw,11rem);font-weight:900;
  line-height:.8;letter-spacing:.03em;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.015));
  -webkit-background-clip:text;background-clip:text;
  transform:none;clip-path:none;
}
/* .lp-foot-legal: rule above, © last */
:root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer .legal{
  flex-direction:row;justify-content:flex-start;align-items:baseline;
  margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.08);
  gap:.5rem 1.5rem;
  font-family:inherit;font-size:.8rem;line-height:inherit;color:rgba(255,255,255,.4);
}
:root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer .legal a{color:rgba(255,255,255,.72)}
:root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer .legal a:hover{color:#fff}
:root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer .legal a[href*="terms"]{margin-left:0}
:root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer .legal > span:first-child{
  position:static;transform:none;order:1;margin-top:0;color:inherit;
}
@supports (animation-timeline:view()){
  :root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer :is(.footer-grid,.legal),
  :root:is(:has(link[rel="canonical"][href$="/ai-chat-agent.html"]),:has(link[rel="canonical"][href$="/ai-receptionist.html"])) .footer .wrap::after{animation:none}
}

/* ---------------------------------------------------------------------
   3. LIVE CHAT (.aur-chat_*) — old index.html inline <style>, the dark
      card with orange user bubbles. The v2 frame/mount become plain
      wrappers; the card itself carries the look.
   --------------------------------------------------------------------- */
.agent-frame,
.agent-mount{min-height:0;padding:0;border:0;border-radius:0;background:none}
.aur-chat{
  min-height:0;max-width:640px;margin:0 auto;
  background:#0f0f10;border:1px solid #2a2a2a;border-radius:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  color:#ededed;
}
#agent .aur-chat{margin-top:3rem}
.aur-chat_bar{gap:8px;padding:14px 18px;border-bottom:1px solid #222;background:#141416}
.aur-chat_dot{border-radius:50%;background:#3a3a3a}
.aur-chat_dot:first-child{background:#f75d00}
.aur-chat_title{font-size:.8rem;line-height:1;font-weight:400;letter-spacing:.02em;color:#8a8a8a}
.aur-chat_body{flex:none;gap:.6rem;padding:1.25rem;scrollbar-color:#333 transparent}   /* fixed 340px, as before (v2 flex:1 let it shrink) */
.aur-chat_msg{max-width:80%;padding:.7rem .95rem;border-radius:14px;font-size:.95rem;line-height:1.5}
.aur-chat_msg--bot{background:#1c1c1f;border:1px solid #2a2a2a;color:#ededed;border-bottom-left-radius:4px}
.aur-chat_msg--user{background:#f75d00;color:#fff;border-bottom-right-radius:4px}
.aur-chat_msg.is-typing{color:#8a8a8a;letter-spacing:.15em}
.aur-chat_link{
  margin-top:.55rem;color:#f75d00;font-weight:600;
  text-decoration:none;border-bottom:1px solid rgba(247,93,0,.45);
  transition:border-color .2s ease,color .2s ease;
}
.aur-chat_link:hover{color:#ff7b2b;border-bottom-color:#ff7b2b}
.aur-chat_chips{gap:.4rem;padding:0 12px 12px}
.aur-chat_chip{
  padding:.42rem .75rem;
  font-family:inherit;font-size:.82rem;line-height:1.2;font-weight:400;
  color:rgba(255,255,255,.82);background:rgba(247,93,0,.08);
  border:1px solid rgba(247,93,0,.32);border-radius:999px;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.aur-chat_chip:hover,
.aur-chat_chip:focus-visible{color:#fff;background:rgba(247,93,0,.18);border-color:rgba(247,93,0,.6)}
.aur-chat_timing{margin-top:.5rem;font-size:.7rem;line-height:inherit;color:rgba(255,255,255,.32)}
.aur-chat_input{gap:10px;padding:12px;border-top:1px solid #222;background:#141416}
.aur-chat_input input{
  min-height:0;padding:.65rem .9rem;
  font-size:.95rem;line-height:normal;color:#fff;background:#0f0f10;
  border:1px solid #2e2e2e;border-radius:10px;outline:none;
  transition:border-color .2s ease;
}
.aur-chat_input input::placeholder{color:#5a5a5a}
.aur-chat_input input:focus{outline:none;border-color:#f75d00}
.aur-chat_send{
  width:38px;height:38px;border-radius:50%;
  background:#f75d00;color:#fff;font-size:1.1rem;
  transition:opacity .2s ease,transform .15s ease;
}
.aur-chat_send:hover{background:#f75d00;transform:translateY(-1px)}
.aur-chat_send:disabled{opacity:.5;cursor:default;transform:none}
@media (max-width:767px){
  .aur-chat_body{height:300px;padding:1rem}
  .aur-chat_msg{max-width:88%}
  .aur-chat_input input{font-size:1rem}   /* 16px: iOS does not zoom */
}

/* ---------------------------------------------------------------------
   4. COOKIE BANNER (.aur-consent, styles injected by auren-consent.js)
   The card, text and link already use the old chat-card values
   (#0f0f10 / #2a2a2a / 16px / 0 20px 50px, #ededed, #F75D00 link with
   the .aur-chat_link rule). Only the buttons differ: give them the old
   primary button (.aur-btn-glow). One class deeper than the injected
   rules, which load later.
   --------------------------------------------------------------------- */
.aur-consent .aur-consent_btns button{
  border:1px solid #ba530e;border-radius:15px;
  background:#f66f14 radial-gradient(circle farthest-corner at 50% 100%,#ffad75,rgba(246,111,20,0) 79%);
  font-weight:500;
  box-shadow:inset 0 2px 5px rgba(0,0,0,0),0 0 30px rgba(242,147,84,.6);
  transition:all .375s,transform .375s cubic-bezier(0.175,0.885,0.32,1.275);
}
.aur-consent .aur-consent_btns button:hover{
  background:#f66f14 radial-gradient(circle farthest-corner at 50% 100%,#ffad75,rgba(246,111,20,0) 79%);
  border-color:#f66f14;transform:scale(1.04);
  box-shadow:inset 0 6px 5px rgba(255,255,255,.2),inset 1px -9px 13px rgba(0,0,23,.34),0 7px 30px rgba(246,112,20,.6);
}
.aur-consent .aur-consent_btns button:focus-visible{outline:2px solid #ff9a4d;outline-offset:3px}


/* =====================================================================
   AUREN CLASSIC — mobile + motion details
   Loads after the other auren-classic.css sections. Two families, same
   split as the rest of the file:
   · DEFAULT  = old index.html (Webflow + js/meridian-main.js engine)
   · PRODUCT  = old ai-chat-agent.html / ai-receptionist.html (.lp-*,
                inline .rx reveal script)
   Every reveal is CSS-only (scroll-driven, @supports-gated, visible by
   default) and switched off for prefers-reduced-motion.
   ===================================================================== */

:root{
  /* old timing tokens not yet defined by the other sections */
  --aur-eas-2:cubic-bezier(0,0,0,1);           /* index inline :root --eas-2 */
  --aur-ease-io:cubic-bezier(0.65,0,0.35,1);   /* auren-ui.css --aur-ease-io */
  --aur-dur-1:1s;                              /* --dur-1, engine config dur1 */
  --aur-dur-3:.5s;                             /* --dur-3, engine config dur3 */
  --aur-eng-eas-1:cubic-bezier(0.17,0.25,0.3,1);  /* engine eas1 = index --eas-1 */
  --aur-eng-eas-2:cubic-bezier(0.7,0,0.3,1);      /* engine eas2 (NOT the inline --eas-2) */
  --aur-reveal-span:25vh;                      /* scroll distance a reveal takes (judgement call, see notes) */
}

/* scale-in reveals start at 1.1x / 1.2x: keep them from widening the
   page while they run (old product pages had body{overflow-x:hidden}) */
main{overflow-x:clip}

/* ---------------------------------------------------------------------
   1. MOBILE — product hero clears the fixed nav again
   global's  :root:has(canonical) main > section {padding:clamp(4.5rem,10vw,8rem) 0}
   outranks the hero's own padding, so on <=768px the h1 started at 72px,
   under the 80px nav. Old #ovo-hero-wrapper (ai-chat-agent / ai-receptionist
   inline <style>): padding clamp(7.5rem,13vw,10rem) 0 clamp(4rem,8vw,6rem)
   = 120px / 64px measured at 390, 160px / 96px at 1280.
   --------------------------------------------------------------------- */
:root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"],[href$="/ai-receptionist.html"])) main > section.hero{
  padding:clamp(7.5rem,13vw,10rem) 0 clamp(4rem,8vw,6rem);
}
/* the bar stood down while the fullscreen menu was open
   (auren-ui.css body.aur-menu-open .aur-sticky-cta; v2 sets body.lock) */
body.lock .sticky-cta{opacity:0;transform:translateY(130%);pointer-events:none}

/* ---------------------------------------------------------------------
   2. TABS (.tabs / .tab, ai-chat-agent #demo on the dark ink band)
   The old site had no tab control. Pills = the old live-chat preset
   question chips (index inline .aur-chat_chip / .aur-chat_chips);
   selected = the old active filter toggle
   ([r-filter-dropdown].cc-active [r-filter-dropdown-toggle]
   {background-color: var(--_theme---brand)} = #f75d00).
   Panel switch = the engine's pricing-column switch
   (js/meridian-main.js vg(): display block, opacity 0 -> 1, dur3 .5s, eas1).
   --------------------------------------------------------------------- */
.tabs{
  gap:.4rem;padding:0;border:0;border-radius:0;background:none;   /* .aur-chat_chips gap */
}
.tab{
  padding:.42rem .75rem;
  border:1px solid rgba(247,93,0,.32);border-radius:999px;
  background:rgba(247,93,0,.08);color:rgba(255,255,255,.82);
  font-family:inherit;font-size:.82rem;line-height:1.2;font-weight:400;
  box-shadow:none;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.tab:hover,
.tab:focus-visible{color:#fff;background:rgba(247,93,0,.18);border-color:rgba(247,93,0,.6)}
.tab[aria-selected="true"],
.tab[aria-selected="true"]:hover{color:#fff;background:#f75d00;border-color:#f75d00;box-shadow:none}
.tab:focus-visible{border-radius:999px}
[role="tabpanel"]:not([hidden]){animation:aurPanelIn var(--aur-dur-3) var(--aur-eng-eas-1)}
@keyframes aurPanelIn{from{opacity:0}}

/* ---------------------------------------------------------------------
   3. THREAD — the hero conversation plays in like the old hero dashboard
   rows (hero_cloned.css .coded-db-activity-item / .coded-db-agent-row:
   itemFadeIn .8s cubic-bezier(0.17,0.84,0.44,1), opacity 0 + translateY(10px),
   no blur). The per-step delays (--d) are v2 story timing and stay.
   --------------------------------------------------------------------- */
.thread [data-step]{transform:translateY(10px);filter:none}
.thread.play [data-step]{
  animation:aurItemFadeIn .8s cubic-bezier(0.17,0.84,0.44,1) forwards;
  animation-delay:calc(var(--d,0) * 1ms);
}
@keyframes aurItemFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* The old product phone mock also rose in as a whole (.rx.d1 wrapper:
   opacity 0 + translateY(22px), .7s cubic-bezier(0.16,1,0.3,1), +.08s).
   Not reproduced on .thread itself: an animation on .thread makes it a
   stacking context, which pulls the hero section's z-index:-1 ::before
   glow in front of the card background. It needs a wrapper (see notes). */

/* ---------------------------------------------------------------------
   4. TAGLINE word lighting — DEFAULT family: the old engine's text timing
   (dur1 1s, eas1). PRODUCT keeps the .aur-offer_bigline fill set by the
   cards section (.5s ease-out).
   --------------------------------------------------------------------- */
.tagline .w{transition:color var(--aur-dur-1) var(--aur-eng-eas-1)}

/* ---------------------------------------------------------------------
   5. FAQ height — old index inline CSS fallback of the GSAP accordion:
   :root{interpolate-size:allow-keywords} + details::details-content
   {height:0;overflow:hidden;transition:height var(--dur-3),content-visibility
   var(--dur-3);transition-behavior:allow-discrete}. Icon spring + answer
   fade are already in the cards section.
   --------------------------------------------------------------------- */
@supports selector(::details-content){
  :root{interpolate-size:allow-keywords}
  .faq details::details-content{
    height:0;overflow:hidden;
    transition:height var(--aur-dur-3),content-visibility var(--aur-dur-3);
    transition-behavior:allow-discrete;
  }
  .faq details[open]::details-content{height:auto}
}

/* ---------------------------------------------------------------------
   6. PRESS — old buttons had no :active transform (v2 adds
   translateY(1px) scale(.98)); hover transforms from the buttons section stay.
   --------------------------------------------------------------------- */
.btn:active:not(:hover){transform:none}

/* ---------------------------------------------------------------------
   7. SCROLL REVEALS (CSS-only: scroll-driven; without support everything
   is simply visible). `scale` / `translate` / `opacity` only, fill
   backwards — hover `transform`s and later opacity changes keep working.
   --------------------------------------------------------------------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){

    /* DEFAULT — [r-card-animate-onscroll]: from scale 1.1 + opacity 0,
       dur1 (1s), eas1, start "top bottom" (engine config scale.medium) */
    :root:not(:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"],[href$="/ai-receptionist.html"]))) :is(.door,.rung,.split > div,.founder){
      animation:aurCardIn var(--aur-eng-eas-1) backwards;
      animation-timeline:view();
      animation-range:entry 0% entry var(--aur-reveal-span);
    }

    /* DEFAULT — [r-text-animate-onscroll]: from scale 1.2 + opacity 0,
       transform-origin center top, dur1, eas1 (scale.big). The old site
       stripped this attribute <=767px (it clipped full-width headings), so
       it only runs above the v2 720px step. The tagline already has one
       span per line, so it gets the real per-line version. */
    @media (min-width:721px){
      :root:not(:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"],[href$="/ai-receptionist.html"]))) :is(main > section:not(.hero,.test,.final) .sec-head > *,.tagline .line){
        transform-origin:center top;
        animation:aurTextIn var(--aur-eng-eas-1) backwards;
        animation-timeline:view();
        animation-range:entry 0% entry var(--aur-reveal-span);
      }
    }

    /* PRODUCT — inline .rx / .rx.is-in: opacity 0 + translateY(22px),
       .7s cubic-bezier(0.16,1,0.3,1); .d1/.d2/.d3 = .08/.16/.24s delays,
       turned into the same share of the scroll span. Runs on phones too. */
    :root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"],[href$="/ai-receptionist.html"])) :is(
      main > section:not(.hero,.test,.final) .sec-head > *,
      .tagline .line,
      .demo-grid > *,
      .benefits > div,
      .chips,
      main > section:not(.test) .steps li,
      .test .test-grid,
      .rung,
      .split > div,
      .proof-grid > *,
      .voice-demo){
      animation:aurRxReveal cubic-bezier(0.16,1,0.3,1) backwards;
      animation-timeline:view();
      animation-range:entry calc(var(--aur-reveal-span) * var(--rx-d,0) / .7) entry calc(var(--aur-reveal-span) * (1 + var(--rx-d,0) / .7));
    }
    /* .d1 = .08s: the lead under an h2 (.lp-lead), the first row of a 2x2
       grid (.lp-prod-card), the transcript (.lp-call), the specs strip
       (.lp-specs), the calculator panel (.aur-calc_panel = .test-grid,
       revealed as one block like the old panel), the first card */
    :root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"],[href$="/ai-receptionist.html"])) :is(
      .sec-head > p,
      .demo-grid > *,
      .benefits > div:nth-child(-n+2),
      .chips,
      .test .test-grid,
      .voice-demo,
      :is(.steps li,.rung,.split > div,.proof-grid > *):nth-child(1)){--rx-d:.08}
    /* .d2 = .16s */
    :root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"],[href$="/ai-receptionist.html"])) :is(
      .benefits > div:nth-child(n+3),
      :is(.steps li,.rung,.split > div,.proof-grid > *):nth-child(2)){--rx-d:.16}
    /* .d3 = .24s */
    :root:has(link[rel="canonical"]:is([href$="/ai-chat-agent.html"],[href$="/ai-receptionist.html"])) :is(.steps li,.rung):nth-child(3){--rx-d:.24}
  }
}
@keyframes aurCardIn{from{opacity:0;scale:1.1}}
@keyframes aurTextIn{from{opacity:0;scale:1.2}}
@keyframes aurRxReveal{from{opacity:0;translate:0 22px}}

/* ---------------------------------------------------------------------
   8. PAGE TRANSITION — the old .aur-curtain without JS (optional).
   Cross-document view transitions (Chromium 126+, Safari 18.2+; ignored
   elsewhere). A dark #060910 curtain rises over the old page in .55s
   (auren-ui.css .aur-curtain.is-active, --aur-ease-io), holds .16s
   (auren-ui.js), then lifts off the new page in .65s (.is-leaving).
   The "AUREN" logo and the orange edge glow cannot be drawn here.
   Delete this block to drop the transition.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition{background:#060910}
  ::view-transition-group(root){animation-duration:1.36s}
  ::view-transition-old(root){animation:aurCurtainCover .55s var(--aur-ease-io) both}
  ::view-transition-new(root){animation:aurCurtainLift .65s var(--aur-ease-io) .71s both}
}
@keyframes aurCurtainCover{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
@keyframes aurCurtainLift{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ---------------------------------------------------------------------
   9. REDUCED MOTION — v2 kills animations/transitions with
   `*{animation:none!important;transition:none!important}`; put back the
   end states this section hides, and stop what `*` does not reach.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .thread [data-step]{opacity:1;transform:none;filter:none}
  .faq details::details-content{transition:none}
}

/* The founder card was removed from all three pages: the testimonial is the
   grid's only child now, so it takes the full row instead of leaving an
   empty second column. */
.proof-grid:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 52rem) !important; }

/* Consultation button on the success screen: the old success screen is centred. */
.form-done .booking-next { justify-items: center; text-align: center; }

/* финалната секция е центрирана: бутонът за разговор и линкът към теста също */
.final .final-actions { justify-content: center; }