:root { --navy: #0A2540; --navy-2: #061B2F; --navy-3: #0E3352; --teal: #00C4B4; --teal-2: #39E0D2; --ice: #EAFBF8; --white: #FFFFFF; --text: #0A2540; --muted: #60778B; --line: rgba(10, 37, 64, .12); --glass: rgba(255, 255, 255, .10); --shadow: 0 28px 90px rgba(3, 26, 43, .18); --radius-xl: 32px; --radius-lg: 24px; --radius-md: 18px; --container: 1200px; --section-y: clamp(68px, 8vw, 112px); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--navy-2); } body { margin: 0; color: var(--text); background: #F5FAFB; font-family: Inter, Manrope, "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } body.menu-open { overflow: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input, textarea { font: inherit; } button { cursor: pointer; } ::selection { background: rgba(0, 196, 180, .28); color: var(--navy); } .container { width: min(calc(100% - 32px), var(--container)); margin-inline: auto; } .section { padding: var(--section-y) 0; position: relative; } .section--light { background: #F5FAFB; } .section--white { background: var(--white); } .section--dark { background: var(--navy); color: var(--white); } .section--compact { --section-y: clamp(60px, 6vw, 88px); } .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; color: #008F84; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--teal); } .section--dark .eyebrow { color: var(--teal-2); } h1, h2, h3, p { margin-top: 0; } h1, h2, h3 { text-wrap: balance; } h1 { margin-bottom: 22px; font-size: clamp(42px, 8vw, 86px); line-height: .98; letter-spacing: -.055em; font-weight: 760; max-width: 900px; } h2 { margin-bottom: 20px; font-size: clamp(34px, 5vw, 58px); line-height: 1.03; letter-spacing: -.045em; font-weight: 740; } h3 { margin-bottom: 10px; font-size: clamp(21px, 2.4vw, 28px); line-height: 1.14; letter-spacing: -.025em; } .lead { max-width: 760px; margin-bottom: 0; color: var(--muted); font-size: clamp(18px, 2vw, 22px); line-height: 1.55; } .section--dark .lead { color: rgba(255,255,255,.72); } .section-head { margin-bottom: clamp(34px, 5vw, 54px); } .section-head--split { display: grid; gap: 18px; } .header { position: fixed; inset: 0 0 auto; z-index: 50; padding: 14px 0; transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease; } .header.scrolled { background: rgba(6, 27, 47, .86); box-shadow: 0 12px 40px rgba(3, 20, 34, .18); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; } .brand { display: inline-flex; align-items: center; min-width: 0; } .brand img { width: clamp(150px, 19vw, 215px); height: auto; } .header__nav { display: none; align-items: center; gap: 30px; color: rgba(255,255,255,.76); font-size: 14px; font-weight: 650; } .header__nav a { transition: color .2s ease; } .header__nav a:hover { color: var(--white); } .btn { min-height: 52px; padding: 0 22px; border: 1px solid transparent; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 760; line-height: 1; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primary { color: var(--navy); background: var(--teal); box-shadow: 0 16px 45px rgba(0,196,180,.26); } .btn--primary:hover { background: var(--teal-2); box-shadow: 0 20px 55px rgba(0,196,180,.34); } .btn--secondary { color: var(--white); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.26); backdrop-filter: blur(10px); } .btn--secondary:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.42); } .btn--header { min-height: 44px; padding-inline: 17px; font-size: 13px; } .btn svg { width: 18px; height: 18px; flex: 0 0 auto; } .hero { position: relative; min-height: 760px; display: flex; align-items: flex-end; padding: 122px 0 48px; overflow: hidden; color: var(--white); background: var(--navy-2); isolation: isolate; } .hero::before { content: ""; position: absolute; inset: 0; z-index: -3; background-image: url("assets/asset_55bf368cd062.webp"); background-size: cover; background-position: 60% center; transform: scale(1.02); } .hero::after { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(4,21,35,.44) 0%, rgba(4,21,35,.18) 32%, rgba(4,21,35,.86) 100%), linear-gradient(90deg, rgba(4,21,35,.92) 0%, rgba(4,21,35,.69) 46%, rgba(4,21,35,.10) 100%); } .hero__glow { position: absolute; z-index: -1; width: 480px; height: 480px; right: -220px; bottom: -180px; border-radius: 50%; background: rgba(0,196,180,.38); filter: blur(100px); pointer-events: none; } .hero__content { width: min(100%, 950px); } .hero__kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 9px 13px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: rgba(255,255,255,.84); background: rgba(5,30,47,.36); backdrop-filter: blur(14px); font-size: 12px; font-weight: 780; letter-spacing: .1em; text-transform: uppercase; } .hero__kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 6px rgba(0,196,180,.14); } .hero__subtitle { max-width: 730px; margin-bottom: 30px; color: rgba(255,255,255,.82); font-size: clamp(19px, 2.2vw, 27px); line-height: 1.42; } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; } .hero__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 700px; } .hero-fact { min-height: 82px; padding: 15px 16px; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: rgba(5,29,47,.42); backdrop-filter: blur(16px); } .hero-fact strong { display: block; margin-bottom: 3px; font-size: clamp(19px, 2.55vw, 27px); line-height: 1.1; letter-spacing: -.03em; white-space: nowrap; } .hero-fact span { color: rgba(255,255,255,.62); font-size: 12px; } .benefit-grid, .portrait-grid, .scenario-grid, .equipment-grid { display: grid; gap: 16px; } .scroll-cards { grid-auto-flow: column; grid-auto-columns: minmax(82%, 1fr); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: none; padding: 2px 1px 18px; margin-right: -16px; } .scroll-cards::-webkit-scrollbar { display: none; } .scroll-cards > * { scroll-snap-align: start; } .benefit-card { position: relative; min-height: 190px; padding: 25px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 15px 50px rgba(10,37,64,.055); } .benefit-card::after { content: ""; position: absolute; right: -50px; bottom: -65px; width: 150px; height: 150px; border-radius: 50%; background: rgba(0,196,180,.10); filter: blur(4px); } .benefit-card__num { display: block; margin-bottom: 28px; color: var(--teal); font-size: 13px; font-weight: 800; letter-spacing: .12em; } .benefit-card h3 { max-width: 290px; } .benefit-card p { margin-bottom: 0; color: var(--muted); font-size: 14px; } .market-panel { margin-top: 24px; padding: clamp(22px, 3vw, 34px); border-radius: var(--radius-xl); color: var(--white); background: radial-gradient(circle at 85% 15%, rgba(0,196,180,.22), transparent 34%), linear-gradient(135deg, var(--navy), var(--navy-2)); box-shadow: var(--shadow); } .market-panel__top { display: grid; gap: 12px; margin-bottom: 28px; } .market-panel__top h3 { margin: 0; font-size: clamp(24px, 3vw, 34px); } .market-panel__top p { margin: 0; color: rgba(255,255,255,.68); max-width: 760px; } .market-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .metric-card { min-height: 190px; padding: 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 19px; background: rgba(255,255,255,.07); overflow: hidden; } .metric-card__label { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-height: 44px; color: rgba(255,255,255,.72); font-size: 12px; font-weight: 650; } .metric-card__value { color: var(--teal-2); font-size: 16px; font-weight: 820; white-space: nowrap; } .metric-card svg { width: 100%; height: 88px; overflow: visible; } .metric-card__foot { display: flex; justify-content: space-between; gap: 8px; color: rgba(255,255,255,.44); font-size: 10px; } .chart-gridline { stroke: rgba(255,255,255,.10); stroke-width: 1; } .chart-line { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 500; stroke-dashoffset: 500; transition: stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1); } .chart-dot { fill: var(--teal-2); opacity: 0; transform-origin: center; transition: opacity .35s ease .65s; } .chart-bar { fill: var(--teal); transform: scaleY(0); transform-origin: bottom; transform-box: fill-box; transition: transform .8s cubic-bezier(.2,.8,.2,1); } .chart-bar--muted { fill: rgba(255,255,255,.32); } .is-visible .chart-line { stroke-dashoffset: 0; } .is-visible .chart-dot { opacity: 1; } .is-visible .chart-bar { transform: scaleY(1); } .source-note { margin: 14px 0 0; color: rgba(255,255,255,.42); font-size: 11px; } .market-implication { display: grid; gap: 10px; margin-top: 16px; } .market-implication__item { padding: 16px; border: 1px solid rgba(255,255,255,.11); border-radius: 17px; background: rgba(255,255,255,.055); } .market-implication__item strong { display: block; margin-bottom: 5px; color: var(--teal-2); font-size: 13px; letter-spacing: .02em; } .market-implication__item span { display: block; color: rgba(255,255,255,.67); font-size: 13px; line-height: 1.5; } .hotel-model { position: relative; z-index: 1; margin-top: 26px; padding: clamp(22px, 3vw, 32px); border: 1px solid rgba(255,255,255,.13); border-radius: var(--radius-xl); background: rgba(255,255,255,.06); box-shadow: 0 24px 70px rgba(0,0,0,.14); } .hotel-model__head { display: grid; gap: 9px; margin-bottom: 19px; } .hotel-model__head h3 { margin: 0; font-size: clamp(24px, 3vw, 34px); } .hotel-model__head p { margin: 0; max-width: 820px; color: rgba(255,255,255,.67); } .hotel-model__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .hotel-model__card { min-height: 132px; padding: 17px; border: 1px solid rgba(255,255,255,.10); border-radius: 18px; background: rgba(3,21,35,.28); } .hotel-model__card strong { display: block; margin-bottom: 7px; color: var(--teal-2); font-size: clamp(21px, 3vw, 29px); line-height: 1; letter-spacing: -.03em; } .hotel-model__card span { display: block; color: rgba(255,255,255,.67); font-size: 12px; line-height: 1.5; } .hotel-model__kpis { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .hotel-model__kpi { padding: 7px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: rgba(255,255,255,.63); background: rgba(255,255,255,.045); font-size: 11px; } .program-menu { margin-top: clamp(34px, 5vw, 54px); padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--radius-xl); background: linear-gradient(145deg, #F7FCFC, #FFFFFF); box-shadow: 0 18px 60px rgba(10,37,64,.06); } .program-menu__head { display: grid; gap: 9px; margin-bottom: 20px; } .program-menu__head h3 { margin: 0; font-size: clamp(25px, 3vw, 36px); } .program-menu__head p { margin: 0; max-width: 800px; color: var(--muted); } .program-grid { display: grid; gap: 12px; } .program-card { min-height: 150px; padding: 19px; border: 1px solid rgba(0,196,180,.23); border-radius: 19px; background: var(--white); } .program-card__time { display: inline-flex; margin-bottom: 14px; padding: 6px 9px; border-radius: 999px; color: #007E75; background: rgba(0,196,180,.11); font-size: 11px; font-weight: 780; } .program-card h4 { margin: 0 0 7px; color: var(--navy); font-size: 17px; line-height: 1.2; } .program-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; } .portrait-card { padding: 24px; border: 1px solid rgba(0,196,180,.28); border-radius: var(--radius-lg); background: linear-gradient(145deg, #FFFFFF, #F0FBFA); } .portrait-card__icon { width: 48px; height: 48px; margin-bottom: 26px; display: grid; place-items: center; border-radius: 15px; color: var(--navy); background: rgba(0,196,180,.14); } .portrait-card__icon svg { width: 24px; height: 24px; } .portrait-card p { margin-bottom: 0; color: var(--muted); font-size: 14px; } .equipment-shell { position: relative; overflow: hidden; background: radial-gradient(circle at 10% 20%, rgba(0,196,180,.20), transparent 27%), linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%); } .equipment-shell::after { content: ""; position: absolute; inset: auto -10% -160px; height: 320px; background: rgba(0,196,180,.12); filter: blur(100px); pointer-events: none; } .equipment-grid { position: relative; z-index: 1; } .equipment-card { position: relative; min-height: 475px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 26px; background: rgba(255,255,255,.07); box-shadow: 0 24px 70px rgba(0,0,0,.18); } .equipment-card__media { position: relative; height: 230px; overflow: hidden; } .equipment-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(6,27,47,.86)); } .equipment-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); } .equipment-card:hover .equipment-card__media img { transform: scale(1.045); } .equipment-card__body { padding: 2px 22px 23px; } .equipment-card__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: -26px; position: relative; z-index: 2; } .equipment-card h3 { margin: 0; font-size: 27px; } .equipment-role { max-width: 132px; padding: 7px 10px; border: 1px solid rgba(0,196,180,.28); border-radius: 999px; color: var(--teal-2); background: rgba(0,196,180,.10); font-size: 11px; font-weight: 790; line-height: 1.2; text-align: center; } .equipment-duration { display: inline-flex; margin: 15px 0 14px; padding: 7px 10px; border-radius: 999px; color: var(--teal-2); background: rgba(0,196,180,.12); font-size: 12px; font-weight: 750; } .equipment-card p { margin: 0; color: rgba(255,255,255,.66); font-size: 14px; } .equipment-note { position: relative; z-index: 1; margin-top: 22px; padding: 16px 18px; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; color: rgba(255,255,255,.60); background: rgba(255,255,255,.06); font-size: 12px; } .scenario-card { position: relative; min-height: 330px; overflow: hidden; border-radius: var(--radius-lg); color: var(--white); isolation: isolate; box-shadow: 0 20px 60px rgba(10,37,64,.14); } .scenario-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; transition: transform .7s ease; } .scenario-card::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(6,27,47,.04) 25%, rgba(6,27,47,.90) 100%); } .scenario-card::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; z-index: -1; background: var(--teal); transform: scaleX(.22); transform-origin: left; transition: transform .45s ease; } .scenario-card:hover img { transform: scale(1.04); } .scenario-card:hover::after { transform: scaleX(1); } .scenario-card__content { position: absolute; inset: auto 0 0; padding: 24px; } .scenario-card__index { display: block; margin-bottom: 9px; color: var(--teal-2); font-size: 12px; font-weight: 800; letter-spacing: .12em; } .scenario-card h3 { margin-bottom: 8px; } .scenario-card p { margin: 0; color: rgba(255,255,255,.70); font-size: 13px; } .why-layout { display: grid; gap: 30px; align-items: stretch; } .why-visual { position: relative; min-height: 360px; overflow: hidden; border-radius: var(--radius-xl); background: var(--navy); box-shadow: var(--shadow); isolation: isolate; } .why-visual::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: url("assets/asset_85faea2da9e3.webp"); background-size: cover; background-position: center; } .why-visual::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(155deg, rgba(6,27,47,.18), rgba(6,27,47,.88)); } .why-visual__caption { position: absolute; inset: auto 24px 24px; max-width: 410px; padding: 22px; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; color: var(--white); background: rgba(6,27,47,.62); backdrop-filter: blur(14px); } .why-visual__caption strong { display: block; margin-bottom: 6px; font-size: 22px; line-height: 1.2; } .why-visual__caption span { color: rgba(255,255,255,.66); font-size: 13px; } .why-list { display: grid; gap: 12px; } .why-item { display: grid; grid-template-columns: 48px 1fr; gap: 15px; align-items: start; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); } .why-item__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; color: var(--navy); background: var(--ice); } .why-item__icon svg { width: 23px; height: 23px; } .why-item strong { display: block; margin-bottom: 4px; font-size: 16px; } .why-item p { margin: 0; color: var(--muted); font-size: 13px; } .cta-section { position: relative; overflow: hidden; background: radial-gradient(circle at 8% 15%, rgba(0,196,180,.22), transparent 28%), radial-gradient(circle at 92% 88%, rgba(0,196,180,.18), transparent 30%), linear-gradient(135deg, var(--navy), var(--navy-2)); color: var(--white); } .cta-section::before { content: ""; position: absolute; inset: 0; opacity: .23; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom, black, transparent 76%); } .cta-grid { position: relative; display: grid; gap: 34px; align-items: start; } .cta-copy { padding-top: 4px; } .cta-copy h2 { max-width: 660px; } .cta-copy .lead { max-width: 620px; } .cta-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; } .cta-pill { padding: 8px 11px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: rgba(255,255,255,.72); background: rgba(255,255,255,.06); font-size: 12px; } .lead-form { padding: clamp(22px, 4vw, 34px); border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-xl); background: rgba(255,255,255,.09); box-shadow: 0 32px 90px rgba(0,0,0,.20); backdrop-filter: blur(18px); } .form-grid { display: grid; gap: 14px; } .field { display: grid; gap: 7px; } .field label { color: rgba(255,255,255,.74); font-size: 12px; font-weight: 680; } .field input, .field textarea { width: 100%; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; outline: none; color: var(--white); background: rgba(4,22,36,.44); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } .field input { height: 52px; padding: 0 15px; } .field textarea { min-height: 105px; padding: 13px 15px; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.34); } .field input:focus, .field textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(0,196,180,.13); background: rgba(4,22,36,.62); } .field--full { grid-column: 1 / -1; } .form-consent { margin: 12px 0 16px; color: rgba(255,255,255,.48); font-size: 11px; } .form-submit { width: 100%; border: 0; } .form-status { display: none; margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 13px; } .form-status.show { display: block; } .form-status.success { color: #BFFBF4; background: rgba(0,196,180,.14); border: 1px solid rgba(0,196,180,.25); } .form-status.error { color: #FFD5D5; background: rgba(255,95,95,.12); border: 1px solid rgba(255,95,95,.24); } .honeypot { position: absolute !important; left: -9999px !important; opacity: 0 !important; pointer-events: none !important; } .footer { padding: 26px 0; color: rgba(255,255,255,.50); background: #041421; font-size: 12px; } .footer__inner { display: flex; flex-direction: column; gap: 17px; align-items: flex-start; } .footer img { width: 170px; } .footer__right { display: flex; flex-wrap: wrap; gap: 14px 20px; } .reveal { opacity: 1; transform: none; } .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); } .js .reveal.is-visible { opacity: 1; transform: translateY(0); } .delay-1 { transition-delay: .08s; } .delay-2 { transition-delay: .16s; } .delay-3 { transition-delay: .24s; } .scroll-hint { display: flex; align-items: center; gap: 7px; margin-top: 8px; color: var(--muted); font-size: 11px; } .scroll-hint svg { width: 16px; height: 16px; } @media (min-width: 640px) { .container { width: min(calc(100% - 48px), var(--container)); } .hero { min-height: 820px; padding-bottom: 60px; } .hero__facts { gap: 12px; } .scroll-cards { grid-auto-columns: minmax(43%, 1fr); margin-right: -24px; } .market-grid { gap: 14px; } .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__inner { flex-direction: row; align-items: center; justify-content: space-between; } } @media (min-width: 900px) { .header { padding: 18px 0; } .header__nav { display: flex; } .hero { min-height: 790px; align-items: center; padding: 150px 0 78px; } .hero::after { background: linear-gradient(90deg, rgba(4,21,35,.95) 0%, rgba(4,21,35,.68) 48%, rgba(4,21,35,.08) 100%); } .section-head--split { grid-template-columns: 1.02fr .78fr; align-items: end; } .section-head--split .lead { justify-self: end; } .benefit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .portrait-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .equipment-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .scenario-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .scroll-cards { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; margin-right: 0; padding-bottom: 0; } .scroll-hint { display: none; } .market-panel__top { grid-template-columns: 1fr 1.15fr; align-items: end; } .market-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .market-implication { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hotel-model__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .program-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .why-layout { grid-template-columns: 1.08fr .92fr; } .cta-grid { grid-template-columns: .95fr 1.05fr; gap: clamp(44px, 6vw, 88px); } .equipment-card { min-height: 510px; } .equipment-card__media { height: 245px; } } @media (max-width: 430px) { .hero__facts { grid-template-columns: 1fr; max-width: 330px; } .hero-fact { min-height: auto; display: grid; grid-template-columns: minmax(118px, auto) 1fr; align-items: center; gap: 10px; } .hero-fact strong { margin: 0; font-size: 18px; white-space: nowrap; } .btn { width: 100%; } .btn--header { width: auto; } .market-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } .chart-line { stroke-dashoffset: 0; } .chart-dot { opacity: 1; } .chart-bar { transform: scaleY(1); } } /* final hotel updates */ .header__actions{display:flex;align-items:center;gap:10px;flex:0 0 auto} .btn--call{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);backdrop-filter:blur(10px)} .btn--call:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.38)} .btn--call svg{width:16px;height:16px} .exo-master-logo{display:block!important;height:auto!important;object-fit:contain;object-position:left center;flex:0 0 auto} .brand .exo-master-logo--header,.header .exo-master-logo--header{width:clamp(172px,20vw,232px)!important;max-width:100%} .footer .exo-master-logo--footer{width:clamp(150px,16vw,180px)!important;max-width:min(50vw,180px)!important;height:auto!important;object-fit:contain} .market-glossary{display:grid;gap:8px;margin-top:14px;padding:14px 16px;border:1px solid rgba(10,37,64,.10);border-radius:16px;background:#fff} .market-glossary div{display:grid;grid-template-columns:74px 1fr;gap:10px;align-items:start;font-size:12px;line-height:1.45;color:var(--muted)} .market-glossary strong{color:var(--navy);font-weight:820} .equipment-card__top{align-items:center!important;flex-wrap:wrap} .equipment-role{width:150px!important;max-width:150px!important;min-height:34px;display:flex!important;align-items:center;justify-content:center;padding:7px 10px!important;border-radius:12px!important;white-space:normal!important;overflow-wrap:anywhere;flex:0 0 150px;font-size:11px!important;line-height:1.15!important} .equipment-tech{margin:0 0 10px!important;color:#fff!important;font-size:13px!important;font-weight:760;line-height:1.45!important} .program-card{min-height:220px!important} .program-devices{display:grid;gap:10px;margin-top:12px} .program-device{padding-top:10px;border-top:1px solid rgba(10,37,64,.09);display:grid;gap:3px} .program-device:first-child{padding-top:0;border-top:0} .program-device strong{color:var(--navy);font-size:13px;font-weight:800} .program-device span{color:var(--muted);font-size:12px;line-height:1.5} .hotel-model__grid{grid-template-columns:repeat(3,minmax(0,1fr))!important} @media(max-width:780px){.hotel-model__grid{grid-template-columns:1fr!important}.market-glossary div{grid-template-columns:1fr;gap:2px}} @media(max-width:620px){.header__actions{gap:6px}.btn--call{padding-inline:12px}.btn--call span{display:none}.btn--call svg{width:18px;height:18px}.brand .exo-master-logo--header{width:150px!important}.equipment-role{width:142px!important;max-width:142px!important;flex-basis:142px}} /* Hotel economics refinements */ .exo-econ__benchmark{ margin-top:18px; padding:18px 20px; border:1px solid rgba(0,196,180,.28); border-radius:18px; background:linear-gradient(135deg,rgba(0,196,180,.08),rgba(255,255,255,.04)); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); } .exo-econ__benchmark-label{ display:block; margin-bottom:7px; color:var(--teal,#00C4B4); font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; } .exo-econ__benchmark p{ margin:0; color:inherit; font-size:14px; line-height:1.55; } .exo-econ__benchmark p strong{ color:var(--teal,#00C4B4); font-size:1.08em; white-space:nowrap; } .exo-econ__benchmark b{ display:block; margin-top:7px; color:inherit; font-size:12px; line-height:1.45; opacity:.72; } .exo-econ__actions{ display:flex; justify-content:flex-start; margin-top:18px; } .exo-econ__consult{ min-width:230px; justify-content:center; } .exo-econ__consult svg{ width:18px; height:18px; } @media(max-width:640px){ .exo-econ__benchmark{padding:16px} .exo-econ__actions{display:block} .exo-econ__consult{width:100%;min-width:0} } /* ---- merged style block ---- */ /* ===== EXO economics blocks: Hotel + Fitness ===== */ .exo-econ{--ee-navy:#0A2540;--ee-deep:#061B2F;--ee-teal:#00C4B4;--ee-teal-2:#39E0D2;--ee-ice:#EAF9F7;--ee-red:#F0656B;--ee-muted:#60778B;position:relative;overflow:hidden;background:#F4FAFB;color:var(--ee-navy)} .exo-econ::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-260px;top:-270px;background:rgba(0,196,180,.13);filter:blur(18px);pointer-events:none} .exo-econ__head{position:relative;z-index:1;display:grid;gap:14px;margin-bottom:28px;max-width:920px} .exo-econ__eyebrow{display:flex;align-items:center;gap:10px;color:#008F84;font-size:11px;font-weight:850;letter-spacing:.095em;text-transform:uppercase} .exo-econ__eyebrow::before{content:"";width:28px;height:2px;border-radius:3px;background:var(--ee-teal)} .exo-econ__head h2{margin:0;color:var(--ee-navy);font-size:clamp(31px,5vw,58px);line-height:1.02;letter-spacing:-.048em} .exo-econ__head p{max-width:860px;margin:0;color:var(--ee-muted);font-size:clamp(15px,1.55vw,19px);line-height:1.55} .exo-econ__metrics{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px} .exo-econ__metric{min-width:0;padding:17px 16px;border:1px solid rgba(0,196,180,.26);border-radius:18px;background:rgba(255,255,255,.9);box-shadow:0 12px 36px rgba(4,31,50,.055)} .exo-econ__metric strong{display:block;color:#00A99A;font-size:clamp(22px,3vw,34px);line-height:1.05;letter-spacing:-.035em;font-variant-numeric:tabular-nums} .exo-econ__metric span{display:block;margin-top:7px;color:var(--ee-navy);font-size:12px;font-weight:760;line-height:1.32} .exo-econ__metric small{display:block;margin-top:4px;color:var(--ee-muted);font-size:10px;line-height:1.35} .exo-econ__compare{position:relative;z-index:1;display:grid;gap:14px} .exo-econ__panel{min-width:0;padding:22px;border-radius:25px} .exo-econ__panel--loss{color:#fff;background:radial-gradient(circle at 8% 0%,rgba(240,101,107,.16),transparent 30%),linear-gradient(145deg,var(--ee-deep),var(--ee-navy));box-shadow:0 24px 60px rgba(4,25,41,.16)} .exo-econ__panel--gain{border:1px solid rgba(0,196,180,.34);background:rgba(255,255,255,.96);box-shadow:0 24px 60px rgba(4,31,50,.075)} .exo-econ__panel-title{display:flex;align-items:center;gap:11px;margin:0 0 17px;font-size:20px;line-height:1.15;letter-spacing:-.025em} .exo-econ__panel-title i{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;font-style:normal;font-size:17px} .exo-econ__panel--loss .exo-econ__panel-title{color:#fff}.exo-econ__panel--loss .exo-econ__panel-title i{color:#FFD7D9;background:rgba(240,101,107,.16)} .exo-econ__panel--gain .exo-econ__panel-title{color:var(--ee-navy)}.exo-econ__panel--gain .exo-econ__panel-title i{color:#008F84;background:var(--ee-ice)} .exo-econ__list{display:grid;gap:9px} .exo-econ__item{display:grid;grid-template-columns:34px 1fr;gap:11px;align-items:start;padding:13px;border-radius:16px} .exo-econ__panel--loss .exo-econ__item{border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.045)} .exo-econ__panel--gain .exo-econ__item{border:1px solid rgba(10,37,64,.095);background:linear-gradient(180deg,#fff,#F7FBFB)} .exo-econ__item b{width:28px;height:28px;border-radius:10px;display:grid;place-items:center;font-size:11px} .exo-econ__panel--loss .exo-econ__item b{color:#FFD7D9;background:rgba(240,101,107,.16)} .exo-econ__panel--gain .exo-econ__item b{color:#008F84;background:var(--ee-ice)} .exo-econ__item strong{display:block;margin:1px 0 4px;font-size:14px;line-height:1.25} .exo-econ__item span{display:block;font-size:11px;line-height:1.43} .exo-econ__panel--loss .exo-econ__item span{color:rgba(255,255,255,.65)} .exo-econ__panel--gain .exo-econ__item span{color:var(--ee-muted)} .exo-econ__bridge{position:relative;z-index:1;margin:14px 0;padding:16px 18px;border-radius:19px;border:1px solid rgba(0,196,180,.28);background:linear-gradient(115deg,rgba(0,196,180,.12),rgba(255,255,255,.94));display:grid;gap:10px} .exo-econ__bridge strong{color:var(--ee-navy);font-size:16px;line-height:1.25} .exo-econ__bridge p{margin:0;color:var(--ee-muted);font-size:11px;line-height:1.5} .exo-econ__ops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .exo-econ__op{padding:11px 12px;border-radius:14px;background:#fff;border:1px solid rgba(0,196,180,.22)} .exo-econ__op b{display:block;color:#00A99A;font-size:17px;line-height:1.05}.exo-econ__op span{display:block;margin-top:4px;color:var(--ee-muted);font-size:9px;line-height:1.25} .exo-econ__calc{position:relative;z-index:1;margin-top:14px;padding:22px;border-radius:25px;color:#fff;background:radial-gradient(circle at 90% 0%,rgba(0,196,180,.25),transparent 34%),linear-gradient(135deg,var(--ee-navy),var(--ee-deep));box-shadow:0 25px 70px rgba(4,25,41,.18)} .exo-econ__calc-head{display:grid;gap:6px;margin-bottom:17px}.exo-econ__calc-head span{color:var(--ee-teal-2);font-size:10px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}.exo-econ__calc-head h3{margin:0;color:#fff;font-size:22px;line-height:1.15}.exo-econ__calc-head p{margin:0;color:rgba(255,255,255,.58);font-size:11px;line-height:1.45} .exo-econ__calc-grid{display:grid;gap:13px} .exo-econ__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px} .exo-econ__field{display:grid;gap:6px;min-width:0}.exo-econ__field label{color:rgba(255,255,255,.72);font-size:10px;font-weight:760}.exo-econ__field input{width:100%;min-width:0;height:48px;padding:0 13px;border-radius:13px;border:1px solid rgba(255,255,255,.17);outline:none;color:#fff;background:rgba(255,255,255,.075);font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}.exo-econ__field input::placeholder{color:rgba(255,255,255,.28)}.exo-econ__field input:focus{border-color:var(--ee-teal);box-shadow:0 0 0 3px rgba(0,196,180,.13)} .exo-econ__results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.exo-econ__result{min-width:0;padding:15px;border-radius:16px;border:1px solid rgba(0,196,180,.28);background:rgba(0,196,180,.09)}.exo-econ__result span{display:block;color:rgba(255,255,255,.56);font-size:9px;text-transform:uppercase;letter-spacing:.055em}.exo-econ__result strong{display:block;margin-top:6px;color:var(--ee-teal-2);font-size:clamp(19px,3vw,29px);line-height:1.05;letter-spacing:-.035em;white-space:nowrap;font-variant-numeric:tabular-nums}.exo-econ__result small{display:block;margin-top:4px;color:rgba(255,255,255,.48);font-size:9px;line-height:1.3} .exo-econ__disclaimer{margin:13px 0 0;color:rgba(255,255,255,.43);font-size:9px;line-height:1.45} @media(min-width:640px){.exo-econ__metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.exo-econ__ops{grid-template-columns:repeat(4,minmax(0,1fr))}.exo-econ__fields{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(min-width:900px){.exo-econ__compare{grid-template-columns:repeat(2,minmax(0,1fr))}.exo-econ__panel{padding:27px}.exo-econ__calc{padding:28px}.exo-econ__calc-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end}.exo-econ__results{align-self:stretch}.exo-econ__result{display:flex;flex-direction:column;justify-content:center}} @media(max-width:480px){.exo-econ__head h2{font-size:34px}.exo-econ__metric{padding:15px 13px}.exo-econ__panel{padding:18px}.exo-econ__fields,.exo-econ__results{grid-template-columns:1fr}.exo-econ__result strong{white-space:normal}.exo-econ__ops{grid-template-columns:1fr 1fr}} /* v6 typography refinement */ #formats .section-head h2{font-size:clamp(28px,3.25vw,48px)!important;line-height:1.06!important;letter-spacing:-.025em!important;max-width:760px} @media(max-width:760px){#formats .section-head h2{font-size:clamp(26px,8vw,36px)!important;line-height:1.08!important}} /* v8: visual QA + anchor/nav refinement */ section[id]{scroll-margin-top:96px} .cta-section .lead{color:rgba(255,255,255,.76)} @media(max-width:620px){ section[id]{scroll-margin-top:82px} h1{font-size:clamp(36px,10vw,40px);line-height:1.01;letter-spacing:-.045em} h2{font-size:clamp(29px,8.3vw,33px);line-height:1.06;letter-spacing:-.035em} .hero__subtitle{font-size:18px;line-height:1.46} #formats .section-head h2{font-size:clamp(29px,8.3vw,33px)!important;line-height:1.06!important;letter-spacing:-.035em!important} .equipment-shell .section-head h2{font-size:clamp(29px,8.3vw,33px);line-height:1.06} .exo-econ__head h2{font-size:32px;line-height:1.04;letter-spacing:-.038em} .cta-copy h2{font-size:34px;line-height:1.04;letter-spacing:-.035em} .lead{font-size:17px;line-height:1.52} } @media(max-width:380px){ .brand .exo-master-logo--header{width:132px!important} .btn--header{padding-inline:13px;font-size:12px} .header__actions{gap:5px} .hero-fact{grid-template-columns:minmax(105px,auto) 1fr} .hero-fact strong{font-size:17px} } /* === EXO callback modal === */ body.exo-callback-open{overflow:hidden} .exo-callback{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:20px} .exo-callback.is-open{display:flex} .exo-callback__backdrop{position:absolute;inset:0;background:rgba(3,18,31,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .exo-callback__dialog{position:relative;width:min(100%,460px);max-height:calc(100svh - 32px);overflow:auto;padding:30px;border:1px solid rgba(10,37,64,.10);border-radius:26px;background:#fff;color:#0A2540;box-shadow:0 34px 100px rgba(2,20,34,.30)} .exo-callback__close{position:absolute;top:14px;right:14px;width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(10,37,64,.10);border-radius:50%;background:#fff;color:#61798B;font-size:24px;line-height:1;cursor:pointer;transition:.2s ease} .exo-callback__close:hover{color:#0A2540;border-color:rgba(10,37,64,.25);transform:rotate(3deg)} .exo-callback__eyebrow{margin:0 46px 10px 0;color:#00AFA2;font-size:11px;font-weight:850;letter-spacing:.13em;text-transform:uppercase} .exo-callback__dialog h2{margin:0 46px 10px 0;font-size:clamp(27px,5vw,34px);line-height:1.04;letter-spacing:-.035em} .exo-callback__intro{margin:0 0 22px;color:#61798B;font-size:14px;line-height:1.55} .exo-callback__intro a{color:#0A2540;font-weight:800;text-decoration:underline;text-decoration-color:rgba(0,196,180,.45);text-underline-offset:3px} .exo-callback__field{display:grid;gap:7px;margin-bottom:14px} .exo-callback__field label{font-size:12px;font-weight:800;color:#0A2540} .exo-callback__field input{width:100%;height:50px;padding:0 14px;border:1px solid rgba(10,37,64,.14);border-radius:13px;background:#F7FAFB;color:#0A2540;outline:none;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease} .exo-callback__field input::placeholder{color:#91A3AF} .exo-callback__field input:focus{background:#fff;border-color:#00C4B4;box-shadow:0 0 0 4px rgba(0,196,180,.10)} .exo-callback__consent{display:flex;align-items:flex-start;gap:9px;margin:4px 0 16px;color:#7B8D99;font-size:10px;line-height:1.45;cursor:pointer} .exo-callback__consent input{width:15px;height:15px;margin:1px 0 0;accent-color:#00C4B4;flex:0 0 auto} .exo-callback__submit{width:100%;min-height:52px;border:0;border-radius:999px;background:#00C4B4;color:#061B2F;font:800 14px/1 Inter,Manrope,"Segoe UI",Arial,sans-serif;cursor:pointer;box-shadow:0 12px 30px rgba(0,196,180,.22);transition:transform .2s ease,box-shadow .2s ease,background .2s ease} .exo-callback__submit:hover{transform:translateY(-1px);background:#3BE4D6;box-shadow:0 16px 36px rgba(0,196,180,.28)} .exo-callback__submit:disabled{opacity:.62;cursor:wait;transform:none} .exo-callback__status{display:none;margin:14px 0 0;padding:11px 12px;border-radius:11px;font-size:12px;line-height:1.45} .exo-callback__status.is-show{display:block} .exo-callback__status.is-success{color:#075B53;background:#E4FAF7;border:1px solid rgba(0,196,180,.22)} .exo-callback__status.is-error{color:#8C2E2E;background:#FFF0F0;border:1px solid rgba(204,69,69,.18)} @media(max-width:520px){ .exo-callback{padding:12px} .exo-callback__dialog{padding:24px 18px 20px;border-radius:22px} .exo-callback__dialog h2{font-size:27px} .exo-callback__intro{font-size:13px} }