/* ══════════════════════════════════════════ Saedi Tech — shared inner-page design system (services, about, tools). Mirrors styles.css: warm paper light theme + deep slate dark theme, Bricolage Grotesque / Instrument Sans / Instrument Serif. Pages set an optional per-page accent via --pc on . ══════════════════════════════════════════ */ :root { --bg: #fdfcf9; --bg-2: #f7f4ed; --bg-3: #f0ece2; --surface: #fffefc; --line: rgba(30,27,20,0.10); --line-2: rgba(30,27,20,0.17); --text: #191a22; --muted: #51566b; /* a11y: ≥4.5:1 on --bg-2 */ --faint: #565b70; --accent: #4f46e5; --accent-2: #6d28d9; --pink: #be185d; --cyan: #0e7490; --amber: #b45309; --hero-grad: linear-gradient(100deg, #4f46e5, #6d28d9 55%, #0e7490); --card-glow: rgba(79,70,229,0.10); --shadow: 0 20px 60px -22px rgba(48,40,72,0.28); --shadow-sm: 0 8px 30px -12px rgba(48,40,72,0.20); --radius: 18px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --font-disp: 'Bricolage Grotesque', sans-serif; --font-body: 'Instrument Sans', sans-serif; --font-serif: 'Instrument Serif', Georgia, serif; --font-mono: 'JetBrains Mono', monospace; --pc: var(--accent); /* per-page accent; override on */ } [data-theme="dark"] { --bg: #10131f; --bg-2: #151a29; --bg-3: #1b2136; --surface: #171d2e; --line: rgba(255,255,255,0.10); --line-2: rgba(255,255,255,0.16); --text: #eef1f8; --muted: #a6adc4; --faint: #8b93ad; --accent: #7c7bff; --accent-2: #a78bfa; --pink: #f472b6; --cyan: #22d3ee; --amber: #fbbf24; --hero-grad: linear-gradient(100deg, #8b9bff, #b79bff 55%, #56e1f0); --card-glow: rgba(124,123,255,0.16); --shadow: 0 24px 70px -22px rgba(0,0,0,0.6); --shadow-sm: 0 10px 34px -14px rgba(0,0,0,0.5); } /* Pages set --pc-raw inline on ; --pc resolves from it per theme. Dark: raw accents are tuned for light bg (~2.4:1 on dark) — lift to 55% white, which clears 6:1 on every dark surface (same fix as styles.css). */ body { --pc: var(--pc-raw, var(--accent)); } [data-theme="dark"] body { --pc: color-mix(in srgb, var(--pc-raw, #4f46e5) 55%, #fff); } * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 17px; line-height: 1.6; overflow-x: hidden; transition: background .5s var(--ease), color .5s var(--ease); } /* ambient wash */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(110% 70% at 50% -10%, color-mix(in srgb, var(--pc) 10%, transparent), transparent 55%), radial-gradient(70% 55% at 100% 105%, rgba(139,92,246,0.07), transparent 60%); } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } ::selection { background: var(--accent); color: #fff; } a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 5px; } .skip-link { position: fixed; top: 12px; left: 12px; z-index: 10001; background: var(--accent); color: #fff; padding: 11px 18px; border-radius: 10px; font-weight: 600; transform: translateY(-160%); transition: transform .25s var(--ease); } .skip-link:focus { transform: translateY(0); } [data-theme="dark"] .skip-link { color: #10131f; } /* ══════════ Nav ══════════ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 900; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px clamp(20px, 5vw, 72px); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--line); } .nav__logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-disp); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; } .nav__mark-img { height: 32px; width: auto; display: block; } .nav__mark-img--dark { display: none; } [data-theme="dark"] .nav__mark-img--light { display: none; } [data-theme="dark"] .nav__mark-img--dark { display: block; } .nav__links { display: flex; gap: 26px; align-items: center; } .nav__link { font-size: 15px; color: var(--muted); position: relative; transition: color .3s; } .nav__link::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 0; height: 1.5px; background: var(--accent); transition: width .35s var(--ease); } .nav__link:hover { color: var(--text); } .nav__link:hover::after { width: 100%; } .nav__link.is-here { color: var(--text); font-weight: 600; } .nav__right { display: flex; align-items: center; gap: 12px; } .theme-toggle { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); display: grid; place-items: center; cursor: pointer; transition: border-color .3s, transform .4s var(--ease); } .theme-toggle:hover { border-color: var(--accent); transform: rotate(18deg); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: block; } .nav__cta { font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 100px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); white-space: nowrap; transition: background .3s, border-color .3s, color .3s; } .nav__cta:hover { background: var(--accent); border-color: var(--accent); color: #fff; } [data-theme="dark"] .nav__cta:hover { color: #10131f; } @media (max-width: 820px) { .nav__links { display: none; } } /* ══════════ Mobile nav (hamburger + drop panel) ══════════ */ /* Built by assets/inner.js from the existing nav links so inner pages are navigable on phones (they previously hid the links with no replacement). */ .nav__burger { display: none; } .nav__mobile { display: none; } @media (max-width: 820px) { .nav__burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line-2); border-radius: 11px; background: var(--surface); cursor: pointer; transition: border-color .3s; } .nav__burger:hover { border-color: var(--accent); } .nav__burger span { display: block; width: 18px; height: 2px; margin: 0 auto; background: var(--text); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; } .nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__burger.is-open span:nth-child(2) { opacity: 0; } .nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav__right .nav__cta { display: none; } /* moved into the mobile panel */ .nav__mobile { position: absolute; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; gap: 2px; padding: 12px clamp(20px, 5vw, 72px) 20px; background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--line); box-shadow: 0 24px 48px -24px rgba(20,23,46,.28); animation: navdrop .25s var(--ease) both; } .nav__mobile[hidden] { display: none; } .nav__mobile a { padding: 14px 4px; font-size: 17px; color: var(--text); border-bottom: 1px solid var(--line); } .nav__mobile a[aria-current="page"] { color: var(--accent); font-weight: 600; } .nav__mobile-cta { margin-top: 12px; text-align: center; background: var(--accent); color: #fff !important; border-radius: 12px; border-bottom: none !important; font-weight: 600; padding: 14px !important; } [data-theme="dark"] .nav__mobile-cta { color: #10131f !important; } } @keyframes navdrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .nav__mobile { animation: none; } .nav__burger span { transition: none; } } /* ══════════ Page hero ══════════ */ .phero { position: relative; z-index: 1; padding: clamp(130px, 18vw, 190px) clamp(20px, 5vw, 72px) clamp(40px, 6vw, 64px); max-width: 1060px; } .crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: 12.5px; color: var(--faint); margin-bottom: 26px; } .crumbs a { color: var(--faint); border-bottom: 1px solid transparent; transition: color .3s; } .crumbs a:hover { color: var(--accent); } .crumbs span[aria-hidden] { opacity: .6; } .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pc); margin-bottom: 18px; } .eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--pc), color-mix(in srgb, var(--pc) 40%, #8b5cf6)); } .phero h1 { font-family: var(--font-disp); font-weight: 700; font-size: clamp(2.3rem, 6vw, 4.4rem); line-height: 1.02; letter-spacing: -0.025em; max-width: 18ch; } .phero h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.07em; letter-spacing: 0; background: linear-gradient(120deg, var(--pc), color-mix(in srgb, var(--pc) 45%, #8b5cf6)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .phero .lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--muted); max-width: 58ch; margin-top: 24px; } .phero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; } .phero__meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 13px; color: var(--muted); } .phero__meta b { color: var(--text); font-weight: 600; } /* ══════════ Buttons ══════════ */ .btn { position: relative; display: inline-flex; align-items: center; gap: 9px; justify-content: center; padding: 14px 26px; border-radius: 100px; font-weight: 600; font-size: 15px; overflow: hidden; transition: transform .3s var(--ease), box-shadow .4s, border-color .3s; } .btn--primary { color: #fff; background: linear-gradient(120deg, var(--pc), color-mix(in srgb, var(--pc) 55%, #6d28d9)); box-shadow: 0 12px 36px -12px color-mix(in srgb, var(--pc) 65%, transparent); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 48px -12px color-mix(in srgb, var(--pc) 80%, transparent); } [data-theme="dark"] .btn--primary { color: #10131f; } .btn--ghost { border: 1px solid var(--line-2); color: var(--text); background: var(--surface); } .btn--ghost:hover { border-color: var(--accent); } .btn .arw { transition: transform .3s var(--ease); } .btn:hover .arw { transform: translateX(4px); } /* ══════════ Sections ══════════ */ .sec { position: relative; z-index: 1; padding: clamp(36px, 6vw, 72px) clamp(20px, 5vw, 72px); max-width: 1180px; margin: 0 auto; } .sec--tint { background: var(--bg-2); max-width: none; } .sec--tint > .sec__in { max-width: 1036px; margin: 0 auto; } .sec h2 { font-family: var(--font-disp); font-weight: 600; font-size: clamp(1.6rem, 3.4vw, 2.5rem); letter-spacing: -0.02em; line-height: 1.05; margin-bottom: clamp(22px, 3vw, 36px); max-width: 24ch; } .sec__label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--pc); margin-bottom: 14px; } .sec__label::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--pc); } /* card grid */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; } .card { position: relative; overflow: hidden; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s, border-color .3s; } .card::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); background: linear-gradient(90deg, var(--cc, var(--pc)), color-mix(in srgb, var(--cc, var(--pc)) 40%, #8b5cf6)); } .card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--cc, var(--pc)) 38%, var(--line)); } .card:hover::after { transform: scaleX(1); } .card__ico { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; font-size: 21px; margin-bottom: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--cc, var(--pc)) 18%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--cc, var(--pc)) 25%, var(--line)); transition: transform .4s var(--ease); } .card:hover .card__ico { transform: translateY(-3px) rotate(-6deg); } .card h3 { font-family: var(--font-disp); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; margin-bottom: 6px; } .card p { color: var(--muted); font-size: 14.5px; } .card .go { display: inline-block; margin-top: 14px; font-weight: 600; font-size: 14px; color: var(--pc); } /* check list */ .check { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; } .check li { position: relative; display: flex; align-items: flex-start; gap: 12px; line-height: 1.5; } .check .ck { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; margin-top: 2px; background: linear-gradient(135deg, var(--pc), color-mix(in srgb, var(--pc) 55%, #0e7490)); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--pc) 70%, transparent); } [data-theme="dark"] .check .ck { color: #10131f; } @media (max-width: 680px) { .check { grid-template-columns: 1fr; } } /* steps */ .steps { display: flex; flex-direction: column; gap: 0; counter-reset: step; border-left: 2px solid var(--line); margin-left: 9px; } .step { position: relative; padding: 0 0 clamp(24px, 3.5vw, 36px) 34px; } .step:last-child { padding-bottom: 4px; } .step::before { counter-increment: step; content: "0" counter(step); position: absolute; left: -21px; top: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--sc, var(--pc)); background: var(--surface); border: 2px solid color-mix(in srgb, var(--sc, var(--pc)) 45%, var(--line)); box-shadow: 0 0 0 5px var(--bg); transition: transform .3s var(--ease); } .sec--tint .step::before { box-shadow: 0 0 0 5px var(--bg-2); } .step:hover::before { transform: scale(1.12); } .step b { display: block; font-family: var(--font-disp); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.01em; padding-top: 7px; margin-bottom: 5px; } .step span { color: var(--muted); font-size: 15.5px; max-width: 60ch; display: block; } /* tag pills */ .tags { display: flex; flex-wrap: wrap; gap: 9px; } .tags span { font-family: var(--font-mono); font-size: 13px; padding: 7px 15px; border-radius: 100px; color: var(--pc); background: color-mix(in srgb, var(--pc) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--pc) 24%, var(--line)); transition: transform .3s var(--ease); } .tags span:hover { transform: translateY(-2px); } /* FAQ */ .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 22px; padding: 20px 0; cursor: pointer; font-family: var(--font-disp); font-weight: 600; font-size: clamp(1.02rem, 1.9vw, 1.25rem); transition: color .3s; } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--pc); } .faq .plus { position: relative; width: 16px; height: 16px; flex-shrink: 0; } .faq .plus::before, .faq .plus::after { content: ""; position: absolute; background: var(--pc); border-radius: 2px; } .faq .plus::before { top: 7px; left: 0; width: 16px; height: 2px; } .faq .plus::after { top: 0; left: 7px; width: 2px; height: 16px; transition: transform .3s var(--ease), opacity .3s; } .faq details[open] .plus::after { transform: rotate(90deg); opacity: 0; } .faq details p { color: var(--muted); padding: 0 40px 22px 0; max-width: 72ch; } .faq details p a { color: var(--pc); font-weight: 600; } /* prose (about) */ .prose p { color: var(--muted); font-size: 1.05rem; line-height: 1.7; margin-bottom: 16px; max-width: 66ch; } .prose b { color: var(--text); } /* founder card (about) */ .founder { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; padding: clamp(22px, 3vw, 32px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .founder .ava { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 3px solid color-mix(in srgb, var(--accent) 40%, var(--surface)); box-shadow: 0 10px 26px -10px rgba(79,70,229,.45); } .founder h3 { font-family: var(--font-disp); font-weight: 600; font-size: 1.2rem; } .founder .role { color: var(--accent); font-family: var(--font-mono); font-size: 12.5px; margin: 4px 0 8px; } .founder p { color: var(--muted); font-size: 15px; max-width: 58ch; } /* stat row */ .stats { display: flex; flex-wrap: wrap; gap: clamp(22px, 4vw, 52px); margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); } .stat b { display: block; font-family: var(--font-disp); font-weight: 700; font-size: clamp(1.5rem, 2.8vw, 2.1rem); letter-spacing: -0.02em; background: var(--hero-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .stat span { font-size: 13px; color: var(--muted); font-family: var(--font-mono); } /* ══════════ Final CTA band ══════════ */ .final { position: relative; z-index: 1; overflow: hidden; text-align: center; max-width: 1036px; margin: clamp(30px, 5vw, 60px) auto; padding: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 56px); border-radius: 28px; background: var(--hero-grad); color: #fff; box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--accent) 70%, transparent); } .final::before { content: ""; position: absolute; width: 440px; height: 440px; right: -130px; top: -190px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 62%); pointer-events: none; } .final h2 { font-family: var(--font-disp); font-weight: 700; font-size: clamp(1.7rem, 4vw, 2.7rem); letter-spacing: -0.02em; line-height: 1.05; max-width: 22ch; margin: 0 auto 12px; } .final p { opacity: .93; max-width: 46ch; margin: 0 auto 26px; } .final .btn--white { background: #fff; color: #312e81; box-shadow: 0 14px 34px -12px rgba(0,0,0,.35); } .final .btn--white:hover { transform: translateY(-2px); } [data-theme="dark"] .final { color: #10131f; } [data-theme="dark"] .final .btn--white { background: #10131f; color: #cdd3ff; } .final__note { font-family: var(--font-mono); font-size: 12.5px; opacity: .85; margin-top: 18px; } /* related pills */ .related { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .related__label { font-family: var(--font-mono); font-size: 13px; color: var(--faint); margin-right: 4px; } .related a { font-size: 14px; font-weight: 600; color: var(--accent); border: 1px solid var(--line-2); border-radius: 100px; padding: 8px 16px; background: var(--surface); transition: border-color .3s, transform .3s var(--ease); } .related a:hover { border-color: var(--accent); transform: translateY(-2px); } /* ══════════ Footer end-cap (deep ink in BOTH themes, matches homepage) ══════════ */ .footer { --f-bg: #14141d; --f-text: #eef1f8; --f-muted: #a7adc2; --f-faint: #7e86a0; --f-line: rgba(255,255,255,.10); --f-accent: #a5b0ff; position: relative; z-index: 1; overflow: hidden; background: var(--f-bg); color: var(--f-text); border-radius: clamp(22px, 3vw, 36px) clamp(22px, 3vw, 36px) 0 0; padding: clamp(44px, 6vw, 68px) clamp(20px, 5vw, 72px) 28px; margin-top: clamp(40px, 6vw, 70px); } [data-theme="dark"] .footer { --f-bg: #0d1019; } .footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 4%, rgba(139,131,255,.75), rgba(86,225,240,.6), transparent 96%); } .footer::after { content: ""; position: absolute; width: 560px; height: 560px; right: -160px; top: -240px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(124,123,255,.15), transparent 62%); } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; max-width: 1180px; margin: 0 auto; position: relative; z-index: 1; } .footer__brand { font-family: var(--font-disp); font-weight: 600; font-size: 21px; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: #fff; } .footer .nav__mark-img--light { display: none; } .footer .nav__mark-img--dark { display: block; } .footer__desc { color: var(--f-muted); font-size: 14.5px; max-width: 34ch; line-height: 1.6; } .footer__email { display: inline-block; margin-top: 14px; font-family: var(--font-mono); font-size: 13.5px; color: var(--f-accent); } .footer__email:hover { text-decoration: underline; } .footer__col h3 { font-size: 12px; font-family: var(--font-mono); color: var(--f-faint); margin-bottom: 16px; text-transform: uppercase; letter-spacing: .08em; } .footer__col a { display: block; color: var(--f-muted); font-size: 14.5px; margin-bottom: 11px; transition: color .3s; } .footer__col a:hover { color: var(--f-accent); } .footer__bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; max-width: 1180px; margin: 36px auto 0; padding-top: 22px; border-top: 1px solid var(--f-line); color: var(--f-faint); font-size: 12.5px; font-family: var(--font-mono); position: relative; z-index: 1; } .footer__bottom a { color: var(--f-faint); } .footer__bottom a:hover { color: var(--f-accent); } .footer__watermark { position: relative; z-index: 0; margin: clamp(8px, 2vw, 22px) 0 -0.26em; font-family: var(--font-disp); font-weight: 800; font-size: clamp(2.4rem, 7vw, 6rem); line-height: 0.9; letter-spacing: -0.04em; text-align: center; white-space: nowrap; user-select: none; pointer-events: none; background: linear-gradient(180deg, rgba(158,158,255,.15), rgba(158,158,255,.02) 88%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } @media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__col--brand { grid-column: 1 / -1; } } @media (max-width: 640px) { .footer__watermark { display: none; } } /* ══════════ WhatsApp float ══════════ */ .wa-float { position: fixed; right: 22px; bottom: 24px; z-index: 800; width: 54px; height: 54px; border-radius: 50%; background: #25d366; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(37,211,102,.45); transition: transform .2s var(--ease); } .wa-float:hover { transform: scale(1.08); } @media (max-width: 720px) { .wa-float { bottom: 18px; right: 14px; width: 50px; height: 50px; } } /* ══════════ Reveal on scroll ══════════ */ html.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); } html.js .rv.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.js .rv { opacity: 1; transform: none; transition: none; } * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ══════════ Small screens ══════════ */ @media (max-width: 560px) { .phero__actions .btn { width: 100%; } .cards { grid-template-columns: 1fr; } }