/* CoffeeVPN landing — standalone, no build step, no framework.
 * Brand: toner black + cream paper + roasted caramel.
 * Rule: grunge lives in backgrounds and display headlines. Anything you read
 * or click is clean — no grain, no rotation, full contrast. */

:root{
  --cv-black:#0A0A0A;
  --cv-ink:#1C1917;
  --cv-cream:#F2E9DC;
  --cv-caramel:#C8996A;
  --cv-amber:#E0A85A;
  --cv-paper:#FBF7F0;
  --cv-display:"Unbounded",system-ui,sans-serif;
  --cv-cond:"Oswald",system-ui,sans-serif;
  --cv-mono:"IBM Plex Mono",ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--cv-black);color-scheme:dark;scroll-behavior:auto}
body{
  margin:0;background:var(--cv-black);color:var(--cv-cream);
  font-family:var(--cv-mono);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
::selection{background:var(--cv-caramel);color:var(--cv-black)}

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

/* ---------- nav ---------- */
.cv-nav{
  position:fixed;inset:0 0 auto 0;height:80px;z-index:50;
  border-bottom:1px solid rgba(242,233,220,.1);
  background:rgba(10,10,10,.75);backdrop-filter:blur(6px);
}
.cv-nav-inner{
  max-width:1400px;margin:0 auto;height:100%;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;
}
/* the wordmark is wide (≈4.26:1). Size it by WIDTH — capping height shrinks it to a smudge. */
.cv-logo img{width:172px;height:auto}
@media(min-width:768px){.cv-nav-inner{padding:0 48px}.cv-logo img{width:210px}}

/* CTA garment: a viewfinder. Corner brackets close in on hover. */
.cv-bracket{
  position:relative;display:inline-block;padding:8px 16px;
  font-family:var(--cv-mono);font-size:12px;font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;
  color:var(--cv-cream);text-decoration:none;transition:color .2s;
}
.cv-bracket:hover{color:var(--cv-amber)}
.cv-bracket .b{position:absolute;width:8px;height:8px;transition:all .3s}
.cv-bracket .tl{left:0;top:0;border-left:1px solid var(--cv-caramel);border-top:1px solid var(--cv-caramel)}
.cv-bracket .tr{right:0;top:0;border-right:1px solid var(--cv-caramel);border-top:1px solid var(--cv-caramel)}
.cv-bracket .bl{left:0;bottom:0;border-left:1px solid var(--cv-caramel);border-bottom:1px solid var(--cv-caramel)}
.cv-bracket .br{right:0;bottom:0;border-right:1px solid var(--cv-caramel);border-bottom:1px solid var(--cv-caramel)}
.cv-bracket:hover .tl{left:4px;top:4px}
.cv-bracket:hover .tr{right:4px;top:4px}
.cv-bracket:hover .bl{left:4px;bottom:4px}
.cv-bracket:hover .br{right:4px;bottom:4px}

/* ---------- hero: the cutout parallax rig ----------
 * `isolate` opens a stacking context so the layers paint ABOVE the section's
 * own background. Without it, negative z-index children escape upward and get
 * painted BEHIND the black — the entire collage renders invisibly. */
.cv-hero{position:relative;isolation:isolate;min-height:100dvh;width:100%;overflow:hidden;background:var(--cv-black)}
.cv-layer{position:absolute;inset:0;will-change:transform}
.cv-plate{z-index:0}
.cv-plate img{width:106%;height:112%;object-fit:cover;transform:translate(-3%,-6%)}
.cv-plate-fade{position:absolute;inset:0;background:linear-gradient(to top right,var(--cv-black),rgba(10,10,10,.55) 50%,rgba(10,10,10,.1))}
.cv-plate-fade-b{position:absolute;inset:auto 0 0 0;height:66%;background:linear-gradient(to top,var(--cv-black),rgba(10,10,10,.8) 50%,transparent)}
.cv-grain{
  z-index:1;pointer-events:none;
  background:url(/landing/assets/grain.png) repeat;background-size:320px 320px;
  mix-blend-mode:soft-light;opacity:.5;
}
.cv-scan{
  z-index:2;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(242,233,220,.05) 0 1px,transparent 1px 4px);
}
.cv-strip{
  position:absolute;right:-10%;top:16%;z-index:3;width:85%;max-width:820px;
  transform:rotate(-4deg);opacity:.85;pointer-events:none;will-change:transform;
}
.cv-cup{
  position:absolute;right:2%;top:10%;z-index:4;height:38%;width:auto;
  filter:drop-shadow(0 24px 60px rgba(0,0,0,.75));pointer-events:none;will-change:transform;
}
@media(min-width:768px){
  .cv-strip{right:-3%;top:12%;width:50%}
  .cv-cup{right:9%;top:13%;height:62%}
}
.cv-hero-inner{
  position:relative;z-index:10;max-width:1400px;margin:0 auto;
  min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:112px 24px 80px;
}
@media(min-width:768px){.cv-hero-inner{padding:112px 48px 112px}}
.cv-hero-copy{max-width:980px;will-change:transform}

/* ---------- ransom-note headline ----------
 * Every letter is a cutting from a different page. Wrapping happens at the WORD
 * level (.cv-word is nowrap) — letting the letters wrap tears "ИНТЕРНЕТ" into
 * "ИНТЕРНЕ / Т". */
.cv-h1{display:flex;flex-direction:column;gap:12px;margin:0;font-size:2.1rem;line-height:.95;letter-spacing:-.02em}
@media(min-width:640px){.cv-h1{font-size:3rem}}
@media(min-width:768px){.cv-h1{font-size:3.75rem}}
@media(min-width:1024px){.cv-h1{font-size:4.5rem}}
.cv-ransom{display:flex;flex-wrap:wrap;column-gap:.28em;row-gap:.14em}
.cv-word{display:inline-flex;white-space:nowrap;align-items:baseline}
.cv-ch{display:inline-block;margin-right:.03em;line-height:.9;color:var(--cv-cream)}
.cv-face-display{font-family:var(--cv-display);font-weight:900}
.cv-face-cond{font-family:var(--cv-cond);font-weight:700}
.cv-face-mono{font-family:var(--cv-mono);font-weight:700}
.cv-chip-cream{background:var(--cv-cream);color:var(--cv-black);padding:0 .08em}
.cv-chip-caramel{background:var(--cv-caramel);color:var(--cv-black);padding:0 .08em}

.cv-sub{margin:36px 0 0;max-width:44ch;font-size:14px;line-height:1.7;color:rgba(242,233,220,.75)}
@media(min-width:768px){.cv-sub{font-size:16px}}

/* CTA garment: an inked rubber stamp. It imprints on :active. */
.cv-stamp{
  position:relative;display:inline-flex;align-items:center;margin-top:40px;
  padding:16px 32px;background:var(--cv-caramel);color:var(--cv-black);
  font-family:var(--cv-cond);font-size:18px;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;text-decoration:none;
  box-shadow:3px 3px 0 0 var(--cv-cream);
  transition:transform .15s,box-shadow .15s,filter .15s,background .15s;
}
.cv-stamp::before{content:"";position:absolute;inset:0;border:2px solid rgba(10,10,10,.7);mix-blend-mode:multiply}
.cv-stamp:hover{background:var(--cv-amber);box-shadow:5px 5px 0 0 var(--cv-cream)}
.cv-stamp:active{
  transform:translate(3px,3px) skewX(-2deg);box-shadow:0 0 0 0 var(--cv-cream);
  filter:contrast(1.35) saturate(.7);
}

/* ---------- artwork sections ----------
 * Native aspect, full width, height auto: the baked type scales with the
 * viewport and is NEVER cover-cropped. */
.cv-art{position:relative;background:var(--cv-black);font-size:0}
.cv-art img{width:100%;height:auto;user-select:none}
.cv-art-wrap{position:relative}
.cv-poster{display:block;outline:none;transition:filter .5s}
.cv-poster:hover,.cv-poster:focus-visible{filter:brightness(1.15)}

/* transparent hitbox over a button that is PAINTED INTO the artwork */
.cv-hot{
  position:absolute;display:block;outline:none;
  box-shadow:0 0 0 2px transparent;
  transition:box-shadow .2s,transform .2s;
}
.cv-hot:hover,.cv-hot:focus-visible{box-shadow:0 0 0 2px var(--cv-amber)}
.cv-hot:active{transform:translateY(1px)}
.cv-hot-d{display:none}
@media(min-width:768px){
  .cv-hot-m{display:none}
  .cv-hot-d{display:block}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}