/* ============================================================
   IRIZPRO — Enterprise AI Website
   Stack: static HTML / CSS / JS (Hostinger-ready)
   Palette from logo: indigo #332E87 · green #00A14B · blue #1B9DD9
   ============================================================ */

:root {
  --indigo: #332e87;
  --indigo-dark: #232060;
  --indigo-deep: #171540;
  --green: #00a14b;
  --green-dark: #008a40;
  --blue: #1b9dd9;
  --ink: #1d2130;
  --gray: #5a5f6e;
  --gray-light: #9aa0ad;
  --line: #e6e8ee;
  --bg-soft: #f5f6fa;
  --white: #ffffff;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(23, 21, 64, 0.08);
  --shadow-lg: 0 24px 60px rgba(23, 21, 64, 0.16);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }

/* branded "i" cursor (site-wide, desktop; see cursor.js) */
html.cmos-cursor-on, html.cmos-cursor-on * { cursor: none !important; }
.cmos-cursor { position: fixed; inset: 0; z-index: 99999; pointer-events: none; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

.container { width: min(1200px, 92%); margin: 0 auto; }

/* ---------- typography ---------- */
h1, h2, h3, h4 { font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--green); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--green); }

.section-title { font-size: clamp(30px, 4vw, 46px); color: var(--ink); }
.section-sub { max-width: 640px; margin-top: 16px; color: var(--gray); font-size: 17px; }

.section { padding: 96px 0; }
.section.tinted { background: var(--bg-soft); }
.section-head { margin-bottom: 56px; }
.section-head.split { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border-radius: 999px;
  font-size: 15px; font-weight: 700; border: 2px solid transparent;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s, color 0.3s, border-color 0.3s;
  white-space: nowrap;
}
.btn svg { transition: transform 0.3s var(--ease); }
.btn:hover svg { transform: translateX(5px); }

.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 161, 75, 0.35); }

.btn-outline { border-color: rgba(255, 255, 255, 0.55); color: #fff; background: transparent; }
.btn-outline:hover { background: #fff; color: var(--indigo); transform: translateY(-2px); }

.btn-dark { background: var(--indigo); color: #fff; }
.btn-dark:hover { background: var(--indigo-dark); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(51, 46, 135, 0.35); }

.btn-ghost { border-color: var(--indigo); color: var(--indigo); }
.btn-ghost:hover { background: var(--indigo); color: #fff; transform: translateY(-2px); }

.text-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--green); font-size: 15px;
}
.text-link svg { transition: transform 0.3s var(--ease); }
.text-link:hover svg { transform: translateX(5px); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease), padding 0.35s var(--ease);
  padding: 18px 0;
}
.site-header.scrolled,
.site-header.solid {
  background: #fff;
  box-shadow: 0 6px 24px rgba(23, 21, 64, 0.08);
  padding: 10px 0;
}

/* flex-start + margin-left:auto on .main-nav (below) keeps the logo pinned
   left and groups nav+CTA+button tightly on the right — space-between here
   would spread its *leftover* room across every gap instead of just the
   one before the group, growing as those items shrink. */
.header-inner { display: flex; align-items: center; justify-content: flex-start; gap: 14px; }

.brand { flex-shrink: 0; }
.brand img { height: 46px; width: auto; transition: height 0.35s var(--ease); }
.site-header.scrolled .brand img { height: 40px; }
.brand .logo-dark { display: none; }
.site-header.scrolled .logo-light, .site-header.solid .logo-light { display: none; }
.site-header.scrolled .logo-dark, .site-header.solid .logo-dark { display: block; }
/* on dark hero pages the header starts transparent: show white logo */
.site-header.on-dark:not(.scrolled) .logo-light { display: block; }
.site-header.on-dark:not(.scrolled) .logo-dark { display: none; }

/* flex-shrink:0 — without it, the google button's flex-grow (below) can
   squeeze main-nav a hair under its natural content width, which doesn't
   overflow visibly but does wrap "About Us"/"Case Study" onto 2 lines
   inside their own link (no white-space:nowrap set) since flex still has
   to resolve to *some* width. Locking nav/logo/CTA to their natural size
   means only the button (which can afford to) ever gives up width. */
.main-nav { display: flex; align-items: center; gap: 0; margin-left: auto; flex-shrink: 0; }
.main-nav > li { position: relative; }
.main-nav > li > a {
  display: flex; align-items: center; gap: 5px;
  padding: 10px 6px; font-size: 13px; font-weight: 500;
  color: var(--ink); border-radius: 8px; transition: color 0.25s;
  white-space: nowrap;
}
.site-header.on-dark:not(.scrolled) .main-nav > li > a { color: rgba(255, 255, 255, 0.92); }
.main-nav > li > a:hover { color: var(--green); }
.main-nav > li > a .caret { transition: transform 0.3s var(--ease); }
.main-nav > li:hover > a .caret { transform: rotate(180deg); }
.main-nav > li > a.active { color: var(--green); }
/* AI Assistant nav item, filled accent pill, visible on every page (light + dark) */
.main-nav > li > a.nav-ai {
  background: linear-gradient(135deg, #00a14b, #1b9dd9);
  color: #fff !important; font-weight: 700; border: 0;
  box-shadow: 0 6px 16px rgba(0, 161, 75, 0.28);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), filter 0.25s;
}
.main-nav > li > a.nav-ai .ai-spark { color: #fff; transition: transform 0.3s var(--ease); }
.main-nav > li > a.nav-ai:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 9px 24px rgba(27, 157, 217, 0.42); }
.main-nav > li > a.nav-ai:hover .ai-spark { transform: rotate(18deg) scale(1.14); }

/* dropdown / mega menu */
.dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translate(-50%, 12px);
  min-width: 540px; background: #fff; border-radius: 16px;
  box-shadow: var(--shadow-lg); padding: 26px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.dropdown::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.main-nav > li:hover .dropdown,
.main-nav > li:focus-within .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}
.dropdown a {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px; border-radius: 12px; transition: background 0.25s;
}
.dropdown a:hover { background: var(--bg-soft); }
.dropdown .dd-icon {
  flex: 0 0 42px; height: 42px; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--indigo), var(--blue));
  color: #fff;
}
.dropdown a:nth-child(even) .dd-icon { background: linear-gradient(135deg, var(--green), var(--blue)); }
.dropdown strong { display: block; font-size: 15px; color: var(--ink); }
.dropdown span { font-size: 13px; color: var(--gray); line-height: 1.45; }

.header-cta { display: inline-flex; padding: 9px 18px; font-size: 13px; flex-shrink: 0; white-space: nowrap; }

/* Google "Add to Preferred Sources" button. Even a fairly generous width
   still wrapped its own text onto 2 lines on real devices (its internal
   iframe layout, not ours — we can't restyle the text directly, and our
   own automated testing doesn't reproduce this reliably, likely a font-
   metrics difference vs real mobile browsers). Give it as much room as the
   header can spare and hide it below where that room gets too tight.
   Google's script also sets width:100% inline on init, which would blow
   up the flex row — pin a size instead. */
.header-inner > [google-add-preferred-source-btn] { display: none; }

@media (min-width: 1280px) {
  /* .main-nav's margin-left:auto (above) would otherwise swallow all the
     header's spare width as blank space before the nav — cap it once the
     button is visible so that space goes into the button instead. */
  .main-nav { margin-left: 40px; }
  .header-inner > [google-add-preferred-source-btn] {
    display: block;
    flex: 1 1 260px;
    max-width: 280px;
    overflow: hidden;
    border-radius: 999px;
  }
}

/* hamburger */
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; padding: 8px; z-index: 1102;
}
.nav-toggle span {
  width: 26px; height: 2.5px; border-radius: 2px; background: var(--ink);
  transition: transform 0.35s var(--ease), opacity 0.25s;
}
.site-header.on-dark:not(.scrolled) .nav-toggle span { background: #fff; }
.nav-toggle.open span { background: var(--ink); }
.nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 92vh;
  display: flex; align-items: center;
  background: linear-gradient(140deg, var(--indigo-deep) 0%, var(--indigo-dark) 45%, var(--indigo) 100%);
  color: #fff; overflow: hidden; padding: 160px 0 110px;
}
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.45;
}
.hero::before { width: 560px; height: 560px; background: var(--blue); top: -180px; right: -120px; animation: float 9s ease-in-out infinite; }
.hero::after { width: 460px; height: 460px; background: var(--green); bottom: -200px; left: -140px; animation: float 11s ease-in-out infinite reverse; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-34px); } }

.hero-grid-lines {
  position: absolute; inset: 0; opacity: 0.07; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.6) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.6) 1px, transparent 1px);
  background-size: 64px 64px;
}

.hero-inner { position: relative; z-index: 2; max-width: 820px; }
.hero .eyebrow { color: #7fe0ab; }
.hero .eyebrow::before { background: #7fe0ab; }
.hero h1 { font-size: clamp(38px, 5.6vw, 68px); margin-bottom: 26px; }
.hero h1 .accent { color: transparent; background: linear-gradient(90deg, #35c97e, #4fc3f7); -webkit-background-clip: text; background-clip: text; }

/* vertical text rotator (eleks-style) */
.hero-rotator { display: block; height: 1.15em; overflow: hidden; clip-path: inset(0); }
.hero-rotator-track { display: flex; flex-direction: column; transition: transform 0.7s var(--ease); }
.hero-rotator-track .accent { display: block; height: 1.15em; line-height: 1.15; white-space: nowrap; }
.hero p { font-size: clamp(16px, 1.6vw, 19px); color: rgba(255, 255, 255, 0.82); max-width: 660px; margin-bottom: 40px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-badges { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 58px; }
.hero-badges .badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px); color: rgba(255, 255, 255, 0.9);
}
.hero-badges .badge svg { color: #35c97e; }

.scroll-cue {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 42px; border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 14px; z-index: 2;
}
.scroll-cue::after {
  content: ""; position: absolute; top: 7px; left: 50%; margin-left: -2px;
  width: 4px; height: 8px; border-radius: 3px; background: #fff;
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ============================================================
   HERO DECK (eleks-style expanding panel slider)
   ============================================================ */
.hero-deck { padding: 104px 0 56px; background: #fff; }
.deck-wrap { position: relative; width: min(1400px, 95%); margin: 0 auto; }
.deck { display: flex; gap: 14px; height: max(660px, calc(100vh - 130px)); }

.deck-panel {
  position: relative; border-radius: 18px; overflow: hidden; cursor: pointer;
  flex: 0.0001 1 84px; min-width: 0;
  transition: flex-grow 0.85s var(--ease);
  color: #fff; background: var(--indigo-deep);
}
.deck-panel.active { flex-grow: 1; cursor: default; }

.deck-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1.2s var(--ease); }
.deck-panel.active .deck-bg { transform: scale(1.04); }
.deck-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(75deg, rgba(13, 12, 38, 0.92) 0%, rgba(23, 21, 64, 0.72) 45%, rgba(23, 21, 64, 0.3) 100%); }
.deck-bg.b1 { background-image: url("../img/hero/hero-1.jpg"); }
.deck-bg.b2 { background-image: url("../img/hero/hero-4.jpg"); }
.deck-bg.b3 { background-image: url("../img/hero/hero-3.jpg"); }
.deck-bg.b4 { background-image: url("../img/hero/hero-2.jpg"); }

/* collapsed rail: circle, vertical label, plus button */
.panel-rail {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 26px 0; opacity: 1; transition: opacity 0.4s var(--ease);
}
.deck-panel.active .panel-rail { opacity: 0; pointer-events: none; display: none; }
.panel-rail .ring { width: 12px; height: 12px; border: 2px solid rgba(255,255,255,0.85); border-radius: 50%; flex: 0 0 auto; }
.panel-rail .v-label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 16px; font-weight: 600; letter-spacing: 0.04em; color: #fff; white-space: nowrap;
}
.panel-rail .plus {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.7);
  background: transparent; color: #fff; display: grid; place-items: center;
  transition: all 0.3s var(--ease); flex: 0 0 auto;
}
.deck-panel:hover .panel-rail .plus { background: #fff; color: var(--indigo); transform: rotate(90deg); }

/* expanded content */
.panel-tag {
  position: absolute; top: 26px; right: 30px; z-index: 4;
  display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600;
  opacity: 0; transition: opacity 0.5s var(--ease) 0.35s; white-space: nowrap;
}
.panel-tag .ring { width: 11px; height: 11px; border: 2px solid rgba(255,255,255,0.85); border-radius: 50%; }
.deck-panel.active .panel-tag { opacity: 1; }

.panel-content {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(26px, 3.6vw, 52px); max-width: 470px;
  opacity: 0; transform: translateY(22px); pointer-events: none;
  transition: opacity 0.6s var(--ease) 0.3s, transform 0.6s var(--ease) 0.3s;
}
.deck-panel.active .panel-content { opacity: 1; transform: none; pointer-events: auto; }
.panel-content .eyebrow { color: #7fe0ab; }
.panel-content .eyebrow::before { background: #7fe0ab; }
.deck-title { font-size: clamp(28px, 3.2vw, 48px); margin-bottom: 14px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 800; }
.deck-title .accent { color: transparent; background: linear-gradient(90deg, #35c97e, #4fc3f7); -webkit-background-clip: text; background-clip: text; }
.panel-content > p { color: rgba(255,255,255,0.85); font-size: clamp(14.5px, 1.2vw, 16.5px); line-height: 1.55; max-width: 460px; margin-bottom: 20px; }
.panel-cta { display: flex; gap: 14px; flex-wrap: wrap; }

.panel-divider { width: min(420px, 80%); height: 1px; background: rgba(255,255,255,0.35); margin: 18px 0 12px; }
.panel-awards-label { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.panel-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.panel-badges .badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22); color: rgba(255,255,255,0.92);
}
.panel-badges .badge svg { color: #35c97e; }

.deck-arrows {
  position: absolute; bottom: 26px; right: 28px; z-index: 5; display: flex; gap: 12px;
  opacity: 0; transition: opacity 0.5s var(--ease) 0.35s;
}
.deck-panel.active .deck-arrows { opacity: 1; }
.deck-arrows button {
  width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.7);
  background: transparent; color: #fff; display: grid; place-items: center;
  transition: all 0.3s var(--ease);
}
.deck-arrows button:hover { background: #fff; color: var(--indigo); transform: translateY(-2px); }

/* floating consultation widget — photo + text, floats over the right seam */
.consult-float {
  position: absolute; z-index: 6; top: 52%; right: 230px; transform: translateY(-50%);
  width: 312px; display: flex; align-items: stretch;
  background: #fff; color: var(--ink); border-radius: 16px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.cf-thumb { flex: 0 0 116px; background-size: cover; background-position: center; }
.cf-body { padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; }
.cf-body p { font-size: 15px; font-weight: 600; line-height: 1.38; margin-bottom: 10px; }
.cf-body a { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; color: var(--ink); font-size: 14.5px; }
.cf-body a svg { transition: transform 0.3s var(--ease); color: var(--green); }
.cf-body a:hover svg { transform: translate(3px, -3px); }

@media (max-width: 1200px) {
  .consult-float { position: static; transform: none; right: auto; top: auto; width: 100%; max-width: 360px; margin: 16px auto 0; }
}

@media (max-width: 920px) {
  .hero-deck { padding-top: 86px; }
  .deck { flex-direction: column; height: auto; gap: 12px; }
  .deck-panel { flex: none; height: 60px; transition: height 0.7s var(--ease); border-radius: 14px; }
  .deck-panel.active { height: min(620px, 82vh); }
  .panel-rail { flex-direction: row; padding: 0 20px; }
  .deck-panel.active .panel-rail { display: none !important; }
  .panel-rail .v-label { writing-mode: horizontal-tb; transform: none; }
  .panel-rail .plus { width: 38px; height: 38px; }
  .panel-content { justify-content: flex-end; padding-bottom: 90px; }
  .panel-divider { margin: 20px 0 12px; }
  .deck-arrows { left: 20px; bottom: 20px; }
  .panel-tag { top: 20px; right: auto; left: 20px; }
}

/* inner page hero (smaller) */
.page-hero {
  position: relative; padding: 190px 0 110px;
  background: linear-gradient(140deg, var(--indigo-deep) 0%, var(--indigo-dark) 50%, var(--indigo) 100%);
  color: #fff; overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%;
  background: var(--blue); filter: blur(100px); opacity: 0.4; top: -160px; right: -120px;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(34px, 4.6vw, 56px); max-width: 760px; margin-bottom: 20px; }
.page-hero p { color: rgba(255, 255, 255, 0.82); max-width: 640px; font-size: 18px; }
.page-hero .eyebrow { color: #7fe0ab; } .page-hero .eyebrow::before { background: #7fe0ab; }
.breadcrumbs { margin-top: 34px; font-size: 13.5px; color: rgba(255,255,255,0.6); display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumbs a:hover { color: #fff; }

/* ============================================================
   HIGHLIGHT SLIDER (eleks-style rotating cards)
   ============================================================ */
.slider-section { padding: 96px 0; background: var(--bg-soft); }
.slider { position: relative; }
.slider-track-wrap { overflow: hidden; border-radius: 22px; }
.slider-track { display: flex; transition: transform 0.65s var(--ease); }
.slide {
  flex: 0 0 100%; display: grid; grid-template-columns: 1.1fr 0.9fr; min-height: 420px;
  background: #fff; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow);
}
.slide-copy { padding: 60px 56px; display: flex; flex-direction: column; justify-content: center; }
.slide-copy .tag {
  align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--indigo);
  background: rgba(51, 46, 135, 0.08); padding: 7px 14px; border-radius: 999px; margin-bottom: 22px;
}
.slide-copy h3 { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 16px; }
.slide-copy p { color: var(--gray); margin-bottom: 28px; max-width: 480px; }
.slide-visual { position: relative; display: grid; place-items: center; color: #fff; overflow: hidden; }
.slide-visual.v1 { background: linear-gradient(135deg, var(--indigo), var(--blue)); }
.slide-visual.v2 { background: linear-gradient(135deg, var(--green), var(--blue)); }
.slide-visual.v3 { background: linear-gradient(135deg, var(--indigo-dark), var(--green)); }
.slide-visual.v4 { background: linear-gradient(135deg, var(--blue), var(--indigo)); }
.slide-visual::before {
  content: ""; position: absolute; inset: 0; opacity: 0.16;
  background-image: radial-gradient(rgba(255,255,255,0.8) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
}
.slide-visual svg { width: 130px; height: 130px; position: relative; z-index: 1; opacity: 0.95; }

.slider-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; }
.slider-dots { display: flex; gap: 10px; }
.slider-dots button {
  width: 10px; height: 10px; border-radius: 999px; border: 0;
  background: #c9cdd8; transition: width 0.35s var(--ease), background 0.3s;
}
.slider-dots button.active { width: 34px; background: var(--green); }
.slider-arrows { display: flex; gap: 12px; }
.slider-arrows button {
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--line);
  background: #fff; color: var(--indigo); display: grid; place-items: center;
  transition: all 0.3s var(--ease);
}
.slider-arrows button:hover { background: var(--indigo); border-color: var(--indigo); color: #fff; transform: translateY(-2px); }

/* ============================================================
   TRUST / INTRO SECTION
   ============================================================ */
.trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.trust-copy p { color: var(--gray); margin-bottom: 18px; font-size: 16.5px; }
.trust-points { margin-top: 28px; display: grid; gap: 16px; }
.trust-points li { display: flex; gap: 14px; align-items: flex-start; font-weight: 600; }
.trust-points .tick {
  flex: 0 0 26px; height: 26px; border-radius: 50%; margin-top: 1px;
  background: rgba(0, 161, 75, 0.12); color: var(--green);
  display: grid; place-items: center;
}
.trust-visual { position: relative; }
.trust-visual .panel {
  border-radius: 22px; padding: 44px;
  background: linear-gradient(140deg, var(--indigo-deep), var(--indigo));
  color: #fff; box-shadow: var(--shadow-lg);
}
.trust-visual .panel h3 { font-size: 22px; margin-bottom: 26px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pill-row span {
  font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.18);
}
.trust-visual .float-card {
  position: absolute; right: -26px; bottom: -30px;
  background: #fff; color: var(--ink); border-radius: 16px;
  box-shadow: var(--shadow-lg); padding: 20px 24px;
  display: flex; align-items: center; gap: 14px;
}
.trust-visual .float-card .num { font-size: 28px; font-weight: 800; color: var(--green); }
.trust-visual .float-card .lbl { font-size: 13px; color: var(--gray); max-width: 130px; line-height: 1.35; }

/* ============================================================
   CARDS (services / products)
   ============================================================ */
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.svc-card {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 36px 30px; overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s;
  display: flex; flex-direction: column;
}
.svc-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--green), var(--blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease);
}
.svc-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); border-color: transparent; }
.svc-card:hover::before { transform: scaleX(1); }

.svc-icon {
  width: 58px; height: 58px; border-radius: 14px; margin-bottom: 24px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--indigo), var(--blue));
  transition: transform 0.4s var(--ease);
}
.svc-card:nth-child(even) .svc-icon { background: linear-gradient(135deg, var(--green), var(--blue)); }
.svc-card:hover .svc-icon { transform: scale(1.08) rotate(-4deg); }
.svc-card h3 { font-size: 20px; margin-bottom: 12px; }
.svc-card p { color: var(--gray); font-size: 15px; flex: 1; margin-bottom: 22px; }

.product-card {
  position: relative; border-radius: var(--radius); padding: 38px 32px;
  background: var(--indigo-deep); color: #fff; overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  display: flex; flex-direction: column; min-height: 280px;
}
.product-card::after {
  content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%;
  right: -80px; bottom: -90px; filter: blur(10px); opacity: 0.55;
  background: radial-gradient(circle, var(--blue), transparent 70%);
  transition: transform 0.5s var(--ease);
}
.product-card:nth-child(2)::after { background: radial-gradient(circle, var(--green), transparent 70%); }
.product-card:nth-child(3)::after { background: radial-gradient(circle, #7c4dff, transparent 70%); }
.product-card:nth-child(4)::after { background: radial-gradient(circle, #00bcd4, transparent 70%); }
.product-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); }
.product-card:hover::after { transform: scale(1.5); }
.product-card .p-name { font-size: 24px; font-weight: 800; margin-bottom: 6px; position: relative; z-index: 1; }
.product-card .p-type { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #7fe0ab; font-weight: 700; margin-bottom: 18px; position: relative; z-index: 1; }
.product-card p { color: rgba(255, 255, 255, 0.78); font-size: 15px; flex: 1; position: relative; z-index: 1; }
.product-card .text-link { color: #7fe0ab; margin-top: 22px; position: relative; z-index: 1; }

/* ============================================================
   STACKING SERVICE CARDS (vertical overlap on scroll)
   ============================================================ */
.stack { display: grid; gap: 30px; }
.stack-card {
  position: sticky;
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: clamp(28px, 3.4vw, 48px);
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(24px, 3.4vw, 56px);
  align-items: stretch; min-height: 380px;
  box-shadow: 0 -12px 40px rgba(23, 21, 64, 0.10);
  transform-origin: center top; will-change: transform;
}
.stack-info { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; }
.stack-info .btn { margin-top: 8px; }
.stack-media {
  position: relative; border-radius: 16px; overflow: hidden; min-height: 280px;
  background-size: cover; background-position: center;
}
.stack-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(23, 21, 64, 0.25), transparent 55%);
  transition: opacity 0.5s var(--ease);
}
.stack-media .media-chip {
  position: absolute; left: 18px; bottom: 18px; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, 0.94); color: var(--ink);
  font-size: 12.5px; font-weight: 700; padding: 9px 15px; border-radius: 999px;
  box-shadow: 0 8px 20px rgba(13, 12, 38, 0.25);
}
.stack-media .media-chip svg { color: var(--green); }
.stack-card:hover .stack-media { transform: scale(1.015); transition: transform 0.6s var(--ease); }
.stack-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: rgba(13, 12, 38, var(--dim, 0));
}
.stack-card:nth-child(1) { top: 110px; }
.stack-card:nth-child(2) { top: 126px; }
.stack-card:nth-child(3) { top: 142px; }
.stack-card:nth-child(4) { top: 158px; }

.stack-card.tone-2 { background: #f2f4fa; }
.stack-card.tone-3 { background: linear-gradient(135deg, var(--indigo-deep), var(--indigo)); border-color: transparent; color: #fff; }
.stack-card.tone-4 { background: linear-gradient(135deg, #0d2c45, var(--green-dark)); border-color: transparent; color: #fff; }
.stack-card.tone-3 p, .stack-card.tone-4 p { color: rgba(255, 255, 255, 0.82); }
.stack-card.tone-3 .text-link, .stack-card.tone-4 .text-link { color: #7fe0ab; }

.stack-head { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.stack-num {
  font-size: clamp(40px, 4.5vw, 64px); font-weight: 800; line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(51, 46, 135, 0.3);
}
.stack-card.tone-3 .stack-num, .stack-card.tone-4 .stack-num { -webkit-text-stroke: 2px rgba(255, 255, 255, 0.45); }
.stack-card .svc-icon { margin-bottom: 0; }
.stack-body h3 { font-size: clamp(22px, 2.4vw, 32px); margin-bottom: 12px; }
.stack-body p { color: var(--gray); font-size: clamp(15px, 1.3vw, 17px); max-width: 640px; }
.stack-go { align-self: center; }

@media (max-width: 920px) {
  .stack-card { grid-template-columns: 1fr; min-height: 0; gap: 20px; }
  .stack-card:nth-child(1) { top: 86px; }
  .stack-card:nth-child(2) { top: 98px; }
  .stack-card:nth-child(3) { top: 110px; }
  .stack-card:nth-child(4) { top: 122px; }
  .stack-head { flex-direction: row; align-items: center; }
  .stack-media { min-height: 200px; order: -1; }
}

/* ============================================================
   PRODUCT TILES (image fills card on hover)
   ============================================================ */
.tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.prod-tile {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 30px 28px 220px; overflow: hidden; min-height: 480px;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s;
}
.prod-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }

.tile-media {
  position: absolute; left: 20px; right: 20px; bottom: 20px; top: auto; height: 180px;
  border-radius: 12px; background-size: cover; background-position: center; z-index: 1;
  transition: all 0.65s var(--ease);
}
.tile-media::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(13, 12, 38, 0.82), rgba(23, 21, 64, 0.68));
  opacity: 0; transition: opacity 0.55s var(--ease);
}
.prod-tile:hover .tile-media { left: 0; right: 0; bottom: 0; height: 100%; border-radius: 18px; }
.prod-tile:hover .tile-media::after { opacity: 1; }

.tile-body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; }
.tile-icon {
  width: 56px; height: 56px; border-radius: 14px; margin-bottom: 20px;
  display: grid; place-items: center; color: var(--indigo);
  background: rgba(51, 46, 135, 0.09); border: 1px solid rgba(51, 46, 135, 0.14);
  transition: all 0.45s var(--ease);
}
.prod-tile:hover .tile-icon { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.tile-body h3 { font-size: 23px; margin-bottom: 4px; transition: color 0.4s; }
.tile-body .t-type {
  font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800;
  color: var(--green); margin-bottom: 14px; transition: color 0.4s;
}
.tile-body p { color: var(--gray); font-size: 14.5px; transition: color 0.4s; }
.prod-tile:hover .tile-body h3 { color: #fff; }
.prod-tile:hover .tile-body .t-type { color: #7fe0ab; }
.prod-tile:hover .tile-body p { color: rgba(255, 255, 255, 0.85); }

.tile-link {
  position: absolute; left: 28px; bottom: 26px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 15px; color: #fff;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.45s var(--ease) 0.15s, transform 0.45s var(--ease) 0.15s;
}
.prod-tile:hover .tile-link { opacity: 1; transform: none; }
.tile-link svg { color: #7fe0ab; }

/* ============================================================
   INSIGHT POST CARDS (eleks-style)
   ============================================================ */
.post-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 30px; }
.post-card { display: flex; flex-direction: column; }
.post-media {
  position: relative; border-radius: 14px; overflow: hidden; height: 260px;
  background-size: cover; background-position: center; margin-bottom: 22px;
}
.post-media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,12,38,0.18), transparent 40%); }
.post-media .zoom { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.7s var(--ease); }
.post-card:hover .post-media .zoom { transform: scale(1.06); }
.post-pills { position: absolute; top: 16px; right: 16px; display: flex; gap: 10px; z-index: 2; }
.post-pills .pill {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid rgba(255, 255, 255, 0.85); color: #fff;
  font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 999px;
  backdrop-filter: blur(4px); background: rgba(13, 12, 38, 0.18);
  transition: background 0.3s, color 0.3s;
}
.post-pills .pill:hover { background: #fff; color: var(--ink); }
.post-pills .pill .ring { width: 9px; height: 9px; border: 2px solid currentColor; border-radius: 50%; }
.post-card h3 { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.4; font-weight: 700; margin-bottom: 18px; transition: color 0.3s; }
.post-card:hover h3 { color: var(--indigo); }
.post-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.post-foot .view {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; color: var(--ink);
}
.post-foot .view svg { color: var(--green); transition: transform 0.3s var(--ease); }
.post-foot .view:hover svg { transform: translate(3px, -3px); }
.author { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 15px; letter-spacing: 0.02em;
  background: linear-gradient(135deg, var(--indigo), var(--blue));
}
.avatar.av2 { background: linear-gradient(135deg, var(--green), var(--blue)); }
.avatar.av3 { background: linear-gradient(135deg, var(--indigo-dark), #7c4dff); }
.avatar.av4 { background: linear-gradient(135deg, var(--blue), var(--green)); }
.author strong { display: block; font-size: 14.5px; line-height: 1.3; }
.author strong a { color: inherit; text-decoration: none; transition: color 0.25s; }
.author strong a:hover { color: var(--green); }
.author span { font-size: 13px; color: var(--gray); }

/* ============================================================
   FANCY FORM (floating labels)
   ============================================================ */
.contact-form { position: relative; overflow: hidden; }
.contact-form::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: linear-gradient(90deg, var(--green), var(--blue), var(--indigo));
}
.form-head { margin-bottom: 28px; }
.form-head h3 { font-size: 24px; margin-bottom: 6px; }
.form-head p { color: var(--gray); font-size: 14.5px; }

.ffield { position: relative; margin-bottom: 18px; }
.form-row .ffield { margin-bottom: 18px; }
.ffield input, .ffield select, .ffield textarea {
  width: 100%; padding: 24px 18px 10px; border-radius: 12px;
  border: 1.5px solid var(--line); background: #fafbfd;
  font-family: inherit; font-size: 15px; color: var(--ink);
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.ffield textarea { min-height: 130px; resize: vertical; }
.ffield select { appearance: none; cursor: pointer; }
.ffield .select-arrow {
  position: absolute; right: 16px; top: 22px; pointer-events: none; color: var(--gray-light);
}
.ffield label {
  position: absolute; left: 18px; top: 17px; pointer-events: none;
  color: var(--gray-light); font-size: 15px; font-weight: 500;
  transition: all 0.25s var(--ease);
}
.ffield input:focus, .ffield select:focus, .ffield textarea:focus {
  outline: none; border-color: var(--indigo); background: #fff;
  box-shadow: 0 0 0 4px rgba(51, 46, 135, 0.10);
}
.ffield input:focus ~ label, .ffield input:not(:placeholder-shown) ~ label,
.ffield textarea:focus ~ label, .ffield textarea:not(:placeholder-shown) ~ label,
.ffield.always-float label {
  top: 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--indigo);
}
.btn-submit {
  width: 100%; justify-content: center; border: 0;
  background: linear-gradient(100deg, var(--green) 0%, #00b8a9 60%, var(--blue) 130%);
  color: #fff; font-size: 16px; padding: 17px 30px;
}
.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0, 161, 75, 0.4); filter: saturate(1.1); }

@media (max-width: 1080px) {
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 920px) {
  .post-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tile-grid { grid-template-columns: 1fr; }
  .prod-tile { min-height: 440px; }
  .post-media { height: 210px; }
}

/* ============================================================
   SERVICE FINDER (interactive quiz)
   ============================================================ */
.finder {
  background: linear-gradient(140deg, var(--indigo-deep), var(--indigo-dark));
  border-radius: 26px; color: #fff; padding: 70px 64px;
  position: relative; overflow: hidden;
}
.finder::before {
  content: ""; position: absolute; inset: 0; opacity: 0.06; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.7) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.7) 1px, transparent 1px);
  background-size: 56px 56px;
}
.finder-head { position: relative; z-index: 1; margin-bottom: 40px; }
.finder-head h2 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 12px; }
.finder-head p { color: rgba(255, 255, 255, 0.75); }
.finder-progress { display: flex; gap: 8px; margin: 28px 0 34px; position: relative; z-index: 1; }
.finder-progress span { height: 5px; flex: 1; border-radius: 99px; background: rgba(255,255,255,0.16); transition: background 0.4s; }
.finder-progress span.done { background: var(--green); }

.finder-step { position: relative; z-index: 1; display: none; animation: stepIn 0.5s var(--ease); }
.finder-step.active { display: block; }
@keyframes stepIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.finder-step h3 { font-size: 22px; margin-bottom: 24px; }
.finder-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.finder-options button {
  text-align: left; padding: 20px 22px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.06); border: 1.5px solid rgba(255, 255, 255, 0.18);
  color: #fff; font-size: 15.5px; font-weight: 600;
  transition: all 0.3s var(--ease);
}
.finder-options button:hover { background: rgba(0, 161, 75, 0.22); border-color: var(--green); transform: translateY(-3px); }

.finder-result { display: none; position: relative; z-index: 1; animation: stepIn 0.5s var(--ease); }
.finder-result.active { display: block; }
.finder-result .rec-card {
  background: #fff; color: var(--ink); border-radius: 18px; padding: 36px;
  display: flex; gap: 26px; align-items: center; flex-wrap: wrap;
}
.finder-result .rec-card .svc-icon { margin-bottom: 0; }
.finder-result .rec-body { flex: 1; min-width: 240px; }
.finder-result .rec-body h4 { font-size: 22px; margin-bottom: 8px; }
.finder-result .rec-body p { color: var(--gray); font-size: 15px; }
.finder-restart { margin-top: 22px; background: none; border: 0; color: rgba(255,255,255,0.7); font-size: 14px; font-weight: 600; text-decoration: underline; }
.finder-restart:hover { color: #fff; }

/* ============================================================
   PROCESS
   ============================================================ */
/* scroll-driven process: drawing line + traveling pulse + sequential step reveal */
.proc { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding-top: 48px; }
/* connector lives in a clean band ABOVE the cards, threaded through the node dots */
.proc-line { position: absolute; top: 32px; left: 16.66%; right: 16.66%; height: 4px; z-index: 4; border-radius: 4px; }
.proc-line .rail { position: absolute; inset: 0; background: var(--line); border-radius: 4px; }
.proc-line .ink {
  position: absolute; inset: 0; border-radius: 4px; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--green), var(--blue), #6a5cff);
  box-shadow: 0 0 16px rgba(27,157,217,.5); transition: transform .12s linear;
}
.proc-line .pulse {
  position: absolute; top: 50%; left: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--green) 70%); opacity: 0;
  box-shadow: 0 0 0 7px rgba(0,161,75,.16), 0 0 26px 4px rgba(0,161,75,.7);
  transition: opacity .3s var(--ease);
}
.proc.go .proc-line .pulse { opacity: 1; }

.proc-step {
  position: relative; z-index: 1;
  background: #fff; border-radius: var(--radius); border: 1px solid var(--line);
  padding: 46px 32px 38px; text-align: left;
  transition: box-shadow .5s var(--ease), border-color .5s var(--ease), transform .45s var(--ease);
}
.proc-step.on { box-shadow: 0 26px 56px rgba(51,46,135,.13); border-color: rgba(106,92,255,.18); }
.proc-step:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); }
/* content reveals one-by-one without moving the node off the line */
.proc-body { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.proc-step.on .proc-body { opacity: 1; transform: none; }
/* node dot threaded onto the line, just above the card top */
.proc-step .node {
  position: absolute; top: -30px; left: 50%; margin-left: -18px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; color: var(--gray-light);
  background: #fff; border: 2px solid var(--line); z-index: 5;
  transition: color .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.proc-step.lit .node { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--green), var(--blue)); box-shadow: 0 10px 24px rgba(0,161,75,.42), 0 0 0 6px rgba(0,161,75,.12); transform: scale(1.16); }
.proc-step .num {
  font-family: "Fraunces", Georgia, serif; font-size: 62px; font-weight: 600; line-height: 1; margin: 8px 0 18px;
  color: transparent; -webkit-text-stroke: 1.6px rgba(51, 46, 135, 0.26);
  -webkit-background-clip: text; background-clip: text; transition: all 0.5s var(--ease);
}
.proc-step.lit .num { -webkit-text-stroke: 0; background-image: linear-gradient(135deg, var(--green), var(--blue), #6a5cff); }
.proc-step h3 { font-size: 22px; margin-bottom: 12px; }
.proc-step p { color: var(--gray); font-size: 15px; line-height: 1.6; }

/* ============================================================
   STATS
   ============================================================ */
.stats-band {
  background: linear-gradient(120deg, var(--indigo-deep), var(--indigo));
  color: #fff; padding: 80px 0; position: relative; overflow: hidden;
}
.stats-band::after {
  content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%;
  background: var(--green); filter: blur(130px); opacity: 0.25; right: -140px; top: -120px;
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; position: relative; z-index: 1; }
.stat { text-align: center; padding: 10px; }
.stat .value { font-size: clamp(40px, 4.6vw, 58px); font-weight: 800; }
.stat .value .suffix { color: #7fe0ab; }
.stat .label { margin-top: 6px; color: rgba(255, 255, 255, 0.72); font-size: 15px; }

/* ============================================================
   CLIENT LOGOS MARQUEE
   ============================================================ */
.logos-section { padding: 64px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.logos-label { text-align: center; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--gray-light); margin-bottom: 36px; }
.marquee { overflow: hidden; position: relative; }
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, #fff, transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, #fff, transparent); }
.marquee-track { display: flex; align-items: center; gap: 80px; width: max-content; animation: marquee 28s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track img { height: 52px; width: auto; filter: grayscale(1); opacity: 0.6; transition: all 0.3s; }
.marquee-track img:hover { filter: none; opacity: 1; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================================================
   CASE STUDIES
   ============================================================ */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.case-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  min-height: 380px; display: flex; align-items: flex-end; color: #fff;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.case-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); }
.case-bg { position: absolute; inset: 0; transition: transform 0.6s var(--ease); }
.case-card:hover .case-bg { transform: scale(1.06); }
.case-bg.c1 { background: linear-gradient(160deg, var(--indigo), var(--blue)); }
.case-bg.c2 { background: linear-gradient(160deg, var(--indigo-dark), var(--green)); }
.case-bg.c3 { background: linear-gradient(160deg, #14406b, var(--blue)); }
.case-bg::after {
  content: ""; position: absolute; inset: 0; opacity: 0.14;
  background-image: radial-gradient(rgba(255,255,255,0.9) 1.4px, transparent 1.4px);
  background-size: 24px 24px;
}
.case-content { position: relative; z-index: 1; padding: 30px; width: 100%; background: linear-gradient(transparent, rgba(13, 12, 38, 0.85)); }
.case-content .cat { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: #7fe0ab; }
.case-content h3 { font-size: 20px; margin: 10px 0 8px; }
.case-content p { font-size: 14px; color: rgba(255, 255, 255, 0.78); }

/* ============================================================
   INSIGHTS
   ============================================================ */
.insight-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.insight-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.insight-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.insight-thumb { height: 160px; position: relative; overflow: hidden; }
.insight-thumb.t1 { background: linear-gradient(135deg, var(--indigo), var(--blue)); }
.insight-thumb.t2 { background: linear-gradient(135deg, var(--green), var(--blue)); }
.insight-thumb.t3 { background: linear-gradient(135deg, var(--indigo-dark), #7c4dff); }
.insight-thumb.t4 { background: linear-gradient(135deg, var(--blue), var(--green)); }
.insight-thumb::after {
  content: ""; position: absolute; inset: 0; opacity: 0.18;
  background-image: linear-gradient(rgba(255,255,255,0.7) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.7) 1px, transparent 1px);
  background-size: 30px 30px;
}
.insight-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.insight-body .meta { font-size: 12.5px; color: var(--gray-light); font-weight: 600; margin-bottom: 10px; }
.insight-body h3 { font-size: 17px; line-height: 1.4; margin-bottom: 14px; flex: 1; transition: color 0.3s; }
.insight-card:hover h3 { color: var(--indigo); }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  position: relative; overflow: hidden; color: #fff; text-align: center;
  background: linear-gradient(135deg, var(--indigo-deep) 0%, var(--indigo) 55%, var(--green-dark) 130%);
  padding: 110px 0;
}
.cta-band::before {
  content: ""; position: absolute; width: 600px; height: 600px; border-radius: 50%;
  background: var(--blue); filter: blur(140px); opacity: 0.3; left: -180px; bottom: -260px;
}
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { font-size: clamp(30px, 4.4vw, 52px); margin-bottom: 18px; }
.cta-band p { color: rgba(255, 255, 255, 0.8); max-width: 620px; margin: 0 auto 42px; font-size: 17px; }
.cta-band .hero-actions { justify-content: center; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; }
.contact-info h2 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 16px; }
.contact-info > p { color: var(--gray); margin-bottom: 34px; }
.contact-channels { display: grid; gap: 24px; }
.contact-channels li { display: flex; gap: 16px; align-items: flex-start; }
.contact-channels .ch-icon {
  flex: 0 0 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--indigo), var(--blue));
}
.contact-channels li:nth-child(even) .ch-icon { background: linear-gradient(135deg, var(--green), var(--blue)); }
/* text column: label on top, value(s) neatly stacked underneath */
.contact-channels .ch-text { display: flex; flex-direction: column; gap: 4px; padding-top: 3px; min-width: 0; }
.contact-channels strong { font-size: 15px; font-weight: 700; color: var(--ink); }
.contact-channels .ch-text > span,
.contact-channels .ch-text > a { color: var(--gray); font-size: 14.5px; line-height: 1.55; }
.contact-channels .ch-text > a { width: fit-content; text-decoration: none; transition: color 0.25s; }
.contact-channels .ch-text > a:hover { color: var(--green); }

/* contact page map */
.contact-map { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
.contact-map iframe { display: block; width: 100%; filter: grayscale(0.15); }
.contact-map .map-open {
  position: absolute; right: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 7px;
  background: #fff; color: var(--indigo); font-weight: 700; font-size: 13.5px;
  padding: 10px 16px; border-radius: 99px; box-shadow: var(--shadow-lg); transition: transform 0.25s, color 0.25s;
}
.contact-map .map-open:hover { transform: translateY(-2px); color: var(--green); }

.contact-form {
  background: #fff; border-radius: 20px; box-shadow: var(--shadow-lg);
  padding: 44px; border: 1px solid var(--line);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px; border-radius: 10px; border: 1.5px solid var(--line);
  font-family: inherit; font-size: 15px; background: var(--bg-soft);
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--indigo); background: #fff;
  box-shadow: 0 0 0 4px rgba(51, 46, 135, 0.1);
}
.field textarea { min-height: 130px; resize: vertical; }
.form-note { font-size: 12.5px; color: var(--gray-light); margin-top: 14px; }
.form-success {
  display: none; background: rgba(0, 161, 75, 0.1); border: 1.5px solid var(--green);
  color: var(--green-dark); border-radius: 12px; padding: 16px 20px; font-weight: 600; margin-top: 18px;
}
.form-success.show { display: block; animation: stepIn 0.4s var(--ease); }

/* ============================================================
   INNER PAGE BLOCKS
   ============================================================ */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature-item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px 28px; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.feature-item:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.feature-item .svc-icon { width: 50px; height: 50px; margin-bottom: 18px; }
.feature-item h3 { font-size: 18px; margin-bottom: 10px; }
.feature-item p { color: var(--gray); font-size: 14.5px; }

.split-block { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split-block .visual {
  border-radius: 22px; min-height: 380px; position: relative; overflow: hidden;
  background: linear-gradient(140deg, var(--indigo), var(--blue));
  display: grid; place-items: center; color: #fff;
}
.split-block .visual.alt { background: linear-gradient(140deg, var(--green), var(--blue)); }
.split-block .visual::before {
  content: ""; position: absolute; inset: 0; opacity: 0.15;
  background-image: radial-gradient(rgba(255,255,255,0.9) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
}
.split-block .visual svg { width: 120px; height: 120px; position: relative; }
.split-block h2 { font-size: clamp(26px, 3.2vw, 38px); margin-bottom: 18px; }
.split-block p { color: var(--gray); margin-bottom: 16px; }

.checklist { display: grid; gap: 14px; margin-top: 24px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink); font-weight: 600; font-size: 15.5px; }
.checklist .tick {
  flex: 0 0 24px; height: 24px; border-radius: 50%; margin-top: 1px;
  background: rgba(0, 161, 75, 0.12); color: var(--green); display: grid; place-items: center;
}

.accordion { display: grid; gap: 14px; max-width: 860px; }
.acc-item { border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.acc-head {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 22px 26px; background: none; border: 0; text-align: left;
  font-size: 17px; font-weight: 700; color: var(--ink);
}
.acc-head .plus { transition: transform 0.35s var(--ease); color: var(--green); flex: 0 0 auto; }
.acc-item.open .acc-head .plus { transform: rotate(45deg); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height 0.45s var(--ease); }
.acc-body p { padding: 0 26px 22px; color: var(--gray); font-size: 15px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { position: relative; background: var(--indigo-deep); color: rgba(255, 255, 255, 0.75); overflow: hidden; }
/* alive: a living-system accent that keeps flowing across the top */
.site-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--green), var(--blue), #6a5cff, var(--green));
  background-size: 300% 100%; animation: footerFlow 9s linear infinite;
}
@keyframes footerFlow { to { background-position: -300% 0; } }
/* alive: soft drifting glow behind the footer */
.site-footer::after {
  content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; z-index: 0; pointer-events: none;
  left: -120px; bottom: -260px; background: radial-gradient(circle, rgba(27,157,217,.25), transparent 70%);
  animation: footerGlow 16s ease-in-out infinite;
}
@keyframes footerGlow { 0%,100% { transform: translate(0,0); opacity: .8; } 50% { transform: translate(120px,-40px); opacity: 1; } }
.site-footer .container { position: relative; z-index: 1; }
.footer-top { padding: 80px 0 50px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 50px; align-items: start; }
.footer-brand img { height: 48px; margin-bottom: 22px; }
.footer-brand p { font-size: 14.5px; max-width: 300px; line-height: 1.7; }
.footer-contact { display: grid; gap: 14px; margin-top: 26px; }
.footer-contact .fc-item { display: grid; grid-template-columns: 18px 1fr; align-items: start; column-gap: 12px; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.78); transition: color 0.25s; }
.footer-contact .fc-item:hover { color: #7fe0ab; }
.footer-contact .fc-ic { color: #7fe0ab; line-height: 0; margin-top: 3px; }
.footer-contact .fc-addr { max-width: 320px; }
.socials { display: flex; gap: 12px; margin-top: 26px; }
.socials a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.08); color: #fff; transition: all 0.3s var(--ease);
}
.socials a:hover { background: var(--green); transform: translateY(-3px); }
.footer-col h4 { color: #fff; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 22px; }
.footer-col ul { display: grid; gap: 13px; }
/* eleks-style: arrow slides in and text shifts on hover */
.footer-col a { display: inline-flex; align-items: center; font-size: 14.5px; color: rgba(255, 255, 255, 0.75); transition: color 0.25s var(--ease); }
.footer-col a::before {
  content: "→"; font-size: 13px; line-height: 1; width: 0; opacity: 0; transform: translateX(-6px); color: #7fe0ab;
  transition: width 0.28s var(--ease), opacity 0.28s var(--ease), transform 0.28s var(--ease), margin-right 0.28s var(--ease);
}
.footer-col a:hover { color: #7fe0ab; }
.footer-col a:hover::before { width: 14px; opacity: 1; transform: translateX(0); margin-right: 5px; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 24px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap;
  font-size: 13.5px;
}
.footer-bottom .legal { display: flex; gap: 22px; }
.footer-bottom a:hover { color: #7fe0ab; }

/* ============================================================
   AI GUIDE (floating assistant)
   ============================================================ */
.ai-guide-btn {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 950; display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 26px; border: 0; border-radius: 12px;
  background: linear-gradient(95deg, #5a54d6, var(--blue));
  color: #fff; font-size: 15px; font-weight: 700;
  box-shadow: 0 12px 30px rgba(51, 46, 135, 0.45);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.ai-guide-btn:hover { transform: translateX(-50%) translateY(-3px); box-shadow: 0 18px 40px rgba(51, 46, 135, 0.55); }
.ai-guide-btn svg { animation: sparkle 2.4s ease-in-out infinite; }
@keyframes sparkle { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.25) rotate(18deg); } }

.ai-modal { position: fixed; inset: 0; z-index: 1300; display: none; }
.ai-modal.open { display: block; }
.ai-overlay { position: absolute; inset: 0; background: rgba(13, 12, 38, 0.5); animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } }

.ai-panel {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(960px, 96vw); max-height: 88vh; overflow-y: auto;
  background: #fff; border-radius: 22px 22px 0 0;
  padding: clamp(28px, 4vw, 52px); padding-bottom: 30px;
  display: flex; flex-direction: column; gap: 22px;
  animation: panelUp 0.45s var(--ease);
}
@keyframes panelUp { from { transform: translateX(-50%) translateY(60px); opacity: 0; } }

.ai-close {
  position: absolute; top: 20px; right: 22px;
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: var(--bg-soft); color: var(--ink); display: grid; place-items: center;
  transition: all 0.3s var(--ease);
}
.ai-close:hover { background: var(--indigo); color: #fff; transform: rotate(90deg); }

.ai-intro h2 { font-size: clamp(24px, 3vw, 38px); line-height: 1.25; letter-spacing: -0.02em; }
.ai-modal.chatting .ai-intro { display: none; }
.ai-modal.chatting .ai-popular { display: none; }

.ai-thread { display: flex; flex-direction: column; gap: 14px; }
.ai-msg {
  max-width: 82%; padding: 14px 18px; border-radius: 16px;
  font-size: 15px; line-height: 1.6; animation: stepIn 0.35s var(--ease);
}
.ai-msg.user { align-self: flex-end; background: var(--indigo); color: #fff; border-bottom-right-radius: 4px; }
.ai-msg.bot { align-self: flex-start; background: var(--bg-soft); color: var(--ink); border-bottom-left-radius: 4px; }
.ai-msg.bot strong { color: var(--indigo); }
.ai-msg-links { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.ai-msg-links a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: #fff; border: 1.5px solid var(--indigo); color: var(--indigo);
  transition: all 0.25s var(--ease);
}
.ai-msg-links a:hover { background: var(--indigo); color: #fff; }
.ai-typing { display: inline-flex; gap: 5px; padding: 16px 18px; }
.ai-typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gray-light);
  animation: blink 1.2s infinite;
}
.ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

.ai-input { position: relative; }
.ai-input textarea {
  width: 100%; padding: 16px 60px 16px 18px; border-radius: 14px;
  border: 1.5px solid var(--indigo); background: #fff;
  font-family: inherit; font-size: 15px; color: var(--ink); resize: none;
  transition: box-shadow 0.3s;
}
.ai-input textarea:focus { outline: none; box-shadow: 0 0 0 4px rgba(51, 46, 135, 0.12); }
.ai-send {
  position: absolute; right: 12px; bottom: 14px;
  width: 42px; height: 42px; border-radius: 50%; border: 0;
  background: linear-gradient(95deg, #5a54d6, var(--blue)); color: #fff;
  display: grid; place-items: center; transition: transform 0.25s var(--ease), box-shadow 0.25s;
}
.ai-send:hover { transform: scale(1.08); box-shadow: 0 8px 20px rgba(51, 46, 135, 0.4); }

.ai-pop-label { font-size: 15px; font-weight: 800; margin-bottom: 14px; }
.ai-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ai-chips button {
  text-align: left; padding: 16px 18px; border-radius: 12px;
  background: var(--bg-soft); border: 1px solid var(--line);
  font-size: 14px; font-weight: 600; color: var(--gray);
  transition: all 0.25s var(--ease);
}
.ai-chips button:hover { background: #fff; border-color: var(--indigo); color: var(--indigo); transform: translateY(-2px); }

@media (max-width: 600px) {
  .ai-chips { grid-template-columns: 1fr; }
  .ai-msg { max-width: 92%; }
  .ai-guide-btn { bottom: 16px; padding: 11px 20px; font-size: 14px; }
}

/* back to top */
.to-top {
  position: fixed; right: 28px; bottom: 96px; z-index: 900;
  width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: var(--indigo); color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 24px rgba(51, 46, 135, 0.45);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: all 0.35s var(--ease);
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--indigo-deep); transform: translateY(-3px); }

/* ---------- floating WhatsApp button ---------- */
.wa-float {
  position: fixed; right: 24px; bottom: 24px; z-index: 1001;
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: #25D366;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.5);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.wa-float::before { /* attention pulse ring */
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25D366;
  z-index: -1; animation: waPulse 2.2s ease-out infinite;
}
.wa-float:hover { transform: scale(1.08); box-shadow: 0 16px 38px rgba(37, 211, 102, 0.6); }
.wa-float svg { width: 34px; height: 34px; }
.wa-float .wa-tip {
  position: absolute; right: 74px; top: 50%; transform: translateY(-50%) translateX(8px);
  background: #1f2937; color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap;
  padding: 9px 14px; border-radius: 10px; opacity: 0; pointer-events: none; transition: all 0.3s var(--ease);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.wa-float .wa-tip::after { content: ""; position: absolute; right: -5px; top: 50%; margin-top: -5px; width: 10px; height: 10px; background: #1f2937; transform: rotate(45deg); }
.wa-float:hover .wa-tip { opacity: 1; transform: translateY(-50%) translateX(0); }
@keyframes waPulse { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(1.6); opacity: 0; } 100% { opacity: 0; } }
@media (max-width: 600px) {
  .wa-float { right: 16px; bottom: 16px; width: 56px; height: 56px; }
  .wa-float svg { width: 30px; height: 30px; }
  .wa-float .wa-tip { display: none; }
  .to-top { right: 18px; bottom: 82px; width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .wa-float::before { animation: none; } }

/* ============================================================
   HOME · ALIVE STRIP + WHAT ARE LIVING SYSTEMS
   ============================================================ */
/* ALIVE semi-circle fan — 3D burst */
.alive-fan { position: relative; height: 400px; max-width: 1180px; margin: 24px auto 0; perspective: 1500px; }
.acard {
  position: absolute; left: 50%; top: 20px; width: 212px; height: 300px;
  margin-left: -106px; box-sizing: border-box;
  /* collapsed (resting): letters spell ALIVE, pushed back in Z, no chrome */
  transform: translateX(var(--cx)) translateZ(-160px) scale(.6);
  transition: transform .85s var(--ease) var(--d);
  will-change: transform; transform-style: preserve-3d;
}
.alive-fan.open .acard {
  transform: translateX(var(--ox)) translateY(var(--oy)) rotate(var(--angle)) translateZ(0);
  transition: transform 1s cubic-bezier(0.34, 1.55, 0.5, 1) var(--d);
}

/* inner = the visible card surface (so cursor 3D tilt is independent of fan position) */
.acard-inner {
  position: absolute; inset: 0; border-radius: 20px; overflow: hidden;
  padding: 26px 24px; display: flex; flex-direction: column;
  background: rgba(245, 246, 250, 0); border: 1px solid transparent;
  transition: background-color .6s var(--ease) var(--d), border-color .6s var(--ease) var(--d),
              box-shadow .35s var(--ease), transform .35s var(--ease);
  transform-style: preserve-3d;
}
.alive-fan.open .acard-inner {
  background-color: var(--bg-soft); border-color: var(--line);
  box-shadow: 0 10px 30px rgba(23,21,64,.06);
}
.acard:hover .acard-inner { background-color: #fff; border-color: transparent; box-shadow: 0 30px 70px rgba(51,46,135,.28); }
/* gradient ring on hover */
.acard-inner::after { content: ""; position: absolute; inset: 0; border-radius: 20px; pointer-events: none; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .4s var(--ease); }
.acard:hover .acard-inner::after { box-shadow: inset 0 0 0 1.6px rgba(106,92,255,.55); }

/* pulsing gradient glow orb behind the letter */
.acard-glow {
  position: absolute; top: 8px; left: 8px; width: 120px; height: 120px; border-radius: 50%;
  filter: blur(26px); opacity: 0; transform: scale(.6);
  transition: opacity .7s var(--ease) calc(var(--d) + .2s), transform .7s var(--ease) calc(var(--d) + .2s);
}
.alive-fan.open .acard-glow { opacity: .5; transform: scale(1); animation: aGlow 4s ease-in-out infinite; }
.a1 .acard-glow { background: radial-gradient(circle, var(--indigo), transparent 70%); }
.a2 .acard-glow { background: radial-gradient(circle, var(--blue), transparent 70%); }
.a3 .acard-glow { background: radial-gradient(circle, #6a5cff, transparent 70%); }
.a4 .acard-glow { background: radial-gradient(circle, var(--green), transparent 70%); }
.a5 .acard-glow { background: radial-gradient(circle, #7fe0ab, transparent 70%); }
@keyframes aGlow { 0%,100% { opacity:.38; transform: scale(1); } 50% { opacity:.62; transform: scale(1.12); } }

/* big gradient letter — pops in */
.acard .big {
  position: relative; z-index: 2;
  font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 56px; line-height: 1;
  color: transparent; -webkit-background-clip: text; background-clip: text;
  transform: scale(.5); opacity: .85;
  transition: transform .6s cubic-bezier(0.34,1.7,0.5,1) calc(var(--d) + .15s), opacity .4s var(--ease) var(--d);
}
.alive-fan.open .acard .big { transform: scale(1); opacity: 1; }
.acard.a1 .big { background-image: linear-gradient(135deg, var(--indigo), var(--blue)); }
.acard.a2 .big { background-image: linear-gradient(135deg, var(--blue), #6a5cff); }
.acard.a3 .big { background-image: linear-gradient(135deg, #6a5cff, var(--green)); }
.acard.a4 .big { background-image: linear-gradient(135deg, var(--green), #1b9dd9); }
.acard.a5 .big { background-image: linear-gradient(135deg, #1b9dd9, #7fe0ab); }
.acard:hover .big { transform: scale(1.08) translateZ(40px); }

.acard-body { position: relative; z-index: 2; margin-top: auto; opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease) calc(var(--d) + .3s), transform .5s var(--ease) calc(var(--d) + .3s); }
.alive-fan.open .acard-body { opacity: 1; transform: none; }
.acard-body .acard-no { display: block; font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 13px; color: var(--gray-light); margin-bottom: 6px; }
.acard-body h3 { font-size: 17px; margin-bottom: 7px; }
.acard-body p { font-size: 13px; color: var(--gray); line-height: 1.5; }

/* ---- per-trait living motifs (top-right accent) ---- */
.motif { position: absolute; top: 18px; right: 18px; width: 58px; height: 58px; z-index: 1; opacity: 0; transition: opacity .6s var(--ease) calc(var(--d) + .25s); }
.alive-fan.open .motif { opacity: 1; }
/* blob (Adaptive) */
.m-blob { background: linear-gradient(135deg, var(--indigo), var(--blue)); opacity: 0; }
.alive-fan.open .m-blob { opacity: .9; animation: mBlob 6s ease-in-out infinite; border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%; }
@keyframes mBlob { 0%,100% { border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%; transform: rotate(0); } 50% { border-radius: 40% 60% 45% 55% / 55% 45% 60% 40%; transform: rotate(20deg); } }
/* rings (Learning) */
.m-rings i { position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--blue); opacity: .8; }
.alive-fan.open .m-rings i { animation: mRing 2.6s ease-out infinite; }
.alive-fan.open .m-rings i:nth-child(2) { animation-delay: .8s; }
.alive-fan.open .m-rings i:nth-child(3) { animation-delay: 1.6s; }
@keyframes mRing { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
/* dots (Integrated) */
.m-dots i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #6a5cff; }
.m-dots i:nth-child(1){ top:4px; left:4px; } .m-dots i:nth-child(2){ top:4px; right:4px; } .m-dots i:nth-child(3){ bottom:4px; left:4px; } .m-dots i:nth-child(4){ bottom:4px; right:4px; }
.alive-fan.open .m-dots i { animation: mDot 2.4s ease-in-out infinite; }
.alive-fan.open .m-dots i:nth-child(2){ animation-delay:.3s; } .alive-fan.open .m-dots i:nth-child(3){ animation-delay:.6s; } .alive-fan.open .m-dots i:nth-child(4){ animation-delay:.9s; }
@keyframes mDot { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(.5); opacity: .4; } }
.m-dots::before { content:""; position:absolute; inset:7px; border:1.5px solid rgba(106,92,255,.35); border-radius:4px; }
/* bars (Value-Creating) */
.m-bars { display: flex; align-items: flex-end; gap: 6px; }
.m-bars i { width: 12px; border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, var(--green), #0e7e54); }
.m-bars i:nth-child(1){ height:40%; } .m-bars i:nth-child(2){ height:70%; } .m-bars i:nth-child(3){ height:100%; }
.alive-fan.open .m-bars i { animation: mBar 2.2s ease-in-out infinite; transform-origin: bottom; }
.alive-fan.open .m-bars i:nth-child(2){ animation-delay:.25s; } .alive-fan.open .m-bars i:nth-child(3){ animation-delay:.5s; }
@keyframes mBar { 0%,100% { transform: scaleY(.6); } 50% { transform: scaleY(1); } }
/* spiral (Evolving) */
.m-spiral { border-radius: 50%; border: 2px solid transparent; border-top-color: #7fe0ab; border-right-color: #1b9dd9; }
.alive-fan.open .m-spiral { animation: mSpin 3s linear infinite; }
.m-spiral::before { content:""; position:absolute; inset:10px; border-radius:50%; border:2px solid transparent; border-top-color: var(--green); }
@keyframes mSpin { to { transform: rotate(360deg); } }
.alive-close {
  margin-top: 44px; text-align: center;
  font-family: "Fraunces", Georgia, serif; font-style: italic;
  font-size: clamp(19px, 2.2vw, 28px); color: var(--ink);
}
.alive-close b { color: var(--green); font-weight: 500; }

.ws-contrast { position: relative; display: flex; flex-direction: column; gap: 8px; margin: 18px 0 44px; font-family: "Fraunces", Georgia, serif; font-size: clamp(20px, 2.6vw, 32px); }
.ws-contrast .old { position: relative; display: inline-block; width: fit-content; color: var(--gray-light); }
.ws-contrast .old::after { content: ""; position: absolute; left: 0; top: 54%; height: 2px; width: 100%; background: rgba(120, 125, 140, .55); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) .15s; }
.section-head.in .ws-contrast .old::after { transform: scaleX(1); }
.ws-contrast .new { color: var(--indigo); font-style: italic; opacity: 0; transform: translateY(12px); transition: opacity .8s var(--ease) .7s, transform .8s var(--ease) .7s; }
.section-head.in .ws-contrast .new { opacity: 1; transform: none; }

/* the section breathes: a slow drifting colour aura behind the cards */
.ws-stage { position: relative; }
.ws-aura { position: absolute; inset: -60px -20px; z-index: 0; pointer-events: none; overflow: hidden; }
.ws-aura i { position: absolute; width: 320px; height: 320px; border-radius: 50%; filter: blur(60px); opacity: .32; will-change: transform; }
.ws-aura i:nth-child(1) { left: 3%; top: 8%; background: radial-gradient(circle, rgba(27,157,217,.55), transparent 70%); animation: wsDrift1 22s ease-in-out infinite; }
.ws-aura i:nth-child(2) { left: 42%; top: -10%; background: radial-gradient(circle, rgba(0,161,75,.5), transparent 70%); animation: wsDrift2 26s ease-in-out infinite; }
.ws-aura i:nth-child(3) { right: 1%; top: 14%; background: radial-gradient(circle, rgba(106,92,255,.5), transparent 70%); animation: wsDrift3 30s ease-in-out infinite; }
@keyframes wsDrift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(42px,30px) scale(1.16); } }
@keyframes wsDrift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,40px) scale(1.1); } }
@keyframes wsDrift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-32px,52px) scale(1.18); } }

.ws-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ws-card {
  border-radius: 18px; padding: 30px 28px 28px; background: rgba(255,255,255,.78); backdrop-filter: blur(7px);
  border: 1px solid var(--line); position: relative; overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
/* accent bar is always lit and gently shimmers, signalling a live system */
.ws-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background-size: 200% 100%; animation: wsShimmer 6s linear infinite; }
.ws-card.w1::before { background-image: linear-gradient(90deg, var(--blue), var(--indigo), var(--blue)); }
.ws-card.w2::before { background-image: linear-gradient(90deg, var(--green), var(--blue), var(--green)); }
.ws-card.w3::before { background-image: linear-gradient(90deg, #6a5cff, var(--green), #6a5cff); }
@keyframes wsShimmer { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } }
.ws-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(51,46,135,.18); }
.ws-card h3 { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 26px; margin-bottom: 12px; }
.ws-card h3 em { font-style: italic; color: var(--green); }
.ws-line { color: var(--gray); font-size: 14.5px; line-height: 1.6; margin-bottom: 20px; max-width: 90%; }

/* living glyph per verb, animating forever */
.ws-orb { position: absolute; top: 22px; right: 22px; width: 38px; height: 38px; border-radius: 50%; }
.ws-orb::before, .ws-orb::after { content: ""; position: absolute; border-radius: 50%; }
/* understand: sensing radar rings + steady core */
.w1 .ws-orb::before { inset: 0; border: 2px solid var(--blue); animation: wsRadar 2.6s ease-out infinite; }
.w1 .ws-orb::after { inset: 40%; background: var(--blue); animation: wsCore 2.6s ease-in-out infinite; }
@keyframes wsRadar { 0% { transform: scale(.35); opacity: .9; } 80% { transform: scale(1); opacity: 0; } 100% { opacity: 0; } }
@keyframes wsCore { 0%,100% { transform: scale(.8); opacity: .55; } 50% { transform: scale(1.1); opacity: 1; } }
/* act: heartbeat pulse */
.w2 .ws-orb::before { inset: 22%; background: var(--green); animation: wsBeat 1.6s ease-in-out infinite; }
.w2 .ws-orb::after { inset: 0; border: 2px solid var(--green); opacity: .35; animation: wsBeatRing 1.6s ease-out infinite; }
@keyframes wsBeat { 0%,100% { transform: scale(.8); } 18% { transform: scale(1.18); } 30% { transform: scale(.9); } 45% { transform: scale(1.06); } }
@keyframes wsBeatRing { 0% { transform: scale(.6); opacity: .5; } 70% { transform: scale(1); opacity: 0; } 100% { opacity: 0; } }
/* evolve: slowly morphing growth */
.w3 .ws-orb::before { inset: 8%; border: 2px solid #6a5cff; border-radius: 50% 50% 50% 12px; animation: wsGrow 5s linear infinite; }
.w3 .ws-orb::after { inset: 34%; background: #6a5cff; border-radius: 50% 50% 50% 22%; animation: wsGrow 5s linear infinite reverse; }
@keyframes wsGrow { 0% { transform: rotate(0) scale(.9); } 50% { transform: rotate(180deg) scale(1.12); } 100% { transform: rotate(360deg) scale(.9); } }

.ws-tags { display: flex; flex-wrap: wrap; gap: 9px; }
.ws-tags span { position: relative; font-size: 13px; font-weight: 600; padding: 8px 15px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); color: var(--gray); transition: color .3s, border-color .3s; animation: wsFire 4.5s ease-in-out infinite; }
/* signals ripple across all nine pills, then repeat */
.w1 .ws-tags span:nth-child(1) { animation-delay: 0s; } .w1 .ws-tags span:nth-child(2) { animation-delay: .35s; } .w1 .ws-tags span:nth-child(3) { animation-delay: .7s; }
.w2 .ws-tags span:nth-child(1) { animation-delay: 1.05s; } .w2 .ws-tags span:nth-child(2) { animation-delay: 1.4s; } .w2 .ws-tags span:nth-child(3) { animation-delay: 1.75s; }
.w3 .ws-tags span:nth-child(1) { animation-delay: 2.1s; } .w3 .ws-tags span:nth-child(2) { animation-delay: 2.45s; } .w3 .ws-tags span:nth-child(3) { animation-delay: 2.8s; }
@keyframes wsFire { 0%,70%,100% { transform: translateY(0); box-shadow: 0 0 0 rgba(0,161,75,0); border-color: var(--line); color: var(--gray); } 12% { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(27,157,217,.18); border-color: rgba(51,46,135,.3); color: var(--indigo); } }
.ws-card:hover .ws-tags span { color: var(--indigo); border-color: rgba(51, 46, 135, .3); }
.ws-tagline { margin-top: 44px; text-align: center; font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: clamp(18px, 2vw, 26px); color: var(--gray); }
.ws-tagline b { color: var(--green); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .ws-aura i, .ws-card::before, .ws-orb::before, .ws-orb::after, .ws-tags span { animation: none !important; }
}

@media (max-width: 1080px) {
  /* fan falls back to a clean responsive grid */
  .alive-fan { position: static; height: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 680px; perspective: none; }
  .acard {
    position: static; left: auto; top: auto; margin-left: 0; width: auto; height: auto; min-height: 220px;
    transform: translateY(28px) !important; opacity: 0;
    transition: transform .6s var(--ease) var(--d), opacity .6s var(--ease) var(--d) !important;
  }
  .alive-fan.open .acard { transform: none !important; opacity: 1; }
  .acard-inner { position: relative; inset: auto; height: 100%; background-color: var(--bg-soft); border-color: var(--line); }
  .acard:hover .acard-inner { transform: translateY(-8px) scale(1.02) !important; }
  .ws-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .alive-fan { grid-template-columns: 1fr; }
}

/* ============================================================
   HOME · INTERACTIVE LEAD FORM (multi-step AI consultant)
   ============================================================ */
.cform-section { background: linear-gradient(180deg, #fff, var(--bg-soft)); }
.cform-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
.cform-intro h2 { font-size: clamp(30px, 4vw, 50px); line-height: 1.1; margin: 16px 0 16px; letter-spacing: -0.02em; }
.cform-intro > p { color: var(--gray); font-size: 17px; max-width: 460px; margin-bottom: 36px; }
.cform-points { display: grid; gap: 22px; }
.cform-points li { display: flex; gap: 16px; align-items: flex-start; }
.cform-points .cf-ic {
  flex: 0 0 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--indigo), var(--blue));
}
.cform-points li:nth-child(2) .cf-ic { background: linear-gradient(135deg, var(--green), var(--blue)); }
.cform-points li:nth-child(3) .cf-ic { background: linear-gradient(135deg, #6a5cff, var(--green)); }
.cform-points strong { display: block; font-size: 16px; margin-bottom: 3px; }
.cform-points span { font-size: 14px; color: var(--gray); line-height: 1.5; }
.cform-trust { display: inline-flex; align-items: center; gap: 9px; margin-top: 32px; padding: 11px 20px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 13.5px; font-weight: 600; color: var(--gray); }
.cform-trust svg { color: var(--green); }

/* panel */
.cform-panel { position: relative; }
.cform {
  position: relative; background: #fff; border-radius: 24px; padding: 30px 30px 0;
  box-shadow: 0 40px 90px rgba(23, 21, 64, 0.16), 0 0 0 1px rgba(23,21,64,0.04);
  overflow: hidden; min-height: 540px; display: flex; flex-direction: column;
}
.cform::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--green), var(--blue), var(--indigo)); }

/* progress dots */
.cform-progress { display: flex; align-items: center; gap: 6px; margin-bottom: 22px; }
.cform-progress .cdot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--line); background: #fff; transition: all .4s var(--ease); flex: 0 0 auto; }
.cform-progress .cdot.active { border-color: var(--green); background: var(--green); box-shadow: 0 0 0 5px rgba(0,161,75,0.12); }
.cform-progress .cdot.done { border-color: var(--green); background: var(--green); }
.cform-progress .cline { flex: 1; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.cform-progress .cline.done { background: var(--green); }

/* steps */
.cstep { display: none; flex: 1; animation: cfIn .5s var(--ease); }
.cstep.active { display: block; }
@keyframes cfIn { from { opacity: 0; transform: translateY(14px); } }

/* AI message */
.cmsg { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 20px; }
.cbot { flex: 0 0 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--indigo), var(--blue)); box-shadow: 0 8px 20px rgba(51,46,135,.3); position: relative; }
.cbot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid rgba(0,161,75,.4); animation: cbotPulse 2.6s ease-out infinite; }
@keyframes cbotPulse { 0% { transform: scale(.92); opacity: .8; } 100% { transform: scale(1.25); opacity: 0; } }
.cbubble { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 6px 16px 16px 16px; padding: 14px 18px; font-size: 15px; line-height: 1.5; color: var(--ink); max-width: 90%; }
.cnow { display: block; font-size: 11.5px; color: var(--green); font-weight: 600; margin-top: 6px; }

/* option chips */
.copts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 22px; }
.copt {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 16px 18px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff;
  font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer;
  transition: all .3s var(--ease);
}
.copt .oi { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--indigo); background: rgba(51,46,135,.08); flex: 0 0 auto; transition: all .3s var(--ease); }
.copt:hover { border-color: var(--indigo); transform: translateY(-2px); box-shadow: var(--shadow); }
.copt.selected { border-color: var(--green); background: rgba(0,161,75,.05); box-shadow: 0 0 0 3px rgba(0,161,75,.14); }
.copt.selected .oi { background: linear-gradient(135deg, var(--green), var(--blue)); color: #fff; }

/* goal textarea (revealed after selecting) */
.cgoal { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--ease), opacity .5s var(--ease); }
.cgoal.show { max-height: 260px; opacity: 1; }
.cgoal-label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.cta-area { position: relative; }
.cta-area textarea {
  width: 100%; box-sizing: border-box; padding: 16px 18px 30px; border-radius: 14px;
  border: 1.5px solid var(--line); background: var(--bg-soft); font-family: inherit; font-size: 15px;
  resize: none; transition: border-color .3s, box-shadow .3s, background .3s;
}
.cta-area textarea:focus { outline: none; border-color: var(--indigo); background: #fff; box-shadow: 0 0 0 4px rgba(51,46,135,.1); }
.ccount { position: absolute; right: 14px; bottom: 12px; font-size: 12px; color: var(--gray-light); font-weight: 600; }

/* contact fields */
.cfields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; }
.cfield { position: relative; }
.cfield input, .cfield select {
  width: 100%; box-sizing: border-box; padding: 22px 14px 9px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--bg-soft); font-family: inherit; font-size: 14.5px; color: var(--ink);
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.cfield select { appearance: none; cursor: pointer; }
.cfield label { position: absolute; left: 15px; top: 15px; font-size: 14.5px; color: var(--gray-light); pointer-events: none; transition: all .25s var(--ease); }
.cfield input:focus, .cfield select:focus { outline: none; border-color: var(--indigo); background: #fff; box-shadow: 0 0 0 4px rgba(51,46,135,.1); }
.cfield input:focus ~ label, .cfield input:not(:placeholder-shown) ~ label,
.cfield.csel label { top: 7px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--indigo); }
.cfield .select-arrow { position: absolute; right: 14px; top: 20px; pointer-events: none; color: var(--gray-light); }
.cfield.invalid input, .cfield.invalid select { border-color: #e0556b; box-shadow: 0 0 0 4px rgba(224,85,107,.12); }

/* success */
.cstep-done { text-align: center; display: none; }
.cstep-done.active { display: flex; align-items: center; justify-content: center; }
.cdone { padding: 30px 0; }
.cdone-ic { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; color: #fff; margin: 0 auto 22px; background: linear-gradient(135deg, var(--green), var(--blue)); box-shadow: 0 16px 36px rgba(0,161,75,.34); animation: cfPop .6s cubic-bezier(.34,1.6,.5,1); }
@keyframes cfPop { 0% { transform: scale(0); } }
.cdone h3 { font-size: 28px; margin-bottom: 10px; }
.cdone p { color: var(--gray); max-width: 360px; margin: 0 auto 26px; }

/* footer bar */
.cform-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 22px -30px 0; padding: 18px 30px; border-top: 1px solid var(--line); background: #fcfcfe; }
.cform-secure { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--gray-light); }
.cform-next { display: inline-flex; align-items: center; gap: 16px; background: none; border: 0; cursor: pointer; font-family: inherit; }
.cnext-hint { font-size: 13.5px; font-weight: 600; color: var(--gray); }
.cnext-btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--green), var(--green-dark)); box-shadow: 0 10px 24px rgba(0,161,75,.4); transition: transform .3s var(--ease); }
.cform-next:hover .cnext-btn { transform: translateX(3px) scale(1.05); }
.cform-foot.is-final .cnext-hint { color: var(--indigo); font-weight: 800; }
.cform-callcta { display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; margin-top: 18px; font-size: 14px; color: var(--gray); }
.cform-callcta a { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--green-dark); }
.cform-callcta a svg { color: var(--green); flex: 0 0 auto; }

@media (max-width: 1024px) {
  .cform-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
  .copts { grid-template-columns: 1fr; }
  .cfields { grid-template-columns: 1fr; }
  .cform { padding: 24px 20px 0; min-height: 0; }
  .cform-foot { margin: 20px -20px 0; padding: 16px 20px; flex-direction: column; align-items: stretch; gap: 12px; }
  .cnext-hint { display: none; }
  .cform-next { justify-content: flex-end; }
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-left { opacity: 0; transform: translateX(-44px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal-right { opacity: 0; transform: translateX(44px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal-left.in, .reveal-right.in { opacity: 1; transform: none; }
.d1 { transition-delay: 0.1s; } .d2 { transition-delay: 0.2s; } .d3 { transition-delay: 0.3s; } .d4 { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .insight-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 44px 24px; }
  .case-grid { grid-template-columns: 1fr 1fr; }
  .case-grid .case-card:last-child { grid-column: 1 / -1; min-height: 300px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

/* Header nav switches to the mobile drawer at its own, slightly wider
   breakpoint than the rest of the page — even with tight spacing, 8 nav
   items + Contact Us don't fit on one line below ~1000px. */
@media (max-width: 999px) {
  /* .main-nav goes fixed-position below (out of flex flow), so it can no
     longer be the thing that pushes nav-toggle to the right — do that here
     instead, same margin-left:auto trick as the desktop group. */
  .nav-toggle { display: flex; margin-left: auto; }
  .main-nav {
    position: fixed; inset: 0 0 0 auto; width: min(380px, 86vw);
    background: #fff; flex-direction: column; align-items: stretch; gap: 0;
    padding: 96px 28px 40px; z-index: 1100; overflow-y: auto;
    transform: translateX(100%); transition: transform 0.45s var(--ease);
    box-shadow: -20px 0 60px rgba(23, 21, 64, 0.18);
  }
  .main-nav.open { transform: none; }
  .main-nav > li > a { color: var(--ink) !important; padding: 16px 8px; font-size: 17px; border-bottom: 1px solid var(--line); border-radius: 0; justify-content: space-between; }
  .dropdown {
    position: static; transform: none; min-width: 0; box-shadow: none;
    grid-template-columns: 1fr; padding: 4px 0 10px;
    opacity: 1; visibility: hidden; pointer-events: auto; display: none;
  }
  .main-nav > li.open .dropdown { display: grid; visibility: visible; }
  /* stop the desktop mega-menu centering (-50%) from shifting the mobile submenu off-screen */
  .main-nav > li:hover .dropdown,
  .main-nav > li:focus-within .dropdown,
  .main-nav > li.open .dropdown { transform: none; left: auto; }
  .nav-backdrop {
    position: fixed; inset: 0; background: rgba(13, 12, 38, 0.5); z-index: 999;
    opacity: 0; visibility: hidden; transition: opacity 0.4s;
  }
  /* keep the header (and its X toggle) tappable above the backdrop when open */
  .site-header { z-index: 1000; }
  .nav-toggle { position: relative; z-index: 1101; }
  .nav-backdrop.show { opacity: 1; visibility: visible; }
  .header-cta { display: none; }

  /* The Google button is a DOM sibling right after .main-nav (not a child
     of it), so it can't sit inside the sliding drawer — instead it's
     pinned near the drawer's own top-right, just under the close (X)
     toggle (which stays in its normal fixed header position, at roughly
     top:12-46px/right:318-360px, even while the drawer is open), and only
     shown once the drawer is open, via the ~ sibling combinator on
     .main-nav.open. It can't sit flush beside the X — there's only ~150px
     of header width free there, nowhere near enough for this button at
     any width that avoids Google's internal text wrap — so it sits just
     below that row instead, at the drawer's own right padding. */
  .header-inner > [google-add-preferred-source-btn] { display: none; }
  .main-nav.open ~ [google-add-preferred-source-btn] {
    display: block !important;
    position: fixed !important;
    top: 58px !important; bottom: auto !important; left: auto !important;
    right: 28px !important;
    width: min(324px, calc(86vw - 56px)) !important;
    z-index: 1101;
  }
}

@media (max-width: 920px) {
  .section { padding: 72px 0; }

  .hero { min-height: 0; padding: 150px 0 90px; }
  .trust-grid, .split-block, .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .trust-visual .float-card { right: 10px; bottom: -24px; }
  .slide { grid-template-columns: 1fr; }
  .slide-visual { min-height: 220px; order: -1; }
  .slide-copy { padding: 36px 30px 44px; }
  .finder { padding: 48px 30px; }
  .finder-options { grid-template-columns: 1fr; }
  .proc { grid-template-columns: 1fr; gap: 34px; padding-top: 0; padding-left: 34px; }
  .proc-line { top: 14px; bottom: 14px; left: 13px; right: auto; width: 4px; height: auto; }
  .proc-line .ink { transform-origin: top; }
  .proc-line .pulse { left: 50%; }
  .proc-step { padding: 26px 26px 28px; }
  .proc-step .node { top: 26px; left: -33px; margin-left: 0; margin-top: 0; }
  .split-block .visual { min-height: 260px; }
}

@media (max-width: 600px) {
  .card-grid, .insight-grid, .case-grid, .feature-grid { grid-template-columns: 1fr; }
  .case-grid .case-card:last-child { grid-column: auto; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .footer-top { grid-template-columns: 1fr; gap: 38px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .contact-form { padding: 30px 22px; }
  .brand img { height: 38px; }
  .to-top { right: 18px; bottom: 82px; width: 42px; height: 42px; }
}

/* ============================================================
   OPENING ANIMATION (cinematic, premium)
   flood -> framed logo + sheen + tagline + loader -> AI pattern -> iris reveal
   ============================================================ */
html.intro-seen .intro { display: none !important; }
.intro {
  position: fixed; inset: 0; z-index: 100000; background: var(--indigo-deep);
  display: grid; place-items: center; overflow: hidden;
  clip-path: circle(150% at 50% 50%);
  animation: introOut .85s cubic-bezier(.7,0,.84,0) 3.05s forwards;
}
/* stage 1 : brand colour floods the screen */
.intro-fill {
  position: absolute; inset: 0; clip-path: circle(0% at 50% 50%);
  background: radial-gradient(120% 120% at 50% 26%, #32329e 0%, var(--indigo) 44%, var(--indigo-deep) 100%);
  animation: introFill .85s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-fill::after { /* faint moving AI grid texture */
  content: ""; position: absolute; inset: 0; opacity: .45;
  background-image: linear-gradient(rgba(127,224,171,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(127,224,171,.08) 1px, transparent 1px);
  background-size: 44px 44px; animation: introGrid 6s linear infinite;
}
.intro-fill::before { /* vignette for depth */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, transparent 36%, rgba(0,0,0,.45) 100%);
}
@keyframes introFill { to { clip-path: circle(150% at 50% 50%); } }
@keyframes introGrid { to { background-position: 44px 44px; } }

/* centred composition: box + tagline + loader */
.intro-stage { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 30px; }

/* stage 2 : framed box */
.intro-box {
  position: relative; width: min(86vw, 480px); height: min(56vw, 290px);
  display: grid; place-items: center; border-radius: 22px; overflow: hidden;
  opacity: 0; transform: scale(.88); animation: introBoxIn .8s cubic-bezier(.34,1.4,.5,1) .45s forwards, introBoxOut .5s ease 2.05s forwards;
}
.intro-box::before { /* glowing gradient frame */
  content: ""; position: absolute; inset: 0; border-radius: 22px; padding: 1.5px; opacity: .95;
  background: linear-gradient(135deg, var(--green), var(--blue), #6a5cff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  box-shadow: 0 0 50px rgba(27,157,217,.32);
}

/* logo appears large, holds, then dissolves */
.intro-logo {
  position: absolute; width: min(66%, 300px); opacity: 0; transform: scale(.94);
  animation: introLogoSeq 1.5s cubic-bezier(.16,1,.3,1) .7s forwards;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.4));
}
@keyframes introLogoSeq {
  0% { opacity: 0; transform: scale(.94); }
  22% { opacity: 1; transform: scale(1); }
  60% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.07); }
}
/* light sweep across the logo while it holds */
.intro-sheen {
  position: absolute; top: -12%; bottom: -12%; width: 55%; left: -65%; pointer-events: none; z-index: 2;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.24), transparent); transform: skewX(-16deg);
  animation: introSheen 1.15s ease-in-out 1.05s;
}
@keyframes introSheen { 0% { left: -65%; } 100% { left: 135%; } }

/* stage 3 : AI pattern blooms across the WHOLE screen after the logo dissolves */
.intro-pattern { position: absolute; inset: 0; z-index: 1; opacity: 0; animation: introPatShow .4s ease 1.9s forwards; }
.intro-pattern svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 6px rgba(27,157,217,.5)); }
@keyframes introPatShow { to { opacity: 1; } }
.intro-pattern line { stroke-dasharray: 240; stroke-dashoffset: 240; animation: introDraw .6s cubic-bezier(.16,1,.3,1) forwards; }
.intro-pattern line:nth-child(3n+1) { animation-delay: 1.95s; }
.intro-pattern line:nth-child(3n+2) { animation-delay: 2.10s; }
.intro-pattern line:nth-child(3n+3) { animation-delay: 2.25s; }
.intro-pattern circle { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: introPop .45s cubic-bezier(.34,1.56,.64,1) forwards; }
.intro-pattern circle:nth-child(odd) { animation-delay: 2.30s; }
.intro-pattern circle:nth-child(even) { animation-delay: 2.45s; }
/* energy rings bloom outward to fill the screen */
.intro-pattern::before, .intro-pattern::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  border: 2px solid rgba(127,224,171,.5); transform: scale(0); opacity: 0;
}
.intro-pattern::before { animation: introBloom 1.45s cubic-bezier(.2,.7,.3,1) 2.0s forwards; }
.intro-pattern::after { border-color: rgba(27,157,217,.5); animation: introBloom 1.45s cubic-bezier(.2,.7,.3,1) 2.35s forwards; }
@keyframes introBloom { 0% { transform: scale(0); opacity: .75; } 100% { transform: scale(42); opacity: 0; } }
@keyframes introBoxOut { to { opacity: 0; transform: scale(1.12); } }

/* scan line sweeps the box during the pattern phase */
.intro-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #7fe0ab, transparent); opacity: 0; box-shadow: 0 0 12px rgba(127,224,171,.7); animation: introScan 1.05s ease-in-out 2.0s forwards; }
@keyframes introScan { 0% { opacity: 0; transform: translateY(0); } 18% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; transform: translateY(min(56vw,290px)); } }

/* tagline reveal under the box */
.intro-tag {
  font-size: clamp(10px,1.4vw,12.5px); letter-spacing: .34em; text-transform: uppercase; font-weight: 600;
  color: rgba(255,255,255,.72); opacity: 0; transform: translateY(8px);
  animation: introTagSeq 1.5s var(--ease) .95s forwards;
}
@keyframes introTagSeq { 0% { opacity: 0; transform: translateY(8px); } 26% { opacity: 1; transform: none; } 62% { opacity: 1; } 100% { opacity: 0; transform: translateY(-4px); } }

/* minimal loader that completes as the site opens */
.intro-prog { width: min(60vw, 230px); height: 2px; border-radius: 2px; background: rgba(255,255,255,.16); overflow: hidden; }
.intro-prog i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--green), var(--blue), #6a5cff); box-shadow: 0 0 12px rgba(27,157,217,.6);
  animation: introProg 2.55s cubic-bezier(.5,0,.1,1) .5s forwards; }
@keyframes introProg { to { transform: scaleX(1); } }

@keyframes introBoxIn { to { opacity: 1; transform: scale(1); } }
@keyframes introDraw { to { stroke-dashoffset: 0; } }
@keyframes introPop { 0% { transform: scale(0); } 70% { transform: scale(1.28); } 100% { transform: scale(1); } }
/* iris reveal: the overlay closes to centre, revealing the site (mirrors the flood) */
@keyframes introOut { to { clip-path: circle(0% at 50% 50%); } }
body.intro-lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .intro { display: none !important; } }

/* ============================================================
   MOBILE: stack the ALIVE 3D fan into simple cards (no overflow)
   ============================================================ */
@media (max-width: 768px) {
  .alive-fan { height: auto; max-width: 100%; perspective: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0 0; }
  .acard { position: static; left: auto; top: auto; width: auto; height: auto; min-height: 190px; margin: 0; transform: none !important; transform-style: flat; }
  .acard-inner { position: relative; inset: auto; height: 100%; transform: none !important; background-color: var(--bg-soft); border-color: var(--line); }
  .acard .big { transform: scale(1) !important; opacity: 1; font-size: 42px; }
  .acard-body { opacity: 1 !important; transform: none !important; }
  .acard-glow { opacity: .4; transform: scale(1); }
  .motif { opacity: 1; }
}
@media (max-width: 460px) {
  .alive-fan { grid-template-columns: 1fr; }
  .acard { min-height: 0; }
}