:root{
  --bg: #0f1724;
  --surface: #0b1220;
  --muted: #98a0b3;
  --accent: #7c5cff;
  --accent-2: #00e5ff;
  --glass: rgba(255,255,255,0.03);
  --radius: 12px;
  --card-radius: 16px;
  --ease: cubic-bezier(.2,.9,.3,1);
}

[data-theme='light']{
  --bg: #f7fafc;
  --surface: #ffffff;
  --muted: #64748b;
  --accent: #4f46e5;
  --accent-2: #06b6d4;
  --glass: rgba(0,0,0,0.04);
}

html,body{height:100%;background:var(--bg);color:var(--muted);transition:background .35s var(--ease), color .35s var(--ease);font-family: 'Mulish', 'Roboto', sans-serif}

/* Header button */
#theme-toggle{margin-left:8px;padding:10px 12px;border-radius:8px;border:0;background:linear-gradient(135deg,var(--surface),rgba(0,0,0,0.03));color:var(--accent);cursor:pointer;transition:transform .2s ease, background .25s var(--ease)}
#theme-toggle:hover{transform:translateY(-2px)}

/* Futuristic hero tweaks */
.hl-banner{position:relative;overflow:hidden}
.hl-banner-slider figure{position:relative;border-radius:var(--card-radius);overflow:hidden}
.hl-banner-slider figure img{width:100%;height:auto;display:block;object-fit:cover;filter:brightness(.7) saturate(1.05);transition:transform .8s var(--ease)}
.hl-banner-slider figure:hover img{transform:scale(1.03)}
.hl-banner-slider figcaption{position:absolute;left:5%;top:18%;color:#fff;max-width:540px;backdrop-filter:blur(6px);background:linear-gradient(90deg, rgba(124,92,255,0.12), rgba(0,229,255,0.06));padding:28px;border-radius:14px;box-shadow:0 8px 30px rgba(2,6,23,0.6)}
.hl-banner-slider .h1{font-size:2.1rem;line-height:1.05;color:whitesmoke;font-weight:700}
.read-more{background:var(--accent);color:#fff;padding:10px 16px;border-radius:10px;display:inline-flex;align-items:center;gap:8px;transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.read-more:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(92,68,255,0.12)}

/* Card styles */
.banner-box{background:var(--surface);border-radius:12px;padding:12px}

/* Animations */
.ai-fade{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease), transform .6s var(--ease)}
.ai-fade.in-view{opacity:1;transform:none}

/* Responsive */
@media (max-width:992px){
  .hl-banner-slider figcaption{position:static;margin:16px;background:linear-gradient(180deg, rgba(2,6,23,0.6), rgba(2,6,23,0.4));color:#fff}
  .hl-banner-slider .h1{font-size:1.6rem}
  #theme-toggle{padding:8px}
}

/* subtle particle-like background for large screens */
@media (min-width:1200px){
  .hl-banner:before{content:'';position:absolute;right:-10%;top:-20%;width:600px;height:600px;background:radial-gradient(circle at 30% 30%, rgba(124,92,255,0.12), transparent 30%), radial-gradient(circle at 70% 70%, rgba(0,229,255,0.06), transparent 25%);filter:blur(28px);transform:rotate(10deg);pointer-events:none}
}

/* Particle background */
.particle-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.particle-bg .p{position:absolute;width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));opacity:.14;transform:translateY(0) scale(1);filter:blur(.6px)}
.particle-bg .p:nth-child(1){left:8%;top:12%;animation:float1 14s linear infinite}
.particle-bg .p:nth-child(2){left:32%;top:6%;width:18px;height:18px;animation:float2 18s linear infinite}
.particle-bg .p:nth-child(3){left:62%;top:18%;animation:float3 12s linear infinite}
.particle-bg .p:nth-child(4){left:78%;top:36%;width:10px;height:10px;animation:float2 20s linear infinite}
.particle-bg .p:nth-child(5){left:48%;top:48%;width:22px;height:22px;opacity:.08;animation:float1 22s linear infinite}
.particle-bg .p:nth-child(6){left:18%;top:68%;width:14px;height:14px;animation:float3 16s linear infinite}
.particle-bg .p:nth-child(7){left:72%;top:72%;width:10px;height:10px;animation:float1 19s linear infinite}
.particle-bg .p:nth-child(8){left:88%;top:16%;width:20px;height:20px;opacity:.06;animation:float3 24s linear infinite}
.particle-bg .p:nth-child(9){left:6%;top:46%;width:16px;height:16px;animation:float2 17s linear infinite}
.particle-bg .p:nth-child(10){left:40%;top:82%;width:12px;height:12px;animation:float1 15s linear infinite}

@keyframes float1{0%{transform:translateY(0) translateX(0) scale(1) rotate(0) }50%{transform:translateY(-36px) translateX(8px) scale(1.08) rotate(24deg)}100%{transform:translateY(0) translateX(0) scale(1) rotate(0)}}
@keyframes float2{0%{transform:translateY(0) translateX(0) scale(1)}50%{transform:translateY(-44px) translateX(-6px) scale(.96)}100%{transform:translateY(0) translateX(0) scale(1)}}
@keyframes float3{0%{transform:translateY(0) translateX(0) scale(1)}50%{transform:translateY(-22px) translateX(12px) scale(1.06)}100%{transform:translateY(0) translateX(0) scale(1)}}

/* Micro-animations for CTAs and cards */
.hero-cta{transition:transform .22s cubic-bezier(.2,.9,.3,1), box-shadow .22s ease, background .22s ease}
.hero-cta:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 18px 40px rgba(20,20,30,0.35)}
.button{transition:transform .18s ease, box-shadow .18s ease}
.button:active{transform:translateY(2px) scale(.995)}

/* ensure particles respect light theme (desaturate) */
[data-theme='light'] .particle-bg .p{background:linear-gradient(135deg, rgba(79,70,229,0.9), rgba(6,182,212,0.9));opacity:.12}