/*
|--------------------------------------------------------------------------
| WEBHATSHOSTING.NET
|--------------------------------------------------------------------------
| Module Page Accueil Premium Final
*/

:root{
    --wh-bg:#05060a;
    --wh-dark:#0b0d14;
    --wh-card:#11141d;
    --wh-card2:#171b27;
    --wh-border:#2a3040;
    --wh-red:#ff1025;
    --wh-red2:#950012;
    --wh-muted:#b9bfce;
}

.wh-home-hero{
    padding:105px 7% 80px;
    background:
        radial-gradient(circle at 78% 25%,rgba(255,16,37,.30),transparent 32%),
        linear-gradient(135deg,#06070c,#170006 70%);
    color:#fff;
}
.wh-home-inner{
    max-width:1450px;
    margin:auto;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:55px;
    align-items:center;
}
.wh-eyebrow{
    display:inline-flex;
    color:var(--wh-red);
    border:1px solid rgba(255,16,37,.55);
    background:rgba(255,16,37,.08);
    padding:9px 16px;
    border-radius:40px;
    font-weight:900;
    margin-bottom:22px;
}
.wh-home-hero h1{
    font-size:68px;
    line-height:1.02;
    letter-spacing:-2px;
    max-width:850px;
}
.wh-home-hero p{
    color:var(--wh-muted);
    font-size:20px;
    line-height:1.75;
    margin-top:24px;
    max-width:780px;
}
.wh-actions{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin-top:34px;
}
.wh-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 24px;
    border-radius:14px;
    background:linear-gradient(135deg,var(--wh-red),var(--wh-red2));
    color:#fff;
    font-weight:900;
    border:1px solid var(--wh-red);
    text-decoration:none;
    box-shadow:0 16px 40px rgba(255,16,37,.25);
}
.wh-btn.secondary{
    background:transparent;
    box-shadow:none;
}
.wh-showcase{
    background:linear-gradient(145deg,rgba(17,20,29,.95),rgba(8,10,16,.92));
    border:1px solid var(--wh-border);
    border-radius:34px;
    padding:24px;
    box-shadow:0 35px 90px rgba(0,0,0,.45);
}
.wh-window{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
}
.wh-dots{
    display:flex;
    gap:7px;
}
.wh-dots span{
    width:11px;
    height:11px;
    border-radius:50%;
    background:#3b4254;
}
.wh-dots span:first-child{
    background:var(--wh-red);
}
.wh-window small{
    background:#05060a;
    border:1px solid #252c3c;
    color:#888fa3;
    padding:8px 13px;
    border-radius:30px;
}
.wh-monitor{
    min-height:360px;
    border-radius:26px;
    background:
        radial-gradient(circle at 80% 25%,rgba(255,16,37,.25),transparent 38%),
        linear-gradient(135deg,#0b0d14,#1b0006);
    border:1px solid #303747;
    padding:26px;
}
.wh-monitor h3{
    color:#fff;
    font-size:28px;
    margin-bottom:8px;
}
.wh-monitor p{
    color:#aeb5c7;
    line-height:1.6;
}
.wh-monitor-grid{
    margin-top:24px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}
.wh-monitor-grid div{
    background:rgba(5,6,10,.72);
    border:1px solid #303747;
    border-radius:18px;
    padding:18px;
}
.wh-monitor-grid strong{
    display:block;
    color:var(--wh-red);
    font-size:30px;
    margin-bottom:5px;
}
.wh-monitor-grid span{
    color:#d5d9e5;
    font-size:14px;
}

.wh-section{
    padding:82px 7%;
    color:#fff;
    background:#05060a;
}
.wh-title{
    text-align:center;
    margin-bottom:52px;
}
.wh-title small{
    color:var(--wh-red);
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.wh-title h2{
    font-size:44px;
    margin:10px 0 12px;
}
.wh-title p{
    color:var(--wh-muted);
    font-size:18px;
    line-height:1.65;
    max-width:860px;
    margin:auto;
}
.wh-expertise,.wh-web,.wh-why{
    background:#080a10;
}
.wh-plans,.wh-infra{
    background:linear-gradient(180deg,#05060a,#0b0d14);
}
.wh-design{
    background:#0b0d14;
}
.wh-expertise-grid,.wh-design-grid{
    max-width:1450px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}
.wh-expert,.wh-design-card,.wh-why-grid article{
    background:linear-gradient(180deg,var(--wh-card2),var(--wh-card));
    border:1px solid var(--wh-border);
    border-radius:24px;
    padding:28px;
}
.wh-icon{
    font-size:36px;
    margin-bottom:18px;
}
.wh-expert h3,.wh-design-card h3,.wh-why-grid h3{
    color:#fff;
    font-size:23px;
    margin-bottom:12px;
}
.wh-expert p,.wh-design-card p,.wh-why-grid p{
    color:var(--wh-muted);
    line-height:1.55;
}
.wh-design-card strong{
    display:block;
    color:var(--wh-red);
    font-size:28px;
    margin-top:22px;
}
.wh-plan-grid{
    max-width:1450px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}
.wh-plan{
    position:relative;
    background:linear-gradient(180deg,#171b27,#10131c);
    border:1px solid var(--wh-border);
    border-radius:28px;
    padding:30px;
    box-shadow:0 22px 55px rgba(0,0,0,.28);
    overflow:hidden;
}
.wh-plan.featured{
    border:2px solid var(--wh-red);
    transform:translateY(-10px);
}
.wh-badge{
    position:absolute;
    top:18px;
    right:18px;
    background:var(--wh-red);
    color:#fff;
    border-radius:30px;
    padding:7px 12px;
    font-size:12px;
    font-weight:900;
}
.wh-plan h3{
    font-size:25px;
    color:#fff;
    margin-bottom:12px;
}
.wh-plan p{
    color:var(--wh-muted);
    line-height:1.55;
    min-height:78px;
}
.wh-price{
    color:var(--wh-red);
    font-size:38px;
    font-weight:900;
    margin:24px 0;
}
.wh-plan .wh-btn{
    width:100%;
}
.wh-partners{
    max-width:1450px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}
.wh-partners a{
    background:#fff;
    color:#111;
    border-radius:16px;
    padding:16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-weight:900;
    text-decoration:none;
}
.wh-partners small{
    color:#666;
}
.wh-why-grid{
    max-width:1450px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}
.wh-cta{
    background:
        radial-gradient(circle at center,rgba(255,16,37,.30),transparent 35%),
        linear-gradient(135deg,#1c0006,#07080d);
    text-align:center;
}
.wh-cta h2{
    font-size:50px;
    margin-bottom:15px;
}
.wh-cta p{
    color:#d7dbe7;
    font-size:20px;
    line-height:1.65;
    margin-bottom:30px;
}

.wh-admin-card,.wh-admin-page{
    background:#11141d;
    border:1px solid #2a3040;
    border-radius:24px;
    padding:28px;
    color:#fff;
}
.wh-admin-head,.wh-admin-title{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center;
    margin-bottom:25px;
}
.wh-admin-head h1,.wh-admin-title h1{
    font-size:34px;
}
.wh-admin-head p,.wh-admin-title p{
    color:#b9bfce;
    margin-top:8px;
}
.wh-status{
    border:1px solid #ff1025;
    color:#ff1025;
    padding:10px 14px;
    border-radius:30px;
    font-weight:900;
}
.wh-alert{
    background:#102918;
    border:1px solid #2ecc71;
    color:#fff;
    padding:14px;
    border-radius:12px;
    margin-bottom:20px;
}
.wh-admin-table{
    width:100%;
    border-collapse:collapse;
}
.wh-admin-table th,.wh-admin-table td{
    padding:15px;
    border-bottom:1px solid #2a3040;
    text-align:left;
}
.wh-admin-table th{
    color:#ff1025;
}
.wh-admin-btn,.wh-savebar button{
    background:#ff1025;
    color:#fff;
    border:0;
    padding:12px 16px;
    border-radius:10px;
    font-weight:900;
    text-decoration:none;
}
.wh-form-block{
    background:#0b0d14;
    border:1px solid #2a3040;
    border-radius:22px;
    padding:24px;
    margin-bottom:22px;
}
.wh-form-block h2{
    color:#ff1025;
    margin-bottom:18px;
}
.wh-grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}
.wh-grid-2 .full{
    grid-column:1/-1;
}
.wh-admin-form label{
    display:block;
    font-weight:900;
    margin-bottom:8px;
}
.wh-admin-form input,.wh-admin-form textarea{
    width:100%;
    background:#05060a;
    border:1px solid #303747;
    color:#fff;
    padding:14px;
    border-radius:12px;
}
.wh-help{
    color:#b9bfce;
    margin-bottom:10px;
}
.wh-check{
    display:flex!important;
    gap:10px;
    align-items:center;
}
.wh-check input{
    width:auto;
}
.wh-savebar{
    position:sticky;
    bottom:0;
    background:rgba(5,6,10,.88);
    backdrop-filter:blur(14px);
    border:1px solid #2a3040;
    border-radius:18px;
    padding:18px;
    display:flex;
    justify-content:flex-end;
    gap:12px;
}
.wh-cancel{
    background:#0b0d14;
    color:#fff;
    border:1px solid #303747;
    padding:12px 16px;
    border-radius:10px;
    text-decoration:none;
}

@media(max-width:1180px){
    .wh-home-inner{grid-template-columns:1fr}
    .wh-plan-grid,.wh-expertise-grid,.wh-design-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
    .wh-home-hero{padding:68px 6%}
    .wh-home-hero h1{font-size:42px}
    .wh-monitor-grid,.wh-plan-grid,.wh-expertise-grid,.wh-design-grid,.wh-why-grid,.wh-partners,.wh-grid-2{grid-template-columns:1fr}
    .wh-plan.featured{transform:none}
    .wh-section{padding:60px 6%}
    .wh-title h2{font-size:34px}
    .wh-cta h2{font-size:36px}
    .wh-admin-head,.wh-admin-title{display:block}
}

/* Homepage Cubes */
.wh-cubes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1200px;margin:0 auto;padding:0 20px}
.wh-cube{background:#11141d;border:1px solid #2a3040;border-radius:22px;padding:28px;text-decoration:none;color:#fff;text-align:center;transition:all .3s;position:relative;overflow:hidden}
.wh-cube:hover{border-color:#ff1025;transform:translateY(-4px);box-shadow:0 8px 30px rgba(255,16,37,.15)}
.wh-cube .wh-badge{position:absolute;top:12px;right:12px;background:#ff1025;color:#fff;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:900}
.wh-cube img{width:80px;height:80px;object-fit:cover;border-radius:16px;margin:0 auto 16px}
.wh-cube-icon{font-size:48px;margin-bottom:16px}
.wh-cube h3{font-size:18px;font-weight:900;margin-bottom:8px}
.wh-cube p{color:#aeb6c8;font-size:14px;margin-bottom:12px;line-height:1.5}
.wh-cube-price{color:#ff1025;font-weight:900;font-size:16px}
@media(max-width:1024px){.wh-cubes-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.wh-cubes-grid{grid-template-columns:1fr}}