/* Start:/kak-sdelat-zakaz/style.css?177608947310950*/
.page-hero {padding-top: 72px; background: var(--green-deep); position: relative; overflow: hidden}
.page-hero::before {content: ''; position: absolute; top: -60px; right: -80px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(124,191,150,0.14) 0%, transparent 70%); pointer-events: none}
.page-hero::after {content: ''; position: absolute; bottom: -40px; left: 10%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(74,155,111,0.12) 0%, transparent 70%); pointer-events: none}
.page-hero-inner {max-width: 1200px; margin: 0 auto; padding: 64px 48px 72px; position: relative; z-index: 1}
.breadcrumb {display: flex; align-items: center; gap: 8px; font-family: var(--body); font-size: 13px; font-weight: 500; color: rgba(255,255,255,.4); margin-bottom: 22px}
.breadcrumb a{color: rgba(255,255,255,.4); text-decoration: none; transition: color .2s}
.breadcrumb a:hover{color: var(--green-light)}
.breadcrumb span{color: rgba(255,255,255,.6)}
.breadcrumb-sep{font-size: 11px; opacity: .4}
.page-title {font-family: var(--heading); font-size: clamp(34px, 5vw, 60px); font-weight: 800; color: var(--white); letter-spacing: -.025em; line-height: 1.05; margin-bottom: 16px}
.page-subtitle {font-family: var(--body); font-size: 17px; font-weight: 400; color: rgba(255,255,255,.58); max-width:620px; line-height: 1.65}

.main-content{background: var(--cream); padding: 80px 0 100px}
.content-inner{max-width: 1200px; margin: 0 auto; padding: 0 48px}

.section-label {font-family: var(--body); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green); margin-bottom: 10px; display: block}
.section-heading {font-family: var(--heading); font-size: clamp(22px, 3vw, 34px); font-weight: 800; color: var(--text); letter-spacing: -.02em; line-height: 1.1; margin-bottom: 48px}
.section-heading em{font-style: normal; color: var(--green)}

.methods-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border-radius: 18px; overflow: hidden; margin-bottom: 3px}
.methods-row2 {display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border-radius: 0 0 18px 18px; overflow: hidden; margin-bottom: 0}

.method-card {background: var(--white); padding: 36px 32px; position: relative; overflow: hidden; transition: background .25s, transform .2s; cursor: default}
.method-card:hover{background: var(--green-pale)}
.method-card:hover .method-action{opacity: 1; transform: translateY(0)}

.methods-grid .method-card:first-child{border-radius: 18px 0 0 0}
.methods-grid .method-card:nth-child(3){border-radius: 0 18px 0 0}
.methods-row2 .method-card:first-child{border-radius: 0 0 0 18px}
.methods-row2 .method-card:last-child{border-radius: 0 0 18px 0}
.method-icon-wrap {width: 52px; height: 52px; border-radius: 14px; background: var(--green-pale); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; font-size: 24px; flex-shrink: 0; transition: background .25s}
.method-card:hover .method-icon-wrap{background: var(--green-muted)}
.method-num {position: absolute; top: 20px; right: 22px; font-family: var(--heading); font-size: 13px; font-weight: 800; color: var(--green-muted); letter-spacing: .02em}
.method-card:hover .method-num{color: var(--green-light)}
.method-title {font-family: var(--heading); font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 12px; line-height: 1.2}
.method-desc {font-family: var(--body); font-size: 14px; line-height: 1.72; color: var(--text-muted); font-weight: 400}
.method-desc a{color: var(--green); text-decoration: none; font-weight: 600}
.method-desc a:hover{text-decoration: underline}
.method-action {margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s}
.method-link {display: inline-flex; align-items: center; gap: 7px; font-family: var(--heading); font-size: 13px; font-weight: 700; color: var(--green); text-decoration: none; transition: gap .2s}
.method-link:hover{gap: 10px}
.method-link svg{width: 14px; height: 14px; fill: var(--green); flex-shrink: 0}

.method-card.featured{background: var(--green-deep)}
.method-card.featured:hover{background: var(--green-dark)}
.method-card.featured .method-icon-wrap{background: rgba(255,255,255,.12)}
.method-card.featured:hover .method-icon-wrap{background: rgba(255,255,255,.18)}
.method-card.featured .method-num{color: rgba(255,255,255,.2)}
.method-card.featured:hover .method-num{color: rgba(255,255,255,.35)}
.method-card.featured .method-title{color: var(--white)}
.method-card.featured .method-desc{color: rgba(255,255,255,.58)}
.method-card.featured .method-desc a{color: var(--green-light)}
.method-card.featured .method-action{border-top-color: rgba(255,255,255,.1)}
.method-card.featured .method-link{color: var(--green-light)}
.method-card.featured .method-link svg{fill: var(--green-light)}

  /* --- PROCESS STRIP ----------------------------------- */
.process-section{padding: 72px 0 0}
.process-heading {font-family: var(--body); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green); margin-bottom: 10px; display: block}
.process-title {font-family: var(--heading); font-size: clamp(20px, 2.4vw, 30px); font-weight: 800; color: var(--text); letter-spacing: -.02em; line-height: 1.15; margin-bottom: 36px}
.process-steps {display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative}
.process-steps::before {content: ''; position: absolute; top: 28px; left: 10%; right: 10%; height: 1px; background: var(--green-muted); z-index: 0}
.process-step {display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px; position: relative; z-index: 1}
.ps-circle {width: 56px; height: 56px; border-radius: 50%; background: var(--white); border: 2px solid var(--green-muted); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; flex-shrink: 0; transition: border-color .2s, background .2s, transform .2s; box-shadow: 0 2px 12px rgba(74,155,111,0.1)}
.process-step:hover .ps-circle {border-color: var(--green); background: var(--green-pale); transform: scale(1.08)}
.ps-num {font-family: var(--heading); font-size: 11px; font-weight: 800; color: var(--green); letter-spacing: .06em; margin-bottom: 6px; text-transform: uppercase}
.ps-title {font-family: var(--heading); font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 8px; line-height: 1.25}
.ps-text {font-family: var(--body); font-size: 13px; line-height: 1.65; color: var(--text-muted); font-weight: 400}

  /* --- INFO BANNER ------------------------------------- */
.info-banner {margin-top: 56px; background: var(--green-deep); border-radius: 18px; padding: 40px 48px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; position: relative; overflow: hidden}
.info-banner::before {content: ''; position: absolute; top: -60px; right: -40px; width: 280px; height: 280px; background: radial-gradient(circle, rgba(124,191,150,0.12) 0%, transparent 70%); pointer-events: none}
.info-item {padding: 0 32px; position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 16px}
.info-item + .info-item {border-left: 1px solid rgba(255,255,255,.08)}
.info-icon-wrap {width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.09); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0}
.info-text-block {}
.info-label {font-family: var(--body); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green-light); margin-bottom: 6px; opacity: .8}
.info-value {font-family: var(--heading); font-size: 16px; font-weight: 800; color: var(--white); line-height: 1.25; margin-bottom: 5px}
.info-note {font-family: var(--body); font-size: 13px; color: rgba(255,255,255,.48); line-height: 1.5}

  /* --- FOOTER ------------------------------------------ */
  footer{background: var(--green-deep); padding: 56px 0 34px}
.footer-inner {max-width: 1200px; margin: 0 auto; padding: 0 48px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 56px; margin-bottom: 40px}
.footer-logo-img{height: 30px; width: auto; filter: brightness(10); opacity: .75; margin-bottom: 12px; display: block}
.footer-tagline{font-family: var(--body); font-size: 14px; color: rgba(255,255,255,.38); line-height: 1.65; max-width: 280px}
.footer-col-title{font-family: var(--body); font-size: 11px; font-weight: 700; letter-spacing: .1em; color: rgba(255,255,255,.32); text-transform: uppercase; margin-bottom: 14px}
.footer-links{list-style: none; display: flex; flex-direction: column; gap: 9px}
.footer-links a{font-family: var(--body); font-size: 14px; color: rgba(255,255,255,.52); text-decoration: none; transition: color .2s}
.footer-links a:hover{color: var(--green-light)}
.footer-bottom {max-width: 1200px; margin: 0 auto; padding: 20px 48px 0; border-top: 1px solid rgba(255,255,255,.07); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px}
.footer-copy{font-family: var(--body); font-size: 12px; color: rgba(255,255,255,.26)}
.footer-site a{font-family: var(--heading); font-size: 12px; font-weight: 600; color: var(--green-light); text-decoration: none}
.footer-site a:hover{color: var(--white)}

  /* --- SCROLL ANIMATIONS ------------------------------- */
.reveal{opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease}
.reveal.visible{opacity: 1; transform: translateY(0)}
.reveal-d1{transition-delay: .08s}
.reveal-d2{transition-delay: .16s}
.reveal-d3{transition-delay: .24s}
.reveal-d4{transition-delay: .32s}

@media (max-width: 960px){
  .page-hero-inner, .content-inner{padding-left: 24px; padding-right: 24px}
  .methods-grid{grid-template-columns: 1fr; border-radius: 14px}
  .methods-row2{grid-template-columns: 1fr; border-radius: 14px; margin-top: 3px}
  .methods-grid .method-card:first-child{border-radius: 14px 14px 0 0}
  .methods-grid .method-card:nth-child(3){border-radius: 0}
  .methods-row2 .method-card:first-child{border-radius: 0}
  .methods-row2 .method-card:last-child{border-radius: 0 0 14px 14px}
  .process-steps{grid-template-columns: 1fr 1fr; gap: 32px}
  .process-steps::before{display: none}
  .info-banner{grid-template-columns: 1fr; padding: 32px 28px; gap: 24px}
  .info-item{padding: 0; border-left: none !important}
  .info-item + .info-item{padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08)}
  .footer-inner{grid-template-columns: 1fr; gap: 28px}
  .method-action{opacity: 1; transform: translateY(0)}
}
@media (max-width: 600px) {
  .process-steps{grid-template-columns: 1fr}
  .page-hero-inner{padding-top: 48px; padding-bottom: 56px}
}
/* End */
/* /kak-sdelat-zakaz/style.css?177608947310950 */