/* T.B BOOSTER — site styles One stylesheet for every page. No framework, no build step: this repo deploys straight to GitHub Pages, so anything that needs compiling is a liability. */ :root { /* Pulled from the mascot itself (assets/anime_girl_hero.png) rather than picked in the abstract: --brand is her hoodie's sage green, darkened just enough to clear 4.5:1 on the surface tone; the neutrals lean the same cool gray-green as her hair instead of the earlier warm cream/gold, so the character and the chrome around her read as one palette. */ --ink: #1c2320; --ink-soft: #4d5650; --ink-faint: #7c877e; --line: #dde5df; --line-strong: #c7d2cb; --surface: #f8faf8; --surface-alt: #eef3ef; --surface-sunken: #e2ebe4; --brand: #4f6a5c; --brand-dark: #3d5346; --brand-wash: #e6efe8; --positive: #3a7a5e; --warn-bg: #fbf1da; --warn-line: #e4c98a; --warn-ink: #7a5a10; --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(20, 26, 23, .05), 0 8px 24px -18px rgba(20, 26, 23, .3); --max: 1120px; /* One number drives the vertical rhythm. Sections used to be 72/76/76px apart for no reason anyone could state, which reads as drift rather than as a decision. */ --section: 88px; --font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', '맑은 고딕', Roboto, sans-serif; --mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, monospace; } @media (prefers-color-scheme: dark) { :root { --ink: #e8ede9; --ink-soft: #b7c2ba; --ink-faint: #85918a; --line: #2a332e; --line-strong: #3a453e; --surface: #121613; --surface-alt: #0d100e; --surface-sunken: #1a201c; --brand: #8fb09e; --brand-dark: #a8c7b6; --brand-wash: #1c2620; --positive: #6fbf94; --warn-bg: #2c2414; --warn-line: #5c4a1c; --warn-ink: #e5c982; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 34px -20px rgba(0, 0, 0, .8); } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 700; text-wrap: balance; } /* Tightened tracking is a display-size correction. Applying it to a 1rem heading just makes the letters touch. */ h1, h2 { letter-spacing: -.025em; } h3, h4 { letter-spacing: -.01em; } h1 { font-size: clamp(2.05rem, 1.3rem + 2.8vw, 3.25rem); } h2 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem); } h3 { font-size: 1.1rem; } p { margin: 0 0 1em; text-wrap: pretty; } /* An in-page link under a sticky header lands with its target hidden behind the bar. */ [id] { scroll-margin-top: 84px; } ::selection { background: var(--brand-wash); color: var(--ink); } /* Keyboard focus was styled on form fields only, so tabbing through the nav showed whatever the browser defaulted to -- often nothing visible against this palette. */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; } .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; } .narrow { max-width: 760px; } /* ---------- language switching ---------------------------------------- */ /* Both languages ship in the markup; the attribute picks one. No routing, no duplicated pages to keep in sync, and search engines still see the Korean copy by default. */ html[data-lang="ko"] [lang="en"] { display: none; } html[data-lang="en"] [lang="ko"] { display: none; } /* ---------- header ----------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(10px); /* Transparent, not absent: the border still occupies its 1px so nothing shifts when it appears. */ border-bottom: 1px solid transparent; transition: border-color .2s ease; } .site-header.is-scrolled { border-bottom-color: var(--line); } /* On the home page only, the header starts fully transparent so the hero's own art and texture show through behind it -- everywhere else the page's first section is plain text, which needs the header's usual solid/blurred band from the first pixel. */ body.home .site-header { background: transparent; backdrop-filter: none; border-bottom-color: transparent; } body.home .site-header.is-scrolled { background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(10px); border-bottom-color: var(--line); } .site-header .wrap { display: flex; align-items: center; gap: 28px; height: 64px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); flex-shrink: 0; } .brand:hover { text-decoration: none; } .brand svg { width: 26px; height: 26px; } .nav { display: flex; gap: 24px; margin-left: auto; align-items: center; } .nav a { color: var(--ink-soft); font-size: .94rem; font-weight: 500; } .nav a { position: relative; padding: 4px 0; } .nav a:hover, .nav a[aria-current="page"] { color: var(--ink); text-decoration: none; } .nav a[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--brand); border-radius: 2px; } .lang-toggle { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; font-size: .78rem; font-weight: 600; } .lang-toggle button { border: 0; background: transparent; color: var(--ink-faint); padding: 5px 11px; cursor: pointer; font: inherit; } .lang-toggle button[aria-pressed="true"] { background: var(--brand); color: #fff; } .menu-toggle { display: none; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); border-radius: var(--radius-sm); padding: 7px 10px; cursor: pointer; } /* ---------- buttons ----------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 22px; border-radius: var(--radius-sm); font-weight: 600; font-size: .95rem; border: 1px solid transparent; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .1s ease; text-align: center; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--brand); color: #fff; } .btn-primary:hover { background: var(--brand-dark); } .btn-ghost { border-color: var(--line-strong); color: var(--ink); background: var(--surface); } .btn-ghost:hover { border-color: var(--brand); color: var(--brand); } .btn-sm { min-height: 34px; padding: 6px 14px; font-size: .87rem; } .btn-block { width: 100%; } .btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; } /* ---------- hero -------------------------------------------------------- */ .hero-v2 { position: relative; overflow: hidden; background: var(--surface-alt); border-bottom: 1px solid var(--line); margin-top: -64px; /* pulls the canvas up under the sticky header on body.home */ padding: 160px 0 72px; min-height: 66vh; /* Two stacked children (the grid, then the stats strip) need column direction -- row is the flex default, which was laying the stats strip out beside the grid instead of under it. justify-content (not align-items) does the bottom-packing once the axis is vertical. */ display: flex; flex-direction: column; justify-content: flex-end; } /* Paper grain: an SVG turbulence filter costs one small data URI and no extra request. */ .hero-v2::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); opacity: .5; mix-blend-mode: multiply; pointer-events: none; } /* Graph paper under the illustration only, fading toward the text so no line crosses a sentence. */ .hero-v2::after { content: ''; position: absolute; inset: 0 0 0 42%; background-image: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 84px), repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 84px); -webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 22%, #000 88%, transparent); opacity: .8; pointer-events: none; } .hero-v2 .wrap { position: relative; z-index: 2; } .hero-v2-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 40px; align-items: end; } .hero-v2-grid > :first-child { padding-bottom: 84px; } .hero-v2 h1 { /* Korean has no in-word spaces but browsers will still break anywhere without this. */ word-break: keep-all; font-size: clamp(2.1rem, 1.2rem + 2.6vw, 3.4rem); line-height: 1.16; letter-spacing: -.035em; margin-bottom: .35em; } .hero-v2 .kicker { font-size: .82rem; font-weight: 700; color: var(--brand); margin-bottom: 22px; } .hero-v2 .lead { font-size: 1.02rem; color: var(--ink-soft); max-width: 40ch; word-break: keep-all; } /* Square corners and tracked-out labels read as a stamp rather than a chip. Latin only -- Korean has no uppercase to track out. */ .btn-stamp { border-radius: 0; padding: 15px 26px; font-size: .86rem; font-weight: 700; } .btn-stamp[lang="en"] { letter-spacing: .12em; text-transform: uppercase; } /* The illustration bleeds off the right edge and sits on the section's bottom edge. */ .hero-v2-art { position: relative; justify-self: end; align-self: end; width: 150%; margin: 0 -6% -1px auto; } /* Body and hair are two exports of the same picture (anime_girl_hero.png and ...-hair.png, split by hue) sharing the identical 700x869 canvas, so stacking them at width:100% keeps every pixel aligned -- only the hair layer gets its own transform. */ .hero-v2-art img { width: 100%; max-width: none; height: auto; display: block; } .hero-v2-art .layer-hair { position: absolute; inset: 0; /* Anchored near the scalp, not the image centre -- rotating around that point swings the tips more than the roots, the way real hair actually moves, with no per-strand keyframing. */ transform-origin: 51% 9%; animation: hair-sway 6s ease-in-out infinite; } @keyframes hair-sway { 0% { transform: rotate(-2.4deg) translateX(-4px); } 30% { transform: rotate(1.8deg) translateX(3px); } 55% { transform: rotate(3.4deg) translateX(5px); } 80% { transform: rotate(-0.5deg) translateX(-2px); } 100% { transform: rotate(-2.4deg) translateX(-4px); } } /* Loose pixels lifting off the artwork. Squares, not circles: they read as pieces of the same image, not generic floating dots. */ .pixel { position: absolute; background: var(--brand); opacity: 0; animation: lift var(--dur, 9s) linear infinite; animation-delay: var(--delay, 0s); pointer-events: none; } @keyframes lift { 0% { opacity: 0; transform: translate3d(0, 10px, 0); } 15% { opacity: .55; } 70% { opacity: .35; } 100% { opacity: 0; transform: translate3d(26px, -120px, 0); } } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .hero-note { font-size: .84rem; color: var(--ink-faint); margin-top: 16px; } /* The numbers used to sit in a floating card tucked under the illustration, aligned to nothing and clipping the artwork. As a full-width strip they line up with the headline instead. */ .hero-stats { margin-top: 48px; } .hero-card { border-top: 1px solid var(--line-strong); padding-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 32px; max-width: 640px; } .hero-card .unit { font-size: .6em; font-weight: 600; color: var(--ink-faint); } .hero-stats .hero-note { margin-top: 14px; } .hero-card .k { font-size: .8rem; color: var(--ink-faint); } .hero-card .v { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } /* ---------- sections ---------------------------------------------------- */ .section { padding: var(--section) 0; } .section-alt { background: var(--surface-alt); border-block: 1px solid var(--line); } .section-head { max-width: 60ch; margin-bottom: 44px; } /* A page title and its standfirst. Padding above only, so the first real section below sets its own distance instead of the two stacking into a void. */ .page-head { padding: 64px 0 0; } .page-head .lead { color: var(--ink-soft); font-size: 1.08rem; margin-bottom: 0; } .section-head p { color: var(--ink-soft); font-size: 1.03rem; margin-bottom: 0; } .grid { display: grid; gap: 18px; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; } .card h3 { margin-bottom: .4em; } /* Three short paragraphs in columns. Boxing them would claim they are separate objects. */ .summary h3 { margin-bottom: .3em; } .summary p { color: var(--ink-soft); font-size: .94rem; margin-bottom: 0; } .card p { color: var(--ink-soft); font-size: .94rem; margin-bottom: 0; } .card .icon { color: var(--ink-faint); margin-bottom: 14px; } .card .icon svg { width: 22px; height: 22px; } /* ---------- steps ------------------------------------------------------- */ .steps { counter-reset: step; display: grid; gap: 4px; } .step { display: grid; grid-template-columns: 34px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); } .step:first-child { border-top: 0; } .step::before { counter-increment: step; content: counter(step); width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-wash); color: var(--brand); font-weight: 700; font-size: .86rem; } .step h3 { margin-bottom: .2em; } .step p { color: var(--ink-soft); margin: 0; font-size: .94rem; } /* ---------- pricing ----------------------------------------------------- */ .plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; max-width: 800px; margin: 0 auto; } .plan { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; background: var(--surface); } /* Recommended plan: a heavier border and a brand-coloured name. The old version stacked a coloured border, a drop shadow and a floating pill that repeated the plan's own name. */ .plan.featured { border-color: var(--brand); border-width: 2px; padding: 27px; } .plan.featured .plan-name { color: var(--brand); } .plan .plan-name { font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); } .plan .plan-price { font-size: 2.15rem; font-weight: 700; letter-spacing: -.035em; margin: 8px 0 2px; font-variant-numeric: tabular-nums; } .plan .plan-period { color: var(--ink-faint); font-size: .88rem; margin-bottom: 22px; } .plan ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 9px; } .plan li { padding-left: 26px; position: relative; font-size: .94rem; color: var(--ink-soft); } .plan li::before { content: ''; position: absolute; left: 0; top: .52em; width: 15px; height: 8px; border-left: 2px solid var(--positive); border-bottom: 2px solid var(--positive); transform: rotate(-45deg); } .plan li.off { color: var(--ink-faint); } .plan li.off::before { border-color: var(--line-strong); transform: none; height: 0; top: .72em; width: 12px; border-left: 0; } /* ---------- faq --------------------------------------------------------- */ .faq { display: grid; gap: 0; } .faq details { border-top: 1px solid var(--line); padding: 4px 0; } .faq details:last-child { border-bottom: 1px solid var(--line); } .faq summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; font-weight: 600; position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ''; position: absolute; right: 8px; top: 26px; width: 9px; height: 9px; border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint); transform: rotate(45deg); transition: transform .18s ease; } .faq details[open] summary::after { transform: rotate(-135deg); } .faq .answer { padding: 0 8px 20px 0; color: var(--ink-soft); font-size: .95rem; } .faq .answer > :last-child { margin-bottom: 0; } /* ---------- misc blocks -------------------------------------------------- */ .callout { border: 1px solid var(--warn-line); background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--radius-sm); padding: 16px 18px; font-size: .92rem; } .callout > :last-child { margin-bottom: 0; } .callout strong { color: inherit; } .note { border: 1px solid var(--line); background: var(--surface-sunken); border-radius: var(--radius-sm); padding: 16px 18px; font-size: .92rem; color: var(--ink-soft); } .note > :last-child { margin-bottom: 0; } code, kbd { font-family: var(--mono); font-size: .88em; background: var(--surface-sunken); padding: 2px 6px; border-radius: 5px; overflow-wrap: anywhere; } /* A 
 keeps its content on one line, and on a phone that silently widens the whole page even
   though the block itself measures 100%. Let long commands and file paths wrap instead. */
pre { margin: 0 0 1.2em; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }

.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; min-width: 460px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; color: var(--ink-faint); font-size: .86rem; white-space: nowrap; }

.cta { text-align: center; padding: var(--section) 0; }
.cta h2 { margin-bottom: .3em; }
.cta p { color: var(--ink-soft); }
.cta .hero-actions { justify-content: center; }

/* ---------- legal / doc pages -------------------------------------------- */
.doc { padding: 64px 0 80px; }
.doc h1 { margin-bottom: .2em; }
.doc .updated { color: var(--ink-faint); font-size: .88rem; margin-bottom: 40px; }
.doc h2 { font-size: 1.22rem; margin-top: 2.2em; }
.doc h3 { font-size: 1rem; margin-top: 1.6em; }
.doc ol, .doc ul { padding-left: 1.3em; color: var(--ink-soft); }
.doc li { margin-bottom: .5em; }
.doc p { color: var(--ink-soft); }
.doc .fill { background: var(--warn-bg); border-bottom: 1px dashed var(--warn-line); color: var(--warn-ink); padding: 0 4px; font-weight: 600; }

/* ---------- checkout ------------------------------------------------------ */
.checkout { max-width: 560px; margin: 0 auto; }
.order-summary { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 24px; background: var(--surface-alt); }
.order-row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: .95rem; }
.order-row.total { border-top: 1px solid var(--line-strong); margin-top: 10px; padding-top: 14px; font-weight: 700; font-size: 1.06rem; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 6px; }
.field input[type="email"], .field input[type="text"] {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--surface);
  color: var(--ink);
}
.field input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.field .hint { font-size: .82rem; color: var(--ink-faint); margin-top: 6px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .89rem; color: var(--ink-soft); margin-bottom: 20px; }
.consent input { margin-top: .35em; flex-shrink: 0; }

.license-key {
  font-family: var(--mono);
  font-size: .82rem;
  line-height: 1.7;
  word-break: break-all;
  background: var(--surface-sunken);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  user-select: all;
}

/* ---------- bank transfer (무통장입금) -------------------------------------- */
.method-head { margin-bottom: 18px; }
.method-head h2 { font-size: 1.15rem; margin-bottom: .35em; }
.method-head p { color: var(--ink-soft); font-size: .92rem; margin-bottom: 0; }

.deposit-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px 4px;
  margin: 20px 0;
  background: var(--surface-alt);
}
.deposit-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.deposit-row:first-child { border-top: 0; }
.deposit-label { font-size: .86rem; color: var(--ink-faint); }
.deposit-value { font-weight: 600; text-align: right; }
.deposit-code-wrap { display: flex; align-items: center; gap: 10px; }
.deposit-code {
  font-family: var(--mono);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--brand-dark);
  user-select: all;
}
.deposit-amount {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.deposit-amount-note { margin: 16px 0; }
.deposit-countdown {
  text-align: center;
  font-size: .92rem;
  color: var(--ink-soft);
  padding: 14px 0;
  margin: 0 -22px;
  border-top: 1px solid var(--line);
}
.deposit-countdown span[id] { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }

.deposit-status { margin-top: 18px; }
.deposit-status p { font-size: .92rem; }
.deposit-status .btn { margin-top: 4px; }
.deposit-success { border-color: var(--brand); background: var(--brand-wash); color: var(--ink); }

.deposit-fallback-note {
  font-size: .84rem;
  color: var(--ink-faint);
  margin: 18px 0 0;
  text-align: center;
}

.method-divider[hidden] {
  display: none;
}
.method-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 36px 0;
  color: var(--ink-faint);
  font-size: .84rem;
}
.method-divider::before, .method-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ---------- footer -------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); background: var(--surface-alt); padding: 52px 0 40px; font-size: .9rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; margin-bottom: 36px; }
.footer-grid h4 { font-size: .84rem; font-weight: 600; color: var(--ink-faint); margin-bottom: 12px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-grid a { color: var(--ink-soft); }
.footer-grid a:hover { color: var(--brand); }
.footer-tagline { color: var(--ink-soft); max-width: 34ch; margin: 12px 0 0; }
/* Korean e-commerce law requires the seller's registration details to be published, but nobody
   comes here to read them — so they stay in the DOM (crawlable, one click away) while the footer
   shows only a quiet toggle. */
.biz-info { border-top: 1px solid var(--line); padding-top: 22px; color: var(--ink-faint); font-size: .82rem; line-height: 1.9; }
.biz-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; }
.biz-toggle summary {
  cursor: pointer;
  list-style: none;
  color: var(--ink-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.biz-toggle summary::-webkit-details-marker { display: none; }
.biz-toggle summary:hover { color: var(--ink-soft); }
.biz-toggle[open] summary { margin-bottom: 8px; }
.biz-info dl { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; }
.biz-info dt { font-weight: 600; }
.biz-info dd { margin: 0 12px 0 0; }
.biz-info .todo { background: var(--warn-bg); color: var(--warn-ink); padding: 0 5px; border-radius: 4px; font-weight: 600; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- responsive ---------------------------------------------------- */
@media (max-width: 900px) {
  .hero-v2 { min-height: 0; padding: 120px 0 0; }
  .hero-v2-grid { grid-template-columns: 1fr; gap: 24px; }
  .hero-v2-grid > :first-child { padding-bottom: 0; }
  .hero-v2-art { width: 100%; margin: 0 0 -40px; }
  .hero-v2::after { inset: 0; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
}

@media (max-width: 720px) {
  .menu-toggle { display: block; margin-left: auto; }
  .nav {
    display: none;
    position: absolute;
    top: 64px; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 8px 24px 16px;
    margin-left: 0;
  }
  .nav.open { display: flex; }
  .nav a { padding: 11px 0; width: 100%; }
  .lang-toggle { margin-top: 10px; }
  :root { --section: 56px; }
  .hero-stats { margin-top: 32px; }
  .hero-card { grid-template-columns: repeat(3, 1fr); gap: 8px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .hero-v2-art .layer-hair, .pixel { animation: none; }
  .pixel { opacity: .4; }
}