/* ============================
   Delta Executor — Global Styles
   Theme: dark + electric blue + gold
   ============================ */
:root{
  --bg-0: #05070d;
  --bg-1: #0a1020;
  --bg-2: #0f1830;
  --bg-3: #142244;
  --blue: #4cc8ff;
  --blue-2: #2eb5ff;
  --blue-deep: #0a7fc8;
  --gold: #f5b800;
  --gold-2: #ffd84a;
  --gold-deep: #a87200;
  --text: #e6f1ff;
  --text-2: #b8c7dd;
  --muted: #8b9bb4;
  --line: rgba(76,200,255,0.18);
  --line-gold: rgba(245,184,0,0.35);
  --card: rgba(15,24,48,0.6);
  --card-2: rgba(10,16,32,0.85);
  --shadow-glow: 0 0 40px rgba(76,200,255,0.25);
  --shadow-gold: 0 0 35px rgba(245,184,0,0.25);
  --maxw: 1200px;
  --radius: 14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Segoe UI', Roboto, Arial, sans-serif;
  background:var(--bg-0);
  color:var(--text);
  line-height:1.7;
  overflow-x:hidden;
  min-height:100vh;
}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none;transition:color .2s, text-shadow .2s}
a:hover{color:var(--gold-2);text-shadow:0 0 8px rgba(245,184,0,0.6)}
h1,h2,h3,h4{font-family:'Rajdhani','Segoe UI',Arial,sans-serif;font-weight:800;line-height:1.25;letter-spacing:.5px}
h1{font-size:clamp(2.4rem,5vw,4rem); text-transform:uppercase}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem); margin-bottom:.6em; text-transform:uppercase}
h3{font-size:1.35rem; color:var(--gold-2); margin-bottom:.4em}
p{margin-bottom:1em; color:var(--text-2)}
strong{color:var(--gold-2)}

/* ============================
   Background layers & parallax
   ============================ */
.bg-stars, .bg-grid, .bg-glow{
  position:fixed; inset:0; pointer-events:none; z-index:-3;
}
.bg-stars{
  background:
    radial-gradient(1px 1px at 20% 30%, #fff 99%, transparent 100%),
    radial-gradient(1px 1px at 70% 60%, #cfe9ff 99%, transparent 100%),
    radial-gradient(1.5px 1.5px at 40% 80%, #fff 99%, transparent 100%),
    radial-gradient(1px 1px at 85% 20%, #fff 99%, transparent 100%),
    radial-gradient(1.2px 1.2px at 15% 70%, #cfe9ff 99%, transparent 100%),
    radial-gradient(1px 1px at 55% 35%, #fff 99%, transparent 100%),
    radial-gradient(1.4px 1.4px at 90% 90%, #fff 99%, transparent 100%),
    radial-gradient(1px 1px at 5% 15%, #cfe9ff 99%, transparent 100%),
    radial-gradient(1px 1px at 60% 5%, #fff 99%, transparent 100%),
    radial-gradient(1.2px 1.2px at 30% 50%, #fff 99%, transparent 100%);
  background-size: 600px 600px;
  opacity:.35;
  animation: drift 90s linear infinite;
}
@keyframes drift{
  from{background-position:0 0}
  to{background-position:600px 600px}
}
.bg-grid{
  background:
    linear-gradient(rgba(76,200,255,0.06) 1px, transparent 1px) 0 0/60px 60px,
    linear-gradient(90deg, rgba(76,200,255,0.06) 1px, transparent 1px) 0 0/60px 60px;
  z-index:-2;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.bg-glow{
  background:
    radial-gradient(800px 500px at 20% 10%, rgba(76,200,255,0.16), transparent 70%),
    radial-gradient(700px 500px at 80% 30%, rgba(245,184,0,0.10), transparent 70%),
    radial-gradient(900px 600px at 50% 90%, rgba(76,200,255,0.10), transparent 70%);
  z-index:-1;
}

/* ============================
   Header / Nav
   ============================ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:linear-gradient(180deg, rgba(5,7,13,.95), rgba(5,7,13,.7) 70%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px;
}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:48px; width:auto; filter:drop-shadow(0 0 12px rgba(76,200,255,.5))}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand-text .name{font-family:'Rajdhani',sans-serif; font-weight:900; font-size:1.4rem; color:var(--gold-2); letter-spacing:2px}
.brand-text .tag{font-size:.7rem; color:var(--blue); letter-spacing:4px; text-transform:uppercase}
.nav-links{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.nav-links a{
  color:var(--text); padding:8px 12px; border-radius:8px;
  font-weight:600; font-size:.92rem; letter-spacing:.5px; text-transform:uppercase;
}
.nav-links a:hover, .nav-links a.active{
  background:linear-gradient(90deg, rgba(76,200,255,.12), rgba(245,184,0,.12));
  color:var(--gold-2);
}
.nav-cta{
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  color:#000 !important; padding:10px 16px !important;
  box-shadow:0 0 18px rgba(245,184,0,.35);
}
.nav-cta:hover{box-shadow:0 0 25px rgba(245,184,0,.6); color:#000 !important}
.menu-toggle{display:none; background:none; border:1px solid var(--line); color:var(--text); padding:8px 12px; border-radius:8px; cursor:pointer}

/* ============================
   Hero (parallax)
   ============================ */
.hero{
  position:relative; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:120px 22px 80px; text-align:center;
  overflow:hidden;
}
.hero-bg{position:absolute; inset:0; z-index:-1; overflow:hidden}
.hero-bg .layer{
  position:absolute; inset:-10%; will-change:transform;
}
.hero-bg .layer-1{
  background:
    radial-gradient(700px 500px at 30% 30%, rgba(76,200,255,.35), transparent 70%),
    radial-gradient(500px 400px at 70% 70%, rgba(245,184,0,.25), transparent 70%);
  filter:blur(20px);
}
.hero-bg .layer-2{
  background-image:
    radial-gradient(2px 2px at 10% 20%, #fff, transparent 60%),
    radial-gradient(2px 2px at 30% 60%, #cfe9ff, transparent 60%),
    radial-gradient(2px 2px at 80% 30%, #fff, transparent 60%),
    radial-gradient(2px 2px at 60% 80%, #fff, transparent 60%),
    radial-gradient(2px 2px at 90% 90%, #cfe9ff, transparent 60%);
  opacity:.6;
}
.hero-bg .layer-3{
  background:
    linear-gradient(rgba(76,200,255,.08) 1px, transparent 1px) 0 0/80px 80px,
    linear-gradient(90deg, rgba(76,200,255,.08) 1px, transparent 1px) 0 0/80px 80px;
  mask-image:radial-gradient(ellipse at center, #000, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000, transparent 75%);
}

.hero-content{position:relative; z-index:2; max-width:900px}
.hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(10,16,32,.7); border:1px solid var(--line-gold);
  padding:8px 18px; border-radius:999px;
  color:var(--gold-2); font-weight:700; font-size:.85rem; letter-spacing:1.5px;
  margin-bottom:22px;
}
.hero-badge .dot{width:8px; height:8px; background:var(--blue); border-radius:50%; box-shadow:0 0 12px var(--blue); animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1} 50%{opacity:.4}}

.hero-logo{
  width:clamp(140px,22vw,210px); margin:0 auto 22px;
  filter:drop-shadow(0 0 30px rgba(76,200,255,.6)) drop-shadow(0 0 50px rgba(245,184,0,.3));
  animation: float 6s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)}}

.hero h1{
  font-size:clamp(2.6rem, 6.5vw, 4.6rem);
  background:linear-gradient(135deg, #fff 0%, var(--blue) 50%, var(--gold-2) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:18px;
  text-shadow:0 0 60px rgba(76,200,255,.3);
}
.hero .tagline{font-size:clamp(1.05rem, 2vw, 1.35rem); color:var(--text-2); max-width:760px; margin:0 auto 14px}
.hero .subline{font-size:clamp(.95rem, 1.6vw, 1.05rem); color:var(--muted); max-width:760px; margin:0 auto 30px}

.cta-row{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:14px}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:10px; font-weight:800; letter-spacing:1px;
  text-transform:uppercase; font-size:.95rem; cursor:pointer; border:2px solid transparent;
  transition:all .2s;
}
.btn-primary{
  background:linear-gradient(135deg,var(--blue-2),var(--blue-deep));
  color:#fff; box-shadow:0 0 20px rgba(76,200,255,.35);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 0 32px rgba(76,200,255,.6)}
.btn-gold{
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  color:#0a0e1a; box-shadow:0 0 20px rgba(245,184,0,.35);
}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 0 32px rgba(245,184,0,.6); color:#000}
.btn-outline{
  background:transparent; border:2px solid var(--blue); color:var(--blue);
}
.btn-outline:hover{background:rgba(76,200,255,.1); color:var(--gold-2); border-color:var(--gold-2)}

.hero-stats{
  margin-top:50px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px; max-width:760px; margin-left:auto; margin-right:auto;
}
.stat{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 8px; text-align:center; backdrop-filter:blur(8px);
}
.stat .num{font-size:1.8rem; font-weight:900; color:var(--gold-2); font-family:'Rajdhani',sans-serif}
.stat .lbl{font-size:.72rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted)}

/* ============================
   Sections
   ============================ */
.section{padding:90px 22px; position:relative}
.container{max-width:var(--maxw); margin:0 auto}
.section-head{text-align:center; margin-bottom:50px}
.section-head .eyebrow{
  display:inline-block; color:var(--blue); font-weight:800; letter-spacing:4px;
  font-size:.8rem; text-transform:uppercase;
  border:1px solid var(--line-gold); padding:6px 14px; border-radius:999px; margin-bottom:14px;
}
.section-head h2{
  background:linear-gradient(135deg, #fff, var(--blue));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section-head p{max-width:720px; margin:14px auto 0; color:var(--text-2)}

/* ============================
   Cards / grids
   ============================ */
.grid{display:grid; gap:24px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.card{
  position:relative; padding:28px; border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(15,24,48,.85), rgba(10,16,32,.85));
  border:1px solid var(--line); overflow:hidden;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--blue), transparent);
  transform:translateX(-100%); transition:transform .4s;
}
.card:hover{transform:translateY(-6px); border-color:var(--line-gold); box-shadow:var(--shadow-glow)}
.card:hover::before{transform:translateX(0)}

.card .icon{
  width:54px; height:54px; border-radius:12px;
  background:linear-gradient(135deg, rgba(76,200,255,.18), rgba(245,184,0,.18));
  border:1px solid var(--line-gold);
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; margin-bottom:14px;
}
.card h3{color:var(--gold-2)}
.card p{font-size:.95rem}

.card.gold{border-color:var(--line-gold)}
.card.gold .icon{background:linear-gradient(135deg, rgba(245,184,0,.25), rgba(245,184,0,.1))}

/* ============================
   Content prose (for blog posts)
   ============================ */
.prose{max-width:880px; margin:0 auto}
.prose h2{margin:2.4em 0 .8em; position:relative; padding-left:18px}
.prose h2::before{
  content:""; position:absolute; left:0; top:.2em; bottom:.2em; width:4px;
  background:linear-gradient(180deg, var(--blue), var(--gold));
  border-radius:2px;
}
.prose h3{margin:1.6em 0 .6em; color:var(--blue)}
.prose p, .prose li{font-size:1.05rem; color:var(--text-2)}
.prose ul, .prose ol{padding-left:1.4em; margin-bottom:1em}
.prose li{margin-bottom:.4em}
.prose blockquote{
  border-left:3px solid var(--gold-2);
  padding:14px 18px; margin:1.6em 0;
  background:rgba(245,184,0,.05); border-radius:0 8px 8px 0;
  color:var(--text); font-style:italic;
}
.prose code{
  background:rgba(76,200,255,.1); border:1px solid var(--line);
  padding:2px 6px; border-radius:4px; font-size:.9em; color:var(--blue);
}
.prose pre{
  background:#06080f; border:1px solid var(--line); padding:14px;
  border-radius:8px; overflow-x:auto; margin:1em 0;
}
.prose pre code{background:none; border:none; color:var(--text-2)}
.prose table{
  width:100%; border-collapse:collapse; margin:1.4em 0;
  background:var(--card-2); border:1px solid var(--line);
}
.prose th, .prose td{
  padding:10px 14px; border:1px solid var(--line); text-align:left;
}
.prose th{background:rgba(76,200,255,.1); color:var(--gold-2)}

/* ============================
   Platforms / Steps
   ============================ */
.platforms{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px}
.platform{
  text-align:center; padding:30px 18px;
  background:linear-gradient(180deg, rgba(15,24,48,.7), rgba(10,16,32,.9));
  border:1px solid var(--line); border-radius:var(--radius);
  transition:all .25s;
}
.platform:hover{border-color:var(--line-gold); box-shadow:var(--shadow-gold)}
.platform .glyph{font-size:2.4rem; margin-bottom:10px; color:var(--blue)}
.platform h3{color:var(--gold-2); text-transform:uppercase; letter-spacing:2px}

.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:22px; counter-reset:step}
.step{
  position:relative; padding:24px;
  background:rgba(10,16,32,.6); border:1px solid var(--line);
  border-radius:var(--radius); counter-increment:step;
}
.step::before{
  content:counter(step); position:absolute; top:-18px; left:-1px;
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg,var(--blue-2),var(--blue-deep));
  color:#fff; font-weight:900; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 18px rgba(76,200,255,.5);
  font-family:'Rajdhani',sans-serif;
}
.step h3{margin-top:8px; color:var(--text)}
.step p{font-size:.92rem}

/* ============================
   FAQ
   ============================ */
.faq{max-width:880px; margin:0 auto}
.faq-item{
  border:1px solid var(--line); border-radius:10px;
  margin-bottom:12px; background:rgba(10,16,32,.6); overflow:hidden;
}
.faq-item summary{
  padding:18px 22px; cursor:pointer; font-weight:700; color:var(--text);
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px;
  transition: background .2s;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{background:rgba(76,200,255,.05)}
.faq-item summary::after{content:"+"; color:var(--blue); font-size:1.4rem; transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(45deg); color:var(--gold-2)}
.faq-item .answer{padding:0 22px 18px; color:var(--text-2)}

/* ============================
   CTA banner
   ============================ */
.cta-banner{
  margin:80px auto; max-width:1080px; padding:50px 30px;
  background:linear-gradient(135deg, rgba(76,200,255,.12), rgba(245,184,0,.12));
  border:1px solid var(--line-gold); border-radius:18px;
  text-align:center; position:relative; overflow:hidden;
}
.cta-banner::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(400px 200px at 20% 30%, rgba(76,200,255,.4), transparent 70%),
    radial-gradient(400px 200px at 80% 70%, rgba(245,184,0,.3), transparent 70%);
  opacity:.4;
}
.cta-banner > *{position:relative}
.cta-banner h2{color:#fff; margin-bottom:12px}
.cta-banner p{color:var(--text); max-width:680px; margin:0 auto 22px}

/* ============================
   Footer
   ============================ */
.site-footer{
  background:linear-gradient(180deg, var(--bg-0), #02030a);
  border-top:1px solid var(--line); padding:60px 22px 24px; margin-top:60px;
}
.foot-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; gap:30px; grid-template-columns:1.5fr repeat(3, 1fr);
}
.foot-grid h4{color:var(--gold-2); text-transform:uppercase; letter-spacing:2px; font-size:.95rem; margin-bottom:14px}
.foot-grid a, .foot-grid p{color:var(--text-2); font-size:.9rem; display:block; margin-bottom:8px}
.foot-grid a:hover{color:var(--gold-2)}
.foot-grid ul{list-style:none}
.foot-grid .brand{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.foot-grid .brand img{height:44px}
.foot-bottom{
  max-width:var(--maxw); margin:30px auto 0; padding-top:20px;
  border-top:1px solid var(--line);
  text-align:center; font-size:.85rem; color:var(--muted);
}
.disclaimer{
  max-width:900px; margin:24px auto 0; padding:16px;
  background:rgba(245,184,0,.08); border:1px solid var(--line-gold);
  border-radius:10px; font-size:.82rem; color:var(--text-2); text-align:center;
}

/* ============================
   Scroll reveal
   ============================ */
.reveal{opacity:0; transform:translateY(40px); transition:all .8s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1; transform:none}

/* ============================
   Parallax section
   ============================ */
.parallax-section{
  position:relative; padding:120px 22px; text-align:center;
  background:
    linear-gradient(rgba(5,7,13,.7), rgba(5,7,13,.85)),
    radial-gradient(circle at 30% 30%, rgba(76,200,255,.4), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(245,184,0,.3), transparent 50%),
    #0a0e1a;
  background-attachment: fixed;
  background-size: cover;
}
.parallax-section h2{
  background:linear-gradient(135deg, #fff, var(--gold-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ============================
   Responsive
   ============================ */
@media (max-width: 880px){
  .nav-links{display:none; position:absolute; top:72px; right:14px; left:14px;
    flex-direction:column; background:var(--bg-1); padding:12px; border:1px solid var(--line); border-radius:12px}
  .nav-links.open{display:flex}
  .menu-toggle{display:inline-flex}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .section{padding:60px 18px}
}
@media (max-width:520px){
  .foot-grid{grid-template-columns:1fr}
  .hero{padding-top:100px}
  .hero h1{font-size:2.2rem}
}

/* ============================
   Utilities
   ============================ */
.text-center{text-align:center}
.mt-3{margin-top:30px}.mt-4{margin-top:40px}
.mb-3{margin-bottom:30px}
.lead{font-size:1.15rem; color:var(--text)}
.gold-text{color:var(--gold-2)}
.blue-text{color:var(--blue)}
.divider{height:1px; background:linear-gradient(90deg, transparent, var(--line-gold), transparent); margin:30px 0}
.kbd{display:inline-block; padding:3px 8px; border-radius:6px;
  background:rgba(76,200,255,.12); border:1px solid var(--line);
  font-family:monospace; font-size:.85rem; color:var(--blue)}


/* Scroll animation disabled */
html { scroll-behavior: auto !important; }
*,
*::before,
*::after {
  animation: none !important;
  transition: none !important;
}