:root {
  --bg: #f7f9ff;
  --bg2: #ffffff;
  --panel: rgba(255, 255, 255, .82);
  --panelBorder: rgba(20, 29, 55, .10);
  --text: #111827;
  --muted: #5f6b85;
  --green: #167a42;
  --greenSoft: #16883f;
  --blue: #2563eb;
  --cyan: #0891b2;
  --purple: #7c3aed;
  --glow: 0 26px 80px rgba(37, 99, 235, .18);
  --glowGreen: 0 26px 80px rgba(22, 122, 66, .14);
  color-scheme: light;
}

html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 0%, rgba(66, 133, 244, .22), transparent 28%),
    radial-gradient(circle at 88% 6%, rgba(255, 113, 91, .18), transparent 26%),
    radial-gradient(circle at 80% 62%, rgba(251, 188, 5, .18), transparent 24%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 44%, #f3f7ff 100%) !important;
  overscroll-behavior-x: none;
}

body::before {
  opacity: .65;
  background-image:
    radial-gradient(circle at 12% 24%, rgba(52, 168, 83, .12), transparent 16%),
    radial-gradient(circle at 88% 34%, rgba(66, 133, 244, .14), transparent 18%),
    linear-gradient(rgba(17, 24, 39, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 24, 39, .035) 1px, transparent 1px);
  background-size: auto, auto, 56px 56px, 56px 56px;
}

img,
svg {
  max-width: 100%;
}

header {
  background: rgba(255, 255, 255, .78) !important;
  border-bottom: 1px solid rgba(17, 24, 39, .08) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
}

header.is-scrolled {
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 18px 52px rgba(37, 99, 235, .12);
}

.navbar {
  padding: 15px 0 !important;
}

.logo {
  color: #111827;
  letter-spacing: .04em !important;
}

.logo span {
  background: linear-gradient(90deg, #2563eb, #16a34a, #f59e0b) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
}

nav a {
  color: #53617d !important;
  border-radius: 999px;
  padding: 9px 12px;
  transition-property: color, background, border-color, box-shadow, transform;
}

nav a:hover,
nav a.is-active {
  color: #111827 !important;
  background: rgba(37, 99, 235, .08);
}

.hero {
  padding: 118px 0 82px !important;
}

.hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(360px, .86fr) !important;
  gap: 56px !important;
}

.badge {
  color: #184f2d !important;
  background: rgba(52, 168, 83, .12) !important;
  border-color: rgba(52, 168, 83, .22) !important;
  box-shadow: 0 12px 36px rgba(52, 168, 83, .10);
}

h1 {
  max-width: 12ch !important;
  color: #111827;
  letter-spacing: -.075em !important;
}

.gradient {
  background: linear-gradient(90deg, #2563eb 0%, #16a34a 45%, #f59e0b 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
}

.hero p,
.section-head p,
.feature p,
.trust-card p,
.download-box p,
.footer-box {
  color: #5f6b85 !important;
}

.trust-link,
.btn-secondary {
  color: #1f3a6d !important;
  background: rgba(255, 255, 255, .72) !important;
  border: 1px solid rgba(37, 99, 235, .14) !important;
  box-shadow: 0 12px 32px rgba(37, 99, 235, .08);
}

.trust-link:hover,
.btn-secondary:hover {
  transform: translateY(-2px);
  color: #0f172a !important;
  border-color: rgba(37, 99, 235, .34) !important;
}

.btn,
.trust-link {
  transition-property: color, background, border-color, box-shadow, transform;
}

.btn-primary {
  color: #fff !important;
  background: linear-gradient(100deg, #2563eb 0%, #1d9bf0 34%, #16a34a 72%, #f59e0b 100%) !important;
  box-shadow: 0 14px 34px rgba(37, 99, 235, .22) !important;
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 18px 42px rgba(37, 99, 235, .28) !important;
}

.hero-stats,
.features,
.trust-grid {
  align-items: stretch;
}

.stat,
.feature,
.trust-card,
.preview-card,
.download-notice {
  background: rgba(255, 255, 255, .82) !important;
  border: 1px solid rgba(17, 24, 39, .10) !important;
  box-shadow: 0 10px 28px rgba(37, 99, 235, .07);
  color: #111827;
  content-visibility: auto;
  contain-intrinsic-size: 280px;
}

.feature,
.trust-card,
.stat,
.preview-card,
.download-notice {
  contain: layout paint style;
}

.stat h3,
.feature h3,
.trust-card h3,
.preview-card h4 {
  color: #0f7a3a !important;
}

.feature:hover,
.trust-card:hover,
.preview-card:hover {
  transform: translateY(-5px);
  border-color: rgba(37, 99, 235, .22) !important;
  box-shadow: 0 14px 36px rgba(37, 99, 235, .12);
}

.browser-preview {
  filter: none;
}

.glow {
  background:
    radial-gradient(circle at 34% 38%, rgba(66, 133, 244, .28), transparent 58%),
    radial-gradient(circle at 72% 62%, rgba(52, 168, 83, .18), transparent 62%) !important;
  opacity: .28;
}

.window {
  background: rgba(255, 255, 255, .86) !important;
  border: 1px solid rgba(17, 24, 39, .10) !important;
  box-shadow: 0 22px 54px rgba(37, 99, 235, .14) !important;
  content-visibility: auto;
  contain-intrinsic-size: 520px;
}

.window-top {
  background: rgba(248, 250, 252, .92) !important;
  border-bottom-color: rgba(17, 24, 39, .08) !important;
}

.dots div:nth-child(1) {
  background: #ea4335 !important;
}

.dots div:nth-child(2) {
  background: #fbbc05 !important;
}

.dots div:nth-child(3) {
  background: #34a853 !important;
}

.urlbar {
  color: #5f6b85 !important;
  background: #eef3ff !important;
  border: 1px solid rgba(37, 99, 235, .10);
}

.section {
  content-visibility: auto;
  contain-intrinsic-size: 720px;
}

.section-head h2,
.download-box h2 {
  color: #111827 !important;
  text-shadow: none !important;
}

.download-box {
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, .18), transparent 24%),
    radial-gradient(circle at bottom right, rgba(52, 168, 83, .14), transparent 28%),
    rgba(255, 255, 255, .90) !important;
  border: 1px solid rgba(17, 24, 39, .10) !important;
  box-shadow: 0 18px 48px rgba(37, 99, 235, .12);
  content-visibility: auto;
  contain-intrinsic-size: 600px;
}

.download-meta strong {
  color: #d97706 !important;
}

.download-notice,
.download-notice h3,
.download-notice p,
.download-notice li {
  color: #14532d !important;
}

footer {
  background: linear-gradient(180deg, transparent, rgba(37, 99, 235, .06));
}

.footer-box strong,
.footer-box p {
  color: #14532d !important;
}

.footer-links a,
.footer-links a:visited {
  color: #2563eb !important;
}

.hero {
  position: relative;
  overflow: hidden;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  z-index: -1;
}

.hero::before {
  width: 460px;
  height: 460px;
  left: -170px;
  top: 80px;
  background:
    radial-gradient(circle at 35% 35%, rgba(66, 133, 244, .36), transparent 42%),
    radial-gradient(circle at 68% 64%, rgba(52, 168, 83, .24), transparent 44%);
  opacity: .45;
}

.hero::after {
  width: 360px;
  height: 360px;
  right: -110px;
  top: 120px;
  background:
    radial-gradient(circle at 42% 35%, rgba(251, 188, 5, .30), transparent 44%),
    radial-gradient(circle at 62% 64%, rgba(234, 67, 53, .20), transparent 48%);
  opacity: .42;
}

h1 {
  font-size: clamp(4rem, 8.8vw, 7.4rem) !important;
  line-height: .88 !important;
}

.hero p {
  font-size: clamp(1.05rem, 1.45vw, 1.22rem) !important;
}

.btn-primary,
.btn-secondary {
  border-radius: 999px !important;
}

.btn-primary {
  padding-inline: 30px !important;
}

.btn-secondary {
  padding-inline: 26px !important;
}

.stat {
  border-radius: 30px !important;
  transform: translateZ(0);
}

.stat h3 {
  font-size: clamp(1.45rem, 2vw, 2rem) !important;
}

.feature:nth-child(4n + 1),
.trust-card:nth-child(4n + 1) {
  background: linear-gradient(180deg, rgba(232, 240, 254, .92), rgba(255, 255, 255, .86)) !important;
}

.feature:nth-child(4n + 2),
.trust-card:nth-child(4n + 2) {
  background: linear-gradient(180deg, rgba(232, 245, 233, .92), rgba(255, 255, 255, .86)) !important;
}

.feature:nth-child(4n + 3),
.trust-card:nth-child(4n + 3) {
  background: linear-gradient(180deg, rgba(254, 247, 224, .94), rgba(255, 255, 255, .86)) !important;
}

.feature:nth-child(4n),
.trust-card:nth-child(4n) {
  background: linear-gradient(180deg, rgba(253, 237, 235, .92), rgba(255, 255, 255, .86)) !important;
}

.browser-preview {
  perspective: 1100px;
}

.browser-preview::before,
.browser-preview::after {
  position: absolute;
  z-index: 3;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .90);
  border: 1px solid rgba(17, 24, 39, .10);
  box-shadow: 0 12px 28px rgba(37, 99, 235, .12);
  color: #111827;
  font-weight: 800;
  letter-spacing: -.02em;
}

.browser-preview::before {
  content: "Fast tabs";
  top: 34px;
  left: -22px;
  transform: rotate(-7deg);
}

.browser-preview::after {
  content: "Private by default";
  right: -28px;
  bottom: -24px;
  transform: rotate(4deg);
}

.window {
  transform: none;
}

.preview-card {
  position: relative;
  overflow: hidden;
}

.preview-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #2563eb, #16a34a, #f59e0b);
  opacity: .82;
}

.preview-card:nth-child(2) {
  transform: translateX(22px);
}

.preview-card:nth-child(3) {
  transform: translateX(-8px);
}

.preview-card:nth-child(4) {
  transform: translateX(14px);
}

.section-head {
  text-align: center;
}

.section-head p {
  margin-left: auto !important;
  margin-right: auto !important;
}

.section-head h2,
.download-box h2 {
  font-size: clamp(2.6rem, 5vw, 4.8rem) !important;
  letter-spacing: -.075em !important;
  line-height: .94 !important;
}

.features,
.trust-grid {
  gap: 24px !important;
}

.feature,
.trust-card {
  min-height: 230px;
}

.feature h3,
.trust-card h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.55rem) !important;
  letter-spacing: -.035em;
}

.download-box {
  position: relative;
  overflow: hidden;
}

.download-box::before {
  content: "";
  position: absolute;
  inset: -90px -80px auto auto;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 40%, rgba(66, 133, 244, .22), transparent 54%),
    radial-gradient(circle at 70% 70%, rgba(52, 168, 83, .18), transparent 58%);
  pointer-events: none;
}

.download-actions,
.download-meta,
.download-notice {
  position: relative;
  z-index: 1;
}

@media (max-width: 1000px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
  }

  .window {
    transform: none;
  }

  .browser-preview::before,
  .browser-preview::after {
    display: none;
  }
}

@media (max-width: 1180px) {
  .browser-preview::after {
    right: 14px;
    bottom: -30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

}