/* Smuggy's site, in the app's own SIGNAL tokens: near-black paper faintly violet, white frost for surfaces with a rim
   lit from the top left, ink in three strengths, iris as the accent and the status colours for glows. Onest
   throughout, the real windows as the pictures. Dark only, as the app is. */

@font-face {
  font-family: "Onest";
  src: url("/assets/fonts/Onest.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/JetBrainsMono.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --paper: oklch(12% 0.005 285);
  --surface: oklch(17% 0.006 285);
  --line: oklch(27% 0.007 285);
  --ink: oklch(96% 0.003 285);
  --ink-soft: oklch(82% 0.008 285);
  --ink-faint: oklch(68% 0.009 285);
  --iris: oklch(80% 0.1206 292);
  --mint: oklch(84% 0.135 162);
  --sky: oklch(84% 0.1 230);
  --on-fill: oklch(17% 0.02 285);
  --glass-hover: rgb(255 255 255 / 0.09);
  --link: var(--iris);
  --glass: rgb(255 255 255 / 0.05);
  --glass-raised: rgb(255 255 255 / 0.075);
  --hairline: rgb(255 255 255 / 0.08);
  /* The glow behind the page and each window: the app's window backdrop, coloured by what it shows. */
  --tint: var(--iris);
  --column: 1200px;
  --prose: 720px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: dark;
}

/* Each section glows in the colour the app gives what it shows: sky for VPN, mint for DPI Bypass, iris otherwise. */
[data-tint="sky"] { --tint: var(--sky); }
[data-tint="mint"] { --tint: var(--mint); }

* { box-sizing: border-box; }

html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font: 400 17px/1.55 "Onest", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  background: var(--paper);
  position: relative;
  isolation: isolate;
}

/* The app's backdrop at the top of every page: the tint strongest just above the middle, fading out downwards. On
   the home page the hero draws it instead, in the colour of the mode it shows. */
@property --glow {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

body { --glow: var(--tint); }
body.home::before { display: none; }

body::before, .hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1100px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(55% 60% at 55% 0%, color-mix(in oklch, var(--glow) 30%, transparent), transparent 75%),
    radial-gradient(40% 45% at 62% 32%, color-mix(in oklch, var(--glow) 14%, transparent), transparent 75%),
    radial-gradient(35% 40% at 10% 20%, color-mix(in oklch, var(--glow) 10%, transparent), transparent 75%);
}

/* Static grain against banding in the dark, as the app lays over its backdrop. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main { flex: 1; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--iris); outline-offset: 3px; border-radius: 6px; }

img { max-width: 100%; height: auto; }

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  z-index: 10;
}
.skip:focus { top: 12px; }

/* The bar: frosted, so the page reads through it as it scrolls under. */
.bar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in oklch, var(--paper) 62%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--hairline);
}

.bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--column);
  margin: 0 auto;
  padding: 12px 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand img { border-radius: 7px; }

.bar-links { display: flex; gap: 6px; }
.bar-links a {
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.bar-links a[aria-current="page"] { color: var(--ink); background: var(--glass); }
@media (hover: hover) and (pointer: fine) {
  .bar-links a:hover { color: var(--ink); background: var(--glass); }
}

/* Home */

.hero {
  position: relative;
  isolation: isolate;
  --glow: var(--tint);
  transition: --glow 600ms ease;
  max-width: var(--column);
  margin: 0 auto;
  padding: 72px 24px 24px;
  text-align: center;
}

.hero-icon {
  width: 128px;
  height: 128px;
  filter: drop-shadow(0 18px 40px rgb(0 0 0 / 0.45));
}

h1 {
  margin: 20px 0 0;
  font-size: clamp(48px, 8vw, 84px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.hero-lead {
  margin: 14px auto 0;
  max-width: 22ch;
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.hero-sub {
  margin: 14px auto 0;
  max-width: 34em;
  color: var(--ink-soft);
  font-size: 19px;
  text-wrap: balance;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--glass);
  font-size: 15px;
  font-weight: 500;
}
.status .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 10px color-mix(in oklch, var(--mint) 70%, transparent);
}

/* Each window sits in its own glow, the app's backdrop in the colour of what it shows. */
.hero::before {
  left: 50%;
  width: 100vw;
  translate: -50% 0;
  top: -60px;
}

.hero-shot::before, .feature-shot::before {
  content: "";
  position: absolute;
  inset: -30% -22%;
  z-index: -1;
  pointer-events: none;
  /* Strongest where it spills past the window's edges, since the window itself covers the middle. */
  background: radial-gradient(closest-side, color-mix(in oklch, var(--glow) 34%, transparent) 55%, transparent);
  filter: blur(24px);
}

.hero-shot {
  position: relative;
  isolation: isolate;
  max-width: 1040px;
  margin: 28px auto 0;
}

/* The capture keeps macOS's own shadow and corners. */
figure { margin: 0; }
.hero-shot > img:first-child, .feature-shot > img:first-child { display: block; width: 100%; }

/* The pirate peeking round a window's lower corner, as on the store screenshots. */
.peek {
  position: absolute;
  bottom: 2%;
  width: clamp(72px, 14%, 180px);
  filter: drop-shadow(0 0 32px rgb(140 255 46 / 0.16)) drop-shadow(0 18px 30px rgb(0 0 0 / 0.5));
  pointer-events: none;
}
.peek-right { right: -2%; rotate: 8deg; }
.peek-left { left: -2%; rotate: -8deg; }

.feature {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: center;
  gap: 64px;
  max-width: var(--column);
  margin: 0 auto;
  padding: 72px 24px;
}
.feature-flip { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.feature-flip .feature-copy { order: 2; }
.feature-popover { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.feature-popover .feature-shot { justify-self: center; max-width: 380px; }
.feature-shot { position: relative; isolation: isolate; --glow: var(--tint); }
.feature-shot .peek { width: clamp(64px, 20%, 140px); }
.feature-popover .feature-shot .peek { width: 110px; left: -22%; bottom: 6%; }

h2 {
  margin: 0;
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.feature-copy p, .points li { color: var(--ink-soft); }
.feature-copy p { margin: 16px 0 0; }
.feature-copy strong { color: var(--ink); font-weight: 600; }

.points { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.points li { padding-left: 18px; position: relative; }
.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--iris);
}

/* The app's frost: white at 5 % with a 1 pt rim lit from the top left, the way light catches a glass plate's edge
   (SpecularRim: highlight 0.42 × strength, shade 0.04, the far corner 0.4 of the highlight). */
.frost, .status, .segmented, .metric, .card, .prose details, .button { position: relative; }
.status::before, .segmented::before, .metric::before, .card::before, .prose details::before, .button::before,
.lens::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgb(255 255 255 / var(--rim, 0.21)), rgb(255 255 255 / 0.04) 50%,
    rgb(255 255 255 / calc(var(--rim, 0.21) * 0.4)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* The section label above a heading, as the app labels a group: small, semibold, muted. */
.label {
  margin: 0 0 10px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.feature-copy .label { margin: 0 0 10px; color: var(--ink-faint); }

/* The mode switch: the app's large segmented control, its lens the brand violet's sheen at 30 % with a bright rim. */
.segmented {
  display: grid;
  width: max-content;
  grid-template-columns: 1fr 1fr;
  margin: 28px auto 0;
  padding: 4px;
  height: 44px;
  border-radius: 999px;
  background: var(--glass);
}
.segmented button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 136px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-soft);
  font: 600 15px/1 "Onest", system-ui, sans-serif;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color 160ms var(--ease-out), scale 140ms var(--ease-out);
}
.segmented button svg { width: 15px; height: 15px; }
.segmented button[aria-selected="true"] { color: var(--ink); }
.segmented button:active { scale: 0.97; }
@media (hover: hover) and (pointer: fine) {
  .segmented button:hover { color: var(--ink); }
}
.lens {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  --rim: 0.38;
  transition: translate 260ms var(--ease-out);
}
.lens::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.3;
  background: linear-gradient(180deg, color-mix(in oklch, var(--iris), white 22%), var(--iris),
    color-mix(in oklch, var(--iris), var(--on-fill) 14%));
}
.hero[data-mode="vpn"] .lens { translate: 100% 0; }

.mode-caption {
  display: grid;
  margin: 14px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
}
.mode-caption span { grid-area: 1 / 1; transition: opacity 200ms ease, visibility 200ms; }

/* The two windows cross-fade through a slight blur, so they read as one window changing mode. */
.hero-shot img[data-mode] { transition: opacity 300ms ease, filter 300ms ease; }
.hero-shot img[data-mode="bypass"] { position: absolute; inset: 0; width: 100%; }
.hero[data-mode="vpn"] [data-mode="bypass"]:not(button),
.hero[data-mode="bypass"] [data-mode="vpn"]:not(button) { opacity: 0; visibility: hidden; filter: blur(3px); }

/* The app's Home tiles: a label, the value large, a caption under it, on frost. */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 1040px;
  margin: 24px auto 0;
  padding: 0 24px;
}
.metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--glass);
}
.metric .label { margin: 0; color: var(--ink-soft); }
.metric .value {
  color: var(--ink);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.metric .caption { color: var(--ink-faint); font-size: 13px; }

/* Protocol and coverage tags: the app's mono tags, small capsules a shade brighter than the frost. */
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 0; padding: 0; list-style: none; }
.tags li {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.075);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

/* The app's filled pill: the brand violet's sheen, dark text, a full-strength rim. */
.button {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  --rim: 0.42;
  background: linear-gradient(180deg, color-mix(in oklch, var(--iris), white 22%), var(--iris),
    color-mix(in oklch, var(--iris), var(--on-fill) 14%));
  color: var(--on-fill);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: translate 160ms var(--ease-out), scale 140ms var(--ease-out), filter 160ms var(--ease-out);
}
.button:hover { color: var(--on-fill); }
.button:active { scale: 0.97; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { translate: 0 -1px; filter: brightness(1.06); }
}

/* Good to know: a settings card, rows under one frost panel divided by hairlines. */
.notes {
  max-width: var(--prose);
  margin: 0 auto;
  padding: 48px 24px 96px;
}
.card { border-radius: 16px; background: var(--glass); overflow: hidden; }
.row {
  display: grid;
  gap: 2px;
  padding: 14px 18px;
  color: inherit;
  text-decoration: none;
}
.row + .row { border-top: 1px solid var(--hairline); }
.row-title { color: var(--ink); font-size: 16px; font-weight: 500; }
.row-detail { color: var(--ink-soft); font-size: 14px; }
.row-link { grid-template-columns: 1fr auto; column-gap: 16px; transition: background-color 160ms var(--ease-out); }
.row-link .row-detail { grid-column: 1; }
.row-link::after {
  content: "";
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--ink-faint);
  border-right: 2px solid var(--ink-faint);
  rotate: 45deg;
}
@media (hover: hover) and (pointer: fine) {
  .row-link:hover { background: var(--glass-hover); color: inherit; }
}

/* Policy and support: a readable column, the app's own reading rhythm. */

.prose {
  max-width: var(--prose);
  margin: 0 auto;
  padding: 64px 24px 96px;
  color: var(--ink-soft);
}

.prose h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(38px, 5vw, 52px);
}

.prose h1 + p {
  margin-top: 10px;
  color: var(--ink-faint);
  font-size: 15px;
}

.prose h2 {
  margin: 48px 0 0;
  color: var(--ink);
  font-size: 24px;
  letter-spacing: -0.02em;
  scroll-margin-top: 80px;
}

.prose p { margin: 14px 0 0; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { margin: 14px 0 0; padding-left: 1.3em; }
.prose li { margin-top: 10px; padding-left: 4px; }
.prose ul li::marker { color: var(--iris); }
.prose ol li::marker { color: var(--ink-faint); font-weight: 600; }

code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.86em;
  color: var(--ink);
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--glass);
  overflow-wrap: anywhere;
}

/* Questions: each a frosted row that opens in place. */
.prose details {
  margin-top: 10px;
  border-radius: 16px;
  background: var(--glass);
}
.prose details + details { margin-top: 8px; }
.prose summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.prose summary::-webkit-details-marker { display: none; }
.prose summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  rotate: 45deg;
  translate: 0 -2px;
  transition: rotate 200ms var(--ease-out), translate 200ms var(--ease-out);
}
.prose details[open] summary::after { rotate: 225deg; translate: 0 2px; }
.prose details > :not(summary) { margin-left: 20px; margin-right: 20px; }
.prose details > :last-child { margin-bottom: 18px; }
.prose details > p:first-of-type, .prose details > ul:first-of-type { margin-top: 0; }

/* Footer */

.foot { border-top: 1px solid var(--hairline); }
.foot-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  max-width: var(--column);
  margin: 0 auto;
  padding: 28px 24px calc(28px + env(safe-area-inset-bottom));
  color: var(--ink-faint);
  font-size: 14px;
}
.foot p { margin: 0; }
.foot a { color: var(--ink-soft); text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot-links { display: flex; flex-wrap: wrap; gap: 20px; }

@media (max-width: 860px) {
  body { font-size: 16px; }
  .hero { padding-top: 48px; }
  .hero-icon { width: 104px; height: 104px; }
  .feature, .feature-flip, .feature-popover { grid-template-columns: 1fr; gap: 28px; padding: 48px 20px; }
  .feature-flip .feature-copy { order: 0; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 20px; }
  .segmented button { min-width: 0; }
  .peek-right { right: 0; }
  .peek-left { left: 0; }
  /* Beside a narrow popover there's no room to peek round it without covering its buttons. */
  .feature-popover .feature-shot .peek { display: none; }
}

/* Reduce Motion keeps the fades that explain a change and drops the movement, as the app does. */
@media (prefers-reduced-motion: reduce) {
  .lens, .button, .segmented button, .prose summary::after { transition: none; }
  .hero[data-mode] [data-mode]:not(button) { filter: none; }
}

@media (prefers-contrast: more) {
  :root { --ink-soft: rgb(240 244 255 / 0.92); --ink-faint: rgb(240 244 255 / 0.75); }
  /* As the app does under Increase Contrast: a solid faint edge in place of the rim. */
  .status::before, .segmented::before, .metric::before, .card::before, .prose details::before, .button::before,
  .lens::after { padding: 0; background: none; border: 1px solid var(--ink-faint); -webkit-mask: none; mask: none; }
}