/* Vaquero public landing (welcome.html). Standalone sheet.
   Tokens follow .ops/redesign_260808/DESIGN_V1.md §4 and the values the site actually computes after the
   2026-08-09 rebuild (light = paper white #FFFFFF, dark = #0A0A0B). This page never loads vq.css, so nothing
   here can reach the app shell and nothing in the app can restyle this page — which also means these values
   are a COPY: if vq.css moves, move them here too (same rule the worker shells carry).
   Grammar: DESIGN_V1 §1.4 C (Read) for the prose blocks, flat ground everywhere (DS-21) — no card
   backgrounds, no borders except hairlines, no shadows, no glass on the ground plane.
   Korean text is served by a subset built from THIS page's own glyph set (assets/welcome-kr-*.woff2);
   rebuild it whenever the copy changes (procedure in .ops/night_260808/LANDING.md §9). */

/* ---- fonts ---------------------------------------------------------------- */
@font-face{font-family:'VQ Sans';font-style:normal;font-weight:400;font-display:swap;src:url("/assets/welcome-kr-400.woff2") format("woff2")}
@font-face{font-family:'VQ Sans';font-style:normal;font-weight:600;font-display:swap;src:url("/assets/welcome-kr-600.woff2") format("woff2")}
@font-face{font-family:'VQ Sans';font-style:normal;font-weight:700;font-display:swap;src:url("/assets/welcome-kr-700.woff2") format("woff2")}
@font-face{font-family:'VQ Sans';font-style:normal;font-weight:800;font-display:swap;src:url("/assets/welcome-kr-800.woff2") format("woff2")}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600 700;font-display:swap;
  src:url("/brand/fonts/CormorantGaramond-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'VQ Mono';font-style:normal;font-weight:400 700;font-display:swap;
  src:url("/brand/fonts/JetBrainsMono-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212,U+FEFF,U+FFFD}

/* ---- tokens --------------------------------------------------------------- */
:root,:root[data-theme="dark"]{
  --bg:#0A0A0B; --sunken:#0E0E10; --float:#16161A;
  --hair:#1C1C1F; --hair-str:#26262A;
  --ink:#F2F2EF; --ink-2:#A5A59F; --ink-3:#6C6C66;
  --gold:#D4AF37; --gold-2:#E3C66A; --gold-ink:#14100A;
  --shot-edge:#26262A;
}
:root[data-theme="light"]{
  --bg:#FFFFFF; --sunken:#F5F5F3; --float:#FFFFFF;
  --hair:#E7E7E3; --hair-str:#D6D6D1;
  --ink:#15150F; --ink-2:#56564F; --ink-3:#8A8A82;
  --gold:#9A7A1E; --gold-2:#B08F2A; --gold-ink:#FFFFFF;
  --shot-edge:#D6D6D1;
}
:root{
  --kr:'VQ Sans',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --brand:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --mono:'VQ Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:32px; --hd:56px; --wrap:1216px; --read:720px;
  --dur-tap:120ms; --dur-move:200ms;
  --ease:cubic-bezier(.2,0,0,1);
}

/* ---- base ----------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
/* keep-all stops Korean breaking mid-word (the default breaks anywhere and shreds 어절);
   break-word is the escape hatch for a long latin token that would otherwise widen the layout */
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--kr);font-size:16px;line-height:1.65;
  word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,dl,dd,dt,blockquote,figure{margin:0}
ul{padding:0;list-style:none}
b{font-weight:700;color:var(--ink)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:color-mix(in srgb,var(--gold) 28%,transparent)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.wrap.narrow{max-width:calc(var(--read) + var(--pad) * 2)}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--float);color:var(--ink);padding:12px 18px;border:1px solid var(--hair)}
.skip:focus{left:12px;top:12px}
.gd{color:var(--gold-2)}

/* ---- header --------------------------------------------------------------- */
/* The one floating layer on the page (DESIGN_V1 §4.4) — it earns the glass because it sits over content. */
.hd{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid transparent;
  transition:background var(--dur-move) var(--ease),border-color var(--dur-move) var(--ease)}
.hd.stuck{background:color-mix(in srgb,var(--float) 92%,transparent);border-bottom-color:var(--hair);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2)}
.hd-in{display:flex;align-items:center;gap:20px;height:var(--hd);
  width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.wm{display:inline-flex;align-items:center;gap:10px;font-family:var(--brand);font-weight:700;font-size:22px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);white-space:nowrap;line-height:1}
.wm img{width:26px;height:26px;object-fit:contain}
.wm-sm{font-size:18px}
.wm-sm img{width:22px;height:22px}
.hd-nav{display:flex;gap:2px;margin-left:8px}
.hd-nav a{font-size:14px;font-weight:500;color:var(--ink-2);padding:8px 12px;border-radius:8px;
  transition:color var(--dur-tap) var(--ease)}
.hd-nav a:hover{color:var(--ink)}
.hd-cta{display:flex;align-items:center;gap:12px;margin-left:auto}

.lang,.seg{display:inline-flex;border:1px solid var(--hair);border-radius:8px;overflow:hidden}
.lang button,.seg button{font-size:var(--fz-foot,13px);font-weight:600;letter-spacing:.04em;color:var(--ink-3);
  padding:6px 10px;min-height:30px;transition:color var(--dur-tap) var(--ease),background var(--dur-tap) var(--ease)}
.lang button+button,.seg button+button{border-left:1px solid var(--hair)}
.lang button.on,.seg button.on{color:var(--gold-2);background:var(--sunken)}
.lang button:hover,.seg button:hover{color:var(--ink)}

/* ---- buttons -------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;border-radius:10px;
  font-size:14px;font-weight:700;white-space:nowrap;
  transition:border-color var(--dur-tap) var(--ease),color var(--dur-tap) var(--ease),opacity var(--dur-tap) var(--ease)}
.btn-lg{height:48px;padding:0 26px;font-size:15px}
.btn-gold{background:var(--gold);color:var(--gold-ink);border:1px solid var(--gold)}
.btn-gold:hover{background:var(--gold-2);border-color:var(--gold-2)}
.btn-line{border:1px solid var(--hair-str);color:var(--ink)}
.btn-line:hover{border-color:var(--gold);color:var(--gold-2)}
.btn-ghost{color:var(--ink-2)}
.btn-ghost:hover{color:var(--ink)}

/* ---- type ----------------------------------------------------------------- */
.eyebrow{font-family:var(--mono);font-size:var(--fz-foot,13px);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
  display:inline-flex;align-items:center;gap:10px;margin-bottom:18px}
.eyebrow::before{content:"";width:20px;height:1px;background:var(--gold)}
h1{font-family:var(--brand);font-size:clamp(40px,6.4vw,74px);font-weight:700;line-height:1.06;letter-spacing:-.01em}
:root[lang="ko"] h1,html[lang="ko"] h1{font-family:var(--kr);font-size:clamp(34px,5.2vw,58px);letter-spacing:-.02em;line-height:1.16}
.lede{margin-top:22px;max-width:34em;font-size:17px;line-height:1.78;color:var(--ink-2)}
.sec-h{font-size:clamp(22px,2.6vw,30px);font-weight:700;letter-spacing:-.015em;line-height:1.3;margin-bottom:14px}
.sec-lede{max-width:38em;font-size:16px;line-height:1.8;color:var(--ink-2)}
/* the kickers carry Korean words, so the tracking stays small — .14em shreds 어절 into loose syllables */
.kicker{font-family:var(--kr);font-size:var(--fz-foot,13px);font-weight:600;letter-spacing:.02em;color:var(--gold-2);margin-bottom:10px}

/* ---- sections ------------------------------------------------------------- */
.hero{padding:72px 0 8px}
.hero-in{padding-bottom:44px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.cta-note{margin-top:14px;font-size:13px;color:var(--ink-3)}
.band{padding:64px 0;border-top:1px solid var(--hair)}
.band:first-of-type{border-top:0}

/* ---- screenshots ---------------------------------------------------------- */
/* The captures are dark (the site's default ground). On the light theme they stay dark, so a hairline
   marks them as an embedded screen rather than a hole in the page. */
.shot{margin-top:28px}
.shot img{width:100%;border:1px solid var(--shot-edge);border-radius:12px}
.shot-lead{margin-top:0}
.shot picture{display:block}
@media(max-width:640px){.shot-lead img{max-width:360px;margin:0 auto}}
.shot figcaption{margin-top:12px;font-size:var(--fz-foot,13px);color:var(--ink-3)}

/* ---- beta band ------------------------------------------------------------
   Why a band and not a modal: this page's whole job is that the introduction is visible immediately
   (no "둘러보기" gate), and a modal would put a lid back on it. This one sits IN THE FLOW right under the
   header, so it covers nothing — it pushes the hero down by its own height and scrolls away with the page.
   It closes to a session flag, so a reader who dismisses it does not meet it again on this visit.
   The wording carries only what is settled: the 100 credits given at signup. No date, no referral figure,
   no claim about outcomes. ---- */
.beta{border-bottom:1px solid var(--hair)}
.beta-in{max-width:var(--wrap);margin:0 auto;padding:12px var(--pad);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.beta-tag{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:var(--fz-foot,13px);font-weight:700;letter-spacing:.12em;
  color:var(--gold-ink);background:var(--gold);border-radius:999px;padding:4px 12px}
.beta-t{flex:1 1 320px;min-width:0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.beta-t b{color:var(--ink);font-weight:600}
/* outlined, not filled: the header already carries a filled gold '무료로 시작하기' directly above this band,
   and two of them stacked read as one control drawn twice. Same destination, quieter weight. */
.beta-go{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 16px;
  border:1px solid var(--gold);border-radius:10px;background:transparent;color:var(--gold-2);
  text-decoration:none;font-weight:600;font-size:14.5px}
.beta-go:hover{background:color-mix(in srgb,var(--gold) 12%,transparent)}
.beta-go svg{width:15px;height:15px}
.beta-x{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ink-3);cursor:pointer}
.beta-x:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}
.beta-x svg{width:18px;height:18px}
@media(max-width:760px){
  .beta{position:relative}
  .beta-in{padding:11px 46px 13px 16px;gap:8px}
  .beta-tag{order:1}
  .beta-t{order:2;flex:1 1 100%;font-size:13.5px}
  .beta-go{order:3;min-height:38px}
  .beta-x{position:absolute;right:10px;top:9px}
}

/* ---- 4 / 3 column blocks -------------------------------------------------- */
.cols4,.cols3{display:grid;gap:32px;margin-top:36px}
.cols4{grid-template-columns:repeat(4,1fr)}
.cols3{grid-template-columns:repeat(3,1fr)}
.col{border-top:1px solid var(--hair);padding-top:20px}
.col .ic{display:block;color:var(--gold-2);margin-bottom:14px}
.col .ic svg{width:24px;height:24px}
.col h3{font-size:17px;font-weight:700;letter-spacing:-.01em;margin-bottom:10px}
.col p{font-size:14.5px;line-height:1.75;color:var(--ink-2)}
/* Vaquero Intelligence is a product and carries its own name, so this column is marked as one. The grammar
   is the one the research page already uses: no box and no oversized wordmark, a 2px gold rule down the left
   and the name held at the same step as its sibling headings, with the Korean reading and the kind of work
   set quietly underneath. The rank comes from the rule, the air and the ink — not from making the name big. */
.col-vqi{border-top-color:var(--gold);border-left:2px solid var(--gold);padding-left:20px}
.col-vqi h3{margin-bottom:6px}
.col-vqi .col-kr{font-family:var(--kr);font-size:var(--fz-foot,13px);letter-spacing:.02em;
  color:var(--ink-3);margin-bottom:14px}
@media(max-width:760px){ .col-vqi{padding-left:16px} }

/* ---- alternating feature rows --------------------------------------------- */
.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:44px;align-items:center;
  margin-top:56px;padding-top:44px;border-top:1px solid var(--hair)}
/* the image column keeps its width when the row flips, so every capture is rendered at the same size */
.feat-rev{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.feat-rev .feat-t{order:2}
.feat-t h3{font-size:clamp(19px,2.1vw,24px);font-weight:700;letter-spacing:-.015em;line-height:1.35;margin-bottom:14px}
.feat-t p{font-size:15px;line-height:1.8;color:var(--ink-2)}
.feat .shot{margin-top:0}

/* ---- prose (Read grammar) ------------------------------------------------- */
.read p{font-size:16.5px;line-height:1.88;color:var(--ink-2);margin-bottom:18px}
.read p:last-child{margin-bottom:0}
.read .sec-h{margin-top:44px}
.read .wrap>.sec-h:first-of-type,.read .eyebrow+.sec-h{margin-top:0}
.pull{margin:26px 0;padding:2px 0 2px 22px;border-left:2px solid var(--gold)}
.pull p{font-size:18px;line-height:1.62;color:var(--ink);font-weight:600;margin:0}
.ticks{margin:6px 0 20px}
.ticks li{position:relative;padding-left:22px;margin-bottom:12px;font-size:15.5px;line-height:1.8;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:2px;top:.72em;width:8px;height:1px;background:var(--gold)}

/* ---- team ----------------------------------------------------------------- */
.tm{border-top:1px solid var(--hair);padding-top:26px;margin-top:32px}
.tm-name{font-size:21px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.tm-name .en{font-family:var(--mono);font-size:var(--fz-foot,13px);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-2);font-weight:600}
.tm-lead{font-size:15px;line-height:1.8;color:var(--ink-2);margin-bottom:16px}
.tm-h{font-family:var(--mono);font-size:var(--fz-foot,13px);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-2);margin:18px 0 8px}
.tm-spec li{position:relative;padding-left:16px;margin-bottom:8px;font-size:14px;line-height:1.7;color:var(--ink-2)}
.tm-spec li::before{content:"";position:absolute;left:2px;top:.8em;width:5px;height:1px;background:var(--ink-3)}
.tm-note{margin-top:16px;font-size:var(--fz-foot,13px);line-height:1.72;color:var(--ink-3)}

/* ---- phones --------------------------------------------------------------- */
.phones{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:36px;max-width:900px}
.ph img{width:100%;border:1px solid var(--shot-edge);border-radius:16px}

/* ---- chips ---------------------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.chips span{font-family:var(--mono);font-size:var(--fz-foot,13px);color:var(--ink-2);border:1px solid var(--hair);
  border-radius:999px;padding:7px 14px}

/* ---- faq ------------------------------------------------------------------ */
.faq{margin-top:28px}
.qa{border-top:1px solid var(--hair);padding:22px 0}
.qa dt{font-size:16px;font-weight:700;margin-bottom:10px}
.qa dd{font-size:15px;line-height:1.82;color:var(--ink-2)}

/* ---- final cta ------------------------------------------------------------ */
.fin{padding:76px 0;border-top:1px solid var(--hair);background:var(--sunken)}
.fin-in h2{font-size:clamp(26px,3.4vw,38px);font-weight:700;letter-spacing:-.02em;line-height:1.24;margin-bottom:16px}
.fin-in .cta{justify-content:flex-start}

/* ---- disclaimer + footer -------------------------------------------------- */
.disc{display:block;padding-top:40px;padding-bottom:40px;font-size:var(--fz-foot,13px);line-height:1.8;color:var(--ink-3)}
.ft{border-top:1px solid var(--hair)}
.ft-in{display:flex;align-items:center;flex-wrap:wrap;gap:18px 28px;padding-top:28px;padding-bottom:40px}
.ft-nav{display:flex;flex-wrap:wrap;gap:18px}
.ft-nav a{font-size:13px;color:var(--ink-2)}
.ft-nav a:hover{color:var(--gold-2)}
.ft-set{margin-left:auto}
.ft-c{font-family:var(--mono);font-size:var(--fz-foot,13px);color:var(--ink-3);width:100%}
/* 사업자 정보. 각주 크기의 흐린 잉크로 조용히 깔린다. 주소·이메일은 잘리지 않고 접히고(overflow-wrap),
   항목 이름과 값은 굵기로만 구분한다. 줄임표도 가로 스크롤도 만들지 않는다. */
.ft-biz{width:100%;display:flex;flex-direction:column;gap:2px}
.ft-biz p{margin:0;display:flex;flex-wrap:wrap;gap:2px 18px;font-size:var(--fz-foot,13px);line-height:1.75;color:var(--ink-3);overflow-wrap:anywhere}
.ft-f{display:inline-flex;flex-wrap:wrap;gap:0 6px;min-width:0}
.ft-f b{font-weight:600}
.ft-f a{color:var(--ink-3)}
.ft-f a:hover{color:var(--gold-2)}

/* ---- reveal --------------------------------------------------------------- */
.rv{opacity:0;transform:translateY(10px);transition:opacity 420ms var(--ease),transform 420ms var(--ease)}
.rv.on{opacity:1;transform:none}

/* ---- responsive ----------------------------------------------------------- */
@media(max-width:1080px){
  .cols4{grid-template-columns:repeat(2,1fr)}
  .feat{grid-template-columns:1fr;gap:26px}
  .feat-rev .feat-t{order:0}
}
@media(max-width:860px){
  :root{--pad:20px}
  .hd-nav{display:none}
  .cols3{grid-template-columns:1fr;gap:24px}
  .hero{padding:48px 0 8px}
  .band{padding:48px 0}
  .fin{padding:56px 0}
  .phones{grid-template-columns:1fr;gap:24px;max-width:360px}
  .feat{margin-top:40px;padding-top:32px}
  .ft-set{margin-left:0}
}
@media(max-width:560px){
  .cols4{grid-template-columns:1fr;gap:22px}
  .lang{display:none}
  .cta .btn{width:100%}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
}