/* boheedot — built on the Self-Steaming design system v1.0:
   paper ground, ink chrome, one pink (badges and button hover only),
   borders instead of shadows, two weights (400/700). Latin in Satoshi, Hangul in Pretendard. */

@font-face{font-family:"Satoshi";src:url("fonts/satoshi-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("fonts/satoshi-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#171717; --paper:#ffffff; --bone:#f2f2f2; --ash:#e3e3e3; --smoke:#c7c7c7;
  --graphite:#a1a1a1; --pewter:#919191; --iron:#5c5c5c;
  --pink:#ff457f; --pink-2:#f43f78;
  --s1:4px; --s2:6px; --s3:8px; --s4:12px; --s5:14px; --s6:16px;
  --s7:20px; --s8:24px; --s9:32px; --s10:40px; --s11:48px; --s12:80px;
  --r-input:4px; --r-card:12px; --r-pill:9999px;
  --max:1120px; --pad:clamp(16px,4vw,24px); --gap-sec:clamp(56px,9vw,96px);
  --ease:cubic-bezier(.16,1,.3,1);
  --sans:"Satoshi","Pretendard Variable","Pretendard","Apple SD Gothic Neo",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.2;font-weight:400;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;word-break:keep-all}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd{margin:0}
h1,h2,h3{text-wrap:balance}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:var(--r-input)}
::selection{background:var(--ink);color:var(--paper)}

/* type scale */
.t-display{font-size:clamp(34px,5.6vw,52px);font-weight:700;line-height:calc(.75em + 16px);letter-spacing:-.03em}
.t-h-lg{font-size:clamp(28px,4.2vw,38px);font-weight:700;line-height:calc(.75em + 14px);letter-spacing:-.022em}
.t-h-sm{font-size:20px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.t-sub{font-size:18px;font-weight:700;line-height:1.3}
.t-caption{font-size:11px;font-weight:700;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--pewter)}
.prose{font-size:16px;line-height:1.65;color:var(--iron);max-width:56ch}
.prose b{color:var(--ink);font-weight:700}
@media (min-width:820px){.hero .prose,.sec-head .prose{font-size:18px}}
.meta{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--pewter)}

/* components */
.tag{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s4);border-radius:var(--r-pill);
     background:linear-gradient(135deg,var(--pink),var(--pink-2));color:var(--paper);
     font-size:11px;font-weight:700;line-height:1.2;letter-spacing:.12em;text-transform:uppercase}
.tag-quiet{background:var(--bone);color:var(--iron)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:0 var(--s7);
     border:1px solid var(--ink);border-radius:var(--r-card);background:var(--ink);color:var(--paper);position:relative;isolation:isolate;
     font-size:15px;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer;
     transition:background 180ms var(--ease),color 180ms var(--ease),border-color 180ms var(--ease),transform 180ms var(--ease)}
.btn::after{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:linear-gradient(135deg,var(--pink),var(--pink-2));
     opacity:0;transition:opacity 180ms var(--ease);pointer-events:none}
.btn:hover::after{opacity:1}
.btn:hover{border-color:var(--pink)}
.btn:active{transform:translateY(1px)}
.btn .arw{display:inline-block;transition:transform 220ms var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn-ghost{background:var(--paper);color:var(--ink);border-color:var(--ash)}
.btn-ghost::after{content:none}
.btn-ghost:hover{background:var(--bone);border-color:var(--smoke)}
.btn-invert{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-invert:hover{border-color:var(--pink);color:var(--paper)}
.card{display:flex;flex-direction:column;gap:var(--s4);padding:var(--s8);border:1px solid var(--ash);border-radius:var(--r-card);
      background:var(--paper);transition:border-color 220ms var(--ease)}
.card:hover{border-color:var(--smoke)}
.card p{color:var(--iron);font-size:15px;line-height:1.6}

/* chrome */
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.site-head{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--ash)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);min-height:60px}
.mark{font-size:20px;font-weight:700;letter-spacing:-.03em;text-decoration:none}
.mark i{font-style:normal;color:var(--pewter)}
.site-nav{display:flex;align-items:center;gap:var(--s7)}
.site-nav a{font-size:14px;font-weight:700;color:var(--iron);text-decoration:none;transition:color 160ms var(--ease)}
.site-nav a:hover{color:var(--ink)}
.site-nav .lang{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--iron);border:1px solid var(--ash);border-radius:var(--r-input);padding:var(--s1) var(--s3)}
.site-nav .lang:hover{border-color:var(--smoke);color:var(--ink)}
.site-nav .btn{min-height:38px;padding:0 var(--s5);font-size:14px;color:var(--paper)}
.sec{padding:var(--gap-sec) 0;border-top:1px solid var(--ash)}
.sec-head{display:flex;flex-direction:column;gap:var(--s4);margin-bottom:var(--s10)}
.site-foot{border-top:1px solid var(--ink);padding:var(--s9) 0 var(--s11);font-size:14px;line-height:1.7;color:var(--pewter)}
.site-foot b{color:var(--ink)}
.site-foot a{color:var(--iron)}

/* hero */
.hero{padding:var(--gap-sec) 0}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s11);align-items:center}
.hero .tag{margin-bottom:var(--s8)}
.hero .prose{margin-top:var(--s8)}
.actions{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s9)}

/* phone chat mock (Telegram-like, neutral) */
.phone{border:1px solid var(--ash);border-radius:28px;background:var(--bone);padding:var(--s4);max-width:380px;margin-left:auto;width:100%}
.phone-top{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4) var(--s4);border-bottom:1px solid var(--ash)}
.avatar{width:32px;height:32px;border-radius:var(--r-pill);background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:13px;font-weight:700}
.phone-top b{display:block;font-size:14px}
.phone-top span{font-size:12px;color:var(--pewter)}
.msgs{display:grid;gap:var(--s3);padding:var(--s4) var(--s2) var(--s2)}
.msg{max-width:86%;padding:var(--s3) var(--s4);border-radius:14px;font-size:14px;line-height:1.5;background:var(--paper);border:1px solid var(--ash)}
.msg.me{justify-self:end;background:var(--ink);border-color:var(--ink);color:var(--paper)}
.msg .meta{display:block;margin-top:var(--s1)}
.msg.me .meta{color:var(--smoke)}
.mock-note{margin-top:var(--s3);text-align:right}

/* two pillars */
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6)}
.pillar{padding:var(--s9)}
.pillar .t-h-sm{font-size:24px}
.pillar ul{list-style:none;padding:0;display:grid;gap:var(--s3);margin-top:var(--s2)}
.pillar li,.plan li{position:relative;padding-left:var(--s6);font-size:15px;line-height:1.6;color:var(--iron)}
.pillar li::before,.plan li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:var(--r-pill);background:var(--smoke)}

/* module grid */
.modules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.module{padding:var(--s7)}
.module .t-sub{display:flex;align-items:baseline;gap:var(--s3)}
.module .en{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--pewter);letter-spacing:.04em}

/* Tom features */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s11);align-items:start}
.features{list-style:none;padding:0;border-top:1px solid var(--ash)}
.features li{display:grid;grid-template-columns:150px 1fr;gap:var(--s6);padding:var(--s6) 0;border-bottom:1px solid var(--ash)}
.features b{font-size:15px;line-height:1.6}
.features span{font-size:15px;line-height:1.6;color:var(--iron)}

/* flow */
.flow{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);counter-reset:f}
.flow li{counter-increment:f;padding:var(--s7)}
.flow li::before{content:counter(f,decimal-leading-zero);font-family:var(--mono);font-size:11px;color:var(--pewter)}
.flow .meta{order:-1}

/* requirements */
.reqs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.req{padding:var(--s7)}
.req .tag{align-self:flex-start}

/* plans */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6)}
.plan{padding:var(--s9);gap:var(--s6)}
.plan.featured{border-color:var(--ink)}
.plan ul{list-style:none;padding:0;display:grid;gap:var(--s3)}
.plan .price{font-size:15px;font-weight:700}
.plan .btn{margin-top:auto;align-self:flex-start}
.plan-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}

/* native app teaser */
.app-card{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s9) var(--s11);padding:var(--s10);align-items:start}
.app-card .tag{margin-bottom:var(--s6)}
.app-card .prose{margin-top:var(--s6)}
.app-points{list-style:none;padding:0;border-top:1px solid var(--ash)}
.app-points li{display:grid;gap:var(--s1);padding:var(--s5) 0;border-bottom:1px solid var(--ash)}
.app-points b{font-size:15px}
.app-points span{font-size:15px;line-height:1.55;color:var(--iron)}
.app-card .btn{grid-column:1/-1;justify-self:start}

/* faq */
.faq{border-top:1px solid var(--ash);max-width:820px}
.faq details{border-bottom:1px solid var(--ash);padding:var(--s7) 0}
.faq summary{cursor:pointer;font-size:17px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:var(--s6)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--pewter);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:var(--s4);font-size:15px;line-height:1.65;color:var(--iron);max-width:64ch}

/* cta */
.cta{background:var(--ink);color:var(--paper);border-radius:var(--r-card);padding:var(--s12) var(--s8);text-align:center}
.cta .t-caption{color:var(--smoke)}
.cta h2{margin-top:var(--s4)}
.cta p{margin:var(--s4) auto var(--s8);color:var(--smoke);font-size:16px;line-height:1.6;max-width:46ch}

@media (max-width:960px){
  .modules,.flow,.reqs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .hero-grid,.pillars,.split,.plans,.app-card{grid-template-columns:1fr}
  .app-card{padding:var(--s8)}
  .phone{margin:0 auto}
  .site-nav a:not(.btn):not(.lang){display:none}
  .features li{grid-template-columns:1fr;gap:var(--s1)}
  .cta{padding:var(--s11) var(--s6)}
}
@media (max-width:520px){
  .modules,.flow,.reqs{grid-template-columns:1fr}
}