/* ============================================================
   HeyAspi — Hero Landing Page · WhatsApp Edition
   ============================================================ */

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

:root {
  --hh: 68px;
  --ib: 60px;

  /* HeyAspi Brand Tokens v1.0 ------------------------- */
  --bg:        #F1F1EC;                    /* Slightly darker Off-White for card contrast */
  --bg-card:   #FFFFFF;
  --bg-card-h: #FBFBF7;
  --border:    #DDDDD5;                    /* Stronger Stone for visible borders */
  --border-a:  rgba(122,158,126,0.45);     /* Sage focus border */

  /* Sage ist Primärakzent */
  --accent:    #7A9E7E;                    /* Sage */
  --accent2:   #4E7352;                    /* Sage Deep */
  --accent-lt: #A8C4A8;                    /* Sage Light */
  --accent-mist: #E8F0E8;                  /* Sage Mist */
  --accent-gl: rgba(122,158,126,0.30);

  /* Navy / Texte — readable on Off-White */
  --text:      #263545;                    /* Navy */
  --text-dim:  #586B7C;                    /* darker Navy Soft for body text */
  --text-mut:  #8B9AAB;                    /* legible muted (was Stone Mid) */
  --visor:     #1A1F2E;                    /* Visor Dark */

  /* Semantik */
  --c-amber:   #D68910;                    /* Warning */
  --c-teal:    #2E7D52;                    /* Success */
  --c-error:   #C0392B;
  --c-info:    #2E6DA4;

  /* Radien (Brand Guide) */
  --r:  8px;
  --rm: 12px;
  --rl: 12px;
  --r-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(38,53,69,.06);
  --shadow-md: 0 4px 16px rgba(38,53,69,.10);
  --shadow-lg: 0 12px 32px rgba(38,53,69,.14);
}

html {
  overflow-x: hidden;
}
body {
  min-height: 100%;
  overflow-x: hidden;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle 600px at 0% 0%, rgba(122,158,126,.10) 0%, transparent 65%),
    radial-gradient(circle 500px at 100% 100%, rgba(122,158,126,.06) 0%, transparent 65%),
    linear-gradient(rgba(38,53,69,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38,53,69,.025) 1px, transparent 1px);
  background-size: 100vw 100vh, 100vw 100vh, 48px 48px, 48px 48px;
  background-position: 0 0, 100% 100%, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-attachment: fixed, fixed, fixed, fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.6;
}

/* Brand-Headlines durchgehend Nunito */
h1, h2, h3, h4, h5, h6,
.hero-title,
.prob-title,
.gradient-text,
.foot-brand-name,
.logo-name {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  letter-spacing: -.01em;
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--hh);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  z-index: 200;
  background: rgba(246,246,242,0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: default;
  user-select: none;
}
.logo-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(34,197,94,.3);
}
.logo-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  flex-shrink: 0;
}
.logo-img {
  height: 44px;
  width: auto;
  display: block;
  object-fit: contain;
}
/* Wordmark next to brand mark: "Hey" in Navy, "Aspi" in Sage
   (per brand guide). The HTML <span> contains the literal text
   "HeyAspi" — we hide it visually and use ::before/::after
   pseudo-elements to render the two-tone version. */
.logo-name {
  font-size: 0;          /* hide the original "HeyAspi" text node */
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  font-family: 'Nunito', sans-serif;
}
.logo-name::before {
  content: "Hey";
  font-family: 'Nunito', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.02em;
}
.logo-name::after {
  content: "Aspi";
  font-family: 'Nunito', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -.02em;
}

@media (max-width: 480px) {
  .logo-name::before,
  .logo-name::after {
    font-size: 1.1rem;
  }
}
.header-actions { display: flex; align-items: center; gap: 8px; }

.btn-ghost-sm {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: var(--r);
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-dim);
  text-decoration: none;
  border: 1px solid transparent;
  font-family: inherit;
  transition: color .18s, background .18s, border-color .18s;
}
.btn-ghost-sm:hover {
  color: var(--text);
  background: var(--bg-card);
  border-color: var(--border);
}
.btn-header-login {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  font-size: .875rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  background: transparent;
  border: 1.5px solid transparent;
  font-family: inherit;
  transition: color .18s, background .18s, border-color .18s;
}
.btn-header-login:hover {
  color: var(--accent2);
  background: var(--accent-mist);
  border-color: rgba(122,158,126,.35);
}

/* ---- Language switcher (DE | EN pill toggle) ---- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  margin-right: 6px;
}
.lang-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 5px 10px;
  font-family: 'Nunito', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-dim);
  text-decoration: none;
  border-radius: var(--r-pill);
  transition: color .18s, background .18s;
}
.lang-opt:hover {
  color: var(--text);
}
.lang-opt.is-active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 3px rgba(122,158,126,.35);
}
.lang-opt.is-active:hover {
  color: #fff;
}

@media (max-width: 480px) {
  .lang-switch {
    margin-right: 4px;
  }
  .lang-opt {
    min-width: 28px;
    padding: 4px 8px;
    font-size: .68rem;
  }
}

.btn-header-cta {
  display: inline-flex;
  align-items: center;
  padding: 9px 22px;
  border-radius: var(--r-pill);
  font-size: .875rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: var(--accent);
  box-shadow: var(--shadow-sm);
  font-family: inherit;
  transition: background .18s, transform .18s, box-shadow .18s;
}
.btn-header-cta:hover {
  background: var(--accent2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

@media (max-width: 480px) {
  .btn-header-login {
    padding: 8px 14px;
    font-size: .82rem;
  }
  .btn-header-cta {
    padding: 8px 16px;
    font-size: .82rem;
  }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  padding-top: var(--hh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
  z-index: 0;
}
.bg-glow--1 {
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(122,158,126,.18), transparent 70%);
  top: -160px;
  left: -160px;
}
.bg-glow--2 {
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(122,158,126,.12), transparent 70%);
  bottom: -60px;
  right: -60px;
}
.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(38,53,69,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38,53,69,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, #000 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, #000 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.hero-inner {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  padding: 0 60px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 1;
  min-height: 0;
  overflow: hidden;
}

/* ============================================================
   LINKE SPALTE
   ============================================================ */
.hero-left {
  flex: 1 1 0;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-mist);
  border: 1px solid rgba(122,158,126,.35);
  font-size: .775rem;
  font-weight: 600;
  color: var(--accent2);
  width: fit-content;
}
.badge-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.8); }
}

/* Titel */
.hero-title {
  font-size: clamp(2rem, 3.2vw, 3.4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--text);
  font-family: 'Nunito', sans-serif;
}
.gradient-text {
  color: var(--accent);
  background: none;
  -webkit-text-fill-color: var(--accent);
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
}
@keyframes gradmove {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* Untertitel */
.hero-sub {
  font-size: .975rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 440px;
}

/* CTAs */
.hero-ctas { display: flex; align-items: center; gap: 12px; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  font-size: .95rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: var(--accent);
  box-shadow: var(--shadow-md);
  font-family: inherit;
  letter-spacing: -.005em;
  transition: transform .25s ease, box-shadow .25s ease, background .2s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  background: var(--accent2);
  box-shadow: var(--shadow-lg);
}
.btn-primary:active {
  transform: translateY(0);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  padding: 13px 22px;
  border-radius: var(--r-pill);
  font-size: .92rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  background: transparent;
  border: 1.5px solid var(--accent);
  font-family: inherit;
  transition: color .2s, background .2s, border-color .2s;
}
.btn-secondary:hover {
  color: var(--text);
  background: var(--bg-card-h);
  border-color: rgba(255,255,255,.14);
}

/* Trust-Note (ispod CTA) */
.hero-trustnote {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: -10px;
}
.hero-note-main {
  font-size: .82rem;
  line-height: 1.4;
  color: var(--text);
  font-weight: 600;
}
.hero-note-bonus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  line-height: 1.4;
  color: var(--text-dim);
}
.hero-note-bonus svg {
  color: var(--accent);
  flex-shrink: 0;
}

/* Warum-Liste */
.warum-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.warum-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .84rem;
  font-weight: 400;
  color: var(--text-dim);
}
.warum-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-mist);
  border: 1px solid rgba(122,158,126,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent2);
}

/* Trust-Zeile (jedna linija) */
.hero-trust {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  font-size: .82rem;
  color: var(--text-dim);
}
.trust-stars {
  font-size: .95rem;
  color: var(--c-amber);
  line-height: 1;
}
.trust-text {
  font-size: .82rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.trust-text strong {
  color: var(--text);
  font-weight: 700;
}
.trust-bullet {
  color: var(--text-mut);
  font-size: .9rem;
  line-height: 1;
}
.trust-avatars { display: flex; align-items: center; }
.av {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .58rem;
  font-weight: 700;
  color: #fff;
  border: 2px solid var(--bg);
  margin-right: -5px;
  flex-shrink: 0;
}
.av--1    { background: var(--accent2); }
.av--2    { background: var(--accent); }
.av--3    { background: #0d9488; }
.av--more { background: var(--text-mut); font-size: .5rem; }

/* ============================================================
   RECHTE SPALTE — WHATSAPP CHAT
   ============================================================ */
.hero-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.chat-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Grüner Glow hinter dem Phone */
.chat-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,197,94,.22), transparent 65%);
  pointer-events: none;
  z-index: 0;
  filter: blur(8px);
  animation: chat-glow-pulse 6s ease-in-out infinite;
}

@keyframes chat-glow-pulse {
  0%, 100% { opacity: .85; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.04); }
}

/* Phone-Frame — blago "lebdi" i ima subtilan green halo */
.chat-phone {
  position: relative;
  z-index: 1;
  width: 308px;
  border-radius: 22px;
  background: #0c1e0f;
  border: 1px solid rgba(34,197,94,.18);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 40px 80px rgba(0,0,0,.75),
    0 20px 40px rgba(0,0,0,.4),
    0 0 80px rgba(34,197,94,.12);
  filter: brightness(1.08) contrast(1.05);
  animation: chat-float 7s ease-in-out infinite;
}

@keyframes chat-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-phone,
  .chat-glow { animation: none; }
}

/* ---- Chat Header ---- */
.chat-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(0,0,0,.2);
  border-bottom: 1px solid var(--border);
}
.cha-wrap { position: relative; flex-shrink: 0; }
.cha-av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(122,158,126,.35);
}
.cha-av img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 2px;
}
.cha-dot {
  position: absolute;
  bottom: 1px;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-lt);
  border: 2px solid #0c1e0f;
}
.cha-info { flex: 1; min-width: 0; }
.cha-name { font-size: .8rem; font-weight: 600; color: #ffffff; }
.cha-status { font-size: .66rem; color: var(--accent-lt); font-weight: 400; }
.cha-icons {
  display: flex;
  gap: 10px;
  color: rgba(255,255,255,.28);
}

/* ---- Chat Body ---- */
.chat-body {
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #0a190d;
  height: 420px;
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* Gradient hint at top/bottom that there's more to scroll */
  background:
    linear-gradient(#0a190d 30%, transparent),
    linear-gradient(transparent, #0a190d 70%) 0 100%,
    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.4), transparent),
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.4), transparent) 0 100%;
  background-repeat: no-repeat;
  background-color: #0a190d;
  background-size: 100% 14px, 100% 14px, 100% 6px, 100% 6px;
  background-attachment: local, local, scroll, scroll;
  scrollbar-width: thin;
  scrollbar-color: rgba(122,158,126,.35) transparent;
}
.chat-body::-webkit-scrollbar { width: 4px; }
.chat-body::-webkit-scrollbar-track { background: transparent; }
.chat-body::-webkit-scrollbar-thumb {
  background: rgba(122,158,126,.35);
  border-radius: 4px;
}
.chat-date-sep {
  text-align: center;
  font-size: .62rem;
  color: var(--text-mut);
  background: rgba(255,255,255,.05);
  border-radius: 10px;
  padding: 2px 10px;
  width: fit-content;
  margin: 0 auto 4px;
}

/* ---- Message bubbles ---- */
.cmsg {
  display: flex;
  flex-direction: column;
  max-width: 86%;
  opacity: 0; /* hidden until animation plays */
}
.cmsg-out { align-self: flex-end; align-items: flex-end; }
.cmsg-in  { align-self: flex-start; align-items: flex-start; }

.cbubble {
  padding: 8px 12px;
  border-radius: 14px;
  font-size: .78rem;
  line-height: 1.55;
  font-weight: 400;
}
.cmsg-out .cbubble {
  background: #166534;
  color: #f0fdf4;
  border-bottom-right-radius: 4px;
}
.cmsg-in .cbubble {
  background: #ffffff;
  color: #1a1f2e;
  border: 1px solid rgba(255,255,255,.12);
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.cmsg-in .cbubble strong {
  color: #4E7352;
  font-weight: 700;
}

/* Success variant */
.cbubble-ok {
  background: #ecfdf5 !important;
  border-color: rgba(34,197,94,.35) !important;
  color: #1a1f2e !important;
}
.cbubble-ok strong { color: #166534 !important; }

/* Inner text helpers (readable on white incoming bubble) */
.cm-gray {
  font-size: .72rem;
  color: #6B8299;
  font-weight: 500;
}
.cm-q {
  font-size: .75rem;
  color: #1a1f2e;
  font-weight: 600;
}
.cm-plat {
  font-size: .68rem;
  color: #4E7352;
  font-weight: 600;
  display: block;
  margin-top: 3px;
}

/* "HeyAspi" author label with avatar above incoming bubbles */
.cm-author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 5px 2px;
}
.cm-author-pic {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  border: 1px solid rgba(255,255,255,.18);
  flex-shrink: 0;
  display: block;
}
.cm-author-name {
  font-family: 'Nunito', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -.005em;
  line-height: 1;
}
.cm-author-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-lt);
  box-shadow: 0 0 6px rgba(168,196,168,.7);
  animation: pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

/* Meta / time */
.cmeta {
  font-size: .6rem;
  color: var(--text-mut);
  margin-top: 3px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.cticks { color: var(--c-teal); font-size: .65rem; }

/* ---- Typing indicator ---- */
.cbubble-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px !important;
}
.tdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-lt);
  display: block;
  animation: tdot 1.2s ease-in-out infinite;
}
.tdot:nth-child(2) { animation-delay: .22s; }
.tdot:nth-child(3) { animation-delay: .44s; }
@keyframes tdot {
  0%,100% { transform: translateY(0); opacity: .4; }
  50%     { transform: translateY(-4px); opacity: 1; }
}

/* ---- Input bar ---- */
.chat-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(0,0,0,.2);
  border-top: 1px solid var(--border);
}
.ci-field {
  flex: 1;
  font-size: .72rem;
  color: var(--text-mut);
  background: rgba(255,255,255,.06);
  border-radius: 20px;
  padding: 7px 12px;
  font-family: inherit;
}
.ci-send {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}

/* ============================================================
   CHAT MESSAGE ANIMATIONS — 13s loop
   ============================================================

   Timing plan (seconds):
   0.0 – 0.6   : empty
   0.6 – 1.2   : msg-1 appears
   1.2 – 2.1   : typing-1 visible
   2.1 – 2.7   : msg-2 appears
   2.7 – 4.0   : pause (user reads)
   4.0 – 4.6   : msg-3 appears
   4.6 – 5.4   : typing-2 visible
   5.4 – 6.0   : msg-4 appears
   6.0 – 10.0  : all visible
   10.0 – 11.5 : all fade out
   11.5 – 13.0 : empty pause → restart

   ============================================================ */

@keyframes cmsg-1 {
  0%, 4%    { opacity: 0; transform: translateY(8px); }
  9%, 77%   { opacity: 1; transform: translateY(0); }
  89%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes ctyping-1 {
  0%, 8%    { opacity: 0; }
  12%, 15%  { opacity: 1; }
  18%, 100% { opacity: 0; }
}
@keyframes cmsg-2 {
  0%, 15%   { opacity: 0; transform: translateY(8px); }
  21%, 77%  { opacity: 1; transform: translateY(0); }
  89%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes cmsg-3 {
  0%, 30%   { opacity: 0; transform: translateY(8px); }
  35%, 77%  { opacity: 1; transform: translateY(0); }
  89%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes ctyping-2 {
  0%, 34%   { opacity: 0; }
  37%, 41%  { opacity: 1; }
  45%, 100% { opacity: 0; }
}
@keyframes cmsg-4 {
  0%, 41%   { opacity: 0; transform: translateY(8px); }
  46%, 77%  { opacity: 1; transform: translateY(0); }
  89%, 100% { opacity: 0; transform: translateY(0); }
}

.anim-1        { animation: cmsg-1    13s ease-in-out infinite; }
.anim-typing-1 { animation: ctyping-1 13s ease-in-out infinite; }
.anim-2        { animation: cmsg-2    13s ease-in-out infinite; }
.anim-3        { animation: cmsg-3    13s ease-in-out infinite; }
.anim-typing-2 { animation: ctyping-2 13s ease-in-out infinite; }
.anim-4        { animation: cmsg-4    13s ease-in-out infinite; }

/* ============================================================
   FLOATING CARDS
   ============================================================ */
.float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--rm);
  background: rgba(28,28,32,.96);
  border: 1px solid rgba(34,197,94,.18);
  box-shadow: 0 12px 28px rgba(0,0,0,.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 3;
  white-space: nowrap;
}
/* Float cards sit OUTSIDE the phone, not overlapping it */
.float-tl {
  top: 32px;
  left: -180px;
  animation: floaty 4s ease-in-out infinite;
}
.float-br {
  bottom: 80px;
  right: -180px;
  animation: floaty 4s ease-in-out infinite;
  animation-delay: 2s;
}
/* Below 1280px the chat-wrap parent isn't wide enough to fit them
   outside the phone; scale them in a bit so they don't overflow */
@media (max-width: 1279px) and (min-width: 1024px) {
  .float-tl { left: -130px; }
  .float-br { right: -130px; }
}
@keyframes floaty {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}
.fc-ico {
  font-size: 1rem;
  flex-shrink: 0;
  line-height: 1;
}
.fc-title { font-size: .74rem; font-weight: 600; color: var(--text); }
.fc-sub   { font-size: .65rem; color: var(--text-dim); margin-top: 1px; }

/* ============================================================
   INTEGRATIONS STRIP
   ============================================================ */
.int-strip {
  position: relative;
  z-index: 1;
  height: var(--ib);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border-top: 1px solid var(--border);
  background: rgba(28,28,32,.75);
  backdrop-filter: blur(10px);
}
.int-label { font-size: .72rem; color: var(--text-mut); font-weight: 500; flex-shrink: 0; }
.int-items { display: flex; align-items: center; gap: 16px; }
.int-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .74rem;
  font-weight: 500;
  color: rgba(255,255,255,.28);
  cursor: default;
  transition: color .2s;
}
.int-item:hover { color: rgba(255,255,255,.55); }
.int-sep { color: var(--text-mut); opacity: .3; font-size: .9rem; }
.int-item--soon { opacity: .72; }
.soon-tag {
  font-size: .58rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 20px;
  background: rgba(34,197,94,.13);
  color: var(--accent-lt);
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ============================================================
   PROBLEM SEKTION
   ============================================================ */

.prob-section {
  position: relative;
  background: #181820;
  padding: 130px 0 140px;
  overflow: hidden;
}

/* Dunkler Trennstreifen oben */
.prob-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08) 30%, rgba(255,255,255,.08) 70%, transparent);
}

/* Schwacher Hintergrund-Glow rechts oben */
.prob-section::after {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220,38,38,.06), transparent 65%);
  pointer-events: none;
}

.prob-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
  display: flex;
  align-items: center;
  gap: 80px;
  position: relative;
  z-index: 1;
}

/* ============================================================
   LINKE SPALTE
   ============================================================ */
.prob-left {
  flex: 1 1 0;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* Tag "Das Problem" */
.prob-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px 5px 10px;
  border-radius: 50px;
  background: rgba(251,146,60,.1);
  border: 1px solid rgba(251,146,60,.25);
  font-size: .72rem;
  font-weight: 600;
  color: #fb923c;
  width: fit-content;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Titel */
.prob-title {
  font-size: clamp(2rem, 3.2vw, 3.2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--text);
}

/* Subhead */
.prob-sub {
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255,255,255,.78);
  max-width: 480px;
}

/* 2×2 Grid — više zraka */
.prob-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 8px;
}

/* Einzelne Problem-Karte */
.prob-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 20px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  transition: border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.prob-card:hover {
  background: rgba(251,146,60,.05);
  border-color: rgba(251,146,60,.35);
  transform: translateY(-2px);
  box-shadow:
    0 10px 30px -12px rgba(251,146,60,.25),
    0 0 0 1px rgba(251,146,60,.12);
}
.prob-card:hover .prob-icon {
  background: rgba(251,146,60,.18);
  border-color: rgba(251,146,60,.4);
  color: #fdba74;
}

/* "Hot" kartica — najjača (Überblick-Verlust) */
.prob-card--hot {
  background: linear-gradient(180deg, rgba(251,146,60,.05) 0%, rgba(251,146,60,.01) 100%);
  border-color: rgba(251,146,60,.22);
}
.prob-card--hot .prob-icon {
  background: rgba(251,146,60,.16);
  border-color: rgba(251,146,60,.32);
}

/* Icon-Container — malo jači, jači ton narandžaste */
.prob-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(251,146,60,.12);
  border: 1px solid rgba(251,146,60,.28);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fb923c;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}

/* Karten-Titel */
.pct {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: -.01em;
}

/* Karten-Text */
.pcd {
  font-size: .84rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-dim);
}

/* MONEY TRIGGER — Banner unter den Cards */
.prob-money {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 16px 22px;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff7ed 0%, #fefaf3 100%);
  border: 1px solid rgba(214,137,16,.28);
  border-left: 4px solid #D68910;
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
  box-shadow: 0 2px 8px rgba(214,137,16,.08);
  width: fit-content;
  max-width: 100%;
}
.prob-money-text {
  white-space: normal;
}
.prob-money strong {
  color: #B97308;
  font-weight: 800;
  white-space: nowrap;
}
.prob-money-ic {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(214,137,16,.16);
  color: #B97308;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@media (max-width: 540px) {
  .prob-money {
    padding: 14px 18px;
    font-size: .94rem;
    gap: 12px;
  }
  .prob-money-ic {
    width: 28px;
    height: 28px;
  }
}

/* ============================================================
   RECHTE SPALTE — CHAOS VISUAL
   ============================================================ */
.prob-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chaos-wrap {
  position: relative;
  width: 440px;
  height: 420px;
}

/* Soft amber background glow behind chaos (light-theme friendly) */
.chaos-glow {
  position: absolute;
  inset: -40px;
  background: radial-gradient(ellipse at 50% 50%, rgba(214,137,16,.10), transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* SVG dashed connector lines */
.chaos-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ---- Base chaos card — light, premium, slightly tilted ---- */
.cc {
  position: absolute;
  z-index: 2;
  width: 178px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 4px 8px rgba(38,53,69,.06),
    0 16px 36px -10px rgba(38,53,69,.18);
}

/* Card header */
.cc-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #FAFAF6;
  border-bottom: 1px solid var(--border);
}
.cc-ic {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(38,53,69,.10);
}
.cc-nm {
  font-family: 'Nunito', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  color: var(--text);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  letter-spacing: -.005em;
}
.cc-badge {
  font-size: .62rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: #DC2626;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(220,38,38,.18);
  animation: badge-pulse 2.2s ease-in-out infinite;
  letter-spacing: -.02em;
}
.cc-badge.red { background: #DC2626; }

@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(220,38,38,.18); }
  50%      { box-shadow: 0 0 0 6px rgba(220,38,38,.10); }
}
@media (prefers-reduced-motion: reduce) {
  .cc-badge { animation: none; }
}

/* Card body */
.cc-body {
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Contact row */
.cc-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cc-av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(38,53,69,.12);
}
.cc-av.sm { width: 18px; height: 18px; }

/* CRM row */
.cc-crm-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Chat bubbles in card */
.cc-chat-out { display: flex; justify-content: flex-end; }
.cc-chat-in  { display: flex; justify-content: flex-start; }
.cc-chat-out .csk {
  background: var(--accent-mist) !important;
  border-radius: 10px 10px 2px 10px;
  height: 10px;
  padding: 0 6px;
}
.cc-chat-in .csk {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px 10px 10px 2px;
  height: 10px;
}

/* Skeleton lines (text placeholders) */
.csk {
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, #E8E8E2 0%, #F0F0EB 50%, #E8E8E2 100%);
  display: block;
}
.csk.cdim {
  background: linear-gradient(90deg, #F0F0EB 0%, #F6F6F2 50%, #F0F0EB 100%);
}
.csk.w40   { width: 40%; }
.csk.w45   { width: 45%; }
.csk.w50   { width: 50%; }
.csk.w55   { width: 55%; }
.csk.w60   { width: 60%; }
.csk.w65   { width: 65%; }
.csk.w70   { width: 70%; }
.csk.w75   { width: 75%; }
.csk.w80   { width: 80%; }
.csk.mb3   { margin-bottom: 3px; }

/* Mini bar chart */
.mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 56px;
}
.mb-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-lt) 100%);
  border-radius: 3px 3px 0 0;
  opacity: 1 !important;
}

/* ---- Card positions: visible chaos via tilt + overlap (no blur) ---- */
.cc-1 {
  top: 0;
  left: 0;
  --r: -5deg;
  transform: rotate(var(--r));
  z-index: 5;
  animation: chaos-float 6s ease-in-out infinite;
  animation-delay: 0s;
}
.cc-2 {
  top: 18px;
  left: 200px;
  --r: 5.5deg;
  transform: rotate(var(--r));
  z-index: 3;
  animation: chaos-float 7s ease-in-out infinite;
  animation-delay: .9s;
}
.cc-3 {
  top: 168px;
  left: -8px;
  --r: -3deg;
  transform: rotate(var(--r));
  z-index: 6;
  animation: chaos-float 6.5s ease-in-out infinite;
  animation-delay: 1.6s;
}
.cc-4 {
  top: 158px;
  left: 218px;
  --r: 7deg;
  transform: rotate(var(--r));
  z-index: 4;
  animation: chaos-float 7.5s ease-in-out infinite;
  animation-delay: .4s;
}
.cc-5 {
  top: 320px;
  left: 80px;
  --r: -4deg;
  transform: rotate(var(--r));
  z-index: 5;
  width: 200px;
  animation: chaos-float 6.8s ease-in-out infinite;
  animation-delay: 2.2s;
}

@keyframes chaos-float {
  0%, 100% { transform: rotate(var(--r)) translateY(0); }
  50%      { transform: rotate(var(--r)) translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .cc-1, .cc-2, .cc-3, .cc-4, .cc-5 { animation: none; }
}

/* Soft fade at bottom — uses body bg, not hardcoded dark */
.chaos-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--bg) 90%);
  pointer-events: none;
  z-index: 10;
}

/* Floating notification badges */
.cnot {
  position: absolute;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 999px;
  background: #DC2626;
  color: white;
  font-family: 'Nunito', sans-serif;
  font-size: .68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 7;
  animation: notif-float 3s ease-in-out infinite;
  border: 2px solid #fff;
  box-shadow:
    0 4px 12px rgba(220,38,38,.35),
    0 0 0 4px rgba(220,38,38,.10);
  letter-spacing: -.02em;
}
.cn-1 { top: -8px; left: 158px; animation-delay: 0s; }
.cn-2 {
  top: 130px;
  left: 380px;
  animation-delay: 1.2s;
  background: #D68910;
  box-shadow:
    0 4px 12px rgba(214,137,16,.35),
    0 0 0 4px rgba(214,137,16,.10);
}
.cn-3 { top: 290px; left: 360px; animation-delay: 0.6s; }

@keyframes notif-float {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-6px) scale(1.08); }
}

/* ============================================================
   LÖSUNG SEKTION
   ============================================================ */

.sol-section {
  position: relative;
  background: #1e1e22;
  padding: 130px 0 140px;
  overflow: hidden;
}

.sol-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,197,94,.22) 30%, rgba(34,197,94,.22) 70%, transparent);
}

.sol-section::after {
  content: '';
  position: absolute;
  top: -140px; left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,197,94,.07), transparent 65%);
  pointer-events: none;
}

.sol-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  position: relative;
  z-index: 1;
}

/* ---- Kopf ---- */
.sol-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  max-width: 640px;
}

.sol-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px 5px 10px;
  border-radius: 50px;
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.25);
  font-size: .72rem;
  font-weight: 600;
  color: var(--accent-lt);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sol-title {
  font-size: clamp(2.2rem, 3.5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--text);
}

.sol-gradient {
  background: linear-gradient(135deg, #86efac 0%, #4ade80 45%, #22c55e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200%;
  animation: gradmove 5s ease-in-out infinite alternate;
}

.sol-sub {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-dim);
  max-width: 520px;
}

/* ============================================================
   HAUPTVISUELL: Befehl → Ergebnisse
   ============================================================ */

.sol-visual {
  width: 100%;
  max-width: 820px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(34,197,94,.22);
  border-radius: 24px;
  padding: 44px 52px;
  display: flex;
  align-items: center;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 0 80px rgba(34,197,94,.12),
    0 0 0 1px rgba(34,197,94,.06),
    0 40px 80px rgba(0,0,0,.45);
  position: relative;
  overflow: hidden;
}

/* Subtiler Glow innen oben */
.sv-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(34,197,94,.1), transparent 60%),
    radial-gradient(circle at 15% 100%, rgba(34,197,94,.06), transparent 55%);
  pointer-events: none;
}

/* Label über Command / Ergebnissen */
.sv-label {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mut);
  margin-bottom: 16px;
}

/* ---- Linke Spalte: User-Befehl ---- */
.sv-left {
  flex: 0 0 230px;
  display: flex;
  flex-direction: column;
}

.sv-cmd {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(180deg, #0e2513 0%, #091a0d 100%);
  border: 1px solid rgba(34,197,94,.32);
  border-radius: 16px;
  box-shadow:
    0 8px 28px rgba(0,0,0,.55),
    0 0 28px rgba(34,197,94,.18),
    inset 0 1px 0 rgba(255,255,255,.04);
  opacity: 0;
  transform: translateY(10px);
}

.sv-cmd-img { flex-shrink: 0; border-radius: 6px; overflow: hidden; }

.sv-cmd-body { flex: 1; min-width: 0; }

.sv-cmd-text {
  font-size: .88rem;
  font-weight: 500;
  color: #f0fdf4;
  line-height: 1.4;
  margin-bottom: 10px;
}

.sv-cmd-meta {
  font-size: .62rem;
  color: var(--text-mut);
  display: flex;
  align-items: center;
  gap: 3px;
}

.sv-ticks { color: var(--c-teal); }

/* ---- Mitte: Pfeil ---- */
.sv-arrow {
  flex: 0 0 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 20px;
  animation: sv-arrow-pulse 2.2s ease-in-out infinite;
}

@keyframes sv-arrow-pulse {
  0%, 100% { opacity: .4; transform: translateX(0); }
  50%      { opacity: 1;  transform: translateX(5px); }
}

/* ---- Rechte Spalte: Ergebnisse ---- */
.sv-right {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sv-results {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Einzelne Ergebnis-Zeile */
.ritem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(34,197,94,.045);
  border: 1px solid rgba(34,197,94,.12);
  opacity: 0;
  transform: translateY(10px);
}

.ri-left {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--text);
}

.ri-plat {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}

.ri-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(34,197,94,.15);
  border: 1px solid rgba(34,197,94,.3);
  color: var(--accent-lt);
  font-size: .72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(.55);
}

/* Zadnji item — highlight (AHA-moment) */
.ritem-5 {
  background: rgba(34,197,94,.07);
  border-color: rgba(34,197,94,.22);
}

/* ============================================================
   RESULT ANIMATIONS — scroll-triggered, pazljivo orkestrirano
   ============================================================ */

@keyframes sol-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sol-check-pop {
  0%   { opacity: 0; transform: scale(.55); box-shadow: 0 0 0 rgba(34,197,94,0); }
  60%  { opacity: 1; transform: scale(1.15); box-shadow: 0 0 14px rgba(34,197,94,.5); }
  100% { opacity: 1; transform: scale(1);    box-shadow: 0 0 0 rgba(34,197,94,0); }
}

@keyframes sol-ritem-last {
  from { box-shadow: 0 0 0 rgba(34,197,94,0); }
  to   { box-shadow: 0 0 22px rgba(34,197,94,.22); }
}

/* Komandu pusti prvo */
.sol-visual.is-visible .sv-cmd {
  animation: sol-in 260ms 120ms ease-out forwards;
}

/* 500ms pauza pa 5 output-itema, stagger 170ms, svaki 220ms */
.sol-visual.is-visible .ritem-1 { animation: sol-in 220ms 720ms  ease-out forwards; }
.sol-visual.is-visible .ritem-2 { animation: sol-in 220ms 890ms  ease-out forwards; }
.sol-visual.is-visible .ritem-3 { animation: sol-in 220ms 1060ms ease-out forwards; }
.sol-visual.is-visible .ritem-4 { animation: sol-in 220ms 1230ms ease-out forwards; }
.sol-visual.is-visible .ritem-5 {
  animation:
    sol-in 220ms 1400ms ease-out forwards,
    sol-ritem-last 500ms 1700ms ease-out forwards;
}

/* Checkmark pop — kasni ~100ms iza item-a */
.sol-visual.is-visible .ritem-1 .ri-check { animation: sol-check-pop 380ms 820ms  ease-out forwards; }
.sol-visual.is-visible .ritem-2 .ri-check { animation: sol-check-pop 380ms 990ms  ease-out forwards; }
.sol-visual.is-visible .ritem-3 .ri-check { animation: sol-check-pop 380ms 1160ms ease-out forwards; }
.sol-visual.is-visible .ritem-4 .ri-check { animation: sol-check-pop 380ms 1330ms ease-out forwards; }
.sol-visual.is-visible .ritem-5 .ri-check { animation: sol-check-pop 380ms 1500ms ease-out forwards; }

/* Speed-badge ulazi nakon zadnjeg itema */
.sol-visual.is-visible .sv-speed {
  animation: sol-in 400ms 1800ms ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .sol-visual .sv-cmd,
  .sol-visual .ritem,
  .sol-visual .ri-check,
  .sol-visual .sv-speed { opacity: 1; transform: none; animation: none; }
}

/* ============================================================
   MICRO BENEFITS
   ============================================================ */

.sol-micro {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.sol-mi {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .84rem;
  color: var(--text-dim);
}

.mi-ok {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.25);
  color: var(--accent-lt);
  font-size: .68rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mi-dot {
  color: var(--text-mut);
  opacity: .35;
  font-size: 1.1rem;
}

/* Speed-Badge — aha moment, ulazi nakon zadnjeg output-itema */
.sv-speed {
  position: absolute;
  top: 16px;
  right: 22px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.35);
  color: var(--accent-lt);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 4px 18px rgba(34,197,94,.22);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transform: translateY(6px);
}
.sv-speed svg {
  color: var(--accent-lt);
  flex-shrink: 0;
}

/* ============================================================
   FEATURES SEKTION
   ============================================================ */

.feat-section {
  position: relative;
  background: #181820;
  padding: 130px 0 120px;
  overflow: hidden;
}

.feat-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08) 30%, rgba(255,255,255,.08) 70%, transparent);
}

.feat-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
  position: relative;
  z-index: 1;
}

/* ---- Section Header ---- */
.feat-head {
  text-align: center;
  margin-bottom: 100px;
}

.feat-htitle {
  font-size: clamp(1.75rem, 2.8vw, 2.8rem);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.025em;
  line-height: 1.18;
  max-width: 680px;
  margin: 0 auto;
}

/* ---- Feature Block (zig-zag) ---- */
.feat-block {
  display: flex;
  align-items: center;
  gap: 80px;
  padding: 80px 0;
  border-bottom: 1px solid rgba(255,255,255,.055);
}
.feat-block:last-child { border-bottom: none; padding-bottom: 40px; }
.feat-block--rev { flex-direction: row-reverse; }

/* ---- Text Column ---- */
.fb-text {
  flex: 1 1 0;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fb-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: 50px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-lt);
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.2);
  width: fit-content;
}

.fb-title {
  font-size: clamp(1.35rem, 2.1vw, 1.8rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  letter-spacing: -.025em;
}

.fb-desc {
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.72;
  color: var(--text-dim);
}

/* ---- Visual Column ---- */
.fb-visual { flex: 0 0 480px; }

/* ---- Shared card base ---- */
.fv-card {
  background: #28282d;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 4px 20px rgba(0,0,0,.3);
}

.fv-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  background: rgba(0,0,0,.22);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.fv-title-sm {
  font-size: .77rem;
  font-weight: 600;
  color: rgba(255,255,255,.7);
}

.fv-body {
  display: flex;
  flex-direction: column;
}

.fv-body--pad { padding: 18px; gap: 14px; }

.fv-plats { display: flex; gap: 5px; }
.fvp {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fv-new-badge {
  font-size: .6rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: #dc2626;
  color: white;
}

.fv-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 18px;
  background: rgba(0,0,0,.22);
  border-top: 1px solid rgba(255,255,255,.07);
}

.fvf-text {
  font-size: .68rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 7px;
}
.fvf-text::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}

.fvf-active {
  font-size: .6rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.28);
  color: var(--accent-lt);
}

.fv-ai-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .64rem;
  font-weight: 500;
  color: var(--accent-lt);
}
.fv-ai-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s ease-in-out infinite;
}

/* ============================================================
   BLOCK 1: Social Media Scheduler
   ============================================================ */

.sp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  transition: background .15s;
}
.sp-row:last-child { border-bottom: none; }
.sp-row:hover { background: rgba(255,255,255,.025); }
.sp-row--dim { opacity: .5; }

.sp-plat {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sp-info { flex: 1; min-width: 0; }

.sp-name {
  font-size: .77rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-meta {
  font-size: .64rem;
  color: var(--text-dim);
  margin-top: 2px;
}

.sp-badge {
  font-size: .58rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.22);
  color: var(--accent-lt);
  white-space: nowrap;
  flex-shrink: 0;
}
.sp-badge--draft {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  color: var(--text-mut);
}

/* ============================================================
   BLOCK 2: Unified Inbox
   ============================================================ */

.ib-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  transition: background .15s;
}
.ib-row:last-child { border-bottom: none; }
.ib-row:hover { background: rgba(255,255,255,.025); }
.ib-new { background: rgba(34,197,94,.025); }

.ib-src {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ib-src-g {
  background: white;
  color: #4285F4;
  font-size: .74rem;
  font-weight: 800;
}

.ib-content { flex: 1; min-width: 0; }

.ib-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.ib-name {
  font-size: .77rem;
  font-weight: 600;
  color: var(--text);
}

.ib-time {
  font-size: .6rem;
  color: var(--text-mut);
}

.ib-preview {
  font-size: .71rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.ib-ch {
  font-size: .6rem;
  color: var(--text-mut);
}

.ib-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(34,197,94,.5);
}

/* ============================================================
   BLOCK 3: Google Reviews
   ============================================================ */

.gr-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  padding: 16px;
}

.gr-hdr {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.gr-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .6rem;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.gr-meta-block { flex: 1; }

.gr-name {
  font-size: .79rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.gr-stars {
  font-size: .72rem;
  color: #fbbf24;
  letter-spacing: 1px;
}

.gr-glogo { flex-shrink: 0; }

.gr-text {
  font-size: .79rem;
  line-height: 1.6;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.gr-date {
  font-size: .62rem;
  color: var(--text-mut);
}

.gr-ai-wrap {
  background: rgba(34,197,94,.05);
  border: 1px solid rgba(34,197,94,.15);
  border-radius: 12px;
  padding: 14px 16px;
}

.gr-ai-lbl {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-lt);
  margin-bottom: 10px;
}

.gr-ai-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}

.gr-ai-text {
  font-size: .79rem;
  line-height: 1.6;
  color: var(--text-dim);
  margin-bottom: 12px;
}

.gr-ai-btns { display: flex; gap: 8px; }

.gr-btn-edit {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: .74rem;
  font-weight: 500;
  color: var(--text-dim);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  font-family: inherit;
  cursor: default;
}

.gr-btn-send {
  padding: 7px 16px;
  border-radius: 8px;
  font-size: .74rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  border: none;
  font-family: inherit;
  cursor: default;
}

/* ============================================================
   BLOCK 4: KI-Analyse
   ============================================================ */

.ai-igrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,.07);
  border-radius: 10px;
  overflow: hidden;
  margin: 14px 18px;
}

.ai-gi {
  padding: 12px 14px;
  background: #28282d;
}

.ai-gi-l {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-mut);
  margin-bottom: 4px;
}

.ai-gi-v {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
}

.ai-gi-up { color: var(--accent-lt); }

.ai-sug {
  margin: 2px 18px 14px;
  padding: 13px 15px;
  background: rgba(34,197,94,.05);
  border: 1px solid rgba(34,197,94,.13);
  border-radius: 10px;
}

.ai-sug-lbl {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent-lt);
  margin-bottom: 8px;
}

.ai-sug-txt {
  font-size: .78rem;
  line-height: 1.6;
  color: var(--text-dim);
}

.ai-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 18px 18px;
}

.ai-tag {
  font-size: .64rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.14);
  color: var(--accent-lt);
}

/* ===================================
   SYSTEM SECTION
   =================================== */

.sys-section {
  background: #1e1e22;
  position: relative;
  overflow: hidden;
  padding: 100px 24px 90px;
}

.sys-bg-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;
  height: 700px;
  background: radial-gradient(ellipse at center, rgba(34,197,94,.07) 0%, transparent 68%);
  pointer-events: none;
}

.sys-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 52px;
}

/* --- Head --- */
.sys-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  max-width: 680px;
}

.sys-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 100px;
  border: 1px solid rgba(34,197,94,.3);
  background: rgba(34,197,94,.06);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-lt);
}

.sys-bdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-lt);
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}

.sys-title {
  font-size: clamp(1.9rem, 3.8vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  letter-spacing: -.025em;
}

.sys-sub {
  font-size: 1rem;
  color: var(--text-dim);
  line-height: 1.6;
}

/* --- Stage --- */
.sys-stage {
  width: 100%;
  position: relative;
}

.sys-preview-label {
  text-align: center;
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.18);
  margin-bottom: 18px;
}

/* --- Dashboard wrapper --- */
.sys-dash-wrap {
  border-radius: 16px;
  border: 1px solid rgba(34,197,94,.13);
  box-shadow:
    0 0 0 1px rgba(34,197,94,.04),
    0 0 44px rgba(34,197,94,.07),
    0 28px 56px rgba(0,0,0,.38);
  overflow: hidden;
  background: #1c1c20;
  transform: scale(0.78);
  transform-origin: top center;
  margin-bottom: -108px;
}

.sys-dash {
  display: flex;
  height: 490px;
}

/* === SIDEBAR === */
.dash-sb {
  width: 188px;
  flex-shrink: 0;
  background: #161619;
  border-right: 1px solid rgba(255,255,255,.055);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dsb-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,.055);
}

.dsb-logo span {
  font-size: .88rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
}

.dsb-user {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 14px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  cursor: pointer;
}

.dsb-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #166534, #22c55e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.dsb-av--sm {
  width: 26px;
  height: 26px;
  font-size: .62rem;
}

.dsb-uinfo {
  flex: 1;
  min-width: 0;
}

.dsb-uname {
  font-size: .68rem;
  font-weight: 600;
  color: rgba(255,255,255,.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dsb-ucomp,
.dsb-uemail {
  font-size: .58rem;
  color: rgba(255,255,255,.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dsb-nav {
  flex: 1;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}

.dsb-ni {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  margin: 0 5px;
  border-radius: 7px;
  font-size: .7rem;
  color: rgba(255,255,255,.42);
  cursor: pointer;
}

.dsb-ni--sel {
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.88);
}

.dsb-ni--sel svg { stroke: rgba(255,255,255,.8) !important; fill: none !important; }

.dsb-ni--act {
  color: #22c55e;
}

.dsb-ni--act svg { stroke: #22c55e !important; }

.dsb-footer {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,.055);
  margin-top: auto;
}

/* === CENTER: POSTS === */
.dash-mid {
  flex: 1;
  border-right: 1px solid rgba(255,255,255,.055);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.dmi-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  flex-shrink: 0;
}

.dmi-title {
  font-size: .84rem;
  font-weight: 700;
  color: rgba(255,255,255,.9);
}

.dmi-sync {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .65rem;
  font-weight: 600;
  color: #22c55e;
  cursor: pointer;
}

.dmi-posts {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dmi-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  cursor: pointer;
  flex-shrink: 0;
}

.dmi-row--sel {
  background: rgba(34,197,94,.05);
  border-left: 2px solid rgba(34,197,94,.5);
  padding-left: 14px;
}

.dmi-thumb {
  width: 48px;
  height: 48px;
  border-radius: 7px;
  flex-shrink: 0;
}

.dmi-t--coffee { background: linear-gradient(135deg, #3d1a00, #6b3515, #2a1000); }
.dmi-t--salad  { background: linear-gradient(135deg, #0b2208, #1a4a0e, #0d2809); }
.dmi-t--matcha { background: linear-gradient(135deg, #0d2a0a, #1e5016, #0a1f08); }
.dmi-t--warm   { background: linear-gradient(135deg, #2a1506, #4a2510, #1a0e03); }
.dmi-t--cake   { background: linear-gradient(135deg, #2a0f10, #4a1f22, #1e0b0c); }
.dmi-t--leaf   { background: linear-gradient(135deg, #0a2010, #1a3a20, #082010); }

.dmi-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dmi-text {
  font-size: .66rem;
  color: rgba(255,255,255,.7);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.dmi-row--sel .dmi-text { color: rgba(255,255,255,.88); }

.dmi-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .59rem;
  color: rgba(255,255,255,.32);
}

.dmi-date { margin-left: auto; }

/* === RIGHT: COMMENTS === */
.dash-rp {
  width: 316px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #1a1a1e;
}

/* === LIVE FEED HEADER === */
.drp-live-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 15px 10px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  flex-shrink: 0;
}
.drp-live-hdl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.drp-live-title {
  font-size: .74rem;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  letter-spacing: -.005em;
}
.drp-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34,197,94,.7);
  animation: pulse 2s ease-in-out infinite;
}
.drp-live-meta {
  font-size: .58rem;
  color: rgba(255,255,255,.32);
  letter-spacing: .02em;
}

/* === FILTER BAR === */
.drp-filter {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 9px 13px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  flex-shrink: 0;
}
.drp-ftag {
  font-size: .59rem;
  padding: 3px 9px;
  border-radius: 100px;
  color: rgba(255,255,255,.42);
  cursor: pointer;
}
.drp-ftag--on {
  background: #22c55e;
  color: #fff;
  font-weight: 600;
}
.drp-count {
  margin-left: auto;
  font-size: .58rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
  background: rgba(239,68,68,.14);
  color: #fca5a5;
}

/* === COMMENT CARDS — platform-colored === */
.drp-cms {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 11px 12px;
}

.drp-cm {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 10px 14px;
  border-radius: 9px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  border-left: 3px solid var(--plat, #22c55e);
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
  flex-shrink: 0;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
  opacity: 0;
  transform: translateY(8px);
}
.drp-cm:hover {
  background: rgba(255,255,255,.045);
  transform: translateY(-1px);
}
.drp-cm--ig { --plat: #e11d74; }
.drp-cm--fb { --plat: #1877f2; }
.drp-cm--tt { --plat: #22d3ee; }

.drp-cm-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.drp-cm-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.drp-av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.drp-av--ig { background: linear-gradient(135deg, #f09433 0%, #dc2743 50%, #bc1888 100%); }
.drp-av--fb { background: #1877f2; }
.drp-av--tt { background: linear-gradient(135deg, #000 0%, #111 60%, #22d3ee 100%); }

.drp-cmhd {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .63rem;
  line-height: 1;
}
.drp-cmhd strong {
  color: rgba(255,255,255,.92);
  font-weight: 600;
}

.drp-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 100px;
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.3;
}
.drp-badge--ig {
  background: rgba(225,29,116,.14);
  color: #f472b6;
  border: 1px solid rgba(225,29,116,.3);
}
.drp-badge--fb {
  background: rgba(24,119,242,.14);
  color: #60a5fa;
  border: 1px solid rgba(24,119,242,.32);
}
.drp-badge--tt {
  background: rgba(34,211,238,.12);
  color: #67e8f9;
  border: 1px solid rgba(34,211,238,.32);
}

.drp-ts {
  color: rgba(255,255,255,.32);
  font-size: .55rem;
  font-weight: 500;
}
.drp-cmtxt {
  font-size: .68rem;
  color: rgba(255,255,255,.78);
  line-height: 1.45;
  padding-left: 30px;
}
.drp-cmft {
  padding-left: 30px;
  display: flex;
  align-items: center;
}

/* Klikabilno Antworten-dugme */
.drp-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid rgba(34,197,94,.3);
  background: rgba(34,197,94,.08);
  color: #4ade80;
  font-size: .6rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.drp-reply-btn:hover {
  background: rgba(34,197,94,.18);
  border-color: rgba(34,197,94,.55);
  color: #fff;
}
.drp-reply-btn:active {
  transform: scale(.96);
}
.drp-reply-btn svg {
  flex-shrink: 0;
  transform: scaleX(-1);
}

/* === LEFT SIDE — BENEFIT-DRIVEN FEATURE PILLS === */
.sys-feats {
  position: absolute;
  top: 50%;
  left: -244px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 3;
  pointer-events: none;
}
.sys-feat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 10px;
  background: rgba(22,22,28,.92);
  border: 1px solid rgba(34,197,94,.22);
  border-radius: 10px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 18px rgba(0,0,0,.35), 0 0 0 1px rgba(34,197,94,.05);
  font-size: .75rem;
  font-weight: 500;
  color: rgba(255,255,255,.82);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-10px);
}
.sys-feat em {
  color: var(--accent-lt);
  font-style: normal;
  font-weight: 600;
  margin-left: 2px;
}
.sys-feat-ic {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.25);
  color: var(--accent-lt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Connector line (right side) */
.sys-feat::after {
  content: '';
  position: absolute;
  right: -40px;
  top: 50%;
  width: 34px;
  height: 1px;
  background: linear-gradient(to right, rgba(34,197,94,.35), transparent);
  pointer-events: none;
}

/* === SCROLL-TRIGGERED ANIMATIONS === */
@keyframes sys-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sys-feat-slide-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Komentari ulaze stagger: 0ms / 1500ms / 3000ms posle aktivacije (live feed feel) */
.sys-stage.is-visible .drp-cm:nth-child(1) { animation: sys-slide-in 480ms 300ms  ease-out forwards; }
.sys-stage.is-visible .drp-cm:nth-child(2) { animation: sys-slide-in 480ms 1500ms ease-out forwards; }
.sys-stage.is-visible .drp-cm:nth-child(3) { animation: sys-slide-in 480ms 2700ms ease-out forwards; }

/* Feature pills ulaze odozgo prema dole, stagger 120ms */
.sys-stage.is-visible .sys-feat:nth-child(1) { animation: sys-feat-slide-in 380ms 200ms ease-out forwards; }
.sys-stage.is-visible .sys-feat:nth-child(2) { animation: sys-feat-slide-in 380ms 340ms ease-out forwards; }
.sys-stage.is-visible .sys-feat:nth-child(3) { animation: sys-feat-slide-in 380ms 480ms ease-out forwards; }
.sys-stage.is-visible .sys-feat:nth-child(4) { animation: sys-feat-slide-in 380ms 620ms ease-out forwards; }
.sys-stage.is-visible .sys-feat:nth-child(5) { animation: sys-feat-slide-in 380ms 760ms ease-out forwards; }

/* === DASHBOARD FLOAT + GLOW PULSE === */
.sys-dash-wrap {
  animation: sys-dash-float 8s ease-in-out infinite;
}
@keyframes sys-dash-float {
  0%, 100% {
    transform: scale(.78) translateY(0);
    box-shadow:
      0 0 0 1px rgba(34,197,94,.04),
      0 0 44px rgba(34,197,94,.07),
      0 28px 56px rgba(0,0,0,.38);
  }
  50% {
    transform: scale(.78) translateY(-6px);
    box-shadow:
      0 0 0 1px rgba(34,197,94,.1),
      0 0 64px rgba(34,197,94,.16),
      0 36px 68px rgba(0,0,0,.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sys-dash-wrap { animation: none; }
  .sys-stage .drp-cm,
  .sys-stage .sys-feat { opacity: 1; transform: none; animation: none; }
}

/* Responsive — sakrij left pills ispod 1380px (neće imati mjesta) */
@media (max-width: 1380px) {
  .sys-feats {
    position: static;
    transform: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
    pointer-events: auto;
  }
  .sys-feat::after { display: none; }
  .sys-feat {
    opacity: 1;
    transform: none;
  }
  .sys-stage.is-visible .sys-feat { animation: none; }
}
@media (max-width: 720px) {
  .sys-feat { font-size: .68rem; padding: 7px 11px 7px 8px; }
  .sys-feat-ic { width: 22px; height: 22px; }
}

/* === TRUST LINE === */
.sys-trust {
  font-size: .82rem;
  color: rgba(255,255,255,.3);
  text-align: center;
  letter-spacing: .01em;
}

/* ============================================================
   PRICING SEKTION
   ============================================================ */
.pri-section {
  position: relative;
  background: #1e1e22;
  padding: 70px 24px 70px;
  overflow: hidden;
}
.pri-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(34,197,94,.5) 30%, rgba(34,197,94,.5) 70%, transparent);
  box-shadow: 0 0 12px rgba(34,197,94,.3);
}
.pri-bg-glow {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(ellipse at center, rgba(34,197,94,.09) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.pri-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

/* ---- Kopf ---- */
.pri-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  max-width: 680px;
}
.pri-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px 5px 10px;
  border-radius: 50px;
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.25);
  font-size: .72rem;
  font-weight: 600;
  color: var(--accent-lt);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pri-title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--text);
}
.pri-gradient {
  background: linear-gradient(135deg, #86efac 0%, #4ade80 45%, #22c55e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200%;
  animation: gradmove 5s ease-in-out infinite alternate;
}
.pri-sub {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 520px;
}

/* ---- Grid ---- */
.pri-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

/* ---- Karte (kompaktna) ---- */
.pri-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 22px 22px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: 16px;
  max-height: 560px;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.pri-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,0.04);
}

.pri-card-hd {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.pri-name {
  font-size: .72rem;
  font-weight: 700;
  color: var(--accent-lt);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.pri-subhead {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  letter-spacing: -.01em;
  margin-top: 2px;
}
.pri-desc {
  font-size: .82rem;
  color: var(--text-dim);
  line-height: 1.5;
  margin-top: 2px;
}

.pri-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 14px 0 16px;
  flex-wrap: wrap;
}
.pri-amount {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.03em;
  line-height: 1;
}
.pri-amount--range {
  font-size: 1.7rem;
  letter-spacing: -.025em;
}
.pri-amount--custom {
  font-size: 1.45rem;
}
.pri-period {
  font-size: .82rem;
  color: var(--text-dim);
  font-weight: 500;
}

/* Custom-pricing mini-note (INDIVIDUELL) — kompaktno, ispod features */
.pri-custom-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  padding: 7px 11px;
  border-radius: 8px;
  background: rgba(34,197,94,.07);
  border: 1px solid rgba(34,197,94,.2);
  font-size: .75rem;
  line-height: 1.35;
  color: rgba(255,255,255,.78);
  width: fit-content;
}
.pri-custom-note svg {
  color: var(--accent-lt);
  flex-shrink: 0;
}
.pri-custom-note strong {
  color: var(--text);
  font-weight: 600;
}

/* ---- Features (kompaktnije) ---- */
.pri-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 0 0 18px;
  flex: 1;
}
.pri-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .85rem;
  color: rgba(255,255,255,.82);
  line-height: 1.4;
}
.pri-features strong {
  color: var(--text);
  font-weight: 600;
}
.pri-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.25);
  color: var(--accent-lt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.pri-check--on {
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgba(34,197,94,.4);
}
.pri-soon {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: .68rem;
  font-weight: 600;
  color: var(--accent-lt);
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.2);
  border-radius: 100px;
  letter-spacing: .02em;
}
.pri-soon--opt {
  color: var(--c-amber);
  background: rgba(251,191,36,.08);
  border-color: rgba(251,191,36,.2);
}

/* ---- CTA ---- */
.pri-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 18px;
  border-radius: var(--rm);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  font-family: inherit;
  transition: opacity .2s, transform .2s, background .2s, border-color .2s, box-shadow .2s, color .2s;
}
.pri-cta--ghost {
  color: var(--text);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
}
.pri-cta--ghost:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(34,197,94,.35);
  color: var(--accent-lt);
}
.pri-cta--solid {
  color: #fff;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  border: 1px solid transparent;
  box-shadow: 0 4px 22px rgba(34,197,94,.35);
}
.pri-cta--solid:hover {
  opacity: .95;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(34,197,94,.5);
}

/* ---- Featured Card ---- */
.pri-card--featured {
  background: linear-gradient(180deg, rgba(34,197,94,.08) 0%, rgba(34,197,94,.02) 100%);
  border: 1px solid rgba(34,197,94,.35);
  box-shadow:
    0 0 0 1px rgba(34,197,94,.1),
    0 20px 60px -20px rgba(34,197,94,.35),
    0 0 80px -20px rgba(34,197,94,.25);
  transform: translateY(-14px) scale(1.025);
  z-index: 2;
}
.pri-card--featured:hover {
  transform: translateY(-18px) scale(1.025);
  border-color: rgba(34,197,94,.5);
  background: linear-gradient(180deg, rgba(34,197,94,.1) 0%, rgba(34,197,94,.025) 100%);
}
.pri-card--featured .pri-card-hd {
  border-bottom-color: rgba(34,197,94,.15);
}
.pri-card--featured .pri-name {
  color: #fff;
}
.pri-card--featured .pri-amount {
  background: linear-gradient(135deg, #86efac 0%, #4ade80 45%, #22c55e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pri-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 100px;
  box-shadow: 0 4px 18px rgba(34,197,94,.45);
  white-space: nowrap;
}

/* ---- Trust Line ---- */
.pri-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 0;
  font-size: .8rem;
  color: var(--text-dim);
}
.pri-ti {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pri-ti-ic {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.22);
  color: var(--accent-lt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pri-ti-dot {
  color: rgba(255,255,255,.2);
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .pri-section { padding: 90px 20px 110px; }
  .pri-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    gap: 30px;
  }
  .pri-card--featured {
    transform: none;
    order: -1;
  }
  .pri-card--featured:hover {
    transform: translateY(-4px);
  }
  .pri-card:hover {
    transform: translateY(-2px);
  }
}
@media (max-width: 520px) {
  .pri-card { padding: 30px 22px 28px; }
  .pri-amount { font-size: 2.2rem; }
  .pri-amount--custom { font-size: 1.4rem; }
  .pri-trust { font-size: .78rem; gap: 10px; }
}

/* ============================================================
   FAQ SEKTION
   ============================================================ */
.faq-section {
  position: relative;
  background: #1e1e22;
  padding: 110px 24px 130px;
  overflow: hidden;
}
.faq-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,197,94,.22) 30%, rgba(34,197,94,.22) 70%, transparent);
}
.faq-bg-glow {
  position: absolute;
  bottom: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 500px;
  background: radial-gradient(ellipse at center, rgba(34,197,94,.08) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.faq-inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

/* ---- Kopf ---- */
.faq-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  max-width: 620px;
}
.faq-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px 5px 10px;
  border-radius: 50px;
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.25);
  font-size: .72rem;
  font-weight: 600;
  color: var(--accent-lt);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.faq-title {
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--text);
}
.faq-sub {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-dim);
}

/* ---- Liste ---- */
.faq-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.025);
  border-radius: 14px;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
  overflow: hidden;
}
.faq-item:hover {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,0.04);
}
.faq-item.open {
  border-color: rgba(34,197,94,.32);
  background: linear-gradient(180deg, rgba(34,197,94,.06) 0%, rgba(34,197,94,.015) 100%);
  box-shadow: 0 10px 40px -20px rgba(34,197,94,.35);
}

/* ---- Frage (Button) ---- */
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--text);
  transition: color .2s ease;
}
.faq-q:focus-visible {
  outline: 2px solid rgba(34,197,94,.5);
  outline-offset: -2px;
}

.faq-q-ic {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.2);
  color: var(--accent-lt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.faq-item.open .faq-q-ic {
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(34,197,94,.4);
}

.faq-q-txt {
  flex: 1;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.005em;
}

.faq-q-toggle {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s ease, background .25s ease, border-color .25s ease, color .25s ease;
}
.faq-q-toggle svg line:first-child {
  transform-origin: center;
  transition: transform .3s ease, opacity .2s ease;
}
.faq-item.open .faq-q-toggle {
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.28);
  color: var(--accent-lt);
  transform: rotate(180deg);
}
.faq-item.open .faq-q-toggle svg line:first-child {
  opacity: 0;
}

/* ---- Antwort (Akkordeon) ---- */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s cubic-bezier(.4, 0, .2, 1);
}
.faq-item.open .faq-a {
  grid-template-rows: 1fr;
}
.faq-a-inner {
  overflow: hidden;
  min-height: 0;
}
.faq-a-inner p {
  padding: 0 22px 22px 70px;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--text-dim);
}
.faq-a-inner strong {
  color: var(--text);
  font-weight: 600;
}

/* ---- Bottom CTA ---- */
.faq-cta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  transition: border-color .25s ease, background .25s ease;
}
.faq-cta:hover {
  border-color: rgba(34,197,94,.28);
  background: rgba(34,197,94,.04);
}
.faq-cta-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.faq-cta-sub {
  font-size: .85rem;
  color: var(--text-dim);
  margin-top: 2px;
}
.faq-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--rm);
  font-size: .88rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  box-shadow: 0 4px 18px rgba(34,197,94,.3);
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity .2s, transform .2s, box-shadow .2s;
}
.faq-cta-btn:hover {
  opacity: .92;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(34,197,94,.45);
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .faq-section { padding: 80px 18px 100px; }
  .faq-inner { gap: 40px; }
  .faq-q { padding: 16px 16px; gap: 12px; }
  .faq-q-ic { width: 30px; height: 30px; }
  .faq-q-txt { font-size: .94rem; }
  .faq-a-inner p { padding: 0 18px 18px 58px; font-size: .9rem; }
  .faq-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 22px 20px;
  }
  .faq-cta-btn { justify-content: center; }
}

/* ============================================================
   CLOSING CTA SEKTION
   ============================================================ */
.cta-section {
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(34,197,94,.16) 0%, transparent 60%),
    linear-gradient(180deg, #1e1e22 0%, #171a19 70%, #0f1311 100%);
  padding: 64px 24px 70px;
  overflow: hidden;
  text-align: center;
}
.cta-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,197,94,.28) 30%, rgba(34,197,94,.28) 70%, transparent);
}

.cta-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}
.cta-bg-glow--1 {
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(34,197,94,.22), transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
}
.cta-bg-glow--2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(74,222,128,.14), transparent 70%);
  bottom: -120px;
  left: 20%;
}

.cta-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(34,197,94,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,197,94,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events: none;
  z-index: 0;
  opacity: .45;
}

.cta-inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.cta-title {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--text);
  margin-bottom: 14px;
}
.cta-title-accent {
  background: linear-gradient(135deg, #86efac 0%, #4ade80 45%, #22c55e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200%;
  animation: gradmove 5s ease-in-out infinite alternate;
}

.cta-sub {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 560px;
  margin-bottom: 28px;
}

/* Wrapper za 2 dugmeta */
.cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* Sekundarno dugme — Demo ansehen */
.cta-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 18px 28px;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  text-decoration: none;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.cta-btn-secondary:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(34,197,94,.35);
  color: var(--accent-lt);
  transform: translateY(-2px);
}
.cta-btn-secondary svg { color: var(--accent-lt); }

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 18px 34px;
  border-radius: 14px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  box-shadow:
    0 8px 28px rgba(34,197,94,.45),
    0 0 0 1px rgba(34,197,94,.4),
    inset 0 1px 0 rgba(255,255,255,.15);
  font-family: inherit;
  letter-spacing: -.005em;
  transition: transform .25s ease, box-shadow .25s ease, opacity .2s ease;
  position: relative;
  animation: cta-pulse 2.8s ease-in-out infinite;
}
.cta-btn:hover {
  transform: translateY(-3px);
  box-shadow:
    0 14px 40px rgba(34,197,94,.6),
    0 0 0 1px rgba(34,197,94,.55),
    inset 0 1px 0 rgba(255,255,255,.18);
  opacity: .97;
  animation-play-state: paused;
}
.cta-btn-arrow {
  display: inline-flex;
  align-items: center;
  transition: transform .25s ease;
}
.cta-btn:hover .cta-btn-arrow {
  transform: translateX(3px);
}

@keyframes cta-pulse {
  0%, 100% {
    box-shadow:
      0 8px 28px rgba(34,197,94,.45),
      0 0 0 1px rgba(34,197,94,.4),
      inset 0 1px 0 rgba(255,255,255,.15);
  }
  50% {
    box-shadow:
      0 10px 38px rgba(34,197,94,.6),
      0 0 0 1px rgba(34,197,94,.55),
      inset 0 1px 0 rgba(255,255,255,.18);
  }
}

/* ---- Trust ---- */
.cta-trust {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: .88rem;
  color: var(--text-dim);
}
.cta-ti {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cta-ti-ic {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.3);
  color: var(--accent-lt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cta-ti-dot { color: rgba(255,255,255,.2); }

/* ---- Closing line ---- */
.cta-closing {
  margin-top: 44px;
  font-size: .88rem;
  font-weight: 500;
  color: rgba(255,255,255,.32);
  letter-spacing: .01em;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .cta-section { padding: 50px 20px 56px; }
  .cta-sub { font-size: .92rem; margin-bottom: 22px; }
  .cta-btn { padding: 15px 22px; font-size: .96rem; }
  .cta-btn-secondary { padding: 15px 22px; font-size: .92rem; }
  .cta-actions { width: 100%; flex-direction: column; }
  .cta-actions > * { width: 100%; justify-content: center; }
  .cta-bg-grid { background-size: 36px 36px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  position: relative;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(34,197,94,.08), transparent 70%),
    linear-gradient(180deg, #0a0d0b 0%, #07090a 100%);
  color: var(--text-dim);
  font-family: inherit;
  border-top: 1px solid rgba(34,197,94,.14);
  margin-top: 60px;
  overflow: hidden;
}
.foot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, 70%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,197,94,.5), transparent);
  pointer-events: none;
}

/* ---- Main columns ---- */
.foot-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 28px 48px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 56px;
  align-items: start;
  position: relative;
}

.foot-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.foot-col--brand {
  gap: 18px;
  max-width: 360px;
  padding-right: 16px;
}

.foot-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.foot-logo {
  height: 38px;
  width: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(34,197,94,.25));
}
.foot-brand-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.015em;
}
.foot-brand-tag {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0;
  max-width: 280px;
}

/* Social row */
.foot-social {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin: 8px 0 0;
}
.foot-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: all .25s ease;
}
.foot-social a:hover {
  background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(34,197,94,.08));
  border-color: rgba(34,197,94,.45);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(34,197,94,.18);
}

/* Link columns */
.foot-hd {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  margin: 0 0 8px;
  position: relative;
  padding-bottom: 12px;
}
.foot-hd::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 2px;
}
.foot-ls {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 0;
  margin: 0;
}
.foot-ls a {
  font-size: .9rem;
  color: rgba(255,255,255,.58);
  text-decoration: none;
  transition: color .2s ease, transform .2s ease, padding-left .2s ease;
  display: inline-flex;
  align-items: center;
  width: fit-content;
}
.foot-ls a::before {
  content: "";
  width: 0;
  height: 1px;
  background: var(--accent);
  margin-right: 0;
  transition: width .25s ease, margin-right .25s ease;
}
.foot-ls a:hover {
  color: var(--accent-lt);
}
.foot-ls a:hover::before {
  width: 12px;
  margin-right: 8px;
}

/* ---- Bottom ---- */
.foot-bottom {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 28px 28px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.foot-copy {
  font-size: .82rem;
  color: rgba(255,255,255,.4);
  margin: 0;
  letter-spacing: .01em;
}
.foot-copy::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(34,197,94,.6);
  margin-right: 8px;
  vertical-align: middle;
}
.foot-legal {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  margin: 0;
}
.foot-legal li {
  display: inline-flex;
  align-items: center;
}
.foot-legal li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  margin: 0 14px;
}
.foot-legal a {
  font-size: .82rem;
  color: rgba(255,255,255,.48);
  text-decoration: none;
  transition: color .2s ease;
}
.foot-legal a:hover { color: var(--accent-lt); }

/* ---- Responsive ---- */
@media (max-width: 880px) {
  .foot-main {
    grid-template-columns: 1fr 1fr;
    gap: 40px 36px;
    padding: 48px 24px 36px;
  }
  .foot-col--brand {
    grid-column: 1 / -1;
    max-width: 100%;
    padding-right: 0;
  }
}
@media (max-width: 560px) {
  .foot {
    margin-top: 40px;
  }
  .foot-main {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 22px 32px;
  }
  .foot-bottom {
    justify-content: center;
    text-align: center;
    padding: 20px 22px 24px;
    flex-direction: column;
    gap: 14px;
  }
  .foot-legal li:not(:last-child)::after {
    margin: 0 10px;
  }
}

/* ============================================================
   UNIFIED PAGE BACKGROUND
   — Hero-Atmosphäre (Grid + Glows) liegt fix auf <body>.
     Sektionen werden transparent gemacht, damit die gleiche
     Pozadina na svim sekcijama 1:1 identicna je kao hero.
   ============================================================ */

/* Hero-eigene Glow/Grid entfernen — body liefert jetzt dasselbe */
.hero .bg-glow,
.hero .bg-grid {
  display: none;
}

/* Sekcije transparentne — body pozadina prolazi kroz njih */
.hero,
.prob-section,
.sol-section,
.sys-section,
.pri-section,
.faq-section,
.cta-section {
  background: transparent;
}

/* Konfliktujući glow/grid overlay-i u pojedinim sekcijama */
.prob-section::after,
.sol-section::after,
.sys-bg-glow,
.pri-bg-glow,
.faq-bg-glow,
.cta-bg-glow,
.cta-bg-glow--1,
.cta-bg-glow--2,
.cta-bg-grid {
  display: none !important;
}

/* CTA sekcija — donji fade-to-black je uklonjen; zadržavamo
   centralni green-glow efekat preko tankog radijalnog overlay-a
   kako CTA ostaje vizuelno fokusan, ali u istoj atmosferi */
.cta-section {
  background:
    radial-gradient(ellipse 70% 55% at 50% 100%, rgba(34,197,94,.12) 0%, transparent 60%);
}

/* ============================================================
   EARLY ACCESS FORM
   ============================================================ */
.ea-section {
  position: relative;
  padding: 110px 24px 120px;
  overflow: hidden;
}
.ea-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,197,94,.22) 30%, rgba(34,197,94,.22) 70%, transparent);
}

.ea-inner {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 38px;
}

/* ---- Head ---- */
.ea-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.ea-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 100px;
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.28);
  font-size: .72rem;
  font-weight: 700;
  color: var(--accent-lt);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ea-bdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
.ea-title {
  font-size: clamp(1.8rem, 3.3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--text);
}
.ea-title-accent {
  background: linear-gradient(135deg, #86efac 0%, #4ade80 45%, #22c55e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200%;
  animation: gradmove 5s ease-in-out infinite alternate;
}
.ea-sub {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 420px;
}

/* ---- Form card ---- */
.ea-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 28px 26px;
  background: rgba(255,255,255,.028);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 20px 60px -30px rgba(0,0,0,.6);
  transition: opacity .25s ease, transform .25s ease;
}

.ea-field { width: 100%; }

.ea-input {
  width: 100%;
  padding: 15px 18px;
  font-size: .98rem;
  font-family: inherit;
  font-weight: 500;
  color: var(--text);
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  outline: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.ea-input::placeholder {
  color: rgba(255,255,255,.35);
  font-weight: 400;
}
.ea-input:hover {
  border-color: rgba(255,255,255,.16);
  background: rgba(0,0,0,.28);
}
.ea-input:focus {
  border-color: rgba(34,197,94,.55);
  background: rgba(0,0,0,.32);
  box-shadow: 0 0 0 4px rgba(34,197,94,.12);
}
.ea-input:invalid:not(:placeholder-shown) {
  border-color: rgba(239,68,68,.5);
}

/* ---- CTA Button ---- */
.ea-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 24px;
  margin-top: 6px;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  color: #fff;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  box-shadow:
    0 8px 24px rgba(34,197,94,.4),
    inset 0 1px 0 rgba(255,255,255,.15);
  letter-spacing: -.005em;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.ea-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.01);
  box-shadow:
    0 12px 32px rgba(34,197,94,.55),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.ea-btn:active:not(:disabled) {
  transform: translateY(0) scale(.99);
}
.ea-btn:disabled {
  cursor: wait;
  opacity: .85;
}

.ea-btn-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  animation: ea-spin .7s linear infinite;
}
.ea-btn.is-loading .ea-btn-txt { opacity: 0; }
.ea-btn.is-loading .ea-btn-spinner { opacity: 1; }

@keyframes ea-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---- Urgency + Trust lines ---- */
.ea-urgency {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--c-amber);
  text-align: center;
}
.ea-urgency svg { flex-shrink: 0; }
.ea-trust {
  margin-top: 4px;
  font-size: .78rem;
  color: rgba(255,255,255,.38);
  text-align: center;
}

/* ---- Success state ---- */
.ea-success {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 44px 28px 40px;
  background: linear-gradient(180deg, rgba(34,197,94,.08) 0%, rgba(34,197,94,.02) 100%);
  border: 1px solid rgba(34,197,94,.35);
  border-radius: 18px;
  box-shadow: 0 20px 60px -20px rgba(34,197,94,.35);
  animation: ea-pop .45s cubic-bezier(.4, 0, .2, 1);
}
.ea-success-ic {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(34,197,94,.45);
  margin-bottom: 6px;
  animation: ea-pop-ic .5s .1s both cubic-bezier(.34, 1.56, .64, 1);
}
.ea-success-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.02em;
}
.ea-success-txt {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 360px;
}
.ea-success-sub {
  margin-top: 4px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--accent-lt);
}

@keyframes ea-pop {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ea-pop-ic {
  from { transform: scale(.5); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

/* ---- Responsive ---- */
@media (max-width: 520px) {
  .ea-section { padding: 80px 18px 90px; }
  .ea-inner { gap: 30px; }
  .ea-form { padding: 26px 20px 22px; }
  .ea-input { padding: 14px 16px; font-size: .95rem; }
  .ea-btn { padding: 15px 20px; font-size: .95rem; }
  .ea-success { padding: 36px 22px 32px; }
  .ea-success-title { font-size: 1.4rem; }
}

/* ============================================================
   TRUST SEKTION
   ============================================================ */
.tr-section {
  position: relative;
  padding: 72px 24px 68px;
  overflow: hidden;
  background: transparent;
}
.tr-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,197,94,.32) 30%, rgba(34,197,94,.32) 70%, transparent);
  box-shadow: 0 0 10px rgba(34,197,94,.18);
}

.tr-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.tr-head {
  text-align: center;
  max-width: 720px;
}
.tr-title {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.025em;
  color: var(--text);
}
.tr-title-accent {
  background: linear-gradient(135deg, #86efac 0%, #4ade80 45%, #22c55e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 4-card grid */
.tr-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.tr-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 22px 20px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.tr-card:hover {
  border-color: rgba(34,197,94,.3);
  background: rgba(34,197,94,.04);
  transform: translateY(-2px);
}
.tr-ic {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.25);
  color: var(--accent-lt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.tr-ct {
  font-size: .98rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
}
.tr-cd {
  font-size: .82rem;
  color: var(--text-dim);
  line-height: 1.4;
}

.tr-mini {
  text-align: center;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.55;
  color: rgba(255,255,255,.6);
  max-width: 640px;
  letter-spacing: .005em;
}

@media (max-width: 880px) {
  .tr-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 480px) {
  .tr-section { padding: 56px 18px 52px; }
  .tr-grid { grid-template-columns: 1fr; }
  .tr-card { padding: 18px 16px; }
  .tr-mini { font-size: .82rem; }
}

/* ============================================================
   BRAND GUIDE v1.0 — LIGHT THEME OVERRIDES
   ============================================================
   This block aligns the originally dark-themed sections with the
   official HeyAspi brand: Off-White bg, Sage primary, Navy text.
   The WhatsApp chat phone (.chat-phone) keeps its dark device look —
   that's intentional, since it represents a physical phone screen.
   The dashboard mockup (.dsb-*) is also kept as a dark UI surface,
   because it depicts an in-app interface.
   ============================================================ */

/* ---- Sections backgrounds & spacing ---- */
.prob-section,
.feat-section,
.how-section,
.cta-section,
.tr-section,
.solution-section,
.dsb-section,
.dashboard-section,
.use-section,
.testi-section,
.faq-section,
.price-section {
  background: transparent !important;
}

.prob-section::before,
.prob-section::after,
.feat-section::before,
.feat-section::after,
.how-section::before,
.how-section::after,
.cta-section::before,
.cta-section::after,
.tr-section::before,
.tr-section::after,
.solution-section::before,
.solution-section::after,
.dashboard-section::before,
.dashboard-section::after {
  display: none !important;
}

/* ---- Generic card surfaces ---- */
.prob-card,
.feat-card,
.how-card,
.cta-card,
.tr-card,
.use-card,
.testi-card,
.faq-card,
.faq-item,
.solution-card,
.price-card,
.feature-card,
.benefit-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm);
  transition: all .25s ease;
}
.prob-card:hover,
.feat-card:hover,
.how-card:hover,
.cta-card:hover,
.tr-card:hover,
.use-card:hover,
.testi-card:hover,
.faq-card:hover,
.solution-card:hover,
.price-card:hover,
.feature-card:hover,
.benefit-card:hover {
  border-color: rgba(122,158,126,.45) !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  background: var(--bg-card) !important;
}

/* ---- Headlines & body copy on light bg ---- */
.prob-title,
.feat-title,
.how-title,
.cta-title,
.tr-title,
.use-title,
.testi-title,
.faq-title,
.solution-title,
.price-title,
.section-title,
.dashboard-title {
  color: var(--text) !important;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
}

.prob-sub,
.feat-sub,
.how-sub,
.cta-sub,
.tr-sub,
.use-sub,
.testi-sub,
.faq-sub,
.solution-sub,
.price-sub,
.section-sub {
  color: var(--text-dim) !important;
}

.pct, .pcd,
.feat-card h3, .feat-card p,
.how-card h3, .how-card p,
.tr-card h3, .tr-card p,
.use-card h3, .use-card p,
.solution-card h3, .solution-card p {
  color: inherit;
}
.pct, .feat-card h3, .how-card h3, .tr-card h3, .use-card h3, .solution-card h3 {
  color: var(--text) !important;
}
.pcd, .feat-card p, .how-card p, .tr-card p, .use-card p, .solution-card p {
  color: var(--text-dim) !important;
}

/* ---- Floating cards (in hero) — light glass card ---- */
.float-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-md) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.float-card .fc-title { color: var(--text) !important; }
.float-card .fc-sub   { color: var(--text-dim) !important; }
.float-card .fc-ico   { filter: none; }

/* ---- Integrations strip ---- */
.int-strip {
  background: rgba(246,246,242,.8) !important;
  border-top: 1px solid var(--border) !important;
}
.int-label { color: var(--text-dim) !important; }
.int-item {
  color: var(--text-dim) !important;
}
.int-item:hover { color: var(--text) !important; }
.int-sep { color: var(--text-mut) !important; }
.soon-tag {
  background: var(--accent-mist) !important;
  color: var(--accent2) !important;
}

/* ---- Problem cards: amber → sage in hover ---- */
.prob-card:hover {
  background: var(--accent-mist) !important;
  border-color: rgba(122,158,126,.45) !important;
  box-shadow: var(--shadow-md);
}
.prob-card:hover .prob-icon {
  background: rgba(122,158,126,.2) !important;
  border-color: rgba(122,158,126,.5) !important;
  color: var(--accent2) !important;
}
.prob-card--hot {
  background: linear-gradient(180deg, var(--accent-mist) 0%, transparent 100%) !important;
  border-color: rgba(122,158,126,.32) !important;
}
.prob-card--hot .prob-icon {
  background: rgba(122,158,126,.18) !important;
  border-color: rgba(122,158,126,.4) !important;
  color: var(--accent2) !important;
}
.prob-icon {
  background: rgba(122,158,126,.12) !important;
  border: 1px solid rgba(122,158,126,.3) !important;
  color: var(--accent2) !important;
}

/* "Das Problem" tag — keep warm but lighter */
.prob-tag {
  background: rgba(214,137,16,.1) !important;
  border: 1px solid rgba(214,137,16,.3) !important;
  color: #b97308 !important;
}

/* ---- Section connector lines ---- */
.prob-section::before,
.feat-section::before,
.how-section::before {
  background: linear-gradient(90deg, transparent, var(--border) 30%, var(--border) 70%, transparent) !important;
}

/* ---- Feature/HW section accent overrides on light ---- */
.hw-section {
  background: transparent !important;
}
.hw-tag {
  background: var(--accent-mist) !important;
  border: 1px solid rgba(122,158,126,.35) !important;
  color: var(--accent2) !important;
}
.hw-title {
  color: var(--text) !important;
  font-family: 'Nunito', sans-serif !important;
}
.hw-title .gradient-text {
  background: none !important;
  -webkit-text-fill-color: var(--accent) !important;
  color: var(--accent) !important;
}
.hw-sub {
  color: var(--text-dim) !important;
}
.hw-feat {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm);
}
.hw-feat:hover {
  border-color: rgba(122,158,126,.45) !important;
  background: var(--bg-card) !important;
  box-shadow: var(--shadow-md);
}
.hw-feat-icon {
  background: var(--accent-mist) !important;
  border: 1px solid rgba(122,158,126,.3) !important;
  color: var(--accent2) !important;
}
.hw-feat h4 { color: var(--text) !important; }
.hw-feat p { color: var(--text-dim) !important; }
.hw-status-pill {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-md);
  backdrop-filter: none !important;
}
.hw-core {
  background: linear-gradient(145deg, #ffffff 0%, var(--accent-mist) 100%) !important;
  border: 1px solid rgba(122,158,126,.4) !important;
  box-shadow:
    0 0 60px rgba(122,158,126,.2),
    0 0 0 8px rgba(122,158,126,.06),
    inset 0 0 40px rgba(122,158,126,.08) !important;
}
.hw-aspi-helmet {
  background: linear-gradient(160deg, #ffffff 0%, #f0f0eb 100%) !important;
  border: 2px solid rgba(38,53,69,.08) !important;
  box-shadow: 0 4px 12px rgba(38,53,69,.1);
}
.hw-aspi-visor {
  background: radial-gradient(circle at 35% 30%, #2a2f2c 0%, var(--visor) 80%) !important;
}
.hw-eye {
  border-color: var(--accent-lt) !important;
  box-shadow: 0 0 6px rgba(168,196,168,.7) !important;
}
.hw-icon {
  background: var(--bg-card) !important;
  box-shadow: var(--shadow-md), 0 0 0 1px var(--border) !important;
}
.hw-ring {
  border-color: rgba(122,158,126,.25) !important;
}
.hw-ring-2 {
  border-color: rgba(122,158,126,.18) !important;
}

/* ---- Subpages (über-uns, kontakt, impressum, datenschutz, agb) ---- */
.ab-page, .kt-page, .im-page, .ds-page, .ag-page {
  color: var(--text) !important;
}
.ab-card, .kt-mail-card, .kt-info-card, .im-card, .ds-card, .ag-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm);
}
.ab-card:hover, .kt-info-card:hover {
  border-color: rgba(122,158,126,.45) !important;
  background: var(--bg-card) !important;
  box-shadow: var(--shadow-md);
}
.ab-badge, .kt-badge, .im-badge, .ds-badge, .ag-badge {
  background: var(--accent-mist) !important;
  border: 1px solid rgba(122,158,126,.35) !important;
  color: var(--accent2) !important;
}
.ab-title, .kt-title, .im-title, .ds-title, .ag-title {
  color: var(--text) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
}
.ab-title .gradient-text,
.kt-title .gradient-text,
.im-title .gradient-text,
.ds-title .gradient-text,
.ag-title .gradient-text {
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
  background: none !important;
}
.ab-lead, .kt-lead, .im-lead, .ds-lead, .ag-lead {
  color: var(--text-dim) !important;
}
.ab-card h3, .kt-info-card h3, .im-card h2, .ds-card h2, .ds-card h3, .ds-card h4, .ag-card h2, .ag-card h3 {
  color: var(--text) !important;
}
.ab-card p, .kt-info-card p, .im-card p, .ds-card p, .ds-card li, .ag-card p, .ag-card li {
  color: var(--text-dim) !important;
}
.ab-card-icon, .kt-info-icon, .kt-mail-icon {
  background: var(--accent-mist) !important;
  border: 1px solid rgba(122,158,126,.35) !important;
  color: var(--accent2) !important;
}
.ab-card-icon { width: 44px; height: 44px; }
.ab-section-hd h2 { color: var(--text) !important; font-family: 'Nunito', sans-serif !important; font-weight: 800 !important; }
.ab-section-hd p { color: var(--text-dim) !important; }
.ab-photo {
  background: linear-gradient(135deg, var(--accent-mist), #fff) !important;
  border: 1px solid rgba(122,158,126,.35) !important;
  color: var(--accent2) !important;
}
.ab-photo[data-placeholder]::after {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-mut) !important;
}
.ab-name { color: var(--text) !important; }
.ab-role { color: var(--text-dim) !important; }

.kt-mail-link { color: var(--text) !important; }
.kt-mail-link:hover { color: var(--accent2) !important; }
.kt-mail-label, .kt-mail-hint { color: var(--text-dim) !important; }
.kt-info-card a { color: var(--accent2) !important; }
.kt-btn--primary {
  background: var(--accent) !important;
  color: #fff !important;
}
.kt-btn--primary:hover { background: var(--accent2) !important; }
.kt-btn--ghost {
  background: transparent !important;
  border: 1.5px solid var(--accent) !important;
  color: var(--text) !important;
}
.kt-btn--ghost:hover {
  background: var(--accent-mist) !important;
}

.im-card a, .ds-card a, .ag-card a { color: var(--accent2) !important; }
.im-card strong, .ds-card strong, .ag-card strong { color: var(--text) !important; }
.im-kv dt { color: var(--text-mut) !important; }
.im-kv dd { color: var(--text) !important; }

.ag-num { color: var(--accent) !important; }
.ag-notice {
  background: rgba(214,137,16,.06) !important;
  border-color: rgba(214,137,16,.3) !important;
}
.ag-notice-icon { color: var(--c-amber) !important; }
.ag-notice p { color: var(--text-dim) !important; }
.ag-notice strong { color: var(--text) !important; }
.ag-card h2 {
  border-bottom-color: var(--border) !important;
}

/* ---- Footer ---- */
.foot {
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(122,158,126,.1), transparent 70%),
    linear-gradient(180deg, var(--bg-card) 0%, var(--bg) 100%) !important;
  color: var(--text-dim) !important;
  border-top: 1px solid var(--border) !important;
}
.foot::before {
  background: linear-gradient(90deg, transparent, rgba(122,158,126,.45), transparent) !important;
}
.foot-brand-name { color: var(--text) !important; }
.foot-brand-tag  { color: var(--text-dim) !important; }
.foot-hd         { color: var(--text) !important; }
.foot-hd::after {
  background: linear-gradient(90deg, var(--accent), transparent) !important;
}
.foot-ls a {
  color: var(--text-dim) !important;
}
.foot-ls a:hover { color: var(--accent2) !important; }
.foot-ls a::before { background: var(--accent) !important; }
.foot-social a {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-dim) !important;
}
.foot-social a:hover {
  background: var(--accent-mist) !important;
  border-color: rgba(122,158,126,.5) !important;
  color: var(--accent2) !important;
  box-shadow: 0 6px 16px rgba(122,158,126,.18) !important;
}
.foot-bottom {
  border-top: 1px solid var(--border) !important;
}
.foot-copy { color: var(--text-dim) !important; }
.foot-copy::before {
  background: var(--accent) !important;
  box-shadow: 0 0 6px rgba(122,158,126,.6) !important;
}
.foot-legal a { color: var(--text-mut) !important; }
.foot-legal a:hover { color: var(--accent2) !important; }
.foot-legal li:not(:last-child)::after {
  background: var(--text-mut) !important;
  opacity: .8;
}

/* ---- Pill-style across the board ---- */
.btn-primary, .btn-secondary, .btn-header-cta,
.kt-btn, .ag-btn {
  border-radius: var(--r-pill) !important;
}

/* ---- Avatar dot border on light ---- */
.av { border-color: var(--bg) !important; }

/* ---- Animated gradient pulse on h2 (kept) ---- */
.gradient-text {
  background: none !important;
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
  animation: none !important;
}

/* ============================================================
   BRAND UI/UX REFINEMENTS — Pass 2
   Specifically: contrast fixes for text on light backgrounds,
   sharper card separation, scoped to NOT touch the dark
   chat phone (.chat-*) and dashboard mockup (.dsb-*).
   ============================================================ */

/* ---- Hero subtitle text contrast ---- */
.hero-sub { color: var(--text-dim) !important; }
.warum-item { color: var(--text-dim) !important; font-weight: 500; }

/* ---- Integrations strip — darker text on light ---- */
.int-item { color: var(--text-dim) !important; font-weight: 600 !important; }
.int-item:hover { color: var(--text) !important; }
.int-label { color: var(--text-mut) !important; font-weight: 600 !important; letter-spacing: .05em; }
.int-sep { color: var(--border) !important; opacity: 1; }

/* ---- Problem section subhead ---- */
.prob-sub { color: var(--text-dim) !important; font-weight: 400; }

/* ---- Float card sub ---- */
.float-card .fc-sub { color: var(--text-dim) !important; }

/* ---- Generic — convert any "white at low alpha" inside .prob-, .feat-,
     .how-, .tr-, .use-, .testi-, .faq-, .price- containers to navy-soft ---- */
.prob-section *, .feat-section *, .how-section *, .tr-section *,
.use-section *, .testi-section *, .faq-section *, .price-section *,
.solution-section *, .cta-section * {
  /* nothing global on purpose — handled per-class below */
}

/* Card content in standard sections */
.prob-card *, .feat-card *, .how-card *, .tr-card *,
.use-card *, .testi-card *, .faq-card *,
.solution-card *, .price-card * {
  /* keep colors set elsewhere; sane fallback */
}

/* Numbered/step text on cards */
.how-num, .feat-num, .step-num,
.how-card .num, .feat-card .num {
  color: var(--accent) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
}

/* "How it works" arrows / connectors */
.how-arrow, .step-arrow { color: var(--accent) !important; opacity: .6; }

/* Testimonials — sub names */
.testi-name, .quote-name { color: var(--text) !important; font-weight: 700 !important; }
.testi-role, .quote-role { color: var(--text-dim) !important; }
.testi-quote, .quote-text { color: var(--text) !important; line-height: 1.7; }

/* FAQ */
.faq-q { color: var(--text) !important; font-weight: 700 !important; }
.faq-a { color: var(--text-dim) !important; }

/* Price card amounts */
.price-amount, .price-value { color: var(--text) !important; font-family: 'Nunito', sans-serif !important; }
.price-period { color: var(--text-mut) !important; }
.price-features li { color: var(--text-dim) !important; }
.price-card--featured {
  background: linear-gradient(180deg, var(--accent-mist) 0%, var(--bg-card) 60%) !important;
  border: 2px solid var(--accent) !important;
  box-shadow: 0 12px 36px rgba(122,158,126,.18) !important;
}

/* ---- Stronger card outline (so they pop on Off-White) ---- */
.prob-card, .feat-card, .how-card, .tr-card, .use-card,
.testi-card, .faq-card, .solution-card, .price-card,
.ab-card, .kt-info-card, .kt-mail-card, .im-card, .ds-card, .ag-card,
.hw-feat, .float-card {
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 1px 2px rgba(38,53,69,.04),
    0 8px 24px -8px rgba(38,53,69,.10) !important;
}

/* ---- Subtle gradient on cards for depth ---- */
.prob-card,
.feat-card,
.how-card,
.tr-card,
.use-card,
.solution-card,
.price-card {
  background:
    linear-gradient(180deg, #ffffff 0%, #fafaf6 100%) !important;
}

/* ---- Section dividers more visible ---- */
.prob-section, .feat-section, .how-section,
.tr-section, .use-section, .testi-section,
.faq-section, .price-section, .cta-section,
.solution-section, .dashboard-section {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.prob-section + section,
.feat-section + section,
.how-section + section { border-top: none; }

/* ---- Section headings: ensure proper hierarchy ---- */
section h2 { font-family: 'Nunito', sans-serif !important; font-weight: 800 !important; }

/* ---- Hero badge and similar pills: stronger definition ---- */
.hero-badge {
  font-weight: 600 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 2px 8px rgba(122,158,126,.15);
}
.prob-tag {
  font-weight: 700 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
}

/* ---- HW Section: feature tile spacing ---- */
.hw-feat { padding: 24px 18px !important; }
.hw-feat h4 { font-family: 'Nunito', sans-serif !important; font-weight: 700 !important; }

/* ---- Header logo: use brand image, hide pseudo text on small screens ---- */
.logo-name {
  white-space: nowrap;
}

/* ---- Dashboard mockup — keep dark but soften shadow ---- */
.dsb-shell, .dashboard-mockup {
  box-shadow: 0 24px 60px -16px rgba(38,53,69,.30) !important;
}

/* ---- Visited link colours in legal pages stay consistent ---- */
.im-card a:visited, .ds-card a:visited, .ag-card a:visited,
.kt-info-card a:visited { color: var(--accent2) !important; }

/* ---- Body line-height & rhythm tweaks ---- */
.im-card p, .ds-card p, .ag-card p { line-height: 1.75; }
.im-card ul, .ds-card ul, .ag-card ul { padding-left: 24px; }

/* ---- Foot bottom legal: slightly more contrast ---- */
.foot-legal a { color: var(--text-dim) !important; font-weight: 500 !important; }
.foot-legal a:hover { color: var(--accent2) !important; }

/* ---- Better focus ring (a11y) ---- */
a:focus-visible,
button:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-header-cta:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 3px;
  border-radius: var(--r-pill);
}

/* ============================================================
   PRICING SECTION — UI/UX Pass (light theme + senior polish)
   Complete overhaul of the previously dark .pri-* layout.
   ============================================================ */

.pri-section {
  background: transparent !important;
  padding: 110px 24px 130px !important;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.pri-section::before {
  background: linear-gradient(90deg, transparent, rgba(122,158,126,.45) 30%, rgba(122,158,126,.45) 70%, transparent) !important;
  box-shadow: none !important;
}
.pri-bg-glow {
  background: radial-gradient(ellipse at center, rgba(122,158,126,.10) 0%, transparent 68%) !important;
}

/* Tag pill */
.pri-tag {
  background: var(--accent-mist) !important;
  border: 1px solid rgba(122,158,126,.35) !important;
  color: var(--accent2) !important;
}

/* Title + sub */
.pri-title {
  color: var(--text) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}
.pri-gradient {
  background: none !important;
  -webkit-text-fill-color: var(--accent) !important;
  color: var(--accent) !important;
  animation: none !important;
}
.pri-sub { color: var(--text-dim) !important; }

/* ---- Grid: more breathing room, equal heights, no overlap ---- */
.pri-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
  max-width: 1100px;
  width: 100%;
  padding-top: 18px;   /* space for the floating "Beliebteste"-badge */
}

/* ---- Card base (light, premium feel) ---- */
.pri-card {
  background:
    linear-gradient(180deg, #ffffff 0%, #fafaf6 100%) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 32px 28px 28px !important;
  max-height: none !important;          /* fix: don't clip content */
  display: flex;
  flex-direction: column;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 2px 4px rgba(38,53,69,.04),
    0 12px 28px -10px rgba(38,53,69,.10) !important;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}
.pri-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(122,158,126,.45) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fafaf6 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 4px 8px rgba(38,53,69,.06),
    0 20px 40px -10px rgba(38,53,69,.16) !important;
}

/* ---- Card header ---- */
.pri-card-hd {
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 18px !important;
  gap: 6px !important;
}
.pri-name {
  color: var(--accent2) !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  letter-spacing: .2em !important;
}
.pri-subhead {
  color: var(--text) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
}
.pri-desc { color: var(--text-dim) !important; }

/* ---- Price block ---- */
.pri-price {
  padding: 20px 0 18px !important;
  align-items: baseline;
}
.pri-amount {
  color: var(--text) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 900 !important;
  font-size: 2.6rem !important;
  letter-spacing: -.025em !important;
  line-height: 1 !important;
}
.pri-amount--range,
.pri-amount--custom {
  font-size: 1.9rem !important;
}
.pri-period {
  color: var(--text-mut) !important;
  font-weight: 500 !important;
}

/* ---- Custom note (INDIVIDUELL) ---- */
.pri-custom-note {
  background: var(--accent-mist) !important;
  border: 1px solid rgba(122,158,126,.32) !important;
  color: var(--text-dim) !important;
  border-radius: 10px !important;
}
.pri-custom-note svg { color: var(--accent2) !important; }
.pri-custom-note strong { color: var(--text) !important; font-weight: 700 !important; }

/* ---- Features list ---- */
.pri-features {
  gap: 12px !important;
  padding: 4px 0 22px !important;
}
.pri-features li {
  color: var(--text) !important;
  font-size: .92rem !important;
  font-weight: 500 !important;
}
.pri-features strong {
  color: var(--text) !important;
  font-weight: 700 !important;
}

/* Check circles — minimal, solid sage */
.pri-check {
  background: var(--accent-mist) !important;
  border: 1px solid rgba(122,158,126,.4) !important;
  color: var(--accent2) !important;
  width: 20px !important;
  height: 20px !important;
}
.pri-check--on {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(122,158,126,.4) !important;
}

.pri-soon {
  color: var(--accent2) !important;
  background: var(--accent-mist) !important;
  border-color: rgba(122,158,126,.3) !important;
}
.pri-soon--opt {
  color: #b97308 !important;
  background: rgba(214,137,16,.1) !important;
  border-color: rgba(214,137,16,.3) !important;
}

/* ---- CTAs (pill) ---- */
.pri-cta {
  border-radius: var(--r-pill) !important;
  padding: 13px 20px !important;
  margin-top: auto;             /* push CTA to card bottom */
}
.pri-cta--ghost {
  color: var(--text) !important;
  background: transparent !important;
  border: 1.5px solid var(--accent) !important;
}
.pri-cta--ghost:hover {
  background: var(--accent-mist) !important;
  border-color: var(--accent2) !important;
  color: var(--accent2) !important;
  transform: translateY(-1px);
}
.pri-cta--solid {
  color: #fff !important;
  background: var(--accent) !important;
  border: 1.5px solid var(--accent) !important;
  box-shadow: 0 4px 14px rgba(122,158,126,.35) !important;
}
.pri-cta--solid:hover {
  background: var(--accent2) !important;
  border-color: var(--accent2) !important;
  box-shadow: 0 8px 22px rgba(122,158,126,.45) !important;
}

/* ---- Featured card ---- */
.pri-card--featured {
  background:
    linear-gradient(180deg, var(--accent-mist) 0%, #ffffff 60%, #fafaf6 100%) !important;
  border: 2px solid var(--accent) !important;
  transform: translateY(-12px) !important;
  z-index: 2;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 12px 28px -8px rgba(122,158,126,.30),
    0 24px 60px -16px rgba(38,53,69,.16) !important;
}
.pri-card--featured:hover {
  transform: translateY(-16px) !important;
  border-color: var(--accent2) !important;
  background:
    linear-gradient(180deg, var(--accent-mist) 0%, #ffffff 60%, #fafaf6 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 16px 36px -8px rgba(122,158,126,.40),
    0 32px 70px -16px rgba(38,53,69,.20) !important;
}
.pri-card--featured .pri-card-hd {
  border-bottom-color: rgba(122,158,126,.3) !important;
}
.pri-card--featured .pri-name {
  color: var(--accent2) !important;
}
.pri-card--featured .pri-amount {
  color: var(--accent2) !important;
  background: none !important;
  -webkit-text-fill-color: var(--accent2) !important;
}

/* ---- "Beliebteste Wahl" badge ---- */
.pri-badge {
  background: var(--accent) !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow:
    0 4px 14px rgba(122,158,126,.4),
    0 0 0 1px rgba(122,158,126,.3) !important;
  top: -16px !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  padding: 8px 16px !important;
}

/* ---- Trust line below cards ---- */
.pri-trust {
  color: var(--text-dim) !important;
  font-weight: 500 !important;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  width: 100%;
  max-width: 700px;
}
.pri-ti-ic {
  background: var(--accent-mist) !important;
  border-color: rgba(122,158,126,.3) !important;
  color: var(--accent2) !important;
}
.pri-ti-dot { color: var(--text-mut) !important; }

/* ---- Responsive: featured card no longer floats up on mobile ---- */
@media (max-width: 960px) {
  .pri-grid {
    grid-template-columns: 1fr !important;
    max-width: 440px !important;
    gap: 36px !important;
    padding-top: 8px;
  }
  .pri-card--featured {
    transform: none !important;
    order: -1;
  }
  .pri-card--featured:hover {
    transform: translateY(-3px) !important;
  }
  .pri-card { padding: 28px 24px !important; }
}
@media (max-width: 520px) {
  .pri-section { padding: 80px 18px 90px !important; }
  .pri-amount { font-size: 2.4rem !important; }
  .pri-amount--range, .pri-amount--custom { font-size: 1.7rem !important; }
  .pri-trust {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    padding-left: 12px;
  }
  .pri-ti-dot { display: none; }
}

/* ============================================================
   FULL DARK→LIGHT SWEEP — Pass 3
   Catches every remaining dark-themed section (.sol-, .sys-,
   .feat-, .faq-, .cta-, .ea-, .tr-) and aligns them with the
   brand light theme. Mockups (chat phone, dashboard) STAY
   dark, but their host sections become Off-White.
   ============================================================ */

/* ---- ALL section backgrounds → transparent (over body) ---- */
.sol-section,
.sys-section,
.feat-section,
.faq-section,
.cta-section,
.ea-section,
.tr-section,
.price-section,
.prob-section,
.pri-section,
.hw-section {
  background: transparent !important;
  color: var(--text);
}

/* Section connector lines — all unified to Stone */
.sol-section::before, .sol-section::after,
.sys-section::before, .sys-section::after,
.feat-section::before, .feat-section::after,
.faq-section::before, .faq-section::after,
.cta-section::before, .cta-section::after,
.ea-section::before, .ea-section::after,
.tr-section::before, .tr-section::after {
  display: none !important;
}

/* Soft sage glows kept where intentional, but tinted */
.sol-section::after {
  display: block !important;
  background: radial-gradient(circle, rgba(122,158,126,.10), transparent 65%) !important;
}
.sys-bg-glow,
.faq-bg-glow,
.cta-bg-glow,
.cta-bg-glow--1,
.cta-bg-glow--2 {
  background: radial-gradient(circle, rgba(122,158,126,.08), transparent 65%) !important;
}
.cta-bg-grid {
  background-image:
    linear-gradient(rgba(38,53,69,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38,53,69,.03) 1px, transparent 1px) !important;
}

/* ============================================================
   SOLUTION SECTION
   ============================================================ */
.sol-tag {
  background: var(--accent-mist) !important;
  border: 1px solid rgba(122,158,126,.35) !important;
  color: var(--accent2) !important;
}
.sol-title {
  color: var(--text) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
}
.sol-gradient {
  background: none !important;
  -webkit-text-fill-color: var(--accent) !important;
  color: var(--accent) !important;
  animation: none !important;
}
.sol-sub { color: var(--text-dim) !important; }

.sol-visual {
  background: linear-gradient(180deg, #ffffff 0%, #fafaf6 100%) !important;
  border: 1px solid var(--border) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 12px 36px -12px rgba(38,53,69,.12) !important;
}
.sv-cmd, .sv-result, .sv-speed,
.sol-visual *:not(svg):not(path):not(circle):not(rect):not(polyline):not(polygon):not(line) {
  /* allow individual children to set their own colour */
}
.sv-cmd {
  color: var(--text) !important;
}
.ri-check {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}
.ritem, .sol-visual li {
  color: var(--text) !important;
}
.sv-speed {
  color: var(--accent2) !important;
}
.sol-mi {
  color: var(--text-dim) !important;
}
.sol-mi strong { color: var(--text) !important; }

/* ============================================================
   SYSTEM SECTION (.sys-*) — Dashboard frame becomes light,
   inner dashboard mockup stays dark (it's an app screen).
   ============================================================ */
.sys-badge {
  background: var(--accent-mist) !important;
  border: 1px solid rgba(122,158,126,.35) !important;
  color: var(--accent2) !important;
}
.sys-bdot {
  background: var(--accent) !important;
}
.sys-title {
  color: var(--text) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
}
.sys-sub { color: var(--text-dim) !important; }
.sys-preview-label {
  color: var(--text-mut) !important;
}

/* The dashboard frame (outer wrapper, holds the dark mockup) */
.sys-dash-wrap {
  background: linear-gradient(180deg, #ffffff 0%, #fafaf6 100%) !important;
  border: 1px solid var(--border) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 24px 60px -16px rgba(38,53,69,.14) !important;
  padding: 14px !important;
  border-radius: 18px !important;
}

/* Feature tiles below dashboard preview */
.sys-feat {
  background: linear-gradient(180deg, #ffffff 0%, #fafaf6 100%) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-sm) !important;
}
.sys-feat:hover {
  border-color: rgba(122,158,126,.45) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px);
}
.sys-feat em {
  color: var(--accent2) !important;
  font-style: normal;
  font-weight: 700;
}
.sys-feat-ic {
  background: var(--accent-mist) !important;
  border: 1px solid rgba(122,158,126,.35) !important;
  color: var(--accent2) !important;
}
.sys-feat::after { display: none !important; }
.sys-trust {
  color: var(--text-dim) !important;
}

/* ============================================================
   FEATURES SECTION (.feat-*)
   ============================================================ */
.feat-htitle {
  color: var(--text) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
}
.feat-block {
  border-bottom: 1px solid var(--border) !important;
}
.feat-block h3,
.feat-block .feat-title {
  color: var(--text) !important;
  font-family: 'Nunito', sans-serif !important;
}
.feat-block p,
.feat-block .feat-text {
  color: var(--text-dim) !important;
}
.feat-block ul li,
.feat-block .feat-list li {
  color: var(--text-dim) !important;
}
.feat-block strong { color: var(--text) !important; }

/* Feature visuals (mockup cards inside feat blocks) */
.feat-mock,
.feat-visual,
.feat-card,
.feat-image {
  background: linear-gradient(180deg, #ffffff 0%, #fafaf6 100%) !important;
  border: 1px solid var(--border) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 12px 32px -10px rgba(38,53,69,.12) !important;
}

/* ============================================================
   FAQ SECTION
   ============================================================ */
.faq-tag {
  background: var(--accent-mist) !important;
  border: 1px solid rgba(122,158,126,.35) !important;
  color: var(--accent2) !important;
}
.faq-title {
  color: var(--text) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
}
.faq-sub { color: var(--text-dim) !important; }

.faq-item {
  background: linear-gradient(180deg, #ffffff 0%, #fafaf6 100%) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 12px;
}
.faq-item:hover {
  border-color: rgba(122,158,126,.45) !important;
  box-shadow: var(--shadow-md) !important;
}
.faq-item.open {
  border-color: var(--accent) !important;
  background: linear-gradient(180deg, var(--accent-mist) 0%, #ffffff 100%) !important;
  box-shadow: 0 8px 24px -8px rgba(122,158,126,.25) !important;
}

.faq-q {
  color: var(--text) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
}
.faq-q-ic {
  background: var(--accent-mist) !important;
  border: 1px solid rgba(122,158,126,.35) !important;
  color: var(--accent2) !important;
}
.faq-item.open .faq-q-ic {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.faq-q-txt { color: var(--text) !important; }
.faq-q-toggle {
  color: var(--text-dim) !important;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: 50%;
  width: 32px; height: 32px;
}
.faq-item.open .faq-q-toggle {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.faq-a, .faq-a-inner p {
  color: var(--text-dim) !important;
}
.faq-a-inner strong { color: var(--text) !important; }

/* FAQ CTA box at bottom */
.faq-cta {
  background: linear-gradient(135deg, var(--accent-mist) 0%, #ffffff 100%) !important;
  border: 1px solid rgba(122,158,126,.4) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 12px 32px -10px rgba(122,158,126,.20) !important;
  color: var(--text);
}
.faq-cta:hover {
  border-color: var(--accent) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 16px 40px -10px rgba(122,158,126,.30) !important;
}
.faq-cta-title {
  color: var(--text) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
}
.faq-cta-sub { color: var(--text-dim) !important; }
.faq-cta-btn {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: var(--r-pill) !important;
  border: 1.5px solid var(--accent) !important;
}
.faq-cta-btn:hover {
  background: var(--accent2) !important;
  border-color: var(--accent2) !important;
  box-shadow: 0 8px 22px rgba(122,158,126,.4) !important;
}

/* ============================================================
   CTA / EA SECTIONS (final call-to-action blocks)
   ============================================================ */
.cta-tag, .ea-tag {
  background: var(--accent-mist) !important;
  border: 1px solid rgba(122,158,126,.35) !important;
  color: var(--accent2) !important;
}
.cta-title, .ea-title {
  color: var(--text) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
}
.cta-sub, .ea-sub { color: var(--text-dim) !important; }
.cta-card, .ea-card,
.cta-box, .ea-box {
  background: linear-gradient(180deg, #ffffff 0%, #fafaf6 100%) !important;
  border: 1px solid var(--border) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 16px 40px -12px rgba(38,53,69,.14) !important;
  color: var(--text);
}
.cta-btn, .ea-btn,
.cta-cta, .ea-cta {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: var(--r-pill) !important;
  border: 1.5px solid var(--accent) !important;
}
.cta-btn:hover, .ea-btn:hover,
.cta-cta:hover, .ea-cta:hover {
  background: var(--accent2) !important;
  border-color: var(--accent2) !important;
}
.cta-trust, .ea-trust {
  color: var(--text-dim) !important;
}
.cta-trust strong, .ea-trust strong {
  color: var(--text) !important;
}

/* ============================================================
   TESTIMONIALS / TRUST SECTION (.tr-*)
   ============================================================ */
.tr-tag {
  background: var(--accent-mist) !important;
  border: 1px solid rgba(122,158,126,.35) !important;
  color: var(--accent2) !important;
}
.tr-title {
  color: var(--text) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
}
.tr-sub { color: var(--text-dim) !important; }
.tr-card, .tr-quote {
  background: linear-gradient(180deg, #ffffff 0%, #fafaf6 100%) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 8px 24px -8px rgba(38,53,69,.10) !important;
}
.tr-card:hover, .tr-quote:hover {
  border-color: rgba(122,158,126,.45) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 12px 32px -8px rgba(38,53,69,.16) !important;
  transform: translateY(-2px);
}
.tr-card p,
.tr-card .tr-text,
.tr-quote-text {
  color: var(--text) !important;
}
.tr-name, .tr-author, .tr-quote-name {
  color: var(--text) !important;
  font-weight: 700 !important;
}
.tr-role, .tr-meta, .tr-quote-role {
  color: var(--text-dim) !important;
}
.tr-stars, .tr-rating {
  color: var(--c-amber) !important;
}
.tr-mini {
  color: var(--text-dim) !important;
}
.tr-mini strong { color: var(--text) !important; }
.tr-avatar, .tr-quote-avatar {
  background: var(--accent-mist) !important;
  border: 2px solid var(--accent) !important;
  color: var(--accent2) !important;
}

/* ============================================================
   GLOBAL — catch any remaining low-contrast text in non-mockup
   sections by mapping .sol-, .sys-, .feat-, .faq-, .cta-, .tr-,
   .ea- containers' generic descendants away from white-alpha.
   (Keeps dashboard mockup's .dash-*, drp-*, dsb-* untouched.)
   ============================================================ */
.sol-section p:not(.dash-sb p):not(.dsb-sb p),
.sys-section p:not(.dash-sb p):not(.dsb-sb p):not(.dash-mid p):not(.dash-rp p):not(.drp-cm p),
.feat-section p,
.faq-section p:not(.faq-q),
.cta-section p,
.tr-section p,
.ea-section p {
  color: var(--text-dim);
}

/* Headings inside these sections */
.sol-section h1, .sol-section h2, .sol-section h3, .sol-section h4,
.sys-section h1, .sys-section h2, .sys-section h3, .sys-section h4,
.feat-section h1, .feat-section h2, .feat-section h3, .feat-section h4,
.faq-section h1, .faq-section h2, .faq-section h3, .faq-section h4,
.cta-section h1, .cta-section h2, .cta-section h3, .cta-section h4,
.tr-section h1, .tr-section h2, .tr-section h3, .tr-section h4,
.ea-section h1, .ea-section h2, .ea-section h3, .ea-section h4 {
  color: var(--text);
  font-family: 'Nunito', sans-serif !important;
}

/* Generic gradient-text inside any of these → solid sage */
.sol-section .gradient-text, .sol-section [class*="gradient"]:not(.bg-grid),
.sys-section .gradient-text,
.feat-section .gradient-text,
.faq-section .gradient-text,
.cta-section .gradient-text,
.tr-section .gradient-text,
.ea-section .gradient-text {
  background: none !important;
  -webkit-text-fill-color: var(--accent) !important;
  color: var(--accent) !important;
  animation: none !important;
}

/* ============================================================
   DASHBOARD MOCKUP — keep dark, but soften shadow & frame
   so it sits well on Off-White
   ============================================================ */
.sys-dash {
  border-radius: 12px !important;
  box-shadow:
    0 0 0 1px rgba(38,53,69,.08),
    0 24px 60px -16px rgba(38,53,69,.20) !important;
}
.dsb-shell {
  border-radius: 12px !important;
  box-shadow:
    0 0 0 1px rgba(38,53,69,.08),
    0 24px 60px -16px rgba(38,53,69,.20) !important;
}

/* Section rhythm — clean dividers between everything */
.sol-section + section,
.sys-section + section,
.feat-section + section,
.faq-section + section,
.cta-section + section,
.tr-section + section,
.ea-section + section,
.prob-section + section,
.pri-section + section { border-top: 1px solid var(--border); }

/* ============================================================
   DASHBOARD MOCKUP — LIGHT THEME CONVERSION
   ("So sieht dein System aus" preview block)
   Converts the dark .dash-* / .dsb-* / .dmi-* / .drp-* mockup
   to a clean light SaaS-app look that fits the brand.
   ============================================================ */

/* Outer shell */
.sys-dash {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  overflow: hidden;
}

/* ---- Sidebar ---- */
.dash-sb {
  background: #FAFAF6 !important;
  border-right: 1px solid var(--border) !important;
}
.dsb-logo {
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
}
.dsb-logo span {
  color: var(--text) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
}
.dsb-logo svg polygon { fill: var(--accent) !important; }

.dsb-user {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
}
.dsb-user svg { stroke: var(--text-mut) !important; }
.dsb-av {
  background: var(--accent) !important;
  color: #fff !important;
}
.dsb-uname { color: var(--text) !important; font-weight: 700 !important; }
.dsb-ucomp, .dsb-uemail { color: var(--text-dim) !important; }

.dsb-nav { padding-top: 8px; }
.dsb-ni {
  color: var(--text-dim) !important;
  border-radius: 8px;
  transition: background .15s, color .15s;
}
.dsb-ni svg { stroke: var(--text-mut) !important; fill: var(--text-mut) !important; }
.dsb-ni:hover {
  background: var(--bg) !important;
  color: var(--text) !important;
}
.dsb-ni--sel {
  background: var(--accent-mist) !important;
  color: var(--accent2) !important;
  font-weight: 700;
}
.dsb-ni--sel svg {
  stroke: var(--accent2) !important;
  fill: var(--accent2) !important;
}
.dsb-ni--act {
  color: var(--accent2) !important;
  font-weight: 600;
}
.dsb-ni--act svg { stroke: var(--accent) !important; fill: none !important; }

.dsb-footer {
  background: #ffffff !important;
  border-top: 1px solid var(--border) !important;
}

/* ---- Center: posts column ---- */
.dash-mid {
  background: #ffffff !important;
  border-right: 1px solid var(--border) !important;
}
.dmi-hdr {
  background: #FAFAF6 !important;
  border-bottom: 1px solid var(--border) !important;
}
.dmi-title {
  color: var(--text) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
}
.dmi-sync {
  color: var(--text-dim) !important;
}
.dmi-sync svg { stroke: var(--text-dim) !important; }

.dmi-row {
  background: #ffffff !important;
  border-bottom: 1px solid var(--border) !important;
  transition: background .15s;
}
.dmi-row:hover { background: var(--bg) !important; }
.dmi-row--sel {
  background: var(--accent-mist) !important;
  border-left: 3px solid var(--accent);
}
.dmi-row--sel .dmi-text { color: var(--text) !important; font-weight: 600; }

.dmi-text { color: var(--text) !important; }
.dmi-stats {
  color: var(--text-dim) !important;
}
.dmi-stats span { color: var(--text-dim) !important; }
.dmi-date { color: var(--text-mut) !important; }

/* Post thumbs — give them a soft sage tint instead of muddy dark gradients */
.dmi-thumb {
  border: 1px solid var(--border) !important;
  border-radius: 8px;
}
.dmi-t--coffee { background: linear-gradient(135deg, #d4a574, #8b5a2b) !important; }
.dmi-t--salad  { background: linear-gradient(135deg, #a8c4a8, #4E7352) !important; }
.dmi-t--matcha { background: linear-gradient(135deg, #c4dcb0, #7A9E7E) !important; }
.dmi-t--warm   { background: linear-gradient(135deg, #f4c79c, #d68910) !important; }
.dmi-t--cake   { background: linear-gradient(135deg, #f5b8b8, #c75d5d) !important; }
.dmi-t--leaf   { background: linear-gradient(135deg, #c4dcb0, #4E7352) !important; }

/* ---- Right panel: live comments / messages ---- */
.dash-rp {
  background: #FAFAF6 !important;
}
.drp-live-hd {
  background: #ffffff !important;
  border-bottom: 1px solid var(--border) !important;
}
.drp-live-title {
  color: var(--text) !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
}
.drp-live-dot {
  background: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(122,158,126,.22) !important;
}
.drp-live-meta { color: var(--text-dim) !important; }

.drp-filter {
  background: #ffffff !important;
  border-bottom: 1px solid var(--border) !important;
}
.drp-ftag {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-dim) !important;
}
.drp-ftag--on {
  background: var(--accent-mist) !important;
  border-color: var(--accent) !important;
  color: var(--accent2) !important;
  font-weight: 700;
}
.drp-count {
  color: var(--text-mut) !important;
}

.drp-cms {
  background: #FAFAF6 !important;
}
.drp-cm {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(38,53,69,.04) !important;
}
.drp-cm:hover {
  border-color: rgba(122,158,126,.4) !important;
  box-shadow: 0 4px 14px rgba(38,53,69,.08) !important;
}
.drp-cmhd {
  color: var(--text) !important;
}
.drp-cmhd strong {
  color: var(--text) !important;
}
.drp-cmtxt {
  color: var(--text) !important;
}
.drp-cmft {
  color: var(--text-dim) !important;
}
.drp-ts {
  color: var(--text-mut) !important;
}

/* Reply button */
.drp-reply-btn {
  background: var(--accent-mist) !important;
  border: 1px solid rgba(122,158,126,.3) !important;
  color: var(--accent2) !important;
  font-weight: 600 !important;
}
.drp-reply-btn:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.drp-reply-btn:active {
  transform: translateY(1px);
}
.drp-reply-btn svg { stroke: currentColor !important; }

/* Platform badges (keep brand colours, but readable on white) */
.drp-badge {
  font-weight: 700 !important;
  letter-spacing: .04em;
}
.drp-badge--ig {
  background: linear-gradient(135deg, #f09433, #dc2743) !important;
  color: #fff !important;
  border: 0 !important;
}
.drp-badge--fb {
  background: #1877f2 !important;
  color: #fff !important;
  border: 0 !important;
}
.drp-badge--tt {
  background: #0a0a0a !important;
  color: #fff !important;
  border: 0 !important;
}

/* sys-preview-label above mockup */
.sys-preview-label {
  color: var(--text-dim) !important;
  font-size: .82rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  font-weight: 700 !important;
}

/* Soften outer shadow so light mockup sits on Off-White cleanly */
.sys-dash,
.dsb-shell,
.dashboard-mockup {
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 24px 60px -16px rgba(38,53,69,.16) !important;
}

/* ============================================================
   USE-CASE TABS + MULTI-CONVERSATION (Hero phone mockup)
   ============================================================ */

/* Tabs row sits between the chat header and the body */
.uc-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 6px 8px 0;
  background: rgba(0,0,0,.2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.uc-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 4px 9px;
  font-family: 'Nunito', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: rgba(255,255,255,.55);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .2s, border-color .2s;
  white-space: nowrap;
  outline: none;
}
.uc-tab:hover { color: rgba(255,255,255,.85); }
.uc-tab.is-active {
  color: #fff;
  border-bottom-color: var(--accent-lt);
}
.uc-tab-emoji { font-size: .85rem; line-height: 1; }
.uc-tab-label { line-height: 1; }

/* Only the active conversation body is visible */
.chat-body { display: none; }
.chat-body.is-active { display: flex; }

/* Image bubble (user attaches a photo) */
.cbubble-img {
  padding: 4px 4px 6px !important;
  background: #166534;
  border-radius: 14px;
  border-bottom-right-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cmock {
  width: 152px;
  height: 96px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.cmock-emoji {
  font-size: 2.4rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
  z-index: 2;
}
.cmock::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.2), transparent 60%);
  pointer-events: none;
}
/* Per-branch gradient mocks */
.cmock--cocktail {
  background:
    radial-gradient(ellipse at 70% 20%, #fcd34d, transparent 55%),
    linear-gradient(135deg, #f97316 0%, #be185d 60%, #581c87 100%);
}
.cmock--reno {
  background:
    radial-gradient(ellipse at 70% 20%, #fde68a, transparent 55%),
    linear-gradient(135deg, #92400e 0%, #ca8a04 60%, #4c1d95 110%);
}
.cmock--gym {
  background:
    radial-gradient(ellipse at 30% 30%, #a3e635, transparent 55%),
    linear-gradient(135deg, #16a34a 0%, #0e7490 60%, #1e293b 100%);
}
.cm-imgcap {
  font-size: .58rem;
  color: rgba(255,255,255,.6);
  padding: 0 6px;
  letter-spacing: .02em;
  font-style: italic;
}

/* New animation keyframes for the image-bubble (msg 1b) */
@keyframes cmsg-1b {
  0%, 7%    { opacity: 0; transform: translateY(8px); }
  12%, 77%  { opacity: 1; transform: translateY(0); }
  89%, 100% { opacity: 0; transform: translateY(0); }
}
.anim-1b { animation: cmsg-1b 13s ease-in-out infinite; opacity: 0; }

/* When a chat-body is hidden (display:none above), animations don't
   run anyway. When shown, all .anim-* classes resume from the top. */

/* ---- Mobile fine-tuning ---- */
@media (max-width: 480px) {
  .uc-tab { font-size: .62rem; padding: 6px 2px 8px; }
  .uc-tab-emoji { font-size: .78rem; }
  .cmock { width: 130px; height: 80px; }
  .cmock-emoji { font-size: 2rem; }
}

/* ============================================================
   MOBILE RESPONSIVE — Pass 4 (full project)
   Breakpoints:
     ≥ 1024px : desktop (default)
     768–1023 : tablet
     ≤ 767px  : mobile
     ≤ 480px  : small mobile
   ============================================================ */

/* ===================  HEADER + BURGER  ===================== */
.btn-burger {
  display: none;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  color: var(--text);
}
.btn-burger svg { display: block; width: 20px; height: 20px; }
.btn-burger .b-close { display: none; }
.btn-burger.is-open .b-open  { display: none; }
.btn-burger.is-open .b-close { display: block; }

/* Mobile menu drawer */
.mobile-menu {
  position: fixed;
  inset: var(--hh) 0 0 0;
  background: rgba(246,246,242,0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 199;
  display: none;
  flex-direction: column;
  padding: 24px 20px 32px;
  gap: 12px;
  overflow-y: auto;
  border-top: 1px solid var(--border);
}
.mobile-menu.is-open { display: flex; }
.mobile-menu .lang-switch { align-self: flex-start; margin: 0 0 12px; }
.mobile-menu .btn-header-login,
.mobile-menu .btn-header-cta {
  width: 100%;
  justify-content: center;
  padding: 14px 22px;
  font-size: 1rem;
}
.mobile-menu .btn-header-login {
  border: 1.5px solid var(--accent);
  color: var(--accent2);
}
body.menu-open { overflow: hidden; }

@media (max-width: 720px) {
  .header { padding: 0 18px; }
  .btn-burger { display: inline-flex; }
  /* Hide all desktop header actions except the lang switch logic in burger */
  .header-actions > .lang-switch,
  .header-actions > .btn-header-login,
  .header-actions > .btn-header-cta { display: none; }
}

/* ===================  HERO  =============================== */
@media (max-width: 1023px) {
  .hero { height: auto; min-height: 100vh; }
  .hero-inner {
    flex-direction: column;
    gap: 48px;
    padding: 32px 24px 56px;
    align-items: stretch;
  }
  .hero-left { max-width: 100%; align-items: flex-start; }
  .hero-right { width: 100%; }
  .chat-phone { margin: 0 auto; transform: scale(.92); transform-origin: top center; }
  .chat-phone { animation: none !important; }
  .float-card { display: none; }
}
@media (max-width: 767px) {
  .hero-title { font-size: clamp(1.75rem, 7vw, 2.4rem); }
  .hero-sub { font-size: .92rem; }
  .hero-trust { font-size: .76rem; }
  .chat-phone { transform: scale(.86); }
}
@media (max-width: 480px) {
  .hero-inner { padding: 24px 18px 40px; gap: 36px; }
  .hero-ctas { width: 100%; }
  .btn-primary { width: 100%; justify-content: center; }
  .chat-phone { width: 280px; transform: scale(.96); }
  .chat-glow { width: 360px; height: 360px; }
}

/* ===================  INTEGRATIONS STRIP  ================= */
@media (max-width: 767px) {
  .int-strip {
    height: auto;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    text-align: center;
  }
  .int-items { flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
  .int-sep { display: none; }
}

/* ===================  PROBLEM SECTION  ==================== */
@media (max-width: 1023px) {
  .prob-inner {
    flex-direction: column;
    gap: 56px;
    padding: 0 24px;
    align-items: stretch;
  }
  .prob-left { max-width: 100%; }
  .prob-right { width: 100%; }
  .chaos-wrap { width: 100%; max-width: 440px; height: 380px; margin: 0 auto; }
}
@media (max-width: 767px) {
  .prob-section { padding: 80px 0 90px; }
  .prob-grid { grid-template-columns: 1fr !important; gap: 14px; }
  .prob-money { width: 100%; box-sizing: border-box; }
  .chaos-wrap { height: 360px; }
  /* Hide outer overflow cards on small mobile to reduce clutter */
  .cc-2, .cc-4 { display: none; }
  .cc-1 { left: 0; }
  .cc-3 { left: 0; }
  .cc-5 { left: 50%; transform: translateX(-50%) rotate(var(--r)); }
  .cnot { display: none; }
}
@media (max-width: 480px) {
  .chaos-wrap { height: 320px; max-width: 320px; }
  .cc { width: 158px !important; }
  .cc-1 { left: -10px; top: 0; }
  .cc-3 { left: 30px; top: 130px; }
  .cc-5 { top: 240px; }
}

/* ===================  SOLUTION SECTION  =================== */
@media (max-width: 1023px) {
  .sol-section { padding: 90px 0 110px; }
  .sol-inner { padding: 0 24px; gap: 48px; }
  .sol-visual { padding: 28px 24px; }
}
@media (max-width: 767px) {
  .sol-title { font-size: clamp(1.6rem, 6vw, 2.4rem); }
  .sol-sub { font-size: .94rem; }
  .sol-visual { padding: 20px 18px; }
  .sol-micro { flex-direction: column; gap: 12px; align-items: flex-start !important; }
}

/* ===================  SYSTEM / DASHBOARD MOCKUP  ========== */
@media (max-width: 1023px) {
  .sys-section { padding: 80px 0 110px; }
  .sys-inner { padding: 0 24px; }
  /* Allow horizontal scroll on the dashboard mockup */
  .sys-dash-wrap { padding: 10px !important; }
  .sys-dash {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .sys-dash > * { flex-shrink: 0; }
}
@media (max-width: 767px) {
  .sys-title { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .sys-sub { font-size: .94rem; }
  .sys-feats { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .dash-sb { width: 168px; }
  .dash-mid { min-width: 240px; }
  .dash-rp { min-width: 240px; }
}
@media (max-width: 480px) {
  .sys-feats { grid-template-columns: 1fr !important; }
}

/* ===================  HW (Aspi orbit) SECTION  ============ */
@media (max-width: 720px) {
  .hw-inner { padding: 0 18px; }
  .hw-title br { display: none; }
}

/* ===================  FAQ  ================================ */
@media (max-width: 767px) {
  .faq-section { padding: 80px 18px 90px; }
  .faq-title { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .faq-q { padding: 16px 14px; gap: 10px; }
  .faq-q-txt { font-size: .94rem; }
  .faq-a-inner { padding: 0 14px 16px; }
  .faq-cta {
    flex-direction: column;
    text-align: center;
    align-items: center !important;
    gap: 14px;
    padding: 22px 18px !important;
  }
  .faq-cta-btn { width: 100%; justify-content: center; }
}

/* ===================  TRUST / SECURITY  =================== */
@media (max-width: 767px) {
  .tr-section { padding: 70px 18px 80px; }
  .tr-title { font-size: clamp(1.5rem, 6vw, 2rem); }
  .tr-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
}
@media (max-width: 420px) {
  .tr-grid { grid-template-columns: 1fr !important; }
}

/* ===================  FINAL CTA  ========================== */
@media (max-width: 767px) {
  .cta-section { padding: 80px 18px 90px; }
  .cta-title { font-size: clamp(1.7rem, 6.5vw, 2.4rem); }
  .cta-sub { font-size: .96rem; }
  .cta-section .hero-ctas,
  .cta-section .cta-row {
    flex-direction: column;
    width: 100%;
  }
  .cta-section a.btn-primary,
  .cta-section a.btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

/* ===================  SUBPAGES (about, contact, legal, privacy, terms)  === */
@media (max-width: 767px) {
  .ab-page, .kt-page, .im-page, .ds-page, .ag-page {
    padding-top: calc(var(--hh) + 24px);
  }
  .ab-wrap, .kt-wrap, .im-wrap, .ds-wrap, .ag-wrap {
    padding: 0 18px 64px !important;
  }
  .ab-title, .kt-title, .im-title, .ds-title, .ag-title {
    font-size: clamp(1.7rem, 7vw, 2.4rem) !important;
  }
  .ab-card, .kt-info-card, .kt-mail-card, .im-card, .ds-card, .ag-card {
    padding: 22px 18px !important;
  }
  .ab-story { grid-template-columns: 1fr !important; gap: 14px !important; }
  .ab-team { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .kt-info { grid-template-columns: 1fr !important; }
  .kt-cta-row { flex-direction: column; }
  .kt-btn { width: 100%; justify-content: center; }
  /* Legal-pages key/value list collapses to stacked layout */
  .im-kv { grid-template-columns: 1fr !important; gap: 4px 0 !important; }
  .im-kv dt { font-size: .82rem; opacity: .85; margin-top: 8px; }
  .im-kv dd { margin-bottom: 8px !important; }
}
@media (max-width: 420px) {
  .ab-team { grid-template-columns: 1fr !important; }
}

/* ===================  HERO USE-CASE TABS  ================= */
@media (max-width: 480px) {
  .uc-tabs { padding: 4px 6px 0; }
  .uc-tab { padding: 6px 2px 8px; font-size: .6rem; gap: 3px; }
  .uc-tab-emoji { font-size: .76rem; }
}

/* ===================  GENERAL CONTAINER GUARD  ============ */
@media (max-width: 767px) {
  /* Prevent any rogue fixed-width content from breaking layout */
  body { overflow-x: hidden; }
  img, svg { max-width: 100%; height: auto; }
  pre, code { word-break: break-word; white-space: pre-wrap; }
}

/* ===================  REDUCE-MOTION on mobile  ============ */
@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
  /* Soften over-busy animations on small screens */
  .hw-ring,
  .chaos-glow,
  .chat-phone {
    animation-duration: 9s !important;
  }
}

/* ============================================================
   MOBILE POLISH — Pass 5
   Lower-page sections: Trust, FAQ, Pricing, Final CTA, Footer
   plus the HW Aspi-orbit area's title/sub above the stage.
   ============================================================ */

/* ---- HW section: tighten title + sub on small phones ---- */
@media (max-width: 720px) {
  .hw-section .hw-inner { padding: 0 8px; }
  .hw-tag { font-size: .72rem; }
}

/* ---- Trust section ---- */
.tr-card {
  background: linear-gradient(180deg, #ffffff 0%, #fafaf6 100%) !important;
  border: 1px solid var(--border) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 4px 12px -4px rgba(38,53,69,.08) !important;
}
.tr-card:hover {
  border-color: rgba(122,158,126,.45) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fafaf6 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 8px 20px -6px rgba(38,53,69,.14) !important;
}
.tr-ic {
  background: var(--accent-mist) !important;
  border: 1px solid rgba(122,158,126,.35) !important;
  color: var(--accent2) !important;
}
.tr-ct { color: var(--text) !important; font-family: 'Nunito', sans-serif; }
.tr-cd { color: var(--text-dim) !important; }
.tr-title-accent {
  background: none !important;
  -webkit-text-fill-color: var(--accent) !important;
  color: var(--accent) !important;
}
.tr-mini { color: var(--text-dim) !important; }

@media (max-width: 720px) {
  .tr-section { padding: 64px 18px 60px; }
  .tr-title { font-size: clamp(1.4rem, 5.6vw, 1.9rem); }
  .tr-card {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 14px 16px !important;
  }
  .tr-ic {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    margin-bottom: 0;
  }
  .tr-ct { font-size: .92rem; }
  .tr-cd { font-size: .78rem; }
  .tr-mini { font-size: .82rem; padding: 0 8px; }
}
@media (max-width: 420px) {
  .tr-grid { gap: 10px; }
  .tr-card { padding: 12px 14px !important; }
}

/* ---- FAQ: improve tap targets, remove animation jitter ---- */
@media (max-width: 720px) {
  .faq-section { padding: 64px 16px 72px; }
  .faq-tag { font-size: .72rem; }
  .faq-title { font-size: clamp(1.5rem, 5.6vw, 2rem); }
  .faq-sub { font-size: .92rem; }
  .faq-item { margin-bottom: 10px; }
  .faq-q {
    padding: 14px 14px !important;
    gap: 10px !important;
  }
  .faq-q-ic {
    width: 28px !important;
    height: 28px !important;
  }
  .faq-q-ic svg { width: 14px; height: 14px; }
  .faq-q-txt {
    font-size: .9rem !important;
    line-height: 1.35 !important;
  }
  .faq-q-toggle {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0;
  }
  .faq-a-inner {
    padding: 0 14px 16px !important;
  }
  .faq-a-inner p { font-size: .88rem; line-height: 1.6; }

  /* CTA box at the end of FAQ */
  .faq-cta {
    flex-direction: column !important;
    text-align: center;
    align-items: center !important;
    gap: 14px;
    padding: 22px 18px !important;
  }
  .faq-cta-title { font-size: 1.05rem !important; }
  .faq-cta-sub  { font-size: .88rem !important; }
  .faq-cta-btn {
    width: 100%;
    justify-content: center;
    padding: 12px 22px !important;
  }
}

/* ---- Pricing: tighter Mobile fine-tune ---- */
@media (max-width: 720px) {
  .pri-section { padding: 64px 18px 80px !important; }
  .pri-tag { font-size: .68rem; }
  .pri-title { font-size: clamp(1.5rem, 5.8vw, 2.1rem); }
  .pri-sub { font-size: .92rem; }
  .pri-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding-top: 14px;
  }
  .pri-card {
    padding: 24px 22px !important;
  }
  .pri-card--featured {
    transform: none !important;
    order: -1;
    margin-top: 6px;
  }
  .pri-card--featured:hover {
    transform: translateY(-3px) !important;
  }
  .pri-name { font-size: .68rem !important; }
  .pri-subhead { font-size: 1rem !important; }
  .pri-amount { font-size: 2.2rem !important; }
  .pri-amount--range,
  .pri-amount--custom { font-size: 1.6rem !important; }

  .pri-features li { font-size: .88rem !important; }
  .pri-cta { padding: 12px 18px !important; font-size: .88rem !important; }
  .pri-badge {
    font-size: .62rem !important;
    padding: 6px 12px !important;
    top: -14px !important;
  }

  .pri-trust {
    padding: 14px 16px 0 !important;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: .78rem !important;
  }
  .pri-ti-dot { display: none; }
}

/* ---- Final CTA section ---- */
@media (max-width: 720px) {
  .cta-section { padding: 64px 16px 72px !important; }
  .cta-title { font-size: clamp(1.7rem, 6.2vw, 2.4rem) !important; }
  .cta-title-accent {
    display: inline-block;
  }
  .cta-sub { font-size: .96rem !important; }

  .cta-section .hero-ctas,
  .cta-section .cta-row,
  .cta-section .cta-buttons {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100%;
  }
  .cta-section .btn-primary,
  .cta-section .btn-secondary,
  .cta-section a[class*="btn"] {
    width: 100%;
    justify-content: center;
  }

  .cta-trust, .cta-meta {
    flex-direction: column;
    gap: 8px !important;
    text-align: center;
  }
}

/* ---- Footer mobile polish ---- */
@media (max-width: 720px) {
  .foot { margin-top: 40px; }
  .foot-main {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 36px 22px 28px !important;
    text-align: center;
  }
  .foot-col--brand {
    align-items: center;
    max-width: 100%;
    padding: 0;
  }
  .foot-brand { justify-content: center; }
  .foot-brand-tag { text-align: center; max-width: 320px; margin: 0 auto; }
  .foot-social { justify-content: center; }
  .foot-col { align-items: center; }
  .foot-hd::after {
    left: 50%;
    transform: translateX(-50%);
  }
  .foot-ls { align-items: center; }
  .foot-ls a { display: inline-flex; padding: 4px 0; }
  .foot-ls a::before { display: none; }
  .foot-ls a:hover::before { width: 0; margin-right: 0; }

  .foot-bottom {
    flex-direction: column;
    gap: 14px;
    padding: 18px 22px 22px !important;
    text-align: center;
  }
  .foot-legal {
    justify-content: center;
    flex-wrap: wrap;
  }
}
@media (max-width: 420px) {
  .foot-main { padding: 32px 18px 24px !important; }
  .foot-legal li:not(:last-child)::after { margin: 0 8px; }
}

/* ---- Section spacing rhythm: don't let headings touch the burger header ---- */
@media (max-width: 720px) {
  section[class*="-section"] {
    scroll-margin-top: calc(var(--hh) + 12px);
  }
}

/* ============================================================
   HERO PHONE — Mobile sizing + scrollable chat body
   ============================================================ */

@media (max-width: 1023px) {
  /* Tablet: smaller phone, real width (no transform-scale glitches) */
  .chat-phone {
    width: 280px !important;
    transform: none !important;
    animation: none !important;
  }
  .chat-glow {
    width: 380px !important;
    height: 380px !important;
  }
}

@media (max-width: 720px) {
  /* Mobile: compact phone with internally scrollable conversation */
  .chat-phone {
    width: 260px !important;
    border-radius: 18px;
  }
  .chat-glow {
    width: 320px !important;
    height: 320px !important;
  }
  /* Header & input bar a touch smaller so the body has more room */
  .chat-hdr { padding: 10px 12px; }
  .cha-av { width: 30px; height: 30px; font-size: .56rem; }
  .cha-name { font-size: .76rem; }
  .cha-status { font-size: .6rem; }
  .uc-tabs { padding: 4px 6px 0; }

  /* Scrollable chat body — proportional, scroll inside the phone */
  .chat-body {
    min-height: 0 !important;
    height: 320px;
    max-height: 320px;
    padding: 10px 10px;
    gap: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    /* subtle inner shadow at top/bottom hints scrollability */
    background:
      linear-gradient(#0a190d 30%, transparent),
      linear-gradient(transparent, #0a190d 70%) 0 100%,
      radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.4), transparent),
      radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.4), transparent) 0 100%;
    background-repeat: no-repeat;
    background-color: #0a190d;
    background-size: 100% 12px, 100% 12px, 100% 5px, 100% 5px;
    background-attachment: local, local, scroll, scroll;
  }
  /* Subtle scrollbar */
  .chat-body::-webkit-scrollbar { width: 4px; }
  .chat-body::-webkit-scrollbar-track { background: transparent; }
  .chat-body::-webkit-scrollbar-thumb {
    background: rgba(122,158,126,.35);
    border-radius: 4px;
  }
  .chat-body { scrollbar-width: thin; scrollbar-color: rgba(122,158,126,.35) transparent; }

  /* Slightly smaller bubbles to fit the narrower phone */
  .cbubble { font-size: .74rem; padding: 7px 11px; }
  .cm-author-pic { width: 16px; height: 16px; }
  .cm-author-name { font-size: .68rem; }
  .cmock { width: 130px; height: 78px; }
  .cmock-emoji { font-size: 2rem; }
  .cm-imgcap { font-size: .54rem; }
}

@media (max-width: 480px) {
  .chat-phone {
    width: 248px !important;
  }
  .chat-glow {
    width: 280px !important;
    height: 280px !important;
  }
  .chat-body {
    height: 300px;
    max-height: 300px;
  }
}

@media (max-width: 360px) {
  .chat-phone {
    width: 232px !important;
  }
  .chat-body {
    height: 280px;
    max-height: 280px;
  }
}

/* Also tighten chat input bar on mobile so total phone height stays compact */
@media (max-width: 720px) {
  .chat-input {
    padding: 8px 10px !important;
  }
  .ci-field { padding: 6px 10px; font-size: .68rem; }
  .ci-send { width: 26px; height: 26px; }
}

/* ============================================================
   CHAT MESSAGES — JS-driven sequence (overrides CSS keyframes)
   We hide all messages by default and let JS reveal them one by
   one with proper pauses, so each is readable.
   ============================================================ */
.chat-body[data-uc] .cmsg.anim-1,
.chat-body[data-uc] .cmsg.anim-1b,
.chat-body[data-uc] .cmsg.anim-2,
.chat-body[data-uc] .cmsg.anim-3,
.chat-body[data-uc] .cmsg.anim-4,
.chat-body[data-uc] .cmsg.anim-typing-1,
.chat-body[data-uc] .cmsg.anim-typing-2 {
  animation: none !important;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease-out, transform .35s ease-out;
}
.chat-body[data-uc] .cmsg.is-shown {
  opacity: 1;
  transform: translateY(0);
}