/* =========================================================
   KRISTINA LIPINSKAYA — «Скрипт продажів» tripwire landing
   Реконструкція design/Sales Script 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:104px;
}

/* ---------- 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:35px;
  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-first{ margin-bottom:14px; }
.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:44px 26px;
  margin-top:40px;
}
.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; }

/* ---------- Не-uppercase заголовки (29px) ---------- */
.h2-relaxed{
  font-family:'Playfair Display';
  font-weight:600;
  font-size:29px;
  line-height:1.16;
  color:#2A231E;
  margin-bottom:18px;
}
.h2-relaxed-tight{ margin-bottom:14px; }

/* ---------- 2. Що таке скрипт продажів ---------- */
.basics-section{ padding:52px 22px 12px; }
.basics-intro{
  margin:0 0 24px;
  font:400 15.5px/1.62 'Manrope';
  color:#4A4038;
}
.route-card{
  background:#E4DBCC;
  border-radius:20px;
  padding:22px 20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 16px;
}
.route-n{
  font:500 15px/1 'Playfair Display';
  color:#B49C82;
  margin-bottom:7px;
}
.route-t{
  font:400 13.5px/1.45 'Manrope';
  color:#4A4038;
}
.basics-quote{
  margin:24px 2px 0;
  font:italic 400 17px/1.5 'Playfair Display';
  color:#40302A;
}

/* ---------- Numbered list items (спільне для reasons) ---------- */
.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;
}

/* ---------- 3. Чому заявки не стають продажами ---------- */
.reasons-section{ padding:52px 22px; }
.reasons-intro{
  margin:0;
  font:400 15px/1.6 'Manrope';
  color:#5C5148;
}
.reasons-list{
  border-bottom:1px solid rgba(42,35,30,.13);
  margin-top:22px;
}
.reason-item{
  display:flex;
  gap:16px;
  padding:24px 0;
  border-top:1px solid rgba(42,35,30,.13);
}
.reason-item .numbered-title{ margin-bottom:9px; }
.reason-desc{
  margin:0;
  font:400 14.5px/1.6 'Manrope';
  color:#5C5148;
}
.reason-desc-first{ margin-bottom:8px; }
.reasons-quote{
  margin-top:26px;
  padding:26px 24px;
  background:#40302A;
  border-radius:20px;
}
.reasons-quote-inner{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.reasons-quote-arrow{
  flex:none;
  font:400 20px/1.3 'Playfair Display';
  color:#D8BE9E;
}
.reasons-quote-text1{
  margin:0 0 10px;
  font:400 16.5px/1.45 'Playfair Display';
  color:#F3E7D6;
}
.reasons-quote-text2{
  margin:0;
  font:italic 400 16.5px/1.45 'Playfair Display';
  color:#FBF8F3;
}

/* ---------- 4. Чому безкоштовні скрипти не працюють ---------- */
.free-section{ padding:8px 22px 52px; }
.free-intro{
  margin:0 0 22px;
  font:400 15px/1.6 'Manrope';
  color:#5C5148;
}
.free-card{
  background:#FBF8F3;
  border:1px solid rgba(42,35,30,.1);
  border-radius:20px;
  padding:24px 22px;
}
.free-card-label{
  font:600 11px/1 'Manrope';
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#9C8A78;
  margin-bottom:18px;
}
.free-list{
  display:flex;
  flex-direction:column;
  gap:13px;
}
.free-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.free-x{
  flex:none;
  font:400 13px/1.5 'Manrope';
  color:#B49C82;
}
.free-text{
  font:400 14.5px/1.5 'Manrope';
  color:#5C5148;
}

/* ---------- Quote plates (dark) ---------- */
.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; }

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

/* ---------- 5. Автор ---------- */
.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;
}

/* ---------- 6. Кому підійде ---------- */
.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;
}

/* ---------- 7. Ціна ---------- */
.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{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:10px;
  font-family:'Playfair Display';
  font-weight:600;
  font-size:62px;
  line-height:1;
  color:#2A231E;
}
.price-currency{
  /* Playfair Display не має гліфа ₴ — гривня набирається Manrope */
  font-family:'Manrope',sans-serif;
  font-weight:500;
  font-size:.56em;
  line-height:1;
  color:#40302A;
}
.price-desc{
  font:400 14.5px/1.62 'Manrope';
  color:#5C5148;
  margin:20px 0 24px;
}
.price-desc strong{ font-weight:700; color:#2A231E; }
.price-fine{
  margin:15px 0 0;
  font:400 12.5px/1.5 'Manrope';
  color:#9C8A78;
}

/* ---------- 8. Заперечення (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;
}

/* ---------- 9. Фінал ---------- */
.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-h2{
  margin:0 0 24px;
  font-family:'Playfair Display';
  font-weight:600;
  font-size:30px;
  line-height:1.16;
  color:#FBF8F3;
}
.final-h2 em{ font-style:italic; color:#D8BE9E; }
.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; }

.included-list{
  list-style:none;
  margin:0 0 30px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:13px;
}
.included-list li{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.included-check{
  flex:none;
  font:400 14px/1.5 'Manrope';
  color:#D8BE9E;
}
.included-list li span:last-child{
  font:500 15px/1.5 'Manrope';
  color:#F3E7D6;
}

/* ---------- 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;
}
.fab-pill{
  display:flex;
  align-items:center;
  gap:14px;
  background:#40302A;
  border-radius:999px;
  padding:10px 10px 10px 22px;
  box-shadow:0 16px 34px -14px rgba(42,30,20,.7);
}
.fab-info{ flex:1; min-width:0; }
.fab-name{
  font:600 12.5px/1.25 'Manrope';
  color:#F3E7D6;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fab-price{
  font:500 15px/1.25 'Playfair Display';
  color:#D8BE9E;
}
.fab-btn{
  flex:none;
  display:block;
  background:#FBF8F3;
  color:#40302A;
  border-radius:999px;
  padding:14px 22px;
  font:700 12.5px/1 'Manrope';
  letter-spacing:.11em;
  text-transform:uppercase;
}

/* ---------- Юридичні сторінки (оферта / приватність / контакти) ---------- */
.legal-column{ padding-bottom:0; }
.legal-header{
  position:static;
  justify-content:center;
  padding:24px 22px 8px;
}
.legal-section{ padding:24px 22px 56px; }
.legal-section .h2{ margin-bottom:26px; }
.legal-h2{
  font-family:'Playfair Display';
  font-weight:600;
  font-size:18px;
  line-height:1.3;
  color:#2A231E;
  margin:28px 0 12px;
}
.legal-p{
  font:400 14.5px/1.65 'Manrope';
  color:#4A4038;
  margin:0 0 14px;
}
.legal-p a{ text-decoration:underline; }
.legal-p strong{ font-weight:700; color:#2A231E; }
.legal-list{
  margin:0 0 14px;
  padding-left:20px;
  font:400 14.5px/1.65 'Manrope';
  color:#4A4038;
}
.legal-list li{ margin-bottom:6px; }
.legal-back{ margin-top:30px; max-width:280px; }