:root {
  --bg:#0f1525;
  --card:#121a2e;
  --muted:#8aa0c9;
  --text:#e8f0ff;
  --brand:#5ee4a8;
  --brand2:#7eb6ff;
  --accent:#ffd66b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial, 'Apple Color Emoji','Segoe UI Emoji'; color:var(--text); background: radial-gradient(1200px 700px at 10% -10%, #182038, transparent 60%), radial-gradient(1000px 700px at 110% -20%, #1a2240, transparent 60%), var(--bg);}
a{color:var(--brand2); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1160px;margin:0 auto;padding: 0 16px}
.header{position:sticky;top:0;z-index:50;background:rgba(15,21,37,.8);backdrop-filter: blur(10px);border-bottom:1px solid #1f2a44}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;gap:10px;align-items:center;font-weight:800;letter-spacing:.5px}
.logo .mark{width:28px;height:28px;border-radius:8px;background: conic-gradient(from 220deg, var(--brand), var(--brand2), var(--accent));box-shadow:0 0 0 3px rgba(255,255,255,.03) inset}
.nav a{margin:0 10px; font-weight:600}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;background:linear-gradient(90deg,var(--brand), var(--brand2));color:#0a1020;font-weight:800;box-shadow:0 10px 24px rgba(94,228,168,.16); transition: transform .15s}
.btn:hover{transform: translateY(-1px)}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;padding:36px 0}
.hero h1{font-size:42px;line-height:1.05;margin:0 0 10px}
.hero p{color:var(--muted);max-width:65ch}
.card{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));border:1px solid #1f2a44;padding:18px;border-radius:18px; box-shadow: 0 40px 80px rgba(0,0,0,.25)}
.grid{display:grid; gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.hero{grid-template-columns:1fr}.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid-3,.grid-4{grid-template-columns:1fr}}
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.kpi{padding:12px 16px;border-radius:14px;background:linear-gradient(180deg, rgba(126,182,255,.12), rgba(126,182,255,.03)); border:1px solid #273355}
.kpi div{font-size:12px;color:var(--muted)}
.kpi strong{font-size:24px}
.section{padding:32px 0}
.section h2{margin:0 0 10px}
.marquee{overflow:hidden;display:flex;gap:24px;border:1px solid #273355;border-radius:16px;padding:10px;background:linear-gradient(90deg, rgba(255,255,255,.02), rgba(255,255,255,.01))}
.marquee .track{display:flex;gap:24px; animation: scroll 32s linear infinite}
@keyframes scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.badge{padding:6px 10px;border-radius:999px;background:linear-gradient(90deg, rgba(94,228,168,.2), rgba(126,182,255,.2)); border:1px solid #274d55; font-weight:700; font-size:12px}
.ad-slot{min-height:120px;display:grid;place-items:center;border:2px dashed #334266;border-radius:16px;color:var(--muted); font-size:14px}
.footer{margin-top:30px;border-top:1px solid #1f2a44;padding:30px 0;color:#b7c7ec}
.post-card img{width:100%;height:160px;object-fit:cover;border-radius:12px;border:1px solid #28365e}
.post-card .meta{font-size:12px;color:#9db0d8}
.post-body img{width:100%;height:auto;border-radius:16px;border:1px solid #28365e; margin:10px 0}
.breadcrumbs{font-size:12px;color:#94aee3;margin-bottom:8px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #263055;padding:10px;text-align:left}
.product-card{display:flex;flex-direction:column;gap:8px}
.price{font-weight:900;font-size:18px}
.tag{font-size:11px;color:#9db0d8}
.input,.select,.textarea{width:100%;padding:10px;border-radius:12px;background:#0d1425;border:1px solid #273355;color:var(--text)}
label{font-size:12px;color:#9db0d8}
.form-grid{display:grid;grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:720px){.form-grid{grid-template-columns:1fr}}
.alert{padding:12px 14px;border:1px solid #2a3a63;border-radius:12px;background:#0d172b;color:#9fd1ff}
.carousel{position:relative;overflow:hidden;border-radius:16px}
.carousel-inner{display:flex; transition: transform .6s ease-in-out}
.carousel-item{min-width:100%; padding:22px; display:grid; grid-template-columns:.8fr 1.2fr; gap:16px; align-items:center}
.carousel .controls{position:absolute;inset:auto 12px 12px auto; display:flex;gap:8px}
.carousel button{border:1px solid #29416e;background:rgba(9,14,26,.8); color:#cfe4ff; border-radius:10px;padding:6px 8px; cursor:pointer}
.small{font-size:12px}
hr{border:none;border-top:1px solid #263055;margin:16px 0}
blockquote{border-left:3px solid #274d55;padding-left:12px;color:#a8c6ff}
code,kbd{background:#0c1323;border:1px solid #26355b;border-radius:8px;padding:2px 6px}


/* === Responsive Overrides: auto-adjust blocks for any screen === */
.nav{flex-wrap:wrap; row-gap:8px}
/* Use auto-fit to let grids collapse intelligently */
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}

/* Ensure media fits container */
img,svg,video{max-width:100%; height:auto}

/* Prevent table overflow on small screens */
.table{display:block;width:100%;overflow-x:auto}

/* Stack complex grid items on small screens */
@media (max-width: 720px){
  .carousel-item{grid-template-columns:1fr}
  .container{padding:0 12px}
  /* Force any inline 2-col grids to a single column */
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}
}

/* Safer ad block behavior */
.ad-slot{width:100%; max-width:100%}