:root {
  --kiey-cyan: #2AABE4;
  --kiey-cyan-dark: #29498d;
  --kiey-green: #8CC63E;
  --kiey-indigo: #170b35;
  --kiey-indigo-2: #190A32;
  --kiey-pink: #D9378B;
  --kiey-orange: #ff6b35;
  --theme-accent: #2AABE4;
  --theme-accent-2: #8CC63E;
  --kiey-gradient: linear-gradient(90deg, #2AABE4 0%, #8CC63E 100%);
  --kiey-gradient-soft: linear-gradient(135deg, rgba(42,171,228,0.12) 0%, rgba(140,198,62,0.12) 100%);
  --kiey-gradient-radial: radial-gradient(circle at 30% 20%, rgba(42,171,228,0.35), transparent 55%),
                          radial-gradient(circle at 80% 70%, rgba(140,198,62,0.3), transparent 55%),
                          radial-gradient(circle at 50% 100%, rgba(217,55,139,0.18), transparent 60%);
  --text: #0f0821;
  --text-muted: #5a5571;
  --bg: #ffffff;
  --bg-soft: #f7f6fb;
  --bg-dark: #0b0520;
  --border: rgba(23,11,53,0.08);
  --radius: 18px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 10px rgba(23,11,53,0.05);
  --shadow: 0 12px 40px -12px rgba(23,11,53,0.18);
  --shadow-lg: 0 30px 80px -20px rgba(23,11,53,0.25);
  --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  font-size: clamp(15px, 1.05vw, 17px);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: 'Sora', 'Inter', sans-serif; letter-spacing: -0.02em; line-height: 1.05; color: var(--kiey-indigo); }
h2 { font-size: clamp(2rem, 4.2vw, 3.5rem); font-weight: 800; }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 700; }
p { color: var(--text-muted); }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul { list-style: none; }

/* ----- Video poster (click-to-play) ----- */
.lazy-video { cursor: pointer; position: relative; }
.video-poster {
  width: 100%; height: 100%; position: absolute; inset: 0;
  display: grid; place-items: center;
  background-size: cover; background-position: center;
  transition: transform .3s var(--ease);
}
.video-poster[data-audience="agents"] {
  background: linear-gradient(135deg, #0b0520 0%, #170b35 40%, #29498d 100%);
}
.video-poster[data-audience="vendors"] {
  background: linear-gradient(135deg, #0a2e0b 0%, #1a5921 40%, #5a9f1c 100%);
}
.video-poster[data-audience="homeowners"] {
  background: linear-gradient(135deg, #1a0a3d 0%, #29498d 40%, #D9378B 100%);
}
.video-poster::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.15), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.12), transparent 50%);
}
.video-poster-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(30px, 5vw, 60px);
  text-align: center; color: #fff;
  width: 100%; max-width: 820px;
}
.video-poster-title {
  font-family: 'Sora', 'Inter', sans-serif; font-weight: 900;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  color: #fff; letter-spacing: -0.02em; line-height: 1.1;
  margin-bottom: clamp(20px, 3vw, 36px);
  text-shadow: 0 4px 20px rgba(0,0,0,0.35);
}
.video-play-btn {
  position: relative; z-index: 2;
  width: clamp(72px, 9vw, 104px); height: clamp(72px, 9vw, 104px); border-radius: 50%;
  background: rgba(255,255,255,0.95);
  display: grid; place-items: center;
  box-shadow: 0 20px 60px -10px rgba(0,0,0,0.5), 0 0 0 8px rgba(255,255,255,0.15);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  margin-bottom: clamp(20px, 3vw, 32px);
}
.lazy-video:hover .video-play-btn { transform: scale(1.08); box-shadow: 0 24px 70px -8px rgba(0,0,0,0.6), 0 0 0 14px rgba(255,255,255,0.2); }
.video-play-btn svg { width: 40%; height: 40%; color: var(--kiey-indigo); margin-left: 4px; }
.video-poster-tagline {
  font-size: clamp(0.95rem, 1.25vw, 1.12rem);
  color: rgba(255,255,255,0.85); line-height: 1.55;
  max-width: 640px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ----- Per-audience themes ----- */
body.theme-agents {
  --theme-accent: #2AABE4;
  --theme-accent-2: #8CC63E;
  --kiey-gradient: linear-gradient(90deg, #2AABE4 0%, #8CC63E 100%);
}
body.theme-vendors {
  --theme-accent: #8CC63E;
  --theme-accent-2: #2AABE4;
  --kiey-gradient: linear-gradient(135deg, #5a9f1c 0%, #8CC63E 50%, #29abe2 100%);
}
body.theme-homeowners {
  --theme-accent: #D9378B;
  --theme-accent-2: #2AABE4;
  --kiey-gradient: linear-gradient(135deg, #2AABE4 0%, #9b51e0 50%, #D9378B 100%);
}
body.theme-ai {
  --theme-accent: #9b51e0;
  --theme-accent-2: #2AABE4;
  --kiey-gradient: linear-gradient(135deg, #5a00f0 0%, #2AABE4 100%);
}

body.theme-agents .blob-1 { background: #2AABE4; }
body.theme-agents .blob-2 { background: #8CC63E; }
body.theme-vendors .blob-1 { background: #8CC63E; }
body.theme-vendors .blob-2 { background: #5a9f1c; }
body.theme-homeowners .blob-1 { background: #2AABE4; }
body.theme-homeowners .blob-2 { background: #D9378B; }
body.theme-ai .blob-1 { background: #5a00f0; }
body.theme-ai .blob-2 { background: #2AABE4; }

/* Audience banner — sits above the hero on sub-pages */
.audience-banner {
  padding: 18px clamp(20px, 5vw, 60px);
  display: flex; align-items: center; gap: 14px;
  font-family: 'Sora', sans-serif;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.4) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.audience-banner .ab-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  background: var(--kiey-gradient); color: #fff;
  font-weight: 700; font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  box-shadow: 0 4px 16px -4px rgba(23,11,53,0.3);
}
.audience-banner .ab-label {
  color: var(--text-muted); font-size: 0.9rem; font-weight: 500;
}
.audience-banner a { color: var(--theme-accent); font-weight: 600; border-bottom: 1px solid currentColor; transition: opacity .2s; }
.audience-banner a:hover { opacity: 0.7; }

/* ----- Aurora background ----- */
.aurora {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background: radial-gradient(ellipse at top, #f1f7ff 0%, #ffffff 60%, #ffffff 100%);
}
.aurora .blob {
  position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.22;
  animation: float 18s ease-in-out infinite;
}
.blob-1 { width: 520px; height: 520px; background: var(--kiey-cyan); top: -180px; left: -120px; }
.blob-2 { width: 480px; height: 480px; background: var(--kiey-green); top: 10%; right: -200px; animation-delay: -6s; }
.blob-3 { display: none; }
@keyframes float {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(40px,-30px) scale(1.08); }
  66% { transform: translate(-30px,40px) scale(0.95); }
}

/* ----- Nav ----- */
.nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(20px, 4vw, 60px);
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  isolation: isolate;
}
.nav-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.25rem; font-family: 'Sora'; letter-spacing: -0.04em; }
.logo-mark {
  width: 32px; height: 32px; border-radius: 10px; background: var(--kiey-gradient);
  box-shadow: 0 6px 20px -6px rgba(42,171,228,0.6);
  position: relative;
}
.logo-mark::after {
  content: ''; position: absolute; inset: 6px; border-radius: 6px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6), transparent 50%);
}
.nav-links { display: flex; gap: 4px; flex-wrap: nowrap; }
.nav-links a {
  padding: 8px 14px; border-radius: 10px; font-weight: 500; font-size: 0.95rem;
  color: var(--kiey-indigo); transition: all .2s var(--ease);
  white-space: nowrap;
}
@media (max-width: 1280px) {
  .nav-links a { padding: 8px 10px; font-size: 0.9rem; }
  .nav-cta { gap: 8px; }
}
.nav-links a:hover { background: var(--bg-soft); color: var(--kiey-cyan-dark); }
.nav-cta { display: flex; gap: 10px; align-items: center; }
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  width: 40px; height: 40px; padding: 10px; flex-direction: column; gap: 4px;
}
.nav-toggle span { display: block; height: 2px; background: var(--kiey-indigo); border-radius: 2px; }

/* ----- Buttons ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 0.95rem;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .2s;
  border: none; cursor: pointer; white-space: nowrap;
}
.btn-primary {
  background: var(--kiey-gradient); color: #fff;
  box-shadow: 0 8px 24px -8px rgba(42,171,228,0.55);
  background-size: 200% 100%; background-position: 0% 0%;
}
.btn-primary:hover { transform: translateY(-2px); background-position: 100% 0%; box-shadow: 0 14px 32px -10px rgba(42,171,228,0.7); }
.btn-ghost { background: transparent; color: var(--kiey-indigo); }
.btn-ghost:hover { background: var(--bg-soft); }

/* Hero-only ghost treatment: subtle navy border + fill-on-hover so it reads
   as a real button next to the gradient primary. Scoped to .hero-ghost so
   the nav-bar Login (plain .btn-ghost) stays borderless. */
.btn-ghost.hero-ghost {
  border: 1.5px solid rgba(6, 29, 71, 0.55);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease);
}
.btn-ghost.hero-ghost:hover {
  background: var(--kiey-indigo);
  border-color: var(--kiey-indigo);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -12px rgba(6,29,71,0.35);
}
.btn-lg { padding: 14px 28px; font-size: 1rem; }
.btn-xl { padding: 20px 40px; font-size: 1.1rem; }

.store-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--kiey-indigo); color: #fff;
  padding: 12px 20px; border-radius: 14px;
  transition: transform .2s var(--ease), box-shadow .2s;
}
.store-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -8px rgba(23,11,53,0.4); }
.store-btn svg { width: 28px; height: 28px; }
.store-btn span { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.store-btn small { font-size: 0.7rem; opacity: 0.75; }
.store-btn strong { font-size: 1rem; font-weight: 700; }

/* ----- Hero ----- */
.hero {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 5vw, 80px);
  padding: clamp(40px, 6vw, 100px) clamp(20px, 5vw, 80px) clamp(60px, 8vw, 120px);
  align-items: center; position: relative;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(42,171,228,0.1); color: var(--kiey-cyan-dark);
  font-size: 0.85rem; font-weight: 600; margin-bottom: 24px;
}
.pulse { width: 8px; height: 8px; background: var(--kiey-green); border-radius: 50%; position: relative; }
.pulse::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--kiey-green); animation: pulse 2s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.5); opacity: 0; } }

.hero-title {
  font-size: clamp(2.5rem, 6vw, 5.2rem);
  font-weight: 900; line-height: 0.98;
  margin-bottom: 24px;
}
.hero-title .word { display: inline-block; margin-right: 0.2em; }
.gradient-text {
  background: var(--kiey-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: shift 6s ease infinite;
}
@keyframes shift { 0%,100% { background-position: 0% 0%; } 50% { background-position: 100% 0%; } }

.hero-sub {
  font-size: clamp(1.02rem, 1.25vw, 1.15rem); max-width: 620px;
  margin-bottom: 36px; color: var(--text-muted);
}
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

/* Hero CTAs are two-line buttons: a big label over a small "what you're
   getting" hint, both INSIDE the pill. Keeps the hero visually tight and
   the hint contextually anchored to the action. */
.hero-btn-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1.1;
  padding: 14px 32px;
}
.hero-btn-main {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.1px;
}
.hero-btn-sub {
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.85;
  letter-spacing: 0.2px;
}

.hero-subcta { margin-top: 18px; font-size: 0.92rem; color: var(--text-muted); }
.hero-subcta a { color: var(--kiey-cyan-dark); border-bottom: 1px solid rgba(41,73,141,0.25); transition: border-color .2s; }
.hero-subcta a:hover { border-bottom-color: var(--kiey-cyan-dark); }

.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 420px; }
.hero-video {
  width: 100%; aspect-ratio: 16/10; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--kiey-indigo);
  position: relative;
  transform: translateY(0);
}
.hero-video::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); border-radius: inherit;
}
.hero-video iframe { width: 100%; height: 100%; display: block; border: 0; }

/* ----- Role dividers + video bands ----- */
.video-band {
  margin: 80px 0 0;
  padding: 100px clamp(20px, 5vw, 80px);
  position: relative; overflow: hidden;
  color: #fff;
}
.video-band[aria-label*="Agents"] {
  background: linear-gradient(135deg, #0b0520 0%, #170b35 40%, #29498d 100%);
}
.video-band[aria-label*="Vendors"] {
  background: linear-gradient(135deg, #0a2e0b 0%, #1a5921 40%, #5a9f1c 100%);
}
.video-band[aria-label*="Homeowners"] {
  background: linear-gradient(135deg, #1a0a3d 0%, #29498d 40%, #D9378B 100%);
}
.video-band::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.1), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,0.08), transparent 50%);
  pointer-events: none;
}
.video-band-inner { position: relative; z-index: 1; text-align: center; max-width: 1100px; margin: 0 auto; }
.role-chip {
  display: inline-block;
  padding: 10px 24px; border-radius: 999px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff; font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase;
  margin-bottom: 22px;
}
.video-band h2 {
  color: #fff;
  font-family: 'Sora', 'Inter', sans-serif; font-weight: 900;
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: -0.03em; line-height: 1;
  margin-bottom: 16px;
}
.video-band h2 .role-word {
  display: inline-block;
  background: var(--kiey-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.video-band .role-tagline {
  color: rgba(255,255,255,0.75);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  max-width: 640px; margin: 0 auto 48px;
  line-height: 1.55;
}
.video-embed {
  aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
  background: #000;
  max-width: 900px; margin: 0 auto;
  position: relative; border: 1px solid rgba(255,255,255,0.08);
}
.video-embed iframe { width: 100%; height: 100%; display: block; border: 0; }

.role-cta-row {
  display: flex; justify-content: center; gap: 14px; margin-top: 36px; flex-wrap: wrap;
}
.btn-ghost-light {
  background: rgba(255,255,255,0.1); color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(10px);
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }

/* Signup dropdown in nav */
.signup-menu { position: relative; }
.signup-menu-btn { display: inline-flex; align-items: center; gap: 6px; }
.signup-menu-btn::after {
  content: ''; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); margin-top: -4px; margin-left: 4px;
  transition: transform .2s var(--ease);
}
.signup-menu.open .signup-menu-btn::after { transform: rotate(225deg); margin-top: 2px; }
.signup-menu-dropdown {
  position: absolute; top: calc(100% + 12px); right: 0; min-width: 240px;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 8px; display: none; z-index: 200;
}
.signup-menu.open .signup-menu-dropdown { display: block; animation: menuIn .15s ease-out; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.signup-menu-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  color: var(--kiey-indigo); font-weight: 500; font-size: 0.95rem;
  transition: background .15s;
}
.signup-menu-item:hover { background: var(--bg-soft); }
.signup-menu-item strong { display: block; font-weight: 700; color: var(--kiey-indigo); font-family: 'Sora'; }
.signup-menu-item small { display: block; font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; }
.signup-menu-item-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.1rem; color: #fff;
}
.signup-menu-item-icon.agent { background: linear-gradient(135deg, #2AABE4, #29498d); }
.signup-menu-item-icon.vendor { background: linear-gradient(135deg, #8CC63E, #5a9f1c); }
.signup-menu-item-icon.homeowner { background: linear-gradient(135deg, #D9378B, #9b51e0); }

/* Hero variant of the signup menu — shares the gradient .btn-primary
   styling with the header version, but uses the stacked hero button
   layout (main + subtitle) so it visually matches the Price Your
   Market / Free. No signup. button beside it. */
.signup-menu-hero .signup-menu-btn {
  /* Match the .hero-btn-stack 2px row gap (the base .signup-menu-btn
     sets 6px which would push the subtitle further from the main
     line than the adjacent Price Your Market button). Inherit the
     page font so this <button> matches the adjacent <a> instead of
     falling back to the browser's default UA font. */
  gap: 2px;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.1px;
}
.signup-menu-hero .signup-menu-btn::after {
  /* The default ::after chevron sits after the button content; in a
     column-stacked hero button it would render below the subtitle.
     Hide it and embed the chevron inline with the "Sign Up" main
     text instead. */
  display: none;
}
.hero-btn-chevron {
  /* Standard dropdown affordance — ▼ when closed, ▲ when open. Same
     across desktop and mobile regardless of whether the dropdown
     actually pops out to the right or below the pill. */
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 6px;
  margin-bottom: 4px;
  transition: transform .2s var(--ease);
}
.signup-menu-hero.open .hero-btn-chevron {
  transform: rotate(225deg);
  margin-bottom: 0;
}
.signup-menu-hero .signup-menu-dropdown {
  /* Open to the right of the hero button on desktop so it doesn't
     push the rest of the page below the fold. The hero pill sits
     in the left half of the viewport, so there's plenty of room
     to its right. */
  top: 0;
  left: calc(100% + 12px);
  right: auto;
  transform: none;
  min-width: 280px;
}
@media (max-width: 820px) {
  .signup-menu-hero .signup-menu-dropdown {
    /* On narrower viewports the hero pill is wider than the slot at
       its right; fall back to centred-below. */
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Role-specific subtle tint for the content section that follows each video band */
.audience-agents {
  background: linear-gradient(180deg, rgba(42,171,228,0.03) 0%, transparent 100%);
  position: relative;
}
.audience-vendors {
  background: linear-gradient(180deg, rgba(140,198,62,0.05) 0%, transparent 100%);
  position: relative;
}
.audience-homeowners {
  background: linear-gradient(180deg, rgba(217,55,139,0.04) 0%, transparent 100%);
  position: relative;
}

.phone {
  width: 280px; height: 560px; background: var(--kiey-indigo);
  border-radius: 40px; padding: 10px;
  box-shadow: 0 40px 80px -20px rgba(23,11,53,0.4), inset 0 0 0 2px rgba(255,255,255,0.05);
  position: relative; transform: rotate(-4deg);
  animation: phone-float 6s ease-in-out infinite;
}
@keyframes phone-float { 0%,100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-12px); } }
.phone-notch {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 90px; height: 22px; background: #000; border-radius: 12px; z-index: 2;
}
.phone-screen {
  width: 100%; height: 100%; background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
  border-radius: 32px; padding: 60px 18px 20px; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
}
.chat-bubble {
  padding: 10px 14px; border-radius: 18px; font-size: 0.82rem; max-width: 85%;
  animation: pop .5s var(--ease) both;
}
.chat-bubble.from { background: #fff; border: 1px solid var(--border); align-self: flex-start; border-bottom-left-radius: 4px; color: var(--kiey-indigo); }
.chat-bubble.to { background: var(--kiey-gradient); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-bubble:nth-child(1) { animation-delay: .3s; }
.chat-bubble:nth-child(2) { animation-delay: .9s; }
.chat-bubble:nth-child(3) { animation-delay: 1.5s; }
.chat-bubble:nth-child(4) { animation-delay: 2.1s; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }
.typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; background: #fff; border-radius: 18px; border: 1px solid var(--border); }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--kiey-cyan); animation: bounce 1.2s ease infinite; }
.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes bounce { 0%,100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(-5px); opacity: 1; } }

.floating-card {
  position: absolute; background: #fff; border-radius: 16px;
  padding: 12px 16px; box-shadow: var(--shadow-lg);
  display: flex; gap: 10px; align-items: center;
  animation: card-float 5s ease-in-out infinite;
}
.floating-card small { color: var(--text-muted); font-size: 0.72rem; display: block; }
.floating-card strong { color: var(--kiey-indigo); font-size: 0.92rem; }
.card-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--kiey-gradient-soft); display: grid; place-items: center; font-size: 1.1rem; }
.card-1 { top: 15%; left: 0%; animation-delay: -2s; }
.card-2 { bottom: 12%; right: 0%; }
@keyframes card-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ----- Stats ----- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  padding: 40px clamp(20px, 5vw, 80px) 60px;
  max-width: 1400px; margin: 0 auto;
}
.stat { text-align: center; padding: 32px 20px; border-radius: var(--radius-lg); background: var(--bg-soft); transition: transform .3s var(--ease); }
.stat:hover { transform: translateY(-4px); }
.stat .num { display: block; font-family: 'Sora'; font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 800; background: var(--kiey-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat .lbl { font-size: 0.9rem; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }

/* ----- Sections ----- */
.section { padding: clamp(60px, 9vw, 140px) clamp(20px, 5vw, 80px); max-width: 1400px; margin: 0 auto; }
.section-head { max-width: 820px; margin: 0 auto clamp(40px, 6vw, 80px); text-align: center; }
.kicker {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: var(--kiey-gradient-soft); color: var(--kiey-cyan-dark);
  font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 20px;
}
.section-head .lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); margin-top: 24px; }

/* ----- Bento grid ----- */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bento-card {
  padding: 36px; border-radius: var(--radius-lg);
  background: #fff; border: 1px solid var(--border);
  transition: all .3s var(--ease); position: relative; overflow: hidden;
}
.bento-card::before {
  content: ''; position: absolute; inset: 0; background: var(--kiey-gradient-soft); opacity: 0; transition: opacity .3s var(--ease);
}
.bento-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(42,171,228,0.25); }
.bento-card:hover::before { opacity: 1; }
.bento-card > * { position: relative; z-index: 1; }
.bento-lg { grid-row: span 1; grid-column: span 1; background: linear-gradient(135deg, #0b0520 0%, #1a0f3f 100%); color: #fff; border: 0; }
.bento-lg h3 { color: #fff; }
.bento-lg p { color: rgba(255,255,255,0.7); }
.bento-lg::before { display: none; }
.bento-icon {
  width: 56px; height: 56px; border-radius: 16px; background: var(--bg-soft);
  display: grid; place-items: center; font-size: 1.5rem; margin-bottom: 20px;
}
.bento-icon.gradient-bg { background: var(--kiey-gradient); }
.bento-card h3 { margin-bottom: 12px; }

/* ----- Features grid ----- */
.features-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; max-width: 1200px; margin: 0 auto; }
@media (max-width: 1100px) { .features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feature {
  padding: 22px 24px; border-radius: var(--radius);
  background: var(--bg-soft); transition: all .25s var(--ease);
  border: 1px solid transparent;
  display: flex; flex-direction: column;
  min-height: 220px;
}
.feature p { flex: 1 1 auto; }
.feature:hover { background: #fff; border-color: var(--border); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.feature-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--kiey-gradient-soft);
  display: grid; place-items: center;
  margin-bottom: 12px;
}
.feature-icon svg { width: 18px; height: 18px; color: var(--kiey-cyan-dark); }
.feature-num {
  display: none;
}
.feature h3 { margin-bottom: 6px; font-size: 1rem; }
.feature p { font-size: 0.88rem; line-height: 1.5; }

.hashtag-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.hashtag-chip {
  display: inline-block;
  padding: 3px 9px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600;
  color: var(--kiey-cyan-dark);
  background: var(--kiey-gradient-soft);
  border: 1px solid rgba(42,171,228,0.2);
  font-family: 'Sora', sans-serif;
  letter-spacing: -0.01em;
}

/* Big Kiey AI feature block inside Features section */
.kiey-ai-block {
  position: relative; overflow: hidden;
  border-radius: clamp(20px, 3vw, 32px);
  padding: clamp(40px, 5vw, 70px);
  margin-bottom: 60px;
  background: linear-gradient(135deg, #0b0520 0%, #170b35 50%, #29498d 100%);
  color: #fff;
}
.kiey-ai-block::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 15% 20%, rgba(42,171,228,0.3), transparent 50%),
    radial-gradient(circle at 85% 85%, rgba(140,198,62,0.25), transparent 55%);
}
.kiey-ai-block > * { position: relative; z-index: 1; }
.kiey-ai-block-head { max-width: 820px; margin: 0 auto 50px; text-align: center; }
.kiey-ai-block-head .role-chip { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); margin-bottom: 20px; }
.kiey-ai-block-head h3 {
  font-family: 'Sora', 'Inter', sans-serif; font-weight: 900;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  color: #fff; letter-spacing: -0.02em; line-height: 1.1;
  margin-bottom: 18px;
}
.kiey-ai-block-head p {
  color: rgba(255,255,255,0.82); font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.6; max-width: 720px; margin: 0 auto;
}
.kiey-ai-block-head em { color: var(--kiey-green); font-style: normal; font-weight: 600; }

.kiey-ai-block-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 4vw, 60px);
  align-items: start;
}
@media (max-width: 900px) {
  .kiey-ai-block-grid { grid-template-columns: 1fr; }
}

.kiey-ai-how h4, .kiey-ai-safety h4 {
  color: #fff; font-family: 'Sora'; font-weight: 800;
  font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 22px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.kiey-ai-steps { display: grid; gap: 18px; }
.kiey-ai-step {
  padding: 20px 22px; border-radius: 16px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.kiey-ai-step:hover { background: rgba(255,255,255,0.1); transform: translateX(4px); }
.kiey-ai-step-num {
  display: inline-block; font-family: 'Sora'; font-weight: 900;
  font-size: 0.95rem; letter-spacing: 0.05em;
  background: var(--kiey-gradient);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
}
.kiey-ai-step h5 { color: #fff; font-family: 'Sora'; font-weight: 700; font-size: 1.05rem; margin-bottom: 6px; }
.kiey-ai-step p { color: rgba(255,255,255,0.72); font-size: 0.92rem; line-height: 1.5; }
.kiey-ai-step em { color: var(--kiey-green); font-style: normal; font-weight: 600; }

.kiey-ai-safety .safety-lead { color: rgba(255,255,255,0.8); font-size: 0.95rem; line-height: 1.55; margin-bottom: 18px; }
.kiey-ai-safety .check-list li {
  color: rgba(255,255,255,0.75); font-size: 0.9rem; line-height: 1.5;
  padding: 10px 0 10px 30px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.kiey-ai-safety .check-list li::before {
  top: 13px; width: 20px; height: 20px;
  background: var(--kiey-gradient);
}

.features-subheader { text-align: center; margin-bottom: 28px; }
.features-subheader .kicker { background: var(--kiey-gradient-soft); font-size: 0.92rem; padding: 8px 18px; }
.features-subheader-note { color: var(--text-muted); font-size: 0.95rem; margin-top: 10px; max-width: 540px; margin-left: auto; margin-right: auto; }

/* ----- Audience sections ----- */
.audience { position: relative; }
.audience-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.audience-grid.reverse { grid-template-columns: 1fr 1.1fr; }
.audience-grid.reverse .audience-copy { order: 2; }
.audience-grid.reverse .audience-testimonial { order: 1; }
.audience-copy .kicker { margin-bottom: 16px; }
.audience-copy > p { margin: 20px 0; font-size: 1.05rem; }
.audience-copy .sub-h { margin: 32px 0 16px; font-family: 'Sora'; font-size: 1.1rem; color: var(--kiey-indigo); }
.check-list li {
  position: relative; padding: 12px 0 12px 36px; color: var(--text-muted);
  border-bottom: 1px solid var(--border); line-height: 1.6;
}
.check-list li:last-child { border-bottom: 0; }
.check-list li::before {
  content: ''; position: absolute; left: 0; top: 16px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--kiey-gradient);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/70% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/70% no-repeat;
}
.audience-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.muted { color: var(--text-muted); font-size: 0.98rem; margin-bottom: 20px; }

.audience-testimonial blockquote {
  padding: 40px; border-radius: var(--radius-lg); position: relative;
  background: linear-gradient(135deg, #fff 0%, var(--bg-soft) 100%);
  border: 1px solid var(--border); box-shadow: var(--shadow);
}
.audience-testimonial blockquote::before {
  content: '"'; position: absolute; top: -20px; left: 30px;
  font-family: 'Sora'; font-size: 6rem; line-height: 1; color: var(--kiey-cyan); opacity: 0.3;
}
.audience-testimonial p { color: var(--kiey-indigo); font-size: 1.05rem; line-height: 1.7; font-style: italic; }
.audience-testimonial footer { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.audience-testimonial footer strong { color: var(--kiey-indigo); font-size: 1rem; }
.audience-testimonial footer span { color: var(--text-muted); font-size: 0.88rem; }

.audience-vendors { background: linear-gradient(180deg, transparent 0%, rgba(140,198,62,0.05) 50%, transparent 100%); }
.audience-clients { background: linear-gradient(180deg, transparent 0%, rgba(217,55,139,0.04) 50%, transparent 100%); }

/* ----- Steps ----- */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 60px; }
.step {
  text-align: center; padding: 40px 28px; border-radius: var(--radius-lg);
  background: #fff; border: 1px solid var(--border);
  position: relative; transition: all .3s var(--ease);
}
.step:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(42,171,228,0.3); }
.step-num {
  width: 56px; height: 56px; border-radius: 50%; background: var(--kiey-gradient);
  color: #fff; font-family: 'Sora'; font-weight: 800; font-size: 1.5rem;
  display: grid; place-items: center; margin: 0 auto 20px;
  box-shadow: 0 10px 24px -6px rgba(42,171,228,0.5);
}
.step h3 { margin-bottom: 10px; }
.steps-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ----- Download grid ----- */
.download-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px;
}
.download-card {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 24px; border-radius: var(--radius-lg);
  background: var(--kiey-indigo); color: #fff;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  position: relative; overflow: hidden;
}
.download-card::before {
  content: ''; position: absolute; inset: 0;
  background: var(--kiey-gradient); opacity: 0; transition: opacity .3s var(--ease);
}
.download-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(23,11,53,0.4); }
.download-card:hover::before { opacity: 0.15; }
.download-card > * { position: relative; z-index: 1; }
.download-icon { width: 44px; height: 44px; display: grid; place-items: center; flex-shrink: 0; }
.download-icon svg { width: 28px; height: 28px; }
.download-info { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.download-info small { font-size: 0.72rem; opacity: 0.7; margin-bottom: 2px; }
.download-info strong { font-size: 1.05rem; font-weight: 700; font-family: 'Sora'; }
.download-meta { font-size: 0.72rem; opacity: 0.55; margin-top: 4px; }

/* ----- AI section ----- */
.ai-hero {
  margin: clamp(40px, 8vw, 100px) clamp(20px, 5vw, 80px);
  border-radius: clamp(20px, 3vw, 36px);
  padding: clamp(50px, 7vw, 90px) clamp(30px, 5vw, 70px);
  background: linear-gradient(135deg, #0b0520 0%, #1a0f3f 60%, #29498d 100%);
  color: #fff; position: relative; overflow: hidden;
}
.ai-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(42,171,228,0.3), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(140,198,62,0.25), transparent 50%);
  pointer-events: none;
}
.ai-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.ai-hero h2 { color: #fff; font-size: clamp(2rem, 4.5vw, 3.8rem); margin-bottom: 20px; }
.ai-hero .kicker { background: rgba(255,255,255,0.1); color: #fff; backdrop-filter: blur(10px); }
.ai-hero p { color: rgba(255,255,255,0.8); font-size: clamp(1rem, 1.3vw, 1.15rem); max-width: 520px; margin-bottom: 32px; }
.ai-hero .btn-primary { font-size: 1.05rem; padding: 16px 32px; }
.ai-orbit {
  width: 100%; aspect-ratio: 1; max-width: 440px; margin: 0 auto;
  position: relative; display: grid; place-items: center;
}
.ai-core {
  width: 140px; height: 140px; border-radius: 50%;
  background: var(--kiey-gradient);
  box-shadow: 0 0 80px rgba(42,171,228,0.6);
  display: grid; place-items: center; font-size: 3.5rem; color: #fff;
  animation: core-pulse 3s ease-in-out infinite;
  position: relative; z-index: 3;
}
@keyframes core-pulse { 0%,100% { transform: scale(1); box-shadow: 0 0 80px rgba(42,171,228,0.6); } 50% { transform: scale(1.06); box-shadow: 0 0 120px rgba(140,198,62,0.7); } }
.ai-ring {
  position: absolute; border-radius: 50%; border: 1px dashed rgba(255,255,255,0.2);
  animation: spin 20s linear infinite;
}
.ai-ring-1 { inset: 15%; animation-duration: 25s; }
.ai-ring-2 { inset: 0; animation-direction: reverse; animation-duration: 40s; border-style: dotted; }
@keyframes spin { to { transform: rotate(360deg); } }
.ai-chip {
  position: absolute; width: 52px; height: 52px; border-radius: 14px;
  background: rgba(255,255,255,0.08); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.15);
  display: grid; place-items: center; font-size: 1.4rem;
  animation: chip-float 4s ease-in-out infinite;
  z-index: 2;
}
.ai-chip-1 { top: 5%; left: 50%; transform: translateX(-50%); }
.ai-chip-2 { top: 45%; right: 2%; animation-delay: -1s; }
.ai-chip-3 { bottom: 5%; left: 50%; transform: translateX(-50%); animation-delay: -2s; }
.ai-chip-4 { top: 45%; left: 2%; animation-delay: -3s; }
@keyframes chip-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* ----- Laptop / admin panel mockup ----- */
.laptop-mockup { max-width: 1060px; margin: 0 auto; perspective: 1500px; }
.laptop-frame {
  background: #0b0520; border-radius: 14px 14px 0 0;
  padding: 16px 14px 12px;
  box-shadow: 0 50px 100px -30px rgba(11,5,32,0.55), 0 20px 50px -20px rgba(23,11,53,0.4);
  border: 1px solid #1a0f3f;
  position: relative;
}
.laptop-frame::after {
  content: ''; display: block;
  height: 14px; background: #e5e3ec;
  margin: 12px -40px -14px; border-radius: 0 0 24px 24px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.laptop-screen {
  background: linear-gradient(180deg, #f8fafc 0%, #f0f4f9 100%);
  border-radius: 6px; overflow: hidden;
  display: grid; grid-template-columns: 240px 1fr;
  min-height: 520px;
  font-size: 0.85rem;
}
.adm-sidebar {
  background: var(--kiey-indigo); color: rgba(255,255,255,0.85);
  padding: 20px 16px; display: flex; flex-direction: column; gap: 24px;
}
.adm-logo { display: flex; align-items: center; gap: 8px; color: #fff; font-family: 'Sora'; font-weight: 800; font-size: 1rem; }
.adm-logo .logo-mark { width: 22px; height: 22px; border-radius: 6px; }
.adm-nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.adm-nav-item {
  padding: 9px 12px; border-radius: 8px; font-size: 0.85rem; font-weight: 500;
  display: flex; align-items: center; gap: 10px; cursor: default;
  transition: background .15s;
}
.adm-nav-item.active { background: rgba(255,255,255,0.12); color: #fff; }
.adm-count { margin-left: auto; background: rgba(255,255,255,0.12); padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; }
.adm-user { display: flex; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08); }
.adm-user-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--kiey-gradient); display: grid; place-items: center; font-family: 'Sora'; font-weight: 800; color: #fff; font-size: 0.82rem; flex-shrink: 0; }
.adm-user strong { color: #fff; display: block; font-size: 0.85rem; }
.adm-user small { color: rgba(255,255,255,0.55); font-size: 0.72rem; }

.adm-main { padding: 24px 28px; overflow: hidden; }
.adm-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.adm-header h4 { font-family: 'Sora'; font-size: 1.4rem; color: var(--kiey-indigo); font-weight: 800; }
.adm-header-cta { display: flex; gap: 8px; }
.adm-chip { padding: 7px 14px; background: var(--bg-soft); border-radius: 999px; font-size: 0.75rem; font-weight: 600; color: var(--kiey-indigo); border: 1px solid var(--border); }
.adm-chip.primary { background: var(--kiey-gradient); color: #fff; border: 0; }

.adm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.adm-stat {
  padding: 14px 16px; border-radius: 12px;
  background: #fff; border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
}
.adm-stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-weight: 600; }
.adm-stat-value { font-family: 'Sora'; font-size: 1.15rem; font-weight: 800; color: var(--kiey-indigo); }
.adm-stat-value em { font-style: normal; color: var(--text-muted); font-weight: 500; font-size: 0.8rem; }

.adm-activity { background: #fff; border-radius: 12px; border: 1px solid var(--border); padding: 6px 14px; }
.adm-activity-row {
  padding: 11px 4px; display: flex; align-items: center; gap: 10px;
  font-size: 0.82rem; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.adm-activity-row:last-child { border-bottom: 0; }
.adm-activity-row strong { color: var(--kiey-indigo); font-weight: 700; }
.adm-activity-row em { font-style: normal; color: var(--text-muted); font-size: 0.72rem; margin-left: auto; white-space: nowrap; }
.adm-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.adm-dot.green { background: var(--kiey-green); }
.adm-dot.cyan { background: var(--kiey-cyan); }

@media (max-width: 720px) {
  .laptop-screen { grid-template-columns: 1fr; min-height: auto; }
  .adm-sidebar { flex-direction: row; overflow-x: auto; padding: 12px; gap: 12px; }
  .adm-nav { flex-direction: row; gap: 4px; }
  .adm-nav-item { flex-shrink: 0; font-size: 0.78rem; padding: 6px 10px; }
  .adm-user { display: none; }
  .adm-stats { grid-template-columns: 1fr; }
}

/* ----- Team cards (About page) ----- */
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 32px 0; }
@media (max-width: 640px) { .team-grid { grid-template-columns: 1fr; } }
.team-card {
  padding: 28px; border-radius: var(--radius-lg);
  background: var(--bg-soft); border: 1px solid var(--border);
}
.team-avatar {
  width: 64px; height: 64px; border-radius: 50%; background: var(--kiey-gradient);
  color: #fff; display: grid; place-items: center;
  font-family: 'Sora'; font-weight: 900; font-size: 1.3rem; letter-spacing: 0.05em;
  margin-bottom: 14px; box-shadow: 0 6px 20px -6px rgba(42,171,228,0.45);
}
.team-card h3 { font-family: 'Sora'; font-weight: 800; color: var(--kiey-indigo); font-size: 1.2rem; margin-bottom: 4px; }
.team-card .team-role { color: var(--kiey-cyan-dark); font-weight: 600; font-size: 0.88rem; margin-bottom: 14px; }
.team-card > p { color: var(--text); font-size: 0.95rem; line-height: 1.6; }

/* ----- Breadcrumbs (blog + about) ----- */
.breadcrumbs {
  font-size: 0.85rem; color: var(--text-muted);
  margin-bottom: 24px;
}
.breadcrumbs a { color: var(--kiey-cyan-dark); font-weight: 500; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs span { margin: 0 6px; opacity: 0.5; }

/* ----- FAQ ----- */
.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 28px; transition: border-color .2s, box-shadow .2s;
}
.faq-item[open] { border-color: rgba(42,171,228,0.35); box-shadow: var(--shadow-sm); }
.faq-item summary {
  cursor: pointer; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.05rem;
  color: var(--kiey-indigo); list-style: none; position: relative; padding-right: 36px;
  display: block;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%; background: var(--kiey-gradient); color: #fff;
  font-size: 1.1rem; font-weight: 700; display: grid; place-items: center; line-height: 1;
  transition: transform .2s var(--ease);
}
.faq-item[open] summary::after { content: '−'; transform: translateY(-50%) rotate(180deg); }
.faq-item p { color: var(--text); font-size: 0.98rem; line-height: 1.65; margin-top: 14px; }

/* ----- Big CTA ----- */
.cta-big {
  margin: clamp(40px, 7vw, 100px) clamp(20px, 5vw, 80px);
  padding: clamp(60px, 9vw, 120px) clamp(30px, 5vw, 60px);
  border-radius: clamp(20px, 3vw, 36px);
  background: var(--kiey-indigo); color: #fff;
  position: relative; overflow: hidden; text-align: center;
}
.cta-big::before {
  content: ''; position: absolute; inset: -2px;
  background: var(--kiey-gradient-radial); opacity: 0.7; pointer-events: none;
}
.cta-big::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 100%, rgba(42,171,228,0.4), transparent 60%);
  pointer-events: none;
}
.cta-inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.cta-big h2 { color: #fff; font-size: clamp(2rem, 5vw, 4rem); margin-bottom: 40px; }

/* ----- Footer ----- */
.footer {
  padding: clamp(60px, 8vw, 100px) clamp(20px, 5vw, 80px) 30px;
  background: var(--kiey-indigo); color: rgba(255,255,255,0.7);
  margin-top: 40px;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; max-width: 1400px; margin: 0 auto; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-brand .logo-mark { margin-bottom: 18px; }
.footer-tag { color: #fff; font-family: 'Sora'; font-size: 1.15rem; font-weight: 600; margin-bottom: 24px; }
.footer h4 { color: #fff; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 20px; font-family: 'Inter'; font-weight: 700; }
.footer ul li { margin-bottom: 10px; font-size: 0.92rem; line-height: 1.6; }
.footer ul li a { transition: color .2s; }
.footer ul li a:hover { color: var(--kiey-cyan); }
.newsletter label { display: block; color: #fff; font-size: 0.9rem; margin-bottom: 10px; font-weight: 600; }
.newsletter-row { display: flex; gap: 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 999px; padding: 4px; }
.newsletter input {
  flex: 1; background: transparent; border: 0; padding: 10px 16px; color: #fff; outline: none;
  font-family: inherit; font-size: 0.92rem;
}
.newsletter input::placeholder { color: rgba(255,255,255,0.45); }
.footer-note { font-size: 0.78rem; line-height: 1.5; color: rgba(255,255,255,0.5); margin-top: 14px; }
.footer-copy { text-align: center; padding-top: 30px; font-size: 0.85rem; color: rgba(255,255,255,0.5); }
.footer-copy a { color: rgba(255,255,255,0.7); }

/* ----- Animated AI phone mockup (ai.html hero) ----- */
.phone-ai { width: 320px; height: 640px; }
.ai-screen {
  background: #f7f6fb !important;
  padding: 0 !important;
  display: flex !important; flex-direction: column !important; gap: 0 !important;
}
.ai-app-header {
  display: flex; align-items: center; gap: 10px;
  padding: 58px 14px 12px; background: #fff;
  border-bottom: 1px solid rgba(23,11,53,0.08);
}
.ai-back { width: 28px; height: 28px; color: var(--kiey-cyan-dark); flex-shrink: 0; }
.ai-back svg { width: 100%; height: 100%; }
.ai-app-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--kiey-gradient);
  display: grid; place-items: center; color: #fff; flex-shrink: 0;
}
.ai-app-avatar svg { width: 18px; height: 18px; }
.ai-app-title { flex: 1; min-width: 0; }
.ai-app-name { font-family: 'Sora'; font-weight: 700; font-size: 0.9rem; color: var(--kiey-indigo); }
.ai-app-sub { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-app-chat {
  flex: 1; overflow: hidden;
  padding: 12px 10px; display: flex; flex-direction: column; gap: 6px;
  scroll-behavior: smooth;
}
.ai-app-msg {
  max-width: 82%; padding: 8px 12px; border-radius: 14px;
  font-size: 0.78rem; line-height: 1.4;
  animation: aiPop .35s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes aiPop { from { opacity: 0; transform: translateY(6px) scale(0.96); } to { opacity: 1; transform: none; } }
.ai-app-msg.ai { background: #fff; border: 1px solid rgba(23,11,53,0.06); color: var(--kiey-indigo); align-self: flex-start; border-bottom-left-radius: 4px; }
.ai-app-msg.user { background: var(--kiey-gradient); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.ai-app-msg.vendor { background: #fff; border: 1px solid rgba(140,198,62,0.3); color: var(--kiey-indigo); align-self: flex-start; border-bottom-left-radius: 4px; box-shadow: 0 2px 8px rgba(140,198,62,0.1); }
.ai-app-msg.system { background: transparent; border: 0; padding: 2px 0; align-self: center; max-width: 96%; }
.ai-app-msg.system.ai, .ai-app-msg.system .ai-app-system { color: var(--text-muted); font-size: 0.7rem; padding: 4px 10px; text-align: center; }
.ai-app-photo {
  display: inline-flex; align-items: center; font-size: 0.72rem;
  background: rgba(255,255,255,0.2); padding: 6px 10px; border-radius: 10px;
}
.ai-app-typing-dots { display: inline-flex; gap: 3px; padding: 2px 4px; }
.ai-app-typing-dots span { width: 5px; height: 5px; background: var(--kiey-cyan); border-radius: 50%; animation: aiBounce 1.2s infinite ease; }
.ai-app-typing-dots span:nth-child(2) { animation-delay: .15s; }
.ai-app-typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes aiBounce { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(-4px); opacity: 1; } }
.ai-app-action-btn {
  background: var(--kiey-gradient); color: #fff;
  border: 0; padding: 7px 14px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 600; cursor: pointer;
  display: inline-block; font-family: inherit;
  transition: transform .15s, box-shadow .15s;
}
.ai-app-action-btn.tapped {
  transform: scale(0.94);
  box-shadow: 0 0 0 4px rgba(42,171,228,0.25);
}
.ai-app-vendor-card {
  display: flex; align-items: center; gap: 10px;
  background: #fff; padding: 10px; border-radius: 14px;
  border: 1px solid rgba(140,198,62,0.35);
  box-shadow: 0 6px 20px -6px rgba(140,198,62,0.2);
  width: 100%;
}
.ai-app-vendor-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #8CC63E, #5a9f1c);
  display: grid; place-items: center; font-size: 1rem; flex-shrink: 0;
}
.ai-app-vendor-info { flex: 1; min-width: 0; }
.ai-app-vendor-name { font-family: 'Sora'; font-size: 0.8rem; font-weight: 700; color: var(--kiey-indigo); line-height: 1.1; }
.ai-app-vendor-trade { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; }
.ai-app-vendor-meta { font-size: 0.62rem; color: var(--text-muted); margin-top: 3px; font-style: italic; }
.ai-app-vendor-badge {
  font-size: 0.58rem; padding: 3px 7px; border-radius: 999px;
  background: rgba(140,198,62,0.15); color: #5a9f1c; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; flex-shrink: 0;
}
.ai-app-vendor-msg-head { display: block; font-size: 0.62rem; color: #5a9f1c; font-weight: 700; margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.06em; }
.ai-app-inputbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: #fff;
  border-top: 1px solid rgba(23,11,53,0.08);
}
.ai-app-attach, .ai-app-send { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; color: var(--kiey-cyan-dark); }
.ai-app-attach svg, .ai-app-send svg { width: 18px; height: 18px; }
.ai-app-input {
  flex: 1; padding: 6px 12px; border-radius: 999px;
  background: var(--bg-soft); font-size: 0.75rem; color: var(--text-muted);
}
.ai-app-send { color: var(--kiey-cyan); }

/* ----- Book a Demo button + modal ----- */
.btn-demo {
  background: var(--kiey-gradient); color: #fff;
  box-shadow: 0 8px 24px -8px rgba(42,171,228,0.55);
  background-size: 200% 100%; background-position: 0% 0%;
  font-weight: 700;
}
.btn-demo:hover { transform: translateY(-2px); background-position: 100% 0%; box-shadow: 0 14px 32px -10px rgba(42,171,228,0.7); }

.book-demo-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(11, 5, 32, 0.65);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 40px);
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease);
}
/* The Book a Demo modal sits at z-index 1000, and Google's Places
   autocomplete .pac-container is appended to <body> with the same
   default z-index — it would render behind the modal and the
   dropdown wouldn't appear. Bump it above the overlay. */
.pac-container {
  z-index: 1001 !important;
}

/* When the Places API rejects the key (referrer block, billing, quota),
   Google force-stamps a tiled red error icon as the input's background
   and adds `disabled` to the element — the input becomes uneditable
   with broken-looking ! icons across it. Suppress the cosmetic damage
   so the form still looks usable; the submit handler treats the
   address as freeform when Places isn't available. */
input.gm-err-autocomplete {
  background-image: none !important;
}
.book-demo-overlay.open { opacity: 1; pointer-events: auto; }
.book-demo-modal {
  position: relative; background: #fff;
  width: 100%; max-width: 600px; max-height: calc(100vh - 40px);
  border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  transform: translateY(20px) scale(0.97);
  transition: transform .3s var(--ease);
}
.book-demo-overlay.open .book-demo-modal { transform: none; }
.book-demo-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg-soft); border: 0; cursor: pointer;
  font-size: 1.4rem; color: var(--kiey-indigo);
  display: grid; place-items: center;
  transition: background .2s, transform .2s;
}
.book-demo-close:hover { background: var(--border); transform: rotate(90deg); }
.book-demo-header { margin-bottom: 28px; }
.book-demo-header .kicker { margin-bottom: 12px; }
.book-demo-header h2 { font-family: 'Sora'; font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 10px; letter-spacing: -0.02em; line-height: 1.15; }
.book-demo-header p { color: var(--text-muted); font-size: 0.98rem; line-height: 1.55; }

.book-demo-form { display: flex; flex-direction: column; gap: 16px; }
.book-demo-form[hidden], .book-demo-header[hidden], .book-demo-success[hidden] { display: none !important; }
.bd-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 540px) { .bd-row { grid-template-columns: 1fr; } }
.bd-field { display: flex; flex-direction: column; gap: 6px; }
.bd-field label { font-size: 0.85rem; font-weight: 600; color: var(--kiey-indigo); }
.bd-field .req { color: #d9534f; margin-left: 2px; }
.bd-field input, .bd-field textarea {
  width: 100%; padding: 10px 14px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px;
  font-family: inherit; font-size: 0.95rem; color: #061D47; font-weight: 600;
  transition: border-color .15s, background .15s;
}
.bd-field input:focus, .bd-field textarea:focus {
  outline: none; border-color: var(--kiey-cyan); background: #fff;
}
.bd-field textarea { resize: vertical; min-height: 70px; }
.bd-submit { width: 100%; margin-top: 6px; }
.bd-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.bd-note { font-size: 0.78rem; color: var(--text-muted); text-align: center; margin-top: 8px; }
.bd-error {
  padding: 10px 14px; border-radius: 10px;
  background: #fdecea; border: 1px solid #f5c6c0;
  color: #a02627; font-size: 0.88rem; line-height: 1.45;
  margin-bottom: 4px;
}
.bd-error a { color: #a02627; font-weight: 700; text-decoration: underline; }

.book-demo-success { text-align: center; padding: 20px 0; }
.bd-success-icon {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 20px;
  background: var(--kiey-gradient); display: grid; place-items: center;
  animation: bdPop .5s var(--ease);
}
.bd-success-icon svg { width: 36px; height: 36px; color: #fff; }
@keyframes bdPop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.book-demo-success h3 { font-family: 'Sora'; font-size: 1.5rem; margin-bottom: 10px; color: var(--kiey-indigo); }
.book-demo-success p { color: var(--text-muted); margin-bottom: 24px; }

/* ----- AI Chat widget (legacy, safe to remove) ----- */
.ai-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 90;
  display: flex; align-items: center; gap: 10px;
  background: var(--kiey-indigo); color: #fff;
  padding: 14px 20px 14px 14px; border-radius: 999px; border: 0; cursor: pointer;
  box-shadow: 0 20px 50px -10px rgba(23,11,53,0.5);
  font-family: inherit; font-weight: 600; font-size: 0.95rem;
  transition: transform .2s var(--ease);
}
.ai-fab:hover { transform: translateY(-3px); }
.ai-fab .fab-orb {
  width: 36px; height: 36px; border-radius: 50%; background: var(--kiey-gradient);
  display: grid; place-items: center; font-size: 1.05rem;
  box-shadow: 0 0 20px rgba(140,198,62,0.5);
  animation: core-pulse 3s ease-in-out infinite;
}
.ai-fab .fab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--kiey-green); }

.ai-chat {
  position: fixed; bottom: 100px; right: 24px; z-index: 91;
  width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 140px));
  background: #fff; border-radius: 24px; overflow: hidden;
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(20px) scale(0.96); pointer-events: none;
  transition: all .3s var(--ease);
}
.ai-chat.open { opacity: 1; transform: none; pointer-events: auto; }
.ai-chat-head {
  padding: 18px 20px; background: linear-gradient(135deg, #0b0520 0%, #1a0f3f 100%);
  color: #fff; display: flex; align-items: center; gap: 12px;
}
.ai-chat-head .fab-orb { width: 38px; height: 38px; border-radius: 50%; background: var(--kiey-gradient); display: grid; place-items: center; }
.ai-chat-head h4 { color: #fff; font-size: 1rem; line-height: 1.2; margin: 0; }
.ai-chat-head small { color: rgba(255,255,255,0.6); font-size: 0.78rem; }
.ai-chat-close { margin-left: auto; background: transparent; border: 0; color: #fff; cursor: pointer; padding: 6px; opacity: 0.7; font-size: 1.2rem; }
.ai-chat-close:hover { opacity: 1; }
.ai-chat-body { flex: 1; padding: 16px; overflow-y: auto; background: linear-gradient(180deg, var(--bg-soft) 0%, #fff 100%); display: flex; flex-direction: column; gap: 10px; }
.ai-msg { padding: 10px 14px; border-radius: 16px; font-size: 0.92rem; max-width: 85%; line-height: 1.5; animation: pop .3s var(--ease); }
.ai-msg.ai { background: #fff; border: 1px solid var(--border); align-self: flex-start; border-bottom-left-radius: 4px; color: var(--kiey-indigo); }
.ai-msg.user { background: var(--kiey-gradient); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.ai-suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px; }
.ai-suggestion { padding: 7px 12px; background: #fff; border: 1px solid var(--border); border-radius: 999px; font-size: 0.8rem; cursor: pointer; color: var(--kiey-indigo); font-family: inherit; transition: all .2s; }
.ai-suggestion:hover { background: var(--kiey-gradient-soft); border-color: var(--kiey-cyan); }
.ai-chat-input {
  display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); background: #fff;
}
.ai-chat-input input {
  flex: 1; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--border);
  font-family: inherit; font-size: 0.92rem; outline: none;
}
.ai-chat-input input:focus { border-color: var(--kiey-cyan); }
.ai-chat-input button {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--kiey-gradient); color: #fff; display: grid; place-items: center;
}
.ai-chat-input button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ----- Blog / long-form body ----- */
.blog-body { font-size: 1.05rem; line-height: 1.75; color: var(--text); }
.blog-body p { margin: 0 0 1.1em; }
.blog-body p:last-child { margin-bottom: 0; }
.blog-body h2 {
  font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem); letter-spacing: -0.02em;
  color: var(--kiey-indigo);
  margin: 2em 0 0.6em;
}
.blog-body h3 { font-family: 'Sora', sans-serif; font-weight: 700; margin: 1.6em 0 0.5em; color: var(--kiey-indigo); }
.blog-body em { font-style: italic; }
.blog-body a { color: var(--kiey-cyan-dark); text-decoration: underline; }

/* ----- Scroll reveal ----- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ----- Responsive ----- */
@media (max-width: 1100px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .nav.menu-open .nav-links, .nav.menu-open .nav-cta {
    display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    background: #fff; padding: 20px; gap: 10px; border-bottom: 1px solid var(--border);
  }
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 40px; }
  .hero-cta { justify-content: center; }
  .hero-visual { min-height: 460px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .bento, .features-grid, .steps-grid { grid-template-columns: 1fr; }
  .audience-grid, .audience-grid.reverse { grid-template-columns: 1fr; }
  .audience-grid.reverse .audience-copy { order: 1; }
  .audience-grid.reverse .audience-testimonial { order: 2; }
  .ai-hero-inner { grid-template-columns: 1fr; }
  .ai-orbit { max-width: 300px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .ai-chat { right: 12px; bottom: 88px; }
  .ai-fab { right: 12px; bottom: 12px; padding: 12px 16px 12px 12px; font-size: 0.9rem; }
  .ai-fab span.fab-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}