:root{
  --bg:#05080F;
  --bg2:#0A0E18;
  --bg3:#0D1220;
  --card:rgba(255,255,255,.04);
  --border:rgba(255,255,255,.08);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.58);
  --cyan:#00D4FF;
  --purple:#8B5CF6;
  --green:#10B981;
  --gold:#F59E0B;
  --pink:#EC4899;
  --shadow: 0 25px 80px rgba(0,0,0,.6);
  --glow-cyan: 0 0 60px rgba(0,212,255,.15);
  --glow-purple: 0 0 60px rgba(139,92,246,.15);
  --radius:20px;
  --max:1200px;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  --sans: 'Outfit', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{min-height:100%}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 1200px 600px at 10% 0%, rgba(0,212,255,.12), transparent),
    radial-gradient(ellipse 1000px 600px at 90% 5%, rgba(139,92,246,.12), transparent),
    radial-gradient(ellipse 800px 400px at 50% 100%, rgba(16,185,129,.06), transparent);
  background-attachment: fixed;
  overflow-x:hidden;
  line-height:1.6;
}

/* Animated background grid */
body::before{
  content:'';
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events:none;
  z-index:0;
}

a{color:inherit;text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 28px; position:relative; z-index:1}

/* === TOP NAV === */
.nav{
  position:sticky; top:0; z-index:100;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: rgba(5,8,15,.75);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:800;
}
.logo{
  height:36px;
  width:auto;
  filter: drop-shadow(0 0 20px rgba(0,212,255,.3));
}
.brand-name{
  font-size:17px;
  font-weight:700;
  letter-spacing:2px;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.brand-ai{
  font-size:17px;
  font-weight:700;
  letter-spacing:2px;
  color: rgba(139,92,246,.85);
  margin-left:-6px;
}
.nav-links{
  display:flex; gap:8px; align-items:center;
}
.nav-links a{
  padding:10px 16px;
  border-radius:12px;
  font-size:14px;
  font-weight:500;
  color:var(--muted);
  transition: all .2s ease;
}
.nav-links a:hover{
  color:var(--text);
  background: rgba(255,255,255,.06);
}

/* === BUTTONS === */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:14px 24px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition: all .2s ease;
  position:relative;
  overflow:hidden;
}
.btn::before{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.1), transparent);
  opacity:0;
  transition: opacity .2s ease;
}
.btn:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
.btn:hover::before{opacity:1}

.btn.primary{
  border: 1px solid rgba(0,212,255,.4);
  background: linear-gradient(135deg, rgba(0,212,255,.15) 0%, rgba(139,92,246,.15) 100%);
  box-shadow: 0 0 40px rgba(0,212,255,.1), inset 0 1px 0 rgba(255,255,255,.1);
}
.btn.primary:hover{
  border-color: rgba(0,212,255,.6);
  box-shadow: 0 0 60px rgba(0,212,255,.2), 0 20px 40px rgba(0,0,0,.3);
}
.btn.small{padding:12px 18px; border-radius:12px; font-size:13px}

/* === HERO === */
.hero{padding:80px 0 40px}

.badge{
  display:inline-flex; gap:10px; align-items:center;
  padding:10px 18px;
  border-radius:999px;
  background: linear-gradient(135deg, rgba(0,212,255,.08), rgba(139,92,246,.08));
  border:1px solid rgba(0,212,255,.2);
  color: var(--cyan);
  font-size:13px;
  font-weight:500;
  margin-bottom:24px;
  animation: fadeInUp .6s ease;
}
.badge i{
  width:8px; height:8px; border-radius:999px;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
  animation: pulse 2s infinite;
}

@keyframes pulse{
  0%,100%{opacity:1; transform:scale(1)}
  50%{opacity:.6; transform:scale(1.2)}
}

@keyframes fadeInUp{
  from{opacity:0; transform:translateY(20px)}
  to{opacity:1; transform:translateY(0)}
}

h1{
  margin:0;
  font-size: clamp(40px, 5.5vw, 68px);
  font-weight:800;
  letter-spacing:-2px;
  line-height:1.05;
  animation: fadeInUp .6s ease .1s both;
}
.grad{
  background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 50%, var(--pink) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  text-shadow: 0 0 80px rgba(0,212,255,.3);
}

.lead{
  margin:20px 0 0;
  color: var(--muted);
  font-size:19px;
  line-height:1.7;
  max-width: 60ch;
  animation: fadeInUp .6s ease .2s both;
}
.lead b{
  color:var(--text);
  font-weight:600;
}

.hero-cta{
  margin-top:32px;
  display:flex; gap:14px; flex-wrap:wrap;
  animation: fadeInUp .6s ease .3s both;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.4fr .6fr;
  gap:24px;
  align-items:stretch;
  margin-top:48px;
  animation: fadeInUp .6s ease .4s both;
}

/* === PANELS === */
.panel{
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.panel::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,.5), rgba(139,92,246,.5), transparent);
}
.panel-inner{padding:24px}

.kpis{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:14px;
  margin-top:18px;
}
.kpi{
  padding:18px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  transition: all .2s ease;
}
.kpi:hover{
  border-color: rgba(0,212,255,.2);
  background: rgba(0,212,255,.04);
}
.kpi strong{
  display:block;
  font-size:16px;
  font-weight:700;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.kpi span{display:block; margin-top:8px; font-size:13px; color:var(--muted); line-height:1.5}

/* === CODE BOX === */
.codebox{
  height:100%;
  position:relative;
  background: linear-gradient(180deg, rgba(10,14,24,1) 0%, rgba(5,8,15,1) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow), var(--glow-cyan);
  overflow:hidden;
}
.codebox::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
}
.code-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}
.dots{display:flex; gap:8px}
.dot{
  width:12px; height:12px; border-radius:99px;
  background: rgba(255,255,255,.1);
}
.dot:first-child{background: #FF5F56}
.dot:nth-child(2){background: #FFBD2E}
.dot:nth-child(3){background: #27CA40}

pre{
  margin:0;
  padding:20px;
  font-family: var(--mono);
  font-size: 13px;
  line-height:1.8;
  color: rgba(255,255,255,.75);
  white-space: pre-wrap;
}
.hl{color: var(--cyan); font-weight:500}
.hp{color: var(--purple); font-weight:500}
.hg{color: var(--green); font-weight:500}

/* === SECTIONS === */
section{padding:80px 0}

.section-title{
  font-size: 13px;
  font-weight:600;
  color: var(--cyan);
  letter-spacing:.25em;
  text-transform:uppercase;
  margin:0 0 16px;
}
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:40px;
  margin-bottom:40px;
}
.section-head h2{
  margin:0;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight:700;
  letter-spacing:-1px;
  line-height:1.2;
}
.section-head p{
  margin:0;
  max-width: 50ch;
  color: var(--muted);
  line-height:1.7;
  font-size:16px;
}

/* === SERVICE CARDS === */
.service-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:24px;
}
.service-card{
  padding:28px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.01) 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow: var(--shadow);
  transition: all .3s ease;
  position:relative;
  overflow:hidden;
}
.service-card::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
}
.service-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow), 0 0 80px rgba(0,0,0,.3);
}

.service-header{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:16px;
}
.service-icon{
  width:56px; height:56px;
  border-radius:16px;
  display:grid; place-items:center;
  flex-shrink:0;
  position:relative;
}
.service-icon::after{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:16px;
  padding:1px;
  background: linear-gradient(135deg, currentColor, transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.3;
}
.service-icon svg{
  width:28px; height:28px;
  stroke: currentColor;
}
.service-card h3{
  margin:0;
  font-size:22px;
  font-weight:700;
}
.service-desc{
  margin:0 0 20px;
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
}
.service-list{
  list-style:none;
  margin:0 0 20px;
  padding:0;
}
.service-list li{
  padding:14px 18px;
  margin-bottom:10px;
  border-radius:14px;
  background: rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.05);
  transition: all .2s ease;
}
.service-list li:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
}
.service-list li strong{
  display:block;
  font-size:14px;
  font-weight:600;
  color:var(--text);
  margin-bottom:4px;
}
.service-list li span{
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
}

/* Service Accents */
.service-ai::before{background: linear-gradient(90deg, var(--cyan), transparent)}
.service-ai .service-icon{
  background: rgba(0,212,255,.1);
  color: var(--cyan);
}
.service-ai:hover{border-color: rgba(0,212,255,.2)}

.service-games::before{background: linear-gradient(90deg, var(--purple), transparent)}
.service-games .service-icon{
  background: rgba(139,92,246,.1);
  color: var(--purple);
}
.service-games:hover{border-color: rgba(139,92,246,.2)}

.service-affiliate::before{background: linear-gradient(90deg, var(--green), transparent)}
.service-affiliate .service-icon{
  background: rgba(16,185,129,.1);
  color: var(--green);
}
.service-affiliate:hover{border-color: rgba(16,185,129,.2)}

.service-cashback::before{background: linear-gradient(90deg, var(--gold), transparent)}
.service-cashback .service-icon{
  background: rgba(245,158,11,.1);
  color: var(--gold);
}
.service-cashback:hover{border-color: rgba(245,158,11,.2)}

/* === CHIPS === */
.chiprow{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.chip{
  font-size:12px;
  font-weight:500;
  color: rgba(255,255,255,.7);
  padding:8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  transition: all .2s ease;
}
.chip:hover{
  border-color: rgba(255,255,255,.15);
  background: rgba(255,255,255,.05);
}

/* === CARDS (Why section) === */
.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px;
}
.card{
  padding:28px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
  transition: all .3s ease;
  position:relative;
}
.card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius: var(--radius);
  padding:1px;
  background: linear-gradient(135deg, rgba(0,212,255,.3), rgba(139,92,246,.3), transparent, transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:0;
  transition: opacity .3s ease;
}
.card:hover{
  transform: translateY(-4px);
}
.card:hover::before{opacity:1}
.card h3{
  margin:0 0 12px;
  font-size:18px;
  font-weight:700;
}
.card p{margin:0; color:var(--muted); line-height:1.7; font-size:14px}

/* === SPLIT (Platform) === */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:24px;
}
.list{
  margin:16px 0 0;
  padding:0;
  list-style:none;
  color:var(--muted);
  line-height:1.8;
  font-size:14px;
}
.list li{
  display:flex;
  gap:12px;
  margin:12px 0;
  padding:12px 16px;
  border-radius:12px;
  background: rgba(255,255,255,.02);
  transition: all .2s ease;
}
.list li:hover{
  background: rgba(255,255,255,.04);
}
.tick{
  width:22px; height:22px; border-radius:999px;
  background: rgba(0,212,255,.15);
  border:1px solid rgba(0,212,255,.3);
  display:grid; place-items:center;
  flex:0 0 auto;
  color: var(--cyan);
}
.tick svg{width:12px; height:12px}

/* === CTA === */
.cta{
  padding:40px;
  border-radius: 24px;
  background:
    radial-gradient(ellipse 600px 300px at 20% 50%, rgba(0,212,255,.12), transparent),
    radial-gradient(ellipse 600px 300px at 80% 50%, rgba(139,92,246,.12), transparent),
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow: var(--shadow), var(--glow-cyan), var(--glow-purple);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
  position:relative;
  overflow:hidden;
}
.cta::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--purple), transparent);
}
.cta h3{margin:0; font-size:24px; font-weight:700}
.cta p{margin:10px 0 0; color:var(--muted); max-width:55ch; line-height:1.7; font-size:15px}
.cta-actions{display:flex; gap:14px; flex-wrap:wrap}

/* === FOOTER === */
footer{
  padding:0;
  color: rgba(255,255,255,.6);
  border-top: 1px solid rgba(255,255,255,.06);
  position:relative;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.3) 100%);
}
footer::before{
  content:'';
  position:absolute;
  top:0; left:50%; transform:translateX(-50%);
  width:400px; height:1px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--purple), transparent);
}

.footer-top{
  display:grid;
  grid-template-columns: 1fr 2fr;
  gap:60px;
  padding:60px 0 48px;
  max-width: var(--max);
  margin: 0 auto;
  padding-left:28px;
  padding-right:28px;
}

.footer-brand{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.footer-logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.footer-logo-img{
  height:32px;
  width:auto;
  filter: drop-shadow(0 0 15px rgba(0,212,255,.25));
}
.footer-logo-text{
  font-size:16px;
  font-weight:700;
  letter-spacing:2px;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.footer-logo-ai{
  color: rgba(139,92,246,.8);
  background:none;
  -webkit-background-clip:unset;
  margin-left:-4px;
}
.footer-tagline{
  margin:8px 0 0;
  font-size:14px;
  font-weight:600;
  color: var(--text);
  letter-spacing:.5px;
}
.footer-desc{
  margin:4px 0 0;
  font-size:13px;
  color: var(--muted);
  line-height:1.6;
  max-width:280px;
}

.footer-nav{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:40px;
}
.footer-col{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.footer-col h4{
  margin:0 0 8px;
  font-size:13px;
  font-weight:600;
  color: var(--text);
  letter-spacing:.5px;
  text-transform:uppercase;
}
.footer-col a{
  font-size:14px;
  color: rgba(255,255,255,.55);
  transition: all .2s ease;
  padding:4px 0;
}
.footer-col a:hover{
  color: var(--cyan);
  transform: translateX(4px);
}
.footer-email{
  color: var(--cyan) !important;
  font-family: var(--mono);
  font-size:13px !important;
}
.footer-response{
  margin:4px 0 0;
  font-size:12px;
  color: rgba(255,255,255,.4);
}

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:24px 28px;
  max-width: var(--max);
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,.06);
  flex-wrap:wrap;
}
.footer-copy{
  font-size:13px;
  color: rgba(255,255,255,.4);
}
.footer-legal{
  display:flex;
  gap:24px;
}
.footer-legal a{
  font-size:13px;
  color: rgba(255,255,255,.4);
  transition: color .2s ease;
}
.footer-legal a:hover{
  color: var(--cyan);
}

/* === RESPONSIVE === */
@media (max-width: 1024px){
  .hero-grid{grid-template-columns: 1fr}
  .service-grid{grid-template-columns: 1fr}
  .cards{grid-template-columns: 1fr}
  .split{grid-template-columns: 1fr}
  .section-head{flex-direction:column; align-items:flex-start; gap:16px}
}

@media (max-width: 768px){
  .nav-links{display:none}
  .hero{padding:60px 0 30px}
  h1{font-size:36px; letter-spacing:-1px}
  .lead{font-size:16px}
  .kpis{grid-template-columns: 1fr}
  .cta{padding:28px; flex-direction:column; text-align:center}
  .cta-actions{justify-content:center}
  .footer-top{grid-template-columns:1fr; gap:40px; padding:40px 20px 32px}
  .footer-nav{grid-template-columns:1fr 1fr; gap:32px}
  .footer-bottom{flex-direction:column; text-align:center; gap:16px; padding:20px}
  .footer-legal{justify-content:center}
}

@media (max-width: 480px){
  .footer-nav{grid-template-columns:1fr}
}

/* === LEGAL PAGES === */
.legal-page{
  padding:80px 0 60px;
  max-width:800px;
  margin:0 auto;
}
.legal-header{
  margin-bottom:48px;
  padding-bottom:32px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.legal-header h1{
  font-size:clamp(32px, 5vw, 48px);
  font-weight:700;
  letter-spacing:-1px;
  margin:0 0 16px;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.legal-updated{
  font-size:14px;
  color:var(--muted);
  font-family:var(--mono);
}

.legal-content{
  color:rgba(255,255,255,.75);
  line-height:1.8;
}
.legal-section{
  margin-bottom:40px;
  padding-bottom:32px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.legal-section:last-child{
  border-bottom:none;
  margin-bottom:0;
}
.legal-section h2{
  font-size:22px;
  font-weight:700;
  color:var(--text);
  margin:0 0 16px;
  letter-spacing:-.3px;
}
.legal-section h3{
  font-size:16px;
  font-weight:600;
  color:var(--text);
  margin:24px 0 12px;
}
.legal-section p{
  margin:0 0 16px;
  font-size:15px;
}
.legal-section ul{
  margin:0 0 16px;
  padding-left:24px;
}
.legal-section li{
  margin:8px 0;
  font-size:15px;
}
.legal-section li strong{
  color:var(--text);
}
.legal-section a{
  color:var(--cyan);
  transition:color .2s ease;
}
.legal-section a:hover{
  color:var(--purple);
}

.legal-contact{
  margin-top:20px;
  padding:20px 24px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
}
.legal-contact p{
  margin:4px 0;
}

@media (max-width: 768px){
  .legal-page{padding:60px 0 40px}
  .legal-header{margin-bottom:32px; padding-bottom:24px}
  .legal-section{margin-bottom:32px; padding-bottom:24px}
}