:root{
    --blue:#2563eb;
    --purple:#7c3aed;
    --cyan:#06b6d4;
    --dark:#0f172a;
    --text:#334155;
    --muted:#64748b;
    --white:#ffffff;
    --gradient:linear-gradient(135deg,#2563eb,#7c3aed,#06b6d4);
    --shadow:0 18px 45px rgba(15,23,42,.08);
}

*{box-sizing:border-box}

body{
    margin:0;
    background:#ffffff;
    color:var(--text);
    font-family:Arial, sans-serif;
}

.johnbw-header{
    background:#ffffff;
    position:sticky;
    top:0;
    z-index:9999;
    box-shadow:0 4px 30px rgba(0,0,0,.06);
}

.johnbw-header-inner{
    max-width:1600px;
    margin:auto;
    padding:18px 28px;
    display:flex;
    align-items:center;
    gap:28px;
}

.johnbw-brand{min-width:260px}

.johnbw-logo{
    text-decoration:none;
    font-size:28px;
    font-weight:900;
    background:var(--gradient);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.johnbw-tagline{
    font-size:12px;
    color:var(--muted);
    margin-top:4px;
}

.johnbw-nav{flex:1}

.johnbw-menu{
    display:flex;
    gap:22px;
    list-style:none;
    padding:0;
    margin:0;
    align-items:center;
    flex-wrap:wrap;
}

.johnbw-menu > li{position:relative}

.johnbw-menu > li > a{
    text-decoration:none;
    color:var(--dark);
    font-weight:800;
    font-size:14px;
    padding:16px 0;
    display:block;
}

.johnbw-menu > li > a:hover{color:var(--blue)}

.sub-menu{
    position:absolute;
    top:100%;
    left:0;
    min-width:280px;
    background:#ffffff;
    border-radius:22px;
    box-shadow:0 22px 60px rgba(15,23,42,.12);
    list-style:none;
    padding:16px 0;
    opacity:0;
    visibility:hidden;
    transform:translateY(16px);
    transition:.35s ease;
}

.johnbw-menu li:hover > .sub-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.sub-menu a{
    display:block;
    text-decoration:none;
    color:var(--text);
    font-weight:700;
    padding:12px 22px;
}

.sub-menu a:hover{
    color:var(--blue);
    background:#f8fafc;
}

.johnbw-hamburger{
    display:none;
    width:48px;
    height:48px;
    border:1px solid #e5e7eb;
    background:#fff;
    border-radius:14px;
    cursor:pointer;
}

.johnbw-hamburger span{
    display:block;
    width:24px;
    height:3px;
    background:var(--dark);
    margin:5px auto;
    border-radius:999px;
}

.johnbw-hero-small{
    padding:90px 24px;
    text-align:center;
    background:
        radial-gradient(circle at 20% 20%,rgba(37,99,235,.08),transparent 30%),
        radial-gradient(circle at 80% 20%,rgba(124,58,237,.08),transparent 30%),
        #fff;
}

.johnbw-hero-small h1{
    font-size:clamp(42px,7vw,78px);
    margin:0 0 18px;
    background:var(--gradient);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.johnbw-hero-small p{
    font-size:20px;
    max-width:900px;
    margin:auto;
    line-height:1.7;
    color:var(--muted);
}

.johnbw-section,.johnbw-page{
    padding:80px 24px;
    background:#fff;
}

.johnbw-container{
    max-width:1200px;
    margin:auto;
}

.johnbw-grid{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:26px;
}

.johnbw-card{
    background:#fff;
    border:1px solid #eef2f7;
    border-radius:28px;
    padding:30px;
    box-shadow:var(--shadow);
    transition:.35s ease;
}

.johnbw-card:hover{
    transform:translateY(-8px);
    box-shadow:0 24px 70px rgba(15,23,42,.13);
}

.johnbw-card h3{
    margin-top:0;
    color:var(--dark);
}

.johnbw-card p{
    color:var(--muted);
    line-height:1.7;
}

.johnbw-card-link{
    display:inline-block;
    margin-top:12px;
    color:#fff;
    text-decoration:none;
    background:var(--gradient);
    padding:10px 18px;
    border-radius:999px;
    font-weight:800;
}

.johnbw-footer{
    background:#fff;
    border-top:1px solid #eef2f7;
    padding:50px 24px;
    text-align:center;
}

.johnbw-footer h2{
    background:var(--gradient);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

@media(max-width:1000px){
    .johnbw-header-inner{
        flex-wrap:wrap;
    }

    .johnbw-hamburger{
        display:block;
        margin-left:auto;
    }

    .johnbw-nav{
        display:none;
        width:100%;
    }

    .johnbw-nav.active{
        display:block;
    }

    .johnbw-menu{
        flex-direction:column;
        align-items:stretch;
        gap:0;
        margin-top:15px;
        border:1px solid #eef2f7;
        border-radius:22px;
        padding:10px;
        background:#fff;
    }

    .johnbw-menu > li{
        border-bottom:1px solid #f1f5f9;
    }

    .johnbw-menu > li:last-child{
        border-bottom:0;
    }

    .sub-menu{
        position:static;
        opacity:1;
        visibility:visible;
        transform:none;
        box-shadow:none;
        padding:0 0 10px 18px;
    }
}