:root{
  --bg:#070708; --bg2:#0e0e11; --card:#121216; --txt:#f3f4f6; --muted:#9a9aa6;
  --accent:#ff3b3b; --accent2:#ff7a3b; --border:#20202a; --glow:rgba(255,59,59,.28);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--txt);line-height:1.65;overflow-x:hidden}
.container{max-width:1080px;margin:0 auto;padding:0 24px}
a{text-decoration:none}

header{position:sticky;top:0;z-index:50;background:rgba(7,7,8,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo-img{height:40px;width:auto;display:block}
nav ul{display:flex;gap:28px;list-style:none}
nav a{color:var(--muted);font-size:15px;transition:color .2s}
nav a:hover{color:var(--txt)}
.nav-cta{background:var(--accent);color:#fff !important;padding:9px 20px;border-radius:999px;font-weight:700;box-shadow:0 6px 20px var(--glow)}

.hero{position:relative;text-align:center;padding:100px 0 80px}
.hero::before{content:"";position:absolute;top:-140px;left:50%;transform:translateX(-50%);width:760px;height:540px;
  background:radial-gradient(circle,var(--glow),transparent 65%);filter:blur(40px);z-index:-1}
.badge{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);color:var(--accent);
  padding:7px 16px;border-radius:999px;font-size:13px;font-weight:600;margin-bottom:26px}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero h1{font-size:clamp(38px,6.2vw,66px);font-weight:800;line-height:1.04;letter-spacing:-2px;margin-bottom:22px}
.hero h1 span{background:linear-gradient(120deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);font-size:19px;max-width:620px;margin:0 auto 36px}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 32px;border-radius:999px;font-weight:700;font-size:16px;transition:transform .15s,box-shadow .2s;cursor:pointer;border:none}
.btn.primary{background:var(--accent);color:#fff;box-shadow:0 10px 34px var(--glow)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 14px 44px var(--glow)}
.btn.ghost{background:transparent;color:var(--txt);border:1px solid var(--border)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;margin:10px 0 70px}
.stat{text-align:center;padding:26px;background:var(--card);border:1px solid var(--border);border-radius:16px}
.stat .num{font-size:34px;font-weight:800;color:var(--accent)}
.stat .lbl{color:var(--muted);font-size:14px;margin-top:4px}

section.block{padding:70px 0;border-top:1px solid var(--border)}
.eyebrow{color:var(--accent);font-weight:700;font-size:14px;letter-spacing:1px;text-transform:uppercase}
.block h2{font-size:clamp(28px,4vw,42px);font-weight:800;letter-spacing:-1px;margin:10px 0 14px}
.block .sub{color:var(--muted);font-size:17px;max-width:600px;margin-bottom:40px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:30px;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-4px);border-color:var(--accent)}
.card .ico{width:50px;height:50px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.card .ico svg{width:26px;height:26px;fill:#fff}
.card h3{font-size:20px;margin-bottom:10px}
.card p{color:var(--muted);font-size:15px}

/* videos */
.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.video{background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;transition:transform .2s,border-color .2s}
.video:hover{transform:translateY(-4px);border-color:var(--accent)}
.video.portrait{max-width:340px;margin:0 auto}
.video video{width:100%;display:block;background:#000}
.video .meta{padding:16px 18px}
.video .meta h4{font-size:17px;margin-bottom:8px}
.video .meta .row{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:13px}
.video .meta .row .r{color:var(--accent2)}
.stars{color:#ffb020;letter-spacing:1px}

/* newsletter */
.newsletter-wrap{background:linear-gradient(135deg,var(--card),#1a0e0e);border:1px solid var(--border);
  border-radius:24px;padding:50px;text-align:center}
form{max-width:460px;margin:26px auto 0}
.field{display:flex;gap:10px;flex-wrap:wrap}
input[type=email],input[type=text]{flex:1;min-width:200px;padding:14px 16px;border-radius:12px;
  border:1px solid var(--border);background:#0a0a0c;color:var(--txt);font-size:15px}
input:focus{outline:none;border-color:var(--accent)}
.check{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;font-size:13px;color:var(--muted);text-align:left}
.check input{margin-top:3px}
.check a{color:var(--accent)}
.note{color:var(--muted);font-size:13px;margin-top:14px}

footer{border-top:1px solid var(--border);padding:44px 0 30px;color:var(--muted);font-size:14px;margin-top:40px}
.foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;margin-bottom:24px}
.foot-grid a{color:var(--muted)}.foot-grid a:hover{color:var(--txt)}
.social{display:flex;gap:12px;margin-top:12px}
.social a{width:38px;height:38px;border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;transition:.2s}
.social a:hover{border-color:var(--accent);background:var(--card)}
.social svg{width:18px;height:18px;fill:var(--muted)}
.social a:hover svg{fill:var(--accent)}
footer .copy{border-top:1px solid var(--border);padding-top:20px;font-size:13px}

@media(max-width:640px){nav ul{display:none}.hero{padding:64px 0 46px}.newsletter-wrap{padding:30px 20px}}

/* comments / rating / modal */
.muted{color:var(--muted)}
.comment-form{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;max-width:640px}
.rate-line{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-size:15px;color:var(--muted)}
#ratePick .s{font-size:26px;color:#3a3a44;cursor:pointer;transition:.15s;line-height:1}
#ratePick .s:hover,#ratePick .s.on{color:#ffb020;text-shadow:0 0 10px rgba(255,176,32,.5)}
.comment-form textarea{width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--border);background:#0a0a0c;color:var(--txt);font-size:15px;font-family:inherit;resize:vertical}
.comment-form textarea:focus{outline:none;border-color:var(--accent)}
.form-row{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.comment-list{margin-top:28px;display:flex;flex-direction:column;gap:14px;max-width:760px}
.comment{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 18px}
.c-head{display:flex;align-items:center;gap:12px;margin-bottom:6px;flex-wrap:wrap}
.c-name{font-weight:700}
.c-date{color:var(--muted);font-size:12px;margin-left:auto}
.c-body{color:#d6d8e0;font-size:15px;white-space:pre-wrap;word-break:break-word}

.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:100;align-items:center;justify-content:center;padding:20px}
.modal-box{background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:34px;max-width:420px;width:100%;position:relative}
.modal-x{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--muted);font-size:26px;cursor:pointer;line-height:1}
.modal-x:hover{color:var(--txt)}

/* upload bar + video iframes */
.upload-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--card),#1a0e0e);border:1px solid var(--border);border-radius:16px;padding:22px 26px;margin-top:40px}
#vFeed .video iframe{background:#000}