:root {
    --navy: rgb(10, 28, 56);
    --blue: #1a6fc4;
    --accent: rgb(33, 150, 243);
    --white: #ffffff;
    --light-bg: rgb(240, 244, 248);
}

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


}

 
html{
    scroll-behavior:smooth;
}
 
body{
    cursor: url("images/bcursor1.png"), default;
    font-family:'Satoshi-Black',sans-serif;
    background:var(--light-bg);
    color:var(--navy);
    overflow-x:hidden;
}
 
/* ── NAV ── */
nav{
    position:sticky;
    top:0;
    z-index:100;

    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 2.5rem;
    margin-left: 0;
    margin-right: 0;

    margin-bottom: 0;
    height:150px;
    /* --navy */
    background:rgb(33, 150, 243, 0.15);
    backdrop-filter:blur(16px);
    border-bottom:1.5px solid rgba(41,171,226,0.15);
}
.portal-logo{
    z-index: 40;
    position: fixed;
    left: 38%;
    top: -7%;
    margin: 0;
    line-height:0;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.portal-logo:hover{
    transform: scale(1.05);
    cursor: url("images/bcursor1.png"), default;
}

 
.nav-links{
    pointer-events: none;
    display:flex;
    gap:2rem;
    list-style:none;
}

.nav-links a{
    color:var(--navy);
    text-decoration:none;
    font-size:.75em ;
    font-weight:bold;
    transition:color 0.2s;
}
.nav-links a:hover{
    color:var(--accent);
}
 
.nav-btns{
    display:flex;
    gap:10px;
    align-items:center;
}
 
.btn{
    font-family:'Satoshi-Black',sans-serif;
    cursor: url("images/bcursor1.png"), default;

    display:inline-flex;
    align-items:center;
    gap:6px;

    padding:9px 20px;
    border-radius:999px;

    font-size:.75em;
    font-weight:bold;
    text-decoration:none;
    border:none;
    transition:all 0.2s;
}
 
.btn-ghost{
    background:transparent;color:var(--navy);
    border:2px solid rgba(41,171,226,0.3);
}
.btn-ghost:hover{
    background:rgba(41,171,226,0.5);
    color:var(--light-bg);
    border-color:var(--accent);}
 
.btn-primary{
    background:var(--accent);
    color:white;
    box-shadow:0 4px 18px rgba(41,171,226,0.4);
}
.btn-primary:hover{
    background:var(--blue);
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(41,171,226,0.5);}
 
/* ── HERO ── */
.blurb{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:3rem 2rem 0;
  overflow:hidden;
}
 
/* big bg circle */
.hero::before{
  content:'';
  position:absolute;top:-120px;left:50%;transform:translateX(-50%);
  width:900px;height:700px;
  background:radial-gradient(ellipse, rgba(41,171,226,0.13) 0%, transparent 65%);

}
 
.notif{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top: 0;
    padding:6px 16px 6px 10px;
    border-radius:999px;
    background:white;
    border:2px solid rgba(41,171,226,0.25);
    font-size:0.65em;
    font-weight:bold;
    color:var(--blue);
    margin-bottom:2rem;
    box-shadow:0 2px 12px rgb(10, 28, 56, 0.35);;
    animation:fadeUp 0.5s ease forwards;
}
 
.wave-word{
    animation:bob 2s ease-in-out infinite;
    display:inline-block;
}
 
h1{
    font-family:'Satoshi-Black',sans-serif;
    font-size:clamp(42px,7vw,82px);
    line-height:1.05;
    letter-spacing:-1px;
    color:var(--navy);
    max-width:820px;
    margin-bottom:1.5rem;
    animation:fadeUp 0.5s 0.1s ease both;
}
 
h1 .wave-word{
  color:var(--accent);
  position:relative;
  display:inline-block;
}
 
/* underline squiggle */
h1 .wave-word::after{
  content:'';
  position:absolute;
  bottom:-6px;left:0;right:0;height:6px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 8'%3E%3Cpath d='M0,4 C10,0 20,8 40,4 C60,0 70,8 80,4' stroke='%2329abe2' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center/40px 6px;
}
 
/* front details */

.blurb-details{
    font-size:.65em;
    color:var(--navy);
    max-width:500px;
    line-height:1.7;
    font-weight:bold;
    margin-bottom:2.5rem;
    animation:fadeUp 0.5s 0.2s ease both;
}
 
.blurb-btns{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    justify-content:center;
    margin-bottom:0.8rem;

    animation:fadeUp 0.5s 0.3s ease both;
}
 
.btn-blurb{
    padding:13px 30px;
    font-size:16px;
    border-radius:999px;
}
 
.blurb-note{
    font-size:.5em;
    color:var(--navy);
    font-weight:bold;
    opacity:0.6;
    animation:fadeUp 0.5s 0.4s ease both;
    margin-bottom:3rem;
}
 

/* ── SOCIAL PROOF ── */
.proof{
    margin-top: 150px;
    z-index: 90;
    background:var(--navy);
    padding:1.5rem 2rem;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:3rem;
    flex-wrap:wrap;
}
 
.proof-label{
    font-size:.75em;
    font-weight:bold;
    color:rgba(255,255,255,0.6);
    text-transform:uppercase;
    letter-spacing:0.1em;
    white-space:nowrap;}

 
.proof-features{
    display:flex;
    gap:2.5rem;
    flex-wrap:wrap;
    justify-content:center;}
 
.proof-feature{
    font-family:'Satoshi-Black',sans-serif;
    font-size:15px;
    color:rgba(255,255,255,0.55);
    transition:color 0.2s;
}
.proof-feature:hover{
    color:white;
}
 
/* ── FEATURES ── */
.features{
    max-width:1050px;
    margin:4rem auto;
    padding:0 2rem;
}
 
.section-header{
    text-align:center;
    margin-bottom:5rem;
}
 
h2{
    font-family:'Satoshi-Black',sans-serif;
    font-size:clamp(30px,4vw,48px);
    color:var(--navy);letter-spacing:-0.5px;
    margin-bottom:0.7rem;
}
 
.section-sub{
    font-size:0.65em;
    color:var(--navy);
    font-weight:normal;
    max-width:480px;
    margin:0 auto;
    z-index: 100;
}
 
.feat-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}
 
.feat-card{
    z-index: 10;
    background:white;
    border-radius:20px;
    padding:1.8rem;
    border:2px solid rgba(41,171,226,0.1);
    /* //navy hex code// */
    box-shadow:0 4px 20px rgb(10, 28, 56, 0.15);
    transition:transform 0.2s,box-shadow 0.2s;
}
 
.feat-card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 32px rgba(41,171,226,0.2);}
 
.feat-icon{
    width:48px;
    height:48px;border-radius:14px;
    background-color: rgb(33, 150, 243, 0.1);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    margin-bottom:1.1rem;
    border:1.5px solid rgba(41,171,226,0.15);
}
 
.feat-title{
    font-size:1em;
    font-weight:bold;
    margin-bottom:0.5rem;
    color:var(--navy);
    z-index: 100;
}
.feat-desc{
    font-size:0.6em;
    color:var(--navy);
    line-height:1.65;
    font-weight:lighter;
    z-index: 100;
}
 
 
/* ── shameless self plug BANNER ── */
.promo{
    max-width:820px;margin:6rem auto 5rem;padding:0 2rem;
    text-align:center;
    position:relative;
}
 
.promo-card{
    background:var(--accent);
    border-radius:28px;
    padding:4rem 2.5rem;
    position:relative;overflow:hidden;
    box-shadow:0 20px 60px rgb(10, 28, 56, 0.4);;
}
 
.promo-card::before, .promo-card::after{
    content:'';position:absolute;border-radius:50%;
    background:rgba(255,255,255,0.07);
}
.promo-card::before{
    width:400px;
    height:400px;
    bottom:-150px;
    right:-100px;
}
.promo-card::after{
    width:250px;
    height:250px;
    top:-80px;
    left:-60px;
}
 
.promo-card h2{
    color:white;
    margin-bottom:0.7rem;}
.promo-card p{
    color:rgba(255,255,255,0.75);
    font-size:0.65em;
    font-weight:normal;
    margin-bottom:2rem;
}
 
.btn-white{
    background:white;color:var(--blue);
    box-shadow:0 4px 18px rgba(0,0,0,0.12);
}
.btn-white:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,0,0,0.18);
}
 
 
@media(max-width:860px){
  .feat-grid{grid-template-columns:1fr 1fr;}
  nav .nav-links{display:none;}
}
 
@media(max-width:500px){
  .feat-grid{grid-template-columns:1fr;}
}