:root{
  --navy:#071b33;
  --navy2:#0c3159;
  --blue:#1565b8;
  --cyan:#00a6cf;
  --ink:#102238;
  --muted:#617389;
  --line:#e2e9f1;
  --soft:#f5f8fb;
  --white:#ffffff;
  --max:1180px;
  --radius:22px;
  --shadow:0 24px 70px rgba(10,35,65,.10);
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

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

  background:#fff;
  color:var(--ink);
  line-height:1.6;
}

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

img{
  display:block;
  max-width:100%;
}

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

/* HEADER */

.header{
  position:sticky;
  top:0;
  z-index:100;

  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);

  border-bottom:1px solid rgba(226,233,241,.9);
}

.nav{
  min-height:76px;

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

  gap:30px;
}

.logo img{
  height:40px;
  width:auto;
}

.navlinks{
  display:flex;
  align-items:center;
  gap:28px;

  color:#4a6078;

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

.navlinks a:hover{
  color:var(--blue);
}

.portal-button{
  padding:11px 20px;

  border-radius:999px;

  color:#fff !important;

  background:
    linear-gradient(
      135deg,
      var(--blue),
      var(--cyan)
    );

  box-shadow:
    0 10px 28px
    rgba(21,101,184,.20);
}

/* HERO */

.hero{
  position:relative;
  overflow:hidden;

  background:
    radial-gradient(
      circle at 86% 15%,
      rgba(0,166,207,.17),
      transparent 29%
    ),
    radial-gradient(
      circle at 7% 0,
      rgba(21,101,184,.12),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #fbfdff 0%,
      #f4f8fc 100%
    );
}

.hero-inner{
  min-height:650px;

  display:grid;

  grid-template-columns:
    1.08fr .92fr;

  align-items:center;

  gap:70px;

  padding:76px 0;
}

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

  padding:7px 13px;

  border:1px solid #d7e7f4;
  border-radius:999px;

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

  color:#17649f;

  font-size:13px;
  font-weight:750;
}

.eyebrow::before{
  content:"";

  width:7px;
  height:7px;

  border-radius:50%;

  background:var(--cyan);
}

h1{
  margin:23px 0 20px;

  max-width:720px;

  color:var(--navy);

  font-size:
    clamp(43px,5.3vw,70px);

  line-height:1.02;
  letter-spacing:-3px;
}

.gradient{
  background:
    linear-gradient(
      90deg,
      #1264b5,
      #009bc5
    );

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

  color:transparent;
}

.lead{
  max-width:650px;

  margin:0;

  color:var(--muted);

  font-size:18px;
}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:13px;

  margin-top:30px;
}

.btn{
  min-height:49px;

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

  padding:0 22px;

  border-radius:12px;

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

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

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

.btn-primary{
  color:#fff;

  background:
    linear-gradient(
      135deg,
      #105baa,
      #00a3cf
    );

  box-shadow:
    0 13px 30px
    rgba(15,91,170,.20);
}

.btn-secondary{
  background:#fff;

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

.trust{
  display:flex;
  flex-wrap:wrap;
  gap:20px;

  margin-top:34px;

  color:#53677d;

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

.trust span::before{
  content:"✓";

  margin-right:7px;

  color:#078fa4;
}

/* APP MOCKUP */

.preview{
  padding:15px;

  background:#fff;

  border:1px solid #dfebf4;
  border-radius:28px;

  box-shadow:var(--shadow);
}

.window{
  overflow:hidden;

  border:1px solid #e2e9f1;
  border-radius:19px;

  background:#f8fafc;
}

.windowbar{
  height:46px;

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

  padding:0 16px;

  background:#fff;

  border-bottom:1px solid #e4ebf2;
}

.windowbar span{
  width:8px;
  height:8px;

  border-radius:50%;

  background:#d2dce6;
}

.app{
  min-height:350px;

  display:grid;

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

.sidebar{
  padding:22px 14px;

  background:var(--navy);

  color:#9eb2c9;
}

.sidebar strong{
  display:block;

  margin-bottom:23px;

  color:#fff;
}

.sidebar div{
  margin:8px 0;

  padding:7px 9px;

  border-radius:8px;

  font-size:11px;
}

.sidebar .active{
  background:rgba(255,255,255,.10);

  color:#fff;
}

.app-main{
  padding:22px;
}

.app-title{
  color:#1b2d41;

  font-weight:800;
}

.cards{
  display:grid;

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

  gap:12px;

  margin-top:17px;
}

.card{
  padding:15px;

  background:#fff;

  border:1px solid #e2e9f1;
  border-radius:13px;
}

.card small{
  color:#8494a7;
}

.card b{
  display:block;

  margin-top:5px;

  color:#193858;

  font-size:20px;
}

.activity{
  margin-top:13px;

  padding:16px;

  background:#fff;

  border:1px solid #e2e9f1;
  border-radius:13px;
}

.fake-line{
  height:8px;

  margin:12px 0;

  border-radius:999px;

  background:#edf2f7;
}

.fake-line:nth-child(3){
  width:77%;
}

.fake-line:nth-child(4){
  width:59%;
}

/* SECTIONS */

.section{
  padding:96px 0;
}

.section-soft{
  background:var(--soft);
}

.section-head{
  max-width:720px;

  margin-bottom:46px;
}

.label{
  color:#087ba3;

  text-transform:uppercase;

  letter-spacing:1.2px;

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

h2{
  margin:9px 0 14px;

  color:var(--navy);

  font-size:
    clamp(32px,4vw,48px);

  line-height:1.12;
  letter-spacing:-1.7px;
}

.section-head p{
  margin:0;

  color:var(--muted);

  font-size:17px;
}

.features{
  display:grid;

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

  gap:20px;
}

.feature{
  min-height:235px;

  padding:27px;

  background:#fff;

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

.feature-icon{
  width:47px;
  height:47px;

  display:grid;
  place-items:center;

  margin-bottom:22px;

  border-radius:13px;

  background:#edf7fd;

  color:#087ba5;

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

.feature h3{
  margin:0 0 9px;

  color:#142a43;

  font-size:18px;
}

.feature p{
  margin:0;

  color:var(--muted);

  font-size:14px;
}

/* WORKFLOW */

.workflow{
  display:grid;

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

  gap:18px;
}

.step{
  padding:27px;

  background:#fff;

  border:1px solid #dde6ef;
  border-radius:20px;
}

.step-number{
  color:#058bb6;

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

.step h3{
  margin:12px 0 8px;

  font-size:17px;
}

.step p{
  margin:0;

  color:var(--muted);

  font-size:13px;
}

/* SECURITY */

.security-grid{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:22px;
}

.security-card{
  padding:32px;

  border-radius:22px;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f9fbfd
    );

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

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

  color:var(--navy);
}

.security-card p{
  margin:0;

  color:var(--muted);
}

/* CTA */

.cta{
  padding:80px 0;
}

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

  gap:40px;

  padding:52px;

  color:#fff;

  border-radius:30px;

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(0,180,220,.37),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #071b33,
      #0b3865
    );
}

.ctabox h2{
  margin:0 0 9px;

  color:#fff;

  font-size:35px;
}

.ctabox p{
  margin:0;

  color:#c7d5e4;
}

.ctabox .btn{
  flex-shrink:0;

  background:#fff;

  color:#0c365f;
}

/* FOOTER */

.footer{
  padding:38px 0;

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

.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:30px;

  color:#718096;

  font-size:13px;
}

.footer img{
  height:31px;

  width:auto;
}

/* RESPONSIVE */

@media(max-width:900px){

  .navlinks > a:not(.portal-button){
    display:none;
  }

  .hero-inner{
    min-height:auto;

    grid-template-columns:1fr;

    gap:45px;

    padding:58px 0;
  }

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

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

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

@media(max-width:600px){

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

  .nav{
    min-height:67px;
  }

  .logo img{
    height:32px;
  }

  .portal-button{
    padding:9px 14px;
  }

  h1{
    letter-spacing:-2px;
  }

  .hero-inner{
    padding:46px 0;
  }

  .app{
    grid-template-columns:
      100px 1fr;
  }

  .features,
  .workflow,
  .cards{
    grid-template-columns:1fr;
  }

  .section{
    padding:68px 0;
  }

  .ctabox{
    flex-direction:column;

    align-items:flex-start;

    padding:34px 26px;
  }

  .footer-inner{
    flex-direction:column;

    align-items:flex-start;
  }
}