/* ============================================================
   AURORALITE — фирменные токены
   ============================================================ */
:root{
  --ink:        #1c1410;   /* почти чёрный, тёплый */
  --suit:       #6b4a2e;   /* коричневый костюм */
  --suit-deep:  #4e3520;   /* тёмный коричневый */
  --gold:       #c9a15c;   /* золото рамки */
  --gold-deep:  #a97f3d;
  --paper:      #ffffff;   /* белый фон, как на логотипе */
  --paper-warm: #f8f4ed;   /* тёплая подложка секций */
  --line:       #e7dfd2;
  --free:       #2e6b3f;   /* зелёная метка БЕСПЛАТНО */
  --radius: 10px;
  --shadow: 0 10px 30px rgba(28,20,16,.10);
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation:none!important; transition:none!important }
}

body{
  font-family:'PT Sans',Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-size:17px;
}
img,video{ max-width:100%; display:block }

/* Плавные переходы между страницами */
body{ animation:pageIn .45s ease both }
@keyframes pageIn{
  from{ opacity:0; transform:translateY(14px) }
  to  { opacity:1; transform:none }
}
body.leaving{
  opacity:0; transform:translateY(-10px);
  transition:opacity .26s ease, transform .26s ease;
}
a{ color:var(--suit) }
:focus-visible{ outline:3px solid var(--gold); outline-offset:2px }

h1,h2,h3{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.02em; line-height:1.15 }
.mono{ font-family:'JetBrains Mono',monospace }

.wrap{ max-width:1100px; margin:0 auto; padding:0 20px }

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.06em;
  font-size:15px; font-weight:600; text-decoration:none; cursor:pointer;
  padding:12px 22px; border-radius:6px; border:2px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(28,20,16,.18) }
.btn-gold{ background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#fff }
.btn-suit{ background:var(--suit); color:#fff }
.btn-line{ background:transparent; color:var(--suit-deep); border-color:var(--gold) }

/* ---------- Шапка ---------- */
header{
  background:#fff;
  border-bottom:2px solid var(--gold);
}
.nav{
  display:flex; flex-direction:column; align-items:center;
  gap:14px; padding:20px 0 16px;
}
.brand{ display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink) }
.brand img{ width:56px; height:56px; object-fit:contain }
.brand b{ font-family:'Oswald',sans-serif; font-size:24px; text-transform:uppercase; letter-spacing:.05em }
.nav-links{
  display:flex; gap:10px 20px; align-items:center;
  justify-content:center; flex-wrap:wrap;
}
.nav-links a{ text-decoration:none; color:var(--suit-deep); font-weight:700; font-size:15px }
.nav-links a:hover{ color:var(--gold-deep) }
.nav-links .btn{ font-size:13.5px; padding:9px 16px }

/* ---------- Герой ---------- */
.hero{ padding:64px 0 72px; position:relative; overflow:hidden }
.hero .wrap{ display:grid; grid-template-columns:1.2fr .8fr; gap:48px; align-items:center }
@media (max-width:860px){ .hero .wrap{ grid-template-columns:1fr; text-align:center } .hero-art{ margin:0 auto } }

.eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700;
  color:var(--gold-deep); text-transform:uppercase; letter-spacing:.18em; margin-bottom:14px;
}
.hero h1{ font-size:clamp(34px,5.2vw,58px); font-weight:700; margin-bottom:18px }
.hero h1 span{ color:var(--suit) }
.hero p.lead{ font-size:19px; max-width:52ch; margin-bottom:28px; color:#3d2f22 }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap }
@media (max-width:860px){ .hero-cta{ justify-content:center } }

/* Фирменная золотая рамка-«портал» — мотив с логотипа */
.hero-art{
  position:relative; width:min(360px,90%); aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
}
.hero-art::before{
  content:""; position:absolute; inset:0;
  border:10px solid transparent;
  border-image:linear-gradient(160deg,var(--gold) 0%,#e8cf9a 45%,var(--gold-deep) 100%) 1;
  transform:skewX(-4deg);
}
.hero-art img{ width:82%; position:relative }

/* Дымок сигары — единственная анимация страницы */
.smoke{
  position:absolute; top:8%; right:18%; width:3px; height:70px;
  border-radius:50%;
  background:linear-gradient(to top, rgba(107,74,46,.35), rgba(107,74,46,0));
  filter:blur(2px);
  animation:smoke 4s ease-in-out infinite;
}
@keyframes smoke{
  0%   { transform:translateY(0) scaleY(1);   opacity:.7 }
  50%  { transform:translateY(-16px) scaleY(1.25) translateX(4px); opacity:.35 }
  100% { transform:translateY(-32px) scaleY(1.4); opacity:0 }
}

/* ---------- Секции ---------- */
section{ padding:64px 0 }
.section-head{ margin-bottom:36px }
.section-head h2{ font-size:clamp(26px,3.4vw,38px) }
.section-head h2::after{
  content:""; display:block; width:72px; height:4px; margin-top:12px;
  background:linear-gradient(90deg,var(--gold),var(--gold-deep));
}
.section-head p{ margin-top:12px; max-width:64ch; color:#4a3a2b }

/* ---------- Каталог скриптов ---------- */
#scripts{ background:var(--paper-warm) }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:26px }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 2px 8px rgba(28,20,16,.05);
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow) }

/* Золотой уголок — продолжение мотива рамки */
.card{ position:relative }
.card::after{
  content:""; position:absolute; top:0; right:0; width:34px; height:34px;
  background:linear-gradient(225deg,var(--gold) 50%,transparent 50%);
}

.card video{ width:100%; aspect-ratio:16/9; background:#efe8db; object-fit:cover }
.card-body{ padding:20px 22px 22px; display:flex; flex-direction:column; gap:12px; flex:1 }

.tag{
  align-self:flex-start;
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding:4px 10px; border-radius:4px; color:#fff;
}
.tag-free{ background:var(--free) }
.tag-paid{ background:var(--suit) }
.tag-soon{ background:var(--gold-deep) }

.card h3{ font-size:21px }
.card p{ font-size:15.5px; color:#43362a; flex:1 }
.card .btn{ align-self:flex-start; font-size:13.5px; padding:10px 18px }

/* ---------- Фрагменты ---------- */
.frag{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 24px; text-align:left;
  cursor:pointer; font-family:inherit; width:100%;
  box-shadow:0 2px 8px rgba(28,20,16,.05);
  transition:transform .15s ease, box-shadow .15s ease;
}
.frag:hover{ transform:translateY(-4px); box-shadow:var(--shadow) }
.frag::after{
  content:""; position:absolute; top:0; right:0; width:34px; height:34px;
  background:linear-gradient(225deg,var(--gold) 50%,transparent 50%);
}
.frag h3{ font-size:21px; margin-bottom:8px }
.frag p{ font-size:15.5px; color:#43362a }
.frag-note{
  display:block; margin-top:14px; padding-top:12px;
  border-top:1px dashed var(--gold);
  font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700;
  letter-spacing:.06em; color:var(--gold-deep); text-transform:uppercase;
}
.frag-note[hidden]{ display:none }

/* ---------- База материалов ---------- */
#materials{ background:var(--paper-warm) }
.mat{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 24px;
  box-shadow:0 2px 8px rgba(28,20,16,.05);
}
.mat::after{
  content:""; position:absolute; top:0; right:0; width:34px; height:34px;
  background:linear-gradient(225deg,var(--gold) 50%,transparent 50%);
}
.mat h3{ font-size:24px; margin-bottom:6px }
.mat-sub{
  font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700;
  letter-spacing:.06em; color:var(--gold-deep); margin-bottom:16px;
}
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip{
  font-size:14px; font-weight:700; color:var(--suit-deep);
  padding:6px 14px; border:1px solid var(--gold); border-radius:999px;
  background:var(--paper-warm);
}
.mat-note{ margin-top:14px; font-size:15px; color:#4a3a2b }
.mat-grid{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) }
.mat-buy{
  margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  background:#fff; border:1px solid var(--gold); border-radius:var(--radius);
  padding:20px 24px; box-shadow:0 2px 8px rgba(28,20,16,.05);
}
.mat-price{
  font-family:'Oswald',sans-serif; font-size:clamp(24px,3.4vw,32px); font-weight:700;
  color:var(--suit-deep);
  padding-right:16px; border-right:3px solid var(--gold);
}
.mat-buy-text{ font-size:16px; color:#4a3a2b }

/* ---------- Как установить ---------- */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px }
.step{
  background:#fff; border:1px solid var(--line); border-left:5px solid var(--gold);
  border-radius:var(--radius); padding:22px;
}
.step b{ font-family:'Oswald',sans-serif; font-size:17px; text-transform:uppercase; display:block; margin-bottom:8px }
.step .mono{ font-size:14px; background:var(--paper-warm); padding:2px 6px; border-radius:4px }

/* ---------- Поддержка автора ---------- */
#donate{ background:var(--suit-deep); color:#f4ecdf }
#donate .section-head h2{ color:#fff }
#donate .section-head p{ color:#e7d9c2 }
.donate-box{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px;
  background:rgba(255,255,255,.06); border:1px solid rgba(201,161,92,.5);
  border-radius:var(--radius); padding:24px 28px;
}
.card-number{
  font-family:'JetBrains Mono',monospace; font-size:clamp(19px,3vw,26px);
  font-weight:700; letter-spacing:.06em; color:var(--gold);
}
#copyBtn{ border-color:var(--gold); color:var(--gold) }
#copyBtn:hover{ background:var(--gold); color:var(--suit-deep) }
.copy-note{ font-size:14px; color:#cbb289 }

/* ---------- Футер ---------- */
footer{ background:var(--ink); color:#c9bda9; padding:36px 0; font-size:15px }
footer .wrap{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center }
footer a{ color:var(--gold) }

/* ---------- Многостраничный сайт: дополнения ---------- */

/* Активный пункт меню */
.nav-links a.active{ color:var(--gold-deep); border-bottom:2px solid var(--gold); padding-bottom:2px }

/* Плитки разделов на главной */
.tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px }
.tile{
  position:relative; display:block; text-decoration:none; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; box-shadow:0 2px 8px rgba(28,20,16,.05);
  transition:transform .15s ease, box-shadow .15s ease;
}
.tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow) }
.tile::after{
  content:""; position:absolute; top:0; right:0; width:34px; height:34px;
  background:linear-gradient(225deg,var(--gold) 50%,transparent 50%);
}
.tile h3{ font-size:20px; margin-bottom:8px }
.tile p{ font-size:15px; color:#43362a; margin-bottom:14px }
.tile .go{
  font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--gold-deep);
}
#sections{ background:var(--paper-warm) }

/* Блок «О канале» на главной */
.about{ display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:start }
@media (max-width:860px){ .about{ grid-template-columns:1fr } }
.about-list{ list-style:none; display:grid; gap:14px }
.about-list li{
  background:#fff; border:1px solid var(--line); border-left:5px solid var(--gold);
  border-radius:var(--radius); padding:14px 18px; font-size:16px;
}
.about-list b{ color:var(--suit-deep) }

/* Заголовок внутренних страниц */
.page-head{ padding:52px 0 8px }
.page-head h1{ font-size:clamp(30px,4.4vw,46px); margin-bottom:14px }
.page-head h1::after{
  content:""; display:block; width:72px; height:4px; margin-top:14px;
  background:linear-gradient(90deg,var(--gold),var(--gold-deep));
}
.page-head p{ max-width:64ch; color:#4a3a2b; margin-top:10px }

/* ---------- Страница 3D просмотрщика ---------- */
.page-3d{ min-height:100vh; display:flex; flex-direction:column }
.page-3d main{ flex:1; display:flex; align-items:center; padding:56px 0 }
.stage{ text-align:center; max-width:640px; margin:0 auto }
.stage h1{ font-size:clamp(30px,4.6vw,46px); margin-bottom:18px }
.stage p{ font-size:18px; color:#3d2f22; margin-bottom:14px }
.dev-badge{
  display:inline-block; margin:22px 0 30px;
  font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep);
  border:1px dashed var(--gold); border-radius:6px; padding:10px 18px;
  background:var(--paper-warm);
}
.stage-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap }
.sketch{ margin:0 auto 30px; width:min(260px,70%); animation:floaty 5s ease-in-out infinite }
.sketch svg{ width:100%; height:auto; display:block }
.sketch path,.sketch line,.sketch rect{ fill:none; stroke:var(--gold); stroke-width:2; stroke-linejoin:round }
.sketch .deep{ stroke:var(--gold-deep) }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }

/* Утилита: тёплый фон секции */
.bg-warm{ background:var(--paper-warm) }

/* Кнопка «Скачать все» и подсказка на странице скриптов */
.page-head #downloadAll{ margin-top:22px }
.dl-hint{
  margin-top:12px; font-size:14px; color:#7a6a55;
}