/* YSA Labs — site styles (v2, Oct 2026). Palette and fonts are the only things you should need to touch. */
:root{
  --black:#0B0D12;      /* dark bands, text */
  --paper:#F6F5F0;      /* page background */
  --white:#FFFFFF;      /* cards */
  --blue:#2B5CFF;       /* primary accent */
  --violet:#7C4DFF;     /* secondary accent */
  --lime:#C6FF4A;       /* highlight (cursor, buttons on dark) */
  --teal:#18D6C9;
  --grey:#6B7180;       /* secondary text */
  --mute:#B9BCC6;       /* secondary text on dark */
  --line:#E3E1DA;       /* rules, borders */
  --sans:"Outfit","Noto Sans KR",system-ui,-apple-system,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --grot:"Space Grotesk","Noto Sans KR",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--black);font-family:var(--sans);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;word-break:keep-all}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--violet)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
img,svg{max-width:100%}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:24px}
h1,h2,h3{margin:0;letter-spacing:-.02em;text-wrap:balance;line-height:1.2}
h1{font-size:clamp(32px,4.6vw,52px);font-weight:700}
h2{font-size:clamp(26px,3.2vw,36px);font-weight:700}
h3{font-size:20px;font-weight:700}
p{margin:0}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--violet);margin-bottom:16px}
.lead{font-size:18px;color:var(--grey);max-width:58ch}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:999px;font-weight:700;font-size:15px;border:1.5px solid var(--black);background:var(--black);color:var(--paper);transition:transform .15s,background .15s,color .15s}
.btn:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--black)}
.btn.ghost:hover{background:var(--white);color:var(--black);border-color:var(--black)}
.dark .btn{background:var(--lime);border-color:var(--lime);color:var(--black)}
.dark .btn:hover{background:#d8ff7a;border-color:#d8ff7a;color:var(--black)}
.dark .btn.ghost{background:transparent;border-color:#3A3E4A;color:var(--paper)}
.dark .btn.ghost:hover{border-color:var(--paper);background:transparent}

/* header */
.site-header{position:sticky;top:0;background:rgba(246,245,240,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:10}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:70px}
.brand{display:inline-flex;align-items:center}
.brand img{height:36px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:26px;font-weight:600;font-size:15px}
.nav a{color:var(--black)}
.nav a:hover{color:var(--blue)}
.lang{font-family:var(--mono);font-size:12px;letter-spacing:.08em;border:1px solid var(--line);border-radius:999px;padding:6px 12px;color:var(--grey);background:var(--white)}
.lang:hover{border-color:var(--black);color:var(--black)}
.menu-btn{display:none;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font:inherit;font-weight:600;color:var(--black)}
@media (max-width:760px){
  .nav{display:none;position:absolute;left:0;right:0;top:70px;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;padding:18px 24px;gap:16px}
  .nav.open{display:flex}
  .menu-btn{display:inline-block}
}

/* hero (dark band) */
.hero{background:var(--black);color:var(--paper);padding-block:96px 72px}
.hero .grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:64px;align-items:end}
@media (max-width:860px){.hero .grid{grid-template-columns:1fr;gap:40px}.hero{padding-block:60px 48px}}
.hero .eyebrow{color:var(--lime)}
.hero h1{max-width:17ch;color:var(--paper)}
.hero .lead{margin-top:22px;color:var(--mute)}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.ysa{list-style:none;margin:0;padding:0;border-top:1px solid #2A2E3A}
.ysa li{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;padding:18px 0;border-bottom:1px solid #2A2E3A}
.ysa .l{font-family:var(--grot);font-weight:700;font-size:40px;line-height:1;letter-spacing:-.03em}
.ysa li:nth-child(1) .l{color:var(--lime)}
.ysa li:nth-child(2) .l{color:#8FB0FF}
.ysa li:nth-child(3) .l{color:#B9A3FF}
.ysa strong{display:block;font-size:16px;font-weight:700;color:var(--paper);line-height:1.3}
.ysa .d{display:block;color:var(--mute);font-size:14.5px;margin-top:4px;line-height:1.55}

/* sections */
section{padding-block:80px}
@media (max-width:760px){section{padding-block:56px}}
.section-head{max-width:64ch;margin-bottom:44px}
.section-head p{margin-top:14px;color:var(--grey);font-size:17px}
.services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:760px){.services{grid-template-columns:1fr}}
.service{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:30px 28px;position:relative;transition:transform .15s,box-shadow .15s}
.service:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(11,13,18,.08)}
.service .n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--violet);margin-bottom:14px}
.service h3{margin-bottom:10px}
.service p{color:var(--grey);margin-bottom:16px}
.service ul{margin:0;padding-left:18px;color:var(--black)}
.service li{margin-bottom:5px}
.service .tag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--black);background:var(--lime);border-radius:999px;padding:4px 10px;margin-top:14px}
.aside-note{margin-top:28px;padding:18px 22px;background:var(--white);border:1px dashed var(--line);border-radius:14px;color:var(--grey);max-width:72ch}

.band{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:860px){.steps{grid-template-columns:1fr}}
.step{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:28px 26px}
.step .n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--blue);margin-bottom:12px}
.step h3{margin-bottom:8px}
.step p{color:var(--grey)}

.about{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:start}
@media (max-width:860px){.about{grid-template-columns:1fr;gap:32px}}
.about .text p{margin-bottom:14px;max-width:60ch}
.kv{border-top:2px solid var(--black);margin:0}
.kv div{display:grid;grid-template-columns:160px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.kv dt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);padding-top:4px}
.kv dd{margin:0;font-weight:600}
@media (max-width:480px){.kv div{grid-template-columns:1fr;gap:2px}}

.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
@media (max-width:860px){.contact{grid-template-columns:1fr;gap:32px}}
.contact .card{background:var(--black);color:var(--paper);border-radius:18px;padding:30px}
.contact .card dl{margin:0}
.contact .card dt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:18px}
.contact .card dt:first-child{margin-top:0}
.contact .card dd{margin:4px 0 0;font-weight:600}
.contact .email{font-family:var(--grot);font-size:22px;font-weight:700;color:var(--lime);word-break:break-all}
.contact .email:hover{color:#d8ff7a}

.site-footer{background:var(--black);color:var(--mute);padding-block:40px;font-size:13px}
.site-footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
.site-footer img{height:30px;width:auto;display:block;margin-bottom:14px}
.site-footer .legal{max-width:72ch;line-height:1.8}
.site-footer nav{display:flex;gap:18px;flex-wrap:wrap}
.site-footer a{color:var(--mute)}
.site-footer a:hover{color:var(--lime)}

/* legal pages */
.doc{max-width:72ch;padding-block:56px 80px}
.doc h1{font-size:32px;margin-bottom:8px}
.doc .meta{font-family:var(--mono);font-size:12px;color:var(--grey);letter-spacing:.06em;margin-bottom:36px}
.doc h2{font-size:21px;margin:36px 0 10px}
.doc p,.doc li{color:var(--black)}
.doc ul{padding-left:20px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.service{transition:none}}

/* ---- TONK product (added 7 Oct 2026) ---- */
.tonk-word{font-family:var(--grot);font-weight:700;letter-spacing:.04em;color:var(--lime)}
.hero h1{max-width:20ch}
.flow{list-style:none;margin:0;padding:0;border-top:1px solid #2A2E3A}
.flow li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;padding:18px 0;border-bottom:1px solid #2A2E3A}
.flow .k{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--lime);padding-top:3px}
.flow strong{display:block;font-size:17px;font-weight:700;color:var(--paper);line-height:1.3}
.flow .d{display:block;color:var(--mute);font-size:14.5px;margin-top:4px;line-height:1.55}
.modules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:900px){.modules{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.modules{grid-template-columns:1fr}}
.module{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:26px 24px}
.module h3{font-size:18px;margin-bottom:8px}
.module p{color:var(--grey);font-size:15px}
.who{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:40px;align-items:start;margin-top:56px;padding:34px 32px;background:var(--black);color:var(--paper);border-radius:20px}
@media (max-width:860px){.who{grid-template-columns:1fr;gap:18px;padding:26px 22px}}
.who .eyebrow{color:var(--lime);margin-bottom:10px}
.who h3{color:var(--paper);font-size:22px}
.who ul{margin:0;padding-left:0;list-style:none;display:grid;gap:12px}
.who li{position:relative;padding-left:24px;color:var(--mute);line-height:1.55}
.who li::before{content:"";position:absolute;left:0;top:.6em;width:12px;height:5px;border-radius:2px;background:var(--lime)}
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
@media (max-width:860px){.how{grid-template-columns:1fr}}
.how .step{background:var(--white)}

/* brand sub-line: YSA Labs is part of PaySolution Limited */
.brand{flex-direction:column;align-items:flex-start;gap:4px}
.brand-sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--grey);white-space:nowrap;line-height:1}
.site-header .wrap{min-height:76px}
@media (max-width:760px){.nav{top:76px}.brand-sub{font-size:9.5px}}

/* hero flow panel sits a little higher */
.hero .grid{align-items:center}
@media (min-width:861px){.flow{margin-top:-24px}}

/* TONK logo placements */
.tonk-hero-logo{height:56px;width:auto;display:block;margin-bottom:22px}
.tonk-sec-logo{height:40px;width:auto;display:block;margin-bottom:16px}
@media (max-width:760px){.tonk-hero-logo{height:46px}}

/* header: YSA Labs | PaySolution in one line */
.brand{flex-direction:row;align-items:center;gap:14px}
.brand img{height:36px;width:auto;display:block}
.brand .bar{width:1px;height:28px;background:#C9C6BC;display:block}
.brand .brand-ps{height:27px;opacity:.92}
.site-header .wrap{min-height:72px}
@media (max-width:760px){.nav{top:72px}}
@media (max-width:560px){.brand .bar,.brand .brand-ps{display:none}}