:root {
  --blue:#2688eb; --violet:#7b61ff; --dark:#071c4f; --text:#14234a; --muted:#65728f;
  --line:rgba(38,136,235,.13); --card:rgba(255,255,255,.78);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--text);
  background:radial-gradient(circle at 8% 4%,rgba(123,97,255,.24),transparent 32%),
             radial-gradient(circle at 95% 10%,rgba(38,136,235,.18),transparent 30%),
             linear-gradient(180deg,#fff 0%,#f6fbff 100%);
}
a{text-decoration:none;color:inherit}
.header{
  position:sticky;top:10px;z-index:10;width:calc(100% - 24px);max-width:1040px;margin:12px auto 0;padding:12px 14px;
  display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.78);
  border:1px solid var(--line);border-radius:20px;backdrop-filter:blur(18px);box-shadow:0 10px 30px rgba(22,74,150,.08)
}
.brand{display:flex;align-items:center;gap:9px;font-size:20px;letter-spacing:-.04em;color:var(--dark)}
.mark{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,var(--violet),var(--blue));color:white;font-weight:1000}
.header-link{padding:9px 13px;border-radius:999px;background:rgba(38,136,235,.1);color:var(--blue);font-size:14px;font-weight:850}
main{width:min(100%,560px);margin:0 auto}
.hero{padding:44px 16px 28px}
.badge,.eyebrow{display:inline-flex;width:fit-content;margin:0 0 14px;padding:8px 12px;border-radius:999px;background:rgba(123,97,255,.1);color:#674cf3;font-size:13px;font-weight:900}
h1,h2,h3,p{margin-top:0}
h1{margin-bottom:18px;color:var(--dark);font-size:clamp(42px,13vw,64px);line-height:.94;letter-spacing:-.075em}
h2{margin-bottom:14px;color:var(--dark);font-size:clamp(30px,9vw,44px);line-height:.98;letter-spacing:-.06em}
h3{margin-bottom:8px;color:var(--dark);font-size:19px;line-height:1.15;letter-spacing:-.035em}
.lead,.text,.card p,.features p{color:var(--muted);font-size:17px;line-height:1.55}
.actions{display:grid;gap:10px;margin:26px 0 22px}
.btn{min-height:52px;display:flex;justify-content:center;align-items:center;padding:0 18px;border-radius:16px;font-weight:950}
.primary{background:linear-gradient(90deg,var(--violet),var(--blue));color:white;box-shadow:0 14px 30px rgba(38,136,235,.24)}
.secondary{background:white;border:1px solid var(--line);color:var(--dark)}
.mockup,.card,.features article,.story-card,.launch{
  border:1px solid var(--line);border-radius:26px;background:var(--card);box-shadow:0 14px 45px rgba(22,74,150,.08);backdrop-filter:blur(18px)
}
.mockup{margin-top:28px;padding:18px;background:radial-gradient(circle at 15% 0%,rgba(139,92,255,.14),transparent 40%),radial-gradient(circle at 90% 100%,rgba(38,136,235,.17),transparent 42%),rgba(255,255,255,.72)}
.mockup h3{font-size:23px;font-weight:1000}
.row{margin-bottom:10px;padding:14px;border-radius:20px;background:white;box-shadow:0 10px 28px rgba(22,74,150,.08)}
.row b,.row span{display:block}.row span{margin-top:4px;color:var(--muted);font-size:14px}
.muted-title{margin:18px 0 10px;color:var(--muted);font-weight:900}
.slots{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.slots button{border:0;padding:15px 8px;border-radius:16px;background:white;color:var(--dark);font-weight:950;box-shadow:0 10px 24px rgba(22,74,150,.08)}
.slots .active{background:var(--blue);color:white}
.section{padding:48px 16px 0}
.card,.features article{padding:20px;margin-top:14px}
.card ul{margin:16px 0 0;padding-left:20px;color:var(--muted);line-height:1.55;font-weight:750}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.tags span{padding:11px 13px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.76);color:var(--dark);font-size:14px;font-weight:850}
.features{display:grid;gap:14px;margin-top:20px}
.story-card{position:relative;overflow:hidden;min-height:420px;margin-top:24px;padding:24px;background:linear-gradient(180deg,white,#f3f8ff)}
.story-card:after{content:"";position:absolute;left:-30px;right:-30px;bottom:-80px;height:210px;background:linear-gradient(135deg,var(--violet),var(--blue));border-radius:50% 50% 0 0;opacity:.86}
.story-card>*{position:relative;z-index:1}
.story-card p{color:var(--blue);font-weight:950}
.story-card h3{font-size:36px}
.story-slots{display:grid;gap:10px;margin-top:34px}
.story-slots span{padding:14px;border-radius:16px;background:white;color:var(--dark);font-weight:950;box-shadow:0 10px 25px rgba(22,74,150,.08)}
.qr{position:absolute;left:24px;right:24px;bottom:24px;padding:14px;border-radius:16px;background:white;color:var(--blue);text-align:center;font-weight:950}
.launch{margin:58px 16px 24px;padding:24px;background:radial-gradient(circle at 10% 10%,rgba(139,92,255,.15),transparent 40%),radial-gradient(circle at 90% 100%,rgba(38,136,235,.18),transparent 44%),rgba(255,255,255,.78)}
.launch .btn{margin-top:22px}
.footer{width:calc(100% - 32px);max-width:560px;margin:0 auto 28px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);display:grid;gap:6px;font-size:14px}
.footer b{color:var(--dark)}
@media (min-width:760px){
  main{width:min(100%,1040px)}
  .hero{display:grid;grid-template-columns:1fr 420px;gap:40px;align-items:center;padding-top:70px}
  .actions{grid-template-columns:auto auto;justify-content:start}
  .section{padding-top:76px}
  #trust,.features{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  #trust>.eyebrow,#trust>h2,#trust>.text{grid-column:1/-1}
  .features{grid-template-columns:1fr 1fr}
  .story{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:center}
  .story>.eyebrow,.story>h2,.story>.text{grid-column:1}
  .story-card{grid-column:2;grid-row:1/5}
  .footer{max-width:1040px;grid-template-columns:auto 1fr;justify-content:space-between}
}

.features article h3 { text-align: center; }

body, h1, h2, h3, p, .card, .features article, .mockup, .row, .launch, .footer {
  text-align: center !important;
}
.card ul {
  text-align: center !important;
  padding-left: 0;
  list-style-position: inside;
}

/* Desktop hero fix: keep mobile centered, but return first screen to classic two-column layout */
@media (min-width: 760px) {
  .hero {
    text-align: left !important;
  }

  .hero h1,
  .hero .lead,
  .hero .badge {
    text-align: left !important;
  }

  .hero .badge {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .hero .actions {
    justify-items: start !important;
  }

  .hero .mockup,
  .hero .mockup h3,
  .hero .mockup p,
  .hero .row,
  .hero .row b,
  .hero .row span {
    text-align: center !important;
  }
}

/* FIX DESKTOP LAYOUT PROPERLY */
@media (min-width: 900px) {
  main {
    max-width: 1100px !important;
  }

  .hero {
    display: grid !important;
    grid-template-columns: 1.1fr 0.9fr !important;
    align-items: center;
    gap: 40px;
  }

  .hero > :first-child {
    order: 1; /* text left */
  }

  .hero > :last-child {
    order: 2; /* mockup right */
  }
}


/* WOW hero upgrade */
.hero-wow {
  position: relative;
  overflow: visible;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}

.hero-proof span {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: var(--dark);
  font-size: 13px;
  font-weight: 850;
  box-shadow: 0 10px 28px rgba(22,74,150,.06);
}

.hero-visual {
  position: relative;
  margin-top: 30px;
}

.main-mockup {
  position: relative;
  z-index: 2;
}

.glow {
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(16px);
  opacity: .75;
}

.glow-one {
  width: 210px;
  height: 210px;
  left: -48px;
  top: -44px;
  background: radial-gradient(circle, rgba(123,97,255,.32), transparent 68%);
}

.glow-two {
  width: 260px;
  height: 260px;
  right: -80px;
  bottom: -74px;
  background: radial-gradient(circle, rgba(38,136,235,.28), transparent 70%);
}

.floating-card {
  position: absolute;
  z-index: 3;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 18px 45px rgba(22,74,150,.13);
  backdrop-filter: blur(18px);
  text-align: center !important;
}

.floating-card b,
.floating-card span {
  display: block;
}

.floating-card b {
  color: var(--dark);
  font-size: 15px;
}

.floating-card span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.access-card {
  left: 10px;
  top: -18px;
}

.story-mini {
  right: 10px;
  bottom: -20px;
}

@media (max-width: 420px) {
  .floating-card {
    display: none;
  }
}

@media (min-width: 900px) {
  .hero-wow {
    min-height: 720px;
    grid-template-columns: .98fr 1.02fr !important;
    gap: 62px !important;
    padding-top: 84px !important;
  }

  .hero-copy {
    align-self: center;
    max-width: 520px;
  }

  .hero-copy h1 {
    text-align: left !important;
    font-size: clamp(64px, 6.5vw, 92px);
    line-height: .88;
  }

  .hero-copy .lead {
    text-align: left !important;
    max-width: 500px;
    font-size: 19px;
  }

  .hero-copy .badge {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .hero-copy .actions {
    justify-items: start !important;
  }

  .hero-proof {
    justify-content: flex-start;
  }

  .hero-visual {
    margin-top: 0;
    min-height: 560px;
    display: grid;
    place-items: center;
  }

  .main-mockup {
    width: min(100%, 470px);
    transform: rotate(-1.4deg);
    transition: transform .25s ease;
  }

  .main-mockup:hover {
    transform: rotate(0deg) translateY(-4px);
  }

  .access-card {
    left: 4px;
    top: 84px;
  }

  .story-mini {
    right: 4px;
    bottom: 92px;
  }

  .glow-one {
    width: 360px;
    height: 360px;
    left: -120px;
    top: 20px;
  }

  .glow-two {
    width: 420px;
    height: 420px;
    right: -140px;
    bottom: 10px;
  }
}