/* ═══════════════════════════════════════════════
   VARIABLES
═══════════════════════════════════════════════ */
:root {
  --bg: #07060f;
  --card: rgba(18, 15, 32, 0.88);
  --purple: #6d28d9;
  --purple-mid: #7c3aed;
  --purple-hi: #a78bfa;
  --pink: #ec4899;
  --pink-soft: #f472b6;
  --grad: linear-gradient(130deg, #6d28d9 0%, #9333ea 50%, #ec4899 100%);
  --grad-soft: linear-gradient(
    130deg,
    rgba(109, 40, 217, 0.14) 0%,
    rgba(236, 72, 153, 0.09) 100%
  );
  --glow: rgba(124, 58, 237, 0.4);
  --text: #f0ecfa;
  --muted: #8b80a8;
  --white: #fff;
  --border: rgba(124, 58, 237, 0.2);
  --border-hi: rgba(167, 139, 250, 0.38);
  --r: 14px;
}

/* ===== SAFETY TOOLS POLISH PASS ===== */
.tools-page {
  background:
    radial-gradient(
      circle at 22% 18%,
      rgba(124, 58, 237, 0.12),
      transparent 28%
    ),
    radial-gradient(
      circle at 78% 8%,
      rgba(236, 72, 153, 0.08),
      transparent 28%
    ),
    #05040b;
}
.tools-hero {
  min-height: 500px;
  padding: 96px 28px 42px;
  border-bottom: 1px solid rgba(124, 58, 237, 0.16);
}
.tools-hero-bg {
  background:
    radial-gradient(
      circle at 66% 48%,
      rgba(124, 58, 237, 0.16),
      transparent 30%
    ),
    #05040b;
}
.tools-hero-bg::before {
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(5, 4, 12, 0.96) 0%,
      rgba(5, 4, 12, 0.72) 32%,
      rgba(5, 4, 12, 0.32) 58%,
      rgba(5, 4, 12, 0.86) 100%
    ),
    linear-gradient(
      180deg,
      rgba(5, 4, 12, 0.12) 0%,
      rgba(5, 4, 12, 0.36) 68%,
      rgba(5, 4, 12, 0.97) 100%
    ),
    url("assets/tool.png") center top/100% auto no-repeat;
  filter: brightness(0.68) saturate(0.96) contrast(1.03);
}
.tools-hero-bg::after {
  background:
    linear-gradient(180deg, rgba(5, 4, 12, 0) 0%, rgba(5, 4, 12, 0.74) 100%),
    radial-gradient(
      circle at 74% 42%,
      rgba(124, 58, 237, 0.16),
      transparent 32%
    );
  opacity: 0.9;
}
.tools-hero-inner {
  min-height: 360px;
  grid-template-columns: minmax(360px, 0.72fr) minmax(280px, 0.45fr);
  align-items: center;
}
.tools-hero-copy span {
  font-size: 0.76rem;
  font-weight: 700;
  color: #c084fc;
}
.tools-hero-copy h1 {
  max-width: 560px;
  margin-top: 12px;
  font-family: "Outfit", sans-serif;
  font-size: clamp(2.35rem, 3vw, 3.35rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0;
}
.tools-hero-copy h1 strong {
  margin-top: 2px;
  text-shadow: none;
}
.tools-hero-copy p {
  max-width: 490px;
  margin-top: 16px;
  color: rgba(240, 236, 250, 0.72);
  font-size: 0.94rem;
}
.tools-hero-note {
  max-width: 370px;
  padding: 15px 18px;
  background: rgba(11, 9, 23, 0.58);
  border-color: rgba(167, 139, 250, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.tools-quote {
  justify-self: end;
  max-width: 330px;
  padding: 16px 0 16px 18px;
  background: rgba(5, 4, 12, 0.18);
  border-left: 1px solid rgba(192, 132, 252, 0.24);
}
.tools-quote p {
  font-family: "Outfit", sans-serif;
  font-size: 1.08rem;
  color: rgba(240, 236, 250, 0.82);
}
.tools-grid-section {
  margin: -24px auto 0;
  padding: 0 28px 36px;
}
.tools-grid-main {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.tool-card {
  min-height: 268px;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(15, 14, 29, 0.96), rgba(8, 7, 18, 0.97)),
    radial-gradient(
      circle at 20% 12%,
      rgba(124, 58, 237, 0.12),
      transparent 32%
    );
  border-color: rgba(124, 58, 237, 0.18);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.tool-card::before {
  background: radial-gradient(
    circle at 18% 14%,
    rgba(124, 58, 237, 0.11),
    transparent 30%
  );
}
.tool-card:hover {
  transform: translateY(-4px);
  border-color: rgba(167, 139, 250, 0.34);
  box-shadow:
    0 18px 46px rgba(60, 22, 112, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.tool-card header {
  grid-template-columns: 48px 1fr 12px;
  gap: 14px;
  margin-bottom: 18px;
}
.tool-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(124, 58, 237, 0.74),
    rgba(59, 7, 100, 0.78)
  );
  border-color: rgba(167, 139, 250, 0.18);
  color: #f3e8ff;
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.22);
}
.tool-icon::before {
  inset: 0;
  width: 25px;
  height: 25px;
  margin: auto;
  background: currentColor;
  -webkit-mask: center/contain no-repeat;
  mask: center/contain no-repeat;
}
.tool-icon::after {
  display: none;
}
.icon-call::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.6 10.8c1.7 3.4 3.2 4.9 6.6 6.6l2.2-2.2c.3-.3.8-.4 1.2-.2 1.3.4 2.7.7 4.1.7.7 0 1.3.6 1.3 1.3v3.6c0 .7-.6 1.3-1.3 1.3C10.4 21.9 2.1 13.6 2.1 3.3 2.1 2.6 2.7 2 3.4 2H7c.7 0 1.3.6 1.3 1.3 0 1.4.2 2.8.7 4.1.1.4 0 .8-.3 1.1l-2.1 2.3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.6 10.8c1.7 3.4 3.2 4.9 6.6 6.6l2.2-2.2c.3-.3.8-.4 1.2-.2 1.3.4 2.7.7 4.1.7.7 0 1.3.6 1.3 1.3v3.6c0 .7-.6 1.3-1.3 1.3C10.4 21.9 2.1 13.6 2.1 3.3 2.1 2.6 2.7 2 3.4 2H7c.7 0 1.3.6 1.3 1.3 0 1.4.2 2.8.7 4.1.1.4 0 .8-.3 1.1l-2.1 2.3Z'/%3E%3C/svg%3E");
}
.icon-mic::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 14c1.7 0 3-1.3 3-3V5c0-1.7-1.3-3-3-3S9 3.3 9 5v6c0 1.7 1.3 3 3 3Zm5-3c0 2.8-2.2 5-5 5s-5-2.2-5-5H5c0 3.5 2.6 6.4 6 6.9V21H8v2h8v-2h-3v-3.1c3.4-.5 6-3.4 6-6.9h-2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 14c1.7 0 3-1.3 3-3V5c0-1.7-1.3-3-3-3S9 3.3 9 5v6c0 1.7 1.3 3 3 3Zm5-3c0 2.8-2.2 5-5 5s-5-2.2-5-5H5c0 3.5 2.6 6.4 6 6.9V21H8v2h8v-2h-3v-3.1c3.4-.5 6-3.4 6-6.9h-2Z'/%3E%3C/svg%3E");
}
.icon-timer::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15 1H9v2h6V1Zm-4 13h2V8h-2v6Zm1 8a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0-2a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15 1H9v2h6V1Zm-4 13h2V8h-2v6Zm1 8a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0-2a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z'/%3E%3C/svg%3E");
}
.icon-message::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16c1.1 0 2 .9 2 2v9c0 1.1-.9 2-2 2H9l-5 5v-5c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2Zm3 5v2h10V9H7Zm0 4v2h7v-2H7Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16c1.1 0 2 .9 2 2v9c0 1.1-.9 2-2 2H9l-5 5v-5c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2Zm3 5v2h10V9H7Zm0 4v2h7v-2H7Z'/%3E%3C/svg%3E");
}
.icon-shield::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3Zm3.7 7.7-4.3 4.3-2.1-2.1-1.4 1.4 3.5 3.5 5.7-5.7-1.4-1.4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3Zm3.7 7.7-4.3 4.3-2.1-2.1-1.4 1.4 3.5 3.5 5.7-5.7-1.4-1.4Z'/%3E%3C/svg%3E");
}
.icon-star::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 2 3 6.2 6.8 1-4.9 4.8 1.2 6.8-6.1-3.2-6.1 3.2 1.2-6.8-4.9-4.8 6.8-1L12 2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 2 3 6.2 6.8 1-4.9 4.8 1.2 6.8-6.1-3.2-6.1 3.2 1.2-6.8-4.9-4.8 6.8-1L12 2Z'/%3E%3C/svg%3E");
}
.icon-guardian::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 11c1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3 1.3 3 3 3ZM8 11c1.7 0 3-1.3 3-3S9.7 5 8 5 5 6.3 5 8s1.3 3 3 3Zm0 2c-2.7 0-6 1.3-6 4v2h12v-2c0-2.7-3.3-4-6-4Zm8 0c-.3 0-.7 0-1 .1 1.2.9 2 2.1 2 3.9v2h5v-2c0-2.7-3.3-4-6-4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 11c1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3 1.3 3 3 3ZM8 11c1.7 0 3-1.3 3-3S9.7 5 8 5 5 6.3 5 8s1.3 3 3 3Zm0 2c-2.7 0-6 1.3-6 4v2h12v-2c0-2.7-3.3-4-6-4Zm8 0c-.3 0-.7 0-1 .1 1.2.9 2 2.1 2 3.9v2h5v-2c0-2.7-3.3-4-6-4Z'/%3E%3C/svg%3E");
}
.tool-card h2 {
  font-size: 1rem;
  font-weight: 700;
}
.tool-card p {
  font-size: 0.74rem;
  color: rgba(240, 236, 250, 0.62);
}
.tool-card ul {
  margin-top: auto;
  padding-top: 14px;
}
.tool-card li {
  font-size: 0.74rem;
  color: rgba(240, 236, 250, 0.68);
}
.fake-call-box,
.timer-box,
.message-preview,
.safe-zone-layout,
.score-layout,
.angel-layout {
  margin-top: 6px;
}
.fake-call-box,
.timer-box,
.message-preview,
.nearest-place,
.score-list p,
.angel-list p {
  background: rgba(255, 255, 255, 0.032);
  border-color: rgba(167, 139, 250, 0.14);
}
.tools-wave {
  margin-top: 0;
  height: 66px;
}
.safe-zone-tool,
.travel-score-tool {
  min-height: 308px;
}
.guardian-angel-tool {
  min-height: 308px;
  border-color: rgba(167, 139, 250, 0.36);
  box-shadow:
    0 16px 44px rgba(88, 28, 135, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.angel-art {
  background: radial-gradient(
    circle,
    rgba(168, 85, 247, 0.16),
    transparent 68%
  );
}
.tools-footer {
  background: linear-gradient(
    90deg,
    rgba(68, 25, 126, 0.28),
    rgba(10, 9, 22, 0.96) 42%,
    rgba(10, 9, 22, 0.92)
  );
  border-color: rgba(124, 58, 237, 0.18);
}
@media (max-width: 1220px) {
  .tools-hero {
    min-height: 430px;
  }
  .tools-hero-bg::before {
    background:
      linear-gradient(
        180deg,
        rgba(5, 4, 12, 0.62) 0%,
        rgba(5, 4, 12, 0.94) 100%
      ),
      url("assets/tool.png") center top/auto 100% no-repeat;
  }
  .tools-hero-inner {
    grid-template-columns: 1fr;
    min-height: 300px;
    gap: 12px;
  }
  .tools-quote {
    justify-self: center;
    max-width: 520px;
    text-align: center;
    border-left: 0;
  }
}
@media (max-width: 720px) {
  .tools-hero {
    min-height: 430px;
    padding: 78px 16px 24px;
  }
  .tools-hero-bg::before {
    background:
      linear-gradient(
        180deg,
        rgba(5, 4, 12, 0.58) 0%,
        rgba(5, 4, 12, 0.97) 82%
      ),
      url("assets/tool.png") center top/auto 100% no-repeat;
    filter: brightness(0.56) saturate(0.9);
  }
  .tools-hero-copy h1 {
    font-size: 2.05rem;
  }
  .tools-hero-note {
    padding: 13px 14px;
  }
  .tools-grid-section {
    padding: 0 14px 24px;
  }
  .tool-card {
    padding: 16px;
  }
  .tool-card header {
    grid-template-columns: 44px 1fr 10px;
    gap: 12px;
  }
  .tool-icon {
    width: 44px;
    height: 44px;
  }
  .tool-icon::before {
    width: 23px;
    height: 23px;
  }
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Outfit", sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════
   SCROLL REVEAL (JS-driven)
═══════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-36px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(36px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ═══════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════ */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 56px;
  height: 72px;
  background: rgba(7, 6, 15, 0);
  backdrop-filter: blur(0px);
  border-bottom: 1px solid transparent;
  transition:
    background 0.4s,
    backdrop-filter 0.4s,
    border-color 0.4s;
}
nav.scrolled {
  background: rgba(7, 6, 15, 0.82);
  backdrop-filter: blur(26px) saturate(1.6);
  border-bottom-color: var(--border);
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}
.logo-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 0 22px var(--glow);
  transition:
    box-shadow 0.3s,
    transform 0.3s;
}
.logo-icon:hover {
  transform: scale(1.08);
  box-shadow: 0 0 36px var(--glow);
}
.logo-text h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.02em;
}
.logo-text p {
  font-size: 0.6rem;
  color: var(--muted);
  letter-spacing: 0.05em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
}
.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 500;
  transition: color 0.2s;
  position: relative;
  padding-bottom: 3px;
}
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}
.nav-links a.active {
  color: var(--white);
}
.nav-links a.active::after,
.nav-links a:hover::after {
  transform: scaleX(1);
}
.nav-links a:hover {
  color: var(--purple-hi);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lang-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 0.82rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: "Outfit", sans-serif;
  transition: color 0.2s;
}
.lang-btn:hover {
  color: var(--white);
}
.btn-get {
  background: var(--grad);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 24px;
  font-size: 0.87rem;
  font-weight: 600;
  cursor: pointer;
  font-family: "Outfit", sans-serif;
  transition: all 0.25s;
  box-shadow: 0 0 24px var(--glow);
  position: relative;
  overflow: hidden;
}
.btn-get::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(255, 255, 255, 0.15), transparent);
  opacity: 0;
  transition: opacity 0.2s;
}
.btn-get:hover::after {
  opacity: 1;
}
.btn-get:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 32px var(--glow);
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  background: none;
  border: none;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all 0.3s;
}
.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
}
.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav drawer */
.mobile-nav {
  display: none;
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  z-index: 299;
  background: rgba(7, 6, 15, 0.97);
  backdrop-filter: blur(30px);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.4s;
}
.mobile-nav.open {
  max-height: 500px;
  padding: 20px 24px 24px;
}
.mobile-nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mobile-nav a {
  display: block;
  padding: 14px 0;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s;
}
.mobile-nav a:hover,
.mobile-nav a.active {
  color: var(--purple-hi);
}
.mobile-nav .mob-btn {
  display: block;
  margin-top: 18px;
  background: var(--grad);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 13px;
  font-size: 0.9rem;
  font-weight: 600;
  width: 100%;
  cursor: pointer;
  font-family: "Outfit", sans-serif;
  box-shadow: 0 0 22px var(--glow);
}

/* ═══════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 110px 56px 80px;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("assets/hero_bg.png") center/cover no-repeat;
}
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(7, 6, 15, 0.96) 0%,
    rgba(7, 6, 15, 0.65) 52%,
    rgba(7, 6, 15, 0.2) 100%
  );
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 12% 65%,
      rgba(109, 40, 217, 0.26) 0%,
      transparent 52%
    ),
    radial-gradient(
      ellipse at 82% 20%,
      rgba(236, 72, 153, 0.15) 0%,
      transparent 48%
    );
}

/* Animated glow orbs */
.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
}
.orb1 {
  width: 600px;
  height: 600px;
  top: -150px;
  left: -150px;
  background: rgba(109, 40, 217, 0.16);
  animation: orbf1 8s ease-in-out infinite;
}
.orb2 {
  width: 400px;
  height: 400px;
  bottom: -60px;
  right: 22%;
  background: rgba(236, 72, 153, 0.13);
  animation: orbf2 10s ease-in-out infinite;
}
.orb3 {
  width: 250px;
  height: 250px;
  top: 30%;
  right: 40%;
  background: rgba(167, 139, 250, 0.08);
  animation: orbf1 6s 2s ease-in-out infinite;
}
@keyframes orbf1 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(30px, -20px) scale(1.08);
  }
}
@keyframes orbf2 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-20px, 25px) scale(1.06);
  }
}

/* Floating particles */
.particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(167, 139, 250, 0.6);
  animation: pfloat linear infinite;
}
@keyframes pfloat {
  0% {
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(-100px) scale(1.5);
    opacity: 0;
  }
}

.hero-inner {
  position: relative;
  z-index: 5;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.hero-content {
  max-width: 560px;
  width: 100%;
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(109, 40, 217, 0.13);
  border: 1px solid rgba(167, 139, 250, 0.3);
  color: var(--purple-hi);
  font-size: 0.69rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 30px;
  animation: su 0.7s 0.05s ease both;
}
.badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--purple-hi);
  box-shadow: 0 0 8px var(--purple-hi);
  animation: blink 1.8s ease-in-out infinite;
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}

/* Heading */
.hero h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.1rem, 3.8vw, 3.3rem);
  font-weight: 700;
  line-height: 1.17;
  color: var(--white);
  letter-spacing: -0.01em;
  animation: su 0.7s 0.15s ease both;
}
.hero h1 em {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: italic;
  text-decoration: underline;
  text-decoration-color: rgba(236, 72, 153, 0.3);
  text-underline-offset: 7px;
}
.heart {
  display: inline-block;
  margin-left: 10px;
  width: 38px;
  height: 38px;
  color: #fff;
  -webkit-text-fill-color: #fff;
  vertical-align: middle;
  animation: hb 2.4s ease-in-out infinite;
}
.heart::before {
  content: "\2665";
  display: block;
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-family: "Outfit", sans-serif;
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-shadow:
    0 0 9px rgba(255, 255, 255, 0.9),
    0 0 22px rgba(236, 72, 153, 0.45),
    0 0 34px rgba(124, 58, 237, 0.34);
}
@keyframes hb {
  0%,
  100% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.25);
  }
  40% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.15);
  }
}

.hero-body {
  margin-top: 22px;
  color: rgba(240, 236, 250, 0.7);
  font-size: 0.95rem;
  line-height: 1.76;
  animation: su 0.7s 0.28s ease both;
}
.hero-body strong {
  color: var(--white);
  font-weight: 600;
}

.tagline {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--pink-soft);
  animation: su 0.7s 0.36s ease both;
}
.tagline::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1.5px;
  background: var(--pink-soft);
}

/* CTAs */
.hero-ctas {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
  flex-wrap: wrap;
  animation: su 0.7s 0.46s ease both;
}
.cta-p {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--grad);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 13px 22px;
  cursor: pointer;
  font-family: "Outfit", sans-serif;
  transition: all 0.28s;
  box-shadow: 0 6px 30px rgba(109, 40, 217, 0.45);
  position: relative;
  overflow: hidden;
}
.cta-p::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(255, 255, 255, 0.18), transparent);
  opacity: 0;
  transition: opacity 0.2s;
}
.cta-p:hover::before {
  opacity: 1;
}
.cta-p:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 44px rgba(109, 40, 217, 0.6);
}
.cta-p .ico {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cta-p .txt strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
}
.cta-p .txt span {
  font-size: 0.7rem;
  opacity: 0.75;
}
.cta-p .arr {
  margin-left: 4px;
  font-size: 1.1rem;
  transition: transform 0.22s;
}
.cta-p:hover .arr {
  transform: translateX(5px);
}

.cta-s {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(167, 139, 250, 0.28);
  border-radius: 12px;
  padding: 13px 22px;
  cursor: pointer;
  font-family: "Outfit", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.25s;
}
.cta-s:hover {
  border-color: var(--purple-hi);
  background: rgba(109, 40, 217, 0.14);
  transform: translateY(-2px);
}
.play-c {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(167, 139, 250, 0.16);
  border: 1.5px solid rgba(167, 139, 250, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  transition:
    background 0.2s,
    transform 0.2s;
}
.play-c::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 2px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #fff;
}
.cta-s:hover .play-c {
  background: rgba(167, 139, 250, 0.28);
  transform: scale(1.1);
}

/* Testing Banner */
.tb {
  margin-top: 38px;
  max-width: 510px;
  background: rgba(10, 8, 20, 0.84);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  backdrop-filter: blur(24px);
  box-shadow:
    0 0 60px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(167, 139, 250, 0.07);
  animation: su 0.7s 0.58s ease both;
  position: relative;
  overflow: hidden;
}
.tb::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--grad);
  opacity: 0.35;
}
.tb-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.tb-ico {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  flex-shrink: 0;
  background: rgba(109, 40, 217, 0.18);
  border: 1px solid rgba(167, 139, 250, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tb-t h4 {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 5px;
}
.tb-t p {
  font-size: 0.77rem;
  color: var(--muted);
  line-height: 1.56;
}
.tb-feats {
  display: flex;
  margin-top: 18px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.tb-f {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-right: 12px;
}
.tb-f:not(:last-child) {
  border-right: 1px solid var(--border);
  margin-right: 12px;
}
.tb-f-ico {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(124, 58, 237, 0.12);
  color: #c084fc;
  flex-shrink: 0;
  margin-top: 1px;
}
.tb-f-body h5 {
  font-size: 0.77rem;
  font-weight: 600;
  color: var(--purple-hi);
  margin-bottom: 2px;
}
.tb-f-body p {
  font-size: 0.69rem;
  color: var(--muted);
  line-height: 1.4;
}
.tb-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.74rem;
  color: var(--muted);
}
.tb-foot em {
  color: var(--pink-soft);
  font-style: normal;
}

/* ── Phone ── */
.hero-phone {
  flex-shrink: 0;
  width: min(420px, 45vw);
  position: relative;
  z-index: 5;
  animation: phoneIn 0.9s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes phoneIn {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.hero-phone img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 60px rgba(109, 40, 217, 0.5))
    drop-shadow(0 40px 80px rgba(0, 0, 0, 0.7));
  animation: phonefloat 4s ease-in-out infinite;
}
@keyframes phonefloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

/* Phone glow ring behind it */
.hero-phone::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse,
    rgba(109, 40, 217, 0.4) 0%,
    transparent 70%
  );
  filter: blur(40px);
  z-index: -1;
  animation: phonefloat 4s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════
   FEATURE STRIP
═══════════════════════════════════════════════ */
.fs {
  position: relative;
  z-index: 10;
  background: rgba(10, 8, 20, 0.98);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 22px 56px;
  overflow: hidden;
}
/* Shimmer line on top */
.fs::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(167, 139, 250, 0.6),
    transparent
  );
  animation: shimmer 3.5s ease-in-out infinite;
}
@keyframes shimmer {
  0% {
    left: -60%;
  }
  100% {
    left: 160%;
  }
}

.fs-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
}
.fi {
  display: flex;
  align-items: center;
  gap: 13px;
  flex: 1;
  min-width: 130px;
  transition: transform 0.25s;
}
.fi:hover {
  transform: translateY(-2px);
}
.fi-ico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  flex-shrink: 0;
  background: var(--grad-soft);
  border: 1px solid var(--border-hi);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e9d5ff;
  transition:
    box-shadow 0.25s,
    border-color 0.25s;
}
.fi:hover .fi-ico {
  box-shadow: 0 0 20px rgba(109, 40, 217, 0.3);
  border-color: var(--purple-hi);
}
.fi-t h4 {
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--white);
}
.fi-t p {
  font-size: 0.71rem;
  color: var(--muted);
}
.fi-sep {
  width: 1px;
  height: 38px;
  background: var(--border);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   HOW IT WORKS
═══════════════════════════════════════════════ */
.hiw-section {
  position: relative;
  z-index: 10;
  padding: 100px 56px 120px;
  overflow: hidden;
}
.hiw-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("assets/how_work.png") center/cover no-repeat;
}
.hiw-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(7, 6, 15, 0.92) 0%,
    rgba(7, 6, 15, 0.85) 50%,
    rgba(7, 6, 15, 0.94) 100%
  );
}
.hiw-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 20% 30%,
      rgba(109, 40, 217, 0.18) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 80% 70%,
      rgba(236, 72, 153, 0.12) 0%,
      transparent 50%
    );
}

.hiw-inner {
  position: relative;
  z-index: 5;
  max-width: 1280px;
  margin: 0 auto;
}
.hiw-header {
  text-align: center;
  margin-bottom: 70px;
}
.hiw-header h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
}
.hiw-header p {
  font-size: 1.05rem;
  color: var(--muted);
  font-weight: 400;
}

.hiw-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.hiw-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 32px;
  backdrop-filter: blur(20px);
  transition:
    border-color 0.35s,
    transform 0.35s,
    box-shadow 0.35s;
  position: relative;
  overflow: hidden;
}
.hiw-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.hiw-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-soft);
  opacity: 0;
  transition: opacity 0.35s;
}
.hiw-card:hover {
  border-color: var(--border-hi);
  transform: translateY(-8px);
  box-shadow: 0 24px 70px rgba(109, 40, 217, 0.25);
}
.hiw-card:hover::before {
  transform: scaleX(1);
}
.hiw-card:hover::after {
  opacity: 1;
}

.hiw-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.hiw-card-ico {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--grad-soft);
  border: 1px solid var(--border-hi);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
  transition:
    box-shadow 0.3s,
    transform 0.3s;
}
.hiw-card:hover .hiw-card-ico {
  box-shadow: 0 0 24px rgba(109, 40, 217, 0.4);
  transform: scale(1.08);
}
.hiw-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
}
.hiw-card-subtitle {
  font-size: 0.82rem;
  color: var(--purple-hi);
  font-weight: 500;
  margin-top: 4px;
}
.hiw-card-desc {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.68;
  margin-bottom: 20px;
}
.hiw-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hiw-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(109, 40, 217, 0.05);
  transition:
    background 0.2s,
    color 0.2s;
}
.hiw-features li:hover {
  background: rgba(109, 40, 217, 0.12);
  color: var(--white);
}
.hiw-features li span {
  font-size: 14px;
}

.hiw-footer {
  margin-top: 80px;
  text-align: center;
  padding: 40px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  backdrop-filter: blur(20px);
}
.hiw-footer-tagline {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.4rem;
  font-weight: 700;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 30px;
  line-height: 1.5;
}
.hiw-footer-features {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
.hiw-footer-feat {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--muted);
}
.hiw-footer-feat span {
  font-size: 20px;
}

/* ═══════════════════════════════════════════════
   PURPOSE CARDS
═══════════════════════════════════════════════ */
.pc-section {
  position: relative;
  z-index: 10;
  padding: 80px 56px 90px;
  max-width: 1280px;
  margin: 0 auto;
}
.pc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.pc {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 28px;
  backdrop-filter: blur(20px);
  transition:
    border-color 0.35s,
    transform 0.35s,
    box-shadow 0.35s;
  position: relative;
  overflow: hidden;
  cursor: default;
}
/* Top shimmer line on hover */
.pc::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.pc::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-soft);
  opacity: 0;
  transition: opacity 0.35s;
}
.pc:hover {
  border-color: var(--border-hi);
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(109, 40, 217, 0.22);
}
.pc:hover::before {
  transform: scaleX(1);
}
.pc:hover::after {
  opacity: 1;
}

.pc-ico {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  border-radius: 15px;
  background: var(--grad-soft);
  border: 1px solid var(--border-hi);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f3e8ff;
  margin-bottom: 22px;
  transition:
    box-shadow 0.3s,
    transform 0.3s;
}
.pc:hover .pc-ico {
  box-shadow: 0 0 24px rgba(109, 40, 217, 0.35);
  transform: scale(1.08);
}

.pc h3 {
  position: relative;
  z-index: 1;
  font-size: 1.06rem;
  font-weight: 700;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 13px;
}
.pc p {
  position: relative;
  z-index: 1;
  font-size: 0.83rem;
  color: var(--muted);
  line-height: 1.72;
}
.pc ul {
  position: relative;
  z-index: 1;
  list-style: none;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pc ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--muted);
  padding: 7px 10px;
  border-radius: 8px;
  transition:
    background 0.2s,
    color 0.2s;
}
.pc:hover ul li {
  background: rgba(109, 40, 217, 0.07);
}
.pc:hover ul li:hover {
  background: rgba(109, 40, 217, 0.14);
  color: var(--white);
}

.play-store-note {
  position: relative;
  z-index: 10;
  padding: 0 56px 28px;
  background: rgba(6, 5, 14, 0.98);
}
.play-store-note-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(109, 40, 217, 0.16), rgba(236, 72, 153, 0.08)),
    rgba(255, 255, 255, 0.03);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.24);
}
.play-store-mark {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 12px;
  background: var(--grad);
  position: relative;
  box-shadow: 0 10px 28px rgba(109, 40, 217, 0.36);
}
.play-store-copy {
  flex: 1 1 auto;
  min-width: 0;
}
.play-store-mark::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 52%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 16px solid #fff;
}
.play-store-copy span {
  display: block;
  color: var(--white);
  font-size: 0.98rem;
  font-weight: 800;
  margin-bottom: 5px;
}
.play-store-copy p {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}
.notify-launch-btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: var(--grad);
  box-shadow: 0 12px 34px rgba(124, 58, 237, 0.3);
  font-family: "Outfit", sans-serif;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}
.notify-launch-btn:hover,
.notify-launch-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 42px rgba(236, 72, 153, 0.28);
}

/* ═══════════════════════════════════════════════
   FOOTER STRIP
═══════════════════════════════════════════════ */
.footer-bar {
  position: relative;
  z-index: 10;
  background: rgba(6, 5, 14, 0.98);
  border-top: 1px solid var(--border);
  padding: 16px 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.81rem;
  color: var(--muted);
  overflow: hidden;
}
.footer-bar::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -100%;
  width: 60%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(167, 139, 250, 0.4),
    transparent
  );
  animation: shimmer 4s 1.5s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════
   KEYFRAME DEFS
═══════════════════════════════════════════════ */
@keyframes su {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE – TABLET (≤1024px)
═══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  nav {
    padding: 0 28px;
  }
  .nav-links {
    display: none;
  }
  .hamburger {
    display: flex;
  }
  .mobile-nav {
    display: block;
  }
  .hero {
    padding: 100px 28px 70px;
  }
  .hero-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
  }
  .hero-content {
    max-width: 100%;
  }
  .hero-phone {
    width: min(300px, 60vw);
    align-self: center;
  }
  .tb {
    max-width: 100%;
  }
  .fs {
    padding: 20px 28px;
  }
  .hiw-section {
    padding: 80px 28px 100px;
  }
  .hiw-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .pc-section {
    padding: 60px 28px 70px;
  }
  .pc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-bar {
    padding: 14px 28px;
  }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE – MOBILE (≤640px)
═══════════════════════════════════════════════ */
@media (max-width: 640px) {
  nav {
    padding: 0 18px;
    height: 64px;
  }
  .mobile-nav {
    top: 64px;
  }
  .hero {
    padding: 90px 18px 60px;
  }
  .hero h1 {
    font-size: clamp(1.85rem, 7vw, 2.4rem);
  }
  .hero-phone {
    width: min(260px, 78vw);
  }
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .cta-p,
  .cta-s {
    width: 100%;
    justify-content: center;
  }
  .cta-p .ico,
  .cta-p .arr {
    display: none;
  }
  .tb-feats {
    flex-direction: column;
    gap: 12px;
  }
  .tb-f:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid var(--border);
    margin-right: 0;
    padding-right: 0;
    padding-bottom: 12px;
    margin-bottom: 0;
  }
  .fs-inner {
    justify-content: flex-start;
  }
  .fi {
    min-width: calc(50% - 16px);
  }
  .fi-sep {
    display: none;
  }
  .hiw-section {
    padding: 70px 18px 90px;
  }
  .hiw-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .hiw-card {
    padding: 28px 24px;
  }
  .hiw-footer {
    padding: 28px 20px;
  }
  .hiw-footer-tagline {
    font-size: 1.1rem;
  }
  .hiw-footer-features {
    gap: 24px;
  }
  .pc-grid {
    grid-template-columns: 1fr;
  }
  .pc-section {
    padding: 50px 18px 60px;
  }
  .footer-bar {
    padding: 13px 18px;
    font-size: 0.75rem;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE – SMALL MOBILE (≤380px)
═══════════════════════════════════════════════ */
@media (max-width: 380px) {
  .hero h1 {
    font-size: 1.7rem;
  }
  .fi {
    min-width: 100%;
  }
  .badge {
    font-size: 0.62rem;
    padding: 5px 12px;
  }
}

/* ===== HOW IT WORKS DASHBOARD PAGE ===== */
.hiw-dashboard-page {
  min-height: 100vh;
  padding: 78px 32px 24px;
  background:
    radial-gradient(
      circle at 15% 18%,
      rgba(124, 58, 237, 0.18),
      transparent 26%
    ),
    radial-gradient(
      circle at 86% 24%,
      rgba(236, 72, 153, 0.14),
      transparent 28%
    ),
    #05040b;
}
.hiw-dashboard-page .hiw-bg {
  background: url("assets/hero_bg.png") center top/cover no-repeat;
  opacity: 0.72;
}
.hiw-dashboard-page .hiw-bg::before {
  background:
    linear-gradient(
      180deg,
      rgba(4, 3, 10, 0.55) 0%,
      rgba(5, 4, 12, 0.92) 42%,
      rgba(5, 4, 12, 0.98) 100%
    ),
    linear-gradient(
      90deg,
      rgba(5, 4, 12, 0.96) 0%,
      rgba(5, 4, 12, 0.42) 46%,
      rgba(5, 4, 12, 0.88) 100%
    );
}
.hiw-dashboard-page .hiw-bg::after {
  background:
    linear-gradient(180deg, transparent 0%, rgba(5, 4, 12, 0.78) 82%),
    repeating-linear-gradient(
      90deg,
      rgba(167, 139, 250, 0.025) 0 1px,
      transparent 1px 110px
    );
}
.hiw-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(70px);
  z-index: 1;
}
.hiw-orb-a {
  width: 360px;
  height: 360px;
  top: 72px;
  left: 8%;
  background: rgba(124, 58, 237, 0.18);
  animation: orbf1 8s ease-in-out infinite;
}
.hiw-orb-b {
  width: 300px;
  height: 300px;
  top: 155px;
  right: 7%;
  background: rgba(236, 72, 153, 0.13);
  animation: orbf2 9s ease-in-out infinite;
}
.hiw-shell {
  position: relative;
  z-index: 5;
  width: min(1450px, 100%);
  margin: 0 auto;
}
.hiw-hero {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(5, 4, 12, 0.42), rgba(5, 4, 12, 0.9)),
    linear-gradient(
      90deg,
      rgba(5, 4, 12, 0.9),
      rgba(5, 4, 12, 0.28),
      rgba(5, 4, 12, 0.9)
    ),
    url("assets/hero_bg.png") center/cover no-repeat;
  box-shadow:
    0 18px 80px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.hiw-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at center,
      rgba(124, 58, 237, 0.18),
      transparent 52%
    ),
    linear-gradient(180deg, transparent 60%, rgba(5, 4, 12, 0.42));
  opacity: 1;
  pointer-events: none;
  z-index: 1;
}
.hiw-hero-copy {
  position: relative;
  z-index: 2;
  width: min(760px, calc(100% - 36px));
  text-align: center;
  padding: 44px 0;
}
.hiw-hero-copy span {
  display: inline-flex;
  align-items: center;
  color: var(--purple-hi);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
  padding: 7px 12px;
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.11);
  backdrop-filter: blur(14px);
}
.hiw-hero-copy h1 {
  font-size: clamp(2rem, 3vw, 3.25rem);
  line-height: 1.12;
  font-weight: 700;
  color: #fff;
}
.hiw-hero-copy h1 strong {
  color: #a855f7;
  font-weight: 700;
  text-shadow: 0 0 26px rgba(168, 85, 247, 0.25);
}
.hiw-hero-copy p {
  width: min(610px, 100%);
  margin: 14px auto 0;
  color: rgba(240, 236, 250, 0.66);
  font-size: 0.9rem;
  line-height: 1.62;
}

.flow-panel {
  position: relative;
  overflow: hidden;
  margin-top: 12px;
  padding: 16px;
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 8px;
  background: linear-gradient(
    180deg,
    rgba(13, 11, 27, 0.88),
    rgba(8, 7, 18, 0.9)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 14px 45px rgba(0, 0, 0, 0.26);
}
.flow-panel::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(167, 139, 250, 0.45),
    transparent
  );
}
.flow-panel::after {
  content: "";
  position: absolute;
  inset: -40% auto auto -20%;
  width: 42%;
  height: 180%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(167, 139, 250, 0.08),
    transparent
  );
  transform: rotate(18deg) translateX(-120%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.flow-panel.visible::after {
  transform: rotate(18deg) translateX(360%);
}
.hiw-dashboard-page .flow-panel.visible {
  animation: panelSettle 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hiw-dashboard-page .micro-card,
.hiw-dashboard-page .tool-tile,
.hiw-dashboard-page .wave-card,
.hiw-dashboard-page .phone-dashboard {
  animation: softRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.journey-flow .micro-card:nth-child(1) {
  animation-delay: 0.05s;
}
.journey-flow .micro-card:nth-child(3) {
  animation-delay: 0.11s;
}
.journey-flow .micro-card:nth-child(5) {
  animation-delay: 0.17s;
}
.journey-flow .micro-card:nth-child(7) {
  animation-delay: 0.23s;
}
.journey-flow .micro-card:nth-child(9) {
  animation-delay: 0.29s;
}
@keyframes panelSettle {
  0% {
    filter: brightness(0.82);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
  }
  100% {
    filter: brightness(1);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.035),
      0 14px 45px rgba(0, 0, 0, 0.26);
  }
}
@keyframes softRise {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.flow-title {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 13px;
}
.step-badge {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  box-shadow: 0 0 18px rgba(124, 58, 237, 0.55);
}
.flow-title h2 {
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.18;
  font-weight: 700;
}
.flow-title h2 em {
  color: var(--purple-hi);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
}
.flow-title p {
  color: rgba(240, 236, 250, 0.54);
  font-size: 0.75rem;
  margin-top: 2px;
}
.journey-flow {
  display: grid;
  grid-template-columns: 1fr 22px 1fr 22px 1fr 22px 1fr 22px 1fr;
  gap: 10px;
  align-items: stretch;
}
.micro-card,
.tool-tile {
  position: relative;
  min-height: 122px;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 8px;
  background: linear-gradient(
    180deg,
    rgba(19, 16, 38, 0.82),
    rgba(10, 9, 22, 0.78)
  );
  padding: 14px;
  transition:
    transform 0.24s,
    border-color 0.24s,
    box-shadow 0.24s;
}
.micro-card:hover,
.tool-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(167, 139, 250, 0.42);
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.16);
}
.micro-card h3,
.tool-tile b {
  display: block;
  color: #fff;
  font-size: 0.83rem;
  line-height: 1.25;
  margin-bottom: 6px;
}
.micro-card p,
.tool-tile small {
  display: block;
  color: rgba(240, 236, 250, 0.58);
  font-size: 0.71rem;
  line-height: 1.42;
}
.node-icon {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.17);
  border: 1px solid rgba(167, 139, 250, 0.24);
  color: var(--purple-hi);
  font-size: 0.78rem;
  font-weight: 800;
}
.pin-icon::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 4px solid #a855f7;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.65);
}
.alert-icon {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fb7185;
}
.flow-arrow {
  align-self: center;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(167, 139, 250, 0.2),
    rgba(168, 85, 247, 0.9)
  );
  position: relative;
}
.flow-arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid #c084fc;
  border-right: 2px solid #c084fc;
  transform: translateY(-50%) rotate(45deg);
}
.safe-check {
  margin: 14px 0 10px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.18),
    rgba(20, 184, 166, 0.12)
  );
  border: 1px solid rgba(34, 197, 94, 0.28);
  color: #86efac;
  font-size: 0.72rem;
  font-weight: 700;
}
.sos-round {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #dc2626, #4c0519);
  color: #fca5a5;
  font-size: 1.15rem;
  font-weight: 900;
  box-shadow: 0 0 28px rgba(220, 38, 38, 0.38);
}
.emergency-grid {
  display: grid;
  grid-template-columns: 1.25fr 1.1fr 1fr 1fr 1.2fr;
  gap: 12px;
}
.radar-map,
.route-map,
.phone-dashboard {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(rgba(167, 139, 250, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 139, 250, 0.06) 1px, transparent 1px),
    rgba(3, 7, 18, 0.62);
  background-size: 24px 24px;
  border: 1px solid rgba(124, 58, 237, 0.18);
}
.radar-map {
  height: 126px;
  margin-top: 10px;
}
.radar-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(14, 165, 233, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: hiwRadar 2.6s linear infinite;
}
.radar-ring.r1 {
  width: 70px;
  height: 70px;
}
.radar-ring.r2 {
  width: 118px;
  height: 118px;
  animation-delay: 0.6s;
}
.radar-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ec4899;
  box-shadow: 0 0 14px #ec4899;
}
.radar-dot.d1 {
  left: 28%;
  top: 50%;
}
.radar-dot.d2 {
  right: 22%;
  top: 50%;
  background: #a855f7;
  box-shadow: 0 0 14px #a855f7;
}
.radar-label {
  position: absolute;
  bottom: 8px;
  color: rgba(240, 236, 250, 0.62);
  font-size: 0.62rem;
}
.radar-label.left {
  left: 18px;
}
.radar-label.right {
  right: 14px;
}
@keyframes hiwRadar {
  0% {
    opacity: 0.25;
    transform: translate(-50%, -50%) scale(0.78);
  }
  70% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.25);
  }
}
.message-box,
.sms-bubble {
  margin-top: 12px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(167, 139, 250, 0.15);
}
.message-box strong,
.sms-bubble strong {
  display: block;
  color: #fff;
  font-size: 0.72rem;
}
.message-box span,
.sms-bubble span {
  display: block;
  margin-top: 3px;
  color: rgba(240, 236, 250, 0.58);
  font-size: 0.64rem;
  line-height: 1.35;
}
.sms-bubble {
  border-color: rgba(239, 68, 68, 0.26);
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.13),
    rgba(255, 255, 255, 0.035)
  );
}
.action-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.action-row button,
.route-map button {
  border: 0;
  border-radius: 7px;
  padding: 7px 10px;
  background: rgba(16, 185, 129, 0.16);
  color: #6ee7b7;
  font-family: "Outfit", sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
}
.action-row button:nth-child(3) {
  background: rgba(249, 115, 22, 0.16);
  color: #fdba74;
}
.action-list {
  list-style: none;
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.action-list li {
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid rgba(34, 197, 94, 0.18);
  background: rgba(34, 197, 94, 0.08);
  color: #bbf7d0;
  font-size: 0.68rem;
}
.action-list li:nth-child(3),
.action-list li:nth-child(4) {
  border-color: rgba(239, 68, 68, 0.2);
  background: rgba(239, 68, 68, 0.08);
  color: #fecaca;
}
.route-map {
  height: 122px;
  margin-top: 11px;
}
.route-map::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 54px;
  top: 62px;
  height: 2px;
  background: linear-gradient(90deg, #7c3aed, #ec4899, #a855f7);
  transform: rotate(-9deg);
}
.route-map span {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #a855f7;
  box-shadow: 0 0 12px #a855f7;
}
.route-map span:nth-child(1) {
  left: 19px;
  top: 72px;
}
.route-map span:nth-child(2) {
  left: 68px;
  top: 55px;
}
.route-map span:nth-child(3) {
  right: 74px;
  top: 47px;
}
.route-map span:nth-child(4) {
  right: 30px;
  top: 34px;
  background: #ec4899;
  box-shadow: 0 0 12px #ec4899;
}
.route-map button {
  position: absolute;
  right: 12px;
  bottom: 12px;
  color: #fff;
  background: linear-gradient(135deg, #6d28d9, #9333ea);
}
.split-row {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 12px;
}
.bottom-row {
  grid-template-columns: 1.1fr 1fr;
}
.guardian-layout {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 14px;
}
.phone-dashboard {
  min-height: 185px;
  padding: 12px;
  box-shadow: inset 0 0 40px rgba(124, 58, 237, 0.08);
}
.phone-topbar {
  height: 26px;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}
.phone-route {
  position: relative;
  height: 94px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.16);
}
.phone-route::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 22px;
  top: 52px;
  height: 2px;
  background: linear-gradient(90deg, #a855f7, #ec4899, #a855f7);
  transform: rotate(-14deg);
}
.phone-route span {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c084fc;
  box-shadow: 0 0 12px #c084fc;
}
.phone-route span:nth-child(1) {
  left: 28px;
  top: 63px;
}
.phone-route span:nth-child(2) {
  left: 84px;
  top: 50px;
}
.phone-route span:nth-child(3) {
  right: 25px;
  top: 31px;
}
.phone-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.phone-stats b {
  padding: 7px 4px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.045);
  color: #fff;
  font-size: 0.66rem;
  text-align: center;
}
.stack-list {
  display: grid;
  gap: 9px;
}
.stack-list div {
  padding: 10px 11px;
  border-radius: 8px;
  background: rgba(124, 58, 237, 0.07);
  border: 1px solid rgba(124, 58, 237, 0.18);
}
.stack-list b {
  display: block;
  color: #fff;
  font-size: 0.75rem;
}
.stack-list span {
  display: block;
  color: rgba(240, 236, 250, 0.55);
  font-size: 0.66rem;
  margin-top: 2px;
}
.tools-grid,
.community-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.tool-tile {
  min-height: 104px;
}
.tool-tile.wide {
  grid-column: span 2;
}
.tool-tile span {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 26px;
  padding: 0 8px;
  margin-bottom: 10px;
  border-radius: 7px;
  background: rgba(124, 58, 237, 0.16);
  color: #c4b5fd;
  border: 1px solid rgba(167, 139, 250, 0.2);
  font-size: 0.62rem;
  font-weight: 800;
}
.community-grid {
  grid-template-columns: repeat(2, 1fr);
}
.end-flow {
  display: grid;
  grid-template-columns: 1fr 24px 1fr 24px 1fr;
  gap: 10px;
  align-items: stretch;
}
.pin-card span,
.safe-card span {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 10px;
  border-radius: 8px;
  background: rgba(124, 58, 237, 0.16);
  color: #c4b5fd;
  font-size: 0.74rem;
  font-weight: 900;
}
.safe-card span {
  background: rgba(34, 197, 94, 0.14);
  color: #86efac;
}
.wave-card {
  min-height: 122px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 8px;
  background: linear-gradient(
    180deg,
    rgba(88, 28, 135, 0.28),
    rgba(10, 9, 22, 0.78)
  );
  border: 1px solid rgba(167, 139, 250, 0.2);
}
.wave-card i {
  width: 5px;
  height: 40px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ec4899, #8b5cf6);
  animation: waveBars 1.2s ease-in-out infinite;
}
.wave-card i:nth-child(2) {
  height: 64px;
  animation-delay: 0.08s;
}
.wave-card i:nth-child(3) {
  height: 84px;
  animation-delay: 0.16s;
}
.wave-card i:nth-child(4) {
  height: 56px;
  animation-delay: 0.24s;
}
.wave-card i:nth-child(5) {
  height: 34px;
  animation-delay: 0.32s;
}
@keyframes waveBars {
  0%,
  100% {
    transform: scaleY(0.72);
    opacity: 0.62;
  }
  50% {
    transform: scaleY(1.05);
    opacity: 1;
  }
}
.hiw-dashboard-page .hiw-footer {
  margin-top: 12px;
  padding: 15px 18px;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    rgba(88, 28, 135, 0.46),
    rgba(10, 9, 22, 0.9),
    rgba(88, 28, 135, 0.32)
  );
}
.hiw-dashboard-page .hiw-footer-tagline {
  margin: 0 0 12px;
  font-family: "Outfit", sans-serif;
  font-size: 0.95rem;
  line-height: 1.35;
}
.hiw-dashboard-page .hiw-footer-features {
  gap: 10px;
}
.hiw-dashboard-page .hiw-footer-feat {
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(167, 139, 250, 0.16);
  color: rgba(240, 236, 250, 0.72);
  font-size: 0.74rem;
}
.hiw-dashboard-page .hiw-footer-feat span {
  min-width: 30px;
  color: var(--purple-hi);
  font-size: 0.64rem;
  font-weight: 900;
}

@media (max-width: 1200px) {
  .hiw-dashboard-page {
    padding-left: 22px;
    padding-right: 22px;
  }
  .journey-flow,
  .emergency-grid {
    grid-template-columns: 1fr 1fr;
  }
  .journey-flow .flow-arrow,
  .emergency-grid .flow-arrow {
    display: none;
  }
  .split-row,
  .bottom-row {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .hiw-dashboard-page {
    padding: 72px 14px 18px;
  }
  .hiw-hero {
    min-height: 320px;
    background-position: center top;
  }
  .hiw-hero-copy {
    width: calc(100% - 28px);
    padding: 32px 0;
  }
  .hiw-hero-copy h1 {
    font-size: 2rem;
  }
  .journey-flow,
  .emergency-grid,
  .tools-grid,
  .community-grid,
  .end-flow,
  .guardian-layout {
    grid-template-columns: 1fr;
  }
  .flow-arrow {
    display: none;
  }
  .flow-panel {
    padding: 14px;
    margin-top: 14px;
  }
  .flow-panel.visible .micro-card,
  .flow-panel.visible .tool-tile,
  .flow-panel.visible .phone-dashboard,
  .flow-panel.visible .wave-card {
    animation: mobileCardIn 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .flow-panel.visible .micro-card:nth-child(2),
  .flow-panel.visible .tool-tile:nth-child(2) {
    animation-delay: 0.05s;
  }
  .flow-panel.visible .micro-card:nth-child(3),
  .flow-panel.visible .tool-tile:nth-child(3) {
    animation-delay: 0.1s;
  }
  .flow-panel.visible .micro-card:nth-child(4),
  .flow-panel.visible .tool-tile:nth-child(4) {
    animation-delay: 0.15s;
  }
  .flow-panel.visible .micro-card:nth-child(5),
  .flow-panel.visible .tool-tile:nth-child(5) {
    animation-delay: 0.2s;
  }
  .micro-card:active,
  .tool-tile:active {
    transform: scale(0.985);
    border-color: rgba(167, 139, 250, 0.46);
  }
  .micro-card,
  .tool-tile {
    min-height: auto;
  }
  .tool-tile.wide {
    grid-column: auto;
  }
  .phone-dashboard {
    min-height: 170px;
  }
  .hiw-dashboard-page .hiw-footer-features {
    justify-content: flex-start;
  }
}
@keyframes mobileCardIn {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ===== FEATURES PAGE ===== */
.features-page {
  min-height: 100vh;
  background: #05040b;
  color: var(--text);
}
.features-hero {
  position: relative;
  min-height: 355px;
  padding: 84px 22px 18px;
  overflow: hidden;
}
.features-hero-bg {
  position: absolute;
  inset: 0;
  background: url("assets/hero_bg.png") center/cover no-repeat;
}
.features-hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(5, 4, 12, 0.55),
      rgba(5, 4, 12, 0.78) 42%,
      rgba(5, 4, 12, 0.94)
    ),
    linear-gradient(180deg, rgba(5, 4, 12, 0.22), rgba(5, 4, 12, 0.96));
}
.features-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 20% 52%,
      rgba(236, 72, 153, 0.18),
      transparent 32%
    ),
    radial-gradient(
      circle at 82% 34%,
      rgba(124, 58, 237, 0.28),
      transparent 28%
    );
}
.features-hero-inner {
  position: relative;
  z-index: 2;
  width: min(1450px, 100%);
  min-height: 250px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(420px, 1.25fr) 1fr;
  align-items: center;
  gap: 24px;
}
.features-portrait {
  align-self: stretch;
  min-height: 245px;
  background:
    linear-gradient(90deg, rgba(5, 4, 12, 0.05), rgba(5, 4, 12, 0.52)),
    url("assets/hero_bg.png") 22% center/cover no-repeat;
  border-radius: 8px;
  mask-image: linear-gradient(90deg, #000 68%, transparent);
  filter: saturate(1.08) contrast(1.04);
}
.features-copy {
  text-align: center;
  padding: 8px 0;
}
.features-copy span {
  color: var(--purple-hi);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.features-copy h1 {
  margin-top: 14px;
  font-size: clamp(1.65rem, 2.45vw, 2.8rem);
  line-height: 1.16;
  color: #fff;
  font-weight: 700;
}
.features-copy h1 strong {
  display: block;
  margin-top: 7px;
  color: #a855f7;
  text-shadow: 0 0 28px rgba(168, 85, 247, 0.28);
}
.features-copy p {
  width: min(630px, 100%);
  margin: 18px auto 0;
  color: rgba(240, 236, 250, 0.66);
  font-size: 0.9rem;
  line-height: 1.62;
}
.features-phone-wrap {
  position: relative;
  min-height: 245px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.features-phone-wrap img {
  position: relative;
  z-index: 3;
  width: min(220px, 72%);
  filter: drop-shadow(0 24px 55px rgba(0, 0, 0, 0.65))
    drop-shadow(0 0 32px rgba(124, 58, 237, 0.32));
  transform: rotate(8deg);
  animation: featurePhoneFloat 5s ease-in-out infinite;
}
.orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px dashed rgba(167, 139, 250, 0.32);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  animation: orbitSpin 16s linear infinite;
}
.orbit-one {
  width: 265px;
  height: 112px;
}
.orbit-two {
  width: 330px;
  height: 150px;
  animation-duration: 22s;
  animation-direction: reverse;
}
@keyframes featurePhoneFloat {
  0%,
  100% {
    transform: rotate(8deg) translateY(0);
  }
  50% {
    transform: rotate(8deg) translateY(-10px);
  }
}
@keyframes orbitSpin {
  to {
    transform: translate(-50%, -50%) rotate(348deg);
  }
}

.features-grid-wrap {
  position: relative;
  z-index: 4;
  width: min(1450px, 100%);
  margin: -8px auto 0;
  padding: 0 22px 34px;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.feature-card {
  position: relative;
  min-height: 238px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 8px;
  background: linear-gradient(
    180deg,
    rgba(16, 14, 31, 0.92),
    rgba(8, 7, 18, 0.94)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 14px 34px rgba(0, 0, 0, 0.22);
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.28s,
    box-shadow 0.28s;
}
.feature-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(167, 139, 250, 0.45),
    transparent
  );
}
.feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 86% 24%,
    rgba(124, 58, 237, 0.12),
    transparent 38%
  );
  opacity: 0.7;
  pointer-events: none;
}
.feature-card:hover {
  transform: translateY(-5px);
  border-color: rgba(167, 139, 250, 0.38);
  box-shadow:
    0 18px 52px rgba(88, 28, 135, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.feature-icon {
  position: relative;
  z-index: 2;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.03em;
}
.feature-icon.danger {
  background: linear-gradient(135deg, #7f1d1d, #dc2626);
  box-shadow: 0 0 20px rgba(220, 38, 38, 0.24);
}
.feature-icon.purple {
  background: linear-gradient(135deg, #4c1d95, #7c3aed);
}
.feature-icon.violet {
  background: linear-gradient(135deg, #312e81, #8b5cf6);
}
.feature-icon.blue {
  background: linear-gradient(135deg, #172554, #2563eb);
}
.feature-icon.green {
  background: linear-gradient(135deg, #064e3b, #10b981);
}
.feature-icon.amber {
  background: linear-gradient(135deg, #7c2d12, #f59e0b);
}
.feature-icon.cyan {
  background: linear-gradient(135deg, #155e75, #06b6d4);
}
.feature-icon.pink {
  background: linear-gradient(135deg, #831843, #db2777);
}
.feature-body {
  position: relative;
  z-index: 2;
  min-width: 0;
}
.feature-body h2 {
  color: #fff;
  font-size: 1rem;
  line-height: 1.18;
  margin-bottom: 4px;
}
.feature-body p {
  color: rgba(240, 236, 250, 0.62);
  font-size: 0.72rem;
  margin-bottom: 13px;
}
.feature-body ul {
  list-style: none;
  display: grid;
  gap: 9px;
}
.feature-body li {
  position: relative;
  color: rgba(240, 236, 250, 0.68);
  font-size: 0.74rem;
  line-height: 1.38;
  padding-left: 18px;
}
.feature-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(167, 139, 250, 0.78);
  box-shadow: 0 0 10px rgba(167, 139, 250, 0.35);
}
.feature-phone-mini,
.tracking-phone {
  position: absolute;
  right: 15px;
  bottom: 14px;
  width: 86px;
  height: 150px;
  border: 3px solid rgba(167, 139, 250, 0.2);
  border-radius: 17px;
  background: linear-gradient(180deg, #11172a, #050711);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.36);
}
.feature-phone-mini span,
.tracking-phone span {
  color: rgba(240, 236, 250, 0.62);
  font-size: 0.48rem;
}
.feature-phone-mini b {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, #dc2626, #7f1d1d);
  color: #fff;
  font-size: 0.78rem;
  box-shadow: 0 0 22px rgba(220, 38, 38, 0.42);
}
.feature-phone-mini small,
.tracking-phone small {
  color: rgba(240, 236, 250, 0.56);
  font-size: 0.48rem;
}
.sos-feature .feature-body {
  padding-right: 96px;
}
.nearby-feature,
.ai-feature,
.safe-feature,
.tracking-feature,
.tools-feature,
.radar-feature {
  grid-template-columns: auto minmax(0, 1fr);
}
.feature-network,
.ai-orbit,
.danger-radar {
  position: absolute;
  right: 18px;
  bottom: 20px;
  width: 154px;
  height: 122px;
  border-radius: 50%;
  border: 1px dashed rgba(167, 139, 250, 0.22);
  z-index: 2;
}
.feature-network::before,
.ai-orbit::before,
.danger-radar::before {
  content: "";
  position: absolute;
  inset: 25px;
  border: 1px dashed rgba(167, 139, 250, 0.18);
  border-radius: 50%;
}
.feature-network span,
.ai-orbit span,
.danger-radar span {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.38);
  border: 1px solid rgba(167, 139, 250, 0.4);
  box-shadow: 0 0 14px rgba(167, 139, 250, 0.3);
}
.feature-network span:nth-child(1) {
  left: 64px;
  top: 47px;
}
.feature-network span:nth-child(2) {
  left: 18px;
  top: 22px;
}
.feature-network span:nth-child(3) {
  right: 16px;
  top: 28px;
}
.feature-network span:nth-child(4) {
  left: 28px;
  bottom: 18px;
}
.feature-network span:nth-child(5) {
  right: 22px;
  bottom: 20px;
}
.nearby-feature .feature-body,
.ai-feature .feature-body,
.radar-feature .feature-body {
  padding-right: 145px;
}
.contact-alert {
  position: absolute;
  right: 14px;
  bottom: 16px;
  width: 185px;
  padding: 11px;
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 8px;
  background: rgba(8, 7, 18, 0.86);
  z-index: 2;
}
.contact-alert strong,
.contact-alert span {
  display: block;
  font-size: 0.62rem;
}
.contact-alert strong {
  color: #fff;
}
.contact-alert span {
  color: rgba(240, 236, 250, 0.6);
  margin-top: 4px;
}
.contact-alert div {
  display: flex;
  gap: 6px;
  margin-top: 9px;
}
.contact-alert button {
  border: 0;
  border-radius: 6px;
  padding: 6px 8px;
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.14);
  font-family: "Outfit", sans-serif;
  font-size: 0.58rem;
}
.contact-alert button:nth-child(3) {
  color: #fdba74;
  background: rgba(249, 115, 22, 0.15);
}
.contacts-feature .feature-body {
  padding-right: 190px;
}
.mini-note {
  display: inline-block;
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(240, 236, 250, 0.7);
  font-size: 0.65rem;
}
.ai-orbit {
  display: grid;
  place-items: center;
  border-color: rgba(37, 99, 235, 0.28);
  animation: featureSlowSpin 18s linear infinite;
}
.ai-orbit b {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #1d4ed8, #4f46e5);
  color: #fff;
  box-shadow: 0 0 24px rgba(37, 99, 235, 0.34);
}
.ai-orbit span:nth-child(2) {
  left: 8px;
  top: 46px;
}
.ai-orbit span:nth-child(3) {
  right: 12px;
  top: 12px;
}
.ai-orbit span:nth-child(4) {
  right: 18px;
  bottom: 16px;
}
@keyframes featureSlowSpin {
  to {
    transform: rotate(360deg);
  }
}
.safe-map {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 190px;
  height: 116px;
  border-radius: 8px;
  border: 1px solid rgba(16, 185, 129, 0.18);
  background:
    linear-gradient(rgba(16, 185, 129, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 185, 129, 0.06) 1px, transparent 1px),
    rgba(3, 7, 18, 0.58);
  background-size: 22px 22px;
  z-index: 2;
}
.safe-map::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 56px;
  height: 2px;
  background: linear-gradient(90deg, #10b981, #8b5cf6, #ec4899);
  transform: rotate(-8deg);
}
.safe-map span {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 12px #10b981;
}
.safe-map span:nth-child(1) {
  left: 24px;
  top: 58px;
}
.safe-map span:nth-child(2) {
  left: 74px;
  top: 46px;
}
.safe-map span:nth-child(3) {
  right: 64px;
  top: 38px;
  background: #8b5cf6;
}
.safe-map span:nth-child(4) {
  right: 28px;
  top: 28px;
  background: #ec4899;
}
.safe-map button {
  position: absolute;
  right: 10px;
  bottom: 9px;
  border: 0;
  border-radius: 7px;
  padding: 7px 16px;
  color: #fff;
  background: linear-gradient(135deg, #6d28d9, #9333ea);
  font-family: "Outfit", sans-serif;
  font-size: 0.62rem;
}
.safe-feature .feature-body {
  padding-right: 190px;
}
.audio-wave {
  position: absolute;
  right: 20px;
  top: 72px;
  height: 70px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
}
.audio-wave i {
  width: 4px;
  height: 36px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ec4899, #8b5cf6);
  animation: waveBars 1.15s ease-in-out infinite;
}
.audio-wave i:nth-child(2) {
  height: 58px;
  animation-delay: 0.06s;
}
.audio-wave i:nth-child(3) {
  height: 42px;
  animation-delay: 0.12s;
}
.audio-wave i:nth-child(4) {
  height: 68px;
  animation-delay: 0.18s;
}
.audio-wave i:nth-child(5) {
  height: 48px;
  animation-delay: 0.24s;
}
.audio-wave i:nth-child(6) {
  height: 60px;
  animation-delay: 0.3s;
}
.audio-wave i:nth-child(7) {
  height: 34px;
  animation-delay: 0.36s;
}
.recording-pill {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #fff;
  font-size: 0.68rem;
}
.recording-pill::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 12px #ef4444;
}
.evidence-feature .feature-body {
  padding-right: 160px;
}
.tracking-phone {
  justify-content: flex-start;
  padding: 12px;
}
.tracking-phone div {
  width: 100%;
  height: 74px;
  border-radius: 8px;
  background:
    linear-gradient(rgba(167, 139, 250, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 139, 250, 0.07) 1px, transparent 1px),
    rgba(0, 0, 0, 0.22);
  background-size: 18px 18px;
}
.tracking-phone div::before {
  content: "";
  display: block;
  width: 72%;
  height: 2px;
  margin: 46px 0 0 12px;
  background: linear-gradient(90deg, #8b5cf6, #ec4899);
  transform: rotate(-16deg);
}
.tracking-feature .feature-body {
  padding-right: 96px;
}
.tool-app-grid {
  position: absolute;
  right: 16px;
  bottom: 18px;
  width: 150px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  z-index: 2;
}
.tool-app-grid span {
  display: grid;
  place-items: center;
  height: 44px;
  border-radius: 8px;
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.18);
  color: rgba(240, 236, 250, 0.78);
  font-size: 0.62rem;
  font-weight: 700;
}
.tools-feature .feature-body {
  padding-right: 155px;
}
.danger-radar {
  border-color: rgba(236, 72, 153, 0.28);
}
.danger-radar span {
  background: rgba(220, 38, 38, 0.26);
  border-color: rgba(248, 113, 113, 0.42);
  box-shadow: 0 0 14px rgba(248, 113, 113, 0.35);
}
.danger-radar span:nth-child(1) {
  left: 64px;
  top: 49px;
}
.danger-radar span:nth-child(2) {
  left: 18px;
  top: 24px;
}
.danger-radar span:nth-child(3) {
  right: 22px;
  top: 30px;
}
.danger-radar span:nth-child(4) {
  right: 52px;
  bottom: 15px;
  background: rgba(124, 58, 237, 0.35);
}
.features-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  margin-top: 14px;
  padding: 20px 24px;
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(
      90deg,
      rgba(88, 28, 135, 0.42),
      rgba(10, 9, 22, 0.94) 45%,
      rgba(10, 9, 22, 0.88)
    ),
    radial-gradient(circle at 8% 50%, rgba(168, 85, 247, 0.28), transparent 22%);
  box-shadow:
    0 14px 44px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.shield-mark {
  width: 78px;
  height: 88px;
  clip-path: polygon(50% 0, 90% 15%, 82% 72%, 50% 100%, 18% 72%, 10% 15%);
  background: linear-gradient(135deg, #7c3aed, #a855f7 52%, #3b0764);
  box-shadow: 0 0 28px rgba(168, 85, 247, 0.32);
}
.features-footer h2 {
  color: #c084fc;
  font-size: 1.22rem;
}
.features-footer p {
  margin-top: 6px;
  color: rgba(240, 236, 250, 0.66);
  font-size: 0.76rem;
  line-height: 1.5;
}
.feature-trust {
  display: grid;
  grid-template-columns: repeat(4, 110px);
  gap: 0;
}
.feature-trust span {
  min-height: 48px;
  display: grid;
  place-items: center;
  padding: 0 12px;
  border-left: 1px solid rgba(167, 139, 250, 0.14);
  color: rgba(240, 236, 250, 0.72);
  font-size: 0.68rem;
  text-align: center;
}

@media (max-width: 1180px) {
  .features-hero-inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .features-portrait {
    display: none;
  }
  .features-phone-wrap {
    min-height: 190px;
  }
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .features-footer {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .shield-mark {
    margin: 0 auto;
  }
  .feature-trust {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 720px) {
  .features-hero {
    padding: 76px 14px 18px;
    min-height: auto;
  }
  .features-copy h1 {
    font-size: 1.72rem;
  }
  .features-copy p {
    font-size: 0.82rem;
  }
  .features-phone-wrap {
    display: none;
  }
  .features-grid-wrap {
    padding: 0 14px 24px;
    margin-top: 0;
  }
  .features-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .feature-card {
    min-height: auto;
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .feature-icon {
    width: 52px;
    height: 52px;
  }
  .sos-feature .feature-body,
  .nearby-feature .feature-body,
  .ai-feature .feature-body,
  .radar-feature .feature-body,
  .contacts-feature .feature-body,
  .safe-feature .feature-body,
  .evidence-feature .feature-body,
  .tracking-feature .feature-body,
  .tools-feature .feature-body {
    padding-right: 0;
  }
  .feature-phone-mini,
  .feature-network,
  .contact-alert,
  .ai-orbit,
  .safe-map,
  .audio-wave,
  .recording-pill,
  .tracking-phone,
  .tool-app-grid,
  .danger-radar {
    position: relative;
    right: auto;
    bottom: auto;
    top: auto;
    width: 100%;
    margin-top: 14px;
  }
  .feature-phone-mini,
  .tracking-phone {
    height: 145px;
    width: 110px;
    margin-left: auto;
    margin-right: auto;
  }
  .feature-network,
  .ai-orbit,
  .danger-radar {
    width: min(240px, 100%);
    height: 150px;
    margin-left: auto;
    margin-right: auto;
  }
  .safe-map {
    height: 128px;
  }
  .audio-wave {
    justify-content: center;
  }
  .recording-pill {
    text-align: center;
  }
  .tool-app-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .feature-card.visible {
    animation: mobileCardIn 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .feature-card:active {
    transform: scale(0.985);
  }
  .feature-trust {
    grid-template-columns: 1fr;
  }
  .feature-trust span {
    border-left: 0;
    border-top: 1px solid rgba(167, 139, 250, 0.14);
  }
}

/* ===== SAFETY TOOLS PAGE ===== */
.tools-page {
  min-height: 100vh;
  background: #05040b;
  color: var(--text);
}
.tools-hero {
  position: relative;
  min-height: 380px;
  overflow: hidden;
  padding: 86px 22px 20px;
}
.tools-hero-bg {
  position: absolute;
  inset: 0;
  background: url("assets/tool.png") center/cover no-repeat;
}
.tools-hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(5, 4, 12, 0.92) 0%,
      rgba(5, 4, 12, 0.58) 43%,
      rgba(5, 4, 12, 0.94) 100%
    ),
    linear-gradient(180deg, rgba(5, 4, 12, 0.28), rgba(5, 4, 12, 0.96));
}
.tools-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 64% 50%,
      rgba(124, 58, 237, 0.3),
      transparent 30%
    ),
    radial-gradient(
      circle at 24% 66%,
      rgba(236, 72, 153, 0.12),
      transparent 28%
    );
}
.tools-hero-inner {
  position: relative;
  z-index: 2;
  width: min(1450px, 100%);
  min-height: 270px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(290px, 0.75fr);
  align-items: center;
  gap: 44px;
}
.tools-hero-copy span {
  color: #c084fc;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tools-hero-copy h1 {
  margin-top: 14px;
  color: #fff;
  font-size: clamp(2rem, 3.1vw, 3.65rem);
  line-height: 1.05;
}
.tools-hero-copy h1 strong {
  display: block;
  color: #a855f7;
  text-shadow: 0 0 28px rgba(168, 85, 247, 0.25);
}
.tools-hero-copy p {
  width: min(500px, 100%);
  margin-top: 18px;
  color: rgba(240, 236, 250, 0.7);
  font-size: 0.97rem;
  line-height: 1.65;
}
.tools-hero-note {
  width: min(360px, 100%);
  margin-top: 20px;
  display: grid;
  gap: 5px;
  padding: 16px 18px;
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 8px;
  background: rgba(14, 12, 28, 0.66);
  backdrop-filter: blur(18px);
}
.tools-hero-note b {
  color: rgba(240, 236, 250, 0.86);
  font-size: 0.86rem;
}
.tools-hero-note small {
  color: rgba(240, 236, 250, 0.62);
  font-size: 0.8rem;
}
.tools-quote {
  position: relative;
  margin: 0;
  padding: 12px 0 12px 20px;
  color: rgba(240, 236, 250, 0.84);
}
.tools-quote span {
  display: block;
  color: #c084fc;
  font-size: 3rem;
  line-height: 0.7;
  font-family: Georgia, serif;
}
.tools-quote p {
  font-size: 1.22rem;
  line-height: 1.45;
  font-style: italic;
  max-width: 330px;
}
.tools-quote::after {
  content: "";
  display: block;
  width: 72px;
  height: 2px;
  margin-top: 22px;
  background: linear-gradient(90deg, #c084fc, transparent);
  box-shadow: 0 0 18px rgba(192, 132, 252, 0.45);
}
.tools-grid-section {
  width: min(1450px, 100%);
  margin: -10px auto 0;
  padding: 0 22px 34px;
  position: relative;
  z-index: 5;
}
.tools-grid-main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.tool-card {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  padding: 18px;
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 8px;
  background: linear-gradient(
    180deg,
    rgba(16, 14, 31, 0.93),
    rgba(8, 7, 18, 0.95)
  );
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.28s,
    box-shadow 0.28s;
}
.tool-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 18% 14%,
      rgba(124, 58, 237, 0.16),
      transparent 24%
    ),
    radial-gradient(circle at 92% 8%, rgba(236, 72, 153, 0.07), transparent 24%);
  pointer-events: none;
}
.tool-card::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(167, 139, 250, 0.5),
    transparent
  );
  opacity: 0.75;
}
.tool-card:hover {
  transform: translateY(-5px);
  border-color: rgba(167, 139, 250, 0.42);
  box-shadow:
    0 20px 58px rgba(88, 28, 135, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.tool-card header {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 14px;
}
.tool-icon {
  position: relative;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #e9d5ff;
  background: linear-gradient(
    135deg,
    rgba(124, 58, 237, 0.88),
    rgba(59, 7, 100, 0.9)
  );
  border: 1px solid rgba(167, 139, 250, 0.22);
  box-shadow: 0 0 22px rgba(124, 58, 237, 0.28);
}
.tool-icon::before,
.tool-icon::after {
  content: "";
  position: absolute;
  display: block;
}
.icon-call::before {
  width: 22px;
  height: 22px;
  border: 5px solid #e9d5ff;
  border-left-color: transparent;
  border-top-color: transparent;
  border-radius: 50%;
  transform: rotate(38deg);
}
.icon-call::after {
  width: 8px;
  height: 8px;
  right: 16px;
  top: 15px;
  border-radius: 50%;
  background: #e9d5ff;
}
.icon-mic::before {
  width: 16px;
  height: 25px;
  border-radius: 999px;
  background: #e9d5ff;
  top: 12px;
}
.icon-mic::after {
  width: 26px;
  height: 18px;
  top: 25px;
  border: 3px solid #e9d5ff;
  border-top: 0;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 8px 0 -5px #e9d5ff;
}
.icon-timer::before {
  width: 25px;
  height: 25px;
  border: 4px solid #e9d5ff;
  border-radius: 50%;
  top: 17px;
}
.icon-timer::after {
  width: 12px;
  height: 14px;
  top: 10px;
  border-top: 4px solid #e9d5ff;
  border-left: 4px solid #e9d5ff;
  transform: rotate(45deg);
}
.icon-message::before {
  width: 30px;
  height: 22px;
  border-radius: 8px;
  background: #e9d5ff;
  top: 15px;
}
.icon-message::after {
  width: 12px;
  height: 12px;
  left: 17px;
  bottom: 12px;
  background: #e9d5ff;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.icon-shield::before {
  width: 29px;
  height: 34px;
  background: #e9d5ff;
  clip-path: polygon(50% 0, 88% 14%, 80% 68%, 50% 100%, 20% 68%, 12% 14%);
}
.icon-shield::after {
  width: 12px;
  height: 7px;
  border-left: 3px solid #5b21b6;
  border-bottom: 3px solid #5b21b6;
  transform: rotate(-45deg);
  top: 23px;
}
.icon-star::before {
  width: 32px;
  height: 32px;
  background: #e9d5ff;
  clip-path: polygon(
    50% 0,
    62% 34%,
    98% 35%,
    69% 56%,
    79% 91%,
    50% 70%,
    21% 91%,
    31% 56%,
    2% 35%,
    38% 34%
  );
}
.icon-guardian::before {
  width: 14px;
  height: 14px;
  top: 12px;
  border-radius: 50%;
  background: #e9d5ff;
  box-shadow:
    -13px 12px 0 -2px #e9d5ff,
    13px 12px 0 -2px #e9d5ff;
}
.icon-guardian::after {
  width: 35px;
  height: 20px;
  bottom: 11px;
  border-radius: 18px 18px 8px 8px;
  background: #e9d5ff;
  clip-path: polygon(
    18% 100%,
    18% 58%,
    0 58%,
    24% 0,
    50% 28%,
    76% 0,
    100% 58%,
    82% 58%,
    82% 100%
  );
}
.tool-card h2 {
  color: #fff;
  font-size: 1.08rem;
  line-height: 1.2;
}
.tool-card h2 em {
  display: inline-grid;
  place-items: center;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 5px;
  color: #fff;
  background: #7c3aed;
  font-size: 0.62rem;
  font-style: normal;
}
.tool-card p {
  margin-top: 6px;
  color: rgba(240, 236, 250, 0.64);
  font-size: 0.76rem;
  line-height: 1.45;
}
.tool-arrow {
  width: 10px;
  height: 10px;
  margin-top: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  opacity: 0.9;
}
.tool-card ul {
  position: relative;
  z-index: 2;
  list-style: none;
  display: grid;
  gap: 8px;
  margin-top: 15px;
}
.tool-card li {
  position: relative;
  padding-left: 20px;
  color: rgba(240, 236, 250, 0.72);
  font-size: 0.78rem;
  line-height: 1.35;
}
.tool-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(192, 132, 252, 0.82);
  background: rgba(124, 58, 237, 0.14);
  box-shadow: 0 0 10px rgba(192, 132, 252, 0.28);
}
.fake-call-box {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 34px 34px;
  align-items: center;
  gap: 10px;
  margin: 28px auto 18px;
  padding: 11px 12px;
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
}
.fake-call-box small,
.fake-call-box span {
  display: block;
  color: rgba(240, 236, 250, 0.58);
  font-size: 0.6rem;
}
.fake-call-box b {
  display: block;
  color: #fff;
  font-size: 0.76rem;
  margin: 2px 0;
}
.fake-call-box button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
}
.fake-call-box .decline {
  background: #ef4444;
}
.fake-call-box .accept {
  background: #22c55e;
}
.tools-wave {
  position: relative;
  z-index: 2;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 18px;
}
.tools-wave i {
  width: 3px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ec4899, #7c3aed);
  animation: waveBars 1.1s ease-in-out infinite;
}
.tools-wave i:nth-child(2) {
  height: 45px;
  animation-delay: 0.06s;
}
.tools-wave i:nth-child(3) {
  height: 34px;
  animation-delay: 0.12s;
}
.tools-wave i:nth-child(4) {
  height: 56px;
  animation-delay: 0.18s;
}
.tools-wave i:nth-child(5) {
  height: 38px;
  animation-delay: 0.24s;
}
.tools-wave i:nth-child(6) {
  height: 62px;
  animation-delay: 0.3s;
}
.tools-wave i:nth-child(7) {
  height: 42px;
  animation-delay: 0.36s;
}
.tools-wave i:nth-child(8) {
  height: 52px;
  animation-delay: 0.42s;
}
.tools-wave i:nth-child(9) {
  height: 30px;
  animation-delay: 0.48s;
}
.tool-pill {
  position: relative;
  z-index: 2;
  width: max-content;
  margin: 0 auto 12px;
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(167, 139, 250, 0.16);
  color: rgba(240, 236, 250, 0.82);
  font-size: 0.7rem;
}
.recording-live::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 12px #ef4444;
}
.timer-box {
  position: relative;
  z-index: 2;
  width: min(220px, 100%);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  margin: 24px auto 14px;
  padding: 15px;
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}
.timer-ring {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: conic-gradient(#a855f7 0 78%, rgba(167, 139, 250, 0.18) 78% 100%);
  position: relative;
}
.timer-ring::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #11101f;
}
.timer-box small {
  display: block;
  color: rgba(240, 236, 250, 0.58);
  font-size: 0.66rem;
}
.timer-box b {
  display: block;
  color: #fff;
  font-size: 1.25rem;
  margin-top: 2px;
}
.message-preview {
  position: relative;
  z-index: 2;
  width: min(260px, 100%);
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 30px auto 18px;
  padding: 18px;
  border: 1px solid rgba(167, 139, 250, 0.25);
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.07),
    rgba(255, 255, 255, 0.035)
  );
}
.message-preview span {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.32);
}
.message-preview b {
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
}
.safe-zone-tool {
  grid-column: span 1;
}
.safe-zone-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 12px;
  margin: 18px 0 12px;
}
.zone-map {
  position: relative;
  min-height: 122px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(167, 139, 250, 0.16);
  background:
    linear-gradient(rgba(167, 139, 250, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 139, 250, 0.06) 1px, transparent 1px),
    rgba(4, 7, 18, 0.62);
  background-size: 24px 24px;
}
.zone-map::before {
  content: "";
  position: absolute;
  left: 28px;
  right: 36px;
  top: 72px;
  height: 2px;
  background: linear-gradient(90deg, #7c3aed, #ec4899, #22c55e);
  transform: rotate(-13deg);
}
.zone-map span {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #7c3aed;
  box-shadow: 0 0 18px #7c3aed;
}
.zone-map span:nth-child(1) {
  left: 36px;
  top: 70px;
}
.zone-map span:nth-child(2) {
  left: 52%;
  top: 32px;
  background: #22c55e;
  box-shadow: 0 0 18px #22c55e;
}
.zone-map span:nth-child(3) {
  right: 34px;
  top: 42px;
  background: #86efac;
  box-shadow: 0 0 18px rgba(134, 239, 172, 0.7);
}
.nearest-place {
  padding: 14px;
  border-radius: 8px;
  border: 1px solid rgba(167, 139, 250, 0.18);
  background: rgba(255, 255, 255, 0.045);
}
.nearest-place small,
.nearest-place span {
  display: block;
  color: rgba(240, 236, 250, 0.6);
  font-size: 0.66rem;
}
.nearest-place b {
  display: block;
  color: #fff;
  margin: 14px 0 4px;
  font-size: 0.8rem;
}
.nearest-place button {
  width: 100%;
  margin-top: 14px;
  border: 0;
  border-radius: 7px;
  padding: 10px;
  color: #fff;
  background: linear-gradient(135deg, #6d28d9, #7c3aed);
  font-family: "Outfit", sans-serif;
}
.travel-score-tool {
  grid-column: span 1;
}
.score-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 145px 1fr;
  gap: 18px;
  align-items: center;
  margin: 18px 0;
}
.score-ring {
  width: 135px;
  height: 135px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#a855f7 0 82%, rgba(167, 139, 250, 0.16) 82% 100%);
  position: relative;
}
.score-ring::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: #0b0917;
}
.score-ring b,
.score-ring span {
  position: relative;
  z-index: 2;
  grid-area: 1/1;
}
.score-ring b {
  color: #fff;
  font-size: 2rem;
}
.score-ring span {
  align-self: end;
  margin-bottom: 30px;
  color: rgba(240, 236, 250, 0.68);
  font-size: 0.72rem;
}
.score-list {
  display: grid;
  gap: 8px;
}
.score-list p {
  margin: 0;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(167, 139, 250, 0.14);
  color: rgba(240, 236, 250, 0.76);
  font-size: 0.7rem;
}
.score-list b {
  display: block;
  color: #c084fc;
  margin-top: 2px;
}
.invite-strip,
.angel-strip {
  position: relative;
  z-index: 2;
  padding: 11px 14px;
  border-radius: 8px;
  background: rgba(124, 58, 237, 0.14);
  border: 1px solid rgba(167, 139, 250, 0.2);
  color: #d8b4fe;
  font-size: 0.78rem;
  text-align: center;
}
.guardian-angel-tool {
  grid-column: span 2;
  border-color: rgba(192, 132, 252, 0.75);
  box-shadow:
    0 0 34px rgba(168, 85, 247, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.angel-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 18px 0 12px;
}
.angel-art {
  min-height: 138px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: radial-gradient(
    circle,
    rgba(168, 85, 247, 0.24),
    transparent 66%
  );
}
.angel-art span {
  width: 86px;
  height: 96px;
  clip-path: polygon(50% 0, 88% 16%, 80% 72%, 50% 100%, 20% 72%, 12% 16%);
  background: linear-gradient(135deg, #7c3aed, #c084fc, #3b0764);
  box-shadow: 0 0 28px rgba(192, 132, 252, 0.42);
}
.angel-list {
  display: grid;
  gap: 8px;
}
.angel-list p {
  margin: 0;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid rgba(167, 139, 250, 0.16);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(240, 236, 250, 0.72);
  font-size: 0.72rem;
}
.tools-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  margin-top: 14px;
  padding: 20px 24px;
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(
      90deg,
      rgba(88, 28, 135, 0.42),
      rgba(10, 9, 22, 0.94) 42%,
      rgba(10, 9, 22, 0.88)
    ),
    radial-gradient(circle at 8% 50%, rgba(168, 85, 247, 0.28), transparent 22%);
  box-shadow:
    0 14px 44px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.tools-shield {
  width: 74px;
  height: 84px;
  clip-path: polygon(50% 0, 90% 15%, 82% 72%, 50% 100%, 18% 72%, 10% 15%);
  background: linear-gradient(135deg, #7c3aed, #a855f7 52%, #3b0764);
  box-shadow: 0 0 28px rgba(168, 85, 247, 0.32);
}
.tools-footer h2 {
  color: #c084fc;
  font-size: 1.2rem;
}
.tools-footer p {
  margin-top: 6px;
  color: rgba(240, 236, 250, 0.66);
  font-size: 0.76rem;
}
.tools-trust {
  display: grid;
  grid-template-columns: repeat(3, 130px);
}
.tools-trust span {
  min-height: 48px;
  display: grid;
  place-items: center;
  padding: 0 12px;
  border-left: 1px solid rgba(167, 139, 250, 0.14);
  color: rgba(240, 236, 250, 0.72);
  font-size: 0.72rem;
  text-align: center;
}

@media (max-width: 1220px) {
  .tools-hero-inner {
    grid-template-columns: 1fr;
    gap: 18px;
    text-align: center;
  }
  .tools-hero-copy p,
  .tools-hero-note {
    margin-left: auto;
    margin-right: auto;
  }
  .tools-quote {
    justify-self: center;
    padding-left: 0;
  }
  .tools-quote p {
    max-width: 560px;
  }
  .tools-grid-main {
    grid-template-columns: repeat(2, 1fr);
  }
  .safe-zone-tool,
  .travel-score-tool,
  .guardian-angel-tool {
    grid-column: auto;
  }
  .tools-footer {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .tools-shield {
    margin: 0 auto;
  }
  .tools-trust {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 720px) {
  .tools-hero {
    padding: 76px 14px 18px;
    min-height: auto;
  }
  .tools-hero-copy h1 {
    font-size: 2.18rem;
  }
  .tools-quote p {
    font-size: 1rem;
  }
  .tools-grid-section {
    padding: 0 14px 24px;
    margin-top: 0;
  }
  .tools-grid-main {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .tool-card {
    min-height: auto;
    padding: 16px;
  }
  .tool-card.visible {
    animation: mobileCardIn 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .tool-card:active {
    transform: scale(0.985);
  }
  .safe-zone-layout,
  .score-layout,
  .angel-layout {
    grid-template-columns: 1fr;
  }
  .score-ring {
    margin: 0 auto;
  }
  .fake-call-box {
    grid-template-columns: 1fr 34px 34px;
  }
  .tools-trust {
    grid-template-columns: 1fr;
  }
  .tools-trust span {
    border-left: 0;
    border-top: 1px solid rgba(167, 139, 250, 0.14);
  }
}

/* ===== SAFETY TOOLS FINAL OVERRIDES ===== */
.tools-page {
  background:
    radial-gradient(
      circle at 22% 18%,
      rgba(124, 58, 237, 0.12),
      transparent 28%
    ),
    radial-gradient(
      circle at 78% 8%,
      rgba(236, 72, 153, 0.08),
      transparent 28%
    ),
    #05040b;
}
.tools-hero {
  min-height: 500px;
  padding: 96px 28px 42px;
  border-bottom: 1px solid rgba(124, 58, 237, 0.16);
}
.tools-hero-bg {
  background:
    radial-gradient(
      circle at 66% 48%,
      rgba(124, 58, 237, 0.16),
      transparent 30%
    ),
    #05040b;
}
.tools-hero-bg::before {
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(5, 4, 12, 0.96) 0%,
      rgba(5, 4, 12, 0.72) 32%,
      rgba(5, 4, 12, 0.32) 58%,
      rgba(5, 4, 12, 0.86) 100%
    ),
    linear-gradient(
      180deg,
      rgba(5, 4, 12, 0.12) 0%,
      rgba(5, 4, 12, 0.36) 68%,
      rgba(5, 4, 12, 0.97) 100%
    ),
    url("assets/tool.png") center top/100% auto no-repeat;
  filter: brightness(0.68) saturate(0.96) contrast(1.03);
}
.tools-hero-bg::after {
  background:
    linear-gradient(180deg, rgba(5, 4, 12, 0) 0%, rgba(5, 4, 12, 0.74) 100%),
    radial-gradient(
      circle at 74% 42%,
      rgba(124, 58, 237, 0.16),
      transparent 32%
    );
  opacity: 0.9;
}
.tools-hero-inner {
  min-height: 360px;
  grid-template-columns: minmax(360px, 0.72fr) minmax(280px, 0.45fr);
  align-items: center;
}
.tools-hero-copy span {
  font-size: 0.76rem;
  font-weight: 700;
  color: #c084fc;
}
.tools-hero-copy h1 {
  max-width: 560px;
  margin-top: 12px;
  font-family: "Outfit", sans-serif;
  font-size: clamp(2.35rem, 3vw, 3.35rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0;
}
.tools-hero-copy h1 strong {
  margin-top: 2px;
  text-shadow: none;
}
.tools-hero-copy p {
  max-width: 490px;
  margin-top: 16px;
  color: rgba(240, 236, 250, 0.72);
  font-size: 0.94rem;
}
.tools-hero-note {
  max-width: 370px;
  padding: 15px 18px;
  background: rgba(11, 9, 23, 0.58);
  border-color: rgba(167, 139, 250, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.tools-quote {
  justify-self: end;
  max-width: 330px;
  padding: 16px 0 16px 18px;
  background: rgba(5, 4, 12, 0.18);
  border-left: 1px solid rgba(192, 132, 252, 0.24);
}
.tools-quote p {
  font-family: "Outfit", sans-serif;
  font-size: 1.08rem;
  color: rgba(240, 236, 250, 0.82);
}
.tools-grid-section {
  margin: -24px auto 0;
  padding: 0 28px 36px;
}
.tools-grid-main {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.tool-card {
  min-height: 268px;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(15, 14, 29, 0.96), rgba(8, 7, 18, 0.97)),
    radial-gradient(
      circle at 20% 12%,
      rgba(124, 58, 237, 0.12),
      transparent 32%
    );
  border-color: rgba(124, 58, 237, 0.18);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.tool-card::before {
  background: radial-gradient(
    circle at 18% 14%,
    rgba(124, 58, 237, 0.11),
    transparent 30%
  );
}
.tool-card:hover {
  transform: translateY(-4px);
  border-color: rgba(167, 139, 250, 0.34);
  box-shadow:
    0 18px 46px rgba(60, 22, 112, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.tool-card header {
  grid-template-columns: 48px 1fr 12px;
  gap: 14px;
  margin-bottom: 18px;
}
.tool-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(124, 58, 237, 0.74),
    rgba(59, 7, 100, 0.78)
  );
  border-color: rgba(167, 139, 250, 0.18);
  color: #f3e8ff;
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.22);
}
.tool-icon::before {
  inset: 0;
  width: 25px;
  height: 25px;
  margin: auto;
  background: currentColor;
  -webkit-mask: center/contain no-repeat;
  mask: center/contain no-repeat;
}
.tool-icon::after {
  display: none;
}
.icon-call::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.6 10.8c1.7 3.4 3.2 4.9 6.6 6.6l2.2-2.2c.3-.3.8-.4 1.2-.2 1.3.4 2.7.7 4.1.7.7 0 1.3.6 1.3 1.3v3.6c0 .7-.6 1.3-1.3 1.3C10.4 21.9 2.1 13.6 2.1 3.3 2.1 2.6 2.7 2 3.4 2H7c.7 0 1.3.6 1.3 1.3 0 1.4.2 2.8.7 4.1.1.4 0 .8-.3 1.1l-2.1 2.3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.6 10.8c1.7 3.4 3.2 4.9 6.6 6.6l2.2-2.2c.3-.3.8-.4 1.2-.2 1.3.4 2.7.7 4.1.7.7 0 1.3.6 1.3 1.3v3.6c0 .7-.6 1.3-1.3 1.3C10.4 21.9 2.1 13.6 2.1 3.3 2.1 2.6 2.7 2 3.4 2H7c.7 0 1.3.6 1.3 1.3 0 1.4.2 2.8.7 4.1.1.4 0 .8-.3 1.1l-2.1 2.3Z'/%3E%3C/svg%3E");
}
.icon-mic::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 14c1.7 0 3-1.3 3-3V5c0-1.7-1.3-3-3-3S9 3.3 9 5v6c0 1.7 1.3 3 3 3Zm5-3c0 2.8-2.2 5-5 5s-5-2.2-5-5H5c0 3.5 2.6 6.4 6 6.9V21H8v2h8v-2h-3v-3.1c3.4-.5 6-3.4 6-6.9h-2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 14c1.7 0 3-1.3 3-3V5c0-1.7-1.3-3-3-3S9 3.3 9 5v6c0 1.7 1.3 3 3 3Zm5-3c0 2.8-2.2 5-5 5s-5-2.2-5-5H5c0 3.5 2.6 6.4 6 6.9V21H8v2h8v-2h-3v-3.1c3.4-.5 6-3.4 6-6.9h-2Z'/%3E%3C/svg%3E");
}
.icon-timer::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15 1H9v2h6V1Zm-4 13h2V8h-2v6Zm1 8a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0-2a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15 1H9v2h6V1Zm-4 13h2V8h-2v6Zm1 8a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0-2a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z'/%3E%3C/svg%3E");
}
.icon-message::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16c1.1 0 2 .9 2 2v9c0 1.1-.9 2-2 2H9l-5 5v-5c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2Zm3 5v2h10V9H7Zm0 4v2h7v-2H7Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16c1.1 0 2 .9 2 2v9c0 1.1-.9 2-2 2H9l-5 5v-5c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2Zm3 5v2h10V9H7Zm0 4v2h7v-2H7Z'/%3E%3C/svg%3E");
}
.icon-shield::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3Zm3.7 7.7-4.3 4.3-2.1-2.1-1.4 1.4 3.5 3.5 5.7-5.7-1.4-1.4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3Zm3.7 7.7-4.3 4.3-2.1-2.1-1.4 1.4 3.5 3.5 5.7-5.7-1.4-1.4Z'/%3E%3C/svg%3E");
}
.icon-star::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 2 3 6.2 6.8 1-4.9 4.8 1.2 6.8-6.1-3.2-6.1 3.2 1.2-6.8-4.9-4.8 6.8-1L12 2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 2 3 6.2 6.8 1-4.9 4.8 1.2 6.8-6.1-3.2-6.1 3.2 1.2-6.8-4.9-4.8 6.8-1L12 2Z'/%3E%3C/svg%3E");
}
.icon-guardian::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 11c1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3 1.3 3 3 3ZM8 11c1.7 0 3-1.3 3-3S9.7 5 8 5 5 6.3 5 8s1.3 3 3 3Zm0 2c-2.7 0-6 1.3-6 4v2h12v-2c0-2.7-3.3-4-6-4Zm8 0c-.3 0-.7 0-1 .1 1.2.9 2 2.1 2 3.9v2h5v-2c0-2.7-3.3-4-6-4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 11c1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3 1.3 3 3 3ZM8 11c1.7 0 3-1.3 3-3S9.7 5 8 5 5 6.3 5 8s1.3 3 3 3Zm0 2c-2.7 0-6 1.3-6 4v2h12v-2c0-2.7-3.3-4-6-4Zm8 0c-.3 0-.7 0-1 .1 1.2.9 2 2.1 2 3.9v2h5v-2c0-2.7-3.3-4-6-4Z'/%3E%3C/svg%3E");
}
.tool-card h2 {
  font-size: 1rem;
  font-weight: 700;
}
.tool-card p {
  font-size: 0.74rem;
  color: rgba(240, 236, 250, 0.62);
}
.tool-card ul {
  margin-top: auto;
  padding-top: 14px;
}
.tool-card li {
  font-size: 0.74rem;
  color: rgba(240, 236, 250, 0.68);
}
.fake-call-box,
.timer-box,
.message-preview,
.safe-zone-layout,
.score-layout,
.angel-layout {
  margin-top: 6px;
}
.fake-call-box,
.timer-box,
.message-preview,
.nearest-place,
.score-list p,
.angel-list p {
  background: rgba(255, 255, 255, 0.032);
  border-color: rgba(167, 139, 250, 0.14);
}
.tools-wave {
  margin-top: 0;
  height: 66px;
}
.safe-zone-tool,
.travel-score-tool {
  min-height: 308px;
}
.guardian-angel-tool {
  min-height: 308px;
  border-color: rgba(167, 139, 250, 0.36);
  box-shadow:
    0 16px 44px rgba(88, 28, 135, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.angel-art {
  background: radial-gradient(
    circle,
    rgba(168, 85, 247, 0.16),
    transparent 68%
  );
}
.tools-footer {
  background: linear-gradient(
    90deg,
    rgba(68, 25, 126, 0.28),
    rgba(10, 9, 22, 0.96) 42%,
    rgba(10, 9, 22, 0.92)
  );
  border-color: rgba(124, 58, 237, 0.18);
}
@media (max-width: 1220px) {
  .tools-hero {
    min-height: 430px;
  }
  .tools-hero-bg::before {
    background:
      linear-gradient(
        180deg,
        rgba(5, 4, 12, 0.62) 0%,
        rgba(5, 4, 12, 0.94) 100%
      ),
      url("assets/tool.png") center top/auto 100% no-repeat;
  }
  .tools-hero-inner {
    grid-template-columns: 1fr;
    min-height: 300px;
    gap: 12px;
  }
  .tools-quote {
    justify-self: center;
    max-width: 520px;
    text-align: center;
    border-left: 0;
  }
}
@media (max-width: 720px) {
  .tools-hero {
    min-height: 430px;
    padding: 78px 16px 24px;
  }
  .tools-hero-bg::before {
    background:
      linear-gradient(
        180deg,
        rgba(5, 4, 12, 0.58) 0%,
        rgba(5, 4, 12, 0.97) 82%
      ),
      url("assets/tool.png") center top/auto 100% no-repeat;
    filter: brightness(0.56) saturate(0.9);
  }
  .tools-hero-copy h1 {
    font-size: 2.05rem;
  }
  .tools-hero-note {
    padding: 13px 14px;
  }
  .tools-grid-section {
    padding: 0 14px 24px;
  }
  .tool-card {
    padding: 16px;
  }
  .tool-card header {
    grid-template-columns: 44px 1fr 10px;
    gap: 12px;
  }
  .tool-icon {
    width: 44px;
    height: 44px;
  }
  .tool-icon::before {
    width: 23px;
    height: 23px;
  }
}

/* Balanced tools card grid */
@media (min-width: 1221px) {
  .tools-grid-main {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .tool-card {
    grid-column: span 3;
  }
  .safe-zone-tool,
  .travel-score-tool,
  .guardian-angel-tool {
    grid-column: span 4;
  }
}
@media (max-width: 1220px) {
  .tool-card,
  .safe-zone-tool,
  .travel-score-tool,
  .guardian-angel-tool {
    grid-column: auto;
  }
}

/* ===== SAFETY TOOLS RESPONSIVE FIX ===== */
@media (max-width: 1220px) {
  .tools-hero {
    min-height: auto;
    padding: 92px 22px 34px;
  }
  .tools-hero-bg::before {
    background:
      linear-gradient(
        180deg,
        rgba(5, 4, 12, 0.62) 0%,
        rgba(5, 4, 12, 0.96) 86%
      ),
      url("assets/tool.png") center top/auto 100% no-repeat;
    filter: brightness(0.58) saturate(0.92) contrast(1.02);
  }
  .tools-hero-inner {
    grid-template-columns: 1fr;
    min-height: 330px;
    text-align: center;
    gap: 16px;
  }
  .tools-hero-copy h1,
  .tools-hero-copy p,
  .tools-hero-note {
    margin-left: auto;
    margin-right: auto;
  }
  .tools-quote {
    justify-self: center;
    max-width: 560px;
    padding: 10px 0 0;
    border-left: 0;
    background: transparent;
  }
  .tools-quote::after {
    margin-left: auto;
    margin-right: auto;
  }
  .tools-grid-section {
    margin-top: 0;
    padding: 0 22px 32px;
  }
  .tools-grid-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .tool-card,
  .safe-zone-tool,
  .travel-score-tool,
  .guardian-angel-tool {
    grid-column: auto;
    min-height: auto;
  }
  .safe-zone-layout,
  .score-layout,
  .angel-layout {
    grid-template-columns: 1fr;
  }
  .zone-map {
    min-height: 150px;
  }
  .score-ring {
    margin: 0 auto;
  }
  .tools-footer {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .tools-shield {
    margin: 0 auto;
  }
  .tools-trust {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }
}

@media (max-width: 720px) {
  .tools-hero {
    padding: 76px 14px 24px;
  }
  .tools-hero-bg::before {
    background:
      linear-gradient(
        180deg,
        rgba(5, 4, 12, 0.5) 0%,
        rgba(5, 4, 12, 0.84) 44%,
        rgba(5, 4, 12, 0.98) 100%
      ),
      url("assets/tool.png") center top/auto 58% no-repeat;
    filter: brightness(0.52) saturate(0.88);
  }
  .tools-hero-inner {
    min-height: 420px;
    align-content: end;
  }
  .tools-hero-copy span {
    font-size: 0.68rem;
  }
  .tools-hero-copy h1 {
    font-size: clamp(1.95rem, 9vw, 2.45rem);
    line-height: 1.1;
  }
  .tools-hero-copy p {
    font-size: 0.84rem;
    line-height: 1.55;
  }
  .tools-hero-note {
    padding: 12px 14px;
  }
  .tools-quote {
    display: none;
  }
  .tools-grid-section {
    padding: 0 14px 24px;
  }
  .tools-grid-main {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .tool-card {
    padding: 16px;
    border-radius: 8px;
  }
  .tool-card header {
    grid-template-columns: 44px minmax(0, 1fr) 10px;
    gap: 12px;
    margin-bottom: 14px;
  }
  .tool-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
  .tool-icon::before {
    width: 23px;
    height: 23px;
  }
  .tool-card h2 {
    font-size: 0.98rem;
  }
  .tool-card p,
  .tool-card li {
    font-size: 0.72rem;
  }
  .fake-call-box {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) 32px 32px;
    gap: 8px;
    padding: 10px;
  }
  .fake-call-box b,
  .fake-call-box span,
  .fake-call-box small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .fake-call-box button {
    width: 32px;
    height: 32px;
  }
  .timer-box,
  .message-preview {
    width: 100%;
  }
  .message-preview {
    padding: 14px;
  }
  .safe-zone-layout {
    gap: 10px;
  }
  .zone-map {
    min-height: 132px;
  }
  .nearest-place button {
    padding: 10px 8px;
  }
  .score-layout {
    gap: 12px;
  }
  .score-ring {
    width: 122px;
    height: 122px;
  }
  .score-ring b {
    font-size: 1.75rem;
  }
  .angel-art {
    min-height: 116px;
  }
  .angel-list {
    gap: 7px;
  }
  .angel-strip,
  .invite-strip {
    font-size: 0.72rem;
    padding: 10px;
  }
  .tools-footer {
    gap: 14px;
    padding: 18px 16px;
  }
  .tools-footer h2 {
    font-size: 1rem;
  }
  .tools-trust {
    grid-template-columns: 1fr;
  }
  .tools-trust span {
    border-left: 0;
    border-top: 1px solid rgba(167, 139, 250, 0.14);
  }
}

@media (max-width: 390px) {
  .tools-hero-inner {
    min-height: 445px;
  }
  .tools-hero-copy h1 {
    font-size: 1.82rem;
  }
  .tools-hero-note b,
  .tools-hero-note small {
    font-size: 0.72rem;
  }
  .tool-card {
    padding: 14px;
  }
  .tool-card header {
    grid-template-columns: 40px minmax(0, 1fr) 9px;
  }
  .tool-icon {
    width: 40px;
    height: 40px;
  }
  .tool-icon::before {
    width: 21px;
    height: 21px;
  }
}

/* Guardian Angel card tracking icon + footer logo */
.icon-tracking::before {
  inset: 0;
  width: 25px;
  height: 25px;
  margin: auto;
  background: currentColor;
  -webkit-mask: center/contain no-repeat;
  mask: center/contain no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Zm0 9.7A2.7 2.7 0 1 1 12 6.3a2.7 2.7 0 0 1 0 5.4Zm-9 9.8 4.2-3.2 1.2 1.6L6.8 21h10.4l-1.6-1.1 1.2-1.6 4.2 3.2V23H3v-1.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Zm0 9.7A2.7 2.7 0 1 1 12 6.3a2.7 2.7 0 0 1 0 5.4Zm-9 9.8 4.2-3.2 1.2 1.6L6.8 21h10.4l-1.6-1.1 1.2-1.6 4.2 3.2V23H3v-1.5Z'/%3E%3C/svg%3E");
}
.icon-tracking::after {
  display: none;
}
.tools-footer-logo {
  width: 78px;
  height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(168, 85, 247, 0.42));
}
@media (max-width: 1220px) {
  .tools-footer-logo {
    margin: 0 auto;
  }
}
@media (max-width: 720px) {
  .tools-footer-logo {
    width: 62px;
    height: 62px;
  }
}

/* ===== ABOUT PAGE ===== */
.about-page {
  min-height: 100vh;
  background:
    radial-gradient(
      circle at 48% 10%,
      rgba(124, 58, 237, 0.15),
      transparent 28%
    ),
    radial-gradient(
      circle at 86% 24%,
      rgba(236, 72, 153, 0.08),
      transparent 26%
    ),
    #05040b;
  color: var(--text);
}
.about-hero {
  position: relative;
  min-height: 380px;
  overflow: hidden;
  padding: 92px 28px 24px;
}
.about-hero-bg {
  position: absolute;
  inset: 0;
  background: #05040b;
}
.about-hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(5, 4, 12, 0.94) 0%,
      rgba(5, 4, 12, 0.52) 34%,
      rgba(5, 4, 12, 0.36) 66%,
      rgba(5, 4, 12, 0.93) 100%
    ),
    linear-gradient(180deg, rgba(5, 4, 12, 0.1) 0%, rgba(5, 4, 12, 0.95) 100%),
    url("assets/about.png") center top/100% auto no-repeat;
  filter: brightness(0.72) saturate(0.98) contrast(1.02);
}
.about-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 54% 44%,
      rgba(124, 58, 237, 0.18),
      transparent 32%
    ),
    linear-gradient(180deg, transparent 54%, rgba(5, 4, 12, 0.78) 100%);
}
.about-hero-inner {
  position: relative;
  z-index: 2;
  width: min(1450px, 100%);
  min-height: 260px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(390px, 0.86fr) minmax(260px, 0.44fr);
  align-items: center;
  gap: 42px;
}
.about-hero-copy span {
  color: #c084fc;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.about-hero-copy h1 {
  max-width: 620px;
  margin-top: 14px;
  font-family: "Outfit", sans-serif;
  font-size: clamp(2.25rem, 3vw, 3.4rem);
  line-height: 1.12;
  color: #fff;
  font-weight: 700;
}
.about-hero-copy h1 strong {
  display: block;
  color: #a855f7;
}
.about-hero-copy p {
  max-width: 520px;
  margin-top: 16px;
  color: rgba(240, 236, 250, 0.72);
  font-size: 0.94rem;
  line-height: 1.6;
}
.about-trust-note {
  width: min(470px, 100%);
  margin-top: 18px;
  padding: 11px 14px;
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 8px;
  background: rgba(12, 10, 24, 0.62);
  color: #d8b4fe;
  font-size: 0.76rem;
}
.about-quote {
  justify-self: end;
  max-width: 300px;
  margin: 0;
  padding: 16px 0 16px 18px;
  border-left: 1px solid rgba(192, 132, 252, 0.24);
  color: rgba(240, 236, 250, 0.84);
}
.about-quote span {
  display: block;
  color: #c084fc;
  font-family: Georgia, serif;
  font-size: 3rem;
  line-height: 0.7;
}
.about-quote p {
  font-size: 1.08rem;
  line-height: 1.45;
  font-style: italic;
}
.about-content {
  width: min(1450px, 100%);
  margin: -6px auto 0;
  padding: 0 28px 34px;
}
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.88fr 0.95fr;
  gap: 14px;
  align-items: stretch;
}
.about-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 8px;
  background: linear-gradient(
    180deg,
    rgba(15, 14, 29, 0.96),
    rgba(8, 7, 18, 0.97)
  );
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  padding: 22px;
}
.about-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 18% 12%,
    rgba(124, 58, 237, 0.13),
    transparent 32%
  );
  pointer-events: none;
}
.about-card > * {
  position: relative;
  z-index: 2;
}
.about-card header {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 16px;
}
.about-card h2 {
  color: #fff;
  font-size: 1.08rem;
  line-height: 1.25;
}
.about-card p {
  color: rgba(240, 236, 250, 0.72);
  font-size: 0.83rem;
  line-height: 1.62;
  margin-top: 12px;
}
.about-highlight {
  color: #d8b4fe !important;
}
.about-icon,
.mission-steps span,
.values-list span,
.why-list span,
.about-proof span {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #f3e8ff;
  background: linear-gradient(
    135deg,
    rgba(124, 58, 237, 0.74),
    rgba(59, 7, 100, 0.78)
  );
  border: 1px solid rgba(167, 139, 250, 0.18);
  box-shadow: 0 0 18px rgba(124, 58, 237, 0.22);
  position: relative;
}
.about-icon::before,
.mission-steps span::before,
.values-list span::before,
.why-list span::before,
.about-proof span::before {
  content: "";
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: center/contain no-repeat;
  mask: center/contain no-repeat;
}
.book-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4c0-1.1.9-2 2-2h6v18H6c-1.1 0-2-.9-2-2V4Zm8-2h6c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2h-6V2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4c0-1.1.9-2 2-2h6v18H6c-1.1 0-2-.9-2-2V4Zm8-2h6c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2h-6V2Z'/%3E%3C/svg%3E");
}
.mission-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 10 10h-2a8 8 0 1 1-8-8V2Zm0 4a6 6 0 1 0 6 6h-2a4 4 0 1 1-4-4V6Zm8-4v4h-4l1.3 1.3-4.6 4.6 1.4 1.4 4.6-4.6L20 10V6h4V2h-4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 10 10h-2a8 8 0 1 1-8-8V2Zm0 4a6 6 0 1 0 6 6h-2a4 4 0 1 1-4-4V6Zm8-4v4h-4l1.3 1.3-4.6 4.6 1.4 1.4 4.6-4.6L20 10V6h4V2h-4Z'/%3E%3C/svg%3E");
}
.values-icon::before,
.mini-heart::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 21s-7-4.4-9.4-8.5C.8 9.5 2.4 5 6.2 5c2 0 3.4 1.1 4.2 2.2C11.2 6.1 12.6 5 14.6 5c3.8 0 5.4 4.5 3.6 7.5C15.8 16.6 12 21 12 21Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 21s-7-4.4-9.4-8.5C.8 9.5 2.4 5 6.2 5c2 0 3.4 1.1 4.2 2.2C11.2 6.1 12.6 5 14.6 5c3.8 0 5.4 4.5 3.6 7.5C15.8 16.6 12 21 12 21Z'/%3E%3C/svg%3E");
}
.mini-shield::before,
.mini-check::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3Zm3.7 7.7-4.3 4.3-2.1-2.1-1.4 1.4 3.5 3.5 5.7-5.7-1.4-1.4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3Zm3.7 7.7-4.3 4.3-2.1-2.1-1.4 1.4 3.5 3.5 5.7-5.7-1.4-1.4Z'/%3E%3C/svg%3E");
}
.mini-bolt::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 4 14h7l-1 8 10-13h-7l0-7Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 4 14h7l-1 8 10-13h-7l0-7Z'/%3E%3C/svg%3E");
}
.mini-users::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm8 0a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM8 13c-3 0-6 1.5-6 4.5V20h12v-2.5C14 14.5 11 13 8 13Zm8 0c-.7 0-1.4.1-2 .3 1.2 1 2 2.3 2 4.2V20h6v-2.5c0-3-3-4.5-6-4.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm8 0a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM8 13c-3 0-6 1.5-6 4.5V20h12v-2.5C14 14.5 11 13 8 13Zm8 0c-.7 0-1.4.1-2 .3 1.2 1 2 2.3 2 4.2V20h6v-2.5c0-3-3-4.5-6-4.5Z'/%3E%3C/svg%3E");
}
.mini-lock::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17 9V7A5 5 0 0 0 7 7v2H5v13h14V9h-2ZM9 7a3 3 0 0 1 6 0v2H9V7Zm4 9.7V19h-2v-2.3a2 2 0 1 1 2 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17 9V7A5 5 0 0 0 7 7v2H5v13h14V9h-2ZM9 7a3 3 0 0 1 6 0v2H9V7Zm4 9.7V19h-2v-2.3a2 2 0 1 1 2 0Z'/%3E%3C/svg%3E");
}
.mini-spark::before,
.mini-growth::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 2 1.8 6.2L20 10l-6.2 1.8L12 18l-1.8-6.2L4 10l6.2-1.8L12 2Zm7 13 1 3 3 1-3 1-1 3-1-3-3-1 3-1 1-3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 2 1.8 6.2L20 10l-6.2 1.8L12 18l-1.8-6.2L4 10l6.2-1.8L12 2Zm7 13 1 3 3 1-3 1-1 3-1-3-3-1 3-1 1-3Z'/%3E%3C/svg%3E");
}
.mini-bell::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22a2.5 2.5 0 0 0 2.4-2h-4.8A2.5 2.5 0 0 0 12 22Zm8-5-2-2v-5a6 6 0 0 0-5-5.9V2h-2v2.1A6 6 0 0 0 6 10v5l-2 2v1h16v-1Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22a2.5 2.5 0 0 0 2.4-2h-4.8A2.5 2.5 0 0 0 12 22Zm8-5-2-2v-5a6 6 0 0 0-5-5.9V2h-2v2.1A6 6 0 0 0 6 10v5l-2 2v1h16v-1Z'/%3E%3C/svg%3E");
}
.mini-location::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5Z'/%3E%3C/svg%3E");
}
.story-card {
  min-height: 420px;
}
.story-image {
  height: 150px;
  margin: 18px -22px -22px;
  background:
    linear-gradient(180deg, rgba(8, 7, 18, 0.05), rgba(8, 7, 18, 0.75)),
    url("assets/about.png") center bottom/cover no-repeat;
  border-top: 1px solid rgba(124, 58, 237, 0.16);
  filter: brightness(0.7) saturate(0.9);
}
.about-main-column {
  display: grid;
  gap: 14px;
}
.mission-steps,
.values-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(167, 139, 250, 0.12);
}
.values-list {
  grid-template-columns: repeat(5, 1fr);
}
.mission-steps div,
.values-list div {
  min-width: 0;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 7px;
  padding: 0 12px;
  border-left: 1px solid rgba(167, 139, 250, 0.12);
}
.mission-steps div:first-child,
.values-list div:first-child {
  border-left: 0;
}
.mission-steps span,
.values-list span,
.why-list span,
.about-proof span {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
}
.mission-steps span::before,
.values-list span::before,
.why-list span::before,
.about-proof span::before {
  width: 21px;
  height: 21px;
}
.mission-steps b,
.values-list b,
.about-proof b {
  color: #fff;
  font-size: 0.78rem;
}
.mission-steps small,
.values-list small,
.about-proof small {
  color: rgba(240, 236, 250, 0.64);
  font-size: 0.68rem;
  line-height: 1.4;
}
.why-card h2 {
  margin-bottom: 10px;
}
.why-list {
  display: grid;
  gap: 9px;
  margin-top: 20px;
}
.why-list div {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px;
  border: 1px solid rgba(167, 139, 250, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.032);
  color: rgba(240, 236, 250, 0.72);
  font-size: 0.76rem;
  line-height: 1.4;
}
.why-sign {
  color: #d8b4fe !important;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.2rem !important;
  text-align: center;
}
.about-proof {
  display: grid;
  grid-template-columns: 1.2fr repeat(4, 1fr);
  gap: 0;
  margin-top: 14px;
  padding: 20px 24px;
  border: 1px solid rgba(124, 58, 237, 0.36);
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    rgba(88, 28, 135, 0.34),
    rgba(10, 9, 22, 0.95) 38%,
    rgba(10, 9, 22, 0.92)
  );
}
.about-proof > div {
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 0 20px;
  border-left: 1px solid rgba(167, 139, 250, 0.14);
}
.about-proof > div:first-child {
  border-left: 0;
  padding-left: 0;
}
.about-proof h2 {
  color: #fff;
  font-size: 1.35rem;
  line-height: 1.18;
}
.about-proof h2 strong {
  color: #a855f7;
}
.about-proof p {
  color: rgba(240, 236, 250, 0.68);
  font-size: 0.76rem;
  line-height: 1.5;
}
.about-final {
  display: grid;
  grid-template-columns: 160px 1fr 260px;
  align-items: center;
  gap: 28px;
  min-height: 130px;
  margin-top: 14px;
  padding: 22px 28px;
  overflow: hidden;
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(24, 10, 48, 0.8), rgba(10, 9, 22, 0.74)),
    url("assets/about.png") center 58% / cover no-repeat;
  box-shadow:
    0 14px 44px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.hands-heart {
  width: 120px;
  height: 100px;
  margin: auto;
  background: radial-gradient(
    circle at center,
    #a855f7 0 28%,
    rgba(168, 85, 247, 0.12) 29% 62%,
    transparent 63%
  );
  clip-path: polygon(
    50% 0,
    86% 10%,
    100% 42%,
    75% 100%,
    50% 72%,
    25% 100%,
    0 42%,
    14% 10%
  );
  filter: drop-shadow(0 0 22px rgba(168, 85, 247, 0.38));
}
.about-final h2 {
  color: #c084fc;
  font-size: 1.45rem;
}
.about-final p {
  margin-top: 8px;
  color: rgba(240, 236, 250, 0.72);
  line-height: 1.5;
}
.final-script {
  color: #d8b4fe !important;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.35rem;
  text-align: center;
}

@media (max-width: 1220px) {
  .about-hero {
    padding: 86px 22px 24px;
  }
  .about-hero-bg::before {
    background:
      linear-gradient(
        180deg,
        rgba(5, 4, 12, 0.52) 0%,
        rgba(5, 4, 12, 0.96) 92%
      ),
      url("assets/about.png") center top/auto 100% no-repeat;
  }
  .about-hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .about-hero-copy h1,
  .about-hero-copy p,
  .about-trust-note {
    margin-left: auto;
    margin-right: auto;
  }
  .about-quote {
    justify-self: center;
    border-left: 0;
    padding: 0;
  }
  .about-grid {
    grid-template-columns: 1fr;
  }
  .story-card {
    min-height: auto;
  }
  .about-proof {
    grid-template-columns: repeat(2, 1fr);
  }
  .about-proof > div {
    border-left: 0;
    border-top: 1px solid rgba(167, 139, 250, 0.14);
    padding: 16px;
  }
  .about-proof > div:first-child {
    grid-column: 1/-1;
    border-top: 0;
    text-align: center;
    padding: 0 16px 16px;
  }
  .about-final {
    grid-template-columns: 120px 1fr;
  }
  .final-script {
    grid-column: 1/-1;
  }
}
@media (max-width: 720px) {
  .about-hero {
    padding: 76px 14px 22px;
  }
  .about-hero-bg::before {
    background:
      linear-gradient(
        180deg,
        rgba(5, 4, 12, 0.42) 0%,
        rgba(5, 4, 12, 0.82) 44%,
        rgba(5, 4, 12, 0.98) 100%
      ),
      url("assets/about.png") center top/auto 58% no-repeat;
    filter: brightness(0.58) saturate(0.9);
  }
  .about-hero-inner {
    min-height: 430px;
    align-content: end;
    gap: 18px;
  }
  .about-hero-copy h1 {
    font-size: clamp(1.95rem, 9vw, 2.45rem);
  }
  .about-hero-copy p,
  .about-card p {
    font-size: 0.8rem;
  }
  .about-quote {
    display: none;
  }
  .about-content {
    padding: 0 14px 24px;
  }
  .about-card {
    padding: 18px;
  }
  .story-image {
    margin: 16px -18px -18px;
    height: 120px;
  }
  .mission-steps,
  .values-list {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .mission-steps div,
  .values-list div {
    grid-template-columns: 42px 1fr;
    justify-items: start;
    text-align: left;
    border-left: 0;
    padding: 10px;
    border: 1px solid rgba(167, 139, 250, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
  }
  .mission-steps span,
  .values-list span {
    grid-row: span 2;
  }
  .about-proof {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .about-proof > div {
    padding: 14px 0;
  }
  .about-final {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 20px 18px;
  }
  .hands-heart {
    width: 90px;
    height: 78px;
  }
}

/* ===== ABOUT PAGE ANIMATION + ICON POLISH ===== */
.about-hero-bg::before {
  animation: aboutHeroFocus 12s ease-in-out infinite;
}
.about-trust-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.about-trust-note::before {
  content: "";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  background: #c084fc;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3Zm3.7 7.7-4.3 4.3-2.1-2.1-1.4 1.4 3.5 3.5 5.7-5.7-1.4-1.4Z'/%3E%3C/svg%3E")
    center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3Zm3.7 7.7-4.3 4.3-2.1-2.1-1.4 1.4 3.5 3.5 5.7-5.7-1.4-1.4Z'/%3E%3C/svg%3E")
    center/contain no-repeat;
  filter: drop-shadow(0 0 10px rgba(192, 132, 252, 0.5));
}
.about-card {
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.28s,
    box-shadow 0.28s;
}
.about-card::after {
  content: "";
  position: absolute;
  inset: -40% auto auto -25%;
  width: 36%;
  height: 180%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(167, 139, 250, 0.075),
    transparent
  );
  transform: rotate(18deg) translateX(-130%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.about-card.visible {
  animation: panelSettle 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.about-card.visible::after {
  transform: rotate(18deg) translateX(380%);
}
.about-card:hover {
  transform: translateY(-4px);
  border-color: rgba(167, 139, 250, 0.34);
  box-shadow:
    0 18px 46px rgba(60, 22, 112, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.about-icon,
.mission-steps span,
.values-list span,
.why-list span,
.about-proof span {
  transition:
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.24s,
    border-color 0.24s;
}
.about-card:hover .about-icon,
.mission-steps div:hover span,
.values-list div:hover span,
.why-list div:hover span,
.about-proof > div:hover span {
  transform: translateY(-2px) scale(1.06);
  border-color: rgba(216, 180, 254, 0.36);
  box-shadow: 0 0 24px rgba(124, 58, 237, 0.34);
}
.about-card.visible .about-icon,
.about-card.visible .mission-steps span,
.about-card.visible .values-list span,
.about-card.visible .why-list span,
.about-proof.visible span {
  animation: aboutIconPop 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.mission-steps div:nth-child(2) span,
.values-list div:nth-child(2) span,
.why-list div:nth-child(2) span,
.about-proof div:nth-child(3) span {
  animation-delay: 0.06s;
}
.mission-steps div:nth-child(3) span,
.values-list div:nth-child(3) span,
.why-list div:nth-child(3) span,
.about-proof div:nth-child(4) span {
  animation-delay: 0.12s;
}
.mission-steps div:nth-child(4) span,
.values-list div:nth-child(4) span,
.why-list div:nth-child(4) span,
.about-proof div:nth-child(5) span {
  animation-delay: 0.18s;
}
.values-list div:nth-child(5) span {
  animation-delay: 0.24s;
}
.story-card.visible .story-image {
  animation: aboutImageLift 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.story-image {
  position: relative;
  overflow: hidden;
}
.story-image::after {
  content: "";
  position: absolute;
  left: -30%;
  top: 0;
  width: 26%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.12),
    transparent
  );
  transform: skewX(-18deg);
  animation: aboutImageSweep 6s ease-in-out infinite;
}
.about-proof.visible > div,
.about-final.visible > * {
  animation: softRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.about-proof.visible > div:nth-child(2) {
  animation-delay: 0.06s;
}
.about-proof.visible > div:nth-child(3) {
  animation-delay: 0.12s;
}
.about-proof.visible > div:nth-child(4) {
  animation-delay: 0.18s;
}
.about-proof.visible > div:nth-child(5) {
  animation-delay: 0.24s;
}
.about-final.visible > div:nth-child(2) {
  animation-delay: 0.08s;
}
.about-final.visible .final-script {
  animation-delay: 0.16s;
}
.hands-heart {
  animation: aboutHeartFloat 4.2s ease-in-out infinite;
}
.about-quote span {
  animation: aboutQuotePulse 2.8s ease-in-out infinite;
}
.why-sign,
.final-script {
  text-shadow: 0 0 18px rgba(192, 132, 252, 0.28);
}

@keyframes aboutHeroFocus {
  0%,
  100% {
    filter: brightness(0.72) saturate(0.98) contrast(1.02);
  }
  50% {
    filter: brightness(0.66) saturate(1.04) contrast(1.04);
  }
}
@keyframes aboutIconPop {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.84);
  }
  60% {
    opacity: 1;
    transform: translateY(-2px) scale(1.08);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes aboutImageLift {
  0% {
    opacity: 0.55;
    transform: translateY(16px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes aboutImageSweep {
  0%,
  48% {
    left: -35%;
    opacity: 0;
  }
  58% {
    opacity: 0.85;
  }
  78%,
  100% {
    left: 115%;
    opacity: 0;
  }
}
@keyframes aboutHeartFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-7px) scale(1.03);
  }
}
@keyframes aboutQuotePulse {
  0%,
  100% {
    opacity: 0.74;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
@media (max-width: 720px) {
  .about-hero-bg::before {
    animation: none;
  }
  .about-card.visible,
  .about-proof.visible > div,
  .about-final.visible > * {
    animation: mobileCardIn 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-hero-bg::before,
  .hands-heart,
  .about-quote span,
  .story-image::after {
    animation: none;
  }
}

/* About mini icon fallback: avoid masked squares */
.mission-steps span::before,
.values-list span::before,
.why-list span::before,
.about-proof span::before {
  -webkit-mask: none !important;
  mask: none !important;
  background: #f3e8ff !important;
}
.mission-steps span::after,
.values-list span::after,
.why-list span::after,
.about-proof span::after {
  content: "";
  position: absolute;
  display: block;
}
.mini-shield::before,
.mini-check::before {
  width: 24px !important;
  height: 28px !important;
  clip-path: polygon(50% 0, 88% 15%, 80% 68%, 50% 100%, 20% 68%, 12% 15%);
}
.mini-shield::after,
.mini-check::after {
  width: 10px;
  height: 6px;
  border-left: 3px solid #5b21b6;
  border-bottom: 3px solid #5b21b6;
  transform: rotate(-45deg);
  top: 20px;
  left: 17px;
}
.mini-bolt::before {
  width: 22px !important;
  height: 30px !important;
  clip-path: polygon(58% 0, 14% 53%, 45% 53%, 36% 100%, 88% 39%, 56% 39%);
}
.mini-users::before {
  width: 28px !important;
  height: 25px !important;
  background: transparent !important;
  border-radius: 0;
  box-shadow: none;
  background:
    radial-gradient(circle at 50% 24%, #f3e8ff 0 5px, transparent 5.5px),
    radial-gradient(circle at 22% 42%, #f3e8ff 0 4px, transparent 4.5px),
    radial-gradient(circle at 78% 42%, #f3e8ff 0 4px, transparent 4.5px),
    radial-gradient(ellipse at 50% 88%, #f3e8ff 0 9px, transparent 9.5px),
    radial-gradient(ellipse at 21% 91%, #f3e8ff 0 6px, transparent 6.5px),
    radial-gradient(ellipse at 79% 91%, #f3e8ff 0 6px, transparent 6.5px) !important;
}
.mini-heart::before {
  content: "♥" !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  color: #f3e8ff;
  font-size: 25px;
  line-height: 1;
  clip-path: none;
}
.mini-lock::before {
  width: 24px !important;
  height: 18px !important;
  border-radius: 4px;
  margin-top: 8px !important;
}
.mini-lock::after {
  width: 16px;
  height: 14px;
  top: 9px;
  left: 13px;
  border: 4px solid #f3e8ff;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}
.mini-spark::before,
.mini-growth::before {
  width: 27px !important;
  height: 27px !important;
  clip-path: polygon(
    50% 0,
    61% 35%,
    98% 35%,
    68% 56%,
    80% 92%,
    50% 70%,
    20% 92%,
    32% 56%,
    2% 35%,
    39% 35%
  );
}
.mini-bell::before {
  width: 24px !important;
  height: 25px !important;
  clip-path: polygon(
    50% 0,
    75% 13%,
    82% 28%,
    82% 58%,
    100% 78%,
    0 78%,
    18% 58%,
    18% 28%,
    25% 13%
  );
}
.mini-bell::after {
  width: 10px;
  height: 5px;
  left: 18px;
  bottom: 10px;
  border-radius: 0 0 999px 999px;
  background: #f3e8ff;
}
.mini-location::before {
  width: 25px !important;
  height: 29px !important;
  clip-path: polygon(
    50% 100%,
    24% 63%,
    12% 38%,
    16% 18%,
    32% 4%,
    50% 0,
    68% 4%,
    84% 18%,
    88% 38%,
    76% 63%
  );
}
.mini-location::after {
  width: 8px;
  height: 8px;
  top: 17px;
  left: 19px;
  border-radius: 50%;
  background: #5b21b6;
}

/* ===== HELP CENTER PAGE ===== */
.help-page {
  min-height: 100vh;
  background:
    radial-gradient(
      circle at 52% 8%,
      rgba(124, 58, 237, 0.16),
      transparent 30%
    ),
    radial-gradient(
      circle at 88% 26%,
      rgba(236, 72, 153, 0.08),
      transparent 26%
    ),
    #05040b;
  color: var(--text);
}
.help-hero {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  padding: 92px 28px 24px;
}
.help-hero-bg {
  position: absolute;
  inset: 0;
  background: #05040b;
}
.help-hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(5, 4, 12, 0.95) 0%,
      rgba(5, 4, 12, 0.66) 35%,
      rgba(5, 4, 12, 0.46) 62%,
      rgba(5, 4, 12, 0.93) 100%
    ),
    linear-gradient(180deg, rgba(5, 4, 12, 0.14), rgba(5, 4, 12, 0.96)),
    url("assets/about.png") center 24%/100% auto no-repeat;
  filter: brightness(0.6) saturate(0.86) contrast(1.02);
}
.help-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 58% 44%,
      rgba(124, 58, 237, 0.18),
      transparent 34%
    ),
    linear-gradient(180deg, transparent 54%, rgba(5, 4, 12, 0.8));
}
.help-hero-inner {
  position: relative;
  z-index: 2;
  width: min(1450px, 100%);
  min-height: 245px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(390px, 0.82fr) minmax(270px, 0.42fr);
  align-items: center;
  gap: 42px;
}
.help-hero-copy span {
  color: #c084fc;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.help-hero-copy h1 {
  max-width: 570px;
  margin-top: 14px;
  font-family: "Outfit", sans-serif;
  font-size: clamp(2.35rem, 3.1vw, 3.45rem);
  line-height: 1.1;
  color: #fff;
}
.help-hero-copy h1 strong {
  display: block;
  color: #a855f7;
}
.help-hero-copy p {
  max-width: 520px;
  margin-top: 16px;
  color: rgba(240, 236, 250, 0.72);
  font-size: 0.94rem;
  line-height: 1.6;
}
.help-safety-note {
  width: min(460px, 100%);
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 8px;
  background: rgba(12, 10, 24, 0.62);
  color: rgba(240, 236, 250, 0.78);
  font-size: 0.82rem;
}
.help-safety-note::before {
  content: "";
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7c3aed, #4c1d95);
}
.help-quote {
  justify-self: end;
  max-width: 310px;
  margin: 0;
  padding: 16px 0 16px 18px;
  border-left: 1px solid rgba(192, 132, 252, 0.24);
}
.help-quote span {
  display: block;
  color: #c084fc;
  font-family: Georgia, serif;
  font-size: 3rem;
  line-height: 0.7;
  animation: aboutQuotePulse 2.8s ease-in-out infinite;
}
.help-quote p {
  color: rgba(240, 236, 250, 0.84);
  font-size: 1.08rem;
  line-height: 1.45;
  font-style: italic;
}
.help-content {
  width: min(1450px, 100%);
  margin: -8px auto 0;
  padding: 0 28px 34px;
}
.help-layout {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 14px;
}
.help-left,
.help-right {
  display: grid;
  gap: 14px;
}
.help-card {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 8px;
  background: linear-gradient(
    180deg,
    rgba(15, 14, 29, 0.96),
    rgba(8, 7, 18, 0.97)
  );
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.28s,
    box-shadow 0.28s;
}
.help-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 18% 12%,
    rgba(124, 58, 237, 0.12),
    transparent 32%
  );
  pointer-events: none;
}
.help-card::after {
  content: "";
  position: absolute;
  inset: -40% auto auto -25%;
  width: 36%;
  height: 180%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(167, 139, 250, 0.075),
    transparent
  );
  transform: rotate(18deg) translateX(-130%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.help-card.visible {
  animation: panelSettle 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.help-card.visible::after {
  transform: rotate(18deg) translateX(380%);
}
.help-card:hover {
  transform: translateY(-4px);
  border-color: rgba(167, 139, 250, 0.34);
  box-shadow:
    0 18px 46px rgba(60, 22, 112, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.help-card > * {
  position: relative;
  z-index: 2;
}
.help-card h2 {
  color: #fff;
  font-size: 1.1rem;
}
.help-card p {
  color: rgba(240, 236, 250, 0.66);
  font-size: 0.8rem;
  line-height: 1.55;
  margin-top: 8px;
}
.topic-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 18px;
}
.topic-grid button {
  min-height: 132px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  border: 1px solid rgba(167, 139, 250, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.028);
  color: #fff;
  font-family: "Outfit", sans-serif;
  cursor: pointer;
  transition:
    transform 0.24s,
    border-color 0.24s,
    background 0.24s;
}
.topic-grid button:hover {
  transform: translateY(-3px);
  border-color: rgba(167, 139, 250, 0.34);
  background: rgba(124, 58, 237, 0.08);
}
.topic-grid b {
  font-size: 0.82rem;
}
.topic-grid small {
  max-width: 130px;
  color: rgba(240, 236, 250, 0.62);
  font-size: 0.7rem;
  line-height: 1.4;
}
.help-icon,
.support-icon,
.headset-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #f3e8ff;
  background: linear-gradient(
    135deg,
    rgba(124, 58, 237, 0.76),
    rgba(59, 7, 100, 0.8)
  );
  border: 1px solid rgba(167, 139, 250, 0.18);
  box-shadow: 0 0 18px rgba(124, 58, 237, 0.22);
  position: relative;
}
.help-icon::before,
.support-icon::before,
.headset-icon::before {
  content: "";
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: center/contain no-repeat;
  mask: center/contain no-repeat;
}
.icon-use::before,
.icon-shield-help::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3Zm3.7 7.7-4.3 4.3-2.1-2.1-1.4 1.4 3.5 3.5 5.7-5.7-1.4-1.4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3Zm3.7 7.7-4.3 4.3-2.1-2.1-1.4 1.4 3.5 3.5 5.7-5.7-1.4-1.4Z'/%3E%3C/svg%3E");
}
.icon-family::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm8 0a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM8 13c-3 0-6 1.5-6 4.5V20h12v-2.5C14 14.5 11 13 8 13Zm8 0c-.7 0-1.4.1-2 .3 1.2 1 2 2.3 2 4.2V20h6v-2.5c0-3-3-4.5-6-4.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm8 0a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM8 13c-3 0-6 1.5-6 4.5V20h12v-2.5C14 14.5 11 13 8 13Zm8 0c-.7 0-1.4.1-2 .3 1.2 1 2 2.3 2 4.2V20h6v-2.5c0-3-3-4.5-6-4.5Z'/%3E%3C/svg%3E");
}
.icon-privacy::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17 9V7A5 5 0 0 0 7 7v2H5v13h14V9h-2ZM9 7a3 3 0 0 1 6 0v2H9V7Zm4 9.7V19h-2v-2.3a2 2 0 1 1 2 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17 9V7A5 5 0 0 0 7 7v2H5v13h14V9h-2ZM9 7a3 3 0 0 1 6 0v2H9V7Zm4 9.7V19h-2v-2.3a2 2 0 1 1 2 0Z'/%3E%3C/svg%3E");
}
.icon-bell::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22a2.5 2.5 0 0 0 2.4-2h-4.8A2.5 2.5 0 0 0 12 22Zm8-5-2-2v-5a6 6 0 0 0-5-5.9V2h-2v2.1A6 6 0 0 0 6 10v5l-2 2v1h16v-1Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22a2.5 2.5 0 0 0 2.4-2h-4.8A2.5 2.5 0 0 0 12 22Zm8-5-2-2v-5a6 6 0 0 0-5-5.9V2h-2v2.1A6 6 0 0 0 6 10v5l-2 2v1h16v-1Z'/%3E%3C/svg%3E");
}
.icon-tech::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h10c1.1 0 2 .9 2 2v16c0 1.1-.9 2-2 2H7c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2Zm0 3v14h10V5H7Zm4 13h2v2h-2v-2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h10c1.1 0 2 .9 2 2v16c0 1.1-.9 2-2 2H7c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2Zm0 3v14h10V5H7Zm4 13h2v2h-2v-2Z'/%3E%3C/svg%3E");
}
.icon-mail::before,
.support-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2 5h20v14H2V5Zm2 3.2V17h16V8.2l-8 5.3-8-5.3Zm1.1-1.2L12 11.5 18.9 7H5.1Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2 5h20v14H2V5Zm2 3.2V17h16V8.2l-8 5.3-8-5.3Zm1.1-1.2L12 11.5 18.9 7H5.1Z'/%3E%3C/svg%3E");
}
.headset-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a8 8 0 0 0-8 8v5a3 3 0 0 0 3 3h2v-8H6a6 6 0 1 1 12 0h-3v8h2.2c-.5 1.2-1.7 2-3.2 2h-2v2h2c3 0 5.4-2.2 5.9-5A3 3 0 0 0 22 15v-4a8 8 0 0 0-8-8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a8 8 0 0 0-8 8v5a3 3 0 0 0 3 3h2v-8H6a6 6 0 1 1 12 0h-3v8h2.2c-.5 1.2-1.7 2-3.2 2h-2v2h2c3 0 5.4-2.2 5.9-5A3 3 0 0 0 22 15v-4a8 8 0 0 0-8-8Z'/%3E%3C/svg%3E");
}
.icon-spark::before,
.icon-star-help::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 2 3 6.2 6.8 1-4.9 4.8 1.2 6.8-6.1-3.2-6.1 3.2 1.2-6.8-4.9-4.8 6.8-1L12 2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 2 3 6.2 6.8 1-4.9 4.8 1.2 6.8-6.1-3.2-6.1 3.2 1.2-6.8-4.9-4.8 6.8-1L12 2Z'/%3E%3C/svg%3E");
}
.help-button {
  width: min(220px, 100%);
  min-height: 42px;
  display: grid;
  place-items: center;
  margin: 18px auto 0;
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 8px;
  background: linear-gradient(
    135deg,
    rgba(88, 28, 135, 0.72),
    rgba(59, 7, 100, 0.72)
  );
  color: #e9d5ff;
  text-decoration: none;
  font-size: 0.78rem;
  transition:
    transform 0.24s,
    border-color 0.24s;
}
.help-button:hover {
  transform: translateY(-2px);
  border-color: rgba(216, 180, 254, 0.4);
}
.help-button.full {
  width: 100%;
}
.help-lower-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 14px;
}
.split-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}
.split-header a {
  color: #c084fc;
  text-decoration: none;
  font-size: 0.76rem;
}
.faq-list,
.guide-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.faq-list button,
.guide-list button {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(167, 139, 250, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.028);
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-size: 0.78rem;
  text-align: left;
  padding: 0 13px;
}
.faq-list button::after,
.guide-list button::after {
  content: "›";
  color: #c084fc;
  font-size: 1.1rem;
}
.guide-list button {
  justify-content: flex-start;
}
.guide-list .help-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}
.guide-list .help-icon::before {
  width: 16px;
  height: 16px;
}
.support-card header,
.still-help-card header {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 14px;
  align-items: center;
}
.support-icon,
.headset-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
}
.email-panel {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 16px;
  align-items: center;
  margin-top: 20px;
  padding: 18px;
  border: 1px solid rgba(167, 139, 250, 0.26);
  border-radius: 8px;
  background: linear-gradient(
    135deg,
    rgba(88, 28, 135, 0.28),
    rgba(255, 255, 255, 0.028)
  );
}
.email-panel b {
  display: block;
  color: #c084fc;
  font-size: 1rem;
  word-break: break-word;
}
.email-panel small {
  display: block;
  margin-top: 4px;
  color: rgba(240, 236, 250, 0.62);
}
.support-actions {
  display: grid;
  gap: 9px;
  margin-top: 16px;
  list-style: none;
  color: rgba(240, 236, 250, 0.72);
  font-size: 0.78rem;
}
.support-actions li {
  padding-left: 18px;
  position: relative;
}
.support-actions li::before {
  content: "?";
  position: absolute;
  left: 0;
  color: #c084fc;
}
.help-small-heart {
  color: rgba(240, 236, 250, 0.72) !important;
}
.help-small-heart::before {
  content: "♡";
  color: #c084fc;
  margin-right: 8px;
}
.help-footer-strip {
  display: grid;
  grid-template-columns: 110px 1.25fr repeat(4, 1fr);
  align-items: center;
  gap: 0;
  margin-top: 14px;
  padding: 18px 22px;
  border: 1px solid rgba(124, 58, 237, 0.26);
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    rgba(68, 25, 126, 0.32),
    rgba(10, 9, 22, 0.96) 34%,
    rgba(10, 9, 22, 0.92)
  );
  box-shadow:
    0 14px 44px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.help-footer-strip > div {
  min-height: 74px;
  display: grid;
  align-content: center;
  padding: 0 18px;
  border-left: 1px solid rgba(167, 139, 250, 0.14);
}
.help-footer-strip > div:first-child,
.help-footer-strip > div:nth-child(2) {
  border-left: 0;
}
.help-footer-strip h2 {
  color: #c084fc;
  font-size: 1.22rem;
}
.help-footer-strip p,
.help-footer-strip small {
  color: rgba(240, 236, 250, 0.66);
  font-size: 0.72rem;
  line-height: 1.45;
}
.help-footer-strip b {
  color: #d8b4fe;
  font-size: 0.76rem;
}
.help-heart {
  width: 90px;
  height: 78px;
  margin: auto;
  background: radial-gradient(
    circle at center,
    #a855f7 0 28%,
    rgba(168, 85, 247, 0.12) 29% 62%,
    transparent 63%
  );
  clip-path: polygon(
    50% 0,
    86% 10%,
    100% 42%,
    75% 100%,
    50% 72%,
    25% 100%,
    0 42%,
    14% 10%
  );
  filter: drop-shadow(0 0 22px rgba(168, 85, 247, 0.38));
  animation: aboutHeartFloat 4.2s ease-in-out infinite;
}
.help-card.visible .help-icon,
.help-card.visible .support-icon,
.help-card.visible .headset-icon,
.help-footer-strip.visible .help-icon {
  animation: aboutIconPop 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.help-footer-strip.visible > * {
  animation: softRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (max-width: 1220px) {
  .help-hero {
    padding: 86px 22px 24px;
  }
  .help-hero-bg::before {
    background:
      linear-gradient(180deg, rgba(5, 4, 12, 0.58), rgba(5, 4, 12, 0.96)),
      url("assets/about.png") center top/auto 100% no-repeat;
  }
  .help-hero-inner,
  .help-layout {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .help-hero-copy h1,
  .help-hero-copy p,
  .help-safety-note {
    margin-left: auto;
    margin-right: auto;
  }
  .help-quote {
    justify-self: center;
    border-left: 0;
    padding: 0;
  }
  .topic-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .help-footer-strip {
    grid-template-columns: 1fr 1fr;
  }
  .help-footer-strip > div {
    border-left: 0;
    border-top: 1px solid rgba(167, 139, 250, 0.14);
    text-align: center;
    justify-items: center;
  }
  .help-footer-strip > div:first-child,
  .help-footer-strip > div:nth-child(2) {
    border-top: 0;
  }
}
@media (max-width: 720px) {
  .help-hero {
    padding: 76px 14px 22px;
  }
  .help-hero-bg::before {
    background:
      linear-gradient(
        180deg,
        rgba(5, 4, 12, 0.52) 0%,
        rgba(5, 4, 12, 0.84) 42%,
        rgba(5, 4, 12, 0.98) 100%
      ),
      url("assets/about.png") center top/auto 58% no-repeat;
    filter: brightness(0.55) saturate(0.86);
  }
  .help-hero-inner {
    min-height: 420px;
    align-content: end;
  }
  .help-hero-copy h1 {
    font-size: clamp(2rem, 9vw, 2.5rem);
  }
  .help-hero-copy p {
    font-size: 0.84rem;
  }
  .help-quote {
    display: none;
  }
  .help-content {
    padding: 0 14px 24px;
  }
  .help-card {
    padding: 18px;
  }
  .topic-grid,
  .help-lower-grid {
    grid-template-columns: 1fr;
  }
  .topic-grid button {
    min-height: 110px;
  }
  .support-card header,
  .still-help-card header,
  .email-panel {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .faq-list button,
  .guide-list button {
    min-height: 46px;
  }
  .help-footer-strip {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .help-footer-strip > div:nth-child(2) {
    border-top: 1px solid rgba(167, 139, 250, 0.14);
  }
}

/* Help Center interactions */
.faq-list details {
  overflow: hidden;
  min-height: 42px;
  border: 1px solid rgba(167, 139, 250, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.028);
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-size: 0.78rem;
  text-align: left;
  transition:
    border-color 0.24s,
    background 0.24s;
}
.faq-list details[open] {
  border-color: rgba(167, 139, 250, 0.32);
  background: rgba(124, 58, 237, 0.08);
}
.faq-list summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 13px;
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary::after {
  content: "›";
  color: #c084fc;
  font-size: 1.1rem;
  transition: transform 0.24s;
}
.faq-list details[open] summary::after {
  transform: rotate(90deg);
}
.faq-list details p {
  margin: 0;
  padding: 0 13px 13px;
  color: rgba(240, 236, 250, 0.66);
  font-size: 0.74rem;
  line-height: 1.5;
}
@media (max-width: 720px) {
  .faq-list summary {
    min-height: 46px;
  }
}

/* Help Center final responsive + hero image update */
.help-page{
  overflow-x:hidden;
}
.help-hero-bg::before{
  background:
    linear-gradient(90deg,rgba(5,4,12,.96) 0%,rgba(5,4,12,.78) 32%,rgba(5,4,12,.36) 58%,rgba(5,4,12,.9) 100%),
    linear-gradient(180deg,rgba(5,4,12,.1),rgba(5,4,12,.96)),
    url("assets/tool.png") center top/100% auto no-repeat;
  filter:brightness(.62) saturate(.94) contrast(1.02);
}
.help-hero{
  min-height:390px;
}
.help-hero-inner{
  grid-template-columns:minmax(320px,.82fr) minmax(260px,.42fr);
}
.help-content,
.help-hero-inner{
  max-width:1450px;
}
.topic-grid button,
.faq-list details,
.guide-list button,
.email-panel,
.help-footer-strip > div{
  min-width:0;
}
.faq-list summary::after{
  content:"\203A";
}

@media(max-width:1180px){
  .help-hero{
    min-height:auto;
    padding:86px 22px 28px;
  }
  .help-hero-bg::before{
    background:
      linear-gradient(180deg,rgba(5,4,12,.6) 0%,rgba(5,4,12,.96) 90%),
      url("assets/tool.png") center top/auto 100% no-repeat;
    filter:brightness(.56) saturate(.9);
  }
  .help-hero-inner,
  .help-layout{
    grid-template-columns:1fr;
    text-align:center;
  }
  .help-hero-inner{
    min-height:330px;
    gap:16px;
  }
  .help-hero-copy h1,
  .help-hero-copy p,
  .help-safety-note{
    margin-left:auto;
    margin-right:auto;
  }
  .help-quote{
    justify-self:center;
    max-width:560px;
    padding:0;
    border-left:0;
  }
  .topic-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .help-lower-grid{
    grid-template-columns:1fr 1fr;
  }
  .help-footer-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .help-footer-strip > div{
    border-left:0;
    border-top:1px solid rgba(167,139,250,.14);
    text-align:center;
    justify-items:center;
  }
  .help-footer-strip > div:first-child,
  .help-footer-strip > div:nth-child(2){
    border-top:0;
  }
}

@media(max-width:820px){
  .help-content{
    padding:0 18px 28px;
  }
  .topic-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .help-lower-grid{
    grid-template-columns:1fr;
  }
  .support-card header,
  .still-help-card header{
    grid-template-columns:54px minmax(0,1fr);
  }
  .email-panel{
    grid-template-columns:46px minmax(0,1fr);
  }
  .email-panel b{
    font-size:.88rem;
  }
}

@media(max-width:560px){
  .help-hero{
    padding:76px 14px 22px;
  }
  .help-hero-bg::before{
    background:
      linear-gradient(180deg,rgba(5,4,12,.5) 0%,rgba(5,4,12,.84) 45%,rgba(5,4,12,.98) 100%),
      url("assets/tool.png") center top/auto 58% no-repeat;
    filter:brightness(.52) saturate(.88);
  }
  .help-hero-inner{
    min-height:420px;
    align-content:end;
    gap:12px;
  }
  .help-hero-copy span{
    font-size:.68rem;
  }
  .help-hero-copy h1{
    font-size:clamp(1.9rem,9vw,2.35rem);
    line-height:1.1;
  }
  .help-hero-copy p{
    font-size:.82rem;
  }
  .help-safety-note{
    align-items:flex-start;
    padding:12px 13px;
    font-size:.74rem;
    text-align:left;
  }
  .help-safety-note::before{
    flex-basis:34px;
    width:34px;
    height:34px;
    border-radius:10px;
  }
  .help-quote{
    display:none;
  }
  .help-content{
    padding:0 14px 24px;
  }
  .help-card{
    padding:16px;
  }
  .topic-grid{
    grid-template-columns:1fr;
  }
  .topic-grid button{
    min-height:104px;
  }
  .split-header{
    align-items:flex-start;
    flex-direction:column;
  }
  .support-card header,
  .still-help-card header,
  .email-panel{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
  }
  .support-actions{
    text-align:left;
  }
  .help-button{
    width:100%;
  }
  .faq-list summary,
  .guide-list button{
    min-height:46px;
  }
  .faq-list details p{
    font-size:.72rem;
  }
  .help-footer-strip{
    grid-template-columns:1fr;
    padding:16px;
  }
  .help-footer-strip > div,
  .help-footer-strip > div:nth-child(2){
    border-left:0;
    border-top:1px solid rgba(167,139,250,.14);
  }
  .help-footer-strip > div:first-child{
    border-top:0;
  }
}

@media(max-width:380px){
  .help-hero-inner{
    min-height:440px;
  }
  .help-hero-copy h1{
    font-size:1.78rem;
  }
  .help-card{
    padding:14px;
  }
  .help-icon,
  .support-icon,
  .headset-icon{
    width:40px;
    height:40px;
    border-radius:12px;
  }
  .help-icon::before,
  .support-icon::before,
  .headset-icon::before{
    width:21px;
    height:21px;
  }
}
/* ===== SITE FOOTER ===== */
.site-footer {
  position: relative;
  overflow: hidden;
  padding: 70px clamp(18px, 5vw, 64px) 34px;
  border-top: 1px solid rgba(167, 139, 250, 0.12);
  background:
    radial-gradient(circle at 12% 20%, rgba(124, 58, 237, 0.12), transparent 30%),
    radial-gradient(circle at 86% 30%, rgba(236, 72, 153, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(6, 5, 13, 0.98), #05040b 78%);
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.08), transparent),
    linear-gradient(rgba(167, 139, 250, 0.025) 1px, transparent 1px);
  background-size: 100% 100%, 100% 44px;
  pointer-events: none;
}
.site-footer-inner {
  position: relative;
  z-index: 1;
  max-width: 1480px;
  margin: 0 auto;
}
.footer-main {
  display: grid;
  grid-template-columns: minmax(260px, 1.45fr) repeat(3, minmax(150px, 0.65fr));
  gap: clamp(32px, 6vw, 110px);
  align-items: start;
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.45rem;
  font-weight: 700;
}
.footer-logo img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(124, 58, 237, 0.42));
}
.footer-brand p {
  max-width: 360px;
  margin-top: 18px;
  color: rgba(240, 236, 250, 0.58);
  font-size: 0.95rem;
  line-height: 1.7;
}
.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.social-link {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease;
}
.social-link:hover {
  transform: translateY(-4px);
  filter: saturate(1.16);
  box-shadow: 0 16px 34px rgba(124, 58, 237, 0.24);
}
.social-link::before {
  font-family: "Outfit", sans-serif;
  line-height: 1;
}
.facebook {
  background: linear-gradient(135deg, #1877f2, #164aaf);
}
.facebook::before {
  content: "f";
  font-size: 1.35rem;
}
.instagram {
  background: radial-gradient(circle at 30% 110%, #fdf497 0 16%, #fd5949 38%, #d6249f 62%, #285aeb 100%);
}
.instagram::before {
  content: "IG";
}
.youtube {
  background: linear-gradient(135deg, #ff0033, #c6001e);
}
.youtube::before {
  content: "YT";
}
.linkedin {
  background: linear-gradient(135deg, #0a66c2, #07457f);
}
.linkedin::before {
  content: "in";
  font-size: 1rem;
}
.social-link::before {
  content: "";
  width: 19px;
  height: 19px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.facebook::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 8h3V4h-3c-3.1 0-5 1.9-5 5v3H6v4h3v8h4v-8h3.2l.8-4h-4V9c0-.7.3-1 1-1Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 8h3V4h-3c-3.1 0-5 1.9-5 5v3H6v4h3v8h4v-8h3.2l.8-4h-4V9c0-.7.3-1 1-1Z'/%3E%3C/svg%3E");
}
.instagram::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7Zm5 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Zm0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm5.2-3.2a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7Zm5 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Zm0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm5.2-3.2a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z'/%3E%3C/svg%3E");
}
.youtube::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.6 7.2s-.2-1.6-.9-2.3c-.9-.9-1.9-.9-2.4-1C15 3.6 12 3.6 12 3.6s-3 0-6.3.3c-.5.1-1.5.1-2.4 1-.7.7-.9 2.3-.9 2.3S2 9.1 2 11v1.8c0 1.9.4 3.8.4 3.8s.2 1.6.9 2.3c.9.9 2.1.9 2.6 1 1.9.2 6.1.3 6.1.3s3 0 6.3-.3c.5-.1 1.5-.1 2.4-1 .7-.7.9-2.3.9-2.3s.4-1.9.4-3.8V11c0-1.9-.4-3.8-.4-3.8ZM10 15.2V8.7l5.7 3.2-5.7 3.3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.6 7.2s-.2-1.6-.9-2.3c-.9-.9-1.9-.9-2.4-1C15 3.6 12 3.6 12 3.6s-3 0-6.3.3c-.5.1-1.5.1-2.4 1-.7.7-.9 2.3-.9 2.3S2 9.1 2 11v1.8c0 1.9.4 3.8.4 3.8s.2 1.6.9 2.3c.9.9 2.1.9 2.6 1 1.9.2 6.1.3 6.1.3s3 0 6.3-.3c.5-.1 1.5-.1 2.4-1 .7-.7.9-2.3.9-2.3s.4-1.9.4-3.8V11c0-1.9-.4-3.8-.4-3.8ZM10 15.2V8.7l5.7 3.2-5.7 3.3Z'/%3E%3C/svg%3E");
}
.linkedin::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3 9h4v12H3V9Zm7 0h3.8v1.7h.1c.5-1 1.9-2 3.9-2 4.1 0 4.9 2.7 4.9 6.2V21h-4v-5.4c0-1.3 0-3-1.9-3s-2.1 1.4-2.1 2.9V21h-4V9Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3 9h4v12H3V9Zm7 0h3.8v1.7h.1c.5-1 1.9-2 3.9-2 4.1 0 4.9 2.7 4.9 6.2V21h-4v-5.4c0-1.3 0-3-1.9-3s-2.1 1.4-2.1 2.9V21h-4V9Z'/%3E%3C/svg%3E");
}
.social-link::before {
  background: #fff;
}
.facebook::before {
  width: 15px;
  height: 24px;
}
.instagram::before {
  width: 22px;
  height: 22px;
}
.youtube::before {
  width: 25px;
  height: 18px;
}
.linkedin::before {
  width: 22px;
  height: 22px;
}
.footer-col {
  display: grid;
  gap: 12px;
}
.footer-col h3 {
  margin-bottom: 10px;
  color: rgba(240, 236, 250, 0.44);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.footer-col a {
  width: max-content;
  max-width: 100%;
  color: rgba(240, 236, 250, 0.6);
  text-decoration: none;
  font-size: 0.95rem;
  transition:
    color 0.22s ease,
    transform 0.22s ease;
}
.footer-col a:hover {
  color: #c084fc;
  transform: translateX(4px);
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 62px;
  padding-top: 28px;
  border-top: 1px solid rgba(167, 139, 250, 0.12);
  color: rgba(240, 236, 250, 0.34);
  font-size: 0.88rem;
}
.footer-bottom span:last-child {
  color: rgba(240, 236, 250, 0.42);
}
.feature-site-footer {
  background:
    radial-gradient(circle at 18% 18%, rgba(236, 72, 153, 0.11), transparent 30%),
    radial-gradient(circle at 78% 26%, rgba(14, 165, 233, 0.09), transparent 28%),
    linear-gradient(180deg, rgba(6, 5, 13, 0.98), #05040b 78%);
}
.journey-site-footer {
  background:
    radial-gradient(circle at 20% 20%, rgba(124, 58, 237, 0.13), transparent 32%),
    linear-gradient(115deg, rgba(7, 6, 15, 0.98), rgba(15, 23, 42, 0.96));
}
.tools-site-footer {
  background:
    radial-gradient(circle at 15% 24%, rgba(34, 211, 238, 0.08), transparent 28%),
    radial-gradient(circle at 85% 18%, rgba(168, 85, 247, 0.13), transparent 30%),
    #05040b;
}
.about-site-footer {
  background:
    radial-gradient(circle at 14% 18%, rgba(192, 132, 252, 0.13), transparent 30%),
    radial-gradient(circle at 78% 70%, rgba(236, 72, 153, 0.07), transparent 28%),
    linear-gradient(180deg, #07060f, #05040b);
}
.support-site-footer {
  background:
    radial-gradient(circle at 18% 22%, rgba(96, 165, 250, 0.09), transparent 28%),
    radial-gradient(circle at 82% 16%, rgba(124, 58, 237, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(6, 5, 13, 0.98), #05040b 78%);
}
.feature-site-footer .footer-col h3,
.feature-site-footer .footer-col a:hover {
  color: #f0abfc;
}
.journey-site-footer .footer-col h3,
.journey-site-footer .footer-col a:hover {
  color: #a78bfa;
}
.tools-site-footer .footer-col h3,
.tools-site-footer .footer-col a:hover {
  color: #67e8f9;
}
.about-site-footer .footer-col h3,
.about-site-footer .footer-col a:hover {
  color: #d8b4fe;
}
.support-site-footer .footer-col h3,
.support-site-footer .footer-col a:hover {
  color: #93c5fd;
}

.home-symbol {
  width: 22px;
  height: 22px;
  display: block;
  background: currentColor;
  color: inherit;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.ico .home-symbol,
.tb-ico .home-symbol,
.pc-ico .home-symbol {
  width: 24px;
  height: 24px;
}
.tb-f-ico .home-symbol {
  width: 15px;
  height: 15px;
}
.hs-shield {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3Zm3.7 7.7-4.3 4.3-2.1-2.1-1.4 1.4 3.5 3.5 5.7-5.7-1.4-1.4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3Zm3.7 7.7-4.3 4.3-2.1-2.1-1.4 1.4 3.5 3.5 5.7-5.7-1.4-1.4Z'/%3E%3C/svg%3E");
}
.hs-bolt {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 3 14h7l-1 8 10-12h-7l1-8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 3 14h7l-1 8 10-12h-7l1-8Z'/%3E%3C/svg%3E");
}
.hs-location {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5Z'/%3E%3C/svg%3E");
}
.hs-mic {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 14c1.7 0 3-1.3 3-3V5c0-1.7-1.3-3-3-3S9 3.3 9 5v6c0 1.7 1.3 3 3 3Zm5-3c0 2.8-2.2 5-5 5s-5-2.2-5-5H5c0 3.5 2.6 6.4 6 6.9V21H8v2h8v-2h-3v-3.1c3.4-.5 6-3.4 6-6.9h-2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 14c1.7 0 3-1.3 3-3V5c0-1.7-1.3-3-3-3S9 3.3 9 5v6c0 1.7 1.3 3 3 3Zm5-3c0 2.8-2.2 5-5 5s-5-2.2-5-5H5c0 3.5 2.6 6.4 6 6.9V21H8v2h8v-2h-3v-3.1c3.4-.5 6-3.4 6-6.9h-2Z'/%3E%3C/svg%3E");
}
.hs-users {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm8 0a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM8 13c-3 0-6 1.5-6 4.5V20h12v-2.5C14 14.5 11 13 8 13Zm8 0c-.7 0-1.4.1-2 .3 1.2 1 2 2.3 2 4.2V20h6v-2.5c0-3-3-4.5-6-4.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm8 0a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM8 13c-3 0-6 1.5-6 4.5V20h12v-2.5C14 14.5 11 13 8 13Zm8 0c-.7 0-1.4.1-2 .3 1.2 1 2 2.3 2 4.2V20h6v-2.5c0-3-3-4.5-6-4.5Z'/%3E%3C/svg%3E");
}
.hs-bell {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22a2.5 2.5 0 0 0 2.4-2h-4.8A2.5 2.5 0 0 0 12 22Zm8-5-2-2v-5a6 6 0 0 0-5-5.9V2h-2v2.1A6 6 0 0 0 6 10v5l-2 2v1h16v-1Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22a2.5 2.5 0 0 0 2.4-2h-4.8A2.5 2.5 0 0 0 12 22Zm8-5-2-2v-5a6 6 0 0 0-5-5.9V2h-2v2.1A6 6 0 0 0 6 10v5l-2 2v1h16v-1Z'/%3E%3C/svg%3E");
}
.hs-lock {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17 9V7A5 5 0 0 0 7 7v2H5v13h14V9h-2ZM9 7a3 3 0 0 1 6 0v2H9V7Zm4 9.7V19h-2v-2.3a2 2 0 1 1 2 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17 9V7A5 5 0 0 0 7 7v2H5v13h14V9h-2ZM9 7a3 3 0 0 1 6 0v2H9V7Zm4 9.7V19h-2v-2.3a2 2 0 1 1 2 0Z'/%3E%3C/svg%3E");
}
.hs-star {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 2 3 6.2 6.8 1-4.9 4.8 1.2 6.8-6.1-3.2-6.1 3.2 1.2-6.8-4.9-4.8 6.8-1L12 2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 2 3 6.2 6.8 1-4.9 4.8 1.2 6.8-6.1-3.2-6.1 3.2 1.2-6.8-4.9-4.8 6.8-1L12 2Z'/%3E%3C/svg%3E");
}
.hs-chat {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16c1.1 0 2 .9 2 2v9c0 1.1-.9 2-2 2H9l-5 5v-5c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2Zm3 5v2h10V9H7Zm0 4v2h7v-2H7Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16c1.1 0 2 .9 2 2v9c0 1.1-.9 2-2 2H9l-5 5v-5c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2Zm3 5v2h10V9H7Zm0 4v2h7v-2H7Z'/%3E%3C/svg%3E");
}
.hs-flask {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 2h6v2h-1v5.2l5.7 8.6A2.7 2.7 0 0 1 17.4 22H6.6a2.7 2.7 0 0 1-2.3-4.2L10 9.2V4H9V2Zm3 8.1-3 4.5h6l-3-4.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 2h6v2h-1v5.2l5.7 8.6A2.7 2.7 0 0 1 17.4 22H6.6a2.7 2.7 0 0 1-2.3-4.2L10 9.2V4H9V2Zm3 8.1-3 4.5h6l-3-4.5Z'/%3E%3C/svg%3E");
}
.hs-heart-hand {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 21s-7-4.4-9.2-8.1C1 9.8 2.7 6 6.2 6c2 0 3.2 1 3.8 2 .6-1 1.8-2 3.8-2 3.5 0 5.2 3.8 3.4 6.9C15 16.6 12 21 12 21Zm7-5h3v2h-3v3h-2v-3h-3v-2h3v-3h2v3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 21s-7-4.4-9.2-8.1C1 9.8 2.7 6 6.2 6c2 0 3.2 1 3.8 2 .6-1 1.8-2 3.8-2 3.5 0 5.2 3.8 3.4 6.9C15 16.6 12 21 12 21Zm7-5h3v2h-3v3h-2v-3h-3v-2h3v-3h2v3Z'/%3E%3C/svg%3E");
}
.hs-volume {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 9v6h4l5 4V5L7 9H3Zm13.5-3.5-1.4 1.4A7 7 0 0 1 17 12a7 7 0 0 1-1.9 5.1l1.4 1.4A9 9 0 0 0 19 12a9 9 0 0 0-2.5-6.5Zm3-3-1.4 1.4A11 11 0 0 1 21 12a11 11 0 0 1-2.9 8.1l1.4 1.4A13 13 0 0 0 23 12a13 13 0 0 0-3.5-9.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 9v6h4l5 4V5L7 9H3Zm13.5-3.5-1.4 1.4A7 7 0 0 1 17 12a7 7 0 0 1-1.9 5.1l1.4 1.4A9 9 0 0 0 19 12a9 9 0 0 0-2.5-6.5Zm3-3-1.4 1.4A11 11 0 0 1 21 12a11 11 0 0 1-2.9 8.1l1.4 1.4A13 13 0 0 0 23 12a13 13 0 0 0-3.5-9.5Z'/%3E%3C/svg%3E");
}
.hs-drop {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2s7 7.1 7 12a7 7 0 0 1-14 0c0-4.9 7-12 7-12Zm-3 12a3 3 0 0 0 6 0h-2a1 1 0 0 1-2 0H9Zm9.5 6.5 1.4-1.4 2.1 2.1-1.4 1.4-2.1-2.1ZM2 21.2l2.1-2.1 1.4 1.4-2.1 2.1L2 21.2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2s7 7.1 7 12a7 7 0 0 1-14 0c0-4.9 7-12 7-12Zm-3 12a3 3 0 0 0 6 0h-2a1 1 0 0 1-2 0H9Zm9.5 6.5 1.4-1.4 2.1 2.1-1.4 1.4-2.1-2.1ZM2 21.2l2.1-2.1 1.4 1.4-2.1 2.1L2 21.2Z'/%3E%3C/svg%3E");
}

/* ===== EMERGENCY TRIGGER FEATURE ADDITIONS ===== */
.feature-icon.volume-icon,
.feature-icon.drop-icon {
  font-size: 0;
  background: linear-gradient(135deg, #3b0764, #9333ea 52%, #ec4899);
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.26);
}
.feature-icon.volume-icon::before,
.feature-icon.drop-icon::before {
  content: "";
  width: 29px;
  height: 29px;
  background: #fff;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.feature-icon.volume-icon::before,
.icon-volume::before,
.volume-trigger .trigger-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 9v6h4l5 4V5L7 9H3Zm13.5-3.5-1.4 1.4A7 7 0 0 1 17 12a7 7 0 0 1-1.9 5.1l1.4 1.4A9 9 0 0 0 19 12a9 9 0 0 0-2.5-6.5Zm3-3-1.4 1.4A11 11 0 0 1 21 12a11 11 0 0 1-2.9 8.1l1.4 1.4A13 13 0 0 0 23 12a13 13 0 0 0-3.5-9.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 9v6h4l5 4V5L7 9H3Zm13.5-3.5-1.4 1.4A7 7 0 0 1 17 12a7 7 0 0 1-1.9 5.1l1.4 1.4A9 9 0 0 0 19 12a9 9 0 0 0-2.5-6.5Zm3-3-1.4 1.4A11 11 0 0 1 21 12a11 11 0 0 1-2.9 8.1l1.4 1.4A13 13 0 0 0 23 12a13 13 0 0 0-3.5-9.5Z'/%3E%3C/svg%3E");
}
.feature-icon.drop-icon::before,
.icon-impact::before,
.impact-trigger .trigger-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2s7 7.1 7 12a7 7 0 0 1-14 0c0-4.9 7-12 7-12Zm-3 12a3 3 0 0 0 6 0h-2a1 1 0 0 1-2 0H9Zm9.5 6.5 1.4-1.4 2.1 2.1-1.4 1.4-2.1-2.1ZM2 21.2l2.1-2.1 1.4 1.4-2.1 2.1L2 21.2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2s7 7.1 7 12a7 7 0 0 1-14 0c0-4.9 7-12 7-12Zm-3 12a3 3 0 0 0 6 0h-2a1 1 0 0 1-2 0H9Zm9.5 6.5 1.4-1.4 2.1 2.1-1.4 1.4-2.1-2.1ZM2 21.2l2.1-2.1 1.4 1.4-2.1 2.1L2 21.2Z'/%3E%3C/svg%3E");
}
.volume-feature .feature-body,
.drop-feature .feature-body {
  padding-right: 142px;
}
.volume-press-demo,
.impact-detector {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  width: 124px;
  height: 108px;
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    rgba(9, 8, 19, 0.72);
}
.volume-press-demo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 8px;
  padding: 18px 16px 34px;
}
.volume-press-demo span {
  height: 46px;
  border-radius: 999px;
  background: linear-gradient(180deg, #c084fc, #7c3aed);
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.3);
  animation: volumePress 1.8s ease-in-out infinite;
}
.volume-press-demo span:nth-child(2) {
  animation-delay: 0.18s;
}
.volume-press-demo span:nth-child(3) {
  animation-delay: 0.36s;
}
.volume-press-demo b {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  color: #f0abfc;
  font-size: 0.76rem;
  text-align: center;
}
.impact-detector {
  display: grid;
  place-items: center;
}
.impact-detector span {
  position: absolute;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(248, 113, 113, 0.7);
  border-radius: 50%;
  animation: impactPulse 1.9s ease-out infinite;
}
.impact-detector span:nth-child(2) {
  animation-delay: 0.28s;
}
.impact-detector span:nth-child(3) {
  animation-delay: 0.56s;
}
.impact-detector b {
  width: 24px;
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(180deg, #111827, #030712);
  border: 2px solid rgba(248, 113, 113, 0.55);
  transform: rotate(-22deg);
  box-shadow: 0 0 22px rgba(248, 113, 113, 0.24);
}
.trigger-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.trigger-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  min-height: 104px;
  padding: 14px;
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 10px;
  background:
    radial-gradient(circle at 10% 12%, rgba(168, 85, 247, 0.12), transparent 42%),
    rgba(255, 255, 255, 0.026);
}
.trigger-icon {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.84), rgba(236, 72, 153, 0.52));
  box-shadow: 0 0 22px rgba(124, 58, 237, 0.22);
}
.trigger-icon::before {
  content: "";
  position: absolute;
  inset: 11px;
  background: #fff;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.trigger-card h3 {
  margin: 0 0 5px;
  color: #fff;
  font-size: 0.86rem;
}
.trigger-card p {
  margin: 0;
  color: rgba(240, 236, 250, 0.62);
  font-size: 0.72rem;
  line-height: 1.45;
}
.icon-volume::before,
.icon-impact::before {
  inset: 0;
  width: 25px;
  height: 25px;
  margin: auto;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.volume-tool-demo,
.impact-tool-demo {
  position: relative;
  z-index: 2;
  min-height: 78px;
  margin-top: 4px;
  padding: 14px;
  border: 1px solid rgba(167, 139, 250, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.032);
}
.volume-tool-demo {
  display: grid;
  grid-template-columns: repeat(3, 20px) 1fr;
  gap: 8px;
  align-items: center;
}
.volume-tool-demo span {
  height: 42px;
  border-radius: 999px;
  background: linear-gradient(180deg, #c084fc, #6d28d9);
  animation: volumePress 1.8s ease-in-out infinite;
}
.volume-tool-demo span:nth-child(2) {
  animation-delay: 0.18s;
}
.volume-tool-demo span:nth-child(3) {
  animation-delay: 0.36s;
}
.volume-tool-demo b,
.impact-tool-demo b {
  color: rgba(240, 236, 250, 0.76);
  font-size: 0.72rem;
}
.impact-tool-demo {
  display: grid;
  place-items: center;
}
.impact-tool-demo span {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(248, 113, 113, 0.62);
  border-radius: 50%;
  animation: impactPulse 1.9s ease-out infinite;
}
.impact-tool-demo span:nth-child(2) {
  animation-delay: 0.28s;
}
.impact-tool-demo span:nth-child(3) {
  animation-delay: 0.56s;
}
.impact-tool-demo b {
  position: relative;
  z-index: 1;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.14);
  color: #fecaca;
}
@keyframes volumePress {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.7;
  }
  45% {
    transform: translateY(10px);
    opacity: 1;
  }
}
@keyframes impactPulse {
  from {
    transform: scale(0.45);
    opacity: 0.95;
  }
  to {
    transform: scale(2.45);
    opacity: 0;
  }
}
@media (max-width: 720px) {
  .volume-feature .feature-body,
  .drop-feature .feature-body {
    padding-right: 0;
  }
  .volume-press-demo,
  .impact-detector {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 210px;
    margin-top: 8px;
  }
  .trigger-grid {
    grid-template-columns: 1fr;
  }
  .trigger-card {
    grid-template-columns: 44px minmax(0, 1fr);
  }
}

@media (max-width: 980px) {
  .site-footer {
    padding-top: 54px;
  }
  .footer-main {
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: 34px;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 640px) {
  .site-footer {
    padding: 46px 18px 28px;
  }
  .footer-main {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .footer-brand p {
    max-width: none;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 38px;
    font-size: 0.82rem;
  }
}

/* ===== DOWNLOAD MODAL ===== */
body.modal-open {
  overflow: hidden;
}
.download-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.download-modal.open {
  pointer-events: auto;
  opacity: 1;
}
.download-modal__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(124, 58, 237, 0.25), transparent 34%),
    rgba(4, 3, 10, 0.78);
  backdrop-filter: blur(18px) saturate(1.35);
}
.download-modal__card {
  position: relative;
  width: min(100%, 480px);
  overflow: hidden;
  padding: 30px;
  border: 1px solid rgba(192, 132, 252, 0.34);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(18, 15, 32, 0.98), rgba(8, 7, 18, 0.98)),
    radial-gradient(circle at 20% 12%, rgba(236, 72, 153, 0.18), transparent 30%);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.52),
    0 0 52px rgba(124, 58, 237, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateY(22px) scale(0.96);
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.32s ease;
}
.download-modal.open .download-modal__card {
  transform: translateY(0) scale(1);
}
.download-modal__glow {
  position: absolute;
  inset: -35% -25% auto auto;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.26), transparent 64%);
  pointer-events: none;
  animation: modalGlowDrift 5.6s ease-in-out infinite alternate;
}
.download-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  transition:
    transform 0.22s ease,
    background 0.22s ease,
    color 0.22s ease;
}
.download-modal__close::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m6.4 5 5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m6.4 5 5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.download-modal__close:hover {
  transform: rotate(90deg);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.download-modal__icon {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.32), rgba(236, 72, 153, 0.18)),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(192, 132, 252, 0.24);
  box-shadow: 0 0 32px rgba(124, 58, 237, 0.28);
}
.download-modal__icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.download-modal__eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: #c084fc;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.download-modal__card h2 {
  max-width: 390px;
  margin: 0;
  color: #fff;
  font-size: clamp(1.75rem, 5vw, 2.45rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0;
}
.download-modal__card > p {
  margin: 16px 0 0;
  color: rgba(240, 236, 250, 0.74);
  font-size: 0.98rem;
  line-height: 1.65;
}
.download-modal__note {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  margin-top: 22px;
  padding: 14px;
  border: 1px solid rgba(167, 139, 250, 0.16);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.035);
}
.download-modal__note span {
  width: 36px;
  height: 36px;
  display: block;
  border-radius: 12px;
  background: linear-gradient(135deg, #6d28d9, #ec4899);
  position: relative;
}
.download-modal__note span::before {
  content: "";
  position: absolute;
  inset: 9px;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 21s-7-4.4-9.2-8.1C1 9.8 2.7 6 6.2 6c2 0 3.2 1 3.8 2 .6-1 1.8-2 3.8-2 3.5 0 5.2 3.8 3.4 6.9C15 16.6 12 21 12 21Zm7-5h3v2h-3v3h-2v-3h-3v-2h3v-3h2v3Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 21s-7-4.4-9.2-8.1C1 9.8 2.7 6 6.2 6c2 0 3.2 1 3.8 2 .6-1 1.8-2 3.8-2 3.5 0 5.2 3.8 3.4 6.9C15 16.6 12 21 12 21Zm7-5h3v2h-3v3h-2v-3h-3v-2h3v-3h2v3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.download-modal__note p {
  margin: 0;
  color: rgba(240, 236, 250, 0.7);
  font-size: 0.82rem;
  line-height: 1.45;
}
.download-modal__progress {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
}
.download-modal__progress[hidden] {
  display: none;
}
.download-modal__progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #fff;
  font-size: 0.84rem;
}
.download-modal__progress-track {
  height: 8px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}
.download-modal__progress-bar {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(135deg, #6d28d9, #ec4899);
  transition: width 0.18s ease;
}
.download-modal__progress p {
  margin: 9px 0 0;
  color: rgba(240, 236, 250, 0.66);
  font-size: 0.78rem;
  line-height: 1.35;
}
.download-modal__actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  margin-top: 24px;
}
.download-modal__download,
.download-modal__later {
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  font-family: "Outfit", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}
.download-modal__download {
  color: #fff;
  background: linear-gradient(135deg, #6d28d9, #ec4899);
  box-shadow: 0 14px 34px rgba(124, 58, 237, 0.28);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}
.download-modal__download:disabled {
  cursor: wait;
  opacity: 0.75;
}
.download-modal__download:hover,
.download-modal__download:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(236, 72, 153, 0.28);
}
.download-modal__later {
  padding: 0 18px;
  color: rgba(240, 236, 250, 0.64);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.download-modal__later:hover,
.download-modal__later:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.085);
}
@keyframes modalGlowDrift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-28px, 32px, 0) scale(1.1);
  }
}
@media (max-width: 540px) {
  .download-modal {
    align-items: end;
    padding: 14px;
  }
  .download-modal__card {
    padding: 24px 18px 18px;
    border-radius: 20px;
  }
  .download-modal__close {
    top: 12px;
    right: 12px;
  }
  .download-modal__icon {
    width: 58px;
    height: 58px;
    border-radius: 17px;
  }
  .download-modal__icon img {
    width: 40px;
    height: 40px;
  }
  .download-modal__card > p {
    font-size: 0.9rem;
  }
  .download-modal__actions {
    grid-template-columns: 1fr;
  }
  .download-modal__later {
    width: 100%;
  }
}

/* ===== DEMO COMING SOON MODAL ===== */
.demo-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.demo-modal.open {
  pointer-events: auto;
  opacity: 1;
}
.demo-modal__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 48% 34%, rgba(236, 72, 153, 0.16), transparent 32%),
    radial-gradient(circle at 62% 58%, rgba(124, 58, 237, 0.24), transparent 34%),
    rgba(4, 3, 10, 0.8);
  backdrop-filter: blur(18px) saturate(1.32);
}
.demo-modal__card {
  position: relative;
  width: min(100%, 460px);
  overflow: hidden;
  padding: 30px;
  border-radius: 22px;
  border: 1px solid rgba(167, 139, 250, 0.28);
  background:
    linear-gradient(150deg, rgba(17, 14, 30, 0.98), rgba(9, 8, 19, 0.98)),
    radial-gradient(circle at 18% 8%, rgba(124, 58, 237, 0.2), transparent 34%);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.5),
    0 0 48px rgba(124, 58, 237, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  transform: translateY(22px) scale(0.96);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.demo-modal.open .demo-modal__card {
  transform: translateY(0) scale(1);
}
.demo-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  transition:
    transform 0.22s ease,
    background 0.22s ease,
    color 0.22s ease;
}
.demo-modal__close::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m6.4 5 5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m6.4 5 5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.demo-modal__close:hover {
  transform: rotate(90deg);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.demo-modal__icon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.55), rgba(236, 72, 153, 0.28)),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(192, 132, 252, 0.26);
  box-shadow: 0 0 34px rgba(124, 58, 237, 0.28);
}
.demo-modal__icon::before {
  content: "";
  width: 28px;
  height: 28px;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v13a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 18.5v-13Zm6 3v7l6-3.5-6-3.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v13a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 18.5v-13Zm6 3v7l6-3.5-6-3.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.demo-modal__eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: #f0abfc;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.demo-modal__card h2 {
  max-width: 390px;
  margin: 0;
  color: #fff;
  font-size: clamp(1.65rem, 5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
}
.demo-modal__card > p {
  margin: 16px 0 0;
  color: rgba(240, 236, 250, 0.74);
  font-size: 0.96rem;
  line-height: 1.66;
}
.demo-modal__message {
  display: grid;
  gap: 5px;
  margin-top: 20px;
  padding: 15px;
  border-radius: 15px;
  border: 1px solid rgba(244, 114, 182, 0.18);
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.09), rgba(124, 58, 237, 0.08));
}
.demo-modal__message strong {
  color: #fff;
  font-size: 0.9rem;
}
.demo-modal__message span {
  color: rgba(240, 236, 250, 0.68);
  font-size: 0.82rem;
  line-height: 1.48;
}
.demo-modal__ok {
  width: 100%;
  min-height: 48px;
  margin-top: 22px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #6d28d9, #ec4899);
  box-shadow: 0 14px 34px rgba(124, 58, 237, 0.26);
  font-family: "Outfit", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}
.demo-modal__ok:hover,
.demo-modal__ok:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(236, 72, 153, 0.26);
}
@media (max-width: 540px) {
  .demo-modal {
    align-items: end;
    padding: 14px;
  }
  .demo-modal__card {
    padding: 24px 18px 18px;
    border-radius: 20px;
  }
  .demo-modal__close {
    top: 12px;
    right: 12px;
  }
  .demo-modal__icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
  }
  .demo-modal__card > p {
    font-size: 0.9rem;
  }
}

/* ===== FINAL POLISH: NEW EMERGENCY FEATURES ===== */
.fs {
  padding: 24px clamp(16px, 4vw, 56px);
  background:
    radial-gradient(circle at 8% 12%, rgba(124, 58, 237, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(10, 8, 20, 0.99), rgba(7, 6, 15, 0.99));
}
.fs-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  max-width: 1460px;
}
.fi {
  min-width: 0;
  min-height: 76px;
  padding: 13px 14px;
  border: 1px solid rgba(167, 139, 250, 0.15);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    rgba(14, 11, 28, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 12px 28px rgba(0, 0, 0, 0.18);
}
.fi:hover {
  transform: translateY(-3px);
  border-color: rgba(192, 132, 252, 0.34);
}
.fi-ico {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(236, 72, 153, 0.12)),
    rgba(255, 255, 255, 0.035);
}
.fi-t h4 {
  font-size: 0.94rem;
  line-height: 1.15;
}
.fi-t p {
  margin-top: 3px;
  font-size: 0.74rem;
}
.fi-sep {
  display: none;
}

@media (min-width: 1181px) {
  .features-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .feature-card {
    grid-column: span 4;
  }
  .tools-feature,
  .radar-feature {
    grid-column: span 6;
  }
}

@media (min-width: 1221px) {
  .tools-grid-main {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .tool-card,
  .safe-zone-tool,
  .travel-score-tool,
  .guardian-angel-tool {
    grid-column: span 4;
  }
  .safe-zone-layout,
  .score-layout,
  .angel-layout {
    grid-template-columns: 1fr;
  }
  .safe-zone-tool,
  .travel-score-tool,
  .guardian-angel-tool {
    min-height: 308px;
  }
}

.icon-volume::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 9v6h4l5 4V5L7 9H3Zm13.5-3.5-1.4 1.4A7 7 0 0 1 17 12a7 7 0 0 1-1.9 5.1l1.4 1.4A9 9 0 0 0 19 12a9 9 0 0 0-2.5-6.5Zm3-3-1.4 1.4A11 11 0 0 1 21 12a11 11 0 0 1-2.9 8.1l1.4 1.4A13 13 0 0 0 23 12a13 13 0 0 0-3.5-9.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 9v6h4l5 4V5L7 9H3Zm13.5-3.5-1.4 1.4A7 7 0 0 1 17 12a7 7 0 0 1-1.9 5.1l1.4 1.4A9 9 0 0 0 19 12a9 9 0 0 0-2.5-6.5Zm3-3-1.4 1.4A11 11 0 0 1 21 12a11 11 0 0 1-2.9 8.1l1.4 1.4A13 13 0 0 0 23 12a13 13 0 0 0-3.5-9.5Z'/%3E%3C/svg%3E");
}
.icon-impact::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2s7 7.1 7 12a7 7 0 0 1-14 0c0-4.9 7-12 7-12Zm-3 12a3 3 0 0 0 6 0h-2a1 1 0 0 1-2 0H9Zm9.5 6.5 1.4-1.4 2.1 2.1-1.4 1.4-2.1-2.1ZM2 21.2l2.1-2.1 1.4 1.4-2.1 2.1L2 21.2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2s7 7.1 7 12a7 7 0 0 1-14 0c0-4.9 7-12 7-12Zm-3 12a3 3 0 0 0 6 0h-2a1 1 0 0 1-2 0H9Zm9.5 6.5 1.4-1.4 2.1 2.1-1.4 1.4-2.1-2.1ZM2 21.2l2.1-2.1 1.4 1.4-2.1 2.1L2 21.2Z'/%3E%3C/svg%3E");
}
.volume-sos-tool,
.drop-detection-tool {
  border-color: rgba(192, 132, 252, 0.26);
}
.volume-tool-demo,
.impact-tool-demo {
  min-height: 98px;
}

@media (max-width: 1180px) {
  .fs-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .feature-card,
  .tools-feature,
  .radar-feature {
    grid-column: auto;
  }
}
@media (min-width: 721px) and (max-width: 1180px) {
  .radar-feature,
  .guardian-angel-tool {
    grid-column: 1 / -1;
  }
}
@media (max-width: 720px) {
  .fs {
    padding: 16px 14px;
  }
  .fs-inner,
  .features-grid {
    grid-template-columns: 1fr;
  }
  .fi {
    min-height: 68px;
  }
}

/* ===== BRANDED 404 ===== */
.not-found-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 18% 12%, rgba(124, 58, 237, 0.18), transparent 34%),
    radial-gradient(circle at 82% 16%, rgba(236, 72, 153, 0.11), transparent 30%),
    #07060f;
}
.not-found-card {
  width: min(100%, 520px);
  padding: clamp(26px, 5vw, 42px);
  border: 1px solid rgba(167, 139, 250, 0.24);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(18, 15, 32, 0.94), rgba(8, 7, 18, 0.96)),
    radial-gradient(circle at 18% 12%, rgba(124, 58, 237, 0.16), transparent 34%);
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}
.not-found-code {
  display: inline-flex;
  margin-top: 30px;
  color: #c084fc;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
}
.not-found-card h1 {
  margin: 8px 0 12px;
  color: #fff;
  font-size: clamp(2rem, 7vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: 0;
}
.not-found-card p {
  max-width: 420px;
  color: rgba(240, 236, 250, 0.68);
  line-height: 1.65;
}
.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.not-found-actions a {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
}
.not-found-actions a:first-child {
  background: linear-gradient(135deg, #6d28d9, #ec4899);
  box-shadow: 0 14px 34px rgba(124, 58, 237, 0.24);
}
.not-found-actions a:last-child {
  border: 1px solid rgba(167, 139, 250, 0.2);
  background: rgba(255, 255, 255, 0.045);
}

/* ===== LEGAL PAGES ===== */
.legal-page {
  min-height: 100vh;
  color: #f4f0fb;
  background:
    radial-gradient(circle at 12% 0%, rgba(124, 58, 237, 0.12), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(59, 130, 246, 0.09), transparent 26%),
    #080c14;
}
.legal-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  min-height: 104px;
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  align-items: center;
  gap: 12px;
  padding: 20px clamp(18px, 5vw, 64px);
  background:
    linear-gradient(90deg, rgba(40, 30, 48, 0.96), rgba(19, 24, 36, 0.96)),
    #161b28;
  border-bottom: 1px solid rgba(96, 165, 250, 0.08);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.18);
}
.legal-topbar h1 {
  margin: 0;
  text-align: center;
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: 0;
}
.legal-back {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #f8fafc;
  text-decoration: none;
  transition:
    background 0.22s ease,
    transform 0.22s ease;
}
.legal-back::before {
  content: "";
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 11H7.8l5.6-5.6L12 4 4 12l8 8 1.4-1.4L7.8 13H20v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 11H7.8l5.6-5.6L12 4 4 12l8 8 1.4-1.4L7.8 13H20v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.legal-back:hover {
  background: rgba(255, 255, 255, 0.07);
  transform: translateX(-2px);
}
.legal-content {
  width: min(100%, 820px);
  margin: 0 auto;
  padding: clamp(34px, 5vw, 52px) clamp(18px, 5vw, 54px) 72px;
}
.legal-callout {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  margin-bottom: clamp(42px, 7vw, 62px);
  padding: clamp(22px, 4vw, 34px);
  background: rgba(18, 25, 40, 0.72);
  border: 1px solid rgba(59, 130, 246, 0.32);
  border-radius: 26px;
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.legal-callout p {
  margin: 0;
  color: #fff;
  font-size: clamp(1.05rem, 2.6vw, 1.45rem);
  font-weight: 700;
  line-height: 1.42;
}
.legal-icon {
  width: 46px;
  height: 46px;
  display: block;
  color: #4b8fff;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.legal-privacy-icon,
.legal-terms-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 2h2v13h-2V2Zm-7 9h16v2H4v-2Zm2 8h12v2H6v-2Zm1.8-9.8L6.4 7.8l3.4-3.4 1.4 1.4-3.4 3.4Zm8.4 0-3.4-3.4 1.4-1.4 3.4 3.4-1.4 1.4ZM5 17h14v2H5v-2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 2h2v13h-2V2Zm-7 9h16v2H4v-2Zm2 8h12v2H6v-2Zm1.8-9.8L6.4 7.8l3.4-3.4 1.4 1.4-3.4 3.4Zm8.4 0-3.4-3.4 1.4-1.4 3.4 3.4-1.4 1.4ZM5 17h14v2H5v-2Z'/%3E%3C/svg%3E");
}
.legal-section {
  scroll-margin-top: 128px;
  margin-top: clamp(34px, 6vw, 54px);
}
.legal-section h2 {
  margin: 0 0 18px;
  color: #4b8fff;
  font-size: clamp(1.22rem, 3vw, 1.72rem);
  font-weight: 700;
  letter-spacing: 0;
}
.legal-section p,
.legal-section li {
  color: rgba(244, 240, 251, 0.72);
  font-size: clamp(1rem, 2.4vw, 1.28rem);
  line-height: 1.72;
  letter-spacing: 0.04em;
}
.legal-section ul {
  display: grid;
  gap: 8px;
  margin: 8px 0 0 1.2em;
}
.legal-section a {
  color: #93c5fd;
  text-decoration: none;
  border-bottom: 1px solid rgba(147, 197, 253, 0.34);
}
.legal-section a:hover {
  color: #bfdbfe;
  border-bottom-color: currentColor;
}
.legal-updated {
  margin-top: clamp(56px, 10vw, 92px);
  text-align: center;
  color: rgba(244, 240, 251, 0.2);
  font-size: 1rem;
  letter-spacing: 0.06em;
}
@media (max-width: 700px) {
  .legal-topbar {
    min-height: 86px;
    grid-template-columns: 50px 1fr 50px;
    padding: 18px 22px;
  }
  .legal-back {
    width: 42px;
    height: 42px;
  }
  .legal-content {
    padding: 30px 24px 58px;
  }
  .legal-callout {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    border-radius: 22px;
  }
  .legal-icon {
    width: 38px;
    height: 38px;
  }
  .legal-section p,
  .legal-section li {
    letter-spacing: 0.03em;
  }
}
@media (max-width: 460px) {
  .legal-topbar {
    min-height: 78px;
    grid-template-columns: 42px 1fr 42px;
    padding: 16px;
  }
  .legal-back {
    width: 38px;
    height: 38px;
  }
  .legal-content {
    padding: 28px 18px 52px;
  }
  .legal-callout {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .legal-callout p {
    font-size: 1.08rem;
  }
}

/* Search and AI entity summary */
.entity-summary {
  position: relative;
  padding: clamp(72px, 9vw, 124px) clamp(18px, 4vw, 64px);
  background:
    radial-gradient(circle at 18% 14%, rgba(124, 58, 237, 0.13), transparent 30%),
    radial-gradient(circle at 84% 18%, rgba(236, 72, 153, 0.09), transparent 30%),
    linear-gradient(180deg, rgba(6, 5, 13, 0.98), #05040b 78%);
  color: var(--text);
  overflow: hidden;
}
.entity-summary::before {
  content: "";
  position: absolute;
  inset: -22% -12%;
  background:
    radial-gradient(circle at 14% 20%, rgba(124, 58, 237, 0.22), transparent 22%),
    radial-gradient(circle at 78% 18%, rgba(236, 72, 153, 0.15), transparent 20%),
    radial-gradient(circle at 54% 86%, rgba(167, 139, 250, 0.1), transparent 24%);
  filter: blur(8px);
  opacity: 0.78;
  animation: entityGlowDrift 11s ease-in-out infinite alternate;
  pointer-events: none;
}
.entity-summary::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.07), transparent),
    linear-gradient(rgba(167, 139, 250, 0.025) 1px, transparent 1px);
  background-size: 100% 100%, 100% 34px;
  opacity: 0.72;
  pointer-events: none;
}
.entity-summary-inner {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.entity-copy {
  display: grid;
  gap: 18px;
}
.entity-kicker {
  width: fit-content;
  color: #c084fc;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  animation: blink 1.8s ease-in-out infinite;
}
.entity-copy h2 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.45rem, 5vw, 4.9rem);
  line-height: 0.94;
  letter-spacing: 0;
}
.entity-copy h2::after {
  content: "";
  display: block;
  width: min(170px, 44%);
  height: 2px;
  margin-top: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7c3aed, #ec4899, transparent);
  box-shadow: 0 0 22px rgba(236, 72, 153, 0.32);
  animation: shimmer 3.5s ease-in-out infinite;
}
.entity-copy p {
  max-width: 780px;
  margin: 0;
  color: rgba(240, 236, 250, 0.74);
  font-size: clamp(1.03rem, 1.7vw, 1.22rem);
  line-height: 1.74;
}
.entity-copy strong {
  color: var(--white);
  text-shadow: 0 0 24px rgba(236, 72, 153, 0.22);
}
.entity-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.entity-facts article {
  min-height: 148px;
  padding: 22px;
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(18, 15, 32, 0.86), rgba(8, 7, 18, 0.9)),
    radial-gradient(circle at 18% 12%, rgba(124, 58, 237, 0.13), transparent 34%);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}
.entity-facts article:hover {
  transform: translateY(-4px);
  border-color: rgba(167, 139, 250, 0.38);
  box-shadow:
    0 22px 58px rgba(60, 22, 112, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.entity-facts h3 {
  margin: 0 0 10px;
  color: var(--white);
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.entity-facts p {
  margin: 0;
  color: rgba(240, 236, 250, 0.66);
  font-size: 0.96rem;
  line-height: 1.56;
}
.entity-qa {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.entity-qa details {
  min-height: 148px;
  padding: 22px;
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(18, 15, 32, 0.84), rgba(8, 7, 18, 0.86)),
    radial-gradient(circle at 20% 8%, rgba(236, 72, 153, 0.12), transparent 30%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition:
    transform 0.35s ease,
    border-color 0.35s ease;
}
.entity-qa details:hover {
  transform: translateY(-3px);
  border-color: rgba(236, 72, 153, 0.32);
}
.entity-qa summary {
  cursor: pointer;
  color: var(--white);
  font-weight: 700;
  line-height: 1.45;
}
.entity-qa p {
  margin: 12px 0 0;
  color: rgba(240, 236, 250, 0.68);
  font-size: 0.96rem;
  line-height: 1.62;
}
.entity-summary .entity-copy.visible {
  animation: su 0.7s 0.05s ease both;
}
.entity-summary .entity-facts.visible article,
.entity-summary .entity-qa.visible details {
  animation: softRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.entity-summary .entity-facts article:nth-child(2),
.entity-summary .entity-qa details:nth-child(2) {
  animation-delay: 0.08s;
}
.entity-summary .entity-facts article:nth-child(3),
.entity-summary .entity-qa details:nth-child(3) {
  animation-delay: 0.16s;
}
.entity-summary .entity-facts article:nth-child(4) {
  animation-delay: 0.24s;
}
@keyframes entityGlowDrift {
  0% {
    transform: translate3d(-1.5%, -1%, 0) scale(1);
  }
  100% {
    transform: translate3d(1.8%, 1.4%, 0) scale(1.04);
  }
}
@media (max-width: 920px) {
  .entity-summary-inner,
  .entity-qa {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .entity-facts {
    grid-template-columns: 1fr;
  }
  .entity-facts article,
  .entity-qa details {
    min-height: auto;
    padding: 20px;
  }
}

@media (max-width: 640px) {
  .play-store-note {
    padding: 0 18px 22px;
  }
  .play-store-note-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 13px;
  }
  .play-store-mark {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }
  .play-store-copy span {
    font-size: 0.92rem;
  }
  .play-store-copy p {
    font-size: 0.78rem;
  }
  .notify-launch-btn {
    width: 100%;
  }
}

/* ===== LAUNCH NOTIFY MODAL ===== */
.notify-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.notify-modal.open {
  pointer-events: auto;
  opacity: 1;
}
.notify-modal__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 46% 24%, rgba(236, 72, 153, 0.18), transparent 30%),
    radial-gradient(circle at 64% 56%, rgba(124, 58, 237, 0.24), transparent 36%),
    rgba(4, 3, 10, 0.82);
  backdrop-filter: blur(18px) saturate(1.32);
}
.notify-modal__card {
  position: relative;
  width: min(100%, 660px);
  max-height: min(88vh, 760px);
  overflow: auto;
  padding: 30px;
  border-radius: 22px;
  border: 1px solid rgba(167, 139, 250, 0.3);
  background:
    linear-gradient(150deg, rgba(17, 14, 30, 0.99), rgba(9, 8, 19, 0.99)),
    radial-gradient(circle at 18% 8%, rgba(124, 58, 237, 0.2), transparent 34%);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.54),
    0 0 52px rgba(124, 58, 237, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  transform: translateY(22px) scale(0.96);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.notify-modal.open .notify-modal__card {
  transform: translateY(0) scale(1);
}
.notify-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  transition:
    transform 0.22s ease,
    background 0.22s ease,
    color 0.22s ease;
}
.notify-modal__close::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m6.4 5 5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m6.4 5 5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.notify-modal__close:hover {
  transform: rotate(90deg);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.notify-modal__icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.55), rgba(236, 72, 153, 0.28)),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(192, 132, 252, 0.26);
  box-shadow: 0 0 34px rgba(124, 58, 237, 0.28);
}
.notify-modal__icon::before {
  content: "";
  width: 28px;
  height: 28px;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22a2.8 2.8 0 0 0 2.7-2h-5.4a2.8 2.8 0 0 0 2.7 2Zm7-6V11a7 7 0 0 0-5-6.7V3a2 2 0 0 0-4 0v1.3A7 7 0 0 0 5 11v5l-2 2v1h18v-1l-2-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22a2.8 2.8 0 0 0 2.7-2h-5.4a2.8 2.8 0 0 0 2.7 2Zm7-6V11a7 7 0 0 0-5-6.7V3a2 2 0 0 0-4 0v1.3A7 7 0 0 0 5 11v5l-2 2v1h18v-1l-2-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.notify-modal__eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: #f0abfc;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.notify-modal__card h2 {
  max-width: 520px;
  margin: 0;
  color: #fff;
  font-size: clamp(1.6rem, 4.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0;
}
.notify-modal__card > p {
  margin: 14px 0 0;
  color: rgba(240, 236, 250, 0.72);
  font-size: 0.94rem;
  line-height: 1.6;
}
.notify-form {
  margin-top: 22px;
}
.notify-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
.notify-form label,
.notify-feature-list label {
  display: grid;
  gap: 7px;
}
.notify-form label span,
.notify-feature-field legend {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.8rem;
  font-weight: 700;
}
.notify-form input[type="text"],
.notify-form input[type="email"],
.notify-form input[type="tel"] {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 12px;
  padding: 0 13px;
  color: #fff;
  background: rgba(255, 255, 255, 0.055);
  font-family: "Outfit", sans-serif;
  font-size: 0.9rem;
  outline: none;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}
.notify-form input:focus {
  border-color: rgba(236, 72, 153, 0.45);
  background: rgba(255, 255, 255, 0.075);
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.09);
}
.notify-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.notify-feature-field {
  margin: 18px 0 0;
  padding: 0;
  border: 0;
}
.notify-feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 11px;
}
.notify-feature-list label {
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  min-height: 44px;
  padding: 10px 11px;
  border: 1px solid rgba(167, 139, 250, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}
.notify-feature-list input {
  width: 16px;
  height: 16px;
  accent-color: #ec4899;
}
.notify-feature-list span {
  color: rgba(240, 236, 250, 0.78);
  font-size: 0.78rem;
  line-height: 1.35;
}
.notify-form__status {
  min-height: 20px;
  margin: 14px 0 0;
  color: rgba(240, 236, 250, 0.68);
  font-size: 0.82rem;
  line-height: 1.4;
}
.notify-form__status[data-type="success"] {
  color: #86efac;
}
.notify-form__status[data-type="error"] {
  color: #fca5a5;
}
.notify-form__status[data-type="info"] {
  color: #c4b5fd;
}
.notify-form__actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  margin-top: 18px;
}
.notify-form__submit,
.notify-form__cancel {
  min-height: 48px;
  border-radius: 12px;
  font-family: "Outfit", sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
}
.notify-form__submit {
  border: 0;
  color: #fff;
  background: var(--grad);
  box-shadow: 0 14px 34px rgba(124, 58, 237, 0.28);
}
.notify-form__submit:disabled {
  cursor: wait;
  opacity: 0.75;
}
.notify-form__cancel {
  padding: 0 18px;
  color: rgba(240, 236, 250, 0.66);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.notify-form__submit:hover,
.notify-form__submit:focus-visible {
  transform: translateY(-2px);
}
.notify-form__cancel:hover,
.notify-form__cancel:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.085);
}

.notify-thanks {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: grid;
  place-items: center;
  padding: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.notify-thanks.open {
  pointer-events: auto;
  opacity: 1;
}
.notify-thanks__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(236, 72, 153, 0.18), transparent 32%),
    rgba(4, 3, 10, 0.78);
  backdrop-filter: blur(16px) saturate(1.25);
}
.notify-thanks__card {
  position: relative;
  width: min(100%, 390px);
  padding: 28px;
  text-align: center;
  border: 1px solid rgba(192, 132, 252, 0.32);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(18, 15, 32, 0.98), rgba(8, 7, 18, 0.98)),
    radial-gradient(circle at 20% 8%, rgba(236, 72, 153, 0.16), transparent 34%);
  box-shadow:
    0 28px 82px rgba(0, 0, 0, 0.52),
    0 0 44px rgba(124, 58, 237, 0.24);
  transform: translateY(18px) scale(0.96);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.notify-thanks.open .notify-thanks__card {
  transform: translateY(0) scale(1);
}
.notify-thanks__icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  border-radius: 18px;
  background: var(--grad);
  box-shadow: 0 0 30px rgba(236, 72, 153, 0.28);
}
.notify-thanks__icon::before {
  content: "";
  width: 28px;
  height: 28px;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 21s-7.5-4.8-9.6-8.5C.5 9.2 2.4 5 6.2 5 8.3 5 9.7 6.2 12 8.8 14.3 6.2 15.7 5 17.8 5c3.8 0 5.7 4.2 3.8 7.5C19.5 16.2 12 21 12 21Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 21s-7.5-4.8-9.6-8.5C.5 9.2 2.4 5 6.2 5 8.3 5 9.7 6.2 12 8.8 14.3 6.2 15.7 5 17.8 5c3.8 0 5.7 4.2 3.8 7.5C19.5 16.2 12 21 12 21Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.notify-thanks__eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: #f0abfc;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.notify-thanks__card h2 {
  margin: 0;
  color: #fff;
  font-size: 1.55rem;
  line-height: 1.12;
  letter-spacing: 0;
}
.notify-thanks__card p {
  margin: 13px 0 0;
  color: rgba(240, 236, 250, 0.72);
  font-size: 0.9rem;
  line-height: 1.58;
}
.notify-thanks__ok {
  width: 100%;
  min-height: 46px;
  margin-top: 20px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: var(--grad);
  box-shadow: 0 14px 34px rgba(124, 58, 237, 0.28);
  font-family: "Outfit", sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 640px) {
  .notify-modal {
    align-items: end;
    padding: 14px;
  }
  .notify-modal__card {
    max-height: 90vh;
    padding: 24px 18px 18px;
    border-radius: 20px;
  }
  .notify-modal__close {
    top: 12px;
    right: 12px;
  }
  .notify-modal__icon {
    width: 56px;
    height: 56px;
    border-radius: 17px;
  }
  .notify-form__grid,
  .notify-feature-list,
  .notify-form__actions {
    grid-template-columns: 1fr;
  }
  .notify-form__cancel {
    width: 100%;
  }
}