/* ===== Reset & Base ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  /* Palette — Neo-Brutalism warm */
  --khaki-100:#dcd8d1;
  --khaki-200:#d1ccbf;
  --khaki-300:#c2bbae;
  --ink-800:#2a2a26;
  --ink-900:#1a1a18;
  --ink-950:#0f0f0e;
  --rust-500:#ba6d4b;
  --rust-600:#a35d3d;
  --snow:#fdfdfd;
  --snow-muted:#eaeaea;

  /* Semantic */
  --bg:var(--khaki-100);
  --surface:var(--ink-900);
  --text:var(--ink-900);
  --text-inv:var(--khaki-100);
  --text-muted:var(--khaki-300);
  --accent:var(--rust-500);
  --accent-dark:var(--rust-600);
  --border:var(--ink-900);

  /* Typography */
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --font-display:'Unbounded',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','Roboto Mono',monospace;
  --h1:clamp(2.2rem,5vw,3.6rem);
  --h2:clamp(1.6rem,3.5vw,2.4rem);
  --h3:clamp(1.1rem,2vw,1.35rem);
  --body:1rem;
  --small:0.875rem;
  --xs:0.75rem;

  /* Layout */
  --max-w:1200px;
  --section-py:clamp(4rem,8vw,7rem);
  --ease:cubic-bezier(0.33,1,0.68,1);
}

html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}

body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
ul{list-style:none}

.container{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem}

/* ===== Accent text ===== */
.accent{color:var(--accent)}

/* ===== Animations ===== */
@keyframes clipReveal{
  from{clip-path:inset(0 100% 0 0);opacity:0}
  to{clip-path:inset(0 0 0 0);opacity:1}
}
@keyframes fogClear{
  from{filter:blur(8px);opacity:0;transform:translateY(12px)}
  /* The end opacity is a token because this animation runs with fill-mode
     `both` -- it pins opacity forever and beats any plain rule that tries to
     dim the element afterwards. Set --fog-opacity to land somewhere below 1. */
  to{filter:blur(0);opacity:var(--fog-opacity,1);transform:translateY(0)}
}
@keyframes springPop{
  0%{transform:scale(0.6);opacity:0}
  70%{transform:scale(1.08)}
  100%{transform:scale(1);opacity:1}
}
@keyframes drawLine{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
@keyframes stamp{
  0%{transform:scale(1.6);opacity:0}
  60%{transform:scale(0.95)}
  100%{transform:scale(1);opacity:1}
}
@keyframes cardLift{
  from{opacity:0;transform:translateY(40px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes shine{
  to{transform:translateX(200%)}
}

/* Reveal system */
.reveal{opacity:0}
.reveal.visible{animation-fill-mode:both;animation-timing-function:var(--ease)}
.reveal--clip.visible{animation:clipReveal 0.8s var(--ease) var(--d,0s) both}
.reveal--fog.visible{animation:fogClear 0.7s var(--ease) var(--d,0s) both}
.reveal--spring.visible{animation:springPop 0.6s var(--ease) var(--d,0s) both}
.reveal--card.visible{animation:cardLift 0.7s var(--ease) var(--d,0s) both}

/* ===== Section titles ===== */
.section-title{
  font-family:var(--font-display);
  font-size:var(--h2);
  font-weight:800;
  text-align:center;
  margin-bottom:1rem;
  letter-spacing:-0.01em;
}
.section-subtitle{
  text-align:center;
  color:var(--ink-800);
  max-width:600px;
  margin:0 auto 3rem;
  font-size:var(--body);
  opacity:0.7;
}

/* ===== Divider line ===== */
.divider{
  height:1.5px;
  background:var(--border);
  transform-origin:left;
  margin:0 auto;
  max-width:var(--max-w);
}
.divider.visible{animation:drawLine 1s var(--ease) both}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;
  padding:0.8rem 1.8rem;
  border:1.5px solid var(--border);
  font-weight:600;font-size:var(--body);cursor:pointer;
  font-family:var(--font);
  background:transparent;color:var(--text);
  transition:transform 0.25s var(--ease),box-shadow 0.25s var(--ease),background 0.25s var(--ease),color 0.25s var(--ease);
}
.btn:hover{
  transform:translateY(-2px);
  background:var(--accent);color:var(--ink-900);
  box-shadow:0 6px 20px -6px rgba(186,109,75,0.35);
}
.btn:active{transform:translateY(0)}

.btn-primary{
  background:var(--accent);color:var(--ink-900);
}
.btn-primary:hover{
  background:var(--accent-dark);
  box-shadow:0 6px 24px -6px rgba(186,109,75,0.45);
}

.btn-outline{background:transparent;color:var(--text)}

/* Продукт ещё не продаётся: место кнопки занято, но нажимать нечего.
   Не <button disabled> — это не сломанный элемент управления, а надпись. */
.btn-soon{
  background:transparent;border-style:dashed;cursor:default;
  font-family:var(--font-mono);font-size:var(--small);font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;
  opacity:0.65;
}
.btn-soon:hover{transform:none;background:transparent;color:var(--text);box-shadow:none}

/* ===== Header ===== */
.header{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  padding:0.8rem 0;
  background:rgba(220,216,209,0.85);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1.5px solid var(--border);
}
.header__inner{display:flex;align-items:center;justify-content:space-between}

.logo{
  font-family:var(--font-display);font-size:1.3rem;font-weight:800;
  letter-spacing:-0.02em;position:relative;overflow:hidden;
  animation:stamp 0.6s var(--ease) both;
  display:inline-flex;align-items:center;gap:0.55rem;
}
/* Mark sits optically on the cap height, not on the baseline of the wordmark. */
.logo__mark{display:block;flex-shrink:0;margin-top:-2px}
/* shine sweep on hover */
.logo::after{
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(186,109,75,0.25),transparent);
  transform:skewX(-20deg);transition:none;pointer-events:none;
}
.logo:hover::after{animation:shine 0.6s var(--ease)}

.nav{display:flex;align-items:center;gap:2rem}
.nav__links{display:flex;gap:1.8rem}

.nav__links a{
  font-family:var(--font-mono);font-size:var(--xs);
  text-transform:uppercase;letter-spacing:0.1em;
  color:var(--ink-800);font-weight:500;
  position:relative;padding:0.2rem 0;
  transition:color 0.2s;
}
/* bracket hover */
.nav__links a::before,.nav__links a::after{
  font-weight:400;opacity:0;
  transition:opacity 0.2s,transform 0.2s;
}
.nav__links a::before{content:'[ ';transform:translateX(4px)}
.nav__links a::after{content:' ]';transform:translateX(-4px)}
.nav__links a:hover{color:var(--accent)}
.nav__links a:hover::before,.nav__links a:hover::after{opacity:1;transform:translateX(0)}

.nav .btn{padding:0.5rem 1.2rem;font-size:var(--xs);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.05em}

.hamburger{
  display:none;flex-direction:column;gap:5px;cursor:pointer;
  background:none;border:none;padding:4px;
}
.hamburger span{width:22px;height:2px;background:var(--text);transition:transform 0.3s,opacity 0.3s}

/* ===== Hero ===== */
.hero{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding-top:5rem;position:relative;overflow:hidden;
}

/* Grid texture — the schedule-cell mark used as a pattern rather than a sign.
   Reusable: wrap any section in .grid-bg > .grid-bg__mesh. It is texture, not
   branding, so it may share a screen with the logo. */
.grid-bg,.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.grid-bg__mesh,.hero__grid{
  position:absolute;inset:-50%;
  background-image:
    linear-gradient(rgba(26,26,24,0.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(26,26,24,0.06) 1px,transparent 1px);
  background-size:60px 60px;
}
/* On ink surfaces the same mesh has to lighten instead of darken. */
.grid-bg__mesh--inv{
  background-image:
    linear-gradient(rgba(220,216,209,0.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(220,216,209,0.07) 1px,transparent 1px);
}

.hero__content{position:relative;z-index:1;max-width:750px;padding:0 1.5rem}

.hero__title{
  font-family:var(--font-display);font-size:var(--h1);font-weight:800;
  line-height:1.15;letter-spacing:-0.02em;margin-bottom:1.2rem;
}

.hero__sub{
  font-size:clamp(1rem,2vw,1.15rem);color:var(--ink-800);
  margin-bottom:2.5rem;line-height:1.7;opacity:0.75;
}

.hero__ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.2rem}

.hero__note{
  font-family:var(--font-mono);font-size:var(--xs);
  color:var(--ink-800);opacity:0.5;letter-spacing:0.05em;
}

/* ===== Problem / Solution ===== */
.problems{padding:var(--section-py) 0}

.problems__grid{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--border)}

.problems__col{padding:2.5rem}
.problems__col+.problems__col{border-left:1.5px solid var(--border)}

.problems__col-title{
  font-family:var(--font-display);font-size:var(--h3);font-weight:700;
  margin-bottom:1.5rem;display:flex;align-items:center;gap:0.6rem;
}

.problems__item{
  display:flex;align-items:flex-start;gap:0.75rem;
  padding:0.65rem 0;font-size:var(--body);line-height:1.5;
  color:var(--ink-800);
}

.problems__icon{
  flex-shrink:0;font-family:var(--font-mono);font-weight:700;
  font-size:0.85rem;margin-top:2px;width:20px;text-align:center;
}
.problems__icon--bad{color:var(--accent)}
.problems__icon--good{color:var(--ink-900)}

/* ===== Modules ===== */
.modules{padding:var(--section-py) 0}
.modules__grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}

.module-card{
  background:var(--surface);color:var(--text-inv);
  border:1.5px solid var(--border);padding:2.5rem;
  transition:transform 0.3s var(--ease),box-shadow 0.3s var(--ease);
  position:relative;
}
.module-card:hover{
  transform:translateY(-6px);
  box-shadow:6px 6px 0 var(--border);
}

.module-card__icon{
  width:48px;height:48px;border:1.5px solid var(--text-inv);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.2rem;color:var(--accent);
}
.module-card__icon svg{width:24px;height:24px}

.module-card__title{
  font-family:var(--font-display);font-size:var(--h3);font-weight:700;margin-bottom:1.5rem;
}

.module-card__features{display:grid;gap:0.5rem}
.module-card__feature{
  display:flex;align-items:center;gap:0.65rem;
  font-size:var(--small);color:var(--text-muted);padding:0.4rem 0;
}
.module-card__feature-icon{flex-shrink:0;width:20px;height:20px;color:var(--accent)}
.module-card__feature-icon svg{width:16px;height:16px}

/* ===== Desktop & Mobile Actions ===== */
.nav__desktop-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.nav__mobile-actions {
  display: none;
}

/* ===== Modal ===== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease);
}
.modal.open {
  opacity: 1;
  pointer-events: auto;
}
.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 24, 0.6);
  backdrop-filter: blur(4px);
}
.modal__content {
  position: relative;
  z-index: 10;
  background: var(--snow);
  border: 3px solid var(--border);
  box-shadow: 6px 6px 0px var(--border);
  padding: 3rem 2.5rem;
  max-width: 480px;
  width: 100%;
  margin: 1.5rem;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.3s var(--ease);
}
.modal.open .modal__content {
  transform: scale(1) translateY(0);
}
.modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2rem;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  transition: transform 0.2s;
}
.modal__close:hover {
  transform: scale(1.1) rotate(90deg);
  color: var(--accent);
}
.modal__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 0.8rem;
  letter-spacing: -0.01em;
}
.modal__subtitle {
  font-size: var(--small);
  color: var(--ink-800);
  opacity: 0.8;
  margin-bottom: 2rem;
}
.modal__form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.modal__input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.modal__label {
  font-family: var(--font-mono);
  font-size: var(--xs);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.modal__input-wrapper {
  display: flex;
  align-items: center;
  border: 3px solid var(--border);
  background: var(--snow);
  transition: box-shadow 0.2s;
}
.modal__input-wrapper:focus-within {
  box-shadow: 4px 4px 0px var(--accent);
}
.modal__input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0.8rem 1rem;
  font-family: var(--font-mono);
  font-size: var(--body);
  font-weight: 600;
  color: var(--text);
  width: 100%;
}
.modal__input:focus {
  outline: none;
}
.modal__domain {
  padding-right: 1rem;
  font-family: var(--font-mono);
  font-size: var(--body);
  font-weight: 600;
  color: var(--ink-800);
  opacity: 0.6;
  user-select: none;
}
.modal__error {
  font-size: var(--xs);
  color: var(--accent);
  font-weight: 600;
  display: none;
}
.modal__error.visible {
  display: block;
}
.modal__submit-btn {
  width: 100%;
  border-width: 3px;
  box-shadow: 4px 4px 0px var(--border);
  transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.modal__submit-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--border);
  background: var(--accent-dark);
}
.modal__submit-btn:active {
  transform: translate(0, 0);
  box-shadow: 2px 2px 0px var(--border);
}

/* ===== Responsive ===== */
@media(max-width: 900px){
  .problems__grid,.modules__grid,.pricing__grid{grid-template-columns:1fr}
  .problems__col+.problems__col{border-left:none;border-top:1.5px solid var(--border)}
  .steps__grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .stats__grid{grid-template-columns:1fr;gap:1rem}
  .price-card--featured{transform:none;order:-1}
  .price-card--featured:hover{transform:translateY(-4px)}
  .footer__grid{grid-template-columns:1fr 1fr;gap:2rem}
}

@media(max-width: 700px){
  .nav__links{display:none}
  .nav__desktop-actions{display:none}
  .hamburger{display:flex}
  .nav__links.open{
    display:flex;flex-direction:column;position:absolute;
    top:100%;left:0;right:0;
    background:rgba(220,216,209,0.97);backdrop-filter:blur(12px);
    padding:1.5rem;gap:1rem;border-bottom:1.5px solid var(--border);
  }
  .nav__links.open a{font-size:var(--small)}
  .nav__mobile-actions{
    display:flex;
    flex-direction:column;
    gap:0.75rem;
    margin-top:1rem;
    border-top:1px solid rgba(0,0,0,0.1);
    padding-top:1rem;
  }
  .nav__mobile-actions .btn {
    width:100%;
  }
  .hero__title{font-size:clamp(1.7rem,7vw,2.2rem)}
  .footer__grid{grid-template-columns:1fr}
}

/* ===== Steps ===== */
.steps{padding:var(--section-py) 0}
.steps__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}

.step-card{
  border:1.5px solid var(--border);padding:2.5rem 2rem;text-align:center;
  transition:transform 0.3s var(--ease),box-shadow 0.3s var(--ease);
}
.step-card:hover{transform:translateY(-6px);box-shadow:6px 6px 0 var(--border)}

.step-card__number{
  font-family:var(--font-display);font-size:1.6rem;font-weight:800;
  color:var(--accent);margin-bottom:1rem;
}

.step-card__title{
  font-family:var(--font-display);font-size:var(--h3);font-weight:700;margin-bottom:0.6rem;
}

.step-card__desc{font-size:var(--small);color:var(--ink-800);opacity:0.7;line-height:1.6}

/* ===== Resilience timeline ===== */
.uptime{padding:var(--section-py) 0}

.uptime__timeline{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1.5px solid var(--border);
}

.uptime__step{padding:2.2rem 1.5rem 2rem;position:relative}
.uptime__step+.uptime__step{border-left:1.5px solid var(--border)}

/* Полоса сверху набирает цвет к последнему шагу: видно, что время идёт
   в одну сторону, без стрелок и нумерации. */
.uptime__step::before{
  content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:var(--accent);opacity:0.22;
}
.uptime__step:nth-child(2)::before{opacity:0.45}
.uptime__step:nth-child(3)::before{opacity:0.7}
.uptime__step--final::before{opacity:1}
.uptime__step--final{background:rgba(186,109,75,0.07)}

.uptime__time{
  font-family:var(--font-mono);font-size:1.5rem;font-weight:700;
  color:var(--accent);font-variant-numeric:tabular-nums;
}

.uptime__label{
  font-family:var(--font-display);font-size:var(--h3);font-weight:700;
  margin:0.4rem 0 0.7rem;
}

.uptime__desc{font-size:var(--small);line-height:1.55;opacity:0.72}

.uptime__proof{
  max-width:660px;margin:1.6rem auto 3.5rem;text-align:center;
  font-size:var(--small);line-height:1.6;opacity:0.72;
}

.uptime__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}

.uptime__card{
  border:1.5px solid var(--border);padding:2rem;
  transition:transform 0.3s var(--ease),box-shadow 0.3s var(--ease);
}
.uptime__card:hover{transform:translateY(-6px);box-shadow:6px 6px 0 var(--border)}

.uptime__card-title{
  font-family:var(--font-display);font-size:var(--h3);font-weight:700;
  margin-bottom:0.6rem;
}
.uptime__card-desc{font-size:var(--small);line-height:1.6;opacity:0.75}

@media(max-width: 900px){
  .uptime__timeline,.uptime__grid{grid-template-columns:1fr}
  .uptime__step+.uptime__step{border-left:none;border-top:1.5px solid var(--border)}
}

/* ===== Stats ===== */
.stats{padding:var(--section-py) 0;text-align:center}

.stats__badges{display:flex;justify-content:center;flex-wrap:wrap;gap:1.5rem;margin-bottom:3rem}

.stats__badge{
  border:1.5px solid var(--border);padding:0.5rem 1.2rem;
  font-family:var(--font-mono);font-size:var(--xs);text-transform:uppercase;
  letter-spacing:0.08em;display:flex;align-items:center;gap:0.5rem;
}

.stats__badge-dot{
  width:8px;height:8px;background:var(--accent);
  animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}

.stats__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}

.stat-card__number{
  font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);
  font-weight:800;color:var(--accent);margin-bottom:0.3rem;
}
.stat-card__label{font-size:var(--small);color:var(--ink-800);opacity:0.7}

/* ===== Pricing ===== */
.pricing{padding:var(--section-py) 0}
.pricing__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}

.price-card{
  background:var(--surface);color:var(--text-inv);
  border:1.5px solid var(--border);padding:2.5rem 2rem;position:relative;
  transition:transform 0.3s var(--ease),box-shadow 0.3s var(--ease);
  display:flex;
  flex-direction:column;
}
.price-card:hover{transform:translateY(-4px)}

.price-card--featured{border:2px solid var(--accent);transform:scale(1.03)}
.price-card--featured:hover{transform:scale(1.03) translateY(-4px)}

.price-card__badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:var(--ink-900);
  font-family:var(--font-mono);font-size:var(--xs);font-weight:700;
  padding:0.3rem 1rem;text-transform:uppercase;letter-spacing:0.08em;
}

.price-card__name{
  font-family:var(--font-display);font-size:var(--h3);font-weight:700;margin-bottom:0.6rem;
}

/* Не используется, пока цены не объявлены: разметка цены снята из index.html,
   стиль оставлен, чтобы вернуть её одной строкой. */
.price-card__price{
  font-family:var(--font-display);font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800;margin-bottom:0.3rem;
}
.price-card__price span{font-family:var(--font-mono);font-size:var(--small);font-weight:400;color:var(--text-muted)}

.price-card__desc{
  font-size:var(--small);color:var(--text-muted);margin-bottom:2rem;padding-bottom:2rem;
  border-bottom:1px solid rgba(220,216,209,0.15);
}

.price-card__features{display:grid;gap:0.65rem;margin-bottom:2rem}
.price-card__feature{
  display:flex;align-items:center;gap:0.6rem;
  font-family:var(--font-mono);font-size:var(--xs);color:var(--text-muted);
}
.price-card__feature-check{font-weight:700;flex-shrink:0;color:var(--accent)}
.price-card__feature--disabled{opacity:0.35}
.price-card__feature--disabled .price-card__feature-check{color:var(--text-muted)}

.price-card .btn{width:100%;margin-top:auto;border-color:var(--text-inv);color:var(--text-inv)}
.price-card .btn-primary{color:var(--ink-900)}
.price-card .btn:hover{background:var(--accent);color:var(--ink-900);border-color:var(--accent)}
/* Должно идти после правила выше: одинаковая специфичность, решает порядок. */
.price-card .btn-soon:hover{background:transparent;color:var(--text-inv);border-color:var(--text-inv);transform:none}

/* ===== FAQ ===== */
.faq{padding:var(--section-py) 0}
.faq__list{max-width:720px;margin:0 auto;display:grid;gap:0}

.faq__item{border-bottom:1.5px solid var(--border);transition:background 0.3s}

.faq__question{
  width:100%;padding:1.2rem 0;background:none;border:none;
  color:var(--text);font-family:var(--font);font-size:var(--body);font-weight:600;
  text-align:left;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  transition:color 0.2s;
}
.faq__question:hover{color:var(--accent)}

.faq__chevron{
  flex-shrink:0;width:12px;height:12px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform 0.3s var(--ease);
}
.faq__item.active .faq__chevron{transform:rotate(-135deg)}

.faq__answer{max-height:0;overflow:hidden;transition:max-height 0.4s var(--ease)}
.faq__answer-inner{
  padding:0 0 1.2rem;font-size:var(--small);
  color:var(--ink-800);opacity:0.75;line-height:1.7;
}

/* ===== Final CTA ===== */
.cta-final{padding:var(--section-py) 0;text-align:center}

.cta-final__box{
  background:var(--surface);color:var(--text-inv);
  border:1.5px solid var(--border);padding:4rem 2rem;position:relative;
}

.cta-final__title{
  font-family:var(--font-display);font-size:var(--h2);font-weight:800;margin-bottom:0.8rem;
}
.cta-final__sub{color:var(--text-muted);margin-bottom:2rem}

/* Quiet aside under a call to action -- pushed down and dimmed so it reads as
   a footnote instead of competing with the line above it. Declared after
   .hero__note so it wins the opacity when both are on one element. */
.note-faint{opacity:0.2;--fog-opacity:0.2;margin-top:1.4rem}
.cta-final__box .btn{border-color:var(--text-inv);color:var(--text-inv)}
.cta-final__box .btn-primary{background:var(--accent);color:var(--ink-900);border-color:var(--accent)}

/* ===== Footer ===== */
.footer{padding:4rem 0 2rem;position:relative}

.footer__line{
  height:1.5px;background:var(--accent);transform-origin:left;margin-bottom:3rem;
}
.footer__line.visible{animation:drawLine 1.2s var(--ease) both}

.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}

.footer__logo{
  font-family:var(--font-display);font-size:1.3rem;font-weight:800;margin-bottom:0.8rem;
  display:flex;align-items:center;gap:0.55rem;
}

.footer__desc{font-size:var(--small);color:var(--ink-800);opacity:0.7;line-height:1.7;max-width:280px}

.footer__col-title{
  font-family:var(--font-mono);font-size:var(--xs);font-weight:700;
  margin-bottom:1rem;text-transform:uppercase;letter-spacing:0.08em;
}

.footer__link{
  display:block;font-family:var(--font-mono);font-size:var(--xs);
  color:var(--ink-800);padding:0.3rem 0;transition:color 0.2s;
}
.footer__link:hover{color:var(--accent)}

.footer__bottom{
  border-top:1.5px solid var(--border);padding-top:1.5rem;
  text-align:center;font-family:var(--font-mono);font-size:var(--xs);
  color:var(--ink-800);opacity:0.6;letter-spacing:0.03em;
}