/* MATI Company Landing — minimal, modern, responsive */
:root{
  --bg:#0b1020;
  --bg-alt:#0f1730;
  --card:#121a37;
  --text:#e7ecff;
  --muted:#a8b3cf;
  --brand:#4f7cff;
  --brand-2:#7aa2ff;
  --border:rgba(255,255,255,.1);
  --shadow:0 10px 30px rgba(0,0,0,.25);
}

.mati-landing *{box-sizing:border-box}
.mati-landing{
  color:var(--text);
  background:linear-gradient(180deg,var(--bg),#0b1224 50%, var(--bg-alt));
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Apple SD Gothic Neo, "맑은 고딕", sans-serif;
  line-height:1.6;
}
.container{
  max-width:1100px;margin:0 auto;padding:0 20px;
}

/* Header */
.mati-header{position:sticky;top:0;z-index:10;background:rgba(11,16,32,.7);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--border)}
.mati-header .container{display:flex;align-items:center;gap:20px;min-height:64px}
.brand-link,.brand{font-weight:800;letter-spacing:.2px}
.brand-link{color:var(--text);text-decoration:none}
.nav{margin-left:auto}
.nav ul{display:flex;gap:18px;list-style:none;padding:0;margin:0}
.nav a{color:var(--muted);text-decoration:none;padding:10px 8px;border-radius:10px}
.nav a:hover{color:var(--text);background:rgba(255,255,255,.06)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:10px}

/* Hero */
.hero{padding:96px 0;background:
 radial-gradient(60% 60% at 0% 0%, rgba(79,124,255,.25), transparent 50%),
 radial-gradient(60% 60% at 100% 0%, rgba(122,162,255,.18), transparent 50%);}
.hero h1{font-size:42px;line-height:1.2;margin:0 0 12px;font-weight:900}
.hero .subtitle{font-size:18px;color:var(--muted);max-width:720px;margin:0 0 28px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;border:1px solid var(--border);text-decoration:none}
.btn.primary{background:linear-gradient(180deg,var(--brand),var(--brand-2));color:white;box-shadow:var(--shadow)}
.btn.ghost{color:var(--text);background:transparent}

/* Sections */
.section{padding:64px 0;border-top:1px solid var(--border)}
.section.alt{background:linear-gradient(180deg,transparent, rgba(255,255,255,.02))}
.section h2{font-size:28px;margin:0 0 24px;letter-spacing:.2px}

/* Grids */
.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
  .nav ul{display:none}
  .nav-toggle{display:block}
}

/* Cards */
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.card h3{margin:8px 0 6px}
.card .icon{font-size:24px;opacity:.95}
.person .avatar{font-size:48px;margin-bottom:8px}

/* About */
.split{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;align-items:center}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:14px;padding:14px;text-align:center}
.stat .value{font-size:22px;font-weight:800}
.stat .label{color:var(--muted);font-size:13px}
@media (max-width:900px){.split{grid-template-columns:1fr}.stats{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.stats{grid-template-columns:repeat(2,1fr)}}

/* Contact */
.contact-form{display:grid;gap:12px;max-width:720px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact-form input,.contact-form textarea{
  width:100%;background:rgba(255,255,255,.06);color:var(--text);border:1px solid var(--border);
  padding:10px 12px;border-radius:12px;outline:none
}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--brand)}
.form-result{color:var(--muted);margin-top:6px}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:40px 0;background:rgba(0,0,0,.25)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
.footer-links{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.footer-links a{color:var(--muted);text-decoration:none}
.footer-links a:hover{color:var(--text)}
.social a{margin-right:10px;color:var(--muted);text-decoration:none}
.social a:hover{color:var(--text)}
.copyright{border-top:1px solid var(--border);margin-top:20px;padding-top:16px;color:var(--muted);text-align:center}