:root {
  --mint:#5ce5a8; --mint2:#a7f7d0; --yellow:#ffd451;
}
* { box-sizing:border-box; }
body {
  margin:0;
  font-family:Inter,Arial,sans-serif;
  color:#fff;
  background:
    radial-gradient(circle at 16% 18%, rgba(92,229,168,.16), transparent 20%),
    radial-gradient(circle at 82% 25%, rgba(92,229,168,.12), transparent 22%),
    linear-gradient(125deg,#030d0a 0%, #071812 54%, #04110d 100%);
}
.site-header,
.site-footer {
  width:100%;
  padding:18px 20px;
}
.site-header {
  padding:10px 20px;
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(3,13,10,.42);
  border-bottom:1px solid rgba(103,237,178,.12);
}
.site-footer {
  position:relative;
  border-top:1px solid rgba(103,237,178,.12);
  background:rgba(3,13,10,.38);
}
.site-footer::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-1px;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(92,229,168,.18) 12%, rgba(167,247,208,.9) 50%, rgba(92,229,168,.18) 88%, transparent 100%);
  box-shadow:0 0 10px rgba(92,229,168,.45), 0 0 22px rgba(167,247,208,.2);
  pointer-events:none;
}
.bar,
.footer-bar {
  width:min(1180px,100%);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
  .brand {
  color:#fff;
  text-decoration:none;
  font-weight:950;
  letter-spacing:.04em;
  display:flex;
  align-items:center;
  gap:14px;
}
.brand-mark {
  height:72px;
  width:auto;
  display:block;
  background:transparent;
  transform:none;
  animation:headerLogoSway 4.8s ease-in-out infinite;
}
.brand span {
  font-size:16px;
  line-height:1;
}
.brand-text {
  display:flex;
  flex-direction:column;
  gap:4px;
}
.brand-tagline {
  font-size:11px;
  line-height:1.1;
  color:#89f2bf;
  letter-spacing:.06em;
  font-weight:700;
}
.nav {
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  margin-right:18px;
}
.nav a,
.footer-links a {
  color:#b6c8c0;
  text-decoration:none;
  font-size:14px;
}
.nav a:hover,
.footer-links a:hover {
  color:#fff;
}
.footer-copy {
  color:#8fae9f;
  font-size:12px;
}
.footer-brand {
  display:flex;
  align-items:center;
  gap:10px;
}
.footer-logo {
  width:34px;
  height:34px;
  object-fit:contain;
  display:block;
  border-radius:9px;
}
.footer-links {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  color:#89f2bf;
  font-size:12px;
}
.footer-links a {
  font-size:12px;
}
.nav .about-button {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 9px;
  border:1px solid rgba(167,247,208,.82);
  border-radius:999px;
  background:linear-gradient(135deg, rgba(92,229,168,.26), rgba(167,247,208,.12));
  box-shadow:0 0 10px rgba(92,229,168,.48), 0 0 22px rgba(167,247,208,.2), inset 0 1px 0 rgba(255,255,255,.28);
  color:#effff6;
  font-size:12px;
  font-weight:700;
  transition:color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.nav .about-button:hover {
  color:#f2fff8;
  border-color:rgba(167,247,208,.48);
  background:rgba(92,229,168,.06);
}
.solution-dropdown {
  position:relative;
}
.solution-dropdown summary {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 9px;
  border:1px solid rgba(167,247,208,.82);
  border-radius:999px;
  background:linear-gradient(135deg, rgba(92,229,168,.26), rgba(167,247,208,.12));
  box-shadow:0 0 10px rgba(92,229,168,.48), 0 0 22px rgba(167,247,208,.2), inset 0 1px 0 rgba(255,255,255,.28);
  color:#effff6;
  font-size:12px;
  font-weight:700;
  letter-spacing:normal;
  cursor:pointer;
  list-style:none;
  text-transform:none;
  transition:color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.solution-dropdown summary:hover {
  color:#f2fff8;
  border-color:rgba(167,247,208,.48);
  background:rgba(92,229,168,.06);
}
.solution-dropdown summary::-webkit-details-marker {
  display:none;
}
.solution-dropdown summary::before {
  content:none;
}
.solution-dropdown summary::after {
  content:"▾";
  color:#89f2bf;
  font-size:13px;
  line-height:1;
  transition:transform .2s ease;
}
.solution-dropdown[open] summary::after {
  transform:rotate(180deg);
}
.solution-dropdown-menu {
  position:absolute;
  right:0;
  bottom:calc(100% + 12px);
  z-index:10;
  display:grid;
  min-width:190px;
  padding:8px;
  border:1px solid rgba(103,237,178,.18);
  border-radius:12px;
  background:rgba(3,13,10,.96);
  box-shadow:0 16px 32px rgba(0,0,0,.28);
}
.solution-dropdown-menu a {
  padding:8px 10px;
  border-radius:8px;
  white-space:nowrap;
}
.solution-dropdown-menu a:hover {
  background:rgba(92,229,168,.1);
}
.site-header .solution-dropdown-menu {
  top:calc(100% + 12px);
  bottom:auto;
}
.footer-links span {
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#8fae9f;
  font-size:12px;
}
.footer-links svg {
  width:13px;
  height:13px;
  display:block;
  color:#8fae9f;
}
.section {
  min-height:auto;
  display:grid;
  place-items:start center;
  padding:6px 20px 20px;
}
.wrap {
  width:min(1180px,100%);
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:56px;
  align-items:center;
}
.copy small {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 13px;
  border-radius:999px;
  border:1px solid rgba(103,237,178,.34);
  background:rgba(92,229,168,.08);
  color:#89f2bf;
  font-size:11px;
  font-weight:900;
  letter-spacing:.09em;
}
.copy small::before {
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:#72ebb4;
  box-shadow:0 0 12px #72ebb4;
}
.copy h1 {
  margin:24px 0 18px;
  font-size:clamp(34px,4vw,56px);
  line-height:1.02;
  letter-spacing:-.06em;
}
.copy h1 .subline {
  display:inline;
  font-size:.72em;
  line-height:1.12;
  letter-spacing:-.04em;
  margin-top:0;
}
.copy h1 .accent {
  color:var(--mint2);
}
.copy p {
  max-width:540px;
  color:#b6c8c0;
  font-size:18px;
  line-height:1.7;
  margin:0;
}
.training-preview-section {
  position:relative;
  background:
    linear-gradient(rgba(126,214,176,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,214,176,.08) 1px, transparent 1px),
    linear-gradient(180deg, #fbfcfa 0%, #f7faf7 100%);
  background-size:24px 24px,24px 24px,100% 100%;
  border-top:1px solid rgba(103,237,178,.08);
  color:#102019;
}
.training-preview-wrap,
.launch-wrap,
.benefits-wrap {
  width:min(1180px,100%);
  margin:0 auto;
}
.training-preview-section .training-preview-wrap {
  padding:20px 20px 44px;
}
.preview-head {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  gap:22px;
  align-items:center;
  margin:-18px 0 20px;
  padding:22px 24px;
  border-radius:26px;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(92,229,168,.18), transparent 24%),
    radial-gradient(circle at 88% 12%, rgba(255,212,81,.16), transparent 20%),
    linear-gradient(145deg, rgba(255,255,255,.98) 0%, rgba(242,250,245,.98) 56%, rgba(232,246,238,.99) 100%);
  border:1px solid rgba(16,32,25,.08);
  box-shadow:
    0 20px 46px rgba(27,44,35,.08),
    inset 0 1px 0 rgba(255,255,255,.92);
}
.preview-head::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(16,32,25,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,32,25,.035) 1px, transparent 1px);
  background-size:20px 20px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.65), transparent 100%);
  pointer-events:none;
}
.preview-head::after {
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  top:0;
  height:5px;
  background:linear-gradient(90deg, transparent 0%, rgba(92,229,168,.2) 10%, rgba(92,229,168,1) 34%, rgba(255,212,81,.92) 66%, rgba(92,229,168,.2) 90%, transparent 100%);
  box-shadow:0 0 22px rgba(92,229,168,.18);
}
.preview-head > * {
  position:relative;
  z-index:1;
}
.preview-head-backdrop {
  position:absolute;
  inset:0;
  pointer-events:none;
}
.preview-orbit {
  position:absolute;
  border-radius:999px;
  border:1px solid rgba(16,32,25,.08);
}
.preview-orbit.orbit-a {
  width:280px;
  height:280px;
  right:-86px;
  top:-110px;
  transform:rotate(18deg);
  border-color:rgba(92,229,168,.22);
}
.preview-orbit.orbit-b {
  width:180px;
  height:180px;
  right:74px;
  top:18px;
  border-color:rgba(255,212,81,.24);
}
.preview-glow {
  position:absolute;
  border-radius:50%;
  filter:blur(12px);
}
.preview-glow.glow-a {
  width:110px;
  height:110px;
  right:148px;
  top:32px;
  background:rgba(92,229,168,.18);
}
.preview-glow.glow-b {
  width:82px;
  height:82px;
  right:44px;
  top:96px;
  background:rgba(255,212,81,.18);
}
.preview-head h2,
.launch-copy h2,
.signup-card h3 {
  margin:0;
  color:#102019;
  letter-spacing:-.04em;
}
.preview-head h2 {
  font-size:clamp(34px,4vw,50px);
  line-height:.96;
  letter-spacing:-.08em;
  max-width:520px;
}
.preview-head p,
.launch-copy p,
.signup-card p,
.feature-card p,
.step p,
.benefit p,
.signup-note {
  color:#6f8278;
}
.preview-head p {
  margin:0;
  max-width:470px;
  font-size:13px;
  line-height:1.7;
}
.preview-title-wrap {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.preview-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:max-content;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(16,32,25,.06);
  border:1px solid rgba(16,32,25,.08);
  color:#39bf78;
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.preview-eyebrow::before {
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(180deg,#72ebb4,#39bf78);
  box-shadow:0 0 0 5px rgba(92,229,168,.14);
}
.preview-stat-cluster {
  justify-self:end;
  width:min(100%,320px);
  display:grid;
  gap:10px;
}
.preview-stat {
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:18px 18px 16px;
  border-radius:22px;
  background:linear-gradient(145deg, #103528 0%, #0b1f18 58%, #081510 100%);
  border:1px solid rgba(16,32,25,.08);
  box-shadow:0 16px 34px rgba(27,44,35,.12);
}
.preview-stat strong {
  display:block;
  color:#ffffff;
  font-size:48px;
  line-height:.9;
  letter-spacing:-.08em;
}
.preview-stat span {
  display:block;
  margin-top:8px;
  color:rgba(231,255,243,.76);
  font-size:10px;
  line-height:1.55;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.16em;
}
.preview-mini-stats {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.preview-mini-stat {
  padding:14px 14px 13px;
  border-radius:18px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(16,32,25,.08);
  box-shadow:0 12px 24px rgba(27,44,35,.06);
}
.preview-mini-stat strong {
  display:block;
  color:#102019;
  font-size:24px;
  line-height:.95;
  letter-spacing:-.08em;
}
.preview-mini-stat span {
  display:block;
  margin-top:7px;
  color:#60756b;
  font-size:10px;
  line-height:1.45;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.11em;
}
.preview-stat,
.preview-mini-stat {
  position:relative;
  overflow:hidden;
}
.preview-stat strong,
.preview-mini-stat strong {
  display:inline-block;
}
.feature-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.feature-spotlight {
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:10px;
  margin-bottom:10px;
}
.feature-spot-card {
  position:relative;
  overflow:hidden;
  min-height:190px;
  border-radius:24px;
  padding:18px 18px 16px;
  border:1px solid rgba(16,32,25,.08);
  background:
    radial-gradient(circle at 14% 18%, rgba(92,229,168,.18), transparent 26%),
    radial-gradient(circle at 86% 18%, rgba(167,247,208,.16), transparent 22%),
    linear-gradient(145deg, #ffffff 0%, #f4fbf7 55%, #edf8f1 100%);
  color:#102019;
  box-shadow:0 24px 48px rgba(8,20,15,.08);
}
.feature-spot-card::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(16,32,25,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,32,25,.035) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.78), transparent 100%);
  pointer-events:none;
}
.feature-spot-card::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:4px;
  background:linear-gradient(90deg, rgba(92,229,168,0), rgba(92,229,168,.9) 38%, rgba(167,247,208,.85) 68%, rgba(92,229,168,0));
  box-shadow:0 0 18px rgba(92,229,168,.18);
}
.feature-spot-card > * {
  position:relative;
  z-index:1;
}
.feature-kicker {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(16,32,25,.06);
  border:1px solid rgba(16,32,25,.08);
  color:#39bf78;
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.feature-kicker::before {
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(180deg,#72ebb4,#39bf78);
  box-shadow:0 0 0 5px rgba(92,229,168,.14);
}
.feature-spot-card .feature-kicker {
  background:rgba(92,229,168,.08);
  border-color:rgba(16,32,25,.08);
  color:#2d9c67;
}
.feature-spot-card .feature-kicker::before {
  box-shadow:0 0 0 5px rgba(92,229,168,.18);
}
.feature-spot-card h3 {
  margin:14px 0 8px;
  color:#102019;
  font-size:clamp(24px,2.5vw,34px);
  line-height:.98;
  letter-spacing:-.07em;
  max-width:360px;
}
.feature-spot-card p {
  max-width:360px;
  color:#5f7369;
  font-size:12px;
  line-height:1.65;
}
.feature-spot-visual {
  position:absolute;
  right:0;
  bottom:-6px;
  width:150px;
  max-width:38%;
  opacity:.96;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.28));
}
.feature-orb {
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(8px);
}
.feature-orb.orb-a {
  width:88px;
  height:88px;
  right:124px;
  bottom:18px;
  background:rgba(92,229,168,.16);
}
.feature-orb.orb-b {
  width:58px;
  height:58px;
  right:78px;
  top:28px;
  background:rgba(167,247,208,.14);
}
.feature-pill-row {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.feature-pill {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 11px;
  border-radius:999px;
  background:rgba(92,229,168,.08);
  border:1px solid rgba(16,32,25,.08);
  color:#102019;
  font-size:10px;
  font-weight:800;
  letter-spacing:.05em;
}
.feature-pill::before {
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#72ebb4;
  box-shadow:0 0 10px rgba(114,235,180,.48);
}
.feature-spot-stats {
  display:grid;
  gap:10px;
}
.feature-spot-stat {
  position:relative;
  overflow:hidden;
  border-radius:20px;
  padding:16px 16px 14px;
  border:1px solid rgba(16,32,25,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(241,249,244,.98) 100%);
  box-shadow:0 16px 34px rgba(27,44,35,.08);
}
.feature-spot-stat::before {
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:3px;
  background:linear-gradient(90deg, rgba(92,229,168,.15), rgba(92,229,168,.9), rgba(167,247,208,.7));
}
.feature-spot-stat strong {
  display:block;
  color:#102019;
  font-size:34px;
  line-height:.92;
  letter-spacing:-.08em;
}
.feature-spot-stat span {
  display:block;
  margin-top:7px;
  color:#60756b;
  font-size:10px;
  line-height:1.5;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.11em;
}
.feature-card {
  position:relative;
  background:
    radial-gradient(circle at top right, rgba(92,229,168,.18), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(244,250,246,.98) 100%);
  border:none;
  border-radius:18px;
  padding:14px 13px 13px;
  box-shadow:0 12px 28px rgba(27,44,35,.07);
  min-height:100%;
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease;
}
.feature-card::before {
  content:none;
}
.feature-card::after {
  content:none;
}
.feature-card:hover {
  transform:translateY(-5px);
  box-shadow:0 22px 44px rgba(27,44,35,.12);
}
.feature-icon {
  width:36px;
  height:36px;
  border-radius:12px;
  display:grid;
  place-items:center;
  margin-bottom:10px;
  background:linear-gradient(180deg,#eefaf2,#e5f8ec);
  color:#39bf78;
  box-shadow:0 8px 18px rgba(92,229,168,.14);
}
.feature-icon svg {
  width:16px;
  height:16px;
  display:block;
}
.feature-card h3 {
  margin:0 0 6px;
  color:#102019;
  font-size:13px;
  line-height:1.28;
  letter-spacing:-.02em;
}
.feature-card p {
  margin:0;
  font-size:10.5px;
  line-height:1.55;
}
.feature-card a {
  color:#4dc787;
  text-decoration:none;
  font-size:11px;
  font-weight:800;
}
.launch-section {
  background:linear-gradient(180deg,#ffffff 0%, #fbfcfb 100%);
  color:#102019;
}
.launch-wrap {
  padding:44px 20px 42px;
  display:grid;
  grid-template-columns:1fr 420px;
  gap:34px;
  align-items:center;
}
.launch-copy h2 {
  font-size:clamp(34px,4vw,56px);
  line-height:1.02;
  letter-spacing:-.06em;
  margin-bottom:10px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(92,229,168,.8);
  display:inline-block;
}
.launch-copy > p {
  max-width:470px;
  margin:0 0 28px;
  font-size:13px;
  line-height:1.7;
}
.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  max-width:700px;
}
.step-number {
  width:32px;
  height:32px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#77e8ae,#a8f2c5);
  color:#102019;
  margin-bottom:12px;
  box-shadow:0 10px 24px rgba(116,225,159,.18);
}
.step-number svg {
  width:16px;
  height:16px;
  display:block;
}
.step h4 {
  margin:0 0 7px;
  color:#102019;
  font-size:12px;
  line-height:1.4;
}
.step p {
  margin:0;
  font-size:10px;
  line-height:1.7;
}
.signup-card {
  position:relative;
  background:linear-gradient(180deg,#ffffff 0%, #fcfdfc 100%);
  border:1px solid rgba(57,191,120,.45);
  border-radius:18px;
  padding:18px 18px 16px;
  box-shadow:0 20px 50px rgba(31,52,40,.09);
}
.signup-frog-logo {
  position:absolute;
  top:8px;
  right:16px;
  width:72px;
  height:auto;
  display:block;
  background:transparent;
  animation:logoFloat 3.4s ease-in-out infinite;
}
.signup-card h3 {
  font-size:18px;
  margin-bottom:8px;
}
.signup-card p {
  margin:0 0 16px;
  font-size:12px;
  line-height:1.6;
}
.signup-form {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.signup-form input {
  width:100%;
  height:34px;
  border-radius:8px;
  border:1px solid #dbe7de;
  background:#fbfcfb;
  padding:0 10px;
  color:#102019;
  font:inherit;
  font-size:12px;
  outline:none;
}
.signup-form input::placeholder {
  color:#9aaea3;
}
.signup-form select {
  width:100%;
  height:34px;
  border-radius:8px;
  border:1px solid #dbe7de;
  background:#fbfcfb;
  padding:0 34px 0 10px;
  color:#102019;
  font:inherit;
  font-size:12px;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #39bf78 50%),
    linear-gradient(135deg, #39bf78 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 14px,
    calc(100% - 12px) 14px;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
.signup-form select:required:valid,
.signup-form input:required:valid {
  border-color:#8ee3ab;
}
.signup-form select option {
  color:#102019;
}
.signup-form select::-webkit-scrollbar {
  width:10px;
}
.signup-form select::-webkit-scrollbar-track {
  background:rgba(92,229,168,.12);
  border-radius:999px;
}
.signup-form select::-webkit-scrollbar-thumb {
  background:linear-gradient(180deg,#72ebb4 0%, #39bf78 100%);
  border-radius:999px;
  border:2px solid rgba(255,255,255,.9);
}
.signup-form select::-webkit-scrollbar-thumb:hover {
  background:linear-gradient(180deg,#84efbe 0%, #2fb06d 100%);
}
.signup-form .full {
  grid-column:1 / -1;
}
.notify-btn {
  grid-column:1 / -1;
  width:100%;
  min-height:46px;
  border-radius:16px;
}
.form-status {
  grid-column:1 / -1;
  display:none;
  margin-top:8px;
  padding:10px 12px;
  border-radius:10px;
  font-size:12px;
  line-height:1.5;
  font-weight:700;
}
.form-status.is-visible {
  display:block;
}
.form-status.success {
  border:1px solid rgba(57,191,120,.28);
  background:rgba(92,229,168,.10);
  color:#1d6f4a;
}
.form-status.error {
  border:1px solid rgba(214,92,92,.24);
  background:rgba(214,92,92,.08);
  color:#8e2d2d;
}

.signup-note {
  margin:8px 0 0;
  text-align:center;
  font-size:10px;
}
.benefits-strip {
  background:
    radial-gradient(circle at 16% 18%, rgba(92,229,168,.16), transparent 20%),
    radial-gradient(circle at 82% 25%, rgba(92,229,168,.12), transparent 22%),
    linear-gradient(125deg,#030d0a 0%, #071812 54%, #04110d 100%);
  border-top:1px solid rgba(103,237,178,.12);
}
.benefits-wrap {
  padding:18px 20px 16px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.benefit {
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.benefit-icon {
  width:18px;
  height:18px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#89f2bf;
  flex:0 0 auto;
  margin-top:2px;
}
.benefit-icon svg {
  width:14px;
  height:14px;
  display:block;
}
.benefit h4 {
  margin:0 0 4px;
  color:#f4fff9;
  font-size:12px;
  line-height:1.4;
}
.benefit p {
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:#b6c8c0;
}
.blog-section {
  position:relative;
  overflow:hidden;
  color:#102019;
  background:
    radial-gradient(circle at 10% 0%, rgba(92,229,168,.13), transparent 26%),
    linear-gradient(180deg,#f8fbf9 0%,#ffffff 100%);
  border-top:1px solid rgba(16,32,25,.07);
}
.blog-wrap {
  width:min(1180px,100%);
  margin:0 auto;
  padding:62px 20px;
}
.blog-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:28px;
}
.blog-kicker {
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:12px;
  color:#39bf78;
  font-size:10px;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.blog-kicker::before {
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#72ebb4;
  box-shadow:0 0 12px rgba(114,235,180,.7);
}
.blog-head h2 {
  margin:0;
  color:#102019;
  font-size:clamp(34px,4vw,56px);
  line-height:1;
  letter-spacing:-.065em;
}
.blog-head p {
  max-width:420px;
  margin:0;
  color:#6f8278;
  font-size:13px;
  line-height:1.7;
}
.blog-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.blog-card {
  display:flex;
  flex-direction:column;
  min-height:270px;
  padding:22px;
  border:1px solid rgba(16,32,25,.08);
  border-radius:20px;
  background:linear-gradient(145deg,#fff 0%,#f5faf7 100%);
  box-shadow:0 14px 30px rgba(27,44,35,.07);
  transition:transform .22s ease, box-shadow .22s ease;
}
.blog-card:hover {
  transform:translateY(-5px);
  box-shadow:0 22px 42px rgba(27,44,35,.12);
}
.blog-card-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.blog-card-date {
  color:#6f8278;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
}
.blog-card-tag {
  display:inline-flex;
  width:max-content;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(92,229,168,.1);
  color:#268657;
  font-size:9px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.blog-card h3 {
  margin:18px 0 10px;
  color:#102019;
  font-size:22px;
  line-height:1.08;
  letter-spacing:-.05em;
}
.blog-card p {
  margin:0;
  color:#60756b;
  font-size:12px;
  line-height:1.7;
}
.blog-card a {
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:auto;
  padding-top:20px;
  color:#238354;
  text-decoration:none;
  font-size:11px;
  font-weight:900;
}
.blog-card a::after {
  content:"→";
  font-size:15px;
}
.blog-card-image {
  width:100%;
  height:132px;
  margin:-4px 0 18px;
  border-radius:14px;
  object-fit:cover;
  box-shadow:0 10px 22px rgba(27,44,35,.1);
}
.blog-pagination {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:max-content;
  max-width:100%;
  margin:32px auto 0;
  padding:5px;
  border:1px solid rgba(16,32,25,.09);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  box-shadow:0 8px 20px rgba(27,44,35,.05);
}
.blog-pagination a,
.blog-pagination span {
  display:grid;
  place-items:center;
  width:30px;
  min-width:30px;
  height:30px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#7a8c83;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
  transition:color .2s ease, background .2s ease, transform .2s ease;
}
.blog-pagination a:hover {
  background:rgba(92,229,168,.12);
  color:#176e46;
  transform:translateY(-1px);
}
.blog-pagination .current {
  color:#fff;
  background:#39bf78;
  box-shadow:0 4px 10px rgba(57,191,120,.24);
}
.blog-pagination .current::after {
  content:none;
}
.blog-pagination .pagination-next {
  margin-left:2px;
  color:#176e46;
}
.blog-pagination .pagination-next svg {
  width:15px;
  height:15px;
  display:block;
  stroke-width:2;
}
.blog-pagination .pagination-next:hover {
  background:#39bf78;
  color:#fff;
}
.blog-pagination-more {
  display:none;
}

/* Elevated editorial treatment for the latest articles section */
.blog-section::before {
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  right:-220px;
  top:-280px;
  border-radius:50%;
  border:1px solid rgba(57,191,120,.12);
  box-shadow:0 0 0 54px rgba(92,229,168,.025), 0 0 0 108px rgba(92,229,168,.018);
  pointer-events:none;
}
.blog-wrap {
  position:relative;
  z-index:1;
}
.blog-head {
  position:relative;
  padding:0 0 24px;
  border-bottom:1px solid rgba(16,32,25,.09);
}
.blog-head::after {
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:138px;
  height:2px;
  background:linear-gradient(90deg,#39bf78,#a7f7d0,transparent);
  box-shadow:0 0 12px rgba(92,229,168,.42);
}
.blog-head p {
  padding:14px 16px;
  border-radius:14px;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(57,191,120,.45);
  box-shadow:0 10px 24px rgba(27,44,35,.045);
}
.blog-card {
  position:relative;
  min-height:300px;
  overflow:hidden;
  padding:24px;
  border-radius:24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(92,229,168,.17), transparent 34%),
    linear-gradient(145deg,#ffffff 0%,#f4faf6 100%);
  box-shadow:0 16px 34px rgba(27,44,35,.075), inset 0 1px 0 rgba(255,255,255,.9);
}
.blog-card::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:4px;
  background:linear-gradient(90deg,#39bf78 0%,#a7f7d0 58%,rgba(167,247,208,0) 100%);
}
.blog-card::after {
  content:"";
  position:absolute;
  right:-22px;
  bottom:-28px;
  width:122px;
  height:122px;
  border:1px solid rgba(57,191,120,.13);
  border-radius:50%;
  box-shadow:0 0 0 18px rgba(92,229,168,.035), 0 0 0 36px rgba(92,229,168,.02);
  pointer-events:none;
  transition:transform .3s ease;
}
.blog-card:hover::after {
  transform:scale(1.15);
}
.blog-card-tag {
  position:relative;
  z-index:1;
  border:1px solid rgba(57,191,120,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.74);
}
.blog-card h3 {
  position:relative;
  z-index:1;
  max-width:300px;
  font-size:24px;
}
.blog-card p {
  position:relative;
  z-index:1;
  max-width:310px;
  margin-bottom:20px;
}
.blog-card a {
  position:relative;
  z-index:1;
  width:max-content;
  margin-top:auto;
  padding:8px 12px;
  border:1px solid #39bf78;
  border-radius:999px;
  background:#fff;
  color:#238354;
  box-shadow:0 6px 14px rgba(57,191,120,.12);
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.blog-card a:hover {
  transform:translateY(-2px);
  background:#f4fcf7;
  color:#238354;
  box-shadow:0 12px 22px rgba(57,191,120,.22);
}
.blog-card a::after {
  transition:transform .2s ease;
}
.blog-card a:hover::after {
  transform:translateX(3px);
}
.blog-card a::before {
  display:none;
}
@media(max-width:680px) {
  .blog-wrap {
    padding:46px 16px;
  }
  .blog-head {
    display:block;
    margin-bottom:22px;
  }
  .blog-head p {
    margin-top:16px;
  }
  .blog-grid {
    grid-template-columns:1fr;
  }
}
.about-section {
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(92,229,168,.14), transparent 28%),
    radial-gradient(circle at 88% 82%, rgba(167,247,208,.08), transparent 25%),
    linear-gradient(135deg,#030d0a 0%,#071812 56%,#04110d 100%);
  border-top:1px solid rgba(103,237,178,.12);
  border-bottom:1px solid rgba(103,237,178,.12);
}
.about-section::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(126,214,176,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,214,176,.045) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(90deg,rgba(0,0,0,.7),transparent 88%);
}
.about-wrap {
  position:relative;
  width:min(1180px,100%);
  margin:0 auto;
  padding:76px 20px;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  gap:70px;
  align-items:end;
}
.about-kicker {
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:18px;
  color:#89f2bf;
  font-size:10px;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.about-kicker::before {
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#72ebb4;
  box-shadow:0 0 12px rgba(114,235,180,.7);
}
.about-copy h2 {
  max-width:700px;
  margin:0;
  color:#fff;
  font-size:clamp(36px,5vw,66px);
  line-height:.98;
  letter-spacing:-.07em;
}
.about-copy h2 span {
  color:var(--mint2);
}
.about-intro {
  max-width:590px;
  margin:24px 0 0;
  color:#b6c8c0;
  font-size:16px;
  line-height:1.75;
}
.about-side {
  padding:26px 0 4px 28px;
  border-left:1px solid rgba(103,237,178,.28);
}
.about-signal {
  position:relative;
  width:142px;
  height:74px;
  margin:0 0 22px;
}
.about-signal::before,
.about-signal::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(114,235,180,.28);
  border-radius:50%;
  transform:translate(-50%,-50%);
}
.about-signal::before {
  width:112px;
  height:50px;
}
.about-signal::after {
  width:76px;
  height:76px;
  border-color:rgba(167,247,208,.16);
}
.about-signal-core {
  position:absolute;
  left:50%;
  top:50%;
  width:42px;
  height:42px;
  transform:translate(-50%,-50%);
  border-radius:15px;
  background:linear-gradient(145deg,#1b5a41 0%,#0a281d 100%);
  border:1px solid rgba(167,247,208,.25);
  box-shadow:0 0 0 8px rgba(92,229,168,.06), 0 14px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);
  animation:aboutCoreFloat 3.8s ease-in-out infinite;
}
.about-signal-core::before {
  content:"";
  position:absolute;
  left:12px;
  top:11px;
  width:16px;
  height:11px;
  border:2px solid #a7f7d0;
  border-top:0;
  border-radius:0 0 12px 12px;
}
.about-signal-core::after {
  content:"";
  position:absolute;
  left:18px;
  top:8px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#72ebb4;
  box-shadow:0 0 13px rgba(114,235,180,.9);
}
.about-signal-dot {
  position:absolute;
  left:12px;
  top:31px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#72ebb4;
  box-shadow:0 0 12px rgba(114,235,180,.7);
  animation:aboutSignalTravel 4.4s ease-in-out infinite;
}
.about-prep-animation {
  position:relative;
  width:100%;
  max-width:none;
  height:22px;
  margin:-4px 0 20px;
  overflow:hidden;
  border-radius:999px;
  border:1px solid rgba(103,237,178,.14);
  background:linear-gradient(90deg, rgba(92,229,168,.03), rgba(167,247,208,.07), rgba(92,229,168,.03));
}
.about-prep-animation::before {
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  top:50%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(114,235,180,.3), transparent);
}
.about-prep-animation::after {
  content:"";
  position:absolute;
  top:50%;
  left:-16px;
  width:12px;
  height:12px;
  margin-top:-6px;
  border-radius:50%;
  background:#72ebb4;
  box-shadow:0 0 0 3px rgba(114,235,180,.1), 0 0 12px rgba(114,235,180,.7);
  animation:aboutPrepScan 3.6s ease-in-out infinite;
}
.about-prep-animation span {
  position:absolute;
  top:50%;
  width:5px;
  height:5px;
  margin-top:-2.5px;
  border-radius:50%;
  background:rgba(167,247,208,.5);
  box-shadow:0 0 7px rgba(167,247,208,.35);
}
.about-prep-animation span:nth-child(1) { left:28%; animation:aboutPrepDot 2.4s ease-in-out infinite; }
.about-prep-animation span:nth-child(2) { left:52%; animation:aboutPrepDot 2.4s ease-in-out .35s infinite; }
.about-prep-animation span:nth-child(3) { left:76%; animation:aboutPrepDot 2.4s ease-in-out .7s infinite; }
@keyframes aboutPrepScan {
  0%,100% { transform:translateX(0) scale(.72); opacity:.35; }
  48% { transform:translateX(calc(100vw - 40px)) scale(1); opacity:1; }
  52% { transform:translateX(calc(100vw - 40px)) scale(1); opacity:1; }
}
@keyframes aboutPrepDot {
  0%,100% { transform:scale(.75); opacity:.35; }
  50% { transform:scale(1.35); opacity:1; }
}
@keyframes aboutOrbit {
  0%,100% { transform:translate(-50%,-50%) rotate(-8deg) scale(1); opacity:.55; }
  50% { transform:translate(-50%,-50%) rotate(8deg) scale(1.08); opacity:1; }
}
@keyframes aboutOrbitReverse {
  from { transform:translate(-50%,-50%) rotate(0deg); }
  to { transform:translate(-50%,-50%) rotate(-360deg); }
}
@keyframes aboutCoreFloat {
  0%,100% { transform:translate(-50%,-50%) translateY(0); }
  50% { transform:translate(-50%,-50%) translateY(-6px); }
}
@keyframes aboutSignalTravel {
  0%,100% { transform:translateX(0) scale(.8); opacity:.5; }
  50% { transform:translateX(114px) scale(1.2); opacity:1; }
}
.about-readiness {
  position:relative;
  width:100%;
  height:54px;
  margin:0 0 22px;
}
.about-readiness-track {
  position:absolute;
  left:7px;
  right:7px;
  top:25px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(92,229,168,.12), rgba(114,235,180,.54), rgba(167,247,208,.16));
  overflow:hidden;
}
.about-readiness-track::after {
  content:"";
  position:absolute;
  inset:0 auto 0 -35%;
  width:34%;
  border-radius:inherit;
  background:linear-gradient(90deg, transparent, #a7f7d0, transparent);
  filter:blur(1px);
  animation:readinessScan 3s ease-in-out infinite;
}
.about-readiness-node {
  position:absolute;
  top:12px;
  width:28px;
  height:28px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#164a36,#0a291e);
  border:1px solid rgba(167,247,208,.3);
  box-shadow:0 0 0 5px rgba(92,229,168,.06), 0 9px 20px rgba(0,0,0,.22);
  color:#a7f7d0;
}
.about-readiness-node svg {
  width:14px;
  height:14px;
  stroke-dasharray:24;
  stroke-dashoffset:24;
  animation:readinessCheck 3s ease-in-out infinite;
}
.about-readiness-node.node-one { left:0; animation:readinessNode 3s ease-in-out infinite; }
.about-readiness-node.node-two { left:calc(50% - 14px); animation:readinessNode 3s ease-in-out .42s infinite; }
.about-readiness-node.node-three { right:0; animation:readinessNode 3s ease-in-out .84s infinite; }
.about-readiness-pulse {
  position:absolute;
  top:20px;
  left:6px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#72ebb4;
  box-shadow:0 0 0 5px rgba(114,235,180,.12), 0 0 15px rgba(114,235,180,.9);
  animation:readinessPulse 3s ease-in-out infinite;
}
@keyframes readinessScan {
  0%,18% { transform:translateX(0); opacity:0; }
  28%,72% { opacity:1; }
  82%,100% { transform:translateX(400%); opacity:0; }
}
@keyframes readinessPulse {
  0%,12% { transform:translateX(0) scale(.65); opacity:0; }
  22% { opacity:1; }
  74% { transform:translateX(calc(100% - 14px)) scale(1); opacity:1; }
  100% { transform:translateX(calc(100% - 14px)) scale(.65); opacity:0; }
}
@keyframes readinessNode {
  0%,18%,100% { transform:translateY(0); border-color:rgba(167,247,208,.3); box-shadow:0 0 0 5px rgba(92,229,168,.06), 0 9px 20px rgba(0,0,0,.22); }
  32%,46% { transform:translateY(-5px); border-color:rgba(167,247,208,.8); box-shadow:0 0 0 7px rgba(92,229,168,.1), 0 13px 24px rgba(0,0,0,.26); }
}
@keyframes readinessCheck {
  0%,22% { stroke-dashoffset:24; opacity:.3; }
  34%,78% { stroke-dashoffset:0; opacity:1; }
  100% { stroke-dashoffset:24; opacity:.3; }
}
.about-side p {
  margin:0 0 26px;
  color:#d8e8df;
  font-size:18px;
  line-height:1.5;
  letter-spacing:-.025em;
}
.about-principles {
  display:grid;
  gap:14px;
}
.about-principle {
  display:flex;
  align-items:baseline;
  gap:14px;
  color:#8fae9f;
  font-size:12px;
  line-height:1.5;
}
.about-principle strong {
  min-width:26px;
  color:#72ebb4;
  font-size:11px;
  letter-spacing:.08em;
}
.about-principle span {
  color:#dcebe3;
  font-weight:700;
}
.feature-list-section {
  background:linear-gradient(180deg,#ffffff 0%, #fbfcfb 100%);
  color:#102019;
}
.feature-list-wrap {
  width:min(1180px,100%);
  margin:0 auto;
  padding:18px 20px 8px;
}
.feature-list-head {
  margin-bottom:20px;
}
.feature-list-head h2 {
  margin:0 0 8px;
  padding-bottom:10px;
  color:#102019;
  font-size:clamp(34px,4vw,56px);
  line-height:1.02;
  letter-spacing:-.06em;
  border-bottom:1px solid rgba(92,229,168,.8);
  display:inline-block;
  text-transform:none;
}
.feature-list-head p {
  margin:0;
  max-width:720px;
  color:#6f8278;
  font-size:13px;
  line-height:1.7;
}
.feature-list-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.feature-item {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 260px;
  gap:14px;
  align-items:center;
  padding:14px 14px 12px;
  border-radius:18px;
  background:#ffffff;
  border:1px solid rgba(16,32,25,.08);
  box-shadow:0 10px 22px rgba(27,44,35,.06);
  overflow:hidden;
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease;
}
.feature-item::before {
  content:none;
}
.feature-item::after {
  content:none;
}
.feature-item:hover {
  transform:translateY(-4px);
  border-color:rgba(16,32,25,.12);
  box-shadow:0 18px 32px rgba(27,44,35,.1);
}
.feature-item > * {
  position:relative;
  z-index:1;
}
.feature-item-copy {
  min-width:0;
}
.feature-item-media {
  min-height:150px;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(180deg,#ffffff 0%, #f7faf8 100%);
  box-shadow:0 10px 20px rgba(27,44,35,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.feature-item-media img,
.feature-item-media video {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:linear-gradient(180deg,#fbfcfb 0%, #f3f7f4 100%);
  padding:0;
}
.osint-style-card {
  width:100%;
  height:100%;
  min-height:150px;
  padding:16px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:
    radial-gradient(circle at 10% 14%, rgba(92,229,168,.1), transparent 22%),
    linear-gradient(180deg,#ffffff 0%, #f7faf8 100%);
}
.osint-style-badge {
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(16,32,25,.1);
  background:#ffffff;
  color:#4e5f57;
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  box-shadow:0 8px 18px rgba(27,44,35,.06);
}
.osint-style-badge::before {
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(180deg,#72ebb4,#39bf78);
  box-shadow:0 0 0 4px rgba(92,229,168,.12);
}
.osint-style-card h4 {
  margin:14px 0 8px;
  color:#1f2740;
  font-size:clamp(20px,2vw,28px);
  line-height:1.06;
  letter-spacing:-.06em;
}
.osint-style-card p {
  margin:0;
  max-width:520px;
  color:#6c778a;
  font-size:11px;
  line-height:1.65;
}
.osint-style-actions {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:18px;
}
.osint-style-action {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  padding:10px 14px;
  border-radius:16px;
  border:1px solid rgba(16,32,25,.1);
  background:linear-gradient(180deg,#ffffff 0%, #f8faf9 100%);
  box-shadow:0 10px 20px rgba(27,44,35,.08);
  color:#1f2740;
  font-size:10px;
  font-weight:900;
  letter-spacing:-.01em;
}
.osint-style-action svg {
  width:16px;
  height:16px;
  flex:0 0 auto;
  color:#78cdb0;
}
.ai-content-logo-card {
  position:relative;
  width:100%;
  height:100%;
  min-height:150px;
  overflow:hidden;
  background:#f8faf8;
}
.ai-content-logo-card > img:first-child {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.ai-content-logo-badge {
  position:absolute;
  right:16px;
  bottom:16px;
  width:74px;
  height:auto;
  display:block;
  padding:8px;
  border-radius:18px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(16,32,25,.08);
  box-shadow:0 14px 30px rgba(27,44,35,.12);
  backdrop-filter:blur(8px);
}
.ai-content-art {
  width:100%;
  height:100%;
  min-height:150px;
  display:block;
}
.ai-content-still {
  position:relative;
  width:100%;
  height:100%;
  min-height:150px;
  display:block;
  overflow:hidden;
  border-radius:16px;
  background:linear-gradient(180deg,#f9fcfa 0%, #f2f8f4 100%);
}
.ai-content-still img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.ai-mini-animation {
  position:relative;
  width:100%;
  height:100%;
  min-height:210px;
  overflow:hidden;
  background:transparent;
  transform:scale(.92);
  transform-origin:center;
}
.ai-mini-glow {
  position:absolute;
  inset:auto;
  width:56px;
  height:56px;
  left:34px;
  top:26px;
  border-radius:50%;
  background:rgba(92,229,168,.08);
  filter:blur(18px);
  animation:aiGlow 3.6s ease-in-out infinite;
}
.ai-mini-card,
.ai-mini-output,
.ai-mini-prompt,
.ai-mini-flow span {
  position:absolute;
}
.ai-mini-card {
  left:38px;
  top:40px;
  width:50px;
  height:66px;
  border-radius:15px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(244,249,246,.96));
  border:1px solid rgba(16,32,25,.05);
  box-shadow:0 10px 22px rgba(27,44,35,.06);
}
.ai-mini-card::before {
  content:"";
  position:absolute;
  left:11px;
  right:11px;
  top:14px;
  height:6px;
  border-radius:999px;
  background:rgba(92,229,168,.26);
}
.ai-mini-card::after {
  content:"";
  position:absolute;
  left:11px;
  right:16px;
  top:27px;
  height:21px;
  border-radius:8px;
  background:
    linear-gradient(180deg, rgba(92,229,168,.12), rgba(92,229,168,.04));
}
.ai-mini-card.card-a { animation:aiCardOne 4.2s ease-in-out infinite; }
.ai-mini-card.card-b {
  left:54px;
  top:34px;
  opacity:.88;
  animation:aiCardTwo 4.8s ease-in-out infinite;
}
.ai-mini-card.card-c {
  left:70px;
  top:46px;
  opacity:.82;
  animation:aiCardThree 4.5s ease-in-out infinite;
}
.ai-mini-prompt {
  left:34px;
  bottom:32px;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(92,229,168,.09);
  border:1px solid rgba(92,229,168,.12);
  color:#184332;
  font-size:9px;
  font-weight:900;
  letter-spacing:.04em;
  animation:aiPromptFloat 3.4s ease-in-out infinite;
}
.ai-mini-flow {
  position:absolute;
  left:112px;
  top:58px;
  width:44px;
  height:28px;
}
.ai-mini-flow span {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#72ebb4;
  box-shadow:0 0 10px rgba(114,235,180,.3);
  animation:aiArrowPulse 2s ease-in-out infinite;
}
.ai-mini-flow span:nth-child(1) {
  left:0;
  top:11px;
}
.ai-mini-flow span:nth-child(2) {
  left:16px;
  top:11px;
  animation-delay:.2s;
}
.ai-mini-flow span:nth-child(3) {
  left:32px;
  top:11px;
  animation-delay:.4s;
}
.ai-mini-output {
  right:34px;
  width:58px;
  border-radius:15px;
  background:linear-gradient(180deg, #183f31 0%, #0d261d 100%);
  box-shadow:0 12px 24px rgba(7,20,15,.12);
}
.ai-mini-output::before {
  content:"";
  position:absolute;
  left:11px;
  right:11px;
  top:11px;
  height:5px;
  border-radius:999px;
  background:rgba(167,247,208,.34);
}
.ai-mini-output::after {
  content:"";
  position:absolute;
  left:11px;
  right:18px;
  top:22px;
  height:14px;
  border-radius:8px;
  background:rgba(255,255,255,.07);
}
.ai-mini-output.out-1 {
  top:28px;
  height:44px;
  animation:aiCardOne 5s ease-in-out infinite;
}
.ai-mini-output.out-2 {
  top:58px;
  height:38px;
  right:48px;
  animation:aiCardTwo 4.6s ease-in-out infinite;
}
.ai-mini-output.out-3 {
  top:84px;
  height:32px;
  right:28px;
  animation:aiCardThree 4.9s ease-in-out infinite;
}
.attack-mini-animation {
  position:relative;
  width:100%;
  height:100%;
  min-height:210px;
  overflow:hidden;
  background:transparent;
  transform:scale(.92);
  transform-origin:center;
}
.attack-mini-glow {
  position:absolute;
  inset:auto;
  width:72px;
  height:72px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(92,229,168,.08);
  filter:blur(18px);
  animation:attackGlow 3.8s ease-in-out infinite;
}
.attack-mini-hub,
.attack-mini-node,
.attack-mini-path,
.attack-mini-badge {
  position:absolute;
}
.attack-mini-hub {
  left:50%;
  top:50%;
  width:62px;
  height:62px;
  transform:translate(-50%,-50%);
  border-radius:20px;
  background:linear-gradient(180deg, #183f31 0%, #0d261d 100%);
  box-shadow:0 14px 28px rgba(7,20,15,.14);
  border:1px solid rgba(255,255,255,.06);
  animation:attackHubFloat 4.4s ease-in-out infinite;
}
.attack-mini-hub::before {
  content:"";
  position:absolute;
  left:15px;
  right:15px;
  top:14px;
  height:6px;
  border-radius:999px;
  background:rgba(167,247,208,.34);
}
.attack-mini-hub::after {
  content:"";
  position:absolute;
  left:18px;
  top:26px;
  width:26px;
  height:18px;
  border-radius:8px;
  border:2px solid rgba(255,255,255,.16);
  border-top-color:rgba(255,255,255,.34);
}
.attack-mini-hub span {
  position:absolute;
  left:50%;
  top:50%;
  width:8px;
  height:8px;
  margin:-4px 0 0 -4px;
  border-radius:50%;
  background:#72ebb4;
  box-shadow:0 0 12px rgba(114,235,180,.5);
}
.attack-mini-node {
  width:44px;
  height:44px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(244,249,246,.96));
  border:1px solid rgba(16,32,25,.06);
  box-shadow:0 10px 22px rgba(27,44,35,.08);
}
.attack-mini-node::before,
.attack-mini-node::after {
  content:"";
  position:absolute;
}
.attack-mini-node::before {
  left:10px;
  right:10px;
  top:9px;
  height:5px;
  border-radius:999px;
  background:rgba(92,229,168,.18);
}
.attack-mini-node::after {
  left:50%;
  top:50%;
  transform:translate(-50%,-40%);
  width:18px;
  height:18px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:18px 18px;
  opacity:.9;
}
.attack-mini-node.node-mail {
  left:30px;
  top:24px;
  animation:attackNodeOne 4.6s ease-in-out infinite;
}
.attack-mini-node.node-mail::after {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23184332' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5h16v11H4z'/%3E%3Cpath d='m5.5 8 6.5 5 6.5-5'/%3E%3C/svg%3E");
}
.attack-mini-node.node-sms {
  right:34px;
  top:22px;
  animation:attackNodeTwo 4.9s ease-in-out infinite;
}
.attack-mini-node.node-sms::after {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23184332' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6.5h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H11l-4 3v-3H5a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M8 10h8'/%3E%3Cpath d='M8 13h5'/%3E%3C/svg%3E");
}
.attack-mini-node.node-qr {
  left:40px;
  bottom:26px;
  animation:attackNodeThree 4.7s ease-in-out infinite;
}
.attack-mini-node.node-qr::after {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23184332' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6' height='6'/%3E%3Crect x='14' y='4' width='6' height='6'/%3E%3Crect x='4' y='14' width='6' height='6'/%3E%3Cpath d='M14 14h2v2h-2zM18 14h2v6h-6v-2h4z'/%3E%3C/svg%3E");
}
.attack-mini-node.node-call {
  right:40px;
  bottom:24px;
  animation:attackNodeFour 5s ease-in-out infinite;
}
.attack-mini-node.node-call::after {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23184332' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1A19.4 19.4 0 0 1 5.2 12.8 19.8 19.8 0 0 1 2.1 4.1 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7l.5 3a2 2 0 0 1-.6 1.8l-1.3 1.3a16 16 0 0 0 6.4 6.4l1.3-1.3a2 2 0 0 1 1.8-.6l3 .5A2 2 0 0 1 22 16.9Z'/%3E%3C/svg%3E");
}
.attack-mini-path {
  left:50%;
  top:50%;
  height:2px;
  transform-origin:left center;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(114,235,180,0), rgba(114,235,180,.9), rgba(114,235,180,0));
  opacity:.75;
}
.attack-mini-path::after {
  content:"";
  position:absolute;
  right:10px;
  top:50%;
  width:6px;
  height:6px;
  margin-top:-3px;
  border-radius:50%;
  background:#72ebb4;
  box-shadow:0 0 10px rgba(114,235,180,.42);
  animation:attackSignal 2.2s ease-in-out infinite;
}
.attack-mini-path.path-a {
  width:78px;
  transform:translate(-4px,-28px) rotate(-152deg);
}
.attack-mini-path.path-b {
  width:76px;
  transform:translate(2px,-28px) rotate(-30deg);
}
.attack-mini-path.path-c {
  width:74px;
  transform:translate(-4px,28px) rotate(150deg);
}
.attack-mini-path.path-d {
  width:72px;
  transform:translate(2px,28px) rotate(28deg);
}
.attack-mini-path.path-b::after { animation-delay:.25s; }
.attack-mini-path.path-c::after { animation-delay:.5s; }
.attack-mini-path.path-d::after { animation-delay:.75s; }
.attack-mini-badge {
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  padding:7px 11px;
  border-radius:999px;
  background:rgba(92,229,168,.09);
  border:1px solid rgba(92,229,168,.12);
  color:#184332;
  font-size:9px;
  font-weight:900;
  letter-spacing:.04em;
  animation:attackBadgeFloat 3.5s ease-in-out infinite;
}
.osint-mini-animation {
  position:relative;
  width:100%;
  height:100%;
  min-height:210px;
  overflow:hidden;
  background:transparent;
  transform:scale(.92);
  transform-origin:center;
}
.osint-mini-glow {
  position:absolute;
  width:72px;
  height:72px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(92,229,168,.08);
  filter:blur(18px);
  animation:osintGlow 4s ease-in-out infinite;
}
.osint-radar {
  position:absolute;
  left:50%;
  top:50%;
  width:128px;
  height:128px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(16,32,25,.08);
  background:
    radial-gradient(circle, transparent 0 30%, rgba(92,229,168,.05) 30% 31%, transparent 31% 54%, rgba(92,229,168,.05) 54% 55%, transparent 55% 78%, rgba(92,229,168,.08) 78% 79%, transparent 79% 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
}
.osint-radar::before {
  content:"";
  position:absolute;
  inset:10px;
  border-radius:50%;
  border:1px dashed rgba(92,229,168,.18);
}
.osint-radar::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:64px;
  height:2px;
  transform-origin:left center;
  background:linear-gradient(90deg, rgba(114,235,180,.95), rgba(114,235,180,0));
  box-shadow:0 0 16px rgba(114,235,180,.35);
  animation:osintSweep 3.6s linear infinite;
}
.osint-center {
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:18px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:linear-gradient(180deg,#183f31 0%, #0d261d 100%);
  box-shadow:0 0 0 8px rgba(92,229,168,.08), 0 8px 18px rgba(7,20,15,.14);
}
.osint-center::before {
  content:"";
  position:absolute;
  inset:5px;
  border-radius:50%;
  background:#72ebb4;
  box-shadow:0 0 12px rgba(114,235,180,.5);
}
.osint-node,
.osint-line,
.osint-tag {
  position:absolute;
}
.osint-node {
  width:40px;
  height:40px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(244,249,246,.96));
  border:1px solid rgba(16,32,25,.06);
  box-shadow:0 10px 22px rgba(27,44,35,.08);
}
.osint-node::before,
.osint-node::after {
  content:"";
  position:absolute;
}
.osint-node::before {
  left:10px;
  right:10px;
  top:9px;
  height:5px;
  border-radius:999px;
  background:rgba(92,229,168,.18);
}
.osint-node::after {
  left:50%;
  top:50%;
  transform:translate(-50%,-35%);
  width:16px;
  height:16px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:16px 16px;
  opacity:.92;
}
.osint-node.node-domain {
  left:32px;
  top:28px;
  animation:osintNodeOne 4.8s ease-in-out infinite;
}
.osint-node.node-domain::after {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23184332' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M12 4a12 12 0 0 1 0 16'/%3E%3Cpath d='M12 4a12 12 0 0 0 0 16'/%3E%3C/svg%3E");
}
.osint-node.node-people {
  right:30px;
  top:26px;
  animation:osintNodeTwo 5s ease-in-out infinite;
}
.osint-node.node-people::after {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23184332' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='3'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 4.13a3 3 0 0 1 0 5.74'/%3E%3C/svg%3E");
}
.osint-node.node-creds {
  left:40px;
  bottom:26px;
  animation:osintNodeThree 4.7s ease-in-out infinite;
}
.osint-node.node-creds::after {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23184332' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 16v-1a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v1'/%3E%3Ccircle cx='12' cy='7' r='3'/%3E%3Cpath d='M17 16v3'/%3E%3Cpath d='M15.5 17.5h3'/%3E%3C/svg%3E");
}
.osint-node.node-campaign {
  right:38px;
  bottom:24px;
  animation:osintNodeFour 5.1s ease-in-out infinite;
}
.osint-node.node-campaign::after {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23184332' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3 3 10l7 2 2 7 9-16Z'/%3E%3Cpath d='M10 12l4 4'/%3E%3C/svg%3E");
}
.osint-line {
  left:50%;
  top:50%;
  height:2px;
  transform-origin:left center;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(114,235,180,0), rgba(114,235,180,.9), rgba(114,235,180,0));
  opacity:.72;
}
.osint-line::after {
  content:"";
  position:absolute;
  right:12px;
  top:50%;
  width:6px;
  height:6px;
  margin-top:-3px;
  border-radius:50%;
  background:#72ebb4;
  box-shadow:0 0 10px rgba(114,235,180,.42);
  animation:osintSignal 2.1s ease-in-out infinite;
}
.osint-line.line-a {
  width:74px;
  transform:translate(-2px,-26px) rotate(-150deg);
}
.osint-line.line-b {
  width:72px;
  transform:translate(4px,-26px) rotate(-28deg);
}
.osint-line.line-c {
  width:70px;
  transform:translate(-2px,28px) rotate(150deg);
}
.osint-line.line-d {
  width:68px;
  transform:translate(4px,28px) rotate(28deg);
}
.osint-line.line-b::after { animation-delay:.2s; }
.osint-line.line-c::after { animation-delay:.45s; }
.osint-line.line-d::after { animation-delay:.7s; }
.osint-tag {
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  padding:7px 11px;
  border-radius:999px;
  background:rgba(92,229,168,.09);
  border:1px solid rgba(92,229,168,.12);
  color:#184332;
  font-size:9px;
  font-weight:900;
  letter-spacing:.04em;
  animation:osintTagFloat 3.5s ease-in-out infinite;
}
.feature-item h3 {
  margin:0 0 8px;
  color:#102019;
  font-size:18px;
  line-height:1.02;
  letter-spacing:-.05em;
  display:flex;
  align-items:center;
  gap:10px;
}
.feature-item h3::before {
  content:"";
  width:34px;
  height:34px;
  border-radius:12px;
  flex:0 0 34px;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.14) 0 12%, transparent 13%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    linear-gradient(180deg,#174936,#0d281e);
  box-shadow:
    0 8px 18px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.08);
  background-repeat:no-repeat;
  background-position:center;
  background-size:16px 16px,100% 100%,100% 100%;
}
.feature-item:nth-child(1) h3::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8f5d3' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='5' width='15' height='14' rx='2.2'/%3E%3Cpath d='M8 9h8'/%3E%3Cpath d='M8 12h5'/%3E%3Cpath d='M8 15h7'/%3E%3Cpath d='M16.5 5V3.5'/%3E%3Cpath d='M7.5 5V3.5'/%3E%3C/svg%3E"),
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.14) 0 12%, transparent 13%),
    linear-gradient(180deg,#174936,#0d281e);
}
.feature-item:nth-child(2) h3::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8f5d3' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3 3 10l7 2 2 7 9-16Z'/%3E%3Cpath d='M10 12l4 4'/%3E%3C/svg%3E"),
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.14) 0 12%, transparent 13%),
    linear-gradient(180deg,#143f2f,#0a2319);
}
.feature-item:nth-child(3) h3::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8f5d3' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3Cpath d='M11 8.5v5'/%3E%3Cpath d='M8.5 11h5'/%3E%3C/svg%3E"),
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.14) 0 12%, transparent 13%),
    linear-gradient(180deg,#184b39,#0b2a1f);
}
.feature-item:nth-child(4) h3::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8f5d3' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 19 7v5c0 4.5-2.9 7.3-7 8.5C7.9 19.3 5 16.5 5 12V7l7-3.5Z'/%3E%3Cpath d='M9 12.5 11 14.5l4-5'/%3E%3C/svg%3E"),
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.14) 0 12%, transparent 13%),
    linear-gradient(180deg,#123a2b,#081f17);
}
.feature-item:nth-child(5) h3::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8f5d3' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M8 3v4'/%3E%3Cpath d='M16 3v4'/%3E%3Cpath d='M4 10h16'/%3E%3Cpath d='M8 13h3'/%3E%3Cpath d='M8 16h6'/%3E%3C/svg%3E"),
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.14) 0 12%, transparent 13%),
    linear-gradient(180deg,#174936,#0d281e);
}
.feature-item:nth-child(6) h3::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8f5d3' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5h16v11H4z'/%3E%3Cpath d='M8 20h8'/%3E%3Cpath d='M10 17v3'/%3E%3Cpath d='M14 17v3'/%3E%3Cpath d='m10 10 4 2-4 2v-4Z'/%3E%3C/svg%3E"),
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.14) 0 12%, transparent 13%),
    linear-gradient(180deg,#153f30,#0a2319);
}
.feature-item:nth-child(7) h3::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8f5d3' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5V7.8c0-.9.4-1.7 1.1-2.2l6.8-4.5a2 2 0 0 1 2.2 0l6.8 4.5c.7.5 1.1 1.3 1.1 2.2v3.7c0 4.2-2.4 8-6.2 9.7l-1.9.9-1.9-.9C5.4 19.5 3 15.7 3 11.5Z'/%3E%3Cpath d='M8.5 11.5h7'/%3E%3Cpath d='M12 8v7'/%3E%3C/svg%3E"),
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.14) 0 12%, transparent 13%),
    linear-gradient(180deg,#103528,#081d16);
}
.feature-item:nth-child(8) h3::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8f5d3' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V9'/%3E%3Cpath d='M10 19V5'/%3E%3Cpath d='M16 19v-8'/%3E%3Cpath d='M22 19v-4'/%3E%3Cpath d='M3 19h20'/%3E%3C/svg%3E"),
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.14) 0 12%, transparent 13%),
    linear-gradient(180deg,#174936,#0b271d);
}
.feature-item .feature-strap {
  display:inline-block;
  margin-bottom:10px;
  padding:7px 10px;
  border-radius:999px;
  background:#f7f8f7;
  border:1px solid rgba(16,32,25,.08);
  color:#51635b;
  font-size:7.5px;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
  box-shadow:none;
}
.feature-item-media .feature-strap {
  position:absolute;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  margin:0;
  max-width:calc(100% - 24px);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  box-shadow:0 10px 24px rgba(27,44,35,.08);
  text-align:center;
}
.feature-item p {
  margin:0;
  color:#5f7369;
  font-size:12.5px;
  line-height:1.65;
}
.feature-item .feature-more {
  margin-top:12px;
  align-self:flex-start;
}
.feature-more {
  margin-top:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:8px 12px;
  border:1px solid rgba(16,32,25,.12);
  border-radius:999px;
  background:#ffffff;
  color:#102019;
  font-size:9px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(27,44,35,.05);
  transition:color .2s ease, transform .2s ease, opacity .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.feature-more::after {
  content:"→";
  font-size:11px;
  line-height:1;
  transition:transform .2s ease;
}
.feature-more:hover {
  transform:translateY(-2px);
  color:#102019;
  opacity:1;
  background:#f7f8f7;
  border-color:rgba(16,32,25,.18);
  box-shadow:0 12px 22px rgba(27,44,35,.08);
}
.feature-more:hover::after {
  transform:translateX(2px);
}
.feature-popup {
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  padding:20px;
  background:rgba(1,7,5,.74);
  backdrop-filter:blur(14px);
  z-index:120;
}
.feature-popup.open {
  display:grid;
}
.feature-popup-card {
  width:min(980px,100%);
  max-height:min(84vh,860px);
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:#39bf78 rgba(92,229,168,.12);
  border-radius:28px;
  padding:22px;
  background:linear-gradient(180deg,#ffffff 0%, #f8fbf9 100%);
  border:1px solid rgba(16,32,25,.08);
  box-shadow:0 30px 80px rgba(0,0,0,.22);
  color:#102019;
}
.feature-popup-card::-webkit-scrollbar {
  width:10px;
}
.feature-popup-card::-webkit-scrollbar-track {
  background:rgba(92,229,168,.12);
  border-radius:999px;
}
.feature-popup-card::-webkit-scrollbar-thumb {
  background:linear-gradient(180deg,#72ebb4 0%, #39bf78 100%);
  border-radius:999px;
  border:2px solid rgba(255,255,255,.9);
}
.feature-popup-card::-webkit-scrollbar-thumb:hover {
  background:linear-gradient(180deg,#84efbe 0%, #2fb06d 100%);
}
.feature-popup-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:16px;
}
.feature-popup-head h3 {
  margin:0 0 6px;
  font-size:30px;
  line-height:1.02;
  letter-spacing:-.05em;
}
.feature-popup-head p {
  margin:0;
  color:#39bf78;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.feature-popup-close {
  width:42px;
  height:42px;
  border-radius:50%;
  border:0;
  background:linear-gradient(180deg,#8ee3ab 0%, #39bf78 100%);
  color:#0b2017;
  font-size:24px;
  cursor:pointer;
  flex:0 0 auto;
  box-shadow:0 10px 22px rgba(57,191,120,.24);
}
.feature-popup-body p,
.feature-popup-body li {
  color:#5f7369;
  font-size:13px;
  line-height:1.75;
}
.feature-popup-body p {
  margin:0 0 14px;
}
.feature-video {
  margin:0 0 18px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(16,32,25,.08);
  box-shadow:0 18px 36px rgba(27,44,35,.1);
  background:linear-gradient(180deg,#0b1f18 0%, #081510 100%);
}
.feature-video video {
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}
.feature-popup-body ul {
  margin:0;
  padding-left:18px;
  display:grid;
  gap:10px;
}
.feature-popup-body strong {
  color:#102019;
}
.contact-popup-card {
  width:min(680px,100%);
  max-height:min(88vh,860px);
  padding:0;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  border:1px solid rgba(92,229,168,.22);
  border-radius:24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(92,229,168,.12), transparent 34%),
    linear-gradient(145deg,#ffffff 0%,#f6faf7 100%);
  box-shadow:0 32px 90px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.72) inset;
}
.contact-popup-card .feature-popup-head {
  position:relative;
  margin:0;
  padding:28px 30px 24px;
  overflow:hidden;
  border-radius:23px 23px 0 0;
  background:
    radial-gradient(circle at 86% 25%, rgba(167,247,208,.16), transparent 26%),
    linear-gradient(135deg,#103528 0%,#0b2118 100%);
}
.contact-popup-card .feature-popup-head::after {
  content:"";
  position:absolute;
  right:-38px;
  bottom:-52px;
  width:170px;
  height:170px;
  border:1px solid rgba(167,247,208,.18);
  border-radius:50%;
  box-shadow:0 0 0 24px rgba(167,247,208,.035), 0 0 0 48px rgba(167,247,208,.025);
}
.contact-popup-card .feature-popup-head > * {
  position:relative;
  z-index:1;
}
.contact-popup-logo {
  position:absolute;
  right:88px;
  top:16px;
  width:62px;
  height:62px;
  object-fit:contain;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.2));
  animation:headerLogoSway 4.8s ease-in-out infinite;
}
.contact-popup-card .feature-popup-head h3 {
  margin:0 0 8px;
  color:#fff;
  font-size:clamp(26px,4vw,34px);
}
.contact-popup-card .feature-popup-head p {
  color:#a7f7d0;
  font-size:11px;
  letter-spacing:.1em;
}
.contact-popup-card .feature-popup-close {
  width:38px;
  height:38px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(167,247,208,.26);
  color:#eafff4;
  box-shadow:none;
  transition:transform .2s ease, background .2s ease;
}
.contact-popup-card .feature-popup-close:hover {
  transform:rotate(90deg);
  background:rgba(92,229,168,.22);
}
.contact-popup-card .feature-popup-body {
  padding:18px 24px 22px;
}
.contact-popup-card .feature-popup-body::before {
  content:"Your details are kept private and used only to respond to your enquiry.";
  display:flex;
  align-items:center;
  min-height:32px;
  margin:0 0 14px;
  padding:0 11px;
  border:1px solid rgba(57,191,120,.16);
  border-radius:9px;
  background:rgba(92,229,168,.06);
  color:#477061;
  font-size:10px;
  font-weight:700;
}
.contact-form {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  padding:16px;
  border:1px solid rgba(57,191,120,.2);
  border-radius:16px;
  background:rgba(255,255,255,.68);
}
.contact-field {
  display:grid;
  gap:4px;
}
.contact-field.full,
.contact-privacy,
.contact-submit {
  grid-column:1 / -1;
}
.contact-field label,
.contact-privacy {
  color:#31483d;
  font-size:11px;
  font-weight:800;
}
.contact-field input,
.contact-field select,
.contact-field textarea {
  width:100%;
  height:38px;
  padding:0 11px;
  border:1px solid #d9e7df;
  border-radius:9px;
  background:#fff;
  color:#102019;
  font:inherit;
  font-size:13px;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.contact-field input:hover,
.contact-field select:hover {
  border-color:#a9d9bc;
  background:#fcfefd;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-color:#72ebb4;
  box-shadow:0 0 0 3px rgba(92,229,168,.15);
}
.contact-field textarea {
  min-height:88px;
  height:auto;
  padding:10px 11px;
  resize:vertical;
}
.contact-privacy {
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:2px;
  line-height:1.4;
}
.contact-privacy input {
  width:14px;
  height:14px;
  margin:1px 0 0;
  accent-color:#39bf78;
  flex:0 0 auto;
}
.contact-privacy a {
  color:#268657;
}
.contact-submit {
  width:100%;
  min-height:38px;
  margin-top:3px;
  padding:8px 14px;
  border:1px solid #a7f7d0 !important;
  border-radius:8px;
  color:#102019 !important;
  background:#a7f7d0 !important;
  box-shadow:0 10px 22px rgba(167,247,208,.24) !important;
}
.contact-submit:hover {
  transform:translateY(-1px);
  border-color:#a7f7d0 !important;
  background:#a7f7d0 !important;
  box-shadow:0 14px 26px rgba(167,247,208,.3) !important;
}
.design-shot {
  margin-top:22px;
  width:min(100%, 560px);
  display:block;
  border-radius:24px;
  border:1px solid rgba(103,237,178,.14);
  box-shadow:0 24px 60px rgba(0,0,0,.28);
}
.actions {
  display:flex;
  gap:12px;
  flex-wrap:nowrap;
  margin-top:30px;
}
.btn {
  --btn-shadow:0 18px 38px rgba(0,0,0,.24);
  --btn-border:rgba(255,255,255,.14);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:12px 18px;
  border-radius:16px;
  border:1px solid var(--btn-border);
  font-weight:900;
  font-size:13px;
  letter-spacing:.01em;
  cursor:pointer;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease, color .24s ease;
  box-shadow:var(--btn-shadow);
}
.btn span {
  position:relative;
  z-index:2;
}
.btn .btn-icon {
  width:16px;
  height:16px;
  display:block;
  position:relative;
  z-index:2;
  flex:0 0 auto;
}
.btn.primary {
  color:#f3fff8;
  --btn-border:rgba(127,244,192,.28);
  --btn-shadow:
    0 20px 42px rgba(0,0,0,.28),
    0 8px 18px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -18px 30px rgba(0,0,0,.18);
  background:
    radial-gradient(circle at 18% 18%, rgba(167,247,208,.18), transparent 30%),
    linear-gradient(135deg, rgba(20,57,43,.96) 0%, rgba(8,27,20,.96) 55%, rgba(4,14,10,.98) 100%);
}
.btn.secondary {
  color:#f3fff8;
  --btn-border:rgba(127,244,192,.28);
  --btn-shadow:
    0 20px 42px rgba(0,0,0,.28),
    0 8px 18px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -18px 30px rgba(0,0,0,.18);
  background:
    radial-gradient(circle at 18% 18%, rgba(167,247,208,.18), transparent 30%),
    linear-gradient(135deg, rgba(20,57,43,.96) 0%, rgba(8,27,20,.96) 55%, rgba(4,14,10,.98) 100%);
}
.btn::before {
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 46%);
  pointer-events:none;
}
.btn::after {
  content:"";
  position:absolute;
  inset:-30%;
  background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,.42) 38%, transparent 56%);
  transform:translateX(-120%) rotate(8deg);
  transition:transform .75s ease;
  pointer-events:none;
}
.btn:hover {
  transform:translateY(-3px) scale(1.015);
}
.btn:hover::after {
  transform:translateX(120%) rotate(8deg);
}
.btn.primary:hover {
  color:#ffffff;
  --btn-border:rgba(148,248,204,.48);
  --btn-shadow:
    0 26px 50px rgba(0,0,0,.34),
    0 12px 24px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -18px 30px rgba(0,0,0,.2);
}
.btn.secondary:hover {
  color:#ffffff;
  --btn-border:rgba(148,248,204,.48);
  --btn-shadow:
    0 26px 50px rgba(0,0,0,.34),
    0 12px 24px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -18px 30px rgba(0,0,0,.2);
}
.btn:active {
  transform:translateY(-1px) scale(.995);
}
.btn.live-demo {
  color:#0a1b12;
  --btn-border:rgba(255,224,117,.62);
  --btn-shadow:
    0 22px 44px rgba(255,194,58,.24),
    0 10px 20px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -12px 24px rgba(218,136,17,.16);
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.75), transparent 32%),
    linear-gradient(135deg,#fffbe1 0%, #ffe27a 26%, #ffd451 52%, #ffbd38 100%);
}
.btn.live-demo:hover {
  transform:translateY(-3px) scale(1.015);
}

.actions .btn,
.notify-btn {
  min-height:42px;
  padding:10px 16px;
  border:1px solid rgba(103,237,178,.48) !important;
  border-radius:8px;
  background:transparent !important;
  color:#8ee3ab !important;
  box-shadow:none !important;
  font-size:12px;
}
.notify-btn {
  background:#a7f7d0 !important;
  border-color:#a7f7d0 !important;
  color:#102019 !important;
  box-shadow:0 10px 22px rgba(167,247,208,.24) !important;
}
.actions .btn::before,
.actions .btn::after,
.notify-btn::before,
.notify-btn::after {
  display:none;
}
.actions .btn:hover {
  transform:translateY(-1px);
  background:rgba(92,229,168,.08) !important;
  border-color:#8ee3ab !important;
  box-shadow:none !important;
}
.notify-btn:hover {
  transform:translateY(-1px);
  background:#a7f7d0 !important;
  border-color:#a7f7d0 !important;
  box-shadow:0 14px 26px rgba(167,247,208,.3) !important;
}

.preview-wrap {
  position:relative;
  perspective:1400px;
}
.preview-wrap::before {
  content:"";
  position:absolute;
  inset:-24px;
  border-radius:36px;
  background:
    radial-gradient(circle at 50% 40%, rgba(92,229,168,.18), transparent 40%),
    linear-gradient(135deg, rgba(92,229,168,.08), rgba(255,255,255,.02));
  filter:blur(18px);
}
.card {
  position:relative;
  aspect-ratio:1.16/1;
  border-radius:30px;
  overflow:hidden;
  border:none;
  background:
    radial-gradient(circle at 50% 15%, rgba(138,255,215,.08), transparent 28%),
    linear-gradient(180deg, #0a1713, #07110d);
  box-shadow:0 34px 86px rgba(0,0,0,.42), inset 0 0 42px rgba(92,229,168,.05);
  transform-style:preserve-3d;
  transition:transform .18s ease-out;
  animation:cardLift 5.6s ease-in-out infinite;
}
.card::before {
  content:"";
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,18,13,.04), rgba(2,7,5,.18)),
    radial-gradient(circle at 50% 50%, transparent 0 30%, rgba(1,7,5,.22) 92%);
}
.card::after {
  content:"";
  position:absolute; left:0; right:0; top:-32%; height:28%; z-index:4;
  background:linear-gradient(180deg, transparent, rgba(117,245,187,.11), transparent);
  filter:blur(3px);
  animation:scan 5.4s linear infinite;
}
.card-bg {
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(circle at 50% 32%, rgba(118,248,191,.08), transparent 24%),
    radial-gradient(circle at 80% 80%, rgba(118,248,191,.05), transparent 24%),
    linear-gradient(180deg, #091712 0%, #07100d 100%);
}
.ring,.ring2 {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  border-radius:50%; border:1px solid rgba(111,245,184,.14); z-index:2;
}
.ring { width:280px; height:280px; animation:spin 18s linear infinite; }
.ring2 { width:208px; height:208px; animation:spin2 12s linear infinite; }
.ring::before,.ring2::before {
  content:"";
  position:absolute; width:10px; height:10px; border-radius:50%;
  background:#91f3c6; box-shadow:0 0 16px rgba(145,243,198,.54);
}
.ring::before { left:50%; top:-5px; transform:translateX(-50%); }
.ring2::before { right:22px; top:18px; }
.visual {
  position:absolute;
  left:50%; top:50%;
  width:90%; max-width:490px;
  transform:translate(-50%,-50%) scale(1.02);
  z-index:5;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.34));
  transition:transform .22s ease-out;
  animation:visualDrift 6.8s ease-in-out infinite;
}
.scenario-switcher {
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:9;
  display:flex;
  gap:8px;
  flex-wrap:nowrap;
  max-width:calc(100% - 24px);
  width:max-content;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 2px 6px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.scenario-switcher::-webkit-scrollbar {
  display:none;
}
.scenario-btn {
  border:1px solid rgba(167,247,208,.22);
  background:rgba(4,16,11,.74);
  color:#e7fff3;
  border-radius:999px;
  padding:8px 12px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
  transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  flex:0 0 auto;
  white-space:nowrap;
}
.scenario-btn:hover {
  transform:translateY(-2px);
  border-color:rgba(167,247,208,.42);
  background:rgba(12,35,25,.88);
}
.scenario-btn.active {
  background:linear-gradient(90deg,#8ee3ab,#b4f1c8);
  color:#102019;
  border-color:rgba(103,237,178,.52);
}
.live {
  position:absolute;
  right:18px;
  top:18px;
  z-index:8;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:14px;
  border:1px solid rgba(167,247,208,.3);
  background:linear-gradient(135deg, rgba(6,33,21,.92) 0%, rgba(12,51,35,.88) 100%);
  color:#eafff4;
  font-size:10px;
  font-weight:950;
  letter-spacing:.1em;
  box-shadow:0 14px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
  text-transform:uppercase;
}
.live::before {
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#72ebb4;
  box-shadow:0 0 0 4px rgba(114,235,180,.14), 0 0 14px rgba(114,235,180,.6);
  animation:livePulse 1.8s ease-in-out infinite;
  flex:0 0 auto;
}
.play {
  position:absolute;
  left:18px;
  bottom:72px;
  width:62px;
  height:62px;
  padding:0;
  border:1px solid rgba(190,255,224,.6);
  border-radius:50%;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.72) 0%, rgba(255,255,255,.18) 18%, transparent 34%),
    linear-gradient(180deg, #8ff0bc 0%, #56d998 46%, #1f9f69 100%);
  box-shadow:
    0 22px 38px rgba(59,214,139,.34),
    0 10px 22px rgba(0,0,0,.24),
    inset 0 2px 0 rgba(255,255,255,.62),
    inset 0 -14px 24px rgba(8,93,54,.28),
    0 0 0 6px rgba(92,229,168,.08);
  color:transparent;
  font-size:0;
  text-decoration:none;
  z-index:10;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
  animation:playPulse 2.6s ease-in-out infinite;
}
.play:hover {
  transform:translateY(-3px) scale(1.05);
  box-shadow:
    0 28px 46px rgba(59,214,139,.42),
    0 14px 28px rgba(0,0,0,.28),
    inset 0 2px 0 rgba(255,255,255,.72),
    inset 0 -16px 28px rgba(8,93,54,.3),
    0 0 0 8px rgba(92,229,168,.1);
  filter:saturate(1.12) brightness(1.04);
}
.play::before {
  content:"▶";
  width:34px;
  height:34px;
  border-radius:50%;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.2);
  color:#062115;
  font-size:15px;
  line-height:1;
  padding-left:3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    0 8px 16px rgba(255,255,255,.12);
}
.play::after {
  content:"";
  position:absolute;
  inset:-18%;
  background:
    linear-gradient(125deg, transparent 16%, rgba(255,255,255,.38) 32%, transparent 48%),
    radial-gradient(circle at 50% 50%, rgba(167,247,208,.28) 0%, transparent 58%);
  transform:translateX(-130%);
  transition:transform .7s ease;
  pointer-events:none;
}
.play:hover::after {
  transform:translateX(130%);
}
.label {
  padding:12px 18px; border-radius:999px;
  border:1px solid rgba(126,246,192,.22);
  background:rgba(4,14,10,.72);
  color:#fff; font-size:11px; font-weight:950; letter-spacing:.06em;
}
.status {
  position:absolute; left:18px; bottom:72px; z-index:8;
  padding:11px 13px; border-radius:14px;
  background:rgba(4,16,11,.72);
  border:1px solid rgba(126,246,192,.14);
  color:#dff8ec; font-size:12px;
}
.status small {
  display:block; color:#8fae9f; font-size:10px; margin-bottom:3px;
}
.progress {
  margin-top:7px; height:5px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden;
}
.progress span {
  display:block; height:100%; width:68%;
  background:linear-gradient(90deg,var(--mint),var(--mint2));
  animation:progress 3s ease-in-out infinite alternate;
}
.logo {
  display:none;
}
.chip {
  position:absolute; z-index:7; padding:9px 12px; border-radius:999px;
  background:rgba(5,16,11,.7); border:1px solid rgba(129,247,192,.14);
  color:#e7fff3; font-size:11px; font-weight:850;
}
.chip.a { left:18px; top:18px; animation:floatChip 4.4s ease-in-out infinite; }
.chip.b { right:18px; bottom:82px; animation:floatChip 5.3s ease-in-out infinite .6s; }

.modal {
  position:fixed; inset:0; display:none; place-items:center;
  background:rgba(1,7,5,.82); backdrop-filter:blur(14px); padding:20px; z-index:100;
}
.modal.open { display:grid; }
.modal-card {
  width:min(860px,100%);
  padding:24px;
  border-radius:28px;
  background:linear-gradient(180deg,#071912,#07110d);
  border:1px solid rgba(120,245,187,.22);
}
.modal-head {
  display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:20px;
}
.modal-head h3 { margin:0 0 4px; font-size:24px; }
.modal-head p { margin:0; color:#9fb3a9; }
.close {
  width:42px; height:42px; border-radius:50%; border:0;
  background:#17362a; color:#fff; font-size:24px; cursor:pointer;
}
.modal-grid {
  display:grid; grid-template-columns:1.1fr .9fr; gap:18px;
}
.modal-visual {
  position:relative; min-height:360px; border-radius:18px; overflow:hidden;
  background:linear-gradient(180deg,#091712,#07100d);
}
.modal-visual img {
  width:100%; height:100%; object-fit:contain; padding:22px;
}
.hotspot {
  position:absolute; width:28px; height:28px; border-radius:50%;
  border:2px solid #8ef2c2; background:rgba(77,226,157,.22);
  box-shadow:0 0 0 9px rgba(76,226,157,.08),0 0 22px rgba(76,226,157,.42);
  animation:hotspot 2s ease-in-out infinite; cursor:pointer;
}
.h1 { left:39%; top:47%; }
.h2 { left:66%; top:27%; animation-delay:.5s; }
.h3 { left:77%; top:44%; animation-delay:1s; }
.panel {
  display:flex; flex-direction:column; gap:12px;
}
.box {
  padding:18px; border-radius:16px; background:#0d271c; border:1px solid #244b39;
}
.box small { display:block; color:#92ac9f; margin-bottom:5px; }
.option {
  padding:16px; border-radius:14px; border:1px solid #28503c;
  background:#0c2118; cursor:pointer;
}
.option:hover { border-color:var(--mint); }
.result { min-height:28px; color:#7bf0b8; font-weight:850; padding-top:6px; }

@keyframes scan { 0%{transform:translateY(0)} 100%{transform:translateY(620px)} }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes progress { from{width:48%} to{width:82%} }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes cardLift {
  0%,100% { transform:translateY(0) rotateX(0deg); box-shadow:0 34px 86px rgba(0,0,0,.42), inset 0 0 42px rgba(92,229,168,.05); }
  50% { transform:translateY(-10px) rotateX(1deg); box-shadow:0 46px 98px rgba(0,0,0,.5), 0 0 36px rgba(92,229,168,.12), inset 0 0 54px rgba(92,229,168,.09); }
}
@keyframes visualDrift {
  0%,100% { transform:translate(-50%,-50%) scale(1.02) rotate(-.8deg); }
  50% { transform:translate(-50%,-54%) scale(1.06) rotate(.8deg); }
}
@keyframes logoFloat {
  0%,100% { transform:translateY(-12px); }
  50% { transform:translateY(-20px); }
}
@keyframes headerLogoSway {
  0%,100% { transform:translate3d(0,0,0) rotate(-2deg); }
  25% { transform:translate3d(4px,-5px,0) rotate(2deg); }
  50% { transform:translate3d(0,-9px,0) rotate(0deg); }
  75% { transform:translate3d(-4px,-4px,0) rotate(-2deg); }
}
@keyframes hotspot { 0%,100%{transform:scale(.85);opacity:.8} 50%{transform:scale(1.13);opacity:1} }
@keyframes spin { from{transform:translate(-50%,-50%) rotate(0deg)} to{transform:translate(-50%,-50%) rotate(360deg)} }
@keyframes spin2 { from{transform:translate(-50%,-50%) rotate(360deg)} to{transform:translate(-50%,-50%) rotate(0deg)} }
@keyframes floatChip { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes livePulse { 0%,100%{transform:scale(.9);opacity:.85} 50%{transform:scale(1.15);opacity:1} }
@keyframes statOrbit {
  0%,100% { transform:translate3d(0,0,0) rotate(0deg) scale(1); box-shadow:0 16px 34px rgba(27,44,35,.12); }
  25% { transform:translate3d(4px,-6px,0) rotate(1deg) scale(1.015); box-shadow:0 24px 42px rgba(27,44,35,.15); }
  50% { transform:translate3d(0,-10px,0) rotate(0deg) scale(1.03); box-shadow:0 28px 48px rgba(27,44,35,.18); }
  75% { transform:translate3d(-4px,-6px,0) rotate(-1deg) scale(1.015); box-shadow:0 24px 42px rgba(27,44,35,.15); }
}
@keyframes miniStatTilt {
  0%,100% { transform:translate3d(0,0,0) rotate(0deg) scale(1); box-shadow:0 12px 24px rgba(27,44,35,.06); }
  25% { transform:translate3d(3px,-3px,0) rotate(1.2deg) scale(1.02); box-shadow:0 16px 28px rgba(27,44,35,.09); }
  50% { transform:translate3d(0,-6px,0) rotate(0deg) scale(1.03); box-shadow:0 20px 32px rgba(27,44,35,.11); }
  75% { transform:translate3d(-3px,-3px,0) rotate(-1.2deg) scale(1.02); box-shadow:0 16px 28px rgba(27,44,35,.09); }
}
@keyframes numberPulse {
  0%,100% { transform:scale(1); }
  50% { transform:scale(1.06); }
}
@keyframes statShine {
  0%,70%,100% { transform:translateX(-120%) rotate(10deg); }
  30% { transform:translateX(120%) rotate(10deg); }
}
@keyframes playPulse {
  0%,100% {
    transform:translateY(0) scale(1);
    box-shadow:
      0 22px 38px rgba(59,214,139,.34),
      0 10px 22px rgba(0,0,0,.24),
      inset 0 2px 0 rgba(255,255,255,.62),
      inset 0 -14px 24px rgba(8,93,54,.28),
      0 0 0 6px rgba(92,229,168,.08);
  }
  50% {
    transform:translateY(-2px) scale(1.04);
    box-shadow:
      0 30px 50px rgba(59,214,139,.44),
      0 14px 26px rgba(0,0,0,.26),
      inset 0 2px 0 rgba(255,255,255,.74),
      inset 0 -16px 28px rgba(8,93,54,.32),
      0 0 0 9px rgba(92,229,168,.12);
  }
}
@keyframes aiGlow {
  0%,100% { transform:scale(.9); opacity:.45; }
  50% { transform:scale(1.12); opacity:.8; }
}
@keyframes aiPromptFloat {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-5px); }
}
@keyframes aiArrowPulse {
  0%,100% { transform:translateX(0); opacity:.6; }
  50% { transform:translateX(4px); opacity:1; }
}
@keyframes aiCardOne {
  0%,100% { transform:translate(0,0) rotate(-4deg); }
  50% { transform:translate(3px,-6px) rotate(-1deg); }
}
@keyframes aiCardTwo {
  0%,100% { transform:translate(0,0) rotate(5deg); }
  50% { transform:translate(-2px,-7px) rotate(1deg); }
}
@keyframes aiCardThree {
  0%,100% { transform:translate(0,0) rotate(2deg); }
  50% { transform:translate(-4px,4px) rotate(6deg); }
}
@keyframes attackGlow {
  0%,100% { transform:translate(-50%,-50%) scale(.92); opacity:.42; }
  50% { transform:translate(-50%,-50%) scale(1.08); opacity:.82; }
}
@keyframes attackHubFloat {
  0%,100% { transform:translate(-50%,-50%) translateY(0); }
  50% { transform:translate(-50%,-50%) translateY(-4px); }
}
@keyframes attackBadgeFloat {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50% { transform:translateX(-50%) translateY(-4px); }
}
@keyframes attackSignal {
  0%,100% { transform:scale(.8); opacity:.55; }
  50% { transform:scale(1.2); opacity:1; }
}
@keyframes attackNodeOne {
  0%,100% { transform:translate(0,0) rotate(-5deg); }
  50% { transform:translate(4px,-5px) rotate(-1deg); }
}
@keyframes attackNodeTwo {
  0%,100% { transform:translate(0,0) rotate(4deg); }
  50% { transform:translate(-4px,-6px) rotate(1deg); }
}
@keyframes attackNodeThree {
  0%,100% { transform:translate(0,0) rotate(3deg); }
  50% { transform:translate(3px,4px) rotate(7deg); }
}
@keyframes attackNodeFour {
  0%,100% { transform:translate(0,0) rotate(-3deg); }
  50% { transform:translate(-3px,5px) rotate(-7deg); }
}
@keyframes osintGlow {
  0%,100% { transform:translate(-50%,-50%) scale(.92); opacity:.42; }
  50% { transform:translate(-50%,-50%) scale(1.08); opacity:.82; }
}
@keyframes osintSweep {
  from { transform:rotate(0deg); }
  to { transform:rotate(360deg); }
}
@keyframes osintTagFloat {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50% { transform:translateX(-50%) translateY(-4px); }
}
@keyframes osintSignal {
  0%,100% { transform:scale(.8); opacity:.55; }
  50% { transform:scale(1.2); opacity:1; }
}
@keyframes osintNodeOne {
  0%,100% { transform:translate(0,0) rotate(-4deg); }
  50% { transform:translate(4px,-5px) rotate(0deg); }
}
@keyframes osintNodeTwo {
  0%,100% { transform:translate(0,0) rotate(4deg); }
  50% { transform:translate(-4px,-6px) rotate(1deg); }
}
@keyframes osintNodeThree {
  0%,100% { transform:translate(0,0) rotate(3deg); }
  50% { transform:translate(3px,4px) rotate(6deg); }
}
@keyframes osintNodeFour {
  0%,100% { transform:translate(0,0) rotate(-3deg); }
  50% { transform:translate(-3px,5px) rotate(-6deg); }
}
.breach-mini-animation {
  position:relative;
  width:100%;
  height:100%;
  min-height:210px;
  overflow:hidden;
  background:transparent;
  transform:scale(.92);
  transform-origin:center;
}
.breach-mini-glow {
  position:absolute;
  width:72px;
  height:72px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(92,229,168,.08);
  filter:blur(18px);
  animation:breachGlow 3.8s ease-in-out infinite;
}
.breach-mini-panel,
.breach-mini-stream,
.breach-mini-stream span,
.breach-mini-alert,
.breach-mini-alert-icon,
.breach-mini-response,
.breach-mini-shield,
.breach-mini-badge {
  position:absolute;
}
.breach-mini-panel {
  width:62px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,249,245,.96));
  border:1px solid rgba(16,32,25,.06);
  box-shadow:0 12px 24px rgba(27,44,35,.08);
}
.breach-mini-panel::before,
.breach-mini-panel::after {
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  border-radius:999px;
}
.breach-mini-panel::before {
  top:12px;
  height:6px;
  background:rgba(92,229,168,.2);
}
.breach-mini-panel::after {
  top:24px;
  height:18px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(92,229,168,.12), rgba(92,229,168,.04));
}
.breach-mini-panel.panel-a {
  left:34px;
  top:30px;
  height:68px;
  animation:breachPanelOne 4.7s ease-in-out infinite;
}
.breach-mini-panel.panel-b {
  right:34px;
  bottom:30px;
  height:62px;
  animation:breachPanelTwo 4.9s ease-in-out infinite;
}
.breach-mini-stream {
  left:86px;
  top:70px;
  width:92px;
  height:18px;
}
.breach-mini-stream span {
  top:6px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#72ebb4;
  box-shadow:0 0 12px rgba(114,235,180,.34);
  animation:breachPulse 2s ease-in-out infinite;
}
.breach-mini-stream span:nth-child(1) {
  left:0;
}
.breach-mini-stream span:nth-child(2) {
  left:22px;
  animation-delay:.18s;
}
.breach-mini-stream span:nth-child(3) {
  left:44px;
  animation-delay:.36s;
}
.breach-mini-stream::before,
.breach-mini-stream::after {
  content:"";
  position:absolute;
  top:9px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(114,235,180,0), rgba(114,235,180,.92), rgba(114,235,180,0));
}
.breach-mini-stream::before {
  left:2px;
  width:56px;
}
.breach-mini-stream::after {
  right:-4px;
  width:46px;
}
.breach-mini-alert {
  left:50%;
  top:42px;
  width:56px;
  height:56px;
  transform:translateX(-50%);
  border-radius:18px;
  background:linear-gradient(180deg, #183f31 0%, #0d261d 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 14px 28px rgba(7,20,15,.14);
  animation:breachAlertFloat 4.2s ease-in-out infinite;
}
.breach-mini-alert::before {
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:12px;
  height:6px;
  border-radius:999px;
  background:rgba(167,247,208,.34);
}
.breach-mini-alert-icon {
  left:50%;
  top:50%;
  width:18px;
  height:18px;
  margin:-2px 0 0 -9px;
  transform:rotate(45deg);
  border-radius:4px;
  background:#72ebb4;
  box-shadow:0 0 14px rgba(114,235,180,.4);
}
.breach-mini-alert-icon::before,
.breach-mini-alert-icon::after {
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%) rotate(-45deg);
  background:#103528;
  border-radius:999px;
}
.breach-mini-alert-icon::before {
  top:3px;
  width:2px;
  height:8px;
}
.breach-mini-alert-icon::after {
  bottom:3px;
  width:2px;
  height:2px;
}
.breach-mini-response {
  right:44px;
  top:34px;
  width:48px;
  height:48px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,249,245,.96));
  border:1px solid rgba(16,32,25,.06);
  box-shadow:0 12px 24px rgba(27,44,35,.08);
  animation:breachResponseFloat 4.6s ease-in-out infinite;
}
.breach-mini-response::before {
  content:"";
  position:absolute;
  left:12px;
  top:14px;
  width:18px;
  height:10px;
  border-left:3px solid #39bf78;
  border-bottom:3px solid #39bf78;
  transform:rotate(-45deg);
}
.breach-mini-shield {
  left:54px;
  bottom:26px;
  width:50px;
  height:58px;
  border-radius:18px 18px 22px 22px;
  background:linear-gradient(180deg, #183f31 0%, #0d261d 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 12px 24px rgba(7,20,15,.14);
  clip-path:polygon(50% 0%, 88% 14%, 88% 54%, 50% 100%, 12% 54%, 12% 14%);
  animation:breachShieldFloat 4.8s ease-in-out infinite;
}
.breach-mini-shield::before {
  content:"";
  position:absolute;
  left:50%;
  top:52%;
  width:18px;
  height:10px;
  border-left:3px solid #72ebb4;
  border-bottom:3px solid #72ebb4;
  transform:translate(-50%,-50%) rotate(-45deg);
}
.breach-mini-badge {
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  padding:7px 11px;
  border-radius:999px;
  background:rgba(92,229,168,.09);
  border:1px solid rgba(92,229,168,.12);
  color:#184332;
  font-size:9px;
  font-weight:900;
  letter-spacing:.04em;
  animation:breachBadgeFloat 3.5s ease-in-out infinite;
}
@keyframes breachGlow {
  0%,100% { transform:translate(-50%,-50%) scale(.92); opacity:.42; }
  50% { transform:translate(-50%,-50%) scale(1.08); opacity:.82; }
}
@keyframes breachPulse {
  0%,100% { transform:translateX(0) scale(.85); opacity:.6; }
  50% { transform:translateX(4px) scale(1.12); opacity:1; }
}
@keyframes breachAlertFloat {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50% { transform:translateX(-50%) translateY(-5px); }
}
@keyframes breachResponseFloat {
  0%,100% { transform:translate(0,0) rotate(4deg); }
  50% { transform:translate(-4px,-6px) rotate(0deg); }
}
@keyframes breachShieldFloat {
  0%,100% { transform:translate(0,0) rotate(-3deg); }
  50% { transform:translate(3px,4px) rotate(2deg); }
}
@keyframes breachPanelOne {
  0%,100% { transform:translate(0,0) rotate(-4deg); }
  50% { transform:translate(4px,-5px) rotate(0deg); }
}
@keyframes breachPanelTwo {
  0%,100% { transform:translate(0,0) rotate(4deg); }
  50% { transform:translate(-4px,5px) rotate(0deg); }
}
@keyframes breachBadgeFloat {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50% { transform:translateX(-50%) translateY(-4px); }
}
.awareness-mini-animation {
  position:relative;
  width:100%;
  height:100%;
  min-height:210px;
  overflow:hidden;
  background:transparent;
  transform:scale(.92);
  transform-origin:center;
}
.awareness-mini-glow {
  position:absolute;
  width:72px;
  height:72px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(92,229,168,.08);
  filter:blur(18px);
  animation:awarenessGlow 4s ease-in-out infinite;
}
.awareness-mini-calendar,
.awareness-mini-track,
.awareness-mini-step,
.awareness-mini-badge,
.awareness-mini-branch {
  position:absolute;
}
.awareness-mini-calendar {
  left:50%;
  top:50%;
  width:72px;
  height:82px;
  transform:translate(-50%,-50%);
  border-radius:22px;
  background:linear-gradient(180deg, #183f31 0%, #0d261d 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 16px 30px rgba(7,20,15,.14);
  animation:awarenessCalendarFloat 4.4s ease-in-out infinite;
}
.awareness-mini-calendar::before {
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:14px;
  height:8px;
  border-radius:999px;
  background:rgba(167,247,208,.34);
}
.awareness-mini-calendar::after {
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:16px;
  top:30px;
  border-radius:14px;
  background:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:14px 14px;
}
.awareness-mini-calendar span {
  position:absolute;
  right:14px;
  top:38px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#72ebb4;
  box-shadow:0 0 12px rgba(114,235,180,.45);
  animation:awarenessDotPulse 2.2s ease-in-out infinite;
}
.awareness-mini-step {
  width:42px;
  height:42px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,249,245,.96));
  border:1px solid rgba(16,32,25,.06);
  box-shadow:0 10px 22px rgba(27,44,35,.08);
}
.awareness-mini-step::before,
.awareness-mini-step::after {
  content:"";
  position:absolute;
}
.awareness-mini-step::before {
  left:10px;
  right:10px;
  top:9px;
  height:5px;
  border-radius:999px;
  background:rgba(92,229,168,.18);
}
.awareness-mini-step::after {
  left:50%;
  top:50%;
  transform:translate(-50%,-35%);
  width:16px;
  height:16px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:16px 16px;
  opacity:.92;
}
.awareness-mini-step.step-mail {
  left:28px;
  top:28px;
  animation:awarenessStepOne 4.8s ease-in-out infinite;
}
.awareness-mini-step.step-mail::after {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23184332' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5h16v11H4z'/%3E%3Cpath d='m5.5 8 6.5 5 6.5-5'/%3E%3C/svg%3E");
}
.awareness-mini-step.step-train {
  right:30px;
  top:26px;
  animation:awarenessStepTwo 5s ease-in-out infinite;
}
.awareness-mini-step.step-train::after {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23184332' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='5' width='15' height='14' rx='2.2'/%3E%3Cpath d='M8 9h8'/%3E%3Cpath d='M8 12h5'/%3E%3Cpath d='M8 15h7'/%3E%3C/svg%3E");
}
.awareness-mini-step.step-quiz {
  left:38px;
  bottom:24px;
  animation:awarenessStepThree 4.7s ease-in-out infinite;
}
.awareness-mini-step.step-quiz::after {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23184332' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M9.4 9.5a2.8 2.8 0 1 1 4.4 2.3c-.9.7-1.8 1.2-1.8 2.2'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
.awareness-mini-step.step-repeat {
  right:40px;
  bottom:22px;
  animation:awarenessStepFour 5.1s ease-in-out infinite;
}
.awareness-mini-step.step-repeat::after {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23184332' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 2v4h-4'/%3E%3Cpath d='M7 22v-4h4'/%3E%3Cpath d='M20 11a8 8 0 0 0-13.66-5.66L3 9'/%3E%3Cpath d='M4 13a8 8 0 0 0 13.66 5.66L21 15'/%3E%3C/svg%3E");
}
.awareness-mini-track {
  left:50%;
  top:50%;
  height:2px;
  transform-origin:left center;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(114,235,180,0), rgba(114,235,180,.9), rgba(114,235,180,0));
  opacity:.72;
}
.awareness-mini-track::after {
  content:"";
  position:absolute;
  right:10px;
  top:50%;
  width:6px;
  height:6px;
  margin-top:-3px;
  border-radius:50%;
  background:#72ebb4;
  box-shadow:0 0 10px rgba(114,235,180,.42);
  animation:awarenessSignal 2.2s ease-in-out infinite;
}
.awareness-mini-track.track-a {
  width:74px;
  transform:translate(-2px,-28px) rotate(-150deg);
}
.awareness-mini-track.track-b {
  width:72px;
  transform:translate(4px,-28px) rotate(-28deg);
}
.awareness-mini-track.track-c {
  width:70px;
  transform:translate(-2px,30px) rotate(152deg);
}
.awareness-mini-track.track-a::after { animation-delay:.1s; }
.awareness-mini-track.track-b::after { animation-delay:.35s; }
.awareness-mini-track.track-c::after { animation-delay:.6s; }
.awareness-mini-branch {
  right:72px;
  bottom:50px;
  width:34px;
  height:34px;
  border-radius:12px;
  background:linear-gradient(180deg, #ffffff 0%, #f3f8f5 100%);
  border:1px solid rgba(16,32,25,.06);
  box-shadow:0 10px 22px rgba(27,44,35,.08);
  animation:awarenessBranchFloat 4.6s ease-in-out infinite;
}
.awareness-mini-branch::before,
.awareness-mini-branch::after {
  content:"";
  position:absolute;
  background:#39bf78;
  border-radius:999px;
}
.awareness-mini-branch::before {
  left:10px;
  top:8px;
  width:3px;
  height:18px;
}
.awareness-mini-branch::after {
  left:10px;
  top:8px;
  width:14px;
  height:3px;
  box-shadow:0 8px 0 #39bf78;
}
.awareness-mini-badge {
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  padding:7px 11px;
  border-radius:999px;
  background:rgba(92,229,168,.09);
  border:1px solid rgba(92,229,168,.12);
  color:#184332;
  font-size:9px;
  font-weight:900;
  letter-spacing:.04em;
  animation:awarenessBadgeFloat 3.5s ease-in-out infinite;
}
@keyframes awarenessGlow {
  0%,100% { transform:translate(-50%,-50%) scale(.92); opacity:.42; }
  50% { transform:translate(-50%,-50%) scale(1.08); opacity:.82; }
}
@keyframes awarenessCalendarFloat {
  0%,100% { transform:translate(-50%,-50%) translateY(0); }
  50% { transform:translate(-50%,-50%) translateY(-5px); }
}
@keyframes awarenessDotPulse {
  0%,100% { transform:scale(.85); opacity:.65; }
  50% { transform:scale(1.2); opacity:1; }
}
@keyframes awarenessSignal {
  0%,100% { transform:scale(.8); opacity:.55; }
  50% { transform:scale(1.2); opacity:1; }
}
@keyframes awarenessStepOne {
  0%,100% { transform:translate(0,0) rotate(-4deg); }
  50% { transform:translate(4px,-5px) rotate(0deg); }
}
@keyframes awarenessStepTwo {
  0%,100% { transform:translate(0,0) rotate(4deg); }
  50% { transform:translate(-4px,-6px) rotate(1deg); }
}
@keyframes awarenessStepThree {
  0%,100% { transform:translate(0,0) rotate(3deg); }
  50% { transform:translate(3px,4px) rotate(6deg); }
}
@keyframes awarenessStepFour {
  0%,100% { transform:translate(0,0) rotate(-3deg); }
  50% { transform:translate(-3px,5px) rotate(-6deg); }
}
@keyframes awarenessBranchFloat {
  0%,100% { transform:translate(0,0) rotate(5deg); }
  50% { transform:translate(-3px,-4px) rotate(1deg); }
}
@keyframes awarenessBadgeFloat {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50% { transform:translateX(-50%) translateY(-4px); }
}
.immersive-mini-animation {
  position:relative;
  width:100%;
  height:100%;
  min-height:210px;
  overflow:hidden;
  background:transparent;
  transform:scale(.92);
  transform-origin:center;
}
.immersive-mini-glow {
  position:absolute;
  width:74px;
  height:74px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(92,229,168,.08);
  filter:blur(18px);
  animation:immersiveGlow 4s ease-in-out infinite;
}
.immersive-room,
.immersive-floor,
.immersive-wall,
.immersive-screen,
.immersive-avatar,
.immersive-clue,
.immersive-path,
.immersive-hotspot,
.immersive-mini-badge {
  position:absolute;
}
.immersive-room {
  left:50%;
  top:50%;
  width:170px;
  height:118px;
  transform:translate(-50%,-50%);
  perspective:900px;
}
.immersive-floor {
  left:18px;
  right:18px;
  bottom:10px;
  height:60px;
  border-radius:18px;
  background:
    linear-gradient(rgba(16,32,25,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,32,25,.05) 1px, transparent 1px),
    linear-gradient(180deg,#ffffff 0%, #eef7f1 100%);
  background-size:16px 16px,16px 16px,100% 100%;
  border:1px solid rgba(16,32,25,.06);
  box-shadow:0 14px 28px rgba(27,44,35,.08);
  transform:perspective(500px) rotateX(68deg);
  transform-origin:center bottom;
}
.immersive-wall {
  top:10px;
  width:54px;
  height:74px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,249,245,.96));
  border:1px solid rgba(16,32,25,.06);
  box-shadow:0 12px 24px rgba(27,44,35,.07);
}
.immersive-wall::before,
.immersive-wall::after {
  content:"";
  position:absolute;
  border-radius:999px;
}
.immersive-wall::before {
  left:10px;
  right:10px;
  top:10px;
  height:5px;
  background:rgba(92,229,168,.18);
}
.immersive-wall::after {
  left:12px;
  right:12px;
  top:22px;
  bottom:12px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(92,229,168,.08), rgba(92,229,168,.02));
}
.immersive-wall.left {
  left:20px;
  transform:skewY(10deg) rotate(-6deg);
  animation:immersiveWallLeft 4.8s ease-in-out infinite;
}
.immersive-wall.right {
  right:20px;
  transform:skewY(-10deg) rotate(6deg);
  animation:immersiveWallRight 5s ease-in-out infinite;
}
.immersive-screen {
  left:50%;
  top:18px;
  width:68px;
  height:52px;
  transform:translateX(-50%);
  border-radius:18px;
  background:linear-gradient(180deg, #183f31 0%, #0d261d 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 14px 28px rgba(7,20,15,.14);
  animation:immersiveScreenFloat 4.4s ease-in-out infinite;
}
.immersive-screen::before {
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:12px;
  height:6px;
  border-radius:999px;
  background:rgba(167,247,208,.34);
}
.immersive-screen::after {
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  top:24px;
  bottom:12px;
  border-radius:10px;
  background:
    radial-gradient(circle at 30% 40%, rgba(114,235,180,.42) 0 10%, transparent 11%),
    linear-gradient(135deg, rgba(114,235,180,.18), rgba(255,255,255,.04));
}
.immersive-screen span {
  position:absolute;
  right:12px;
  bottom:10px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#72ebb4;
  box-shadow:0 0 12px rgba(114,235,180,.45);
  animation:immersiveDotPulse 2s ease-in-out infinite;
}
.immersive-avatar {
  left:50%;
  bottom:24px;
  width:30px;
  height:46px;
  transform:translateX(-50%);
  animation:immersiveAvatarMove 4.2s ease-in-out infinite;
}
.immersive-avatar::before,
.immersive-avatar::after {
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}
.immersive-avatar::before {
  top:0;
  width:14px;
  height:14px;
  border-radius:50%;
  background:linear-gradient(180deg,#183f31 0%, #0d261d 100%);
  box-shadow:0 0 0 5px rgba(92,229,168,.1);
}
.immersive-avatar::after {
  top:14px;
  width:22px;
  height:28px;
  border-radius:12px 12px 10px 10px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,249,245,.96));
  border:1px solid rgba(16,32,25,.06);
  box-shadow:0 10px 20px rgba(27,44,35,.08);
}
.immersive-clue {
  width:14px;
  height:14px;
  border-radius:50%;
  background:#72ebb4;
  box-shadow:0 0 0 6px rgba(114,235,180,.1), 0 0 12px rgba(114,235,180,.36);
  animation:immersiveCluePulse 2.6s ease-in-out infinite;
}
.immersive-clue.clue-a {
  left:32px;
  bottom:34px;
}
.immersive-clue.clue-b {
  right:36px;
  bottom:42px;
  animation-delay:.35s;
}
.immersive-clue.clue-c {
  left:50%;
  top:72px;
  margin-left:34px;
  animation-delay:.7s;
}
.immersive-path {
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(114,235,180,0), rgba(114,235,180,.92), rgba(114,235,180,0));
  opacity:.72;
}
.immersive-path::after {
  content:"";
  position:absolute;
  right:8px;
  top:50%;
  width:6px;
  height:6px;
  margin-top:-3px;
  border-radius:50%;
  background:#72ebb4;
  box-shadow:0 0 10px rgba(114,235,180,.4);
  animation:immersiveSignal 2.1s ease-in-out infinite;
}
.immersive-path.path-a {
  left:74px;
  top:72px;
  width:42px;
  transform:rotate(146deg);
}
.immersive-path.path-b {
  left:84px;
  top:80px;
  width:48px;
  transform:rotate(28deg);
}
.immersive-path.path-b::after {
  animation-delay:.45s;
}
.immersive-hotspot {
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid rgba(114,235,180,.9);
  background:rgba(114,235,180,.18);
  box-shadow:0 0 0 8px rgba(114,235,180,.08);
  animation:immersiveHotspot 2.4s ease-in-out infinite;
}
.immersive-hotspot.spot-a {
  left:24px;
  top:66px;
}
.immersive-hotspot.spot-b {
  right:24px;
  top:60px;
  animation-delay:.35s;
}
.immersive-hotspot.spot-c {
  left:50%;
  bottom:18px;
  margin-left:26px;
  animation-delay:.7s;
}
.immersive-mini-badge {
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  padding:7px 11px;
  border-radius:999px;
  background:rgba(92,229,168,.09);
  border:1px solid rgba(92,229,168,.12);
  color:#184332;
  font-size:9px;
  font-weight:900;
  letter-spacing:.04em;
  animation:immersiveBadgeFloat 3.5s ease-in-out infinite;
}
@keyframes immersiveGlow {
  0%,100% { transform:translate(-50%,-50%) scale(.92); opacity:.42; }
  50% { transform:translate(-50%,-50%) scale(1.08); opacity:.82; }
}
@keyframes immersiveScreenFloat {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50% { transform:translateX(-50%) translateY(-5px); }
}
@keyframes immersiveDotPulse {
  0%,100% { transform:scale(.85); opacity:.65; }
  50% { transform:scale(1.18); opacity:1; }
}
@keyframes immersiveAvatarMove {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50% { transform:translateX(-50%) translateY(-4px); }
}
@keyframes immersiveCluePulse {
  0%,100% { transform:scale(.82); opacity:.6; }
  50% { transform:scale(1.18); opacity:1; }
}
@keyframes immersiveSignal {
  0%,100% { transform:scale(.8); opacity:.55; }
  50% { transform:scale(1.2); opacity:1; }
}
@keyframes immersiveHotspot {
  0%,100% { transform:scale(.82); opacity:.72; }
  50% { transform:scale(1.14); opacity:1; }
}
@keyframes immersiveWallLeft {
  0%,100% { transform:skewY(10deg) rotate(-6deg) translateY(0); }
  50% { transform:skewY(10deg) rotate(-3deg) translateY(-4px); }
}
@keyframes immersiveWallRight {
  0%,100% { transform:skewY(-10deg) rotate(6deg) translateY(0); }
  50% { transform:skewY(-10deg) rotate(3deg) translateY(-4px); }
}
@keyframes immersiveBadgeFloat {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50% { transform:translateX(-50%) translateY(-4px); }
}
.brand-mini-animation {
  position:relative;
  width:100%;
  height:100%;
  min-height:210px;
  overflow:hidden;
  background:transparent;
  transform:scale(.92);
  transform-origin:center;
}
.brand-mini-glow {
  position:absolute;
  width:74px;
  height:74px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(92,229,168,.08);
  filter:blur(18px);
  animation:brandGlow 4s ease-in-out infinite;
}
.brand-mini-center,
.brand-mini-domain,
.brand-mini-line,
.brand-mini-shield,
.brand-mini-badge {
  position:absolute;
}
.brand-mini-center {
  left:50%;
  top:50%;
  width:68px;
  height:68px;
  transform:translate(-50%,-50%);
  border-radius:22px;
  background:linear-gradient(180deg, #183f31 0%, #0d261d 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 16px 30px rgba(7,20,15,.14);
  animation:brandCenterFloat 4.4s ease-in-out infinite;
}
.brand-mini-center::before {
  content:"";
  position:absolute;
  left:15px;
  right:15px;
  top:14px;
  height:6px;
  border-radius:999px;
  background:rgba(167,247,208,.34);
}
.brand-mini-center::after {
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:28px;
  bottom:14px;
  border-radius:12px;
  background:
    radial-gradient(circle at 32% 38%, rgba(114,235,180,.42) 0 10%, transparent 11%),
    linear-gradient(135deg, rgba(114,235,180,.18), rgba(255,255,255,.04));
}
.brand-mini-center span {
  position:absolute;
  right:12px;
  bottom:10px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#72ebb4;
  box-shadow:0 0 12px rgba(114,235,180,.45);
  animation:brandDotPulse 2s ease-in-out infinite;
}
.brand-mini-domain {
  min-width:82px;
  max-width:96px;
  padding:7px 9px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,249,245,.96));
  border:1px solid rgba(16,32,25,.06);
  box-shadow:0 10px 22px rgba(27,44,35,.08);
  color:#184332;
  font-size:8px;
  font-weight:900;
  letter-spacing:.01em;
  line-height:1.15;
  text-align:center;
  white-space:normal;
  word-break:break-word;
}
.brand-mini-domain::before {
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  top:8px;
  height:4px;
  border-radius:999px;
  background:rgba(92,229,168,.18);
}
.brand-mini-domain.domain-safe {
  left:10px;
  top:18px;
  animation:brandNodeSafe 4.8s ease-in-out infinite;
}
.brand-mini-domain.domain-fake-a {
  right:8px;
  top:16px;
  color:#184332;
  background:linear-gradient(180deg, #f3fbf6 0%, #e3f5ea 100%);
  animation:brandNodeFakeA 5s ease-in-out infinite;
}
.brand-mini-domain.domain-fake-b {
  left:12px;
  bottom:18px;
  color:#184332;
  background:linear-gradient(180deg, #eefaf2 0%, #dbf3e5 100%);
  animation:brandNodeFakeB 4.7s ease-in-out infinite;
}
.brand-mini-domain.domain-fake-c {
  right:0;
  bottom:16px;
  color:#184332;
  background:linear-gradient(180deg, #eefaf2 0%, #dbf3e5 100%);
  animation:brandNodeFakeC 5.1s ease-in-out infinite;
}
.brand-mini-line {
  left:50%;
  top:50%;
  height:2px;
  transform-origin:left center;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(114,235,180,0), rgba(114,235,180,.9), rgba(114,235,180,0));
  opacity:.72;
}
.brand-mini-line::after {
  content:"";
  position:absolute;
  right:10px;
  top:50%;
  width:6px;
  height:6px;
  margin-top:-3px;
  border-radius:50%;
  background:#72ebb4;
  box-shadow:0 0 10px rgba(114,235,180,.42);
  animation:brandSignal 2.2s ease-in-out infinite;
}
.brand-mini-line.line-a {
  width:76px;
  transform:translate(-4px,-30px) rotate(-150deg);
}
.brand-mini-line.line-b {
  width:72px;
  transform:translate(-2px,28px) rotate(152deg);
}
.brand-mini-line.line-c {
  width:72px;
  transform:translate(6px,28px) rotate(28deg);
}
.brand-mini-line.line-b::after { animation-delay:.3s; }
.brand-mini-line.line-c::after { animation-delay:.6s; }
.brand-mini-shield {
  right:54px;
  top:56px;
  width:30px;
  height:34px;
  border-radius:12px 12px 16px 16px;
  background:linear-gradient(180deg, #183f31 0%, #0d261d 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 12px 24px rgba(7,20,15,.14);
  clip-path:polygon(50% 0%, 88% 14%, 88% 54%, 50% 100%, 12% 54%, 12% 14%);
  animation:brandShieldFloat 4.6s ease-in-out infinite;
}
.brand-mini-shield::before {
  content:"";
  position:absolute;
  left:50%;
  top:52%;
  width:12px;
  height:7px;
  border-left:2px solid #72ebb4;
  border-bottom:2px solid #72ebb4;
  transform:translate(-50%,-50%) rotate(-45deg);
}
.brand-mini-badge {
  left:50%;
  top:12px;
  bottom:auto;
  transform:translateX(-50%);
  padding:7px 11px;
  border-radius:999px;
  background:rgba(92,229,168,.09);
  border:1px solid rgba(92,229,168,.12);
  color:#184332;
  font-size:9px;
  font-weight:900;
  letter-spacing:.04em;
  animation:brandBadgeFloat 3.5s ease-in-out infinite;
}
@keyframes brandGlow {
  0%,100% { transform:translate(-50%,-50%) scale(.92); opacity:.42; }
  50% { transform:translate(-50%,-50%) scale(1.08); opacity:.82; }
}
@keyframes brandCenterFloat {
  0%,100% { transform:translate(-50%,-50%) translateY(0); }
  50% { transform:translate(-50%,-50%) translateY(-5px); }
}
@keyframes brandDotPulse {
  0%,100% { transform:scale(.85); opacity:.65; }
  50% { transform:scale(1.18); opacity:1; }
}
@keyframes brandSignal {
  0%,100% { transform:scale(.8); opacity:.55; }
  50% { transform:scale(1.2); opacity:1; }
}
@keyframes brandNodeSafe {
  0%,100% { transform:translate(0,0) rotate(-2deg); }
  50% { transform:translate(2px,-3px) rotate(0deg); }
}
@keyframes brandNodeFakeA {
  0%,100% { transform:translate(0,0) rotate(2deg); }
  50% { transform:translate(-2px,-3px) rotate(0deg); }
}
@keyframes brandNodeFakeB {
  0%,100% { transform:translate(0,0) rotate(2deg); }
  50% { transform:translate(2px,2px) rotate(3deg); }
}
@keyframes brandNodeFakeC {
  0%,100% { transform:translate(0,0) rotate(-2deg); }
  50% { transform:translate(-2px,2px) rotate(-3deg); }
}
@keyframes brandShieldFloat {
  0%,100% { transform:translate(0,0) rotate(5deg); }
  50% { transform:translate(-3px,-4px) rotate(1deg); }
}
@keyframes brandBadgeFloat {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50% { transform:translateX(-50%) translateY(-4px); }
}
.analytics-mini-animation {
  position:relative;
  width:100%;
  height:100%;
  min-height:210px;
  overflow:hidden;
  background:transparent;
  transform:scale(.92);
  transform-origin:center;
}
.analytics-mini-glow {
  position:absolute;
  width:74px;
  height:74px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(92,229,168,.08);
  filter:blur(18px);
  animation:analyticsGlow 4s ease-in-out infinite;
}
.analytics-mini-board,
.analytics-mini-card,
.analytics-mini-flow,
.analytics-mini-badge {
  position:absolute;
}
.analytics-mini-board {
  left:50%;
  top:50%;
  width:108px;
  height:88px;
  transform:translate(-50%,-50%);
  border-radius:24px;
  background:linear-gradient(180deg, #183f31 0%, #0d261d 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 16px 30px rgba(7,20,15,.14);
  animation:analyticsBoardFloat 4.4s ease-in-out infinite;
}
.analytics-mini-header {
  position:absolute;
  left:16px;
  right:16px;
  top:14px;
  height:6px;
  border-radius:999px;
  background:rgba(167,247,208,.34);
}
.analytics-mini-chart {
  position:absolute;
  border-radius:14px;
}
.analytics-mini-chart.chart-bars {
  left:14px;
  bottom:14px;
  width:38px;
  height:34px;
  display:flex;
  align-items:flex-end;
  gap:5px;
}
.analytics-mini-chart.chart-bars span {
  display:block;
  width:6px;
  border-radius:999px 999px 3px 3px;
  background:linear-gradient(180deg,#8ef0bc,#39bf78);
  box-shadow:0 0 10px rgba(114,235,180,.22);
  animation:analyticsBarPulse 2.6s ease-in-out infinite;
}
.analytics-mini-chart.chart-bars span:nth-child(1) {
  height:12px;
  animation-delay:.1s;
}
.analytics-mini-chart.chart-bars span:nth-child(2) {
  height:20px;
  animation-delay:.25s;
}
.analytics-mini-chart.chart-bars span:nth-child(3) {
  height:27px;
  animation-delay:.4s;
}
.analytics-mini-chart.chart-bars span:nth-child(4) {
  height:17px;
  animation-delay:.55s;
}
.analytics-mini-chart.chart-line {
  right:14px;
  bottom:14px;
  width:42px;
  height:34px;
}
.analytics-mini-chart.chart-line::before {
  content:"";
  position:absolute;
  left:2px;
  right:2px;
  top:18px;
  height:2px;
  background:linear-gradient(90deg, rgba(114,235,180,.2), rgba(114,235,180,.7), rgba(114,235,180,.35), rgba(114,235,180,.85));
  transform:skewY(-20deg) rotate(-12deg);
  border-radius:999px;
  box-shadow:0 0 10px rgba(114,235,180,.18);
}
.analytics-mini-chart.chart-line i {
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#72ebb4;
  box-shadow:0 0 10px rgba(114,235,180,.42);
  animation:analyticsDotPulse 2.2s ease-in-out infinite;
}
.analytics-mini-chart.chart-line i:nth-child(1) {
  left:2px;
  bottom:8px;
}
.analytics-mini-chart.chart-line i:nth-child(2) {
  left:13px;
  bottom:16px;
  animation-delay:.18s;
}
.analytics-mini-chart.chart-line i:nth-child(3) {
  left:24px;
  bottom:12px;
  animation-delay:.36s;
}
.analytics-mini-chart.chart-line i:nth-child(4) {
  right:2px;
  bottom:22px;
  animation-delay:.54s;
}
.analytics-mini-card {
  min-width:62px;
  padding:10px 10px 8px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,249,245,.96));
  border:1px solid rgba(16,32,25,.06);
  box-shadow:0 10px 22px rgba(27,44,35,.08);
}
.analytics-mini-card strong {
  display:block;
  color:#184332;
  font-size:15px;
  line-height:1;
  letter-spacing:-.05em;
}
.analytics-mini-card small {
  display:block;
  margin-top:5px;
  color:#5f7369;
  font-size:8px;
  line-height:1.2;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.analytics-mini-card.card-risk {
  left:20px;
  top:26px;
  animation:analyticsCardOne 4.8s ease-in-out infinite;
}
.analytics-mini-card.card-click {
  right:18px;
  top:22px;
  animation:analyticsCardTwo 5s ease-in-out infinite;
}
.analytics-mini-card.card-score {
  left:30px;
  bottom:20px;
  animation:analyticsCardThree 4.7s ease-in-out infinite;
}
.analytics-mini-flow {
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(114,235,180,0), rgba(114,235,180,.92), rgba(114,235,180,0));
  opacity:.72;
}
.analytics-mini-flow::after {
  content:"";
  position:absolute;
  right:8px;
  top:50%;
  width:6px;
  height:6px;
  margin-top:-3px;
  border-radius:50%;
  background:#72ebb4;
  box-shadow:0 0 10px rgba(114,235,180,.4);
  animation:analyticsSignal 2.2s ease-in-out infinite;
}
.analytics-mini-flow.flow-a {
  left:76px;
  top:58px;
  width:44px;
  transform:rotate(176deg);
}
.analytics-mini-flow.flow-b {
  left:110px;
  top:92px;
  width:40px;
  transform:rotate(34deg);
}
.analytics-mini-flow.flow-b::after {
  animation-delay:.4s;
}
.analytics-mini-badge {
  left:50%;
  top:12px;
  bottom:auto;
  transform:translateX(-50%);
  padding:7px 11px;
  border-radius:999px;
  background:rgba(92,229,168,.09);
  border:1px solid rgba(92,229,168,.12);
  color:#184332;
  font-size:9px;
  font-weight:900;
  letter-spacing:.04em;
  animation:analyticsBadgeFloat 3.5s ease-in-out infinite;
}
@keyframes analyticsGlow {
  0%,100% { transform:translate(-50%,-50%) scale(.92); opacity:.42; }
  50% { transform:translate(-50%,-50%) scale(1.08); opacity:.82; }
}
@keyframes analyticsBoardFloat {
  0%,100% { transform:translate(-50%,-50%) translateY(0); }
  50% { transform:translate(-50%,-50%) translateY(-5px); }
}
@keyframes analyticsBarPulse {
  0%,100% { transform:scaleY(.88); opacity:.72; }
  50% { transform:scaleY(1.14); opacity:1; }
}
@keyframes analyticsDotPulse {
  0%,100% { transform:scale(.82); opacity:.62; }
  50% { transform:scale(1.16); opacity:1; }
}
@keyframes analyticsSignal {
  0%,100% { transform:scale(.8); opacity:.55; }
  50% { transform:scale(1.2); opacity:1; }
}
@keyframes analyticsCardOne {
  0%,100% { transform:translate(0,0) rotate(-4deg); }
  50% { transform:translate(4px,-5px) rotate(0deg); }
}
@keyframes analyticsCardTwo {
  0%,100% { transform:translate(0,0) rotate(4deg); }
  50% { transform:translate(-4px,-6px) rotate(1deg); }
}
@keyframes analyticsCardThree {
  0%,100% { transform:translate(0,0) rotate(3deg); }
  50% { transform:translate(3px,4px) rotate(6deg); }
}
@keyframes analyticsBadgeFloat {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50% { transform:translateX(-50%) translateY(-4px); }
}

@media(max-width:920px) {
  .site-header,
  .site-footer {
    padding-left:16px;
    padding-right:16px;
  }
  .section {
    padding:10px 16px 18px;
  }
  .wrap,
  .preview-head,
  .launch-wrap,
  .feature-grid,
  .benefits-wrap,
  .steps,
  .feature-showcase-inner {
    grid-template-columns:1fr;
  }
  .wrap {
    gap:28px;
  }
  .about-wrap {
    grid-template-columns:1fr;
    gap:34px;
    align-items:start;
    padding:56px 16px;
  }
  .about-copy {
    text-align:left;
  }
  .about-intro {
    margin-left:0;
    margin-right:0;
  }
  .nav {
    margin-left:auto;
    margin-right:0;
    justify-content:flex-end;
  }
  .nav .about-button {
    padding:5px 8px;
    font-size:11px;
  }
  .about-side {
    padding:26px 0 0;
    border-left:0;
    border-top:1px solid rgba(103,237,178,.28);
  }
  .launch-wrap {
    grid-template-columns:1fr;
    gap:24px;
    padding:36px 16px 34px;
  }
  .feature-list-wrap,
  .training-preview-section .training-preview-wrap {
    padding-left:16px;
    padding-right:16px;
  }
  .feature-list-grid {
    grid-template-columns:1fr;
  }
  .feature-item {
    grid-template-columns:1fr;
  }
  .feature-item-media {
    min-height:220px;
  }
  .benefits-wrap {
    gap:18px;
  }
  .footer-bar {
    gap:12px;
  }
  .feature-popup {
    padding:14px;
  }
  .feature-popup-card {
    width:100%;
    max-height:88vh;
    padding:18px;
    border-radius:22px;
  }
  .preview-wrap {
    width:min(680px,100%);
    margin:0 auto;
  }
  .card {
    min-height:500px;
  }
  .scenario-switcher {
    width:calc(100% - 32px);
    max-width:calc(100% - 32px);
    justify-content:flex-start;
    padding:2px 2px 8px;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  .scenario-btn {
    scroll-snap-align:start;
  }
}
@media(max-width:680px) {
  .site-header {
    position:static;
    backdrop-filter:blur(10px);
  }
  .bar {
    flex-direction:row;
    align-items:center;
    flex-wrap:nowrap;
  }
  .footer-bar {
    flex-direction:column;
    align-items:flex-start;
  }
  .brand {
    gap:10px;
  }
  .brand-mark {
    height:54px;
  }
  .brand span {
    font-size:15px;
  }
  .brand-tagline {
    font-size:10px;
  }
  .copy h1 {
    margin:16px 0 14px;
    font-size:clamp(28px,10vw,42px);
    line-height:1.04;
  }
  .copy p {
    font-size:16px;
    line-height:1.65;
  }
  .feature-spotlight > div > div {
    grid-template-columns:1fr !important;
    padding:20px !important;
  }
  .feature-showcase {
    padding:16px 14px;
    border-radius:18px;
  }
  .feature-showcase h3 {
    font-size:24px;
  }
  .feature-metrics {
    grid-template-columns:1fr;
  }
  .feature-spotlight {
    grid-template-columns:1fr;
  }
  .feature-spot-card {
    min-height:260px;
    padding:18px;
  }
  .feature-spot-visual {
    width:140px;
    max-width:45%;
  }
  .preview-head {
    padding:18px 16px;
    gap:16px;
    border-radius:22px;
  }
  .preview-head h2 {
    font-size:30px;
  }
  .preview-stat-cluster {
    justify-self:start;
    width:100%;
  }
  .preview-mini-stats {
    grid-template-columns:1fr 1fr;
  }
  .nav,
  .footer-links {
    gap:12px;
  }
  .nav {
    width:auto;
    margin-right:0;
    margin-left:auto;
    justify-content:flex-end;
  }
  .nav .about-button {
    width:auto;
    min-height:34px;
    justify-content:center;
    padding:5px 8px;
    font-size:11px;
  }
  .about-wrap {
    padding:48px 16px;
    gap:28px;
  }
  .about-kicker {
    margin-bottom:14px;
  }
  .about-copy h2 {
    font-size:clamp(32px,10vw,46px);
  }
  .about-intro {
    margin-top:18px;
    font-size:15px;
    line-height:1.7;
  }
  .about-side {
    padding-top:22px;
  }
  .about-side p {
    margin-bottom:22px;
    font-size:16px;
  }
  .actions {
    flex-wrap:wrap;
    gap:10px;
    width:100%;
  }
  .actions .btn {
    width:100%;
  }
  .btn {
    min-height:42px;
    padding:10px 14px;
    font-size:12px;
  }
  .feature-grid,
  .steps,
  .benefits-wrap,
  .signup-form,
  .feature-item {
    grid-template-columns:1fr;
  }
  .feature-list-head h2,
  .launch-copy h2 {
    font-size:clamp(28px,9vw,38px);
  }
  .feature-item {
    padding:14px 12px 12px;
  }
  .feature-item h3 {
    font-size:16px;
    align-items:flex-start;
  }
  .feature-item p {
    font-size:12px;
  }
  .feature-list-grid {
    grid-template-columns:1fr;
  }
  .feature-item-media {
    min-height:190px;
  }
  .training-preview-section .feature-grid {
    grid-template-columns:1fr;
  }
  .preview-wrap::before {
    inset:-10px;
  }
  .card {
    aspect-ratio:auto;
    min-height:420px;
    border-radius:24px;
  }
  .visual {
    width:94%;
    max-width:none;
  }
  .live {
    top:14px;
    right:14px;
    padding:8px 12px;
    font-size:9px;
  }
  .play {
    left:14px;
    bottom:92px;
    width:54px;
    height:54px;
  }
  .status {
    left:14px;
    right:14px;
    bottom:18px;
    width:auto;
  }
  .scenario-switcher {
    left:14px;
    right:14px;
    bottom:14px;
    transform:none;
    width:auto;
    max-width:none;
    justify-content:flex-start;
    padding:2px 2px 8px;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  .scenario-btn {
    scroll-snap-align:start;
    padding:8px 11px;
    font-size:9px;
  }
  .status {
    bottom:74px;
  }
  .play {
    bottom:144px;
  }
  .chip { display:none; }
  .launch-wrap {
    padding-top:30px;
    padding-bottom:28px;
  }
  .steps {
    gap:16px;
  }
  .step h4 {
    font-size:13px;
  }
  .step p {
    font-size:11px;
    line-height:1.7;
  }
  .signup-card {
    padding:18px 14px 16px;
    border-radius:16px;
  }
  .signup-frog-logo {
    width:56px;
    right:12px;
    top:10px;
  }
  .signup-card h3 {
    font-size:17px;
    padding-right:56px;
  }
  .signup-card p {
    font-size:11px;
  }
  .signup-form {
    gap:8px;
  }
  .signup-form input,
  .signup-form select {
    height:42px;
    font-size:16px;
  }
  .notify-btn {
    min-height:44px;
  }
  .benefits-wrap {
    padding:16px;
    gap:16px;
  }
  .benefit {
    gap:10px;
  }
  .feature-popup-card {
    padding:16px;
    border-radius:20px;
  }
  .feature-popup-head {
    gap:12px;
    align-items:flex-start;
  }
  .feature-popup-head h3 {
    font-size:22px;
  }
  .feature-popup-body p,
  .feature-popup-body li {
    font-size:12px;
    line-height:1.7;
  }
  .contact-form {
    grid-template-columns:1fr;
  }
  .modal-grid { grid-template-columns:1fr; }
}
@media(max-width:420px) {
  .site-header,
  .site-footer,
  .section,
  .feature-list-wrap,
  .training-preview-section .training-preview-wrap,
  .launch-wrap,
  .benefits-wrap {
    padding-left:12px;
    padding-right:12px;
  }
  .copy h1 {
    font-size:clamp(26px,11vw,36px);
  }
  .copy p {
    font-size:15px;
  }
  .card {
    min-height:380px;
  }
  .live {
    position:static;
    margin:12px 12px 0 auto;
    display:flex;
    width:max-content;
  }
  .play {
    bottom:88px;
  }
  .feature-item h3::before {
    width:30px;
    height:30px;
    flex-basis:30px;
  }
  .feature-popup-close {
    width:38px;
    height:38px;
    font-size:22px;
  }
}
@media (min-width:681px) and (max-width:920px) {
  .site-header {
    position:static;
  }
  .section {
    padding-top:26px;
    padding-bottom:32px;
  }
  .copy {
    text-align:center;
  }
  .copy p {
    margin-left:auto;
    margin-right:auto;
  }
  .actions {
    justify-content:center;
  }
  .preview-wrap {
    width:min(680px,100%);
    margin:0 auto;
  }
  .feature-list-wrap {
    padding-top:32px;
    padding-bottom:22px;
  }
  .feature-list-head {
    text-align:center;
  }
  .feature-list-head p {
    margin-left:auto;
    margin-right:auto;
  }
  .feature-item {
    grid-template-columns:minmax(0,1fr) 240px;
  }
  .feature-item-media {
    min-height:200px;
  }
  .launch-copy {
    text-align:center;
  }
  .launch-copy > p {
    margin-left:auto;
    margin-right:auto;
  }
  .steps {
    max-width:680px;
    margin:0 auto;
  }
  .signup-card {
    width:min(520px,100%);
    margin:0 auto;
  }
}

@media (max-width:680px) {
  body {
    background:
      radial-gradient(circle at 16% 10%, rgba(92,229,168,.14), transparent 28%),
      linear-gradient(145deg,#030d0a 0%,#071812 58%,#04110d 100%);
  }
  .site-header {
    padding-top:8px;
    padding-bottom:8px;
  }
  .bar {
    gap:0;
  }
  .section {
    padding-top:22px;
    padding-bottom:28px;
  }
  .copy {
    text-align:center;
  }
  .copy small {
    font-size:10px;
  }
  .copy p {
    max-width:34rem;
    margin-left:auto;
    margin-right:auto;
  }
  .actions {
    margin-top:24px;
  }
  .preview-wrap {
    width:100%;
    margin-top:2px;
  }
  .card {
    min-height:400px;
  }
  .chip.a {
    display:none;
  }
  .visual {
    width:100%;
    transform:translate(-50%,-50%) scale(.94);
  }
  .feature-list-wrap {
    padding-top:28px;
    padding-bottom:20px;
  }
  .feature-list-head {
    text-align:center;
    margin-bottom:18px;
  }
  .feature-list-head h2,
  .launch-copy h2 {
    padding-bottom:8px;
  }
  .feature-list-head p {
    margin-left:auto;
    margin-right:auto;
  }
  .feature-list-grid {
    gap:12px;
  }
  .feature-item {
    gap:4px;
    border-radius:16px;
  }
  .feature-item-copy {
    padding:2px 2px 0;
  }
  .feature-item h3 {
    gap:9px;
  }
  .feature-item .feature-more {
    min-height:38px;
    margin-top:14px;
  }
  .feature-item-media {
    order:-1;
    min-height:180px;
  }
  .ai-mini-animation,
  .attack-mini-animation,
  .osint-mini-animation,
  .breach-mini-animation,
  .awareness-mini-animation,
  .immersive-mini-animation,
  .brand-mini-animation,
  .analytics-mini-animation {
    min-height:180px;
    transform:scale(.82);
  }
  .launch-wrap {
    text-align:center;
  }
  .launch-copy > p {
    margin-left:auto;
    margin-right:auto;
  }
  .steps {
    text-align:left;
  }
  .step {
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    column-gap:12px;
  }
  .step-number {
    grid-row:1 / span 2;
    margin:0;
  }
  .step h4 {
    margin-top:2px;
  }
  .signup-card {
    text-align:left;
  }
  .signup-note {
    text-align:center;
  }
  .benefit {
    padding:2px 0;
  }
  .footer-bar {
    align-items:flex-start;
  }
  .footer-links {
    width:100%;
    align-items:flex-start;
  }
  .solution-dropdown-menu {
    left:0;
    right:auto;
  }
}

@media (max-width:420px) {
  .brand-mark {
    height:48px;
  }
  .brand span {
    font-size:14px;
  }
  .brand-tagline {
    max-width:180px;
  }
  .section {
    padding-top:18px;
  }
  .copy h1 {
    letter-spacing:-.065em;
  }
  .card {
    min-height:430px;
  }
  .play {
    bottom:138px;
  }
  .ring {
    width:230px;
    height:230px;
  }
  .ring2 {
    width:170px;
    height:170px;
  }
  .visual {
    transform:translate(-50%,-50%) scale(.9);
  }
  .feature-item-media {
    min-height:160px;
  }
  .ai-mini-animation,
  .attack-mini-animation,
  .osint-mini-animation,
  .breach-mini-animation,
  .awareness-mini-animation,
  .immersive-mini-animation,
  .brand-mini-animation,
  .analytics-mini-animation {
    min-height:160px;
    transform:scale(.72);
  }
  .feature-more {
    width:100%;
  }
  .signup-frog-logo {
    width:48px;
  }
  .footer-links {
    flex-direction:column;
    gap:10px;
  }
}

@media (max-width:920px) {
  .preview-wrap {
    padding-top:8px;
  }
  .card {
    aspect-ratio:16 / 11;
    min-height:0;
  }
  .visual {
    width:88%;
    max-width:none;
    max-height:72%;
    object-fit:contain;
  }
  .scenario-switcher {
    left:18px;
    right:18px;
    bottom:14px;
    width:auto;
    max-width:none;
    justify-content:flex-start;
  }
}

@media (max-width:680px) {
  .preview-wrap {
    padding-top:0;
  }
  .card {
    aspect-ratio:1 / 1.05;
    min-height:0;
  }
  .visual {
    width:100%;
    max-height:66%;
    transform:translate(-50%,-54%) scale(.92);
  }
  .scenario-switcher {
    left:12px;
    right:12px;
    bottom:12px;
    gap:6px;
  }
  .scenario-btn {
    padding:7px 10px;
  }
  .status {
    left:14px;
    right:14px;
    bottom:66px;
  }
  .play {
    left:14px;
    bottom:126px;
  }
}

@media (max-width:420px) {
  .card {
    aspect-ratio:1 / 1.12;
  }
  .visual {
    max-height:62%;
    transform:translate(-50%,-56%) scale(.88);
  }
  .play {
    bottom:124px;
  }
}

@media (max-width:920px) {
  .site-header .bar {
    flex-wrap:wrap;
    gap:10px 16px;
  }
  .site-header .nav {
    margin-left:auto;
    margin-right:0;
    gap:8px;
  }
  .site-header .nav .about-button {
    min-height:36px;
    padding:7px 10px;
    white-space:nowrap;
  }
}

@media (max-width:680px) {
  .site-header .bar {
    flex-wrap:wrap;
  }
  .site-header .nav {
    width:100%;
    margin-left:0;
    justify-content:flex-end;
  }
}

@media (max-width:420px) {
  .site-header .nav {
    justify-content:space-between;
  }
  .site-header .nav .about-button {
    flex:1 1 0;
    justify-content:center;
    padding:7px 6px;
    font-size:10px;
  }
}

@media (max-width:1024px) {
  .signup-form,
  .contact-form {
    grid-template-columns:1fr;
  }
  .signup-card,
  .contact-popup-card {
    width:min(100%, 760px);
  }
  .contact-popup {
    place-items:end center;
    padding:16px;
  }
  .contact-popup-card {
    max-height:min(90vh,860px);
  }
  .contact-popup-card .feature-popup-head {
    padding:20px 18px 16px;
  }
  .contact-popup-card .feature-popup-head h3 {
    padding-right:52px;
    font-size:clamp(22px,4vw,30px);
  }
  .contact-popup-card .feature-popup-head p {
    max-width:none;
    line-height:1.5;
    letter-spacing:.06em;
  }
  .contact-popup-logo {
    display:none;
  }
  .contact-popup-card .feature-popup-close {
    position:absolute;
    top:14px;
    right:14px;
  }
  .contact-popup-card .feature-popup-body {
    padding:14px;
  }
  .contact-popup-card .feature-popup-body::before {
    min-height:0;
    padding:10px 11px;
    line-height:1.5;
  }
  .contact-field,
  .signup-form > *,
  .contact-form > * {
    min-width:0;
  }
}

@media (max-width:920px) {
  .contact-popup {
    padding:12px;
  }
  .contact-popup-card {
    width:100%;
    max-height:min(92vh,860px);
  }
  .contact-form {
    gap:10px;
    padding:12px;
  }
  .contact-field {
    min-width:0;
  }
}

@media (max-width:760px) {
  .contact-popup {
    place-items:end stretch;
    padding:0;
  }
  .contact-popup-card {
    width:100%;
    max-height:94vh;
    border-radius:22px 22px 0 0;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
  }
  .contact-popup-card .feature-popup-head {
    padding:18px 16px 14px;
    border-radius:21px 21px 0 0;
  }
  .contact-popup-card .feature-popup-head h3 {
    padding-right:46px;
  }
  .contact-popup-card .feature-popup-head p {
    font-size:10px;
  }
  .contact-popup-card .feature-popup-body {
    padding:12px 10px 14px;
  }
  .contact-form {
    grid-template-columns:1fr;
    padding:10px;
    gap:10px;
    border-radius:14px;
  }
  .contact-field label {
    font-size:12px;
  }
  .contact-field input,
  .contact-field select {
    height:46px;
    font-size:16px;
  }
  .contact-field textarea {
    min-height:120px;
    font-size:16px;
  }
  .contact-submit {
    min-height:46px;
  }
}

@media (max-width:920px) {
  .preview-wrap .card {
    aspect-ratio:16 / 11;
    min-height:0;
  }
  .preview-wrap .visual {
    width:88%;
    max-width:none;
    max-height:72%;
    object-fit:contain;
  }
  .preview-wrap .scenario-switcher {
    left:18px;
    right:18px;
    bottom:14px;
    width:auto;
    max-width:none;
    justify-content:flex-start;
  }
  .preview-wrap .scenario-btn {
    padding:8px 12px;
    font-size:10px;
  }
  .preview-wrap .status {
    left:18px;
    right:auto;
    bottom:72px;
    width:auto;
  }
  .preview-wrap .play {
    left:18px;
    bottom:72px;
    width:62px;
    height:62px;
  }
}

@media (max-width:920px) {
  .site-header {
    position:relative;
  }
  .site-header .bar {
    flex-wrap:nowrap;
  }
  .menu-toggle {
    width:42px;
    height:42px;
    display:inline-grid;
    place-items:center;
    flex:0 0 auto;
    margin-left:auto;
    padding:0;
    border:1px solid rgba(167,247,208,.42);
    border-radius:12px;
    background:rgba(92,229,168,.08);
    color:#a7f7d0;
    cursor:pointer;
  }
  .menu-toggle svg {
    width:20px;
    height:20px;
  }
  .site-header .nav {
    position:absolute;
    top:calc(100% + 8px);
    left:12px;
    right:12px;
    display:none;
    width:auto;
    margin:0;
    padding:10px;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    border:1px solid rgba(103,237,178,.2);
    border-radius:16px;
    background:rgba(3,13,10,.97);
    box-shadow:0 18px 38px rgba(0,0,0,.28);
  }
  .site-header .nav.open {
    display:flex;
  }
  .site-header .nav .about-button,
  .site-header .nav .solution-dropdown,
  .site-header .nav .solution-dropdown summary {
    width:100%;
  }
  .site-header .nav .about-button,
  .site-header .nav .solution-dropdown summary {
    min-height:42px;
    justify-content:flex-start;
    padding:9px 12px;
    font-size:12px;
  }
  .site-header .nav .solution-dropdown-menu {
    position:static;
    width:100%;
    min-width:0;
    margin-top:8px;
    box-shadow:none;
  }
}
@media (min-width:921px) {
  .menu-toggle {
    display:none;
  }
}

@media (max-width:920px) {
  .footer-bar {
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .footer-brand,
  .footer-links {
    justify-content:center;
  }
  .footer-links {
    width:100%;
    align-items:center;
  }
}

/* Keep the interactive scenario artwork and controls clear at tablet and mobile sizes. */
@media (max-width:920px) {
  .preview-wrap .card {
    height:clamp(380px,56vw,500px);
    min-height:0;
    aspect-ratio:auto;
  }
  .preview-wrap .visual {
    top:46%;
    width:calc(100% - 32px);
    height:calc(100% - 118px);
    max-height:none;
    object-fit:contain;
    transform:translate(-50%,-50%);
    animation:none;
  }
  .preview-wrap .status {
    display:none;
  }
  .preview-wrap .play {
    left:18px;
    bottom:70px;
  }
  .preview-wrap .scenario-switcher {
    left:14px;
    right:14px;
    bottom:12px;
    width:auto;
    max-width:none;
    padding-bottom:6px;
  }
}

@media (max-width:680px) {
  .preview-wrap .card {
    height:clamp(360px,108vw,460px);
  }
  .preview-wrap .visual {
    top:43%;
    width:calc(100% - 20px);
    height:calc(100% - 128px);
    transform:translate(-50%,-50%);
  }
  .preview-wrap .live {
    top:12px;
    right:12px;
  }
  .preview-wrap .play {
    left:14px;
    bottom:66px;
    width:54px;
    height:54px;
  }
  .preview-wrap .scenario-switcher {
    left:10px;
    right:10px;
    bottom:10px;
    gap:6px;
  }
}

@media (max-width:420px) {
  .preview-wrap .card {
    height:clamp(350px,116vw,430px);
  }
  .preview-wrap .visual {
    top:42%;
    height:calc(100% - 122px);
  }
  .preview-wrap .play {
    bottom:64px;
  }
}

/* Responsive scenario controls */
@media (min-width:681px) and (max-width:920px) {
  .preview-wrap .visual {
    top:43%;
    height:calc(100% - 154px);
  }
  .preview-wrap .play {
    bottom:90px;
  }
  .preview-wrap .scenario-switcher {
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:7px;
    overflow:visible;
    padding:0;
  }
  .preview-wrap .scenario-btn {
    grid-column:span 2;
    width:100%;
    min-width:0;
    min-height:34px;
    padding:8px 6px;
    font-size:9px;
    line-height:1.15;
    text-align:center;
  }
  .preview-wrap .scenario-btn:nth-child(4) {
    grid-column:2 / span 2;
  }
}

@media (max-width:680px) {
  .preview-wrap .card {
    padding-bottom:76px;
  }
  .preview-wrap .visual {
    height:calc(100% - 154px);
  }
  .preview-wrap .scenario-switcher {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    overflow:visible;
    padding:0;
  }
  .preview-wrap .scenario-btn {
    width:100%;
    min-width:0;
    min-height:32px;
    padding:7px 4px;
    font-size:9px;
    line-height:1.1;
    text-align:center;
  }
  .preview-wrap .play {
    bottom:88px;
  }
}

@media (max-width:420px) {
  .preview-wrap .card {
    padding-bottom:76px;
  }
  .preview-wrap .visual {
    height:calc(100% - 148px);
  }
  .preview-wrap .scenario-btn {
    font-size:8px;
    padding:7px 3px;
  }
  .preview-wrap .play {
    bottom:88px;
  }
}

@media (prefers-reduced-motion:reduce) {
  *,
  *::before,
  *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
}