:root{
  --bg:#0a0a0f;
  --ink:#e7e7f1;
  --muted:#b7b7c7;
  --brand:#8b5cf6; /* neon‑violett */
  --brand-2:#22d3ee;
  --glass: rgba(255,255,255,0.06);
  --glass-b: rgba(255,255,255,0.12);
  --radius: 20px;
  --pad: 16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--ink); background: var(--bg); overflow-x:hidden;
}

/* Floating background */
.bg{position:fixed; inset:0; pointer-events:none}
.fx-orb{
  background:
    radial-gradient(900px 600px at 10% -10%, rgba(139,92,246,.25), transparent 60%),
    radial-gradient(900px 600px at 110% 10%, rgba(34,211,238,.15), transparent 60%);
  filter: blur(40px);
  animation: float 18s ease-in-out infinite;
}
.fx-grid{
  background-image: linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(1000px 700px at 50% -10%, black, transparent 70%);
  animation: drift 50s linear infinite;
}
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(20px)} }
@keyframes drift{ 0%{transform:translateX(0)} 100%{transform:translateX(-200px)} }

/* Glass elements */
.glass{
  background: var(--glass);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-b);
  border-radius: var(--radius);
}

/* Header */
.site-header{
  position:sticky; top:16px; margin:16px auto; width:min(1200px, 92%);
  display:flex; align-items:center; justify-content:space-between; padding:10px 14px; z-index:20;
}
.site-header .brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.3px}
.site-header .brand img{width:38px; height:38px; border-radius:10px; object-fit:cover}
.site-header .brand .dot{color:var(--brand)}
.site-header nav{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.site-header nav a{color:var(--ink); text-decoration:none; opacity:.9}
.site-header nav a:hover{opacity:1; transform:translateY(-1px)}
.site-header .btn.small{padding:8px 12px; font-size:.95rem}

/* Hero */
.hero{min-height:74vh; display:grid; place-items:center; padding:80px 0}
.hero-inner{width:min(1100px,92%); text-align:center}
.hero h1{font-size: clamp(2.2rem, 6vw, 4rem); margin:0 0 10px; letter-spacing:.3px}
.lead{color:var(--muted); font-size: clamp(1.05rem, 2.4vw, 1.25rem)}
.cta{margin-top:22px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* Sections */
.section{width:min(1100px, 92%); margin:0 auto; padding:64px 0}
.section.alt{background:linear-gradient(180deg, transparent, rgba(255,255,255,.03) 50%, transparent)}
.section-head h2{font-size: clamp(1.8rem, 5vw, 2.4rem); margin:0 0 6px}
.section-head p{color:var(--muted); margin:0 0 22px}

.cards{display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:16px}
.card{padding:18px; border-radius:18px; background:var(--glass); border:1px solid var(--glass-b); transition:transform .28s ease, box-shadow .28s ease}
.card h3{margin:0 0 8px}
.card p{color:var(--muted); margin:0}
.card:hover{transform:translateY(-4px); box-shadow:0 10px 30px rgba(0,0,0,.35)}

.partner-grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:14px}
.partner{padding:26px; text-align:center; border-radius:16px; background:var(--glass); border:1px solid var(--glass-b); opacity:.8}
.partner:hover{opacity:1}

.product-list{display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap:16px}
.product{position:relative; padding:18px; border-radius:18px; background:var(--glass); border:1px solid var(--glass-b)}
.product h3{margin:0 0 8px}
.product p{color:var(--muted); margin:0 0 10px}
.product .product-badge{position:absolute; top:12px; right:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--glass-b); background:rgba(139,92,246,.15)}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:999px; text-decoration:none; color:white;
  background: linear-gradient(90deg, var(--brand), var(--brand-2)); border:0; transition: transform .2s ease, filter .2s ease;
}
.btn:hover{transform: translateY(-2px); filter:brightness(1.08)}
.btn.ghost{background:transparent; border:1px solid var(--glass-b)}

/* Footer */
.site-footer{width:min(1100px,92%); margin:64px auto 30px; padding:12px 14px; display:flex; gap:12px; justify-content:space-between; align-items:center}
.site-footer .foot-links{display:flex; gap:14px; flex-wrap:wrap}
.site-footer a{color:var(--muted); text-decoration:none}
.site-footer a:hover{color:var(--ink)}


/* Reveal animation (JS-aware: visible by default, animated when JS present) */
.reveal{opacity:1; transform:none; transition: all .7s cubic-bezier(.2,.7,.2,1);}
html.js .reveal{opacity:0; transform: translateY(16px);}
html.js .reveal.show{opacity:1; transform: translateY(0)}