:root {
  --bg: #060507;        /* matches the logo's background */
  --bg-2: #0f0d14;
  --bg-3: #171421;
  --fg: #ece8f4;
  --fg-2: #a59fb5;
  --fg-3: #6b6579;
  --line: #2f2840;
  --purple: #3f2082;    /* cloak */
  --purple-2: #291b44;  /* cloak, shadow side */
  --violet: #ce88fa;    /* eyes */
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --gutter: clamp(16px, 3.5vw, 40px);
  --maxw: 1320px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
p { margin: 0; }
code, pre { font-family: var(--mono); }
h1, h2, h3 { margin: 0; font-weight: 400; }
h1 { font-family: var(--serif); font-size: clamp(56px, 7.5vw, 104px); line-height: .98; letter-spacing: -0.01em; }
h1 em { font-style: italic; color: var(--violet); }
h2 { font-family: var(--serif); font-size: clamp(36px, 4.5vw, 58px); line-height: 1.05; letter-spacing: -0.01em; }
h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
section { padding: clamp(56px, 8vw, 112px) var(--gutter); max-width: var(--maxw); margin: 0 auto; }
.link { font-weight: 500; border-bottom: 1.5px solid var(--fg); padding-bottom: 1px; }

/* buttons */
.btn {
  display: inline-block; background: var(--fg); color: var(--bg);
  padding: 13px 22px; font-weight: 500; font-size: 16px; border: 1.5px solid var(--fg); border-radius: 3px;
}
.btn:hover { background: #fff; border-color: #fff; }
.btn--small { padding: 8px 14px; font-size: 14px; font-family: var(--mono); }

/* nav: a floating container that stays with you */
.nav {
  position: sticky; top: 14px; z-index: 7;
  display: flex; align-items: center; justify-content: space-between;
  width: calc(100% - 2 * var(--gutter)); max-width: 1240px; margin: 14px auto 0;
  padding: 8px 10px 8px 16px;
  background: rgba(15, 13, 20, .82); border: 1px solid var(--line); border-radius: 12px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
}
.logo { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.logo svg { display: block; }
.nav__links { display: flex; align-items: center; gap: 4px; font-size: 14.5px; color: var(--fg-2); }
.nav__links a:not(.nav__x) { padding: 8px 12px; border-radius: 8px; transition: background .15s, color .15s; }
.nav__links a:not(.nav__x):hover { color: var(--fg); background: rgba(236, 232, 244, .06); }
.nav__mono { font-family: var(--mono); font-size: 13.5px; }
.nav__x { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; color: var(--fg-2); margin-left: 4px; background: rgba(236, 232, 244, .06); border: 1px solid var(--line); }
.nav__x:hover { color: var(--fg); border-color: var(--fg-3); }
.nav__x svg { display: block; }
.nav__burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; flex-direction: column; gap: 6px; }
.nav__burger span { display: block; width: 22px; height: 1.5px; background: var(--fg); }

/* hero */
.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; padding-top: clamp(48px, 7vw, 96px); }
.hero > * { min-width: 0; }
.hero__sub { margin: 28px 0 36px; font-size: 19px; color: var(--fg-2); max-width: 46ch; }
.hero__meta { margin-top: 14px; font-size: 14px; color: var(--fg-3); }
.hero__meta a { color: var(--fg); border-bottom: 1px solid var(--fg-3); }

.install {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-2); border: 1.5px solid var(--line); border-radius: 3px;
  padding: 13px 14px; font-family: var(--mono); font-size: 13.5px;
}
.install__prompt { color: var(--violet); }
.install code { flex: 1; min-width: 0; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.install__copy {
  flex: none; background: none; border: 1px solid var(--line); color: var(--fg-2); font-family: var(--mono); font-size: 12px;
  padding: 5px 10px; border-radius: 3px; cursor: pointer;
}
.install__copy:hover { border-color: var(--fg-2); color: var(--fg); }
.install__copy.copied { background: var(--violet); color: var(--bg); border-color: var(--violet); }

.hero__visual { display: grid; gap: 16px; }

/* route diagram */
.diagram { display: grid; grid-template-columns: 1fr auto 1.7fr auto 1fr; align-items: center; }
.diagram__node {
  border: 1.5px solid var(--line); background: var(--bg-2); border-radius: 3px;
  padding: 22px 12px; text-align: center; display: grid; gap: 4px; justify-items: center;
}
.diagram__node b { font-weight: 600; font-size: 15px; }
.diagram__node span { font-size: 12px; color: var(--fg-3); line-height: 1.3; }
.diagram__node--route { background: var(--bg); border-color: var(--purple); padding: 10px 14px 20px; }
.diagram__node--route b { color: var(--violet); }
.diagram__logo {
  display: block; width: 100%; max-width: 200px; height: auto; margin-bottom: 2px;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
}
.diagram__arrow { position: relative; width: 34px; height: 1.5px; background: var(--fg-3); }
.diagram__arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 6px solid var(--fg-3); }
.packet { position: absolute; top: -3px; left: -2px; width: 7px; height: 7px; background: var(--violet); animation: travel 2.4s linear infinite; will-change: transform, opacity; }
.packet--2 { animation-delay: 1.2s; }
/* wire is 34px wide: translate instead of animating `left` so it never triggers layout */
@keyframes travel { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(28px); opacity: 0; } }

.log {
  border: 1.5px solid var(--line); background: var(--bg-2); border-radius: 3px;
  padding: 12px 14px; font-family: var(--mono); font-size: 12.5px; line-height: 1.7; min-height: 84px; color: var(--fg-2);
}
.log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log div.ok::before { content: "ok  "; color: var(--violet); white-space: pre; }

/* background */
#bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
/* packets are plain elements on compositor-driven transform animations: no per-frame JS, no canvas */
.pkt { position: absolute; left: 0; top: 0; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #dcaeff; will-change: transform; transform: translate(-100px, -100px); }
.pkt--head { box-shadow: 0 0 6px 2px rgba(206,136,250,.55), 0 0 14px 4px rgba(206,136,250,.18); }
.pkt--tail { background: var(--violet); }
/* grain sits behind the content: anything with a background hides it, and text is always painted above it */
#grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .065; background-repeat: repeat; background-size: 180px 180px;
}
#ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.watcher--ambient {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: 42px; opacity: 0;
  transform: scaleY(.04); transition: transform .22s ease-out, opacity .3s; will-change: transform, opacity;
}
.watcher--ambient path { fill: rgba(206,136,250,.06); stroke: var(--violet); stroke-width: 1.8; }
.watcher--ambient .watcher__pupil { fill: var(--violet); }
.watcher--ambient.open { opacity: .55; transform: scaleY(1); }
.watcher--ambient.open.blink { transform: scaleY(.04); transition-duration: .08s; }

/* living bits */
.cloakface { position: relative; display: block; width: 100%; max-width: 200px; margin: 0 auto 2px; }
.cloakface img {
  display: block; width: 100%; height: auto;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 38%, transparent 82%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 38%, transparent 82%);
}
.cloakface__eye {
  position: absolute; width: 3%; height: 7.6%; border-radius: 50%;
  background: #dcaeff;
  box-shadow: 0 0 4px 1px rgba(220,174,255,.9), 0 0 10px 3px rgba(206,136,250,.45), 0 0 22px 6px rgba(206,136,250,.18);
  transform: translate(-50%, -50%) translate(var(--dx, 0px), var(--dy, 0px)) scaleY(var(--blink, 1));
  transition: transform .14s ease-out;
}
.cloakface__eye--l { left: 40.6%; top: 48.1%; }
.cloakface__eye--r { left: 48.6%; top: 47.7%; }
.diagram__node--route .cloakface { max-width: 200px; }
.diagram__node--route .diagram__logo { margin: 0; }

.faq { position: relative; overflow: hidden; }
.cloakface--peek { position: absolute; right: -30px; bottom: -120px; width: 400px; max-width: none; margin: 0; pointer-events: none; z-index: 0; }
.faq > *:not(.cloakface--peek) { position: relative; z-index: 1; }

.log__chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.log__prompt { color: var(--fg-3); margin-right: 4px; }
.log__chips button {
  background: none; border: 1px solid var(--line); color: var(--fg-2); font-family: var(--mono); font-size: 11.5px;
  padding: 3px 9px; border-radius: 3px; cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.log__chips button:hover { color: var(--fg); border-color: var(--fg-3); }
.log__chips button.on { color: var(--violet); border-color: var(--violet); background: rgba(206,136,250,.08); }
.log__out { min-height: 62px; }

.watchers { position: relative; height: 200px; margin-top: 44px; max-width: 420px; }
.watcher {
  position: absolute; left: var(--x); top: var(--y); width: calc(44px * var(--s, 1)); overflow: visible;
  transform-origin: center; transition: transform .1s ease-in; will-change: transform;
}
/* no drop-shadow filter: it re-rasterised every eye on each cursor move */
.watcher path { fill: rgba(206,136,250,.06); stroke: var(--violet); stroke-width: 1.8; stroke-linejoin: round; }
.watcher__pupil { fill: var(--violet); }
.watcher.blink, .watchers.closed .watcher { transform: scaleY(.06); }
.watchers.closed .watcher { transition-delay: calc(var(--i, 0) * 40ms); }
.watchers__note { margin-top: 10px; font-size: 14px; color: var(--fg-3); transition: color .2s; }
.watchers.closed + .watchers__note { color: var(--violet); }
@media (max-width: 960px) { .watchers { height: 150px; } .cloakface--peek { display: none; } }

/* 22px wires: animating background-position here is a negligible repaint */
.compare__row i { background-image: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 9px); background-color: transparent; color: var(--fg-3); animation: flow .7s linear infinite; }
.compare__row--after i { color: var(--violet); }
.compare__row--after i:last-of-type { color: var(--fg); animation-duration: 1.1s; }
.compare__row--after i:last-of-type::after { border-left-color: var(--fg); }
.compare__row--after i:first-of-type::after { border-left-color: var(--violet); }
@keyframes flow { to { background-position: 9px 0; } }

.packet--2 { background: var(--fg); box-shadow: 0 0 8px rgba(236,232,244,.6); border-radius: 50%; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero__copy > * { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.hero__copy > :nth-child(2) { animation-delay: .08s; }
.hero__copy > :nth-child(3) { animation-delay: .16s; }
.hero__copy > :nth-child(4) { animation-delay: .24s; }
.hero__visual { animation: rise .8s .2s cubic-bezier(.2,.7,.2,1) both; }

.rows li { transition: border-color .2s, padding-left .2s; }
.rows li:hover { border-bottom-color: var(--violet); padding-left: 6px; }
.rows li:hover .rows__num { color: var(--fg); }
.rows__num { transition: color .2s; }
.grid article { transition: background .2s; }
.grid article:hover { background: var(--bg-2); }
.grid article samp {
  display: block; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: var(--violet);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .hero__copy > *, .hero__visual, .compare__row i { animation: none; }
  .cloakface__eye, .watcher, .watcher__pupil { transition: none; }
  #bg, #ambient { display: none; }
}

/* problem */
.problem { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; border-top: 1.5px solid var(--line); }
.problem > * { min-width: 0; }
.problem__right { display: grid; gap: 20px; font-size: 18px; color: var(--fg-2); max-width: 58ch; }
.problem__right p:last-of-type { color: var(--fg); font-weight: 500; }

.compare { margin-top: 20px; display: grid; gap: 12px; }
.compare__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.compare__label { font-family: var(--mono); font-size: 12px; color: var(--fg-3); width: 82px; flex: none; }
.compare__row > span:not(.compare__label) { border: 1.5px solid var(--line); padding: 7px 12px; border-radius: 3px; background: var(--bg-2); color: var(--fg); }
.compare__row > span.hl { background: var(--purple); border-color: var(--purple); font-weight: 500; }
.compare__row i { width: 22px; height: 1.5px; background: var(--fg-2); position: relative; }
.compare__row i::after { content: ""; position: absolute; right: -1px; top: -3.5px; border: 4px solid transparent; border-left: 5px solid var(--fg-2); }
.compare__row--before > span:not(.compare__label) { color: var(--fg-3); background: transparent; }
.compare__row--before i { background: var(--fg-3); }
.compare__row--before i::after { border-left-color: var(--fg-3); }

/* how it works */
.route { border-top: 1.5px solid var(--line); }
.route h2 { margin-bottom: 40px; }
.rows { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--line); }
.rows li {
  display: grid; grid-template-columns: 60px 200px 1fr; gap: 24px; align-items: baseline;
  padding: 28px 0; border-bottom: 1.5px solid var(--line);
}
.rows__num { font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--violet); }
.rows p { color: var(--fg-2); max-width: 62ch; }

/* capabilities */
.caps { border-top: 1.5px solid var(--line); }
.caps__intro { margin: 16px 0 40px; color: var(--fg-2); font-size: 18px; max-width: 56ch; }
.grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1.5px solid var(--line); background: var(--line); gap: 1.5px; border-radius: 3px; overflow: hidden;
}
.grid article { background: var(--bg); padding: 28px 26px; display: grid; gap: 10px; align-content: start; }
.grid article code { justify-self: start; font-size: 13px; color: var(--violet); background: var(--bg-3); padding: 3px 8px; border-radius: 2px; }
.grid article p { color: var(--fg-2); font-size: 16px; }

/* skill */
.skill { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; border-top: 1.5px solid var(--line); }
.skill > * { min-width: 0; }
.skill__copy { display: grid; gap: 20px; }
.skill__copy p { color: var(--fg-2); font-size: 18px; max-width: 52ch; }
.skill__actions { display: flex; align-items: center; gap: 24px; margin-top: 8px; }

.term { background: var(--bg-2); border: 1.5px solid var(--line); border-radius: 3px; overflow: hidden; }
.term__tabs { display: flex; border-bottom: 1.5px solid var(--line); }
.term__tabs button {
  background: none; border: 0; color: var(--fg-3); font-family: var(--mono); font-size: 12.5px;
  padding: 12px 16px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1.5px;
}
.term__tabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--violet); }
.term__body { margin: 0; padding: 22px; font-size: 12.5px; line-height: 1.75; overflow-x: auto; min-height: 270px; color: var(--fg); }
.term__body .c { color: var(--fg-3); }
.term__body .p { color: var(--violet); }
.term__body .ok { color: var(--violet); }

/* token */
.token { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; border-top: 1.5px solid var(--line); }
.token > * { min-width: 0; }
.token__copy { display: grid; gap: 20px; }
.token__copy p { color: var(--fg-2); font-size: 18px; max-width: 52ch; }
.token__copy .link { justify-self: start; }
.fees { width: 100%; border-collapse: collapse; font-size: 16px; }
.fees th, .fees td { text-align: left; padding: 16px 12px 16px 0; border-bottom: 1.5px solid var(--line); vertical-align: top; }
.fees th { font-weight: 500; color: var(--fg-3); font-size: 14px; border-top: 1.5px solid var(--line); }
.fees td { color: var(--fg-2); }
.fees td:first-child { color: var(--fg); font-weight: 500; }
.fees__hl td { color: var(--fg); }
.fees__hl td:nth-child(2), .fees__hl td:nth-child(3) { color: var(--violet); }
@media (max-width: 960px) { .token { grid-template-columns: 1fr; gap: 32px; } }

/* use cases */
.cases { border-top: 1.5px solid var(--line); }
.cases h2 { margin-bottom: 36px; }
.cases__list { margin: 0; border-top: 1.5px solid var(--line); }
.cases__list dt, .cases__list dd { margin: 0; padding: 20px 0; border-bottom: 1.5px solid var(--line); }
.cases__list dt { font-weight: 600; }
.cases__list dd { color: var(--fg-2); }
@media (min-width: 720px) {
  .cases__list { display: grid; grid-template-columns: 280px 1fr; }
  .cases__list dt, .cases__list dd { border-bottom: 1px solid var(--bg-3); }
  .cases__list dd:last-child, .cases__list dt:nth-last-child(2) { border-bottom: 1.5px solid var(--line); }
}

/* faq */
.faq { border-top: 1.5px solid var(--line); }
.faq > * { max-width: 820px; }
.faq h2 { margin-bottom: 28px; }
.faq details { border-top: 1.5px solid var(--line); }
.faq details:last-of-type { border-bottom: 1.5px solid var(--line); }
.faq summary { cursor: pointer; padding: 20px 0; font-weight: 600; font-size: 19px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--violet); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--fg-2); padding-bottom: 22px; max-width: 66ch; }

/* cta */
.cta { max-width: none; background: var(--purple); border-top: 1.5px solid var(--line); padding-top: clamp(40px, 5vw, 64px); padding-bottom: 24px; }
.cta > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.cta h2 { font-size: clamp(40px, 6vw, 80px); }
.cta__actions { display: flex; align-items: center; gap: 28px; margin-top: 28px; flex-wrap: wrap; }
.cta__links { display: flex; justify-content: flex-end; gap: 22px; flex-wrap: wrap; margin-top: 28px; font-size: 14px; color: rgba(236,232,244,.75); }
.cta__links a:hover { color: var(--fg); }

/* responsive */
@media (max-width: 960px) {
  .hero, .problem, .skill { grid-template-columns: 1fr; gap: 40px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .rows li { grid-template-columns: 48px 1fr; }
  .rows li p { grid-column: 2; }
}
@media (max-width: 720px) {
  .nav__links {
    display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 6px;
    background: rgba(15, 13, 20, .96); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  }
  .nav__links.open { display: flex; }
  .nav__links a, .nav__links a:not(.nav__x) { padding: 12px 14px; font-size: 15px; }
  .nav__x { width: auto; height: auto; border: 0; background: none; border-radius: 8px; margin: 0; justify-content: flex-start; gap: 10px; }
  .nav__x::after { content: "@usecloakdotpro"; font-size: 15px; }
  .nav__burger { display: flex; }
  .grid { grid-template-columns: 1fr; }
  .compare__label { width: 100%; }
  .diagram { grid-template-columns: 1fr; justify-items: center; }
  .diagram__node { width: 100%; }
  .diagram__arrow { width: 1.5px; height: 34px; }
  .diagram__arrow::after { right: -4px; top: auto; bottom: -1px; border: 5px solid transparent; border-top: 6px solid var(--fg-3); }
  .packet { left: -3px; top: -2px; animation-name: travel-v; }
  @keyframes travel-v { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(28px); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .packet { animation: none; } }