/* ====================================================
   CLASTIE V9 — Video hero, cleaner premium typography
   ==================================================== */
:root{
 --cl9-bg:#0b1426;
 --cl9-panel:#14223b;
 --cl9-panel2:#101b31;
 --cl9-line:rgba(255,255,255,.10);
 --cl9-text:#f8fbff;
 --cl9-muted:#b6c2d6;
 --cl9-orange:#ff7f22;
 --cl9-discord:#5865f2;
 --cl9-green:#22b95c;
}

/* Better readable font */
html,body,button,input,textarea,select,a,p,span,div,label,table,th,td,strong,b,small{
 font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif!important;
}
h1,h2,h3,h4,h5,h6,.cl-brand-text,.cl-nav-link,.cl9-btn{
 font-family:'Oxanium','Inter',system-ui,sans-serif!important;
}
body{letter-spacing:0!important;font-size:16px!important}
p{line-height:1.68!important}
.cl-brand-text b{letter-spacing:.04em!important}

/* disable older artificial mascot/fox constructions everywhere */
.cl8-hero,.cl8-hero-visual,.cl8-visual-card,.cl-fox-emblem,.cl-fox-head,.cl-cta-fox,
.cl-world-orbit,.cl-mouse-aura,.cl-particles,.cl-fox-spark{display:none!important}

/* Video Hero */
.cl9-hero{
 position:relative;min-height:720px;overflow:hidden;background:#0a1220;
 border-bottom:1px solid rgba(255,255,255,.07);
}
.cl9-hero-video,.cl9-hero-image{
 position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.cl9-hero-image{background-size:cover;background-position:center}
.cl9-hero-overlay{
 position:absolute;inset:0;
 background:
 linear-gradient(90deg,rgba(7,12,22,.94) 0%,rgba(7,12,22,.78) 40%,rgba(7,12,22,.40) 72%,rgba(7,12,22,.55) 100%),
 linear-gradient(180deg,rgba(7,12,22,.12),rgba(7,12,22,var(--cl9-darkness,.35)) 58%,#0b1426 100%);
}
.cl9-hero-inner{
 position:relative;z-index:2;min-height:720px;display:flex;align-items:center;
 padding-top:50px;padding-bottom:86px;
}
.cl9-copy{max-width:820px}
.cl9-kicker{
 display:inline-flex;padding:8px 13px;border-radius:10px;
 background:rgba(12,22,40,.72);border:1px solid rgba(255,255,255,.11);
 color:#ffc68b;font-size:13px;font-weight:800;letter-spacing:.10em;
}
.cl9-copy h1{
 margin:18px 0 14px!important;font-size:clamp(52px,5.8vw,84px)!important;
 line-height:.96!important;letter-spacing:-.035em!important;color:#fff!important;
 text-shadow:0 10px 35px rgba(0,0,0,.35);
}
.cl9-copy p{
 margin:0 0 28px!important;max-width:690px;color:#d0daea!important;
 font-size:18px!important;line-height:1.65!important;
}
.cl9-actions{display:flex;gap:12px;flex-wrap:wrap}
.cl9-btn{
 min-height:56px;padding:0 22px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;gap:10px;
 color:#fff!important;font-size:15px!important;font-weight:800!important;
 border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 28px rgba(0,0,0,.22)
}
.cl9-btn-primary{background:linear-gradient(180deg,#ff9438,#ed6810)}
.cl9-btn-discord{background:linear-gradient(180deg,#667cff,#4d63ef)}
.cl9-btn-store{background:linear-gradient(180deg,#31cb6d,#1fa352)}
.cl9-btn:hover{transform:translateY(-2px);filter:brightness(1.05)}

/* fixed IP/info row */
.cl9-info-row{
 width:min(100%,900px);display:grid;grid-template-columns:minmax(0,1.65fr) minmax(170px,.75fr) minmax(150px,.65fr);
 gap:12px;margin-top:28px;
}
.cl9-info-card{
 min-width:0;min-height:82px;padding:13px 14px;border-radius:16px;
 background:rgba(14,26,47,.82);border:1px solid rgba(255,255,255,.10);
 backdrop-filter:blur(12px);box-shadow:0 14px 35px rgba(2,8,23,.20);
 display:flex;align-items:center;gap:12px;color:#fff;text-align:left;
}
button.cl9-info-card{width:100%;cursor:pointer}
.cl9-info-icon{
 width:46px;height:46px;flex:0 0 46px;border-radius:13px;display:grid;place-items:center;
 background:#1a2a47;color:#fff;
}
.cl9-info-icon i{font-size:17px}
.cl9-info-text{min-width:0;display:block;flex:1}
.cl9-info-text small{
 display:block;font-size:10px;color:#94a4bd;letter-spacing:.10em;margin-bottom:5px;white-space:nowrap;
}
.cl9-info-text b{
 display:block;font-family:'Oxanium','Inter',sans-serif!important;font-size:16px;
 color:#fff;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cl9-ip-card .cl9-info-text b{font-size:15px}
.cl9-copy-icon{flex:0 0 auto;color:#ffb66e}

/* make older V8 sections visually cleaner with new font */
.cl8-section-top h2,.cl8-news-head h2,.cl8-mode-card h3,.cl8-feature-card h3,.cl8-news-body h3,.cl8-cta-bar-inner h2{
 font-family:'Oxanium','Inter',sans-serif!important;
}
.cl8-mode-card,.cl8-feature-card,.cl8-shortcut-card,.cl8-news-card,.cl8-cta-bar-inner{
 border-radius:18px!important;
}
.cl8-mode-card,.cl8-feature-card,.cl8-shortcut-card,.cl8-news-card{
 background:linear-gradient(180deg,#162642,#111d34)!important;
}
.cl8-mode-tags span{font-family:'Inter',sans-serif!important}
.cl8-news-body p,.cl8-feature-card p,.cl8-shortcut-card p,.cl8-mode-card p{font-family:'Inter',sans-serif!important}

/* navbar font readability */
.cl-nav-link,.cl-login-btn,.cl-register-btn{font-family:'Oxanium','Inter',sans-serif!important}
.cl-nav-link{font-size:14px!important}
.cl-announcement-left a{font-family:'Inter',sans-serif!important}

/* responsive */
@media(max-width:900px){
 .cl9-hero{min-height:650px}
 .cl9-hero-inner{min-height:650px;padding-top:44px}
 .cl9-info-row{grid-template-columns:1fr 1fr}
 .cl9-ip-card{grid-column:1/-1}
}
@media(max-width:620px){
 .cl9-hero{min-height:620px}
 .cl9-hero-inner{min-height:620px;padding-top:34px;padding-bottom:60px}
 .cl9-copy h1{font-size:44px!important}
 .cl9-copy p{font-size:16px!important}
 .cl9-btn{width:100%}
 .cl9-info-row{grid-template-columns:1fr}
 .cl9-ip-card{grid-column:auto}
 .cl9-info-card{min-height:74px}
 .cl9-info-text b,.cl9-ip-card .cl9-info-text b{font-size:14px}
}