:root {
  --bg: #020203;
  --panel: rgba(5,5,6,0.9);
  --accent: #9dd7ae;
  --accent-2: #cbaeff;
  --text: #f7f7f8;
  --muted: rgba(247,247,248,0.72);
  font-family: "Space Grotesk", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 20% 0%, rgba(157, 215, 174, 0.28), transparent 45%),
    radial-gradient(circle at 80% 10%, rgba(203, 174, 255, 0.25), transparent 50%), var(--bg);
  color: var(--text);
}

.container { width: min(1180px, 100% - 40px); margin: 0 auto; padding: 40px 0 80px; display:flex; flex-direction:column; gap:32px; }

.aura { position: fixed; inset:0; background: radial-gradient(circle at 60% 50%, rgba(203,174,255,0.18), transparent 60%); filter: blur(160px); z-index:-1; }

header { display:flex; justify-content:space-between; align-items:center; }
.brand { display:flex; gap:2px; align-items:center; }
.brand-mark { width:96px; height:auto; border-radius:0; background:transparent; border:none; display:flex; align-items:center; justify-content:center; padding:0; }
.brand-mark img { width:100%; height:auto; object-fit:contain; border-radius:0; display:block; }

.eyebrow { font-size:0.85rem; color:var(--muted); }
.header-cta { display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; }

.cta, button.cta { background: linear-gradient(120deg, var(--accent), var(--accent-2)); color:#020203; border:none; border-radius:999px; padding:10px 22px; font-weight:600; text-decoration:none; }
.ghost, button.ghost { background:transparent; border:1px solid rgba(255,255,255,0.25); color:var(--text); border-radius:999px; padding:10px 22px; font-weight:600; }

.hero { display:flex; flex-direction:column; gap:32px; align-items:center; text-align:center; padding:10px 0 20px; }
.kicker { text-transform:uppercase; letter-spacing:0.3em; font-size:0.7rem; color:var(--accent-2); }
.hero h2 { font-size:clamp(2.4rem,3.8vw,3.6rem); margin:12px 0 16px; width:100%; }
.hero p { color:var(--muted); line-height:1.7; width:100%; max-width:none; }
.hero-cta { display:flex; gap:14px; margin-top:18px; flex-wrap:wrap; justify-content:center; }
.hero-highlights { width:100%; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px; }
.hero-highlights article { background: linear-gradient(140deg, rgba(157,215,174,0.16), rgba(203,174,255,0.14)); border-radius:24px; padding:24px; border:1px solid rgba(255,255,255,0.08); box-shadow:0 25px 55px rgba(0,0,0,0.45); text-align:left; }
.hero-highlights h3 { margin:8px 0 6px; }
.hero-highlights p { margin:0; max-width:none; }

.panel { background: var(--panel); border:1px solid rgba(255,255,255,0.05); border-radius:28px; padding:28px; transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; }

.panel-head { text-align:center; max-width:720px; margin:0 auto 24px; display:flex; flex-direction:column; gap:10px; }
.panel-head h3 { margin:0; font-size:2rem; }
.muted { color:var(--muted); }
.hero-copy { display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; }
.capabilities-grid, .workflow-grid, .roadmap-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:18px; }
.capabilities-grid article, .workflow-grid article, .roadmap-grid article { position:relative; background: linear-gradient(135deg, rgba(157,215,174,0.08), rgba(203,174,255,0.08)); border-radius:22px; border:1px solid rgba(255,255,255,0.08); padding:20px; overflow:hidden; box-shadow:0 12px 32px rgba(0,0,0,0.4); }
.capabilities-grid article::before, .workflow-grid article::before, .roadmap-grid article::before { content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:linear-gradient(90deg, transparent, rgba(203,174,255,0.7), transparent); }
.capabilities-grid article p, .workflow-grid article p, .roadmap-grid article p { color:var(--muted); line-height:1.5; }

.workflow-head { text-align:left; margin-bottom:18px; }
.flow-line { letter-spacing:0.15em; font-size:0.78rem; color:rgba(247,247,248,0.6); margin-bottom:6px; }
.pill { border:1px solid rgba(255,255,255,0.2); border-radius:999px; padding:6px 14px; display:flex; gap:10px; align-items:center; color:var(--muted); }
.pill-num { font-weight:600; letter-spacing:0.25em; font-size:0.75rem; }
.pill-label { text-transform:uppercase; letter-spacing:0.25em; font-size:0.75rem; color:var(--accent-2); }

.panel.bot { display:flex; justify-content:space-between; align-items:center; gap:18px; }
.panel.bot p { color:var(--muted); line-height:1.6; }

footer { text-align:center; color:var(--muted); font-size:0.9rem; }

@media (max-width:640px) {
  header, .hero-cta, .panel.bot { flex-direction:column; align-items:flex-start; }
  .hero-cta { align-items:stretch; }
  .header-actions { width:100%; flex-direction:column; align-items:flex-start; gap:10px; }
  .header-cta { justify-content:flex-start; }
}

.panel:hover { border-color: rgba(203,174,255,0.35); box-shadow:0 25px 60px rgba(0,0,0,0.45); transform: translateY(-4px); }


.workflow-step { display:flex; flex-direction:column; gap:14px; }
.workflow-icon { width:58px; height:58px; border-radius:18px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); display:grid; place-items:center; box-shadow:0 18px 32px rgba(0,0,0,0.45); }
.workflow-icon svg { width:36px; height:36px; }

.roadmap-head { text-align:center; margin-bottom:16px; display:flex; flex-direction:column; gap:10px; }
.roadmap-track { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:20px; position:relative; }
.roadmap-track::before { content:""; position:absolute; top:28px; left:10px; right:10px; height:1px; background:linear-gradient(90deg, rgba(157,215,174,0.3), rgba(203,174,255,0.3)); opacity:0.6; }
.roadmap-track article { background:rgba(5,5,6,0.8); border:1px solid rgba(255,255,255,0.08); border-radius:24px; padding:24px; position:relative; overflow:hidden; }
.roadmap-track article::after { content:""; position:absolute; inset:1px; border-radius:22px; border:1px solid transparent; background:linear-gradient(120deg, rgba(157,215,174,0.35), rgba(203,174,255,0.35)) border-box; mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity:0.35; pointer-events:none; }
.roadmap-label { font-size:0.78rem; letter-spacing:0.25em; text-transform:uppercase; color:rgba(157,215,174,0.8); display:inline-block; margin-bottom:8px; }

@keyframes stackPulse {
  0% { opacity:0.25; transform:scale(0.9); }
  50% { opacity:0.6; transform:scale(1); }
  100% { opacity:0.25; transform:scale(0.9); }
}
.capabilities-grid article { position:relative; }
.capabilities-grid article::after { content:""; position:absolute; inset:-1px; border-radius:24px; background:radial-gradient(circle at 30% 20%, rgba(157,215,174,0.25), transparent 60%); opacity:0.2; animation: stackPulse 6s ease-in-out infinite; pointer-events:none; }
.capabilities-grid article:nth-child(2)::after { animation-delay:1s; }
.capabilities-grid article:nth-child(3)::after { animation-delay:2s; }

body::after { content:""; position:fixed; inset:0; background:radial-gradient(circle at 70% 30%, rgba(203,174,255,0.08), transparent 45%), radial-gradient(circle at 20% 70%, rgba(157,215,174,0.08), transparent 45%); pointer-events:none; mix-blend-mode:screen; }


.header-actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:flex-end; }
.lang-toggle { display:flex; border:1px solid rgba(255,255,255,0.18); border-radius:999px; padding:2px; background:rgba(0,0,0,0.25); }
.lang-toggle button { background:transparent; border:none; color:var(--muted); font-weight:600; font-size:0.85rem; padding:6px 14px; border-radius:999px; cursor:pointer; transition:background 0.2s ease, color 0.2s ease; }
.lang-toggle button.active { background:linear-gradient(120deg, var(--accent), var(--accent-2)); color:#020203; }
.alt-line { display:block; font-size:0.85rem; color:rgba(247,247,248,0.65); margin-top:4px; letter-spacing:normal; }
.workflow .alt-line { font-size:0.8rem; }
.panel-head .alt-line { font-size:0.9rem; }