:root {
  --bg: #1a1816; --surface: #221f1c; --surface-3: #2f2b27;
  --border: rgba(236,229,216,0.10); --border-strong: rgba(236,229,216,0.20);
  --text: #ece5d8; --text-2: #cbc2b2; --text-3: #968d80;
  --primary: #c8683f; --primary-hover: #d97f57; --primary-text: #e2a184; --primary-soft: rgba(200,104,63,0.14);
  --font: "Segoe UI Variable Text", "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font-display: "Noto Serif TC", "Source Han Serif TC", Georgia, "PMingLiU", "Yu Mincho", serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: var(--primary-text); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; text-underline-offset: 3px; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* the top line */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); }
.brand img { width: 40px; height: 40px; }
.brand b { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: 0.06em; }
.brand span { display: block; font-size: 12px; color: var(--text-3); letter-spacing: 0.08em; }
.langs { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.langs a { color: var(--text-3); }
.langs a.on { color: var(--text); border-bottom: 1px solid var(--primary); }

/* the hero */
.hero { padding: 72px 0 56px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.hero h1 { font-family: var(--font-display); font-size: 44px; line-height: 1.25; font-weight: 600; margin: 0 0 20px; letter-spacing: 0.02em; }
.hero p { font-size: 17px; color: var(--text-2); margin: 0 0 32px; max-width: 34em; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 4px; background: var(--primary); color: #fff8f0; font-weight: 600; letter-spacing: 0.03em; border: 1px solid transparent; }
.btn:hover { background: var(--primary-hover); color: #fff; text-decoration: none; }
.btn svg { width: 18px; height: 18px; }
.cta small { display: block; color: var(--text-3); font-size: 12px; letter-spacing: 0.06em; margin-top: 8px; }
.hero .shot { border: 1px solid var(--border-strong); border-radius: 6px; overflow: hidden; box-shadow: 0 24px 48px rgba(0,0,0,0.55); background: #000; }
.hero .shot { display: flex; justify-content: center; background: transparent; border: 0; box-shadow: none; }
.hero .shot img { display: block; max-width: 100%; height: auto; max-height: 620px; width: auto; border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: 0 24px 48px rgba(0,0,0,0.55); }

/* Two shots in one frame: the sentence search and the locked films,
   each shown for as long as it takes to read. Stacked rather than
   side by side so neither is half the size of the other. */
.shot.swap { position: relative; display: grid; }
.shot.swap > div { grid-area: 1 / 1; }
.shot.swap .b { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .shot.swap .a { animation: swapA 14s ease-in-out infinite; }
  .shot.swap .b { animation: swapB 14s ease-in-out infinite; }
}
@keyframes swapA { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes swapB { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* the sections */
section { padding: 56px 0; border-top: 1px solid var(--border); }
h2 { font-family: var(--font-display); font-size: 28px; font-weight: 600; margin: 0 0 10px; letter-spacing: 0.04em; }
.lead { color: var(--text-2); margin: 0 0 36px; max-width: 44em; }

/* The line that joins the two promises, because it is the one thing
   neither of them says on its own: what is locked is still findable. */
.hero .bridge { font-family: var(--font-display); font-size: 19px; line-height: 1.55; color: var(--primary-text); margin: 0 0 18px; max-width: 30em; }

/* What can be checked, next to the button that asks for the download. */
.proof { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.proof li { font-size: 12px; letter-spacing: 0.04em; color: var(--text-3); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; }
.hero .size { font-size: 12.5px; color: var(--text-3); margin: 14px 0 0; max-width: 30em; }

/* Two pillars: finding and hiding, side by side, because the program is
   both and a page that leads with one buries the other. */
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 8px 0 56px; }
.pillar h2 { font-family: var(--font-display); font-size: 26px; font-weight: 600; margin: 0 0 12px; }
.pillar p { color: var(--text-2); margin: 0 0 20px; }
.pillar .pic img { display: block; max-width: 100%; height: auto; border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: 0 16px 32px rgba(0,0,0,0.45); }

/* Sentences a person can type, shown as they would be typed. */
.try { padding: 0 0 56px; }
.try h2 { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 0 0 18px; }
/* What the agent is, and what it is not, before the sentences that show
   it. A program that acts on somebody's files has to say where it stops.
   */
.try .agent { color: var(--text-2); margin: 0 0 20px; max-width: 46em; }
.try ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; max-width: 46em; }
.try li { display: flex; gap: 10px; align-items: baseline; background: var(--surface-2, rgba(255,255,255,0.03)); border: 1px solid var(--border); border-radius: 6px; padding: 12px 16px; font-size: 16px; }
.try .caret { color: var(--primary); font-weight: 700; }
.try .note { color: var(--text-3); font-size: 13.5px; margin: 0; max-width: 46em; }

/* The objection this page has to answer out loud: 2.7 GB, encryption, an
   agent, five things — it sounds like something you have to learn first.
   The answer is that the instructions are reached by asking, in the same
   box you search in, so it belongs immediately under the sentences it is
   about and above the five steps it points at. No line of its own above
   it: it is the second half of the same thought. */
.guide { padding: 0 0 56px; border-top: 0; }
.guide .box { display: grid; gap: 12px; max-width: 46em; padding: 22px 26px; background: var(--surface); border: 1px solid var(--border); border-left: 2px solid var(--primary); border-radius: 0 6px 6px 0; }
.guide h2 { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 0; }
.guide p { margin: 0; color: var(--text-2); }
.guide .more { font-size: 14px; letter-spacing: 0.04em; }

/* The pet: the part of this people tell each other about. Given room,
   but after the locking and the finding, so it is the thing you remember
   rather than the thing you judge it by. */
.pet { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 8px 0 56px; }
.pet h2 { font-family: var(--font-display); font-size: 26px; font-weight: 600; margin: 0 0 12px; }
.pet p { color: var(--text-2); margin: 0; }
.pet .pic { display: flex; justify-content: center; }
.pet .pic img { display: block; max-width: 100%; height: auto; border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: 0 16px 32px rgba(0,0,0,0.45); }
.proof .price { color: var(--primary-text); border-color: var(--primary); }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 40px; }
.step { display: grid; grid-template-columns: 1fr 1.2fr; gap: 28px; align-items: center; counter-increment: step; }
.step:nth-child(even) .text { order: 2; }
.step .text { position: relative; padding-left: 44px; }
.step .text::before { content: counter(step); position: absolute; left: 0; top: 0; font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--primary); font-weight: 600; }
.step h3 { font-family: var(--font-display); font-size: 21px; font-weight: 600; margin: 0 0 4px; }
.step .where { display: block; font-size: 12px; letter-spacing: 0.06em; color: var(--primary-text); margin-bottom: 10px; }
.step p { margin: 0; color: var(--text-2); }
.step .pic { display: flex; justify-content: center; }
.step img { display: block; max-width: 100%; height: auto; max-height: 560px; width: auto; border: 1px solid var(--border-strong); border-radius: 6px; background: #000; box-shadow: 0 12px 24px rgba(0,0,0,0.45); }

.honest { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 46em; }
.honest li { padding: 14px 18px; background: var(--surface); border-left: 2px solid var(--primary); color: var(--text-2); }

.privacy p { max-width: 46em; color: var(--text-2); }

/* The consent strip: only ever seen by a reader whose region requires
   being asked. It sits over the page rather than pushing it down, so
   nobody's first sight of the site is a bar of legal text. */
.cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--surface-3); border-top: 1px solid var(--border-strong); box-shadow: 0 -10px 30px rgba(0,0,0,0.5); }
.cookie[hidden] { display: none; }
.cookie .in { max-width: 1040px; margin: 0 auto; padding: 14px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.cookie p { flex: 1 1 24em; margin: 0; font-size: 13.5px; color: var(--text-2); }
.cookie .btns { display: flex; gap: 10px; }
.cookie button { font: inherit; font-size: 13.5px; padding: 8px 18px; border-radius: 4px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-2); cursor: pointer; }
.cookie button:hover { border-color: var(--primary); color: var(--text); }
.cookie button.yes { background: var(--primary); border-color: transparent; color: #fff8f0; font-weight: 600; }
.cookie button.yes:hover { background: var(--primary-hover); color: #fff; }
footer button.linky { font: inherit; font-size: 13px; padding: 0; border: 0; background: none; color: var(--primary-text); cursor: pointer; }
footer button.linky:hover { color: var(--primary-hover); text-decoration: underline; text-underline-offset: 3px; }

footer { padding: 36px 0 48px; border-top: 1px solid var(--border); color: var(--text-3); font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

@media (max-width: 760px) {
  .pillars, .pet { grid-template-columns: 1fr; gap: 32px; }
  .hero .bridge { font-size: 17px; }
  .hero { grid-template-columns: 1fr; gap: 32px; padding: 44px 0 36px; }
  .hero h1 { font-size: 32px; }
  .step, .step:nth-child(even) .text { grid-template-columns: 1fr; order: 0; }
  .step .text { padding-left: 36px; }
  .top { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }