/* ==========================================================================
   ПАКОМИР — stylesheet
   Naming: BEM  ·  Layout: CSS Grid + Flex  ·  Lean dark, bone-ink, saffron
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ---------- 1 · tokens ---------- */
:root{
  --bg:#101014;
  --bg-2:#16161b;
  --panel:#1b1b21;
  --panel-2:#202027;
  --line:#2c2c35;
  --line-soft:#23232a;

  --ink:#e9e4d7;      /* bone white */
  --ink-soft:#b7b1a3; /* warm grey */
  --ink-faint:#847f74;

  --saffron:#d59f3f;
  --saffron-2:#e9c574;
  --saffron-dim:#96752d;
  --saffron-ghost:rgba(213,159,63,.12);

  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'IBM Plex Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;

  --container:1200px;
  --pad:clamp(1.25rem, 5vw, 4.5rem);
  --gutter:clamp(1.1rem, 3.5vw, 2.5rem);
  --sect:clamp(4.5rem, 10vw, 8.5rem);

  --r:1px;
  --shadow:0 30px 70px -34px rgba(0,0,0,.85);
}

/* ---------- 2 · reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  min-height:100svh;
  display:flex; flex-direction:column;
  font-family:var(--sans);
  font-size:clamp(1rem,.55rem + .5vw,1.125rem);
  line-height:1.7;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
main{ flex:1 0 auto; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
::selection{ background:var(--saffron); color:#1a1408; }

/* ---------- 3 · grain + container ---------- */
.grain{
  position:fixed; inset:0; z-index:9; pointer-events:none;
  opacity:.05; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.container{
  width:100%; max-width:var(--container);
  margin-inline:auto; padding-inline:var(--pad);
}

/* ---------- 4 · type scale ---------- */
.eyebrow{
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; color:var(--saffron);
}
.eyebrow--muted{ color:var(--ink-faint); }
.sec-title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.1rem,1.1rem + 3.4vw,3.6rem);
  line-height:1.05; letter-spacing:-.01em; margin-top:.55rem;
}
.lead{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.3rem,.9rem + 1.1vw,1.85rem);
  line-height:1.42; color:var(--ink);
}
.prose{ font-size:1.06rem; line-height:1.8; color:var(--ink-soft); max-width:62ch; }
.prose + .prose{ margin-top:1.25rem; }
.prose a{ color:var(--saffron-2); border-bottom:1px solid var(--saffron-dim); }
.prose a:hover{ color:var(--saffron); border-color:var(--saffron); }

/* ---------- 5 · header ---------- */
.site-head{
  position:sticky; top:0; z-index:40;
  background:rgba(16,16,20,.84);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.site-head__inner{
  display:flex; align-items:center; gap:1.5rem;
  padding-block:.85rem;
}
.brand{ display:flex; align-items:center; gap:.75rem; flex-shrink:0; }
.brand__mark{ width:27px; height:27px; display:block; }
.brand__name{
  font-family:var(--serif); font-weight:600; font-size:1.35rem;
  letter-spacing:.03em; line-height:1;
}
.site-nav{ margin-left:auto; }
.site-nav__list{ display:flex; gap:clamp(.7rem,2vw,1.7rem); }
.site-nav__link{
  position:relative; font-size:.86rem; letter-spacing:.01em;
  color:var(--ink-soft); padding-block:.35rem; transition:color .25s;
}
.site-nav__link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--saffron); transition:width .3s ease;
}
.site-nav__link:hover{ color:var(--ink); }
.site-nav__link:hover::after,
.site-nav__link.is-active::after{ width:100%; }
.site-nav__link.is-active{ color:var(--ink); }
.site-head__actions{ display:flex; align-items:center; gap:.85rem; }

/* ---------- 6 · buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--sans); font-size:.85rem; font-weight:600; letter-spacing:.01em;
  padding:.85em 1.5em; border-radius:var(--r); cursor:pointer;
  border:1px solid transparent;
  transition:transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
}
.btn--ghost{
  background:transparent; border-color:var(--line); color:var(--ink);
}
.btn--ghost:hover{ border-color:var(--saffron); color:var(--saffron-2); transform:translateY(-2px); }
.btn--saffron{ background:var(--saffron); color:#1a1408; border-color:var(--saffron); }
.btn--saffron:hover{ background:var(--saffron-2); border-color:var(--saffron-2); transform:translateY(-2px); }

/* ---------- 7 · hero ---------- */
.hero{ background:var(--bg-2); border-bottom:1px solid var(--line-soft); }
.hero__inner{ padding-block:clamp(4rem,9vw,8rem); }
.hero__grid{
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:1fr; align-items:center;
}
.hero__media{ position:relative; }
.hero__media::before{
  content:""; position:absolute; top:1.5rem; right:-1.5rem;
  bottom:-1.5rem; left:1.5rem; border:1px solid var(--line);
  z-index:0; pointer-events:none;
}
.hero__frame{ position:relative; z-index:1; }
.hero__media .frame{ aspect-ratio:4/5; }
.hero__tag{
  position:absolute; top:-.85rem; left:-.85rem; z-index:2;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:#1a1408; background:var(--saffron);
  padding:.4em .85em;
}
.hero__title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.9rem,1.3rem + 6vw,5.6rem);
  line-height:1.02; letter-spacing:-.015em; margin-top:.7rem;
}
.hero__title em{ font-style:italic; color:var(--saffron-2); }
.hero__subtitle{
  margin-top:1.4rem; font-size:1.1rem; color:var(--ink-soft);
  max-width:46ch; line-height:1.7;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.1rem; }
.hero__meta{
  display:flex; flex-wrap:wrap; gap:1rem 2rem; margin-top:2.7rem;
  padding-top:1.5rem; border-top:1px solid var(--line-soft);
}
.hero__meta-item{ display:flex; flex-direction:column; gap:.15rem; }
.hero__meta-item span{ font-family:var(--mono); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint); }
.hero__meta-item strong{ font-family:var(--serif); font-weight:500; font-size:1.15rem; color:var(--ink); }

/* ---------- 8 · generic section + head ---------- */
.section{ padding-block:var(--sect); }
.section--tint{ background:var(--bg-2); }
.section__head{
  display:grid; gap:1.1rem;
  grid-template-columns:1fr; margin-bottom:clamp(2.4rem,5vw,3.6rem);
  max-width:60ch;
}
.section__head--wide{ max-width:none; }
.section__head .lead{ margin-top:.35rem; }

/* ---------- 9 · feature grid ---------- */
.feature-grid{
  display:grid; gap:1px; background:var(--line-soft);
  grid-template-columns:1fr; border:1px solid var(--line-soft);
}
.feature{
  position:relative; background:var(--bg);
  padding:clamp(1.7rem,3vw,2.5rem);
  transition:background .35s ease;
}
.feature::before{
  content:""; position:absolute; top:0; left:0; height:2px; width:0;
  background:var(--saffron); transition:width .45s ease;
}
.feature:hover{ background:var(--panel); }
.feature:hover::before{ width:100%; }
.feature__no{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--saffron); }
.feature__title{ font-family:var(--serif); font-weight:600; font-size:1.55rem; margin-top:.95rem; }
.feature__text{ margin-top:.75rem; color:var(--ink-soft); font-size:1rem; line-height:1.7; }

/* ---------- 10 · stats ---------- */
.stats{ display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); grid-template-columns:1fr; }
.stat{ background:var(--bg-2); padding:clamp(1.9rem,3.5vw,2.8rem); }
.stat__num{ font-family:var(--serif); font-weight:500; font-size:clamp(3rem,2rem + 4vw,4.8rem); line-height:1; color:var(--saffron-2); }
.stat__label{ margin-top:.7rem; font-size:.95rem; color:var(--ink-soft); }
.stat__hint{ margin-top:.35rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }

/* ---------- 11 · cta band ---------- */
.cta{ background:var(--saffron-ghost); border-block:1px solid var(--line); }
.cta__inner{
  padding-block:clamp(3rem,7vw,5.5rem);
  display:grid; gap:1.8rem; grid-template-columns:1fr; align-items:center;
}
.cta__title{ font-family:var(--serif); font-weight:500; font-size:clamp(2rem,1.2rem + 3vw,3.4rem); line-height:1.06; }
.cta__lead{ color:var(--ink-soft); max-width:44ch; margin-top:.5rem; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.6rem; }

/* ---------- 12 · faq ---------- */
.faq{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:clamp(1.2rem,3vw,1.7rem) 0;
  font-family:var(--serif); font-weight:500; font-size:1.35rem; color:var(--ink);
  transition:color .25s;
}
.faq__q:hover{ color:var(--saffron-2); }
.faq__q::after{
  content:"+"; font-family:var(--mono); font-size:1.5rem; line-height:1;
  color:var(--saffron); transition:transform .35s ease;
}
.faq__item.is-open .faq__q::after{ transform:rotate(45deg); }
.faq__a{
  overflow:hidden; max-height:0; opacity:0;
  transition:max-height .4s ease, opacity .4s ease;
}
.faq__item.is-open .faq__a{ max-height:340px; opacity:1; }
.faq__a p{ padding-bottom:1.4rem; color:var(--ink-soft); max-width:60ch; line-height:1.7; }

/* ---------- 13 · image frame ---------- */
.frame{
  position:relative; overflow:hidden; border-radius:var(--r);
  background:var(--panel); border:1px solid var(--line-soft);
}
.frame::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35));
}
.frame img{ position:relative; z-index:0; width:100%; height:100%; object-fit:cover; }

/* ---------- 14 · footer ---------- */
.site-foot{ background:var(--bg-2); border-top:1px solid var(--line); position:relative; }
.site-foot__inner{ padding-block:clamp(3.5rem,7vw,5.5rem) 0; }
.site-foot__grid{
  display:grid; gap:2.5rem 2rem; grid-template-columns:1fr;
}
.foot__brand{ max-width:34ch; }
.foot__tag{ font-family:var(--serif); font-size:1.35rem; line-height:1.35; margin-top:.9rem; color:var(--ink); }
.foot__desc{ margin-top:.85rem; color:var(--ink-soft); font-size:.95rem; line-height:1.7; }
.foot__col{ display:flex; flex-direction:column; gap:.65rem; }
.foot__col h4{
  font-family:var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:.5rem;
}
.foot__link{ color:var(--ink-soft); font-size:.95rem; transition:color .25s; }
.foot__link:hover{ color:var(--saffron-2); }
.site-foot__bar{
  margin-top:clamp(2.5rem,5vw,4rem); padding-block:1.4rem;
  border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:.75rem 1.5rem;
  align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; color:var(--ink-faint);
}

/* ---------- 15 · forms ---------- */
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field__label{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.field__input{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r);
  padding:.85em 1em; color:var(--ink); font-size:1rem; transition:border-color .25s;
}
.field__input:focus{ outline:none; border-color:var(--saffron); }
.field__input::placeholder{ color:var(--ink-faint); }
textarea.field__input{ resize:vertical; min-height:120px; font-family:inherit; }
.form-grid{ display:grid; gap:1.1rem; grid-template-columns:1fr; }
.form-row{ display:grid; gap:1.1rem; grid-template-columns:1fr; }

/* ---------- 16 · mobile nav toggle ---------- */
.site-head__toggle{
  display:none; width:44px; height:44px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--bg-2); cursor:pointer;
  align-items:center; justify-content:center; flex-shrink:0;
}
.site-head__toggle span{
  display:block; width:18px; height:2px; background:var(--ink);
  box-shadow:0 -5px 0 var(--ink), 0 5px 0 var(--ink);
}

/* ---------- 17 · responsive ---------- */
@media (min-width:640px){
  .feature-grid{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .form-row{ grid-template-columns:1fr 1fr; }
}

@media (min-width:900px){
  .hero__grid{ grid-template-columns:1.05fr .95fr; }
  .section__head{ grid-template-columns:auto 1fr; align-items:end; }
  .section__head .lead{ margin-top:0; }
  .feature-grid{ grid-template-columns:repeat(3,1fr); }
  .stats{ grid-template-columns:repeat(4,1fr); }
  .cta__inner{ grid-template-columns:1.4fr auto; }
  .site-foot__grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; }
}

@media (max-width:820px){
  .site-head__toggle{ display:flex; }
  .site-head__actions .btn{ display:none; }
  .site-nav{
    position:absolute; top:100%; left:0; right:0;
    display:none; padding:1rem 0 1.6rem;
    background:var(--bg-2); border-bottom:1px solid var(--line);
  }
  .site-nav.is-open{ display:block; }
  .site-nav__list{ flex-direction:column; gap:0; }
  .site-nav__link{
    display:block; padding:.9rem var(--pad); font-size:1rem;
    border-top:1px solid var(--line-soft);
  }
  .site-nav__link::after{ display:none; }
}

/* ---------- 18 · motion ---------- */
@keyframes rise{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:none; }
}
.hero__eyebrow,.hero__title,.hero__subtitle,.hero__actions,.hero__meta,.hero__media{
  animation:rise .8s cubic-bezier(.2,.7,.2,1) both;
}
.hero__title{ animation-delay:.08s; }
.hero__subtitle{ animation-delay:.16s; }
.hero__actions{ animation-delay:.24s; }
.hero__meta{ animation-delay:.32s; }
.hero__media{ animation-delay:.2s; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto !important; transition:none !important; }
}img,svg,video{max-width:100%;height:auto}*{box-sizing:border-box}body{margin:0}