has .svc-main-ai. Everything below the hero (forWhom / delivers / process / pricing / FAQ) keeps the standard service-page styling so the site stays a system, not a one-off page. Layering contract: · .ai-backdrop — position: fixed, z-index: -10. Sits behind every paint in the document. Drives the soft gradient atmosphere across the WHOLE page (not just the hero) and never clips at section boundaries. · .ai-hero — normal flow, NO overflow:hidden, so absolutely-positioned children can extend past it. The hero glow lives on .ai-backdrop, not here. · everything else — uses ambient page background as provided by .ai-backdrop. No section-level glows. ======================================================== */ /* ─── Full-page ambient backdrop ────────────────────────── */ /* MODIFIED: collapsed the three child blobs into one fixed element whose `background` paints all three radial gradients at once. Because the host element is position: fixed and sized to the viewport, the gradients are PAINTED into the viewport every frame — there is literally nothing that can shift on scroll. Cleaner, fewer GPU layers, and removes the subpixel jitter some browsers showed on the old child-divs approach. */ .ai-backdrop { /* MODIFIED: was position: fixed so the glows stuck to the viewport on scroll. Now absolute so they sit at the top of the page and scroll away with the rest of the content. Height extended past 100vh so the bottom-right glow can spill naturally into the next section instead of being hard-cut at the hero edge. */ position: absolute; top: 0; left: 0; width: 100%; height: 140vh; z-index: -10; pointer-events: none; background: radial-gradient(620px 620px at -120px -120px, rgba(96, 177, 255, 0.45) 0%, rgba(49, 154, 255, 0.30) 28%, transparent 60%), radial-gradient(640px 640px at calc(100vw - 160px) calc(100vh - 140px), rgba(49, 154, 255, 0.36) 0%, rgba(96, 177, 255, 0.20) 30%, transparent 60%), radial-gradient(540px 540px at 30vw 45vh, rgba(96, 177, 255, 0.22) 0%, rgba(96, 177, 255, 0.10) 38%, transparent 65%), radial-gradient(120% 80% at 50% 0%, rgba(96, 177, 255, 0.05), transparent 70%); } [data-theme="dark"] .ai-backdrop { background: radial-gradient(620px 620px at -120px -120px, rgba(96, 177, 255, 0.55) 0%, rgba(49, 154, 255, 0.36) 28%, transparent 60%), radial-gradient(640px 640px at calc(100vw - 160px) calc(100vh - 140px), rgba(49, 154, 255, 0.46) 0%, rgba(96, 177, 255, 0.24) 30%, transparent 60%), radial-gradient(540px 540px at 30vw 45vh, rgba(96, 177, 255, 0.30) 0%, rgba(96, 177, 255, 0.14) 38%, transparent 65%), radial-gradient(120% 80% at 50% 0%, rgba(96, 177, 255, 0.10), transparent 70%); } /* The .ai-backdrop-glow children are no longer rendered by the React component, but we keep these rules as a defensive no-op in case the markup is ever reintroduced. */ .ai-backdrop-glow { display: none; } @keyframes aiBgDrift { /* retained for legacy refs but unused — glows are now static so they sit truly fixed under the page content. */ from { transform: none; } to { transform: none; } } /* ─── Hero container ────────────────────────────────────── */ .ai-hero { position: relative; /* MODIFIED: extra top breathing room so the hero headline clears the sticky nav on load; tighter bottom padding so it still flows into the For-Whom section beneath. */ padding: 112px 0 56px; } .ai-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; gap: 48px; padding-left: 24px; padding-right: 24px; } @media (max-width: 980px) { .ai-hero-grid { grid-template-columns: 1fr; gap: 24px; } .ai-hero { padding: 80px 0 40px; } } /* MODIFIED: on the AI page, tighten the rhythm between sections — the bespoke hero is denser than the default service hero, so the default 80px padding read as too much air below it. Clamps scale with viewport. */ .svc-main-ai .svc-section { padding: clamp(48px, 6vw, 72px) 24px; } .svc-main-ai .section { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); } /* ─── Left column — glass card ──────────────────────────── */ .ai-hero-left { display: flex; flex-direction: column; gap: 28px; min-width: 0; } .ai-hero-left .proj-back { align-self: flex-start; } .ai-hero-card { position: relative; padding: 36px 36px 32px; border-radius: 24px; background: rgba(255, 255, 255, 0.32); backdrop-filter: blur(40px) saturate(150%); -webkit-backdrop-filter: blur(40px) saturate(150%); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.65), inset 0 4px 4px 0 rgba(255, 255, 255, 0.22), 0 30px 60px -30px rgba(15, 25, 45, 0.22); display: flex; flex-direction: column; gap: 22px; } [data-theme="dark"] .ai-hero-card { background: rgba(20, 22, 32, 0.55); border-color: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08), inset 0 4px 4px 0 rgba(255, 255, 255, 0.04), 0 30px 60px -30px rgba(0, 0, 0, 0.6); } /* Social-proof pill */ .ai-hero-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(0, 0, 0, 0.07); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6); font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: 0.02em; color: var(--text); } [data-theme="dark"] .ai-hero-badge { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.1); } .ai-hero-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); animation: aiBadgePulse 2.4s ease-in-out infinite; } @keyframes aiBadgePulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent); } } .ai-hero-badge-sep { opacity: 0.35; } .ai-hero-badge-eb { text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; font-size: 11px; } /* Headline */ .ai-hero-title { font-family: var(--font-display); font-size: clamp(44px, 7.4vw, 92px); line-height: 0.98; letter-spacing: -0.035em; margin: 0; font-weight: 800; -webkit-font-smoothing: antialiased; } .ai-hero-title .line { display: block; } .ai-hero-title .accent { background: linear-gradient(92deg, #0084FF 0%, #60B1FF 50%, #319AFF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: aiAccentSlide 8s ease-in-out infinite; } @keyframes aiAccentSlide { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .ai-hero-lede { font-size: 18px; line-height: 1.55; letter-spacing: -0.005em; color: var(--text-2); margin: 0; max-width: 52ch; } /* CTAs */ .ai-hero-ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .ai-cta-primary { display: inline-flex; align-items: center; gap: 12px; padding: 14px 8px 14px 22px; border-radius: 16px; background: rgba(0, 132, 255, 0.85); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); color: #fff; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; text-decoration: none; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.45), inset 0 4px 4px 0 rgba(255, 255, 255, 0.32), 0 12px 30px -12px rgba(0, 100, 220, 0.6); transition: transform .2s ease, box-shadow .2s ease; } .ai-cta-primary:hover { transform: scale(1.02); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.5), inset 0 4px 4px 0 rgba(255, 255, 255, 0.36), 0 18px 40px -12px rgba(0, 100, 220, 0.75); } .ai-cta-arr { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.95); color: rgba(0, 100, 220, 1); margin-left: 4px; transition: transform .2s; } .ai-cta-primary:hover .ai-cta-arr { transform: translateX(3px); } .ai-cta-ghost { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--text); text-decoration: none; padding: 12px 14px; border-radius: 12px; transition: background .2s, color .2s; } .ai-cta-ghost:hover { background: rgba(0, 0, 0, 0.04); color: var(--accent); } [data-theme="dark"] .ai-cta-ghost:hover { background: rgba(255, 255, 255, 0.06); } /* Facts strip */ .ai-hero-facts { margin-top: 6px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(0, 0, 0, 0.08); padding-top: 22px; gap: 14px 0; } [data-theme="dark"] .ai-hero-facts { border-top-color: rgba(255, 255, 255, 0.08); } .ai-hero-fact { padding: 0 18px; border-left: 1px solid rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; gap: 4px; min-width: 0; } [data-theme="dark"] .ai-hero-fact { border-left-color: rgba(255, 255, 255, 0.06); } .ai-hero-fact:first-child { border-left: none; padding-left: 0; } .ai-hero-fact .k { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.55; } .ai-hero-fact .v { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } .ai-hero-fact:first-child .v { color: var(--accent); } @media (max-width: 640px) { .ai-hero-facts { grid-template-columns: repeat(2, 1fr); } .ai-hero-fact:nth-child(3) { border-left: none; padding-left: 0; } .ai-hero-fact:nth-child(odd) { padding-left: 0; } } /* ─── Right column — orb video ──────────────────────────── */ .ai-hero-orb-wrap { position: relative; align-self: center; width: 100%; aspect-ratio: 1; /* MODIFIED: shrink the orb a touch so it sits more in balance with the glass card on the left. */ max-width: 440px; /* MODIFIED: center the orb within its grid column instead of pinning it to the right edge. */ margin-left: auto; margin-right: auto; /* MODIFIED: entrance fade-in. Starts a touch lower, slightly smaller and blurred so the orb feels like it materialises into place rather than popping in. */ animation: aiOrbEnter 1.2s cubic-bezier(.2,.7,.2,1) both; } @keyframes aiOrbEnter { from { opacity: 0; transform: translateY(20px) scale(0.94); filter: blur(8px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @media (max-width: 980px) { .ai-hero-orb-wrap { margin: 0 auto; max-width: 340px; } } @media (max-width: 480px) { .ai-hero-orb-wrap { max-width: 260px; } } /* Clickable wrapper: no circular mask, no halo — the .webm's black backdrop is removed by mix-blend-mode: screen below, so the orb shows its own organic shape and the click pulse actually warps it. */ .ai-hero-orb-clickable { position: absolute; inset: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* The orb video itself. mix-blend-mode: screen filters out the black backdrop of the .webm. The CSS filter takes the purple source and colour-grades it into electric brand blue — and slots url(#ai-orb-wobble) at the end so SVG turbulence can distort the orb directly when the user clicks. transform-origin is driven by --clk-x/--clk-y so the pulse reads as a ripple from the actual click point. */ .ai-hero-orb-video { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%) scale(1.25); transform-origin: var(--clk-x, 50%) var(--clk-y, 50%); mix-blend-mode: screen; filter: hue-rotate(-55deg) saturate(2.5) brightness(1.2) contrast(1.1) url(#ai-orb-wobble); pointer-events: none; } [data-theme="dark"] .ai-hero-orb-video { filter: hue-rotate(-55deg) saturate(2.6) brightness(1.32) contrast(1.12) url(#ai-orb-wobble); } /* Click pulse — a brief contraction/rebound of the video, anchored at the click point via transform-origin. Pairs with the SVG turbulence so the orb literally wobbles. */ .ai-hero-orb-clickable.is-rippling .ai-hero-orb-video { animation: aiOrbPress 0.9s cubic-bezier(.2,.8,.25,1); } @keyframes aiOrbPress { 0% { transform: translate(-50%, -50%) scale(1.25); } 18% { transform: translate(-50%, -50%) scale(1.18); } 55% { transform: translate(-50%, -50%) scale(1.34); } 100% { transform: translate(-50%, -50%) scale(1.25); } } /* The off-screen

"Have something in mind?" se salían por la derecha. Causa: el grid + sus children no tenían `min-width: 0`, así que la palabra más larga ("something") forzaba el track de grid a su intrinsic min-content y, con el padding del card, se desbordaba. Fix defensivo: forzar min-width:0 + max-width:100% en toda la cadena (section, wrap, grid, columnas, form). Romper palabras largas (email, url) con overflow-wrap. Asegurar que inputs/select/textarea respeten el ancho del padre. ========================================================= / @media (max-width: 720px) { #contact { min-width: 0; max-width: 100%; } #contact .contact-wrap { max-width: 100%; box-sizing: border-box; padding: 28px 20px; } #contact .contact-grid { min-width: 0; max-width: 100%; } #contact .contact-left, #contact .contact-form { min-width: 0; max-width: 100%; box-sizing: border-box; } / Romper palabras largas en titulares y bodies / #contact .contact-grid h2, #contact .contact-left p { overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; max-width: 100%; } / H2 un punto más compacto para móviles muy estrechos (<400px) / #contact .contact-grid h2 { font-size: clamp(28px, 8.5vw, 40px) !important; line-height: 1.08; } / Las filas de info (email/phone/location/linkedin) — la columna derecha (key + value) puede contener un email/teléfono largo; asegurar que se contraiga y rompa si hace falta. / #contact .contact-info .row { min-width: 0; } #contact .contact-info .row > div:last-child { min-width: 0; flex: 1 1 auto; } #contact .contact-info .v, #contact .contact-info .v a { overflow-wrap: anywhere; word-break: break-word; } / Form fields: que NUNCA sean más anchos que el form / #contact .contact-form .field { min-width: 0; max-width: 100%; } #contact .contact-form input, #contact .contact-form textarea, #contact .contact-form select { width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; } / El