/*
Theme Name: NDX-7 Landing
Theme URI: https://example.com/
Author: nodisk
Description: One-page landing theme for NDX-7 (neon orange/black). Includes Telegram CTA compatible with NDX Affiliate plugin shortcode.
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ndx7-landing
*/

:root{
  --bg0:#050507;
  --bg1:#07070A;
  --card: rgba(255,255,255,.05);
  --stroke: rgba(255,255,255,.10);
  --text:#EDEDF2;
  --muted: rgba(237,237,242,.72);
  --orange:#FF7A18;
  --orange2:#FFB347;
  --shadow: 0 18px 50px rgba(0,0,0,.55);
  --radius: 22px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: radial-gradient(900px 600px at 20% 10%, rgba(255,122,24,.12), transparent 60%),
              radial-gradient(700px 500px at 80% 30%, rgba(255,179,71,.09), transparent 60%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
  font-family: Tajawal, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  line-height: 1.7;
}

a{color:inherit}
.container{width:min(1100px, 92vw); margin: 0 auto;}
.nav{
  position: sticky; top:0; z-index: 99;
  backdrop-filter: blur(10px);
  background: rgba(5,5,7,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav .inner{display:flex;align-items:center;justify-content:space-between; padding: 12px 0;}
.brand{display:flex;align-items:center;gap:10px;font-weight:900; letter-spacing:.2px}
.badge{display:inline-flex;align-items:center; gap:8px; padding: 6px 10px; border-radius: 999px;
  border:1px solid rgba(255,122,24,.25); background: rgba(255,122,24,.10); color: rgba(255,179,71,.95); font-size: 13px; font-weight:800}
.menu{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.menu a{opacity:.9; text-decoration:none; font-weight:700; font-size: 14px}
.menu a:hover{opacity:1}

.hero{padding: 34px 0 18px}
.hero-grid{display:grid; grid-template-columns: 1.15fr .85fr; gap: 18px; align-items:stretch}
.card{
  border: 1px solid var(--stroke);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero-main{padding: 26px}
.h1{margin:0; font-size: 42px; line-height:1.15; font-weight: 900}
.sub{margin: 12px 0 0; color: var(--muted); font-size: 16px}
.cta-row{display:flex; gap: 10px; align-items:center; flex-wrap: wrap; margin-top: 18px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 16px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  text-decoration:none; font-weight:900;
}
.btn:hover{background: rgba(255,255,255,.10)}
.btn-primary{
  background: linear-gradient(135deg, rgba(255,122,24,.98), rgba(255,179,71,.98));
  border: 1px solid rgba(255,122,24,.35);
  color: #111;
}
.pills{display:flex; gap: 8px; flex-wrap:wrap; margin-top: 14px}
.pill{
  padding: 8px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(237,237,242,.84);
  font-size: 13px; font-weight:800;
}

.hero-side{padding: 18px}
.kpi{display:grid; grid-template-columns: repeat(2,1fr); gap: 10px}
.kpi .k{padding: 14px; border-radius: 18px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03)}
.kpi .k .t{font-size:12px; color: var(--muted); font-weight:800}
.kpi .k .v{font-size:22px; font-weight: 900; margin-top: 6px}
.glow{
  position: relative;
  overflow:hidden;
}
.glow:before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(600px 120px at 30% 0%, rgba(255,122,24,.30), transparent 60%),
              radial-gradient(500px 140px at 70% 10%, rgba(255,179,71,.20), transparent 60%);
  opacity: .8;
  pointer-events:none;
}

.section{padding: 18px 0}
.section h2{margin: 0 0 10px; font-size: 26px; font-weight: 900}
.section p{margin: 0; color: var(--muted)}
.grid-2{display:grid;grid-template-columns: 1fr 1fr; gap: 18px}
.video-wrap{padding: 16px}
.video{
  width:100%;
  aspect-ratio: 16/9;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  overflow:hidden;
}
.video iframe, .video video{width:100%;height:100%; display:block}

.pricing{display:grid; grid-template-columns: repeat(3,1fr); gap: 12px}
.price-card{padding: 16px}
.price-title{font-weight: 900; font-size: 18px}
.price{font-weight: 900; font-size: 28px; margin-top: 6px}
.ul{margin: 10px 0 0; padding: 0 18px}
.ul li{margin: 6px 0; color: rgba(237,237,242,.86); font-weight:700}
.small{font-size: 13px; color: var(--muted)}
.sep{height:1px; background: rgba(255,255,255,.10); margin: 14px 0}

.faq{padding: 16px}
.faq-item{border: 1px solid rgba(255,255,255,.10); border-radius: 16px; overflow:hidden; background: rgba(255,255,255,.03); margin: 10px 0}
.faq-q{width:100%; text-align:right; padding: 12px 14px; background: transparent; border:0; color: var(--text); font-weight: 900; cursor:pointer}
.faq-a{display:none; padding: 0 14px 12px; color: rgba(237,237,242,.82); font-weight:700}
.faq-item.open .faq-a{display:block}

.footer{padding: 26px 0; color: var(--muted); font-weight:700}
.footer .row{display:flex;justify-content:space-between; gap: 10px; flex-wrap:wrap}
.social{display:flex; gap: 10px; flex-wrap:wrap}
.social a{padding:8px 10px;border:1px solid rgba(255,255,255,.10); border-radius: 999px; text-decoration:none; background: rgba(255,255,255,.04)}
.social a:hover{background: rgba(255,255,255,.07)}

@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr}
  .pricing{grid-template-columns: 1fr}
  .grid-2{grid-template-columns: 1fr}
  .h1{font-size: 34px}
}