/* ===================================================================== KAI — Design system ----------------------------------------------------------------------- Color : near-monochrome. #FAFAFA / #0A0A0A as the two grounds, #6E6E73 for secondary text, one accent (emerald #19C37D) reserved for primary CTAs + interactive accents only. Accent reads "signal / WhatsApp-adjacent" without copying WhatsApp's exact green — ties to the automation service. Type : -apple-system stack (the OS-native fonts Apple's own sites use) — Hero 88/56/40px desktop, body 19-21px, secondary 16px. Layout : full-bleed sections, 1200px content cap, 8px spacing unit. Section rhythm: 180px desktop / 88px mobile vertical padding. Motion : fade + 24px rise on scroll-reveal, 60ms stagger, all easing cubic-bezier(.16,1,.3,1) ("expo-out") for an Apple-like settle. ===================================================================== */ :root{ --bg: #FAFAFA; --bg-raised: #FFFFFF; --ink: #0A0A0A; --ink-soft: #6E6E73; --line: #E5E5E7; --dark: #0A0A0A; --dark-2: #161618; --on-dark: #FAFAFA; --on-dark-soft: #9A9AA0; --accent: #19C37D; --accent-ink:#073B27; --nav-glass: rgba(250,250,250,.78); --sheet-bg: rgba(250,250,250,.96); --card-hover: #FFFFFF; --orb-b-color: rgba(10,10,10,.08); /* Darker text-only shade of the accent — the bright --accent fails WCAG 4.5:1 for small text on light backgrounds. Buttons/icons/decorative shapes keep using --accent; small accent-colored text uses this. */ --accent-text: #0B7A4A; --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Helvetica Neue", sans-serif; --ease: cubic-bezier(.16,1,.3,1); --section-pad: 180px; --content: 1200px; } /* ---------- dark theme ---------- */ [data-theme="dark"]{ --bg: #0A0A0A; --bg-raised: #161618; --ink: #FAFAFA; --ink-soft: #9A9AA0; --line: rgba(250,250,250,.14); --nav-glass: rgba(10,10,10,.72); --sheet-bg: rgba(10,10,10,.96); --card-hover: #1C1C1F; --orb-b-color: rgba(250,250,250,.10); /* On dark backgrounds the bright accent already passes contrast comfortably. */ --accent-text: var(--accent); } [data-theme="dark"] .nav__mark, [data-theme="dark"] .hero__glyph, [data-theme="dark"] .service-hero__icon img{ filter: invert(1); } @media (max-width: 760px){ :root{ --section-pad: 88px; } } *{ box-sizing: border-box; } html{ scroll-behavior: smooth; } /* ---------- accessibility ---------- */ :focus-visible{ outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 4px; } .skip-link{ position: absolute; top: -100px; left: 16px; z-index: 1000; padding: 10px 18px; border-radius: 100px; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 600; transition: top .25s var(--ease); } .skip-link:focus-visible{ top: 16px; outline-color: var(--bg); } #servicios, #proceso, #contacto, #proceso-servicio{ scroll-margin-top: 80px; } body{ margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-wrap: pretty; transition: background-color .3s var(--ease), color .3s var(--ease); } img{ max-width: 100%; display: block; } a{ color: inherit; text-decoration: none; } .br-desktop{ display: inline; } @media (max-width: 640px){ .br-desktop{ display: none; } } /* ---------- reveal-on-scroll ---------- */ /* Solo se ocultan si el JS está activo (clase .js en ). Si el JS falla o no carga, el contenido se ve completo. */ .js .reveal{ opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); } .js .reveal.is-visible{ opacity: 1; transform: translateY(0); } /* ============ NAV ============ */ .nav{ position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(250,250,250,0); border-bottom: 1px solid transparent; transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease); } .nav.is-scrolled{ background: var(--nav-glass); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid var(--line); } .nav__inner{ max-width: var(--content); margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 32px; } .nav__brand{ display: flex; align-items: center; gap: 9px; margin-right: auto; } .nav__mark{ width: 20px; height: 20px; } .nav__word{ font-size: 17px; font-weight: 600; letter-spacing: .01em; } .nav__links{ display: flex; gap: 28px; font-size: 14px; font-weight: 500; color: var(--ink-soft); } .nav__links a{ transition: color .2s var(--ease); } .nav__links a:hover{ color: var(--ink); } .nav__cta{ font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: 100px; background: var(--ink); color: var(--bg); transition: transform .25s var(--ease), background .25s var(--ease); } .nav__cta:hover{ background: var(--accent); transform: translateY(-1px); } .nav__burger{ display: none; width: 32px; height: 32px; border: none; background: none; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .nav__burger span{ width: 18px; height: 1.6px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .3s var(--ease); } .nav__burger[aria-expanded="true"] span:first-child{ transform: translateY(3.3px) rotate(45deg); } .nav__burger[aria-expanded="true"] span:last-child{ transform: translateY(-3.3px) rotate(-45deg); } .nav__sheet{ display: none; flex-direction: column; gap: 2px; padding: 8px 24px 20px; background: var(--sheet-bg); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); } .nav__sheet a{ padding: 14px 4px; font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--line); } .nav__sheet-cta{ margin-top: 12px; text-align: center; padding: 13px; border-radius: 100px; background: var(--ink); color: var(--bg); font-weight: 600; border-bottom: none !important; } .nav__sheet.is-open{ display: flex; } @media (max-width: 760px){ .nav__links, .nav__cta{ display: none; } .nav__burger{ display: flex; } } /* ============ HERO ============ */ .hero{ position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 140px 24px 80px; overflow: hidden; } .hero__glyph{ position: absolute; top: 50%; left: 50%; width: min(900px, 140vw); transform: translate(-50%,-50%); opacity: .035; pointer-events: none; z-index: 0; } .hero__eyebrow{ position: relative; z-index: 1; font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--ink-soft); margin: 0 0 20px; } .hero__title{ position: relative; z-index: 1; margin: 0; font-size: clamp(40px, 8vw, 88px); line-height: 1.04; font-weight: 600; letter-spacing: -.02em; } .hero__title span{ display: block; } .hero__title em{ font-style: normal; color: var(--ink-soft); } .hero__sub{ position: relative; z-index: 1; max-width: 560px; margin: 28px auto 0; font-size: clamp(17px, 2.4vw, 21px); line-height: 1.5; color: var(--ink-soft); } .hero__actions{ position: relative; z-index: 1; margin-top: 40px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .hero__scroll{ position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); width: 22px; height: 36px; border: 1.6px solid var(--line); border-radius: 100px; z-index: 1; } .hero__scroll span{ position: absolute; top: 7px; left: 50%; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--ink-soft); animation: scrollDot 1.8s var(--ease) infinite; } @keyframes scrollDot{ 0%{ opacity: 1; transform: translateY(0); } 70%{ opacity: 0; transform: translateY(10px); } 100%{ opacity: 0; transform: translateY(10px); } } @media (max-width: 640px){ .hero__scroll{ display: none; } } /* ---------- compact hero (service subpages) ---------- */ .hero--compact{ min-height: auto; padding: 140px 24px 100px; } .hero__title--service{ font-size: clamp(34px, 6vw, 64px); } /* ---------- buttons ---------- */ .btn{ display: inline-flex; align-items: center; justify-content: center; padding: 15px 28px; border-radius: 100px; font-size: 15px; font-weight: 600; transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); white-space: nowrap; } .btn--primary{ background: var(--accent); color: #fff; } .btn--primary:hover{ transform: translateY(-2px); background: #14a868; } .btn--ghost{ background: transparent; color: var(--ink); border: 1.4px solid var(--line); } .btn--ghost:hover{ border-color: var(--ink); transform: translateY(-2px); } .btn--light{ background: var(--on-dark); color: var(--dark); } .btn--light:hover{ transform: translateY(-2px); background: var(--accent); color: #fff; } .btn--outline-light{ background: transparent; color: var(--on-dark); border: 1.4px solid rgba(250,250,250,.28); } .btn--outline-light:hover{ border-color: var(--on-dark); transform: translateY(-2px); } /* ============ STATEMENT ============ */ .statement{ position: relative; padding: 100px 24px; overflow: hidden; } .statement__inner{ position: relative; z-index: 1; max-width: 880px; margin: 0 auto; text-align: center; } .statement p{ font-size: clamp(24px, 4vw, 38px); line-height: 1.35; font-weight: 400; color: var(--ink-soft); letter-spacing: -.01em; } .statement strong{ color: var(--ink); font-weight: 600; } /* ============ SECTION HEAD ============ */ .section-head{ position: relative; z-index: 1; max-width: var(--content); margin: 0 auto; padding: 0 24px; margin-bottom: 64px; } .eyebrow{ font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 14px; } .eyebrow--light{ color: var(--accent); } .section-head h2{ margin: 0; font-size: clamp(30px, 4.6vw, 48px); font-weight: 600; letter-spacing: -.02em; max-width: 14ch; line-height: 1.12; } /* ============ SERVICES ============ */ .services{ padding: var(--section-pad) 0; } .grid{ max-width: var(--content); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; } @media (max-width: 900px){ .grid{ grid-template-columns: repeat(2, 1fr); border-radius: 20px; } } @media (max-width: 600px){ .grid{ grid-template-columns: 1fr; border-radius: 16px; } } .card{ background: var(--bg-raised); padding: 44px 32px; transition: background .3s var(--ease); } .card:hover{ background: var(--card-hover); } .card:hover .card__icon{ color: var(--accent); transform: translateY(-2px); } .card__icon{ width: 40px; height: 40px; color: var(--ink); margin-bottom: 22px; transition: color .3s var(--ease), transform .3s var(--ease); } .card__icon svg{ width: 100%; height: 100%; } .card h3{ margin: 0 0 10px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; } .card p{ margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); } /* ============ CONTACT (dark) ============ */ .contact{ position: relative; background: var(--dark); color: var(--on-dark); padding: var(--section-pad) 24px; text-align: center; overflow: hidden; } .contact__glyph{ position: absolute; top: 50%; left: 50%; width: min(800px, 130vw); transform: translate(-50%,-50%); opacity: .04; pointer-events: none; } .contact .eyebrow{ position: relative; z-index: 1; } .contact h2{ position: relative; z-index: 1; margin: 0; font-size: clamp(30px, 5vw, 52px); font-weight: 600; letter-spacing: -.02em; } .contact__sub{ position: relative; z-index: 1; margin: 18px auto 0; max-width: 460px; color: var(--on-dark-soft); font-size: 17px; line-height: 1.5; } .contact__actions{ position: relative; z-index: 1; margin-top: 40px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } /* ============ FOOTER ============ */ .footer{ background: var(--dark); border-top: 1px solid rgba(250,250,250,.1); } .footer__inner{ max-width: var(--content); margin: 0 auto; padding: 32px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .footer__brand{ display: flex; align-items: center; gap: 8px; color: var(--on-dark); font-weight: 600; font-size: 14px; } .footer__brand img{ filter: invert(1); width: 16px; height: 16px; } .footer p{ margin: 0; font-size: 13px; color: var(--on-dark-soft); } /* ============ FLOATING WHATSAPP ============ */ .float-wa{ position: fixed; right: 22px; bottom: 22px; height: 56px; padding: 0 15px; border-radius: 100px; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: flex-end; gap: 0; box-shadow: 0 10px 30px rgba(25,195,125,.4); z-index: 90; transition: transform .3s var(--ease), box-shadow .3s var(--ease), gap .3s var(--ease), padding .3s var(--ease); animation: floatPop .7s var(--ease) .6s both; } .float-wa:hover{ transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 34px rgba(25,195,125,.5); gap: 10px; } .float-wa__icon{ width: 26px; height: 26px; flex-shrink: 0; display: flex; } .float-wa__icon svg{ width: 100%; height: 100%; } .float-wa__label{ font-size: 14px; font-weight: 600; white-space: nowrap; max-width: 0; overflow: hidden; opacity: 0; transition: max-width .35s var(--ease), opacity .25s var(--ease); } .float-wa:hover .float-wa__label{ max-width: 170px; opacity: 1; } .float-wa::before, .float-wa::after{ content: ""; position: absolute; inset: 0; border-radius: 100px; background: var(--accent); opacity: .5; animation: pulse 2.6s var(--ease) infinite; z-index: -1; } .float-wa::after{ animation-delay: 1.3s; } .float-wa:hover::before, .float-wa:hover::after{ animation-play-state: paused; opacity: 0; } @keyframes pulse{ 0%{ transform: scale(1); opacity: .45; } 100%{ transform: scale(1.6); opacity: 0; } } @keyframes floatPop{ 0%{ transform: scale(0) translateY(20px); opacity: 0; } 60%{ transform: scale(1.08) translateY(-3px); opacity: 1; } 100%{ transform: scale(1) translateY(0); opacity: 1; } } /* ============ SCROLL PROGRESS ============ */ .progress{ position: fixed; top: 0; left: 0; right: 0; height: 2.5px; z-index: 200; pointer-events: none; } .progress__bar{ height: 100%; width: 0%; background: var(--accent); transform-origin: left; } /* ============ HERO — orbs & parallax ============ */ .hero__orb{ position: absolute; border-radius: 50%; filter: blur(60px); opacity: .35; pointer-events: none; z-index: 0; animation: orbDrift 14s var(--ease) infinite alternate; } .hero__orb--a{ width: 420px; height: 420px; top: 8%; left: 4%; background: radial-gradient(circle, rgba(25,195,125,.35), transparent 70%); } .hero__orb--b{ width: 360px; height: 360px; bottom: 4%; right: 6%; background: radial-gradient(circle, var(--orb-b-color), transparent 70%); animation-delay: -7s; } @keyframes orbDrift{ 0%{ transform: translate(0,0) scale(1); } 100%{ transform: translate(24px,-18px) scale(1.08); } } @media (max-width: 760px){ .hero__orb{ display: none; } } /* ============ MARQUEE ============ */ .marquee{ overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; background: var(--bg-raised); } .marquee__track{ display: flex; width: max-content; gap: 14px; animation: marqueeScroll 32s linear infinite; white-space: nowrap; } .marquee__track span{ font-size: 14px; font-weight: 600; letter-spacing: .01em; color: var(--ink-soft); } .marquee__dot{ color: var(--accent); } @keyframes marqueeScroll{ 0%{ transform: translateX(0); } 100%{ transform: translateX(-50%); } } /* ============ CARD TILT ============ */ .card{ transform-style: preserve-3d; will-change: transform; } .card[data-tilt]{ transform: perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition: background .3s var(--ease), transform .25s var(--ease); } .grid .card:nth-child(2){ --d: 1; } .grid .card:nth-child(3){ --d: 2; } .grid .card:nth-child(4){ --d: 1; } .grid .card:nth-child(5){ --d: 2; } .grid .card:nth-child(6){ --d: 3; } /* ============ PROCESS ============ */ .process{ position: relative; padding: var(--section-pad) 0; } .process__inner{ position: relative; z-index: 1; max-width: var(--content); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 340px; gap: 80px; align-items: center; } @media (max-width: 900px){ .process__inner{ grid-template-columns: 1fr; gap: 56px; } .phone{ margin: 0 auto; } } .process__steps{ position: relative; display: flex; flex-direction: column; gap: 40px; } .process__steps::before{ content: ""; position: absolute; left: 21px; top: 24px; bottom: 24px; width: 1.5px; background: var(--line); } .step{ position: relative; padding-left: 64px; } .step__num{ position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--bg-raised); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--ink-soft); z-index: 1; transition: border-color .4s var(--ease), color .4s var(--ease); } .step.is-visible .step__num{ border-color: var(--accent); color: var(--accent-text); } .step h3{ margin: 0 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; transition: color .25s var(--ease); } .step:hover h3{ color: var(--accent-text); } .step p{ margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); max-width: 38ch; } /* ---------- phone / chat mockup ---------- */ .phone{ width: min(300px, 100%); border-radius: 32px; background: var(--dark); padding: 10px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.35); } .phone__bar{ display: flex; align-items: center; gap: 10px; padding: 6px 10px 14px; } .phone__avatar{ width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .phone__who{ display: flex; flex-direction: column; font-size: 13px; font-weight: 600; color: var(--on-dark); } .phone__who small{ font-size: 11px; font-weight: 500; color: var(--accent); } .phone__screen{ background: #ECE9E4; border-radius: 22px; min-height: 320px; padding: 16px 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; } .chat{ display: flex; flex-direction: column; gap: 8px; } .chat__bubble{ max-width: 84%; padding: 9px 13px; border-radius: 14px; font-size: 13px; line-height: 1.4; opacity: 0; } .chat__bubble--in{ align-self: flex-start; background: #fff; color: #1A1A1A; border-bottom-left-radius: 4px; } .chat__bubble--out{ align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; } .chat__typing{ align-self: flex-start; display: flex; gap: 4px; padding: 11px 14px; border-radius: 14px; border-bottom-left-radius: 4px; background: #fff; opacity: 0; } .chat__typing span{ width: 6px; height: 6px; border-radius: 50%; background: #8E8E93; animation: typingDot 1s ease-in-out infinite; } .chat__typing span:nth-child(2){ animation-delay: .15s; } .chat__typing span:nth-child(3){ animation-delay: .3s; } @keyframes typingDot{ 0%, 100%{ transform: translateY(0); opacity: .4; } 50%{ transform: translateY(-3px); opacity: 1; } } .chat-anim{ animation-play-state: paused; } .is-visible .chat-anim{ animation: chatCycle 9s var(--ease) infinite; animation-delay: calc(var(--cd, 0) * 1.3s); animation-play-state: running; } @keyframes chatCycle{ 0%{ opacity: 0; transform: translateY(6px); } 4%{ opacity: 1; transform: translateY(0); } 86%{ opacity: 1; transform: translateY(0); } 95%{ opacity: 0; transform: translateY(-6px); } 100%{ opacity: 0; } } /* ============ WHY KAI ============ */ .why{ position: relative; padding: 0 0 var(--section-pad); } .why__grid{ position: relative; z-index: 1; max-width: var(--content); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; } @media (max-width: 760px){ .why__grid{ grid-template-columns: 1fr; gap: 36px; } } .why__item{ padding-top: 24px; border-top: 1.5px solid var(--line); transition: transform .3s var(--ease); } .why__item:hover{ transform: translateY(-4px); } .why__num{ display: block; font-size: 13px; font-weight: 700; color: var(--accent-text); margin-bottom: 16px; } .why__item h3{ margin: 0 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; } .why__item p{ margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); } /* ============ CONTACT — badge & spotlight ============ */ .contact__spotlight{ position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--x,50%) var(--y,30%), rgba(25,195,125,.18), transparent 55%); opacity: 0; transition: opacity .4s var(--ease); } .contact:hover .contact__spotlight{ opacity: 1; } .contact__badge{ position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; margin: 0 0 24px; padding: 7px 14px 7px 10px; border-radius: 100px; border: 1px solid rgba(250,250,250,.16); font-size: 13px; font-weight: 500; color: var(--on-dark-soft); } .contact__badge .dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(25,195,125,.6); animation: badgePulse 2s infinite; } @keyframes badgePulse{ 0%{ box-shadow: 0 0 0 0 rgba(25,195,125,.5); } 70%{ box-shadow: 0 0 0 6px rgba(25,195,125,0); } 100%{ box-shadow: 0 0 0 0 rgba(25,195,125,0); } } /* ============ THEME TOGGLE ============ */ .theme-toggle{ width: 36px; height: 36px; border-radius: 50%; border: 1.4px solid var(--line); background: transparent; color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: border-color .25s var(--ease), transform .25s var(--ease); } .theme-toggle:hover{ border-color: var(--ink); transform: translateY(-1px); } .theme-toggle svg{ width: 16px; height: 16px; } .theme-toggle__sun{ display: none; } .theme-toggle__moon{ display: block; } [data-theme="dark"] .theme-toggle__sun{ display: block; } [data-theme="dark"] .theme-toggle__moon{ display: none; } .lang-toggle{ height: 36px; padding: 0 13px; border-radius: 100px; border: 1.4px solid var(--line); background: transparent; color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .02em; cursor: pointer; flex-shrink: 0; transition: border-color .25s var(--ease), transform .25s var(--ease); } .lang-toggle:hover{ border-color: var(--ink); transform: translateY(-1px); } /* ============ SERVICE SUBPAGE ============ */ .breadcrumb{ position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; margin: 0 0 22px; font-size: 13px; font-weight: 600; color: var(--ink-soft); transition: color .2s var(--ease), gap .2s var(--ease); } .breadcrumb:hover{ color: var(--ink); gap: 9px; } .service-hero__icon{ position: relative; z-index: 1; width: 56px; height: 56px; margin: 0 auto 24px; color: var(--ink); } .service-hero__icon svg{ width: 100%; height: 100%; } .card__more{ display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--accent-text); transition: gap .25s var(--ease); } .card:hover .card__more{ gap: 10px; } /* ---------- feature checklist ---------- */ .features{ position: relative; padding: var(--section-pad) 0; } .feature-list{ position: relative; z-index: 1; max-width: var(--content); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 48px; list-style: none; } @media (max-width: 700px){ .feature-list{ grid-template-columns: 1fr; } } .feature-list li{ display: flex; gap: 16px; align-items: flex-start; transition: transform .3s var(--ease); } .feature-list li:hover{ transform: translateX(5px); } .feature-list__check{ flex-shrink: 0; width: 28px; height: 28px; margin-top: 2px; border-radius: 50%; background: rgba(25,195,125,.12); color: var(--accent); display: flex; align-items: center; justify-content: center; transition: background .25s var(--ease), color .25s var(--ease); } .feature-list li:hover .feature-list__check{ background: var(--accent); color: #fff; } .feature-list__check svg{ width: 14px; height: 14px; } .feature-list h3{ margin: 0 0 4px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; } .feature-list p{ margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); } /* ---------- single-column process variant ---------- */ .process--solo .process__inner{ grid-template-columns: 1fr; max-width: 720px; } /* ---------- related services ---------- Always 3 related cards — skip the 2-column tablet step (it would leave the 3rd card alone with an empty cell next to it). */ .related{ padding: 0 0 var(--section-pad); } .related .grid{ grid-template-columns: repeat(3, 1fr); } @media (max-width: 700px){ .related .grid{ grid-template-columns: 1fr; border-radius: 16px; } } /* ============ FAQ ACCORDION ============ */ .faq{ position: relative; z-index: 1; padding: var(--section-pad) 0; } .faq__list{ max-width: 760px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; } .faq__item{ border-bottom: 1px solid var(--line); } .faq__item:first-child{ border-top: 1px solid var(--line); } .faq__q{ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 4px; background: none; border: none; text-align: left; font-family: inherit; font-size: 17px; font-weight: 600; color: var(--ink); cursor: pointer; } .faq__chev{ flex-shrink: 0; width: 20px; height: 20px; color: var(--ink-soft); transition: transform .3s var(--ease), color .3s var(--ease); } .faq__q[aria-expanded="true"] .faq__chev{ transform: rotate(180deg); color: var(--accent-text); } .faq__a{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); } .faq__a-inner{ overflow: hidden; } .faq__a p{ margin: 0; padding: 0 4px 22px; max-width: 64ch; font-size: 15px; line-height: 1.6; color: var(--ink-soft); } .faq__item.is-open .faq__a{ grid-template-rows: 1fr; } /* ============ FLOATING DECORATIVE BLOCKS ============ */ .float-block{ position: absolute; border: 1.5px solid var(--line); border-radius: 20px; opacity: .6; pointer-events: none; z-index: 0; animation: blockFloat 13s var(--ease) infinite alternate; } .float-block--accent{ border-color: rgba(25,195,125,.4); } @keyframes blockFloat{ 0%{ transform: translate(0,0) rotate(0deg); } 100%{ transform: translate(16px,-18px) rotate(9deg); } } @media (max-width: 760px){ .float-block{ display: none; } } .float-block--statement-a{ width: 54px; height: 54px; top: 18px; left: 6%; } .float-block--statement-b{ width: 36px; height: 36px; bottom: 14px; right: 9%; animation-delay: -6s; } .float-block--why-a{ width: 60px; height: 60px; top: 30px; right: 4%; } .float-block--why-b{ width: 32px; height: 32px; bottom: 10px; left: 5%; animation-delay: -5s; } .float-block--process-a{ width: 48px; height: 48px; top: 50px; right: 6%; } .float-block--process-b{ width: 30px; height: 30px; bottom: 70px; left: 3%; animation-delay: -4s; } .float-block--features-a{ width: 46px; height: 46px; top: 20px; right: 5%; } .float-block--features-b{ width: 30px; height: 30px; bottom: 30px; left: 4%; animation-delay: -7s; } /* ============ CURSOR FOLLOWER ============ */ .cursor-dot{ position: fixed; top: 0; left: 0; width: 28px; height: 28px; margin: -14px; border-radius: 50%; border: 1.4px solid var(--ink); opacity: 0; pointer-events: none; z-index: 9999; transform: translate(-100px, -100px); transition: opacity .3s var(--ease), width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease); } .cursor-dot.is-active{ opacity: .45; } .cursor-dot.is-pointer{ width: 50px; height: 50px; margin: -25px; background: var(--accent); border-color: transparent; opacity: .16; } @media (hover: none), (pointer: coarse){ .cursor-dot{ display: none; } } @media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; } .reveal{ opacity: 1; transform: none; } }