:root{
  --bg: #0b0f14;
  --bg2:#0f141a;
  --text:#e9ecf1;
  --muted:#aab2bf;
  --line: rgba(255,255,255,.10);
  --card: rgba(255,255,255,.04);
  --card2: rgba(255,255,255,.06);
  --accent: #a6b7ff;
  --accent2:#6ee7ff;
  --radius: 18px;
  --radius2: 24px;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --max: 1120px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(900px 400px at 12% 10%, rgba(166,183,255,.24), transparent 55%),
    radial-gradient(800px 360px at 85% 18%, rgba(110,231,255,.20), transparent 50%),
    radial-gradient(900px 420px at 30% 90%, rgba(166,183,255,.16), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
}

.skip-link{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 999;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.55);
  color: rgba(233,236,241,.92);
  transform: translateY(-140%);
  transition: transform .15s ease;
}
.skip-link:focus-visible{ transform: translateY(0); }

a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible{ outline: 2px solid rgba(166,183,255,.7); outline-offset: 3px; border-radius: 10px; }

.container{ width:min(var(--max), calc(100% - 40px)); margin:0 auto; }

/* Hero background icon cards (glassy + blurred) */
.iconStack{
  position: absolute;
  top: 120px;
  left: 70%;
  width: 420px;
  height: 420px;
  z-index: 0;
  pointer-events: none;
  transform: translateX(-50%);
}

.iconStack__card{
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.iconStack__card::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* blue-purple tint + subtle darkening */
    linear-gradient(
      135deg,
      rgba(255, 23, 108, 0.3) 0%,
      rgba(0, 255, 153, 0.4) 45%,
      rgba(255, 51, 51, 0.7) 100%
    ),
    radial-gradient(420px 260px at 30% 20%, rgba(166,183,255,.18), transparent 62%),
    radial-gradient(360px 240px at 75% 70%, rgba(110,231,255,.10), transparent 60%),
    /* keep the glassy highlight */
    radial-gradient(280px 160px at 20% 15%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  opacity: 1;
  pointer-events: none;
}

.iconStack__card--back{
  top: 100px;
  left: 0;
  transform: rotate(-9deg) scale(.96);
  opacity: .98;
}

.iconStack__card--front{
  top: 0;
  left: 100px;
  transform: rotate(6deg);
}

.iconStack__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  filter: blur(3px) saturate(1.08);
  opacity: .94;
}

.iconStack__img--back{
  filter: blur(6px) saturate(1.10) brightness(1.08);
  opacity: .95;
}

@media (max-width: 720px){
  .iconStack{
    width: 220px;
    height: 190px;
    top: 34px;
    left: 56%;
    opacity: .9;
  }
  .iconStack__card{ width: 160px; height: 160px; border-radius: 24px; }
  .iconStack__card--back{ top: 22px; }
  .iconStack__card--front{ left: 44px; }
}

/* Header (brand only) */
.header{
  position: relative;
  z-index: 10;
  backdrop-filter: none;
  background: transparent;
  border-bottom: 0;
}
.header__inner{ display:flex; align-items:center; padding: 24px 0; }
.brand{ display:flex; align-items:center; gap: 12px; user-select:none; }
.header__actions{ margin-left: auto; display:flex; gap:10px; align-items:center; }
.btn--ghost{ background: transparent; border: 1px solid rgba(255,255,255,.10); color: rgba(233,236,241,.94); padding: 6px 10px; border-radius: 10px; font-weight: 700; font-size: 13px; line-height: 1; }
.btn--ghost:hover{ background: rgba(255,255,255,.03); }
.brand__mark{ display:inline-flex; align-items:center; justify-content:center; }
.brand__mark svg{ display:block; width:28px; height:28px; }
.brand__name{
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 18px;
  line-height: 1;
  background: linear-gradient(135deg, rgba(233,236,241,.96), rgba(166,183,255,.92));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand__logo{ display:block; }
.brand__logo .orbit{
  transform-box: fill-box;
  transform-origin: center;
}
.brand__logo .orbit--1{ animation: none; }
.brand__logo .orbit--2{ animation: none; }

/* Static firefly styling: subtle opacity and no animation */
.brand__logo .firefly{ pointer-events: none; }
.brand__logo .firefly--blue{ opacity: .95; }
.brand__logo .firefly--lav{ opacity: .9; }

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

/* Hero spacing: equal gaps between subheadline, CTA, and next section */
.hero .container{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }

.hero{ position: relative; padding: 18px 0 26px; }
.hero .container{ position: relative; z-index: 1; }

.kicker{
  margin:0;
  color: rgba(233,236,241,.72);
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.price{ color: rgba(233,236,241,.92); letter-spacing: .12em; }

.h1{
  margin: 0;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.subheadline{
  margin: 0;
  color: rgba(233,236,241,.80);
  font-size: 18px;
  max-width: 60ch;
}

.prooflist{
  margin: 0;
  padding-left: 18px;
  color: rgba(233,236,241,.78);
  max-width: 70ch;
}
.prooflist li{ margin: 8px 0; }
.prooflist strong{ color: rgba(233,236,241,.94); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(233,236,241,.92);
  font-weight: 600;
  letter-spacing: .2px;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.btn:active{ transform: translateY(0px); }

.btn--primary{
  border-color: rgba(166,183,255,.55);
  background: linear-gradient(135deg, rgba(166,183,255,.22), rgba(110,231,255,.16));
}
.btn--primary:hover{ background: linear-gradient(135deg, rgba(166,183,255,.28), rgba(110,231,255,.20)); }

.btn--lg{ padding: 14px 18px; border-radius: 18px; }

.section{ padding: 54px 0; }
.section__head{ margin-bottom: 18px; }

.h2{
  margin: 0 0 10px;
  font-size: clamp(24px, 3.2vw, 34px);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.h2--big{ font-size: clamp(28px, 4vw, 40px); }

.h3{ margin: 0 0 10px; font-size: 16px; letter-spacing: .2px; }

.lede{ margin:0 0 18px; color: rgba(233,236,241,.78); font-size: 16px; max-width: 70ch; }
.lede--tight{ margin-top: 12px; margin-bottom: 0; }

.grid{ display:grid; gap: 14px; }
.grid--2{ grid-template-columns: repeat(2, 1fr); }
.grid--3{ grid-template-columns: repeat(3, 1fr); }

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

.list{ margin: 0; padding-left: 18px; color: rgba(233,236,241,.80); }
.list li{ margin: 8px 0; }

.pill{
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 12px 14px;
  color: rgba(233,236,241,.80);
  font-size: 13px;
}

.steps{ display:grid; gap: 12px; }
.step{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.step__num{
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  font-weight: 800;
  color: rgba(233,236,241,.92);
  border: 1px solid rgba(166,183,255,.35);
  background: rgba(166,183,255,.10);
}
.step__title{ font-weight: 700; letter-spacing: -.01em; margin-bottom: 4px; }
.step__text{ color: rgba(233,236,241,.74); font-size: 14px; }

.final{
  padding: 64px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(900px 400px at 10% 20%, rgba(166,183,255,.14), transparent 55%),
    radial-gradient(700px 340px at 80% 30%, rgba(110,231,255,.10), transparent 55%),
    rgba(0,0,0,.15);
}
.final__inner{ text-align: left; }

/* Offer (paywall-style) */
.offer{
  margin-top: 18px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 360px at 20% 0%, rgba(166,183,255,.12), transparent 55%),
    radial-gradient(700px 300px at 80% 10%, rgba(110,231,255,.09), transparent 55%),
    rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  padding: 18px;
}
.offer__top{ display:flex; align-items:flex-start; justify-content: space-between; gap: 18px; }
.offer__name{ font-weight: 800; letter-spacing: -.01em; font-size: 18px; }
.offer__note{ margin-top: 6px; color: rgba(233,236,241,.72); font-size: 14px; }
.offer__price{ text-align:right; }
.offer__amount{ font-weight: 900; font-size: 28px; letter-spacing: -.02em; }
.offer__meta{ margin-top: 4px; color: rgba(233,236,241,.68); font-size: 13px; }
.offer__list{
  margin-top: 14px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  color: rgba(233,236,241,.80);
  font-size: 13px;
}
.offer__list span{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.offer__cta{ margin-top: 14px; width: 100%; }
.offer__fine{
  margin-top: 10px;
  color: rgba(233,236,241,.62);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.offer__fine__icon{
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
}

@media (max-width: 520px){
  .offer__fine{ font-size: 11px; gap:6px; }
  .offer__fine__icon{ width: 14px; height: 14px; }
}

.offer__proof{
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12);
}
.offer__proofLine{
  color: rgba(233,236,241,.82);
  font-size: 13px;
}
.offer__proofLine + .offer__proofLine{ margin-top: 6px; }

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

.offer__limit{
  margin-top: 10px;
  color: rgba(233,236,241,.74);
  font-size: 13px;
}

/* Fade-in sections (progressive enhancement: visible without JS) */
.reveal{ opacity: 1; transform: none; }
.js .reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.js .reveal.is-visible{ opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .btn{ transition: none; }
  .skip-link{ transition: none; }
  .js .reveal{ transition: none; transform: none; opacity: 1; }
  .brand__logo .orbit{ animation: none; }
}

@media (max-width: 900px){
  .hero{ padding-top: 54px; }
  .grid--2{ grid-template-columns: 1fr; }
  .grid--3{ grid-template-columns: 1fr; }
}

/* Showcase: before / after screenshots */

.showcase{ margin-top: 32px; }
.showcase__heading{
  text-align: center;
  font-weight: 900;
  color: rgba(233,236,241,.94);
  font-size: clamp(18px, 2.6vw, 26px);
  margin-top: 36px;
  margin-bottom: 36px;
  letter-spacing: .02em;
}
/* Only increase space above the Screenshots & App Icon heading (keep Keywords smaller) */
.showcase > .showcase__heading{ margin-top: 56px; }
/* Slightly larger gap specifically for the Keywords heading */
#keywords .showcase__heading{ margin-top: -20px; margin-bottom: 52px; }
.showcase__labels{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 48px;
  align-items: center;
}
.showcase__labelItem{
  text-align: center;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: rgba(233,236,241,.94);
  font-size: clamp(16px, 2.4vw, 22px);
}
.showcase__head{ display:flex; justify-content:center; margin-bottom: 14px; }
.showcase__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(233,236,241,.78);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.showcase__row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.showcase__col{ min-width: 0; display:flex; flex-direction:column; align-items:center; }

.showcase__top{ display:flex; align-items:center; gap: 12px; margin-bottom: 10px; }
.showcase__avatar{
  width: 88px;
  max-width: 20vw;
  height: 88px;
  flex: 0 0 88px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  object-fit: cover;
}
.showcase__label{ font-weight: 850; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: rgba(233,236,241,.78); }

.shots{
  display:flex;
  gap: 12px;
  align-items: center;
  justify-content:center;
  width: 100%;
}
.shots picture{
  width: min(150px, calc((100% - 24px) / 3));
  flex: 0 1 auto;
}
.shots img{
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 28px rgba(0,0,0,.54);
  object-fit: contain;
  background: rgba(255,255,255,.02);
  display:block;
}

/* Inner wrapper: centered, but can shrink within the column */
.showcase__inner{
  display:block;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

/* Make the top area span the inner width and left-align the avatar */
.showcase__inner .showcase__top{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
  width:100%;
}

.showcase__titles{ display:flex; flex-direction:column; align-items:flex-start; margin-left:0; }
.showcase__app-title{ font-weight:800; font-size:15px; color: rgba(233,236,241,.94); }
.showcase__app-sub{ font-size:13px; color: rgba(233,236,241,.68); margin-top:4px; }

@media (max-width: 520px){
  .showcase__titles{ margin-left:6px; }
  .showcase__app-title{ font-size:14px; }
  .showcase__app-sub{ font-size:12px; }
}

/* Slightly reduce avatar size on small screens */
.showcase__avatar{ margin:0; }
@media (max-width: 520px){
  .showcase__avatar{ width:72px; height:72px; flex:0 0 72px; }
}

.shots--after img{
  box-shadow:
    0 12px 40px rgba(0,0,0,.55),
    0 0 0 1px rgba(166,183,255,.14),
    0 0 40px rgba(166,183,255,.12);
}

.microline{
  margin: 10px 0 0;
  color: rgba(233,236,241,.74);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}
.microline span + span::before{
  content: " • ";
  color: rgba(233,236,241,.42);
  padding: 0 8px;
}
.microline--neg{ color: rgba(233,236,241,.64); }
.microline--pos{ color: rgba(233,236,241,.88); }

.column-label{
  margin-top: 12px;
  font-weight: 900;
  letter-spacing: .18em;
  color: rgba(233,236,241,.96);
  font-size: 16px;
  text-align:center;
  text-transform: uppercase;
}

@media (max-width: 780px){
  .offer__top{ flex-direction: column; }
  .offer__price{ text-align:left; }
  .showcase__row{ grid-template-columns: 1fr; }
  .shots{ gap:10px; }
  .shots img{ max-width: 32vw; }
}

/* Offer (paywall-style) improvements */
.offer__grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 12px;
}

/* Keywords section */
.keywords__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items:start;
}

/* Centered variant used for mechanics section */
.keywords__grid--center{ grid-template-columns: 1fr; justify-items:center; }
.keywords__col--center{ display:flex; flex-wrap:wrap; gap: 14px 12px; justify-content:center; align-items:center; }
.keywords__col--center .keyword{ max-width: 36ch; }
.keywords__col{
  display:flex;
  flex-wrap:wrap;
  gap: 18px 14px;
  align-items:flex-start;
}
/* let each keyword size to its content */
.keywords__col .keyword{ flex: 0 0 auto; }
.keywords__col--left .keyword{ color: rgba(233,236,241,.68); font-size: 14px; font-weight:600; }
.keywords__col--right .keyword{ color: rgba(233,236,241,.96); font-size: 13px; font-weight:600; }
.keyword{ display:inline-block; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.04); font-size:13px; }
.keyword--muted{ color: rgba(233,236,241,.94); }
.keyword--white{ color: #ffffff; font-size:15px; font-weight:700; }
.keyword--gold{ color: #FFD166; font-weight:800; font-size:14px; }

/* More specific rules to override column-level coloring when modifier classes are present */
.keywords__col--left .keyword.keyword--white{ color: #ffffff; font-size: 18px; font-weight:700; }
.keywords__col--right .keyword.keyword--gold{ color: #FFD166; font-weight:800; font-size: 16px; }

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

/* Keywords strategy inline bullets under each column */
.keywords__strategy{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 32px;
}
.keywords__strategy-col{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
.keywords__strategy .microline{ text-align: center; margin: 0; }

/* Showcase bullets aligned under each column */
.showcase__bullets{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 32px;
}
.showcase__bullets-col{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
.showcase__bullets .microline{ text-align: center; margin: 0; }

@media (max-width: 780px){
  .keywords__strategy, .showcase__bullets{ grid-template-columns: 1fr; }
}

.offer__block{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 14px;
}

.offer__blockTitle{
  font-weight: 900;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.offer__features{
  margin: 0;
  padding-left: 18px;
  color: rgba(233,236,241,.82);
}
.offer__features li{ margin: 9px 0; }
.offer__features strong{ color: rgba(233,236,241,.92); }

.offer__delivery{ display:grid; gap: 10px; }
.offer__deliveryRow{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12);
}
.offer__deliveryKey{ color: rgba(233,236,241,.70); font-size: 13px; }
.offer__deliveryVal{ color: rgba(233,236,241,.92); font-weight: 700; font-size: 13px; text-align:right; }

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

/* Why this works */
.valueGrid{
  margin-top: 14px;
  display:grid;
  gap: 12px;
  grid-template-columns: repeat(3, 1fr);
}
.value{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 16px;
}
.value__title{ font-weight: 900; letter-spacing: -0.01em; margin-bottom: 6px; }
.value__text{ color: rgba(233,236,241,.74); font-size: 14px; line-height: 1.45; }

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

/* FAQ */
.faq{
  margin-top: 14px;
  display:grid;
  gap: 12px;
  max-width: 75ch;
}
.faq__item{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 14px 16px;
}
.faq__item summary{
  cursor: pointer;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: rgba(233,236,241,.94);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item p{
  margin: 10px 0 0;
  color: rgba(233,236,241,.74);
  font-size: 14px;
  line-height: 1.5;
}

/* Footer */
.footer{
  padding: 26px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  color: rgba(233,236,241,.62);
}
.footer__inner{ font-size: 13px; }