:root{
  --bg: #0b0f19;
  --surface: #101628;
  --card: #0f172a;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --accent: #6ee7f9;
  --accent2: #a78bfa;
  --ring: #60a5fa;
  --maxw: 1100px;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f8fafc; --surface:#ffffff; --card:#ffffff; --text:#0f172a; --muted:#475569; --ring:#2563eb; --shadow:0 10px 30px rgba(2,6,23,.08);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; background:var(--bg); color:var(--text);}
a{color:inherit}
.container{max-width:var(--maxw);margin-inline:auto;padding:24px}
header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0));backdrop-filter:saturate(140%) blur(6px)}
@media (prefers-color-scheme: light){header{background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.35));}}
.nav{display:flex;align-items:center;gap:16px;}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.2px}
.brand .logo{inline-size:36px; block-size:36px; border-radius:10px; background:conic-gradient(from 30deg, var(--accent), var(--accent2)); box-shadow:var(--shadow)}
.spacer{flex:1}
.nav a{padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--text)}
.nav a:hover{background:rgba(255,255,255,.07)}
@media (prefers-color-scheme: light){.nav a:hover{background:rgba(15,23,42,.06)}}
.lang-toggle, .menu-toggle{border:1px solid rgba(255,255,255,.12); padding:8px 12px;border-radius:12px;background:transparent;color:var(--text);cursor:pointer}
@media (prefers-color-scheme: light){.lang-toggle, .menu-toggle{border-color:rgba(15,23,42,.15)}}
.menu{display:flex;gap:6px;align-items:center}
@media (max-width: 840px){
  .menu{display:none}
  .menu.open{display:flex;flex-wrap:wrap}
}

.hero{position:relative;overflow:hidden;border-radius:calc(var(--radius) + 6px);margin:48px auto}
.hero-inner{padding:72px 24px; background: radial-gradient(1000px 400px at 0% -10%, rgba(167,139,250,.15), transparent), radial-gradient(1000px 400px at 100% 110%, rgba(110,231,249,.15), transparent), linear-gradient(180deg, var(--surface), var(--card)); border-radius:inherit}
.hero h1{font-size:clamp(28px, 5vw, 54px);line-height:1.05;margin:0 0 12px}
.hero p{font-size:clamp(16px, 2.2vw, 20px);color:var(--muted);max-width:900px}
.cta{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.12);text-decoration:none;font-weight:600}
.btn.primary{background:linear-gradient(135deg, var(--accent), var(--accent2)); color:#0b0f19;border:none}
@media (prefers-color-scheme: light){.btn{border-color:rgba(15,23,42,.15)}}

section{scroll-margin-top:90px}
.section{padding:72px 0}
.section h2{font-size:clamp(22px, 3vw, 32px);margin:0 0 10px}
.section p.lead{color:var(--muted);max-width:80ch}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.card{grid-column:span 4;background:var(--card);border-radius:var(--radius);padding:18px;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow)}
.card h3{margin:4px 0 8px;font-size:18px}
.card p{color:var(--muted);margin:0}
@media (prefers-color-scheme: light){.card{border-color:rgba(2,6,23,.06)}}
@media (max-width:940px){.card{grid-column:span 6}}
@media (max-width:640px){.card{grid-column:span 12}}

.media{aspect-ratio:16/9;border-radius:12px;background:linear-gradient(135deg, rgba(167,139,250,.25), rgba(110,231,249,.25));display:grid;place-items:center;color:rgba(255,255,255,.8);font-weight:700}
@media (prefers-color-scheme: light){.media{color:#0f172a}}

footer{padding:36px 24px;color:var(--muted);text-align:center}

/* Language switch */
body[data-lang="sv"] .en{display:none}
body[data-lang="en"] .sv{display:none}

/* Roller (client logo marquee) */
.roller{overflow:hidden; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);} 
.roller-track{display:flex; gap:24px; width:max-content; animation: scroll-marquee 35s linear infinite reverse; will-change: transform;}
.roller-group{display:flex; gap:24px}
.roller img{height:48px; width:auto; opacity:.9; filter:grayscale(100%); transition:opacity .2s ease}
.roller img:hover{opacity:1; filter:none}
@keyframes scroll-marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
@media (max-width:640px){ .roller img{height:40px} }

/* Utilities */
.narrow{max-width:640px}

.brand .logo{
  inline-size:36px;
  block-size:36px;
  border-radius:10px;
  background:none;
  box-shadow:var(--shadow);
  object-fit:contain;
}