/* ============================================================
   CS TUCUMAN · HOME V31
   Reference-inspired layout, CST-only branding/content.
   ============================================================ */
body.cst310-body{
 background:#02070a!important;
 color:#fff!important;
 font-family:Inter,Arial,sans-serif!important;
}
.cst310-home{background:#02070a}

/* HERO */
.cst310-hero{
 position:relative;
 min-height:690px;
 overflow:hidden;
 border-bottom:1px solid rgba(255,255,255,.04);
 background:
  radial-gradient(circle at 50% 18%,rgba(255,122,0,.10),transparent 22%),
  linear-gradient(180deg,#06131a 0%,#031018 52%,#02070a 100%);
}
.cst310-hero-bg{
 position:absolute;inset:0;overflow:hidden;pointer-events:none
}
.cst310-hero-bg:before{
 content:"";position:absolute;inset:0;
 background:
  linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.30)),
  radial-gradient(circle at 50% 100%,rgba(255,122,0,.07),transparent 36%);
}
.cst310-hero-bg .shape{
 position:absolute;
 display:block;
 background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
 border-radius:32px;
 transform:rotate(-17deg);
}
.cst310-hero-bg .one{width:230px;height:560px;left:8%;top:70px}
.cst310-hero-bg .two{width:270px;height:650px;left:31%;top:-70px;transform:rotate(-12deg)}
.cst310-hero-bg .three{width:270px;height:630px;right:18%;top:-40px;transform:rotate(18deg)}
.cst310-hero-bg .four{width:230px;height:500px;right:-5%;top:120px;transform:rotate(27deg)}
.cst310-hero-bg .noise{
 position:absolute;inset:0;opacity:.035;
 background:repeating-linear-gradient(0deg,rgba(255,255,255,.2) 0 1px,transparent 1px 3px)
}
.cst310-hero-inner{
 position:relative;z-index:2;
 width:min(980px,calc(100% - 30px));
 margin:auto;padding:75px 0 70px;
 text-align:center;
}
.cst310-hero-logo{
 width:140px;height:140px;object-fit:contain;
 filter:drop-shadow(0 0 35px rgba(255,122,0,.18));
}
.cst310-kicker{
 display:block;margin-top:18px;
 color:#7e8d96;font-size:9px;font-weight:800;letter-spacing:3px
}
.cst310-hero h1{
 margin:14px 0 18px;
 color:#fff!important;
 font:900 clamp(52px,6.8vw,88px)/.95 Inter,Arial,sans-serif!important;
 letter-spacing:-3px;
}
.cst310-hero h1 span{color:#ff7a00}
.cst310-hero .lead{
 max-width:720px;margin:0 auto;
 color:#a9b4bb;font-size:20px;line-height:1.55
}
.cst310-hero .lead strong{color:#fff}
.cst310-hero .accent{
 margin:13px 0 0;color:#ff8a24;font-size:17px;font-weight:700
}
.cst310-hero-actions{
 margin-top:34px;display:flex;align-items:center;justify-content:center;gap:14px
}
.cst310-hero-actions a{
 min-width:225px;min-height:56px;padding:0 22px;
 display:flex;align-items:center;justify-content:center;gap:8px;
 border:1px solid #263842;border-radius:12px;
 color:#fff;text-decoration:none;font-size:12px;font-weight:900
}
.cst310-hero-actions a.primary{
 background:#ff7a00;border-color:#ff7a00;color:#080808;
 box-shadow:0 15px 40px rgba(255,122,0,.13)
}
.cst310-hero-actions a.secondary{
 background:#07141b
}
.cst310-hero-actions a.secondary:hover{
 border-color:#69401c;color:#ff9a42
}
.cst310-hero-stats{
 width:min(750px,100%);margin:46px auto 0;
 display:grid;grid-template-columns:1fr 1fr;gap:28px
}
.cst310-hero-stats article{
 position:relative;min-height:160px;padding:46px 28px 23px;
 border:1px solid rgba(255,255,255,.08);border-radius:13px;
 background:rgba(2,14,21,.72);
 box-shadow:0 18px 50px rgba(0,0,0,.20)
}
.cst310-hero-stats .icon{
 position:absolute;left:50%;top:-20px;
 width:55px;height:55px;transform:translateX(-50%);
 display:grid;place-items:center;border-radius:13px;
 background:#ff7a00;color:#080808;font-size:27px
}
.cst310-hero-stats b{
 display:block;color:#fff;font-size:17px
}
.cst310-hero-stats p{
 max-width:300px;margin:12px auto 0;color:#70838f;font-size:12px;line-height:1.55
}

/* COMMON */
.cst310-network,.cst310-community-block,.cst310-ranking-members,.cst310-final-cta{
 width:min(1180px,calc(100% - 30px));margin:auto
}
.cst310-section-title{padding:76px 0 28px}
.cst310-section-title.centered{text-align:center}
.cst310-section-title>span{
 color:#ff8420;font-size:8px;font-weight:900;letter-spacing:2.7px
}
.cst310-section-title h2{
 margin:7px 0 5px;color:#fff!important;font-size:42px!important;font-weight:900!important
}
.cst310-section-title p{margin:0;color:#64727b;font-size:11px}

/* SERVERS */
.cst310-server-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-bottom:78px}
.cst310-server-grid article{
 min-height:260px;padding:18px;display:flex;flex-direction:column;
 border:1px solid #14232c;border-radius:13px;background:#051017
}
.cst310-server-grid article:hover{border-color:#5a371b}
.cst310-server-grid header{display:flex;justify-content:space-between}
.cst310-server-grid header span{display:flex;align-items:center;gap:6px;color:#74828a;font-size:7px;font-weight:900}
.cst310-server-grid header span i{width:7px;height:7px;border-radius:50%;background:#777}
.cst310-server-grid header span.online i{background:#31d47d;box-shadow:0 0 10px rgba(49,212,125,.35)}
.cst310-server-grid header span.offline i{background:#c75a50}
.cst310-server-grid header small{color:#3e4e57;font-size:7px}
.cst310-server-grid h3{margin:28px 0 5px;color:#fff!important;font-size:18px!important}
.cst310-server-grid>article>p{margin:0;color:#63747d;font-size:10px}
.cst310-server-grid .players{margin:auto 0 7px;display:flex;align-items:baseline;gap:3px}
.cst310-server-grid .players b{color:#fff;font-size:36px}.cst310-server-grid .players span{color:#51616a}
.cst310-server-grid .bar{height:4px;margin-bottom:18px;border-radius:999px;background:#102029;overflow:hidden}
.cst310-server-grid .bar i{display:block;height:100%;background:#ff7a00}
.cst310-server-grid footer{padding-top:13px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #102029}
.cst310-server-grid code{color:#586b75;font-size:8px}.cst310-server-grid footer a{color:#ff8a24;text-decoration:none;font-size:8px;font-weight:900}

/* FEATURES */
.cst310-community-block{padding-bottom:85px}
.cst310-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.cst310-feature-grid>a{
 min-height:185px;padding:22px;
 border:1px solid #13242d;border-radius:13px;background:#051017;
 color:#fff;text-decoration:none
}
.cst310-feature-grid>a:hover{border-color:#4d321d;background:#07141b}
.cst310-feature-grid ion-icon{
 width:42px;height:42px;padding:8px;border-radius:10px;background:#ff7a00;color:#080808;font-size:22px
}
.cst310-feature-grid h3{margin:18px 0 6px;color:#fff!important;font-size:15px!important}
.cst310-feature-grid p{margin:0;color:#6c7e87;font-size:10px;line-height:1.55}

/* RANK + MEMBERS */
.cst310-ranking-members{
 padding:75px 0;display:grid;grid-template-columns:1fr 1fr;gap:38px;border-top:1px solid #0d1a21
}
.cst310-ranking-members header{position:relative;margin-bottom:18px}
.cst310-ranking-members header>span{color:#ff8420;font-size:8px;font-weight:900;letter-spacing:2px}
.cst310-ranking-members header h2{margin:5px 0;color:#fff!important;font-size:34px!important}
.cst310-ranking-members header>a{position:absolute;right:0;bottom:7px;color:#6c7c85;text-decoration:none;font-size:7px}
.rank-list{border-top:1px solid #14232b}
.rank-list>a{
 min-height:64px;padding:0 8px;display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:8px;
 border-bottom:1px solid #101d24;color:#fff;text-decoration:none
}
.rank-list>a:hover{background:#041018}
.rank-list strong{color:#ff8420;font-size:11px}
.rank-list span b,.rank-list span small{display:block}.rank-list span b{font-size:10px}.rank-list span small{margin-top:3px;color:#5f717b;font-size:7px}.rank-list em{color:#71818a;font-size:7px;font-style:normal}
.members-list{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.members-list>a{min-height:61px;padding:8px;display:flex;align-items:center;gap:9px;border:1px solid #13242d;border-radius:10px;background:#051017;color:#fff;text-decoration:none}
.members-list img,.members-list i{width:38px;height:38px;display:grid;place-items:center;object-fit:cover;border-radius:8px;background:#0a1b24;color:#ff9a42;font-style:normal;font-size:10px}
.members-list span b,.members-list span small{display:block}.members-list span b{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}.members-list span small{margin-top:3px;color:#63747d;font-size:7px}
.empty{padding:30px;border:1px dashed #17303b;border-radius:10px;color:#62747d;text-align:center;font-size:9px}

/* FINAL HOME FOOTER/CTA */
.cst310-final-cta{
 padding:80px 0 88px;text-align:center;border-top:1px solid #0d1a21
}
.cst310-final-cta img{width:95px;height:95px;object-fit:contain;filter:drop-shadow(0 0 26px rgba(255,122,0,.14))}
.cst310-final-cta>span{display:block;margin-top:10px;color:#687984;font-size:8px;font-weight:800;letter-spacing:2px}
.cst310-final-cta h2{margin:9px 0 24px;color:#fff!important;font-size:45px!important;font-weight:900!important}
.cst310-final-cta>div{display:flex;justify-content:center;gap:9px}
.cst310-final-cta a{min-height:44px;padding:0 15px;display:flex;align-items:center;gap:6px;border:1px solid #1b303b;border-radius:9px;background:#06131a;color:#fff;text-decoration:none;font-size:8px;font-weight:900}
.cst310-final-cta a.primary{background:#ff7a00;border-color:#ff7a00;color:#080808}

/* Home-only global footer feels more like reference */
.cst310-body .cst220-footer{
 margin-top:0!important;
 background:#010507!important;
 border-top:1px solid #0d1a21!important;
}
.cst310-body .cst220-footer-info{
 background:#031016!important;
 border-bottom-color:#102029!important;
}
.cst310-body .cst220-footer-main,
.cst310-body .cst220-footer-bottom{
 border-color:#0d1a21!important;
}

@media(max-width:900px){
 .cst310-hero{min-height:auto}
 .cst310-hero h1{font-size:58px}
 .cst310-hero .lead{font-size:17px}
 .cst310-server-grid{grid-template-columns:1fr}
 .cst310-feature-grid{grid-template-columns:1fr 1fr}
 .cst310-ranking-members{grid-template-columns:1fr}
}
@media(max-width:600px){
 .cst310-hero-inner{padding:55px 0}
 .cst310-hero-logo{width:105px;height:105px}
 .cst310-hero h1{font-size:43px;letter-spacing:-2px}
 .cst310-hero .lead{font-size:15px}
 .cst310-hero .accent{font-size:14px}
 .cst310-hero-actions{display:grid}
 .cst310-hero-actions a{min-width:0;width:100%;box-sizing:border-box}
 .cst310-hero-stats{grid-template-columns:1fr;gap:34px}
 .cst310-feature-grid{grid-template-columns:1fr}
 .members-list{grid-template-columns:1fr}
 .cst310-section-title h2{font-size:34px!important}
 .cst310-final-cta h2{font-size:36px!important}
 .cst310-final-cta>div{display:grid}
}
