/* Crypto Lifeguard Brand Stylesheet
   Based on CLG Brand Guidelines v02.26
   Modern build: scroll reveals, mesh gradients, bento, animated mark */

:root{
  --clg-black:#14202E;
  --clg-grey100:#1E2E3D;
  --clg-grey50:#6D7A8A;
  --clg-grey10:#E1E8F0;
  --clg-blue:#1C4E7F;
  --clg-blue20:#C4D3EB;
  --clg-green:#3BB4AD;
  --clg-green30:#C4E9E6;
  --clg-red:#B72B29;
  --ease-out-quint: cubic-bezier(.22,1,.36,1);
}

*{ -webkit-tap-highlight-color: transparent; min-width:0; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  color:var(--clg-black);
  -webkit-font-smoothing:antialiased;
  background:#fff;
  overflow-x:hidden;
  max-width:100%;
  /* Belt-and-braces: Safari sometimes ignores html overflow-x on scroll */
  position:relative;
}
/* Ensure no section stretches the page width */
section, header, footer{ max-width:100%; overflow-x:hidden; }
img, svg, video{ max-width:100%; height:auto; }

::selection{ background:#1C4E7F; color:#fff; }

/* ---------- Brand gradients ---------- */
.grad-deep-blue{ background:linear-gradient(160deg, #14202E 0%, #14202E 35%, #1C4E7F 100%); }
.grad-metal{ background:linear-gradient(160deg, #14202E 0%, #6D7A8A 100%); }
.grad-white-glow{ background:linear-gradient(180deg, #FFFFFF 0%, #E1E8F0 100%); }

/* Gradient text */
.grad-text{
  background:linear-gradient(100deg, #1C4E7F 0%, #3BB4AD 50%, #C4D3EB 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.grad-text-light{
  background:linear-gradient(100deg, #FFFFFF 0%, #C4D3EB 50%, #3BB4AD 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ---------- Lifebuoy pattern background ---------- */
.pattern-bg{
  background-color:#14202E;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 1px, transparent 1.5px),
    linear-gradient(160deg, #14202E 0%, #14202E 40%, #1C4E7F 100%);
  background-size: 48px 48px, 100% 100%;
}

/* ---------- Navigation: sticky + scrolled state ---------- */
.nav-root{
  position:fixed; top:0; left:0; right:0; z-index:50;
  transition: background .35s var(--ease-out-quint), backdrop-filter .35s var(--ease-out-quint), border-color .35s var(--ease-out-quint), box-shadow .35s var(--ease-out-quint);
  border-bottom:1px solid transparent;
}
.nav-root.scrolled{
  background:rgba(20,32,46,0.78);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom-color:rgba(255,255,255,0.08);
}
.nav-root.scrolled.on-light{
  background:rgba(255,255,255,0.82);
  border-bottom-color:rgba(20,32,46,0.08);
  box-shadow:0 6px 30px rgba(20,32,46,0.06);
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height: 100vh;
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
.hero-compact{ min-height: 62vh; }
/* Mesh gradient */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(60rem 40rem at 82% 18%, rgba(59,180,173,0.28) 0%, rgba(20,32,46,0) 55%),
    radial-gradient(55rem 35rem at 12% 80%, rgba(28,78,127,0.65) 0%, rgba(20,32,46,0) 60%),
    radial-gradient(40rem 30rem at 50% 110%, rgba(196,211,235,0.18) 0%, rgba(20,32,46,0) 60%),
    linear-gradient(160deg, #0B1320 0%, #14202E 45%, #1C4E7F 100%);
  z-index:-2;
}
/* Grain */
.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:0.35; mix-blend-mode:overlay; pointer-events:none;
  z-index:-1;
}
.hero-pattern{
  position:absolute; inset:0; z-index:0; opacity:0.10; pointer-events:none;
  mask-image:radial-gradient(ellipse at 60% 40%, black 20%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at 60% 40%, black 20%, transparent 80%);
}

/* Hero floating blobs */
.blob{
  position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; pointer-events:none;
  z-index:-1;
}
.blob-a{ width:420px; height:420px; background:radial-gradient(circle, #1C4E7F, transparent 70%); top:10%; right:-80px; animation: float-a 18s ease-in-out infinite; }
.blob-b{ width:320px; height:320px; background:radial-gradient(circle, #3BB4AD, transparent 70%); bottom:-40px; left:-60px; animation: float-b 22s ease-in-out infinite; opacity:.35; }

@keyframes float-a{ 0%,100%{ transform:translate3d(0,0,0) } 50%{ transform:translate3d(-20px,18px,0) } }
@keyframes float-b{ 0%,100%{ transform:translate3d(0,0,0) } 50%{ transform:translate3d(24px,-16px,0) } }

/* Animated rotating lifebuoy */
.lifebuoy-hero{
  position:absolute; width:min(52vw, 720px); aspect-ratio:1/1;
  right:-8%; top:50%; transform:translateY(-50%);
  z-index:0; pointer-events:none;
  opacity:.85;
}
.lifebuoy-hero svg{ width:100%; height:100%; }
.lifebuoy-spin{ animation: spin-slow 60s linear infinite; transform-origin:center; }
.lifebuoy-pulse{ animation: pulse-ring 4s ease-in-out infinite; transform-origin:center; }
@keyframes spin-slow{ to{ transform:rotate(360deg); } }
@keyframes pulse-ring{ 0%,100%{ opacity:.4 } 50%{ opacity:.9 } }

/* ---------- Floating alert cards in hero ---------- */
.alert-stack{ position:relative; width:100%; max-width:420px; }
.alert-card{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.16);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-radius:16px; padding:14px 16px; color:#fff;
  box-shadow:0 24px 80px rgba(0,0,0,.25);
  transition: transform .5s var(--ease-out-quint);
}
.alert-card .dot{
  width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:8px;
  box-shadow:0 0 0 4px rgba(59,180,173,0.2);
  animation: dot-pulse 2.2s ease-in-out infinite;
}
@keyframes dot-pulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(59,180,173,0.15) } 50%{ box-shadow:0 0 0 8px rgba(59,180,173,0.05) } }
.alert-drop{ animation: drop-in .9s var(--ease-out-quint) both; }
.alert-drop-2{ animation: drop-in .9s var(--ease-out-quint) .2s both; }
.alert-drop-3{ animation: drop-in .9s var(--ease-out-quint) .4s both; }
@keyframes drop-in{
  0%{ transform:translateY(-12px) scale(.98); opacity:0 }
  100%{ transform:translateY(0) scale(1); opacity:1 }
}

/* ---------- Reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition: opacity .9s var(--ease-out-quint), transform .9s var(--ease-out-quint); }
.reveal.in{ opacity:1; transform:none; }
.reveal.delay-1{ transition-delay:.08s; }
.reveal.delay-2{ transition-delay:.16s; }
.reveal.delay-3{ transition-delay:.24s; }
.reveal.delay-4{ transition-delay:.32s; }
.reveal.delay-5{ transition-delay:.4s; }

@media (prefers-reduced-motion: reduce){
  .reveal, .alert-drop, .alert-drop-2, .alert-drop-3{ opacity:1 !important; transform:none !important; animation:none !important; }
  .lifebuoy-spin, .lifebuoy-pulse, .blob-a, .blob-b, .marquee-track{ animation:none !important; }
}

/* ---------- Bento grid cards ---------- */
.bento{
  display:grid; gap:16px;
  grid-template-columns:repeat(6, 1fr);
  grid-auto-rows: minmax(200px, auto);
}
@media (max-width: 900px){ .bento{ grid-template-columns:repeat(2, 1fr); } }
.bento-item{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--clg-grey10);
  border-radius:22px; padding:28px;
  transition: transform .4s var(--ease-out-quint), border-color .3s ease, box-shadow .4s var(--ease-out-quint);
}
.bento-item::before{
  content:""; position:absolute; inset:-1px; border-radius:22px; padding:1px;
  background:linear-gradient(135deg, rgba(28,78,127,.5), rgba(59,180,173,.4), transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0; transition: opacity .4s var(--ease-out-quint);
  pointer-events:none;
}
.bento-item:hover{ transform:translateY(-4px); box-shadow:0 24px 60px -20px rgba(20,32,46,0.18); }
.bento-item:hover::before{ opacity:1; }
.bento-span-3{ grid-column:span 3; }
.bento-span-2{ grid-column:span 2; }
.bento-span-4{ grid-column:span 4; }
.bento-span-6{ grid-column:span 6; }
.bento-row-2{ grid-row:span 2; }
@media (max-width: 900px){
  .bento-span-3, .bento-span-2, .bento-span-4, .bento-span-6{ grid-column:span 2; }
  .bento-row-2{ grid-row:auto; }
}
.bento-dark{
  background:linear-gradient(160deg, #14202E 0%, #1C4E7F 100%);
  color:#fff; border-color:rgba(255,255,255,0.08);
}
.bento-dark h3, .bento-dark .bento-head{ color:#fff; }
.bento-dark p{ color:#C4D3EB; }

/* Bento visual helpers */
.bento-glow{
  position:absolute; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(59,180,173,.35), transparent 70%);
  filter:blur(20px); pointer-events:none;
}

/* ---------- Card hover lift (legacy) ---------- */
.lift{ transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.lift:hover{ transform: translateY(-4px); box-shadow:0 18px 40px rgba(20,32,46,0.12); border-color:#1C4E7F; }

/* ---------- Buttons ---------- */
.btn-primary{
  position:relative; overflow:hidden;
  background:#1C4E7F; color:#fff; padding:.9rem 1.7rem; border-radius:999px;
  font-weight:700; letter-spacing:.01em;
  transition:background .25s var(--ease-out-quint), transform .25s var(--ease-out-quint), box-shadow .25s var(--ease-out-quint);
  display:inline-flex; align-items:center; gap:.55rem;
  box-shadow:0 10px 30px -10px rgba(28,78,127,0.55);
}
.btn-primary::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .9s var(--ease-out-quint);
}
.btn-primary:hover{ background:#14202E; transform:translateY(-2px); box-shadow:0 16px 36px -8px rgba(28,78,127,0.55); }
.btn-primary:hover::after{ transform:translateX(120%); }

.btn-secondary{
  background:transparent; color:#fff; padding:.9rem 1.7rem; border-radius:999px;
  font-weight:700; border:1.5px solid rgba(255,255,255,0.7);
  transition:all .25s var(--ease-out-quint);
  display:inline-flex; align-items:center; gap:.55rem;
}
.btn-secondary:hover{ background:#fff; color:#14202E; border-color:#fff; transform:translateY(-2px); }

.btn-ghost{
  background:#fff; color:#14202E; padding:.9rem 1.7rem; border-radius:999px;
  font-weight:700; border:1.5px solid #E1E8F0;
  transition:all .25s var(--ease-out-quint);
  display:inline-flex; align-items:center; gap:.55rem;
}
.btn-ghost:hover{ border-color:#1C4E7F; color:#1C4E7F; transform:translateY(-2px); }

/* ---------- Eyebrow ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  flex-wrap:wrap; max-width:100%;
  text-transform:uppercase; letter-spacing:.14em;
  font-size:.7rem; font-weight:600; color:#6D7A8A;
}
.eyebrow::before{
  content:""; width:22px; height:1.5px; background:currentColor; opacity:.5;
}
.eyebrow-light{ color:#C4D3EB; }

/* ---------- Tags and chips ---------- */
.tag{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.34rem .8rem; border-radius:999px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18);
  color:#fff; font-size:.78rem; font-weight:500; backdrop-filter:blur(6px);
}
.chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.28rem .7rem; border-radius:999px;
  background:#E1E8F0; color:#1C4E7F; font-weight:700; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.1em;
}
.chip-live{
  background:rgba(59,180,173,.14); color:#1C4E7F;
}
.chip-live::before{
  content:""; width:6px; height:6px; border-radius:50%; background:#3BB4AD;
  box-shadow:0 0 0 3px rgba(59,180,173,.18);
  animation: dot-pulse 2.2s ease-in-out infinite;
}

/* ---------- Typography ---------- */
h1,h2,h3,h4{ letter-spacing:-0.018em; overflow-wrap:break-word; }
.display{
  font-size: clamp(2.25rem, 4.5vw + 1rem, 6.8rem);
  line-height:1.02; letter-spacing:-.03em; font-weight:700;
  overflow-wrap:break-word; hyphens:none;
  word-break:normal;
}

/* ---------- Feature icon ---------- */
.feature-icon{
  width:52px; height:52px; border-radius:14px;
  background:linear-gradient(160deg,#E1E8F0 0%, #C4D3EB 100%);
  color:#1C4E7F;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.15rem;
  box-shadow: inset 0 0 0 1px rgba(28,78,127,0.08);
}
.feature-icon svg{ width:26px; height:26px; }
.feature-icon-dark{
  background:linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  color:#fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}

/* ---------- Details expander ---------- */
details[open] summary .chev{ transform:rotate(180deg); }
summary .chev{ transition:transform .3s var(--ease-out-quint); }
details summary{ list-style:none; }
details summary::-webkit-details-marker{ display:none; }
details{ transition: border-color .25s ease; }

/* ---------- Nav links ---------- */
.nav-link{ color:#C4D3EB; font-weight:500; font-size:.9rem; transition:color .15s ease; }
.nav-link:hover{ color:#fff; }
.nav-link-dark{ color:#6D7A8A; font-weight:500; font-size:.9rem; transition:color .15s ease; }
.nav-link-dark:hover{ color:#14202E; }

/* ---------- Marquee ---------- */
.marquee{
  overflow:hidden;
  overflow-x:clip; /* no scroll container on x-axis */
  position:relative;
  contain: layout paint; /* isolates layout + clips paint to border-box */
  /* clip-path is the most reliable Safari clip — takes precedence over overflow */
  clip-path: inset(0 0 0 0);
  transform: translateZ(0); /* GPU compositing layer prevents Safari page-width expansion */
  max-width:100%;
}
.marquee::before, .marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none;
}
.marquee::before{ left:0; background:linear-gradient(90deg, #fff, transparent); }
.marquee::after{ right:0; background:linear-gradient(-90deg, #fff, transparent); }
.marquee-dark::before{ background:linear-gradient(90deg, #14202E, transparent); }
.marquee-dark::after{ background:linear-gradient(-90deg, #14202E, transparent); }
.marquee-track{
  display:flex; gap:48px; align-items:center;
  animation: marquee 38s linear infinite;
  width:max-content;
}
@keyframes marquee{ to{ transform:translateX(-50%); } }
.marquee-item{
  display:inline-flex; align-items:center; gap:12px;
  font-weight:600; color:#6D7A8A; font-size:.95rem;
  white-space:nowrap;
}
.marquee-dark .marquee-item{ color:#C4D3EB; }

/* ---------- Stats ---------- */
.stat-num{
  font-variant-numeric: tabular-nums;
  font-weight:700;
  font-size: clamp(1.4rem, 2.4vw, 2.4rem);
  line-height:1;
  letter-spacing:-.02em;
  display:inline-flex; align-items:baseline; gap:.1rem;
  white-space:nowrap;
}
.stat-row{
  display:flex; flex-wrap:wrap; align-items:stretch;
  gap:1rem 1.25rem;
  max-width: 560px;
}
.stat-cell{ flex:1 1 0; min-width:100px; }
.stat-cell + .stat-cell{
  border-left:1px solid rgba(255,255,255,0.14);
  padding-left:1.25rem;
}
@media (min-width: 720px){
  .stat-row{ gap:1.5rem 2rem; }
  .stat-cell + .stat-cell{ padding-left:2rem; }
  .stat-num{ font-size: clamp(1.8rem, 2.4vw, 2.4rem); }
}

/* ---------- Live demo phone mock ---------- */
.phone-frame{
  position:relative;
  width:320px; max-width:100%;
  aspect-ratio: 320/640;
  border-radius: 44px;
  background:linear-gradient(160deg,#0B1320,#1E2E3D);
  padding:14px;
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.08) inset;
}
.phone-screen{
  width:100%; height:100%;
  border-radius:32px;
  background:linear-gradient(180deg,#0E1828 0%, #14202E 100%);
  position:relative; overflow:hidden;
  padding:20px 16px 16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.phone-notch{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:110px; height:24px; background:#0B1320; border-radius:999px; z-index:2;
}
.phone-time{
  color:#C4D3EB; font-size:.72rem; font-weight:600; letter-spacing:.02em;
  display:flex; justify-content:space-between; padding:0 6px 12px;
}
.phone-alert{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(10px);
  border-radius:16px; padding:12px 14px; color:#fff;
  margin-top:10px;
  animation: slide-in .8s var(--ease-out-quint) both;
}
.phone-alert.a1{ animation-delay: .6s }
.phone-alert.a2{ animation-delay: 1.1s }
.phone-alert.a3{ animation-delay: 1.6s }
@keyframes slide-in{
  0%{ transform:translateY(14px); opacity:0; }
  100%{ transform:translateY(0); opacity:1; }
}

/* ---------- Section fade borders ---------- */
.section-divider{
  height:1px; background:linear-gradient(90deg, transparent, var(--clg-grey10), transparent);
}

/* ---------- Scroll progress bar ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0;
  background:linear-gradient(90deg, #1C4E7F, #3BB4AD); z-index:60;
  transition: width .12s linear;
}

/* ---------- Timeline enhancements ---------- */
.tl-dot{
  position:absolute; left:-17px; width:34px; height:34px; border-radius:50%;
  background:linear-gradient(160deg, #1C4E7F, #14202E); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:700;
  ring:4px solid #fff;
  box-shadow: 0 0 0 4px #fff, 0 10px 24px -8px rgba(28,78,127,.4);
}
.tl-dot.live{
  background:linear-gradient(160deg,#3BB4AD,#1C4E7F);
  box-shadow: 0 0 0 4px #fff, 0 0 0 8px rgba(59,180,173,.25);
}

/* ---------- Utility ---------- */
.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ scrollbar-width:none; }

/* ---------- Mobile overrides ---------- */
@media (max-width: 900px){
  .hero{ min-height:auto; }
  .hero-compact{ min-height:auto; }
  .lifebuoy-hero{ display:none; }
  .blob-a, .blob-b{ display:none; }
  .display{ font-size: clamp(2rem, 8vw, 3rem); }
  .bento-item{ padding:22px; border-radius:18px; }
  .phone-frame{ width:280px; }
  .nav-root nav{ padding-top:.9rem; padding-bottom:.9rem; }
}
@media (max-width: 640px){
  .display{ font-size: clamp(1.9rem, 8.5vw, 2.6rem); hyphens:none; word-break:normal; }
  .bento-item{ padding:20px; }
  .btn-primary, .btn-secondary, .btn-ghost{ padding:.8rem 1.3rem; font-size:.92rem; }
  .stat-row{ gap:.8rem 1rem; }
  .stat-cell{ min-width:90px; }
  .stat-cell + .stat-cell{ padding-left:1rem; }
}