/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{    font-family: Mona Sans, Inter, Arial, sans-serif;margin:0;color:rgba(33, 31, 84, 0.9);line-height:1.4;background: rgb(249, 249, 249)}
.container{max-width:1636px;margin:0 auto;padding:0 24px;background: white;margin: 0 auto;}
/* .container .features-grid{max-width:1636px;margin:0 auto;padding:0 24px;background: red;margin: 0 auto;} */

/* Header */
.site-header{background:linear-gradient(180deg,rgba(255,255,255,0.95),rgba(255,255,255,0.9));position:sticky;top:0;z-index:40;border-bottom:1px solid rgba(20,20,30,0.03);margin: 16px 0px;border-radius: 50%;}
.header-grid{display:flex;align-items:center;gap:20px;padding:12px 24px;justify-content: center;border-radius: 15px;margin: 0 24px;}
.brand .logo{width: 190px;}
.main-nav{display:flex;gap:20px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin-left:0}
.main-nav a{color:rgba(33, 31, 84, 1);text-decoration:none;font-weight:600;padding: 0 8px;line-height: 1.75;}
.auth{margin-left:auto;display:flex;gap:10px}
.mobile-toggle{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;padding:8px;margin-left:8px;cursor:pointer;position:relative;z-index:41}
.mobile-toggle .bar{display:block;width:22px;height:2px;background:#211f54;border-radius:2px;margin:5px 0;transition:transform .2s ease,opacity .2s ease}
.mobile-menu{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .25s ease;z-index:40}
.mobile-menu .backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.35)}
.mobile-menu .panel{position:absolute;right:0;top:0;height:100%;width:82%;max-width:360px;background:#fff;box-shadow:-8px 0 24px rgba(0,0,0,0.1);padding:20px 20px 28px;display:flex;flex-direction:column;gap:12px;transform:translateX(100%);transition:transform .25s ease}
.mobile-menu .panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.mobile-menu .logo.small{width:120px;height:auto}
.mobile-menu a{color:#211f54;text-decoration:none;padding:10px 6px;border-radius:8px}
.mobile-menu a:hover{background:#f5f5fb}
.mobile-menu .close{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer;color:#211f54;padding:4px}
.mobile-menu .panel-actions{margin-top:auto;display:flex;gap:10px}
/* open state */
body.menu-open{overflow:hidden}
body.menu-open .mobile-menu{opacity:1;pointer-events:auto}
body.menu-open .mobile-menu .panel{transform:translateX(0)}
.btn{display:inline-block;padding:9px 23px;border-radius:999px;text-decoration:none;font-weight:600;font-size:14px;transition:all 0.2s ease;}
.btn-outline{border:2px solid #211f54;color:white;background:#211f54}
.btn-outline:hover{background:#2a2765;border-color:#2a2765}
.btn-primary{background:#ff5b50;color:white;border:2px solid transparent;padding: 8px 60px;}
.btn-primary1{background:#ff5b50;color:white;border:2px solid transparent;padding: 9px 23px;}
.btn-primary:hover{background:#ff4539;transform:translateY(-1px);box-shadow:0 8px 24px rgba(255,91,80,0.3)}
.btn-ghost{background:#211f54;color:white;border:2px solid #211f54}
.btn-ghost:hover{background:#2a2765}
.large{padding:9px 20px;font-size:14px}

/* Hero */
.hero{
  padding:0px 0 80px;
  background: transparent;
  position: relative;
  overflow: hidden;
  margin: 0 24px;

}
.hero::before{
  display: none;
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(255, 200, 230, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.hero::after{
  content: '';
  position: absolute;
  bottom: -40%;
  left: -15%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(200, 220, 255, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.hero-grid{
  display:grid;
  border-radius: 24px;
  grid-template-columns:1fr 520px;
  gap:60px;
  align-items:center;
  position: relative;
  z-index: 1;
  padding-left: 96px;
padding-right: 96px;
}
.hero-left h1{
          font-size: 3.75rem;
  font-weight:800;
  margin:0 0 24px;
  line-height:1.1;
  letter-spacing:-0.02em;
}
.hero-left h1 .the{
      color: rgba(33, 31, 84, 1);
  font-weight:800;
}
.hero-left h1 .accent{
  color:#ff5b50;
  font-weight:800;
}
.hero-left h1 .job{
      color: rgba(33, 31, 84, 1);
  font-weight:800;
}
.hero-left h1 .platform{
  color:#ff5b50;
  font-weight:800;
}
.hero-left h1 .for{
      color: rgba(33, 31, 84, 1);
  font-weight:800;
}
.hero-left h1 .service{
      color: rgba(33, 31, 84, 1);
  font-weight:800;
}
.lead{
  color: rgba(33, 31, 84, 0.9);
  font-size: 1.25rem;
  margin-bottom:24px;
  line-height:1.6;
  /* max-width:520px; */
  font-weight: 600;
}
.hero-cta{
  display:flex;
  gap:16px;
  align-items:center;
  margin-bottom:0;
}

.hero-right{
  position: relative;
}
.hero-right .device-mock{
  background:none;
  border-radius:32px;
  padding:0;
  /* display:flex; */
  justify-content:center;
  align-items:center;
  box-shadow:none;
  overflow: hidden;
  width: 100%;
  height: 720px; /* crop the phone vertically on desktop */
}
.hero-right img{
  width:100%; /* zoom slightly so edges are cropped */
  height:auto;
  -o-object-fit:cover;
     object-fit:cover;
  display:block;
}

.stats-cards{
  display: flex;
  gap: 24px;
}

/* Stats & Features Section */
.stats-features{
  padding:0;
  background:#F9F9F9;
}
.stats-features-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  align-items:start;
  margin: 0 25px;
}
.stat-card{
  /* display:flex; */
  gap:20px;
  align-items:flex-start;
  background:white;
  padding:100px 20px;
  border-radius: 24px;
}
.stat-icon{
  width:56px;
  height:56px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.stat-card img , .feature-icon-item img{
  width: 52px;
}
.stat-icon.pink{
  background:#ffe8ed;
  color:#ff5b70;
}
.stat-content{
  display: flex;
  gap:15px;

}

.stat-content h3{
  font-size:32px;
  font-weight:600;
      color: rgba(33, 31, 84, 1);
  margin:0 0 8px;
}
.stat-content p{
  font-size:15px;
  color:#5a5872;
  margin:0;
  line-height:1.6;
}
.features-icons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:start;
  background:white;
  padding:40px 24px;
  border-radius: 24px;
}
.feature-icon-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:0;
  border-radius:0;
  background:transparent;
  font-weight:600;
  font-size:16px;
      color: rgba(33, 31, 84, 1);
}
.feature-icon-circle{
  width:56px;
  height:56px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:white;
}
.feature-icon-item.green .feature-icon-circle{
  background:#c8e6c9;
  color:#2d5f3f;
}
.feature-icon-item.cyan .feature-icon-circle{
  background:#b3e5f0;
  color:#1f5f6f;
}
.feature-icon-item.coral .feature-icon-circle{
  background:#ffcccc;
  color:#ff5b50;
}
.feature-icon-item.purple .feature-icon-circle{
  background:#d4c5f9;
  color:#6b4fd4;
}
.feature-icon-item.purple2 .feature-icon-circle{
  background:#c9b8f7;
  color:#7b5fd4;
}
.feature-description{
  grid-column:1/-1;
  font-size: 1.1667rem;
  /* color:#5a5872; */
  margin:0;
  padding:0;
  line-height:1.6;
  margin-top:-8px;
}

/* Features */
.features{
  padding:80px 0;
  background:#F9F9F9;
}
.features-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start;
  padding-left:96px;
  padding-right:96px;
  background-color: #F9F9F9;
}
.features-phone{
  position:sticky;
  top:100px;
}
.phone-slider{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}
/* soft circle behind the phone */
.phone-slider::before{
  content:"";
  position:absolute;
  width:680px;
  height:680px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#EFEFEF;
  z-index:0;
}
.phone-mockup{
  width:100%;
  max-width:350px;
  background:transparent;
  /* border-radius:32px; */
  padding:0;
  display:none;
  justify-content:center;
  align-items:center;
  /* box-shadow:0 24px 80px rgba(150, 100, 200, 0.2); */
  overflow:hidden;
  opacity:0;
  transition:opacity 0.5s ease-in-out;
  position:relative;
  z-index:1;
}
.phone-mockup.active{
  display:flex;
  opacity:1;
}
.phone-mockup img{
  width:100%;
  height:auto;
  display:block;
}
.slider-dots{
  position:absolute;
  left:21%;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:2;
}
.slider-dots .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(200, 200, 210, 0.5);
  cursor:pointer;
  transition:all 0.3s ease;
}
.slider-dots .dot.active{
  background:#ff5b50;
  height:32px;
  border-radius:4px;
}
.slider-dots .dot:hover{
  background:rgba(255, 91, 80, 0.7);
}
.features-content h2{
  font-size: 2.0243rem;
  font-weight:600;
  color: rgba(33, 31, 84, 1);
  margin:0 0 20px;
  line-height:1.2;
  text-align: center;
}
.features-subtitle{
  font-size: 1.1667rem;
  color: rgba(33, 31, 84, 1);
  line-height:1.7;
  margin:0 0 48px;
  text-align: center;
}
.feature-list-detailed{
  display:flex;
  flex-direction:column;
  gap:32px;
}
.feature-item{
  display:flex;
  gap:20px;
  align-items:center;
  background-color: white;
  padding: 20px;
  border-radius: 24px;
}
.feature-item img{
    width: 80px;
}
.feature-icon{
  width:64px;
  height:64px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.feature-icon img{
  width:32px;
  height:32px;
}
.feature-icon.coral{
  background:#ffd9d4;
}
.feature-icon.cyan{
  background:#b3e5f0;
}
.feature-icon.green{
  background:#c8e6c9;
}
.feature-icon.purple{
  background:#c9b8f7;
}
.feature-icon.purple2{
  background:#d4c5f9;
}
.feature-text h3{
  font-size: 1.4993rem;
  font-weight:700;
  color:#211f54;
  margin:0 0 8px;
}
.feature-text p{
  font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.43;
    color: rgba(33, 31, 84, 0.9);
}
.feature-link{
  color:#FF5B50;;
  text-decoration:none;
  font-weight: 700;
    font-size: 1rem;
  display:inline-block;
}
.feature-link:hover{
  text-decoration:underline;
}
.view-all-link{
  display:inline-block;
  margin-top:32px;
  font-size:16px;
  color:#ff5b50;
  text-decoration:none;
  font-weight:600;
}
.view-all-link:hover{
  text-decoration:underline;
}

/* Purple section */
.purple-cta{
  background:linear-gradient(180deg,#453AD1,#3f2ab8);
  color:#fff;
  /* padding:40px 0px; */
  margin-top:0;
  position:relative;
  overflow:hidden;
  min-height: 1000px;
}
.purple-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
  padding:24px;
  max-width:1636px;
  margin:0 auto;
}
.purple-left{
  background-color: #302892;
  padding: 24px;
  border-radius: 20px;
}
.purple-left h2{
  font-size: 3rem;
  font-weight:700;
  margin:0 0 24px;
  line-height:1.2;
  letter-spacing:-0.01em;
}
.purple-left .muted{
  opacity:1;
  color:rgba(255,255,255,0.95);
  font-size: 1.1667rem;
  font-weight: 400;
  line-height:1.7;
  max-width:580px;
  margin:0;
}
.mini-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin:0;
max-width:1636px;
  margin:0 auto;
  padding:24px;
}
.mini{
  background:rgba(17,12,66,0.6);
  -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
  padding:28px 32px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.1);
  text-align:left;
}
.mini:last-child{
  border-right:none;
}
.mini strong{
  display:block;
  font-size: 1.4993rem;
  font-weight:600;
  margin-bottom:8px;
  line-height:1;
  color:#fff;
}

.mini p{
    font-weight: 400;
    font-size: 0.875rem;
}
 
.mini span{
  display:block;
  font-size:13px;
  line-height:1.5;
  opacity:0.9;
  color:rgba(255,255,255,0.9);
}
.purple-right{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.globe{
  width:520px;
  height:520px;
  position:relative;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.03) 0%, transparent 70%);
}
.globe::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle 2px at 20% 30%, rgba(255,255,255,0.4) 0%, transparent 2px),
    radial-gradient(circle 2px at 25% 35%, rgba(255,255,255,0.3) 0%, transparent 2px),
    radial-gradient(circle 2px at 30% 40%, rgba(255,255,255,0.35) 0%, transparent 2px),
    radial-gradient(circle 2px at 35% 45%, rgba(255,255,255,0.25) 0%, transparent 2px),
    radial-gradient(circle 2px at 40% 50%, rgba(255,255,255,0.3) 0%, transparent 2px),
    radial-gradient(circle 2px at 45% 55%, rgba(255,255,255,0.35) 0%, transparent 2px),
    radial-gradient(circle 2px at 50% 60%, rgba(255,255,255,0.4) 0%, transparent 2px),
    radial-gradient(circle 2px at 55% 65%, rgba(255,255,255,0.3) 0%, transparent 2px),
    radial-gradient(circle 2px at 60% 70%, rgba(255,255,255,0.35) 0%, transparent 2px),
    radial-gradient(circle 2px at 65% 50%, rgba(255,255,255,0.25) 0%, transparent 2px),
    radial-gradient(circle 2px at 70% 45%, rgba(255,255,255,0.3) 0%, transparent 2px),
    radial-gradient(circle 2px at 75% 40%, rgba(255,255,255,0.35) 0%, transparent 2px),
    radial-gradient(circle 2px at 80% 35%, rgba(255,255,255,0.4) 0%, transparent 2px),
    radial-gradient(circle 2px at 15% 60%, rgba(255,255,255,0.3) 0%, transparent 2px),
    radial-gradient(circle 2px at 18% 65%, rgba(255,255,255,0.25) 0%, transparent 2px),
    radial-gradient(circle 2px at 22% 70%, rgba(255,255,255,0.35) 0%, transparent 2px),
    radial-gradient(circle 2px at 28% 75%, rgba(255,255,255,0.3) 0%, transparent 2px),
    radial-gradient(circle 2px at 32% 80%, rgba(255,255,255,0.25) 0%, transparent 2px),
    radial-gradient(circle 2px at 48% 25%, rgba(255,255,255,0.35) 0%, transparent 2px),
    radial-gradient(circle 2px at 52% 30%, rgba(255,255,255,0.4) 0%, transparent 2px),
    radial-gradient(circle 2px at 58% 35%, rgba(255,255,255,0.3) 0%, transparent 2px),
    radial-gradient(circle 2px at 62% 28%, rgba(255,255,255,0.35) 0%, transparent 2px),
    radial-gradient(circle 2px at 68% 32%, rgba(255,255,255,0.25) 0%, transparent 2px),
    radial-gradient(circle 2px at 72% 38%, rgba(255,255,255,0.3) 0%, transparent 2px),
    radial-gradient(circle 2px at 78% 42%, rgba(255,255,255,0.35) 0%, transparent 2px),
    radial-gradient(circle 2px at 38% 22%, rgba(255,255,255,0.3) 0%, transparent 2px),
    radial-gradient(circle 2px at 42% 18%, rgba(255,255,255,0.25) 0%, transparent 2px),
    radial-gradient(circle 2px at 85% 55%, rgba(255,255,255,0.4) 0%, transparent 2px),
    radial-gradient(circle 2px at 88% 60%, rgba(255,255,255,0.3) 0%, transparent 2px),
    radial-gradient(circle 2px at 12% 52%, rgba(255,255,255,0.35) 0%, transparent 2px);
  background-size:100% 100%;
  background-repeat:no-repeat;
  border-radius:50%;
  opacity:0.8;
}
.globe::after{
  content:'';
  position:absolute;
  inset:10%;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:
    0 0 60px rgba(100,80,255,0.3),
    inset 0 0 60px rgba(100,80,255,0.2);
}

/* Integrations */
.integrations{
  padding:0;
  background:#f9f9f9;
}
.integrations-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:150px;
  align-items:center;
  padding: 120px 42px;
}
.logos{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px 64px;
  align-items:center;
}
.logos img{
  height:auto;
  width:100%;
  max-width:180px;
  opacity:1;
}
.logos img.logo-center{
  grid-column:2/3;
}
.integrations-content h2{
  font-size:48px;
  font-weight:800;
      color: rgba(33, 31, 84, 1);
  margin:0 0 24px;
  line-height:1.2;
}
.integrations-content p{
  font-size:18px;
     color: rgba(33, 31, 84, 1);
  line-height:1.7;
  margin:0;
}

/* Testimonials */
.testimonials{
  padding:80px 0;
  background:#f9f9f9;
}
.testimonials .container{
  padding-left:96px;
  padding-right:96px;
}
.testimonials h2{
  font-size: 2.0243rem;
  color: rgba(33, 31, 84, 1);
  margin:0 0 16px;
  text-align:center;
 line-height: 1.235;
    font-weight: 600;
    margin-bottom: 16px;
}
.testimonials-subtitle{
  font-size:18px;
  color: rgba(33, 31, 84, 1);
  text-align:center;
  margin:0 0 48px;
  font-weight: 400;
}
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  margin: 48px 24px;
}
.card{
  background:#fff;
  padding:32px;
  border-radius:16px;
  box-shadow:0 2px 12px rgba(16,12,34,0.06);
  display:flex;
  flex-direction:column;
  gap:20px;
  margin: 0;
}
.card h3{
  font-size: 1.25rem;
  font-weight:600;
  color: rgba(33, 31, 84, 1);
  margin:0;
  line-height:1.6;
}
.card blockquote{
     margin: 0;
    font-family: Mona Sans, Inter, Arial, sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.43;
    color: rgba(33, 31, 84, 0.9);
    white-space: pre-line;
}
.testimonial-author{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:auto;
}
.author-avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  -o-object-fit:cover;
     object-fit:cover;
}
.author-name{
  font-size: 1.1667rem;
  font-weight:400;
  color: rgba(33, 31, 84, 1);
  margin-bottom:2px;
}
.author-company{
  font-size:14px;
  color: rgba(33, 31, 84, 1);
}


/* Footer */
.site-footer{padding:64px 0 24px;background:#fff;border-top:1px solid rgba(18,12,60,0.06)}
/* Newsletter */
.newsletter-section{margin:0 auto;max-width:800px;}
.newsletter-block{display:flex;flex-direction:column;align-items:end;gap:18px;margin-bottom:32px;max-width:1636px;}
.newsletter-block h3{font-size:32px;margin:0 auto;color:#211f54;font-weight:700}
.newsletter-form.large{display:flex;gap:12px;width:100%;max-width:720px}
.newsletter-form.large input{flex:1;height:56px;border:1px solid #e8e6f5;border-radius:999px;padding:0 20px;font-size:16px}
.newsletter-form.large .btn{height:56px;border-radius:999px;padding:0 24px}
/* Links */
.footer-links{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:start;margin:80px auto;max-width:1150px}
.footer-links .col h5{margin:0 0 8px;    color: rgba(33, 31, 84, 1);;text-transform:uppercase;letter-spacing:.04em;font-size:12px}
.footer-links .col a{display:block;    color: rgba(33, 31, 84, 1);;text-decoration:none;margin:8px 0;font-size:14px}
.footer-links .col a:hover{text-decoration:underline}
/* Extras row */
.footer-extras{display:flex;align-items:center;padding: 20px 24px; margin-top:24px;border-top:1px solid rgba(18,12,60,0.06)}
.store-badges{display:grid;gap:16px;align-items:center}
.store-badges img{height:44px;width: 130px;}
.status-widgets{display:flex;gap:16px;align-items:center;margin: 0 auto;}
.trust-btn{display: flex;
        border: 1px solid #00b67a;
    border-radius: 2px;
    padding: 15px;
    text-decoration: none;
    color: #1b1b1b;
    font-size: 18px;
    margin: 0 auto;
    width: -moz-fit-content;
    width: fit-content;
    text-align: center;}
.trust-btn .star{color:#16c25e;margin:0 4px}
.uptime-pill{display:flex;align-items:center;gap:8px;background:#eef8ef;border-radius:24px;padding:8px 12px;font-size:12px;color:#2b5d2f}
.uptime-pill .up{font-weight:700}
.uptime-pill .meta{color:#6a7a6c}
.uptime-pill .dot{color:#16c25e}
.uptime-pill .state{font-weight:600}
/* Bottom */
.footer-bottom{padding:18px 0;margin-top:18px;text-align:center;color:#7a748d}
.up{
  margin: 0 auto;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: 513px;
  width: 188px !important;
  height: 48px !important;

}

  .feature-icon-group{    display: grid
;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
    background: white;
    padding: 40px 24px;
    border-radius: 24px}


/* Responsive */
@media (max-width:1000px){
  .main-nav{display:none}
  .auth{display:none}
  .mobile-toggle{display:block}
.header-grid{display:flex;align-items:center;gap:20px;padding:12px 24px;justify-content: space-between;}

  .hero-grid{grid-template-columns:1fr;gap:40px;padding: 42px;}
  .hero-left h1{font-size:56px}
  .stats-features-grid{grid-template-columns:1fr;gap:48px;padding-left:0px;padding-right:0px}
  .features-grid{grid-template-columns:1fr;gap:40px;padding-left:16px;padding-right:16px}
  .features-phone{position:relative;top:0;order:-1;display: none;}
  .phone-mockup{max-width:300px;margin:0 auto}
  .hero-right .device-mock{height:560px;display: none;}
  .hero-right img{width:110%;display: none;}
  .features-content h2{font-size:36px}
  .integrations-grid{grid-template-columns:1fr;gap:48px;padding-left:48px;padding-right:48px}
  .integrations-content h2{font-size:36px}
  .testimonials .container{padding-left:48px;padding-right:48px}
  .testimonials h2{font-size:36px}
  .feature-list{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:1fr;gap:24px}
  /* Phone circle/dots scale for tablet */
  .phone-slider::before{width:560px;height:560px}
  .slider-dots{left:12px}
  /* Purple section tablet */
  .purple-grid{grid-template-columns:1fr;gap:40px;padding:48px 48px 40px}
  .purple-left h2{font-size:36px}
  .purple-left .muted{font-size:15px}
  .mini-stats{grid-template-columns:1fr;gap:16px;padding:0 48px 48px}
  .mini{padding:24px 20px}
  .mini strong{font-size:24px}
  .mini span{font-size:11px}
  .purple-right{display:none}
  .logos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 64px;
    align-items: center;
    order: 1;
    margin-top: 45px;
}
    .footer-links {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        align-items: start;
        margin: 0 auto 32px;
        max-width: 643px;        
    }
    .footer-extras {
    display: flex
;
    align-items: center;
    padding: 20px 24px;
    margin-top: 24px;
    border-top: 1px solid rgba(18, 12, 60, 0.06);
    max-width: 643px;
}
.site-footer {
    padding: 14px 0 24px;
    background: #fff;
    border-top: 1px solid rgba(18, 12, 60, 0.06);
}
.card {
    background: #fff;
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(16, 12, 34, 0.06);
    display: flex
;
    flex-direction: column;
    gap: 20px;
    margin: 0 24px;
}
    
  .up{
  margin: 0 auto;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: 0px;
  width: 188px !important;
  height: 48px !important;

}
.up-class{
display: block;
}

.purple-cta {
    background: linear-gradient(180deg, #453AD1, #3f2ab8);
    color: #fff;
    /* padding: 40px 0px; */
    margin-top: 0;
    position: relative;
    overflow: hidden;
    min-height: 1000px;
    align-content: center;
}

  #btn-primary {
    background: #ff5b50;
    color: white;
    border: 2px solid transparent;
    padding: 8px 20px;
    width: -webkit-fill-available;
    margin-bottom: 40px;
}

.newsletter-block {
    display: flex
;
    flex-direction: column;
    align-items: end;
    gap: 18px;
    /* margin-bottom: 32px; */
    margin: 0 auto 32px;
    max-width: 500px;
    
}

}
@media (max-width:760px){
  .main-nav{display:none}
  .auth{display:none}
  .mobile-toggle{display:block}
.header-grid{display:flex;align-items:center;gap:20px;padding:12px 10px;justify-content: space-between;}
  .hero{padding:24px 0 48px}
  .hero-grid{grid-template-columns:1fr;gap:32px;padding-left:24px;padding-right:24px;padding-top: 0px;}
  .hero-right{order:-1;margin:0 -24px;width:calc(100% + 48px)}
  .hero-right .device-mock{border-radius:0;height:auto;min-height:400px;display: none;}
  .hero-right img{-o-object-fit:contain;object-fit:contain;height:auto;max-height:500px;width:100%}
  .hero-left h1{font-size:42px}
  .lead{font-size:18px}
  .hero-cta{flex-direction:column;width:100%;align-items: start;}
  .hero-cta .btn{text-align:center}
  .stats-features{padding:40px 0}
  .stats-features-grid{padding-left:0px;padding-right:0px;gap:0px}
  .feature-icon-group{display: grid; gap: 20px;}
  .stat-card{flex-direction:row;padding:20px;gap:16px;margin-bottom: 20px;}
  .stats-cards {display: block;gap: 24px;
}
  .stat-icon{width:48px;height:48px}
  .stat-content h3{font-size: 1.5625rem;
    line-height: 1.235;
    font-weight: 600;}
.stat-card img, .feature-icon-item img {
    width: 42px;
}
  .stat-content p{font-size:14px}
  .features-icons{grid-template-columns:1fr 1fr;gap:16px}
  .feature-icon-circle{width:48px;height:48px}
  .feature-description{padding:0;font-size:14px}
  .integrations{padding:48px 0}
  .integrations-grid{padding-left:24px;padding-right:24px;gap:32px;padding: 80px 42px;}
  .logos{grid-template-columns:repeat(3,1fr);gap:24px 32px;order: 1;margin-top: 30px;}
  .logos img{max-width:140px}
  .logos img.logo-center{grid-column:2/3}
  .integrations-content h2{font-size:32px}
  .integrations-content p{font-size:15px}
  .features{padding:48px 0}
  .features-grid{padding-left:24px;padding-right:24px;gap:32px}
  .phone-mockup{max-width:280px}
  .features-content h2{    font-size: 1.5625rem;}
  .features-subtitle{font-size:15px;margin-bottom:32px}
  .feature-item{gap:16px}
  .feature-icon{width:56px;height:56px}
  .feature-icon img{width:28px;height:28px}
  .feature-text h3{font-size:18px}
  .feature-text p{font-size:14px}
  .testimonials{padding:48px 0}
  .testimonials .container{padding-left:24px;padding-right:24px}
  .testimonials h2{font-size: 1.5625rem;}
  .testimonials-subtitle{font-size: 1.0625rem;margin-bottom:32px;width: 67%;margin: 0 auto;}
  .cards{gap:20px;margin: 48px 0px;}
  .card{padding:24px;margin: 0 25px;}
  .card h3{font-size:18px}
  .feature-list{grid-template-columns:1fr}
  /* Purple section mobile */
  .purple-cta{padding:0}
  .purple-grid{grid-template-columns:1fr;padding:48px 24px 32px;gap:0}
  .purple-left h2{font-size:28px;margin-bottom:16px}
  .purple-left .muted{font-size:14px;margin-bottom:0}
  .mini-stats{grid-template-columns:1fr;gap:16px;padding:0 24px 48px}
  .mini{padding:20px 24px;text-align:left;border-radius:12px}
  .mini strong{font-size:24px;margin-bottom:4px}
  .mini span{font-size:12px}
  .purple-right{display:none}
  /* Footer responsive */
  .footer-links{grid-template-columns:1fr;gap:16px}
  .footer-extras{flex-direction:column;align-items:flex-start}
  .store-badges img{height:40px;width: 121px;}
  /* Phone circle/dots scale for mobile */
  .phone-slider::before{width:420px;height:420px}
  .slider-dots{left:10px}
  #btn-primary {
    background: #ff5b50;
    color: white;
    border: 2px solid transparent;
    padding: 8px 20px;
    width: -webkit-fill-available;
    margin-bottom: 40px;
}
.newsletter-block {
    display: flex
;
font-size: 1.5625rem;
    flex-direction: column;
    align-items: end;
    gap: 18px;
    margin-bottom: 32px;
    max-width: 1636px;
    margin: 0 37px;
}
.large {
    /* padding: inherit; */
    font-size: 14px;
}
.footer-links .col h5 {
    margin: 0 0 8px;
    color: rgba(33, 31, 84, 1);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 12px;
    line-height: 2.66;
}
.author-name {
        font-size: 1.0625rem;
    font-weight: 400;
    color: rgba(33, 31, 84, 1);
    margin-bottom: 2px;
}

.author-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
}

.newsletter-block h3 {
   font-size: 1.5625rem;
    margin: 0 auto;   
    font-weight: 600;
}

}


/* Utility */
.muted{color:#7b748a}