:root{
  color-scheme:dark;

  --bg:#07090e;
  --bg-soft:#0b0e15;
  --panel:#0e121b;
  --panel-2:#121722;

  --text:#f8fafc;
  --muted:#929cac;
  --muted-2:#687386;

  --line:rgba(255,255,255,.075);
  --line-strong:rgba(255,255,255,.13);

  --violet:#8b5cf6;
  --violet-light:#ad8aff;
  --green:#30d88a;
  --cyan:#49c6e5;

  --max:1200px;

  --radius:26px;
  --radius-lg:38px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;

  background:
    radial-gradient(
      circle at 80% 5%,
      rgba(139,92,246,.11),
      transparent 30%
    ),
    var(--bg);

  color:var(--text);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;

  pointer-events:none;

  background-image:
    linear-gradient(
      rgba(255,255,255,.015) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.015) 1px,
      transparent 1px
    );

  background-size:58px 58px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 60%
    );

  z-index:-2;
}

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

button,
a{
  -webkit-tap-highlight-color:transparent;
}

.ambient{
  position:fixed;
  border-radius:50%;
  pointer-events:none;
  filter:blur(100px);
  opacity:.22;
  z-index:-1;
}

.ambient-one{
  width:520px;
  height:520px;
  background:#6d28d9;
  top:-240px;
  right:-120px;
}

.ambient-two{
  width:380px;
  height:380px;
  background:#059669;
  left:-240px;
  top:720px;
  opacity:.08;
}


/* HEADER */

.topbar{
  position:sticky;
  top:0;
  z-index:50;

  border-bottom:1px solid rgba(255,255,255,.05);

  background:
    rgba(7,9,14,.72);

  backdrop-filter:
    blur(22px)
    saturate(150%);
}

.topbar-inner{
  width:min(
    var(--max),
    calc(100% - 40px)
  );

  height:78px;
  margin:auto;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;

  font-weight:900;
  letter-spacing:-.04em;
}

.brand-symbol{
  width:25px;
  height:25px;

  border:2px solid var(--green);
  border-radius:50%;

  display:grid;
  place-items:center;

  box-shadow:
    0 0 24px rgba(48,216,138,.25);
}

.brand-symbol span{
  width:7px;
  height:7px;
  background:var(--green);
  border-radius:50%;
}

.brand-word{
  font-size:21px;
}

.brand-word > span{
  color:var(--violet-light);
}

.desktop-nav{
  display:flex;
  gap:30px;

  color:#aeb7c5;

  font-size:14px;
  font-weight:650;
}

.desktop-nav a{
  transition:
    color .2s ease;
}

.desktop-nav a:hover{
  color:#fff;
}

.nav-cta{
  min-height:42px;
  padding:0 16px;

  display:inline-flex;
  align-items:center;
  gap:10px;

  border:1px solid var(--line-strong);
  border-radius:13px;

  background:
    rgba(255,255,255,.035);

  font-size:14px;
  font-weight:800;

  transition:
    transform .2s ease,
    background .2s ease;
}

.nav-cta:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.07);
}


/* GLOBAL */

.section,
.split-section,
.statement{
  width:min(
    var(--max),
    calc(100% - 40px)
  );

  margin:auto;
}

.section{
  padding:120px 0;
}

.section-label{
  margin:0 0 18px;

  color:var(--violet-light);

  font-size:11px;
  font-weight:900;

  letter-spacing:.19em;
}

.section-heading{
  display:grid;
  grid-template-columns:
    minmax(0,1.35fr)
    minmax(280px,.65fr);

  align-items:end;
  gap:60px;

  margin-bottom:54px;
}

.section-heading h2,
.split-copy h2,
.business-copy h2,
.pro-copy h2,
.final-cta h2{
  margin:0;

  font-size:
    clamp(42px,5vw,72px);

  line-height:.98;

  letter-spacing:-.055em;
}

.section-heading h2{
  max-width:760px;
}

.section-intro{
  margin:0;

  color:var(--muted);

  font-size:18px;
  line-height:1.65;
}


/* HERO */

.hero{
  width:min(
    var(--max),
    calc(100% - 40px)
  );

  min-height:
    calc(100vh - 78px);

  margin:auto;

  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    minmax(420px,.85fr);

  align-items:center;

  gap:72px;

  padding:
    70px 0 90px;
}

.hero-copy{
  position:relative;
  z-index:2;
}

.eyebrow{
  width:max-content;
  max-width:100%;

  display:flex;
  align-items:center;
  gap:10px;

  margin-bottom:25px;

  padding:8px 12px;

  border:
    1px solid
    rgba(48,216,138,.16);

  border-radius:999px;

  color:#a6b3c4;

  background:
    rgba(48,216,138,.035);

  font-size:12px;
  font-weight:700;
}

.live-dot{
  width:7px;
  height:7px;

  border-radius:50%;

  background:var(--green);

  box-shadow:
    0 0 13px
    rgba(48,216,138,.75);
}

.hero h1{
  max-width:720px;

  margin:0;

  font-size:
    clamp(66px,8vw,118px);

  line-height:.84;

  letter-spacing:-.075em;
}

.hero h1 span{
  display:block;

  color:transparent;

  background:
    linear-gradient(
      105deg,
      #ffffff,
      #a98cff 60%,
      #7958ff
    );

  background-clip:text;
  -webkit-background-clip:text;
}

.hero-lead{
  max-width:610px;

  margin:
    34px 0 0;

  color:#a9b3c2;

  font-size:
    clamp(18px,2vw,21px);

  line-height:1.6;
}

.hero-actions{
  display:flex;
  gap:12px;

  margin-top:35px;
}

.btn{
  min-height:52px;

  padding:
    0 22px;

  border-radius:15px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;

  font-size:14px;
  font-weight:850;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.btn:hover{
  transform:
    translateY(-2px);
}

.btn-primary{
  background:
    linear-gradient(
      135deg,
      #9367ff,
      #6544f5
    );

  box-shadow:
    0 16px 45px
    rgba(108,74,246,.22);
}

.btn-primary:hover{
  box-shadow:
    0 20px 55px
    rgba(108,74,246,.32);
}

.btn-secondary{
  border:
    1px solid
    var(--line-strong);

  background:
    rgba(255,255,255,.035);
}

.btn-light{
  color:#080a0f;

  background:#fff;
}

.hero-points{
  display:flex;
  flex-wrap:wrap;
  gap:25px;

  margin-top:29px;

  color:#778294;

  font-size:12px;
  font-weight:650;
}

.point-icon{
  color:var(--green);
  margin-right:6px;
}


/* PHONE */

.product-stage{
  position:relative;

  display:flex;
  justify-content:center;
  align-items:center;
}

.phone-shell{
  position:relative;

  width:min(100%,425px);
  height:680px;

  padding:
    25px 21px 18px;

  overflow:hidden;

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

  border-radius:42px;

  background:
    linear-gradient(
      160deg,
      #101520,
      #090c12 70%
    );

  box-shadow:
    0 45px 120px
    rgba(0,0,0,.55),
    inset 0 1px
    rgba(255,255,255,.08);
}

.phone-shell::before{
  content:"";

  width:100px;
  height:5px;

  position:absolute;
  left:50%;
  top:9px;

  transform:
    translateX(-50%);

  border-radius:99px;

  background:
    rgba(255,255,255,.13);
}

.phone-top{
  height:58px;

  display:flex;
  align-items:center;
  justify-content:space-between;
}

.phone-top > div:first-child{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.phone-kicker{
  color:#778397;
  font-size:8px;
  letter-spacing:.14em;
  font-weight:800;
}

.phone-top strong{
  font-size:16px;
}

.avatar{
  width:35px;
  height:35px;

  display:grid;
  place-items:center;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:50%;

  background:#171c26;

  color:#b9a8ff;

  font-weight:800;
}

.search-demo{
  height:50px;

  display:grid;
  grid-template-columns:
    auto 1fr auto;

  align-items:center;
  gap:12px;

  padding:
    0 12px 0 16px;

  margin:
    13px 0 17px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius:16px;

  background:#121722;

  color:#dbe1e9;

  font-size:13px;
}

.search-icon{
  font-size:20px;
  color:#778397;
}

.search-send{
  width:30px;
  height:30px;

  display:grid;
  place-items:center;

  border-radius:10px;

  background:
    linear-gradient(
      135deg,
      var(--violet),
      #6546ef
    );
}

.map-demo{
  position:relative;

  height:448px;

  overflow:hidden;

  border-radius:24px;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(48,216,138,.08),
      transparent 26%
    ),
    #0c1118;
}

.map-grid{
  position:absolute;
  inset:0;

  opacity:.42;

  background-image:
    linear-gradient(
      rgba(255,255,255,.04) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.04) 1px,
      transparent 1px
    );

  background-size:
    42px 42px;

  transform:
    perspective(500px)
    rotateX(12deg)
    scale(1.1);
}

.map-demo::after{
  content:"";

  position:absolute;

  width:280px;
  height:2px;

  top:43%;
  left:9%;

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(139,92,246,.5),
      transparent
    );

  transform:
    rotate(-31deg);
}

.you-marker{
  width:44px;
  height:44px;

  position:absolute;

  top:39%;
  left:46%;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    rgba(48,216,138,.1);

  border:
    1px solid
    rgba(48,216,138,.28);
}

.you-marker span{
  width:12px;
  height:12px;

  border-radius:50%;

  background:var(--green);

  box-shadow:
    0 0 24px
    rgba(48,216,138,.9);
}

.pulse{
  position:absolute;

  border:
    1px solid
    rgba(48,216,138,.15);

  border-radius:50%;
}

.pulse-one{
  width:140px;
  height:140px;

  left:34%;
  top:28%;
}

.pulse-two{
  width:260px;
  height:260px;

  left:18%;
  top:14%;
}

.offer-card{
  position:absolute;
  z-index:3;

  min-width:245px;

  padding:11px;

  display:grid;
  grid-template-columns:
    48px 1fr auto;

  align-items:center;
  gap:10px;

  border:
    1px solid
    rgba(255,255,255,.1);

  border-radius:16px;

  background:
    rgba(17,22,32,.93);

  box-shadow:
    0 18px 40px
    rgba(0,0,0,.32);

  backdrop-filter:blur(12px);
}

.offer-one{
  left:18px;
  bottom:88px;
}

.offer-two{
  right:15px;
  top:40px;

  min-width:230px;
}

.offer-img{
  width:48px;
  height:48px;

  border-radius:12px;
}

.offer-img-one{
  background:
    radial-gradient(
      circle at 35% 30%,
      #d89062,
      #743920 55%,
      #29170e
    );
}

.offer-img-two{
  background:
    radial-gradient(
      circle at 65% 25%,
      #7a674b,
      #403524 50%,
      #191511
    );
}

.offer-card > div:nth-child(2){
  display:flex;
  flex-direction:column;
}

.offer-card small{
  color:var(--green);
  font-size:8px;
  font-weight:800;
}

.offer-card strong{
  margin-top:2px;

  font-size:11px;
}

.offer-card span{
  margin-top:2px;

  color:#758095;
  font-size:8px;
}

.offer-card b{
  font-size:10px;
  white-space:nowrap;
}

.bottom-demo{
  height:62px;

  display:grid;
  grid-template-columns:
    repeat(5,1fr);

  align-items:center;

  margin-top:10px;
}

.bottom-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;

  color:#596577;

  font-size:8px;
}

.bottom-item span{
  font-size:14px;
}

.bottom-item.active{
  color:#a68eff;
}

.bottom-main{
  width:42px;
  height:42px;

  margin:auto;

  display:grid;
  place-items:center;

  border-radius:14px;

  background:
    linear-gradient(
      135deg,
      var(--violet),
      #5f43e6
    );

  font-size:22px;
}

.floating-chip{
  position:absolute;
  z-index:5;

  min-height:48px;

  padding:
    8px 14px 8px 9px;

  display:flex;
  align-items:center;
  gap:10px;

  border:
    1px solid
    rgba(255,255,255,.1);

  border-radius:16px;

  background:
    rgba(14,18,27,.88);

  box-shadow:
    0 25px 65px
    rgba(0,0,0,.35);

  backdrop-filter:
    blur(18px);

  color:#d8dee8;

  font-size:11px;
  font-weight:700;
}

.chip-one{
  left:-34px;
  top:110px;
}

.chip-two{
  right:-34px;
  bottom:95px;
}

.chip-icon{
  width:28px;
  height:28px;

  display:grid;
  place-items:center;

  border-radius:10px;

  color:#08130d;

  background:var(--green);
}

.chip-icon.violet{
  color:#fff;
  background:var(--violet);
}


/* STATEMENT */

.statement{
  padding:
    130px 0;

  border-top:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);
}

.statement h2{
  max-width:1080px;

  margin:0;

  font-size:
    clamp(48px,6.2vw,88px);

  line-height:1;

  letter-spacing:-.06em;

  color:#6c7480;
}

.statement h2 span{
  color:#f2f4f7;
}


/* STEPS */

.steps-grid{
  display:grid;
  grid-template-columns:
    repeat(3,1fr);

  gap:17px;
}

.step-card{
  position:relative;

  min-height:520px;

  padding:27px;

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius);

  background:
    linear-gradient(
      160deg,
      rgba(255,255,255,.036),
      rgba(255,255,255,.012)
    );

  overflow:hidden;
}

.step-number{
  color:#606b7b;

  font-size:11px;
  font-weight:800;

  letter-spacing:.14em;
}

.step-visual{
  height:235px;

  margin:
    42px 0 34px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:
    1px solid
    rgba(255,255,255,.055);

  border-radius:20px;

  background:
    #0b0f16;
}

.search-visual{
  padding:25px;
  gap:16px;

  justify-content:flex-start;
}

.search-visual > span{
  width:46px;
  height:46px;

  display:grid;
  place-items:center;

  border-radius:14px;

  background:#171d28;

  color:#a88fff;

  font-size:24px;
}

.search-visual > div{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.search-visual small{
  color:#657082;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
}

.search-visual strong{
  font-size:14px;
}

.mini-radar{
  width:165px;
  height:165px;

  position:relative;

  border:
    1px solid
    rgba(48,216,138,.11);

  border-radius:50%;

  box-shadow:
    inset
    0 0 50px
    rgba(48,216,138,.04);
}

.mini-radar::before,
.mini-radar::after{
  content:"";

  position:absolute;
  inset:22%;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius:50%;
}

.mini-radar::after{
  inset:40%;
}

.mini-radar span{
  width:10px;
  height:10px;

  position:absolute;
  left:50%;
  top:50%;

  transform:
    translate(-50%,-50%);

  border-radius:50%;

  background:var(--green);

  box-shadow:
    0 0 20px
    rgba(48,216,138,.8);
}

.mini-radar i{
  width:7px;
  height:7px;

  position:absolute;

  border-radius:50%;

  background:var(--violet);
}

.mini-radar .p1{
  top:28%;
  left:28%;
}

.mini-radar .p2{
  right:19%;
  top:48%;
}

.mini-radar .p3{
  left:34%;
  bottom:17%;
}

.action-visual{
  padding:22px;

  flex-direction:column;

  gap:10px;
}

.action-row{
  width:100%;

  padding:13px 15px;

  display:flex;
  align-items:center;
  gap:12px;

  border:
    1px solid
    rgba(255,255,255,.06);

  border-radius:13px;

  background:
    rgba(255,255,255,.025);

  font-size:12px;
}

.step-card h3{
  margin:
    0 0 10px;

  font-size:23px;
  letter-spacing:-.03em;
}

.step-card p{
  margin:0;

  color:var(--muted);

  line-height:1.62;
}


/* BUYERS */

.split-section{
  padding:
    125px 0;

  display:grid;
  grid-template-columns:
    minmax(0,.85fr)
    minmax(400px,1.15fr);

  gap:90px;

  align-items:center;

  border-top:
    1px solid
    var(--line);
}

.split-copy h2 span,
.business-copy h2 span{
  display:block;
  color:#7d8591;
}

.split-copy > p{
  max-width:560px;

  margin:
    27px 0 0;

  color:var(--muted);

  font-size:18px;
  line-height:1.65;
}

.feature-list{
  margin-top:42px;
}

.feature-list > div{
  padding:20px 0;

  display:grid;
  grid-template-columns:
    42px 1fr;

  border-top:
    1px solid
    var(--line);
}

.feature-list > div > span{
  color:#6c7481;

  font-size:10px;
  font-weight:850;
}

.feature-list strong{
  display:block;

  margin-bottom:5px;
}

.feature-list p{
  margin:0;

  color:#778294;

  font-size:13px;
}

.experience-panel{
  position:relative;

  padding:24px;

  border:
    1px solid
    var(--line-strong);

  border-radius:
    var(--radius-lg);

  background:
    linear-gradient(
      160deg,
      #111621,
      #090c12
    );

  box-shadow:
    0 50px 120px
    rgba(0,0,0,.28);

  overflow:hidden;
}

.experience-glow{
  width:300px;
  height:300px;

  position:absolute;
  top:-180px;
  right:-80px;

  background:var(--violet);

  filter:blur(120px);
  opacity:.19;
}

.experience-header{
  height:55px;

  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  color:#d9dee7;

  font-weight:750;
}

.experience-header small{
  color:var(--green);

  font-size:8px;
  letter-spacing:.14em;
}

.experience-result{
  min-height:92px;

  margin-top:10px;
  padding:15px;

  display:grid;
  grid-template-columns:
    64px 1fr auto;

  align-items:center;
  gap:15px;

  border:
    1px solid
    rgba(255,255,255,.065);

  border-radius:17px;

  background:
    rgba(255,255,255,.025);
}

.result-distance{
  width:58px;
  height:58px;

  display:grid;
  place-items:center;

  border-radius:16px;

  background:
    rgba(139,92,246,.1);

  color:#bca9ff;

  font-size:11px;
  font-weight:850;
}

.experience-result > div:nth-child(2){
  display:flex;
  flex-direction:column;
  gap:4px;
}

.experience-result strong{
  font-size:14px;
}

.experience-result span{
  color:#758195;

  font-size:10px;
}

.experience-result b{
  font-size:13px;
}

.experience-bottom{
  margin-top:22px;

  display:flex;
  align-items:center;
  gap:8px;

  color:#667184;

  font-size:10px;
}

.experience-bottom span{
  width:6px;
  height:6px;

  border-radius:50%;

  background:var(--green);
}


/* BUSINESS */

.business-section{
  position:relative;

  padding:
    145px 0;

  overflow:hidden;

  border-top:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);

  background:
    linear-gradient(
      180deg,
      rgba(139,92,246,.045),
      transparent 70%
    );
}

.business-content{
  width:min(
    var(--max),
    calc(100% - 40px)
  );

  margin:auto;

  display:grid;
  grid-template-columns:
    .9fr 1.1fr;

  align-items:center;

  gap:90px;
}

.business-glow{
  position:absolute;

  width:700px;
  height:500px;

  right:-250px;
  top:80px;

  border-radius:50%;

  background:
    rgba(139,92,246,.12);

  filter:blur(150px);
}

.business-copy{
  position:relative;
  z-index:2;
}

.business-copy > p:not(.section-label){
  max-width:550px;

  margin:
    29px 0 34px;

  color:var(--muted);

  font-size:18px;
  line-height:1.65;
}

.business-dashboard{
  position:relative;
  z-index:2;

  padding:25px;

  border:
    1px solid
    rgba(255,255,255,.1);

  border-radius:30px;

  background:
    #0b0f16;

  box-shadow:
    0 55px 130px
    rgba(0,0,0,.35);
}

.dashboard-top{
  height:70px;

  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}

.dashboard-top > div{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.dashboard-top small{
  color:#9c82ff;

  font-size:8px;
  font-weight:850;

  letter-spacing:.14em;
}

.dashboard-top strong{
  font-size:17px;
}

.status-pill{
  padding:6px 9px;

  border:
    1px solid
    rgba(48,216,138,.13);

  border-radius:999px;

  color:var(--green);

  background:
    rgba(48,216,138,.045);

  font-size:8px;
  font-weight:800;
}

.dashboard-card{
  padding:17px;

  display:flex;
  align-items:center;

  border:
    1px solid
    rgba(255,255,255,.065);

  border-radius:17px;

  background:
    rgba(255,255,255,.024);
}

.dashboard-card.highlight{
  gap:15px;

  border-color:
    rgba(139,92,246,.24);

  background:
    linear-gradient(
      120deg,
      rgba(139,92,246,.095),
      rgba(255,255,255,.02)
    );
}

.dashboard-icon{
  width:42px;
  height:42px;

  flex:0 0 auto;

  display:grid;
  place-items:center;

  border-radius:13px;

  background:
    var(--violet);

  font-weight:900;
}

.dashboard-card > div:nth-child(2){
  display:flex;
  flex-direction:column;
}

.dashboard-card small{
  color:#9b85ed;

  font-size:8px;
  font-weight:850;

  letter-spacing:.08em;
}

.dashboard-card strong{
  margin-top:4px;

  font-size:13px;
}

.dashboard-card span{
  margin-top:3px;

  color:#6f7a8d;

  font-size:9px;
}

.dashboard-columns{
  display:grid;
  grid-template-columns:
    repeat(2,1fr);

  gap:11px;

  margin-top:11px;
}

.mini-panel{
  min-height:110px;

  padding:16px;

  display:flex;
  flex-direction:column;

  border:
    1px solid
    rgba(255,255,255,.06);

  border-radius:16px;

  background:
    rgba(255,255,255,.02);
}

.mini-panel small{
  color:#596577;

  font-size:8px;
  font-weight:800;
}

.mini-panel strong{
  margin-top:15px;

  font-size:20px;
}

.mini-panel span{
  margin-top:4px;

  color:#717c8f;

  font-size:9px;
}

.dashboard-card.reservation{
  margin-top:11px;

  justify-content:space-between;
}

.dashboard-card.reservation > div:first-child{
  display:flex;
  flex-direction:column;
}

.qr-demo{
  width:55px;
  height:55px;

  padding:7px;

  display:grid;
  grid-template-columns:
    repeat(3,1fr);

  grid-template-rows:
    repeat(3,1fr);

  gap:3px;

  border-radius:8px;

  background:#fff;
}

.qr-demo i{
  background:#090b10;
}


/* PRO */

.pro-section{
  padding-top:130px;
  padding-bottom:130px;
}

.pro-card{
  position:relative;

  min-height:430px;

  padding:
    60px;

  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:60px;

  overflow:hidden;

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

  border-radius:40px;

  background:
    radial-gradient(
      circle at 82% 15%,
      rgba(255,255,255,.2),
      transparent 22%
    ),
    linear-gradient(
      135deg,
      #6c45ef,
      #8b5cf6 55%,
      #6846df
    );

  box-shadow:
    0 45px 120px
    rgba(91,59,207,.2);
}

.pro-card::after{
  content:"";

  width:500px;
  height:500px;

  position:absolute;

  right:-190px;
  top:-190px;

  border:
    1px solid
    rgba(255,255,255,.13);

  border-radius:50%;

  box-shadow:
    0 0 0 65px
    rgba(255,255,255,.025),
    0 0 0 130px
    rgba(255,255,255,.018);
}

.pro-copy{
  position:relative;
  z-index:2;

  max-width:760px;
}

.pro-badge{
  width:max-content;

  padding:7px 10px;

  margin-bottom:23px;

  border:
    1px solid
    rgba(255,255,255,.22);

  border-radius:999px;

  background:
    rgba(0,0,0,.08);

  font-size:10px;
  font-weight:900;

  letter-spacing:.14em;
}

.pro-copy p{
  max-width:640px;

  margin:
    24px 0 0;

  color:
    rgba(255,255,255,.77);

  font-size:17px;
  line-height:1.6;
}

.pro-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;

  margin-top:30px;
}

.pro-tags span{
  padding:7px 10px;

  border:
    1px solid
    rgba(255,255,255,.13);

  border-radius:999px;

  background:
    rgba(0,0,0,.07);

  font-size:10px;
  font-weight:700;
}

.pro-card .btn{
  position:relative;
  z-index:2;

  white-space:nowrap;
}


/* FINAL CTA */

.final-cta{
  width:min(
    980px,
    calc(100% - 40px)
  );

  margin:auto;

  padding:
    80px 0 150px;

  text-align:center;
}

.final-orbit{
  width:185px;
  height:185px;

  position:relative;

  margin:
    0 auto 52px;
}

.orbit{
  position:absolute;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:50%;
}

.o1{
  inset:0;
}

.o2{
  inset:22%;
}

.o3{
  inset:40%;
}

.final-dot{
  width:12px;
  height:12px;

  position:absolute;
  left:50%;
  top:50%;

  transform:
    translate(-50%,-50%);

  border-radius:50%;

  background:var(--green);

  box-shadow:
    0 0 35px
    rgba(48,216,138,.9);
}

.final-cta h2 span{
  color:#8c94a0;
}

.final-cta > p:not(.section-label){
  max-width:620px;

  margin:
    28px auto;

  color:var(--muted);

  font-size:18px;
  line-height:1.65;
}

.final-button{
  margin-top:5px;
}


/* FOOTER */

.footer{
  width:min(
    var(--max),
    calc(100% - 40px)
  );

  margin:auto;

  border-top:
    1px solid
    var(--line);
}

.footer-top{
  min-height:135px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  border-bottom:
    1px solid
    var(--line);
}

.footer-top p{
  color:#697487;
  font-size:13px;
}

.footer-grid{
  padding:
    45px 0;

  display:grid;
  grid-template-columns:
    repeat(3,1fr);

  gap:40px;
}

.footer-grid > div{
  display:flex;
  flex-direction:column;
  gap:11px;
}

.footer-grid strong{
  margin-bottom:5px;

  color:#dce1e9;

  font-size:12px;
}

.footer-grid a{
  width:max-content;

  color:#727d8e;

  font-size:12px;
}

.footer-grid a:hover{
  color:#fff;
}

.footer-bottom{
  min-height:80px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  border-top:
    1px solid
    var(--line);

  color:#4f5969;

  font-size:10px;
}


/* ANIMATION */

.reveal{
  opacity:0;

  transform:
    translateY(24px);

  transition:
    opacity .75s ease,
    transform .75s cubic-bezier(.2,.8,.2,1);
}

.reveal.visible{
  opacity:1;
  transform:none;
}


/* RESPONSIVE */

@media(max-width:1050px){

  .hero{
    grid-template-columns:
      1fr 390px;

    gap:40px;
  }

  .chip-one{
    left:-10px;
  }

  .chip-two{
    right:-10px;
  }

  .business-content{
    gap:50px;
  }

}

@media(max-width:880px){

  .desktop-nav{
    display:none;
  }

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

    min-height:auto;

    padding-top:85px;
  }

  .hero-copy{
    text-align:center;
  }

  .eyebrow{
    margin-left:auto;
    margin-right:auto;
  }

  .hero h1,
  .hero-lead{
    margin-left:auto;
    margin-right:auto;
  }

  .hero-actions,
  .hero-points{
    justify-content:center;
  }

  .product-stage{
    margin-top:25px;
  }

  .phone-shell{
    width:min(100%,430px);
  }

  .section-heading,
  .split-section,
  .business-content{
    grid-template-columns:1fr;
  }

  .section-heading{
    gap:24px;
  }

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

  .step-card{
    min-height:auto;
  }

  .split-section,
  .business-content{
    gap:60px;
  }

  .business-section{
    padding:
      110px 0;
  }

  .pro-card{
    padding:
      45px;

    flex-direction:column;
    align-items:flex-start;
  }

}

@media(max-width:600px){

  .topbar-inner{
    width:
      calc(100% - 28px);

    height:68px;
  }

  .brand-word{
    font-size:19px;
  }

  .nav-cta{
    min-height:39px;
    padding:
      0 13px;

    font-size:12px;
  }

  .section,
  .split-section,
  .statement{
    width:
      calc(100% - 28px);
  }

  .hero{
    width:
      calc(100% - 28px);

    padding:
      64px 0 75px;
  }

  .hero h1{
    font-size:
      clamp(58px,18vw,82px);
  }

  .hero-lead{
    margin-top:28px;

    font-size:17px;
  }

  .hero-actions{
    flex-direction:column;
  }

  .btn{
    width:100%;
  }

  .hero-points{
    gap:10px 18px;
  }

  .product-stage{
    margin-top:15px;
  }

  .phone-shell{
    height:610px;

    border-radius:33px;
  }

  .map-demo{
    height:390px;
  }

  .offer-two{
    right:8px;
  }

  .offer-one{
    left:8px;
  }

  .floating-chip{
    display:none;
  }

  .statement{
    padding:
      90px 0;
  }

  .statement h2{
    font-size:
      clamp(42px,13vw,65px);
  }

  .section{
    padding:
      90px 0;
  }

  .section-heading h2,
  .split-copy h2,
  .business-copy h2,
  .pro-copy h2,
  .final-cta h2{
    font-size:
      clamp(39px,12vw,59px);
  }

  .split-section{
    padding:
      90px 0;
  }

  .experience-panel{
    padding:15px;

    border-radius:26px;
  }

  .experience-result{
    grid-template-columns:
      55px 1fr;

    gap:10px;
  }

  .experience-result b{
    display:none;
  }

  .business-content{
    width:
      calc(100% - 28px);
  }

  .business-dashboard{
    padding:15px;
  }

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

  .pro-section{
    padding-top:90px;
    padding-bottom:90px;
  }

  .pro-card{
    min-height:auto;

    padding:
      35px 24px;

    border-radius:28px;
  }

  .final-cta{
    width:
      calc(100% - 28px);

    padding-bottom:110px;
  }

  .footer{
    width:
      calc(100% - 28px);
  }

  .footer-top{
    min-height:110px;

    align-items:flex-start;
    justify-content:center;
    flex-direction:column;

    gap:8px;
  }

  .footer-top p{
    margin:0;
  }

  .footer-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .footer-bottom{
    align-items:flex-start;
    justify-content:center;
    flex-direction:column;

    gap:5px;
  }

}

@media(
  prefers-reduced-motion:
  reduce
){

  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;

    transition:none !important;
    animation:none !important;
  }

  .reveal{
    opacity:1;
    transform:none;
  }

}