:root {
  --bg:       #071420;
  --bg-2:     #0a1c2a;
  --bg-3:     #0e2233;
  --primary:  #00c49a;
  --accent:   #2df0b8;
  --cyan:     #3cf5c8;
  --ink:      #e7fffe;
  --ink-70:   rgba(231,255,254,.72);
  --ink-50:   rgba(231,255,254,.5);
  --ink-30:   rgba(231,255,254,.3);
  --stroke:   rgba(0, 196, 180, .18);
  --stroke-2: rgba(231,255,254,.08);
  --glass:    rgba(255,255,255,.025);
}
*, *::before, *::after { box-sizing: border-box; }
html,body {
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  background: #040b0e;
}
body {
  overflow-x: hidden;
  background:
    radial-gradient(ellipse 55% 45% at 12% 8%,  rgba(45,220,240,.07), transparent 60%),
    radial-gradient(ellipse 65% 50% at 92% 22%, rgba(45,230,245,.05), transparent 62%),
    radial-gradient(ellipse 50% 40% at 50% 55%, rgba(0,196,220,.03),  transparent 65%),
    radial-gradient(ellipse 60% 50% at 15% 85%, rgba(0,196,180,.04),  transparent 60%),
    radial-gradient(ellipse 60% 50% at 88% 92%, rgba(45,220,240,.04), transparent 60%),
    linear-gradient(165deg, #050c10 0%, #040b0e 35%, #030a0d 65%, #040b0e 100%);
  background-attachment: fixed;
  background-size: 100% 100%;
}

/* Animated aurora sweep over the whole page (subtle motion, dark) */
body::before {
  content: '';
  position: fixed; inset: -20% -10%;
  z-index: -2;
  background:
    radial-gradient(ellipse 40% 30% at 20% 20%, rgba(45,220,240,.05), transparent 60%),
    radial-gradient(ellipse 35% 30% at 80% 40%, rgba(45,230,245,.04), transparent 60%),
    radial-gradient(ellipse 45% 35% at 60% 80%, rgba(0,196,220,.03),  transparent 60%);
  filter: blur(50px);
  animation: auroraDrift 38s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes auroraDrift {
  0%   { transform: translate(-4%, -3%) rotate(-1deg) scale(1.02); }
  50%  { transform: translate(3%, 2%) rotate(1deg) scale(1.06); }
  100% { transform: translate(-2%, 3%) rotate(-0.5deg) scale(1.02); }
}
.font-display { font-family: 'Space Grotesk', 'Inter', sans-serif; letter-spacing: -0.02em; }
.font-mono { font-family: 'JetBrains Mono', monospace; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #040b0e; }
::-webkit-scrollbar-thumb { background: rgba(0,196,192,.25); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,196,192,.45); }
::selection { background: rgba(0,196,192,.35); color: #fff; }

.text-grad,
h1.font-display,
h2.font-display,
h3.font-display {
  background: linear-gradient(120deg, #e7fffe 0%, #7ffff5 40%, #00c4c0 70%, #e7fffe 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 8s linear infinite;
}
@keyframes shimmer { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }

.glass {
  background: rgba(8, 18, 22, .55);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(45, 240, 214, .12);
}
.glass-strong {
  background: linear-gradient(180deg, rgba(8,18,22,.78), rgba(3,9,12,.92));
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(45, 240, 214, .16);
}
.glass-card {
  background:
    linear-gradient(180deg, rgba(45, 240, 214, .04), rgba(0, 196, 192, 0) 60%),
    linear-gradient(180deg, rgba(8,18,22,.65), rgba(3,9,12,.85));
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 196, 192, .12);
  transition: border-color .35s ease, transform .95s ease, box-shadow .35s ease, opacity .95s ease;
}
.glass-card:hover {
  border-color: rgba(0, 196, 192, .35);
  transform: translateY(-2px);
  box-shadow: 0 20px 60px -20px rgba(0, 196, 192, .25);
}

.grad-border { position: relative; }
.grad-border::before {
  content: '';
  position: absolute; inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(0,196,192,.55), rgba(55,245,235,.15) 35%, transparent 60%, rgba(0,196,192,.4) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

.glow-primary { box-shadow: 0 0 0 1px rgba(0,196,192,.35), 0 10px 40px -10px rgba(0,196,192,.55), inset 0 1px 0 rgba(255,255,255,.14); }
.glow-soft { box-shadow: 0 0 80px -20px rgba(0,196,192,.35); }

.btn-primary {
  position: relative;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .9rem 1.6rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #00ddd6, #00a8a4);
  color: #031212;
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(0,196,192,.4), 0 12px 30px -10px rgba(0,196,192,.55), inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 0 0 1px rgba(0,196,192,.55), 0 18px 40px -10px rgba(0,196,192,.75), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .9rem 1.4rem;
  border-radius: 999px;
  color: var(--ink);
  border: 1px solid rgba(231,255,254,.14);
  background: rgba(255,255,255,.02);
  backdrop-filter: blur(8px);
  transition: all .25s ease;
}
.btn-ghost:hover { border-color: rgba(0,196,192,.45); color: #2df0d6; background: rgba(0,196,192,.06); }

/* Section dividers */
.hairline { height: 1px; background: linear-gradient(90deg, transparent, rgba(0,196,192,.35), transparent); }

/* Chip */
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .8rem;
  border-radius: 999px;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: #7ffff5;
  background: rgba(0,196,192,.08);
  border: 1px solid rgba(0, 196, 192, .2);
  font-family: 'JetBrains Mono', monospace;
}
.chip .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: #2df0d6; box-shadow: 0 0 10px #2df0d6;
  animation: pulseDot 1.8s ease-in-out infinite;
}
@keyframes pulseDot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.85); } }

/* Ambient orbs */
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: .5;
  pointer-events: none;
  will-change: transform;
}

/* Grid bg */
.grid-bg {
  background-image:
    linear-gradient(rgba(0,196,192,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,196,192,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 30%, #000 30%, transparent 75%);
  animation: gridDrift 120s linear infinite;
}
@keyframes gridDrift { from { background-position: 0 0; } to { background-position: 56px 56px; } }

/* Animated color mesh — subtle gradient motion (much darker) */
.mesh-anim {
  background:
    radial-gradient(60% 50% at 20% 15%,  rgba(45,240,214,.07), transparent 70%),
    radial-gradient(55% 45% at 85% 35%,  rgba(55,245,235,.05), transparent 70%),
    radial-gradient(50% 40% at 40% 75%,  rgba(127,255,245,.04), transparent 70%),
    radial-gradient(45% 35% at 80% 88%,  rgba(0,196,192,.04), transparent 70%);
  background-size: 200% 200%;
  animation: meshFlow 30s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}
@keyframes meshFlow {
  0%   { background-position: 0% 0%,    100% 0%,   0% 100%, 100% 100%; }
  50%  { background-position: 20% 30%,  80% 10%,   30% 80%, 90% 60%; }
  100% { background-position: 100% 100%, 0% 100%,  100% 0%, 0% 0%; }
}

/* Very subtle noise for organic feel (pure CSS, no image) */
.bg-noise {
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,.015) 0 1px, transparent 1px 3px),
    repeating-radial-gradient(circle at 70% 60%, rgba(45,240,214,.01) 0 1px, transparent 1px 3px);
  opacity: .6;
  mix-blend-mode: overlay;
}

/* Section surfaces — tinted so sections feel distinct */
.surface-a { background: linear-gradient(180deg, transparent, rgba(0,196,192,.04) 50%, transparent); }
.surface-b { background: radial-gradient(ellipse at 50% 50%, rgba(55,245,235,.04), transparent 60%); }
.surface-c { background: linear-gradient(180deg, rgba(0,196,192,.05), transparent 40%); }

/* Aurora ribbon — page section dividers */
.aurora-divider {
  position: relative; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(45,240,214,.4) 20%, rgba(55,245,235,.6) 50%, rgba(45,240,214,.4) 80%, transparent);
  filter: blur(.5px);
}
.aurora-divider::after {
  content:''; position:absolute; left:0;right:0;top:-20px;height:40px;
  background: linear-gradient(90deg, transparent, rgba(45,240,214,.08) 50%, transparent);
  filter: blur(12px);
}

/* Pulse ring for step nodes */
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(45,240,214,.5); }
  70% { box-shadow: 0 0 0 16px rgba(45,240,214,0); }
  100% { box-shadow: 0 0 0 0 rgba(45,240,214,0); }
}
.pulse-ring { animation: pulseRing 2.4s ease-out infinite; }

/* Data packet flying along path */
@keyframes packet {
  from { -webkit-offset-distance: 0%;   offset-distance: 0%; }
  to   { -webkit-offset-distance: 100%; offset-distance: 100%; }
}
.packet { animation: packet 3s linear infinite; }

/* Shake attack */
@keyframes attackShake { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-1px,1px); } 50% { transform: translate(1px,-1px); } 75% { transform: translate(-1px,-1px); } }
.shake { animation: attackShake .5s ease-in-out infinite; }

/* Scroll-triggered count-up helper class — purely decorative */
.num-glow { text-shadow: 0 0 20px rgba(45,240,214,.5); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .95s ease, transform .95s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-left  { opacity: 0; transform: translateX(-40px); transition: opacity .95s ease, transform .95s ease; }
.reveal-right { opacity: 0; transform: translateX(40px);  transition: opacity .95s ease, transform .95s ease; }
.reveal-scale { opacity: 0; transform: scale(.94) translateY(16px); transition: opacity .95s ease, transform .95s ease; }
.reveal-fade  { opacity: 0; transition: opacity 1.15s ease; }
.reveal-left.in, .reveal-right.in, .reveal-scale.in, .reveal-fade.in { opacity: 1; transform: none; }
/* Sequential stagger delays */
.d1 { transition-delay: .13s; }
.d2 { transition-delay: .28s; }
.d3 { transition-delay: .44s; }
.d4 { transition-delay: .62s; }
.d5 { transition-delay: .82s; }

/* Tilt card */
.tilt { transform-style: preserve-3d; transition: transform .2s ease; }

/* Animated underline */
.link-u { position: relative; }
.link-u::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px; background: linear-gradient(90deg, transparent, #2df0d6, transparent);
  transform: scaleX(0); transform-origin: center;
  transition: transform .4s ease;
}
.link-u:hover::after { transform: scaleX(1); }

/* Marquee */
.marquee { display: flex; gap: 3rem; animation: marq 30s linear infinite; }
@keyframes marq { to { transform: translateX(-50%); } }

/* Scan line */
.scan::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #2df0d6, transparent);
  animation: scanline 3s ease-in-out infinite;
}
@keyframes scanline { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* Ripple circles for globe */
@keyframes ripple { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(2); opacity: 0; } }
.ripple { animation: ripple 3s ease-out infinite; transform-origin: center; }

/* Rotate slow */
@keyframes rotateSlow { to { transform: rotate(360deg); } }
.rot-slow { animation: rotateSlow 60s linear infinite; transform-origin: center; }
.rot-rev { animation: rotateSlow 90s linear infinite reverse; transform-origin: center; }

/* Float */
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.floaty { animation: floaty 6s ease-in-out infinite; }

/* Stream lines (for protection flow) */
.stream {
  stroke-dasharray: 4 6;
  animation: dash 2s linear infinite;
}
@keyframes dash { to { stroke-dashoffset: -20; } }

/* Pricing highlight */
.plan-pop {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,196,192,.22), transparent 70%),
    linear-gradient(180deg, rgba(10,18,22,.85), rgba(5,9,12,.95));
  border: 1px solid rgba(0,196,192,.45);
  box-shadow: 0 0 0 1px rgba(0,196,192,.1), 0 40px 80px -20px rgba(0,196,192,.35);
}

/* Kbd */
.kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--ink-70);
}

/* Tweaks panel */
.tweaks-panel {
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 80;
  width: 320px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(10,18,22,.92), rgba(5,9,12,.96));
  backdrop-filter: blur(18px);
  border: 1px solid rgba(0,196,192,.25);
  border-radius: 16px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(0,196,192,.08);
  padding: 14px;
}
.tw-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 6px; font-family: 'JetBrains Mono', monospace;}
.tw-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 6px; }
.tw-btn {
  font-size: 11px; padding: 7px 8px; border-radius: 8px;
  border: 1px solid rgba(231,255,254,.1); color: var(--ink-70);
  background: rgba(255,255,255,.02); cursor: pointer;
  transition: all .2s;
}
.tw-btn:hover { border-color: rgba(0,196,192,.4); color: var(--ink); }
.tw-btn.on { background: rgba(0,196,192,.18); border-color: rgba(0,196,192,.6); color: #c8fffe; }

/* Modal */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeIn .25s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  width: 100%; max-width: 520px;
  background: linear-gradient(180deg, rgba(10,18,22,.95), rgba(5,9,12,.98));
  border: 1px solid rgba(0,196,192,.3);
  border-radius: 20px;
  box-shadow: 0 40px 100px -20px rgba(0,196,192,.3);
  animation: popIn .3s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes popIn { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Mobile menu */
.mob-menu {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(3,8,10,.96);
  backdrop-filter: blur(16px);
}

/* Team cards — red/blue overlay reveal on hover */
.team-card { position: relative; }
.team-photo {
  position: relative;
  width: 185px;
  flex-shrink: 0;
  align-self: flex-end;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, #0c1a1e 0%, #040b0d 100%);
  border: 1px solid rgba(0,196,192,.18);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.8);
  isolation: isolate;
}
.team-photo .team-chip {
  position: absolute;
  left: 8px; bottom: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  z-index: 3;
  display: inline-flex; align-items: center;
  backdrop-filter: blur(8px);
  transition: transform .4s ease;
}
.team-photo .team-tex {
  position: absolute; inset: 0;
  opacity: .95;
  transition: opacity .6s cubic-bezier(.2,.7,.3,1), filter .6s ease;
  z-index: 1;
  mix-blend-mode: screen;
}
.team-photo .team-dots {
  position: absolute; inset: 0;
  mix-blend-mode: multiply;
  opacity: .55;
}
.team-photo .team-img {
  position: absolute;
  left: 50%; bottom: -15%;
  transform: translateX(-50%);
  height: 115%;
  width: auto;
  max-width: none;
  z-index: 2;
  filter: grayscale(15%) brightness(.98) contrast(1.05);
  transition: filter .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
.team-card:hover .team-photo .team-tex { opacity: 0; filter: blur(10px); }
.team-card:hover .team-photo .team-img { filter: grayscale(0%) brightness(1.05); transform: translateX(-50%) scale(1.03); }
.team-card:hover .team-photo .team-chip { transform: translateY(-2px); }
.team-photo[data-tone="blue"] { box-shadow: 0 30px 80px -30px rgba(43,127,255,.35), inset 0 0 0 1px rgba(65,145,255,.15); }
.team-photo[data-tone="red"]  { box-shadow: 0 30px 80px -30px rgba(255,59,59,.35),  inset 0 0 0 1px rgba(255,90,90,.15); }
.team-photo[data-tone="red"] .team-chip {
  background: rgba(38, 4, 7, .88) !important;
  border: 1px solid rgba(255, 90, 90, .95) !important;
  color: #fff3f3 !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .55),
    0 8px 20px rgba(0, 0, 0, .55),
    0 0 18px rgba(255, 59, 59, .35);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}
.team-photo[data-tone="red"] .team-chip span {
  outline: 1px solid rgba(255, 255, 255, .35);
}
@media (max-width: 500px) {
  .team-photo { width: 120px; }
}

/* History page — team figures with overlay that fades on hover */
.history-figure { isolation: isolate; cursor: pointer; }
.history-figure > div:nth-child(1),
.history-figure > div:nth-child(2) {
  transition: opacity .65s cubic-bezier(.2,.7,.3,1), filter .65s ease;
  pointer-events: none;
}
.history-figure .history-img {
  transition: filter .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.history-figure:hover > div:nth-child(1) { opacity: 0; filter: blur(12px); }
.history-figure:hover > div:nth-child(2) { opacity: 0; }
.history-figure:hover .history-img { filter: grayscale(0%) brightness(1.05) contrast(1.05); transform: translateX(-50%) scale(1.03); }
.history-story-wrap {
  position: relative;
  min-height: 680px;
  padding: clamp(2rem, 5vw, 4.5rem) 0;
  overflow: visible;
}
.history-story-card {
  position: relative;
  z-index: 3;
  width: 100%;
  min-width: 0;
  max-width: 780px;
  margin-inline: auto;
  box-shadow: 0 30px 90px -40px rgba(0, 0, 0, .75);
}
.history-title {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.history-side-figure {
  position: absolute;
  bottom: 0;
  width: min(34vw, 380px);
  height: min(72vw, 680px);
  z-index: 0;
  pointer-events: none;
  opacity: 1;
}
.history-side-figure::before {
  content: '';
  position: absolute;
  z-index: 0;
  width: 130%;
  height: 72%;
  filter: blur(30px);
  opacity: .28;
  mix-blend-mode: screen;
}
.history-side-figure::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: 92%;
  height: 48%;
  filter: blur(34px);
  opacity: .18;
  mix-blend-mode: screen;
}
.history-side-figure img {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  mix-blend-mode: normal;
  filter: brightness(1.0) contrast(1.05);
  opacity: 1;
}
.history-side-figure-red {
  left: max(-6rem, calc(50% - 670px));
}
.history-side-figure-red::before {
  left: -34%;
  top: 16%;
  background: radial-gradient(ellipse at 38% 52%, rgba(255, 64, 82, .78), rgba(255, 64, 82, .25) 42%, transparent 72%);
}
.history-side-figure-red::after {
  right: -10%;
  bottom: 12%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 118, 82, .45), transparent 72%);
}
.history-side-figure-red img {
  left: 0;
  transform: none;
}
.history-side-figure-blue {
  right: max(-6rem, calc(50% - 670px));
}
.history-side-figure-blue::before {
  right: -34%;
  top: 14%;
  background: radial-gradient(ellipse at 62% 50%, rgba(43, 127, 255, .76), rgba(43, 127, 255, .24) 42%, transparent 72%);
}
.history-side-figure-blue::after {
  left: -10%;
  bottom: 14%;
  background: radial-gradient(ellipse at 50% 50%, rgba(45, 240, 214, .38), transparent 72%);
}
.history-side-figure-blue img {
  right: 0;
  left: 0;
  transform: none;
}
@media (max-width: 1024px) {
  .history-story-wrap { min-height: auto; padding-block: 2.5rem; }
  .history-side-figure {
    width: min(42vw, 280px);
    height: min(62vw, 460px);
    opacity: .35;
  }
  .history-side-figure-red { left: -6rem; }
  .history-side-figure-blue { right: -6rem; }
}
@media (max-width: 720px) {
  .history-side-figure { display: none; }
  .history-story-wrap {
    width: 100%;
    max-width: 100%;
    overflow: visible;
    padding-block: 1.25rem;
  }
  .history-title {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 1.9rem !important;
    line-height: 1.08;
    overflow-wrap: anywhere !important;
    word-break: break-word;
  }
  .history-story-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    padding: 1.25rem !important;
    overflow-wrap: anywhere;
  }
  .history-story-card p,
  .history-story-card blockquote {
    max-width: 100%;
    overflow-wrap: anywhere !important;
    word-break: break-word;
  }
}

/* Button keyframes + primary pulse */
@keyframes btnPulse {
  0%,100% { box-shadow: 0 0 0 1px rgba(0,196,192,.4), 0 12px 30px -10px rgba(0,196,192,.55), inset 0 1px 0 rgba(255,255,255,.3); }
  50%     { box-shadow: 0 0 0 1px rgba(0,196,192,.65), 0 18px 40px -6px rgba(45,240,214,.75), inset 0 1px 0 rgba(255,255,255,.4); }
}
@keyframes btnSweep {
  0%   { transform: translateX(-120%) skewX(-18deg); }
  60%  { transform: translateX(220%) skewX(-18deg); }
  100% { transform: translateX(220%) skewX(-18deg); }
}
.btn-primary { position: relative; overflow: hidden; animation: btnPulse 2.8s ease-in-out infinite; }
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
}
.btn-primary:hover::after { animation: btnSweep 1.1s ease forwards; }

/* Pricing card plan buttons */
.plan-btn {
  position: relative; overflow: hidden;
  transition: transform .25s ease, box-shadow .3s ease, filter .25s ease;
}
.plan-btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
  transform: translateX(-120%) skewX(-20deg);
  pointer-events: none;
}
.plan-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.plan-btn:hover::before { animation: btnSweep 1s ease forwards; }
.plan-btn:active { transform: translateY(0); }

.plan-card {
  transition: transform .95s cubic-bezier(.2,.7,.3,1), border-color .4s ease, box-shadow .4s ease, opacity .95s ease;
  will-change: transform, opacity;
}
.plan-card::after {
  content: ''; position: absolute; inset: -1px;
  border-radius: inherit;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(45,240,214,.25), transparent 70%);
  opacity: 0; transition: opacity .4s ease;
  pointer-events: none;
}
.plan-card:hover {
  transform: translateY(-6px);
  border-color: rgba(45,240,214,.5) !important;
  box-shadow: 0 40px 80px -20px rgba(0,196,192,.35) !important;
}
.plan-card:hover::after { opacity: 1; }

/* Flow section extra anims */
@keyframes flowTravel {
  0%   { -webkit-offset-distance: 0%;   offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { -webkit-offset-distance: 100%; offset-distance: 100%; opacity: 0; }
}
.flow-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: #2df0d6; box-shadow: 0 0 12px #2df0d6;
  -webkit-offset-rotate: 0deg; offset-rotate: 0deg;
  animation: flowTravel 3s linear infinite;
}
@keyframes stageGlow {
  0%,100% { box-shadow: 0 20px 50px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(0,196,192,.22); }
  50%     { box-shadow: 0 20px 50px -20px rgba(0,0,0,.6), 0 0 30px -4px rgba(45,240,214,.4), 0 0 0 1px rgba(45,240,214,.45); }
}
.stage-anim { animation: stageGlow 3.5s ease-in-out infinite; }
.stage-anim:nth-child(2) { animation-delay: .8s; }
.stage-anim:nth-child(3) { animation-delay: 1.6s; }

/* Protection page step card hover anim */
.step-card {
  position: relative;
  transition: transform .95s cubic-bezier(.2,.7,.3,1), border-color .4s ease, opacity .95s ease;
}
.step-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(45,240,214,.2), transparent 65%);
  border-radius: inherit;
  opacity: 0; transition: opacity .4s ease;
  pointer-events: none;
}
.step-card:hover { transform: translateY(-6px); }
.step-card:hover::before { opacity: 1; }
@keyframes stepPulse {
  0%,100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(45,240,214,0)); }
  50%     { transform: scale(1.08); filter: drop-shadow(0 0 12px rgba(45,240,214,.6)); }
}
.step-num { display: inline-block; animation: stepPulse 3s ease-in-out infinite; transform-origin: left center; }

/* Variants: accent palettes */
[data-accent="acid"] { --primary: #b6ff3c; --accent: #d8ff5c; --cyan: #79f5b8; }
[data-accent="acid"] .text-grad { background: linear-gradient(120deg, #f4ffdd 0%, #d8ff5c 40%, #b6ff3c 70%, #f4ffdd 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; }
[data-accent="mint"] { --primary: #68ffe0; --accent: #a8fff0; --cyan: #8af1ff; }
[data-accent="mint"] .text-grad { background: linear-gradient(120deg, #e7fff5 0%, #a8fff0 40%, #68ffe0 70%, #e7fff5 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; }

/* Variants: typography */
[data-type="grotesk"] body, [data-type="grotesk"] .font-body { font-family: 'Space Grotesk', sans-serif; }
[data-type="grotesk"] .font-display { font-family: 'Space Grotesk', sans-serif; }
[data-type="mono"] .font-display { font-family: 'JetBrains Mono', monospace; letter-spacing: -0.04em; }

/* Variants: card style */
[data-card="sharp"] .glass-card { border-radius: 4px !important; background: rgba(5,9,12,.7); border: 1px solid rgba(0,196,192,.3); backdrop-filter: none; }
[data-card="solid"] .glass-card { background: #0a1418; backdrop-filter: none; border: 1px solid rgba(231,255,254,.08); }

/* Content-visibility: skip rendering off-screen sections */
#solutions, #about, #pricing, #flow, #trust {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}

/* Performance: respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .floaty, .rot-slow, .rot-rev, .marquee, .stream,
  .pulse-ring, .mesh-anim, .grid-bg, .auroraDrift,
  .step-num, .stage-anim, .flow-dot, .chip .dot { animation: none !important; }
  .reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-fade { opacity: 1; transform: none; transition: none; }
  .d1, .d2, .d3, .d4, .d5 { transition-delay: 0s; }
}

/* ============================================================
   Touch device performance (phones + tablets like Xiaomi Pad 2)
   Uses pointer:coarse to catch ALL touch screens regardless of width.
   backdrop-filter and fixed backgrounds are the #1 fps killers on
   Android WebView/Chrome — disable them unconditionally on touch.
   ============================================================ */
@media (pointer: coarse) {
  /* Fixed backgrounds trigger full repaint on every scroll frame */
  body { background-attachment: scroll; }

  /* Stop aurora — costs a compositor layer every frame */
  body::before { animation: none !important; }

  /* backdrop-filter is GPU-expensive on Android; remove it everywhere */
  .glass      { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .glass-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* Keep a light blur only for the mobile nav overlay */
  .mob-menu   { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

  /* Stop animated backgrounds */
  .mesh-anim { animation: none !important; background: none; }
  .grid-bg   { animation: none !important; }

  /* Static gradient on headings — shimmer repaints every frame */
  .text-grad,
  h1.font-display,
  h2.font-display,
  h3.font-display {
    animation: none !important;
    background-position: 0% 0 !important;
  }

  /* Button pulse / sweep */
  .btn-primary      { animation: none !important; }
  .btn-primary::after { display: none; }

  /* No hover states on touch — saves transition overhead */
  .plan-card,
  .glass-card { transition: border-color .2s ease; will-change: auto; }
  .plan-card:hover  { transform: none; }
  .glass-card:hover { transform: none; box-shadow: none; }

  /* Stop all decorative looping animations */
  .floaty     { animation: none !important; }
  .step-num   { animation: none !important; }
  .stage-anim { animation: none !important; }
  .stream     { animation: none !important; stroke-dasharray: 4 6; }
  .flow-dot   { animation-duration: 6s; }
  .rot-slow   { animation-duration: 240s; }
  .rot-rev    { animation-duration: 300s; }
  .marquee    { animation-duration: 60s; }

  /* Simpler reveal: fade only, no movement */
  .reveal, .reveal-left, .reveal-right, .reveal-scale { transform: none !important; transition: opacity .5s ease; }
  .reveal.in, .reveal-left.in, .reveal-right.in, .reveal-scale.in, .reveal-fade.in { opacity: 1; }
  .d1, .d2, .d3, .d4, .d5 { transition-delay: 0s; }

  /* Reduce glow box-shadows on team photos */
  .team-photo[data-tone="blue"],
  .team-photo[data-tone="red"] { box-shadow: 0 10px 30px -10px rgba(0,0,0,.6); }

  /* Step cards */
  .step-card::before { display: none; }
  .step-card:hover   { transform: none; }

  /* Drop layer-promotion hints that aren't animating */
  .orb        { will-change: auto; filter: blur(40px); }
  .plan-card  { will-change: auto; }

  /* Ripple rings on the globe — re-enable animation (static frozen rings looked bad) */
  .ripple { animation: ripple 3s ease-out infinite !important; transform-origin: center; opacity: 0.7; }

  /* SVG glow filters handled conditionally in JS (not disabled here to avoid
     breaking filter-referenced groups on iOS Safari) */
}

/* Extra cuts for small phones (keeps layouts intact, just less paint) */
@media (max-width: 768px) {
  .glass-strong { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .orb { display: none; }
}

/* FlowSection / FlowDiagram packet animations — offset-path for iOS Safari */
@keyframes pktMove {
  from { -webkit-offset-distance: 0%;   offset-distance: 0%; }
  to   { -webkit-offset-distance: 100%; offset-distance: 100%; }
}
@keyframes pktFade {
  0%, 80% { opacity: 1; }
  100%    { opacity: 0; }
}

/* ============================================================
   Retina / high-DPR optimizations (pointer:fine = Mac trackpad/mouse)
   Macs with Retina display render at 2× — GPU-heavy effects get
   reduced to prevent fan spin on older hardware.
   ============================================================ */
/* min-resolution + webkit-min-device-pixel-ratio for broad Safari compat */
@media (pointer: fine) and (min-resolution: 1.5dppx),
       (pointer: fine) and (-webkit-min-device-pixel-ratio: 1.5) {
  /* Aurora: reduce blur & slow animation — blur(50px) at 2× = enormous compositing layer */
  body::before { filter: blur(30px); animation-duration: 60s; }
  /* Orbs: smaller blur radius at high DPR still looks identical to human eye */
  .orb { filter: blur(55px); }
}

/* will-change hints — elements animate in both directions so keep hint active */
.reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-fade {
  will-change: opacity, transform;
}