/* DellHost Styles - dark theme with blue accents */
:root{
  --bg:#0d1117;
  --bg-elev:#111826;
  --text:#e6edf3;
  --muted:#9aa7b2;
  --primary:#2b7bff;
  --primary-600:#1e63d6;
  --primary-700:#174da7;
  --card:#0f1522;
  --border:#1f2a3a;
  --success:#00d084;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}

/* Bubbles animated background */
.bubbles-background{
  position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none;background:radial-gradient(1200px 700px at 80% -20%, rgba(43,123,255,.15), transparent 60%), radial-gradient(900px 500px at -10% 20%, rgba(43,123,255,.12), transparent 60%), var(--bg);
}
/* Lift content above background */
.header, main, .footer{position:relative;z-index:1}
.bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(43,123,255,.8), rgba(43,123,255,.35) 60%, rgba(43,123,255,.1) 100%);filter:blur(0.2px);opacity:.25;animation:floatUp linear infinite;will-change:transform}
@keyframes floatUp{0%{transform:translateX(var(--tx,0px)) translateY(100vh)}100%{transform:translateX(var(--tx,0px)) translateY(-20vh)}}
/* randomize */
.bubble{width:120px;height:120px}
.bubble:nth-child(2){width:200px;height:200px;animation-duration:28s;left:10%}
.bubble:nth-child(3){width:160px;height:160px;animation-duration:34s;left:25%}
.bubble:nth-child(4){width:260px;height:260px;animation-duration:42s;left:40%}
.bubble:nth-child(5){width:140px;height:140px;animation-duration:31s;left:55%}
.bubble:nth-child(6){width:220px;height:220px;animation-duration:37s;left:70%}
.bubble:nth-child(7){width:180px;height:180px;animation-duration:29s;left:85%}
.bubble:nth-child(8){width:110px;height:110px;animation-duration:26s;left:15%}
.bubble:nth-child(9){width:150px;height:150px;animation-duration:33s;left:60%}
.bubble:nth-child(10){width:240px;height:240px;animation-duration:45s;left:78%}

/* Header */
.header{position:sticky;top:0;background:rgba(13,17,23,.6);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--border);z-index:10}
.nav{padding:14px 0}
.nav-container{max-width:1100px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px}
.logo-img{width:151px;height:28px}
.logo-text{font-weight:700;font-size:18px}
.nav-menu{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.nav-link{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:10px;transition:.2s}
.nav-link:hover{color:var(--text);background:rgba(255,255,255,.04)}
.nav-cta{color:#fff;background:var(--primary);border:1px solid transparent}
.nav-cta:hover{background:var(--primary-600)}

/* Hero 1:1 layout from mock */
.hero{padding:72px 0 36px}
.hero-container{max-width:1100px;margin:0 auto;padding:0 20px}
.hero-content{max-width:680px;transform:translateZ(0);will-change:transform;animation:fadeUp .7s ease both}
.hero-pill{display:inline-flex;align-items:center;gap:10px;background:#121a2b;border:1px solid #1e2a41;color:var(--muted);padding:6px 12px;border-radius:999px;margin-bottom:18px}
.pill-badge{background:#0dd19b;color:#001c10;font-weight:700;font-size:12px;line-height:1;padding:6px 8px;border-radius:999px;box-shadow:0 0 0 0 rgba(13,209,155,.6);animation:pulseGlow 2.4s ease-out infinite}
.pill-text{font-size:13px}
.pill-arrow{font-size:18px;color:var(--muted);animation:nudge .9s ease-in-out infinite}
.hero-title-row{display:flex;align-items:center;gap:12px}
.hero-logo{width:34px;height:34px}
.hero-title{font-size:48px;line-height:1.05;margin:0;font-weight:800;letter-spacing:-0.02em}
.hero-subtitle{color:var(--muted);margin:12px 0 22px}
.hero-buttons{display:flex;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:600;border-radius:10px;text-decoration:none;padding:12px 16px;border:1px solid var(--border)}
.btn-primary{background:var(--primary);color:#fff;border-color:transparent;box-shadow:0 8px 24px rgba(43,123,255,.25)}
.btn-primary:hover{background:var(--primary-600);transform:translateY(-1px);box-shadow:0 10px 30px rgba(43,123,255,.35)}
.btn-outline{background:transparent;color:var(--text)}
.btn-outline:hover{border-color:#2a3b55;background:rgba(255,255,255,.03)}

/* Promo banner directly after hero */
.promo-banner{padding:22px 0 10px}
.promo-container{max-width:1100px;margin:0 auto;padding:0 20px;perspective:1000px}
.promo-content{display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(180deg,#0f1626 0%,#0b1220 100%);border:1px solid #1b2740;border-radius:16px;padding:20px;box-shadow:0 0 0 1px rgba(43,123,255,.08),0 10px 30px rgba(8,28,61,.35);transform-style:preserve-3d;transition:transform .25s ease}
.promo-title{margin:0 0 6px;font-size:22px}
.promo-subtitle{margin:0 0 6px;color:#b6c4d0}
.promo-description{margin:0;color:var(--muted)}
.launcher-img{width:320px;max-width:40vw;border-radius:12px;border:1px solid #22324f;transform-style:preserve-3d;transition:transform .25s ease, box-shadow .25s ease}
.promo-image .launcher-img{box-shadow:0 22px 60px rgba(22,44,88,.38)}
.promo-image .launcher-img.tilt-active{box-shadow:0 28px 90px rgba(33,88,176,.5)}

/* Games grid */
.section-title{font-size:28px;margin:40px 0 14px}
.games-container{max-width:1100px;margin:0 auto;padding:0 20px}
.games-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.game-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;position:relative;transition:.2s}
.game-card:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(2,11,31,.35)}
.game-icon img{width:48px;height:48px}
.game-title{margin:10px 0 2px}
.game-description{margin:0;color:var(--muted);font-size:14px}
.game-badge{position:absolute;top:10px;right:10px;background:linear-gradient(90deg,#2b7bff,#6aa3ff);color:white;padding:4px 8px;border-radius:999px;font-size:12px}
.featured{border-color:#2b7bff33}

/* Support */
.support-container{max-width:1100px;margin:0 auto;padding:0 20px}
.support-description{color:var(--muted)}
.support-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.support-method{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px}
.support-icon{font-size:22px;margin-bottom:6px}
.support-cta{margin-top:14px}

/* Footer */
.footer{margin-top:40px;border-top:1px solid var(--border);background:var(--bg-elev)}
.footer-container{max-width:1100px;margin:0 auto;padding:24px 20px}
.footer-content{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}
.footer-logo{display:flex;align-items:center;gap:10px}
.footer-logo-img{width:24px;height:24px}
.footer-section h4{margin:0 0 8px}
.footer-section ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.footer-section a{color:var(--muted);text-decoration:none}
.footer-section a:hover{color:var(--text)}
.footer-bottom{border-top:1px solid var(--border);margin-top:14px;padding-top:14px;color:var(--muted);font-size:14px}

/* Responsive */
@media (max-width: 900px){
  .games-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .promo-content{flex-direction:column;align-items:flex-start}
  .launcher-img{width:100%;max-width:100%}
}
@media (max-width: 600px){
  .hero-title{font-size:36px}
  .games-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-content{grid-template-columns:1fr}
}

/* Animations */
@keyframes pulseGlow{0%{box-shadow:0 0 0 0 rgba(13,209,155,.6)}70%{box-shadow:0 0 0 12px rgba(13,209,155,0)}100%{box-shadow:0 0 0 0 rgba(13,209,155,0)}}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .bubble{animation-duration:0s}
  .hero-content{animation:none}
  .launcher-img{transition:none}
}