/* Gnoow Labs studio site: charcoal + coral, the AccuPortrait app look */
:root {
  --bg: #22252B; --card: #2F333B; --ink: #F4F4F2; --muted: #B7BAC1; --rule: #3C414A;
  --coral: #FF5A4E; --on-coral: #22252B; --sky: #8FD3FF; --paper: #FFFDF8;
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto,
  "Noto Sans KR", "Malgun Gothic", sans-serif }
a { color: var(--sky) }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px }
header.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0 }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 800;
  font-size: 1.15rem; letter-spacing: .01em }
.brand .mark { width: 30px; height: 30px; border-radius: 8px; background: var(--coral); display: grid; place-items: center;
  color: var(--on-coral); font-weight: 900 }
.langs { display: flex; gap: 6px }
.langs button { background: transparent; color: var(--muted); border: 1px solid var(--rule); border-radius: 999px;
  padding: 4px 11px; font: inherit; font-size: .85rem; cursor: pointer }
.langs button[aria-pressed="true"] { background: var(--card); color: var(--ink); border-color: var(--muted) }
h1 { font-size: clamp(2rem, 6vw, 3.1rem); line-height: 1.12; margin: 0 0 14px; letter-spacing: -.01em }
h2 { font-size: 1.5rem; margin: 0 0 14px }
.lead { color: var(--muted); font-size: 1.1rem; max-width: 42em }
.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--coral); color: var(--on-coral);
  font-weight: 800; text-decoration: none; padding: 13px 22px; border-radius: 14px }
.btn.dark { background: #000; color: #fff; border: 1px solid #555; font-weight: 600 }
.btn small { display: block; font-size: .7rem; font-weight: 500; opacity: .85; line-height: 1 }
.btn .play { line-height: 1.15 }
section { padding: 36px 0 }
/* home */
.hero-home { padding: 40px 0 10px }
.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px }
.appcard { background: var(--card); border: 1px solid var(--rule); border-radius: 20px; padding: 20px; display: flex;
  flex-direction: column; gap: 14px }
.appcard .row { display: flex; gap: 14px; align-items: center }
.appcard img.icon { width: 64px; height: 64px; border-radius: 15px }
.appcard h3 { margin: 0; font-size: 1.2rem }
.appcard p { margin: 0; color: var(--muted) }
.appcard .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto }
.appcard .more { color: var(--sky); text-decoration: none; padding: 13px 4px; font-weight: 600 }
/* app page */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 26px 0 30px }
.hero .icon { width: 72px; height: 72px; border-radius: 17px; margin-bottom: 14px }
.note { color: var(--muted); font-size: .92rem; margin-top: 12px }
.phone { justify-self: center; width: min(340px, 100%); aspect-ratio: 9 / 16; background: #111; border-radius: 34px;
  padding: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45) }
.phone video { width: 100%; height: 100%; border-radius: 26px; display: block; object-fit: cover; background: #000 }
.phone iframe { width: 100%; height: 100%; border: 0; border-radius: 26px }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: s }
.step { background: var(--card); border: 1px solid var(--rule); border-radius: 18px; overflow: hidden }
.step img { width: 100%; aspect-ratio: 9 / 13; object-fit: cover; object-position: top; display: block; background: #111 }
.step div { padding: 14px 16px 18px }
.step h3 { margin: 0 0 6px; font-size: 1.05rem }
.step h3::before { counter-increment: s; content: counter(s); display: inline-grid; place-items: center; width: 24px;
  height: 24px; border-radius: 50%; background: var(--coral); color: var(--on-coral); font-size: .8rem; margin-right: 8px }
.step p { margin: 0; color: var(--muted); font-size: .95rem }
.paperbox { background: var(--paper); color: #1E1B2E; border-radius: 20px; padding: 26px; background-image:
  linear-gradient(#13B5A622 1px, transparent 1px), linear-gradient(90deg, #13B5A622 1px, transparent 1px);
  background-size: 32px 32px }
.paperbox p { margin: 0 0 10px }
footer { border-top: 1px solid var(--rule); margin-top: 30px; padding: 22px 0 40px; color: var(--muted); font-size: .9rem }
footer .links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 8px }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 26px }
  .steps { grid-template-columns: 1fr 1fr }
}
@media (max-width: 520px) {
  .steps { grid-template-columns: 1fr }
  .step img { aspect-ratio: 1 / 1; object-position: center 35% }
  section { padding: 26px 0 }
}