@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("../fonts/space-grotesk-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --white: #FFFFFF; --black: #000000; --green-950: #032417; --green-900: #05341F; --green-800: #07472A; --green-700: #087A45; --green: #04B962; --green-600: #05A758; --green-500: #17C673; --green-400: #3BD489; --green-300: #6FE0A8; --green-200: #A9EECB; --green-100: #D6F7E6; --green-050: #EEFBF4; --ember-950: #2C0D03; --ember-900: #431303; --ember-800: #641C04; --ember-700: #932406; --ember: #C12E04; --ember-600: #D63A0E; --ember-500: #E85423; --ember-400: #F0764B; --ember-300: #F5A084; --ember-200: #F9C7B6; --ember-100: #FCE4DB; --ember-050: #FEF3EF; --graphite-950: #0C0C0D; --graphite-900: #141415; --graphite-800: #1C1C1D; --graphite: #242526; --graphite-700: #313234; --graphite-600: #45474A; --graphite-500: #5D6064; --graphite-400: #7C8085; --graphite-300: #A6AAAF; --graphite-200: #CBCDD1; --graphite-100: #E4E6E8; --graphite-050: #F3F4F5; --ink: #1B1C1D; --ink-soft: #33353A; --muted: #565A60; --line: #E2E4E7; --line-strong: #CBCED2; --surface: #FFFFFF; --surface-2: #F4F5F6; --surface-3: #EAEBED; --page: #F7F8F8; --success: var(--green-700); --success-bg: var(--green-050); --success-line: var(--green-200); --error: var(--ember-700); --error-bg: var(--ember-050); --error-line: var(--ember-200); --bg-page: var(--page); --bg-surface: var(--surface); --bg-dark: var(--graphite); --text-body: var(--ink); --text-heading: var(--graphite-950); --text-muted: var(--muted); --accent: var(--green-700); --accent-strong: var(--green-800); --link: var(--green-700); --link-hover: var(--ember-700); --border: var(--line); --focus: #087A45; --text-on-dark: #E7E8EA; --text-on-dark-soft: #B2B5BA; --accent-on-dark: var(--green-300); --line-on-dark: rgba(255, 255, 255, 0.14); --surface-on-dark: rgba(255, 255, 255, 0.06); --grad-dark: radial-gradient(1100px 620px at 84% -12%, rgba(4, 185, 98, 0.30), transparent 60%), radial-gradient(880px 560px at 2% 6%, rgba(193, 46, 4, 0.26), transparent 62%), linear-gradient(180deg, #1C1C1D 0%, #141415 55%, #0C0C0D 100%); --grad-tint: linear-gradient(180deg, var(--green-050) 0%, var(--surface-2) 100%); --grad-deep: linear-gradient(180deg, var(--surface-3) 0%, var(--green-050) 100%); --grad-soft: linear-gradient(135deg, var(--green-050) 0%, var(--ember-050) 100%); --grad-key: linear-gradient(180deg, #2F3033 0%, #202123 60%, #17181A 100%); --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --fs-hero: clamp(2rem, 1.3rem + 2.9vw, 3.3rem); --fs-h1: clamp(1.95rem, 1.35rem + 2.5vw, 3.05rem); --fs-h2: clamp(1.6rem, 1.15rem + 1.7vw, 2.4rem); --fs-h3: clamp(1.24rem, 1.05rem + 0.8vw, 1.6rem); --fs-h4: clamp(1.05rem, 1rem + 0.35vw, 1.22rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-lead: clamp(1.05rem, 1rem + 0.45vw, 1.26rem); --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --pad-card: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem); --pad-panel: clamp(1.5rem, 1rem + 2vw, 2.5rem); --gap-grid: clamp(1.25rem, 1rem + 1vw, 2rem); --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 30px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(20, 20, 22, 0.05), 0 1px 3px rgba(20, 20, 22, 0.07); --shadow-md: 0 8px 24px rgba(20, 20, 22, 0.09), 0 2px 8px rgba(20, 20, 22, 0.05); --shadow-lg: 0 22px 48px rgba(20, 20, 22, 0.14), 0 8px 18px rgba(20, 20, 22, 0.07); --shadow-green: 0 10px 26px rgba(4, 185, 98, 0.30); --shadow-ember: 0 10px 26px rgba(193, 46, 4, 0.26); --shadow-dark: 0 18px 44px rgba(0, 0, 0, 0.40); --container: 1200px; --container-narrow: 800px; --header-h: 72px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur: 200ms; --dur-slow: 420ms; } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1.25rem); } [id] { scroll-margin-top: calc(var(--header-h) + 1.25rem); } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65; color: var(--text-body); background: var(--bg-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } [hidden] { display: none !important; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } ul, ol { padding-left: 1.25rem; } a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--dur) var(--ease); } a:hover { color: var(--link-hover); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--text-heading); line-height: 1.16; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } p { max-width: 72ch; } .kw { color: var(--green-700); font-weight: 700; } .section--dark .kw, .page-hero .kw, .post-hero .kw { color: var(--accent-on-dark); } .kw-link { color: var(--green-700); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(8, 122, 69, 0.4); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .kw-link:hover { color: var(--ember-700); border-bottom-color: var(--ember-700); } .section--dark .kw-link, .page-hero .kw-link { color: var(--accent-on-dark); border-bottom-color: rgba(111, 224, 168, 0.5); } .section--dark .kw-link:hover, .page-hero .kw-link:hover { color: var(--white); border-bottom-color: var(--white); } .kw-link--plain, .kw-link--plain:hover { border-bottom: 0; } .skip-link { position: absolute; left: 12px; top: -70px; z-index: 999; background: var(--green-700); color: var(--white); padding: 0.7rem 1.1rem; border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; transition: top var(--dur) var(--ease); } .skip-link:focus { top: 12px; color: var(--white); } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 0.5rem + 2vw, 2rem); } .container--narrow { max-width: var(--container-narrow); } .section { padding-block: clamp(3.25rem, 2.5rem + 3vw, 5.5rem); } .section--tight { padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); } .section--surface { background: var(--surface); } .section--tint { background: var(--grad-tint); } .section--deep { background: var(--grad-deep); } .section--dark { background: var(--graphite); background-image: var(--grad-dark); color: var(--text-on-dark); } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); } .section--dark p { color: var(--text-on-dark); } .section--dark a:not(.btn) { color: var(--accent-on-dark); } .section--dark a:not(.btn):hover { color: var(--white); } main { flex: 1 0 auto; } .section-head { margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem); } .section-head--center { text-align: center; max-width: 720px; margin-inline: auto; } .section-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-800); background: var(--green-100); padding: 0.42rem 0.9rem; border-radius: var(--radius-pill); margin-bottom: var(--space-4); } .section--dark .section-eyebrow, .page-hero .section-eyebrow { color: var(--accent-on-dark); background: rgba(111, 224, 168, 0.14); } .section-title { font-size: var(--fs-h2); margin-bottom: var(--space-3); } .section-intro { font-size: var(--fs-lead); color: var(--text-muted); max-width: 62ch; } .section-head--center .section-intro { margin-inline: auto; } .section--dark .section-intro { color: var(--text-on-dark); } .grid { display: grid; gap: var(--gap-grid); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .text-center { text-align: center; } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-7); } .flow > * + * { margin-top: 1.1rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .reveal { opacity: 0; transform: translateY(18px); transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); } .reveal.is-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .reveal { opacity: 1; transform: none; } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; line-height: 1; padding: 0.9rem 1.6rem; min-height: 46px; border: 1px solid transparent; border-radius: var(--radius-pill); background-color: var(--green-700); color: var(--white); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease), background-image var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .btn:active { transform: translateY(0) scale(0.985); } .btn__icon, .btn__arrow { width: 1.15em; height: 1.15em; flex: none; } .btn__arrow { transition: transform var(--dur) var(--ease); } .btn--sm { padding: 0.62rem 1.15rem; min-height: 38px; font-size: 0.9rem; } .btn--lg { padding: 1.05rem 2rem; min-height: 54px; font-size: 1.05rem; } .btn--block { width: 100%; } @media (hover: hover) { .btn:hover { transform: translateY(-2px); } .btn:hover .btn__arrow { transform: translateX(3px); } } .btn--primary { background-color: var(--green-700); color: var(--white); box-shadow: var(--shadow-green); } @media (hover: hover) { .btn--primary:hover { background-image: linear-gradient(135deg, var(--green-600) 0%, var(--green-800) 100%); color: var(--white); box-shadow: 0 14px 32px rgba(4, 185, 98, 0.38); } } .btn--secondary { background-color: var(--surface); color: var(--green-800); border-color: var(--line-strong); box-shadow: var(--shadow-sm); } @media (hover: hover) { .btn--secondary:hover { background-color: var(--green-050); color: var(--green-800); border-color: var(--green-700); box-shadow: var(--shadow-md); } } .btn--ember { background-color: var(--ember); color: var(--white); box-shadow: var(--shadow-ember); } @media (hover: hover) { .btn--ember:hover { background-image: linear-gradient(135deg, var(--ember-500) 0%, var(--ember-700) 100%); color: var(--white); box-shadow: 0 14px 32px rgba(193, 46, 4, 0.36); } } .btn--on-dark { background-color: var(--white); color: var(--graphite-900); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); } @media (hover: hover) { .btn--on-dark:hover { background-color: var(--green-050); color: var(--green-800); box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45); } } .btn--ghost-dark { background-color: rgba(255, 255, 255, 0.07); color: var(--white); border-color: rgba(255, 255, 255, 0.32); backdrop-filter: blur(6px); } @media (hover: hover) { .btn--ghost-dark:hover { background-color: rgba(111, 224, 168, 0.18); color: var(--white); border-color: var(--accent-on-dark); } } .chip { display: inline-flex; align-items: center; align-self: flex-start; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green-800); background: var(--green-100); padding: 0.32rem 0.7rem; border-radius: var(--radius-pill); } .chip--cyan { color: var(--white); background: var(--graphite); } .chip--violet { color: var(--white); background: var(--green-700); } .chip--ember { color: var(--white); background: var(--ember); } .chip--mint { color: var(--green-800); background: var(--white); box-shadow: inset 0 0 0 1px var(--green-300); } #site-header:empty { min-height: calc(var(--header-h) + 1px); } .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.86); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); } .site-header.is-scrolled { background: rgba(255, 255, 255, 0.94); border-bottom-color: var(--line); box-shadow: 0 6px 22px rgba(20, 20, 22, 0.07); } .nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--header-h); } .brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--graphite-950); letter-spacing: -0.02em; transition: opacity var(--dur) var(--ease); } @media (hover: hover) { .brand:hover { color: var(--graphite-950); opacity: 0.82; } } .brand__mark { width: 40px; height: 40px; border-radius: 11px; flex: none; box-shadow: var(--shadow-sm); } .brand__name { color: var(--graphite-950); } .brand__name b { font-weight: 700; color: var(--green-700); } .site-footer .brand { color: var(--white); } @media (hover: hover) { .site-footer .brand:hover { color: var(--white); } } .site-footer .brand__name { color: var(--white); } .site-footer .brand__name b { color: var(--accent-on-dark); } .nav__menu { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; } .nav__menu-head, .nav__menu-cta { display: none; } .nav__link { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.55rem 0.85rem; border-radius: var(--radius-pill); color: var(--ink-soft); text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease); } @media (hover: hover) { .nav__link:hover { color: var(--green-800); background-color: var(--green-100); } } .nav__link[aria-current="page"] { color: var(--green-800); background-color: var(--green-100); font-weight: 600; } .nav__icon { display: none; } .nav__actions { display: flex; align-items: center; gap: 0.7rem; } .nav__toggle { display: none; width: 46px; height: 46px; border: 1px solid var(--line); background: var(--surface); border-radius: 13px; align-items: center; justify-content: center; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); } @media (hover: hover) { .nav__toggle:hover { background-color: var(--green-050); border-color: var(--green-200); } } .nav__toggle-bars { position: relative; width: 20px; height: 14px; } .nav__toggle-bars span { position: absolute; left: 0; height: 2px; width: 100%; background: var(--graphite-950); border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .nav__toggle-bars span:nth-child(1) { top: 0; } .nav__toggle-bars span:nth-child(2) { top: 6px; } .nav__toggle-bars span:nth-child(3) { top: 12px; } .nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(2) { opacity: 0; } .nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .nav__close { display: none; } .nav__backdrop { display: none; } .hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: clamp(30rem, 24rem + 22vw, 45rem); padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(4.5rem, 3rem + 6vw, 8rem); background-color: var(--graphite-950); background-image: url("../images/hero/homepage-hero-bg.webp"); background-repeat: no-repeat; background-position: right center; background-size: cover; } .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(6, 6, 7, 0.94) 0%, rgba(6, 6, 7, 0.88) 30%, rgba(6, 6, 7, 0.72) 47%, rgba(6, 6, 7, 0.4) 58%, rgba(6, 6, 7, 0.1) 71%, rgba(6, 6, 7, 0) 83%), linear-gradient(to bottom, rgba(6, 6, 7, 0.35) 0%, rgba(6, 6, 7, 0) 22%); pointer-events: none; } .hero .container { position: relative; z-index: 1; width: 100%; } .hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: clamp(2rem, 1rem + 4vw, 4.25rem); max-width: 40rem; } .hero__title { font-size: var(--fs-hero); line-height: 1.08; margin: 0.65rem 0 1.05rem; letter-spacing: -0.022em; text-wrap: balance; } .hero__lead { font-size: var(--fs-lead); color: var(--text-on-dark); max-width: 52ch; text-wrap: pretty; } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; } .hero__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.15rem; list-style: none; margin: 1.5rem 0 0; padding: 0; } .hero__trust li { display: inline-flex; align-items: center; gap: 0.42rem; font-size: 0.82rem; letter-spacing: 0.005em; color: var(--text-on-dark); font-weight: 500; white-space: nowrap; } .hero__trust li::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--green-400) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23141415' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } @media (hover: hover) { .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--green-200); } .card:hover .card__media img { transform: scale(1.06); } } .card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-3); } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 560ms var(--ease-out); } .card__body { padding: var(--pad-card); display: flex; flex-direction: column; gap: 0.65rem; flex: 1; } .card__title { font-size: 1.15rem; line-height: 1.3; margin: 0.1rem 0; } .card__title a { color: var(--text-heading); text-decoration: none; transition: color var(--dur) var(--ease); } @media (hover: hover) { .card__title a:hover { color: var(--green-700); } } .card__text { color: var(--text-muted); font-size: 0.95rem; margin: 0; } .card__meta { margin-top: auto; padding-top: var(--space-2); font-size: 0.82rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.4rem; } .feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--pad-card); box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } @media (hover: hover) { .feature:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--green-200); } .feature:hover .feature__icon { background-image: linear-gradient(135deg, var(--green-600), var(--green-800)); } } .feature__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background-color: var(--green-700); color: var(--white); margin-bottom: var(--space-4); box-shadow: var(--shadow-green); transition: background-color var(--dur) var(--ease), background-image var(--dur) var(--ease); } .feature__icon svg { width: 26px; height: 26px; } .feature h3 { font-size: 1.18rem; margin-bottom: var(--space-2); } .feature p { color: var(--text-muted); font-size: 0.96rem; margin: 0; } .step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--pad-card); box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } @media (hover: hover) { .step:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--green-200); } } .step__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); } .step__num { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--white); background-color: var(--ember); } .step__icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; color: var(--green-800); background-color: var(--green-100); } .step__icon svg { width: 24px; height: 24px; } .step h3 { font-size: 1.18rem; margin-bottom: var(--space-2); } .step p { color: var(--text-muted); font-size: 0.96rem; margin: 0; } .note-block { display: flex; gap: 1.1rem; align-items: flex-start; background: var(--grad-soft); border: 1px solid var(--green-200); border-radius: var(--radius-lg); padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); } .note-block__icon { flex: none; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--white); color: var(--green-700); box-shadow: var(--shadow-sm); } .note-block__icon svg { width: 26px; height: 26px; } .note-block__title { font-size: 1.3rem; margin-bottom: var(--space-2); } .note-block p { color: var(--ink-soft); margin: 0; } .split-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: clamp(2rem, 1rem + 4vw, 4rem); } .split-layout__media { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line); } .split-layout__media img { width: 100%; height: 100%; object-fit: cover; } .reviews__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); flex-wrap: wrap; } .reviews__intro { max-width: 620px; } .reviews__controls { display: flex; gap: var(--space-2); } .rev-btn { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; border: 1px solid var(--line); background: var(--surface); color: var(--graphite-800); box-shadow: var(--shadow-sm); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } @media (hover: hover) { .rev-btn:hover { background-color: var(--green-700); color: var(--white); border-color: var(--green-700); transform: translateY(-2px); } } .rev-btn:active { transform: translateY(0); } .rev-btn svg { width: 22px; height: 22px; } .rev-btn__play { display: none; } .rev-btn.is-paused .rev-btn__pause { display: none; } .rev-btn.is-paused .rev-btn__play { display: block; } .reviews__viewport { overflow: hidden; padding: 0.5rem; margin: -0.5rem; } .reviews__track { display: flex; gap: var(--space-5); transition: transform 550ms var(--ease-out); will-change: transform; } .review-card { flex: 0 0 calc((100% - 3rem) / 3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--pad-card); box-shadow: var(--shadow-sm); margin: 0; display: flex; flex-direction: column; gap: var(--space-4); transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } @media (hover: hover) { .review-card:hover { box-shadow: var(--shadow-md); border-color: var(--green-200); } } .review-card__stars { display: flex; gap: 3px; color: var(--green-600); } .review-card__stars svg { width: 20px; height: 20px; } .review-card__text { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.6; margin: 0; } .review-card__person { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; } .review-card__avatar { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background-color: var(--ember); color: var(--white); font-weight: 700; font-family: var(--font-display); font-size: 0.9rem; } .review-card__person > span:last-child { display: flex; flex-direction: column; line-height: 1.35; } .review-card__name { font-weight: 600; color: var(--graphite-950); } .review-card__role { font-size: 0.82rem; color: var(--text-muted); } .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; } .accordion { display: flex; flex-direction: column; gap: var(--space-3); } .accordion__item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } @media (hover: hover) { .accordion__item:hover { border-color: var(--green-200); box-shadow: var(--shadow-sm); } } .accordion__item:has(.accordion__trigger[aria-expanded="true"]) { border-color: var(--green-200); box-shadow: var(--shadow-sm); } .accordion__item h3 { margin: 0; font-size: 1rem; } .accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 1.1rem 1.25rem; background: none; border: 0; text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--graphite-950); transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease); } @media (hover: hover) { .accordion__trigger:hover { color: var(--green-800); background-color: var(--green-050); } } .accordion__trigger[aria-expanded="true"] { color: var(--green-800); } .accordion__icon { width: 22px; height: 22px; flex: none; color: var(--green-700); transition: transform var(--dur) var(--ease); } .accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(135deg); } .accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms var(--ease-out); } .accordion__panel.is-open { grid-template-rows: 1fr; } .accordion__panel-inner { min-height: 0; overflow: hidden; padding-inline: 1.25rem; visibility: hidden; transition: visibility 300ms var(--ease-out), padding-bottom 300ms var(--ease-out); } .accordion__panel.is-open .accordion__panel-inner { visibility: visible; padding-bottom: 1.2rem; } .accordion__panel p { color: var(--text-muted); font-size: 0.95rem; margin: 0; } .cta-final { text-align: center; } .cta-final .section-title { color: var(--white); } .scroll-top { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 14px; background-color: var(--green-700); color: var(--white); box-shadow: var(--shadow-green); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), visibility var(--dur); } .scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } @media (hover: hover) { .scroll-top.is-visible:hover { transform: translateY(-3px); background-color: var(--green-800); box-shadow: 0 14px 32px rgba(4, 185, 98, 0.42); } } .scroll-top svg { width: 22px; height: 22px; } .site-footer { background: var(--graphite); background-image: var(--grad-dark); color: var(--text-on-dark); padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) var(--space-6); margin-top: auto; } .footer__grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: var(--space-6); padding-bottom: 2.5rem; border-bottom: 1px solid var(--line-on-dark); } .footer__brand .brand { margin-bottom: var(--space-4); } .footer__brand-desc { color: var(--text-on-dark); font-size: 0.92rem; max-width: 34ch; } .footer__heading { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--white); margin-bottom: var(--space-4); } .footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; } .flink { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-on-dark); text-decoration: none; font-size: 0.92rem; transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); } @media (hover: hover) { .flink:hover { color: var(--accent-on-dark); transform: translateX(3px); } .flink:hover .flink__icon { opacity: 1; } } .flink__icon { width: 18px; height: 18px; flex: none; opacity: 0.75; transition: opacity var(--dur) var(--ease); } .footer__bottom { display: flex; align-items: center; justify-content: center; gap: var(--space-4); flex-wrap: wrap; text-align: center; padding-top: 1.75rem; } .footer__copy { color: var(--text-on-dark); font-size: 0.9rem; margin: 0; max-width: 100%; text-align: center; } .footer__brand-link { color: var(--accent-on-dark); text-decoration: none; font-weight: 600; transition: color var(--dur) var(--ease); } @media (hover: hover) { .footer__brand-link:hover { color: var(--white); } } .footer__disclaimer { color: var(--text-on-dark-soft); font-size: 0.82rem; margin: 1rem auto 0; max-width: 82ch; text-align: center; text-wrap: pretty; } @media (max-width: 1024px) { .site-header { z-index: 130; background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; } .site-header.is-scrolled { background: var(--surface); } .hero { min-height: clamp(26rem, 20rem + 24vw, 34rem); background-position: 62% center; } .hero::before { background: linear-gradient(to bottom, rgba(6, 6, 7, 0.86) 0%, rgba(6, 6, 7, 0.78) 55%, rgba(6, 6, 7, 0.88) 100%); } .hero__inner { grid-template-columns: 1fr; text-align: center; max-width: 44rem; margin-inline: auto; } .hero__actions, .hero__trust { justify-content: center; } .hero__lead { margin-inline: auto; } .split-layout { grid-template-columns: 1fr; } .split-layout__media { order: -1; max-width: 520px; margin-inline: auto; } .footer__grid { grid-template-columns: repeat(3, 1fr); } .footer__brand { grid-column: 1 / -1; } .nav__toggle { display: inline-flex; } .nav__cta { display: none; } .nav__menu { position: fixed; inset: 0 0 0 auto; width: min(340px, 86vw); flex-direction: column; align-items: stretch; gap: 0.25rem; background: var(--surface); padding: 1.25rem; box-shadow: -20px 0 60px rgba(20, 20, 22, 0.28); transform: translateX(105%); transition: transform 320ms var(--ease-out); overflow-y: auto; overscroll-behavior: contain; min-height: 100vh; min-height: 100dvh; z-index: 120; } .nav__menu.is-open { transform: translateX(0); } .nav__menu-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--space-3); margin-bottom: var(--space-2); border-bottom: 1px solid var(--line); } .nav__menu-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--graphite-950); } .nav__close { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1px solid var(--line); border-radius: 11px; background-color: var(--surface-2); color: var(--graphite-950); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .nav__close:hover { background-color: var(--green-700); color: var(--white); border-color: var(--green-700); } .nav__close svg { width: 20px; height: 20px; } .nav__link { padding: 0.85rem 0.9rem; border-radius: var(--radius-md); font-size: 1rem; } .nav__icon { display: block; width: 21px; height: 21px; flex: none; color: var(--green-700); } .nav__link[aria-current="page"] .nav__icon { color: var(--green-800); } .nav__menu-cta { display: block; margin-top: var(--space-3); } .nav__menu-cta .btn { width: 100%; } .nav__backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; z-index: 110; transition: opacity var(--dur) var(--ease), visibility var(--dur); } .nav__backdrop.is-open { opacity: 1; visibility: visible; } } @media (max-width: 860px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } .grid--4 { grid-template-columns: repeat(2, 1fr); } .faq-grid { grid-template-columns: 1fr; } .review-card { flex: 0 0 calc((100% - 1.5rem) / 2); } .reviews__head { align-items: flex-start; } } @media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: repeat(2, 1fr); } .review-card { flex: 0 0 100%; } .hero { min-height: 24rem; background-position: 58% 45%; } .hero__trust { gap: 0.5rem 1rem; } .hero__actions .btn, .clk-actions .btn, .cta-final .btn { width: 100%; } .hero__actions .btn--sm, .clk-actions .btn--sm { width: auto; } .clk-results__head { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .tool-section { margin-top: clamp(-3rem, -2rem - 2vw, -2rem); } .post-share { gap: 0.5rem; } .post-share span { width: 100%; margin-bottom: 0.15rem; } } @media (max-width: 400px) { .footer__grid { grid-template-columns: 1fr; } .brand__name { font-size: 1.05rem; } .scroll-top { right: 14px; bottom: 14px; width: 44px; height: 44px; } .clk-stat__value { font-size: 1.4rem; } }