*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: #fff;
  background: #070A0D;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
:focus-visible { outline: 2px solid rgba(95, 188, 162, .9); outline-offset: 2px; }

/* ===== Tokens ===== */
:root{
  --bg0: #070A0D;
  --bg1: #0B1116;

  --surface: rgba(255,255,255,.07);
  --surface2: rgba(255,255,255,.05);
  --border: rgba(255,255,255,.10);
  --border2: rgba(255,255,255,.08);

  --text: rgba(255,255,255,.95);
  --muted: rgba(255,255,255,.72);
  --muted2: rgba(255,255,255,.55);

  --accent: #5fbca2;
  --accent2: rgba(95,188,162,.22);
  --accent3: rgba(95,188,162,.12);

  --shadow: 0 30px 70px rgba(0,0,0,.55);
  --shadow2: 0 16px 40px rgba(0,0,0,.35);

  --radius-xl: 22px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 12px;

  --container: 1440px;
  --pad-desktop: 80px;
  --pad-tablet: 40px;
  --pad-mobile: 20px;

  --section-y-desktop: 96px;
  --section-y-tablet: 72px;
  --section-y-mobile: 56px;

  --blur: 22px;
}

/* ===== Background layers ===== */
.bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(1200px 800px at 40% 10%, rgba(95,188,162,.10), transparent 60%),
              radial-gradient(900px 700px at 80% 40%, rgba(255,255,255,.06), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
}

.bg__noise{
  position: absolute;
  inset: 0;
  opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.bg__glow{
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 999px;
  filter: blur(60px);
  opacity: .55;
  transform: translate3d(0,0,0);
  animation: glowFloat 14s ease-in-out infinite;
}

.bg__glow--a{
  left: -120px;
  top: -160px;
  background: radial-gradient(circle at 30% 30%, rgba(95,188,162,.45), transparent 60%);
}

.bg__glow--b{
  right: -180px;
  top: 240px;
  background: radial-gradient(circle at 30% 30%, rgba(95,188,162,.22), transparent 60%),
              radial-gradient(circle at 60% 60%, rgba(255,255,255,.12), transparent 65%);
  animation-delay: -4s;
}

.bg__grid{
  position: absolute;
  inset: 0;
  opacity: .12;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 120px 120px;
  mask-image: radial-gradient(circle at 50% 25%, rgba(0,0,0,1), rgba(0,0,0,.0) 60%);
}

@keyframes glowFloat{
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(0, 22px, 0) scale(1.03); }
}

/* ===== Layout ===== */
.container{
  width: min(var(--container), calc(100% - (var(--pad-desktop) * 2)));
  margin: 0 auto;
}

@media (max-width: 992px){
  .container{
    width: min(var(--container), calc(100% - (var(--pad-tablet) * 2)));
  }
}

@media (max-width: 480px){
  .container{
    width: calc(100% - (var(--pad-mobile) * 2));
  }
}

.section{
  padding: var(--section-y-desktop) 0;
  position: relative;
}

@media (max-width: 992px){
  .section{ padding: var(--section-y-tablet) 0; }
}

@media (max-width: 480px){
  .section{ padding: var(--section-y-mobile) 0; }
}

/* ===== Glass / Card ===== */
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.045));
  border: 1px solid var(--border2);
  box-shadow: var(--shadow2);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}

.card{
  padding: 24px;
}

@media (max-width: 480px){
  .card{ padding: 18px; }
}

/* ===== Typography ===== */
.kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.kicker__dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(95,188,162,.55);
}

h1,h2,h3{ margin: 0; letter-spacing: -0.02em; }
p{ margin: 0; color: var(--muted); line-height: 1.6; }

.h1{
  font-size: 56px;
  line-height: 1.05;
}

@media (max-width: 992px){
  .h1{ font-size: 44px; }
}
@media (max-width: 480px){
  .h1{ font-size: 36px; }
}

.h2{
  font-size: 38px;
  line-height: 1.15;
}
@media (max-width: 992px){
  .h2{ font-size: 32px; }
}
@media (max-width: 480px){
  .h2{ font-size: 28px; }
}

.h3{
  font-size: 18px;
  line-height: 1.25;
  color: var(--text);
}

.sub{
  margin-top: 10px;
  font-size: 18px;
  color: rgba(255,255,255,.78);
  line-height: 1.6;
}

.subsub{
  margin-top: 6px;
  font-size: 14px;
  color: rgba(255,255,255,.78);
  line-height: 1.6;
}

@media (max-width: 480px){
  .sub{ font-size: 16px; }
}

/* ===== Buttons ===== */
.btnRow{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
  user-select: none;
}

.btn:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

.btn:active{ transform: translateY(0) scale(.99); }

.btn--primary{
  background: linear-gradient(135deg, rgba(95,188,162,.95), rgba(95,188,162,.35));
  border-color: rgba(95,188,162,.45);
  box-shadow: 0 18px 50px rgba(95,188,162,.12);
}

.btn--primary:hover{
  box-shadow: 0 26px 70px rgba(95,188,162,.18);
}

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

.btn__shine::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.25), transparent 70%);
  transform: translateX(-120%);
  transition: transform .55s ease;
}

.btn__shine:hover::after{
  transform: translateX(120%);
}

/* ===== Badge chips ===== */
.chips{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.78);
  font-size: 13px;
}

.chip--accent{
  background: rgba(95,188,162,.10);
  border-color: rgba(95,188,162,.25);
  color: rgba(95,188,162,.95);
}

/* ===== Header ===== */
.header{
  position: sticky;
  top: 0;
  z-index: 50;
}

.header__bar{
  height: 78px;
  display: flex;
  align-items: center;
}

.header__inner{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
}

.header__glass{
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(7,10,13,.25);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(0px);
  transition: background .25s ease, backdrop-filter .25s ease, -webkit-backdrop-filter .25s ease;
}

.header__glass.isScrolled{
  background: rgba(7,10,13,.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.logo{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 750;
  letter-spacing: .02em;
}

.logo__mark{
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
}

.logo__mark svg{
  width: 42px;
  height: 42px;
  opacity: .95;
}

.logo__mark-footer svg{
  width: 142px;
  height: 42px;
}

.nav{
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav a{
  font-size: 14px;
  color: rgba(255,255,255,.82);
  position: relative;
  padding: 8px 2px;
  transition: color .2s ease;
}

.nav a:hover{ color: rgba(255,255,255,.95); }

.nav a::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: 4px;
  width: 0%;
  height: 2px;
  border-radius: 99px;
  background: rgba(95,188,162,.95);
  box-shadow: 0 0 18px rgba(95,188,162,.55);
  transition: width .25s ease;
}

.nav a:hover::after,
.nav a.isActive::after{
  width: 100%;
}

.header__right{
  display: flex;
  align-items: center;
  gap: 12px;
}

.burger{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease;
}

.burger:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
}

.burger__lines{
  width: 18px;
  height: 12px;
  position: relative;
}

.burger__lines span{
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 99px;
  background: rgba(255,255,255,.85);
  transition: transform .25s ease, top .25s ease, opacity .25s ease;
}

.burger__lines span:nth-child(1){ top: 0; }
.burger__lines span:nth-child(2){ top: 5px; }
.burger__lines span:nth-child(3){ top: 10px; }

.burger.isOpen .burger__lines span:nth-child(1){ top: 5px; transform: rotate(45deg); }
.burger.isOpen .burger__lines span:nth-child(2){ opacity: 0; }
.burger.isOpen .burger__lines span:nth-child(3){ top: 5px; transform: rotate(-45deg); }

@media (max-width: 992px){
  .nav{ display: none; }
  .burger{ display: inline-flex; }
}

/* ===== Mobile menu overlay ===== */
.mobileMenu{
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
}

.mobileMenu.isOpen{ display: block; }

.mobileMenu__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 0;
}


.mobileMenu.isOpen .mobileMenu__overlay{ opacity: 1; }

.mobileMenu__panel{
  position: absolute;
  right: 0;
  top: 10%;
  width: 100%;
  height: 100%;
  padding: 18px;
  z-index: 1;
}

.mobileMenu.isOpen .mobileMenu__card{ transform: translateX(0); }

.mobileMenu__card{
  padding: 18px;
  border-radius: 22px;

  transform: translateX(110%);
  transition: transform .28s ease;
  will-change: transform;
}

.mobileNav{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  align-items: center;
}

.mobileNav a{
  padding: 12px 12px;
  border-radius: 14px;
  color: rgba(255,255,255,.85);
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease;
}

.mobileNav a:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
}

.mobileNav a::after{
  content:"";
  position:absolute;
  left: 12px;
  bottom: 8px;
  width: 0%;
  height: 2px;
  background: rgba(95,188,162,.95);
  border-radius: 99px;
  transition: width .25s ease;
  box-shadow: 0 0 18px rgba(95,188,162,.55);
}

.mobileNav a:hover::after,
.mobileNav a.isActive::after{
  width: calc(100% - 24px);
}

.mobileMenu__cta{
  margin-top: 16px;
}

/* ===== Hero ===== */
.hero{
  padding: 56px 0 36px;
}

.hero__grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 36px;
}

@media (max-width: 992px){
  .hero__grid{ grid-template-columns: 1fr; gap: 28px; }
}

.hero__left{
  position: relative;
}

.hero__bullets{
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

.bullet{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255,255,255,.78);
  line-height: 1.5;
}

.bullet__icon{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(95,188,162,.16);
  border: 1px solid rgba(95,188,162,.25);
  display: grid;
  place-items: center;
  margin-top: 2px;
  box-shadow: 0 0 18px rgba(95,188,162,.18);
}

.bullet__icon svg{
  width: 12px;
  height: 12px;
  opacity: .9;
}

.hero__badges{
  margin-top: 22px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.storeBadge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.storeBadge:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}

.storeBadge__icon{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}

.storeBadge__text small{
  display:block;
  color: rgba(255,255,255,.62);
  font-size: 11px;
  line-height: 1.2;
}
.storeBadge__text strong{
  display:block;
  font-size: 13px;
  line-height: 1.2;
}

/* Hero right: floating phones */
.hero__right{
  position: relative;
  min-height: 460px;
}

@media (max-width: 992px){
  .hero__right{ min-height: 420px; }
}

@media (max-width: 480px){
  .hero__right{ min-height: 380px; }
}

.phoneStack{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.phone{
  width: 280px;
  height: 560px;
  border-radius: 34px;
  position: absolute;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.12), rgba(255,255,255,.03)),
              linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 40px 120px rgba(0,0,0,.55);
  overflow: hidden;
  transform-style: preserve-3d;
}

.phone::before{
  content:"";
  position:absolute;
  inset: 14px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65)),
              radial-gradient(circle at 70% 20%, rgba(95,188,162,.20), transparent 55%);
  border: 1px solid rgba(255,255,255,.08);
}

.phone__ui{
  position: absolute;
  inset: 26px;
  border-radius: 22px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.phone__top{
  padding: 14px 14px 8px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  color: rgba(255,255,255,.82);
  font-size: 12px;
}

.phone__pillRow{
  display:flex;
  gap: 8px;
  padding: 8px 14px 10px;
}

.phone__pill{
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.75);
}

.phone__pill.isActive{
  background: rgba(95,188,162,.14);
  border-color: rgba(95,188,162,.28);
  color: rgba(95,188,162,.95);
  box-shadow: 0 0 18px rgba(95,188,162,.12);
}

.phone__content{
  padding: 12px 14px;
  display: grid;
  gap: 10px;
}

.miniCard{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  padding: 12px;
}

.miniCard-1{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  padding: 12px;

}

.miniCard-2{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  padding: 12px;
}

.minicard-wrap-1 {
  display: flex;
  justify-content: flex-start;
}

.minicard-wrap-2 {
  display: flex;
  justify-content: flex-end;
}

.miniCard__row{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.score{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.tag{
  font-size: 14px;
  color: rgba(255,255,255,.65);
}

.phone__bottom{
  padding: 12px 14px 14px;
  display:flex;
  gap: 10px;
  justify-content: space-between;
}

.tabIcon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  display:grid;
  place-items:center;
  color: rgba(255,255,255,.70);
}

.phone--a{
  transform: translate3d(-40px, 0, 0) rotate(-9deg);
  animation: floatA 9s ease-in-out infinite;
  filter: blur(.0px);
  z-index: 3;
}

.phone--b{
  transform: translate3d(80px, 18px, 0) rotate(10deg);
  animation: floatB 11s ease-in-out infinite;
  filter: blur(1px);
  opacity: .92;
  z-index: 2;
}

.phone--c{
  transform: translate3d(20px, -40px, 0) rotate(2deg) scale(.92);
  animation: floatC 13s ease-in-out infinite;
  filter: blur(2px);
  opacity: .85;
  z-index: 1;
}

@keyframes floatA{
  0%,100%{ transform: translate3d(-40px, 0, 0) rotate(-9deg); }
  50%{ transform: translate3d(-52px, 18px, 0) rotate(-7deg); }
}
@keyframes floatB{
  0%,100%{ transform: translate3d(80px, 18px, 0) rotate(10deg); }
  50%{ transform: translate3d(68px, -8px, 0) rotate(8deg); }
}
@keyframes floatC{
  0%,100%{ transform: translate3d(20px, -40px, 0) rotate(2deg) scale(.92); }
  50%{ transform: translate3d(10px, -18px, 0) rotate(3deg) scale(.92); }
}

/* shrink phones on small screens */
@media (max-width: 480px){
  .phone{ width: 240px; height: 500px; }
}

/* ===== Section headings row ===== */
.sectionHead{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px;
}

.sectionHead__left{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.sectionHead__right{
  color: rgba(255,255,255,.60);
  font-size: 14px;
  max-width: 420px;
  line-height: 1.5;
}

@media (max-width: 992px){
  .sectionHead{ flex-direction: column; align-items:flex-start; }
  .sectionHead__right{ max-width: 100%; }
}

/* ===== About metrics ===== */
.metrics{
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 992px){
  .metrics{ grid-template-columns: 1fr; }
}

.metric{
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}

.metric strong{
  display:block;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.metric span{
  display:block;
  margin-top: 6px;
  color: rgba(255,255,255,.62);
  font-size: 13px;
}

/* ===== How it works ===== */
.steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 992px){
  .steps{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px){
  .steps{ grid-template-columns: 1fr; }
}

.step{
  position: relative;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  overflow: hidden;
}

.step::after{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(300px 120px at 20% 0%, rgba(95,188,162,.16), transparent 70%);
  opacity: 0;
  transition: opacity .25s ease;
}

.step:hover::after{ opacity: 1; }

.step__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(95,188,162,.12);
  border: 1px solid rgba(95,188,162,.22);
  color: rgba(95,188,162,.95);
  font-weight: 800;
  box-shadow: 0 0 18px rgba(95,188,162,.12);
  padding: 12px;
}

.step p{
  margin-top: 10px;
  color: rgba(255,255,255,.70);
  font-size: 14px;
}

/* ===== Feature cards ===== */
.features{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 992px){
  .features{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px){
  .features{ grid-template-columns: 1fr; }
}

.fcard{
  position: relative;
  padding: 22px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  transform-style: preserve-3d;
  overflow: hidden;
}

.fcard::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(420px 200px at 20% 0%, rgba(95,188,162,.16), transparent 70%);
  opacity: 0;
  transition: opacity .25s ease;
}

.fcard:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
}

.fcard:hover::before{ opacity: 1; }

.fcard__icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  display:grid;
  place-items:center;
  color: rgba(255,255,255,.85);
}

.fcard__icon svg{
  width: 20px;
  height: 20px;
  opacity: .92;
}

.fcard h3{
  margin-top: 14px;
}
.fcard p{
  margin-top: 10px;
  font-size: 14px;
}

.fcard__chipRow{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ===== Chat preview ===== */
.chatGrid{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 14px;
  align-items: start;
}

@media (max-width: 992px){
  .chatGrid{ grid-template-columns: 1fr; }
}

.chatPanel{
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}

.chatBubble{
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  margin-bottom: 10px;
}

.chatBubble--user{
  border-color: rgba(95,188,162,.22);
  background: rgba(95,188,162,.08);
}

.chatMeta{
  display:flex;
  justify-content: space-between;
  align-items:center;
  color: rgba(255,255,255,.55);
  font-size: 12px;
  margin-bottom: 8px;
}

.chatText{
  color: rgba(255,255,255,.80);
  font-size: 14px;
  line-height: 1.5;
}

.chatInput{
  margin-top: 12px;
  display:flex;
  gap: 10px;
}

.chatInput .input{
  flex: 1;
}

/* ===== Predictions compare ===== */
.grid2{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

@media (max-width: 992px){
  .grid2{ grid-template-columns: 1fr; }
}

.compareCard{
  padding: 22px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  overflow: hidden;
  position: relative;
}

.compareCard::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(420px 220px at 20% 0%, rgba(95,188,162,.14), transparent 70%);
  opacity: .65;
}

.compareCard__head{
  display:flex;
  justify-content: space-between;
  align-items:center;
  position: relative;
  z-index: 1;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(95,188,162,.22);
  background: rgba(95,188,162,.10);
  color: rgba(95,188,162,.95);
  font-size: 12px;
  font-weight: 700;
}

.compareCard ul{
  margin: 14px 0 0;
  padding: 0 0 0 18px;
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,.72);
  line-height: 1.6;
  font-size: 14px;
}

.disclaimer{
  margin-top: 14px;
  color: rgba(255,255,255,.55);
  font-size: 13px;
}

/* ===== Screens carousel ===== */
.carousel{
  position: relative;
}

.carouselTrack{
  display:flex;
  gap: 14px;
  overflow: hidden;
  scroll-behavior: smooth;
}

.carouselCard{
  flex: 0 0 calc(33.333% - 10px);
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  min-height: 240px;
}

.carouselCard__img{
  width: 100%;
  height: 180px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.12), rgba(255,255,255,.03)),
    radial-gradient(circle at 70% 40%, rgba(95,188,162,.20), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.70));
  overflow: hidden;
  position: relative;
}

.carouselCard__img::after{
  content:"Здесь будет скрин приложения";
  position:absolute;
  inset: 0;
  display:grid;
  place-items:center;
  color: rgba(255,255,255,.55);
  font-size: 13px;
}

.carouselCard p{
  margin-top: 12px;
  font-size: 14px;
}

@media (max-width: 992px){
  .carouselCard{ flex: 0 0 calc(50% - 8px); }
}
@media (max-width: 480px){
  .carouselTrack{ overflow-x: auto; padding-bottom: 8px; }
  .carouselCard{ flex: 0 0 86%; }
}

.carouselBtns{
  display:flex;
  gap: 10px;
  margin-top: 14px;
}

.iconBtn{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  display:grid;
  place-items:center;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.iconBtn:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}


/* ===== FAQ accordion ===== */
.faq{
  display:grid;
  gap: 10px;
}

.acItem{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  overflow: hidden;
}

.acBtn{
  width: 100%;
  padding: 16px 16px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,.90);
  display:flex;
  justify-content: space-between;
  align-items:center;
  cursor: pointer;
  text-align: left;
  gap: 12px;
}

.acBtn span{
  font-weight: 650;
  letter-spacing: -0.01em;
}

.acIcon{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  display:grid;
  place-items:center;
  transition: transform .25s ease;
}

.acBody{
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}

.acBody__inner{
  padding: 0 16px 16px;
  color: rgba(255,255,255,.72);
  line-height: 1.6;
  font-size: 14px;
}

.acItem.isOpen .acIcon{ transform: rotate(45deg); }




/* ===== Form ===== */

.formGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.formRow{
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.formStatus{
  font-size: 13px;
  color: rgba(255,255,255,65);
}
.formStatus.isOk{ color: rgba(95,188,162,95); }
.formStatus.isErr{ color: rgba(255,120,120,90); }

@media (max-width: 992px){
  .formGrid{ grid-template-columns: 1fr; }
}

.field{
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.label{
  font-size: 13px;
  color: rgba(255,255,255,.70);
}

.input, .textarea{
  width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.90);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.input::placeholder, .textarea::placeholder{
  color: rgba(255,255,255,.45);
}

.input:focus, .textarea:focus{
  border-color: rgba(95,188,162,.35);
  box-shadow: 0 0 0 4px rgba(95,188,162,.10);
  outline: none;
}

.textarea{
  min-height: 130px;
  resize: vertical;
}

.formActions{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.check{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.62);
  line-height: 1.4;
  padding-top: 16px;
}

.check input{
  margin-top: 3px;
  accent-color: var(--accent);
}

.formHint{
  margin-top: 10px;
  color: rgba(255,255,255,.55);
  font-size: 13px;
  text-align: center;
}

/* ===== Footer ===== */
.footer{
  padding: 34px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12);
}

.footer__brand{ max-width: 460px; }

.footer__grid{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap: 18px;
  flex-wrap: wrap;
}

.footer__links{
  display:flex;
  flex-direction: column;
  gap: 12px;
  color: rgba(255,255,255,75);
  font-size: 14px;
}

.footer__list{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.footer__links a:hover{
  color: rgba(255,255,255,.95);
}

.footer__bottom{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgb(255 255 255 / 20%);
  display:flex;
  justify-content: space-between;
  align-items:center;
  flex-wrap: wrap;
  gap: 10px;
}
.footer__copy{
  color: rgba(255,255,255,55);
  font-size: 13px;
}

/* ===== Toast ===== */
.toast{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.toast.isShow{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(-6px);
}

.toast__inner{
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,14,18,.65);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(255,255,255,.86);
}

.toast__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(95,188,162,.95);
  box-shadow: 0 0 18px rgba(95,188,162,.55);
}

/* ===== Back to top ===== */
.toTop{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, border-color .2s ease;
}

.toTop:hover{
  border-color: rgba(255,255,255,.16);
}

.toTop.isShow{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ===== Reveal animation ===== */
.reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease;
}

.reveal.isIn{
  opacity: 1;
  transform: translateY(0);
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .bg__glow, .phone--a, .phone--b, .phone--c { animation: none !important; }
  .reveal{ transition: none !important; }
  .btn, .fcard, .iconBtn, .storeBadge { transition: none !important; }
}

/* =========================
   Language selector (Header)
   ========================= */

.lang {
  position: relative;
  display: inline-flex;
  gap: 12px;
}

.langBtn {
  height: 46px;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.langBtn:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

.langBtn__caret {
  width: 16px;
  height: 16px;
  opacity: .85;
}

.flagSvg {
  width: 22px;
  height: 16px;
  border-radius: 4px;
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
}

.langMenu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,14,18,.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  padding: 10px;
  display: none;
  z-index: 80;
}

.lang.isOpen .langMenu {
  display: flex;
  animation: langIn .18s ease-out;
  flex-direction: column;
      gap: 6px;
}

@keyframes langIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.langItem {
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,0%);
  color: rgba(255,255,255,.86);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.langItem:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

.langItem.isActive {
  border-color: rgba(95,188,162,.22);
  background: rgba(95,188,162,.08);
}

.langName {
  font-size: 14px;
  color: rgba(255,255,255,.88);
}

.langName-short {
    font-size: 14px;
    color: rgba(255, 255, 255, .88);
}

/* RTL support (Arabic) */
html[dir="rtl"] body { direction: rtl; }
html[dir="rtl"] .sectionHead__right,
html[dir="rtl"] .sub,
html[dir="rtl"] p,
html[dir="rtl"] .chatText,
html[dir="rtl"] .label {
  text-align: right;
}
html[dir="rtl"] .nav a::after { left: auto; right: 0; }

/* === Floating side balls (Start) === */
.floating-ball{
  position: fixed;                
  width: 280px;
  height: 280px;
  z-index: 2;
  pointer-events: none;
  opacity: 0.85;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.45));
  will-change: transform;
  z-index: 0;
}

.floating-ball img{
  width: 200px;
  height: 100%;
  object-fit: contain;
  display: block;
}

.floating-ball--left{
  left: -75px;                     
  top: 110px;                      
  animation: floatYLeft 6.5s ease-in-out infinite;
}

.floating-ball--right{
  right: -100px;
  top: 600px;                     
  animation: floatYRight 7.8s ease-in-out infinite;
}

@keyframes floatYLeft{
  0%   { transform: translateY(0) rotate(-10deg); }
  50%  { transform: translateY(-22px) rotate(8deg); }
  100% { transform: translateY(0) rotate(-10deg); }
}

@keyframes floatYRight{
  0%   { transform: translateY(0) rotate(12deg); }
  50%  { transform: translateY(-26px) rotate(-6deg); }
  100% { transform: translateY(0) rotate(12deg); }
}


@media (max-width: 992px){
  .floating-ball{ display: none; }
  .langName-short{ display: none; }
  .storeBadge { width: 100%; justify-content: center; }
}


@media (max-width: 1200px){
  .floating-ball{ width: 150px; height: 150px; }
}
/* === Floating side balls (End) === */


/* === Hero right: mobile === */
@media (max-width: 992px){


  .hero{
    grid-template-columns: 1fr;
  }

  .hero__right{
    width: 100%;
    max-width: 420px;          
    margin: 22px auto 0;      
    display: flex;
    justify-content: center;
    align-items: center;
  }


  .phoneStack{
    position: relative;
    width: 320px;              
    height: 360px;            
    margin: 0 auto;
  }


  .phone{
    width: 210px;
    height: 300px;
  }


  .phone--a{
    transform: translate3d(-38px, 10px, 0) rotate(-6deg) scale(0.98);
  }

  .phone--b{
    transform: translate3d(0px, -8px, 0) rotate(0deg) scale(1);
  }

  .phone--c{
    transform: translate3d(38px, 18px, 0) rotate(6deg) scale(0.98);
  }
}


@media (max-width: 420px){
  .hero__right{
    max-width: 360px;
  }

  .phoneStack{
    width: 280px;
    height: 330px;
  }

  .phone{
    width: 185px;
    height: 270px;
  }

  .phone--a{ transform: translate3d(-30px, 12px, 0) rotate(-6deg) scale(0.98); }
  .phone--b{ transform: translate3d(0px, -8px, 0) rotate(0deg) scale(1); }
  .phone--c{ transform: translate3d(30px, 20px, 0) rotate(6deg) scale(0.98); }
}
/* === Hero right: mobile (End) === */

/* === Hero promo floating (Start) === */
.heroPromo{
  width: 720px;
  transform: translateY(28px);
  opacity: 0;
  padding-left: 40px;
  padding-right: 40px;
}

.heroPromo img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 22px;
}

/* Появление снизу вверх при загрузке */
.heroPromo.isIn{
  opacity: 1;
  transform: translateY(0);
  transition: transform .9s cubic-bezier(.2,.9,.2,1), opacity .9s ease;
}

/* Плавная левитация (после появления) */
.heroPromo.isFloat{
  animation: heroPromoFloat 6.5s ease-in-out infinite;
}

@keyframes heroPromoFloat{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-18px); }
  100% { transform: translateY(0); }
}

/* Адаптив */
@media (max-width: 992px){
  .heroPromo{
    position: relative;
    right: auto;
    top: auto;
    width: min(420px, 100%);
    max-width: 100%;
    margin: 18px auto 0;
    pointer-events: none;
  }
}

@media (max-width: 420px){
  .heroPromo{ border-radius: 18px; }
  .heroPromo img{ border-radius: 18px; }
}
/* === Hero promo floating (End) === */

/* ===== JS Blur Layer for Mobile Menu ===== */
.pageWrap{
  transition: filter .25s ease, transform .25s ease;
  will-change: filter, transform;
}

body.menuBlur .pageWrap{
  filter: blur(18px) saturate(1.15);
  transform: scale(1.01);
  user-select: none;
}


body.menuBlur .header{
  z-index: 10002;
}

body.menuBlur #mobileMenu{
  z-index: 10001;
}


body.menuBlur #burger{
  position: relative;
  z-index: 10003;
}

/* ===== Form status ===== */
.formStatus{
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.35;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
}

.formStatus:empty{ display:none; }

.formStatus::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
}

.formStatus.isSending::before{
  background: rgba(255,255,255,.60);
  animation: betaigoPulse .9s ease-in-out infinite;
}

.formStatus.isOk{
  border-color: rgba(95,188,162,.30);
  background: rgba(95,188,162,.10);
  color: rgba(95,188,162,.95);
}
.formStatus.isOk::before{
  background: rgba(95,188,162,.95);
  box-shadow: 0 0 0 4px rgba(95,188,162,.12);
}

.formStatus.isErr{
  border-color: rgba(255,120,120,.30);
  background: rgba(255,120,120,.10);
  color: rgba(255,120,120,.95);
}
.formStatus.isErr::before{
  background: rgba(255,120,120,.95);
  box-shadow: 0 0 0 4px rgba(255,120,120,.12);
}

@keyframes betaigoPulse{
  0%{ transform: scale(1); opacity: .6; }
  50%{ transform: scale(1.35); opacity: 1; }
  100%{ transform: scale(1); opacity: .6; }
}

/* ====== ABOUT: promo image container ====== */
.about__promo {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .05);
  height: 500px;

  overflow: hidden;             
  position: relative;
}

.about__promoImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translate3d(0,0,0) scale(1.10);
  will-change: transform;
}

/* ====== /ABOUT: promo image container ====== */

.ai-chat {
  width: 44px;
}

/* === Screens slider (Start) === */
.screensSlider{
  position: relative;
  margin-top: 18px;
}

.screensTrack{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 28px) / 3); /* 3 карточки в ряд */
  gap: 14px;
  overflow: hidden;
  scroll-behavior: smooth;
  padding: 2px;
}

.screenCard{
  border-radius: 22px;
  overflow: hidden;
  transform: translateZ(0);
}

.screenShot{
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: rgba(255,255,255,0.04);
}

.screenShot img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.screenMeta{
  padding: 14px 14px 16px;
}

.screenMeta .h3{
  margin: 0 0 6px;
}

.screenMeta p{
  margin: 0;
  color: rgba(255,255,255,.72);
  line-height: 1.6;
  font-size: 14px;
}

/* стрелки */
.sliderBtn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(10,14,20,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.9);
  cursor: pointer;
  z-index: 3;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.sliderBtn span{
  font-size: 26px;
  line-height: 1;
  transform: translateY(-1px);
}

.sliderBtn:hover{
  background: rgba(95,188,162,0.14);
  border-color: rgba(95,188,162,0.35);
  transform: translateY(-50%) scale(1.04);
}

.sliderBtn--prev{ left: -10px; }
.sliderBtn--next{ right: -10px; }

/* адаптив */
@media (max-width: 992px){
  .screensTrack{
    grid-auto-columns: calc((100% - 14px) / 2); /* 2 карточки */
  }
}

@media (max-width: 560px){
  .screensTrack{
    grid-auto-columns: 86%; /* 1 карточка, но видно край следующей */
    overflow: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }

  .screenCard{
    scroll-snap-align: start;
  }

  .sliderBtn{
    display: none; /* на мобиле можно свайпом */
  }
}
/* === Screens slider (End) === */

/* ===== Privacy policy language tabs ===== */
.policyTabs{
  display: inline-flex;
  gap: 10px;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}

.policyTab{
  appearance: none;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
  padding: 10px 14px;
  border-radius: 14px;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.policyTab:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
}

.policyTab.isActive{
  border-color: rgba(95,188,162,.35);
  background: rgba(95,188,162,.14);
  color: rgba(95,188,162,.95);
}

.policyContent{ display: none; }
.policyContent.isActive{ display: block; }