@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600&display=swap");

:root {
  --base: #ffffff;
  --panel: #f5f7ff;
  --accent-blue: #4f7bff;
  --accent-soft: #dfe6ff;
  --text: #001b55;
  --muted: rgba(0, 27, 85, 0.65);
  font-family: "Sora", system-ui, sans-serif;
}

* { box-sizing:border-box; }
body { margin:0; background:var(--base); color:var(--text); overflow-x:hidden; }
.grid { display:none; }

header { position:fixed; top:0; left:0; right:0; z-index:10; display:flex; justify-content:space-between; align-items:center; padding:16px 48px; background:#ffffff; box-shadow:0 10px 30px rgba(0,0,0,0.08); }

main { padding-top:120px; }

.brand { display:flex; gap:12px; align-items:center; }
.brand-mark { width:54px; height:54px; border-radius:16px; border:1px solid rgba(255,255,255,0.15); background:linear-gradient(135deg, rgba(79,123,255,0.5), rgba(10,15,30,0.8)); display:flex; align-items:center; justify-content:center; font-weight:600; letter-spacing:0.3em; }
nav { display:flex; gap:16px; flex-wrap:wrap; }
nav a { color:var(--muted); text-decoration:none; letter-spacing:0.08em; font-size:0.85rem; transition:color 0.2s ease; }
nav a:hover { color:var(--text); text-decoration:underline; }

.cta { background:linear-gradient(120deg, var(--accent-blue), var(--accent-soft)); color:#030714; border:none; border-radius:999px; padding:11px 26px; font-weight:600; text-decoration:none; box-shadow:0 20px 45px rgba(79,123,255,0.35); }
.ghost { border:1px solid rgba(255,255,255,0.3); color:var(--text); border-radius:999px; padding:11px 24px; background:transparent; font-weight:600; }
.cta, .ghost { transition:transform 0.2s ease, box-shadow 0.2s ease; }
.cta:hover, .ghost:hover { transform:translateY(-3px); box-shadow:0 18px 30px rgba(255,255,255,0.2); }

.hero { min-height:100vh; padding:50px 40px 60px; position:relative; display:flex; align-items:center; }
.hero-inner { width:100%; max-width:1200px; margin:0 auto; text-align:center; }
.hero-text { max-width:1200px; margin:0 auto; padding:0 40px; }
.eyebrow { text-transform:uppercase; letter-spacing:0.35em; font-size:0.75rem; color:var(--muted); }
.hero-text h1 { font-size:clamp(2.5rem, 4vw, 4rem); line-height:1.25; margin:16px 0; }
.hero-text p { color:var(--muted); font-size:1.1rem; line-height:1.8; }
.hero-visual { position:relative; min-height:320px; border-radius:28px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); overflow:hidden; box-shadow:0 40px 80px rgba(0,0,0,0.5); }
.visual-stripes { position:absolute; inset:0; background:linear-gradient(120deg, rgba(79,123,255,0.2) 0 40%, rgba(223,230,255,0.15) 40% 60%, transparent 60%); mix-blend-mode:screen; }
.visual-core { position:absolute; inset:16%; border:1px solid rgba(255,255,255,0.1); border-radius:24px; display:flex; align-items:center; justify-content:center; }
.core-ring { width:70%; height:70%; border-radius:50%; border:1px solid rgba(255,255,255,0.15); }
.core-block { width:28%; height:40%; border-radius:10px; border:1px solid rgba(255,255,255,0.25); }
.hero-cta { margin-top:24px; display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.hero-stats { margin:32px auto 0; display:flex; gap:14px; flex-wrap:wrap; justify-content:space-between; max-width:960px; }
.hero-stats article { padding:10px 20px; border-radius:14px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.04); box-shadow:0 10px 30px rgba(0,0,0,0.35); }
.hero-stats span { text-transform:uppercase; letter-spacing:0.25em; font-size:0.7rem; color:var(--muted); }
.hero-stats strong { font-size:1.4rem; letter-spacing:0.1em; }

.section { width:min(1180px, 100% - 80px); margin:60px auto; padding:32px; border-radius:28px; background:#ffffff; border:1px solid rgba(0,0,0,0.06); box-shadow:0 35px 70px rgba(0,0,0,0.08); position:relative; overflow:hidden; }

.section-head h2 { margin:6px 0 16px; font-size:2.1rem; }
.section-head p { margin:0 0 24px; color:var(--muted); }

.split { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:32px; }
.split-text ul { padding-left:18px; color:var(--muted); }

.feature-card { padding:18px; border-radius:20px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); box-shadow:0 20px 45px rgba(0,0,0,0.4); position:relative; }
.feature-card .accent { position:absolute; left:16px; top:16px; width:36px; height:4px; border-radius:999px; background:var(--accent-blue); }
.feature-card h3 { margin:24px 0 8px; }

.three-panel { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px; }
.three-panel article { padding:20px; border-radius:20px; border:1px solid rgba(0,0,0,0.05); background:#ffffff; box-shadow:0 20px 45px rgba(0,0,0,0.08); }
.icon { width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,0.2); margin-bottom:12px; position:relative; }
.icon::after { content:""; position:absolute; border-radius:50%; }
.icon-capture::after { inset:10px; border:2px solid var(--accent-blue); }
.icon-verify::after { inset:10px; border:2px solid var(--accent-soft); }
.icon-relay::after { width:24px; height:2px; background:var(--accent-soft); top:50%; left:50%; transform:translate(-50%, -50%); }

.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px; }
.card { padding:20px; border-radius:20px; border:1px solid rgba(0,0,0,0.05); background:#ffffff; box-shadow:0 20px 45px rgba(0,0,0,0.08); }
.card-icon { width:56px; height:56px; border-radius:16px; border:1px solid rgba(0,0,0,0.08); background:#f0f3ff; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
.card-icon::after { content:""; position:absolute; border-radius:50%; inset:10px; border:2px solid var(--accent-blue); }
.card-icon.icon-loom::after { border-color:var(--accent-soft); }
.card-icon.icon-beacon::after { border-color:rgba(255,255,255,0.6); }
.card-icon.icon-auto::after { border-radius:10px; border-color:var(--accent-blue); }
.card-icon.icon-compare::after { border-radius:8px; border-color:var(--accent-soft); }
.card-icon.icon-dm::after { border-radius:8px; border-color:var(--accent-blue); }
.card-icon.icon-precision::after { border-color:var(--accent-blue); }
.card-icon.icon-duty::after { border-radius:999px; border:2px solid var(--accent-soft); }
.card-icon.icon-calm::after { border-radius:999px; border:2px solid rgba(255,255,255,0.4); }

.future-card { background:linear-gradient(135deg, rgba(76,121,255,0.15), rgba(255,255,255,0.02)); }
.concept-stack { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px; }
.concept-stack article { padding:20px; border-radius:20px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); box-shadow:0 20px 45px rgba(0,0,0,0.4); }

.connect { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.connect p { color:var(--muted); }

@media (max-width:768px) {
  header { flex-direction:column; gap:12px; padding:18px 24px; }
  nav { justify-content:center; }
  .hero { padding:140px 24px 60px; }
  .section { width:calc(100% - 32px); margin:40px auto; }
  .connect { flex-direction:column; align-items:flex-start; }
}

.solutions-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px; }
.solutions-grid article { padding:24px; border-radius:24px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.03); box-shadow:0 20px 45px rgba(0,0,0,0.45); text-align:center; }
.solution-icon { width:88px; height:88px; margin:0 auto 12px; border-radius:50%; border:1px solid rgba(255,255,255,0.15); background:linear-gradient(135deg, rgba(79,123,255,0.2), rgba(223,230,255,0.1)); }
.lifecycle-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px; }
.lifecycle-grid article { padding:20px; border-radius:18px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); box-shadow:0 20px 45px rgba(0,0,0,0.4); }

.card-icon svg { width:28px; height:28px; color:var(--accent-blue); }