@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --navy:#070c14;
  --ink:#0c1725;
  --cyan:#2dd4c9;
  --violet:#8b5cf6;
  --grad: linear-gradient(135deg, var(--cyan), var(--violet));
  --line: rgba(255,255,255,.14);
  --line-soft: rgba(15,23,42,.09);
  --muted:#6f7d8c;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#f4f6f8; color:var(--ink); font-family:'Pretendard Variable','Inter',sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.label { font-family:'Inter',sans-serif; }

.site-header { padding:22px clamp(16px,4vw,64px) 0; position:absolute; z-index:10; width:100%; color:#fff; }
.nav-shell { max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:8px 10px 8px 20px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; gap:10px; font-size:19px; font-weight:700; letter-spacing:-.02em; }
.brand img { display:block; }
.brand-dot { color:var(--cyan); }
.nav-links { display:flex; align-items:center; gap:28px; font-family:'Inter',sans-serif; font-size:13px; font-weight:500; color:#c3d0dd; }
.nav-links a { transition:color .2s; }
.nav-links a:hover { color:#fff; }
.header-badge { font-family:'Inter',sans-serif; color:#a9b8c8; font-size:10px; letter-spacing:.18em; text-transform:uppercase; background:rgba(255,255,255,.06); border:1px solid var(--line); padding:9px 16px; border-radius:999px; }

.hero { min-height:760px; height:100vh; max-height:980px; position:relative; overflow:hidden; background:var(--navy); color:#fff; display:flex; align-items:center; }
.hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(1.15) contrast(1.05) brightness(.88); }
.hero-shade {
  position:absolute; inset:0;
  background:
    radial-gradient(900px 620px at 82% 18%, rgba(139,92,246,.30), transparent 60%),
    radial-gradient(700px 500px at 60% 90%, rgba(45,212,201,.16), transparent 65%),
    linear-gradient(90deg, rgba(4,9,18,.96) 0%, rgba(4,9,18,.78) 40%, rgba(4,9,18,.18) 74%),
    linear-gradient(0deg, rgba(4,9,18,.4), transparent 45%);
  mix-blend-mode:normal;
}
.hero-content { position:relative; z-index:2; width:min(1180px,90%); margin:50px auto 0; }
.eyebrow { margin:0 0 24px; color:#7fe3db; font-family:'Inter',sans-serif; font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; display:flex; align-items:center; gap:10px; }
.eyebrow span { width:26px; height:1px; background:currentColor; }
h1 { font-size:clamp(46px,6vw,86px); line-height:1.14; letter-spacing:-.02em; margin:0 0 30px; max-width:760px; font-weight:600; }
h1 em { font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-copy { font-size:clamp(15px,1.25vw,18px); line-height:1.85; color:#aab9c9; margin:0; }
.hero-actions { margin-top:38px; display:flex; align-items:center; gap:30px; flex-wrap:wrap; }
.button { height:54px; padding:0 28px; display:inline-flex; align-items:center; gap:16px; font-size:14px; font-weight:600; border-radius:999px; transition:transform .25s, box-shadow .25s, filter .25s; }
.button.primary { background:var(--grad); color:#04120f; box-shadow:0 12px 30px -10px rgba(139,92,246,.55); }
.button.primary:hover { transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 16px 36px -8px rgba(139,92,246,.65); }
.button span { font-size:17px; }
.status { color:#91a3b5; font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.08em; display:flex; align-items:center; gap:9px; }
.status i { width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan); }
.scroll-cue { position:absolute; z-index:2; right:4.8vw; bottom:45px; display:flex; align-items:center; gap:12px; font-family:'Inter',sans-serif; font-size:9px; color:#738599; letter-spacing:.25em; transform:rotate(90deg); transform-origin:right center; }
.scroll-cue span { width:42px; height:1px; background:#738599; }

.vision { max-width:1180px; margin:0 auto; padding:130px 0 95px; display:grid; grid-template-columns:1.35fr .65fr; gap:8%; align-items:end; }
.eyebrow.dark { color:#657485; margin-bottom:25px; }
.vision h2 { margin:0; font-size:clamp(30px,3.4vw,48px); letter-spacing:-.02em; line-height:1.3; font-weight:600; }
.vision-copy { position:relative; padding-left:38px; font-size:17px; line-height:1.9; }
.vision-copy:before { content:""; position:absolute; left:0; top:4px; bottom:4px; width:2px; border-radius:2px; background:var(--grad); }
.vision-copy p { margin:0 0 17px; }
.vision-copy .muted { color:#7a8793; font-size:14px; }

.capabilities { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1180px; margin:0 auto 130px; }
.capabilities article { position:relative; border-radius:24px; border:1px solid var(--line-soft); background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.04); min-height:300px; padding:38px 34px; transition:box-shadow .25s, transform .25s, border-color .25s; }
.capabilities article:hover { box-shadow:0 22px 40px -18px rgba(15,23,42,.18); transform:translateY(-6px); border-color:rgba(139,92,246,.25); }
.number { position:absolute; right:28px; top:30px; color:#a6b0ba; font-family:'Inter',sans-serif; font-size:10px; letter-spacing:.1em; }
.icon-badge { width:72px; height:72px; border-radius:20px; margin:0 0 32px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, rgba(45,212,201,.14), rgba(139,92,246,.14)); border:1px solid rgba(139,92,246,.14); }
.icon { width:54px; height:54px; position:relative; color:#4c6e73; }
.signal i { position:absolute; left:4px; bottom:7px; width:4px; border-radius:5px; background:currentColor; }
.signal i:nth-child(1){height:14px}.signal i:nth-child(2){height:29px;left:17px}.signal i:nth-child(3){height:43px;left:30px}
.eye { width:58px; border:2px solid currentColor; height:36px; border-radius:70% 12%; transform:rotate(-5deg); top:8px; }
.eye i { width:15px; height:15px; border:3px solid currentColor; border-radius:50%; position:absolute; left:19px; top:8px; }
.stream:before,.stream:after,.stream i { content:""; position:absolute; border:2px solid currentColor; border-left-color:transparent; border-bottom-color:transparent; transform:rotate(45deg); }
.stream:before { width:12px;height:12px;left:2px;top:19px}.stream i:first-child{width:25px;height:25px;left:8px;top:12px}.stream i:last-child{width:40px;height:40px;left:14px;top:5px}
.capabilities h3 { font-size:20px; margin:0 0 14px; letter-spacing:-.01em; }
.capabilities p { color:#6f7d89; line-height:1.7; font-size:14px; margin:0; }

.closing {
  min-height:470px; background:var(--navy); color:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:70px 24px; position:relative; overflow:hidden;
  background-image:
    radial-gradient(560px circle at 26% 22%, rgba(45,212,201,.18), transparent 60%),
    radial-gradient(560px circle at 76% 82%, rgba(139,92,246,.20), transparent 60%);
}
.closing>* { position:relative; }
.closing>p { color:#7d90a5; font-family:'Inter',sans-serif; font-size:10px; letter-spacing:.28em; margin:25px 0 16px; }
.closing h2 { font-size:clamp(36px,4.6vw,62px); line-height:1.2; letter-spacing:-.02em; margin:0; font-weight:500; }
.closing h2 span { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

footer { background:#040a12; color:#718397; min-height:100px; padding:0 clamp(24px,5vw,80px); display:flex; align-items:center; gap:30px; font-size:11px; border-top:1px solid rgba(255,255,255,.06); }
.footer-brand { color:#fff; font-size:16px; margin-right:auto; }
.mobile-break { display:none; }

@media (max-width:850px) {
  .site-header { padding:16px 16px 0; }
  .nav-shell { padding:8px; border-radius:20px; }
  .nav-links, .header-badge { display:none; }
  .brand { font-size:17px; }
  .brand img { width:32px; height:32px; }
  .hero { min-height:760px; height:100svh; align-items:flex-end; padding-bottom:70px; }
  .hero-image { object-position:68% center; opacity:.78; }
  .hero-shade { background:linear-gradient(0deg,rgba(4,9,18,.98) 12%,rgba(4,9,18,.5) 78%),linear-gradient(90deg,rgba(4,9,18,.5),transparent); }
  .hero-content { width:calc(100% - 44px); margin:0 auto; }.hero-copy br:not(.mobile-break){display:none}.mobile-break{display:block}
  .hero-actions { align-items:flex-start; flex-direction:column; gap:20px; }.scroll-cue{display:none}
  .vision { padding:90px 22px 65px; grid-template-columns:1fr; gap:45px; }
  .capabilities { margin:0 22px 90px; grid-template-columns:1fr; gap:16px; }.capabilities article{min-height:auto}
  footer { padding:28px 22px; flex-wrap:wrap; gap:12px 22px; }.footer-brand{width:100%}
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.capabilities article{transition:none} }