:root{
  --navy:#111B43;
  --navy-light:#1B2858;
  --navy-card:#151F49;
  --blue:#3978FF;
  --purple:#9842F5;
  --text:#FFFFFF;
  --muted:#C6CEE4;
  --subtle:#8392BB;
  --border:rgba(133,151,204,.18);
  --max:1180px;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  background:var(--navy);
}

body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 75% 8%,rgba(152,66,245,.14),transparent 25%),
    radial-gradient(circle at 20% 22%,rgba(57,120,255,.10),transparent 28%),
    var(--navy);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

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

.nav{
  width:min(calc(100% - 40px),var(--max));
  height:88px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:20;
}

.brand{
  display:flex;
  align-items:center;
  gap:11px;
  font-size:21px;
  font-weight:800;
  letter-spacing:-.4px;
}

.brand img{
  width:39px;
  height:39px;
  border-radius:10px;
}

nav{
  display:flex;
  align-items:center;
  gap:32px;
  color:#D2D9EC;
  font-size:14px;
  font-weight:650;
}

nav a:hover,.footer-links a:hover{color:#fff}

.hero{
  width:min(calc(100% - 40px),var(--max));
  min-height:720px;
  margin:auto;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:70px;
  position:relative;
  overflow:hidden;
  padding:45px 0 85px;
}

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

.eyebrow{
  color:#8FA5E8;
  font-size:11px;
  font-weight:850;
  letter-spacing:1.8px;
  margin-bottom:16px;
}

h1,h2,h3,p{margin-top:0}

h1{
  font-size:clamp(48px,5.5vw,76px);
  line-height:.99;
  letter-spacing:-3.5px;
  margin-bottom:28px;
  max-width:720px;
}

h1 span{
  background:linear-gradient(90deg,#5D92FF,#B267FF);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero-text{
  max-width:610px;
  color:#D2D9EC;
  font-size:18px;
  line-height:1.65;
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:32px;
}

.button{
  min-height:52px;
  padding:0 21px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:800;
}

.primary{
  background:linear-gradient(110deg,var(--blue),var(--purple));
  box-shadow:0 12px 34px rgba(81,76,238,.25);
}

.secondary{
  background:#151E43;
  border:1px solid #39466F;
  color:#DCE3F7;
}

.launch-note{
  color:#7F8CB2;
  font-size:12px;
  font-weight:650;
  margin:18px 0 0;
}

.hero-product{
  position:relative;
  display:flex;
  justify-content:center;
  height:630px;
  overflow:hidden;
}

.hero-product img{
  width:min(100%,410px);
  height:auto;
  align-self:flex-start;
  position:relative;
  z-index:2;
  border-radius:34px;
  box-shadow:0 40px 80px rgba(0,0,0,.38);
}

.hero-phone-glow{
  position:absolute;
  width:430px;
  height:430px;
  top:80px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(57,120,255,.35),rgba(152,66,245,.27));
  filter:blur(80px);
}

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

.section-heading{max-width:700px}

.section-heading h2,.workflow h2,.import-section h2,.final-cta h2{
  font-size:clamp(35px,4vw,54px);
  line-height:1.05;
  letter-spacing:-2px;
  margin-bottom:20px;
}

.section-heading p,.workflow-heading>p,.import-copy>p,.final-cta>p{
  color:var(--muted);
  font-size:17px;
  line-height:1.65;
}

.benefits{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:58px;
}

.benefits article{
  min-height:220px;
  padding:28px;
  background:rgba(15,25,61,.68);
  border:1px solid var(--border);
  border-radius:22px;
}

.number{
  color:#789BFF;
  font-size:11px;
  font-weight:900;
  letter-spacing:1.5px;
}

.benefits h3{
  font-size:20px;
  margin:50px 0 10px;
}

.benefits p{
  color:#BFC8DF;
  line-height:1.6;
  font-size:14px;
}

.workflow{
  padding:115px 0 130px;
  background:
    linear-gradient(180deg,rgba(10,17,46,.25),rgba(10,17,46,.65)),
    radial-gradient(circle at 35% 50%,rgba(57,120,255,.11),transparent 30%);
  border-top:1px solid rgba(133,151,204,.10);
  border-bottom:1px solid rgba(133,151,204,.10);
}

.workflow-heading{
  width:min(calc(100% - 40px),var(--max));
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:50px;
}

.workflow-heading>p{
  width:390px;
  margin-bottom:24px;
}

.scroll-hint{
  width:min(calc(100% - 40px),var(--max));
  margin:20px auto 22px;
  color:#8392BB;
  font-size:12px;
  font-weight:750;
  display:flex;
  align-items:center;
  gap:12px;
}

.arrow{
  color:#9BAEFF;
  font-size:20px;
}

.screens{
  display:flex;
  gap:60px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:12px max(20px,calc((100vw - var(--max))/2)) 38px;
  scrollbar-width:thin;
  scrollbar-color:#445583 transparent;
}

.screen-card{
  flex:0 0 min(340px,78vw);
  scroll-snap-align:start;
}

.screen-label{
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:15px;
}

.screen-label>span{
  width:33px;
  height:33px;
  border-radius:50%;
  border:1px solid #405184;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#8DA9FF;
  font-size:10px;
  font-weight:900;
}

.screen-label div{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.screen-label strong{font-size:17px}
.screen-label small{color:#AAB5D1;font-size:13px;line-height:1.4;margin-top:2px}

.screen-card img{
  width:100%;
  display:block;
  border-radius:30px;
  box-shadow:0 28px 55px rgba(0,0,0,.35);
}

.import-section{
  width:min(calc(100% - 40px),var(--max));
  margin:auto;
  padding:130px 0;
  display:grid;
  grid-template-columns:1fr .72fr;
  gap:90px;
  align-items:center;
}

.import-copy{max-width:600px}

.import-visual{
  max-height:580px;
  overflow:hidden;
  display:flex;
  justify-content:center;
  border-radius:34px;
  position:relative;
}

.import-visual img{
  width:min(100%,390px);
  align-self:flex-start;
  border-radius:30px;
  box-shadow:0 30px 70px rgba(0,0,0,.4);
}

.pricing-section{
  padding:120px 20px 140px;
  background:rgba(9,15,41,.45);
  border-top:1px solid rgba(133,151,204,.10);
}

.centred{
  text-align:center;
  margin:0 auto;
  max-width:760px;
}

.pricing-grid{
  max-width:880px;
  margin:55px auto 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.price-card{
  position:relative;
  padding:34px;
  border:1px solid var(--border);
  background:#111B3F;
  border-radius:24px;
}

.price-card.pro{
  border-color:rgba(112,102,255,.5);
  background:
    linear-gradient(#131D44,#131D44) padding-box,
    linear-gradient(135deg,#3978FF,#9842F5) border-box;
  border:1px solid transparent;
}

.pro-badge{
  display:inline-block;
  color:#AFC2FF;
  font-size:9px;
  font-weight:900;
  letter-spacing:1.5px;
  padding:7px 10px;
  background:rgba(79,104,255,.14);
  border-radius:999px;
  margin-bottom:22px;
}

.plan-name{
  color:#DDE4F6;
  font-size:15px;
  font-weight:750;
}

.price{
  font-size:40px;
  font-weight:850;
  letter-spacing:-1.5px;
  margin:10px 0 14px;
}

.price small{
  font-size:13px;
  color:#98A5C7;
  letter-spacing:0;
}

.price-card p{
  min-height:54px;
  color:#BFC8DF;
  font-size:14px;
  line-height:1.55;
  margin-bottom:25px;
}

.plan-feature{
  border-top:1px solid rgba(133,151,204,.12);
  padding:13px 0;
  color:#D6DDF0;
  font-size:13px;
}

.final-cta{
  text-align:center;
  padding:135px 20px;
}

.final-cta>img{
  width:74px;
  height:74px;
  border-radius:19px;
  margin-bottom:25px;
  box-shadow:0 15px 40px rgba(76,79,230,.28);
}

.final-cta h2{
  max-width:750px;
  margin-left:auto;
  margin-right:auto;
}

.final-cta p{
  max-width:580px;
  margin:0 auto 28px;
}

.disabled-button{cursor:default}

footer{
  width:min(calc(100% - 40px),var(--max));
  margin:auto;
  padding:38px 0 48px;
  border-top:1px solid rgba(133,151,204,.15);
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:30px;
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:11px;
}

.footer-brand img{
  width:36px;
  height:36px;
  border-radius:9px;
}

.footer-brand div{
  display:flex;
  flex-direction:column;
}

.footer-brand strong{font-size:15px}
.footer-brand span{font-size:10px;color:#7180A5;margin-top:2px}

.footer-links{
  display:flex;
  gap:22px;
  color:#9BA7C7;
  font-size:12px;
  font-weight:650;
}

.copyright{
  grid-column:1/-1;
  color:#5F6C90;
  font-size:10px;
  margin:5px 0 0;
}

@media(max-width:800px){
  .nav{height:74px}
  nav a:not(:last-child){display:none}
  .hero{
    grid-template-columns:1fr;
    gap:45px;
    padding-top:65px;
  }
  .hero-product{height:520px}
  .hero-product img{width:340px}
  h1{letter-spacing:-2.4px}
  .benefits{grid-template-columns:1fr}
  .benefits article{min-height:175px}
  .benefits h3{margin-top:32px}
  .workflow-heading{
    align-items:start;
    flex-direction:column;
    gap:0;
  }
  .workflow-heading>p{width:auto}
  .screen-card{flex-basis:min(360px,82vw)}
  .import-section{
    grid-template-columns:1fr;
    gap:45px;
  }
  .import-visual{max-height:520px}
  .pricing-grid{grid-template-columns:1fr}
  footer{grid-template-columns:1fr}
  .footer-links{flex-wrap:wrap;gap:15px 20px}
}

@media(max-width:480px){
  .hero{min-height:auto}
  .hero-actions{flex-direction:column}
  .button{width:100%}
  .hero-product{height:460px}
  .hero-product img{width:300px}
  .intro,.import-section{padding-top:90px;padding-bottom:90px}
  .workflow,.pricing-section{padding-top:90px;padding-bottom:95px}
  .screen-card{flex-basis:82vw}
  .final-cta{padding:100px 20px}
}

.annual-price{
  color:#AAB5D1;
  font-size:13px;
  margin:-5px 0 18px;
}

.annual-price strong{
  color:#FFFFFF;
}

.annual-price span{
  display:inline-block;
  margin-left:7px;
  padding:4px 7px;
  border-radius:999px;
  background:rgba(79,104,255,.16);
  color:#AFC2FF;
  font-size:8px;
  font-weight:900;
  letter-spacing:1px;
  vertical-align:1px;
}

/* Legal and support pages */

.legal-page{
  width:min(calc(100% - 40px),900px);
  margin:0 auto;
  padding:80px 0 120px;
}

.legal-hero{
  padding-bottom:50px;
  border-bottom:1px solid rgba(133,151,204,.16);
}

.legal-hero h1{
  font-size:clamp(44px,6vw,68px);
  line-height:1;
  letter-spacing:-3px;
  margin:0 0 18px;
}

.legal-hero>p{
  color:#8392BB;
  font-size:13px;
  font-weight:650;
  margin:0;
}

.legal-content{
  max-width:780px;
  padding-top:20px;
}

.legal-content section{
  padding:34px 0;
  border-bottom:1px solid rgba(133,151,204,.12);
}

.legal-content section:last-child{
  border-bottom:0;
}

.legal-content h2{
  color:#FFFFFF;
  font-size:21px;
  line-height:1.25;
  letter-spacing:-.4px;
  margin:0 0 14px;
}

.legal-content p{
  color:#C6CEE4;
  font-size:15px;
  line-height:1.75;
  margin:0 0 14px;
}

.legal-content p:last-child{
  margin-bottom:0;
}

.legal-content a{
  color:#8EAEFF;
  text-decoration:underline;
  text-decoration-color:rgba(142,174,255,.35);
  text-underline-offset:3px;
}

.legal-content strong{
  color:#FFFFFF;
}

@media(max-width:600px){
  .legal-page{
    padding-top:55px;
    padding-bottom:85px;
  }

  .legal-hero{
    padding-bottom:38px;
  }

  .legal-hero h1{
    letter-spacing:-2px;
  }

  .legal-content section{
    padding:28px 0;
  }
}