/* Canonical Ankaa v2 commercial skin. Loaded after each page's local styles. */
:root {
  --bg: #08070d;
  --bg-2: #0d0b13;
  --bg-3: #12101a;
  --surface: rgba(255,255,255,0.038);
  --surface-h: rgba(255,255,255,0.068);
  --border: rgba(255,255,255,0.09);
  --border-2: rgba(255,255,255,0.16);
  --text: #f7f4ee;
  --text-2: #f2efe9;
  --text-3: #a8a296;
  --accent: #7c6cf0;
  --accent-2: #9b8dff;
  --accent-deep: #5a4ad6;
  --accent-rgb: 124,108,240;
  --sage: #8fd6ae;
  --rose: #e58a8a;
  --r-sm: 8px;
  --r-md: 8px;
  --r-lg: 8px;
}

body {
  background:
    radial-gradient(70% 46% at 72% 4%, rgba(124,108,240,0.12), transparent 68%),
    radial-gradient(46% 36% at 4% 44%, rgba(143,214,174,0.045), transparent 72%),
    var(--bg);
}

h1, h2, h3, .logo, .ls-logo { letter-spacing: 0 !important; }

.nav {
  background: rgba(8,7,13,0.76) !important;
  border-color: var(--border) !important;
}

.nav-cta,
.hero-cta.primary,
.btn-primary {
  color: #0d0a16 !important;
  background: linear-gradient(135deg, var(--accent-2), var(--accent)) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 14px 36px -18px rgba(var(--accent-rgb),0.72) !important;
}

.hero {
  position: relative;
  min-height: calc(100svh - 112px);
  padding: clamp(58px, 10vh, 112px) 0 74px !important;
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  content: '';
  position: absolute;
  inset: -12%;
  z-index: -2;
  background:
    radial-gradient(48% 58% at 82% 44%, rgba(124,108,240,0.23), transparent 72%),
    radial-gradient(38% 48% at 18% 12%, rgba(155,141,255,0.10), transparent 72%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: block !important;
  min-height: min(610px, calc(100svh - 180px));
}

.hero-left { position: relative; z-index: 3; max-width: 720px; }
.hero-left .eyebrow { color: var(--text-3) !important; }
.hero-left h1 {
  max-width: 13.5ch;
  font-size: clamp(42px, 6.2vw, 76px) !important;
  line-height: 1.02 !important;
  text-wrap: balance;
}
.hero-left .sub {
  max-width: 610px;
  color: var(--text-2);
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.65;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.hero-cta.secondary {
  color: var(--text) !important;
  background: rgba(8,7,13,0.62);
  border: 1px solid var(--border-2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.hero-cta:hover { transform: translateY(-2px); }
.hero-proof { margin-top: 18px; color: var(--text-3); font-size: 12px; line-height: 1.55; }

.hero-right {
  position: absolute !important;
  z-index: 1;
  top: 50%;
  right: 0;
  width: min(34vw, 330px);
  transform: translateY(-46%);
  order: initial !important;
  pointer-events: none;
}
.hero-right .phone { position: relative; z-index: 1; }
.hero-right .phone::after {
  content: '';
  position: absolute;
  inset: 12% -20% -8%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(var(--accent-rgb),0.16);
  filter: blur(54px);
}

.hero-chip {
  position: absolute;
  z-index: 3;
  min-width: 138px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 8px;
  background: rgba(13,11,19,0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 42px -24px #000;
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.35;
}
.hero-chip small { display: block; color: var(--text-3); font-size: 9px; font-weight: 750; text-transform: uppercase; }
.hero-chip strong { color: var(--text); font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; }
.hero-chip-recovery { top: 14%; left: -38%; }
.hero-chip-now { right: -20%; bottom: 18%; }

.platform-strip {
  padding: 0 !important;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.018);
  overflow: hidden;
}
.platform-strip .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vw, 52px);
  min-height: 64px;
  overflow-x: auto;
  scrollbar-width: none;
}
.platform-strip .wrap::-webkit-scrollbar { display: none; }
.platform-strip span {
  flex: 0 0 auto;
  color: var(--text-3);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}
.platform-strip strong { color: var(--text-2); font-weight: 750; }

.cell, .plan, .step, .focus-card, .trust-card, .b2b-card, .stat-card,
.cmp-wrap, .faq details, article, .card {
  border-radius: 8px !important;
}

:focus-visible {
  outline: 2px solid var(--accent-2) !important;
  outline-offset: 3px;
}

html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: .001ms !important;
}

@media (max-width: 760px) {
  .hero { min-height: calc(100svh - 96px); padding-top: 54px !important; }
  .hero-grid { min-height: calc(100svh - 260px); }
  .hero-left h1 { max-width: 11ch; font-size: clamp(40px, 12vw, 56px) !important; }
  .hero-left .sub { max-width: 32ch; }
  .hero-actions { flex-direction: column; width: min(100%, 310px); }
  .hero-cta { width: 100%; }
  .hero-right {
    top: auto;
    right: -54px;
    bottom: -110px;
    width: 230px;
    transform: none;
    opacity: .78;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 18%, #000 52%);
    mask-image: linear-gradient(to bottom, transparent 0%, transparent 18%, #000 52%);
  }
  .hero-chip { display: none; }
  .platform-strip .wrap { justify-content: flex-start; padding-inline: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}