:root{
  --bg:#07070d; --surface:#14142a; --border:rgba(139,92,246,.18);
  --text:#e6e6f2; --muted:#9a9ab5; --primary:#7c8bff; --accent:#a78bfa;
  --glow:0 0 40px rgba(124,139,255,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%;background:
  radial-gradient(1200px 800px at 20% -10%,rgba(88,28,200,.25),transparent 60%),
  radial-gradient(1000px 700px at 90% 10%,rgba(30,64,175,.25),transparent 60%),
  var(--bg);
  color:var(--text);font-family:'Inter',system-ui,sans-serif;line-height:1.6;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Space Grotesk','Inter',sans-serif;letter-spacing:-.02em;margin:0}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
.gradient-text{background:linear-gradient(90deg,#7c8bff 0%,#a78bfa 55%,#60a5fa 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-block;padding:12px 22px;border-radius:10px;font-weight:600;font-size:14px;
  transition:transform .15s,box-shadow .2s,border-color .2s;cursor:pointer;border:1px solid transparent}
.btn-primary{background:linear-gradient(90deg,#4f46e5,#7c3aed);color:#fff;box-shadow:var(--glow)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-outline{border-color:var(--border);color:var(--text)}
.btn-outline:hover{border-color:var(--primary)}

/* Header */
.site-header{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px);
  background:rgba(7,7,13,.7);border-bottom:1px solid var(--border)}
.site-header .inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:34px;width:34px}
.wordmark{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:18px}
.nav{display:none;gap:4px}
.nav a{padding:8px 12px;font-size:14px;color:var(--muted);border-radius:8px}
.nav a:hover,.nav a.active{color:var(--text)}
.header-actions{display:flex;gap:8px;align-items:center}
.lang-switch{padding:6px 12px;border:1px solid var(--border);border-radius:8px;font-size:13px;color:var(--muted)}
.lang-switch:hover{color:var(--text);border-color:var(--primary)}
@media(min-width:768px){.nav{display:flex}}

main{min-height:calc(100vh - 200px)}

/* Hero */
.hero{padding:80px 20px 60px;text-align:center;position:relative}
.hero h1{font-size:clamp(36px,6vw,64px);font-weight:700;line-height:1.1}
.hero p.sub{margin:24px auto 0;max-width:640px;font-size:18px;color:var(--muted)}
.hero .cta{margin-top:36px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Atom logo w/ orbiting electrons */
.atom{position:relative;width:220px;height:220px;margin:40px auto 0}
.atom img{width:100%;height:100%;filter:drop-shadow(0 0 30px rgba(124,139,255,.5))}
.orbit{position:absolute;inset:0;border-radius:50%;pointer-events:none}
.electron{position:absolute;top:50%;left:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:radial-gradient(circle,#fff,#7c8bff 60%,transparent 70%);
  box-shadow:0 0 12px #7c8bff,0 0 24px #a78bfa}
.orbit-1{animation:spin 4s linear infinite}
.orbit-2{animation:spin 6s linear infinite reverse;transform:rotate(60deg)}
.orbit-3{animation:spin 8s linear infinite;transform:rotate(120deg)}
.orbit .electron{transform:translateX(110px)}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit-2{animation-name:spin2}
.orbit-3{animation-name:spin3}
@keyframes spin2{from{transform:rotate(60deg)}to{transform:rotate(420deg)}}
@keyframes spin3{from{transform:rotate(120deg)}to{transform:rotate(480deg)}}

/* Sections & cards */
section.pad{padding:60px 20px}
.section-title{font-size:clamp(28px,4vw,40px);font-weight:700}
.grid{margin-top:40px;display:grid;gap:20px;grid-template-columns:1fr}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
@media(min-width:768px){.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}}
.card{background:rgba(20,20,42,.55);border:1px solid var(--border);border-radius:16px;padding:24px;
  backdrop-filter:blur(8px);transition:border-color .2s,box-shadow .2s}
.card:hover{border-color:rgba(124,139,255,.5);box-shadow:var(--glow)}
.card h3{font-size:20px;font-weight:600}
.card p{margin-top:10px;color:var(--muted);font-size:15px}
.card ul{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.card ul li{padding-left:22px;position:relative;font-size:14px}
.card ul li::before{content:"✓";position:absolute;left:0;color:var(--primary);font-weight:700}

/* Contact */
.form{display:flex;flex-direction:column;gap:14px;max-width:560px;margin:32px auto 0}
.form label{font-size:13px;color:var(--muted)}
.form input,.form textarea{width:100%;padding:12px 14px;border-radius:10px;
  background:rgba(20,20,42,.6);border:1px solid var(--border);color:var(--text);font:inherit}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--primary);box-shadow:var(--glow)}
.form textarea{min-height:140px;resize:vertical}

/* Footer */
.site-footer{border-top:1px solid var(--border);margin-top:80px;padding:24px 0;background:rgba(7,7,13,.5)}
.site-footer .foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand-mini{display:flex;align-items:center;gap:10px}
.brand-mini img{height:32px;width:32px}