
/* HorizonNode FiveM Hosting Page */
.hn-fivem-page{overflow:hidden;background:#05061f}
.hn-fivem-page *{box-sizing:border-box}

.hn-fivem-hero{
    position:relative;
    min-height:720px;
    padding:110px 22px 95px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:
      radial-gradient(circle at 78% 30%,rgba(0,143,254,.19),transparent 29%),
      radial-gradient(circle at 15% 15%,rgba(62,193,243,.08),transparent 25%),
      linear-gradient(180deg,#07082a,#05061f);
}
.hn-fivem-hero:before{
    content:"";
    position:absolute;inset:0;
    background-image:
      linear-gradient(rgba(62,193,243,.035) 1px,transparent 1px),
      linear-gradient(90deg,rgba(62,193,243,.035) 1px,transparent 1px);
    background-size:58px 58px;
}
.hn-fivem-hero-inner{
    position:relative;z-index:2;
    width:min(1360px,100%);
    margin:auto;
    display:grid;
    grid-template-columns:minmax(0,.95fr) minmax(540px,1.05fr);
    align-items:center;
    gap:72px;
}
.hn-fivem-badge{
    display:inline-flex;align-items:center;gap:9px;
    padding:10px 15px;margin-bottom:24px;
    border:1px solid rgba(62,193,243,.18);
    border-radius:999px;
    background:rgba(62,193,243,.06);
    color:#c8d5ef;
    font-size:10px;font-weight:800;
}
.hn-fivem-badge i{
    width:8px;height:8px;border-radius:50%;
    background:#42e98a;box-shadow:0 0 13px rgba(66,233,138,.7);
}
.hn-fivem-copy h1{
    margin:0;
    color:#fff;
    font-size:clamp(48px,5vw,76px);
    line-height:1.02;
    letter-spacing:-3px;
    font-weight:900;
}
.hn-fivem-copy h1 span{
    display:block;
    margin-top:8px;
    background:linear-gradient(90deg,#3ec1f3,#008ffe);
    -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hn-fivem-copy>p{
    max-width:720px;
    margin:27px 0 0;
    color:#a8b4d2;
    font-size:15px;
    line-height:1.85;
}
.hn-fivem-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:33px}
.hn-fivem-primary,.hn-fivem-secondary{
    min-height:55px;padding:0 26px;
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:10px;text-decoration:none;
    font-size:11px;font-weight:900;
    transition:.22s;
}
.hn-fivem-primary{background:linear-gradient(135deg,#3ec1f3,#008ffe);color:#03111c;box-shadow:0 15px 40px rgba(0,143,254,.28)}
.hn-fivem-secondary{border:1px solid rgba(62,193,243,.2);background:rgba(62,193,243,.05);color:#fff}
.hn-fivem-primary:hover,.hn-fivem-secondary:hover{transform:translateY(-3px)}
.hn-fivem-checks{margin-top:31px;display:flex;flex-wrap:wrap;gap:13px 21px}
.hn-fivem-checks span{display:flex;align-items:center;gap:8px;color:#cbd4ea;font-size:10px;font-weight:700}
.hn-fivem-checks b{width:21px;height:21px;display:grid;place-items:center;border-radius:50%;background:rgba(66,233,138,.1);color:#42e98a;font-size:9px}

/* txAdmin window */
.hn-fivem-panel{
    overflow:hidden;
    border:1px solid rgba(62,193,243,.2);
    border-radius:20px;
    background:#0a0c24;
    box-shadow:0 45px 120px rgba(0,0,0,.5),0 0 70px rgba(0,143,254,.1);
}
.hn-fivem-panel-head{
    height:62px;padding:0 20px;
    display:flex;align-items:center;justify-content:space-between;
    border-bottom:1px solid rgba(62,193,243,.11);
    background:#11142e;
}
.hn-fivem-panel-dots{display:flex;gap:7px}.hn-fivem-panel-dots i{width:9px;height:9px;border-radius:50%;background:#ff6174}.hn-fivem-panel-dots i:nth-child(2){background:#ffc247}.hn-fivem-panel-dots i:nth-child(3){background:#42e98a}
.hn-fivem-panel-head span{color:#cfd9f2;font-size:10px;font-weight:800}
.hn-fivem-panel-body{padding:26px}
.hn-fivem-server-card{
    padding:20px;border:1px solid rgba(62,193,243,.11);
    border-radius:13px;background:#12152f;
}
.hn-fivem-server-top{display:flex;justify-content:space-between;align-items:center;gap:15px}
.hn-fivem-server-name strong,.hn-fivem-server-name span{display:block}
.hn-fivem-server-name strong{font-size:15px}.hn-fivem-server-name span{margin-top:5px;color:#7885a5;font-size:9px}
.hn-fivem-online{display:flex;align-items:center;gap:7px;color:#42e98a;font-size:8px;font-weight:900}.hn-fivem-online i{width:7px;height:7px;border-radius:50%;background:#42e98a;box-shadow:0 0 11px rgba(66,233,138,.7)}
.hn-fivem-stats{margin-top:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hn-fivem-stat{padding:15px;border-radius:10px;background:#0d1026;border:1px solid rgba(62,193,243,.08)}
.hn-fivem-stat span,.hn-fivem-stat strong{display:block}.hn-fivem-stat span{color:#74809f;font-size:7px;text-transform:uppercase}.hn-fivem-stat strong{margin-top:7px;font-size:14px}
.hn-fivem-console{
    margin-top:18px;
    min-height:240px;
    padding:19px;
    border-radius:12px;
    background:#060817;
    font-family:Consolas,monospace;
    color:#9ba8c4;
    font-size:10px;
    line-height:1.85;
}
.hn-fivem-console .green{color:#42e98a}.hn-fivem-console .blue{color:#3ec1f3}.hn-fivem-console .gray{color:#5f6a85}
.hn-fivem-panel-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.hn-fivem-panel-actions button{min-height:43px;border:1px solid rgba(62,193,243,.16);border-radius:9px;background:rgba(62,193,243,.06);color:#fff;font:800 9px Montserrat}
.hn-fivem-panel-actions .stop{color:#ff8797;border-color:rgba(255,91,111,.2);background:rgba(255,91,111,.07)}

.hn-fivem-section{position:relative;padding:110px 22px}
.hn-fivem-section-inner{width:min(1320px,100%);margin:auto}
.hn-fivem-heading{max-width:780px;margin:0 auto 60px;text-align:center}
.hn-fivem-heading span{color:#3ec1f3;font-size:10px;font-weight:900;letter-spacing:2px}
.hn-fivem-heading h2{margin:15px 0;color:#fff;font-size:clamp(38px,4vw,56px);font-weight:900;letter-spacing:-2px}
.hn-fivem-heading p{margin:0;color:#9eabc9;font-size:14px;line-height:1.8}

/* plans */
.hn-fivem-plans{background:#080922}
.hn-fivem-plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hn-fivem-plan{
    position:relative;
    padding:30px;
    display:flex;
    flex-direction:column;
    border:1px solid rgba(62,193,243,.14);
    border-radius:17px;
    background:linear-gradient(145deg,#171a3b,#0d1029);
    transition:.25s;
}
.hn-fivem-plan:hover{transform:translateY(-7px);border-color:rgba(62,193,243,.48);box-shadow:0 25px 65px rgba(0,0,0,.28)}
.hn-fivem-plan.featured{border-color:#3ec1f3;box-shadow:0 0 35px rgba(0,143,254,.09)}
.hn-fivem-plan-badge{position:absolute;right:18px;top:-13px;padding:7px 12px;border-radius:999px;background:linear-gradient(135deg,#3ec1f3,#008ffe);color:#03111c;font-size:8px;font-weight:900}
.hn-fivem-plan-label{color:#3ec1f3;font-size:9px;font-weight:900;letter-spacing:1px}
.hn-fivem-plan h3{margin:11px 0 8px;font-size:23px}
.hn-fivem-plan>p{min-height:60px;color:#93a0bf;font-size:11px;line-height:1.7}
.hn-fivem-price{margin:18px 0 24px;color:#8895b4;font-size:10px}
.hn-fivem-price strong{color:#fff;font-size:35px;font-weight:900}.hn-fivem-price small{font-size:10px}
.hn-fivem-plan ul{margin:0 0 26px;padding:0;list-style:none}
.hn-fivem-plan li{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05);color:#c7d1e8;font-size:10px}
.hn-fivem-plan li:before{content:"✓";margin-right:9px;color:#42e98a;font-weight:900}
.hn-fivem-plan a{min-height:48px;margin-top:auto;display:flex;align-items:center;justify-content:center;border:1px solid rgba(62,193,243,.18);border-radius:9px;background:rgba(62,193,243,.06);color:#fff;text-decoration:none;font-size:9px;font-weight:900}
.hn-fivem-plan.featured a{border:0;background:linear-gradient(135deg,#3ec1f3,#008ffe);color:#03111c}

/* features */
.hn-fivem-features{background:#05061f}
.hn-fivem-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hn-fivem-feature{padding:30px;border:1px solid rgba(62,193,243,.13);border-radius:16px;background:linear-gradient(145deg,#161938,#0d1028)}
.hn-fivem-feature-icon{width:57px;height:57px;display:grid;place-items:center;border-radius:14px;background:rgba(62,193,243,.08);font-size:26px}
.hn-fivem-feature h3{margin:20px 0 11px;font-size:18px}.hn-fivem-feature p{margin:0;color:#9ca9c7;font-size:12px;line-height:1.75}

/* txAdmin section */
.hn-fivem-manage{background:#080922}
.hn-fivem-manage-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:65px;align-items:center}
.hn-fivem-manage-copy>span{color:#3ec1f3;font-size:10px;font-weight:900;letter-spacing:2px}
.hn-fivem-manage-copy h2{margin:14px 0 18px;font-size:clamp(38px,4vw,54px);letter-spacing:-2px}
.hn-fivem-manage-copy p{color:#9eabc9;font-size:13px;line-height:1.85}
.hn-fivem-manage-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.hn-fivem-manage-card{padding:25px;border:1px solid rgba(62,193,243,.13);border-radius:15px;background:#12152f}
.hn-fivem-manage-card strong{display:block;font-size:16px}.hn-fivem-manage-card span{display:block;margin-top:8px;color:#8693b2;font-size:10px;line-height:1.6}

/* faq */
.hn-fivem-faq{background:#05061f}
.hn-fivem-faq-list{max-width:900px;margin:auto;display:grid;gap:13px}
.hn-fivem-faq-item{border:1px solid rgba(62,193,243,.13);border-radius:13px;background:#11142d;overflow:hidden}
.hn-fivem-faq-item button{width:100%;padding:20px 22px;display:flex;justify-content:space-between;border:0;background:none;color:#fff;text-align:left;font:800 12px Montserrat;cursor:pointer}
.hn-fivem-faq-item p{display:none;margin:0;padding:0 22px 20px;color:#96a3c1;font-size:11px;line-height:1.75}
.hn-fivem-faq-item.open p{display:block}.hn-fivem-faq-item.open button span{transform:rotate(45deg)}

.hn-fivem-cta{padding:90px 22px;background:radial-gradient(circle at center,rgba(0,143,254,.13),transparent 48%),#080922;text-align:center}
.hn-fivem-cta-box{width:min(950px,100%);margin:auto;padding:55px;border:1px solid rgba(62,193,243,.17);border-radius:21px;background:rgba(15,18,48,.9)}
.hn-fivem-cta h2{margin:0;font-size:clamp(36px,4vw,54px);letter-spacing:-2px}.hn-fivem-cta p{max-width:650px;margin:18px auto 28px;color:#9faccc;font-size:13px;line-height:1.8}

@media(max-width:1120px){
 .hn-fivem-hero-inner,.hn-fivem-manage-wrap{grid-template-columns:1fr}
 .hn-fivem-copy{text-align:center}.hn-fivem-copy>p{margin-left:auto;margin-right:auto}.hn-fivem-actions,.hn-fivem-checks{justify-content:center}.hn-fivem-panel{width:min(760px,100%);margin:auto}
 .hn-fivem-plan-grid{grid-template-columns:repeat(2,1fr)}
 .hn-fivem-feature-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
 .hn-fivem-hero{min-height:auto;padding:80px 17px}.hn-fivem-copy h1{letter-spacing:-2px}
 .hn-fivem-plan-grid,.hn-fivem-feature-grid,.hn-fivem-manage-list{grid-template-columns:1fr}
 .hn-fivem-stats{grid-template-columns:1fr}
 .hn-fivem-cta-box{padding:38px 22px}
}
