:root{
  --sat: env(safe-area-inset-top);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
  --sar: env(safe-area-inset-right);

  --txt: rgba(245,246,255,.96);
  --muted: rgba(245,246,255,.78);

  --r: 22px;
  --r2: 28px;

  --glass: rgba(12, 8, 28, .38);

  --pink:#ff1ab3;
  --pink2:#ff4dde;
  --vio:#8a2cff;
  --blue:#1fd0ff;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: "Corporate Normal", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--txt);
  overflow-x:hidden;
  background:#060014;

  /* high quality gradient (static, no heavy animated blur) */
  background:
    radial-gradient(900px 600px at 50% -10%, rgba(255,77,222,.35), rgba(255,77,222,0) 62%),
    radial-gradient(900px 700px at 15% 35%, rgba(138,44,255,.35), rgba(138,44,255,0) 64%),
    radial-gradient(900px 700px at 88% 70%, rgba(31,208,255,.12), rgba(31,208,255,0) 62%),
    linear-gradient(180deg, #ff1ab3 0%, #b013ff 35%, #3a07ff 70%, #090018 100%);
}

/* Stars canvas */
.stars{
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display:block;
}

/* ---------- Loader (lightweight) ---------- */
.loader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display:grid;
  place-items:center;
  padding-top: var(--sat);
  padding-bottom: var(--sab);
  padding-left: var(--sal);
  padding-right: var(--sar);

  background:
    radial-gradient(900px 600px at 50% -10%, rgba(255,77,222,.25), rgba(255,77,222,0) 62%),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.10));
  backdrop-filter: blur(10px);
  transition: opacity .35s ease;
}

.loader.is-hidden{
  opacity: 0;
  pointer-events:none;
}

.loader__card{
  width: min(360px, 86vw);
  border-radius: 22px;
  padding: 18px 16px 16px;
  background: rgba(8,6,18,.42);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  display:grid;
  justify-items:center;
  gap: 12px;
}

.loader__logo{
  width: 74px;
  height: 74px;
  object-fit: contain;
  border-radius: 18px;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.45));
}

.loader__spinner{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.18);
  border-top-color: rgba(255,255,255,.85);
  animation: spin 1s linear infinite;
  will-change: transform;
}

@keyframes spin{
  to{ transform: rotate(360deg); }
}

.loader__text{
  font-size: 13px;
  color: rgba(255,255,255,.85);
  text-align:center;
}

.loader__bar{
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  overflow:hidden;
}
.loader__fill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  transition: width .18s ease;
}

/* ---------- Layout ---------- */
.stage{
  min-height: 100svh;
  padding-top: max(14px, var(--sat));
  padding-bottom: max(18px, var(--sab));
  padding-left: max(14px, var(--sal));
  padding-right: max(14px, var(--sar));
  display:grid;
  place-items:center;
}

.phone{
  width: min(520px, 94vw);
  border-radius: 38px;
  position: relative;
  padding: 16px 14px 18px;
  overflow: hidden;

  background: linear-gradient(180deg, rgba(10,6,24,.30), rgba(0,0,0,.25));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 80px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  transform: translateZ(0);
  contain: paint;
}

.phone__frameGlow{
  position:absolute;
  inset:-2px;
  border-radius: 40px;
  pointer-events:none;
  opacity:.55;
  background:
    linear-gradient(90deg, rgba(255,26,179,.18), rgba(138,44,255,.12), rgba(31,208,255,.10), rgba(255,26,179,.18));
  filter: blur(16px);
}

/* ---------- Hero / Logo ---------- */
.hero{
  position: relative;
  display:grid;
  place-items:center;
  gap: 12px;
  padding: 6px 4px 10px;
  z-index: 2;
}

.logoLink{ text-decoration:none; outline:none; }
.logoLink:focus-visible{
  border-radius: 30px;
  box-shadow: 0 0 0 3px rgba(255,255,255,.16);
}

.logoOrb{
  width: min(300px, 72vw);
  aspect-ratio: 1 / 1;
  position: relative;
  display:grid;
  place-items:center;
  transform: translateZ(0);
  will-change: transform;
  animation: float 3.2s ease-in-out infinite;
}

@keyframes float{
  0%,100%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(0,-10px,0); }
}

/* halo pulse: opacity+scale only (mobile friendly) */
.logoOrb__halo{
  position:absolute;
  inset: 10%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,77,222,.22), rgba(255,77,222,0) 58%),
    radial-gradient(circle at 50% 50%, rgba(31,208,255,.10), rgba(31,208,255,0) 60%);
  opacity:.9;
  will-change: transform, opacity;
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse{
  0%,100%{ transform: scale(1); opacity:.78; }
  50%{ transform: scale(1.06); opacity:1; }
}

.logoOrb__rings{ position:absolute; inset:0; pointer-events:none; }
.ring{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  opacity:.75;
  will-change: transform;
}
.ring--1{ width: 86%; height: 86%; animation: ring 12s linear infinite; }
.ring--2{ width: 70%; height: 70%; opacity:.62; animation: ring 16s linear infinite reverse; }
.ring--3{ width: 56%; height: 56%; opacity:.50; animation: ring 20s linear infinite; }

@keyframes ring{
  to{ transform: translate(-50%,-50%) rotate(360deg); }
}

/* small orbit dots */
.dotOrbit{
  position:absolute;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  opacity:.85;
  will-change: transform;
}
.d1{ left: 62%; top: 18%; animation: orbit1 7s linear infinite; }
.d2{ left: 80%; top: 52%; animation: orbit2 9s linear infinite; }
.d3{ left: 34%; top: 78%; animation: orbit3 11s linear infinite; }

@keyframes orbit1{ to{ transform: rotate(360deg) translateX(0); } }
@keyframes orbit2{ to{ transform: rotate(-360deg) translateX(0); } }
@keyframes orbit3{ to{ transform: rotate(360deg) translateX(0); } }

.logoOrb__img{
  width: 115%;
  height: 115%;
  object-fit: contain;
  border-radius: 22px;
  transform: translateZ(0);
  filter:
    drop-shadow(0 18px 50px rgba(0,0,0,.52))
    drop-shadow(0 0 22px rgba(255,77,222,.18));
}

/* ---------- Top pill ---------- */
.pill{
  width: min(560px, 92%);
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 50px rgba(0,0,0,.35);
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 10px;
  white-space: nowrap;
  overflow:hidden;
}
.pill__item{
  font-size: 12px;
  letter-spacing: .02em;
  color: rgba(255,255,255,.92);
}
.pill__sep{ opacity:.55; }

/* ---------- Buttons ---------- */
.stack{
  position: relative;
  z-index: 2;
  display:grid;
  gap: 12px;
  padding: 10px 8px 6px;
}

.btn{
  position: relative;
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 14px 14px;
  border-radius: var(--r2);
  text-decoration:none;
  color: var(--txt);
  outline:none;
  transform: translateZ(0);
  contain: layout paint;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px);

  box-shadow:
    0 18px 55px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.14);

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow:hidden;
}

.btn::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: var(--r2);
  padding: 1px;
  background: var(--borderGrad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .9;
  pointer-events:none;
}

.btn__shine{
  position:absolute;
  inset:-50%;
  background: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,.18), rgba(255,255,255,0));
  transform: translateX(-60%) rotate(12deg);
  opacity: 0;
  pointer-events:none;
  will-change: transform, opacity;
}

.btn:hover .btn__shine{
  opacity:.7;
  animation: shine 1.05s ease-in-out;
}

@keyframes shine{
  from{ transform: translateX(-60%) rotate(12deg); }
  to{ transform: translateX(60%) rotate(12deg); }
}

.btn:hover{
  transform: translateY(-2px);
  box-shadow:
    0 26px 70px rgba(0,0,0,.52),
    0 0 38px var(--glow),
    inset 0 1px 0 rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.20);
}

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

.btn:focus-visible{
  box-shadow:
    0 0 0 3px rgba(255,255,255,.16),
    0 26px 70px rgba(0,0,0,.52),
    0 0 38px var(--glow);
}

.btn__icon{
  width: 50px;
  height: 50px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  color: rgba(255,255,255,.95);

  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.12);

  box-shadow:
    0 14px 36px rgba(0,0,0,.35),
    0 0 22px var(--glow),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.btn__icon svg{ width: 24px; height: 24px; }

.btn__text{
  display:flex;
  flex-direction:column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.btn__title{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn__sub{
  font-size: 13px;
  color: rgba(255,255,255,.80);
  display:flex;
  align-items:center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mid{ opacity:.6; }

.btn__chev{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  box-shadow: 0 0 18px rgba(255,255,255,.06);
  font-size: 26px;
  opacity:.9;
}

/* themes */
.btn--pink{
  --borderGrad: linear-gradient(90deg, rgba(255,26,179,.92), rgba(255,77,222,.55), rgba(138,44,255,.50));
  --glow: rgba(255,26,179,.30);
}
.btn--blue{
  --borderGrad: linear-gradient(90deg, rgba(31,208,255,.92), rgba(77,93,255,.55), rgba(138,44,255,.35));
  --glow: rgba(31,208,255,.24);
}
.btn--dark{
  --borderGrad: linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,77,222,.25), rgba(31,208,255,.18));
  --glow: rgba(255,255,255,.12);
}

/* dot + badge */
.dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  display:inline-block;
}
.dot--green{
  background: #3dff9e;
  box-shadow: 0 0 12px rgba(61,255,158,.45);
  will-change: transform, opacity;
  animation: dotPulse 1.6s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{ transform: scale(.9); opacity:.85; }
  50%{ transform: scale(1.15); opacity:1; }
}

.badge{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.16);
}
.badge--cyan{
  background: linear-gradient(180deg, rgba(31,208,255,.18), rgba(0,0,0,.10));
}

/* ---------- Info cards ---------- */
.info{
  position: relative;
  z-index: 2;
  display:grid;
  gap: 12px;
  padding: 8px 8px 2px;
}

.card{
  position: relative;
  border-radius: var(--r2);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(14px);
  overflow:hidden;

  padding: 14px 14px;
  box-shadow:
    0 18px 55px rgba(0,0,0,.38),
    0 0 32px var(--cGlow),
    inset 0 1px 0 rgba(255,255,255,.12);

  contain: paint;
}

.card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: var(--r2);
  padding: 1px;
  background: var(--cBorder);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.9;
  pointer-events:none;
}

.card__shine{
  position:absolute;
  inset:-50%;
  background: linear-gradient(115deg, rgba(255,255,255,0), rgba(255,255,255,.16), rgba(255,255,255,0));
  transform: translateX(-60%) rotate(10deg);
  opacity: 0;
  pointer-events:none;
  will-change: transform, opacity;
}

.card:hover .card__shine{
  opacity:.6;
  animation: shine 1.1s ease-in-out;
}

.card__left{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width:0;
}

.card__emoji{
  width: 50px;
  height: 50px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  box-shadow: 0 0 20px var(--cGlow);
  font-size: 22px;
}

.card__txt{ min-width:0; }
.card__t{
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.card__s{
  margin-top: 4px;
  font-size: 13px;
  color: rgba(255,255,255,.78);
}

.card--violet{
  --cBorder: linear-gradient(90deg, rgba(138,44,255,.72), rgba(255,77,222,.38), rgba(31,208,255,.18));
  --cGlow: rgba(138,44,255,.18);
}
.card--gold{
  --cBorder: linear-gradient(90deg, rgba(255,211,110,.62), rgba(255,77,222,.35), rgba(255,26,179,.30));
  --cGlow: rgba(255,211,110,.14);
}

/* ---------- Reviews ---------- */
.reviews{
  position: relative;
  z-index: 2;
  padding: 12px 10px 10px;
  margin-top: 2px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
  box-shadow:
    0 20px 65px rgba(0,0,0,.40),
    0 0 34px rgba(255,77,222,.14),
    inset 0 1px 0 rgba(255,255,255,.12);
  overflow:hidden;

  /* mobile perf: don’t paint until near viewport */
  content-visibility: auto;
  contain-intrinsic-size: 480px;
}

.reviews__head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 6px 0 10px;
}

.reviews__title{
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 14px;
  color: rgba(255,255,255,.92);
}

.reviews__line{
  width: 54px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,77,222,.0), rgba(255,77,222,.70), rgba(31,208,255,.0));
  opacity:.9;
}

.reviews__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 0 4px 8px;
}

.quote{
  border-radius: var(--r2);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  box-shadow: 0 16px 45px rgba(0,0,0,.38);
  padding: 12px 12px;
  transition: transform .18s ease, box-shadow .18s ease;
  contain: paint;
}

.quote:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 60px rgba(0,0,0,.48);
}

.quote__stars{
  font-size: 12px;
  letter-spacing: .06em;
  opacity:.95;
}
.quote__text{
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.90);
}

.secure{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 10px;
  padding: 6px 0 2px;
  font-size: 12px;
  color: rgba(255,255,255,.78);
}
.secure__ico{ opacity:.9; }
.secure__sep{ opacity:.6; }

.foot{
  position: relative;
  z-index: 2;
  padding-top: 10px;
  text-align:center;
}
.foot__hint{
  font-size: 12px;
  color: rgba(255,255,255,.70);
}

/* ---------- Reveal (optimized) ---------- */
.reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: transform, opacity;
}
.reveal.is-in{
  opacity: 1;
  transform: translateY(0);
}

/* Ripple */
.ripple{
  position:absolute;
  border-radius: 999px;
  pointer-events:none;
  transform: translate(-50%, -50%) scale(0);
  opacity: .5;
  background: radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
  animation: ripple .65s ease-out forwards;
}
@keyframes ripple{
  to{ transform: translate(-50%, -50%) scale(18); opacity: 0; }
}

/* 2-column reviews on wider phones */
@media (min-width: 430px){
  .reviews__grid{ grid-template-columns: 1fr 1fr; }
}

/* very small screens */
@media (max-width: 360px){
  .btn__title{ font-size: 16px; }
  .btn__chev{ display:none; }
  .pill{ gap: 8px; padding: 9px 12px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .logoOrb, .logoOrb__halo, .ring, .dotOrbit, .dot--green, .loader__spinner{ animation: none !important; }
  .btn, .quote, .reveal{ transition: none !important; }
  .btn__shine, .card__shine{ display:none !important; }
}