/* ==================================================================
   AUREN UI LAYER
   Navigation, preloader, page transitions, custom cursor,
   hero micro-interactions, section polish, offer redesign, footer.
   Depends on: nothing (self-contained). JS hooks: js/auren-ui.js
   ================================================================== */

:root {
  --aur-dark: #060910;
  --aur-dark-soft: #0c1218;
  --aur-orange: #f66f14;
  --aur-orange-deep: #f75d00;
  --aur-orange-soft: #ffad75;
  --aur-white: #ffffff;
  --aur-text-muted: #9da0a3;
  --aur-font: Inter, sans-serif;
  --aur-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --aur-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ==================================================================
   1. NAVIGATION
   ================================================================== */

.aur-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  padding: 1.1rem 1.5rem;
  pointer-events: none;
  font-family: var(--aur-font);
}

.aur-nav_inner {
  pointer-events: auto;
  max-width: 74rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.55rem 0.65rem 0.55rem 1.1rem;
  border-radius: 18px;
  border: 1px solid transparent;
  transition:
    background-color 0.45s var(--aur-ease-out),
    border-color 0.45s var(--aur-ease-out),
    box-shadow 0.45s var(--aur-ease-out),
    transform 0.45s var(--aur-ease-out);
}

.aur-nav.is-scrolled .aur-nav_inner {
  background-color: rgba(6, 9, 16, 0.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-color: rgba(247, 114, 24, 0.16);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 -8px 24px rgba(246, 112, 20, 0.08);
}

.aur-nav.is-hidden .aur-nav_inner {
  transform: translateY(-130%);
}

.aur-nav_logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.aur-nav_logo img {
  height: 2rem;
  width: auto;
  display: block;
}

.aur-nav_links {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 0 auto;
}

.aur-nav_link {
  color: #e6e7e8;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.4rem 0;
}

/* rolling text hover */
.aur-roll {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1;
}

.aur-roll > span {
  display: block;
  transition: transform 0.45s var(--aur-ease-out);
}

.aur-roll > span > span {
  display: block;
  height: 1em;
}

.aur-roll > span > span:last-child {
  color: var(--aur-orange-soft);
}

a:hover .aur-roll > span,
button:hover .aur-roll > span {
  transform: translateY(-1em);
}

.aur-nav_cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background-color: var(--aur-orange);
  background-image: radial-gradient(circle farthest-corner at 50% 100%, var(--aur-orange-soft), rgba(246, 111, 20, 0) 79%);
  color: #fff;
  border: 1px solid #ba530e;
  border-radius: 13px;
  padding: 9px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow 0.375s, border-color 0.375s;
  box-shadow: 0 0 24px rgba(242, 147, 84, 0.45);
}

.aur-nav_cta:hover {
  border-color: var(--aur-orange);
  box-shadow: inset 0 6px 5px rgba(255, 255, 255, 0.2), 0 7px 30px rgba(246, 112, 20, 0.6);
}

.aur-nav_burger {
  display: none;
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.aur-nav_burger span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 1.5px;
  background: #fff;
  transition: transform 0.4s var(--aur-ease-out), opacity 0.3s;
}

.aur-nav_burger span:nth-child(1) { top: 15px; }
.aur-nav_burger span:nth-child(2) { top: 20.5px; }
.aur-nav_burger span:nth-child(3) { top: 26px; }

.aur-nav_burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.aur-nav_burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.aur-nav_burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* fullscreen mobile menu */
.aur-menu {
  position: fixed;
  inset: 0;
  z-index: 890;
  background: var(--aur-dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem 2rem 3rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s var(--aur-ease-out), visibility 0s 0.5s;
  font-family: var(--aur-font);
}

.aur-menu.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s var(--aur-ease-out);
}

.aur-menu_link {
  display: block;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  font-size: clamp(2.2rem, 9vw, 3.4rem);
  font-weight: 600;
  line-height: 1.25;
  padding: 0.35rem 0;
}

.aur-menu_link > span {
  display: block;
  transform: translateY(110%);
  transition: transform 0.7s var(--aur-ease-out);
}

.aur-menu.is-open .aur-menu_link > span { transform: translateY(0); }
.aur-menu.is-open .aur-menu_link:nth-child(1) > span { transition-delay: 0.08s; }
.aur-menu.is-open .aur-menu_link:nth-child(2) > span { transition-delay: 0.16s; }
.aur-menu.is-open .aur-menu_link:nth-child(3) > span { transition-delay: 0.24s; }
.aur-menu.is-open .aur-menu_link:nth-child(4) > span { transition-delay: 0.32s; }

.aur-menu_link:active { color: var(--aur-orange-soft); }

/* the CTA is a real button, not another list item */
.aur-menu_cta {
  align-self: flex-start;
  margin-top: 2rem;
  padding: 0;
  border-radius: 16px;
  background-color: var(--aur-orange);
  background-image: radial-gradient(circle farthest-corner at 50% 100%, var(--aur-orange-soft), rgba(246, 111, 20, 0) 79%);
  border: 1px solid #ba530e;
  box-shadow: 0 0 32px rgba(242, 147, 84, 0.4);
  font-size: clamp(1.15rem, 4.5vw, 1.35rem);
  font-weight: 600;
  line-height: 1;
}

.aur-menu_cta > span {
  padding: 1.05rem 1.6rem;
}

.aur-menu_cta:active {
  color: #fff;
  box-shadow: inset 0 6px 5px rgba(255, 255, 255, 0.2), 0 7px 30px rgba(246, 112, 20, 0.6);
}

.aur-menu_footer {
  margin-top: auto;
  color: var(--aur-text-muted);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 991px) {
  .aur-nav_links, .aur-nav_cta { display: none; }
  .aur-nav_burger { display: block; }
}

body.aur-menu-open { overflow: hidden; }

/* ==================================================================
   2. PRELOADER (index only, first visit per session)
   ================================================================== */

.aur-preloader {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: var(--aur-dark);
  display: none;
  align-items: flex-end;
  justify-content: space-between;
  padding: 2.5rem 3rem;
  font-family: var(--aur-font);
  transition: transform 0.8s var(--aur-ease-io);
}

html.aur-first-visit .aur-preloader { display: flex; }

.aur-preloader.is-done { transform: translateY(-101%); }

.aur-preloader_brand {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}

.aur-preloader_brand::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.6em;
  border-radius: 50%;
  background: var(--aur-orange);
  box-shadow: 0 0 18px var(--aur-orange);
  animation: aurPulse 1.2s ease-in-out infinite;
}

.aur-preloader_count {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(3.5rem, 10vw, 7rem);
  font-weight: 200;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}

.aur-preloader_count sup {
  font-size: 0.3em;
  color: var(--aur-orange-soft);
}

@keyframes aurPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* while preloader is up, keep the page still */
html.aur-first-visit.aur-loading body { overflow: hidden; }

/* ==================================================================
   3. PAGE TRANSITION CURTAIN
   ================================================================== */

.aur-curtain {
  position: fixed;
  inset: -2vh 0;
  z-index: 1200;
  background: var(--aur-dark);
  transform: translateY(103%);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aur-curtain::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 20vh;
  background: radial-gradient(60% 100% at 50% 0%, rgba(246, 111, 20, 0.35), transparent 70%);
}

.aur-curtain_logo {
  color: #fff;
  font-family: var(--aur-font);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.3s ease 0.25s, transform 0.4s var(--aur-ease-out) 0.25s;
}

.aur-curtain.is-active {
  transform: translateY(0);
  transition: transform 0.55s var(--aur-ease-io);
  pointer-events: auto;
}

.aur-curtain.is-active .aur-curtain_logo {
  opacity: 1;
  transform: translateY(0);
}

/* entering a page after a transition: start covered, JS lifts it */
html.aur-page-enter .aur-curtain {
  transform: translateY(0);
}

.aur-curtain.is-leaving {
  transform: translateY(-103%);
  transition: transform 0.65s var(--aur-ease-io);
}

/* ==================================================================
   4. CUSTOM CURSOR
   ================================================================== */

@media (pointer: fine) {
  html.aur-cursor-on,
  html.aur-cursor-on body,
  html.aur-cursor-on a,
  html.aur-cursor-on button,
  html.aur-cursor-on [role="button"] {
    cursor: none;
  }

  /* keep native caret & controls where it matters */
  html.aur-cursor-on input,
  html.aur-cursor-on textarea,
  html.aur-cursor-on select {
    cursor: auto;
  }
}

.aur-cursor,
.aur-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1400;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
}

html.aur-cursor-on .aur-cursor,
html.aur-cursor-on .aur-cursor-ring { opacity: 1; }

.aur-cursor {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--aur-orange-deep);
  box-shadow: 0 0 10px rgba(247, 93, 0, 0.7);
}

.aur-cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.25px solid rgba(247, 93, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    width 0.3s var(--aur-ease-out),
    height 0.3s var(--aur-ease-out),
    margin 0.3s var(--aur-ease-out),
    background-color 0.3s,
    border-color 0.3s;
}

.aur-cursor-ring_label {
  font-family: var(--aur-font);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transition: opacity 0.25s;
  user-select: none;
}

/* hover on interactive elements */
.aur-cursor-ring.is-link {
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  background: rgba(247, 93, 0, 0.12);
  border-color: rgba(247, 93, 0, 0.8);
}

/* drag state (sliders) */
.aur-cursor-ring.is-drag {
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  background: rgba(6, 9, 16, 0.75);
  border-color: var(--aur-orange-deep);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.aur-cursor-ring.is-drag .aur-cursor-ring_label { opacity: 1; }

.aur-cursor-ring.is-down { transform: scale(0.85); }

/* ==================================================================
   5. HERO MICRO-INTERACTIONS
   ================================================================== */

/* The headline intentionally has NO custom reveal: it uses the same
   fadeInUp as the rest of the hero (hero_cloned.css). A fancier
   word-split reveal proved fragile in throttled webviews — the H1 is
   too important to gate behind anything. */

/* Scroll indicator. Lives in the flow at the foot of the hero copy, centred
   on the same axis as the headline and the buttons. It used to be
   `position:absolute; bottom:2rem` against .hero-section — but the hero runs
   ~2.3 viewports tall, so that parked it in the middle of the dashboard
   mockup where nobody ever saw it. */
.aur-scrollhint {
  position: relative;
  margin: 1.15rem auto 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--aur-font);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.aur-scrollhint.is-faded { opacity: 0; }

.aur-scrollhint_track {
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
}

.aur-scrollhint_track::after {
  content: "";
  position: absolute;
  top: -40%;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(to bottom, transparent, var(--aur-orange-soft));
  animation: aurScrollDrop 1.8s var(--aur-ease-io) infinite;
}

@keyframes aurScrollDrop {
  0% { top: -40%; }
  60%, 100% { top: 110%; }
}

@media (max-width: 767px) {
  .aur-scrollhint { display: none; }
}

/* status dots pulse in the coded dashboard */
.coded-db-status.running .coded-db-status-dot {
  animation: aurPulse 1.6s ease-in-out infinite;
}

/* The sphere breathes slowly (very subtle).
   This used to live on .red-glow / .white-glow, where it never ran — the
   `#ovo-hero-wrapper .red-glow` shorthand in hero_cloned.css wins on ID
   specificity — and would have dropped their blur() if it had, since
   `filter` is all-or-nothing. .red-circle animates nothing else, so the
   pulse belongs there. */
.circle-container .red-circle {
  animation: aurBreathe 7s ease-in-out 3.4s infinite;
}

@keyframes aurBreathe {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 0.92; }
}

/* parallax layers get GPU hints */
.circle-container img,
.app-holder,
.lights-holder {
  will-change: transform;
}

/* ==================================================================
   6. DARK → LIGHT HANDOFF
   The light canvas slides over the dark hero with a rounded top,
   instead of a hard color cut.
   ================================================================== */

.home_marquee_section {
  position: relative;
  z-index: 2;
  background: #fff;
  border-radius: clamp(20px, 4vw, 44px) clamp(20px, 4vw, 44px) 0 0;
  margin-top: -3rem;
}

/* marquee text was too faint on white */
.home_intro_marquee_text { color: #7a7d82; }

/* ==================================================================
   7. GRAIN / NOISE (dark sections only)
   ================================================================== */

.aur-grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  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;
}

/* ==================================================================
   8. FEATURE CARDS — spotlight border + glow on hover
   ================================================================== */

.home_feat_content_card {
  position: relative;
  transition: box-shadow 0.5s var(--aur-ease-out);
}

.home_feat_content_card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  background:
    radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
      rgba(247, 93, 0, 0.09), transparent 65%);
}

.home_feat_content_card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  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;
  z-index: 2;
}

.home_feat_content_card:hover::after,
.home_feat_content_card:hover::before { opacity: 1; }

.home_feat_content_card:hover {
  box-shadow: 0 24px 60px -24px rgba(6, 9, 16, 0.18);
}

/* ==================================================================
   9. SCROLL PROGRESS BAR
   ================================================================== */

.aur-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 950;
  pointer-events: none;
}

.aur-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--aur-orange-deep), var(--aur-orange-soft));
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* ==================================================================
   10. ARTICLE MODAL — staggered content reveal
   ================================================================== */

.article-modal_wrap.is-active .article-modal_content > * {
  animation: aurFadeUp 0.55s var(--aur-ease-out) both;
}

.article-modal_wrap.is-active .article-modal_content > *:nth-child(1) { animation-delay: 0.1s; }
.article-modal_wrap.is-active .article-modal_content > *:nth-child(2) { animation-delay: 0.18s; }
.article-modal_wrap.is-active .article-modal_content > *:nth-child(3) { animation-delay: 0.26s; }
.article-modal_wrap.is-active .article-modal_content > *:nth-child(4) { animation-delay: 0.34s; }

@keyframes aurFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==================================================================
   11. OFFER — "Гаранцията" (dark bookend section)
   ================================================================== */

.aur-offer {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: var(--aur-dark);
  border-radius: clamp(20px, 4vw, 44px);
  margin: 5rem auto;
  max-width: min(96rem, calc(100% - 2rem));
  padding: clamp(4rem, 9vw, 8.5rem) clamp(1.5rem, 6vw, 6rem) 0;
  color: #fff;
  font-family: var(--aur-font);
}

.aur-offer_glow {
  position: absolute;
  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;
}

.aur-offer_inner {
  position: relative;
  z-index: 2;
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.aur-offer_badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(247, 114, 24, 0.35);
  background: rgba(246, 111, 20, 0.08);
  color: var(--aur-orange-soft);
  border-radius: 100px;
  padding: 0.45rem 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.aur-offer_badge::before {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--aur-orange);
  box-shadow: 0 0 12px var(--aur-orange);
  animation: aurPulse 1.6s ease-in-out infinite;
}

.aur-offer_title {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-bottom: 1.75rem;
}

.aur-offer_title em {
  font-style: normal;
  color: var(--aur-orange-soft);
  text-shadow: 0 0 40px rgba(246, 111, 20, 0.5);
}

.aur-offer_lead {
  color: #b9bcbf;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.7;
  max-width: 38rem;
  margin-bottom: 3rem;
}

.aur-offer_lead strong { color: #fff; }

.aur-offer_points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
  margin-bottom: 3rem;
}

.aur-offer_point {
  background: var(--aur-dark-soft);
  padding: 1.6rem 1.4rem;
  text-align: left;
}

.aur-offer_point_num {
  color: var(--aur-orange-soft);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  margin-bottom: 0.6rem;
}

.aur-offer_point_title {
  font-size: 0.98rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.aur-offer_point p {
  color: var(--aur-text-muted);
  font-size: 0.85rem;
  line-height: 1.55;
}

/* Component 04 is who does the work, not another deliverable — it spans the
   full row under 01–03 instead of leaving two empty cells in the grid. */
.aur-offer_point.cc-wide {
  grid-column: 1 / -1;
}

@media (max-width: 767px) {
  .aur-offer_points { grid-template-columns: 1fr; }
}

.aur-btn-glow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--aur-orange);
  background-image: radial-gradient(circle farthest-corner at 50% 100%, var(--aur-orange-soft), rgba(246, 111, 20, 0) 79%);
  color: #fff;
  border: 1px solid #ba530e;
  border-radius: 15px;
  padding: 14px 26px;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.375s, transform 0.375s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0), 0 0 30px rgba(242, 147, 84, 0.6);
}

.aur-btn-glow:hover {
  border-color: var(--aur-orange);
  transform: scale(1.04);
  box-shadow: inset 0 6px 5px rgba(255, 255, 255, 0.2), inset 1px -9px 13px rgba(0, 0, 23, 0.34), 0 7px 30px rgba(246, 112, 20, 0.6);
}

.aur-offer_note {
  display: block;
  margin-top: 1rem;
  color: var(--aur-text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* giant closing line — outlined text that fills on hover */
.aur-offer_bigline {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: clamp(3rem, 7vw, 6rem);
  padding-bottom: clamp(2rem, 5vw, 4rem);
  text-align: center;
  text-decoration: none;
  font-size: clamp(2.4rem, 7vw, 6.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 173, 117, 0.55);
  transition: color 0.5s var(--aur-ease-out), -webkit-text-stroke-color 0.5s;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}

.aur-offer_bigline:hover {
  color: var(--aur-orange-deep);
  -webkit-text-stroke-color: var(--aur-orange-deep);
}

.aur-offer_bigline .aur-roll { height: 1.02em; }

@media (max-width: 767px) {
  .aur-offer_bigline { white-space: normal; -webkit-text-stroke-width: 1px; }
}

/* ==================================================================
   12. FOOTER — giant wordmark + live status
   ================================================================== */

.aur-footer_wordmark {
  position: relative;
  overflow: hidden;
  text-align: center;
  line-height: 0.8;
  padding: clamp(2rem, 5vw, 4rem) 0 0;
  user-select: none;
  pointer-events: none;
}

.aur-footer_wordmark span {
  display: inline-block;
  font-family: var(--aur-font);
  font-size: clamp(4.5rem, 17.5vw, 17rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform: translateY(55%);
  transition: transform 1.1s var(--aur-ease-out);
}

.aur-footer_wordmark.in-view span { transform: translateY(12%); }

.aur-footer_status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: var(--aur-text-muted);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1.8rem 1rem 0.4rem;
  font-family: var(--aur-font);
}

.aur-footer_status::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #27ae60;
  box-shadow: 0 0 10px #27ae60;
  animation: aurPulse 1.6s ease-in-out infinite;
}

.aur-footer_status b {
  color: #e6e7e8;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  /* the glowing globe rode up under the legal links — sink it so only
     its crown closes the page, and give the bottom rows air above it */
  .footer_globe_wrap.c-max-8-col { bottom: -108vw; }
  .footer_wrap { padding-bottom: 3rem; }
}

/* ==================================================================
   13. ACCESSIBILITY & FALLBACKS
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
  .aur-cursor,
  .aur-cursor-ring,
  .aur-scrollhint { display: none !important; }

  .aur-preloader,
  .aur-curtain { transition-duration: 0.01s !important; }

  .aur-footer_wordmark span { transform: translateY(12%); transition: none; }

  .aur-menu_link > span { transition-duration: 0.01s; }

  .circle-container .red-circle { animation: none !important; }

  .aur-preloader_brand::after,
  .aur-offer_badge::before,
  .aur-footer_status::before,
  .coded-db-status-dot,
  .aur-scrollhint_track::after { animation: none !important; }
}

/* if the animation engine never loaded, make sure nothing stays hidden */
html.no-motion-engine [r-text-animate-onscroll],
html.no-motion-engine [r-card-animate-onscroll] {
  opacity: 1 !important;
  transform: none !important;
}

/* ==================================================================
   14. "ЧЕТИРИ ЧАСТИ. ЕДИН СЛУЖИТЕЛ." — FEATURE VISUALS
   The four visuals were authored around short placeholder values and a
   wide card. Under the tablet breakpoint each card becomes one full-width
   column and the desktop geometry stops fitting; the stat badge in 01
   breaks at every width, because "< 2 сек" is longer than the number the
   12rem box was drawn for.
   ================================================================== */

/* ---- 01 AI Chat Bot — the "< 2 сек" badge, all breakpoints --------- */

/* Label and value sat side by side in a 12rem box: at 1440px that gave
   "Време за отговор" 78px (three lines) and "< 2 сек" 76px (two), and it
   only got worse as the box narrowed. Stacked, each gets the full width. */
#business-excellence .home_feat_content_visual_ba_top-inner {
  flex-flow: column;
  align-items: flex-start;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

/* the value is a headline number and must never break; the box grows to
   fit it instead, keeping 12rem as its floor so it still reads as a card */
#business-excellence .home_feat_content_visual_ba_card {
  width: fit-content;
  min-width: 12rem;
  max-width: 100%;
}

#business-excellence .home_feat_content_visual_ba_card .c-title-2 {
  white-space: nowrap;
}

/* 991px is where Webflow drops the grid to one column and every visual
   goes full width. Both fixes below apply from there down — the defects
   show up on tablets exactly as they do on phones. */
@media (max-width: 991px) {
  /* ---- 02 AI Voice Agent ------------------------------------------- */

  /* the wrapper centres text so the original floating screenshot would
     sit in the middle; the card that replaced it is a list of labels and
     reads left-aligned, the way it does on desktop */
  #business-excellence .home_feat_content_visual_ia_wrap {
    text-align: left;
  }

  /* ---- 04 AI Анализи ----------------------------------------------- */

  /* "Всички канали / На живо" float 1.5rem off the bottom of the visual,
     while the channel table is centred in it — the two overlap by 6px on
     a tablet and up to 11px on a phone. Stack them instead. */
  #business-excellence .g_feat_content_visual_wrap.cc-home-br {
    flex-flow: column;
    gap: 0.75rem;
  }

  /* relative, not static: the visual's grey backdrop is an absolutely
     positioned sibling that would otherwise paint over the tags */
  #business-excellence .home_feat_content_visual_wi_tags_wrap {
    position: relative;
    inset: auto;
    align-self: center;
  }
}

@media (max-width: 767px) {
  /* ---- 01 AI Chat Bot ---------------------------------------------- */

  /* every visual gets min-height: 25rem; on a phone that left ~7.75rem of
     empty grey above the chart and the same below it */
  #business-excellence .g_feat_content_visual_wrap.cc-default {
    min-height: 0;
  }

  /* the badge floats over the chart's empty top-right corner, which works
     while the chart is wide. Under 768px the visual is too narrow for that
     and the badge lands 35px onto the plot, so it moves into the flow. */
  #business-excellence .home_feat_content_visual_ba_bot {
    flex-flow: column;
    width: 100%;
    display: flex;
  }

  #business-excellence .home_feat_content_visual_ba_card {
    order: -1;
    position: static;
    width: 100%;
    margin-bottom: 1.25rem;
    padding: 0.875rem 1rem;
  }
}

@media (max-width: 479px) {
  /* ---- 03 SaaS Dashboard ------------------------------------------- */

  /* two 12rem columns plus gap and padding need 27.5rem; a 390px phone
     offers 21rem, so the right column was cut off mid-word. Let the two
     columns divide whatever width there actually is. */
  #business-excellence .g_feat_content_visual_wrap.cc-home-tr {
    justify-content: center;
    gap: 0.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  #business-excellence
    .g_feat_content_visual_wrap.cc-home-tr
    .home_feat_content_visual_col {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }

  /* "Активен" is pinned to the card's top-right corner; once the card is
     under ~11rem it lands on the AI avatar, so it joins the flow above it.
     The mock cards keep their geometry in inline styles — hence the
     !important, which is the only way a rule can reach them. */
  #business-excellence .aur-mock-badge {
    position: static !important;
    width: fit-content;
    margin-bottom: 0.75rem;
  }
}