/* ╔══════════════════════════════════════════════════════════════════════╗ ║ חוסך — landing site styles. Brand: white glass + black ink. ║ ║ Ink #111827 (CTAs/accents/borders), charcoal #374151, light-grey ║ ║ highlight #E5E7EB, glass-white #F5F7F8. Formal, editorial, mono. ║ ║ Fonts: Rubik (display) + Assistant (body). RTL. ║ ╚══════════════════════════════════════════════════════════════════════╝ */ :root { --green: #111827; /* ink black — CTAs / accents / borders */ --green-2: #374151; /* slate charcoal */ --green-d: #000000; /* deepest ink for gradients */ --lime: #E5E7EB; /* light-grey highlight (DARK text on this) */ --mint: #F0F2F4; /* subtle grey tint surface */ --sage: #6B7280; /* muted slate accent */ --sand: #fbf3e0; /* warm tint */ --cream: #F5F7F8; /* glass white */ --ink: #0B0F14; /* near-black text */ --muted: #4B5563; --white: #ffffff; --line: #E4E8EC; /* formal hairline */ /* Ink scale — a calibrated monochrome ramp the whole system tunes against. */ --ink-900: #0B0F14; --ink-800: #111827; --ink-700: #1F2733; --ink-600: #374151; --ink-500: #4B5563; --ink-400: #6B7280; --ink-300: #9CA3AF; --ink-200: #CBD2D9; --ink-100: #E4E8EC; --ink-050: #F0F2F4; /* Refined accent system — color used with intent over the ink/glass base. Indigo = action (CTAs, links, active, focus). Amber = value/savings. */ --accent: #4F46E5; /* indigo — primary action */ --accent-d: #3730A3; /* deep indigo for gradient depth */ --accent-t: #EEF0FB; /* light indigo surface tint */ --value: #F59E0B; /* amber — savings / value emphasis */ --value-d: #D97706; --radius: 20px; /* friendlier rounding */ --radius-sm: 12px; --radius-lg: 26px; /* Layered elevation — a soft ambient wash + a tighter key shadow, so cards read as lifted glass rather than a flat drop. Cool ink-tinted, never black. */ --shadow-sm: 0 1px 2px rgba(15,27,34,.04), 0 4px 14px rgba(15,27,34,.05); --shadow: 0 2px 6px rgba(15,27,34,.05), 0 14px 38px rgba(15,27,34,.09); --shadow-lg: 0 6px 16px rgba(15,27,34,.08), 0 30px 70px rgba(15,27,34,.16); --shadow-ink: 0 10px 24px rgba(17,24,39,.26), 0 2px 6px rgba(17,24,39,.18); --ring: 0 0 0 3px rgba(79,70,229,.30); /* focus ring (indigo) */ --maxw: 1140px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { font-family: 'Assistant', system-ui, sans-serif; color: var(--ink); background: var(--cream); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; position: relative; } /* Fine film grain over the whole page — adds tactile, premium depth without any colour. Pointer-transparent, fixed, and very subtle. */ body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; background-image: var(--grain); background-size: 160px; opacity: .025; mix-blend-mode: multiply; } ::selection { background: var(--ink-800); color: #fff; } h1, h2, h3, .brand__name { font-family: 'Rubik', sans-serif; line-height: 1.12; } /* Ink-gradient headings — a whisper of dimensionality on big display type (ink → charcoal), still strictly monochrome. Applied to hero & section h2. */ .hero h1, .section__head h2, .lead-hero h1, .cta h2 { background: linear-gradient(160deg, var(--ink-900) 0%, var(--ink-700) 60%, var(--ink-500) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--ink-900); } .cta h2 { background: linear-gradient(160deg, #fff 0%, #fff 55%, #c9ced6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Global focus ring — keyboard users get a crisp, on-brand outline. The box-shadow follows each element's OWN radius (no geometry rewrite — a 6px override used to visibly reshape pills and buttons on focus); bare inline links opt into a small radius so the ring hugs the text. */ :focus-visible { outline: none; box-shadow: var(--ring); } a:not([class]):focus-visible { border-radius: 6px; } /* ── Scroll progress bar (injected by script.js) ─────────────────────────── */ .scroll-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; transform-origin: right center; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--ink-800), var(--ink-500)); will-change: transform; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; } a { color: inherit; text-decoration: none; } /* ── Glass surface ─────────────────────────────────────────────────────── Frosted white-glass utility for cards/panels. Falls back to opaque white where backdrop-filter is unsupported, so text stays readable. */ .glass { background: rgba(255, 255, 255, .62); backdrop-filter: blur(16px) saturate(135%); -webkit-backdrop-filter: blur(16px) saturate(135%); border: 1px solid rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), var(--shadow-sm); } @supports not ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) { .glass { background: #fff; } } /* ── Buttons ─────────────────────────────────────────────────────────── */ .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 15px; padding: 13px 24px; border-radius: 16px; border: 0; cursor: pointer; transition: transform .2s var(--ease-spring), box-shadow .2s var(--ease), background .18s; white-space: nowrap; isolation: isolate; will-change: transform; } /* A diagonal light sheen that sweeps across on hover — a quiet premium tell. */ .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%); transform: translateX(120%); transition: transform .6s var(--ease); } .btn:hover::before, .btn:focus-visible::before { transform: translateX(-120%); } /* Inset top highlight = the glass edge that makes the gradient read dimensional. */ .btn--primary { background: linear-gradient(165deg, var(--accent), var(--accent-d)); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px rgba(79,70,229,.32), 0 2px 6px rgba(55,48,163,.24); } .btn--primary:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 18px 36px rgba(79,70,229,.4), 0 3px 8px rgba(55,48,163,.26); } .btn--primary:active { transform: translateY(0) scale(.985); filter: brightness(.97); box-shadow: inset 0 2px 4px rgba(0,0,0,.18), 0 6px 14px rgba(79,70,229,.3); } .btn--ghost { background: var(--mint); color: var(--green); box-shadow: inset 0 0 0 1px var(--line); } .btn--ghost:hover { background: #fff; transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--ink-200), var(--shadow-sm); } .btn--ghost:active { transform: translateY(0) scale(.985); } /* White-on-ink — the dark .article-cta bands (was inline-styled, stateless). */ .btn--inverse { background: #fff; color: var(--ink-800); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 20px rgba(0,0,0,.28); } .btn--inverse:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 14px 30px rgba(0,0,0,.36); } .btn--inverse:active { transform: translateY(0) scale(.985); } .btn--lg { padding: 16px 30px; font-size: 16px; border-radius: 18px; } .btn--block { width: 100%; } /* Disabled + async-send states — a disabled button must LOOK disabled. */ .btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; filter: none !important; } .btn.is-loading { pointer-events: none; } .btn.is-loading::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-inline-start-color: transparent; animation: btn-spin .7s linear infinite; } @keyframes btn-spin { to { transform: rotate(360deg); } } .pill { display: inline-block; background: var(--accent-t); color: var(--accent); font-weight: 700; font-size: 13px; padding: 7px 15px; border-radius: 999px; margin-bottom: 18px; } .eyebrow { display: inline-block; color: var(--accent); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; } /* ── Navbar ──────────────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(246,248,249,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s, background .25s; } .nav.scrolled { border-bottom-color: var(--line); box-shadow: 0 4px 18px rgba(15,27,34,.05); background: rgba(246,248,249,.95); } .nav__inner { display: flex; align-items: center; gap: 18px; height: 68px; } .brand { display: flex; align-items: center; gap: 9px; } .brand__mark { width: 32px; height: 32px; display: grid; place-items: center; background: var(--lime); color: var(--green-d); border-radius: 9px; font-size: 17px; font-weight: 900; } .brand__name { font-size: 22px; font-weight: 800; color: var(--green-d); } .brand--light .brand__name { color: #fff; } .nav__links { display: flex; gap: 26px; margin-inline-start: auto; } .nav__links a { position: relative; font-weight: 600; color: var(--muted); transition: color .15s; padding-bottom: 2px; } .nav__links a::after { content: ""; position: absolute; inset-inline: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .25s var(--ease); } .nav__links a:hover { color: var(--accent); } .nav__links a:hover::after { transform: scaleX(1); } /* Current page — stamped by script.js as aria-current="page". */ .nav__links a[aria-current="page"] { color: var(--accent); font-weight: 700; } .nav__links a[aria-current="page"]::after { transform: scaleX(1); } .nav__mobile a[aria-current="page"] { color: var(--accent); font-weight: 700; } /* Compact, quieter nav CTA — it lives on EVERY viewport, so it must not compete with the page-level primaries below it. */ .nav__cta { margin-inline-start: 6px; padding: 9px 16px; font-size: 14px; border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 12px rgba(79,70,229,.24); } .nav__toggle { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; padding: 10px; } .nav__toggle span { display: block; height: 2.5px; background: var(--green-d); border-radius: 2px; margin: 4px 0; transition: .25s var(--ease); } .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .nav__mobile { display: none; flex-direction: column; gap: 4px; padding: 8px 20px 18px; } .nav__mobile a { padding: 11px 6px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); } .nav__mobile .btn { margin-top: 10px; } /* ── Hero ────────────────────────────────────────────────────────────── */ .hero { padding: 56px 0 40px; position: relative; } .hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 560px; z-index: -1; background: radial-gradient(820px 420px at 82% -12%, rgba(17,24,39,.07), transparent 60%), radial-gradient(620px 380px at 8% 4%, rgba(55,65,81,.05), transparent 62%); } /* A fine ink dot-grid that fades out downward — engineered, formal texture. */ .hero::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 560px; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(17,24,39,.10) 1px, transparent 1.4px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 72%); mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 72%); } .hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; } .hero h1 { font-size: clamp(40px, 6.4vw, 76px); font-weight: 900; color: var(--green-d); letter-spacing: -2px; line-height: 1.02; } .hero .hl { color: var(--accent); position: relative; -webkit-text-fill-color: var(--accent); } .hero .hl::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6%; height: 26%; background: var(--accent); opacity: .16; border-radius: 6px; z-index: -1; } .hero__sub { font-size: clamp(16px, 2vw, 19px); color: var(--muted); margin: 20px 0 28px; max-width: 30em; } .hero__sub strong { color: var(--green); font-weight: 700; } .hero__fineprint { display: block; font-size: 12.5px; line-height: 1.5; color: var(--ink-600); margin-top: 10px; } .hero__fineprint a { color: inherit; text-decoration: underline; } .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; } .hero__stats { list-style: none; display: flex; flex-wrap: wrap; gap: 28px; margin-top: 34px; } .hero__stats li { display: flex; flex-direction: column; } .hero__stats b { font-family: 'Rubik'; font-size: 26px; font-weight: 800; color: var(--green-d); } .hero__stats span { font-size: 13px; color: var(--muted); } /* Phone mockup */ .hero__visual { display: grid; place-items: center; } .phone { width: 290px; background: linear-gradient(155deg, #1b232f, #000); border-radius: 42px; padding: 14px; box-shadow: var(--shadow-lg), inset 0 0 0 1.5px rgba(255,255,255,.08); position: relative; animation: float 6s ease-in-out infinite; } /* Soft specular highlight raking across the phone glass. */ .phone::before { content: ""; position: absolute; inset: 0; border-radius: 42px; pointer-events: none; background: linear-gradient(150deg, rgba(255,255,255,.12), transparent 38%); } /* Reflected glow puddle beneath the floating device. */ .phone::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -34px; height: 44px; z-index: -1; background: radial-gradient(closest-side, rgba(17,24,39,.22), transparent 78%); filter: blur(2px); animation: floatShadow 6s ease-in-out infinite; } .phone__notch { width: 120px; height: 22px; background: #000; border-radius: 0 0 14px 14px; margin: 0 auto 8px; } .phone__screen { background: var(--cream); border-radius: 28px; padding: 16px; display: grid; gap: 12px; } @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes floatShadow { 0%,100% { transform: scaleX(1); opacity: .55; } 50% { transform: scaleX(.86); opacity: .35; } } .card { background: #fff; border-radius: 18px; padding: 14px; box-shadow: var(--shadow-sm); } .card--save { background: linear-gradient(135deg, var(--green-d), var(--green)); color: #fff; text-align: center; padding: 18px; } .card__label { font-size: 12px; opacity: .8; } .card__big { display: block; font-family: 'Rubik'; font-size: 38px; font-weight: 900; color: var(--value); margin: 4px 0; } .card__hint { font-size: 11px; opacity: .7; } .card--row { display: flex; align-items: center; gap: 10px; padding: 11px 13px; } .card--row.best { border: 2px solid var(--green); } .card__text { display: flex; flex-direction: column; line-height: 1.25; } .card__text b { font-size: 14px; } .card__text small { font-size: 11px; color: var(--muted); } .logo { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: 'Rubik'; font-weight: 800; font-size: 13px; flex: none; } .logo--cel { background: #ece7fb; color: #4527a0; } .logo--par { background: #e6f3e8; color: #2e7d32; } .logo--gol { background: #e0f1ee; color: #00695c; } .tag { margin-inline-start: auto; font-family: 'Rubik'; font-weight: 800; color: var(--green); font-size: 15px; } .tag--win { background: var(--value); color: #3a2900; font-weight: 800; padding: 4px 9px; border-radius: 9px; font-size: 12px; } /* ── Providers strip ─────────────────────────────────────────────────── */ .providers { padding: 22px 0 8px; } .providers__title { text-align: center; color: var(--muted); font-weight: 600; font-size: 14px; margin-bottom: 16px; } .providers__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .chip { display: inline-block; background: #fff; border: 1px solid var(--line); color: var(--green-d); font-weight: 700; font-size: 14px; padding: 9px 16px; border-radius: 999px; box-shadow: var(--shadow-sm); text-decoration: none; transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s; } /* Only LINK chips lift — decorative span.chip must not pretend to be a button. */ a.chip:hover { transform: translateY(-2px); border-color: var(--green-2); box-shadow: 0 8px 18px rgba(17,24,39,.10); color: var(--green); } .providers__more { text-align: center; margin-top: 16px; } .providers__more a { color: var(--green); font-weight: 700; text-decoration: none; } .providers__more a:hover { text-decoration: underline; } /* ── Sections ────────────────────────────────────────────────────────── */ .section { padding: 86px 0; } .section--alt { background: #fff; } .section__head { text-align: center; max-width: 640px; margin: 0 auto 52px; } .section__head h2 { font-size: clamp(30px, 4.4vw, 50px); font-weight: 900; color: var(--green-d); letter-spacing: -1.4px; line-height: 1.05; } .section__head p { color: var(--muted); margin-top: 12px; font-size: 17px; } /* Steps */ .steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: s; } .step { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; position: relative; } .section--alt .step { background: var(--cream); } .step { box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s; } .step:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .step__num { width: 44px; height: 44px; display: grid; place-items: center; background: linear-gradient(140deg, var(--accent), var(--accent-d)); color: #fff; font-family: 'Rubik'; font-weight: 800; border-radius: 14px; font-size: 19px; margin-bottom: 16px; box-shadow: 0 6px 16px rgba(79,70,229,.32); } .step h3 { font-size: 19px; color: var(--green-d); margin-bottom: 8px; } .step p { color: var(--muted); } /* Categories */ .cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .cat { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 16px; text-align: center; transition: transform .2s var(--ease), box-shadow .2s; } .section--alt .cat { background: var(--cream); } .cat:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .cat__icon { font-size: 38px; display: block; margin-bottom: 10px; } .cat h3 { font-size: 17px; color: var(--green-d); } .cat p { color: var(--muted); font-size: 14px; margin-top: 3px; } /* Calculator */ .calc { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; } .calc__copy h2 { font-size: clamp(26px, 3.5vw, 38px); color: var(--green-d); font-weight: 800; } .calc__copy p { color: var(--muted); margin-top: 14px; font-size: 16px; } .calc__card { background: linear-gradient(140deg, var(--green-d), var(--green)); border-radius: 24px; padding: 30px; color: #fff; box-shadow: var(--shadow-lg); } .calc__row { display: flex; justify-content: space-between; align-items: center; font-weight: 600; margin-bottom: 12px; } .calc__row output { font-family: 'Rubik'; font-weight: 800; font-size: 22px; color: var(--lime); } .calc__card input[type="range"] { width: 100%; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; background: rgba(255,255,255,.25); outline: none; } .calc__card input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.35); } .calc__card input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: 3px solid #fff; border-radius: 50%; background: var(--accent); cursor: pointer; } .calc__result { text-align: center; margin: 26px 0 22px; } .calc__resultLabel { display: block; font-size: 14px; opacity: .8; } .calc__resultBig { display: block; font-family: 'Rubik'; font-size: 52px; font-weight: 900; color: var(--value); letter-spacing: -1px; } .calc__resultUnit { font-size: 14px; opacity: .8; } .calc__fine { font-size: 12px; opacity: .65; text-align: center; margin-top: 12px; } /* Features */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .feature { background: rgba(255,255,255,.66); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.6); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s; } @supports not ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) { .feature { background: #fff; } } .feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .feature__icon { font-size: 30px; display: grid; place-items: center; width: 56px; height: 56px; background: var(--mint); border-radius: 16px; margin-bottom: 16px; } .feature h3 { font-size: 18px; color: var(--green-d); margin-bottom: 6px; } .feature p { color: var(--muted); } .feature em { color: var(--accent); font-style: normal; font-weight: 700; } /* Testimonials */ .quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .quote { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; } .section--alt .quote { background: var(--cream); } .stars { color: #f5a623; letter-spacing: 2px; margin-bottom: 12px; } .quote blockquote { font-size: 17px; font-weight: 600; color: var(--green-d); line-height: 1.5; } .quote figcaption { color: var(--muted); font-size: 14px; margin-top: 12px; } /* FAQ */ .faq__list { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; } .faq__list details { background: var(--cream); border: 1px solid var(--line); border-radius: 14px; padding: 4px 20px; transition: box-shadow .2s; } .faq__list details[open] { box-shadow: var(--shadow); } .faq__list summary { font-family: 'Rubik'; font-weight: 700; font-size: 17px; color: var(--green-d); padding: 16px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .faq__list summary::-webkit-details-marker { display: none; } .faq__list summary::after { content: "+"; font-size: 24px; color: var(--green); transition: transform .2s; } .faq__list details[open] summary::after { transform: rotate(45deg); } .faq__list details p { color: var(--muted); padding: 0 0 18px; } /* CTA band */ .cta { background: linear-gradient(140deg, var(--green-d), var(--green)); color: #fff; padding: 72px 0; } .cta__inner { text-align: center; max-width: 640px; margin: 0 auto; } .cta h2 { font-size: clamp(30px, 4.6vw, 52px); font-weight: 900; letter-spacing: -1.4px; line-height: 1.04; } .cta p { opacity: .85; margin-top: 12px; font-size: 18px; } .cta__form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 30px 0 12px; } .cta__form input { flex: 1 1 220px; min-width: 0; padding: 14px 16px; border: 0; border-radius: 14px; font-family: 'Assistant'; font-size: 16px; background: rgba(255,255,255,.95); color: var(--ink); } /* Offset white ring — a flush light-grey outline vanished against the white input itself; the offset lets it read against the dark band. */ .cta__form input:focus { outline: 3px solid #fff; outline-offset: 2px; } .cta__form .btn { flex: 0 0 auto; } .cta__note { min-height: 22px; font-weight: 700; color: var(--lime); } .cta__wa { display: inline-block; margin-top: 8px; color: #fff; font-weight: 700; opacity: .9; border-bottom: 1px dashed rgba(255,255,255,.5); padding-bottom: 2px; } .cta__wa:hover { opacity: 1; } .cta__wa .ico { width: 16px; height: 16px; vertical-align: -3px; margin-inline-end: 4px; } /* Legal consent (terms / privacy mandatory, marketing optional) — RTL, sits above the submit button on the dark CTA band. Real