:root{
    --bg:#0b0f17;
    --card:#121a27;
    --text:#e7eefc;
    --muted:#b6c3dd;
    --line:rgba(231,238,252,.14);
    --accent:#7aa7ff;
    --accent2:#8bf1c9;
    --shadow: 0 10px 30px rgba(0,0,0,.35);
    --radius: 18px;
    --max: 1140px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    background: radial-gradient(1200px 800px at 15% 10%, rgba(122,167,255,.22), transparent 55%),
    radial-gradient(900px 700px at 85% 20%, rgba(139,241,201,.18), transparent 50%),
    var(--bg);
    color: var(--text);
    line-height: 1.55;
}

a{color:inherit}
.container{max-width:var(--max); margin:0 auto; padding: 0 20px;}
header{
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(10px);
    background: rgba(11,15,23,.75);
    border-bottom: 1px solid var(--line);
}

/* Give the nav more vertical space */
.nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 9px 0;   /* was ~14px → more breathing room */
    gap: 16px;
}
.brand{
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
}

.brand strong{
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: .2px;
}

.brand span{
    display:block;
    font-size: 12px;
    color: var(--muted);
    margin-top: 35px;
}

.navlinks{display:flex; gap:14px; align-items:center}
.navlinks a{
    text-decoration:none;
    padding: 8px 10px;
    border-radius: 12px;
    color: var(--muted);
}
.navlinks a:hover{background: rgba(231,238,252,.06); color: var(--text)}
.navlinks a.active{background: rgba(122,167,255,.14); color: var(--text); border: 1px solid rgba(122,167,255,.22)}

.btn{
    display:inline-flex; align-items:center; justify-content:center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 14px;
    text-decoration:none;
    border: 1px solid rgba(231,238,252,.16);
    background: rgba(231,238,252,.06);
    color: var(--text);
}
.btn:hover{transform: translateY(-1px); transition:.15s ease}
.btn.primary{
    border: 1px solid rgba(122,167,255,.35);
    background: linear-gradient(135deg, rgba(122,167,255,.25), rgba(139,241,201,.12));
}
.btn.small{padding: 9px 12px; border-radius: 12px; font-size: 14px}

.hero{
    padding: 56px 0 18px;
}
.herogrid{
    display:grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 26px;
    align-items: start;
}
h1{
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.08;
    margin: 12px 0 12px;
}
.lead{color: var(--muted); font-size: 18px; margin: 0 0 16px}
.pills{display:flex; flex-wrap:wrap; gap:10px; margin: 18px 0 8px}
.pill{
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(231,238,252,.14);
    background: rgba(231,238,252,.05);
    color: var(--muted);
    font-size: 13px;
}

.card{
    background: rgba(18,26,39,.75);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
}
.card h3{margin: 4px 0 8px}
.card p{margin: 0; color: var(--muted)}
.split{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.section{padding: 22px 0}
.section h2{margin:0 0 10px; font-size: 24px}
.section p{margin:0 0 12px; color: var(--muted)}
.grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px}
.grid2{display:grid; grid-template-columns: repeat(2, 1fr); gap: 16px}

.list{
    margin: 0; padding-left: 18px; color: var(--muted);
}
hr.sep{border:none;border-top:1px solid var(--line); margin: 22px 0}

.footer{
    padding: 26px 0 42px;
    color: var(--muted);
    border-top: 1px solid var(--line);
    margin-top: 26px;
}
.footer a{color: var(--muted)}
.footer small{display:block; margin-top: 10px}

.form{
    display:grid; gap: 12px;
}
label{font-size: 13px; color: var(--muted)}
input, textarea{
    width:100%;
    padding: 12px 12px;
    border-radius: 14px;
    background: rgba(11,15,23,.55);
    border: 1px solid rgba(231,238,252,.16);
    color: var(--text);
    outline: none;
}
textarea{min-height: 140px; resize: vertical}
input:focus, textarea:focus{border-color: rgba(122,167,255,.55)}

.kicker{
    display:inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(122,167,255,.28);
    background: rgba(122,167,255,.10);
    color: var(--text);
    font-size: 13px;
}

@media (max-width: 900px){
    .herogrid{grid-template-columns: 1fr; }
    .grid3{grid-template-columns: 1fr}
    .grid2{grid-template-columns: 1fr}
    .split{grid-template-columns: 1fr}
    .nav{flex-wrap:wrap}
}

/* Primary brand logo */
.logo-img{
    /*height: 60px;*/          /* ⬅️ main size control */
    width: auto;
    max-width: 240px;      /* prevents overgrowth */
    object-fit: contain;
    display: block;
}

.form-status{
    margin-top: 12px;
    font-size: 14px;
}

.form-status.sending{
    color: var(--muted);
}

.form-status.success{
    color: #4ade80; /* green */
}

.form-status.error{
    color: #f87171; /* red */
}

.brand > div > strong{
    display: none;
}

.credibility{
    margin: 10px 0 6px;
    font-size: 13px;
    color: var(--muted);
}

/* Mobile header / nav improvements */
@media (max-width: 900px){

    /* Let header content stack nicely */
    .nav{
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 0;
    }

    /* Brand stays on top */
    .brand{
        width: 100%;
        justify-content: flex-start;
    }

    /* Nav links become a 2-column grid */
    .navlinks{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        align-items: stretch;
    }

    /* Make each link/button full-width + consistent height */
    .navlinks a{
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 10px 10px;
        border-radius: 14px;
    }

    /* Make the CTA (Book a discovery call) span both columns */
    .navlinks a.btn.primary{
        grid-column: 1 / -1;
        padding: 12px 12px;
        font-weight: 600;
    }

    .navlinks a.btn.primary{
        white-space: nowrap;
    }

    .brand > div{
        display: none;
    }
}