/*!*****************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/css/animate.css ***!
  \*****************************************************************************************************************/
@charset "UTF-8";

/*!
 * animate.css -https://daneden.github.io/animate.css/
 * Version - 3.7.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2019 Daniel Eden
 */

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

@media (print), (prefers-reduced-motion: reduce) {
  .animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
}

/*!***************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/css/style.css ***!
  \***************************************************************************************************************/
@font-face {
  font-family: "Exo 2";
  src: url(src/fonts/Exo2-Variable.ttf) format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #06080d;
  --bg-soft: #0b0f17;
  --panel: #101620;
  --panel-2: #131b27;
  --text: #f5f7fb;
  --muted: #929cac;
  --muted-bright: #b8c1cf;
  --line: rgba(255, 255, 255, 0.09);
  --blue: #356cff;
  --blue-light: #6e8cff;
  --cyan: #55d9ff;
  --radius: 1.5rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: "Exo 2", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
.container { width: min(1200px, calc(100% - 2.5rem)); margin-inline: auto; }

.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; background: rgba(6, 8, 13, 0.78); backdrop-filter: blur(18px); }
.nav-shell { height: 5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: .75rem; font-size: .92rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.brand-mark { position: relative; width: 2.45rem; height: 2.45rem; display: block; flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: .82rem; background: #4a53db url(src/images/app/app-icon.png) center / cover no-repeat; box-shadow: 0 9px 26px rgba(68, 78, 224, .3); }
.brand-mark::before, .brand-mark::after, .brand-mark i { display: none; }
.main-nav { display: flex; align-items: center; gap: 2.2rem; }
.main-nav a { color: #aab3c1; font-size: .83rem; font-weight: 700; transition: color .2s ease; }
.main-nav a:hover { color: white; }
.menu-button { display: none; width: 2.75rem; height: 2.75rem; padding: .65rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--panel); }
.menu-button span { display: block; height: 2px; margin: 4px 0; border-radius: 10px; background: white; }

.button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.12); border-radius: .78rem; background: white; color: #080b11; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255,255,255,.12); }
.button-small { min-height: 2.65rem; padding: 0 1.1rem; font-size: .78rem; }

.hero-section { position: relative; min-height: 820px; display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 76% 46%, rgba(35,85,255,.16), transparent 26%), linear-gradient(180deg, #080b12 0%, #06080d 100%); }
.hero-section::before { content: ""; position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, black, transparent 85%); }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(1px); pointer-events: none; }
.glow-one { width: 420px; height: 420px; top: 15%; right: -220px; background: rgba(66,77,255,.09); box-shadow: 0 0 180px rgba(53,108,255,.22); }
.glow-two { width: 300px; height: 300px; bottom: -160px; left: 20%; background: rgba(85,217,255,.06); box-shadow: 0 0 150px rgba(85,217,255,.12); }
.hero-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); padding: 6rem 0 5rem; }
.hero-copy h1 { max-width: 760px; margin: 1.4rem 0 0; font-size: clamp(3.4rem, 6.8vw, 6.7rem); line-height: .94; letter-spacing: -.072em; font-weight: 800; text-wrap: balance; }
.hero-copy h1::after { content: "."; color: var(--blue-light); }
.hero-lead { max-width: 620px; margin: 1.75rem 0 0; color: var(--muted-bright); font-size: clamp(1rem, 1.6vw, 1.18rem); line-height: 1.75; }
.store-actions { display: flex; flex-wrap: wrap; gap: .72rem; margin-top: 2rem; }
.store-badge-link { height: 3.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .68rem; transition: transform .2s ease, filter .2s ease; }
.store-badge-link:hover { transform: translateY(-3px); filter: brightness(1.08); }
.store-badge { display: block; width: auto; max-width: none; }
.store-badge-apple { width: 179px; }
.store-badge-google { width: 200px; margin-inline: -10px; }
.hero-proof { display: flex; flex-wrap: wrap; align-items: center; gap: .62rem; margin-top: 1.5rem; color: #7f8998; font-size: .68rem; }
.hero-proof strong { color: #bbc3ce; font-size: .7rem; }
.hero-proof i { width: 3px; height: 3px; border-radius: 50%; background: #4a5260; }

.hero-product { position: relative; min-height: 610px; display: grid; place-items: center; }
.hero-image-wrap { position: relative; z-index: 3; width: min(380px, 80vw); aspect-ratio: 9/16; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 2rem; background: #1935d6; box-shadow: 0 40px 100px rgba(0,0,0,.48), 0 0 80px rgba(45,88,255,.14); transform: rotate(4deg); }
.hero-image-wrap img { width: 100%; height: 100%; object-fit: cover; }
.signal-rings { position: absolute; inset: 0; display: grid; place-items: center; }
.signal-rings span { position: absolute; border: 1px solid rgba(78,112,255,.18); border-radius: 50%; }
.signal-rings span:nth-child(1) { width: 390px; height: 390px; }
.signal-rings span:nth-child(2) { width: 520px; height: 520px; }
.signal-rings span:nth-child(3) { width: 650px; height: 650px; opacity: .5; }
.status-pill { position: absolute; z-index: 5; display: flex; align-items: center; gap: .75rem; padding: .82rem .95rem; border: 1px solid rgba(255,255,255,.13); border-radius: 1rem; background: rgba(16,22,32,.88); box-shadow: 0 18px 45px rgba(0,0,0,.28); backdrop-filter: blur(16px); }
.status-pill small, .status-pill span { display: block; color: #7f8998; font-size: .61rem; }
.status-pill strong { display: block; margin-top: .1rem; font-size: .82rem; }
.status-dot { width: .68rem; height: .68rem; border-radius: 50%; background: #59e7a3; box-shadow: 0 0 0 5px rgba(89,231,163,.1), 0 0 18px rgba(89,231,163,.45); }
.status-top { top: 22%; left: -1rem; }
.status-bottom { right: -1.5rem; bottom: 20%; }
.status-bottom > strong { color: #86a3ff; font-size: 1.5rem; }

.platform-marquee { border-bottom: 1px solid var(--line); background: #080b11; }
.marquee-row { min-height: 7rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.marquee-label { color: #606a79; font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.platform-logos { display: flex; align-items: center; justify-content: flex-end; gap: clamp(1.6rem, 5vw, 4.5rem); color: #a8b0bc; }
.platform-logos > span { display: inline-flex; align-items: center; gap: .3rem; font-size: 1.28rem; font-weight: 800; white-space: nowrap; }
.platform-logos img { display: block; height: auto; }
.apple-word img { width: 4.1rem; }
.roku-word img { width: 4.8rem; }
.fire-word img { width: 5.5rem; }
.google-word img { width: 9.2rem; opacity: .95; }

.section-space { padding: 8rem 0; }
.section-heading { max-width: 760px; margin: 0 auto 4.5rem; text-align: center; }
.eyebrow { display: inline-flex; margin-bottom: 1rem; color: #7897ff; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.section-heading h2, .confidence-copy h2, .download-copy h2 { margin: 0; font-size: clamp(2.5rem, 5vw, 4.75rem); line-height: 1.02; letter-spacing: -.058em; font-weight: 800; text-wrap: balance; }
.section-heading > p { max-width: 620px; margin: 1.25rem auto 0; color: var(--muted); font-size: 1rem; line-height: 1.75; }
.heading-row { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 3rem; text-align: left; }
.heading-row > div { max-width: 680px; }
.heading-row > p { max-width: 430px; margin: 0 0 .35rem; }

.how-section { background: linear-gradient(180deg, #080b11, #090d14); }
.product-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 2.5rem); }
.product-step-offset { transform: translateY(3rem); }
.screenshot-frame { position: relative; max-width: 320px; margin: 0 auto; padding: .52rem; border: 1px solid rgba(255,255,255,.13); border-radius: 2.35rem; background: #151b26; box-shadow: 0 28px 60px rgba(0,0,0,.36); }
.screenshot-frame::before { content: ""; position: absolute; z-index: 2; top: .87rem; left: 50%; width: 5.8rem; height: 1.15rem; transform: translateX(-50%); border-radius: 999px; background: #03050a; }
.screenshot-frame img { width: 100%; border-radius: 1.95rem; }
.step-index { position: absolute; z-index: 3; top: 1.3rem; left: -1.15rem; width: 3.2rem; height: 3.2rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.17); border-radius: 1rem; background: #1a43df; color: white; font-size: .72rem; font-weight: 800; box-shadow: 0 12px 30px rgba(30,66,218,.4); }
.step-copy { max-width: 330px; margin: 1.8rem auto 0; }
.step-copy > span { color: #7795ff; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.step-copy h3 { margin: .5rem 0 0; font-size: 1.28rem; letter-spacing: -.025em; }
.step-copy p { margin: .75rem 0 0; color: var(--muted); font-size: .87rem; line-height: 1.7; }

.platforms-section { position: relative; overflow: hidden; background: #06080d; }
.platforms-section::before { content: ""; position: absolute; width: 480px; height: 480px; right: -260px; top: 10%; border-radius: 50%; background: rgba(55,93,255,.08); filter: blur(40px); }
.platform-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.platform-card { position: relative; min-height: 390px; display: flex; flex-direction: column; overflow: hidden; padding: 0 1.5rem 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.platform-card::after { content: ""; position: absolute; width: 210px; height: 210px; right: -100px; bottom: -120px; border-radius: 50%; background: var(--card-glow, rgba(65,104,255,.28)); filter: blur(8px); opacity: .4; transition: transform .3s ease, opacity .3s ease; }
.platform-card:hover { transform: translateY(-7px); border-color: rgba(255,255,255,.2); background: #151c27; }
.platform-card:hover::after { transform: scale(1.2); opacity: .7; }
.platform-product { height: 220px; display: block; overflow: hidden; margin: 0 -1.5rem 1.5rem; background: #f0f0f0; }
.platform-product img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.platform-card:hover .platform-product img { transform: scale(1.035); }
.apple-card .platform-product img { object-position: center 48%; }
.fire-card .platform-product img { object-position: center 60%; }
.google-card .platform-product img { object-position: center 68%; }
.platform-copy { margin-top: auto; }
.platform-card small { color: #798494; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.platform-card h3 { margin: .35rem 0 0; font-size: 1.4rem; line-height: 1.15; letter-spacing: -.035em; }
.platform-card p { margin: .55rem 0 0; color: #7f8997; font-size: .72rem; line-height: 1.4; }
.platform-arrow { position: absolute; z-index: 2; top: 1rem; right: 1rem; width: 2rem; height: 2rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(8,11,17,.76); color: white; font-size: .85rem; backdrop-filter: blur(8px); }
.roku-card { --card-glow: rgba(126,58,237,.45); }.fire-card { --card-glow: rgba(249,115,22,.38); }.google-card { --card-glow: rgba(66,133,244,.36); }
.compatibility-note { display: flex; align-items: center; justify-content: center; gap: .65rem; margin: 1.75rem 0 0; color: #737e8d; font-size: .72rem; }
.compatibility-note span { width: 1.25rem; height: 1.25rem; display: grid; place-items: center; border: 1px solid #3a4350; border-radius: 50%; font-size: .65rem; font-weight: 800; }

.confidence-section { border-block: 1px solid var(--line); background: linear-gradient(135deg, #0a0e15, #07090e); }
.confidence-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 7rem; }
.confidence-copy p { max-width: 510px; margin: 1.4rem 0 0; color: var(--muted); line-height: 1.8; }
.text-link { display: inline-flex; align-items: center; gap: .45rem; color: #91a9ff; font-size: .8rem; font-weight: 800; }
.text-link span { transition: transform .2s ease; }.text-link:hover span { transform: translateX(4px); }
.confidence-copy .text-link { margin-top: 1.7rem; }
.benefit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.benefit-grid article { min-height: 220px; padding: 1.55rem; border: 1px solid var(--line); border-radius: 1.25rem; background: rgba(255,255,255,.025); }
.benefit-icon { width: 6.5rem; height: 6.5rem; display: grid; place-items: center; margin-bottom: 1.8rem; border-radius: 1.65rem; background: #15234e; color: #88a3ff; font-size: 2.25rem; font-weight: 800; }
.radar-dot { width: 1rem; height: 1rem; border-radius: 50%; background: #6c8cff; box-shadow: 0 0 0 10px rgba(108,140,255,.12), 0 0 0 20px rgba(108,140,255,.06); }
.benefit-grid h3 { margin: 0; font-size: 1rem; }
.benefit-grid p { margin: .65rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.65; }

.guides-section { background: #090c12; }
.guides-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.guide-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #0e131c; transition: transform .25s ease, border-color .25s ease; }
.guide-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.18); }
.guide-art { position: relative; height: 230px; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line); background: linear-gradient(145deg, #1b2950, #0c111d); }
.guide-art::before, .guide-art::after { content: ""; position: absolute; border: 1px solid rgba(120,150,255,.16); border-radius: 50%; }
.guide-art::before { width: 160px; height: 160px; }.guide-art::after { width: 250px; height: 250px; }
.guide-remote { position: relative; z-index: 2; display: block; overflow: hidden; filter: drop-shadow(0 18px 18px rgba(18,25,40,.2)); }
.guide-remote img { position: absolute; display: block; max-width: none; }
.guide-remote-apple { width: 5.2rem; height: 12.4rem; }
.guide-remote-apple img { height: 100%; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.guide-remote-fire { width: 6rem; height: 12.6rem; }
.guide-remote-fire img { height: 100%; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.guide-remote-roku { width: 13.8rem; height: 11.2rem; }
.guide-remote-roku img { width: 100%; left: 0; top: 50%; transform: translateY(-50%); }
.guide-remote-google { width: 4.8rem; height: 12.6rem; }
.guide-remote-google img { height: 100%; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.guide-content { padding: 1.6rem; }
.guide-tag { color: #7896ff; font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.guide-card h3 { margin: .85rem 0 0; font-size: 1.16rem; line-height: 1.4; letter-spacing: -.025em; }
.guide-card p { min-height: 4.4em; margin: .7rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.65; }
.guide-card .text-link { margin-top: 1.1rem; }

.download-section { padding: 0 0 7rem; background: #090c12; }
.download-panel { position: relative; min-height: 380px; display: flex; align-items: center; justify-content: space-between; gap: 3rem; overflow: hidden; padding: clamp(2.2rem, 6vw, 5rem); border: 1px solid rgba(132,158,255,.24); border-radius: 2rem; background: radial-gradient(circle at 85% 40%, rgba(80,118,255,.28), transparent 32%), linear-gradient(135deg, #10265f, #081124 62%, #0a0d15); box-shadow: 0 32px 90px rgba(0,0,0,.3); }
.download-panel::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg,black,transparent); }
.download-copy, .download-panel .store-actions { position: relative; z-index: 2; }
.download-copy { max-width: 700px; }
.download-copy p { max-width: 570px; margin: 1.25rem 0 0; color: #aab7ce; line-height: 1.75; }
.download-panel .store-actions { min-width: 200px; flex-direction: column; margin: 0; }

.site-footer { padding: 4.5rem 0 1.5rem; border-top: 1px solid var(--line); background: #05070b; }
.footer-main { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; }
.brand-footer { color: white; }
.footer-main > div:first-child p { margin: 1rem 0 0; color: #737d8c; font-size: .8rem; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: .78rem; }
.footer-links strong { margin-bottom: .25rem; font-size: .75rem; }
.footer-links a { color: #7f8998; font-size: .76rem; transition: color .2s ease; }
.footer-links a:hover { color: white; }
.footer-bottom { display: flex; justify-content: space-between; gap: 2rem; margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: #56606f; font-size: .62rem; }
.back-to-top { position: fixed; z-index: 30; right: 1.2rem; bottom: 1.2rem; width: 2.8rem; height: 2.8rem; border: 1px solid rgba(255,255,255,.15); border-radius: .85rem; background: #1f4be1; color: white; opacity: 0; pointer-events: none; transform: translateY(10px); transition: .2s ease; }
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }

/* Guide pages retained from the original site */
.guide-page { background: #f7f8fb; color: #101521; }
.guide-page .site-header, .simple-header { border-bottom: 1px solid #e3e7ee; background: rgba(255,255,255,.9); }
.guide-page .brand { color: #101521; }.guide-page .brand-mark { color: white; }
.article-hero { padding: 6rem 0 4rem; text-align: center; background: linear-gradient(180deg,#eef2ff,#fff); }
.article-hero h1 { max-width: 900px; margin: 0 auto; font-size: clamp(2.7rem,6vw,5rem); line-height: 1.02; letter-spacing: -.06em; font-weight: 800; }
.article-hero p { max-width: 720px; margin: 1.25rem auto 0; color: #5e6877; font-size: 1.05rem; line-height: 1.75; }
.article-meta { display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; color: #87909d; font-size: .75rem; }
.article-wrap { max-width: 800px; margin: 0 auto; padding: 4rem 1.25rem 6rem; }
.article-wrap h2 { margin: 2.5rem 0 1rem; font-size: 2rem; line-height: 1.2; letter-spacing: -.03em; font-weight: 800; }
.article-wrap h3 { margin: 2rem 0 .8rem; font-size: 1.3rem; font-weight: 800; }
.article-wrap p, .article-wrap li { color: #4f5a69; line-height: 1.8; }
.article-wrap ul, .article-wrap ol { margin: 1rem 0; padding-left: 1.4rem; }.article-wrap li { margin: .55rem 0; }
.article-callout { margin: 2rem 0; padding: 1.4rem; border-left: 4px solid #315ce9; border-radius: 0 1rem 1rem 0; background: #e9edff; }
.article-steps { counter-reset: guide; }.article-step { position: relative; margin: 1rem 0; padding: 1.4rem 1.4rem 1.4rem 4.2rem; border: 1px solid #e1e5ec; border-radius: 1.1rem; background: white; }
.article-step::before { counter-increment: guide; content: counter(guide); position: absolute; left: 1.2rem; top: 1.25rem; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: .65rem; background: #315ce9; color: white; font-size: .75rem; font-weight: 800; }
.article-step h3 { margin: 0 0 .4rem; }.article-cta { margin-top: 3rem; padding: 2rem; border-radius: 1.4rem; background: #0b101c; color: white; }.article-cta p { color: #aeb8c7; }
.guides-page { padding: 5rem 0 7rem; }.guides-page h1 { font-size: clamp(2.5rem,6vw,4.5rem); font-weight: 800; letter-spacing: -.05em; }.guides-page > .container > p { max-width: 650px; margin-top: 1rem; color: #5e6877; font-size: 1.05rem; line-height: 1.7; }.guides-page .guides-grid { margin-top: 3rem; }

@media (max-width: 991px) {
  .main-nav { position: absolute; top: 4.6rem; left: 1.25rem; right: 1.25rem; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: .7rem; border: 1px solid var(--line); border-radius: 1rem; background: rgba(14,19,28,.98); box-shadow: 0 20px 50px rgba(0,0,0,.4); }
  .main-nav.is-open { display: flex; }.main-nav a { padding: .9rem; border-radius: .65rem; }.main-nav a:hover { background: rgba(255,255,255,.05); }
  .menu-button { display: block; }
  .hero-section { min-height: auto; }.hero-layout { grid-template-columns: 1fr; padding: 5rem 0 4rem; }.hero-copy { text-align: center; }.hero-lead { margin-inline: auto; }.store-actions, .hero-proof { justify-content: center; }
  .hero-product { min-height: 590px; }.status-top { left: 8%; }.status-bottom { right: 8%; }
  .marquee-row { padding: 1.7rem 0; flex-direction: column; }.platform-logos { width: 100%; justify-content: space-between; }
  .section-space { padding: 6.5rem 0; }.product-step-offset { transform: none; }
  .platform-grid { grid-template-columns: repeat(2,1fr); }.platform-card { min-height: 280px; }
  .guides-grid { grid-template-columns: repeat(2,1fr); }
  .confidence-grid { grid-template-columns: 1fr; gap: 3.5rem; }.confidence-copy { text-align: center; }.confidence-copy p { margin-inline: auto; }
  .download-panel { flex-direction: column; align-items: flex-start; }.download-panel .store-actions { width: 100%; flex-direction: row; }
}

@media (max-width: 767px) {
  .container { width: min(100% - 2rem, 1200px); }.nav-shell { height: 4.5rem; }
  .hero-layout { padding-top: 3.5rem; }.hero-copy h1 { font-size: clamp(3.2rem, 15vw, 5.2rem); }.hero-lead { font-size: .95rem; }
  .hero-product { min-height: 500px; }.hero-image-wrap { width: 270px; border-radius: 1.55rem; }.signal-rings span:nth-child(1){width:300px;height:300px}.signal-rings span:nth-child(2){width:390px;height:390px}.signal-rings span:nth-child(3){display:none}.status-pill { transform: scale(.88); }.status-top { left: -1rem; top: 25%; }.status-bottom { right: -1.5rem; bottom: 15%; }
  .platform-logos { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.4rem 2rem; }.platform-logos > span { justify-content: center; }
  .section-space { padding: 5rem 0; }.section-heading { margin-bottom: 3rem; }.section-heading h2,.confidence-copy h2,.download-copy h2 { font-size: 2.65rem; }
  .heading-row { display: block; }.heading-row > p { margin-top: 1rem; }.heading-row > .text-link { margin-top: 1rem; }
  .product-steps { grid-template-columns: 1fr; gap: 4rem; }.screenshot-frame { max-width: 280px; }
  .platform-grid { grid-template-columns: 1fr; }.platform-card { min-height: 230px; }.compatibility-note { align-items: flex-start; text-align: left; }
  .benefit-grid { grid-template-columns: 1fr; }.benefit-grid article { min-height: 190px; }.benefit-icon { margin-bottom: 1.4rem; }
  .guides-grid { grid-template-columns: 1fr; }.guide-card p { min-height: auto; }
  .download-section { padding-bottom: 4rem; }.download-panel { min-height: auto; padding: 2rem; border-radius: 1.5rem; }.download-panel .store-actions { flex-direction: column; align-items: flex-start; }
  .footer-main { grid-template-columns: 1fr 1fr; }.footer-main > div:first-child { grid-column: 1 / -1; }.footer-bottom { flex-direction: column; }
}

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