*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

:root{
  --red:#ff183b;
  --red2:#d8002e;
  --red3:#7c001b;

  --bg:#050506;
  --bg2:#09090c;

  --white:#f8f8fb;
  --muted:#9b9ba8;

  --line:rgba(255,255,255,.08);
}

body{
  margin:0;
  background:#050506;
  color:var(--white);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  overflow-x:hidden;
}

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

button,
input,
select,
textarea{
  font:inherit;
}

::selection{
  background:#ff183b;
  color:white;
}


/* =========================================================
   BACKGROUND
   ========================================================= */

.bgGrid{
  position:fixed;
  inset:0;
  z-index:-5;
  pointer-events:none;

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

  background-size:64px 64px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.8),
      transparent 88%
    );
}


.noise{
  position:fixed;
  inset:0;
  z-index:-2;
  opacity:.18;
  pointer-events:none;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}


.orb{
  position:fixed;
  border-radius:50%;
  z-index:-4;
  filter:blur(120px);
  pointer-events:none;
}

.orb1{
  width:600px;
  height:600px;
  top:-350px;
  left:43%;
  background:rgba(255,0,45,.18);
}

.orb2{
  width:500px;
  height:500px;
  top:45%;
  right:-350px;
  background:rgba(150,0,30,.10);
}

.orb3{
  width:500px;
  height:500px;
  bottom:-350px;
  left:-280px;
  background:rgba(255,0,45,.08);
}


/* =========================================================
   NAV
   ========================================================= */

.navWrap{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  border-bottom:1px solid rgba(255,255,255,.065);

  background:
    rgba(5,5,7,.69);

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

.nav{
  width:min(1320px,calc(100% - 48px));
  height:78px;
  margin:auto;

  display:flex;
  align-items:center;
  gap:40px;
}

.brand{
  font-size:20px;
  font-weight:1000;
  letter-spacing:-1.2px;
}

.brandWhite{
  color:#fff;
}

.brandRed{
  color:var(--red);

  text-shadow:
    0 0 20px rgba(255,24,59,.5);
}

.navLinks{
  display:flex;
  align-items:center;
  gap:34px;

  margin-left:auto;
}

.navLinks a{
  color:#bbbcc4;
  font-size:14px;
  font-weight:650;

  transition:.2s;
}

.navLinks a:hover{
  color:#fff;
}

.navActions{
  display:flex;
  gap:9px;
}

.navGhost,
.navPrimary{
  padding:11px 17px;
  border-radius:10px;
  font-size:13px;
  font-weight:800;
}

.navGhost{
  border:1px solid var(--line);
  background:#111115;
}

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

  background:
    linear-gradient(
      110deg,
      #ff2040,
      #dc0030
    );

  box-shadow:
    0 10px 32px
    rgba(230,0,45,.20);
}

.navPrimary:hover{
  filter:brightness(1.08);
}

.navMobile{
  display:none;
}

.mobilePanel{
  display:none;
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
  position:relative;

  min-height:880px;

  display:flex;
  align-items:center;

  padding:
    155px 24px
    80px;

  overflow:hidden;
}


.heroGlow{
  position:absolute;

  width:900px;
  height:500px;

  top:50px;
  left:43%;

  transform:
    translateX(-50%)
    rotate(-15deg);

  border-radius:50%;

  background:
    rgba(255,0,45,.13);

  filter:blur(130px);

  pointer-events:none;
}


.heroInner{
  width:min(1320px,100%);
  margin:auto;

  display:grid;

  grid-template-columns:
    .94fr
    1.06fr;

  gap:60px;

  align-items:center;

  position:relative;
  z-index:2;
}


/* LEFT */

.heroBadge{
  display:inline-flex;
  align-items:center;
  gap:9px;

  padding:8px 12px;

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

  border-radius:999px;

  background:
    rgba(255,23,57,.055);

  color:#ff7186;

  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;

  margin-bottom:22px;
}

.heroBadge b{
  padding:
    3px 6px;

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

  border-radius:4px;

  color:#aaaab5;

  font-size:8px;
}

.liveDot{
  width:6px;
  height:6px;

  border-radius:50%;

  background:#ff2748;

  box-shadow:
    0 0 13px
    rgba(255,24,59,.85);
}


.hero h1{
  margin:0;

  font-size:
    clamp(52px,5.4vw,80px);

  line-height:.96;

  letter-spacing:
    clamp(-4px,-.28vw,-2px);

  font-weight:950;
}

.hero h1 span{
  display:block;

  margin-top:11px;

  color:var(--red);

  text-shadow:
    0 0 45px
    rgba(255,19,55,.14);
}


.heroDesc{
  max-width:625px;

  color:#aaaab4;

  margin:
    28px 0 0;

  font-size:17px;

  line-height:1.7;
}


.heroActions{
  display:flex;
  gap:12px;

  margin-top:33px;
}


.heroPrimary,
.heroSecondary{
  min-height:52px;

  display:inline-flex;

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

  gap:11px;

  padding:
    0 20px;

  border-radius:11px;

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

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

.heroPrimary{
  background:
    linear-gradient(
      105deg,
      #ff2040,
      #d9002d
    );

  box-shadow:
    0 15px 45px
    rgba(220,0,40,.23);
}

.heroPrimary:hover{
  transform:
    translateY(-3px);

  box-shadow:
    0 20px 55px
    rgba(220,0,40,.32);
}

.heroSecondary{
  color:#dfdfe5;

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

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

.heroSecondary:hover{
  transform:
    translateY(-3px);

  border-color:
    rgba(255,255,255,.22);
}


.trustRow{
  display:flex;
  align-items:center;
  gap:21px;

  margin-top:40px;
}

.trustRow>div{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.trustRow strong{
  font-size:17px;
}

.trustRow span{
  color:#777783;
  font-size:11px;
}

.trustRow>i{
  width:1px;
  height:30px;

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


/* =========================================================
   MOCKUP
   ========================================================= */

.heroVisual{
  position:relative;
  min-height:620px;
}


.visualHalo{
  position:absolute;

  inset:
    12%
    10%
    12%;

  background:
    rgba(255,12,50,.16);

  border-radius:50%;

  filter:blur(90px);
}


.appMockup{
  position:absolute;

  width:780px;

  left:0;
  top:70px;

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

  border-radius:18px;

  overflow:hidden;

  background:#0b0b0e;

  box-shadow:
    0 50px 130px
    rgba(0,0,0,.58),
    0 0 80px
    rgba(255,0,40,.055);

  transform:
    perspective(1600px)
    rotateY(-5deg)
    rotateX(2deg);
}


.appMockup::before{
  content:"";

  position:absolute;

  left:14%;
  right:14%;
  top:0;

  height:1px;

  z-index:5;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,53,82,.85),
      transparent
    );
}


.mockTop{
  height:46px;

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

  background:#0d0d11;

  display:grid;

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

  align-items:center;

  padding:
    0 15px;
}

.mockDots{
  display:flex;
  gap:6px;
}

.mockDots i{
  width:7px;
  height:7px;

  border-radius:50%;

  background:#323238;
}

.mockTitle{
  font-size:10px;
  color:#7e7e8a;
}

.mockCredit{
  justify-self:end;

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

  color:#ff6c7f;

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

  border-radius:999px;

  padding:
    5px 8px;

  background:
    rgba(255,20,52,.055);
}


.mockBody{
  min-height:485px;

  display:grid;

  grid-template-columns:
    155px
    1fr;
}


.mockSidebar{
  padding:
    17px 11px;

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

  background:
    linear-gradient(
      180deg,
      #0a0a0d,
      #070709
    );
}


.mockLogo{
  margin:
    2px 8px
    20px;

  font-weight:1000;
  font-size:16px;
}

.mockLogo span{
  color:var(--red);
}

.mockSidebar>small{
  display:block;

  margin:
    0 8px
    7px;

  color:#54545f;

  font-size:7px;

  letter-spacing:.12em;
}


.mockMenu{
  height:34px;

  display:flex;
  align-items:center;

  gap:8px;

  margin:
    3px 0;

  padding:
    0 9px;

  border-radius:7px;

  color:#858590;

  font-size:8px;
}


.mockMenu.active{
  color:#fff;

  background:
    linear-gradient(
      90deg,
      rgba(255,24,58,.16),
      rgba(255,24,58,.025)
    );

  box-shadow:
    inset 2px 0
    #ff1d40;
}

.mockMenu.active span{
  color:#ff4963;
}

.mockDivider{
  height:1px;

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

  margin:
    11px 7px;
}

.mockMenu.dim{
  color:#62626d;
}


/* mock workspace */

.mockWorkspace{
  padding:
    26px 28px;

  position:relative;

  background:
    radial-gradient(
      circle at 80% 0,
      rgba(255,22,55,.055),
      transparent 32%
    );
}


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

.mockHead small{
  color:#ff4963;

  font-size:7px;

  font-weight:900;

  letter-spacing:.1em;
}

.mockHead h3{
  font-size:18px;

  margin:
    5px 0 0;
}

.mockHead>span{
  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius:999px;

  padding:
    5px 7px;

  color:#777783;

  font-size:7px;
}


.mockInput{
  margin-top:21px;
}

.mockInput label{
  display:block;

  margin-bottom:7px;

  font-size:8px;

  color:#9b9ba5;
}


.mockTextarea{
  min-height:72px;

  padding:
    11px;

  position:relative;

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

  border-radius:8px;

  background:#07070a;

  color:#74747f;

  font-size:8px;

  line-height:1.6;
}

.mockTextarea i{
  width:1px;
  height:12px;

  display:inline-block;

  vertical-align:-2px;

  background:#ff3350;

  animation:
    cursorBlink .8s
    infinite;
}

@keyframes cursorBlink{
  50%{opacity:0}
}


.mockOptions{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:8px;

  margin-top:9px;
}

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

  border-radius:7px;

  padding:8px;

  background:#09090c;
}

.mockOptions small{
  display:block;

  font-size:6px;

  color:#565661;

  margin-bottom:3px;
}

.mockOptions b{
  font-size:7px;

  font-weight:650;

  color:#aaaab3;
}


.mockGenerate{
  width:100%;

  height:34px;

  border:0;

  margin-top:11px;

  border-radius:7px;

  background:
    linear-gradient(
      100deg,
      #ff1c40,
      #dc0030
    );

  color:white;

  font-size:8px;

  font-weight:850;
}


.mockResult{
  margin-top:14px;

  padding:13px;

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

  border-radius:8px;

  background:
    rgba(5,5,8,.66);
}


.resultHead{
  display:flex;
  justify-content:space-between;

  color:#555560;

  font-size:6px;
}

.resultHead span{
  color:#ff4d65;

  font-weight:900;
}

.mockResult h4{
  font-size:11px;

  margin:
    12px 0 6px;
}

.mockResult p{
  max-width:440px;

  color:#71717c;

  font-size:7px;

  line-height:1.7;
}

.mockTags{
  display:flex;
  gap:5px;

  margin-top:10px;
}

.mockTags span{
  padding:
    4px 6px;

  border-radius:4px;

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

  color:#656570;

  font-size:6px;
}


/* floating chips */

.floatChip{
  position:absolute;

  z-index:6;

  display:flex;
  align-items:center;

  gap:10px;

  padding:
    10px 13px;

  min-width:190px;

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

  border-radius:11px;

  background:
    rgba(15,15,19,.81);

  backdrop-filter:
    blur(18px);

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

  animation:
    floatChip
    5s ease-in-out
    infinite;
}

.floatChip small{
  display:block;

  color:#666670;

  font-size:6px;

  letter-spacing:.08em;

  margin-bottom:3px;
}

.floatChip b{
  font-size:8px;
}

.chipIcon{
  width:30px;
  height:30px;

  display:grid;
  place-items:center;

  border-radius:8px;

  background:
    rgba(255,30,61,.10);

  color:#ff4560;
}

.greenDot{
  width:8px;
  height:8px;

  border-radius:50%;

  background:#37de78;

  box-shadow:
    0 0 18px
    rgba(55,222,120,.45);
}

.chipTop{
  top:28px;
  right:-20px;
}

.chipBottom{
  bottom:40px;
  left:-45px;

  animation-delay:-2.4s;
}

@keyframes floatChip{
  0%,100%{
    transform:
      translateY(0);
  }

  50%{
    transform:
      translateY(-10px);
  }
}


.scrollHint{
  position:absolute;

  left:50%;
  bottom:24px;

  transform:
    translateX(-50%);

  color:#50505a;

  font-size:7px;

  letter-spacing:.15em;

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:7px;
}

.scrollHint span{
  display:block;

  width:1px;
  height:28px;

  background:
    linear-gradient(
      #ff3150,
      transparent
    );
}


/* =========================================================
   MARQUEE
   ========================================================= */

.marquee{
  overflow:hidden;

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

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

  background:#09090c;
}

.marqueeTrack{
  min-width:max-content;

  display:flex;

  align-items:center;

  gap:32px;

  padding:
    17px 0;

  animation:
    marqueeMove
    28s linear
    infinite;

  color:#60606a;

  font-size:9px;

  letter-spacing:.08em;

  font-weight:800;
}

.marqueeTrack i{
  color:#ff2445;

  font-style:normal;
}

@keyframes marqueeMove{
  to{
    transform:
      translateX(-50%);
  }
}


/* =========================================================
   GLOBAL SECTIONS
   ========================================================= */

.section,
.workflowSection{
  width:min(
    1320px,
    calc(100% - 48px)
  );

  margin:auto;

  padding:
    120px 0;
}

.sectionHead{
  display:flex;

  justify-content:
    space-between;

  align-items:flex-end;

  gap:40px;

  margin-bottom:48px;
}

.sectionHead>div{
  max-width:750px;
}

.sectionEyebrow{
  margin:
    0 0
    13px;

  color:#ff3150;

  font-size:9px;

  letter-spacing:.13em;

  font-weight:900;
}

.sectionHead h2,
.whyContent h2{
  margin:0;

  font-size:
    clamp(38px,4vw,56px);

  line-height:1.04;

  letter-spacing:-2.3px;
}

.sectionHead h2 span,
.whyContent h2 span{
  display:block;

  color:#777781;
}

.sectionHead>p{
  max-width:390px;

  color:#777781;

  line-height:1.75;

  font-size:14px;
}


/* =========================================================
   FEATURES
   ========================================================= */

.featureGrid{
  display:grid;

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

  gap:13px;
}

.featureCard{
  min-height:330px;

  padding:27px;

  position:relative;

  overflow:hidden;

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

  border-radius:16px;

  background:
    linear-gradient(
      145deg,
      rgba(17,17,21,.93),
      rgba(9,9,12,.95)
    );

  transition:
    .25s ease;
}

.featureCard:hover{
  transform:
    translateY(-5px);

  border-color:
    rgba(255,47,76,.24);

  box-shadow:
    0 30px 80px
    rgba(0,0,0,.25);
}

.featureLarge{
  grid-column:
    span 2;

  min-height:410px;

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(255,20,52,.11),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      #141115,
      #09090c
    );
}

.featureWide{
  grid-column:
    span 2;

  display:grid;

  grid-template-columns:
    .8fr 1.2fr;

  gap:30px;

  align-items:center;
}

.cardGlow{
  position:absolute;

  width:300px;
  height:300px;

  right:-180px;
  top:-170px;

  border-radius:50%;

  background:
    rgba(255,23,56,.15);

  filter:blur(60px);
}

.featureIcon{
  width:40px;
  height:40px;

  display:grid;
  place-items:center;

  margin-bottom:46px;

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

  border-radius:10px;

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

  color:#b9b9c1;

  font-weight:900;
}

.featureIcon.red{
  background:
    rgba(255,23,56,.10);

  color:#ff4560;

  border-color:
    rgba(255,35,65,.18);
}

.featureIcon.green{
  color:#54df86;
}

.featureNumber{
  position:absolute;

  right:25px;
  top:25px;

  color:#35353c;

  font-size:10px;

  font-weight:900;
}

.featureCard h3{
  margin:
    0 0
    11px;

  font-size:22px;

  letter-spacing:-.6px;
}

.featureCard>p,
.featureCard>div>p{
  color:#777781;

  line-height:1.7;

  font-size:13px;

  max-width:440px;
}


/* Mini feature previews */

.miniPreview{
  position:absolute;

  right:30px;
  bottom:27px;

  width:300px;

  padding:12px;

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

  border-radius:11px;

  background:#08080b;

  transform:rotate(-2deg);
}

.miniPreview>span{
  display:block;

  color:#555560;

  font-size:7px;

  margin-bottom:6px;
}

.miniPreview>div{
  border:
    1px solid
    rgba(255,255,255,.07);

  padding:9px;

  border-radius:6px;

  color:#84848e;

  font-size:8px;
}

.miniPreview button{
  width:100%;

  margin-top:7px;

  padding:8px;

  border:0;

  border-radius:6px;

  background:
    #e80032;

  color:white;

  font-size:7px;

  font-weight:800;
}

.hookPreview{
  margin-top:25px;

  padding:
    14px;

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

  border-radius:9px;

  background:#08080b;

  color:#9999a3;

  font-size:11px;
}

.hookPreview i{
  font-size:22px;

  color:#ff3855;

  font-style:normal;
}

.timeline{
  display:flex;

  gap:8px;

  margin-top:33px;
}

.timeline span{
  flex:1;

  height:5px;

  border-radius:10px;

  background:#222228;
}

.timeline span:first-child{
  background:#ff2748;
}

.timeline span:nth-child(2){
  background:#b51331;
}

.socialStats{
  display:flex;

  gap:10px;

  margin-top:30px;
}

.socialStats span{
  padding:
    6px 8px;

  border-radius:999px;

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

  color:#757580;

  font-size:8px;
}

.resizePreview{
  margin-top:28px;

  display:flex;

  align-items:center;

  gap:10px;
}

.resizePreview span{
  padding:
    12px 14px;

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

  border-radius:8px;

  color:#888893;

  font-size:11px;
}

.resizePreview b{
  color:#484852;
}


/* history preview */

.historyPreview{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.historyPreview>div{
  display:grid;

  grid-template-columns:
    auto 1fr auto;

  align-items:center;

  gap:10px;

  padding:
    11px;

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

  border-radius:9px;

  background:#08080b;
}

.historyPreview i{
  width:7px;
  height:7px;

  border-radius:50%;

  background:#ff2747;

  box-shadow:
    0 0 12px
    rgba(255,39,71,.32);
}

.historyPreview span{
  color:#5e5e68;

  font-size:7px;
}

.historyPreview span b{
  display:block;

  color:#a0a0aa;

  font-size:8px;

  margin-bottom:3px;
}

.historyPreview small{
  color:#484852;

  font-size:6px;
}


/* =========================================================
   WORKFLOW
   ========================================================= */

.workflowSection{
  position:relative;
}

.workflowGlow{
  position:absolute;

  width:800px;
  height:260px;

  top:100px;
  left:50%;

  transform:
    translateX(-50%);

  border-radius:50%;

  background:
    rgba(255,0,40,.075);

  filter:blur(110px);

  pointer-events:none;
}

.steps{
  position:relative;

  display:grid;

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

  align-items:center;

  margin-top:55px;
}

.step{
  min-height:250px;

  position:relative;

  padding:28px;

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

  border-radius:15px;

  background:
    rgba(13,13,16,.78);
}

.stepIndex{
  position:absolute;

  top:20px;
  right:22px;

  color:#37373e;

  font-size:10px;

  font-weight:900;
}

.stepIcon{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  border-radius:11px;

  color:#ff405b;

  background:
    rgba(255,25,58,.08);

  margin-bottom:50px;
}

.step h3{
  margin:
    0 0
    10px;

  font-size:20px;
}

.step p{
  margin:0;

  color:#73737d;

  font-size:12px;

  line-height:1.7;
}

.stepLine{
  width:35px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      #303037,
      #ff2547,
      #303037
    );
}


/* =========================================================
   WHY
   ========================================================= */

.whyGrid{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:80px;

  align-items:center;
}

.whyLead{
  color:#7c7c86;

  max-width:520px;

  line-height:1.75;

  margin:
    24px 0
    33px;
}

.whyContent ul{
  list-style:none;

  padding:0;
  margin:0;

  display:flex;

  flex-direction:column;

  gap:19px;
}

.whyContent li{
  display:flex;

  gap:13px;

  align-items:flex-start;
}

.whyContent li>i{
  width:26px;
  height:26px;

  flex:
    0 0
    26px;

  display:grid;

  place-items:center;

  border-radius:7px;

  background:
    rgba(255,23,56,.08);

  color:#ff405b;

  font-size:10px;

  font-style:normal;
}

.whyContent li b{
  display:block;

  font-size:13px;

  margin-bottom:3px;
}

.whyContent li span{
  color:#696974;

  font-size:11px;
}


/* metrics */

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

  border-radius:17px;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 90% 0,
      rgba(255,21,54,.10),
      transparent 35%
    ),
    #0c0c10;

  box-shadow:
    0 35px 100px
    rgba(0,0,0,.28);
}

.metricTop{
  height:58px;

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

  padding:
    0 20px;

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

  color:#8b8b95;

  font-size:9px;
}

.online{
  display:flex;
  align-items:center;
  gap:6px;

  font-size:7px;

  color:#5fbd7d;
}

.online i{
  width:6px;
  height:6px;

  border-radius:50%;

  background:#48de7d;

  box-shadow:
    0 0 11px
    rgba(72,222,125,.5);
}

.metricMain{
  min-height:360px;

  padding:35px;
}

.metricMain>small{
  color:#575761;

  font-size:7px;

  letter-spacing:.09em;
}

.metricMain>strong{
  display:block;

  margin-top:15px;

  font-size:70px;

  line-height:1;

  letter-spacing:-4px;
}

.metricMain>strong em{
  font-size:16px;

  color:#777781;

  font-style:normal;

  letter-spacing:-.5px;
}

.metricBars{
  height:150px;

  display:flex;
  align-items:flex-end;

  gap:8px;

  margin-top:45px;
}

.metricBars i{
  flex:1;

  min-height:5px;

  border-radius:
    3px 3px
    0 0;

  background:
    linear-gradient(
      to top,
      #640018,
      #ff2345
    );

  opacity:.77;
}

.metricBottom{
  display:grid;

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

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

.metricBottom>div{
  padding:18px;

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

.metricBottom>div:last-child{
  border-right:0;
}

.metricBottom small{
  display:block;

  color:#4f4f59;

  font-size:6px;

  margin-bottom:5px;
}

.metricBottom b{
  font-size:9px;
}

.metricGreen{
  color:#4ddb7e;
}


/* =========================================================
   CTA
   ========================================================= */

.ctaSection{
  width:min(
    1320px,
    calc(100% - 48px)
  );

  margin:
    50px auto
    110px;

  position:relative;

  overflow:hidden;

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

  border-radius:23px;

  background:
    radial-gradient(
      circle at 50% -60%,
      rgba(255,23,56,.31),
      transparent 55%
    ),
    #0c0c0f;

  box-shadow:
    0 40px 100px
    rgba(0,0,0,.25);
}

.ctaGlow{
  position:absolute;

  width:500px;
  height:300px;

  top:-230px;
  left:50%;

  transform:
    translateX(-50%);

  border-radius:50%;

  background:
    #ff1238;

  filter:blur(120px);

  opacity:.28;
}

.ctaInner{
  position:relative;
  z-index:2;

  padding:
    88px 24px;

  text-align:center;
}

.ctaBadge{
  color:#ff4d65;

  font-size:9px;

  font-weight:900;

  letter-spacing:.1em;
}

.ctaInner h2{
  margin:
    15px 0
    14px;

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

  line-height:1;

  letter-spacing:-3px;
}

.ctaInner h2 span{
  color:#ff2445;
}

.ctaInner p{
  color:#797983;

  margin:
    0 auto
    28px;

  line-height:1.7;
}

.ctaButton{
  display:inline-flex;

  align-items:center;

  gap:25px;

  min-height:54px;

  padding:
    0 22px;

  border-radius:11px;

  background:
    linear-gradient(
      110deg,
      #ff2041,
      #d9002e
    );

  color:white;

  font-size:13px;

  font-weight:850;

  box-shadow:
    0 15px 50px
    rgba(220,0,40,.23);

  transition:.2s;
}

.ctaButton:hover{
  transform:
    translateY(-3px);

  box-shadow:
    0 20px 60px
    rgba(220,0,40,.33);
}


/* =========================================================
   FOOTER
   ========================================================= */

footer{
  width:min(
    1320px,
    calc(100% - 48px)
  );

  margin:auto;

  padding:
    35px 0;

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

  display:grid;

  grid-template-columns:
    1fr auto auto;

  gap:50px;

  align-items:center;
}

footer p{
  margin:
    8px 0 0;

  color:#53535d;

  font-size:10px;
}

.footerLinks{
  display:flex;

  gap:23px;
}

.footerLinks a{
  color:#74747e;

  font-size:10px;
}

footer>small{
  color:#45454e;

  font-size:9px;
}


/* =========================================================
   REVEAL
   ========================================================= */

.reveal{
  opacity:0;

  transform:
    translateY(22px);

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

.reveal.visible{
  opacity:1;

  transform:none;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1180px){

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

  .hero{
    min-height:auto;

    padding-bottom:110px;
  }

  .heroContent{
    text-align:center;

    max-width:800px;

    margin:auto;
  }

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

  .heroActions,
  .trustRow{
    justify-content:center;
  }

  .heroVisual{
    width:min(
      820px,
      100%
    );

    margin:auto;

    min-height:580px;
  }

  .appMockup{
    left:50%;

    transform:
      translateX(-50%);
  }

}


@media(max-width:900px){

  .navLinks{
    display:none;
  }

  .navActions{
    margin-left:auto;
  }

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

  .featureLarge,
  .featureWide{
    grid-column:
      span 2;
  }

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

    gap:12px;
  }

  .stepLine{
    width:1px;
    height:25px;

    justify-self:center;

    background:
      linear-gradient(
        #333,
        #ff2446,
        #333
      );
  }

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

    gap:45px;
  }

  .sectionHead{
    align-items:flex-start;
    flex-direction:column;
  }

}


@media(max-width:720px){

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

    height:66px;
  }

  .navActions{
    display:none;
  }

  .navMobile{
    display:block;

    margin-left:auto;

    width:39px;
    height:39px;

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

    border-radius:9px;

    background:#111115;

    color:white;
  }

  .mobilePanel.open{
    display:flex;

    flex-direction:column;

    padding:
      10px 20px
      20px;

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

    background:
      rgba(7,7,9,.96);
  }

  .mobilePanel a{
    padding:
      12px 0;

    color:#aaaab3;

    font-size:13px;
  }

  .hero{
    padding:
      120px 18px
      80px;
  }

  .hero h1{
    font-size:
      clamp(43px,13vw,62px);
  }

  .heroDesc{
    font-size:14px;
  }

  .heroActions{
    flex-direction:column;

    align-items:stretch;
  }

  .trustRow{
    gap:12px;
  }

  .heroVisual{
    min-height:390px;
  }

  .appMockup{
    width:620px;

    transform:
      translateX(-50%)
      scale(.61);

    transform-origin:
      top center;
  }

  .floatChip{
    display:none;
  }

  .section,
  .workflowSection{
    width:
      calc(100% - 28px);

    padding:
      82px 0;
  }

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

  .featureLarge,
  .featureWide{
    grid-column:auto;
  }

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

  .featureCard{
    min-height:auto;
  }

  .featureLarge{
    min-height:390px;
  }

  .miniPreview{
    width:
      calc(100% - 54px);
  }

  .sectionHead h2,
  .whyContent h2{
    font-size:39px;

    letter-spacing:-1.8px;
  }

  .metricMain>strong{
    font-size:60px;
  }

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

  .ctaInner{
    padding:
      70px 20px;
  }

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

    grid-template-columns:
      1fr;

    gap:20px;
  }

}


/* reduced motion */

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

  *,
  *::before,
  *::after{
    animation:none !important;

    transition-duration:
      .001ms !important;
  }

}

/* =========================================================
   XSELLER V3.2.2 — REAL BRAND + ANIMATED MASCOT
   ========================================================= */

.brand.brandImage{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  line-height:0;
}

.brand.brandImage img{
  display:block;
  width:auto;
  height:31px;
  object-fit:contain;
  filter:drop-shadow(0 0 16px rgba(255,20,50,.10));
}

footer .brand.brandImage img{
  height:38px;
}

.heroInner{
  grid-template-columns:.90fr 1.10fr;
  gap:44px;
}

.heroVisual{
  min-height:665px;
  isolation:isolate;
}

.heroVisual::after{
  content:"";
  position:absolute;
  z-index:0;
  left:-5%;
  right:-8%;
  bottom:15px;
  height:115px;
  border-radius:50%;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,20,52,.17),
      rgba(255,20,52,.035) 40%,
      transparent 72%
    );
  filter:blur(18px);
  transform:perspective(500px) rotateX(68deg);
  pointer-events:none;
}

.heroVisual .visualHalo{
  left:20%;
  right:-4%;
  opacity:.82;
}

.heroVisual .appMockup{
  z-index:2;
  width:700px;
  left:112px;
  top:84px;
  opacity:.94;
  transform:
    perspective(1600px)
    rotateY(-6deg)
    rotateX(2deg)
    scale(.96);
  box-shadow:
    0 52px 135px rgba(0,0,0,.63),
    0 0 105px rgba(255,0,40,.065);
}

.heroVisual > .floatChip{
  display:none;
}

.mascotStage{
  --px:0px;
  --py:0px;
  position:absolute;
  z-index:7;
  width:445px;
  height:610px;
  left:-118px;
  bottom:-10px;
  pointer-events:none;
  transform:translate3d(var(--px),var(--py),0);
  transition:transform .22s ease-out;
}

.mascotAura{
  position:absolute;
  z-index:0;
  width:310px;
  height:310px;
  left:72px;
  top:160px;
  border-radius:50%;
  background:rgba(255,15,48,.18);
  filter:blur(72px);
  animation:xsMascotAura 3.8s ease-in-out infinite;
}

.heroMascot{
  position:absolute;
  z-index:3;
  width:100%;
  height:auto;
  left:0;
  bottom:0;
  user-select:none;
  filter:
    drop-shadow(0 28px 40px rgba(0,0,0,.65))
    drop-shadow(0 0 28px rgba(255,25,58,.20));
  transform-origin:52% 76%;
  animation:
    xsMascotFloat
    4.5s
    cubic-bezier(.4,0,.2,1)
    infinite;
}

.mascotRing{
  position:absolute;
  z-index:1;
  left:80px;
  bottom:58px;
  border-radius:50%;
  border:1px solid rgba(255,43,70,.22);
  box-shadow:
    inset 0 0 24px rgba(255,30,60,.06),
    0 0 20px rgba(255,20,50,.07);
  transform:perspective(550px) rotateX(70deg);
  animation:xsMascotRing 8s linear infinite;
}

.ringA{
  width:295px;
  height:115px;
}

.ringB{
  width:220px;
  height:82px;
  left:118px;
  bottom:74px;
  animation-duration:6s;
  animation-direction:reverse;
}

.mascotStatus{
  position:absolute;
  z-index:8;
  right:-13px;
  top:105px;
  min-width:152px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 11px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  background:rgba(11,11,15,.78);
  backdrop-filter:blur(18px);
  box-shadow:0 18px 48px rgba(0,0,0,.35);
  animation:xsStatusFloat 4s ease-in-out infinite;
}

.mascotStatus>span{
  width:8px;
  height:8px;
  border-radius:50%;
  flex:0 0 8px;
  background:#42e783;
  box-shadow:0 0 14px rgba(66,231,131,.55);
  animation:xsOnlinePulse 1.6s ease-in-out infinite;
}

.mascotStatus small{
  display:block;
  color:#62626d;
  font-size:6px;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:2px;
}

.mascotStatus b{
  display:block;
  color:#dadade;
  font-size:8px;
}

@keyframes xsMascotFloat{
  0%,100%{
    transform:translate3d(0,0,0) rotate(-.4deg);
  }
  50%{
    transform:translate3d(0,-12px,0) rotate(.7deg);
  }
}

@keyframes xsMascotAura{
  0%,100%{
    opacity:.55;
    transform:scale(.92);
  }
  50%{
    opacity:.95;
    transform:scale(1.08);
  }
}

@keyframes xsMascotRing{
  from{
    transform:
      perspective(550px)
      rotateX(70deg)
      rotateZ(0deg);
  }
  to{
    transform:
      perspective(550px)
      rotateX(70deg)
      rotateZ(360deg);
  }
}

@keyframes xsStatusFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-7px);}
}

@keyframes xsOnlinePulse{
  0%,100%{
    opacity:.65;
    box-shadow:0 0 7px rgba(66,231,131,.35);
  }
  50%{
    opacity:1;
    box-shadow:0 0 18px rgba(66,231,131,.78);
  }
}

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

  .heroVisual{
    width:min(900px,100%);
    min-height:640px;
  }

  .heroVisual .appMockup{
    left:54%;
    width:700px;
    transform:
      translateX(-50%)
      perspective(1600px)
      rotateY(-4deg)
      rotateX(2deg)
      scale(.96);
  }

  .mascotStage{
    width:405px;
    height:560px;
    left:-15px;
    bottom:-5px;
  }
}

@media(max-width:720px){
  .brand.brandImage img{
    height:26px;
  }

  .heroVisual{
    min-height:465px;
  }

  .heroVisual .appMockup{
    width:620px;
    left:67%;
    top:48px;
    opacity:.78;
    transform:
      translateX(-50%)
      scale(.58);
    transform-origin:top center;
  }

  .mascotStage{
    width:270px;
    height:385px;
    left:-28px;
    bottom:20px;
  }

  .mascotStatus{
    display:none;
  }

  .ringA{
    width:190px;
    height:70px;
    left:42px;
    bottom:38px;
  }

  .ringB{
    width:145px;
    height:52px;
    left:66px;
    bottom:49px;
  }
}

@media(max-width:430px){
  .heroVisual{
    min-height:420px;
  }

  .mascotStage{
    width:235px;
    height:340px;
    left:-36px;
    bottom:18px;
  }

  .heroVisual .appMockup{
    left:73%;
    opacity:.68;
  }
}

@media(prefers-reduced-motion:reduce){
  .heroMascot,
  .mascotAura,
  .mascotRing,
  .mascotStatus,
  .mascotStatus>span{
    animation:none !important;
  }
}