* { box-sizing: border-box; }

:root {
  color-scheme: light;
  font-family: "Montserrat", Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --ink: #101b35;
  --blue: #064acb;
}

html { min-width: 320px; min-height: 100%; background: #d9efff; }
body { min-width: 320px; min-height: 100vh; margin: 0; }

.hero {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  padding: 5.5svh 20px;
  background: #d9efff url("../images/bg_hero.jpg") center / cover no-repeat;
}

.hero::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 36% 53% at 50% 47%, rgb(255 255 255 / 76%), rgb(255 255 255 / 48%) 66%, transparent 100%);
  content: "";
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(100%, 1100px);
  min-height: 89svh;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  animation: reveal 650ms ease-out both;
}

.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(9px, 1.2vw, 20px);
  margin: 0;
  color: #101b35;
  font-size: clamp(15px, 1.7vw, 27px);
  font-weight: 800;
  line-height: 1.2;
}
.eyebrow span {
  width: clamp(20px, 4vw, 64px);
  height: 3px;
  flex: 0 0 auto;
  border-radius: 3px;
  background: linear-gradient(90deg, #0646ec, #39c9ff);
}

.hero__title {
  display: flex;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
  margin: 0;
  color: #082b78;
  font-size: clamp(42px, 6.5vw, 94px);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: .88;
  text-shadow: 0 2px 0 rgb(255 255 255 / 50%), 0 5px 12px rgb(3 39 105 / 24%);
  text-transform: uppercase;
}
.hero__title span:first-child {
  background: linear-gradient(180deg, #082b78, #064acb 72%, #0875f5);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__title span:last-child {
  margin-top: .08em;
  font-size: .72em;
  letter-spacing: -.052em;
  white-space: nowrap;
  background: linear-gradient(180deg, #082b78, #064acb 72%, #0875f5);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.interface-pill {
  margin: 0;
  padding: .22em .8em .26em;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: 999px;
  background: linear-gradient(100deg, #169eff, #0644ec 68%, #0878ff);
  box-shadow: 0 4px 11px rgb(0 106 250 / 20%), inset 0 1px 1px rgb(255 255 255 / 40%);
  color: #fff;
  font-size: clamp(14px, 1.8vw, 25px);
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.version {
  margin: 0;
  padding-right: .08em;
  color: #0752dc;
  font-size: clamp(78px, 9.8vw, 148px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: .82;
  background: linear-gradient(180deg, #0875f5 0%, #064acb 58%, #082b78 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 9px rgb(32 172 255 / 38%)) drop-shadow(0 4px 2px rgb(0 37 115 / 22%));
}

.paint-strip {
  max-width: 100%;
  margin: 0;
  padding: .16em .48em .2em;
  background: #ffda0a;
  color: #101016;
  font-size: clamp(14px, 1.75vw, 26px);
  font-style: italic;
  font-weight: 900;
  line-height: 1.18;
  transform: rotate(-.5deg);
  text-transform: uppercase;
}

.description {
  max-width: 680px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(15px, 1.35vw, 20px);
  font-weight: 600;
  line-height: 1.4;
  text-wrap: pretty;
}
.description mark {
  padding: 0 .12em;
  background: linear-gradient(transparent 25%, #ffdc10 25%, #ffdc10 92%, transparent 92%);
  color: inherit;
  font-weight: 800;
}

.cta {
  min-height: 58px;
  margin-top: 0;
  padding: .65em 1.65em;
  border: 2px solid rgb(210 255 156 / 90%);
  border-radius: 999px;
  background: linear-gradient(180deg, #51dc1c, #16ad00 54%, #087d00);
  box-shadow: 0 5px 0 #057100, 0 10px 20px rgb(13 127 0 / 27%), inset 0 2px 3px rgb(255 255 255 / 45%);
  color: white;
  cursor: pointer;
  font: inherit;
  font-size: clamp(17px, 1.8vw, 26px);
  font-weight: 800;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgb(0 64 0 / 30%);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
  text-transform: uppercase;
}
.cta:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 7px 0 #057100, 0 13px 24px rgb(13 127 0 / 34%), inset 0 2px 3px rgb(255 255 255 / 50%);
}
.cta:active { transform: translateY(2px); }
.cta:focus-visible { outline: 3px solid white; outline-offset: 4px; box-shadow: 0 0 0 7px #0878ff, 0 5px 0 #057100; }

@keyframes reveal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 1440px) {
  .hero__content { width: min(100%, 1160px); }
  .description { max-width: 730px; }
}

@media (min-width: 768px) and (min-height: 901px) {
  .hero__title { margin-block: clamp(10px, 1.5svh, 22px); }
  .interface-pill { margin-block: clamp(4px, .8svh, 12px); }
  .paint-strip { margin-block: clamp(6px, 1svh, 15px); }
  .description { margin-block: clamp(8px, 1.5svh, 20px); }
  .cta { margin-top: clamp(10px, 2svh, 26px); }
}

/* Компактная вертикальная композиция для типичных ноутбуков и невысоких окон. */
@media (min-width: 768px) and (max-height: 900px) {
  .hero { padding-block: 14px; }
  .hero__content { min-height: calc(100svh - 28px); }
  .eyebrow { font-size: clamp(15px, 1.5vw, 21px); }
  .hero__title { font-size: clamp(42px, 5.1vw, 70px); line-height: .86; }
  .interface-pill { font-size: clamp(14px, 1.5vw, 21px); }
  .version { font-size: clamp(72px, 8.2vw, 112px); line-height: .8; }
  .paint-strip { font-size: clamp(14px, 1.55vw, 21px); }
  .description { max-width: 630px; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.34; }
  .cta { min-height: 50px; font-size: clamp(16px, 1.6vw, 21px); }
}

@media (max-width: 1100px) and (min-width: 768px) {
  .hero__content { width: min(100%, 850px); }
  .hero__title { font-size: clamp(43px, 6vw, 66px); }
  .hero__title span:last-child { font-size: .68em; }
  .description { max-width: 600px; }
}

@media (max-width: 767px) {
  .hero {
    min-height: 100vh;
    min-height: 100svh;
    padding: 30px 18px 38px;
    background-position: 48% center;
  }
  .hero::before { background: radial-gradient(ellipse 95% 64% at 50% 46%, rgb(255 255 255 / 86%), rgb(255 255 255 / 70%) 66%, rgb(255 255 255 / 15%) 100%); }
  .hero__content { width: 100%; min-height: 0; justify-content: center; gap: 14px; }
  .eyebrow { gap: 8px; font-size: clamp(12px, 3.5vw, 16px); }
  .eyebrow span { width: clamp(15px, 5vw, 26px); }
  .hero__title { font-size: clamp(36px, 9.5vw, 62px); line-height: .94; }
  .hero__title span:last-child { font-size: .65em; letter-spacing: -.06em; }
  .interface-pill { font-size: clamp(13px, 4vw, 19px); }
  .version { font-size: clamp(90px, 27vw, 145px); line-height: .86; }
  .paint-strip { padding-inline: .32em; font-size: clamp(13px, 3.8vw, 19px); }
  .description { max-width: 490px; font-size: clamp(15px, 4.1vw, 18px); line-height: 1.48; }
  .cta { width: min(100%, 410px); min-height: 60px; padding-inline: 1em; font-size: clamp(16px, 4.5vw, 21px); }
}

@media (max-width: 370px) {
  .hero { padding-inline: 14px; }
  .hero__title { font-size: 9.5vw; }
  .paint-strip { font-size: 3.6vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.story-section { color:#14213b; background:#eef8ff; }
.story-hero { position:relative; isolation:isolate; overflow:hidden; padding:clamp(38px,5vw,72px) 24px 48px; background:#eaf7ff url("../images/bg_two.jpg") center top/cover no-repeat; }
.story-hero::before { position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgb(239 249 255 / 94%) 0%,rgb(239 249 255 / 87%) 48%,rgb(239 249 255 / 16%) 100%); content:""; }
.story-shell { width:min(100%,1200px); margin-inline:auto; }
.story-header { max-width:1120px; margin:0 0 clamp(26px,3vw,42px); text-align:left; }
.story-intro { display:inline-block; max-width:100%; margin:0 0 18px; padding:.35em .7em; border-radius:9px; background:#ffdf27; color:#14213b; font-size:clamp(16px,1.8vw,23px); font-weight:800; line-height:1.4; }
.story-title { max-width:1000px; margin:0; color:#082b78; font-size:clamp(34px,4.4vw,58px); font-weight:900; letter-spacing:-.04em; line-height:1.06; text-wrap:balance;
  text-transform: uppercase;
}
.story-lead { max-width:900px; margin:16px 0 0; font-size:clamp(16px,1.45vw,20px); font-weight:600; line-height:1.55; }
.story-intro-grid { display:grid; max-width:820px; gap:14px; }
.story-teaser { display:flex; align-items:flex-start; gap:14px; padding:17px 19px; border:1px solid rgb(94 169 224 / 34%); border-radius:16px; background:rgb(255 255 255 / 78%); box-shadow:0 8px 24px rgb(30 86 130 / 9%); font-size:clamp(15px,1.2vw,17px); line-height:1.55; }
.story-teaser p { margin:0; }
.story-teaser mark,.story-finale mark { padding:.08em .28em; border-radius:.25em; background:#ffdf27; color:inherit; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.story-details { padding:clamp(32px,4vw,56px) 24px clamp(42px,5vw,68px); background:linear-gradient(180deg,#f2faff,#e8f5ff); }
.story-answer,.story-card { border:1px solid rgb(103 177 228 / 34%); border-radius:20px; background:linear-gradient(145deg,#fff,#e5f4ff); box-shadow:0 10px 28px rgb(30 86 130 / 9%),inset 0 1px #fff; }
.story-answer { display:flex; align-items:center; gap:18px; margin-bottom:20px; padding:clamp(20px,2.5vw,32px); }
.story-answer__content h3 { margin:0 0 5px; color:#082b78; font-size:clamp(20px,2vw,27px); }
.story-answer__content p { margin:5px 0 0; font-size:17px; line-height:1.55; }
.story-answer__content .story-product { display:inline; padding:.08em .35em; border-radius:5px; background:#ffdf27; font-weight:800; }
.story-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.story-card { padding:24px; }
.story-card h3 { margin:12px 0 8px; color:#082b78; font-size:19px; line-height:1.3; }
.story-card p,.story-finale p { margin:0; font-size:16px; line-height:1.6; }
.story-finale { display:flex; align-items:flex-start; gap:18px; margin-top:20px; padding:clamp(20px,2.5vw,32px); border:1px solid rgb(103 177 228 / 34%); border-radius:20px; background:linear-gradient(110deg,#e0f2ff,#fff); box-shadow:0 10px 28px rgb(30 86 130 / 9%); }
.story-finale__line { margin-top:10px !important; font-weight:700; }
.story-teaser__icon,.story-answer__icon,.story-card__icon,.story-finale__icon { display:grid; width:52px; height:52px; flex-shrink:0; place-items:center; border:1px solid rgb(95 177 245 / 38%); border-radius:15px; background:linear-gradient(145deg,#fff,#d9efff); color:#0875e8; }
.story-section svg { display:block; width:24px; height:24px; max-width:24px; max-height:24px; }
@media (max-width:900px) { .story-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .story-hero { padding:34px 18px 38px; background-position:62% top; } .story-hero::before { background:rgb(239 249 255 / 88%); } .story-header { text-align:center; } .story-title { font-size:clamp(30px,9vw,42px); } .story-intro-grid { max-width:none; } .story-details { padding:30px 18px 42px; } .story-card-grid { grid-template-columns:minmax(0,1fr); gap:14px; } .story-card { padding:20px; } .story-answer,.story-finale { gap:12px; padding:18px; } .story-teaser { padding:15px; } }@media screen and (max-width: 767px) {
  .story-section .story-card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px;
    width: 100%;
  }

  .story-section .story-card {
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 22px;
    box-sizing: border-box;
  }

  .story-section .story-card h3 {
    font-size: 20px;
    line-height: 1.3;
  }

  .story-section .story-card p {
    font-size: 16px;
    line-height: 1.6;
  }

  .story-section .story-card svg {
    width: 24px;
    height: 24px;
    max-width: 24px;
    max-height: 24px;
  }
}

.audience-section { position:relative; isolation:isolate; overflow:hidden; padding:clamp(58px,7vw,96px) 24px; background:linear-gradient(180deg,#ffffff 0%,#f8fbff 48%,#f1f8ff 100%); }
.audience-section::before,.audience-section::after { position:absolute; z-index:-1; left:-8%; width:116%; height:64px; border-radius:50%; background:rgb(95 190 245 / 22%); content:""; }
.audience-section::before { top:-38px; box-shadow:0 14px 0 rgb(95 190 245 / 10%); }
.audience-section::after { bottom:-42px; box-shadow:0 -14px 0 rgb(95 190 245 / 10%); }
.audience-shell { width:min(100%,1200px); margin-inline:auto; }
.audience-title { width:fit-content; max-width:100%; margin:0 auto clamp(30px,4vw,48px); padding:.3em .7em; border-radius:14px; background:linear-gradient(100deg,#ffe96a,#ffcf16); box-shadow:0 8px 20px rgb(158 126 0 / 16%); color:#082b78; font-size:clamp(25px,3.6vw,44px); font-weight:900; line-height:1.15; text-align:center; text-wrap:balance;
  text-transform: uppercase;
}
.audience-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.audience-card { display:flex; min-width:0; min-height:190px; align-items:center; gap:16px; padding:22px; border:1px solid rgb(255 255 255 / 88%); border-radius:24px; background:rgb(219 241 255 / 76%); box-shadow:0 12px 30px rgb(27 102 155 / 11%),inset 0 1px 0 #fff; }
.audience-icon { display:block; width:clamp(92px,10vw,130px); height:clamp(92px,10vw,130px); max-width:130px; max-height:130px; flex:0 0 auto; object-fit:contain; }
.audience-card p { min-width:0; margin:0; color:#14213b; font-size:clamp(15px,1.25vw,18px); font-weight:600; line-height:1.55; }
.audience-card mark { padding:.04em .22em; border-radius:.22em; background:#ffdf27; color:inherit; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.audience-card--question { justify-content:center; }
.audience-button { display:block; width:min(100%,510px); min-height:68px; margin:clamp(30px,4vw,46px) auto 0; padding:16px 28px; border:1px solid rgb(255 255 255 / 55%); border-radius:999px; background:linear-gradient(180deg,#ff5959,#ed1717 58%,#c90000); box-shadow:0 7px 0 #a90000,0 12px 28px rgb(225 0 0 / 28%),0 0 24px rgb(255 49 49 / 22%),inset 0 2px 3px rgb(255 255 255 / 45%); color:#fff; cursor:pointer; font:inherit; font-size:clamp(17px,2vw,23px); font-weight:900; transition:transform 180ms ease,filter 180ms ease,box-shadow 180ms ease;
  text-transform: uppercase;
}
.audience-button:hover { filter:brightness(1.08); transform:translateY(-2px); box-shadow:0 9px 0 #a90000,0 15px 32px rgb(225 0 0 / 34%),0 0 30px rgb(255 49 49 / 30%),inset 0 2px 3px rgb(255 255 255 / 50%); }
.audience-button:active { transform:translateY(2px); }
@media (min-width:768px) and (max-width:1023px) { .audience-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:767px) { .audience-section { padding:48px 18px 58px; } .audience-grid { grid-template-columns:minmax(0,1fr); gap:15px; } .audience-card { min-height:150px; padding:18px; } .audience-icon { width:clamp(84px,22vw,112px); height:clamp(84px,22vw,112px); } .audience-card p { font-size:16px; } .audience-button { width:100%; min-height:62px; padding-inline:14px; font-size:clamp(16px,4.5vw,20px); } }
@media (max-width:380px) { .audience-card { flex-direction:column; text-align:center; } }
.benefits-section { box-sizing:border-box; min-height:850px; padding:90px 24px; background-color:#e8f6ff; background-image:url("../images/bg_bloks.jpg"); background-repeat:no-repeat; background-position:center center; background-size:100% 100%; }
.benefits-shell { width:min(100%,1200px); margin-inline:auto; }
.benefits-title { display:flex; align-items:center; justify-content:center; gap:clamp(12px,2vw,26px); margin:0 0 70px; color:#082b78; font-size:clamp(25px,3.2vw,40px); font-weight:900; line-height:1.2; text-align:center;
  text-transform: uppercase;
}
.benefits-title span { width:clamp(26px,5vw,68px); height:3px; flex:0 0 auto; border-radius:3px; background:linear-gradient(90deg,#29bfff,#0875e8); }
.benefits-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; }
.benefits-card { display:flex; min-width:0; min-height:175px; align-items:center; gap:20px; padding:32px; border:1px solid rgb(119 191 235 / 36%); border-radius:24px; background:rgb(255 255 255 / 88%); box-shadow:0 10px 28px rgb(23 98 157 / 11%); }
.benefits-icon { display:grid; width:90px; height:90px; flex:0 0 90px; place-items:center; border-radius:50%; background:linear-gradient(145deg,#e6f7ff,#cceaff); color:#0875e8; }
.benefits-icon svg { display:block; width:48px; height:48px; max-width:48px; max-height:48px; }
.benefits-card p { margin:0; color:#14213b; font-size:clamp(21px,1.6vw,23px); font-weight:700; line-height:1.4; }
.benefits-button { display:block; width:min(100%,480px); min-height:66px; margin:65px auto 0; padding:15px 26px; border:1px solid rgb(255 255 255 / 55%); border-radius:999px; background:linear-gradient(180deg,#ff5b5b,#ed1717 60%,#c90000); box-shadow:0 8px 22px rgb(220 0 0 / 25%),inset 0 2px 3px rgb(255 255 255 / 45%); color:#fff; cursor:pointer; font:inherit; font-size:clamp(17px,2vw,22px); font-weight:900; transition:transform 180ms ease,filter 180ms ease,box-shadow 180ms ease;
  text-transform: uppercase;
}
.benefits-button:hover { filter:brightness(1.08); transform:translateY(-2px); box-shadow:0 12px 28px rgb(220 0 0 / 32%),inset 0 2px 3px rgb(255 255 255 / 50%); }
.benefits-button:active { transform:translateY(1px); }
@media (max-width:767px) { .benefits-section { min-height:0; padding:42px 18px 52px; background-size:cover; } .benefits-title { gap:10px; margin-bottom:25px; font-size:clamp(22px,6vw,30px); } .benefits-title span { width:22px; } .benefits-grid { grid-template-columns:minmax(0,1fr); gap:16px; } .benefits-card { min-height:0; gap:14px; padding:18px; } .benefits-icon { width:68px; height:68px; flex-basis:68px; } .benefits-icon svg { width:42px; height:42px; max-width:42px; max-height:42px; } .benefits-card p { font-size:clamp(16px,4vw,18px); } .benefits-button { width:100%; margin-top:32px; padding-inline:14px; font-size:clamp(16px,4.5vw,20px); } }
@media (max-width:380px) { .benefits-card { gap:10px; padding:15px; } .benefits-icon { width:54px; height:54px; flex-basis:54px; } .benefits-icon svg { width:36px; height:36px; max-width:36px; max-height:36px; } }
.author-section { padding:clamp(52px,7vw,88px) 24px; background:linear-gradient(145deg,#fff 0%,#f6fbff 55%,#eaf6ff 100%); }
.author-shell { display:grid; width:min(100%,1240px); grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:center; gap:clamp(36px,6vw,76px); margin-inline:auto; }
.author-copy { min-width:0; }
.author-eyebrow { margin:0 0 12px; color:#1684cc; font-size:14px; font-weight:800; letter-spacing:.12em; }
.author-title { margin:0 0 22px; color:#082b78; font-size:clamp(28px,3vw,40px); font-weight:900; line-height:1.15; }
.author-name { margin:0 0 8px; color:#0752c8; font-size:clamp(27px,2.8vw,36px); font-weight:800; line-height:1.2; }
.author-summary { margin:0 0 20px; color:#26354b; font-size:17px; font-weight:600; line-height:1.55; }
.author-bio { color:#29364a; font-size:16px; line-height:1.65; }
.author-bio p { margin:0 0 13px; }
.author-highlights { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:22px; }
.author-highlight { display:flex; min-width:0; align-items:flex-start; gap:9px; }
.author-marker { width:9px; height:9px; flex:0 0 9px; margin-top:6px; border-radius:50%; background:linear-gradient(135deg,#1684e8,#42c7ef); box-shadow:0 0 0 4px rgb(47 168 231 / 12%); }
.author-highlight h4 { margin:0 0 4px; color:#082b78; font-size:14px; font-weight:800; line-height:1.35; }
.author-highlight p { margin:0; color:#4a5a70; font-size:12px; line-height:1.45; }
.author-quote { margin:22px 0 0; padding:15px 18px; border-left:3px solid #1684e8; border-radius:0 12px 12px 0; background:linear-gradient(100deg,#e4f4ff,#f5fbff); color:#233b59; font-size:15px; font-style:italic; line-height:1.55; }
.author-portrait { position:relative; z-index:0; width:min(100%,440px); justify-self:center; margin:0; padding:8px; border:1px solid rgb(255 255 255 / 90%); border-radius:28px; background:#fff; box-shadow:0 20px 48px rgb(25 76 120 / 16%); }
.author-portrait::before { position:absolute; z-index:-1; inset:18px -14px -14px 18px; border-radius:30px; background:linear-gradient(145deg,#a9e5ff,#d8efff); content:""; }
.author-portrait img { display:block; width:100%; height:auto; max-height:760px; border-radius:22px; object-fit:contain; object-position:center; }
@media (max-width:900px) { .author-shell { grid-template-columns:minmax(0,1fr); gap:30px; } .author-highlights { grid-template-columns:1fr; gap:10px; } .author-portrait { grid-row:2; width:min(100%,380px); margin-inline:auto; } }
@media (max-width:700px) { .author-section { padding:42px 18px 52px; } .author-shell { grid-template-columns:minmax(0,1fr); gap:24px; } .author-title { margin-bottom:18px; } .author-portrait { grid-row:2; width:min(100%,340px); margin-inline:auto; } .author-portrait img { max-height:560px; } .author-bio { font-size:16px; } .author-highlights { grid-template-columns:1fr; gap:12px; } .author-highlight h4 { font-size:15px; } .author-highlight p { font-size:13px; } }
.course-topics-section { position:relative; isolation:isolate; overflow:hidden; padding:90px 24px 100px; background:linear-gradient(180deg,#f5fbff 0%,#fbfdff 18%,#fbfdff 82%,#f0f8ff 100%); }
.course-topics-section::before,.course-topics-section::after { position:absolute; z-index:-1; left:-8%; width:116%; height:72px; border-radius:50%; background:rgb(120 199 242 / 18%); content:""; }
.course-topics-section::before { top:-48px; box-shadow:0 18px 0 rgb(120 199 242 / 9%); }
.course-topics-section::after { bottom:-48px; box-shadow:0 -18px 0 rgb(120 199 242 / 9%); }
.course-topics-shell { position:relative; width:min(100%,1200px); margin-inline:auto; }
.course-topics-title { display:flex; align-items:center; justify-content:center; gap:22px; margin:0 0 46px; color:#102c73; font-size:clamp(30px,3.5vw,44px); font-weight:800; letter-spacing:.015em; line-height:1.2; text-align:center; text-wrap:balance; }
.course-topics-title span { width:54px; height:2px; flex:0 0 54px; border-radius:2px; background:#74c7ed; }
.course-topics-panel { padding:30px 44px; border-radius:30px; background:#fff; box-shadow:0 18px 54px rgb(31 91 137 / 10%); }
.course-topics-list { margin:0; padding:0; list-style:none; }
.course-topics-item { display:flex; align-items:center; gap:26px; padding:15px 0; border-bottom:1px solid #deeff8; color:#202b3c; font-size:19px; font-weight:550; line-height:1.45; }
.course-topics-item:last-child { border-bottom:0; }
.course-topics-play { display:grid; width:34px; height:34px; flex:0 0 34px; place-items:center; border-radius:50%; background:#eaf7ff; color:#0875d8; }
.course-topics-play svg { display:block; width:18px; height:18px; max-width:18px; max-height:18px; }
@media (max-width:1023px) { .course-topics-section { padding:72px 24px 82px; } .course-topics-panel { padding:28px 34px; } .course-topics-item { font-size:18px; } }
@media (max-width:767px) { .course-topics-section { padding:58px 16px 68px; } .course-topics-title { gap:10px; margin-bottom:34px; font-size:clamp(24px,6vw,32px); } .course-topics-title span { width:22px; flex-basis:22px; } .course-topics-panel { padding:20px; border-radius:24px; } .course-topics-item { gap:14px; padding:15px 0; font-size:16px; line-height:1.45; } .course-topics-play { width:28px; height:28px; flex-basis:28px; } .course-topics-play svg { width:15px; height:15px; max-width:15px; max-height:15px; } }
.cabinet-section { position:relative; overflow:hidden; padding:88px 24px 96px; background:linear-gradient(145deg,#e8f6ff 0%,#f8fcff 48%,#eaf6ff 100%); }
.cabinet-shell { width:min(100%,1100px); margin-inline:auto; text-align:center; }
.cabinet-eyebrow { margin:0 0 14px; color:#0875d8; font-size:13px; font-weight:800; letter-spacing:.16em; }
.cabinet-title { max-width:850px; margin:0 auto 18px; color:#102c73; font-size:clamp(30px,4vw,48px); font-weight:800; line-height:1.15; text-wrap:balance; }
.cabinet-description { max-width:680px; margin:0 auto 38px; color:#45566f; font-size:17px; line-height:1.65; }
.cabinet-preview { width:min(100%,550px); margin:0 auto; padding:12px; border:1px solid rgb(255 255 255 / 90%); border-radius:24px; background:#fff; box-shadow:0 22px 60px rgb(25 76 120 / 18%); }
.cabinet-preview__viewport { container-type:inline-size; position:relative; overflow:hidden; width:100%; aspect-ratio:16 / 9; border-radius:15px; background:#e9f3fa; cursor:ns-resize; }
.cabinet-preview__image { display:block; width:100%; height:auto; transform:translateY(0); transition:transform 3s linear; }
.cabinet-preview__viewport:hover .cabinet-preview__image,.cabinet-preview__viewport:focus .cabinet-preview__image { transform:translateY(calc(-100% + 56.25cqw)); }
.cabinet-preview__viewport:focus-visible { outline:3px solid #1684e8; outline-offset:4px; }
.cabinet-preview__hint { display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 8px 2px; color:#52647b; font-size:14px; font-weight:600; }
.cabinet-preview__hint span { color:#0875d8; font-size:20px; }
@media (max-width:767px) { .cabinet-section { padding:58px 16px 68px; } .cabinet-description { margin-bottom:26px; font-size:15px; } .cabinet-preview { padding:7px; border-radius:17px; } .cabinet-preview__viewport { border-radius:11px; } .cabinet-preview__hint { font-size:12px; } }
@media (prefers-reduced-motion:reduce) { .cabinet-preview__image { transition-duration:.01ms; } }
.checkout-section { position:relative; isolation:isolate; overflow:hidden; padding:82px 24px 72px; background:linear-gradient(180deg,#f4faff 0%,#fff 22%,#f7fbff 100%); }
.checkout-section::before,.checkout-section::after { position:absolute; z-index:-1; left:-8%; width:116%; height:56px; border-radius:50%; background:rgb(110 190 235 / 13%); content:""; }
.checkout-section::before { top:-42px; box-shadow:0 12px 0 rgb(110 190 235 / 7%); }
.checkout-section::after { bottom:-42px; box-shadow:0 -12px 0 rgb(110 190 235 / 7%); }
.checkout-shell { position:relative; width:min(100%,1280px); margin-inline:auto; }
.checkout-header { display:flex; flex-direction:column; align-items:center; gap:18px; margin-bottom:40px; text-align:center; }
.checkout-title { display:flex; width:100%; align-items:center; justify-content:center; gap:24px; margin:0; color:#102c73; font-size:clamp(32px,4vw,46px); font-weight:800; line-height:1.15; }
.checkout-title::before,.checkout-title::after { width:54px; height:2px; flex:0 0 54px; border-radius:2px; background:#78c7ed; content:""; }
.checkout-subtitle { max-width:100%; margin:0; padding:12px 28px; border-radius:12px; background:#ffdc24; box-shadow:0 7px 18px rgb(197 157 0 / 14%); color:#102c73; font-size:clamp(17px,2.2vw,25px); font-weight:800; line-height:1.3; text-align:center; }
.checkout-card { display:grid; grid-template-columns:minmax(0,32fr) minmax(0,68fr); align-items:stretch; padding:34px; border-radius:34px; background:#fff; box-shadow:0 20px 60px rgb(30 83 130 / 12%); }
.checkout-product { display:grid; min-width:0; place-items:center; padding:18px 34px 18px 10px; border-right:1px solid #dcecf7; }
.checkout-product__image { display:block; width:100%; max-width:340px; height:auto; object-fit:contain; }
.checkout-benefits { min-width:0; margin:0; padding:0 0 0 34px; list-style:none; }
.checkout-benefit { display:flex; min-width:0; align-items:center; gap:14px; padding:10px 0; border-bottom:1px solid #e3f0f8; color:#17243b; font-size:16px; font-weight:550; line-height:1.45; }
.checkout-benefit:first-child { padding-top:0; }
.checkout-benefit:last-child { padding-bottom:0; border-bottom:0; }
.checkout-benefit__icon { display:grid; width:29px; height:29px; flex:0 0 29px; place-items:center; border-radius:50%; background:#0752cf; }
.checkout-benefit__icon svg { display:block; width:19px; height:19px; fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round; stroke-width:2.5; }
.checkout-offer { display:flex; flex-direction:column; align-items:center; margin:30px auto 0; text-align:center; }
.checkout-old-price { margin:0 0 8px; color:#8993a1; font-size:28px; line-height:1.2; text-decoration:line-through; text-decoration-thickness:2px; }
.checkout-price { margin:0 0 28px; padding:3px 28px 7px; border-radius:999px; background:#ffdc24; box-shadow:0 6px 16px rgb(197 157 0 / 18%); color:#102c73; font-size:clamp(48px,6vw,54px); font-weight:900; line-height:1.2; white-space:nowrap; }
.checkout-button { display:grid; width:min(100%,510px); min-height:76px; place-items:center; padding:16px 28px; border:0; border-radius:16px; background:linear-gradient(110deg,#ff514b,#e51e35); box-shadow:0 12px 26px rgb(220 38 53 / 27%); color:#fff; cursor:pointer; font:inherit; font-size:22px; font-weight:800; letter-spacing:.035em; transition:transform 180ms ease,box-shadow 180ms ease,filter 180ms ease; }
.checkout-button:hover { transform:translateY(-2px); filter:brightness(1.04); box-shadow:0 16px 30px rgb(220 38 53 / 34%); }
.checkout-button:focus-visible { outline:3px solid #102c73; outline-offset:4px; }
.checkout-security { margin:16px 0 0; color:#3983b5; font-size:14px; line-height:1.5; }
@media (max-width:900px) { .checkout-card { grid-template-columns:minmax(0,1fr); padding:30px; } .checkout-product { padding:0 0 26px; border-right:0; border-bottom:1px solid #dcecf7; } .checkout-product__image { width:min(100%,300px); } .checkout-benefits { padding:22px 0 0; } }
@media (max-width:767px) { .checkout-section { padding:58px 16px 62px; } .checkout-header { gap:15px; margin-bottom:28px; } .checkout-title { gap:10px; font-size:clamp(27px,7vw,36px); } .checkout-title::before,.checkout-title::after { width:20px; flex-basis:20px; } .checkout-subtitle { padding:11px 14px; font-size:clamp(15px,4.2vw,19px); } .checkout-card { padding:20px 18px; border-radius:24px; } .checkout-product { padding-bottom:20px; } .checkout-product__image { width:min(100%,230px); } .checkout-benefits { padding-top:12px; } .checkout-benefit { gap:11px; padding:11px 0; font-size:15px; line-height:1.45; } .checkout-benefit__icon { width:29px; height:29px; flex-basis:29px; } .checkout-offer { width:100%; margin-top:25px; } .checkout-old-price { font-size:25px; } .checkout-price { margin-bottom:24px; padding-inline:23px; font-size:48px; } .checkout-button { width:100%; min-height:72px; padding:14px 16px; font-size:19px; } .checkout-security { font-size:13px; } }
@media (prefers-reduced-motion:reduce) { .checkout-button { transition:none; } }
.bonus-section { position:relative; isolation:isolate; overflow:hidden; padding:70px 24px 80px; background:linear-gradient(180deg,#eef8ff 0%,#fbfdff 18%,#f5fbff 82%,#eaf6ff 100%); }
.bonus-section::before,.bonus-section::after { position:absolute; z-index:-1; left:-8%; width:116%; height:60px; border-radius:50%; background:rgb(105 190 238 / 15%); content:""; }
.bonus-section::before { top:-44px; box-shadow:0 13px 0 rgb(105 190 238 / 8%); }
.bonus-section::after { bottom:-44px; box-shadow:0 -13px 0 rgb(105 190 238 / 8%); }
.bonus-shell { position:relative; width:min(100%,1280px); margin-inline:auto; }
.bonus-header { display:flex; flex-direction:column; align-items:center; text-align:center; }
.bonus-label { display:flex; align-items:center; justify-content:center; gap:26px; margin:0 0 25px; color:#102c73; font-size:clamp(36px,4vw,48px); font-weight:800; line-height:1.2; }
.bonus-label::before,.bonus-label::after { width:54px; height:2px; flex:0 0 54px; border-radius:2px; background:#1684e8; content:""; }
.bonus-label { padding:10px 34px; border-radius:999px; background:linear-gradient(110deg,#ffe033,#ffc91b); box-shadow:0 8px 20px rgb(197 157 0 / 15%); }
.bonus-heading { margin:0 0 50px; color:#102c73; font-size:clamp(29px,3.2vw,40px); font-weight:800; line-height:1.3; text-align:center; }
.bonus-heading span { display:inline-block; }
.bonus-content { display:grid; grid-template-columns:minmax(0,32fr) minmax(0,68fr); align-items:center; gap:40px; }
.bonus-product { display:grid; min-width:0; place-items:center; }
.bonus-product__image { display:block; width:100%; max-width:360px; height:auto; object-fit:contain; }
.bonus-benefits { min-width:0; margin:0; padding:30px 40px; border-radius:30px; background:#fff; box-shadow:0 20px 54px rgb(35 102 155 / 13%); list-style:none; }
.bonus-benefit { display:flex; align-items:center; gap:18px; padding:16px 0; border-bottom:1px solid #dcecf7; color:#14213D; font-size:19px; font-weight:550; line-height:1.45; }
.bonus-benefit:first-child { padding-top:0; }
.bonus-benefit:last-child { padding-bottom:0; border-bottom:0; }
.bonus-benefit__icon { display:grid; width:34px; height:34px; flex:0 0 34px; place-items:center; border-radius:50%; background:#0875e8; }
.bonus-benefit__icon svg { display:block; width:20px; height:20px; fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round; stroke-width:2.5; }
@media (max-width:900px) { .bonus-content { grid-template-columns:minmax(0,1fr); gap:28px; } .bonus-product__image { max-width:300px; } .bonus-benefits { padding:30px 34px; } }
@media (max-width:767px) { .bonus-section { padding:56px 16px 64px; } .bonus-label { gap:12px; margin-bottom:21px; padding:9px 23px; font-size:clamp(34px,9vw,42px); } .bonus-label::before,.bonus-label::after { width:22px; flex-basis:22px; } .bonus-heading { margin-bottom:32px; font-size:clamp(25px,7vw,32px); line-height:1.3; } .bonus-heading span { max-width:100%; } .bonus-content { gap:22px; } .bonus-product__image { width:min(100%,230px); } .bonus-benefits { padding:18px 18px; border-radius:24px; } .bonus-benefit { gap:12px; padding:13px 0; font-size:16px; line-height:1.45; } .bonus-benefit__icon { width:34px; height:34px; flex-basis:34px; } }
.closing-section { position:relative; overflow:hidden; padding:80px 24px 90px; background:linear-gradient(180deg,#f3faff 0%,#fff 28%,#f1f9ff 100%); }
.closing-shell { width:min(100%,1200px); margin-inline:auto; }
.closing-invitation { width:min(100%,1000px); margin:0 auto; padding:50px 54px; border-radius:28px; background:#fff; box-shadow:0 18px 54px rgb(30 83 130 / 12%); text-align:center; }
.closing-kicker { display:inline-block; margin:0 0 22px; padding:8px 19px; border-radius:999px; background:linear-gradient(110deg,#ffe239,#ffd01e); color:#102c73; font-size:14px; font-weight:800; letter-spacing:.1em; }
.closing-invitation__title { max-width:850px; margin:0 auto 22px; color:#102c73; font-size:clamp(30px,3.2vw,38px); font-weight:800; line-height:1.25; text-wrap:balance; }
.closing-invitation__text { max-width:820px; margin:0 auto 30px; color:#233149; font-size:19px; font-weight:500; line-height:1.6; text-align:left; }
.closing-invitation__button { display:inline-flex; min-height:60px; align-items:center; justify-content:center; padding:15px 28px; border-radius:14px; background:linear-gradient(110deg,#168df0,#0751cf); box-shadow:0 10px 24px rgb(7 81 207 / 22%); color:#fff; font-size:16px; font-weight:800; text-align:center; text-decoration:none; transition:transform 180ms ease,box-shadow 180ms ease,filter 180ms ease; }
.closing-invitation__button:hover { transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 14px 28px rgb(7 81 207 / 30%); }
.closing-invitation__button:focus-visible,.closing-final__button:focus-visible { outline:3px solid #102c73; outline-offset:4px; }
.closing-guarantee { margin-top:84px; }
.closing-guarantee__title { display:flex; align-items:center; justify-content:center; gap:22px; margin:0 0 34px; color:#102c73; font-size:clamp(32px,3.8vw,44px); font-weight:800; line-height:1.2; text-align:center; }
.closing-guarantee__title::before,.closing-guarantee__title::after { width:52px; height:2px; flex:0 0 52px; border-radius:2px; background:#73c5ec; content:""; }
.closing-guarantee__card { width:min(100%,1050px); margin-inline:auto; padding:48px 52px; border:1px solid #d9edf9; border-radius:30px; background:linear-gradient(145deg,#f1faff,#e8f5ff); box-shadow:0 18px 48px rgb(30 83 130 / 10%); }
.closing-guarantee__card p { margin:0 0 24px; color:#25344b; font-size:18px; font-weight:500; line-height:1.65; }
.closing-guarantee__card p:last-child { margin-bottom:0; }
.closing-highlight { border-radius:3px; background:linear-gradient(transparent 57%,rgb(255 220 36 / 52%) 57%); color:#102c73; font-weight:750; }
.closing-final { display:flex; flex-direction:column; align-items:center; margin-top:48px; text-align:center; }
.closing-final__text { max-width:900px; margin:0 0 30px; color:#102c73; font-size:clamp(26px,3vw,32px); font-weight:800; line-height:1.3; text-wrap:balance; }
.closing-final__button { display:flex; width:min(100%,510px); min-height:76px; align-items:center; justify-content:center; padding:18px 28px; border-radius:50px; background:linear-gradient(110deg,#ff514b,#e51e35); box-shadow:0 13px 30px rgb(220 38 53 / 28%); color:#fff; font-size:19px; font-weight:800; letter-spacing:.025em; text-align:center; text-decoration:none; transition:transform 180ms ease,box-shadow 180ms ease,filter 180ms ease; }
.closing-final__button:hover { transform:translateY(-3px); filter:brightness(1.05); box-shadow:0 18px 36px rgb(220 38 53 / 36%); }
@media (max-width:900px) { .closing-section { padding:64px 22px 72px; } .closing-invitation { padding:40px 38px; } .closing-guarantee { margin-top:68px; } .closing-guarantee__card { padding:38px 36px; } }
@media (max-width:767px) { .closing-section { padding:48px 16px 62px; } .closing-invitation { padding:26px 22px; border-radius:23px; } .closing-kicker { margin-bottom:18px; } .closing-invitation__title { margin-bottom:18px; font-size:clamp(25px,7vw,30px); } .closing-invitation__text { margin-bottom:24px; font-size:16px; line-height:1.6; } .closing-invitation__button { width:100%; padding:14px 16px; font-size:14px; } .closing-guarantee { margin-top:58px; } .closing-guarantee__title { gap:10px; margin-bottom:24px; font-size:clamp(27px,7vw,32px); } .closing-guarantee__title::before,.closing-guarantee__title::after { width:20px; flex-basis:20px; } .closing-guarantee__card { padding:24px 21px; border-radius:24px; } .closing-guarantee__card p { margin-bottom:20px; font-size:16px; line-height:1.6; } .closing-final { margin-top:40px; } .closing-final__text { margin-bottom:24px; font-size:25px; } .closing-final__button { width:100%; min-height:72px; padding:16px 20px; font-size:17px; } }
@media (prefers-reduced-motion:reduce) { .closing-invitation__button,.closing-final__button { transition:none; } }
.site-footer { border-top:1px solid #c9e6f6; background:linear-gradient(180deg,#f0f9ff 0%,#e7f5ff 100%); color:#17315e; }
.site-footer__inner { width:min(100%,1200px); margin-inline:auto; padding:60px 28px 34px; }
.site-footer__main { display:grid; grid-template-columns:minmax(220px,.8fr) minmax(0,1.7fr); gap:56px; align-items:start; padding-bottom:42px; }
.site-footer__author { padding-top:2px; }
.site-footer__name { margin:0 0 10px; color:#102c73; font-size:20px; font-weight:750; line-height:1.35; }
.site-footer__registration { margin:0; color:#536a87; font-size:14px; line-height:1.6; }
.site-footer__nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px 28px; }
.site-footer__link { width:fit-content; color:#176eb4; font-size:15px; font-weight:550; line-height:1.5; text-decoration:none; text-underline-offset:3px; transition:color 160ms ease,text-decoration-color 160ms ease; }
.site-footer__link:hover { color:#064acb; text-decoration:underline; }
.site-footer__link:focus-visible { border-radius:3px; outline:2px solid #0875d8; outline-offset:4px; }
.site-footer__bottom { padding-top:24px; border-top:1px solid #c9e2f1; text-align:center; }
.site-footer__copyright { margin:0; color:#536a87; font-size:14px; line-height:1.6; }
@media (max-width:767px) { .site-footer__inner { padding:40px 20px 26px; } .site-footer__main { grid-template-columns:minmax(0,1fr); gap:28px; padding-bottom:30px; } .site-footer__nav { grid-template-columns:minmax(0,1fr); gap:16px; } .site-footer__link { font-size:16px; } .site-footer__bottom { padding-top:20px; } }