

.hero{ background:var(--bg-soft); padding:80px 0 76px; }
.hero-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:64px; align-items:center; }

.hero-badge{
  display:inline-block; margin:0 0 20px;
  background:var(--accent-light); color:var(--accent-dark);
  font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:7px 14px; border-radius:20px;
}
.hero h1{ font-size:46px; line-height:1.12; margin:0 0 20px; }
.hero p.lead{ color:var(--text-muted); font-size:18px; max-width:52ch; margin:0 0 32px; }

.hero-trust{
  list-style:none; margin:26px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px 26px;
}
.hero-trust li{
  position:relative; padding-left:22px;
  font-size:14px; color:var(--text-muted);
}
.hero-trust li::before{
  content:""; position:absolute; left:0; top:6px;
  width:13px; height:8px;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}

.hero-panel{
  background:#fff; border:1px solid var(--border); border-radius:20px;
  padding:32px; box-shadow:var(--shadow);
}
.hero-panel-title{
  font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-muted); margin:0 0 14px;
}
.hero-stack{ list-style:none; margin:0 0 28px; padding:0; display:grid; gap:11px; }
.hero-stack li{ position:relative; padding-left:26px; font-size:15px; font-weight:500; }
.hero-stack li::before{
  content:""; position:absolute; left:0; top:5px;
  width:14px; height:9px;
  border-left:2.5px solid var(--accent); border-bottom:2.5px solid var(--accent);
  transform:rotate(-45deg);
}

.hero-scope{
  font-size:14px; line-height:1.6; color:var(--text-muted);
  margin:0 0 22px;
}
.hero-scope strong{ color:var(--text); font-weight:700; }

.hero-proof{
  border-top:1px solid var(--border); padding-top:22px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}

.hero-stars{ margin:0; color:#D97706; font-size:17px; letter-spacing:2px; line-height:1; }
.hero-count{ margin:0; font-size:14.5px; color:var(--text-muted); }
.hero-count strong{ color:var(--text); font-weight:700; }

.section-head-large{ max-width:800px; }
.section-head-large .hero-badge{ margin-bottom:22px; }

.h2-line{ display:block; }
.h2-accent{ color:var(--accent); }

.principles{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }

.principles-pairs{ grid-template-columns:repeat(2,1fr); gap:28px; }

.principle{ padding:28px; border:1px solid var(--border); border-radius:var(--radius); }
.principle .num{
  width:36px; height:36px; border-radius:9px; background:var(--accent-light); color:var(--accent-dark);
  display:flex; align-items:center; justify-content:center; font-weight:700; margin-bottom:16px;
}

.principle-head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.principle-icon{
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  background:var(--accent-light); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
}
.principle-icon svg{ width:21px; height:21px; display:block; }
.principle h3{ font-size:17px; font-weight:700; margin:0 0 8px; }

.principle-head h3{ margin:0; }
.principle p{ font-size:14.5px; color:var(--text-muted); margin:0; }

.principle p + p{ margin-top:12px; }

.offer{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; }
.offer-visual{
  background:linear-gradient(135deg,#14141F 0%,#1E1B4B 100%); border-radius:20px; min-height:340px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color:#8B85F5; padding:40px; text-align:center;
}
.offer-visual .ov-label{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin:0; }
.offer-visual .ov-text{ color:#C7C7DA; font-size:15px; max-width:36ch; line-height:1.65; margin:0; }
.offer h2{ font-size:34px; }
.offer .hero-badge{ margin-bottom:18px; }
.offer ul{ list-style:none; margin:28px 0; padding:0; }
.offer li{ display:flex; gap:12px; margin-bottom:16px; font-size:15px; line-height:1.55; }

.offer li::before{ content:"\2713"; color:var(--accent); font-weight:700; flex-shrink:0; }
.offer li strong{ font-weight:700; color:var(--text); }
.offer li span{ color:var(--text-muted); }

.method-carousel{ position:relative; margin-top:48px; }

.method-scroller{
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:4px;
  
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.method-scroller::-webkit-scrollbar{ display:none; }
.method-scroller:focus-visible{ outline:3px solid var(--accent); outline-offset:4px; border-radius:6px; }

@media (prefers-reduced-motion: reduce){
  .method-scroller{ scroll-behavior:auto; }
}

.method-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:48px; height:48px; border-radius:50%;
  background:#fff; border:1px solid var(--border); box-shadow:var(--shadow);
  color:var(--accent); cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, border-color .15s, color .15s, opacity .15s;
}
.method-arrow svg{ width:22px; height:22px; display:block; }
.method-arrow:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.method-arrow:disabled{ opacity:.35; cursor:default; box-shadow:none; }
.method-arrow:disabled:hover{ background:#fff; border-color:var(--border); color:var(--accent); }
.method-arrow-prev{ left:-22px; }
.method-arrow-next{ right:-22px; }

.method{
  list-style:none; margin:0; padding:0; counter-reset:etape;
  display:grid; grid-auto-flow:column; grid-auto-columns:340px; gap:24px;
  align-items:stretch;
}

.method-step{
  counter-increment:etape;
  scroll-snap-align:start;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:28px; display:flex; flex-direction:column;
  transition:border-color .15s, box-shadow .15s;
}
.method-step:hover{ border-color:var(--accent); box-shadow:var(--shadow); }

.method-num{
  width:48px; height:48px; border-radius:14px; flex-shrink:0; margin-bottom:20px;
  background:var(--accent-light); color:var(--accent-dark);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:800; letter-spacing:.01em;
}
.method-num::before{ content:counter(etape,decimal-leading-zero); }

.method-body{ display:flex; flex-direction:column; flex:1; }
.method-body h3{ font-size:19px; font-weight:800; letter-spacing:-0.01em; margin:0 0 12px; }
.method-body p{ font-size:14.5px; color:var(--text-muted); margin:0 0 12px; }

.method-goal{
  margin:auto 0 0 !important; align-self:flex-start;
  background:var(--accent-light); border-radius:8px;
  padding:9px 14px; font-size:13.5px; color:var(--accent-dark) !important;
}
.method-goal strong{ font-weight:700; }

.method-close{
  background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius);
  padding:36px 40px; margin-top:52px;
}
.method-close h3{ font-size:21px; font-weight:800; letter-spacing:-0.01em; margin:0 0 14px; }
.method-close p{ font-size:15.5px; color:var(--text-muted); margin:0 0 12px; }
.method-close p:last-child{ margin-bottom:0; }

.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
.post{
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:#fff;
  text-decoration:none; color:inherit; display:block; transition:box-shadow .15s, border-color .15s;
}
.post:hover{ border-color:var(--accent); box-shadow:var(--shadow); }
.post .thumb{ height:140px; background:linear-gradient(135deg,var(--accent-light),var(--bg-soft)); }
.post .body{ padding:20px; }
.post .date{ font-size:12.5px; color:var(--text-muted); margin-bottom:8px; display:block; }
.post h3{ font-size:16px; font-weight:700; margin:0 0 8px; line-height:1.4; }
.post p{ font-size:13.5px; color:var(--text-muted); margin:0; }

.cta-final{
  background:linear-gradient(135deg,#14141F 0%,#1E1B4B 100%); color:#fff; text-align:center;
  border-radius:24px; padding:64px 40px;
}
.cta-final h2{ color:#fff; font-size:32px; }
.cta-final p{ color:#A7A7C4; max-width:480px; margin:0 auto 30px; }

.cta-final p:not(:last-of-type){ margin-bottom:14px; }
.cta-final .btn-row{ justify-content:center; }

@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; gap:44px; }
}

@media (max-width:900px){
  .principles, .principles-pairs, .posts{ grid-template-columns:1fr; }
  .section-head h2, .offer h2{ font-size:26px; }
  .offer-visual{ min-height:0; padding:32px 26px; }

  
  .method-arrow{ display:none; }
  .method{ grid-auto-columns:82vw; gap:16px; }
  .method-step{ padding:24px; }
  .method-num{ width:44px; height:44px; border-radius:13px; font-size:15px; margin-bottom:16px; }
  .method-body h3{ font-size:18px; }
  .method-close{ padding:28px 24px; }
  .method-close h3{ font-size:19px; }
  .offer{ grid-template-columns:1fr; }
  .hero{ padding:52px 0 56px; }
  .hero h1{ font-size:32px; }
  .hero p.lead{ font-size:16.5px; }
  .hero .btn-row .btn{ flex:1 1 auto; text-align:center; }
  .hero-panel{ padding:26px 22px; }
  section{ padding:56px 0; }
}
