* { box-sizing: border-box; }
:root {
  --bg: #050814; --line: rgba(255,255,255,.14); --text:#f7fbff; --muted:#9baac4;
  --blue:#2d6cff; --cyan:#19d3ff; --violet:#8a68ff;
}
html, body {
  margin:0; min-height:100%;
  font-family: Inter, Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at 80% 10%, rgba(45,108,255,.36), transparent 32%),
              radial-gradient(circle at 15% 55%, rgba(25,211,255,.18), transparent 36%),
              linear-gradient(135deg, #030510 0%, #081424 48%, #030510 100%);
  color:var(--text);
}
body::before {
  content:""; position:fixed; inset:0; pointer-events:none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 74%);
}
.bg-orb { position:fixed; border-radius:999px; filter:blur(32px); opacity:.55; pointer-events:none; }
.orb-a { width:260px; height:260px; background:var(--cyan); right:6%; top:18%; }
.orb-b { width:220px; height:220px; background:var(--violet); left:4%; bottom:16%; }
.page { position:relative; width:min(1180px, calc(100% - 44px)); min-height:100vh; margin:0 auto; padding:34px 0 28px; }
.nav { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:72px; }
.logo { display:flex; align-items:center; gap:13px; }
.logo-mark { display:grid; place-items:center; width:46px; height:46px; border-radius:15px; color:#fff; font-weight:950; font-size:25px; background:linear-gradient(135deg,var(--blue),var(--cyan)); box-shadow:0 0 32px rgba(25,211,255,.34); }
.logo-text { font-size:25px; font-weight:900; letter-spacing:-.04em; }
.status { padding:12px 18px; border:1px solid rgba(120,164,255,.34); border-radius:999px; color:#dce7ff; font-weight:750; background:rgba(8,18,42,.7); }
.hero { display:grid; grid-template-columns:1.04fr .96fr; gap:56px; align-items:center; }
.eyebrow { margin:0 0 22px; color:var(--cyan); font-size:14px; font-weight:900; letter-spacing:.25em; }
h1 { margin:0; font-size:clamp(46px, 6vw, 82px); line-height:1.04; letter-spacing:-.075em; font-weight:950; }
.lead { width:min(640px,100%); margin:28px 0 0; color:#c8d4e9; font-size:20px; line-height:1.75; word-break:keep-all; }
.actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }
.btn { display:inline-flex; align-items:center; min-height:52px; padding:0 20px; border-radius:16px; font-weight:900; text-decoration:none; }
.primary { color:white; background:linear-gradient(135deg,var(--blue),var(--cyan)); box-shadow:0 16px 48px rgba(25,211,255,.22); }
.ghost { color:#dbe7ff; border:1px solid var(--line); background:rgba(255,255,255,.055); }
.visual { position:relative; min-height:560px; }
.panel { border:1px solid var(--line); background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.045)); backdrop-filter:blur(18px); box-shadow:0 28px 80px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.035); }
.panel-main { position:absolute; inset:30px 20px 70px 20px; padding:24px; border-radius:32px; }
.panel-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; font-weight:900; }
.panel-head b { color:#ff4b77; font-size:13px; letter-spacing:.12em; }
.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.metric-grid div { padding:18px; border-radius:20px; background:rgba(255,255,255,.085); }
.metric-grid small { display:block; color:var(--muted); font-weight:700; margin-bottom:8px; }
.metric-grid strong { font-size:34px; letter-spacing:-.05em; }
.chart { display:flex; align-items:end; gap:14px; height:210px; margin-top:34px; padding:24px; border-radius:24px; background:rgba(4,10,24,.55); }
.chart i { flex:1; min-width:18px; border-radius:999px 999px 8px 8px; background:linear-gradient(180deg,var(--cyan),var(--blue)); box-shadow:0 0 22px rgba(25,211,255,.22); }
.panel-chat,.panel-capture { position:absolute; display:flex; gap:14px; align-items:center; padding:18px; border-radius:24px; }
.panel-chat { left:0; right:54%; bottom:80px; }
.panel-capture { left:50%; right:0; bottom:0; }
.panel b { display:block; margin-bottom:5px; font-size:17px; }
.panel p { margin:0; color:var(--muted); line-height:1.45; }
.dot,.capture-icon { flex:0 0 auto; width:42px; height:42px; border-radius:15px; background:linear-gradient(135deg,var(--blue),var(--cyan)); box-shadow:0 0 28px rgba(25,211,255,.28); }
.capture-icon { border-radius:14px 14px 20px 20px; }
.features { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:70px; }
.features article { min-height:206px; padding:24px; border:1px solid rgba(255,255,255,.1); border-radius:26px; background:rgba(255,255,255,.055); }
.features span { color:var(--cyan); font-weight:950; }
.features h3 { margin:18px 0 12px; font-size:21px; letter-spacing:-.055em; }
.features p { margin:0; color:var(--muted); line-height:1.65; word-break:keep-all; }
footer { display:flex; justify-content:space-between; gap:18px; margin-top:46px; padding-top:28px; border-top:1px solid rgba(255,255,255,.1); color:#8291ad; font-size:13px; }
@media (max-width:980px) {
  .nav { margin-bottom:48px; }
  .hero { grid-template-columns:1fr; }
  .visual { min-height:500px; }
  .features { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .page { width:min(100% - 28px,1180px); padding-top:22px; }
  .nav { align-items:flex-start; flex-direction:column; }
  .status { font-size:13px; }
  h1 { font-size:46px; }
  .lead { font-size:17px; }
  .visual { min-height:620px; }
  .panel-main { inset:0 0 178px 0; }
  .panel-chat { left:0; right:0; bottom:88px; }
  .panel-capture { left:0; right:0; bottom:0; }
  .metric-grid { grid-template-columns:1fr; }
  .chart { height:135px; margin-top:20px; }
  .features { grid-template-columns:1fr; }
  footer { flex-direction:column; }
}