:root {
  --ink: #05060a;
  --body: #343844;
  --blue: #155eef;
  --blue-dark: #2733c7;
  --edge: clamp(24px, 4.25vw, 66px);
  --header-height: clamp(88px, 11.8vh, 122px);
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #fff;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  font-family: "Avenir Next", "Trebuchet MS", "Segoe UI", sans-serif;
}

a { color: inherit; text-decoration: none; }
img,
svg { display: block; }

.page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: radial-gradient(circle at 78% 48%, rgba(20, 88, 245, .13), transparent 30%), #fff;
}

.header {
  position: absolute;
  inset: 0 var(--edge) auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: clamp(30px, 3.1vw, 48px);
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.brand img {
  width: clamp(52px, 5.1vw, 80px);
  height: clamp(52px, 5.1vw, 80px);
  border-radius: clamp(12px, 1.2vw, 18px);
}

.brand > span { color: var(--blue); }

.main-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(180deg, #347cff 0%, var(--blue-dark) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 22px 48px rgba(6,68,220,.24);
  font-weight: 900;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.main-button:hover { transform: translateY(-2px); filter: saturate(1.08); }
.main-button:focus-visible { outline: 4px solid rgba(20,88,245,.3); outline-offset: 4px; }

.chrome { width: clamp(30px, 3vw, 46px); height: clamp(30px, 3vw, 46px); flex: 0 0 auto; }
.chrome img { width: 100%; height: 100%; }
.chrome-large { width: clamp(36px, 3.6vw, 55px); height: clamp(36px, 3.6vw, 55px); }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(500px, 42vw) 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

.copy {
  position: relative;
  z-index: 4;
  align-self: center;
  width: min(100%, 600px);
  margin-top: clamp(30px, 4vh, 54px);
  margin-left: var(--edge);
}

h1,
p { margin: 0; }

h1 {
  width: 620px;
  font-size: clamp(58px, 5vw, 77px);
  line-height: 1.07;
  font-weight: 950;
  letter-spacing: -.02em;
}

h1 span {
  position: relative;
  display: block;
  margin-top: 1.35vh;
  color: var(--blue);
}

h1 span::after {
  content: "";
  position: absolute;
  left: .25vw;
  right: -1.5vw;
  bottom: -1vh;
  height: clamp(5px, .55vw, 8px);
  border-radius: 999px;
  background: var(--blue);
  transform: rotate(-1.8deg);
}

.lede {
  width: min(100%, 540px);
  margin-top: 5.2vh;
  color: var(--body);
  font-size: clamp(20px, 1.65vw, 25px);
  line-height: 1.43;
  font-weight: 650;
}

.main-button {
  gap: clamp(11px, 1.2vw, 18px);
  min-height: clamp(72px, 5.1vw, 82px);
  margin-top: 4.5vh;
  padding: 14px clamp(18px, 1.8vw, 28px);
  border: 2px solid rgba(255,255,255,.78);
  border-radius: clamp(14px, 1.1vw, 17px);
  font-size: clamp(21px, 1.75vw, 27px);
  white-space: nowrap;
  width: min(500px, 100%);
  justify-content: flex-start;
}

.button-copy {
  display: grid;
  gap: 2px;
  text-align: left;
}

.button-copy strong { font-size: 1em; line-height: 1.05; }
.button-copy small { color: rgba(255,255,255,.78); font-size: .48em; font-weight: 650; line-height: 1.15; }

.arrow {
  width: clamp(13px, 1.1vw, 17px);
  height: clamp(13px, 1.1vw, 17px);
  margin-left: auto;
  border-top: clamp(3px, .24vw, 4px) solid currentColor;
  border-right: clamp(3px, .24vw, 4px) solid currentColor;
  transform: rotate(45deg);
}

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 34px;
  margin: 4.2vh 0 0;
  padding: 0;
  color: #252b39;
  list-style: none;
}

.trust li {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding-left: 44px;
  font-size: clamp(14px, 1.08vw, 17px);
  font-weight: 760;
  white-space: nowrap;
}

.trust li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  background: var(--blue);
}

.trust .shield::before { clip-path: polygon(50% 0,91% 17%,91% 55%,50% 100%,9% 55%,9% 17%); }
.trust .bolt::before { clip-path: polygon(56% 0,12% 56%,43% 56%,28% 100%,88% 39%,57% 39%); }
.trust .lock::before { height: 26px; border-radius: 4px; }
.trust .lock::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 14px;
  height: 15px;
  border: 3px solid var(--blue);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
}

.visual {
  position: absolute;
  z-index: 1;
  inset: 0 0 0 42vw;
  overflow: hidden;
}

.visual::before {
  content: "";
  position: absolute;
  width: min(55vw, 820px);
  height: min(55vw, 820px);
  right: -9vw;
  top: 50%;
  border-radius: 50%;
  background: linear-gradient(145deg, #eef4ff, #dce9ff);
  transform: translateY(-50%);
}

.browser-demo {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: clamp(28px, 5vw, 86px);
  width: min(47vw, 720px);
  overflow: hidden;
  border: 1px solid #d8e0ed;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 42px 90px rgba(22, 58, 124, .22);
  transform: translateY(-47%) rotate(-1.5deg);
}
.browser-bar { display: flex; align-items: center; gap: 20px; height: 58px; padding: 0 20px; border-bottom: 1px solid #e7eaf0; background: #f8f9fc; }
.demo-dots { display: flex; gap: 7px; }
.demo-dots i { width: 10px; height: 10px; border-radius: 50%; background: #cdd4df; }
.demo-dots i:first-child { background: #ff746e; }.demo-dots i:nth-child(2) { background: #ffc66c; }.demo-dots i:last-child { background: #4fd38b; }
.demo-url { display: flex; align-items: center; gap: 8px; width: 62%; padding: 8px 13px; border: 1px solid #e0e5ed; border-radius: 9px; color: #7b8493; background: #fff; font-size: 12px; }
.demo-url i { width: 7px; height: 7px; border-radius: 50%; background: #16ad70; }
.demo-page { min-height: 430px; padding: 54px 56px; background: linear-gradient(180deg, #fff, #fafbfe); }
.demo-kicker, .demo-title, .demo-columns span { display: block; border-radius: 99px; background: #dfe4ec; }
.demo-kicker { width: 74px; height: 8px; background: #2874ed; }
.demo-title { width: 78%; height: 22px; margin-top: 22px; background: #263349; }
.demo-title.short { width: 51%; margin-top: 11px; }
.demo-columns { display: grid; grid-template-columns: 1.5fr 1fr; gap: 34px; margin-top: 44px; }
.demo-columns > div:first-child { display: grid; gap: 14px; align-content: start; }
.demo-columns span { width: 100%; height: 9px; }.demo-columns span:nth-child(2) { width: 92%; }.demo-columns span:nth-child(3) { width: 96%; }.demo-columns span:nth-child(4) { width: 76%; }
.blocked-ad { position: relative; display: grid; min-height: 150px; place-items: center; border: 2px dashed #d7dce5; border-radius: 15px; color: #adb5c1; background: #f5f7fa; }
.blocked-ad b { font-size: 22px; letter-spacing: .14em; }
.blocked-ad i { position: absolute; width: 70px; height: 3px; background: #eb5260; transform: rotate(-38deg); }
.blocked-ad small { position: absolute; bottom: 19px; color: #16a76c; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.safe-panel { position: absolute; right: 22px; bottom: 22px; left: 22px; display: flex; align-items: center; gap: 13px; padding: 16px; border: 1px solid #cfe2ff; border-radius: 16px; background: rgba(255,255,255,.96); box-shadow: 0 16px 40px rgba(25, 65, 119, .13); }
.safe-mark { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border-radius: 14px; box-shadow:0 8px 18px rgba(33,72,199,.24); }
.safe-mark img { width: 46px; height: 46px; border-radius: 14px; }
.safe-panel > span:nth-child(2) { display: grid; gap: 2px; }.safe-panel small { color: #155eef; font-size: 9px; font-weight: 900; letter-spacing: .1em; }.safe-panel strong { font-size: 15px; }.safe-panel b { color: #748094; font-size: 10px; font-weight: 650; }
.demo-switch { position: relative; width: 40px; height: 23px; margin-left: auto; border-radius: 99px; background: #155eef; }.demo-switch::after { content: ""; position: absolute; top: 3px; right: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; }
.floating-alert { position: absolute; z-index: 4; display: flex; align-items: center; gap: 11px; padding: 13px 16px; border: 1px solid #dfe5ef; border-radius: 15px; background: #fff; box-shadow: 0 18px 46px rgba(21, 54, 112, .16); }
.floating-alert > span { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 10px; font-size: 18px; font-weight: 900; }.floating-alert small, .floating-alert strong { display: block; }.floating-alert small { font-size: 8px; font-weight: 900; letter-spacing: .1em; }.floating-alert strong { margin-top: 2px; font-size: 11px; }
.popup-alert { top: 18%; right: 3.5%; }.popup-alert > span { color: #d94250; background: #fff0f1; }.popup-alert small { color: #d94250; }
.privacy-alert { right: 36%; bottom: 13%; }.privacy-alert > span { color: #08794c; background: #e7f8f0; }.privacy-alert small { color: #08794c; }
}

.install {
  position: relative;
  z-index: 5;
  display: grid;
  min-height: 78vh;
  padding: 100px var(--edge);
  place-items: center;
  background: #f5f8ff;
}

.install-card {
  width: min(760px, 100%);
  padding: clamp(34px, 5vw, 64px);
  border: 1px solid #dfe6f3;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(17, 54, 120, .1);
  text-align: center;
}

.eyebrow { color: var(--blue); font-size: 12px; font-weight: 900; letter-spacing: .14em; }
.install-card h2 { margin: 12px 0 0; font-size: clamp(36px, 4vw, 56px); line-height: 1.05; letter-spacing: -.035em; }
.install-card > p { width: min(560px, 100%); margin: 18px auto 0; color: var(--body); font-size: 18px; line-height: 1.5; }
.install-card ol { display: grid; gap: 10px; margin: 30px 0 0; padding: 0; list-style: none; text-align: left; }
.install-card li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid #e6eaf2; border-radius: 14px; background: #fbfcff; }
.install-card li > span { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border-radius: 10px; color: #fff; background: var(--blue); font-weight: 900; }
.install-card li strong, .install-card li small { display: block; }
.install-card li small { margin-top: 2px; color: #697286; font-size: 12px; }
.copy-button { width: 100%; margin-top: 18px; padding: 16px 20px; border: 0; border-radius: 14px; color: #fff; background: var(--blue); font-size: 16px; font-weight: 850; cursor: pointer; }
.copy-button:hover { background: var(--blue-dark); }
.copy-button:focus-visible { outline: 4px solid rgba(20,88,245,.25); outline-offset: 3px; }
.store-note { display: block; margin-top: 12px; color: #7c8493; font-size: 11px; }
.site-footer { display: flex; padding: 24px; justify-content: center; gap: 24px; background: #f5f8ff; }
.site-footer a { color: #657187; font-size: 13px; font-weight: 700; text-decoration: none; }
.site-footer a:hover { color: var(--blue); text-decoration: underline; }

@media (max-width: 1180px) {
  :root { --edge: 3.6vw; --header-height: 86px; }

  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 62%) minmax(0, 38%);
  }

  .copy {
    align-self: end;
    width: auto;
    margin: 0;
    padding: 0 var(--edge) 2vh;
  }

  h1 { width: min(88vw, 760px); font-size: clamp(48px, 5.7vw, 68px); }
  h1 span { display: inline-block; margin-top: 0; }
  h1 span::after { bottom: -8px; height: 6px; }
  .lede { width: min(76vw, 700px); margin-top: 30px; font-size: 20px; }
  .main-button { min-height: 66px; margin-top: 24px; padding: 12px 20px; font-size: 21px; }
  .chrome-large { width: 38px; height: 38px; }
  .arrow { width: 13px; height: 13px; border-width: 3px; }
  .trust { gap: 12px 22px; margin-top: 20px; }
  .trust li { min-height: 26px; padding-left: 34px; font-size: 14px; }
  .trust li::before { width: 24px; height: 24px; }
  .trust .lock::before { height: 21px; border-radius: 4px; }
  .trust .lock::after { left: 6px; top: 3px; width: 11px; height: 12px; border-width: 3px; }
  .visual { inset: auto 0 0; height: 38%; }
  .visual::before { right: -10vw; width: 75vw; height: 75vw; }
  .browser-demo { right: 5vw; width: 62vw; transform: translateY(-47%) rotate(-1deg); }
  .browser-bar { height: 40px; padding: 0 14px; }.demo-dots i { width: 7px; height: 7px; }.demo-url { padding: 5px 9px; font-size: 8px; }
  .demo-page { min-height: 260px; padding: 30px 34px; }.demo-title { height: 14px; margin-top: 14px; }.demo-title.short { margin-top: 7px; }.demo-columns { margin-top: 26px; }.blocked-ad { min-height: 90px; }
  .safe-panel { right: 14px; bottom: 14px; left: 14px; padding: 10px; }.safe-mark,.safe-mark img { width: 34px; height: 34px; }.safe-panel b { display: none; }
  .floating-alert { padding: 9px 11px; }.privacy-alert { right: 46%; bottom: 9%; }.popup-alert { top: 8%; }
}

@media (max-width: 720px) {
  :root { --edge: max(16px, 4vw); --header-height: 74px; }
  .header { align-items: center; }
  .brand { gap: 8px; font-size: 29px; }
  .brand img { width: 48px; height: 48px; border-radius: 12px; }
  .hero { grid-template-rows: minmax(0, 64%) minmax(0, 36%); }
  .copy { padding-bottom: 1.5vh; }
  h1 { width: 92vw; font-size: clamp(39px, 10.8vw, 46px); line-height: 1.03; letter-spacing: -.015em; }
  h1 span::after { right: 8px; bottom: -6px; height: 5px; }
  .lede { width: 90vw; margin-top: 24px; font-size: 16px; line-height: 1.36; }
  .main-button { width: 100%; min-height: 58px; gap: 11px; margin-top: 18px; padding: 12px 16px; font-size: 18px; }
  .chrome-large { width: 37px; height: 37px; }
  .trust { gap: 10px 14px; margin-top: 16px; }
  .trust li { min-height: 23px; padding-left: 29px; font-size: 12px; }
  .trust li::before { width: 21px; height: 21px; }
  .trust .lock::before { height: 19px; }
  .trust .lock::after { left: 5px; top: 3px; width: 10px; height: 10px; }
  .browser-demo { right: -4vw; width: 90vw; }
  .floating-alert { display: none; }
  .install { min-height: auto; padding: 64px var(--edge); }
  .install-card { padding: 30px 20px; border-radius: 22px; }
  .install-card > p { font-size: 16px; }
}

@media (max-width: 420px) {
  .brand { font-size: 27px; }
  .main-button { font-size: 17px; }
}