:root {
  --paper: #f2efe7;
  --ink: #181719;

  --rx: 1.25deg;
  --ry: -1.65deg;
  --rz: -0.35deg;

  --surface-x: 31%;
  --surface-y: 24%;
  --diffuse-opacity: .27;

  --shadow-surface-x: 74%;
  --shadow-surface-y: 72%;
  --surface-shadow-opacity: .12;

  --sheen-x: 28%;
  --sheen-y: 27%;
  --sheen-angle: 116deg;
  --sheen-opacity: .12;

  --rim-top: .52;
  --rim-right: .13;
  --rim-bottom: .11;
  --rim-left: .34;

  --edge-angle: 116deg;
  --edge-brightness: .98;

  --shadow-x: 10px;
  --shadow-y: 17px;
  --shadow-blur: 16px;
  --shadow-opacity: .48;
  --shadow-rotate: -.4deg;
  --shadow-scale-x: .988;
  --shadow-scale-y: .925;

  --gloss-x: 20%;
  --gloss-y: 45%;
  --gloss-angle: 112deg;
  --gloss-opacity: .42;
  --logo-gloss-opacity: .17;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

html { background: #24222C; }

body {
  min-height: 100svh;
  overflow: hidden;
  color: var(--ink);
  background: #24222C;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  background:
    linear-gradient(rgba(36,34,44,.60), rgba(36,34,44,.80)),
    url("assets/bg.jpg") center / cover no-repeat;
  filter: contrast(1.06) saturate(.72);
}

/* Реальная древесная фактура, перекрашенная в семейство #24222C. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: -2;
}

/* Небольшой свет в центре и тёмная виньетка по краям, как у предметного кадра. */
body::after {
  z-index: -1;
  background:
    radial-gradient(
      ellipse 74% 64% at 50% 45%,
      rgba(72,67,84,.34) 0%,
      rgba(36,34,44,.08) 43%,
      rgba(16,15,21,.38) 73%,
      rgba(7,7,10,.72) 100%
    ),
    linear-gradient(108deg, rgba(255,255,255,.035), transparent 30%, rgba(0,0,0,.14) 78%);
}

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  width: 100%;
  padding: 28px;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  width: min(610px, 88vw);
  aspect-ratio: 1.75 / 1;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,.045), transparent 68%);
  filter: blur(34px);
  pointer-events: none;
}

.scene {
  position: relative;
  width: min(400px, calc(100vw - 34px));
  aspect-ratio: 1.75 / 1;
  perspective: 1100px;
  perspective-origin: 50% 46%;
  transform: translateZ(0);
}

.cast-shadow {
  position: absolute;
  inset: 3.8% 1.6% -4.6% 2.8%;
  border-radius: 1px;
  background: rgba(4,4,7,.88);
  filter: blur(var(--shadow-blur));
  opacity: var(--shadow-opacity);
  transform:
    translate3d(var(--shadow-x), var(--shadow-y), 0)
    rotate(var(--shadow-rotate))
    scale(var(--shadow-scale-x), var(--shadow-scale-y));
  transform-origin: 50% 50%;
  will-change: transform, filter, opacity;
}

.cast-shadow::after {
  content: "";
  position: absolute;
  left: 2.5%;
  right: 1%;
  bottom: -1.5%;
  height: 10%;
  border-radius: 50%;
  background: rgba(0,0,0,.66);
  filter: blur(4.5px);
}

.card {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));
  transform-origin: 50% 50%;
  will-change: transform;
}

.card__sheet {
  position: absolute;
  inset: 0;
  border-radius: 1px;
  background:
    linear-gradient(
      var(--edge-angle),
      #fffdf8 0%,
      #eee9df 32%,
      #cbc5ba 68%,
      #938e85 100%
    );
  box-shadow: inset 0 0 0 .5px rgba(34,30,25,.075);
  filter: brightness(var(--edge-brightness));
  backface-visibility: hidden;
}

.card__sheet--1 { transform: translateZ(-.65px); }
.card__sheet--2 { transform: translateZ(-1.30px); }
.card__sheet--3 { transform: translateZ(-1.95px); }
.card__sheet--4 { transform: translateZ(-2.60px); }
.card__sheet--5 { transform: translateZ(-3.25px); }
.card__sheet--6 { transform: translateZ(-3.90px); }

.card__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 1px;
  background: var(--paper);
  transform: translateZ(.7px);
  box-shadow:
    inset 0 0 0 .55px rgba(255,255,255,.82),
    inset 0 0 0 1.15px rgba(60,54,47,.03),
    0 .45px .65px rgba(255,255,255,.25);
  backface-visibility: hidden;
}

.card__texture {
  position: absolute;
  z-index: 1;
  inset: -2%;
  width: 104%;
  height: 104%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  opacity: .96;
  filter: saturate(.46) contrast(1.16) brightness(1.025);
}

.card__grain {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 110 110' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.47 1.08' numOctaves='4' seed='8' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.32'/%3E%3C/svg%3E");
  background-size: 108px 108px;
  filter: contrast(1.18);
}

.card__surface-shadow,
.card__diffuse,
.card__matte-sheen,
.card__edge-shading {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.card__surface-shadow {
  z-index: 3;
  background:
    radial-gradient(
      ellipse 100% 130% at var(--shadow-surface-x) var(--shadow-surface-y),
      rgba(72,61,49,.44) 0%,
      rgba(72,61,49,.19) 27%,
      rgba(72,61,49,.06) 53%,
      transparent 77%
    );
  opacity: var(--surface-shadow-opacity);
  mix-blend-mode: multiply;
  filter: blur(2.4px);
}

.card__diffuse {
  z-index: 4;
  background:
    radial-gradient(
      ellipse 82% 118% at var(--surface-x) var(--surface-y),
      rgba(255,255,255,.88) 0%,
      rgba(255,255,255,.44) 25%,
      rgba(255,255,255,.15) 49%,
      transparent 74%
    );
  opacity: var(--diffuse-opacity);
  mix-blend-mode: soft-light;
}

/* Широкий матовый блик: светит поверхность, но не превращает бумагу в пластик. */
.card__matte-sheen {
  z-index: 5;
  background:
    linear-gradient(
      var(--sheen-angle),
      transparent 0%,
      transparent 27%,
      rgba(255,255,255,.08) 36%,
      rgba(255,255,255,.60) 49%,
      rgba(255,255,255,.13) 61%,
      transparent 72%,
      transparent 100%
    );
  background-size: 240% 240%;
  background-position: var(--sheen-x) var(--sheen-y);
  opacity: var(--sheen-opacity);
  filter: blur(8px);
  mix-blend-mode: screen;
}

.card__edge-shading {
  z-index: 6;
  box-shadow:
    inset 0 1px 1.3px rgba(255,255,255,.28),
    inset 0 -1.7px 2.5px rgba(75,65,53,.12),
    inset 1px 0 1.5px rgba(255,255,255,.16),
    inset -1.5px 0 2.2px rgba(65,58,49,.08);
  opacity: .80;
  mix-blend-mode: multiply;
}

.rim {
  position: absolute;
  z-index: 7;
  display: block;
  pointer-events: none;
}

.rim--top {
  top: 0;
  left: .5%;
  right: .5%;
  height: 1px;
  opacity: var(--rim-top);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95) 16%, rgba(255,255,255,.48) 78%, transparent);
}

.rim--right {
  top: .7%;
  right: 0;
  bottom: .7%;
  width: 1px;
  opacity: var(--rim-right);
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.75) 18%, rgba(255,255,255,.34) 76%, transparent);
}

.rim--bottom {
  left: .5%;
  right: .5%;
  bottom: 0;
  height: 1px;
  opacity: var(--rim-bottom);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.58) 18%, rgba(255,255,255,.21) 78%, transparent);
}

.rim--left {
  top: .7%;
  bottom: .7%;
  left: 0;
  width: 1px;
  opacity: var(--rim-left);
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.80) 16%, rgba(255,255,255,.30) 78%, transparent);
}

.card__content {
  position: absolute;
  z-index: 10;
  inset: 0;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
}

.printed {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 .18px .22px rgba(0,0,0,.42);
  mix-blend-mode: multiply;
}

/* Лак/плотная типографская краска: отдельное отражение поверх живого текста. */
.printed::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: transparent;
  background:
    linear-gradient(
      var(--gloss-angle),
      transparent 0%,
      transparent 34%,
      rgba(255,255,255,.05) 40%,
      rgba(255,255,255,.92) 49%,
      rgba(255,255,255,.18) 56%,
      transparent 64%,
      transparent 100%
    );
  background-size: 245% 245%;
  background-position: var(--gloss-x) var(--gloss-y);
  -webkit-background-clip: text;
  background-clip: text;
  opacity: var(--gloss-opacity);
  mix-blend-mode: screen;
}

.printed--phone {
  position: absolute;
  top: 13.5%;
  left: 9.5%;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .015em;
}

.brand {
  position: absolute;
  z-index: 2;
  top: 11.2%;
  right: 8.4%;
  display: block;
  width: 116px;
  height: auto;
  text-decoration: none;
  transform: translateZ(.1px);
}

.brand img {
  display: block;
  width: 100%;
  height: auto;
  filter: contrast(1.03);
}

.brand__gloss {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--logo-gloss-opacity);
  background:
    linear-gradient(
      var(--gloss-angle),
      transparent 33%,
      rgba(255,255,255,.88) 49%,
      transparent 64%
    );
  background-size: 230% 230%;
  background-position: var(--gloss-x) var(--gloss-y);
  -webkit-mask: url("assets/logo.svg") center / contain no-repeat;
  mask: url("assets/logo.svg") center / contain no-repeat;
  mix-blend-mode: screen;
}

.identity {
  position: absolute;
  top: 52.5%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform: translate(-50%, -50%);
  text-align: center;
}

.printed--name {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: .012em;
}

.printed--role {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .035em;
  font-variant-caps: small-caps;
}

@media (max-width: 440px) {
  .hero { padding: 18px; }

  .printed--phone { font-size: 4.25vw; }
  .brand { width: 27vw; max-width: 116px; }
  .printed--name { font-size: 8.25vw; }
  .printed--role { font-size: 3.75vw; }
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .cast-shadow { will-change: auto; }
}