/* ==========================================================================
   Happy Planet USA — design system v3
   紫色多巴胺风：紫罗兰 / 粉紫渐变 + 高弹性圆角 + 光晕
   ========================================================================== */

:root {
  /* Palette — purple dopamine */
  --ink:        #1a0b2e;     /* near-black with violet hint */
  --ink-2:      #2d1b4e;
  --ink-soft:   #5a4b7a;
  --ink-mute:   #8b7da8;
  --line:       #ede4f5;
  --line-2:     #dcc8ee;
  --bg:         #faf5ff;     /* lavender wash */
  --bg-2:       #ffffff;
  --bg-3:       #f3e8ff;

  --brand:      #7c3aed;     /* violet 600 */
  --brand-2:    #a855f7;     /* purple 500 */
  --brand-3:    #5b21b6;     /* violet 800 */
  --brand-4:    #ec4899;     /* pink 500 */
  --brand-5:    #f0abfc;     /* fuchsia 300 */
  --brand-soft: #f3e8ff;     /* violet 100 */
  --brand-glow: #c084fc;     /* purple 400 — for glows */

  --accent:     #fbbf24;     /* yellow pop */
  --accent-2:   #fcd34d;

  --success:    #a855f7;
  --warn:       #f43f5e;

  /* Geometry — bouncier, more rounded (dopamine feel) */
  --radius:    18px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  /* Shadows with purple tint */
  --shadow-xs: 0 2px 4px rgba(124, 58, 237, 0.06);
  --shadow-sm: 0 6px 18px rgba(124, 58, 237, 0.10);
  --shadow-md: 0 16px 40px rgba(124, 58, 237, 0.14);
  --shadow-lg: 0 30px 80px rgba(124, 58, 237, 0.18);
  --shadow-brand: 0 12px 36px rgba(168, 85, 247, 0.36);
  --shadow-pink:  0 12px 36px rgba(236, 72, 153, 0.32);

  --container: 1160px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--brand-3); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--brand); }

::selection { background: var(--brand-2); color: #fff; }

/* Layout */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 104px 0; }
.section--tight { padding: 72px 0; }
.section--alt { background: var(--bg-2); }
.section--ink { background: var(--ink); color: #e9d5ff; }

.section-head { text-align: center; margin: 0 auto 64px; max-width: 720px; }
.section-head .eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 700; color: var(--brand-3);
  text-transform: uppercase; letter-spacing: 0.18em;
  padding: 6px 14px;
  background: var(--brand-soft);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(168, 85, 247, 0.18);
}
.section-head h2 {
  font-size: clamp(30px, 4.2vw, 44px);
  margin: 18px 0 14px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.12;
}
.section-head p { color: var(--ink-soft); font-size: 17px; margin: 0; line-height: 1.6; }
.section--ink .section-head h2 { color: #fff; }
.section--ink .section-head p { color: #c4b5fd; }
.section--ink .section-head .eyebrow {
  background: rgba(255,255,255,0.08);
  color: #f0abfc;
  border-color: rgba(240, 171, 252, 0.2);
}

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 245, 255, 0.7);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(250, 245, 255, 0.92);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px; gap: 24px;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  font-weight: 700; color: var(--ink); font-size: 16.5px;
  letter-spacing: -0.01em;
}
.brand__mark {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 50%, var(--brand-4) 100%);
  border-radius: 12px;
  display: grid; place-items: center; color: #fff;
  font-weight: 800; font-size: 14px; letter-spacing: 0.5px;
  box-shadow: var(--shadow-brand);
  position: relative;
  overflow: hidden;
}
.brand__mark::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, transparent 50%);
  pointer-events: none;
}
.nav { display: flex; gap: 4px; align-items: center; }
.nav a {
  color: var(--ink-soft); padding: 10px 16px; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 500;
  transition: color .15s ease, background .15s ease;
}
.nav a:hover { background: var(--brand-soft); color: var(--brand-3); text-decoration: none; }
.nav a.is-active { color: var(--brand-3); background: var(--brand-soft); }
.lang-switch {
  display: inline-flex; gap: 2px; padding: 4px;
  background: #fff; border-radius: var(--radius-pill);
  margin-left: 8px; border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
}
.lang-switch a {
  padding: 6px 14px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600;
  color: var(--ink-soft);
  transition: all .15s ease;
}
.lang-switch a.is-active {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.lang-switch a:hover { color: var(--ink); text-decoration: none; }
.lang-switch a.is-active:hover { color: #fff; background: linear-gradient(135deg, var(--brand-3) 0%, var(--brand) 100%); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 600;
  border: 1.5px solid transparent;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.01em;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  position: relative;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn--primary {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 50%, var(--brand-4) 100%);
  background-size: 200% 200%;
  color: #fff;
  box-shadow: var(--shadow-brand);
  animation: gradientShift 6s ease infinite;
}
.btn--primary:hover { color: #fff; box-shadow: var(--shadow-pink); }
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.btn--ghost {
  background: #fff; color: var(--ink);
  border-color: var(--line-2);
}
.btn--ghost:hover { border-color: var(--brand); color: var(--brand-3); box-shadow: var(--shadow-sm); }
.btn--lg { padding: 17px 34px; font-size: 16px; }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ===== Hero v3 ===== */
.hero {
  position: relative;
  background:
    radial-gradient(50% 50% at 80% 0%, rgba(236, 72, 153, 0.18) 0%, transparent 60%),
    radial-gradient(40% 50% at 0% 100%, rgba(168, 85, 247, 0.22) 0%, transparent 60%),
    radial-gradient(30% 30% at 50% 50%, rgba(240, 171, 252, 0.10) 0%, transparent 70%),
    linear-gradient(180deg, #faf5ff 0%, #fce7f3 100%);
  padding: 130px 0 110px;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(124, 58, 237, 0.08) 1px, transparent 0);
  background-size: 32px 32px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 80%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  top: 20%; right: 8%;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.25) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(40px);
  animation: float 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-20px, 30px) scale(1.05); }
}
.hero__inner { position: relative; z-index: 1; }
.hero__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 80px; align-items: center;
}
.hero__eyebrow {
  display: inline-flex; gap: 8px; align-items: center;
  font-size: 13px; font-weight: 600;
  padding: 8px 16px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.8);
  color: var(--brand-3);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(168, 85, 247, 0.2);
  backdrop-filter: blur(10px);
}
.hero__eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-4) 100%);
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.18);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.18); }
  50% { box-shadow: 0 0 0 10px rgba(168, 85, 247, 0); }
}
.hero h1 {
  font-size: clamp(38px, 6vw, 68px);
  line-height: 1.05; font-weight: 800; margin: 24px 0 20px;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.hero h1 .accent {
  background: linear-gradient(120deg, var(--brand) 0%, var(--brand-2) 50%, var(--brand-4) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  display: inline-block;
}
.hero p.lede {
  font-size: 19px; color: var(--ink-soft);
  margin: 0 0 36px; max-width: 560px; line-height: 1.55;
}
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__trust {
  display: flex; align-items: center; gap: 24px;
  margin-top: 40px; flex-wrap: wrap;
}
.hero__trust-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ink-soft); font-weight: 500;
}
.hero__trust-item strong {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-4) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800; font-size: 16px;
}
.hero__trust-divider { width: 1px; height: 16px; background: var(--line-2); }

/* Hero visual: floating glass card with gradient border */
.hero__visual {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: var(--radius-xl);
  padding: 36px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
}
.hero__visual::before {
  content: ""; position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 50%, var(--brand-4) 100%);
  border-radius: var(--radius-xl);
  z-index: -1;
  opacity: 0.6;
}
.hero__visual-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px;
}
.hero__visual-head h3 {
  margin: 0; font-size: 13px; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700;
}
.hero__visual-tag {
  font-size: 11px; font-weight: 700; color: #fff;
  padding: 5px 12px; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-4) 100%);
  letter-spacing: 0.04em;
}
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.checklist li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 15px; color: var(--ink-2);
}
.checklist .ico {
  flex: 0 0 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-4) 100%);
  color: #fff;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  box-shadow: 0 4px 10px rgba(168, 85, 247, 0.3);
}
.hero__visual-foot {
  margin-top: 24px; padding-top: 22px;
  border-top: 1px solid rgba(124, 58, 237, 0.12);
  display: flex; align-items: center; gap: 12px;
  font-size: 12.5px; color: var(--ink-soft);
}
.hero__visual-foot .avatars { display: flex; }
.hero__visual-foot .avatars span {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  border: 2.5px solid #fff;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #fff;
  margin-left: -8px;
  box-shadow: var(--shadow-xs);
}
.hero__visual-foot .avatars span:nth-child(2) { background: linear-gradient(135deg, var(--brand-4) 0%, var(--brand-5) 100%); }
.hero__visual-foot .avatars span:nth-child(3) { background: linear-gradient(135deg, var(--brand-2) 0%, var(--brand-5) 100%); }
.hero__visual-foot .avatars span:first-child { margin-left: 0; }

@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding: 80px 0 72px; }
  .nav { display: none; }
}

/* ===== Logo strip ===== */
.logos {
  background: linear-gradient(180deg, var(--bg) 0%, #fce7f3 100%);
  padding: 40px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.logos__label {
  text-align: center; font-size: 12px;
  color: var(--ink-mute); text-transform: uppercase;
  letter-spacing: 0.18em; font-weight: 600;
  margin-bottom: 20px;
}
.logos__row {
  display: flex; gap: 48px; flex-wrap: wrap;
  align-items: center; justify-content: center;
}
.logos__row span {
  font-size: 16px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--ink-soft);
  font-family: var(--font);
  opacity: 0.75;
  transition: opacity .2s ease;
}
.logos__row span:hover { opacity: 1; }

/* ===== Cards v3 ===== */
.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
  .grid--3, .grid--2, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid--3, .grid--2, .grid--4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--bg-2);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-5);
}
.card .ico {
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg, var(--brand-soft) 0%, #fce7f3 100%);
  color: var(--brand-3);
  display: grid; place-items: center;
  margin-bottom: 20px;
  transition: transform .25s ease, background .25s ease, color .25s ease;
  box-shadow: var(--shadow-xs);
}
.card:hover .ico {
  transform: scale(1.08) rotate(-6deg);
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-4) 100%);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.card h3 {
  margin: 0 0 10px; font-size: 19px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--ink);
}
.card p { margin: 0 0 18px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }
.card ul { padding: 0; margin: 0; list-style: none; display: grid; gap: 10px; }
.card ul li {
  font-size: 14px; color: var(--ink-2);
  padding-left: 24px; position: relative;
  line-height: 1.5;
}
.card ul li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 16px; height: 16px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-4) 100%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/></svg>");
  background-size: 11px; background-repeat: no-repeat; background-position: center;
  border-radius: 50%;
}

.card--service::after {
  content: "→";
  position: absolute; right: 28px; top: 32px;
  font-size: 22px; color: var(--ink-mute);
  transition: transform .2s ease, color .2s ease;
  font-weight: 300;
}
.card--service:hover::after {
  color: var(--brand);
  transform: translateX(4px);
}

.card--featured {
  background: linear-gradient(135deg, var(--brand-3) 0%, var(--brand) 50%, var(--brand-4) 100%);
  color: #fce7f3;
  border-color: transparent;
  position: relative;
}
.card--featured h3 { color: #fff; }
.card--featured p { color: #e9d5ff; }
.card--featured ul li { color: #f5d0fe; }
.card--featured ul li::before {
  background: rgba(255,255,255,0.25);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/></svg>");
}
.card--featured .ico {
  background: rgba(255,255,255,0.18);
  color: #fff;
  backdrop-filter: blur(8px);
}

.callout {
  background: linear-gradient(135deg, #fdf4ff 0%, #fce7f3 100%);
  border: 1.5px solid #f0abfc;
  color: #581c87;
  border-radius: var(--radius);
  padding: 20px 24px;
  font-size: 14px;
  line-height: 1.6;
}
.callout strong { color: #4c1d95; font-weight: 700; }

/* Banner */
.banner {
  background: linear-gradient(135deg, var(--brand-soft) 0%, #fce7f3 100%);
  color: var(--ink);
  border-radius: var(--radius-xl);
  padding: 32px 36px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  flex-wrap: wrap;
  border: 1.5px solid rgba(168, 85, 247, 0.2);
  position: relative;
  overflow: hidden;
}
.banner::before {
  content: ""; position: absolute;
  left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-4) 100%);
}
.banner strong { font-weight: 700; color: var(--ink); }
.banner .banner-body { font-size: 14px; color: var(--ink-soft); margin-top: 6px; }

/* Process timeline */
.steps { display: grid; gap: 20px; grid-template-columns: repeat(5, 1fr); }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px; position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--brand-5); }
.step__num {
  font-weight: 800; font-size: 13px; color: #fff;
  letter-spacing: 0.1em;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-4) 100%);
  display: inline-block;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.step h4 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--ink); }
.step p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }

/* Pricing */
.plan {
  background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 40px 32px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.plan--highlight {
  border-color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #fdf4ff 100%);
  box-shadow: var(--shadow-md);
  position: relative;
}
.plan--highlight::before {
  content: "Most popular";
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 50%, var(--brand-4) 100%);
  color: #fff;
  padding: 6px 16px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: var(--shadow-brand);
}
.plan h3 { margin: 0; font-size: 19px; font-weight: 700; color: var(--ink); }
.plan .price {
  font-size: 36px; font-weight: 800; color: var(--ink);
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--brand-3) 0%, var(--brand-4) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.plan .price small { font-size: 14px; color: var(--ink-soft); font-weight: 500; -webkit-text-fill-color: var(--ink-soft); }
.plan .desc { margin: 0; color: var(--ink-soft); font-size: 14px; }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.plan ul li {
  font-size: 14px; color: var(--ink-2);
  padding-left: 26px; position: relative;
  line-height: 1.5;
}
.plan ul li::before {
  content: "✓";
  color: var(--brand); font-weight: 800;
  position: absolute; left: 0; top: 0;
  font-size: 15px;
}
.plan hr { border: none; border-top: 1px solid var(--line); margin: 0; }

/* FAQ */
.faq details {
  background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 12px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.faq details:hover { border-color: var(--brand-5); }
.faq details[open] {
  border-color: var(--brand);
  box-shadow: var(--shadow-sm);
  background: linear-gradient(180deg, #ffffff 0%, #fdf4ff 100%);
}
.faq summary {
  cursor: pointer;
  font-weight: 600; padding: 4px 0;
  list-style: none;
  color: var(--ink);
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 22px; color: var(--ink-mute);
  font-weight: 400;
  transition: transform .25s ease, color .25s ease;
  flex-shrink: 0;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
  color: var(--brand);
}
.faq details[open] summary { color: var(--brand-3); }
.faq details p { color: var(--ink-soft); margin: 14px 0 4px; font-size: 15px; line-height: 1.6; }

/* Contact form */
.contact-grid { display: grid; gap: 32px; grid-template-columns: 1.15fr 0.85fr; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }
form.contact-form {
  display: grid; gap: 18px;
  background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--radius-xl); padding: 36px;
  box-shadow: var(--shadow-sm);
}
form.contact-form label {
  font-size: 13px; color: var(--ink); font-weight: 600;
  margin-bottom: -10px;
}
form.contact-form input, form.contact-form select, form.contact-form textarea {
  width: 100%; padding: 14px 16px;
  border-radius: 14px;
  border: 1.5px solid var(--line-2);
  font-size: 15px; font-family: inherit;
  background: #fff;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
form.contact-form input:focus, form.contact-form select:focus, form.contact-form textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.15);
}
form.contact-form textarea { resize: vertical; min-height: 120px; }
form.contact-form button[type="submit"] { margin-top: 8px; }
.contact-card {
  background: linear-gradient(135deg, var(--brand-3) 0%, var(--brand) 60%, var(--brand-4) 100%);
  color: #fce7f3;
  border-radius: var(--radius-xl); padding: 36px;
  display: grid; gap: 20px; align-content: start;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.contact-card::before {
  content: ""; position: absolute;
  top: -50%; right: -20%;
  width: 80%; height: 200%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.15) 0%, transparent 60%);
  pointer-events: none;
}
.contact-card h3 { margin: 0; color: #fff; font-size: 19px; position: relative; z-index: 1; }
.contact-card a { color: #f0abfc; }
.contact-card a:hover { color: #fff; }
.contact-card .row { font-size: 15px; position: relative; z-index: 1; }
.contact-card .row small {
  display: block; opacity: 0.7; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: 5px; font-weight: 700;
  color: #f0abfc;
}
.contact-card .row span { color: #fff; }

/* Stats */
.stats {
  display: grid; gap: 32px;
  grid-template-columns: repeat(4, 1fr);
  padding: 56px 0;
  border-top: 1.5px solid var(--line);
  border-bottom: 1.5px solid var(--line);
}
@media (max-width: 880px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat__num {
  font-size: clamp(36px, 4.5vw, 52px); font-weight: 800;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-4) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.stat__label { font-size: 14px; color: var(--ink-soft); margin-top: 8px; font-weight: 500; }

/* Footer */
.site-footer {
  background: linear-gradient(180deg, #1a0b2e 0%, #0f0520 100%);
  color: #c4b5fd;
  padding: 80px 0 36px;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: ""; position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 60%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-2), var(--brand-4), transparent);
}
.site-footer a { color: #c4b5fd; }
.site-footer a:hover { color: #fff; }
.site-footer h5 {
  color: #fff; font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.12em; margin: 0 0 16px; font-weight: 700;
}
.site-footer .footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px;
  margin-bottom: 48px;
}
@media (max-width: 880px) { .site-footer .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .site-footer .footer-grid { grid-template-columns: 1fr; } }
.site-footer .brand { color: #fff; margin-bottom: 16px; }
.site-footer p { font-size: 14px; line-height: 1.6; color: #a78bfa; margin: 0; }
.site-footer .links { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; font-size: 14px; }
.site-footer .disclaimer {
  font-size: 12.5px; color: #6d28d9; line-height: 1.65;
  border-top: 1px solid rgba(124, 58, 237, 0.15); padding-top: 24px;
}
.site-footer .disclaimer strong { color: #c4b5fd; }
.site-footer .copy { font-size: 12.5px; color: #6d28d9; margin-top: 18px; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .40s; }

/* CTA block */
.cta-block {
  background: linear-gradient(135deg, var(--brand-3) 0%, var(--brand) 50%, var(--brand-4) 100%);
  background-size: 200% 200%;
  animation: gradientShift 10s ease infinite;
  color: #fce7f3;
  border-radius: var(--radius-xl);
  padding: 64px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.cta-block::before {
  content: "";
  position: absolute;
  top: -50%; right: -10%;
  width: 60%; height: 200%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.cta-block::after {
  content: "";
  position: absolute;
  bottom: -30%; left: -10%;
  width: 50%; height: 150%;
  background: radial-gradient(ellipse at center, rgba(240, 171, 252, 0.3) 0%, transparent 60%);
  pointer-events: none;
}
.cta-block h2 {
  color: #fff; margin: 0 0 14px;
  font-size: clamp(26px, 3.8vw, 36px);
  letter-spacing: -0.025em;
  position: relative; z-index: 1;
}
.cta-block p {
  color: #f5d0fe; margin: 0 auto 28px;
  max-width: 580px; font-size: 17px;
  position: relative; z-index: 1;
}
.cta-block .btn { position: relative; z-index: 1; }
.cta-block .btn--primary {
  background: #fff;
  color: var(--brand-3);
  box-shadow: 0 12px 32px rgba(0,0,0,0.2);
  animation: none;
}
.cta-block .btn--primary:hover { background: var(--brand-soft); color: var(--brand-3); }

.muted { color: var(--ink-mute); font-size: 14px; }
.divider { height: 1px; background: var(--line); margin: 64px 0; }

/* ==========================================================================
   v3.1 — Tech / Sci-fi overlay
   ========================================================================== */

/* Top scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 50%, var(--brand-4) 100%);
  background-size: 200% 100%;
  transform-origin: left;
  transform: scaleX(0);
  z-index: 100;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.6);
  transition: transform 0.1s linear;
}

/* Grid background in hero — techy */
.hero__grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(168, 85, 247, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image:
    radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
  -webkit-mask-image:
    radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
  pointer-events: none;
  opacity: 0.7;
}

/* Scanning line — animated */
.hero__scan {
  position: absolute;
  left: 0; right: 0;
  height: 80px;
  top: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(168, 85, 247, 0.06) 50%, transparent 100%);
  pointer-events: none;
  animation: scan 7s linear infinite;
  z-index: 0;
}
@keyframes scan {
  0% { transform: translateY(-80px); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(700px); opacity: 0; }
}

/* Floating tech badges around hero visual */
.hero__float {
  position: absolute;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-3);
  border: 1px solid rgba(168, 85, 247, 0.18);
  box-shadow: var(--shadow-sm);
  display: inline-flex; gap: 8px; align-items: center;
  z-index: 2;
  white-space: nowrap;
}
.hero__float::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18);
  animation: pulse 2s ease-in-out infinite;
}
.hero__float--a { top: -8px; left: -20px; animation: bobA 6s ease-in-out infinite; }
.hero__float--b { top: 38%; right: -36px; animation: bobB 7s ease-in-out infinite; }
.hero__float--c { bottom: -10px; left: 30%; animation: bobC 8s ease-in-out infinite; }
@keyframes bobA { 0%,100%{transform:translate(0,0)} 50%{transform:translate(8px,-6px)} }
@keyframes bobB { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-6px,8px)} }
@keyframes bobC { 0%,100%{transform:translate(0,0)} 50%{transform:translate(10px,-4px)} }

/* Tech corner brackets — sci-fi frame on hero visual */
.tech-frame {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  pointer-events: none;
  z-index: 3;
}
.tech-frame::before, .tech-frame::after {
  content: "";
  position: absolute;
  width: 24px; height: 24px;
  border: 2px solid var(--brand-2);
}
.tech-frame::before {
  top: 14px; left: 14px;
  border-right: none; border-bottom: none;
  border-top-left-radius: 6px;
}
.tech-frame::after {
  bottom: 14px; right: 14px;
  border-left: none; border-top: none;
  border-bottom-right-radius: 6px;
}

/* Shine sweep on btn--primary */
.btn--primary {
  overflow: hidden;
  isolation: isolate;
}
.btn--primary::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  transition: left 0.6s ease;
  pointer-events: none;
}
.btn--primary:hover::before { left: 100%; }

/* Service card — animated tech ring on icon */
.card--service .ico {
  position: relative;
}
.card--service .ico::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 19px;
  background: conic-gradient(
    from 0deg,
    var(--brand) 0%,
    var(--brand-2) 25%,
    var(--brand-4) 50%,
    var(--brand-2) 75%,
    var(--brand) 100%
  );
  opacity: 0;
  transition: opacity .3s ease;
  z-index: -1;
  animation: spin 4s linear infinite paused;
}
.card--service:hover .ico::before {
  opacity: 1;
  animation-play-state: running;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Stats — monospace numbers with blinking colon */
.stats {
  position: relative;
  overflow: hidden;
}
.stats::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(168, 85, 247, 0.08) 50%,
    transparent 100%);
  animation: statsSweep 5s linear infinite;
  pointer-events: none;
}
@keyframes statsSweep {
  0% { left: -100%; }
  100% { left: 100%; }
}
.stat__num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  position: relative;
}
.stat__num::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  margin-left: 6px;
  vertical-align: super;
  animation: blink 1.4s ease-in-out infinite;
  box-shadow: 0 0 8px var(--brand-glow);
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* Tech corner brackets on cards */
.card {
  position: relative;
}
.card::before,
.card::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border-color: rgba(168, 85, 247, 0);
  border-style: solid;
  border-width: 0;
  transition: border-color .3s ease;
  pointer-events: none;
}
.card::before {
  top: 8px; left: 8px;
  border-top-width: 2px;
  border-left-width: 2px;
  border-top-left-radius: 4px;
}
.card::after {
  bottom: 8px; right: 8px;
  border-bottom-width: 2px;
  border-right-width: 2px;
  border-bottom-right-radius: 4px;
}
.card:hover::before,
.card:hover::after {
  border-color: var(--brand-2);
}

/* Mono-code accent for eyebrow tech labels */
.eyebrow {
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
  letter-spacing: 0.18em;
}

/* CTA block — animated code-like stripes */
.cta-block .code-stripes {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 28px,
      rgba(255, 255, 255, 0.04) 28px,
      rgba(255, 255, 255, 0.04) 29px
    );
  pointer-events: none;
  opacity: 0.6;
}

/* Footer — circuit lines */
.site-footer {
  position: relative;
}
.site-footer::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--brand) 20%,
    var(--brand-2) 50%,
    var(--brand-4) 80%,
    transparent 100%);
  opacity: 0.6;
}

/* Process step connector line (animated) */
.steps {
  position: relative;
}
.steps::before {
  content: "";
  position: absolute;
  top: 56px;
  left: 8%; right: 8%;
  height: 2px;
  background: linear-gradient(90deg,
    var(--brand) 0%,
    var(--brand-2) 50%,
    var(--brand-4) 100%);
  opacity: 0.18;
  z-index: 0;
}
@media (max-width: 980px) {
  .steps::before { display: none; }
}
.step { position: relative; z-index: 1; }

/* Lang switch — chip with corner brackets when active */
.lang-switch a.is-active {
  position: relative;
}
.lang-switch a.is-active::before,
.lang-switch a.is-active::after {
  content: "";
  position: absolute;
  width: 5px; height: 5px;
  border: 1.5px solid #fff;
  opacity: 0.8;
}
.lang-switch a.is-active::before {
  top: -2px; left: -2px;
  border-right: none; border-bottom: none;
}
.lang-switch a.is-active::after {
  bottom: -2px; right: -2px;
  border-left: none; border-top: none;
}

/* ==========================================================================
   v3.2 — Tech polish round 2
   ========================================================================== */

/* --- 1. In-card status panel (replaces floating chips) --- */
.status-panel {
  display: grid;
  gap: 10px;
  margin: 0 0 18px 0;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.06) 0%, rgba(236, 72, 153, 0.04) 100%);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: 14px;
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
}
.status-panel__row {
  display: grid;
  grid-template-columns: 10px 90px 1fr;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  line-height: 1.3;
}
.status-panel__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(30, 164, 137, 0.15);
  animation: statusBeat 1.8s ease-in-out infinite;
  justify-self: center;
}
.status-panel__row:nth-child(2) .status-panel__dot { background: var(--brand-2); box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18); animation-delay: .3s; }
.status-panel__row:nth-child(3) .status-panel__dot { background: var(--brand-4); box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.18); animation-delay: .6s; }
.status-panel__lbl {
  font-size: 10px; font-weight: 700;
  color: var(--ink-mute);
  text-transform: uppercase; letter-spacing: 0.1em;
  white-space: nowrap;
}
.status-panel__val {
  font-size: 13px; font-weight: 700;
  color: var(--brand-3);
  font-variant-numeric: tabular-nums;
  text-align: right;
}



/* --- 1. Improved hero__float: status-card style (replaces simple chips) --- */
.hero__float {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px 10px;
  padding: 10px 14px;
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.hero__float::before { grid-row: span 2; }
.hero__float .lbl {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  margin-bottom: 2px;
}
.hero__float .val {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-3);
  font-variant-numeric: tabular-nums;
}

/* --- 2. Data stream background (right edge of hero) --- */
.hero__data-stream {
  position: absolute;
  top: 0; bottom: 0;
  right: 0;
  width: 130px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
}
.hero__data-stream::before,
.hero__data-stream::after {
  content: "01001000 01100101 01101100 01110000 01000110 01101111 01110010 01101101 01100001 01110100 01101001 01101111 01101110\A00110001 00110010 00110011 01000110 01001010 01001010 00110000 00110010 00110010 00110000 00110010\A01001000 01100101 01101100 01110000 01000110 01101111 01110010 01101101 01100001 01110100 01101001 01101111 01101110\A00110000 00110000 00110001 00110000 00110000 00110001 00110001 00110000 00110000 00110001 00110001 00110000";
  white-space: pre-wrap;
  position: absolute;
  top: -100%;
  left: 8px;
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
  font-size: 11px;
  line-height: 18px;
  color: var(--brand);
  animation: dataFlow 14s linear infinite;
  opacity: 0.55;
}
.hero__data-stream::after {
  left: 50px;
  color: var(--brand-2);
  animation-duration: 18s;
  animation-direction: reverse;
  opacity: 0.45;
}
@keyframes dataFlow {
  0% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* --- 3. Real-time status badge (top-right of hero visual) --- */
.status-badge {
  position: absolute;
  top: -10px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  border-radius: 999px;
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  text-transform: uppercase;
  z-index: 4;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.4);
}
.status-badge::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff;
  animation: statusBeat 1.6s ease-in-out infinite;
  box-shadow: 0 0 6px #fff;
}
@keyframes statusBeat {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.5; }
}

/* --- 4. Hero visual live progress bar --- */
.live-progress {
  margin-top: 18px;
  padding: 14px 16px;
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: 12px;
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
}
.live-progress__head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--ink-mute); margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.live-progress__head strong { color: var(--brand-3); font-weight: 700; font-size: 12px; }
.live-progress__bar {
  height: 6px;
  background: rgba(124, 58, 237, 0.12);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.live-progress__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 50%, var(--brand-4) 100%);
  background-size: 200% 100%;
  border-radius: 999px;
  animation: fillBar 6s ease-in-out infinite alternate, gradientShift 4s ease infinite;
  box-shadow: 0 0 12px var(--brand-glow);
}
@keyframes fillBar {
  0% { width: 20%; }
  100% { width: 88%; }
}

/* --- 5. Flowing dots on process steps connector --- */
.steps::after {
  content: "";
  position: absolute;
  top: 55px;
  left: 8%; right: 8%;
  height: 2px;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle, var(--brand-2) 0%, var(--brand-2) 30%, transparent 31%);
  background-size: 20px 2px;
  background-repeat: repeat-x;
  animation: dotFlow 4s linear infinite;
}
@keyframes dotFlow {
  0% { background-position: -20px 0; }
  100% { background-position: 200% 0; }
}

/* --- 6. Service card icon: ambient breathing glow --- */
.card .ico {
  animation: ambientGlow 3s ease-in-out infinite;
}
@keyframes ambientGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); }
  50% { box-shadow: 0 0 0 6px rgba(168, 85, 247, 0.08); }
}
.card:hover .ico { animation: none; }

/* --- 7. Stats prefix + suffix with mono font --- */
.stat__num {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
}
.stat__num .pre,
.stat__num .post {
  font-size: 0.5em;
  font-weight: 600;
  color: var(--brand);
  -webkit-text-fill-color: var(--brand);
  opacity: 0.85;
}

/* --- 8. Click ripple --- */
.btn { overflow: hidden; }
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  pointer-events: none;
  transform: scale(0);
  animation: ripple 0.7s ease-out;
}
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* --- 9. Scroll-down indicator --- */
.scroll-indicator {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--brand-3);
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  z-index: 2;
  opacity: 0.7;
  animation: scrollBob 2.4s ease-in-out infinite;
}
.scroll-indicator::after {
  content: "";
  width: 18px; height: 28px;
  border: 1.5px solid var(--brand-3);
  border-radius: 12px;
  position: relative;
}
.scroll-indicator .dot {
  width: 3px; height: 6px;
  background: var(--brand-3);
  border-radius: 2px;
  margin-top: -22px;
  animation: scrollDot 2s ease-in-out infinite;
}
@keyframes scrollBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}
@keyframes scrollDot {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}

/* --- 10. Subtle tech "scan" line on every card hover --- */
.card--service::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transition: left 0.7s ease;
  pointer-events: none;
  z-index: 1;
}
.card--service:hover::before { left: 150%; }

/* --- 11. Floating tiny dot particles around hero (CSS only) --- */
.hero__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.hero__particles span {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 8px var(--brand-glow);
  animation: particleFloat 8s linear infinite;
  opacity: 0;
}
.hero__particles span:nth-child(1) { left: 10%; top: 30%; animation-delay: 0s; background: var(--brand); }
.hero__particles span:nth-child(2) { left: 20%; top: 70%; animation-delay: 1s; background: var(--brand-2); }
.hero__particles span:nth-child(3) { left: 35%; top: 20%; animation-delay: 2s; background: var(--brand-4); }
.hero__particles span:nth-child(4) { left: 55%; top: 80%; animation-delay: 3s; background: var(--brand); }
.hero__particles span:nth-child(5) { left: 75%; top: 25%; animation-delay: 4s; background: var(--brand-2); }
.hero__particles span:nth-child(6) { left: 88%; top: 60%; animation-delay: 5s; background: var(--brand-4); }
.hero__particles span:nth-child(7) { left: 45%; top: 50%; animation-delay: 6s; background: var(--brand-5); }
.hero__particles span:nth-child(8) { left: 65%; top: 35%; animation-delay: 7s; background: var(--brand); }
@keyframes particleFloat {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translate(40px, -60px); opacity: 0; }
}

/* ==========================================================================
   v3.4 — Strong purple gradient throughout
   ========================================================================== */

/* --- 1. Body global purple wash --- */
body {
  background:
    linear-gradient(180deg,
      #faf5ff 0%,
      #f5edff 25%,
      #fce7f3 60%,
      #fdf4ff 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* --- 2. Ambient global gradient (fixed, behind everything) --- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(60% 40% at 10% 10%, rgba(168, 85, 247, 0.18) 0%, transparent 60%),
    radial-gradient(50% 50% at 90% 30%, rgba(236, 72, 153, 0.16) 0%, transparent 60%),
    radial-gradient(40% 40% at 50% 80%, rgba(192, 132, 252, 0.14) 0%, transparent 60%),
    radial-gradient(35% 35% at 80% 90%, rgba(244, 114, 182, 0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
  animation: ambientShift 18s ease-in-out infinite alternate;
}
@keyframes ambientShift {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.08) translate(-2%, -2%); }
}

/* --- 3. Hero: more layers, bigger glow --- */
.hero {
  background:
    radial-gradient(50% 50% at 90% 10%, rgba(236, 72, 153, 0.32) 0%, transparent 55%),
    radial-gradient(45% 45% at 0% 100%, rgba(168, 85, 247, 0.38) 0%, transparent 55%),
    radial-gradient(40% 40% at 50% 50%, rgba(192, 132, 252, 0.20) 0%, transparent 65%),
    radial-gradient(35% 35% at 80% 80%, rgba(244, 114, 182, 0.18) 0%, transparent 65%),
    radial-gradient(60% 80% at 30% 0%, rgba(124, 58, 237, 0.20) 0%, transparent 60%),
    linear-gradient(135deg,
      #faf5ff 0%,
      #f3e8ff 30%,
      #fce7f3 60%,
      #fbcfe8 100%);
}
.hero::after {
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.4) 0%, transparent 65%) !important;
  filter: blur(60px);
}

/* --- 4. Section alternate: tinted gradient instead of white --- */
.section--alt {
  background:
    linear-gradient(180deg,
      #fdf4ff 0%,
      #faf5ff 50%,
      #f5edff 100%);
  position: relative;
}
.section--alt::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 30% at 80% 20%, rgba(168, 85, 247, 0.10) 0%, transparent 60%),
    radial-gradient(40% 30% at 20% 80%, rgba(236, 72, 153, 0.08) 0%, transparent 60%);
  pointer-events: none;
}
.section--alt > .container { position: relative; z-index: 1; }

/* --- 5. Cards: subtle purple gradient background --- */
.card {
  background:
    linear-gradient(180deg,
      #ffffff 0%,
      #fdfaff 50%,
      #faf5ff 100%);
}

/* --- 6. Stats section background: stronger violet glow --- */
.stats {
  background:
    linear-gradient(180deg,
      rgba(168, 85, 247, 0.06) 0%,
      rgba(236, 72, 153, 0.06) 100%);
}

/* --- 7. Banner — stronger purple gradient --- */
.banner {
  background:
    linear-gradient(135deg,
      #f3e8ff 0%,
      #fce7f3 50%,
      #fdf4ff 100%);
  border: 1.5px solid rgba(168, 85, 247, 0.3);
}

/* --- 8. Footer — deeper purple with multiple glows --- */
.site-footer {
  background:
    radial-gradient(60% 50% at 20% 20%, rgba(124, 58, 237, 0.4) 0%, transparent 60%),
    radial-gradient(60% 50% at 80% 80%, rgba(236, 72, 153, 0.3) 0%, transparent 60%),
    linear-gradient(180deg, #1a0b2e 0%, #0f0520 50%, #1a0b2e 100%);
}

/* --- 9. Logo strip: tinted gradient --- */
.logos {
  background:
    linear-gradient(180deg,
      rgba(250, 245, 255, 0.5) 0%,
      rgba(252, 231, 243, 0.6) 50%,
      rgba(250, 245, 255, 0.5) 100%);
}

/* --- 10. FAQ: opened card gets a richer gradient --- */
.faq details[open] {
  background: linear-gradient(180deg, #fdfaff 0%, #f3e8ff 60%, #fce7f3 100%);
}

/* --- 11. Form / pricing card backgrounds --- */
form.contact-form {
  background:
    linear-gradient(180deg, #ffffff 0%, #fdfaff 100%);
}
.plan {
  background:
    linear-gradient(180deg, #ffffff 0%, #fdf4ff 100%);
}
.plan--highlight {
  background:
    linear-gradient(180deg, #ffffff 0%, #fce7f3 50%, #f3e8ff 100%);
}

/* --- 12. Header — slight purple tint on stuck state --- */
.site-header {
  background: rgba(250, 245, 255, 0.78);
}
.site-header.is-stuck {
  background: rgba(250, 245, 255, 0.94);
}

/* --- 13. Stronger brand-color button (bigger color spread) --- */
.btn--primary {
  background: linear-gradient(120deg,
    var(--brand) 0%,
    var(--brand-2) 35%,
    var(--brand-4) 75%,
    var(--brand-5) 100%);
}

/* --- 14. Service card icon default state — more saturated --- */
.card .ico {
  background:
    linear-gradient(135deg, #ede4ff 0%, #fce7f3 100%);
  color: var(--brand-3);
}

/* --- 15. Plan price gradient (wider spread) --- */
.plan .price {
  background: linear-gradient(120deg,
    var(--brand-3) 0%,
    var(--brand) 40%,
    var(--brand-4) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- 16. Stat number gradient (wider spread) --- */
.stat__num {
  background: linear-gradient(120deg,
    var(--brand-3) 0%,
    var(--brand) 35%,
    var(--brand-4) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- 17. Hero h1 accent — saturated gradient --- */
.hero h1 .accent {
  background: linear-gradient(120deg,
    var(--brand) 0%,
    var(--brand-2) 35%,
    var(--brand-4) 75%,
    var(--brand-5) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- 18. Site-wide subtle scrolling tint --- */
.hero__trust-item strong {
  background: linear-gradient(120deg,
    var(--brand) 0%,
    var(--brand-2) 50%,
    var(--brand-4) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- 19. Section eyebrow — saturated gradient text --- */
.eyebrow {
  background: linear-gradient(120deg, #f3e8ff 0%, #fce7f3 100%);
  color: var(--brand-3);
}
.section--ink .eyebrow {
  background: linear-gradient(120deg, rgba(168, 85, 247, 0.2) 0%, rgba(236, 72, 153, 0.2) 100%);
  color: #f5d0fe;
}

/* --- 20. Why-us card hover — bigger color shift --- */
.card:hover .ico {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 50%, var(--brand-4) 100%);
}

/* ==========================================================================
   v3.5 — Back-to-main link in header
   ========================================================================== */
.site-header__inner {
  position: relative;
}
.site-header__back {
  position: absolute;
  top: -10px; left: 24px;
  display: inline-flex; gap: 6px; align-items: center;
  font-size: 11px; font-weight: 600;
  color: var(--ink-mute);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: all .15s ease;
  text-decoration: none;
}
.site-header__back:hover {
  color: var(--brand-3);
  border-color: var(--brand-5);
  background: var(--brand-soft);
  text-decoration: none;
  transform: translateX(-2px);
}
.site-header__back .back-arrow {
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font);
}
@media (max-width: 880px) {
  .site-header__back { display: none; }
}