:root{
  --paper:      #FAF3E8;
  --paper-dim:  #F1E6D3;
  --ink:        #2C1810;
  --ink-soft:   #7A5C42;
  --line:       rgba(59,14,18,0.14);
  --signal:     #6B1620;
  --signal-2:   #4E0F16;
  --signal-ink: #FAF3E8;
  --placeholder:rgba(201,169,140,0.5);
  --error:      #B23A2E;
  --display: 'Playfair Display', serif;
  --body: 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

/* ---------- DARK THEME: Warm Charcoal & Gold ---------- */
[data-theme="dark"]{
  --paper:      #1B1714;
  --paper-dim:  #262019;
  --ink:        #F3E9DA;
  --ink-soft:   #B8A48A;
  --line:       rgba(243,233,218,0.12);
  --signal:     #D9A825;
  --signal-2:   #C4941B;
  --signal-ink: #1B1714;
  --placeholder:rgba(184,164,138,0.45);
  --error:      #E5786A;
}

*{ box-sizing:border-box; }
html,body{ margin:0; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  transition:background 0.2s ease, color 0.2s ease;
}

.page{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
}

/* ---------- HERO / VISUAL ---------- */
.visual{ position:relative; }
.hero-photo{ width:100%; position:relative; background:#1a1411; }
.hero-photo picture{ display:block; }
/* Phones: a square crop of the top of the poster (TLA logo, hall, figure).
   The poster's own text is set below as live, translatable HTML. */
.hero-photo img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  object-position:50% 0;
}
.hero-photo::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:22%;
  background:linear-gradient(to bottom, rgba(26,20,17,0), rgba(26,20,17,.55));
  pointer-events:none;
}

.hero-photo-placeholder{
  width:100%;
  aspect-ratio:4/3;
  background:
    repeating-linear-gradient(135deg, var(--paper-dim), var(--paper-dim) 10px, var(--paper) 10px, var(--paper) 20px);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
}
.hero-photo-placeholder span{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-soft);
  line-height:1.6;
}

.hero-body{
  padding:32px 24px 28px;
  text-align:center;
}

.mark{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:22px; }
.mark-text{
  font-family:var(--display);
  font-weight:600;
  font-size:20px;
  color:var(--ink);
}
.mark-text.small{ font-size:15px; }
.mark-rule{ width:64px; height:1px; background:var(--signal); }

.mark-logo{
  display:block;
  height:28px;
  width:auto;
  filter:brightness(0) saturate(100%); /* normalizes source PNG to pure black */
  transition:filter 0.2s ease;
}
.mark-logo.small{ height:20px; }
[data-theme="dark"] .mark-logo{
  filter:brightness(0) saturate(100%) invert(1); /* flips to white on dark background */
}

.hero-body h1{
  font-family:var(--display);
  font-weight:700;
  font-style:italic;
  font-size:clamp(28px,7vw,36px);
  line-height:1.15;
  margin:0 0 14px;
}

.hero-lead{
  color:var(--ink-soft);
  font-size:15px;
  max-width:34ch;
  margin:0 auto 26px;
}

.btn-cta{
  display:inline-block;
  background:var(--signal);
  color:var(--signal-ink);
  font-weight:700;
  text-decoration:none;
  padding:15px 28px;
  border-radius:8px;
  font-size:15px;
  letter-spacing:0.01em;
  border:none;
  cursor:pointer;
}
.btn-cta:hover{ background:var(--signal-2); }
.btn-cta-block{ display:block; width:100%; }

.hero-micro{
  margin:14px 0 0;
  font-size:12px;
  color:var(--ink-soft);
}

/* ---------- FEATURES ---------- */
.features{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:8px 24px 32px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin:0 24px;
}
.feature{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  padding-top:14px;
}
.feature svg{ width:20px; height:20px; flex:none; color:var(--signal); }

/* ---------- APPLY BLOCK ---------- */
.apply-block{
  padding:36px 24px 40px;
}
.apply-block h2{
  font-family:var(--display);
  font-style:italic;
  font-weight:600;
  font-size:24px;
  margin:0 0 20px;
  text-align:center;
}

.form label{ display:block; margin-bottom:14px; }
.form label span{
  display:block;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--ink-soft);
  margin-bottom:6px;
}
.form input{
  width:100%;
  padding:13px 14px;
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--ink);
  font-size:16px; /* 16px prevents iOS auto-zoom on focus */
  font-family:var(--body);
}
.form input::placeholder{ color:var(--placeholder); }
.form input:focus{ outline:2px solid var(--signal); outline-offset:1px; }

.form-hint{
  text-align:center;
  font-size:12px;
  color:var(--ink-soft);
  margin:12px 0 0;
}

.form-success{
  display:none;
  text-align:center;
  color:var(--signal);
  font-weight:600;
  padding:20px 0 0;
  margin:0;
}

.form.is-sent label,
.form.is-sent button{ display:none; }
.form.is-sent .form-success{ display:block; }
.form.is-error .form-hint{ color:var(--error); }

/* ---------- FOOTER ---------- */
.foot{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:24px;
  border-top:1px solid var(--line);
  font-size:12px;
  color:var(--ink-soft);
}
.foot a{ color:var(--ink-soft); }

/* ---------- THEME TOGGLE ---------- */
.theme-toggle{
  position:absolute;
  top:16px;
  right:16px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(250,243,232,0.35);
  background:rgba(27,23,20,0.35);
  backdrop-filter:blur(4px);
  color:#FAF3E8;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.03em;
  text-transform:uppercase;
  cursor:pointer;
}
.theme-toggle svg{ width:14px; height:14px; flex:none; }
.theme-toggle .theme-toggle-icon-dark{ display:none; }
.theme-toggle .theme-toggle-label-dark{ display:none; }
[data-theme="dark"] .theme-toggle .theme-toggle-icon-light{ display:none; }
[data-theme="dark"] .theme-toggle .theme-toggle-icon-dark{ display:inline-flex; }
[data-theme="dark"] .theme-toggle .theme-toggle-label-light{ display:none; }
[data-theme="dark"] .theme-toggle .theme-toggle-label-dark{ display:inline; }

/* ---------- LANGUAGE SWITCH ---------- */
/* Same treatment as the theme toggle (fixed, non-theme-reactive colors,
   since both sit on top of the hero photo and are designed to stay
   legible once a real photo replaces the placeholder). */
.lang-switch{
  position:absolute;
  top:16px;
  left:16px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:4px;
  border-radius:999px;
  border:1px solid rgba(250,243,232,0.35);
  background:rgba(27,23,20,0.35);
  backdrop-filter:blur(4px);
}
.lang-btn{
  appearance:none;
  border:none;
  background:transparent;
  color:#FAF3E8;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.03em;
  text-transform:uppercase;
  padding:6px 9px;
  border-radius:999px;
  cursor:pointer;
  line-height:1;
}
.lang-btn.is-active{
  background:#FAF3E8;
  color:#1B1714;
  font-weight:600;
}

/* ---------- TABLET (600–899px): most traffic here is from Instagram/
   Telegram bio links on phones, so up to this point we keep the mobile
   layout as a centered card rather than stretching it. ---------- */
@media (min-width:600px){
  body{ padding:32px 16px; }
  .page{
    border:1px solid var(--line);
    border-radius:16px;
    overflow:hidden;
  }
}

/* ---------- DESKTOP (900px+): split-screen layout for PC users.
   No user-agent sniffing — this is a live CSS breakpoint, so it reacts
   instantly to real window/viewport width and covers every device
   (including a resized browser) automatically. ---------- */
@media (min-width:900px){
  body{ padding:0; }
  .page{
    max-width:none;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:stretch;
    min-height:100vh;
    border:none;
    border-radius:0;
    overflow:visible;
  }

  .visual{
    order:2;
    position:sticky;
    top:0;
    align-self:start;
    height:100vh;
  }
  .hero-photo{ height:100%; }
  .hero-photo picture, .hero-photo img{ height:100%; aspect-ratio:auto; }
  .hero-photo img{ height:100% !important; }
  .hero-photo img{ object-position:50% 40%; border-left:1px solid var(--line); }
  .hero-photo::after{ display:none; }
  .hero-photo-placeholder{
    height:100%;
    aspect-ratio:auto;
    border-bottom:none;
    border-right:none;
    border-left:1px solid var(--line);
  }

  .content{
    order:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:0 64px;
  }

  .hero-body{
    text-align:left;
    padding:0 0 44px;
  }
  .mark{ align-items:flex-start; }
  .hero-body h1{ font-size:clamp(34px,3.4vw,48px); }
  .hero-lead{ margin:0 0 28px; max-width:44ch; }

  .features{
    margin:0;
    padding:28px 0;
  }

  .apply-block{
    padding:36px 0 40px;
    max-width:440px;
  }
  .apply-block h2{ text-align:left; }

  .foot{
    align-items:flex-start;
    padding:24px 0 0;
  }
}

/* Ошибка отправки заявки: не исчезает, даёт ссылку на менеджера. */
.apply-fallback{
  margin:12px 0 0;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(178,58,43,.10);
  color:#B23A2B;
  font-size:15px;
  line-height:1.45;
}
.apply-fallback a{ color:inherit; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
[data-theme="dark"] .apply-fallback{ background:rgba(255,140,120,.12); color:#FFB4A6; }


/* ---------- POSTER COPY (Oct 2026) ---------- */
.hero-kicker{
  margin:0 0 10px;
  font-size:15px;
  letter-spacing:0.02em;
  color:var(--signal);
  font-weight:500;
}
.hero-body h1{ text-wrap:balance; }

.features{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 16px;
  padding:24px 0 28px;
}
.feature{
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
  padding-top:0;
  font-size:14px;
  line-height:1.35;
}
.feature svg{ width:24px; height:24px; }

.foot{ flex-direction:column; gap:12px; text-align:center; }
.foot-tagline{
  margin:0 0 4px;
  font-family:var(--display);
  font-size:18px;
  color:var(--ink);
}
.ig-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 20px;
  border:1px solid var(--ink);
  border-radius:999px;
  color:var(--ink) !important;
  text-decoration:none;
  font-weight:500;
  font-size:15px;
}
.ig-pill svg{ width:20px; height:20px; }
.ig-pill:hover{ background:var(--ink); color:var(--paper) !important; }
.ig-pill:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }
.foot-motto{ margin:0; font-size:13px; letter-spacing:0.04em; color:var(--ink-soft); }

@media (min-width:900px){
  .features{ grid-template-columns:repeat(4,1fr); }
}

/* Language switch sits on the dark photo: keep it light on dark
   (theme.css styles .lang-btn for a beige header, so override here). */
.visual .lang-switch{ background:rgba(20,15,13,.55) !important; border:1px solid rgba(250,243,232,.3) !important; padding:4px; border-radius:8px; }
.visual .lang-btn{ color:#F6F0E6 !important; opacity:.8; }
.visual .lang-btn.is-active{ background:#F6F0E6 !important; color:#241619 !important; opacity:1; }
.visual .lang-btn:focus-visible{ outline:2px solid #F6F0E6; outline-offset:2px; }

@media (min-width:900px){
  /* Content is now taller than some laptop screens: keep the logo from being cut off at the top. */
  .content{ justify-content:safe center; padding-top:48px; padding-bottom:48px; }
}