/* ============================================================
   linkplus.app — landing v2  ·  "이용권(Pass) 기반 통합 허브"
   Light, premium, interactive. Single theme (no tweaks).
   ============================================================ */

:root {
  /* surfaces */
  --bg:        oklch(0.985 0.004 255);
  --bg-2:      oklch(0.965 0.006 255);
  --paper:     #ffffff;
  --paper-2:   oklch(0.978 0.004 255);

  /* ink */
  --ink:       oklch(0.165 0.015 264);
  --ink-2:     oklch(0.42 0.013 264);
  --ink-3:     oklch(0.585 0.011 264);
  --ink-4:     oklch(0.72 0.008 264);
  --line:      oklch(0.915 0.006 264);
  --line-2:    oklch(0.95 0.004 264);
  --line-strong: oklch(0.86 0.008 264);

  /* accent (single, blue) */
  --accent:    oklch(0.55 0.2 256);
  --accent-2:  oklch(0.62 0.18 256);
  --accent-deep: oklch(0.45 0.17 261);
  --accent-ink: #ffffff;
  --accent-tint:  oklch(0.955 0.03 256);
  --accent-tint-2: oklch(0.915 0.055 256);
  --accent-glow: oklch(0.55 0.2 256 / 0.32);

  /* free (no-signup informational sites) */
  --free:      oklch(0.58 0.13 158);
  --free-2:    oklch(0.52 0.14 158);
  --free-tint: oklch(0.95 0.04 158);
  --free-tint-2: oklch(0.9 0.06 158);

  /* dark band */
  --dk:        oklch(0.19 0.022 264);
  --dk-2:      oklch(0.235 0.024 264);
  --dk-line:   oklch(0.34 0.02 264);
  --dk-ink:    oklch(0.97 0.005 264);
  --dk-ink-2:  oklch(0.74 0.014 264);

  --shadow-xs: 0 1px 2px oklch(0.2 0.03 264 / 0.06);
  --shadow-sm: 0 2px 4px oklch(0.2 0.03 264 / 0.05), 0 1px 2px oklch(0.2 0.03 264 / 0.04);
  --shadow-md: 0 10px 30px oklch(0.2 0.04 264 / 0.08), 0 3px 8px oklch(0.2 0.03 264 / 0.05);
  --shadow-lg: 0 28px 70px oklch(0.2 0.05 264 / 0.14), 0 8px 22px oklch(0.2 0.04 264 / 0.08);
  --shadow-accent: 0 14px 36px oklch(0.55 0.2 256 / 0.30), 0 4px 10px oklch(0.55 0.2 256 / 0.22);

  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 56px);
  --r-lg: 22px; --r-md: 16px; --r-sm: 11px;

  --font-sans: "Pretendard", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-display: "Space Grotesk", var(--font-sans);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* , *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body {
  margin: 0; font-family: var(--font-sans); background: var(--bg); color: var(--ink);
  line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-feature-settings: "ss01","cv01"; overflow-x: hidden;
}
h1,h2,h3,h4,p{ margin:0; text-wrap: pretty; }
h1,h2,h3{ text-wrap: balance; letter-spacing:-0.025em; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
img,svg{ display:block; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background: var(--accent-tint-2); }
:focus-visible{ outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap{ max-width: var(--maxw); margin:0 auto; padding-inline: var(--gutter); }
section{ position: relative; }

/* ---------- shared bits ---------- */
.mono{ font-family: var(--font-mono); font-size:12px; letter-spacing:0.02em; }
.chip-eyebrow{
  display:inline-flex; align-items:center; gap:9px; padding:7px 13px 7px 11px;
  border-radius:999px; background: var(--paper); border:1px solid var(--line);
  box-shadow: var(--shadow-xs); font-family: var(--font-mono); font-size:12px;
  letter-spacing:0.02em; color: var(--ink-2); font-weight:500;
}
.chip-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-glow); animation: ping 2.6s var(--ease) infinite; }
@keyframes ping{ 0%{ box-shadow:0 0 0 0 var(--accent-glow);} 70%,100%{ box-shadow:0 0 0 9px transparent; } }
@media (prefers-reduced-motion: reduce){ .chip-eyebrow .dot{ animation:none; } }

.sec-head{ display:grid; gap:18px; margin-bottom: clamp(40px,6vw,68px); max-width: 720px; }
.sec-head .kicker{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.14em;
  text-transform:uppercase; color: var(--accent); font-weight:600; }
.sec-head h2{ font-size: clamp(30px,5vw,54px); font-weight:680; line-height:1.04; }
.sec-head p{ color: var(--ink-2); font-size: clamp(15px,1.6vw,18px); line-height:1.6; max-width: 56ch; }

/* ---------- buttons ---------- */
.btn{
  --bh:50px; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:var(--bh); padding:0 24px; border-radius:999px; font-size:15px; font-weight:600;
  letter-spacing:-0.01em; white-space:nowrap;
  transition: transform .35s var(--spring), box-shadow .3s var(--ease), background .25s, color .25s, border-color .25s;
}
.btn:active{ transform: scale(.97); }
.btn-primary{ background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: var(--accent-ink);
  box-shadow: 0 1px 0 oklch(1 0 0 /.25) inset, var(--shadow-accent); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 1px 0 oklch(1 0 0 /.25) inset, 0 20px 44px var(--accent-glow); }
.btn-ghost{ background: var(--paper); color: var(--ink); border:1px solid var(--line-strong); box-shadow: var(--shadow-sm); }
.btn-ghost:hover{ transform: translateY(-2px); border-color: var(--ink-3); box-shadow: var(--shadow-md); }
.btn-lg{ --bh:58px; padding:0 30px; font-size:16px; }
.btn-sm{ --bh:42px; padding:0 17px; font-size:13.5px; }
.btn .sheen{ position:absolute; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none; }
.btn .sheen::after{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(100deg, transparent, oklch(1 0 0 /.35), transparent); transform: skewX(-18deg);
  transition: left .6s var(--ease); }
.btn-primary:hover .sheen::after{ left:130%; }
.g-mark{ width:18px; height:18px; flex:none; }

/* ============================================================
   PASS (이용권 ticket) — brand motif
   ============================================================ */
.pass{
  --pw: 92px; --ph: 56px; --notch: 7px;
  position: relative; width: var(--pw); height: var(--ph); flex:none;
  border-radius: 10px;
  background: linear-gradient(150deg, var(--accent-2), var(--accent) 55%, var(--accent-deep));
  color: var(--accent-ink); box-shadow: var(--shadow-accent);
  -webkit-mask:
    radial-gradient(circle var(--notch) at 0 50%, transparent 98%, #000 100%),
    radial-gradient(circle var(--notch) at 100% 50%, transparent 98%, #000 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  display: grid; place-items: center; overflow: hidden;
}
.pass::before{ /* perforation line */
  content:""; position:absolute; top:8px; bottom:8px; left:62%; width:0;
  border-left: 1.5px dashed oklch(1 0 0 /.5);
}
.pass::after{ /* sheen */
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, oklch(1 0 0 /.18) 48%, transparent 60%);
}
.pass .pv-amt{ position:absolute; left:0; width:62%; top:0; bottom:0; display:grid; place-content:center; }
.pass .pv-amt b{ font-family: var(--font-mono); font-weight:700; font-size: calc(var(--ph)*0.26); line-height:1; }
.pass .pv-amt span{ font-size: calc(var(--ph)*0.15); opacity:.85; font-weight:500; margin-top:2px; }
.pass .pv-run{ position:absolute; right:0; width:38%; top:0; bottom:0; display:grid; place-content:center; text-align:center; }
.pass .pv-run b{ font-family: var(--font-display); font-weight:600; font-size: calc(var(--ph)*0.3); line-height:1; }
.pass .pv-run span{ font-size: calc(var(--ph)*0.13); opacity:.85; }

/* tiny inline pass glyph (for badges/inline) */
.pass-mini{ --pw:30px; --ph:19px; --notch:3px; border-radius:5px; box-shadow: 0 2px 6px var(--accent-glow); }
.pass-mini::before{ left:0; right:0; top:50%; bottom:auto; width:auto; height:0; border-left:none; border-top:1px dashed oklch(1 0 0 /.5); }
.pass-mini::after{ display:none; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform: translateY(28px); }
.reveal.in{ opacity:1; transform:none; transition: opacity .85s var(--ease-out), transform .85s var(--ease-out); transition-delay: var(--d,0ms); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; } }

/* ============================================================
   NAV
   ============================================================ */
.nav{ position:fixed; top:0; left:0; right:0; z-index:50; transition: all .4s var(--ease); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:74px; gap:24px; transition: height .4s var(--ease); }
.nav.scrolled{ background: oklch(0.985 0.004 255 / 0.72); backdrop-filter: saturate(1.7) blur(16px); -webkit-backdrop-filter: saturate(1.7) blur(16px); box-shadow: 0 1px 0 var(--line), var(--shadow-sm); }
.nav.scrolled .nav-inner{ height:62px; }
.brand{ display:inline-flex; align-items:center; font-family:var(--font-display); font-weight:600; font-size:21px; letter-spacing:-0.035em; }
.brand .wm{ color: var(--ink); } .brand .wm span{ color: var(--accent); }
.nav-menu{ display:flex; align-items:center; gap:2px; }
.nav-menu a{ padding:9px 14px; border-radius:9px; font-size:14.5px; color:var(--ink-2); font-weight:500; transition: all .2s; }
.nav-menu a:hover{ color:var(--ink); background: var(--paper); box-shadow: var(--shadow-xs); }
.nav-cta{ display:flex; align-items:center; gap:12px; }
.nav-burger{ display:none; width:44px; height:44px; border-radius:12px; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:var(--paper); border:1px solid var(--line); box-shadow:var(--shadow-xs); transition: background .2s, border-color .2s; }
.nav-burger:hover{ border-color:var(--ink-3); }
.nav-burger span{ display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; transition: transform .32s var(--ease), opacity .2s; }
.nav-burger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-sheet{ position:fixed; inset:0; z-index:49; overflow-y:auto;
  background: radial-gradient(130% 60% at 85% 0%, var(--accent-tint), transparent 58%), var(--bg);
  padding: 88px var(--gutter) 30px; display:flex; flex-direction:column;
  opacity:0; pointer-events:none; transition: opacity .35s var(--ease); }
.mobile-sheet.open{ opacity:1; pointer-events:auto; }
.ms-inner{ display:flex; flex-direction:column; gap:10px; margin:auto 0; width:100%; max-width:460px; margin-inline:auto; }
.ms-nav{ display:flex; flex-direction:column; gap:9px; }
.ms-nav a{ display:flex; align-items:center; gap:14px; padding:15px 16px; border-radius: var(--r-md);
  background:var(--paper); border:1px solid var(--line); box-shadow: var(--shadow-xs);
  opacity:0; transform: translateY(14px); }
.mobile-sheet.open .ms-nav a{ animation: msrow .55s var(--ease) forwards; animation-delay: calc(var(--i)*65ms + 110ms); }
.ms-ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:none;
  background: linear-gradient(160deg, var(--accent-tint), var(--paper)); border:1px solid var(--line); color:var(--accent); }
.ms-l{ flex:1; min-width:0; display:flex; flex-direction:column; font-size:18px; font-weight:650; letter-spacing:-0.02em; color:var(--ink); }
.ms-l em{ font-style:normal; font-family:var(--font-mono); font-size:10.5px; font-weight:500; color:var(--ink-3); letter-spacing:0.1em; margin-top:3px; }
.ms-ch{ color:var(--ink-4); flex:none; transition: transform .25s var(--ease), color .2s; }
.ms-nav a:hover .ms-ch{ transform: translateX(3px); color:var(--accent); }
.ms-cta{ margin-top:16px; opacity:0; transform: translateY(14px); }
.mobile-sheet.open .ms-cta{ animation: msrow .55s var(--ease) forwards; animation-delay: 420ms; }
.ms-foot{ margin-top:20px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap; color:var(--ink-3); font-size:12.5px; opacity:0; }
.mobile-sheet.open .ms-foot{ animation: msrow .55s var(--ease) forwards; animation-delay: 500ms; }
.ms-foot span{ display:inline-flex; align-items:center; gap:6px; } .ms-foot svg{ color:var(--accent); }
@keyframes msrow{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .mobile-sheet.open .ms-nav a, .mobile-sheet.open .ms-cta, .mobile-sheet.open .ms-foot{ animation:none; opacity:1; transform:none; } }
@media (max-width: 900px){ .nav-menu{ display:none; } .nav-cta .hide-sm{ display:none; } .nav-burger{ display:flex; } }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding-top: clamp(118px,16vh,168px); padding-bottom: clamp(56px,8vw,96px); overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-bg .grid{ position:absolute; inset:0;
  background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(110% 80% at 75% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(110% 80% at 75% 0%, #000 0%, transparent 70%); }
.hero-bg .blob{ position:absolute; border-radius:50%; filter: blur(60px); opacity:.5; }
.hero-bg .b1{ width:420px; height:420px; right:-60px; top:-40px; background: radial-gradient(circle, var(--accent-tint-2), transparent 70%); }
.hero-inner{ position:relative; z-index:2; display:grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(32px,5vw,60px); align-items:center; }
.hero-copy{ max-width: 640px; }
.hero h1{ font-size: clamp(38px,5.6vw,66px); font-weight:700; line-height:1.04; letter-spacing:-0.035em; margin-top:24px; }
.hero h1 .accent{ position:relative; color: var(--accent); white-space:nowrap; }
.hero h1 .accent::after{ content:""; position:absolute; left:-2px; right:-2px; bottom:0.06em; height:0.42em; z-index:-1;
  background: linear-gradient(90deg, var(--accent-tint-2), var(--accent-tint)); border-radius:4px;
  transform: scaleX(0); transform-origin:left; animation: uline .9s var(--ease-out) .7s forwards; }
@keyframes uline{ to{ transform: scaleX(1); } }
.hero-lede{ margin-top:24px; font-size: clamp(16px,1.85vw,19px); color:var(--ink-2); max-width:44ch; line-height:1.62; }
.hero-actions{ margin-top:32px; display:flex; gap:12px; flex-wrap:wrap; }
.hero-trust{ margin-top:26px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; color:var(--ink-3); font-size:13px; }
.hero-trust .t{ display:inline-flex; align-items:center; gap:7px; }
.hero-trust .t svg{ width:15px; height:15px; color: var(--accent); }
.hero-trust .sep{ width:1px; height:13px; background: var(--line-strong); }
@media (max-width: 980px){ .hero-inner{ grid-template-columns:1fr; gap:44px; } .hero-copy{ max-width:100%; } }
@media (max-width: 600px){ .hero{ padding-top: 102px; padding-bottom:40px; } .hero-actions{ width:100%; } .hero-actions .btn{ flex:1 1 auto; } .hero-trust{ gap:12px 14px; font-size:12.5px; } }

/* ---------- HERO SIMULATOR (interactive product window) ---------- */
.sim{ position:relative; z-index:2; width:100%; max-width:480px; margin-inline:auto;
  background: var(--paper); border:1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); overflow:hidden;
  transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); transform-style:preserve-3d;
  transition: transform .5s var(--ease); }
.sim:hover{ transform: perspective(1400px) rotateY(-2deg) rotateX(1deg); }
@media (max-width: 980px){ .sim{ transform:none; } .sim:hover{ transform:none; } }
.sim-bar{ display:flex; align-items:center; justify-content:space-between; height:46px; padding:0 16px;
  background: linear-gradient(180deg, var(--dk-2), var(--dk)); color: var(--dk-ink); }
.sim-bar .dots{ display:flex; gap:7px; } .sim-bar .dots i{ width:10px; height:10px; border-radius:50%; background: oklch(1 0 0 /.18); }
.sim-bar .title{ font-family:var(--font-mono); font-size:12px; color: var(--dk-ink-2); letter-spacing:0.02em; }
.sim-bal{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px 16px; background: var(--dk); color:var(--dk-ink); border-bottom:1px solid var(--dk-line); }
.sim-bal .lab{ font-family:var(--font-mono); font-size:11.5px; color: var(--dk-ink-2); letter-spacing:0.04em; text-transform:uppercase; }
.sim-bal .amt{ display:flex; align-items:baseline; gap:6px; margin-top:4px; }
.sim-bal .amt b{ font-family: var(--font-display); font-size:34px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; }
.sim-bal .amt span{ font-size:14px; color: var(--dk-ink-2); }
.sim-bal .pass{ --pw:74px; --ph:46px; transform: rotate(-7deg); }
.sim-body{ padding:18px 18px 20px; background: var(--paper); }
.sim-hint{ font-size:12.5px; color: var(--ink-3); margin-bottom:13px; display:flex; align-items:center; gap:7px; }
.sim-hint b{ color: var(--ink-2); font-weight:600; }
.sim-tools{ display:grid; grid-template-columns: repeat(3,1fr); gap:9px; }
.sim-tool{ position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; padding:15px 8px 13px;
  border:1px solid var(--line); border-radius: var(--r-sm); background: var(--paper-2); overflow:hidden;
  transition: transform .3s var(--spring), border-color .25s, box-shadow .25s, background .25s; }
.sim-tool:hover{ transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-md); background: var(--paper); }
.sim-tool:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.sim-tool .ic{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background: var(--accent-tint); color: var(--accent); transition: transform .3s var(--spring); }
.sim-tool:hover .ic{ transform: scale(1.08) rotate(-4deg); }
.sim-tool .nm{ font-size:11.5px; font-weight:600; color: var(--ink-2); }
.sim-tool .cost{ font-family:var(--font-mono); font-size:9.5px; color: var(--ink-4); }
.sim-tool.run::after{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 50% 40%, var(--accent-tint-2), transparent 70%); animation: flash .6s var(--ease); }
@keyframes flash{ from{ opacity:1; } to{ opacity:0; } }
.sim-log{ margin-top:14px; border-top:1px dashed var(--line-strong); padding-top:12px; min-height:42px; display:flex; flex-direction:column; gap:7px; }
.sim-log .row{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink-2);
  animation: logIn .4s var(--ease); }
@keyframes logIn{ from{ opacity:0; transform: translateX(-8px);} to{ opacity:1; transform:none; } }
.sim-log .row .tick{ width:18px; height:18px; border-radius:50%; background: oklch(0.62 0.16 150); color:#fff; display:grid; place-items:center; flex:none; }
.sim-log .row .tick svg{ width:11px; height:11px; }
.sim-log .row .nm{ font-weight:600; color:var(--ink); }
.sim-log .row .mv{ margin-left:auto; font-family:var(--font-mono); font-size:11px; color: var(--accent); font-weight:600; white-space:nowrap; }
.sim-log .empty{ font-size:12.5px; color: var(--ink-4); font-family:var(--font-mono); }
.sim-foot{ display:flex; align-items:center; justify-content:space-between; padding:13px 18px; border-top:1px solid var(--line-2); background: var(--paper-2); }
.sim-foot .reset{ font-family:var(--font-mono); font-size:11.5px; color: var(--ink-3); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; transition: color .2s; }
.sim-foot .reset:hover{ color: var(--ink); }
.sim-foot .recharge{ font-size:12.5px; font-weight:600; color: var(--accent); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.sim-flyer{ position:fixed; z-index:80; pointer-events:none; }

/* ============================================================
   CATALOG — independent cards
   ============================================================ */
.catalog{ padding: clamp(72px,11vw,124px) 0; }
.cat-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px 32px; flex-wrap:wrap; margin-bottom: clamp(28px,4vw,40px); }
.cat-filter{ display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:var(--paper); border:1px solid var(--line); box-shadow:var(--shadow-xs); flex-wrap:wrap; }
.cat-filter button{ padding:9px 16px; border-radius:999px; font-size:13.5px; font-weight:600; color:var(--ink-2); display:inline-flex; align-items:center; gap:8px; transition: color .25s, background .25s; white-space:nowrap; }
.cat-filter button:hover{ color:var(--ink); }
.cat-filter button .n{ font-family:var(--font-mono); font-size:11px; color:var(--ink-4); }
.cat-filter button.active{ background:var(--ink); color:var(--bg); }
.cat-filter button.active .n{ color: oklch(1 0 0 / 0.55); }
.cat-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.cat-card{ position:relative; display:flex; flex-direction:column; padding:24px 22px 22px; min-height:236px;
  background: var(--paper); border:1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  overflow:hidden; transition: transform .4s var(--spring), box-shadow .35s var(--ease), border-color .3s; }
.cat-card::before{ content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background: radial-gradient(420px 260px at var(--mx,50%) var(--my,0%), var(--accent-tint), transparent 65%); transition: opacity .4s; }
.cat-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--accent-tint-2); }
.cat-card:hover::before{ opacity:1; }
.cat-card .top{ display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; }
.cat-card .num{ font-family:var(--font-mono); font-size:11px; color:var(--ink-4); letter-spacing:0.06em; }
.cat-badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-3); padding:4px 8px; border-radius:999px; background: var(--paper-2); border:1px solid var(--line); }
.cat-badge i{ width:6px; height:6px; border-radius:50%; background: var(--accent); box-shadow:0 0 0 0 var(--accent-glow); animation: ping 2.6s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce){ .cat-badge i{ animation:none; } }
.cat-icon{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; margin:22px 0 auto;
  background: linear-gradient(160deg, var(--accent-tint), var(--paper)); border:1px solid var(--line);
  color:var(--ink); position:relative; z-index:1; transition: transform .4s var(--spring), color .3s, border-color .3s; }
.cat-card:hover .cat-icon{ transform: translateY(-2px) rotate(-5deg) scale(1.05); color: var(--accent); border-color: var(--accent-tint-2); }
.cat-icon svg{ width:23px; height:23px; }
.cat-card h3{ font-size:17.5px; font-weight:650; margin-top:16px; position:relative; z-index:1; letter-spacing:-0.01em; }
.cat-card p{ font-size:13px; color:var(--ink-3); margin-top:6px; line-height:1.5; position:relative; z-index:1; }
.cat-card .arrow{ position:absolute; right:20px; bottom:20px; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background: var(--ink); color: var(--bg); opacity:0; transform: translateX(-6px) scale(.8); transition: all .35s var(--spring); z-index:1; }
.cat-card:hover .arrow{ opacity:1; transform:none; }
.cat-card .arrow svg{ width:15px; height:15px; }
.cat-meta{ position:relative; z-index:1; margin-top:16px; padding-top:13px; border-top:1px solid var(--line-2); display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; color:var(--ink-3); letter-spacing:0.01em; }
.cat-meta .pin{ width:7px; height:7px; border-radius:2px; background:var(--accent); flex:none; }
.cat-badge.free{ color:var(--free); background: var(--free-tint); border-color: var(--free-tint-2); }
.cat-badge.free i{ background:var(--free); box-shadow:none; animation:none; }
.cat-card.free .cat-icon{ background: linear-gradient(160deg, var(--free-tint), var(--paper)); }
.cat-card.free:hover{ border-color: var(--free-tint-2); }
.cat-card.free:hover::before{ background: radial-gradient(420px 260px at var(--mx,50%) var(--my,0%), var(--free-tint), transparent 65%); }
.cat-card.free:hover .cat-icon{ color: var(--free); border-color: var(--free-tint-2); }
.cat-card.free .cat-meta .pin{ background:var(--free); border-radius:50%; }
.cat-card.free .arrow{ background: var(--free); }
/* expansion card */
.cat-card.more{ background: linear-gradient(160deg, var(--accent-tint), var(--paper-2)); border-style:dashed; border-color: var(--line-strong); justify-content:center; align-items:flex-start; }
.cat-card.more .cat-icon{ background: var(--paper); }
.cat-foot{ margin-top:26px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:22px 26px; border-radius: var(--r-md); background: var(--dk); color: var(--dk-ink); box-shadow: var(--shadow-md); }
.cat-foot p{ font-size:14.5px; color: var(--dk-ink-2); } .cat-foot b{ color: var(--dk-ink); font-weight:600; }
@media (max-width:1180px){ .cat-grid{ grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width:920px){ .cat-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){
  .cat-grid{ grid-template-columns:1fr; gap:10px; }
  .cat-card{ min-height:auto; flex-flow:row wrap; align-items:center; gap:0 15px; padding:15px 16px; }
  .cat-card .top{ order:1; width:100%; margin-bottom:11px; }
  .cat-icon{ order:2; margin:0; width:44px; height:44px; border-radius:12px; }
  .cat-card:hover .cat-icon{ transform:none; }
  .cat-body{ order:3; flex:1 1 0; min-width:0; }
  .cat-card h3{ margin-top:0; font-size:16.5px; }
  .cat-card p{ margin-top:3px; }
  .cat-body .cat-meta{ margin-top:9px; padding-top:0; border-top:none; }
  .cat-card .arrow{ display:none; }
  .cat-card.more{ align-items:center; }
  .cat-foot{ flex-direction:column; align-items:flex-start; padding:20px; }
  .cat-foot .btn{ width:100%; }
}

/* ============================================================
   HOW IT WORKS — connected steps
   ============================================================ */
.how{ padding: clamp(72px,11vw,124px) 0; background: var(--bg-2); border-block:1px solid var(--line); }
.steps{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2.2vw,24px); }
.step{ position:relative; padding:26px 24px 24px; background: var(--paper); border:1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow:hidden; transition: transform .45s var(--spring), box-shadow .35s var(--ease), border-color .3s; }
.step:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--accent-tint-2); }
.step .bignum{ position:absolute; right:8px; top:-30px; font-family: var(--font-display); font-size:120px; font-weight:600; line-height:1; color: var(--accent); opacity:.07; pointer-events:none; font-variant-numeric:tabular-nums; }
.step-tag{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:0.1em; color:var(--accent); padding:6px 12px; border-radius:999px; background:var(--accent-tint); border:1px solid var(--accent-tint-2); position:relative; z-index:1; }
.step-tag i{ width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; }
.step h3{ font-size:20px; font-weight:650; margin-top:18px; display:flex; align-items:center; gap:11px; position:relative; z-index:1; }
.step h3 .si{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background: linear-gradient(160deg, var(--accent-tint), var(--paper)); border:1px solid var(--line); color:var(--accent); flex:none; }
.step h3 .si svg{ width:18px; height:18px; }
.step p{ font-size:14px; color:var(--ink-2); margin-top:10px; line-height:1.55; position:relative; z-index:1; }
.step-card{ margin-top:20px; padding:15px; border-radius: var(--r-md); background: var(--paper-2); border:1px solid var(--line); min-height:80px; display:flex; align-items:center; position:relative; z-index:1; }
.how-note{ margin-top: clamp(34px,5vw,52px); display:flex; align-items:center; gap:10px; justify-content:center; text-align:center; font-size: clamp(13.5px,1.5vw,15px); color: var(--ink-2); padding:16px 22px; border-radius:999px; background: var(--paper); border:1px solid var(--line); box-shadow: var(--shadow-xs); max-width: max-content; margin-inline:auto; }
.how-note svg{ color: var(--free); flex:none; } .how-note b{ color: var(--ink); font-weight:650; }
@media (max-width:560px){ .how-note{ border-radius:14px; text-align:left; align-items:flex-start; } }
@media (max-width:820px){ .steps{ grid-template-columns:1fr; gap:14px; } .step .bignum{ font-size:104px; top:-22px; } }

/* ============================================================
   PRICING + CALCULATOR
   ============================================================ */
.pricing{ padding: clamp(72px,11vw,124px) 0; }
.price-layout{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(26px,4vw,48px); align-items:start; }
.calc{ position:sticky; top:92px; border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow-lg); border:1px solid var(--line); background: var(--paper); }
.calc-top{ background: linear-gradient(160deg, var(--dk-2), var(--dk)); color: var(--dk-ink); padding:22px 24px 24px; position:relative; overflow:hidden; }
.calc-top .glow{ position:absolute; width:260px; height:260px; right:-60px; top:-100px; border-radius:50%; background: radial-gradient(circle, var(--accent-glow), transparent 70%); }
.calc-top .lab{ display:flex; align-items:center; justify-content:space-between; position:relative; }
.calc-top .lab .mono{ color: var(--dk-ink-2); }
.calc-top .live{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11px; color: var(--dk-ink-2); }
.calc-top .live i{ width:7px; height:7px; border-radius:50%; background: oklch(0.72 0.16 150); animation: blink 1.5s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:.3; } }
.calc-read{ position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-top:18px; }
.calc-read .big{ font-family:var(--font-display); font-size: clamp(54px,9vw,82px); font-weight:600; line-height:.82; letter-spacing:-0.04em; font-variant-numeric:tabular-nums; }
.calc-read .big small{ font-size:18px; font-weight:500; color: var(--dk-ink-2); margin-left:8px; letter-spacing:0; }
.calc-read .won{ text-align:right; }
.calc-read .won .amt{ font-family:var(--font-mono); font-size: clamp(20px,3vw,26px); font-weight:600; font-variant-numeric:tabular-nums; }
.calc-read .won .vat{ font-family:var(--font-mono); font-size:11px; color: var(--dk-ink-2); }
.calc-body{ padding:24px; }
.calc-runs{ font-size:14px; color:var(--ink-2); padding:13px 15px; background: var(--accent-tint); border-radius: var(--r-sm); border:1px solid var(--accent-tint-2); display:flex; align-items:center; gap:10px; }
.calc-runs b{ color: var(--accent); font-weight:700; font-family:var(--font-mono); }
.slider-wrap{ margin-top:24px; }
.slider-meta{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11px; color:var(--ink-3); margin-bottom:12px; }
input[type=range].tk{ -webkit-appearance:none; appearance:none; width:100%; height:30px; background:transparent; cursor:pointer; }
input[type=range].tk::-webkit-slider-runnable-track{ height:8px; border-radius:999px; background: linear-gradient(90deg, var(--accent) var(--fill,30%), var(--line) var(--fill,30%)); }
input[type=range].tk::-moz-range-track{ height:8px; border-radius:999px; background: var(--line); }
input[type=range].tk::-moz-range-progress{ height:8px; border-radius:999px; background: var(--accent); }
input[type=range].tk::-webkit-slider-thumb{ -webkit-appearance:none; width:28px; height:28px; margin-top:-10px; border-radius:50%; background:var(--paper); border:3px solid var(--accent); box-shadow: var(--shadow-md); transition: transform .15s var(--spring); }
input[type=range].tk::-webkit-slider-thumb:hover{ transform: scale(1.14); }
input[type=range].tk:active::-webkit-slider-thumb{ transform: scale(1.22); }
input[type=range].tk::-moz-range-thumb{ width:24px; height:24px; border-radius:50%; background:var(--paper); border:3px solid var(--accent); box-shadow: var(--shadow-md); }
.calc-quick{ margin-top:18px; display:flex; gap:8px; flex-wrap:wrap; }
.calc-quick button{ font-family:var(--font-mono); font-size:12.5px; padding:8px 14px; border-radius:999px; border:1px solid var(--line-strong); color:var(--ink-2); transition: all .2s var(--ease); }
.calc-quick button:hover{ border-color:var(--ink-3); color:var(--ink); transform: translateY(-1px); }
.calc-quick button.active{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.calc-note{ margin-top:18px; display:flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); }

/* packages */
.pkgs{ display:grid; gap:14px; }
.pkg{ position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px;
  padding:22px 24px; border:1px solid var(--line); border-radius: var(--r-md); background:var(--paper); box-shadow: var(--shadow-sm);
  transition: transform .35s var(--spring), border-color .3s, box-shadow .3s; }
.pkg:hover{ transform: translateX(5px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.pkg.pop{ border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-md); }
.pkg-tag{ position:absolute; top:-11px; left:24px; white-space:nowrap; font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; background: linear-gradient(180deg,var(--accent-2),var(--accent)); color:var(--accent-ink); padding:4px 10px; border-radius:7px; box-shadow: var(--shadow-sm); }
.pkg .pass{ --pw:64px; --ph:40px; }
.pkg-name{ font-size:16.5px; font-weight:650; } .pkg-sub{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); margin-top:3px; }
.pkg-price{ text-align:right; } .pkg-price .w{ font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }
.pkg-price .per{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); margin-top:3px; } .pkg-price .per b{ color: var(--accent); }
.price-notes{ margin-top:18px; display:flex; gap:18px; flex-wrap:wrap; }
.price-notes span{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); }
.price-notes span::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); }
@media (max-width:560px){
  .pkg{ grid-template-columns: 1fr auto; gap:6px 14px; padding:20px 20px 20px 20px; }
  .pkg .pass{ grid-column:1 / -1; justify-self:start; margin-bottom:8px; }
  .pkg-price{ align-self:center; }
}
@media (max-width:920px){ .price-layout{ grid-template-columns:1fr; } .calc{ position:static; } }

/* ============================================================
   VALUES (cards)
   ============================================================ */
.values{ padding: clamp(72px,11vw,124px) 0; }
.val-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.val{ background:var(--paper); border:1px solid var(--line); border-radius: var(--r-md); padding:30px 26px 32px; box-shadow: var(--shadow-sm); transition: transform .4s var(--spring), box-shadow .35s; }
.val:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.val .vi{ width:50px; height:50px; border-radius:14px; display:grid; place-items:center; background: linear-gradient(160deg, var(--accent-tint), var(--paper)); border:1px solid var(--line); color:var(--accent); margin-bottom:22px; }
.val .vi svg{ width:24px; height:24px; }
.val h3{ font-size:20px; font-weight:650; } .val p{ font-size:14.5px; color:var(--ink-2); margin-top:11px; line-height:1.6; }
.val .vk{ margin-top:20px; font-family:var(--font-mono); font-size:11px; color:var(--ink-3); letter-spacing:0.05em; padding-top:14px; border-top:1px solid var(--line-2); }
@media (max-width:820px){ .val-grid{ grid-template-columns:1fr; } }

/* trust — dark slab */
.trust{ padding: clamp(56px,8vw,86px) 0; }
.trust-slab{ background: linear-gradient(160deg, var(--dk-2), var(--dk)); border-radius: var(--r-lg); padding: clamp(36px,5vw,56px) clamp(28px,4vw,52px); box-shadow: var(--shadow-lg); position:relative; overflow:hidden; }
.trust-slab .grid{ position:absolute; inset:0; opacity:.4; background-image: linear-gradient(oklch(1 0 0/.05) 1px,transparent 1px), linear-gradient(90deg,oklch(1 0 0/.05) 1px,transparent 1px); background-size:44px 44px; -webkit-mask-image: radial-gradient(80% 90% at 50% 0,#000,transparent 75%); mask-image: radial-gradient(80% 90% at 50% 0,#000,transparent 75%); }
.trust-grid{ position:relative; display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(20px,3vw,40px); }
.stat{ color: var(--dk-ink); }
.stat .sn{ font-family:var(--font-display); font-size: clamp(38px,5.4vw,58px); font-weight:600; line-height:.9; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; }
.stat .sn em{ font-style:normal; color: var(--accent-2); }
.stat .sl{ font-size:13.5px; color: var(--dk-ink-2); margin-top:12px; }
@media (max-width:920px){ .trust-grid{ grid-template-columns: repeat(2,1fr); gap:30px 24px; } }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ padding: clamp(72px,11vw,124px) 0; background: var(--bg-2); border-block:1px solid var(--line); }
.faq-layout{ display:grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(28px,5vw,60px); align-items:start; }
.faq-side h2{ font-size: clamp(28px,4vw,44px); font-weight:680; line-height:1.05; }
.faq-side p{ color:var(--ink-2); margin-top:16px; font-size:15px; line-height:1.6; }
.faq-side .btn{ margin-top:24px; }
.faq-list{ display:flex; flex-direction:column; gap:10px; }
.faq-item{ background:var(--paper); border:1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-xs); overflow:hidden; transition: border-color .3s, box-shadow .3s; }
.faq-item.open{ border-color: var(--accent-tint-2); box-shadow: var(--shadow-sm); }
.faq-q{ width:100%; text-align:left; display:flex; align-items:center; gap:16px; padding:20px 22px; font-size: clamp(15px,1.7vw,17.5px); font-weight:600; letter-spacing:-0.01em; }
.faq-q .qi{ font-family:var(--font-mono); font-size:12px; color:var(--accent); flex:none; }
.faq-q .qt{ flex:1; }
.faq-sign{ flex:none; width:24px; height:24px; border-radius:7px; background: var(--paper-2); border:1px solid var(--line); position:relative; transition: background .3s, transform .3s var(--spring); }
.faq-item.open .faq-sign{ background: var(--accent); border-color: var(--accent); transform: rotate(180deg); }
.faq-sign::before,.faq-sign::after{ content:""; position:absolute; background:var(--ink-2); border-radius:2px; transition: transform .35s var(--ease), background .3s; }
.faq-item.open .faq-sign::before,.faq-item.open .faq-sign::after{ background: var(--accent-ink); }
.faq-sign::before{ left:6px; right:6px; top:11px; height:2px; }
.faq-sign::after{ top:6px; bottom:6px; left:11px; width:2px; }
.faq-item.open .faq-sign::after{ transform: scaleY(0); }
.faq-a{ overflow:hidden; height:0; transition: height .4s var(--ease); }
.faq-a-inner{ padding:0 22px 22px 50px; color:var(--ink-2); font-size:14.5px; line-height:1.66; max-width:62ch; } .faq-a-inner b{ color:var(--ink); font-weight:600; }
@media (max-width:860px){ .faq-layout{ grid-template-columns:1fr; } }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final{ padding: clamp(44px,6vw,76px) 0 clamp(76px,10vw,120px); }
.final-card{ position:relative; overflow:hidden; border-radius:28px; padding: clamp(48px,8vw,100px) clamp(28px,6vw,80px);
  background: linear-gradient(165deg, var(--dk-2), var(--dk)); color: var(--dk-ink); text-align:center; box-shadow: var(--shadow-lg); }
.final-card .grid{ position:absolute; inset:0; opacity:.5; pointer-events:none; background-image: linear-gradient(oklch(1 0 0/.05) 1px,transparent 1px), linear-gradient(90deg,oklch(1 0 0/.05) 1px,transparent 1px); background-size:42px 42px; -webkit-mask-image: radial-gradient(75% 75% at 50% 50%,#000,transparent 75%); mask-image: radial-gradient(75% 75% at 50% 50%,#000,transparent 75%); }
.final-card .passes{ position:absolute; inset:0; pointer-events:none; }
.final-card .passes .pass{ position:absolute; opacity:.85; }
.final-card .kicker{ position:relative; font-family:var(--font-mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color: var(--accent-2); }
.final-card h2{ position:relative; font-size: clamp(30px,5.4vw,58px); font-weight:700; line-height:1.02; margin-top:20px; }
.final-card p{ position:relative; margin:20px auto 0; max-width:48ch; color: var(--dk-ink-2); font-size: clamp(15px,1.8vw,18px); }
.final-card .btn{ position:relative; margin-top:36px; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ border-top:1px solid var(--line); padding: clamp(56px,8vw,84px) 0 46px; }
.foot-top{ display:grid; grid-template-columns: 1.5fr 1fr 1fr; gap:40px; padding-bottom:46px; border-bottom:1px solid var(--line-2); }
.foot-about .brand{ font-size:23px; margin-bottom:18px; } .foot-about p{ color:var(--ink-2); font-size:14px; line-height:1.65; max-width:42ch; }
.foot-col h4{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:16px; }
.foot-col a{ display:block; padding:7px 0; color:var(--ink-2); font-size:14px; transition: color .2s, transform .2s; }
.foot-col a:hover{ color:var(--ink); transform: translateX(3px); }
.legal{ padding-top:32px; }
.legal-grid{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:6px 40px; }
.legal-row{ display:flex; gap:10px; font-size:12.5px; color:var(--ink-3); line-height:1.6; font-family:var(--font-mono); }
.legal-row b{ color:var(--ink-2); font-weight:500; flex:none; min-width:130px; white-space:nowrap; }
.legal-row a{ color:var(--accent); word-break:break-all; }
.legal-bottom{ margin-top:28px; padding-top:24px; border-top:1px solid var(--line-2); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.legal-bottom .cr{ font-family:var(--font-mono); font-size:12px; color:var(--ink-3); }
.legal-bottom .links{ display:flex; gap:22px; } .legal-bottom .links a{ font-size:13px; color:var(--ink-2); } .legal-bottom .links a:hover{ color:var(--ink); }
@media (max-width:820px){ .foot-top{ grid-template-columns:1fr; gap:32px; } .legal-grid{ grid-template-columns:1fr; } .legal-row b{ min-width:116px; } }

/* toast */
.toast{ position:fixed; left:50%; bottom:28px; transform: translateX(-50%); z-index:200; display:flex; align-items:center; gap:12px;
  padding:14px 20px; border-radius:999px; background: var(--dk); color: var(--dk-ink); box-shadow: var(--shadow-lg);
  font-size:14px; font-weight:500; animation: toastIn .45s var(--spring); }
@keyframes toastIn{ from{ opacity:0; transform: translate(-50%,14px);} to{ opacity:1; transform: translate(-50%,0);} }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }