/* ================================================================
   BERNARD — landing stylesheet
   Palette: cream / graphite / ink, accent lives only in the
   "living square" (the ring's screen, abstracted).
   Type: Roboto Flex (display & body; кириллица, ось wdth как у Archivo)
         Playfair Display italic (вместо Instrument Serif)
         IBM Plex Mono (вместо Space Mono) · Archivo — только логотип
   ================================================================ */

:root{
  --cream:      #F1EDE3;
  --cream-deep: #E6E0D2;
  --ink:        #0C0C0A;
  --graphite:   #22221F;
  --stone:      #8B8578;   /* muted warm grey for secondary text */
  --line:       rgba(12,12,10,.14);
  --line-cream: rgba(241,237,227,.16);

  /* accent exists ONLY inside the living square */
  --sq-blue:  #2E3E66;
  --sq-amber: #C98F45;

  --font-display: "Roboto Flex", "Archivo", sans-serif;
  --font-brand:   "Archivo", "Roboto Flex", sans-serif;
  --font-serif:   "Playfair Display", "Instrument Serif", Georgia, serif;
  --font-mono:    "IBM Plex Mono", "Space Mono", monospace;

  --pad: clamp(20px, 5vw, 72px);
  --radius: 22px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "wdth" 100;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }

/* ---------- shared atoms ---------- */

.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stone);
}
.eyebrow--cream{ color: rgba(241,237,227,.55); }

.btn{
  display:inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .01em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  padding: 15px 28px;
  border-radius: 999px;
  transition: transform .25s ease, box-shadow .25s ease, opacity .2s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }
.btn--ink{ background: var(--ink); color: var(--cream); }
.btn--ink:hover{ box-shadow: 0 12px 30px rgba(12,12,10,.25); }
.btn--cream{ background: var(--cream); color: var(--ink); }
.btn--cream:focus-visible{ outline-color: var(--cream); }

/* the living square — signature element */
.living-square{
  display:inline-block;
  aspect-ratio: 1/1;
  border-radius: 26%;
  background:
    radial-gradient(120% 90% at 20% 85%, var(--sq-amber) 0%, transparent 55%),
    radial-gradient(130% 100% at 85% 20%, var(--sq-blue) 0%, transparent 60%),
    linear-gradient(160deg, #14141a 0%, #05050a 100%);
  background-size: 220% 220%;
  animation: drift 14s ease-in-out infinite alternate;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.living-square--sm{ width: 22px; }
.living-square--xl{
  width: clamp(180px, 26vw, 340px);
  border-radius: 18%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 40px 90px rgba(12,12,10,.35);
}
@keyframes drift{
  0%   { background-position: 0% 100%, 100% 0%, 0 0; }
  100% { background-position: 60% 40%, 40% 60%, 0 0; }
}

/* section paint */
.section--ink{ background: var(--ink); color: var(--cream); }
.section--graphite{ background: var(--graphite); color: var(--cream); }
.on-ink{ color: var(--cream); }

/* image placeholder if a file is missing */
figure{ background: var(--cream-deep); }
.section--ink figure, .section--graphite figure{ background: #17171a; }
img.is-missing{ opacity: 0; }

/* ---------- nav ---------- */

.nav{
  position: sticky; top: 0; z-index: 50;
  display:flex; align-items:center; justify-content:space-between;
  gap: 24px;
  padding: 14px var(--pad);
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav__brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
}
.nav__wordmark{
  font-family: var(--font-brand);
  font-weight: 800;
  font-variation-settings: "wdth" 118;
  letter-spacing: .06em;
  font-size: 18px;
}
.nav__links{ display:flex; gap: 28px; }
.nav__links a{
  font-size: 14px; text-decoration:none; opacity:.7;
  transition: opacity .2s ease;
}
.nav__links a:hover{ opacity: 1; }

/* ---------- hero ---------- */

.hero{
  padding: clamp(48px, 8vw, 110px) var(--pad) clamp(60px, 8vw, 120px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  grid-template-areas:
    "eyebrow eyebrow"
    "title   figure"
    "foot    figure";
  column-gap: clamp(24px, 4vw, 64px);
  align-items: end;
}
.hero__eyebrow{ grid-area: eyebrow; margin-bottom: clamp(24px, 4vw, 56px); }
.hero__title{
  grid-area: title;
  font-weight: 800;
  font-variation-settings: "wdth" 112;
  font-size: clamp(56px, 8.6vw, 140px);
  position: relative; z-index: 2; /* текст всегда поверх кадра */
  line-height: .92;
  letter-spacing: -.02em;
  text-transform: uppercase;
  display:flex; flex-direction:column;
}
.hero__line--outline{
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
  text-stroke: 2px var(--ink);
}
.hero__dot{ color: var(--sq-amber); }
.hero__figure{
  grid-area: figure;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3/4;
  margin-left: clamp(-80px, -6vw, -20px); /* image invades the type column */
  box-shadow: 0 40px 80px rgba(12,12,10,.18);
}
.hero__figure img{ width:100%; height:100%; object-fit:cover; }
.hero__foot{
  grid-area: foot;
  margin-top: clamp(32px, 4vw, 56px);
  display:flex; flex-direction:column; align-items:flex-start; gap: 22px;
}
.hero__claim{
  font-size: clamp(17px, 1.6vw, 21px);
  max-width: 34ch;
}
.hero__claim em{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.12em;
}

/* ---------- manifesto ---------- */

.manifesto{
  padding: clamp(80px, 12vw, 180px) var(--pad);
}
.manifesto__text{
  font-weight: 400;
  font-size: clamp(26px, 4vw, 52px);
  line-height: 1.22;
  letter-spacing: -.01em;
  max-width: 22ch;
  margin-top: 28px;
}
.manifesto__text em{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* ---------- features ---------- */

.feature{
  padding: clamp(70px, 10vw, 150px) var(--pad);
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.feature--reverse .feature__media{ order: 2; }
.feature__media{ position: relative; display:grid; place-items:center; }
.feature__figure{
  border-radius: var(--radius);
  overflow:hidden;
  aspect-ratio: 4/5;
  width: 100%;
}
.feature__figure img{ width:100%; height:100%; object-fit:cover; }
.feature__figure--offset{
  position:absolute;
  width: 58%;
  right: 0; bottom: -10%;
  box-shadow: 0 30px 70px rgba(12,12,10,.28);
}
.feature__copy h3{
  font-weight: 700;
  font-variation-settings: "wdth" 106;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.04;
  letter-spacing: -.015em;
  margin: 18px 0 22px;
}
.feature__copy p{ max-width: 46ch; font-size: 17px; }
.feature__copy em{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.08em;
}
.feature__copy p + p{ margin-top: 14px; }
.feature__note{
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--stone);
  margin-top: 22px !important;
}

/* ---------- specs ---------- */

.specs{ padding: clamp(70px, 9vw, 130px) var(--pad); }
.specs__grid{
  margin-top: 40px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-cream);
  border-left: 1px solid var(--line-cream);
}
.specs__grid > div{
  padding: 26px 24px 30px;
  border-right: 1px solid var(--line-cream);
  border-bottom: 1px solid var(--line-cream);
}
.specs__grid dt{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(241,237,227,.5);
  margin-bottom: 10px;
}
.specs__grid dd{ font-size: 16.5px; }

/* ---------- still ---------- */

.still{ padding-top: clamp(64px, 10vw, 140px); }
.still__intro{
  padding: 0 var(--pad);
  max-width: 40ch;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.still__title{
  font-weight: 800;
  font-variation-settings: "wdth" 112;
  text-transform: uppercase;
  font-size: clamp(40px, 6.6vw, 100px);
  line-height: .96;
  letter-spacing: -.02em;
  margin-top: 22px;
}
.still__title em{
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  font-weight: 400;
  letter-spacing: -.005em;
}
.still__figure{ aspect-ratio: 16/8; overflow:hidden; }
.still__figure img{ width:100%; height:100%; object-fit:cover; }

/* ---------- reserve ---------- */

.reserve{
  padding: clamp(90px, 13vw, 190px) var(--pad);
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.reserve__title{
  font-weight: 800;
  font-variation-settings: "wdth" 112;
  text-transform: uppercase;
  font-size: clamp(48px, 8.5vw, 128px);
  line-height: .95;
  letter-spacing: -.02em;
  margin: 22px 0 26px;
}
.reserve__title em{
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  font-weight: 400;
}
.reserve__sub{ max-width: 52ch; opacity:.85; font-size: 17px; }
.reserve__form{
  margin-top: 40px;
  display:flex; gap: 12px; flex-wrap:wrap; justify-content:center;
}
.reserve__input{
  font-family: var(--font-display);
  font-size: 15px;
  padding: 15px 22px;
  min-width: min(320px, 80vw);
  border-radius: 999px;
  border: 1px solid var(--line-cream);
  background: rgba(241,237,227,.06);
  color: var(--cream);
}
.reserve__input::placeholder{ color: rgba(241,237,227,.4); }
.reserve__input:focus-visible{ outline: 2px solid var(--cream); outline-offset: 2px; }
.reserve__fine{
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(241,237,227,.45);
}

.reserve__fine{ max-width: 60ch; }
.reserve__fine a{ color: inherit; }
.reserve__fine.is-error{ color: var(--sq-amber); }
.biz__form{ max-width: 720px; width:100%; }
.biz__form .reserve__input{ flex: 1 1 300px; min-width: 0; }
.reserve__input[aria-invalid="true"]{ border-color: var(--sq-amber); }

/* ---------- vault (data) ---------- */

.vault{ padding: clamp(80px, 11vw, 160px) var(--pad); background: var(--cream-deep); }
.vault__text{
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 44px);
  line-height: 1.24;
  letter-spacing: -.01em;
  max-width: 26ch;
  margin-top: 28px;
}
.vault__text em{ font-family: var(--font-serif); font-style: italic; }
.vault__sub{ margin-top: 28px; max-width: 46ch; font-size: 17px; color: #4a473f; }

/* ---------- plans ---------- */

.plans{ padding: clamp(70px, 9vw, 130px) var(--pad); }
.plans__grid{
  margin-top: 40px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.plan{
  padding: clamp(28px, 4vw, 52px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display:flex; flex-direction:column; align-items:flex-start;
}
.plan__name{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stone);
}
.plan__price{
  font-weight: 800;
  font-variation-settings: "wdth" 112;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1;
  letter-spacing: -.02em;
  margin: 18px 0 28px;
}
.plan__price span{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: .5em;
  letter-spacing: 0;
}
.plan__list{ list-style:none; margin-bottom: 36px; width:100%; flex:1; }
.plan__list li{ padding: 12px 0; border-top: 1px solid var(--line); font-size: 16.5px; }
.btn--outline{ background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.plans__fine{ margin-top: 22px; font-family: var(--font-mono); font-size: 12px; color: var(--stone); }

/* ---------- footer ---------- */

.footer{
  padding: 40px var(--pad) 48px;
  display:flex; align-items:center; justify-content:space-between;
  gap: 20px; flex-wrap:wrap;
  border-top: 1px solid var(--line);
}
.footer__brand{ display:flex; align-items:center; gap:10px; }
.footer__links{ display:flex; gap: 24px; flex-wrap:wrap; }
.footer__links a{ font-size:14px; text-decoration:none; opacity:.7; }
.footer__links a:hover{ opacity:1; }
.footer__legal{
  width:100%;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--stone);
}

/* ---------- reveal on scroll ---------- */

.reveal{ opacity:0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- responsive ---------- */

@media (max-width: 900px){
  .hero{
    grid-template-columns: 1fr;
    grid-template-areas: "eyebrow" "title" "figure" "foot";
  }
  .hero__figure{ margin-left: 0; margin-top: 36px; aspect-ratio: 4/5; }
  .feature{ grid-template-columns: 1fr; }
  .feature--reverse .feature__media{ order: 0; }
  .feature__figure--offset{ position:relative; width: 70%; margin: -60px 0 0 auto; bottom:auto; }
  .specs__grid{ grid-template-columns: 1fr 1fr; }
  .plans__grid{ grid-template-columns: 1fr; }
  .nav__links{ display:none; }
}
@media (max-width: 520px){
  .nav__cta{ padding: 11px 18px; font-size: 13.5px; }
  .specs__grid{ grid-template-columns: 1fr; }
}

/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .living-square{ animation: none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn{ transition:none; }
}