@font-face {
  font-family: 'Vetrino';
  src: url('./assets/fonts/vetrino.woff2') format('woff2');
  font-display: swap;
}

:root { --sand: #c9ef73; --ink: #f6f1e8; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: #172a24; color: var(--ink); font-family: Montserrat, Arial, sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
.landing { position: relative; min-height: 100svh; overflow: hidden; display: flex; align-items: stretch; isolation: isolate; }
.landing__background { position: absolute; inset: 0; z-index: -2; background: url('./assets/images/hero.jpg') center / cover no-repeat; transition: opacity .6s ease; }
.landing__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 32, 25, .9) 0%, rgba(10, 32, 25, .7) 44%, rgba(10, 32, 25, .18) 100%), linear-gradient(0deg, rgba(10, 32, 25, .48), transparent 62%); }
.landing__content { width: min(100% - 48px, 720px); margin: auto auto auto clamp(24px, 8vw, 136px); padding: 70px 0; }
h1 { margin: 0 0 30px; color: #fff; font-family: 'Vetrino', Montserrat, sans-serif; font-size: clamp(46px, 6.4vw, 104px); font-weight: 400; line-height: .89; letter-spacing: -.055em; text-transform: uppercase; }
h1 > span { display: block; white-space: nowrap; }
.title__line { margin-top: 11px; }
.title__white { color: #fff; }
.title__accent { color: var(--sand); }
.terms { margin-bottom: 29px; font-size: clamp(17px, 1.6vw, 23px); font-weight: 500; line-height: 1.38; }
.terms p { margin: 0; }
.terms strong { color: var(--sand); font-weight: 700; }
.advantages { display: flex; flex-wrap: wrap; gap: 9px; max-width: 600px; padding: 0; margin: 0 0 36px; list-style: none; }
.advantages li { padding: 9px 13px 10px; border: 1px solid rgba(255,255,255,.36); border-radius: 999px; background: rgba(26,48,42,.48); color: #fff; font-size: 13px; line-height: 1; backdrop-filter: blur(4px); }
.request { max-width: 595px; padding-top: 27px; border-top: 1px solid rgba(255,255,255,.3); }
.request h2 { margin: 0 0 10px; color: #fff; font-size: clamp(24px, 2.5vw, 35px); font-weight: 500; line-height: 1.04; letter-spacing: -.055em; }
.request p { margin: 0 0 20px; color: rgba(255,255,255,.9); font-size: 14px; line-height: 1.45; }
.mobile-line { display: inline; }
.request form { display: flex; gap: 11px; }
.request input { width: min(34%, 202px); height: 52px; border: 0; border-radius: 3px; padding: 0 17px; outline: none; color: #193129; background: #fff; font-size: 15px; }
.request input::placeholder { color: #73817c; }
.request input:focus { box-shadow: 0 0 0 2px var(--sand); }
.request button { min-width: 143px; height: 52px; border: 0; border-radius: 3px; padding: 0 21px; color: #1c332b; background: var(--sand); font-size: 13px; font-weight: 700; transition: background .2s ease, transform .2s ease; }
.request button:hover { background: #dcff97; transform: translateY(-2px); }
.request button:disabled { cursor: not-allowed; background: var(--sand); color: #1c332b; opacity: .72; transform: none; }

@media (max-width: 680px) {
  .landing { align-items: flex-start; min-height: 100svh; }
  .landing__background { background-position: 62% center; }
  .landing__overlay { background: linear-gradient(0deg, rgba(10, 32, 25, .93) 0%, rgba(10, 32, 25, .6) 72%, rgba(10, 32, 25, .18) 100%); }
  .landing__content { width: calc(100% - 36px); min-height: 100svh; margin: 0 auto; padding: clamp(72px, 12svh, 96px) 0 24px; display: flex; flex-direction: column; justify-content: center; }
  h1 { font-size: clamp(35px, 10vw, 45px); margin-bottom: 0; line-height: .91; }
  .title__line { margin-top: 8px; }
  .terms { font-size: 18px; margin: 22px 0 0; }
  .advantages { gap: 8px; margin: clamp(26px, 5vh, 38px) 0 0; }
  .advantages li { padding: 8px 11px 9px; font-size: 11.5px; }
  .request { margin-top: clamp(32px, 7vh, 58px); padding-top: 20px; }
  .request h2 { font-size: 30px; }
  .request p { font-size: 13px; margin-bottom: 16px; }
  .mobile-line { display: block; }
  .request form { flex-direction: column; gap: 8px; }
  .request input { width: 100%; height: 48px; padding: 0 13px; font-size: 14px; }
  .request button { width: 100%; min-width: 0; height: 48px; padding: 0 12px; font-size: 12px; }
}