:root{
  --bg: #0b0e14;
  --panel: #121826;
  --muted: #9aa4b2;
  --text: #e7e9ee;
  --brand: #7c5cff;
  --brand-2: #00d4ff;
  --ring: rgba(124,92,255,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji';color:var(--text);background:linear-gradient(180deg,#0b0e14 0%,#0b1220 100%) fixed}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;gap:.5rem;border:1px solid transparent;padding:.7rem 1rem;border-radius:14px;font-weight:600;cursor:pointer;background:transparent;color:var(--text);transition:.2s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#10141f;border:none;box-shadow:0 8px 24px rgba(0,0,0,.35),0 0 0 4px var(--ring)}
.btn-ghost{border-color:#2a3242;background:rgba(255,255,255,.03)}
.btn-lg{padding:1rem 1.2rem;font-size:1.05rem}
.link{background:none;border:none;color:var(--brand-2);cursor:pointer;text-decoration:underline;padding:0}

.site-header {
  position: sticky;
  top: 0;
  background: rgba(11,14,20,.65);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #1a2233;
  z-index: 50;
  padding: 6px 0; /* optional */
}

.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:.6rem}
.logo{width:28px;height:28px}
.brand-text{font-weight:800;letter-spacing:.3px}
.brand-text .accent{color:var(--brand-2)}
.nav{display:flex;gap:1rem;align-items:center}
.nav a{color:var(--muted)}
.nav a:hover{color:var(--text)}

.hero{padding:72px 0}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:justify}
.hero-copy h1{font-size: clamp(2rem, 2.6vw + 1rem, 3.2rem);line-height:1.05;margin:0 0 12px}
.hero-copy .lead{color:var(--muted);font-size:1.1rem}
.trust{display:flex;gap:1rem;list-style:none;padding:0;margin:10px 0 0;color:#b6bfcb;font-size:.95rem;flex-wrap:wrap}

.hosting{padding:56px 0;border-top:1px;border-bottom:1px}
.grid-3{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.card{border:1px solid #212b3d;border-radius:20px;padding:18px}
.card-icon{font-size:1.6rem}

.services{padding:32px 0}
.services details{background:#0f1523;border:1px solid #22304a;border-radius:14px;padding:12px;margin:10px 0}
.services summary{cursor:pointer;font-weight:600}

.software{padding:32px 0}
.software details{background:#0f1523;border:1px solid #22304a;border-radius:14px;padding:12px;margin:10px 0}
.software summary{cursor:pointer;font-weight:600}


.container {
  width: min(95vw, 1600px); /* up to 1600px wide */
  margin: 0 auto;
  padding: 0 24px;
}

.news {
  padding: 56px 0;
  border-top: 1px;
  border-bottom: 1px;
}

/* scrollable row of cards */
.news .grid-3 {
  display: flex;
  gap: 16px;
  overflow-x: auto;            /* enable horizontal scroll */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}

/* each card has fixed width - forces overflow */
.news .card {
  flex: 0 0 340px;             /* adjust width as desired */
  scroll-snap-align: start;
}

/* make scrollbar visible and styled */
.news .grid-3::-webkit-scrollbar {
  height: 10px;
}
.news .grid-3::-webkit-scrollbar-track {
  border-radius: 5px;
}
.news .grid-3::-webkit-scrollbar-thumb {
  background: var(--brand);
  border-radius: 5px;
}
.news .grid-3::-webkit-scrollbar-thumb:hover {
  background: var(--brand-2);
}

/* Arrow buttons */
.scroll-btn {  position: absolute;  top: 50%;  transform: translateY(-50%);  background: rgba(20, 28, 43, 0.8);  border: none;  color: white;  font-size: 2rem;  padding: 0.5rem 1rem;  cursor: pointer;  border-radius: 50%;  z-index: 2;  transition: background 0.3s;}
.scroll-btn:hover {background: rgba(20, 28, 43, 1);}
.scroll-btn.left {left: 5px;}
.scroll-btn.right {right: 5px;}


.site-footer{border-top:1px solid #141c2b;padding:22px 0;color:#aab4c3}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

.underline{background:linear-gradient(120deg, rgba(124,92,255,.35), rgba(0,212,255,.35));padding:0 .2rem;border-radius:8px}
.cookie-banner{position:fixed;inset:auto 12px 12px 12px;background:#0f1523;border:1px solid #22304a;border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.cookie-inner{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:14px}
.cookie-actions{display:flex;gap:8px}

@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr}
  .grid-3,.example-grid{grid-template-columns:1fr}
  .cta-inner{flex-direction:column;align-items:stretch}
}