/* ============================================
   CLASTIE V8 VIP FOX
   Premium / cleaner / brighter / less gloomy
   ============================================ */
:root{
 --cl8-bg:#0b1323;
 --cl8-bg2:#101c33;
 --cl8-soft:#1a2742;
 --cl8-line:rgba(255,255,255,.10);
 --cl8-line2:rgba(255,255,255,.16);
 --cl8-text:#ffffff;
 --cl8-muted:#b3bfd4;
 --cl8-orange:#ff7f22;
 --cl8-orange2:#ffb464;
 --cl8-blue:#5a73ff;
 --cl8-blue2:#4dc1ff;
 --cl8-green:#22c55e;
 --cl8-shadow:0 24px 70px rgba(2,8,23,.28);
}

body,.cl-v4-app{
 background:
 radial-gradient(circle at top right, rgba(77,193,255,.08), transparent 22%),
 radial-gradient(circle at top left, rgba(255,127,34,.08), transparent 22%),
 linear-gradient(180deg,#0a1221 0%,#0b1526 35%,#0a1322 100%) !important;
}
.cl-main:before,.cl-mouse-aura,.cl-fox-spark,.cl-particles,.cl-scroll-cue,.cl-hero:after,.cl-v7-world,.cl-v7-quick,.cl-v7-cta,.cl-home-intro-v6,.cl-news-wrap-v7,.cl-news-head-v7,.cl-mode-strip-v7{display:none !important}

/* Header more premium */
.cl-announcement{
 background:linear-gradient(90deg,rgba(15,24,44,.88),rgba(18,31,58,.88),rgba(15,24,44,.88)) !important;
 border-bottom:1px solid rgba(255,180,100,.18) !important;
}
.cl-mainnav{
 background:rgba(8,15,27,.78) !important;
 border-bottom:1px solid rgba(255,255,255,.07) !important;
 backdrop-filter:blur(14px);
}
.cl-nav-inner{height:78px !important}
.cl-brand-mark{
 width:46px !important;height:46px !important;border-radius:14px !important;
 background:#151f36 url('/assets/clastie/img/fox-mark.svg') center/84% no-repeat !important;
 box-shadow:0 12px 30px rgba(255,127,34,.18) !important;
}
.cl-brand-mark:before,.cl-brand-mark:after,.cl-brand-mark + .cl-brand-text:before,.cl-brand-mark.fox-awake{display:none !important;content:none !important}
.cl-brand-text b{font-size:19px !important}
.cl-brand-text small{font-size:10px !important;color:#ffba74 !important}
.cl-nav-link{padding:0 14px !important;font-size:15px !important}
.cl-nav-link:before{
 background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)) !important;
 border:1px solid transparent;
}
.cl-nav-link:hover:before,.cl-nav-link.is-active:before{
 border-color:rgba(255,127,34,.18);
}
.cl-cart-btn,.cl-login-btn,.cl-register-btn,.cl-user-btn,.cl-mobile-toggle{
 background:#121d33 !important;border-color:rgba(255,255,255,.08) !important;
}
.cl-register-btn{
 background:linear-gradient(180deg,#ff8f34,#ed6508) !important;
 box-shadow:0 10px 24px rgba(255,127,34,.22) !important;
}
.cl-login-btn:hover,.cl-cart-btn:hover,.cl-user-btn:hover,.cl-mobile-toggle:hover{transform:translateY(-1px)}
.cl-header.is-scrolling-down{transform:none !important}

/* Hero */
.cl8-hero{
 position:relative;overflow:hidden;min-height:760px;
 background-size:cover;background-position:center;
 border-bottom:1px solid rgba(255,255,255,.06);
}
.cl8-hero-overlay{
 position:absolute;inset:0;
 background:
 linear-gradient(180deg,rgba(7,12,21,.74),rgba(7,13,23,.40) 35%,rgba(8,15,27,.78) 100%),
 linear-gradient(90deg,rgba(9,15,26,.92) 0%,rgba(9,15,26,.74) 34%,rgba(9,15,26,.28) 68%,rgba(9,15,26,.68) 100%);
}
.cl8-hero-blur{position:absolute;border-radius:999px;filter:blur(75px);opacity:.35;pointer-events:none}
.cl8-hero-blur-a{width:280px;height:280px;left:8%;top:18%;background:rgba(90,115,255,.65)}
.cl8-hero-blur-b{width:260px;height:260px;right:12%;top:10%;background:rgba(255,127,34,.45)}
.cl8-hero-inner{
 position:relative;z-index:2;min-height:760px;
 display:grid;grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);
 gap:44px;align-items:center;padding-top:30px;padding-bottom:80px;
}
.cl8-hero-copy{max-width:740px}
.cl8-eyebrow{
 display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
 background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);
 color:#ffd3a0;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.cl8-hero h1{
 margin:18px 0 14px !important;line-height:.92 !important;
 font-size:clamp(58px,6vw,88px) !important;letter-spacing:-.04em !important;
 color:#fff !important;text-shadow:0 12px 35px rgba(0,0,0,.28);
}
.cl8-hero p{
 max-width:640px;color:#c6d1e5 !important;font-size:19px !important;line-height:1.62 !important;margin:0 0 26px !important;
}
.cl8-hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.cl8-btn{
 height:58px;padding:0 22px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;gap:10px;
 font-size:16px;font-weight:800;border:1px solid rgba(255,255,255,.08);box-shadow:var(--cl8-shadow)
}
.cl8-btn-primary{background:linear-gradient(180deg,#ff983c,#ef6810);color:#fff !important}
.cl8-btn-discord{background:linear-gradient(180deg,#627bff,#4862f0);color:#fff !important}
.cl8-btn-store{background:linear-gradient(180deg,#2ed56f,#1fa451);color:#fff !important}
.cl8-btn:hover{transform:translateY(-2px)}
.cl8-hero-pills{
 display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px;max-width:760px;
}
.cl8-pill{
 min-height:82px;padding:14px 16px;border-radius:18px;
 background:rgba(16,25,44,.82);border:1px solid rgba(255,255,255,.09);
 box-shadow:var(--cl8-shadow);display:flex;align-items:center;gap:14px;cursor:default;
}
.cl8-pill i{
 width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
 color:#fff;background:linear-gradient(180deg,#1d2c4c,#152239);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.cl8-pill small{display:block;color:#8fa0bc;font-size:11px;letter-spacing:.1em;margin-bottom:3px}
.cl8-pill b{display:block;color:#fff;font-size:18px}
.cl8-hero-visual{display:flex;align-items:center;justify-content:center}
.cl8-visual-card{
 width:min(100%,500px);aspect-ratio:1/1;position:relative;border-radius:38px;
 background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
 border:1px solid rgba(255,255,255,.09);box-shadow:var(--cl8-shadow);overflow:hidden;
 display:flex;align-items:center;justify-content:center;
}
.cl8-visual-card:before{
 content:"";position:absolute;inset:16px;border-radius:28px;
 background:radial-gradient(circle at 50% 35%, rgba(255,127,34,.18), transparent 40%),
 radial-gradient(circle at 50% 70%, rgba(90,115,255,.13), transparent 42%);
 border:1px dashed rgba(255,255,255,.10);
}
.cl8-visual-card img{
 position:relative;z-index:2;width:min(88%,420px);height:auto;filter:drop-shadow(0 26px 30px rgba(0,0,0,.22));
 animation:cl8Float 4.6s ease-in-out infinite;
}
.cl8-visual-ring{position:absolute;border-radius:999px;border:1px solid rgba(255,255,255,.10)}
.cl8-visual-ring.ring-a{inset:34px;animation:cl8Spin 28s linear infinite}
.cl8-visual-ring.ring-b{inset:76px;border-style:dashed;opacity:.65;animation:cl8Spin 18s linear infinite reverse}
@keyframes cl8Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes cl8Spin{to{transform:rotate(360deg)}}

/* section head */
.cl8-section-top{text-align:center;max-width:760px;margin:0 auto 30px}
.cl8-section-top span,.cl8-news-head span{
 display:inline-flex;align-items:center;gap:8px;color:#ffbe7a;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.cl8-section-top h2,.cl8-news-head h2{
 margin:10px 0 12px !important;font-size:clamp(34px,4vw,50px) !important;line-height:.96 !important;color:#fff !important;
}
.cl8-section-top p,.cl8-news-head p{
 color:#aab8cf !important;font-size:17px !important;max-width:700px;
}

/* modes */
.cl8-mode-zone{padding:84px 0 54px;background:linear-gradient(180deg,#0c1526,#0d1730)}
.cl8-mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.cl8-mode-card{
 position:relative;padding:28px;border-radius:28px;overflow:hidden;
 background:linear-gradient(180deg,rgba(24,35,62,.95),rgba(14,23,42,.96));
 border:1px solid rgba(255,255,255,.08);box-shadow:var(--cl8-shadow);
}
.cl8-mode-card:before{content:"";position:absolute;right:-70px;top:-70px;width:210px;height:210px;border-radius:999px;opacity:.25}
.cl8-mode-card-uop:before{background:radial-gradient(circle,#ff8c2a,transparent 70%)}
.cl8-mode-card-emek:before{background:radial-gradient(circle,#3ecf76,transparent 70%)}
.cl8-mode-badge{
 position:absolute;right:18px;top:14px;color:rgba(255,255,255,.08);font-size:72px;font-weight:800;line-height:1;
}
.cl8-mode-icon{
 width:72px;height:72px;border-radius:20px;display:grid;place-items:center;margin-bottom:18px;
 background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);
}
.cl8-mode-icon i{font-size:28px;color:#fff}
.cl8-mode-card small{display:block;color:#8ea3c1;font-size:12px;letter-spacing:.14em}
.cl8-mode-card h3{margin:6px 0 8px !important;font-size:28px !important;color:#fff !important}
.cl8-mode-card p{margin:0 0 16px !important;color:#b4c3da !important;font-size:15px !important}
.cl8-mode-tags{display:flex;flex-wrap:wrap;gap:10px}
.cl8-mode-tags span{
 display:inline-flex;padding:9px 13px;border-radius:999px;
 background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#e4ecf8;font-size:13px;
}

/* features */
.cl8-feature-zone{padding:26px 0 62px;background:#0d1730}
.cl8-feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cl8-feature-card{
 padding:26px;border-radius:24px;background:linear-gradient(180deg,#14203a,#101a31);
 border:1px solid rgba(255,255,255,.08);box-shadow:var(--cl8-shadow);
}
.cl8-feature-icon{
 width:58px;height:58px;border-radius:18px;display:grid;place-items:center;margin-bottom:16px;
 background:linear-gradient(180deg,#ff9536,#f06a10);color:#fff;font-size:22px;
}
.cl8-feature-card h3{margin:0 0 8px !important;font-size:19px !important;color:#fff !important}
.cl8-feature-card p{margin:0 !important;color:#abc0d8 !important;font-size:15px !important;line-height:1.7 !important}

/* shortcuts */
.cl8-shortcuts{padding:0 0 70px;background:#0d1730}
.cl8-shortcuts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cl8-shortcut-card{
 text-align:left;padding:22px;border-radius:24px;border:1px solid rgba(255,255,255,.08);
 background:linear-gradient(180deg,#101b32,#0d1730);box-shadow:var(--cl8-shadow);
 display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:16px;
}
.cl8-shortcut-icon{
 width:56px;height:56px;border-radius:18px;display:grid;place-items:center;
 background:rgba(255,255,255,.06);color:#ffad61;font-size:22px;
}
.cl8-shortcut-card small{display:block;color:#8fa0bc;font-size:11px;letter-spacing:.12em}
.cl8-shortcut-card b{display:block;color:#fff;font-size:20px;margin:4px 0}
.cl8-shortcut-card p{margin:0 !important;color:#b2bfd5 !important;font-size:14px !important}
.cl8-shortcut-card>i{color:#8ea2c0}
.cl8-shortcut-card:hover{transform:translateY(-3px)}

/* news */
.cl8-news-zone{padding:86px 0;background:linear-gradient(180deg,#0a1425,#0d1730 30%,#0b1529)}
.cl8-news-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}
.cl8-news-link{
 height:48px;padding:0 18px;border-radius:16px;display:inline-flex;align-items:center;gap:10px;
 background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#edf3ff;font-size:14px;font-weight:700;
}
.cl8-news-link:hover{transform:translateY(-1px)}
.cl8-news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cl8-news-card{
 overflow:hidden;border-radius:28px;background:linear-gradient(180deg,#13203b,#101a31);
 border:1px solid rgba(255,255,255,.08);box-shadow:var(--cl8-shadow);
}
.cl8-news-card.is-featured{grid-column:span 2;display:grid;grid-template-columns:1.1fr .9fr}
.cl8-news-thumb{
 position:relative;display:block;min-height:250px;background-size:cover;background-position:center;
}
.cl8-news-card.is-featured .cl8-news-thumb{min-height:100%}
.cl8-news-thumb-overlay{
 position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(8,15,27,.82));
}
.cl8-news-cat{
 position:absolute;left:18px;top:18px;padding:8px 12px;border-radius:999px;
 background:rgba(9,15,26,.85);border:1px solid rgba(255,255,255,.08);color:#ffd4a6;font-size:11px;font-weight:700;
}
.cl8-news-body{padding:22px}
.cl8-news-meta{display:flex;justify-content:space-between;gap:14px;color:#8ba0bc;font-size:13px;margin-bottom:12px}
.cl8-news-meta span{display:flex;align-items:center;gap:7px}
.cl8-news-body h3{margin:0 0 8px !important;color:#fff !important;font-size:24px !important;line-height:1.15 !important}
.cl8-news-card:not(.is-featured) .cl8-news-body h3{font-size:20px !important}
.cl8-news-body p{margin:0 !important;color:#b9c6dc !important;font-size:15px !important;line-height:1.75 !important}
.cl8-news-read{
 display:inline-flex;align-items:center;gap:9px;margin-top:18px;color:#ffbf82;font-size:13px;font-weight:700;
}
.cl8-news-pagination{display:flex;justify-content:center;margin-top:26px}
.cl8-news-empty{
 padding:50px;border-radius:28px;background:linear-gradient(180deg,#13203b,#101a31);
 border:1px solid rgba(255,255,255,.08);box-shadow:var(--cl8-shadow);text-align:center;
}
.cl8-news-empty-mark{
 width:62px;height:62px;margin:0 auto 16px;border-radius:18px;background:#151f36 url('/assets/clastie/img/fox-mark.svg') center/75% no-repeat;
}
.cl8-news-empty b{display:block;color:#fff;font-size:20px}
.cl8-news-empty small{display:block;color:#9fb0c9;margin-top:6px}

/* CTA bar */
.cl8-cta-bar{padding:0 0 86px;background:#0b1529}
.cl8-cta-bar-inner{
 padding:34px;border-radius:30px;background:
 linear-gradient(135deg, rgba(255,127,34,.12), rgba(90,115,255,.12)),
 linear-gradient(180deg,#121e37,#101a31);
 border:1px solid rgba(255,255,255,.10);box-shadow:var(--cl8-shadow);
 display:flex;align-items:center;justify-content:space-between;gap:26px;
}
.cl8-cta-bar-inner small{display:block;color:#ffca94;font-size:12px;letter-spacing:.12em}
.cl8-cta-bar-inner h2{margin:8px 0 !important;color:#fff !important;font-size:34px !important}
.cl8-cta-bar-inner p{margin:0 !important;color:#bec9dd !important;font-size:16px !important}
.cl8-cta-actions{display:flex;gap:12px;flex-wrap:wrap}

/* footer make lighter VIP */
.cl-footer-v5{
 background:linear-gradient(180deg,#0d1730,#0b1426) !important;
 border-top:1px solid rgba(255,255,255,.08) !important;
}
.cl-footer-brand p,.cl-footer-column>a,.cl-footer-bottom,.cl-footer-column h4:after,.cl-mojang-note{color:#9dafc9 !important}
.cl-socials a,.cl-footer-ip,.cl-mini-select{
 background:#121d33 !important;border-color:rgba(255,255,255,.08) !important;color:#fff !important;
}
.cl-footer-glow{background:rgba(90,115,255,.12) !important}

/* cards globally a bit brighter */
.card,.cl-main .card,.bg-white,.dark .dark\:bg-green-800{
 background:linear-gradient(180deg,#13203b,#101a31) !important;
 border:1px solid rgba(255,255,255,.08) !important;
}
.form-input,input,textarea,select{
 background:#122038 !important;border-color:rgba(255,255,255,.08) !important;color:#fff !important;
}

/* responsive */
@media(max-width:1100px){
 .cl8-hero-inner{grid-template-columns:1fr;gap:24px;padding-top:40px}
 .cl8-hero-visual{order:-1}
 .cl8-visual-card{width:min(100%,430px)}
 .cl8-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cl8-shortcuts-grid{grid-template-columns:1fr}
 .cl8-news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cl8-news-card.is-featured{grid-column:span 2}
 .cl8-cta-bar-inner{flex-direction:column;align-items:flex-start}
}
@media(max-width:760px){
 .cl8-hero{min-height:auto}
 .cl8-hero-inner{min-height:unset;padding-bottom:60px}
 .cl8-hero h1{font-size:52px !important}
 .cl8-hero-pills{grid-template-columns:1fr}
 .cl8-mode-grid,.cl8-feature-grid,.cl8-news-grid{grid-template-columns:1fr}
 .cl8-news-card.is-featured{grid-column:auto;display:block}
 .cl8-news-head{flex-direction:column;align-items:flex-start}
 .cl8-shortcut-card{grid-template-columns:56px 1fr}
 .cl8-shortcut-card>i{display:none}
}
@media(max-width:520px){
 .cl8-hero h1{font-size:42px !important}
 .cl8-hero p{font-size:16px !important}
 .cl8-btn{width:100%}
 .cl8-mode-card,.cl8-feature-card,.cl8-shortcut-card,.cl8-news-card,.cl8-cta-bar-inner{border-radius:22px}
 .cl8-visual-card{border-radius:26px}
}