/* ============================================================
   Vlla AI — marketing site
   Tokens, then layout, then components, mirroring the page order.
   ============================================================ */

:root{
  --bg:            #F8F9FF;
  --bg-raised:     #EFF2FE;
  --bg-sunken:     #E8ECFB;
  --surface:       #FFFFFF;
  --ink:           #0B1D4F;
  --ink-soft:      #475275;
  --ink-faint:     #6A7394;
  --line:          #DDE2F4;
  --line-soft:     #EAEDF9;
  --accent:        #2166D9;
  --accent-2:      #8B45E0;
  --accent-soft:   #5B4BD6;
  --accent-wash:   #EAF1FF;
  --on-accent:     #FFFFFF;
  --good:          #16875A;
  --good-wash:     #E3F5EC;
  --bad:           #B4344A;
  --bad-wash:      #FBEBEE;
  --bubble-in:     #FFFFFF;
  --blob-1:        rgba(59,148,250,.22);
  --blob-2:        rgba(167,103,234,.26);
  --blob-3:        rgba(74,27,208,.14);
  --net-rgb:       59,110,230;

  --font-display: 'Sora', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;

  --shadow-sm: 0 1px 2px rgba(11,29,79,.06), 0 1px 1px rgba(11,29,79,.04);
  --shadow-md: 0 8px 24px rgba(11,29,79,.10), 0 2px 6px rgba(11,29,79,.06);
  --shadow-lg: 0 24px 64px rgba(11,29,79,.16), 0 8px 20px rgba(11,29,79,.08);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:          #080B1C;
    --bg-raised:   #10142B;
    --bg-sunken:   #050712;
    --ink:         #F1EFFB;
    --ink-soft:    #B6B2D6;
    --ink-faint:   #8D89B3;
    --line:        #23264A;
    --line-soft:   #1A1D3B;
    --accent:      #3994FD;
    --accent-2:    #A763EA;
    --accent-soft: #8C48C9;
    --accent-wash: #171A3A;
    --on-accent:   #0B1230;
    --good:        #4FCC91;
    --good-wash:   #0F2A22;
    --bad:         #F07A8E;
    --bad-wash:    #2A1220;
    --bubble-in:   #1A1E3C;
    --surface:     #0D1127;
    --blob-1:      rgba(57,148,253,.20);
    --blob-2:      rgba(167,99,234,.20);
    --blob-3:      rgba(74,27,208,.22);
    --net-rgb:     140,170,255;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:          #080B1C;
  --bg-raised:   #10142B;
  --bg-sunken:   #050712;
  --ink:         #F1EFFB;
  --ink-soft:    #B6B2D6;
  --ink-faint:   #8D89B3;
  --line:        #23264A;
  --line-soft:   #1A1D3B;
  --accent:      #3994FD;
  --accent-2:    #A763EA;
  --accent-soft: #8C48C9;
  --accent-wash: #171A3A;
  --on-accent:   #0B1230;
  --good:        #4FCC91;
  --good-wash:   #0F2A22;
  --bad:         #F07A8E;
  --bad-wash:    #2A1220;
  --bubble-in:   #1A1E3C;
  --surface:   #0D1127;
  --blob-1:    rgba(57,148,253,.20);
  --blob-2:    rgba(167,99,234,.20);
  --blob-3:    rgba(74,27,208,.22);
  --net-rgb:   140,170,255;
  color-scheme: dark;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; }
.logo-dark-only{ display: none; }
.logo-light-only{ display: block; }
:root[data-theme="dark"] .logo-light-only{ display: none; }
:root[data-theme="dark"] .logo-dark-only{ display: block; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-light-only{ display: none; }
  :root:not([data-theme="light"]) .logo-dark-only{ display: block; }
}

.i{
  width: 1em; height: 1em; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.skip-link{
  position: absolute; left: 16px; top: -48px; z-index: 100;
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 8px;
  text-decoration: none; font-weight: 600;
}
.skip-link:focus{ top: 12px; }

.wrap{ max-width: 1180px; margin: 0 auto; padding-inline: 24px; }
@media (max-width: 520px){ .wrap{ padding-inline: 16px; } }

h1, h2, h3{ font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em; margin: 0; text-wrap: balance; }
p{ margin: 0; text-wrap: pretty; }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  font: 600 .8rem/1.2 var(--font-body);
  letter-spacing: .01em;
  color: var(--accent);
}
.eyebrow::before{
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.sprite{ position: absolute; }

/* ---------- buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  padding: 12px 22px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 160ms var(--ease-out), box-shadow 200ms ease, background-color 200ms ease, border-color 200ms ease;
  white-space: nowrap;
}
.btn .i{ font-size: 1.1em; }
.btn:active{ transform: scale(0.97); }
.btn-sm{ min-height: 40px; padding: 9px 16px; font-size: .88rem; }
.btn-lg{ padding: 15px 26px; font-size: 1rem; }
.btn-primary{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-ghost{
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
.btn-block{ width: 100%; }
@media (hover: hover) and (pointer: fine){
  .btn-primary:hover{ box-shadow: var(--shadow-md); }
  .btn-ghost:hover{ border-color: var(--accent-soft); background: var(--accent-wash); }
}

/* ---------- header ---------- */
.site-header{
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap{
  height: 72px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.brand{ display: flex; align-items: center; }
.brand img{ height: 20px; width: auto; }
@media (max-width: 520px){ .brand img{ height: 15px; } }
.nav-links{
  display: flex; align-items: center; gap: 32px;
  font-size: .92rem; font-weight: 500;
  list-style: none; margin: 0; padding: 0;
}
.nav-links a{ text-decoration: none; color: var(--ink-soft); transition: color 150ms ease; }
@media (hover: hover){ .nav-links a:hover{ color: var(--ink); } }
.header-cta{ display: flex; align-items: center; gap: 12px; }
.nav-toggle{
  display: none;
  background: none; border: 1px solid var(--line); border-radius: 10px;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink);
  transition: transform 160ms var(--ease-out);
}
.nav-toggle:active{ transform: scale(0.95); }
.nav-toggle svg{ width: 18px; height: 18px; }

@media (max-width: 860px){
  .nav-links{
    position: absolute; top: 72px; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 24px 16px;
    display: none;
  }
  .nav-links.open{ display: flex; }
  .nav-links a{ display: block; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
  .nav-toggle{ display: inline-flex; }
}
@media (max-width: 420px){
  .header-cta .btn{ padding-inline: 12px; font-size: .82rem; }
}

/* ---------- animated page background ---------- */
.bg-fx{ position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blob{
  position: absolute; border-radius: 50%;
  width: 60vmax; height: 60vmax;
  will-change: transform;
}
.blob.b1{ background: radial-gradient(closest-side, var(--blob-1), transparent); top: -22vmax; right: -18vmax; animation: drift-a 26s ease-in-out infinite alternate; }
.blob.b2{ background: radial-gradient(closest-side, var(--blob-2), transparent); top: 30vh; left: -24vmax; animation: drift-b 32s ease-in-out infinite alternate; }
.blob.b3{ background: radial-gradient(closest-side, var(--blob-3), transparent); bottom: -30vmax; right: 5vw; animation: drift-c 38s ease-in-out infinite alternate; }
@keyframes drift-a{ to{ transform: translate(-14vmax, 12vmax) scale(1.12); } }
@keyframes drift-b{ to{ transform: translate(18vmax, -8vmax) scale(.9); } }
@keyframes drift-c{ to{ transform: translate(-16vmax, -14vmax) scale(1.15); } }

/* ---------- theme toggle ---------- */
.theme-toggle{
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  cursor: pointer; font-size: 18px;
  transition: transform 160ms var(--ease-out), border-color 200ms ease;
}
.theme-toggle:active{ transform: scale(0.94); }
@media (hover: hover) and (pointer: fine){ .theme-toggle:hover{ border-color: var(--accent-soft); } }
.theme-toggle .icon-sun{ display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun{ display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon{ display: none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{ display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{ display: none; }
}

/* ---------- hero ---------- */
.hero{
  position: relative;
  overflow: clip;
  padding: 88px 0 64px;
}
.hero-net{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-grid{
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
}
.hero-layout{
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 56px; align-items: center;
}
.hero-badge{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 12px; margin-bottom: 24px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 1px solid var(--line);
  font-size: .84rem; font-weight: 500; color: var(--ink-soft);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pulse{
  position: relative; display: inline-block; flex-shrink: 0;
  width: 8px; height: 8px; border-radius: 50%; background: var(--good);
}
.pulse::after{
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--good);
  animation: ping 2s var(--ease-out) infinite;
}
@keyframes ping{ 0%{ transform: scale(1); opacity: .6; } 80%, 100%{ transform: scale(2.6); opacity: 0; } }

.hero h1{ font-size: clamp(2.3rem, 4.8vw, 3.9rem); line-height: 1.04; margin-bottom: 22px; letter-spacing: -.025em; }
.hero h1 em{
  font-style: normal;
  background: linear-gradient(100deg, var(--accent), var(--accent-2), var(--accent));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 8s ease-in-out infinite alternate;
}
@keyframes shimmer{ to{ background-position: 100% 0; } }
.hero-sub{ font-size: 1.12rem; color: var(--ink-soft); max-width: 56ch; margin-bottom: 32px; line-height: 1.65; }
.hero-actions{ display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }
.hero-points{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.hero-points li{ display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--ink-soft); font-weight: 500; }
.hero-points .i{ color: var(--accent); font-size: 1.05em; }

/* Hero entrance: seen once per visit, so it earns a short stagger */
.js .hero-inner > *, .js .hero-visual{ animation: rise 700ms var(--ease-out) both; }
.js .hero-inner > :nth-child(2){ animation-delay: 60ms; }
.js .hero-inner > :nth-child(3){ animation-delay: 120ms; }
.js .hero-inner > :nth-child(4){ animation-delay: 180ms; }
.js .hero-inner > :nth-child(5){ animation-delay: 240ms; }
.js .hero-visual{ animation-delay: 200ms; }
@keyframes rise{ from{ opacity: 0; transform: translateY(12px); } }

.hero-scroll{
  position: relative; z-index: 1;
  display: flex; width: max-content; margin: 56px auto 0;
  align-items: center; gap: 8px;
  font-size: .88rem; font-weight: 600; color: var(--ink-soft); text-decoration: none;
  padding: 10px 4px;
}
.hero-scroll .i{ animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(4px); } }
@media (hover: hover){ .hero-scroll:hover{ color: var(--ink); } }

/* hero visual: activity feed + floating chips */
.hero-visual{ position: relative; padding: 36px 20px; }
.feed-card{
  position: relative;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  padding: 18px;
}
.feed-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding: 0 4px; }
.feed-title{ font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.feed-live{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--good);
}
.feed-list{ list-style: none; margin: 0; padding: 0; height: 296px; overflow: hidden; display: flex; flex-direction: column; gap: 10px; }
.feed-item{
  display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center;
  padding: 12px; border-radius: 14px;
  background: var(--bg-raised); border: 1px solid var(--line-soft);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.feed-item.pre{ opacity: 0; transform: translateY(-14px) scale(.97); }
.feed-item .fi-icon{
  width: 40px; height: 40px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.feed-item strong{ display: block; font-size: .9rem; line-height: 1.3; }
.feed-item div span{ display: block; font-size: .8rem; color: var(--ink-soft); line-height: 1.35; }
.feed-item .fi-tag{ font-style: normal;
  font-family: var(--font-body); font-weight: 600; font-size: .7rem;
  padding: 4px 8px; border-radius: 999px;
  color: var(--good); background: var(--good-wash); white-space: nowrap;
}
.float-chip{
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  font-size: .82rem; font-weight: 600; white-space: nowrap;
  animation: bob 6s ease-in-out infinite;
}
.float-chip .i{ color: var(--accent); font-size: 1.1em; }
.chip-a{ top: 4px; right: -4px; }
.chip-b{ bottom: 6px; left: -12px; animation-delay: -2s; }
.chip-c{ top: 4px; left: 0; animation-delay: -4s; }
@keyframes bob{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }

@media (max-width: 960px){
  .hero-layout{ grid-template-columns: 1fr; gap: 40px; }
  .hero-visual{ max-width: 460px; width: 100%; margin: 0 auto; }
  .chip-c{ left: 6px; }
}
@media (max-width: 720px){
  .hero{ padding: 56px 0 40px; }
  .hero-actions .btn{ flex: 1 1 100%; }
  .hero-visual{ padding: 30px 6px; }
  .chip-b{ left: -2px; }
  .hero-scroll{ margin-top: 32px; }
}

/* ---------- section scaffolding ---------- */
.section{ position: relative; padding: 96px 0; border-top: 1px solid var(--line); }
.section-head{ max-width: 660px; margin-bottom: 52px; }
.section-head h2{ font-size: clamp(1.75rem, 3.2vw, 2.45rem); line-height: 1.12; margin-bottom: 14px; }
.section-head p{ color: var(--ink-soft); font-size: 1.04rem; line-height: 1.65; }
.section-bg{ background: color-mix(in srgb, var(--bg-raised) 72%, transparent); }
@media (max-width: 720px){
  .section{ padding: 72px 0; }
  .section-head{ margin-bottom: 36px; }
}

/* Scroll reveal: only when JS is present, so content never hides without it */
.js .reveal{ opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.js .reveal.in{ opacity: 1; transform: none; }

/* ---------- demo ---------- */
.demo{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 48px;
  align-items: start;
}
.demo-side{ display: flex; flex-direction: column; gap: 32px; }
.demo-tabs{ display: flex; flex-wrap: wrap; gap: 10px; }
.demo-tab{
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 16px;
  font: 600 .92rem var(--font-body);
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.demo-tab .i{ font-size: 1.05em; }
.demo-tab:active{ transform: scale(0.97); }
.demo-tab[aria-selected="true"]{
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
}
@media (hover: hover) and (pointer: fine){
  .demo-tab[aria-selected="false"]:hover{ color: var(--ink); border-color: var(--accent-soft); }
}

.demo-steps{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 24px 20px;
}
.demo-steps-title{
  font-family: var(--font-body); font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 14px;
}
.demo-steps ol{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.demo-steps li{
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0;
  font-size: .95rem; color: var(--ink-faint);
  transition: color 300ms ease;
}
.demo-steps .tick{
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  border: 1.5px dashed var(--line);
  color: transparent;
  transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease, transform 300ms var(--ease-out);
}
.demo-steps .tick .i{ font-size: 14px; stroke-width: 3; }
.demo-steps li.done{ color: var(--ink); }
.demo-steps li.done .tick{ background: var(--good); border: 1.5px solid var(--good); color: #fff; transform: scale(1); }
.demo-steps li:not(.done) .tick{ transform: scale(0.9); }

.demo-cta{
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding: 24px;
  border-radius: 18px;
  background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
}
.demo-cta p{ color: var(--ink-soft); font-size: .95rem; line-height: 1.55; }
.demo-cta strong{ color: var(--ink); display: block; font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 4px; }

/* chat window */
.chat{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.chat-head{
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
}
.chat-avatar{
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 .85rem var(--font-display);
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  flex-shrink: 0;
}
.chat-id{ display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.chat-id strong{ font-size: .98rem; }
.chat-id span{ font-size: .78rem; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; }
.chat-id .dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--good); display: inline-block; }
.chat-replay{
  width: 40px; height: 40px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); color: var(--ink-soft);
  cursor: pointer;
  transition: transform 160ms var(--ease-out), color 200ms ease, border-color 200ms ease;
}
.chat-replay .i{ font-size: 17px; }
.chat-replay:active{ transform: scale(0.95); }
@media (hover: hover) and (pointer: fine){ .chat-replay:hover{ color: var(--ink); border-color: var(--accent-soft); } }

.chat-body{
  height: 460px;
  overflow-y: auto;
  padding: 20px 16px;
  display: flex; flex-direction: column; gap: 10px;
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 0) 0 0 / 18px 18px,
    var(--bg-sunken);
  overscroll-behavior: contain;
}
.msg{
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: .93rem;
  line-height: 1.45;
  box-shadow: var(--shadow-sm);
  transform-origin: bottom left;
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.msg.from-bot{ align-self: flex-start; background: var(--bubble-in); color: var(--ink); border-bottom-left-radius: 6px; }
.msg.from-user{
  align-self: flex-end;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  border-bottom-right-radius: 6px;
  transform-origin: bottom right;
}
.msg.pre{ opacity: 0; transform: translateY(8px) scale(0.96); }
.msg.typing{ display: inline-flex; gap: 5px; padding: 14px 16px; }
.msg.typing span{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-faint);
  animation: typing 1.1s ease-in-out infinite;
}
.msg.typing span:nth-child(2){ animation-delay: 150ms; }
.msg.typing span:nth-child(3){ animation-delay: 300ms; }
@keyframes typing{
  0%, 60%, 100%{ opacity: .35; transform: translateY(0); }
  30%{ opacity: 1; transform: translateY(-3px); }
}
.chat-foot{
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.chat-foot span{
  display: block;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--ink-faint);
  font-size: .88rem;
}
.demo-note{ margin-top: 24px; font-size: .95rem; color: var(--ink-soft); max-width: 70ch; }
.demo-note span{ display: block; margin-top: 6px; font-size: .8rem; color: var(--ink-faint); }

@media (max-width: 900px){
  .demo{ grid-template-columns: 1fr; gap: 28px; }
  .demo-side{ gap: 20px; }
  .demo-steps{ order: 2; }
}
@media (max-width: 900px){
  .demo-side{ display: contents; }
  .demo-tabs{ order: 1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; scroll-snap-type: x proximity; }
  .demo-tabs::-webkit-scrollbar{ display: none; }
  .demo-tab{ flex-shrink: 0; scroll-snap-align: start; }
  .chat{ order: 2; }
  .demo-steps{ order: 3; }
  .demo-cta{ order: 4; }
  .demo-cta .btn{ width: 100%; }
  .chat-body{ height: 420px; }
}

/* ---------- problem ---------- */
.question-chips{
  list-style: none; margin: 0 0 48px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.question-chips li{
  padding: 10px 16px;
  border-radius: 18px 18px 18px 6px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  font-size: .93rem;
  color: var(--ink);
}
.compare{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.compare-col{ border-radius: 20px; padding: 32px; border: 1px solid var(--line); }
.compare-col h3{ font-size: 1.2rem; margin-bottom: 18px; }
.compare-col ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.compare-col li{ display: flex; gap: 12px; align-items: center; font-size: .98rem; }
.compare-col li .i{ width: 26px; height: 26px; padding: 5px; border-radius: 50%; stroke-width: 2.6; }
.compare-col.before{ background: var(--surface); }
.compare-col.before li{ color: var(--ink-soft); }
.compare-col.before li .i{ color: var(--bad); background: var(--bad-wash); }
.compare-col.after{ background: var(--surface); border-color: color-mix(in srgb, var(--good) 45%, var(--line)); box-shadow: var(--shadow-md); }
.compare-col.after li .i{ color: var(--good); background: var(--good-wash); }
@media (max-width: 720px){
  .compare{ grid-template-columns: 1fr; }
  .compare-col{ padding: 24px; }
}

/* ---------- services + pricing ---------- */
.plans{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.plan{
  position: relative;
  display: flex; flex-direction: column;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
}
.plan.featured{ border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--shadow-md); }
.plan-top{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.service-icon{
  width: 48px; height: 48px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-wash); color: var(--accent);
}
.service-icon .i{ font-size: 24px; }
.plan-flag{
  padding: 6px 12px; border-radius: 999px;
  font: 700 .74rem var(--font-body);
  color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.service-tag{
  font-family: var(--font-body); font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-soft); margin-bottom: 8px;
}
.plan h3{ font-size: 1.4rem; line-height: 1.2; margin-bottom: 10px; }
.plan-desc{ color: var(--ink-soft); line-height: 1.6; margin-bottom: 22px; }
.price{ display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price .from{ font-size: .9rem; color: var(--ink-soft); }
.price .amt{ font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 3rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.price .unit{ font-size: 1rem; color: var(--ink-soft); }
.price-alt{ font-size: .85rem; color: var(--ink-faint); margin: 8px 0 22px; }
.service-bullets{
  list-style: none; margin: 0 0 28px; padding: 22px 0 0;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 12px; flex: 1;
}
.service-bullets li{ display: flex; gap: 10px; font-size: .95rem; color: var(--ink); align-items: flex-start; line-height: 1.45; }
.service-bullets li .i{ color: var(--good); margin-top: 3px; stroke-width: 2.6; }
.plans-note{ margin-top: 24px; text-align: center; color: var(--ink-soft); font-size: .95rem; }
.plans-note a{ color: var(--accent); font-weight: 600; }
@media (max-width: 820px){
  .plans{ grid-template-columns: 1fr; gap: 16px; }
  .plan{ padding: 26px 22px; }
}

/* ---------- process ---------- */
.section-tight{ padding: 72px 0; }
.steps{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  counter-reset: none;
}
.steps li{
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.step-num{
  width: 32px; height: 32px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 .95rem var(--font-display); color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.steps h3{ font-size: 1rem; margin-bottom: 4px; }
.steps p{ color: var(--ink-soft); font-size: .88rem; line-height: 1.5; }
@media (max-width: 960px){
  .steps{ grid-template-columns: 1fr; gap: 0; }
  .steps li{ flex-direction: row; align-items: flex-start; gap: 14px; padding: 14px 0; background: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
  .steps li:last-child{ border-bottom: 0; }
  .step-num{ flex-shrink: 0; }
}
@media (max-width: 720px){ .section-tight{ padding: 56px 0; } }

/* ---------- FAQ ---------- */
.faq-wrap{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.faq-wrap .section-head{ margin-bottom: 0; }
.faq-wrap .section-head a{ color: var(--accent); font-weight: 600; }
.faq{ display: flex; flex-direction: column; gap: 10px; }
.faq details{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: border-color 200ms ease;
}
.faq details[open]{ border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.faq summary{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 16px 20px;
  font-weight: 600; font-size: 1rem; line-height: 1.4;
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{
  content: ""; flex-shrink: 0;
  width: 10px; height: 10px;
  border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 200ms var(--ease-out);
}
.faq details[open] summary::after{ transform: translateY(2px) rotate(-135deg); }
.faq details p{ padding: 0 20px 18px; color: var(--ink-soft); line-height: 1.65; }
.faq details[open] p{ animation: faq-in 260ms var(--ease-out); }
@keyframes faq-in{ from{ opacity: 0; transform: translateY(-4px); } }
@media (hover: hover) and (pointer: fine){ .faq summary:hover{ color: var(--accent); } }
@media (max-width: 960px){ .faq-wrap{ grid-template-columns: 1fr; gap: 28px; } }

/* ---------- contact ---------- */
.contact{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.contact-copy h2{ font-size: clamp(1.75rem, 3.2vw, 2.45rem); line-height: 1.12; margin-bottom: 14px; }
.contact-copy > p{ color: var(--ink-soft); font-size: 1.04rem; line-height: 1.65; margin-bottom: 24px; }
.contact-points{ list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.contact-points li{ display: flex; gap: 14px; align-items: flex-start; font-size: .92rem; color: var(--ink-soft); line-height: 1.5; }
.contact-points strong{ display: block; color: var(--ink); font-size: 1rem; margin-bottom: 2px; }
.cp-icon{
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-wash); color: var(--accent); font-size: 19px;
}
.contact-mail{
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 18px 14px 14px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line);
  text-decoration: none;
  transition: border-color 200ms ease, transform 160ms var(--ease-out);
}
.contact-mail:active{ transform: scale(0.98); }
@media (hover: hover) and (pointer: fine){ .contact-mail:hover{ border-color: var(--accent-soft); } }
.contact-mail-icon{
  width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-wash); color: var(--accent); font-size: 20px;
}
.contact-mail small{ display: block; font-size: .78rem; color: var(--ink-soft); }
.contact-mail span:last-child{ font-weight: 600; font-size: .97rem; }

.form-card{
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  padding: 36px;
}
.form-card::before{
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, var(--accent), transparent 40%, transparent 60%, var(--accent-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .55;
}
.contact-form{ display: flex; flex-direction: column; gap: 18px; }
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field{ display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 0; padding: 0; margin: 0; }
.field label, .field legend{ font-size: .88rem; font-weight: 600; color: var(--ink); padding: 0; }
.field legend{ margin-bottom: 8px; }
.field .opt{ font-weight: 400; color: var(--ink-faint); }
.field input, .field textarea{
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font: 400 16px/1.4 var(--font-body);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.field textarea{ resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder{ color: var(--ink-faint); }
.field input:focus, .field textarea:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.field [aria-invalid="true"]{ border-color: var(--bad); }
.field [aria-invalid="true"]:focus{ box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 18%, transparent); }
.field-error{ font-size: .82rem; color: var(--bad); }
.field-error:empty{ display: none; }

.choice-row{ display: flex; flex-wrap: wrap; gap: 8px; }
.choice{ position: relative; cursor: pointer; }
.choice input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span{
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 10px 16px; border-radius: 999px;
  font-size: .9rem; font-weight: 500; color: var(--ink-soft);
  background: var(--bg); border: 1px solid var(--line);
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}
.choice:active span{ transform: scale(0.97); }
.choice input:checked + span{ color: var(--accent); border-color: var(--accent); background: var(--accent-wash); }
.choice input:focus-visible + span{ outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine){ .choice:hover input:not(:checked) + span{ color: var(--ink); border-color: var(--accent-soft); } }

.hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn-submit{ position: relative; margin-top: 4px; }
.btn-submit .btn-label{ display: inline-flex; align-items: center; gap: 10px; transition: opacity 150ms ease; }
.btn-submit .spinner{
  position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  opacity: 0; animation: spin 700ms linear infinite;
  transition: opacity 150ms ease;
}
.btn-submit.is-loading{ pointer-events: none; }
.btn-submit.is-loading .btn-label{ opacity: 0; }
.btn-submit.is-loading .spinner{ opacity: 1; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.form-status{ font-size: .88rem; color: var(--bad); text-align: center; }
.form-status:empty{ display: none; }

.form-success{ text-align: center; padding: 32px 8px; display: flex; flex-direction: column; align-items: center; gap: 12px; outline: none; }
.form-success[hidden]{ display: none; }
.form-success h3{ font-size: 1.5rem; }
.form-success p{ color: var(--ink-soft); max-width: 40ch; margin-bottom: 8px; }
.success-icon{
  width: 64px; height: 64px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--good-wash); color: var(--good); font-size: 30px;
  animation: pop 500ms var(--ease-out) both;
}
.success-icon .i{ stroke-width: 2.6; }
@keyframes pop{ from{ transform: scale(.6); opacity: 0; } }

@media (max-width: 960px){
  .contact{ grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 560px){
  .field-row{ grid-template-columns: 1fr; }
  .form-card{ padding: 24px 18px; border-radius: 20px; }
}

/* ---------- footer ---------- */
.site-footer{ border-top: 1px solid var(--line); padding: 48px 0 32px; }
.footer-top{ display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; margin-bottom: 36px; }
.footer-brand img{ height: 18px; width: auto; margin-bottom: 10px; }
.footer-brand p{ color: var(--ink-soft); font-size: .88rem; max-width: 34ch; line-height: 1.5; }
.footer-links{ display: flex; gap: 48px; flex-wrap: wrap; }
.footer-col h4{ font-family: var(--font-body); font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 14px; font-weight: 500; }
.footer-col ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a{ text-decoration: none; color: var(--ink-soft); font-size: .9rem; }
@media (hover: hover){ .footer-col a:hover{ color: var(--accent); } }
.footer-bottom{ display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--line-soft); font-size: .8rem; color: var(--ink-faint); }

/* ---------- reduced motion: keep fades, drop movement ---------- */
/* Reduced motion (e.g. Windows "Animation effects" off): keep the page alive but gentler.
   Ambient motion stays slow and soft; things that slide or jump just fade instead. */
@media (prefers-reduced-motion: reduce){
  .blob.b1{ animation-duration: 52s; }
  .blob.b2{ animation-duration: 64s; }
  .blob.b3{ animation-duration: 76s; }
  .js .hero-inner > *, .js .hero-visual{ animation-name: fade-in; }
  .feed-item.pre, .msg.pre{ transform: none; }
  .faq details[open] p{ animation-name: fade-in; }
  .js .reveal{ transform: none; transition: opacity 500ms ease; }
}
@keyframes fade-in{ from{ opacity: 0; } }

/* ---------- 404 ---------- */
.notfound{
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 24px; text-align: center;
}
.notfound .brand{ margin-bottom: 24px; }
.notfound-code{
  font: 800 clamp(5rem, 18vw, 9rem)/1 var(--font-display); letter-spacing: -.05em;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.notfound h1{ font-size: clamp(1.6rem, 4vw, 2.2rem); }
.notfound p:not(.notfound-code){ color: var(--ink-soft); max-width: 42ch; margin-bottom: 12px; }

/* ---------- legal pages ---------- */
.legal{ padding: 56px 0 88px; }
.legal-wrap{ display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; }
.legal-toc{
  position: sticky; top: 96px;
  padding: 20px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line);
}
.legal-toc-title{ font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; }
.legal-toc ol{ list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.legal-toc a{ display: block; padding: 5px 0; font-size: .86rem; line-height: 1.35; color: var(--ink-soft); text-decoration: none; }
@media (hover: hover){ .legal-toc a:hover{ color: var(--accent); } }
.legal-toc .legal-other{ padding-top: 14px; border-top: 1px solid var(--line-soft); font-weight: 600; color: var(--accent); }
.legal-doc{ max-width: 72ch; }
.legal-doc h1{ font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.1; margin-bottom: 10px; }
.legal-meta{ color: var(--ink-faint); font-size: .92rem; margin-bottom: 36px; }
.legal-doc h2{ font-size: 1.25rem; margin: 40px 0 12px; scroll-margin-top: 96px; }
.legal-doc p, .legal-doc li{ color: var(--ink-soft); line-height: 1.75; font-size: 1rem; }
.legal-doc p{ margin-bottom: 14px; }
.legal-doc ul{ margin: 0 0 16px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.legal-doc li::marker{ color: var(--accent); }
.legal-doc strong{ color: var(--ink); }
.legal-doc a{ color: var(--accent); font-weight: 600; }
.site-footer .footer-bottom a{ color: inherit; text-decoration: none; }
@media (hover: hover){ .site-footer .footer-bottom a:hover{ color: var(--accent); } }
@media (max-width: 860px){
  .legal-wrap{ grid-template-columns: 1fr; gap: 28px; }
  .legal-toc{ position: static; }
}

/* ---------- consent checkbox ---------- */
.consent{ display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); }
.consent input{
  appearance: none; -webkit-appearance: none; flex-shrink: 0;
  width: 22px; height: 22px; margin: 0; border-radius: 7px;
  border: 1.5px solid var(--line); background: var(--bg);
  display: inline-grid; place-content: center; cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.consent input::after{
  content: ""; width: 11px; height: 6px;
  border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
  transform: translateY(-1px) rotate(-45deg) scale(0);
  transition: transform 160ms var(--ease-out);
}
.consent input:checked{ background: var(--accent); border-color: var(--accent); }
.consent input:checked::after{ transform: translateY(-1px) rotate(-45deg) scale(1); }
.consent input:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.consent input[aria-invalid="true"]{ border-color: var(--bad); }
.consent a{ color: var(--accent); font-weight: 600; }
/* The generic .field input/label rules are meant for text fields; reset them for the checkbox. */
.field label.consent{ font-weight: 400; font-size: .9rem; color: var(--ink-soft); }
.field .consent input{ width: 22px; height: 22px; min-height: 0; padding: 0; margin-top: 1px; border-radius: 7px; }
.field .consent input:focus{ box-shadow: none; border-color: var(--accent); }

/* ---------- breadcrumbs ---------- */
.crumbs{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; font-size: .85rem; color: var(--ink-faint); }
.crumbs a{ color: var(--ink-soft); text-decoration: none; }
@media (hover: hover){ .crumbs a:hover{ color: var(--accent); } }
.demo-note a{ color: var(--accent); font-weight: 600; }

/* ---------- industry pages ---------- */
.ind-hero{ padding: 64px 0 72px; }
.ind-hero h1{ font-size: clamp(2rem, 4vw, 3.2rem); }
.ind-demo{ display: flex; flex-direction: column; gap: 14px; }
.ind-demo .chat-body{ height: 400px; }
.ind-demo .demo-steps{ padding: 18px 20px 14px; }
.ind-demo .demo-steps li{ padding: 5px 0; font-size: .9rem; }
.ind-demo .demo-note{ margin: 0; }
.js .ind-demo{ animation: rise 700ms var(--ease-out) 200ms both; }

.use-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.use-card{
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.use-card .service-icon{ width: 44px; height: 44px; border-radius: 12px; margin-bottom: 16px; }
.use-card .service-icon .i{ font-size: 21px; }
.use-card h3{ font-size: 1.08rem; margin-bottom: 6px; }
.use-card p{ color: var(--ink-soft); font-size: .93rem; line-height: 1.6; }
@media (max-width: 960px){ .use-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .use-grid{ grid-template-columns: 1fr; gap: 12px; } .use-card{ padding: 22px; } }

.ind-price{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 56px; align-items: center; }
.ind-price .section-head{ margin-bottom: 0; }
.ind-price-links{ margin-top: 14px; }
.ind-price-links a{ color: var(--accent); font-weight: 600; }
@media (max-width: 900px){ .ind-price{ grid-template-columns: 1fr; gap: 28px; } }

.cta-final{
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  padding: 40px;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  box-shadow: var(--shadow-md);
}
.cta-final h2{ font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin-bottom: 8px; }
.cta-final p{ color: var(--ink-soft); max-width: 52ch; }
@media (max-width: 700px){ .cta-final{ padding: 28px 22px; } .cta-final .btn{ width: 100%; } }

.ind-others{ margin-top: 32px; }
.ind-others p{ font-weight: 600; margin-bottom: 12px; }
.ind-others ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ind-others a{
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); font-weight: 600; font-size: .9rem; text-decoration: none;
  transition: border-color 200ms ease, transform 160ms var(--ease-out);
}
.ind-others a .i{ color: var(--accent); }
.ind-others a:active{ transform: scale(0.97); }
@media (hover: hover) and (pointer: fine){ .ind-others a:hover{ border-color: var(--accent-soft); } }

/* ---------- blog ---------- */
.blog-hero{ padding: 64px 0 56px; }
.blog-hero .wrap{ position: relative; z-index: 1; }
.blog-hero h1{ font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.08; margin-bottom: 16px; max-width: 20ch; }
.post-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.post-card{
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.post-card h3{ font-size: 1.2rem; line-height: 1.3; }
.post-card h3 a{ color: var(--ink); text-decoration: none; }
.post-card h3 a::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; } /* whole card is clickable */
.post-card p:not(.post-meta){ color: var(--ink-soft); font-size: .95rem; line-height: 1.6; flex: 1; }
.post-more{ color: var(--accent); font-weight: 600; font-size: .9rem; }
.post-meta{ color: var(--ink-faint); font-size: .85rem; }
@media (hover: hover) and (pointer: fine){ .post-card:hover{ border-color: var(--accent-soft); box-shadow: var(--shadow-md); } }

.article{ padding: 56px 0 72px; }
.article-wrap{ max-width: 760px; }
.article h1{ font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.12; margin-bottom: 14px; }
.article .post-meta{ margin-bottom: 36px; }
.prose{ max-width: none; }
.prose h2{ font-size: 1.4rem; margin: 40px 0 12px; }
.prose ol{ margin: 0 0 16px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.prose li{ color: var(--ink-soft); line-height: 1.75; }
.prose em{ color: var(--ink); }
.article-cta{
  margin-top: 48px;
  display: flex; flex-direction: column; gap: 18px;
  padding: 32px;
  border-radius: 22px;
  background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
}
.article-cta h2{ font-size: 1.4rem; margin-bottom: 6px; }
.article-cta p{ color: var(--ink-soft); }
.article-cta-actions{ display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 600px){ .article-cta{ padding: 24px 20px; } .article-cta-actions .btn{ flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce){ .js .ind-demo{ animation-name: fade-in; } }

/* ============================================================
   Section ambience: slow, decorative background motion.
   The lights and dots animate only transform (compositor-only, no layout or paint); the card
   border repaints a 1.5px ring, which is cheap. Everything pauses while its section is off
   screen (.is-visible is set by script.js).
   ============================================================ */
.section{ overflow: clip; isolation: isolate; }
.section > .wrap{ position: relative; z-index: 1; }

/* 1) A soft light that drifts behind each section, alternating sides */
.section::before{
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 720px; height: 720px; border-radius: 50%;
  top: -260px; right: -220px;
  background: radial-gradient(closest-side, var(--blob-1), transparent);
  opacity: .75;
  animation: ambient-a 34s ease-in-out infinite alternate;
  will-change: transform;
}
.section:nth-of-type(even)::before{
  right: auto; left: -260px; top: auto; bottom: -300px;
  background: radial-gradient(closest-side, var(--blob-2), transparent);
  animation-name: ambient-b; animation-duration: 40s;
}
@keyframes ambient-a{ 0%{ transform: translate(0, 0) scale(1); } 100%{ transform: translate(-180px, 140px) scale(1.18); } }
@keyframes ambient-b{ 0%{ transform: translate(0, 0) scale(1.1); } 100%{ transform: translate(200px, -160px) scale(.9); } }

/* 2) A dotted texture that slowly pans on tinted sections */
.section-bg::after{
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: -28px;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--accent) 32%, transparent) 1.3px, transparent 0);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 85% 20%, #000 10%, transparent 70%);
          mask-image: radial-gradient(ellipse 60% 70% at 85% 20%, #000 10%, transparent 70%);
  animation: dots-pan 24s linear infinite;
}
.section-bg:nth-of-type(odd)::after{
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 12% 80%, #000 10%, transparent 70%);
          mask-image: radial-gradient(ellipse 60% 70% at 12% 80%, #000 10%, transparent 70%);
  animation-direction: reverse;
}
/* Moving exactly one tile keeps the loop seamless. */
@keyframes dots-pan{ to{ transform: translate(28px, 28px); } }

/* 3) A light that travels around featured cards */
@property --spin{ syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.plan.featured::before, .form-card::before, .cta-final::before{
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--spin), transparent 0deg, var(--accent) 60deg, var(--accent-2) 120deg, transparent 180deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .9;
  animation: spin-border 6s linear infinite;
}
.cta-final{ position: relative; }
@keyframes spin-border{ to{ --spin: 360deg; } }

/* Pause everything decorative while its section is off screen. */
.js .section:not(.is-visible)::before,
.js .section:not(.is-visible)::after,
.js .section:not(.is-visible) .plan.featured::before,
.js .section:not(.is-visible) .form-card::before,
.js .section:not(.is-visible) .cta-final::before{ animation-play-state: paused; }

@media (max-width: 720px){
  .section::before{ width: 460px; height: 460px; }
}
@media (prefers-reduced-motion: reduce){
  .section::before{ animation-duration: 80s; }
  .section-bg::after{ animation-duration: 60s; }
  .plan.featured::before, .form-card::before, .cta-final::before{ animation-duration: 14s; }
}