/* ==========================================================
       AI InteleKt — Single‑file landing page for CLV
       ----------------------------------------------------------
       ✳ HOW TO BRAND THIS QUICKLY
       1) Replace the HEX values below with the *exact* AI InteleKt site colors.
          I've pre‑named variables to mirror typical brand hues seen on your site
          (blue/orange + supporting accents). You can add/remove easily.
       2) Optional: if you already have a CSS tokens file, just paste its :root
          block here and keep the variable names consistent.
       ========================================================== */

:root {
  /* Primary Brand */
  --ai-blue-700: #1e3a8a;
  /* deep brand blue */
  --ai-blue-500: #2563eb;
  /* primary link/cta */
  --ai-sky-400: #035478;
  /* accent cyan */
  --ai-cyan-400: #025b69;
  /* neon cyan accent */

  /* Secondary Brand */
  --ai-orange-500: #f97316;
  /* bright orange */
  --ai-amber-500: #f59e0b;
  /* amber highlight */
  --ai-purple-600: #7c3aed;
  /* accent purple */
  --ai-indigo-600: #2f27bf;
  /* indigo accent */
  --ai-teal-500: #00897a;
  /* teal accent */

  /* Neutrals */
  --ai-navy-900: #0b1220;
  /* near-black navy */
  --ai-slate-800: #0f172a;
  /* slate for panels */
  --ai-slate-600: #475569;
  --ai-slate-400: #4b6385;
  --ai-slate-200: #e2e8f0;
  --ai-white: #ffffff;
  --ai-black: #000000;

  /* Layout tokens */
  --radius-2xl: 1.25rem;
  --radius-xl: 1rem;
  --radius-lg: 0.75rem;
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, .25);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, .18);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, .12);
  --container: 1200px;
}

/* Base Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--ai-white);
  background: var(--ai-navy-900);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--ai-sky-400);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #ffffff !important;
}

.container {
  max-width: var(--container) !important;
  margin: 0 auto;
  padding: 0 24px;
}
.cta-red{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff1100, #ffffff);
    color: var(--ai-black);
    font-weight: 800;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}
/* ----------------------------------------------------------
       Animated Background using *all* brand colors
       ---------------------------------------------------------- */
.bg-wrap {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: radial-gradient(1200px 600px at 80% -10%, var(--ai-indigo-600), transparent 60%),
    radial-gradient(800px 400px at 10% 20%, var(--ai-orange-500), transparent 55%),
    radial-gradient(1000px 500px at 90% 70%, var(--ai-teal-500), transparent 60%),
    radial-gradient(900px 450px at 25% 80%, var(--ai-purple-600), transparent 60%),
    radial-gradient(1200px 600px at 50% 50%, var(--ai-blue-700), transparent 70%);
  filter: saturate(1.05) contrast(1.05);
}

.bg-noise {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  opacity: .08;
  mix-blend-mode: overlay;
  background-image: url('data:image/svg+xml;utf8,\
        <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">\
          <filter id="n">\
            <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/>\
            <feColorMatrix type="saturate" values="0"/>\
          </filter>\
          <rect width="100%" height="100%" filter="url(%23n)" opacity="0.4"/>\
        </svg>');
  background-size: 300px 300px;
  animation: drift 40s linear infinite;
}

.chip {
  color: #ffffff;
}

.bg-sheen {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  opacity: .35;
  background: conic-gradient(from 180deg at 50% 50%,
      var(--ai-blue-500), var(--ai-sky-400), var(--ai-cyan-400), var(--ai-teal-500),
      var(--ai-indigo-600), var(--ai-purple-600), var(--ai-orange-500), var(--ai-amber-500), var(--ai-blue-500));
  filter: blur(72px);
  animation: rotate 30s linear infinite;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes drift {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(5%, -3%);
  }

  100% {
    transform: translate(0, 0);
  }
}

/* ----------------------------------------------------------
       Header
       ---------------------------------------------------------- */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: color-mix(in oklab, var(--ai-navy-900) 72%, black 28%);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}

.brand {
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  letter-spacing: .2px;
}

.brand .dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--ai-orange-500);
  box-shadow: 0 0 0 6px rgba(249, 115, 22, .15);
}

.nav a {
  font-weight: 600;
  opacity: .9;
}

.nav .cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f88412, #ffffff);
  color: var(--ai-black);
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.nav .cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  transition: .25s ease;
}

input::placeholder {
  color: #999 !important;
  /* Change this to your desired color */
  opacity: 1;
  /* Ensures the color isn't faded */
}

.quote-box {
  max-width: 600px;
  padding: 30px;
  font-size: 1rem;
  line-height: 1.6;
  border-radius: 8px;
  position: relative;
  color: #ffffff;
}

.quote-box::before {
  content: "\201C";
  font-size: 3rem;
  color: #f97316;
  position: absolute;
  top: 10px;
  left: 25px;
}

.quote-box::after {
  content: "\201D";
  font-size: 3rem;
  color: #f97316;
  position: absolute;
  bottom: -10px;
  right: 33px;
}

.quote-box2 {
  max-width: 600px;
  padding: 30px;
  font-size: 1rem;
  line-height: 1.6;
  border-radius: 8px;
  position: relative;
  color: #ffffff;
}

.quote-box2::before {
  content: "\201C";
  font-size: 3rem;
  color: #f97316;
  position: absolute;
  top: 10px;
  left: 23px;
}

.quote-box2::after {
  content: "\201D";
  font-size: 3rem;
  color: #f97316;
  position: absolute;
  bottom: -10px;
  right: 90px;
}

.quote-box3 {
  max-width: 600px;
  padding: 30px;
  font-size: 1rem;
  line-height: 1.6;
  border-radius: 8px;
  position: relative;
  color: #ffffff;
}

.quote-box3::before {
  content: "\201C";
  font-size: 3rem;
  color: #f97316;
  position: absolute;
  top: 10px;
  left: 25px;
}

.quote-box3::after {
  content: "\201D";
  font-size: 3rem;
  color: #f97316;
  position: absolute;
  bottom: -10px;
  right: 109px;
}

.quote-box4 {
  max-width: 600px;
  padding: 30px;
  font-size: 1rem;
  line-height: 1.6;
  border-radius: 8px;
  position: relative;
  color: #ffffff;
}

.quote-box4::before {
  content: "\201C";
  font-size: 3rem;
  color: #f97316;
  position: absolute;
  top: 10px;
  left: 25px;
}

.quote-box4::after {
  content: "\201D";
  font-size: 3rem;
  color: #f97316;
  position: absolute;
  bottom: -10px;
  right: 50px;
}

/* Title Bar */
.title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  margin-top: 80px;
}

h1 {
  font-size: clamp(1.8rem, 3vw + 1rem, 3rem);
  line-height: 1.05;
  letter-spacing: .6px;
  margin: 0
}

.sub {
  opacity: .9;
  max-width: 820px
}

/* Video Grid */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px
}

@media (max-width:1100px) {
  .video-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

@media (max-width:820px) {
  .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media (max-width:520px) {
  .video-grid {
    grid-template-columns: 1fr
  }
}

.video-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(500px 200px at 70% 10%, rgba(34, 211, 238, .18), transparent 60%);
  mix-blend-mode: screen
}

.play {
  position: absolute;
  inset: auto auto 12px 12px;
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .35);
  background: linear-gradient(90deg, var(--ai-orange-500), var(--ai-amber-500))
}

.play::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 14px solid #071018;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 3px
}

.video-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px
}

.video-title {
  font-weight: 600;
  line-height: 1.2;
}

.tag {
  font-size: .75rem;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .08)
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(3px);
  z-index: 60
}

.modal.open {
  display: flex
}

.modal-card {
  position: relative;
  width: min(100% - 32px, 980px);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02))
}

.modal-aspect {
  position: relative;
  aspect-ratio: 16/9
}

.modal-aspect iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 6px
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 900;
  background: linear-gradient(90deg, var(--ai-orange-500), var(--ai-amber-500));
  color: #071018;
  box-shadow: 0 8px 18px rgba(245, 158, 11, .35)
}

.close:focus {
  outline: 2px solid var(--ai-sky-400)
}

/* Helper button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 900;
  border: 1px solid var(--border-strong);
  background: linear-gradient(90deg, #f59e0b, #f59e0b);
  color: #071018;
  box-shadow: 0 10px 22px rgba(245, 158, 11, .35)
}

/* ----------------------------------------------------------
       Hero
       ---------------------------------------------------------- */
.hero {
  position: relative;
  padding: 96px 0 48px;
  text-align: center;
}

.hero h1 {
  font-size: clamp(2.2rem, 4vw + 1rem, 4.6rem);
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.02em;
}

.hero p {
  font-size: clamp(1.05rem, 1.2vw + .6rem, 1.25rem);
  opacity: .9;
  margin: 16px auto 28px;
  max-width: 820px;
}

.hero-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 99px;
  font-weight: 800;
  border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(90deg, #f88412, #ffffff);
  color: #000000;
  box-shadow: var(--shadow-sm);
  font-size: 18px;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  transition: .25s ease;
}

.btn.secondary {
  background: linear-gradient(90deg, #f88412, #ffffff);
  color: var(--ai-black);
}

.meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 40px;
}

.meta .tile {
  padding: 18px 16px;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: var(--shadow-sm);
}

.meta .tile h3 {
  margin: 0;
  font-size: clamp(1.6rem, 2.3vw + .6rem, 2.4rem);
}

.meta .tile span {
  display: block;
  opacity: .8;
  font-weight: 600;
  margin-top: 6px;
}

/* ----------------------------------------------------------
       Strip showing *all* background colors in use
       ---------------------------------------------------------- */
.palette {
  margin: 48px auto 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(255, 255, 255, .08);
}

.swatches {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
}

.swatch {
  aspect-ratio: 5/1;
}

.sw1 {
  background: var(--ai-blue-700);
}

.sw2 {
  background: var(--ai-blue-500);
}

.sw3 {
  background: var(--ai-sky-400);
}

.sw4 {
  background: var(--ai-cyan-400);
}

.sw5 {
  background: var(--ai-teal-500);
}

.sw6 {
  background: var(--ai-indigo-600);
}

.sw7 {
  background: var(--ai-purple-600);
}

.sw8 {
  background: var(--ai-orange-500);
}

.sw9 {
  background: var(--ai-amber-500);
}

.palette .legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: rgba(0, 0, 0, .35);
  font-size: 12px;
}

.legend code {
  background: rgba(255, 255, 255, .06);
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .12);
}

/* ----------------------------------------------------------
       Feature Sections
       ---------------------------------------------------------- */
section {
  padding: 64px 0;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.card {
  position: relative;
  border-radius: var(--radius-2xl);
  padding: 22px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card .glow {
  position: absolute;
  inset: -40%;
  background: radial-gradient(400px 160px at 10% 0%, var(--ai-sky-400), transparent 60%);
  opacity: .15;
  filter: blur(20px);
}

.card h3 {
  margin: 0 0 8px;
  font-size: 1.3rem;
}

.card p {
  margin: 0;
  color: var(--ai-slate-200);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .08);
}

.two-col {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items: center;
}

.panel {
  border-radius: var(--radius-2xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: var(--shadow-md);
  padding: 22px;
}

.list {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.list li {
  list-style: none;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 12px 14px;
}

/* ----------------------------------------------------------
       Logos / Integrations (placeholder dots)
       ---------------------------------------------------------- */
.logos {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  opacity: .9;
}

.logo {
  aspect-ratio: 5 / 2;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .04);
  display: grid;
  place-items: center;
  font-size: .9rem;
}

/* ----------------------------------------------------------
       Footer
       ---------------------------------------------------------- */
footer {
  padding: 20px 0 20px;
  color: var(--ai-slate-200);
  background: linear-gradient(to top, rgba(0, 0, 0, .45), transparent);
  border-top: 1px solid rgb(255 255 255 / 36%);
}

.footgrid {
  display: grid;
  gap: 22px;
  grid-template-columns: 34.2fr 13.8fr 0.8fr;
}

.footgrid h4 {
  margin: 0 0 10px;
  color: var(--ai-white);
}

.subtle {
  color: #ffffff;
  font-size: .95rem;
}

/* ----------------------------------------------------------
       Responsive tweaks
       ---------------------------------------------------------- */
@media (max-width: 980px) {
  .card-grid {
    grid-template-columns: 1fr 1fr;
  }

  .two-col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .meta {
    grid-template-columns: 1fr 1fr;
  }

  .logos {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .card-grid {
    grid-template-columns: 1fr;
  }
}

/* Head + sections */
section {
  padding: 48px 0
}

.hero {
  position: relative;
  padding: 56px 0 24px;
  text-align: center
}

.hero h1 {
  font-size: clamp(2rem, 3.4vw + 1rem, 3.6rem);
  line-height: 1.08;
  margin: 0;
  letter-spacing: -.02em
}

.hero p {
  font-size: clamp(1.02rem, 1.1vw + .6rem, 1.2rem);
  opacity: .9;
  margin: 12px auto 0;
  max-width: 820px
}

.hero .kicker {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  font-size: 1rem
}
.kicker {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  font-size: 1rem
}
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 18px
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px
}

@media (max-width:980px) {
  .kpi-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width:640px) {
  .kpi-grid {
    grid-template-columns: 1fr
  }
}

.kpi-card {
  position: relative;
  border-radius: var(--radius-2xl);
  padding: 22px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: var(--shadow-sm);
  overflow: hidden
}

.kpi-card .glow {
  position: absolute;
  inset: -40%;
  background: radial-gradient(400px 160px at 10% 0%, var(--ai-sky-400), transparent 60%);
  opacity: .15;
  filter: blur(20px)
}

.kpi-card h3 {
  margin: 0 0 6px;
  font-size: 1.15rem
}

.kpi-card .lead {
  margin: 6px 0 12px
}

/* Single collapsible per card */
.kpi-details {
  margin-top: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  background: rgba(255, 255, 255, .05)
}

.kpi-details summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 12px;
  font-weight: 800;
  border-bottom: 1px solid rgba(255, 255, 255, .12)
}

.kpi-details summary::-webkit-details-marker {
  display: none
}

.kpi-details[open] summary {
  background: rgba(255, 255, 255, .06)
}

.kpi-sections {
  padding: 12px 12px 14px;
  display: grid;
  gap: 12px
}

.kpi-sections h4 {
  margin: 0 0 4px;
  font-size: 1rem
}

.def-box {
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15)
}

textarea::placeholder {
  color: #ffffff;
  opacity: 1;
}

.form-control::placeholder {
  color: #ffffff;
  opacity: 1;
}
/* ================= Affiliate ============================== */
.text-slate-500,.text-slate-600,.text-slate-700,.text-slate-800 {
    color: #ffffff !important;
}
.border-slate-200 {
    border: 1px solid rgba(255, 255, 255, .1) !important;
    box-shadow: var(--shadow-md) !important;
}
h1.text-4xl.font-extrabold.tracking-tight.text-slate-900.sm\:text-5xl.leading-tight {
    text-align: left;
}
p.mt-5.text-lg.text-slate-600.max-w-2xl {
    text-align: left;
}
.lg\:col-span-7 {
    text-align: left;
}
.cta{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f88412, #ffffff);
    color: var(--ai-black);
    font-weight: 800;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}
p.text-sm.text-slate-700 {
    line-height: 28px;
}
.py-16 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}
.bg-slate-50 {
    background-color: rgb(248 250 252 / 11%) !important;
}
.text-brand-700 {
    color: #ffffff !important;
}
.inline-flex.items-center.rounded-lg.bg-brand-50.text-brand-700.px-2.py-1.text-xs.font-semibold {
    background-color: rgb(248 250 252 / 11%) !important;
    color: #ffffff;
}
.text-sm.font-semibold.text-brand-700 {
    color: #f97316 !important;
}
/* ================= Affiliate End ============================== */


/* ================= FAQ ============================== */
#faqs-landing .head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

#faqs-landing h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw + 1rem, 3rem);
  letter-spacing: -0.02em;
}

#faqs-landing .sub {
  color: var(--ai-slate-200, #e2e8f0);
  opacity: .95;
}

#faqs-landing .acc {
  display: grid;
  gap: 12px;
}

#faqs-landing .item {
  position: relative;
  border-radius: var(--radius-2xl, 20px);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
  overflow: hidden;
  isolation: isolate;
}

#faqs-landing .item::before {
  content: "";
  position: absolute;
  inset: -40% -40% auto -40%;
  height: 160px;
  background: radial-gradient(420px 180px at 10% 0%, var(--ai-sky-400, #38bdf8), transparent 60%);
  filter: blur(22px);
  opacity: .15;
  pointer-events: none;
}

#faqs-landing .headbtn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: transparent;
  color: #fff;
  text-align: left;
  border: none;
  cursor: pointer;
  font-weight: 800;
}

#faqs-landing .q {
  display: flex;
  align-items: center;
  gap: 10px;
}

#faqs-landing .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .75rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .08);
}

#faqs-landing .caret {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  background: linear-gradient(90deg, var(--ai-orange-500, #f97316), var(--ai-amber-500, #f59e0b));
  color: #071018;
  font-weight: 900;
}

#faqs-landing .caret span {
  display: inline-block;
  transform: rotate(0deg);
  transition: transform .25s ease;
}

#faqs-landing .panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}

#faqs-landing .panel-inner {
  padding: 0 18px 16px;
  color: var(--ai-slate-200, #e2e8f0);
}

@media (max-width:640px) {
  #faqs-landing .headbtn {
    padding: 14px 16px;
  }
}

/* ================= Pricing ============================== */
/* Header */
#pricing .head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

#pricing .head h2 {
  margin: 0;
  font-size: 2rem;
  letter-spacing: -0.02em;
}

#pricing .sub {
  color: var(--ai-slate-200, #e2e8f0);
  opacity: .95;
}

/* Grid */
#pricing .grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 980px) {
  #pricing .grid {
    grid-template-columns: 1fr;
  }
}

/* Glassy cards (match v1 panels) */
#pricing .card {
  position: relative;
  border-radius: var(--radius-2xl, 20px);
  padding: 22px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
  overflow: hidden;
  isolation: isolate;
}

#pricing .card::before {
  content: "";
  position: absolute;
  inset: -50% -50% auto -50%;
  height: 180px;
  background: radial-gradient(440px 180px at 10% 0%, var(--ai-sky-400, #38bdf8), transparent 60%);
  filter: blur(24px);
  opacity: .18;
  pointer-events: none;
}

/* Accents */
#pricing .kicker {
  display: inline-block;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: .9rem;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .08);
}

#pricing .price {
  margin: 6px 0 10px;
  font-weight: 900;
  line-height: 1.1;
  font-size: clamp(1.6rem, 1.4rem + 1.5vw, 2.4rem);
  background: linear-gradient(90deg, var(--ai-orange-500, #f97316), var(--ai-amber-500, #f59e0b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Lists */
#pricing ul {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 10px;
}

#pricing li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

#pricing li::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ai-orange-500, #f97316), var(--ai-amber-500, #f59e0b));
  box-shadow: 0 0 0 6px rgba(249, 115, 22, .12);
  margin-top: 6px;
}

/* Optional bottom border glow */
#pricing .card .underline {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ai-orange-500, #f97316), var(--ai-amber-500, #f59e0b));
  opacity: .65;
}

/* ==========================================================
   AI InteleKt — Responsive Add-Ons (append to end of css.css)
   NOTE: No existing rules modified; only overrides added.
   Breakpoints: 1280, 1100, 980, 820, 640, 520, 400
 ========================================================== */

/* 1) Global container + spacing tweaks */
@media (max-width:1280px) {
  .container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

@media (max-width:820px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width:520px) {
  section {
    padding: 40px 0;
  }

  /* slightly tighter on very small screens */
}

/* 2) Header & nav: allow wrapping + comfortable tap targets */
@media (max-width:980px) {
  .nav {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .brand {
    font-size: 14px;
  }

  .nav>nav {
    width: 100%;
    display: flex !important;
    justify-content: center;
    gap: 12px !important;
    flex-wrap: wrap;
  }

  .nav .cta {
    padding: 10px 14px;
  }
}

@media (max-width:520px) {
  .nav>nav {
    gap: 10px !important;
  }

  .nav .cta {
    width: auto;
    justify-content: center;
  }
}

/* 3) Hero: headings scale; buttons stack nicely */
@media (max-width:980px) {
  .hero h1 {
    font-size: clamp(1.9rem, 5.6vw, 2.6rem);
  }

  .hero p {
    font-size: 1rem;
  }
}

@media (max-width:640px) {
  .hero-cta {
    gap: 10px;
  }

  .hero-cta .btn {
    width: 100%;
  }
}

/* 4) Metric tiles: 4 → 2 → 1 columns */
@media (max-width:980px) {
  .meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:520px) {
  .meta {
    grid-template-columns: 1fr;
  }
}

/* 5) Two-column sections: already collapse at 980 in base CSS; tighten gaps on small screens */
@media (max-width:980px) {
  .two-col {
    gap: 20px;
  }
}

@media (max-width:640px) {
  .two-col {
    gap: 16px;
  }
}

/* 6) Cards & grids: graceful scaling */
@media (max-width:1100px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:640px) {
  .card-grid {
    grid-template-columns: 1fr;
  }

  .card {
    padding: 18px;
  }
}

/* 7) “How CLV works” vertical slider: comfortable height & buttons on mobile */
@media (max-width:820px) {
  #how-left-slider .vviewport {
    height: 260px !important;
  }
}

@media (max-width:640px) {
  #how-left-slider .vviewport {
    height: 220px !important;
  }

  #how-left-slider .vslide {
    min-height: 56px;
    padding: 8px 10px;
  }

  #how-left-slider .vbtn {
    width: 36px;
    height: 36px;
  }
}

@media (max-width:400px) {
  #how-left-slider .vviewport {
    height: 200px !important;
  }

  #how-left-slider .vbtn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }
}

/* 8) Logos / Integrations: fit more tightly on small screens */
@media (max-width:980px) {
  .logos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width:640px) {
  .logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:400px) {
  .logos {
    grid-template-columns: 1fr;
  }
}

/* 9) Pricing: ensure 2 → 1 columns even if inline styles exist */
@media (max-width:980px) {
  #pricing .grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width:640px) {
  #pricing .card {
    padding: 18px;
  }

  #pricing .price {
    font-size: clamp(1.4rem, 1.1rem + 2.5vw, 1.9rem);
  }
}

/* 10) Contact/Form section: stack cleanly and keep inputs tappable */
@media (max-width:980px) {
  .form-and-offer {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width:640px) {
  .form-and-offer {
    padding: 36px 18px !important;
    gap: 18px !important;
    margin: 0px 20px !important;
  }

  .form-and-offer form {
    grid-template-columns: 1fr !important;
  }

  .form-and-offer input,
  .form-and-offer select,
  .form-and-offer textarea {
    font-size: 16px;
  }

  /* avoid iOS zoom */
  .form-and-offer .btn {
    width: 100%;
    justify-content: center;
  }
}

/* 11) Modal/video: keep within viewport */
@media (max-width:820px) {
  .modal-card {
    width: calc(100% - 24px);
  }
}

/* 12) Footer: 3 cols → 2 → 1 */
@media (max-width:980px) {
  .footgrid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width:640px) {
  .footgrid {
    grid-template-columns: 1fr;
  }
}

/* 13) Images & embedded media always fluid */
img,
video,
canvas,
iframe {
  max-width: 100%;
  height: auto;
}

/* 14) Respect users who prefer reduced motion (accessibility) */
@media (prefers-reduced-motion: reduce) {

  .bg-sheen,
  .bg-noise {
    animation: none !important;
  }

  .modal,
  .vtrack {
    transition: none !important;
  }
}

/* 15) Safe-area support for iOS notches */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

header {
  padding-top: max(0px, var(--safe-top));
}

footer {
  padding-bottom: calc(20px + var(--safe-bottom));
}

@media only screen and (max-width: 640px)  
{
h2.text-4xl.font-extrabold.tracking-tight.text-slate-900.sm\:text-5xl.leading-tight {
    text-align: center;
}
.hero .kicker {
    text-align: center;
}
.relative.mx-auto.max-w-7xl.px-4.sm\:px-6.lg\:px-8.pt-16 {
    padding-top: 2rem;
}
.cta-red{
   text-align: center;
}
}

@media only screen and (max-width: 479px)  
{
h2.text-4xl.font-extrabold.tracking-tight.text-slate-900.sm\:text-5xl.leading-tight {
    text-align: center;
}
.hero .kicker {
    text-align: center;
}
.relative.mx-auto.max-w-7xl.px-4.sm\:px-6.lg\:px-8.pt-16 {
    padding-top: 2rem;
}
.cta-red{
   text-align: center;
}
}