:root{
  --bg:#0a0506; --bg2:#120809; --steel:#221717;
  --red:#e01818; --red2:#ff3322; --ember:#ff6a2b; --crimson:#9a1010; --bllod:#6e0a0a;
  --txt:#f3e7e5; --dim:#b29490; --line:#3a1d1d;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt);
  font-family:"Rajdhani",system-ui,sans-serif; min-height:100vh; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--red2);text-decoration:none}
.hidden{display:none !important}

/* ===== Cinematic background ===== */
#bgvid{
  position:fixed; inset:0; width:100vw; height:100vh; object-fit:cover; z-index:-3;
  opacity:.5; transition:opacity .6s; filter:saturate(1.15) contrast(1.05);
}
#scrim{ position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1200px 720px at 50% -8%, #5a0f0f44 0%, transparent 60%),
    radial-gradient(900px 600px at 90% 110%, #3a060688 0%, transparent 55%),
    linear-gradient(180deg, #0a0506cc 0%, #0a050688 36%, #0a0506 92%);
}
body.no-video{ background:
    radial-gradient(1200px 820px at 50% -15%, #3d0d0d 0%, transparent 60%),
    radial-gradient(1000px 700px at 100% 100%, #2a0606 0%, transparent 55%),
    linear-gradient(180deg,#120708,#0a0506 70%);
  background-attachment:fixed;
}
body.no-video #bgvid{opacity:0}
#grid{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  background-image:linear-gradient(#ff2a1a 1px, transparent 1px), linear-gradient(90deg,#ff2a1a 1px, transparent 1px);
  background-size:46px 46px; mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
  animation:gridmove 18s linear infinite; }
@keyframes gridmove{ from{background-position:0 0,0 0} to{background-position:0 46px,46px 0} }

/* ===== Coin bar ===== */
#coinbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:8px 16px; background:linear-gradient(180deg,#120708f2,#120708bb);
  border-bottom:1px solid #4a1a1a; backdrop-filter:blur(10px);
  box-shadow:0 2px 24px #00000088;
}
.coin-left{display:flex;align-items:center;gap:11px;min-width:0}
.brandlogo{height:34px;width:34px;object-fit:contain;border-radius:7px;
  filter:drop-shadow(0 0 8px #e0181877);}
.tick{font-family:"Saira Condensed";font-weight:800;color:var(--ember);letter-spacing:.04ch;font-size:19px;text-shadow:0 0 14px #ff6a2b66}
.ca{color:var(--dim);font-size:13px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ca:hover{color:var(--red2)}
.coin-right{display:flex;align-items:center;gap:8px}
.cbtn{padding:7px 13px;border:1px solid var(--line);border-radius:9px;background:#1a0d0dcc;color:var(--txt);font-weight:700;font-size:14px;transition:.15s;cursor:pointer;font-family:"Rajdhani"}
.cbtn:hover{border-color:var(--red);box-shadow:0 0 14px #e0181855;color:#fff}
.cbtn.snd{min-width:40px;text-align:center;font-size:15px;line-height:1}
.cbtn.buy{background:linear-gradient(180deg,#ff5a2a,#d11414);border-color:#ff7a44;color:#fff;font-weight:800;text-shadow:0 1px 2px #5a0606}
.cbtn.buy:hover{box-shadow:0 0 18px #ff5a2a99}

/* ===== Layout ===== */
main{position:relative;z-index:1}

/* ===== Hero ===== */
.hero{ min-height:calc(100vh - 48px); display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:40px 16px 60px; position:relative; }
.kicker{ font-family:"Saira Condensed";font-weight:700; letter-spacing:.55ch; font-size:14px; color:var(--red2); text-transform:uppercase;
  padding:6px 18px; border:1px solid #e0181866; border-radius:999px; background:#2a060655; margin-bottom:20px;
  box-shadow:0 0 26px #e0181822; }
.logo{
  font-family:"Anton",sans-serif;font-weight:400;font-size:clamp(62px,16vw,168px);line-height:.82;margin:0;
  letter-spacing:.01ch;text-transform:uppercase;transform:skewX(-7deg);
  color:transparent; background:linear-gradient(180deg,#ffcaa8 0%,#ff5a2a 30%,#e01818 60%,#7e0c0c 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 3px 0 #2a0505) drop-shadow(3px 5px 0 #18020290) drop-shadow(0 0 40px #e0181866);
}
.logo span{display:block;background:none;color:transparent;-webkit-text-stroke:3px #ff3322;text-stroke:3px #ff3322;
  filter:drop-shadow(0 0 24px #ff3322aa)}
.tagline{color:#ecd6d2;font-size:clamp(15px,2.6vw,22px);margin:20px 0 0;letter-spacing:.02ch;line-height:1.45;text-shadow:0 2px 14px #000c}
.tagline b{color:#fff}.tagline .g{color:var(--ember)}

/* ===== Wallet ===== */
#walletRow{margin:32px auto 8px;max-width:580px}
.big{font-family:"Saira Condensed";font-weight:800;font-size:23px;letter-spacing:.05ch;text-transform:uppercase;border:none;border-radius:12px;padding:15px 32px;cursor:pointer;color:#fff}
.primary{background:linear-gradient(180deg,#ff4326,#c20f0f);box-shadow:0 6px 0 #6e0a0a,0 14px 34px #e0181855;text-shadow:0 1px 2px #4a0404}
.primary:active{transform:translateY(3px);box-shadow:0 3px 0 #6e0a0a}
.primary:hover{filter:brightness(1.08)}
#walletInfo{display:inline-flex;align-items:center;gap:12px;background:#1a0d0dcc;border:1px solid var(--line);border-radius:12px;padding:11px 17px;font-weight:700;backdrop-filter:blur(8px)}
#walletInfo .dot{width:9px;height:9px;border-radius:50%;background:#36e06a;box-shadow:0 0 10px #36e06a}
#walletInfo .bal{color:var(--dim)}#walletInfo .bal b{color:var(--ember)}
.link{background:none;border:none;color:var(--dim);cursor:pointer;font:inherit;text-decoration:underline}
.link:hover{color:var(--red2)}
.hint{color:var(--dim);font-size:13.5px;margin:12px 0 0;text-shadow:0 1px 6px #000}

.scrollhint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:var(--dim);font-weight:700;
  font-family:"Saira Condensed";letter-spacing:.25ch;font-size:14px;animation:bob 1.8s ease-in-out infinite}
.scrollhint:hover{color:var(--red2)}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* ===== Play panel ===== */
.panel{max-width:1000px;margin:0 auto;padding:30px 16px 50px;
  background:linear-gradient(180deg, transparent, #0a0506dd 8%, #0a0506 100%)}
.panel-title{font-family:"Anton",sans-serif;text-align:center;font-size:clamp(28px,5vw,46px);letter-spacing:.04ch;margin:6px 0 24px;color:#fff;
  text-transform:uppercase;transform:skewX(-6deg);text-shadow:0 0 32px #e0181855,2px 3px 0 #2a0505}

#modes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mode{position:relative;text-align:left;background:linear-gradient(180deg,#1c1010dd,#140a0bdd);border:1px solid var(--line);border-radius:16px;padding:18px;cursor:pointer;color:var(--txt);transition:.15s;overflow:hidden;backdrop-filter:blur(8px)}
.mode::after{content:"";position:absolute;inset:0;background:radial-gradient(160px 100px at 80% -10%, #e0181822, transparent 70%);opacity:0;transition:.2s}
.mode:hover{transform:translateY(-4px);border-color:var(--red);box-shadow:0 14px 36px #00000099,0 0 26px #e0181833}
.mode:hover::after{opacity:1}
.mode.selected{border-color:var(--red2);box-shadow:0 0 0 2px var(--red2) inset, 0 0 26px #ff332244}
.mode .mico{font-size:32px}
.mode h3{font-family:"Saira Condensed";font-weight:800;margin:8px 0 4px;font-size:24px;letter-spacing:.02ch;text-transform:uppercase}
.mode p{margin:0;color:var(--dim);font-size:14px;line-height:1.4;min-height:40px}
.mode.commit h3{color:var(--ember)}
.badge{display:inline-block;margin-top:12px;font-size:11.5px;font-weight:700;letter-spacing:.08ch;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:#2e1206;color:var(--ember);border:1px solid #5a2410}
.badge.ghost{background:#1a0d0d;color:var(--dim);border-color:var(--line)}

/* ===== Config ===== */
#config{background:linear-gradient(180deg,#160c0dee,#0e0708ee);border:1px solid var(--line);border-radius:18px;padding:20px;margin-top:16px;backdrop-filter:blur(10px)}
.cfg-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cfg-head h2{font-family:"Saira Condensed";font-weight:800;margin:0;font-size:26px;letter-spacing:.03ch;text-transform:uppercase}
.cfg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
label{display:flex;flex-direction:column;gap:6px;font-weight:700;color:var(--dim);font-size:13px;letter-spacing:.05ch;text-transform:uppercase}
select,input{font:inherit;font-weight:600;color:var(--txt);background:#160c0d;border:1px solid var(--line);border-radius:10px;padding:11px 12px;outline:none}
select:focus,input:focus{border-color:var(--red2);box-shadow:0 0 0 3px #ff332222}
.pool{margin:16px 0 4px;padding:12px 14px;border-radius:12px;background:#1e0d06;border:1px solid #5a2410;color:var(--ember);font-weight:700}
.launch{display:block;width:100%;margin-top:18px}

/* ===== Features ===== */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px}
.feat{background:#150c0daa;border:1px solid var(--line);border-radius:14px;padding:16px;backdrop-filter:blur(6px)}
.feat span{font-size:24px}
.feat b{display:block;margin:8px 0 4px;font-family:"Saira Condensed";font-weight:700;font-size:18px;letter-spacing:.02ch;color:#fff;text-transform:uppercase}
.feat i{font-style:normal;color:var(--dim);font-size:13.5px;line-height:1.4}

footer{text-align:center;padding:10px 16px 40px}
footer p{color:#7a5a58;font-size:12px;line-height:1.5;max-width:760px;margin:0 auto}

/* ===== Responsive ===== */
@media (max-width:820px){ .features{grid-template-columns:repeat(2,1fr)} }
@media (max-width:720px){
  #modes{grid-template-columns:1fr}
  .cfg-grid{grid-template-columns:1fr}
  .mode p{min-height:0}
  .brandlogo{height:30px;width:30px}
}