:root {
  --bg:#0a0a0f;
  --bg-elev:#111119;
  --text:#e6e6ee;
  --muted:#a3a3b2;
  --primary:#5b5dff;
  --primary-2:#7b7dff;
  --border:#252536;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  color: var(--text);
  background: var(--bg);
}

.page-wrapper { display:flex; flex-direction:column; min-height:100vh; }
main { flex:1; }

.nav-glass { background: rgba(16,16,26,.6); backdrop-filter: blur(10px); border-bottom:1px solid var(--border); }
.navbar .brand-text { font-weight:600; letter-spacing:.2px; text-transform:lowercase; }
.logo-box{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:6px; background:var(--primary); color:#fff; font-weight:700; font-size:14px; text-transform:lowercase; }

.btn-primary { background: linear-gradient(90deg,var(--primary),var(--primary-2)); border:0; box-shadow: 0 0 20px rgba(91,93,255,.35); }
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 0 26px rgba(91,93,255,.45); }
.btn-outline-light{ border-color:#3a3a52; color:var(--text); }
.btn-outline-light:hover{ background:#1a1a26; border-color:#585a7a; }
.btn-secondary{ background:#1b1b27; border-color:#2a2a3a; color:var(--text); }

.hero{ padding: 64px 0 32px; position:relative; overflow:hidden; min-height: 60vh; }

.hero:before{
  content:""; position:absolute; inset:-40px 0 auto; height:280px; pointer-events:none;
  background:
    radial-gradient(800px 360px at 15% -20%, rgba(91,93,255,.22), transparent 65%),
    radial-gradient(700px 320px at 85% -25%, rgba(59,161,255,.14), transparent 70%);
}

.hero::after{ content:none; }
.hero .container{ position:relative; z-index:1; }
.eyebrow{ color:#b6b6ff; font-weight:600; letter-spacing:.4px; }
.hero-title{ font-size: clamp(32px, 6vw, 56px); line-height:1.05; font-weight:800; margin:10px 0 12px; }
.hero-sub{ color:var(--muted); max-width:52ch; margin-bottom:24px; }
.hero-visual{ width:100%; aspect-ratio: 4/3; border-radius:18px; background:
  radial-gradient(120px 80px at 10% 10%, rgba(91,93,255,.35), transparent 60%),
  radial-gradient(120px 80px at 90% 20%, rgba(59,161,255,.25), transparent 60%),
  conic-gradient(from 140deg at 60% 40%, rgba(255,255,255,.12), rgba(255,255,255,0) 40%),
  linear-gradient(145deg, #0f0f17, #0a0a0f);
  box-shadow: inset 0 0 40px rgba(255,255,255,.05), 0 10px 40px rgba(0,0,0,.5);
  position:relative;
}
.hero-visual:after{ content:""; position:absolute; inset:10%; border-radius:14px; background: radial-gradient(60% 40% at 60% 40%, rgba(91,93,255,.25), transparent 70%); filter: blur(20px); opacity:.8; }
.hero-visual .hero-img{ display:none; }

.panel-dark{ background: var(--bg-elev); border:1px solid var(--border); border-radius:18px; }
.panel-dark{ color: var(--text); }
.panel-dark h1, .panel-dark h2, .panel-dark h3, .panel-dark h4, .panel-dark h5, .panel-dark h6{ color: #f1f1fa; }
.panel-dark .text-muted{ color: var(--muted) !important; }
.panel-light{ background: #e9e9f1; color:#0e0e16; border-radius:18px; }
.panel-light .form-control{ background:#fff; border-color:#d7d7e4; }
.panel-light .btn-primary{ box-shadow:none; }

.service-card{ display:block; height:100%; padding:22px; border:1px solid var(--border); border-radius:16px; background: linear-gradient(180deg,#12121b,#0f0f17); text-decoration:none; color:var(--text); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; position:relative; overflow:hidden; }
.service-card .kicker{ position:absolute; top:14px; right:16px; color:#b6b6ff; font-weight:700; font-size:12px; letter-spacing:.08em; }
.service-card h3{ font-size:20px; margin:6px 0 8px; }
.service-card p{ color:var(--muted); margin:0 0 20px; }
.service-card .link-more{ color:#c9c9ff; font-weight:600; }
.service-card:hover{ transform: translateY(-3px); border-color:#3b3b6a; box-shadow: 0 10px 30px rgba(91,93,255,.15); }

.section-carded{ padding: 32px 0 64px; }
.cta{ padding: 32px 0 72px; }

.section-carded{ position:relative; }
.section-carded:before{ content:none; }

.slider-wrap{ position:relative; }
.products-slider{ display:flex; gap: 1.25rem; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding: .25rem .5rem .75rem; scrollbar-width:none; }

.products-slider::-webkit-scrollbar{ display:none; }
.slide{ scroll-snap-align:start; flex:0 0 32%; min-width:320px; }
.slider-btn{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; border:1px solid var(--border); background:#14141f; color:#cfd0ff; display:flex; align-items:center; justify-content:center; z-index:2; box-shadow:0 6px 20px rgba(0,0,0,.35); }
.slider-btn:hover{ background:#1b1b27; }
.slider-btn.prev{ left:-.5rem; }
.slider-btn.next{ right:-.5rem; }

@media (max-width: 991.98px){
  .slide{ flex-basis:48%; }
}
@media (max-width: 575.98px){
  .slide{ flex-basis:90%; min-width:260px; }
}

.site-footer{ border-top:1px solid var(--border); background:#0b0b12; color:var(--muted); }
.muted-link{ color:var(--muted); text-decoration:none; }
.muted-link:hover{ color:#ddd; }

.form-control, .form-select{ background:#0f0f17; border-color:#2a2a3c; color:var(--text); }
.form-control:focus{ border-color:#5254ff; box-shadow: 0 0 0 .25rem rgba(91,93,255,.25); }

.text-muted{ color: var(--muted) !important; }

@media (max-width: 991.98px){
  .hero{ padding-top: 48px; }
  .hero{ min-height: 52vh; }
}

.service-page{ padding: 48px 0 72px; }
.service-intro{ margin-bottom: 16px; }
.service-title{ font-size: clamp(32px, 4.8vw, 56px); line-height:1.08; font-weight:800; margin:0 0 10px; }
.service-lead{ font-size: clamp(18px, 2.2vw, 24px); color:#dfe0ff; margin-bottom: 16px; font-weight:700; }

.prose{ font-size: 18px; line-height:1.7; color: var(--text); }
.prose p{ margin: 0 0 1rem; color: var(--muted); }
.prose h2{ font-size: 32px; margin: 2rem 0 .5rem; font-weight:800; }
.prose h3{ font-size: 24px; margin: 1.5rem 0 .5rem; font-weight:800; color:#f1f1fa; }
.prose .callout{ margin-top: 2rem; }