:root {
  --c0: #070b0f;
  --c1: #0e1520;
  --c2: #162033;
  --teal: #3a8fa5;
  --teal2: #5bbdd4;
  --teal3: #7ed4e6;
  --glow: rgba(58,143,165,0.5);
  --sidebar-w: 72px;
  --font-d: 'Syne', sans-serif;
  --font-b: 'DM Sans', sans-serif;
  --font-m: 'JetBrains Mono', monospace;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--c0);color:#fff;font-family:var(--font-b);overflow-x:hidden;}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:var(--c0);}
::-webkit-scrollbar-thumb{background:var(--teal);border-radius:2px;}

.sidebar {
  position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);
  background:rgba(7,11,15,0.94);backdrop-filter:blur(24px);
  border-right:1px solid rgba(58,143,165,0.12);
  z-index:1000;display:flex;flex-direction:column;align-items:center;
  padding:22px 0 24px;
}
.sb-logo {
  width:40px;height:40px;
  border-radius:12px;display:flex;align-items:center;justify-content:center;
  box-shadow: none;
  text-decoration:none;flex-shrink:0;overflow:hidden;
  margin-bottom: 35px; 
}
.sb-logo img{width:100%;height:100%;object-fit:cover;}
.sb-links {
  display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;width:100%;
}
.sb-link {
  position:relative;width:46px;height:46px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.28);text-decoration:none;
  transition:all .22s;cursor:pointer;background:transparent;border:none;
}
.sb-link svg { stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; }
.sb-link:hover,.sb-link.active {
  background:rgba(58,143,165,0.14);color:var(--teal2);
}
.sb-link::after {
  content:attr(data-label);position:absolute;left:calc(100% + 14px);top:50%;
  transform:translateY(-50%);background:rgba(10,16,24,0.97);
  border:1px solid rgba(58,143,165,0.22);color:#fff;
  font-family:var(--font-m);font-size:10px;letter-spacing:1.5px;
  padding:5px 11px;border-radius:6px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .18s;
}
.sb-link:hover::after{opacity:1;}
.sb-divider{width:30px;height:1px;background:rgba(58,143,165,0.13);margin:6px 0;}

.sb-copy {
  width:46px;height:46px;border-radius:11px;
  background:linear-gradient(135deg,var(--teal),var(--teal2));
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:none;transition:all .28s;
  box-shadow: none;
  color:#fff;position:relative;
}
.sb-copy svg{stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.sb-copy:hover{transform:translateY(-2px);box-shadow: none;}
.sb-copy::after {
  content:'COPY IP';position:absolute;left:calc(100% + 14px);top:50%;
  transform:translateY(-50%);background:rgba(58,143,165,0.95);
  color:#fff;font-family:var(--font-m);font-size:10px;letter-spacing:1.5px;
  padding:5px 11px;border-radius:6px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .18s;
}
.sb-copy:hover::after{opacity:1;}

.mobile-header {
  display:none;position:fixed;top:0;left:0;right:0;z-index:999;
  padding:13px 20px;background:rgba(7,11,15,0.93);backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(58,143,165,0.12);
  align-items:center;justify-content:space-between;
}
.mh-logo {
  display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;
  font-family:var(--font-d);font-size:18px;font-weight:800;letter-spacing:2px;
}
.mh-logo-icon {
  width:32px;height:32px;border-radius:8px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.mh-logo-icon img{width:100%;height:100%;object-fit:cover;}

.mobile-nav {
  display: none;
}
.mobile-nav-inner {
  display:flex;justify-content:space-around;align-items:center;
  max-width:500px;margin:0 auto;
}
.mn-btn {
  display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:none;color:rgba(255,255,255,0.38);
  cursor:pointer;padding:5px 6px;border-radius:10px;transition:all .2s;
  min-width:48px;min-height:48px;justify-content:center;
  text-decoration:none;
}
.mn-btn svg{stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px;}
.mn-btn span{font-family:var(--font-m);font-size:9px;letter-spacing:0.5px;text-transform:uppercase;}
.mn-btn:hover,.mn-btn.active{color:var(--teal2);}
.mn-btn.ip-btn {
  background:linear-gradient(135deg,var(--teal),var(--teal2));
  color:#fff !important;border-radius:12px;
  box-shadow:0 0 16px rgba(58,143,165,0.4);
}
.mn-btn.ip-btn svg{stroke:#fff;}

.mobile-quick-nav {
  display: none;
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: rgba(7, 11, 15, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(58, 143, 165, 0.25);
  border-radius: 50px;
  padding: 8px 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  gap: 4px;
}

.mq-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 16px;
  border-radius: 24px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.25s ease;
  min-width: 60px;
}

.mq-btn svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mq-btn span {
  font-family: var(--font-m);
  font-size: 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.mq-btn:hover {
  color: var(--teal2);
  background: rgba(58, 143, 165, 0.15);
}

.mq-btn:active {
  transform: scale(0.95);
}

.mq-ip {
  background: linear-gradient(135deg, var(--teal), var(--teal2));
  color: #fff !important;
}

.mq-ip:hover {
  transform: translateY(-2px);
}

.page-wrap{margin-left:var(--sidebar-w);}

#hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 80px 48px 80px;
    background: var(--c0); 
}
#hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(7,11,15,0.7) 0%, rgba(7,11,15,0.3) 50%, rgba(7,11,15,0.9) 100%);
    pointer-events: none;
}
#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('assets/hurtun-banner.png') center center no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.35;
    pointer-events: none;
}
#hcanvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.hglow{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none;display: none;}
.hg1{width:600px;height:600px;background:radial-gradient(circle,rgba(58,143,165,0.14),transparent);top:-100px;left:-100px;animation:gf 12s ease-in-out infinite;}
.hg2{width:500px;height:500px;background:radial-gradient(circle,rgba(91,189,212,0.09),transparent);bottom:-100px;right:-100px;animation:gf 10s ease-in-out 3s infinite reverse;}
@keyframes gf{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(30px,-40px) scale(1.1);}}
.htitle{font-family:var(--font-d);font-size:clamp(52px,9vw,128px);font-weight:800;line-height:.92;text-align:center;letter-spacing:-2px;position:relative;z-index:2;margin-bottom:22px;}
.htitle .l1{display:block;color:#fff;}
.htitle .l2{display:block;background:linear-gradient(135deg,var(--teal),var(--teal3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hsub{font-size:16px;color:rgba(255,255,255,0.45);max-width:460px;text-align:center;line-height:1.7;position:relative;z-index:2;margin-bottom:40px;}
.hbtns{display:flex;gap:14px;position:relative;z-index:2;flex-wrap:wrap;justify-content:center;}
.bglow{background:linear-gradient(135deg,var(--teal),var(--teal2));color:#fff;border:none;padding:15px 34px;border-radius:10px;font-family:var(--font-d);font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;box-shadow: none !important;transition:all .3s;position:relative;overflow:hidden;}
.bglow::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left .5s;}
.bglow:hover::before{left:100%;}
.bghst{background:transparent;color:rgba(255,255,255,0.75);border:1px solid rgba(58,143,165,0.3);padding:15px 34px;border-radius:10px;font-family:var(--font-d);font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all .3s;text-decoration:none;display:inline-flex;align-items:center;gap:8px;}
.bghst:hover{background:rgba(58,143,165,0.1);border-color:rgba(91,189,212,0.5);color:#fff;}
.sbar{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(58,143,165,0.13);border:1px solid rgba(58,143,165,0.13);border-radius:16px;overflow:hidden;margin-top:64px;width:100%;max-width:660px;position:relative;z-index:2;}
.sitem{background:rgba(7,11,15,.92);padding:26px 20px;text-align:center;transition:background .3s;}
.sitem:hover{background:rgba(58,143,165,.08);}
.snum{font-family:var(--font-d);font-size:30px;font-weight:800;background:linear-gradient(135deg,var(--teal),var(--teal3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.slbl{font-size:11px;color:rgba(255,255,255,.38);letter-spacing:1px;text-transform:uppercase;margin-top:4px;}

section{padding:120px 48px;position:relative;scroll-margin-top:70px;}
.stag{font-family:var(--font-m);font-size:10px;color:var(--teal2);letter-spacing:3px;text-transform:uppercase;margin-bottom:14px;display:block;}
.stag-white{color:#fff;}
.stitle{font-family:var(--font-d);font-size:clamp(34px,4.5vw,62px);font-weight:800;line-height:1;letter-spacing:-1px;}
.stitle span{background:linear-gradient(135deg,var(--teal),var(--teal3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.ssub{color:rgba(255,255,255,.42);font-size:15px;line-height:1.7;max-width:480px;margin-top:14px;}
.shd{text-align:center;max-width:700px;margin:0 auto 80px;}
.shd .ssub{max-width:100%;}
.pline{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(58,143,165,.18),transparent);pointer-events:none;}

.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(58,143,165,.1);border:1px solid rgba(58,143,165,.15);border-radius:22px;overflow:hidden;max-width:1200px;margin:0 auto;}
.fc{background:rgba(7,11,15,.95);padding:44px 38px;position:relative;overflow:hidden;transition:background .4s;cursor:default;}
.fc::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(58,143,165,.12),transparent 55%);opacity:0;transition:opacity .4s;}
.fc:hover::before{opacity:1;}
.fc:hover{background:rgba(14,21,32,.95);}
.fw{grid-column:span 2;}
.ficn{width:50px;height:50px;background:rgba(58,143,165,.1);border:1px solid rgba(58,143,165,.2);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:22px;transition:all .4s;}
.fc:hover .ficn{background:rgba(58,143,165,.2);border-color:rgba(91,189,212,.4);box-shadow:0 0 18px rgba(58,143,165,.3);}
.fn{font-family:var(--font-d);font-size:19px;font-weight:700;margin-bottom:10px;}
.fd{font-size:13px;color:rgba(255,255,255,.42);line-height:1.7;}
.pbar{margin-top:22px;display:flex;gap:16px;flex-wrap:wrap;}
.pr{display:flex;align-items:center;gap:6px;font-size:10px;color:rgba(255,255,255,.38);font-family:var(--font-m);}
.pd{width:6px;height:6px;background:#00e676;border-radius:50%;box-shadow:0 0 8px #00e676;}

#gamemodes{background:linear-gradient(180deg,rgba(58,143,165,.03),rgba(58,143,165,.03),transparent);}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1200px;margin:0 auto;}
.mc{position:relative;overflow:hidden;border-radius:18px;border:1px solid rgba(58,143,165,.14);background:rgba(14,21,32,.8);cursor:pointer;transition:all .5s cubic-bezier(.4,0,.2,1);}
.mc::before{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(7,11,15,.94) 0%,rgba(7,11,15,.35) 50%,transparent 100%);z-index:1;}
.mc::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--teal),var(--teal3));opacity:0;z-index:1;transition:opacity .4s;}
.mc:hover{transform:translateY(-8px);border-color:rgba(91,189,212,.3);box-shadow:0 30px 60px rgba(0,0,0,.4),0 0 40px rgba(58,143,165,.12);}
.mc:hover::after{opacity:.05;}
.mimg{width:100%;height:300px;object-fit:cover;transition:transform .7s cubic-bezier(.4,0,.2,1);display:block;}
.mc:hover .mimg{transform:scale(1.08);}
.minfo{position:absolute;bottom:0;left:0;right:0;padding:28px 24px;z-index:2;}
.mbadge{display:inline-block;padding:4px 11px;border-radius:100px;font-size:9px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;font-family:var(--font-m);}
.bh{background:rgba(255,107,107,.2);color:#ff8a8a;border:1px solid rgba(255,107,107,.3);}
.bc{background:rgba(58,143,165,.2);color:var(--teal2);border:1px solid rgba(58,143,165,.3);}
.bx{background:rgba(139,92,246,.2);color:#c4b5fd;border:1px solid rgba(139,92,246,.3);}
.mn-game{font-family:var(--font-d);font-size:26px;font-weight:800;letter-spacing:-.5px;margin-bottom:6px;}
.md-game{font-size:12px;color:rgba(255,255,255,.45);line-height:1.6;}

.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1200px;margin:0 auto;}
.pc{border-radius:18px;border:1px solid rgba(58,143,165,.14);background:rgba(14,21,32,.8);padding:38px 30px;position:relative;overflow:hidden;transition:all .4s cubic-bezier(.4,0,.2,1);}
.pf{border-color: rgba(58,143,165,.14);background: rgba(14,21,32,.8);box-shadow:none !important;transform:scale(1.04);}
.pc:hover:not(.pf){border-color:rgba(91,189,212,.22);transform:translateY(-6px);box-shadow:none !important;}
.pf:hover{box-shadow: none !important;}
.ppop{display:none;position:absolute;top:18px;right:18px;background:linear-gradient(135deg,var(--teal),var(--teal2));color:#fff;padding:3px 11px;border-radius:100px;font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;font-family:var(--font-m);}
.piw{width:60px;height:60px;border-radius:14px;display:none;align-items:center;justify-content:center;font-size:26px;margin-bottom:26px;}
.piv{background:rgba(148,163,184,.08);border:1px solid rgba(148,163,184,.18);}
.pim{background:rgba(58,143,165,.13);border:1px solid rgba(58,143,165,.28);box-shadow:0 0 18px rgba(58,143,165,.18);}
.pie{background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.18);}
.pname{font-family:var(--font-d);font-size:24px;font-weight:800;margin-bottom:4px;}
.nv{color:#94a3b8;}.nm{background:linear-gradient(135deg,var(--teal),var(--teal3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}.ne{color:#c4b5fd;}
.pprice{font-family:var(--font-d);font-size:40px;font-weight:800;line-height:1;margin-bottom:3px;}
.ppsub{font-size:12px;color:rgba(255,255,255,.3);margin-bottom:28px;}
.pdiv{height:1px;background:rgba(58,143,165,.1);margin-bottom:24px;}
.pfl{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:32px;}
.pfl li{display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(255,255,255,.55);}
.pfl li::before{content:'✦';font-size:9px;color:var(--teal2);flex-shrink:0;}
.pbtn{width:100%;padding:13px;border-radius:9px;font-family:var(--font-d);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all .3s;border:none;text-decoration:none;display:block;text-align:center;}
.pbv,.pbe{background:transparent;border:1px solid rgba(58,143,165,.22);color:rgba(255,255,255,.65);}
.pbv:hover,.pbe:hover{background:rgba(58,143,165,.09);border-color:rgba(91,189,212,.38);color:#fff;}
.pbm{background:linear-gradient(135deg,var(--teal),var(--teal2));color:#fff;box-shadow:none !important;}
.pbm:hover{transform:translateY(-2px);box-shadow:none !important;}

#discord{background:var(--c0);}
.dcontainer{max-width:900px;margin:0 auto;padding:80px 24px;text-align:center;}
.dmain{position:relative;z-index:1;}
.dtitle{font-family:var(--font-d);font-size:clamp(36px,5vw,56px);font-weight:800;letter-spacing:-2px;margin:0 0 16px;}
.dtitle .dh{color:#5865F2;}
.dtxt{font-size:17px;color:rgba(255,255,255,.45);line-height:1.6;margin-bottom:36px;max-width:500px;margin:0 auto 36px;}
.dlinks{margin-bottom:48px;}
.dbtn{display:inline-flex;align-items:center;gap:12px;background:#5865F2;color:#fff;padding:18px 40px;border-radius:14px;font-family:var(--font-d);font-size:15px;font-weight:700;letter-spacing:.5px;text-decoration:none;transition:all .3s;}
.dbtn:hover{background:#4752C4;}
.dbtn svg{transition:transform .3s;}
.dbtn:hover svg{transform:scale(1.1);}
.dstat-bar{display:inline-flex;align-items:center;gap:40px;background:rgba(7,11,15,.6);border:1px solid rgba(58,143,165,.1);border-radius:50px;padding:20px 48px;}
.dstat{display:flex;flex-direction:column;align-items:center;gap:4px;}
.dstat-num{font-family:var(--font-d);font-size:28px;font-weight:800;}
.dstat-num.online{color:#3ba55c;}
.dstat-label{font-size:11px;color:rgba(255,255,255,.35);letter-spacing:1.5px;text-transform:uppercase;}
.dstat-divider{width:1px;height:40px;background:rgba(58,143,165,.2);}

#cosmetics{background:linear-gradient(180deg,transparent,rgba(58,143,165,.03),transparent);}
.cos-split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;max-width:1200px;margin:0 auto;}
.cos-flip{direction:rtl;}.cos-flip>*{direction:ltr;}
.cos-canvas-wrap{position:relative;border-radius:20px;overflow:hidden;border:1px solid rgba(58,143,165,.18);background:rgba(7,11,15,.8);height:440px;}
.cape-viewer{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;background:radial-gradient(ellipse at center,rgba(58,143,165,.1) 0%,transparent 65%);}
.cape-slide{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:16px;
  opacity:0;
  transition:opacity .4s ease, transform .4s ease;
  transform:translateY(12px) scale(0.97);
  pointer-events:none;
}
.cape-slide.active{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.cape-display {
  position: relative;
  width: 170px;
  height: 252px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border-radius: 4px;
  overflow: hidden;
}
.cape-display img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  image-rendering: pixelated;
}
@keyframes capeBob{0%,100%{transform:translateY(0) rotateY(0deg);}33%{transform:translateY(-8px) rotateY(3deg);}66%{transform:translateY(-4px) rotateY(-2deg);}}
.cos-tabs{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px;background:rgba(7,11,15,.7);backdrop-filter:blur(12px);padding:6px;border-radius:10px;border:1px solid rgba(58,143,165,.15);}
.ctab{padding:6px 14px;border-radius:7px;font-family:var(--font-m);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:transparent;color:rgba(255,255,255,.4);border:none;cursor:pointer;transition:all .25s;}
.ctab.active,.ctab:hover{background:rgba(58,143,165,.2);color:var(--teal2);}
.cos-title{font-family:var(--font-d);font-size:clamp(30px,3.5vw,50px);font-weight:800;line-height:1;letter-spacing:-1px;margin-bottom:16px;margin-top:12px;}
.cos-title span{background:linear-gradient(135deg,var(--teal),var(--teal3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.cos-desc{font-size:15px;color:rgba(255,255,255,.42);line-height:1.75;margin-bottom:28px;}
.cos-list{display:flex;flex-direction:column;gap:10px;}
.cos-item{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:10px;border:1px solid rgba(58,143,165,.1);background:rgba(14,21,32,.5);cursor:pointer;transition:all .3s;}
.cos-item:hover,.cos-item.active{border-color:rgba(91,189,212,.3);background:rgba(22,34,52,.8);}
.cos-item-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.cos-item-name{font-family:var(--font-d);font-size:14px;font-weight:700;margin-bottom:2px;}
.cos-item-src{font-family:var(--font-m);font-size:10px;color:rgba(255,255,255,.35);letter-spacing:.5px;}
.cos-chat-preview{border-radius:20px;border:1px solid rgba(58,143,165,.18);background:rgba(10,14,20,.9);overflow:hidden;height:440px;display:flex;flex-direction:column;}
.chat-header{padding:14px 18px;display:flex;align-items:center;gap:7px;border-bottom:1px solid rgba(58,143,165,.1);background:rgba(7,11,15,.5);}
.chat-dot{width:10px;height:10px;border-radius:50%;}
.chat-msgs{flex:1;overflow:hidden;padding:20px 18px;display:flex;flex-direction:column;gap:10px;}
.cmsg{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:13px;line-height:1.5;opacity:0;transform:scale(0.8);animation:msgIn .4s cubic-bezier(.34,1.56,.64,1) forwards;}
.cmsg:nth-child(1){animation-delay:.2s}.cmsg:nth-child(2){animation-delay:.4s}.cmsg:nth-child(3){animation-delay:.6s}.cmsg:nth-child(4){animation-delay:.8s}
@keyframes msgIn{to{opacity:1;transform:scale(1);}}
.ctag-vip{font-family:var(--font-m);font-size:10px;font-weight:700;color:#ff7b00;background:rgba(148,163,184,.1);padding:2px 6px;border-radius:4px;border:1px solid rgba(148,163,184,.2);}
.ctag-mvp{font-family:var(--font-m);font-size:10px;font-weight:700;color:var(--teal2);background:rgba(58,143,165,.12);padding:2px 6px;border-radius:4px;border:1px solid rgba(58,143,165,.25);}
.ctag-elite{font-family:var(--font-m);font-size:10px;font-weight:700;color:#c4b5fd;background:rgba(139,92,246,.12);padding:2px 6px;border-radius:4px;border:1px solid rgba(139,92,246,.25);}
.cname{font-weight:700;font-size:13px;}.ctxt{color:rgba(255,255,255,.55);}
.cg-teal{background:linear-gradient(90deg,#3adfcc,#5bbdd4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.cg-purple{background:linear-gradient(90deg,#c084fc,#818cf8,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.cg-fire{background:linear-gradient(90deg,#ef4444,#f97316,#ef4444);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.chat-input-bar{padding:12px 18px;border-top:1px solid rgba(58,143,165,.1);background:rgba(7,11,15,.4);}
.chat-feat-grid.three-card-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
}
.chat-feat-grid.three-card-layout .center-card {
    grid-column: 1 / -1;
    max-width: 50%;
    margin: 0 auto;
    text-align: center;
}
.cft{padding:16px;border-radius:10px;border:1px solid rgba(58,143,165,.1);background:rgba(14,21,32,.5);transition:all .3s;}
.cft:hover{border-color:rgba(91,189,212,.25);background:rgba(22,34,52,.7);}
.cft-icon{font-size:18px;margin-bottom:8px;}.cft-name{font-family:var(--font-d);font-size:13px;font-weight:700;margin-bottom:4px;}
.cft-desc{font-size:11px;color:rgba(255,255,255,.35);line-height:1.5;}

footer{background:var(--c0);border-top:1px solid rgba(58,143,165,.09);padding:60px 48px 28px;}
.fin{max-width:1200px;margin:0 auto;}
.ftop{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;margin-bottom:44px;}
.fbrand p{font-size:13px;color:rgba(255,255,255,.32);line-height:1.7;margin-top:14px;max-width:270px;}
.fsoc{display:flex;gap:8px;margin-top:20px;}
.fsb{width:38px;height:38px;border-radius:9px;background:rgba(58,143,165,.07);border:1px solid rgba(58,143,165,.13);display:flex;align-items:center;justify-content:center;text-decoration:none;color:rgba(255,255,255,.4);transition:all .3s;}
.fsb svg{width:17px;height:17px;fill:currentColor;}
.fsb:hover{background:rgba(58,143,165,.18);border-color:rgba(91,189,212,.28);color:#fff;transform:translateY(-2px);}
.fcol h4{font-family:var(--font-d);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:18px;}
.fcol ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.fcol a{font-size:13px;color:rgba(255,255,255,.3);text-decoration:none;transition:color .3s;}
.fcol a:hover{color:var(--teal2);}
.fbot{border-top:1px solid rgba(58,143,165,.07);padding-top:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.fbot p{font-size:12px;color:rgba(255,255,255,0.5);}
.flang{padding:0 48px;margin-top:16px;}

.fip{font-family:var(--font-m);font-size:12px;color:var(--teal2);cursor:pointer;padding:5px 12px;background:rgba(58,143,165,.07);border:1px solid rgba(58,143,165,.18);border-radius:6px;transition:all .3s;}
.fip:hover{background:rgba(58,143,165,.14);}

#toast{position:fixed;bottom:28px;right:28px;z-index:5000;background:rgba(14,21,32,.96);border:1px solid rgba(58,143,165,.28);border-radius:11px;padding:14px 22px;display:flex;align-items:center;gap:10px;backdrop-filter:blur(20px);transform:translateY(90px);opacity:0;transition:all .4s cubic-bezier(.4,0,.2,1);font-family:var(--font-d);font-size:13px;font-weight:600;}
#toast.show{transform:translateY(0);opacity:1;}
.ti{color:var(--teal2);font-size:16px;}

/* ── REVEAL ── */
.rv{opacity:0;transform:scale(0.8);transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.34,1.56,.64,1);}
.rv.vis{opacity:1;transform:scale(1);}
.rvl{opacity:0;transform:scale(0.8);transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.34,1.56,.64,1);}
.rvl.vis{opacity:1;transform:scale(1);}
.rvr{opacity:0;transform:scale(0.8);transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.34,1.56,.64,1);}
.rvr.vis{opacity:1;transform:scale(1);}
.stgr>*{opacity:0;transform:scale(0.85);transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.34,1.56,.64,1);}
.stgr.vis>*:nth-child(1){opacity:1;transform:scale(1);transition-delay:.04s;}
.stgr.vis>*:nth-child(2){opacity:1;transform:scale(1);transition-delay:.1s;}
.stgr.vis>*:nth-child(3){opacity:1;transform:scale(1);transition-delay:.16s;}
.stgr.vis>*:nth-child(4){opacity:1;transform:scale(1);transition-delay:.22s;}
.stgr.vis>*:nth-child(5){opacity:1;transform:scale(1);transition-delay:.28s;}
.stgr.vis>*:nth-child(6){opacity:1;transform:scale(1);transition-delay:.34s;}

@media(max-width:1024px){
  :root{--sidebar-w:0px;}
  .sidebar{display:none;}
  .mobile-header{display:flex;}
  .mobile-quick-nav{display:flex;}
  .page-wrap{margin-left:0;padding-top:60px;padding-bottom:40px;}
  section{padding:70px 20px;}
  #hero{padding:80px 20px 60px;}
  .fgrid{grid-template-columns:1fr 1fr;}
  .fw{grid-column:span 2;}
  .mgrid{grid-template-columns:1fr;max-width:440px;margin:0 auto;}
  .sgrid{grid-template-columns:1fr;max-width:100%;margin:0 auto;}
  .pf{transform:none;}
  .din{grid-template-columns:1fr;gap:44px;}
  .dsg{grid-template-columns:1fr 1fr;}
  .ftop{grid-template-columns:1fr 1fr;gap:28px;}
  .fbrand{grid-column:span 2;}
  #toast{bottom:100px;}
}
@media(max-width:640px){
  .htitle{font-size:clamp(42px,12vw,68px);}
  .sbar{grid-template-columns:1fr;max-width:320px;}
  .fgrid{grid-template-columns:1fr;}
  .fw{grid-column:span 1;}
  .ftop{grid-template-columns:1fr;}
  .fbrand{grid-column:span 1;}
  .fbot{flex-direction:column;text-align:center;}
  footer{padding:44px 20px 22px;}
  .cos-split{grid-template-columns:1fr;gap:44px;}
  .cos-flip{direction:ltr;}
  .cos-canvas-wrap,.cos-chat-preview{height:360px;}
  .chat-feat-grid{grid-template-columns:1fr 1fr;}
  #toast{bottom:100px;right:16px;left:16px;}
  .dcontainer{padding:60px 20px;}
  .dtitle{letter-spacing:-1px;}
  .dtxt{font-size:15px;}
  .dbtn{padding:16px 32px;font-size:14px;}
  .dstat-bar{flex-direction:column;gap:20px;padding:28px 40px;border-radius:20px;}
  .dstat-divider{width:60px;height:1px;}
    .ftop {
        grid-template-columns: 1fr 1fr;
    }
    .fbrand {
        grid-column: span 2;
    }
    .fcol:last-child {
        grid-column: span 2;
        text-align: center;
    }
}

body {
    background: var(--c0);
    color: #fff;
    font-family: var(--font-b);
    overflow-x: hidden;
    overflow-y: auto;
}

#hcanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    display: block;
}

#hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 80px 48px 80px;
}

@media(max-width: 1024px) {
    .page-wrap {
        margin-left: 0;
        padding-top: 60px;
        padding-bottom: 80px;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    section {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

.ftop {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 44px;
  margin-bottom: 44px;
}
.fbrand {
  grid-column: span 1;
}

@media(max-width: 640px) {
  .ftop {
    grid-template-columns: 1fr 1fr;
    gap: 30px 20px;
    text-align: center;
  }

  .fbrand {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .fbrand p {
    max-width: 100%;
  }

  .fsoc {
    justify-content: center;
  }
  
  .fcol:last-child {
    grid-column: span 2;
    margin-top: 10px;
  }
}