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

:root {
  --base: #021a1f;
  --panel: rgba(3, 18, 24, 0.9);
  --accent: #35dccb;
  --accent-soft: #7df5e7;
  --text: #f2fbff;
  --muted: rgba(242, 251, 255, 0.75);
  font-family: "Sora", "Space Grotesk", system-ui, sans-serif;
}

* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--base); color:var(--text); overflow-x:hidden; }

.grid { position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 20% 20%, rgba(53,220,203,0.35), transparent 60%), radial-gradient(circle at 70% 10%, rgba(125,245,231,0.25), transparent 65%), linear-gradient(180deg, rgba(0,0,0,0.7), transparent); }

header { position:fixed; top:0; left:0; right:0; z-index:10; display:flex; justify-content:space-between; align-items:center; padding:18px 48px; backdrop-filter:blur(18px); background:rgba(2,20,24,0.6); border-bottom:1px solid rgba(255,255,255,0.08); }
main { padding-top:110px; }

.brand { display:flex; gap:12px; align-items:center; }
.brand-mark { width:54px; height:54px; border-radius:20%; border:1px solid rgba(255,255,255,0.15); background:linear-gradient(135deg, rgba(53,220,203,0.5), rgba(2,26,31,0.6)); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.brand-mark img { width:100%; height:100%; object-fit:cover; border-radius:20%; }

nav { display:flex; gap:14px; flex-wrap:wrap; padding:10px 18px; border-radius:999px; border:1px solid rgba(255,255,255,0.12); background:rgba(2,26,31,0.5); box-shadow:0 18px 40px rgba(0,0,0,0.35); }
nav a { color:var(--muted); text-decoration:none; letter-spacing:0.08em; font-size:0.85rem; padding:8px 14px; border-radius:999px; border:1px solid transparent; transition:all 0.2s ease; }
nav a:hover { border-color:rgba(255,255,255,0.3); background:rgba(255,255,255,0.06); color:var(--text); }

.cta { background:linear-gradient(120deg, var(--accent), var(--accent-soft)); color:#002828; border:none; border-radius:999px; padding:11px 26px; font-weight:600; text-decoration:none; box-shadow:0 20px 45px rgba(53,220,203,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; }

.hero { min-height:100vh; display:flex; flex-direction:column; justify-content:flex-start; gap:32px; padding:110px 40px 80px; text-align:center; position:relative; }
.hero-stage { position:absolute; inset:0; pointer-events:none; }
.hero-grid { position:absolute; inset:10%; border:1px solid rgba(255,255,255,0.08); border-radius:40px; background:linear-gradient(transparent 96%, rgba(255,255,255,0.06)); mix-blend-mode:screen; }
.hero-grid::after, .hero-grid::before { content:""; position:absolute; border:1px solid rgba(255,255,255,0.05); }
.hero-grid::after { inset:20% 0; border-left:none; border-right:none; }
.hero-grid::before { inset:0 20%; border-top:none; border-bottom:none; }

.helix, .tidal { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }
.helix { width:420px; height:420px; border-radius:50%; border:1px solid rgba(255,255,255,0.1); background:radial-gradient(circle, rgba(53,220,203,0.45), transparent 65%); filter:blur(0.5px); }
.tidal { width:520px; height:200px; border-radius:50%; border:1px solid rgba(125,245,231,0.25); background:linear-gradient(135deg, rgba(53,220,203,0.15), transparent); transform:translate(-50%, -40%); }
.hero-copy { max-width:100%; margin:0 auto; position:relative; }
.hero-copy h1 { font-size:clamp(2.5rem, 4vw, 3.8rem); line-height:1.25; margin:16px 0; }
.hero-copy p { color:var(--muted); font-size:1.1rem; line-height:1.8; }
.hero-cta { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }

.panel { width:min(1180px, 100% - 72px); margin:60px auto; padding:32px; border-radius:32px; background:var(--panel); border:1px solid rgba(255,255,255,0.1); box-shadow:0 35px 80px rgba(0,0,0,0.55); position:relative; overflow:hidden; }
.panel::after { content:""; position:absolute; inset:1px; border-radius:32px; border:1px solid rgba(255,255,255,0.05); pointer-events:none; }
.panel-head h2 { margin:0; font-size:2.1rem; }
.panel-head p { margin:6px 0 18px; color:var(--muted); }

.card-icon { width:50px; height:50px; border-radius:16px; border:1px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.04); display:flex; align-items:center; justify-content:center; margin-bottom:12px; position:relative; overflow:hidden; }
.card-icon::after { content:""; position:absolute; border-radius:999px; }
.icon-helix::after { width:28px; height:28px; border:2px solid var(--accent-soft); border-radius:50%; box-shadow:0 0 14px rgba(125,245,231,0.4); }
.icon-ridge::after { width:32px; height:4px; background:var(--accent); box-shadow:0 8px 0 rgba(255,255,255,0.4), 0 -8px 0 rgba(255,255,255,0.2); }
.icon-tidal::after { width:34px; height:10px; border-radius:999px; background:linear-gradient(90deg, var(--accent), rgba(255,255,255,0.4)); }
.icon-capture::after { width:26px; height:26px; border:2px solid var(--accent); border-radius:8px; }
.icon-verify::after { width:26px; height:26px; border-radius:50%; border:2px solid var(--accent-soft); box-shadow:0 0 20px rgba(125,245,231,0.4); }
.icon-release::after { width:34px; height:2px; background:var(--accent); box-shadow:0 8px 0 rgba(255,255,255,0.3); }
.icon-core-helix::after { width:24px; height:24px; border:2px solid var(--accent-soft); transform:rotate(45deg); }
.icon-core-ridge::after { width:30px; height:12px; border-radius:6px; background:linear-gradient(90deg, rgba(53,220,203,0.6), rgba(255,255,255,0.2)); }
.icon-core-tidal::after { width:34px; height:34px; border-radius:50%; border:2px solid rgba(255,255,255,0.3); }
.icon-auto::after { width:10px; height:32px; background:var(--accent); box-shadow:12px 0 0 rgba(255,255,255,0.4), -12px 0 0 rgba(255,255,255,0.2); }
.icon-compare::after { width:30px; height:18px; border-radius:8px; border:2px solid rgba(255,255,255,0.4); box-shadow:0 0 0 6px rgba(53,220,203,0.15); }
.icon-dm::after { width:30px; height:20px; border-radius:8px; border:2px solid var(--accent-soft); border-bottom-left-radius:2px; border-bottom-right-radius:2px; }
.icon-precision::after { width:24px; height:24px; border:2px solid var(--accent); }
.icon-clarity::after { width:32px; height:2px; background:rgba(255,255,255,0.6); box-shadow:0 -6px 0 rgba(255,255,255,0.3), 0 6px 0 rgba(255,255,255,0.3); }
.icon-calm::after { width:28px; height:12px; border-radius:999px; background:rgba(125,245,231,0.4); }


.lines-grid, .core-grid, .future-grid, .concept-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px; }
.lines-grid article, .core-grid article, .future-grid article, .concept-grid article { padding:20px; border-radius:26px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); backdrop-filter:blur(8px); position:relative; }
.lines-grid span { font-size:0.7rem; letter-spacing:0.35em; color:var(--muted); }
.lines-grid article::before { content:""; position:absolute; inset:0; border-radius:inherit; border:1px solid rgba(255,255,255,0.05); pointer-events:none; }

.process-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px; }
.process-grid article { padding:20px; border-radius:24px; border:1px solid rgba(255,255,255,0.08); background:linear-gradient(160deg, rgba(53,220,203,0.15), rgba(2,26,31,0.7)); position:relative; }
.process-grid article::before { content:""; position:absolute; inset:0; border-radius:inherit; border:1px solid rgba(255,255,255,0.05); }

.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; }
  .panel { width:calc(100% - 32px); margin:40px auto; }
  .hero { padding:120px 24px 60px; }
  .connect { flex-direction:column; align-items:flex-start; }
}

.card.helix-card { background:linear-gradient(135deg, rgba(53,220,203,0.18), rgba(255,255,255,0.02)); }
.card.ridge-card { background:linear-gradient(135deg, rgba(242,251,255,0.1), rgba(2,26,31,0.8)); }
.card.tidal-card { background:linear-gradient(135deg, rgba(125,245,231,0.15), rgba(2,26,31,0.7)); }
.process-card.capture-card { background:linear-gradient(160deg, rgba(53,220,203,0.2), rgba(2,26,31,0.75)); }
.process-card.verify-card { background:linear-gradient(160deg, rgba(242,251,255,0.12), rgba(2,26,31,0.75)); }
.process-card.release-card { background:linear-gradient(160deg, rgba(125,245,231,0.18), rgba(2,26,31,0.7)); }
.core-card.helix-core { background:linear-gradient(135deg, rgba(53,220,203,0.18), rgba(255,255,255,0.02)); }
.core-card.ridge-core { background:linear-gradient(135deg, rgba(242,251,255,0.1), rgba(2,26,31,0.75)); }
.core-card.tidal-core { background:linear-gradient(135deg, rgba(125,245,231,0.15), rgba(2,26,31,0.7)); }
.future-card.auto-card { background:linear-gradient(135deg, rgba(53,220,203,0.2), rgba(255,255,255,0.03)); }
.future-card.compare-card { background:linear-gradient(135deg, rgba(242,251,255,0.12), rgba(2,26,31,0.8)); }
.future-card.tidal-card-future { background:linear-gradient(135deg, rgba(125,245,231,0.18), rgba(2,26,31,0.75)); }
.concept-card.precision-card { background:linear-gradient(135deg, rgba(53,220,203,0.18), rgba(255,255,255,0.02)); }
.concept-card.clarity-card { background:linear-gradient(135deg, rgba(242,251,255,0.12), rgba(2,26,31,0.7)); }
.concept-card.calm-card { background:linear-gradient(135deg, rgba(125,245,231,0.18), rgba(2,26,31,0.7)); }

.lines-grid article, .core-grid article, .future-grid article, .concept-grid article, .process-grid article { transition:transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; box-shadow:0 20px 45px rgba(0,0,0,0.35); }
.lines-grid article:hover, .core-grid article:hover, .future-grid article:hover, .concept-grid article:hover, .process-grid article:hover { transform:translateY(-10px); border-color:rgba(255,255,255,0.25); box-shadow:0 35px 70px rgba(0,0,0,0.45); }
.panel { transition:border-color 0.3s ease, box-shadow 0.3s ease; }
.panel:hover { border-color:rgba(255,255,255,0.15); box-shadow:0 45px 110px rgba(0,0,0,0.6); }
.hero-cta .cta, .hero-cta .ghost, nav a { transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.hero-cta .cta:hover, .hero-cta .ghost:hover, nav a:hover { transform:translateY(-3px); box-shadow:0 18px 30px rgba(53,220,203,0.3); }

.hero-stats { margin-top:28px; display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:16px; }
.hero-stats article { padding:16px; border-radius:20px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); backdrop-filter:blur(8px); }
.hero-stats h3 { margin:0; font-size:1.4rem; }
.hero-stats p { margin:4px 0 0; color:var(--muted); font-size:0.9rem; }

.note { margin-top:8px; font-size:0.85rem; color:rgba(242,251,255,0.65); }