:root{
  --bg:#ffffff;
  --text:#0b0b0f;
  --muted:#5b5f6b;
  --line:rgba(15,15,25,.10);
  --card:rgba(255,255,255,.75);
  --card2:rgba(255,255,255,.90);
  --shadow:0 20px 70px rgba(15,15,25,.12);
  --shadow2:0 8px 30px rgba(15,15,25,.10);
  --radius:22px;
  --radius2:18px;
  --accent:#ae36fc;
  --accent2:#6f2bff;
  --focus:rgba(174,54,252,.25);
  --max:1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}

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

/* Background */
.bg{position:fixed; inset:0; pointer-events:none; z-index:-1;}
.bg__grid{
  position:absolute; inset:-1px;
  background:
    radial-gradient(circle at 25% 20%, rgba(174,54,252,.12), transparent 40%),
    radial-gradient(circle at 80% 10%, rgba(111,43,255,.10), transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(174,54,252,.10), transparent 45%),
    linear-gradient(#fff, #fff);
}
.bg__blob{
  position:absolute;
  width:560px; height:560px;
  border-radius:50%;
  filter: blur(50px);
  opacity:.6;
  transform: translate3d(0,0,0);
  animation: float 12s ease-in-out infinite;
}
.bg__blob--1{left:-160px; top:-220px; background:rgba(174,54,252,.25);}
.bg__blob--2{right:-240px; top:20px; background:rgba(111,43,255,.20); animation-duration: 15s;}
.bg__blob--3{left:30%; bottom:-280px; background:rgba(174,54,252,.18); animation-duration: 18s;}

@keyframes float{
  0%,100%{transform: translate3d(0,0,0) scale(1)}
  50%{transform: translate3d(0,-16px,0) scale(1.04)}
}

/* Header */
.header{
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:saturate(140%) blur(14px);
  background: rgba(255,255,255,.65);
  border-bottom: 1px solid var(--line);
}
.header__inner{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
  padding:14px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.brand{display:flex; align-items:center; gap:10px;}
.brand__dot{width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 6px rgba(174,54,252,.12);}
.brand__text{font-weight:800; letter-spacing:.2px; font-size:18px;}
.brand__x{color:var(--accent)}
.brand__img{height:22px; width:auto; display:block;}

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

.link{font-weight:600; color:rgba(11,11,15,.75);}
.link:hover{color:rgba(11,11,15,1)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:999px;
  padding:12px 16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.7);
  box-shadow: var(--shadow2);
  font-weight:700;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  will-change: transform;
}
.btn:hover{transform: translateY(-1px); box-shadow:0 14px 36px rgba(15,15,25,.14)}
.btn:active{transform: translateY(0px) scale(.99)}
.btn--primary{
  border-color: rgba(174,54,252,.45);
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff;
}
.btn--ghost{background: rgba(255,255,255,.55)}
.btn--lg{padding:14px 20px; font-size:15px;}

/* Typography */
.eyebrow{margin:0 0 10px; font-weight:800; letter-spacing:.16em; font-size:12px; color:rgba(11,11,15,.55)}
.h1{margin:0 0 12px; font-size: clamp(34px, 4.2vw, 52px); line-height:1.05; letter-spacing:-.02em;}
.h2{margin:0 0 10px; font-size: clamp(26px, 3.0vw, 34px); line-height:1.15; letter-spacing:-.02em;}
.h3{margin:0 0 8px; font-size: 18px; line-height:1.25;}
.lead{margin:0 0 18px; color:rgba(11,11,15,.72); font-size: 16.5px; line-height:1.6;}
.sub{margin:0; color:rgba(11,11,15,.66); font-size:15.5px; line-height:1.6;}
.accent{color:var(--accent)}

/* Sections */
.main{padding-bottom: 40px;}
.hero{padding: 60px 0 40px;}
.hero__wrap{display:grid; grid-template-columns: 1.05fr .95fr; gap: 34px; align-items:center;}
.hero__ctas{display:flex; gap:12px; flex-wrap:wrap; margin: 12px 0 10px;}

.chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.chip{font-weight:700; font-size:12px; padding:8px 12px; border-radius:999px; background:rgba(174,54,252,.08); border:1px solid rgba(174,54,252,.18); color:rgba(11,11,15,.70)}

.hero__visual{position:relative;}
.helper{margin: 12px 0 0; color:rgba(11,11,15,.55); font-size:12.5px; text-align:center;}

/* Phone mock */
.phones{position:relative; height: 390px; display:grid; place-items:center;}
.phone{
  position:absolute;
  width: 230px;
  height: 470px;
  border-radius: 38px;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
  border: 1px solid rgba(15,15,25,.12);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.phone__screen{
  position:absolute; inset: 12px;
  border-radius: 30px;
  background: radial-gradient(circle at 30% 15%, rgba(174,54,252,.22), transparent 45%),
              linear-gradient(180deg, rgba(10,10,14,.92), rgba(10,10,14,.84));
  border: 1px solid rgba(255,255,255,.12);
  overflow:hidden;
}
.phone--back{
  transform: translate3d(-88px, 18px, 0) rotate(-8deg);
  filter: saturate(.95);
  opacity:.95;
  animation: drift1 8s ease-in-out infinite;
}
.phone--front{
  transform: translate3d(62px, -8px, 0) rotate(10deg);
  animation: drift2 9.5s ease-in-out infinite;
}
@keyframes drift1{
  0%,100%{transform: translate3d(-88px, 18px, 0) rotate(-8deg)}
  50%{transform: translate3d(-84px, 8px, 0) rotate(-6.5deg)}
}
@keyframes drift2{
  0%,100%{transform: translate3d(62px, -8px, 0) rotate(10deg)}
  50%{transform: translate3d(54px, -14px, 0) rotate(8.5deg)}
}

.mini-ui{padding:14px;}
.mini-ui__top{height:26px; border-radius:14px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.12); margin-bottom:12px}
.mini-ui__card{height:76px; border-radius:18px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); margin-bottom:12px}
.mini-ui__card--2{height:110px; opacity:.85}
.mini-ui__pill{height:12px; width: 70%; border-radius:999px; background:rgba(174,54,252,.55); box-shadow:0 16px 34px rgba(174,54,252,.25)}
.mini-ui--center{position:absolute; inset:0; display:grid; place-items:center; gap:12px}
.mini-ui__btn{width: 120px; height: 44px; border-radius:999px; background:linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow:0 16px 40px rgba(174,54,252,.30)}
.mx{position:absolute; inset:0; display:grid; place-items:center; font-weight:900; font-size:64px; letter-spacing:-.04em; color:#fff; opacity:.92}
.mx span{color:var(--accent)}

/* Quicknav */
.quicknav{padding: 12px 0 34px;}
.quicknav__wrap{display:grid; grid-template-columns: repeat(4, 1fr); gap:12px;}
.quicknav__item{
  background: rgba(255,255,255,.65);
  border:1px solid var(--line);
  border-radius: 18px;
  padding: 14px 14px;
  display:flex; gap:12px; align-items:center;
  box-shadow: var(--shadow2);
  transition: transform .18s ease, box-shadow .18s ease;
}
.quicknav__item:hover{transform: translateY(-2px); box-shadow: 0 18px 50px rgba(15,15,25,.12)}
.quicknav__k{font-weight:900; color:rgba(11,11,15,.35)}
.quicknav__t{font-weight:800; color:rgba(11,11,15,.78)}

/* Section head */
.section-head{margin: 54px 0 18px;}

/* Cards & grids */
.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:14px;}
.grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;}
.card{
  border:1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding: 18px;
}
.card--media{padding: 14px;}

.bullets{margin:10px 0 0; padding-left: 18px; color:rgba(11,11,15,.70); line-height:1.7}
.bullets li{margin:4px 0}

.callout{margin-top:12px; padding:12px 12px; border-radius: 16px; border:1px solid rgba(174,54,252,.22); background: rgba(174,54,252,.06); color:rgba(11,11,15,.72)}

.tagrow{display:flex; gap:8px; flex-wrap:wrap; margin-top: 12px}
.tag{font-weight:800; font-size:12px; padding:8px 10px; border-radius:999px; border:1px solid rgba(15,15,25,.10); background: rgba(255,255,255,.7); color:rgba(11,11,15,.70)}

/* Slider */
.slider{
  border: 1px solid var(--line);
  border-radius: 26px;
  background: rgba(255,255,255,.68);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.slider__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 14px 14px;
  border-bottom:1px solid var(--line);
  background: rgba(255,255,255,.72);
}
.slider__progress{flex:1; height: 10px; border-radius:999px; background: rgba(15,15,25,.06); overflow:hidden}
.slider__bar{display:block; height:100%; width: 33.34%; background: linear-gradient(135deg, var(--accent), var(--accent2)); border-radius:999px; transform-origin:left;}
.slider__controls{display:flex; align-items:center; gap:10px}

.iconbtn{
  width:40px; height:40px;
  border-radius: 999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.85);
  box-shadow: var(--shadow2);
  font-size: 22px;
  line-height:1;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.iconbtn:hover{transform: translateY(-1px)}
.iconbtn:active{transform: translateY(0px) scale(.99)}

.slider__dots{display:flex; gap:8px; align-items:center}
.dot{width:10px; height:10px; border-radius: 999px; border: 1px solid rgba(15,15,25,.18); background: rgba(15,15,25,.10); cursor:pointer}
.dot.is-active{width: 22px; background: rgba(174,54,252,.85); border-color: rgba(174,54,252,.45)}

.slider__viewport{outline:none;}
.slider__track{display:flex; width:300%; transform: translateX(0%); transition: transform .38s cubic-bezier(.2,.9,.2,1);}
.slide{width: 100%; padding: 18px; display:grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items:center;}
.kicker{margin:0 0 8px; font-weight:900; color: rgba(174,54,252,.95)}
.metrics{display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px}
.metric{display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius: 16px; border:1px solid rgba(15,15,25,.10); background: rgba(255,255,255,.75)}
.metric__n{font-weight:900}
.metric__t{font-weight:800; color: rgba(11,11,15,.72)}

.slider__footer{
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* Media frame */
.media{width:100%}
.media__frame{
  position:relative;
  width:100%;
  aspect-ratio: 16/10;
  border-radius: 22px;
  overflow:hidden;
  border:1px solid rgba(15,15,25,.12);
  background: radial-gradient(circle at 30% 20%, rgba(174,54,252,.12), transparent 45%),
              linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.02));
  box-shadow: 0 18px 50px rgba(15,15,25,.12);
}
.media__frame--wide{aspect-ratio: 16/9}
.media__placeholder{
  position:absolute; inset:0;
  display:grid; place-items:center;
  text-align:center;
  padding: 18px;
  gap: 6px;
  color: rgba(11,11,15,.65);
}
.media__title{margin:0; font-weight:900}
.media__hint{margin:0; font-size: 13px}
.media__iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
  opacity:1;
  background:transparent;
}
.media__iframe.is-ready{opacity:1}
.note{margin:10px 2px 0; color: rgba(11,11,15,.56); font-size: 12.5px}
code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px;}

/* Pills */
.logos{margin-top:14px;}
.logos__label{font-weight:900; color: rgba(11,11,15,.50); font-size: 12px; letter-spacing:.12em; text-transform: uppercase; margin: 0 0 10px}
.logos__row{display:flex; gap:10px; flex-wrap:wrap;}
.pill{padding:10px 12px; border-radius: 999px; border:1px solid rgba(15,15,25,.10); background: rgba(255,255,255,.75); font-weight:800; color: rgba(11,11,15,.72)}

/* Steps list */
.stepslist{margin:0; padding:0; list-style:none; display:grid; gap: 12px;}
.stepslist li{display:flex; gap:12px; align-items:flex-start; padding: 12px; border:1px solid rgba(15,15,25,.08); border-radius: 18px; background: rgba(255,255,255,.75)}
.stepslist__n{width:30px; height:30px; border-radius: 999px; display:grid; place-items:center; font-weight:900; background: rgba(174,54,252,.12); color: rgba(174,54,252,1); border:1px solid rgba(174,54,252,.18)}
.stepslist p{margin:6px 0 0; color: rgba(11,11,15,.65); line-height:1.5}

/* CTA */
.cta{padding: 64px 0 0;}
.cta__card{
  border:1px solid rgba(174,54,252,.22);
  background: linear-gradient(180deg, rgba(174,54,252,.08), rgba(255,255,255,.70));
  border-radius: 28px;
  box-shadow: var(--shadow);
  padding: 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.cta__actions{display:flex; gap: 12px; flex-wrap:wrap; justify-content:flex-end}

.footer{padding: 24px 0 10px;}
.footer__wrap{display:flex; justify-content:center; gap:10px; color: rgba(11,11,15,.55); font-size: 12.5px; flex-wrap:wrap}
.footer__sep{opacity:.6}

/* Tiny */
.tiny{margin:0; color: rgba(11,11,15,.55); font-size:12.5px}
.tiny--center{text-align:center; margin-top: 14px}

kbd{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 11px; padding: 3px 6px; border-radius: 8px; border:1px solid rgba(15,15,25,.15); background: rgba(255,255,255,.85)}

/* Reveal */
[data-reveal]{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}
[data-reveal].is-in{opacity:1; transform: translateY(0)}

/* Focus */
:focus-visible{outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 12px;}

/* Responsive */
@media (max-width: 980px){
  .hero__wrap{grid-template-columns: 1fr;}
  .phones{height: 360px;}
  .quicknav__wrap{grid-template-columns: 1fr 1fr;}
  .slide{grid-template-columns: 1fr;}
  .grid2{grid-template-columns: 1fr;}
  .grid3{grid-template-columns: 1fr;}
  .cta__card{flex-direction:column; align-items:flex-start}
  .cta__actions{justify-content:flex-start}
}

@media (max-width: 520px){
  .header__actions .link{display:none}
  .wrap{width:min(var(--max), calc(100% - 28px));}
  .phone{width: 210px; height: 440px;}
}

@media (prefers-reduced-motion: reduce){
  .bg__blob, .phone--back, .phone--front{animation:none}
  .slider__track{transition:none}
  *{scroll-behavior:auto}
}

/* --- Media fixes (images + square frames) --- */
.media__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.media__frame--square{ aspect-ratio: 1 / 1; border:0; box-shadow: 0 18px 60px rgba(0,0,0,.12); }



/* --- UX polish: make screenshots fit nicely in square frames --- */
.media__frame--square .media__img{
  object-fit: contain;
  background: rgba(255,255,255,0.6);
}
.media__img{
  display:block;
  opacity:1;
}
.media__frame{
  position: relative;
}



/* --- Motion & sophistication --- */
:root{
  --ease-out: cubic-bezier(.2,.8,.2,1);
}
body{
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.hero{
  position: relative;
  overflow: hidden;
}
.hero::before,
.hero::after{
  content:"";
  position:absolute;
  width:560px;
  height:560px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(174,54,252,.35), rgba(174,54,252,0) 60%);
  filter: blur(2px);
  animation: floatBlob 12s var(--ease-out) infinite alternate;
  pointer-events:none;
}
.hero::before{ left:-180px; top:-220px; }
.hero::after{ right:-220px; bottom:-260px; animation-duration: 14s; animation-delay:-4s; }

@keyframes floatBlob{
  from{ transform: translate3d(0,0,0) scale(1); opacity:.9; }
  to{ transform: translate3d(40px,30px,0) scale(1.06); opacity:1; }
}

.btn{
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s var(--ease-out);
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0px) scale(.99); }

.card, .slider{
  backdrop-filter: blur(10px);
}

[data-reveal]{
  will-change: transform, opacity;
}
.reveal--in{
  animation: revealIn .55s var(--ease-out) both;
}
@keyframes revealIn{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}

/* Improve tap targets on mobile */
.slider__nav button{
  min-width: 44px;
  min-height: 44px;
}

/* Better section rhythm */
.section-title{
  margin-bottom: 14px;
}
.section-subtitle{
  margin-top: 0;
  opacity: .78;
}

/* Media frame polish */
.media__frame{
  box-shadow: 0 20px 70px rgba(17,12,46,.16);
  border: 0;
}
.media__frame::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  pointer-events:none;
}



/* Responsive video embeds */
.video__frame, .embed{
  width:100%;
  aspect-ratio: 16/9;
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 18px 60px rgba(17,12,46,.14);
  border: 1px solid rgba(0,0,0,.06);
}
.video__frame iframe, .embed iframe{
  width:100%;
  height:100%;
  border:0;
}