/* =========================================================
   KRISTINA LIPINSKAYA — Tripwire landing
   Реконструкція design/Tripwire Landing.dc.html "один в один":
   кольори, типографіка, відступи, радіуси, тіні й поведінка
   взяті буквально з дизайн-документа. Mobile-only, колонка
   центрується на ширшому фоні.
   ========================================================= */

/* ---------- Fonts (self-hosted, з design/fonts) ---------- */
@font-face{font-family:'Playfair Display';src:url('fonts/PlayfairDisplay-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Playfair Display';src:url('fonts/PlayfairDisplay-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Playfair Display';src:url('fonts/PlayfairDisplay-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Playfair Display';src:url('fonts/PlayfairDisplay-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Playfair Display';src:url('fonts/PlayfairDisplay-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Manrope';src:url('fonts/Manrope-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('fonts/Manrope-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('fonts/Manrope-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('fonts/Manrope-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('fonts/Manrope-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap;}

/* ---------- Reset ---------- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:#DDD3C6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,p,div{margin:0;}
a{color:#40302A;text-decoration:none;}
a:hover{color:#6B5545;}
img{display:block;width:100%;height:100%;object-fit:cover;}
button{font-family:inherit;border:none;background:none;cursor:pointer;padding:0;}

/* ---------- Page shell ---------- */
.page{
  background:#DDD3C6;
  min-height:100vh;
  display:flex;
  justify-content:center;
}
.column{
  width:100%;
  max-width:440px;
  background:#EEE7DC;
  color:#2A231E;
  font-family:'Manrope',sans-serif;
  position:relative;
  overflow:hidden;
  padding-bottom:96px;
}

/* ---------- Shared bits ---------- */
.eyebrow{
  font:600 11px/1 'Manrope';
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#9C8A78;
  margin-bottom:14px;
}
.eyebrow-dark{ color:#B49C82; }

.h2{
  font-family:'Playfair Display';
  font-weight:600;
  font-size:27px;
  line-height:1.18;
  text-transform:uppercase;
  color:#2A231E;
}

.gold{ color:#D8BE9E; }

.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  border-radius:999px;
  padding:19px 24px;
  font:700 13px/1 'Manrope';
  letter-spacing:.11em;
  text-transform:uppercase;
}
.btn-dark{ background:#40302A; color:#FBF8F3; }
.btn-light{ background:#FBF8F3; color:#40302A; }
.dot{ opacity:.55; }

/* ---------- Header (поверх hero, не sticky) ---------- */
.site-header{
  position:absolute;
  top:0; left:0; right:0;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 22px;
}
.logo{
  font-family:'Playfair Display';
  font-weight:500;
  font-size:16px;
  letter-spacing:.14em;
  color:#40302A;
}
.burger{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.burger span{
  display:block;
  width:26px;
  height:1.5px;
  background:#40302A;
}

/* ---------- 1. HERO ---------- */
.hero{ position:relative; }
.hero-photo{
  height:660px;
  background-image:url('images/hero4.jpg');
  background-size:cover;
  background-position:50% 8%;
  position:relative;
}
.hero-gradient{
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,
    rgba(243,238,230,.96) 0%,
    rgba(243,238,230,.82) 26%,
    rgba(243,238,230,.4) 42%,
    rgba(238,231,220,0) 58%,
    rgba(238,231,220,0) 76%,
    rgba(238,231,220,1) 100%);
}
.hero-text-wrap{
  position:absolute;
  top:92px; left:20px; right:20px;
  text-align:center;
  padding:14px 8px 30px;
  background:radial-gradient(ellipse 78% 62% at 50% 46%,
    rgba(243,238,230,.9) 0%,
    rgba(243,238,230,.5) 58%,
    rgba(243,238,230,0) 82%);
}
.hero-eyebrow{
  font:600 11px/1.5 'Manrope';
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#8A7563;
  margin-bottom:20px;
}
.hero-title{
  font-family:'Playfair Display';
  font-weight:600;
  font-size:33px;
  line-height:1.13;
  letter-spacing:.005em;
  text-transform:uppercase;
  color:#2A231E;
  text-shadow:0 1px 14px rgba(243,238,230,.92), 0 0 4px rgba(243,238,230,.9);
}
.hero-card{
  margin:-104px 18px 0;
  position:relative;
  z-index:5;
  background:#FBF8F3;
  border-radius:26px;
  padding:28px 24px 26px;
  box-shadow:0 26px 54px -26px rgba(42,30,20,.5);
}
.hero-desc{
  font:400 15.5px/1.62 'Manrope';
  color:#4A4038;
  margin-bottom:22px;
}
.hero-desc strong{ font-weight:700; color:#2A231E; }
.hero-fine{
  margin:15px 0 0;
  text-align:center;
  font:400 12.5px/1.5 'Manrope';
  color:#9C8A78;
}

/* ---------- Statement band ---------- */
.statement{
  background:#40302A;
  color:#EAD9C6;
  padding:46px 26px;
  margin-top:44px;
}
.statement-text{
  font-family:'Playfair Display';
  font-weight:400;
  font-size:24px;
  line-height:1.42;
  color:#F3E7D6;
}
.statement-text em{ font-style:italic; color:#FBF8F3; }

/* ---------- Numbered list sections (Діагностика / Воронка) ---------- */
.numbered-list-section{ padding:56px 22px 12px; }
.numbered-list-section .h2{ margin-bottom:8px; }
.funnel-section{ padding:8px 22px 52px; }

.numbered-list{
  border-bottom:1px solid rgba(42,35,30,.13);
  margin-top:22px;
}
.numbered-item{
  display:flex;
  gap:16px;
  padding:22px 0;
  border-top:1px solid rgba(42,35,30,.13);
}
.numbered-n{
  font:600 30px/1 'Playfair Display';
  color:#B49C82;
  flex:none;
  width:42px;
}
.numbered-title{
  font:700 16px/1.35 'Manrope';
  color:#2A231E;
  margin-bottom:7px;
}
.numbered-desc{
  font:400 14.5px/1.6 'Manrope';
  color:#5C5148;
}

/* ---------- 3. Механіка ---------- */
.mechanics{ padding:52px 22px; }
.mechanics .h2{
  font-size:26px;
  line-height:1.2;
  margin-bottom:14px;
}
.mechanics-intro{
  font:400 15px/1.6 'Manrope';
  color:#5C5148;
  margin-bottom:30px;
}
.timeline{ position:relative; }
.timeline-line{
  position:absolute;
  left:19px; top:22px; bottom:26px;
  width:1px;
  background:rgba(180,156,130,.55);
}
.timeline-item{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding-bottom:26px;
  position:relative;
}
.timeline-dot{
  flex:none;
  width:40px; height:40px;
  border-radius:999px;
  border:1px solid #B49C82;
  background:#EEE7DC;
  display:flex;
  align-items:center;
  justify-content:center;
  font:500 16px/1 'Playfair Display';
  color:#40302A;
  position:relative;
  z-index:1;
}
.timeline-text{
  font:600 15.5px/1.5 'Manrope';
  color:#2A231E;
  padding-top:9px;
}

/* ---------- Quote plates ---------- */
.quote-plate{
  padding:28px 24px;
  background:#40302A;
  border-radius:20px;
  margin-top:20px;
}
.mechanics .quote-plate{ margin-top:6px; }
.quote-mark{
  font-family:'Playfair Display';
  font-size:34px;
  line-height:0;
  color:#B49C82;
  height:16px;
}
.quote-text{
  font:italic 400 19px/1.45 'Playfair Display';
  color:#F3E7D6;
}
.contents-section .quote-text{ font:italic 400 18px/1.5 'Playfair Display'; }

.quote-plate-alt{
  background:#40302A;
  color:#EAD9C6;
  border-radius:20px;
  padding:28px 24px;
}
.quote-text-alt{
  font-family:'Playfair Display';
  font-weight:400;
  font-size:20px;
  line-height:1.4;
}
.quote-text-alt em{ font-style:italic; color:#FBF8F3; }

/* ---------- 5. Зміст гайду ---------- */
.contents-section{ background:#E4DBCC; padding:56px 22px; }
.contents-section .h2{ margin-bottom:26px; }
.content-cards{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:20px;
}
.content-card{
  background:#FBF8F3;
  border-radius:20px;
  padding:24px 22px;
  border:1px solid rgba(42,35,30,.06);
  box-shadow:0 14px 30px -22px rgba(42,30,20,.4);
}
.content-card-head{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom:11px;
}
.content-n{
  font:600 26px/1 'Playfair Display';
  color:#B49C82;
}
.content-title{
  font:700 16.5px/1.3 'Manrope';
  color:#2A231E;
}
.content-desc{
  font:400 14.5px/1.62 'Manrope';
  color:#5C5148;
}

/* ---------- 6. Автор ---------- */
.author-section{ padding:56px 22px; }
.author-section .h2{ margin-bottom:22px; }
.author-photo{
  width:100%;
  height:440px;
  border-radius:22px;
  overflow:hidden;
  margin-bottom:24px;
}
.author-photo img{ object-position:50% 22%; }
.author-text{
  font:400 15px/1.65 'Manrope';
  color:#4A4038;
  margin:0 0 24px;
}
.author-text strong{ font-weight:700; color:#2A231E; }
.author-text-last{ margin:24px 0 0; }

.figures-box{
  border:1px solid rgba(42,35,30,.15);
  border-radius:20px;
  overflow:hidden;
  margin-bottom:22px;
}
.figure-row{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 22px;
  border-top:1px solid rgba(42,35,30,.11);
}
.figure-value{
  font:500 25px/1 'Playfair Display';
  color:#40302A;
  flex:none;
  min-width:104px;
}
.figure-label{
  font:400 13px/1.4 'Manrope';
  color:#7A6E62;
}

/* ---------- 7. Кому підійде ---------- */
.audience-section{ background:#E4DBCC; padding:56px 22px; }
.audience-section .h2{ margin-bottom:26px; }
.audience-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.audience-item{
  display:flex;
  gap:15px;
  align-items:flex-start;
  background:#FBF8F3;
  border-radius:18px;
  padding:20px 20px;
}
.audience-chip{
  flex:none;
  width:38px; height:38px;
  border-radius:999px;
  background:#40302A;
  color:#EAD9C6;
  display:flex;
  align-items:center;
  justify-content:center;
  font:500 15px/1 'Playfair Display';
}
.audience-title{
  font:700 15.5px/1.35 'Manrope';
  color:#2A231E;
  margin-bottom:5px;
}
.audience-desc{
  font:400 14px/1.55 'Manrope';
  color:#5C5148;
}
.audience-summary{
  margin:24px 4px 0;
  font:italic 400 16px/1.55 'Playfair Display';
  color:#4A4038;
}

/* ---------- 8. Ціна ---------- */
.price-section{ position:relative; }
.price-photo{ height:340px; }
.price-photo img{ object-position:50% 40%; }
.price-card{
  margin:-92px 18px 0;
  position:relative;
  z-index:2;
  background:#FBF8F3;
  border-radius:26px;
  padding:34px 26px 30px;
  box-shadow:0 26px 54px -26px rgba(42,30,20,.5);
  text-align:center;
}
.price-value{
  font-family:'Playfair Display';
  font-weight:600;
  font-size:66px;
  line-height:1;
  color:#2A231E;
  margin-bottom:20px;
}
.price-desc{
  font:400 14.5px/1.62 'Manrope';
  color:#5C5148;
  margin-bottom:24px;
}
.price-desc strong{ font-weight:700; color:#2A231E; }
.price-fine{
  margin:15px 0 0;
  font:400 12.5px/1.5 'Manrope';
  color:#9C8A78;
}

/* ---------- 9. FAQ ---------- */
.faq-section{ padding:56px 22px; }
.faq-section .h2{ margin-bottom:24px; }
.faq-list{ border-bottom:1px solid rgba(42,35,30,.14); }
.faq-item{ border-top:1px solid rgba(42,35,30,.14); }
.faq-question{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  padding:20px 2px;
  text-align:left;
}
.faq-question span:first-child{
  font:600 15.5px/1.4 'Manrope';
  color:#2A231E;
}
.faq-icon{
  flex:none;
  font:400 22px/1 'Playfair Display';
  color:#B49C82;
  width:18px;
  text-align:center;
}
.faq-answer{ display:none; }
.faq-answer.open{ display:block; }
.faq-answer p{
  margin:0;
  padding:0 2px 22px;
  font:400 14.5px/1.62 'Manrope';
  color:#5C5148;
}

/* ---------- 10. Фінал ---------- */
.final-section{ position:relative; }
.final-photo{ height:430px; }
.final-photo img{ object-position:50% 28%; }
.final-panel{
  background:#40302A;
  color:#EAD9C6;
  padding:48px 26px 52px;
}
.final-panel .eyebrow-dark{ margin-bottom:20px; }
.final-text{
  font-family:'Playfair Display';
  font-weight:400;
  font-size:20px;
  line-height:1.5;
  color:#F3E7D6;
  margin-bottom:30px;
}
.final-text em{ font-style:italic; color:#FBF8F3; }

/* ---------- Footer ---------- */
.site-footer{
  background:#EEE7DC;
  padding:42px 22px 46px;
  text-align:center;
}
.footer-logo{
  font-family:'Playfair Display';
  font-weight:500;
  font-size:17px;
  letter-spacing:.14em;
  color:#2A231E;
  margin-bottom:20px;
}
.footer-links{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 14px;
  font:400 13px/1.4 'Manrope';
  color:#7A6E62;
  margin-bottom:18px;
}
.footer-links span{ color:#B9AB99; }
.footer-copy{
  font:400 12px/1 'Manrope';
  color:#A2937F;
}

/* ---------- Floating CTA (sticky) ---------- */
.fab{
  position:fixed;
  left:50%;
  bottom:16px;
  width:calc(100% - 32px);
  max-width:408px;
  z-index:60;
  transition:transform .38s cubic-bezier(.22,1,.36,1), opacity .3s ease;
  transform:translate(-50%,150%);
  opacity:0;
  pointer-events:none;
}
.fab.show{
  transform:translate(-50%,0);
  opacity:1;
  pointer-events:auto;
}
.btn-fab{
  box-shadow:0 16px 34px -14px rgba(42,30,20,.7);
}
.btn-fab .dot{ opacity:.5; }