
/* =========================
   HorizonNode Homepage
========================= */
.hn-home{overflow:hidden;background:#05061f}
.hn-home *{box-sizing:border-box}

.hn-hero{
    position:relative;
    min-height:760px;
    padding:105px 22px 100px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:
        radial-gradient(circle at 76% 34%,rgba(0,143,254,.18),transparent 26%),
        radial-gradient(circle at 14% 16%,rgba(62,193,243,.09),transparent 27%),
        linear-gradient(180deg,#07082a 0%,#05061f 100%);
}
.hn-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;
    pointer-events:none;
}
.hn-hero:after{
    content:"";
    position:absolute;
    width:720px;height:720px;
    right:-260px;top:50px;
    border-radius:50%;
    background:rgba(0,143,254,.08);
    filter:blur(80px);
}
.hn-hero-inner{
    position:relative;z-index:2;
    width:min(1380px,100%);
    margin:auto;
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(560px,1.1fr);
    align-items:center;
    gap:78px;
}
.hn-hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:25px;
    padding:10px 15px;
    border:1px solid rgba(62,193,243,.18);
    border-radius:999px;
    background:rgba(62,193,243,.06);
    color:#c6d6f7;
    font-size:11px;
    font-weight:750;
}
.hn-hero-status{
    width:8px;height:8px;border-radius:50%;
    background:#42e98a;
    box-shadow:0 0 14px rgba(66,233,138,.75);
}
.hn-hero h1{
    max-width:760px;
    margin:0;
    color:#fff;
    font-size:clamp(48px,5vw,78px);
    font-weight:900;
    letter-spacing:-3.4px;
    line-height:1.02;
}
.hn-hero h1 span{
    display:block;
    margin-top:8px;
    background:linear-gradient(90deg,#3ec1f3,#008ffe);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.hn-hero-content>p{
    max-width:720px;
    margin:28px 0 0;
    color:#aab6d5;
    font-size:16px;
    line-height:1.85;
}
.hn-hero-buttons{display:flex;gap:15px;flex-wrap:wrap;margin-top:34px}
.hn-hero-primary,.hn-hero-secondary{
    min-height:56px;
    padding:0 27px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    text-decoration:none;
    font-size:12px;
    font-weight:900;
    transition:.22s ease;
}
.hn-hero-primary{
    background:linear-gradient(135deg,#3ec1f3,#008ffe);
    color:#03111c;
    box-shadow:0 16px 40px rgba(0,143,254,.28);
}
.hn-hero-secondary{
    border:1px solid rgba(62,193,243,.22);
    background:rgba(62,193,243,.055);
    color:#fff;
}
.hn-hero-primary:hover,.hn-hero-secondary:hover{transform:translateY(-3px)}
.hn-hero-features{
    margin-top:34px;
    display:flex;
    flex-wrap:wrap;
    gap:13px 22px;
}
.hn-hero-features div{
    display:flex;align-items:center;gap:8px;
    color:#c9d3ed;font-size:11px;font-weight:700;
}
.hn-hero-features span{
    width:22px;height:22px;display:grid;place-items:center;
    border-radius:50%;background:rgba(66,233,138,.1);
    color:#42e98a;font-size:10px;font-weight:900;
}

/* panel */
.hn-panel-window{
    overflow:hidden;
    border:1px solid rgba(62,193,243,.2);
    border-radius:20px;
    background:#0b0d25;
    box-shadow:0 45px 120px rgba(0,0,0,.5),0 0 75px rgba(0,143,254,.11);
    transform:perspective(1200px) rotateY(-3deg) rotateX(1deg);
}
.hn-panel-header{
    height:65px;padding:0 22px;
    display:flex;align-items:center;gap:18px;
    border-bottom:1px solid rgba(62,193,243,.12);
    background:#11142f;
    color:#dbe4fb;font-size:11px;font-weight:800;
}
.hn-panel-dots{display:flex;gap:7px}
.hn-panel-dots span{width:9px;height:9px;border-radius:50%;background:#ff6174}
.hn-panel-dots span:nth-child(2){background:#ffc247}
.hn-panel-dots span:nth-child(3){background:#42e98a}
.hn-panel-body{padding:26px}
.hn-panel-server-top{display:flex;justify-content:space-between;gap:20px}
.hn-panel-server-status,.hn-panel-location{
    display:flex;align-items:center;gap:8px;
    color:#8f9dbc;font-size:9px;font-weight:800;
    text-transform:uppercase;letter-spacing:.7px;
}
.hn-panel-server-status span{width:8px;height:8px;border-radius:50%;background:#42e98a;box-shadow:0 0 12px rgba(66,233,138,.7)}
.hn-panel-server-title{
    margin:28px 0 32px;padding:21px;
    display:flex;align-items:center;gap:15px;
    border:1px solid rgba(62,193,243,.1);
    border-radius:14px;background:#12152f;
}
.hn-panel-server-icon{
    width:54px;height:54px;display:grid;place-items:center;
    border-radius:13px;background:linear-gradient(135deg,#3ec1f3,#008ffe);
    color:#03111c;font-size:15px;font-weight:900;
}
.hn-panel-server-title strong,.hn-panel-server-title small{display:block}
.hn-panel-server-title strong{font-size:15px}
.hn-panel-server-title small{margin-top:6px;color:#7c89aa;font-size:9px}
.hn-panel-stat{margin-top:22px}
.hn-panel-stat-label{display:flex;justify-content:space-between;color:#aab5cf;font-size:9px;font-weight:750}
.hn-panel-progress{height:8px;margin-top:10px;overflow:hidden;border-radius:999px;background:#060817}
.hn-panel-progress span{height:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,#3ec1f3,#008ffe);box-shadow:0 0 12px rgba(62,193,243,.45)}
.hn-panel-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:30px}
.hn-panel-buttons button{
    min-height:43px;border:1px solid rgba(62,193,243,.17);border-radius:9px;
    background:rgba(62,193,243,.07);color:#fff;font:800 9px Montserrat;
}
.hn-panel-buttons .hn-panel-stop{border-color:rgba(255,91,111,.22);background:rgba(255,91,111,.08);color:#ff8392}

/* shared */
.hn-home-section{position:relative;padding:110px 22px}
.hn-section-inner{position:relative;z-index:2;width:min(1320px,100%);margin:auto}
.hn-section-title{max-width:780px;margin:0 auto 62px;text-align:center}
.hn-section-title>span{color:#3ec1f3;font-size:11px;font-weight:900;letter-spacing:2px}
.hn-section-title h2{margin:15px 0;color:#fff;font-size:clamp(38px,4.2vw,58px);font-weight:900;letter-spacing:-2px;line-height:1.08}
.hn-section-title p{margin:0;color:#9faccd;font-size:15px;line-height:1.8}

/* hosting */
.hn-services{background:#080922}
.hn-services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.hn-service-card{
    position:relative;padding:38px;border:1px solid rgba(62,193,243,.15);
    border-radius:19px;background:linear-gradient(145deg,#171a3b,#0e102a);
    transition:.25s;
}
.hn-service-card:hover{transform:translateY(-7px);border-color:rgba(62,193,243,.48);box-shadow:0 25px 60px rgba(0,0,0,.3)}
.hn-service-card.hn-featured{border-color:#3ec1f3}
.hn-featured-tag{position:absolute;right:23px;top:-14px;padding:8px 14px;border-radius:999px;background:linear-gradient(135deg,#3ec1f3,#008ffe);color:#03111c;font-size:9px;font-weight:900}
.hn-service-icon{width:66px;height:66px;display:grid;place-items:center;border:1px solid rgba(62,193,243,.2);border-radius:15px;background:rgba(62,193,243,.08);font-size:30px}
.hn-service-card h3{margin:24px 0 13px;font-size:25px}
.hn-service-card p{color:#9eabca;font-size:13px;line-height:1.8}
.hn-service-card ul{padding:0;margin:25px 0;display:grid;grid-template-columns:1fr 1fr;gap:11px;list-style:none}
.hn-service-card li{color:#cbd5ec;font-size:10px}
.hn-service-card li:before{content:"✓";margin-right:8px;color:#42e98a;font-weight:900}
.hn-service-price{color:#8895b5;font-size:10px}.hn-service-price strong{display:block;margin-top:7px;color:#fff;font-size:32px}
.hn-service-card>a{min-height:50px;margin-top:26px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:linear-gradient(135deg,#3ec1f3,#008ffe);color:#03111c;text-decoration:none;font-size:10px;font-weight:900}

/* features */
.hn-features{background:radial-gradient(circle at 85% 15%,rgba(0,143,254,.09),transparent 30%),#05061f}
.hn-features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hn-feature-card{padding:30px;border:1px solid rgba(62,193,243,.13);border-radius:16px;background:linear-gradient(145deg,#171a3a,#0e102b);transition:.25s}
.hn-feature-card:hover{transform:translateY(-6px);border-color:rgba(62,193,243,.45)}
.hn-feature-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:14px;background:rgba(62,193,243,.08);font-size:27px}
.hn-feature-card h3{margin:20px 0 12px;font-size:18px}.hn-feature-card p{margin:0;color:#9daac9;font-size:12px;line-height:1.75}

/* panel showcase */
.hn-panel-showcase{background:#080922}
.hn-panel-showcase-inner{display:grid;grid-template-columns:.82fr 1.18fr;align-items:center;gap:70px}
.hn-panel-eyebrow{color:#3ec1f3;font-size:11px;font-weight:900;letter-spacing:2px}
.hn-panel-showcase-content h2{margin:15px 0 0;font-size:clamp(38px,4vw,58px);line-height:1.08;letter-spacing:-2px}
.hn-panel-showcase-content>p{color:#a2afce;font-size:14px;line-height:1.85}
.hn-panel-feature-list{margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:21px}
.hn-panel-feature-item{display:flex;gap:11px}.hn-panel-feature-check{width:27px;height:27px;display:grid;place-items:center;flex:none;border-radius:8px;background:rgba(66,233,138,.09);color:#42e98a;font-size:11px;font-weight:900}
.hn-panel-feature-item strong,.hn-panel-feature-item span{display:block}.hn-panel-feature-item strong{font-size:11px}.hn-panel-feature-item span{margin-top:5px;color:#7f8cab;font-size:9px;line-height:1.55}
.hn-panel-showcase-button{min-height:53px;margin-top:34px;padding:0 24px;display:inline-flex;align-items:center;gap:12px;border-radius:9px;background:linear-gradient(135deg,#3ec1f3,#008ffe);color:#03111c;text-decoration:none;font-size:11px;font-weight:900}

/* dashboard */
.hn-dashboard-window{overflow:hidden;border:1px solid rgba(62,193,243,.17);border-radius:18px;background:#0c0e26;box-shadow:0 35px 90px rgba(0,0,0,.45)}
.hn-dashboard-topbar{height:62px;padding:0 17px;display:flex;align-items:center;gap:11px;background:#11142f;border-bottom:1px solid rgba(62,193,243,.1)}
.hn-dashboard-logo{width:37px;height:37px;display:grid;place-items:center;border-radius:10px;background:rgba(62,193,243,.09);color:#3ec1f3;font-size:10px;font-weight:900}
.hn-dashboard-server-name{flex:1}.hn-dashboard-server-name strong,.hn-dashboard-server-name span{display:block}.hn-dashboard-server-name strong{font-size:10px}.hn-dashboard-server-name span{margin-top:4px;color:#7a86a7;font-size:7px}
.hn-dashboard-user{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#3ec1f3,#008ffe);color:#03111c;font-size:9px;font-weight:900}
.hn-dashboard-layout{display:grid;grid-template-columns:140px 1fr;min-height:480px}
.hn-dashboard-sidebar{padding:16px 10px;background:#0e1028;border-right:1px solid rgba(62,193,243,.09)}
.hn-dashboard-side-item{min-height:38px;padding:0 10px;display:flex;align-items:center;gap:8px;border-radius:7px;color:#7f8cab;font-size:8px;font-weight:700}
.hn-dashboard-side-item.active{background:rgba(62,193,243,.09);color:#fff}.hn-dashboard-side-item span{width:16px;text-align:center;color:#3ec1f3}
.hn-dashboard-main{padding:23px}.hn-dashboard-title-row{display:flex;justify-content:space-between;align-items:center}
.hn-dashboard-status{display:flex;align-items:center;gap:7px;color:#42e98a;font-size:8px;font-weight:900}.hn-dashboard-status i{width:7px;height:7px;border-radius:50%;background:#42e98a}
.hn-dashboard-title-row h3{margin:8px 0 0;font-size:17px}.hn-dashboard-actions{display:flex;gap:7px}.hn-dashboard-actions button{min-height:33px;padding:0 12px;border:1px solid rgba(62,193,243,.15);border-radius:7px;background:rgba(62,193,243,.06);color:#fff;font:800 8px Montserrat}.hn-dashboard-actions .stop{color:#ff8797}
.hn-dashboard-stat-grid{margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.hn-dashboard-stat-card{padding:15px;border-radius:10px;background:#14172f;border:1px solid rgba(62,193,243,.1)}.hn-dashboard-stat-card>span{color:#7a86a5;font-size:7px;text-transform:uppercase}.hn-dashboard-stat-card strong{display:block;margin-top:7px;font-size:15px}.hn-dashboard-bar{height:5px;margin-top:13px;border-radius:99px;background:#08091a;overflow:hidden}.hn-dashboard-bar i{height:100%;display:block;background:linear-gradient(90deg,#3ec1f3,#008ffe)}
.hn-dashboard-console{margin-top:16px;border:1px solid rgba(62,193,243,.1);border-radius:10px;background:#080a1b;overflow:hidden}.hn-dashboard-console-head{height:40px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(62,193,243,.08);font-size:8px;font-weight:800}.hn-dashboard-console-head i{width:7px;height:7px;border-radius:50%;background:#42e98a}.hn-dashboard-console-body{min-height:154px;padding:15px;font-family:Consolas,monospace}.hn-dashboard-console-body p{margin:0 0 8px;color:#8f9ab7;font-size:7px}.hn-dashboard-console-body p span{color:#55617f}.hn-dashboard-console-body .success{color:#42e98a}.hn-dashboard-console-input{height:40px;padding:0 13px;display:flex;align-items:center;gap:8px;border-top:1px solid rgba(62,193,243,.08);color:#3ec1f3;font-family:Consolas,monospace;font-size:9px}.hn-console-placeholder{color:#56617d;font-size:7px}

/* steps */
.hn-steps{background:#05061f}
.hn-steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hn-step-card{position:relative;min-height:330px;padding:30px;display:flex;flex-direction:column;border:1px solid rgba(62,193,243,.14);border-radius:17px;background:linear-gradient(145deg,#171a3a,#0d102a)}
.hn-step-number{position:absolute;right:24px;top:20px;color:rgba(255,255,255,.08);font-size:38px;font-weight:900}
.hn-step-label{position:absolute;right:20px;top:20px;padding:6px 10px;border-radius:999px;background:rgba(66,233,138,.08);color:#42e98a;font-size:8px;font-weight:900}
.hn-step-icon{width:66px;height:66px;margin:14px 0 24px;display:grid;place-items:center;border-radius:16px;background:rgba(62,193,243,.08);color:#3ec1f3;font-size:25px}
.hn-step-card h3{margin:0 0 13px}.hn-step-card p{color:#9ca9c8;font-size:12px;line-height:1.8}.hn-step-card>a{margin-top:auto;color:#3ec1f3;text-decoration:none;font-size:10px;font-weight:900}
.hn-steps-bottom{margin-top:28px;padding:24px 27px;display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid rgba(62,193,243,.14);border-radius:15px;background:rgba(62,193,243,.045)}
.hn-steps-bottom-content{display:flex;align-items:center;gap:14px}.hn-steps-bottom-icon{width:45px;height:45px;display:grid;place-items:center;border-radius:11px;background:rgba(62,193,243,.08);color:#3ec1f3}.hn-steps-bottom-content strong,.hn-steps-bottom-content span{display:block}.hn-steps-bottom-content strong{font-size:12px}.hn-steps-bottom-content span{margin-top:5px;color:#8e9ab8;font-size:9px}.hn-steps-support-button{padding:14px 18px;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}

/* final CTA */
.hn-home-cta{padding:90px 22px;background:radial-gradient(circle at center,rgba(0,143,254,.13),transparent 48%),#080922;text-align:center}
.hn-home-cta-inner{width:min(950px,100%);margin:auto;padding:55px;border:1px solid rgba(62,193,243,.17);border-radius:21px;background:rgba(15,18,48,.88)}
.hn-home-cta h2{margin:0;font-size:clamp(36px,4vw,56px);letter-spacing:-2px}.hn-home-cta p{max-width:680px;margin:18px auto 28px;color:#a4b0cd;line-height:1.8;font-size:13px}.hn-home-cta-actions{display:flex;justify-content:center;gap:13px;flex-wrap:wrap}

@media(max-width:1100px){
 .hn-hero-inner,.hn-panel-showcase-inner{grid-template-columns:1fr}
 .hn-hero{padding-top:85px}.hn-hero-content{text-align:center}.hn-hero-content>p{margin-left:auto;margin-right:auto}.hn-hero-buttons,.hn-hero-features{justify-content:center}.hn-hero-visual{width:min(760px,100%);margin:auto}
 .hn-features-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
 .hn-hero{min-height:auto;padding:75px 17px}.hn-hero h1{letter-spacing:-2px}.hn-panel-window{transform:none}.hn-services-grid,.hn-features-grid,.hn-steps-grid{grid-template-columns:1fr}.hn-service-card ul{grid-template-columns:1fr}.hn-panel-feature-list{grid-template-columns:1fr}.hn-dashboard-layout{grid-template-columns:1fr}.hn-dashboard-sidebar{display:flex;overflow:auto;border-right:0;border-bottom:1px solid rgba(62,193,243,.09)}.hn-dashboard-side-item{min-width:max-content}.hn-dashboard-stat-grid{grid-template-columns:1fr}.hn-steps-bottom{align-items:flex-start;flex-direction:column}.hn-steps-support-button{width:100%;text-align:center}.hn-home-cta-inner{padding:38px 22px}
}
