:root{
  --bg:#050b13;
  --bg2:#07111f;
  --panel:#0c1726;
  --panel2:#0f1f31;
  --line:#1d3449;
  --line2:#274a63;

  --text:#eff8ff;
  --muted:#8da7b9;

  --mint:#49e5b3;
  --mint2:#83f7d2;
  --blue:#57a8ff;
  --red:#ff7180;

  --radius:24px;

  color-scheme:dark;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:
    radial-gradient(circle at 70% -5%,#12385a 0,transparent 32%),
    radial-gradient(circle at 10% 30%,#0a3028 0,transparent 24%),
    var(--bg);
  color:var(--text);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  line-height:1.5;
  min-height:100vh;
  overflow-x:hidden;
}

a{
  color:inherit;
}

.background-grid{
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(#ffffff05 1px,transparent 1px),
    linear-gradient(90deg,#ffffff05 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom,#000,transparent 75%);
  z-index:-3;
}

.glow{
  position:fixed;
  width:500px;
  height:500px;
  border-radius:50%;
  filter:blur(130px);
  opacity:.08;
  pointer-events:none;
  z-index:-2;
}

.glow-one{
  background:var(--mint);
  left:-250px;
  top:280px;
}

.glow-two{
  background:var(--blue);
  right:-260px;
  top:40px;
}

.nav-shell{
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid #ffffff09;
  background:#050b13d9;
  backdrop-filter:blur(20px);
}

.nav{
  max-width:1240px;
  margin:auto;
  height:76px;
  padding:0 24px;
  display:flex;
  align-items:center;
  gap:30px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-size:20px;
  font-weight:900;
  letter-spacing:.08em;
}

.brand img{
  width:38px;
  height:38px;
  filter:drop-shadow(0 0 16px #49e5b333);
}

.nav-links{
  margin:auto;
  display:flex;
  gap:28px;
}

.nav-links a{
  text-decoration:none;
  color:#9bb0c0;
  font-size:13px;
  transition:.2s;
}

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

.nav-actions{
  display:flex;
  gap:8px;
}

.menu-button{
  display:none;
}

.button{
  border:1px solid transparent;
  border-radius:13px;
  text-decoration:none;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  font-weight:800;
  transition:
    transform .2s,
    border-color .2s,
    background .2s;
}

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

.button.primary{
  background:linear-gradient(
    135deg,
    var(--mint),
    #32bd96
  );
  color:#03120e;
  box-shadow:0 12px 35px #49e5b318;
}

.button.secondary{
  background:#0d1a28;
  border-color:#284157;
  color:#dcecf7;
}

.button.small{
  padding:9px 14px;
  font-size:12px;
}

.button.large{
  padding:15px 20px;
  min-height:52px;
}

.button.wide{
  width:100%;
  padding:13px;
}

.button.disabled{
  background:#111d28;
  border-color:#243442;
  color:#677c8c;
  cursor:not-allowed;
}

.hero{
  max-width:1240px;
  margin:auto;
  min-height:720px;
  padding:105px 24px 90px;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:70px;
  align-items:center;
}

.eyebrow{
  color:var(--mint);
  font-size:11px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}

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

.hero .eyebrow span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 13px var(--mint);
}

.hero h1{
  font-size:clamp(47px,5.1vw,75px);
  line-height:1.02;
  letter-spacing:-.045em;
  margin:20px 0 24px;
  max-width:780px;
}

.hero h1 strong{
  display:block;
  font-weight:inherit;
  color:transparent;
  background:linear-gradient(
    110deg,
    var(--mint2),
    #70c9ff
  );
  background-clip:text;
  -webkit-background-clip:text;
}

.hero-lead{
  color:#a9bdcb;
  font-size:19px;
  line-height:1.7;
  max-width:690px;
}

.hero-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:32px;
}

.hero-trust{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin-top:24px;
  color:#718b9d;
  font-size:11px;
}

.identity-demo{
  background:
    linear-gradient(180deg,#0e2032ee,#08131fee);
  border:1px solid #23425a;
  border-radius:30px;
  padding:24px;
  box-shadow:
    0 35px 100px #0009,
    0 0 0 1px #ffffff04 inset;
  transform:perspective(1200px) rotateY(-4deg);
}

.demo-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:18px;
  border-bottom:1px solid #1e374a;
}

.demo-header small{
  display:block;
  color:#738fa2;
  font-size:9px;
  letter-spacing:.16em;
}

.demo-header strong{
  display:block;
  margin-top:3px;
}

.live-dot{
  color:var(--mint);
  background:#0a332b;
  border:1px solid #227158;
  border-radius:999px;
  padding:5px 8px;
  font-size:9px;
  font-weight:900;
}

.identity-core{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  margin:26px auto;
  gap:8px;
  color:#a6bdca;
  font-size:12px;
}

.identity-core img{
  width:74px;
  height:74px;
  filter:drop-shadow(0 0 25px #49e5b32a);
}

.identity-lines{
  display:grid;
  gap:9px;
}

.identity-service{
  border:1px solid #1b394d;
  background:#081624;
  padding:12px;
  border-radius:15px;
  display:grid;
  grid-template-columns:38px 1fr auto;
  gap:10px;
  align-items:center;
}

.service-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:var(--mint);
  background:#0d3029;
  font-weight:900;
}

.identity-service strong,
.identity-service span{
  display:block;
}

.identity-service span{
  color:#718b9c;
  font-size:11px;
  margin-top:2px;
  font-family:ui-monospace,monospace;
}

.identity-service b{
  color:var(--mint);
  font-size:9px;
}

.leak-simulation{
  display:flex;
  gap:11px;
  align-items:center;
  border:1px solid #5a323a;
  background:#251219;
  border-radius:15px;
  padding:12px;
  margin-top:16px;
}

.leak-simulation>span{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#5b202a;
  color:#ffc1c8;
  font-weight:900;
}

.leak-simulation small{
  display:block;
  color:#c17f88;
  font-size:8px;
  letter-spacing:.1em;
}

.leak-simulation strong{
  font-size:11px;
}

.proof-strip{
  max-width:1150px;
  margin:0 auto 100px;
  border:1px solid #1b3447;
  border-radius:22px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:#07131f99;
}

.proof-strip>div{
  display:flex;
  gap:13px;
  justify-content:center;
  align-items:center;
  min-height:100px;
  border-right:1px solid #1b3447;
}

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

.proof-strip strong{
  font-size:27px;
  color:var(--mint);
}

.proof-strip span{
  color:#7992a3;
  font-size:11px;
}

.section{
  max-width:1200px;
  margin:auto;
  padding:100px 24px;
}

.section-heading{
  max-width:760px;
  margin-bottom:50px;
}

.section-heading h2,
.privacy-card h2,
.apps-card h2,
.final-cta h2{
  font-size:clamp(34px,4vw,52px);
  line-height:1.08;
  letter-spacing:-.035em;
  margin:12px 0 18px;
}

.section-heading p,
.privacy-card p,
.apps-card p{
  color:#92a9b9;
  font-size:17px;
  line-height:1.7;
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.feature{
  position:relative;
  min-height:240px;
  border:1px solid #1d3449;
  border-radius:22px;
  background:linear-gradient(
    180deg,
    #0c1827,
    #08131f
  );
  padding:24px;
  overflow:hidden;
}

.feature::after{
  content:"";
  position:absolute;
  width:160px;
  height:160px;
  border-radius:50%;
  right:-100px;
  bottom:-110px;
  background:var(--blue);
  filter:blur(70px);
  opacity:.08;
}

.feature.featured{
  border-color:#28624f;
}

.feature-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid #27495d;
  border-radius:14px;
  background:#0b2430;
  color:var(--mint);
  font-weight:900;
  font-size:17px;
}

.feature-state{
  position:absolute;
  right:20px;
  top:21px;
  color:#68879a;
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
}

.feature h3{
  font-size:20px;
  margin:26px 0 9px;
}

.feature p{
  color:#829baa;
  margin:0;
  font-size:13px;
  line-height:1.7;
}

.steps{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.step{
  border:1px solid #1d3449;
  border-radius:20px;
  padding:23px;
  background:#08131f;
  display:flex;
  gap:20px;
}

.step>span{
  color:#34576d;
  font-size:29px;
  font-weight:900;
}

.step h3{
  margin:2px 0 7px;
}

.step p{
  color:#8098a8;
  margin:0;
  font-size:13px;
  line-height:1.65;
}

.privacy-section{
  max-width:1200px;
  margin:auto;
  padding:70px 24px;
}

.privacy-card{
  border:1px solid #275e50;
  border-radius:30px;
  background:
    radial-gradient(circle at 85% 0,#134539 0,transparent 34%),
    #081714;
  padding:50px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:65px;
}

.privacy-checks{
  display:grid;
  gap:10px;
}

.privacy-checks>div{
  border:1px solid #1d463b;
  border-radius:17px;
  padding:14px;
  display:grid;
  grid-template-columns:30px 1fr;
  gap:10px;
}

.privacy-checks span{
  color:var(--mint);
  font-weight:900;
}

.privacy-checks p{
  margin:0;
  font-size:12px;
}

.privacy-checks strong{
  color:#e7fff7;
  display:block;
  margin-bottom:3px;
}

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  align-items:stretch;
}

.price-card{
  border:1px solid #1e3549;
  border-radius:22px;
  padding:24px;
  background:#08141f;
  position:relative;
  display:flex;
  flex-direction:column;
}

.price-card.popular{
  border-color:#3a9879;
  background:
    linear-gradient(180deg,#0d2924,#091721);
  box-shadow:0 20px 60px #49e5b310;
}

.price-card.future{
  opacity:.72;
}

.popular-badge{
  position:absolute;
  left:18px;
  top:-12px;
  padding:5px 9px;
  border-radius:999px;
  background:var(--mint);
  color:#032017;
  font-weight:900;
  font-size:8px;
}

.price-name{
  color:#9db5c5;
  font-size:11px;
  font-weight:900;
  letter-spacing:.13em;
  margin-bottom:18px;
}

.price{
  display:flex;
  align-items:end;
  gap:6px;
  margin-bottom:14px;
}

.price strong{
  font-size:33px;
  line-height:1;
}

.price span{
  color:#738a9b;
  font-size:11px;
}

.price-card>p{
  color:#8099aa;
  min-height:60px;
  font-size:12px;
}

.price-card ul{
  list-style:none;
  padding:13px 0 25px;
  border-top:1px solid #1b3245;
  display:grid;
  gap:9px;
  color:#afc3d0;
  font-size:12px;
  flex:1;
}

.price-card li::first-letter{
  color:var(--mint);
}

.pricing-note{
  text-align:center;
  color:#60798b;
  font-size:10px;
  margin-top:22px;
}

.apps-card{
  min-height:550px;
  border:1px solid #1e3c53;
  border-radius:30px;
  background:
    radial-gradient(circle at 80% 30%,#123955 0,transparent 32%),
    #071521;
  padding:50px;
  display:grid;
  grid-template-columns:1fr .75fr;
  gap:60px;
  overflow:hidden;
}

.apps-copy{
  align-self:center;
}

.download-buttons{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:30px;
}

.download{
  min-width:220px;
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid #29465a;
  background:#091722;
  border-radius:16px;
  padding:12px;
  text-decoration:none;
  transition:.2s;
}

.download:hover{
  border-color:#4782a0;
  transform:translateY(-2px);
}

.download-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  background:#0b3028;
  color:var(--mint);
  border-radius:13px;
  font-weight:900;
}

.download small,
.download strong,
.download span{
  display:block;
}

.download small{
  font-size:7px;
  color:#637d8f;
  letter-spacing:.12em;
}

.download strong{
  font-size:13px;
}

.download span{
  font-size:9px;
  color:#7992a4;
}

.phone{
  width:280px;
  justify-self:center;
  align-self:end;
  transform:translateY(85px);
  min-height:520px;
  border:7px solid #192735;
  border-radius:43px;
  background:#050c13;
  box-shadow:0 30px 90px #000b;
  padding:10px;
}

.phone-top{
  display:grid;
  grid-template-columns:28px 1fr 28px;
  align-items:center;
  height:48px;
  padding:0 8px;
}

.phone-top img{
  width:25px;
  height:25px;
}

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

.phone-content{
  background:linear-gradient(180deg,#091622,#061019);
  min-height:450px;
  border-radius:30px;
  padding:22px 15px;
}

.phone-content>small{
  color:var(--mint);
  font-size:8px;
  font-weight:900;
  letter-spacing:.15em;
}

.phone-content h3{
  font-size:25px;
  margin:5px 0 18px;
}

.phone-score{
  width:110px;
  height:110px;
  display:grid;
  place-items:center;
  margin:15px auto 24px;
  border-radius:50%;
  border:7px solid #1d493d;
  box-shadow:0 0 30px #49e5b30c inset;
}

.phone-score strong,
.phone-score span{
  display:block;
  text-align:center;
}

.phone-score strong{
  color:var(--mint);
  font-size:22px;
}

.phone-score span{
  color:#678093;
  font-size:8px;
}

.mini-card{
  display:grid;
  grid-template-columns:30px 1fr auto;
  gap:9px;
  align-items:center;
  border:1px solid #1b3345;
  border-radius:12px;
  padding:9px;
  margin-bottom:7px;
  background:#081522;
}

.mini-card strong,
.mini-card small{
  display:block;
}

.mini-card strong{
  font-size:10px;
}

.mini-card small{
  font-size:8px;
  color:#71899b;
}

.mini-card b{
  color:var(--mint);
}

.faq{
  max-width:850px;
}

.faq details{
  border-top:1px solid #1b3346;
  padding:20px 0;
}

.faq summary{
  cursor:pointer;
  font-weight:800;
  list-style:none;
}

.faq summary::after{
  content:"+";
  float:right;
  color:var(--mint);
}

.faq details[open] summary::after{
  content:"−";
}

.faq p{
  color:#829baa;
  font-size:13px;
  max-width:720px;
}

.final-cta{
  max-width:900px;
  margin:100px auto;
  padding:70px 24px;
  text-align:center;
}

.final-cta img{
  width:75px;
  height:75px;
  filter:drop-shadow(0 0 30px #49e5b326);
}

.final-cta p{
  color:#8da5b5;
  max-width:610px;
  margin:0 auto 28px;
}

footer{
  max-width:1200px;
  margin:auto;
  padding:40px 24px;
  border-top:1px solid #152a39;
  color:#688091;
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:9px;
  color:#dcebf4;
  text-decoration:none;
}

.footer-brand img{
  width:32px;
  height:32px;
}

footer>p{
  font-size:11px;
}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin:25px 0;
}

.footer-links a{
  text-decoration:none;
  color:#7790a0;
  font-size:11px;
}

.footer-bottom{
  border-top:1px solid #152a39;
  padding-top:17px;
  display:flex;
  justify-content:space-between;
  font-size:10px;
}

.reveal{
  opacity:0;
  transform:translateY(15px);
  transition:
    opacity .65s ease,
    transform .65s ease;
}

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

@media(max-width:1050px){

  .nav-links{
    display:none;
  }

  .hero{
    grid-template-columns:1fr;
    padding-top:75px;
  }

  .identity-demo{
    max-width:650px;
    transform:none;
  }

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

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

}

@media(max-width:750px){

  .nav-actions{
    display:none;
  }

  .menu-button{
    display:block;
    margin-left:auto;
    border:1px solid #294255;
    background:#0d1a27;
    color:#fff;
    width:42px;
    height:42px;
    border-radius:12px;
  }

  .nav.open{
    height:auto;
    min-height:76px;
    flex-wrap:wrap;
    padding-bottom:15px;
  }

  .nav.open .nav-links,
  .nav.open .nav-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
  }

  .hero{
    min-height:0;
    gap:45px;
    padding-bottom:60px;
  }

  .hero h1{
    font-size:43px;
  }

  .proof-strip{
    grid-template-columns:1fr 1fr;
    margin:0 20px 50px;
  }

  .proof-strip>div{
    border-bottom:1px solid #1b3447;
  }

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

  .privacy-card,
  .apps-card{
    grid-template-columns:1fr;
    padding:28px;
  }

  .privacy-card{
    gap:30px;
  }

  .apps-card{
    padding-bottom:0;
  }

  .phone{
    transform:translateY(55px);
  }

  .section{
    padding:70px 20px;
  }

}

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

  html{
    scroll-behavior:auto;
  }

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

}


/* NYMIQ BROWSER SIGNING */

.download.disabled-download{
  opacity:.58;
  pointer-events:none;
  cursor:not-allowed;
  filter:saturate(.65);
}