@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/LDIZaomQNQcsA88c7O9yZ4KMCoOg4KozySKCdSNG9OcqYQ0lCS_ZOKyYRw.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/LDIZaomQNQcsA88c7O9yZ4KMCoOg4KozySKCdSNG9OcqYQ0lCS_XOKw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yyygA.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Syne'; font-style: normal; font-weight: 600 800; font-display: swap; src: url(/fonts/8vIH7w4qzmVxm25L9Hz_.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Syne'; font-style: normal; font-weight: 600 800; font-display: swap; src: url(/fonts/8vIH7w4qzmVxm2BL9A.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --bg-primary: #080808; --bg-secondary: #0f0f0f; --bg-tertiary: #161616; --bg-card: rgba(18, 18, 18, 0.7); --bg-glass: rgba(255, 255, 255, 0.03); --bg-glass-hover: rgba(255, 255, 255, 0.07); --bg-inverted: #ffffff; --accent-red: #ff1e27; --accent-red-hover: #ff3b43; --accent-red-glow: rgba(255, 30, 39, 0.35); --accent-red-dim: rgba(255, 30, 39, 0.12); --text-primary: #ffffff; --text-secondary: #9c9c9c; --text-muted: #5e5e5e; --text-inverted: #080808; --text-inverted-muted: #555555; --border-subtle: rgba(255, 255, 255, 0.08); --border-medium: rgba(255, 255, 255, 0.16); --border-accent: rgba(255, 30, 39, 0.4); --border-inverted: rgba(0, 0, 0, 0.1); --font-display: 'Syne', sans-serif; --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', monospace; --fs-hero: clamp(1.85rem, 3.8vw + 0.4rem, 3.6rem); --fs-hero-sub: clamp(0.95rem, 1.1vw + 0.15rem, 1.15rem); --fs-h1: clamp(1.85rem, 3.5vw + 0.3rem, 3.25rem); --fs-h2: clamp(1.5rem, 2.5vw + 0.3rem, 2.35rem); --fs-h3: clamp(1.15rem, 1.6vw + 0.1rem, 1.45rem); --fs-body: clamp(0.95rem, 0.9vw + 0.1rem, 1.075rem); --fs-body-sm: clamp(0.825rem, 0.8vw, 0.925rem); --fs-mono: clamp(0.725rem, 0.75vw, 0.825rem); --fs-tag: 0.725rem; --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.75rem; --space-lg: 2.75rem; --space-xl: 4rem; --space-2xl: clamp(3.5rem, 5.5vw, 5.5rem); --space-3xl: clamp(4.5rem, 7.5vw, 7.5rem); --container-max: 1440px; --container-pad: clamp(1.25rem, 4vw, 4rem); --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-pill: 9999px; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1); --transition-fast: 0.2s var(--ease-out-expo); --transition-medium: 0.4s var(--ease-out-expo); --transition-slow: 0.7s var(--ease-out-expo); --z-noise: 900; --z-header: 800; --z-cursor: 1000; --z-modal: 950; --z-toast: 980; --z-overlay: 700; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; background-color: var(--bg-primary); color: var(--text-primary); font-family: var(--font-body); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; overflow-x: hidden; } body { background-color: var(--bg-primary); color: var(--text-primary); overflow-x: hidden; position: relative; min-height: 100vh; cursor: default; } ::selection { background-color: var(--accent-red); color: #ffffff; } ::-moz-selection { background-color: var(--accent-red); color: #ffffff; } ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } ::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: var(--radius-pill); } ::-webkit-scrollbar-thumb:hover { background: var(--accent-red); } .grain-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: var(--z-noise); opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); } .scroll-progress-bar { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--accent-red), #ffffff); z-index: var(--z-header); box-shadow: 0 0 10px var(--accent-red); transform: scaleX(0); transform-origin: left center; will-change: transform; } html.lenis, html.lenis body { height: auto; } html.lenis { scroll-behavior: auto !important; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } @supports (overflow: clip) { html, body { overflow-x: clip; } } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--text-primary); } p { color: var(--text-secondary); font-size: var(--fs-body); font-weight: 400; max-width: 65ch; } a { color: inherit; text-decoration: none; transition: color var(--transition-fast); } button { border: none; background: transparent; font-family: inherit; cursor: pointer; outline: none; } img, svg, video { max-width: 100%; display: block; } ul, ol { list-style: none; } .mono-tag { font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-red); } .container { width: 100%; max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--container-pad); padding-right: var(--container-pad); } .custom-cursor { position: fixed; top: 0; left: 0; width: 10px; height: 10px; background-color: var(--accent-red); border-radius: 50%; pointer-events: none; z-index: var(--z-cursor); transition: width 0.25s var(--ease-out-expo), height 0.25s var(--ease-out-expo), background-color 0.25s, opacity 0.2s ease; mix-blend-mode: difference; opacity: 0; display: flex; align-items: center; justify-content: center; } .custom-cursor-follower { position: fixed; top: 0; left: 0; width: 36px; height: 36px; border: 1px solid rgba(255, 30, 39, 0.4); border-radius: 50%; pointer-events: none; z-index: calc(var(--z-cursor) - 1); transition: width 0.3s var(--ease-out-expo), height 0.3s var(--ease-out-expo), border-color 0.3s, background-color 0.3s, opacity 0.2s ease; opacity: 0; } .custom-cursor.is-hovering { width: 48px; height: 48px; background-color: #ffffff; } .custom-cursor-follower.is-hovering { width: 68px; height: 68px; border-color: rgba(255, 255, 255, 0.35); background-color: rgba(255, 255, 255, 0.05); backdrop-filter: blur(2px); } .custom-cursor.is-project-hover { width: 80px; height: 80px; background-color: var(--accent-red); mix-blend-mode: normal; } .custom-cursor.is-project-hover::after { content: 'VER'; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; color: #ffffff; letter-spacing: 0.1em; } :focus-visible { outline: 2px solid var(--accent-red); outline-offset: 3px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 1rem 2rem; font-family: var(--font-body); font-size: var(--fs-body-sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--radius-pill); transition: all var(--transition-medium); position: relative; overflow: hidden; cursor: pointer; white-space: nowrap; user-select: none; } .btn-primary { background-color: var(--accent-red); color: #ffffff; border: 1px solid var(--accent-red); box-shadow: 0 4px 20px var(--accent-red-dim); } .btn-primary:hover { background-color: var(--accent-red-hover); border-color: var(--accent-red-hover); transform: translateY(-2px); box-shadow: 0 8px 30px var(--accent-red-glow); } .btn-secondary { background: transparent; color: #ffffff; border: 1px solid var(--border-medium); backdrop-filter: blur(8px); } .btn-secondary:hover { border-color: var(--accent-red); color: var(--accent-red); transform: translateY(-2px); background: rgba(255, 30, 39, 0.05); } .btn-white { background-color: #ffffff; color: #080808; border: 1px solid #ffffff; } .btn-white:hover { background-color: var(--accent-red); color: #ffffff; border-color: var(--accent-red); transform: translateY(-2px); box-shadow: 0 8px 30px var(--accent-red-glow); } .btn-icon { width: 18px; height: 18px; transition: transform var(--transition-fast); } .btn:hover .btn-icon { transform: translateX(3px) translateY(-1px); } .btn-magnetic-wrapper { display: inline-block; } .status-pill { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.45rem 1rem; background: var(--bg-glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--fs-tag); color: var(--text-secondary); letter-spacing: 0.08em; backdrop-filter: blur(10px); } .status-dot { width: 7px; height: 7px; border-radius: 50%; background-color: #10b981; position: relative; box-shadow: 0 0 8px #10b981; } .status-dot::after { content: ''; position: absolute; top: -3px; left: -3px; width: 13px; height: 13px; border-radius: 50%; border: 1px solid #10b981; animation: pulse 2s infinite ease-out; } @keyframes pulse { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } } .category-tag { display: inline-block; padding: 0.35rem 0.85rem; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary); letter-spacing: 0.05em; transition: all var(--transition-fast); } .category-tag:hover { border-color: var(--accent-red); color: #ffffff; } .header-nav { position: fixed; top: 1.5rem; left: 0; width: 100%; z-index: var(--z-header); pointer-events: none; } .header-container { display: flex; align-items: center; justify-content: space-between; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); } .nav-brand { pointer-events: auto; display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.03em; color: #ffffff; } .nav-brand-dot { width: 6px; height: 6px; background-color: var(--accent-red); border-radius: 50%; } .nav-glass-bar { pointer-events: auto; display: flex; align-items: center; gap: 1.5rem; padding: 0.5rem 1.25rem; background: rgba(15, 15, 15, 0.75); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .nav-link { font-family: var(--font-body); font-size: var(--fs-body-sm); font-weight: 500; color: var(--text-secondary); transition: color var(--transition-fast); position: relative; } .nav-link:hover { color: #ffffff; } .nav-link.active { color: var(--accent-red); } .nav-actions { pointer-events: auto; display: flex; align-items: center; gap: 0.75rem; } .audio-toggle-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.85rem; background: rgba(18, 18, 18, 0.8); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); color: var(--text-secondary); font-family: var(--font-mono); font-size: 0.75rem; cursor: pointer; transition: all var(--transition-fast); backdrop-filter: blur(10px); } .audio-toggle-btn:hover { border-color: var(--accent-red); color: #ffffff; } .audio-waves { display: flex; align-items: flex-end; gap: 2px; height: 12px; } .audio-bar { width: 2px; height: 4px; background-color: var(--accent-red); border-radius: 1px; transition: height 0.2s ease; } .audio-toggle-btn.is-active .audio-bar:nth-child(1) { animation: soundwave 0.8s infinite alternate ease-in-out; } .audio-toggle-btn.is-active .audio-bar:nth-child(2) { animation: soundwave 1.1s infinite alternate ease-in-out 0.2s; } .audio-toggle-btn.is-active .audio-bar:nth-child(3) { animation: soundwave 0.7s infinite alternate ease-in-out 0.4s; } @keyframes soundwave { 0% { height: 3px; } 100% { height: 12px; } } .mobile-menu-btn { display: none; pointer-events: auto; width: 42px; height: 42px; border-radius: 50%; background: var(--bg-tertiary); border: 1px solid var(--border-medium); align-items: center; justify-content: center; color: #ffffff; } .section-header { margin-bottom: var(--space-xl); } .section-label { display: flex; align-items: center; gap: 0.75rem; margin-bottom: var(--space-sm); } .section-num { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 700; color: var(--accent-red); } .section-line { width: 40px; height: 1px; background-color: var(--border-medium); } .section-title { font-size: var(--fs-h2); line-height: 1.15; color: var(--text-primary); max-width: 20ch; } .marquee-container { width: 100%; overflow: hidden; background: var(--bg-secondary); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); padding: 1.25rem 0; user-select: none; white-space: nowrap; } .marquee-track { display: inline-flex; gap: 3rem; animation: marquee-scroll 25s linear infinite; will-change: transform; } .marquee-item { display: inline-flex; align-items: center; gap: 1.5rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.4); } .marquee-item span { color: var(--accent-red); } @keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .toast-notification { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(100px); background: #ffffff; color: #080808; padding: 0.85rem 1.5rem; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: var(--fs-body-sm); font-weight: 600; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); display: flex; align-items: center; gap: 0.75rem; z-index: var(--z-toast); opacity: 0; pointer-events: none; transition: all 0.4s var(--ease-out-expo); } .toast-notification.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; } .toast-icon { color: var(--accent-red); } .mobile-drawer { position: fixed; top: 0; right: 0; width: 100vw; height: 100vh; background: var(--bg-primary); z-index: calc(var(--z-header) + 10); display: flex; flex-direction: column; justify-content: space-between; padding: 3rem 2rem; transform: translateX(100%); transition: transform 0.5s var(--ease-out-expo); } .mobile-drawer.is-open { transform: translateX(0); } .mobile-drawer-header { display: flex; justify-content: space-between; align-items: center; } .mobile-drawer-close { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-secondary); border: 1px solid var(--border-medium); color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: auto; transition: all var(--transition-fast); z-index: 10; } .mobile-drawer-close:hover { background: var(--accent-red); border-color: var(--accent-red); transform: rotate(90deg); } .mobile-drawer-close svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.5; pointer-events: none; } .mobile-nav-links { display: flex; flex-direction: column; gap: 1.5rem; } .mobile-nav-link { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--text-secondary); transition: color var(--transition-fast); } .mobile-nav-link:hover, .mobile-nav-link.active { color: var(--accent-red); } .btn-cta-secondary { background-color: #080808; color: #ffffff; border: 1px solid #080808; padding: 1.2rem 2rem; font-size: 1rem; } .btn-cta-secondary:hover { background-color: var(--accent-red); border-color: var(--accent-red); color: #ffffff; box-shadow: 0 10px 30px var(--accent-red-glow); transform: translateY(-2px); } .contact-modal-overlay { position: fixed; inset: 0; background: rgba(4, 4, 4, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: calc(var(--z-header) + 50); display: flex; align-items: center; justify-content: center; padding: 1.5rem; opacity: 0; pointer-events: none; transition: opacity 0.35s var(--ease-out-expo); } .contact-modal-overlay.is-active { opacity: 1; pointer-events: auto; } .contact-modal-card { background: #111111; border: 1px solid var(--border-medium); border-radius: var(--radius-md); width: 100%; max-width: 580px; max-height: 90vh; overflow-y: auto; padding: 2.25rem 2rem; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9); transform: translateY(25px) scale(0.97); transition: transform 0.4s var(--ease-out-expo); position: relative; } .contact-modal-overlay.is-active .contact-modal-card { transform: translateY(0) scale(1); } .contact-modal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; } .contact-modal-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: #ffffff; margin-top: 0.25rem; } .contact-modal-close { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-subtle); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition-fast); } .contact-modal-close:hover { background: var(--accent-red); color: #ffffff; border-color: var(--accent-red); transform: rotate(90deg); } .contact-modal-sub { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 1.75rem; } .contact-form { display: flex; flex-direction: column; gap: 1.15rem; } .form-group { display: flex; flex-direction: column; gap: 0.45rem; } .form-label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.08em; } .form-input, .form-select, .form-textarea { width: 100%; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-medium); border-radius: var(--radius-sm); padding: 0.8rem 1rem; color: #ffffff; font-family: var(--font-body); font-size: 0.92rem; transition: border-color 0.2s, background-color 0.2s; outline: none; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent-red); background: rgba(255, 255, 255, 0.08); } .form-select { cursor: pointer; } .form-select option { background: #141414; color: #ffffff; } .form-textarea { resize: vertical; min-height: 95px; } .form-feedback { padding: 0.75rem 1rem; border-radius: var(--radius-sm); font-size: 0.85rem; line-height: 1.4; display: flex; align-items: center; gap: 0.5rem; } .form-feedback.is-error { background: rgba(255, 30, 39, 0.12); border: 1px solid rgba(255, 30, 39, 0.35); color: #ff858a; } .form-feedback.is-success { background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.35); color: #4ade80; } .form-actions { display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem; flex-wrap: wrap; } .form-submit-btn { padding: 0.85rem 1.8rem; font-size: 0.85rem; } .form-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; } .contact-modal-overlay { visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .contact-modal-overlay.is-active { visibility: visible; } .message-composer-card { max-width: 1040px; max-height: min(92dvh, 1000px); padding: 2rem; overscroll-behavior: contain; } .message-composer-card .contact-modal-header { gap: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-subtle); margin-bottom: 1.75rem; } .message-composer-card .contact-modal-title { font-size: clamp(1.6rem, 3vw, 2.4rem); } .message-composer-card .contact-modal-sub { font-size: 1rem; margin: 0.75rem 0 0; max-width: 58ch; } .message-composer-card .contact-modal-close { flex-shrink: 0; font-size: 1.75rem; line-height: 1; } .composer-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 2rem; align-items: start; } .composer-fields { display: flex; flex-direction: column; gap: 1.75rem; min-width: 0; } .composer-fieldset { border: 0; min-width: 0; } .composer-legend { font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.8rem; display: flex; align-items: baseline; gap: 0.6rem; } .composer-legend > span { color: var(--accent-red); font-family: var(--font-mono); font-size: 0.85rem; font-weight: 400; } .composer-hint { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0.75rem; } .composer-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; } .composer-choice { font-family: var(--font-body); font-size: 0.875rem; line-height: 1.4; padding: 0.7rem 0.85rem; border: 1px solid var(--border-medium); border-radius: var(--radius-sm); background: #181818; color: var(--text-secondary); text-align: left; transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; cursor: pointer; } .composer-choice:hover { border-color: var(--accent-red); color: #fff; } .composer-choice[aria-pressed="true"] { background: var(--accent-red); border-color: var(--accent-red); color: #fff; } .composer-services-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; } .composer-service { display: flex; align-items: center; gap: 0.7rem; min-height: 70px; overflow-wrap: anywhere; } .composer-service-number { flex-shrink: 0; font-family: var(--font-mono); font-size: 0.8rem; opacity: 0.65; } .composer-identification { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .message-composer-card .form-label { font-family: var(--font-body); font-size: 0.875rem; text-transform: none; letter-spacing: 0; } .message-composer-card .form-input, .message-composer-card .form-textarea { font-size: 1rem; } .composer-optional { font-size: 0.8rem; color: var(--text-muted); margin-left: 0.25rem; } .composer-budget-input { margin-top: 0.75rem; } .composer-preview-panel { background: #000; border: 1px solid var(--border-medium); border-radius: var(--radius-md); position: sticky; top: 0; padding: 1.5rem; min-width: 0; } .composer-preview-header { padding-bottom: 1.25rem; border-bottom: 1px solid var(--border-subtle); } .composer-preview-header h3 { font-size: 1.35rem; margin: 0.75rem 0; } .composer-selection-count { display: inline-block; font-size: 0.875rem; color: var(--text-secondary); } .composer-message { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.9375rem; line-height: 1.7; color: #eee; padding: 1.25rem 0; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; } .composer-send-area { padding-top: 1rem; border-top: 1px solid var(--border-subtle); } .composer-send { width: 100%; font-size: 0.9375rem; padding: 1rem; } .composer-destination { display: block; margin-top: 0.9rem; text-align: center; font-size: 0.8rem; color: var(--text-muted); } .composer-feedback { font-size: 0.875rem; color: #ff999e; margin-bottom: 0.8rem; } .message-composer-card [hidden] { display: none !important; } @media (max-width: 767px) { .contact-modal-overlay { padding: 0.75rem; align-items: center; } .message-composer-card { padding: 1.25rem; max-height: calc(100dvh - 1.5rem); border-radius: var(--radius-md); } .message-composer-card .contact-modal-header { gap: 0.75rem; } .composer-layout { grid-template-columns: 1fr; gap: 1.75rem; } .composer-preview-panel { position: static; padding: 1.25rem; } .composer-identification { grid-template-columns: 1fr; } .composer-message { max-height: 260px; } } @media (max-width: 390px) { .composer-services-grid { grid-template-columns: 1fr; } .composer-service { min-height: 54px; } } .header-container { min-height: 56px; border: 1px solid transparent; border-radius: 100px; transition: background-color 0.25s, border-color 0.25s, box-shadow 0.25s; } .header-nav.is-scrolled .header-container { width: calc(100% - var(--container-pad) * 2); max-width: calc(var(--container-max) - var(--container-pad) * 2); padding: 0.45rem 1rem; background: rgba(0,0,0,0.7); border-color: rgba(255,255,255,0.16); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 8px 24px rgba(0,0,0,0.16); } .header-nav.is-scrolled.is-on-light .header-container { background: rgba(255,255,255,0.76); border-color: rgba(0,0,0,0.12); box-shadow: 0 8px 24px rgba(0,0,0,0.08); } @media (max-width: 767px) { .header-nav.is-scrolled .header-container { padding: 0.4rem 0.75rem; } } .nav-brand { flex: 0 0 auto; width: max-content; } .nav-brand-lockup { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; } .nav-brand-dot { display: inline-block; position: static; flex: 0 0 6px; align-self: center; } #audio-toggle-btn { position: fixed; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); right: calc(1rem + env(safe-area-inset-right, 0px)); z-index: calc(var(--z-header) + 5); display: inline-flex; min-width: 104px; min-height: 48px; justify-content: center; padding: 0.8rem 1rem; background: rgba(0,0,0,0.9); color: #bbb; border: 1px solid #555; font-size: 0.875rem; pointer-events: auto; -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 16px rgba(0,0,0,0.18); } #audio-toggle-btn .audio-bar { background: #888; } #audio-toggle-btn.is-active { background: var(--accent-red); border-color: var(--accent-red); color: #fff; } #audio-toggle-btn.is-active .audio-bar { background: #fff; } #audio-toggle-btn:focus-visible { outline: 3px solid var(--accent-red); outline-offset: 4px; } #audio-toggle-btn:disabled { cursor: wait; } .viewport-bottom-blur { position: fixed; inset: auto 0 0; height: clamp(52px, 10svh, 96px); z-index: 750; pointer-events: none; user-select: none; contain: layout style; } .viewport-bottom-blur > span { position: absolute; inset: 0; pointer-events: none; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 60%); mask-image: linear-gradient(to bottom, transparent, #000 60%); } .viewport-bottom-blur > span:nth-child(2) { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(to bottom, transparent 25%, #000 85%); mask-image: linear-gradient(to bottom, transparent 25%, #000 85%); } .viewport-bottom-blur > span:nth-child(3) { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); -webkit-mask-image: linear-gradient(to bottom, transparent 55%, #000); mask-image: linear-gradient(to bottom, transparent 55%, #000); } @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .viewport-bottom-blur { background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.12)); } } .hero-section { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding-top: calc(5rem + 40px); padding-bottom: 3rem; overflow: hidden; } .hero-grid-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(circle at 50% 40%, black 20%, transparent 80%); -webkit-mask-image: radial-gradient(circle at 50% 40%, black 20%, transparent 80%); pointer-events: none; z-index: 0; } .hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 1.5rem; margin-top: auto; margin-bottom: auto; } .hero-meta-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .hero-roles { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .hero-role-item { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.1em; } .hero-role-dot { color: var(--accent-red); } .hero-title-wrap { position: relative; width: 100%; max-width: 100%; overflow-wrap: break-word; } .hero-title { font-size: var(--fs-hero); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; text-transform: uppercase; color: #ffffff; margin: 0; width: 100%; max-width: 100%; overflow-wrap: break-word; word-break: break-word; } .hero-title-accent { color: var(--accent-red); display: inline-block; position: relative; font-style: italic; font-family: var(--font-display); } .hero-description-wrap { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 3rem; align-items: flex-end; margin-top: 1rem; } .hero-subtitle { font-size: var(--fs-hero-sub); line-height: 1.35; color: var(--text-secondary); font-weight: 400; max-width: 32ch; } .hero-subtitle strong { color: #ffffff; font-weight: 600; } .hero-ctas { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; justify-content: flex-end; } .hero-budget-actions { display: inline-flex; align-items: stretch; gap: 0.6rem; max-width: 100%; } .hero-personalize-btn { padding: 0; width: 56px; min-width: 44px; min-height: 44px; flex-shrink: 0; color: #000; background: #fff; border: 1px solid #bbb; } .hero-personalize-btn svg { width: 20px; height: 20px; } .hero-personalize-btn:hover { background: #000; color: #fff; border-color: #000; } .hero-personalize-btn:focus-visible { outline: 3px solid var(--accent-red); outline-offset: 4px; } @media (max-width: 767px) { .hero-budget-actions .btn-primary { min-width: 0; white-space: normal; padding-inline: 1.25rem; } .hero-budget-actions .hero-personalize-btn { padding: 0; width: 48px; } } .hero-footer-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border-subtle); padding-top: 1.5rem; margin-top: 2rem; } .hero-scroll-indicator { display: flex; align-items: center; gap: 0.85rem; font-family: var(--font-mono); font-size: var(--fs-tag); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; } .scroll-line-anim { width: 30px; height: 1px; background: var(--text-muted); position: relative; overflow: hidden; } .scroll-line-anim::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--accent-red); animation: scroll-line-move 2s infinite ease-in-out; } @keyframes scroll-line-move { 0% { left: -100%; } 50% { left: 0%; } 100% { left: 100%; } } .hero-location { font-family: var(--font-mono); font-size: var(--fs-tag); color: var(--text-muted); letter-spacing: 0.08em; } .about-section { padding: var(--space-3xl) 0; position: relative; background: var(--bg-primary); } .about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 4rem; align-items: flex-start; } .about-portrait-card { position: sticky; top: 7rem; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem; } .portrait-frame { position: relative; width: 100%; aspect-ratio: 4/5; background: #111111; border-radius: var(--radius-xs); overflow: hidden; border: 1px solid var(--border-medium); } .portrait-frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(115%); transition: filter var(--transition-medium), transform var(--transition-slow); } .portrait-frame:hover img { filter: grayscale(0%) contrast(105%); transform: scale(1.03); } .portrait-badge { position: absolute; bottom: 1rem; left: 1rem; background: rgba(8, 8, 8, 0.85); backdrop-filter: blur(8px); padding: 0.4rem 0.8rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--fs-tag); color: #ffffff; } .about-text-content { display: flex; flex-direction: column; gap: 2.5rem; } .about-manifesto { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 600; line-height: 1.3; color: #ffffff; letter-spacing: -0.02em; } .about-manifesto .text-highlight { color: var(--accent-red); position: relative; } .about-paragraphs { display: flex; flex-direction: column; gap: 1.25rem; } .about-paragraphs p { font-size: var(--fs-body); line-height: 1.7; color: var(--text-secondary); } .about-key-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; border-top: 1px solid var(--border-subtle); padding-top: 2rem; margin-top: 1rem; } .stat-item { display: flex; flex-direction: column; gap: 0.25rem; } .stat-number { font-family: var(--font-display); font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 800; color: #ffffff; line-height: 1; } .stat-number span { color: var(--accent-red); } .stat-label { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .services-section { padding: var(--space-3xl) 0; background: var(--bg-secondary); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); position: relative; } .services-list { display: flex; flex-direction: column; border-top: 1px solid var(--border-medium); } .service-row { display: grid; grid-template-columns: 80px 1.2fr 1.5fr auto; align-items: center; gap: 2rem; padding: 2.5rem 1rem; border-bottom: 1px solid var(--border-subtle); transition: padding var(--transition-medium), border-color var(--transition-medium), background-color var(--transition-medium); position: relative; cursor: pointer; } .service-row-header { display: contents; } .service-row::before { content: ''; position: absolute; left: 0; top: 0; width: 0%; height: 100%; background: rgba(255, 30, 39, 0.04); transition: width 0.3s var(--ease-out-expo); z-index: 0; pointer-events: none; } .service-row:hover::before { width: 100%; } .service-row:hover { padding-left: 2rem; border-bottom-color: var(--border-accent); } .service-num { font-family: var(--font-mono); font-size: 1.1rem; color: var(--text-muted); transition: color var(--transition-fast); position: relative; z-index: 1; } .service-row:hover .service-num { color: var(--accent-red); } .service-title-wrap { position: relative; z-index: 1; } .service-title { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2.2rem); font-weight: 700; color: #ffffff; transition: color var(--transition-fast); } .service-row:hover .service-title { color: var(--accent-red); } .service-desc-wrap { position: relative; z-index: 1; } .service-desc { font-size: var(--fs-body-sm); color: var(--text-secondary); margin-bottom: 0.75rem; line-height: 1.5; } .service-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; } .service-tag { font-family: var(--font-mono); font-size: 0.7rem; padding: 0.2rem 0.6rem; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); color: var(--text-muted); } .service-action { position: relative; z-index: 1; } .service-circle-arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border-medium); display: flex; align-items: center; justify-content: center; color: #ffffff; transition: all var(--transition-medium); } .service-row:hover .service-circle-arrow { background-color: var(--accent-red); border-color: var(--accent-red); transform: rotate(45deg); } .cinematic-transition-wrapper { position: relative; width: 100%; height: 100svh; min-height: 0; overflow: hidden; background-color: #000000; display: flex; align-items: center; justify-content: center; z-index: 5; margin: 0; padding: 0; } .cinematic-portal-bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 100%; background: radial-gradient(circle at center, rgba(255, 30, 39, 0.4) 0%, rgba(8, 8, 8, 0.98) 70%); pointer-events: none; opacity: 0.6; will-change: transform, opacity; } .cinematic-tunnel-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(255, 30, 39, 0.25); border-radius: 50%; pointer-events: none; will-change: transform, opacity; } .cinematic-ring-1 { width: 320px; height: 320px; } .cinematic-ring-2 { width: 640px; height: 640px; border-color: rgba(255, 255, 255, 0.1); } .cinematic-ring-3 { width: 1000px; height: 1000px; border-color: rgba(255, 30, 39, 0.15); } .cinematic-content { position: relative; z-index: 2; text-align: center; max-width: 960px; padding: 0 var(--container-pad); display: flex; flex-direction: column; align-items: center; gap: 1.25rem; will-change: transform, opacity; } .cinematic-tag { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--accent-red); letter-spacing: 0.18em; text-transform: uppercase; } .cinematic-title { font-family: var(--font-display); font-size: clamp(2.2rem, 5.5vw + 0.5rem, 4.8rem); font-weight: 800; line-height: 0.96; letter-spacing: -0.03em; text-transform: uppercase; color: #ffffff; } .cinematic-title span { color: var(--accent-red); font-style: italic; } .cinematic-subtext { font-family: var(--font-body); font-size: clamp(0.95rem, 1.2vw, 1.15rem); color: var(--text-secondary); max-width: 48ch; line-height: 1.6; } .cinematic-scroll-cue { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; font-family: var(--font-mono); font-size: var(--fs-tag); color: var(--text-muted); letter-spacing: 0.12em; text-transform: uppercase; } .portfolio-pin-wrapper { position: relative; width: 100%; overflow: hidden; background-color: var(--bg-primary); margin: 0; padding: var(--space-2xl) 0; display: flex; flex-direction: column; justify-content: flex-start; } .portfolio-pin-wrapper.is-horizontal-pinned { display: block; padding: 0; overflow: visible; } .portfolio-sticky-panel { display: flex; flex-direction: column; width: 100%; } .is-horizontal-pinned .portfolio-sticky-panel { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; justify-content: space-between; padding: 5.5rem 0 2rem; overflow: hidden; background: #000; } .portfolio-header-container { padding: 0 var(--container-pad); max-width: var(--container-max); width: 100%; margin: 0 auto 1.5rem auto; display: flex; justify-content: space-between; align-items: flex-end; flex-shrink: 0; } .portfolio-horizontal-track { display: flex; gap: 2.5rem; padding: 0 var(--container-pad); width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--container-pad); overscroll-behavior-x: contain; align-items: center; } .portfolio-pin-wrapper.is-horizontal-pinned .portfolio-horizontal-track { width: max-content; overflow: visible; scroll-snap-type: none; will-change: transform; touch-action: pan-y; flex-shrink: 0; } .portfolio-pin-wrapper.is-horizontal-pinned .project-visual { max-height: 32svh; } .portfolio-more-container { width: 100%; max-width: var(--container-max); margin: 2rem auto 0; padding: 0 var(--container-pad); display: flex; justify-content: center; flex-shrink: 0; } .project-placeholder-visual { display: grid; place-items: center; border-style: dashed; } .project-placeholder-visual .mono-tag { color: var(--text-muted); } .portfolio-page-main { padding: 9rem 0 var(--space-3xl); } .portfolio-page-heading { margin-bottom: 3rem; } .portfolio-page-heading .section-title { margin: 1.25rem 0; } .portfolio-page-heading p { max-width: 50ch; } .portfolio-page-back { display: inline-flex; margin-bottom: 2rem; font-size: 0.95rem; color: var(--text-secondary); } .portfolio-page-back:hover { color: var(--accent-red); } .portfolio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 2.5rem; } .portfolio-grid .project-card { width: 100%; min-width: 0; } @media (max-width: 767px) { .portfolio-page-main { padding-top: 7rem; } .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .portfolio-header-container { flex-direction: column; align-items: flex-start; gap: 1.25rem; } } .project-card { width: clamp(340px, 45vw, 680px); flex-shrink: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: 1.5rem; position: relative; } .project-visual { width: 100%; aspect-ratio: 16/10; background: var(--bg-secondary); border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-subtle); position: relative; transition: border-color var(--transition-medium); } .project-card:hover .project-visual { border-color: var(--accent-red); } .project-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out-expo), filter 0.5s ease; } .project-card:hover .project-img { transform: scale(1.06); } .project-overlay-badge { position: absolute; top: 1.25rem; left: 1.25rem; z-index: 2; } .project-meta-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; } .project-name { font-family: var(--font-display); font-size: clamp(1.4rem, 2vw, 2rem); font-weight: 700; color: #ffffff; margin-bottom: 0.35rem; transition: color var(--transition-fast); } .project-card:hover .project-name { color: var(--accent-red); } .project-summary { font-size: var(--fs-body-sm); color: var(--text-secondary); line-height: 1.5; max-width: 48ch; } .project-link-btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--bg-tertiary); border: 1px solid var(--border-medium); color: #ffffff; flex-shrink: 0; transition: all var(--transition-fast); } .project-card:hover .project-link-btn { background: var(--accent-red); border-color: var(--accent-red); transform: scale(1.08); } .process-section { padding: var(--space-3xl) 0; background: var(--bg-primary); border-top: 1px solid var(--border-subtle); position: relative; } .process-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; position: relative; margin-top: 3rem; } .process-timeline::before { content: ''; position: absolute; top: 35px; left: 5%; width: 90%; height: 1px; background: var(--border-medium); z-index: 0; } .process-step-card { position: relative; z-index: 1; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 2rem 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; transition: translate var(--transition-medium), border-color var(--transition-medium), background-color var(--transition-medium), box-shadow var(--transition-medium); } .process-step-card:hover { border-color: var(--accent-red); translate: 0 -5px; background: var(--bg-tertiary); } .step-indicator-bubble { width: 42px; height: 42px; border-radius: 50%; background: var(--bg-primary); border: 1px solid var(--border-medium); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.9rem; font-weight: 700; color: #ffffff; transition: all var(--transition-fast); } .process-step-card:hover .step-indicator-bubble { background: var(--accent-red); border-color: var(--accent-red); box-shadow: 0 0 15px var(--accent-red-glow); } .step-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: #ffffff; } .step-desc { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; } .differentials-section { padding: var(--space-3xl) 0; background: var(--bg-secondary); border-top: 1px solid var(--border-subtle); } .differentials-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.5rem; } .diff-card { background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 2rem; min-width: 0; min-height: 300px; display: flex; flex-direction: column; gap: 0.85rem; position: relative; transition: translate 0.3s ease, border-color 0.3s ease; overflow: hidden; } .diff-card::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: var(--accent-red); transform: scaleX(0.14); transform-origin: left center; transition: transform 0.4s ease; } .diff-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; } .diff-number { font-family: var(--font-mono); font-size: 2rem; line-height: 1; letter-spacing: -0.06em; color: #b4b4b4; transition: color 0.3s ease; } .diff-icon { display: grid; place-items: center; width: 52px; height: 52px; flex-shrink: 0; border: 1px solid #ecd4d6; border-radius: 12px; background: #fff3f4; color: var(--accent-red); transition: background-color 0.3s ease, color 0.3s ease, rotate 0.3s ease; } .diff-icon svg { width: 25px; height: 25px; stroke-width: 1.75; } @media (hover: hover) and (pointer: fine) { .diff-card:hover { translate: 0 -6px; } .diff-card:hover::before { transform: scaleX(1); } .diff-card:hover .diff-number { color: var(--accent-red); } .diff-card:hover .diff-icon { background: var(--accent-red); color: #fff; rotate: -6deg; } } .diff-title { font-family: var(--font-display); font-size: clamp(1.2rem, 1.5vw, 1.45rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.025em; text-wrap: balance; color: #ffffff; } .diff-text { font-size: 0.925rem; color: var(--text-secondary); line-height: 1.6; max-width: 38ch; margin-bottom: 0.5rem; } .testimonials-section { padding: var(--space-3xl) 0; background: var(--bg-primary); border-top: 1px solid var(--border-subtle); } .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2.5rem; } .testi-card { background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 2.25rem 2rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1.75rem; transition: translate var(--transition-medium), border-color var(--transition-medium), background-color var(--transition-medium), box-shadow var(--transition-medium); } .testi-card:hover { border-color: var(--border-accent); translate: 0 -3px; } .testi-quote-mark { font-family: var(--font-display); font-size: 3rem; line-height: 1; color: var(--accent-red); } .testi-text { font-size: 1rem; line-height: 1.65; color: #e0e0e0; font-style: italic; } .testi-author-wrap { display: flex; align-items: center; gap: 1rem; border-top: 1px solid var(--border-subtle); padding-top: 1.25rem; } .testi-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-tertiary); border: 1px solid var(--border-medium); overflow: hidden; } .testi-avatar img { width: 100%; height: 100%; object-fit: cover; } .testi-name { font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; color: #ffffff; } .testi-role { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); } .cta-finale-section { position: relative; background-color: var(--bg-inverted); color: var(--text-inverted); padding: var(--space-3xl) 0; overflow: hidden; } .cta-grid-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px); background-size: 50px 50px; pointer-events: none; } .cta-content-box { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 2.5rem; } .cta-badge-inverted { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: var(--fs-tag); font-weight: 700; color: var(--accent-red); letter-spacing: 0.12em; text-transform: uppercase; } .cta-headline { font-size: clamp(2.5rem, 6vw + 0.5rem, 5.5rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; color: var(--text-inverted); text-transform: uppercase; max-width: 15ch; } .cta-headline span { color: var(--accent-red); } .cta-subtext { font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--text-inverted-muted); max-width: 42ch; line-height: 1.45; } .cta-actions-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 1rem; } .btn-cta-primary { background-color: var(--accent-red); color: #ffffff; border: 1px solid var(--accent-red); padding: 1.2rem 2.5rem; font-size: 1rem; } .btn-cta-primary:hover { background-color: #080808; border-color: #080808; color: #ffffff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); } .btn-cta-copy-email { background-color: transparent; color: #080808; border: 1px solid rgba(0, 0, 0, 0.2); padding: 1.2rem 2rem; font-size: 1rem; } .btn-cta-copy-email:hover { border-color: var(--accent-red); color: var(--accent-red); background: rgba(255, 30, 39, 0.05); } .cta-social-links { display: flex; align-items: center; gap: 2rem; padding-top: 2rem; border-top: 1px solid var(--border-inverted); margin-top: 2rem; flex-wrap: wrap; } .cta-social-item { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; color: #080808; display: flex; align-items: center; gap: 0.4rem; transition: color var(--transition-fast); } .cta-social-item:hover { color: var(--accent-red); } .site-footer { background: var(--bg-primary); color: #ffffff; padding: 4rem 0 2.5rem 0; border-top: 1px solid var(--border-subtle); } .footer-top-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3.5rem; } .footer-brand-title { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.75rem; } .footer-brand-desc { font-size: 0.9rem; color: var(--text-muted); max-width: 32ch; line-height: 1.6; } .footer-col-title { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent-red); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1.25rem; } .footer-links-list { display: flex; flex-direction: column; gap: 0.75rem; } .footer-links-list a { font-size: 0.9rem; color: var(--text-secondary); transition: color var(--transition-fast); } .footer-links-list a:hover { color: #ffffff; } .footer-bottom-bar { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border-subtle); padding-top: 2rem; flex-wrap: wrap; gap: 1.5rem; } .footer-copyright { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); } .footer-back-to-top { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-secondary); transition: color var(--transition-fast); cursor: pointer; } .footer-back-to-top:hover { color: var(--accent-red); } .hero-section { background: #ffffff; z-index: 2; } .hero-section .hero-title { color: #000000; } .hero-section .hero-subtitle, .hero-section .hero-role-item { color: #444444; } .hero-section .hero-subtitle strong { color: #000000; } .hero-section .status-pill { background: #f5f5f5; border-color: #dedede; color: #333333; } .hero-section .hero-footer-bar, .hero-section .hero-location, .hero-section .hero-scroll-indicator { color: #555555; border-color: #dedede; } .hero-section .hero-grid-bg { background-image: linear-gradient(to right, rgba(0,0,0,0.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.035) 1px, transparent 1px); } .hero-section .btn-secondary { color: #000000; border-color: #bbbbbb; } .hero-section .btn-secondary:hover { color: #ffffff; background: #000000; border-color: #000000; } .header-nav.is-on-light .nav-brand { color: #000000; } .differentials-section { background: #000000; position: relative; z-index: 2; border-color: #222222; } .differentials-section .diff-card { background: #ffffff; border-color: #dddddd; } .differentials-section .diff-title { color: #000000; } .differentials-section .diff-text { color: #444444; } .differentials-section .diff-card:hover { border-color: var(--accent-red); } #servicos .services-list { border-top: 0; gap: 1rem; } #servicos .service-row { background: #ffffff; border: 1px solid #dddddd; border-radius: 12px; } #servicos .service-row-header { display: flex; align-items: center; gap: 1rem; } #servicos .service-num { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; background: #fff0f1; color: var(--accent-red); border: 1px solid #f0d1d3; border-radius: 8px; font-size: 0.875rem; } #servicos .service-title-wrap { min-width: 0; } #servicos .service-title { color: #000000; font-size: clamp(1.1rem, 1.8vw, 1.65rem); line-height: 1.2; } #servicos .service-row:hover .service-title { color: var(--accent-red); } #servicos .service-desc { color: #454545; font-size: 0.9375rem; line-height: 1.55; } #servicos .service-tag { color: #555555; background: #f3f3f3; border-color: #e2e2e2; font-family: var(--font-body); font-size: 0.75rem; padding: 0.3rem 0.65rem; } #servicos .service-action { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; } #servicos .service-action-label { font-size: 0.875rem; font-weight: 600; color: #333333; } #servicos .service-circle-arrow { background: #000000; border-color: #000000; color: #ffffff; flex-shrink: 0; } #servicos .service-row:hover .service-circle-arrow { background: var(--accent-red); border-color: var(--accent-red); } @media (min-width: 768px) { #servicos .service-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.4fr) auto; padding: 1.75rem 1.5rem; gap: 1.75rem; } #servicos .service-action-label { display: none; } } @media (min-width: 768px) and (max-width: 1023px) { #servicos .service-row { grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; } #servicos .service-desc-wrap { grid-column: 1; grid-row: 2; } #servicos .service-action { grid-column: 2; grid-row: 1 / 3; } } @media (max-width: 767px) { #servicos .service-row { box-shadow: 0 -6px 20px rgba(0,0,0,0.2); } #servicos .service-row-header { width: 100%; gap: 0.75rem; height: 44px; border-bottom-color: #e6e6e6; } #servicos .service-num { width: 34px; height: 34px; } #servicos .service-title { font-size: 1.05rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.15; } #servicos .service-desc-wrap { width: 100%; gap: 0.6rem; } #servicos .service-desc { font-size: 0.875rem; } #servicos .service-tags { gap: 0.4rem; } #servicos .service-tag { font-size: 0.75rem; padding: 0.2rem 0.5rem; } #servicos .service-action { width: 100%; justify-content: space-between; } } .portfolio-filter-bar { margin-bottom: 2rem; } .portfolio-filters { display: flex; flex-wrap: wrap; gap: 0.65rem; } .portfolio-filter { display: inline-flex; align-items: center; gap: 0.65rem; padding: 0.7rem 1rem; min-height: 44px; border: 1px solid #303030; border-radius: 100px; background: #000; color: #ccc; font: 500 0.875rem var(--font-body); cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; } .portfolio-filter:hover { color: #fff; border-color: #777; } .portfolio-filter[aria-pressed="true"] { color: #000; background: #fff; border-color: #fff; } .portfolio-filter-count { font-size: 0.75rem; opacity: 0.65; } .portfolio-filter:focus-visible, .project-link-btn:focus-visible { outline: 2px solid var(--accent-red); outline-offset: 4px; } .portfolio-results { margin-top: 1.25rem; color: #999; font-family: var(--font-mono); font-size: 0.8125rem; } .portfolio-grid { align-items: start; gap: 1.75rem; } .portfolio-grid .project-card { background: #0c0c0c; border: 1px solid #292929; border-radius: 12px; overflow: hidden; gap: 0; transition: border-color 0.25s; } .portfolio-grid .project-card:hover { border-color: #666; } .project-site-preview { display: flex; flex-direction: column; aspect-ratio: auto; } .project-browser-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.85rem; min-height: 34px; flex-shrink: 0; background: #151515; color: #999; border-bottom: 1px solid #292929; font-family: var(--font-mono); font-size: 0.75rem; } .project-browser-bar svg { width: 14px; height: 14px; flex-shrink: 0; } .project-browser-bar span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .project-preview-surface { position: relative; aspect-ratio: 16/10; width: 100%; min-height: 0; overflow: hidden; background: #111; } .project-preview-surface .project-img { display: block; object-position: top center; opacity: 0; } .project-preview-surface .project-img[hidden] { display: none; } .project-site-preview.has-preview .project-img { opacity: 1; } .project-preview-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; padding: 0.75rem; color: #888; text-align: center; font-size: 0.875rem; } .project-preview-placeholder svg { width: 32px; height: 32px; color: #555; } .project-site-preview.has-preview .project-preview-placeholder { display: none; } .project-details { min-width: 0; } .project-category { display: block; margin-bottom: 0.65rem; font-size: 0.75rem; color: #aaa; line-height: 1.5; } .portfolio-grid .project-visual { border: 0; border-radius: 0; border-bottom: 1px solid #292929; } .portfolio-grid .project-meta-bottom { padding: 1.35rem; } .portfolio-grid .project-name { font-size: clamp(1.15rem, 2vw, 1.65rem); line-height: 1.2; margin-bottom: 0.65rem; overflow-wrap: anywhere; } .portfolio-grid .project-summary { font-size: 0.9375rem; line-height: 1.6; } .portfolio-grid .project-link-btn { width: 44px; height: 44px; border-radius: 8px; background: #181818; } .project-link-btn svg { width: 19px; height: 19px; } .portfolio-empty { grid-column: 1 / -1; padding: 4rem 1.5rem; text-align: center; border: 1px solid #292929; border-radius: 12px; } .portfolio-empty svg { width: 32px; height: 32px; color: var(--accent-red); margin-bottom: 1rem; } .portfolio-empty h2 { font-size: 1.25rem; margin-bottom: 0.5rem; } .portfolio-empty p { color: #999; } @media (max-width: 767px) { .portfolio-page-heading { margin-bottom: 2rem; } .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .portfolio-grid .project-card { width: 100%; border-radius: 8px; } .portfolio-grid .project-browser-bar { min-height: 28px; padding: 0.4rem 0.55rem; font-size: 0.75rem; } .portfolio-grid .project-preview-placeholder { gap: 0.4rem; font-size: 0.75rem; } .portfolio-grid .project-preview-placeholder svg { width: 24px; height: 24px; } .portfolio-grid .project-meta-bottom { flex-direction: column; padding: 0.8rem; gap: 0.9rem; } .portfolio-grid .project-category { margin-bottom: 0.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .portfolio-grid .project-name { font-size: 1rem; margin-bottom: 0.5rem; } .portfolio-grid .project-summary { font-size: 0.875rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .portfolio-grid .project-link-btn { align-self: flex-end; } .portfolio-filters { gap: 0.5rem; } .portfolio-filter { padding: 0.6rem 0.8rem; } } @media (max-height: 600px) { .is-horizontal-pinned .portfolio-sticky-panel { padding: 1.25rem 0; gap: 1rem; } .is-horizontal-pinned .portfolio-header-container { flex-direction: row; margin-bottom: 0; gap: 1rem; } .is-horizontal-pinned .portfolio-header-container .hero-subtitle { display: none; } .is-horizontal-pinned .portfolio-header-container .section-title { font-size: 1.5rem; margin-top: 0.75rem; } .is-horizontal-pinned .portfolio-horizontal-track { gap: 1.25rem; align-items: flex-start; } .is-horizontal-pinned .project-card { gap: 0.75rem; } .is-horizontal-pinned .project-name { font-size: 1.125rem; } .is-horizontal-pinned .project-summary { font-size: 0.875rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .is-horizontal-pinned .portfolio-more-container { margin-top: 0; } .is-horizontal-pinned .portfolio-more-container .btn { padding-block: 0.7rem; } } .preview-offer-section { background: #fff; color: #000; padding: var(--space-3xl) 0; overflow: hidden; border-bottom: 1px solid #ddd; } .preview-offer-layout { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); } .preview-offer-section .section-line { background: #ddd; } .preview-offer-section .mono-tag { color: #555; } .preview-offer-title { color: #000; font-family: var(--font-display); font-size: clamp(2.25rem, 4.5vw, 4.75rem); line-height: 1.02; letter-spacing: -0.055em; margin: 1.5rem 0; } .preview-offer-title em { color: var(--accent-red); } .preview-offer-intro { color: #555; line-height: 1.7; max-width: 46ch; font-size: 1.05rem; } .preview-price { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #ddd; } .preview-price > span { display: block; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: #555; } .preview-price strong { display: block; font-family: var(--font-display); font-size: clamp(2rem, 3.5vw, 3.5rem); line-height: 1.2; letter-spacing: -0.04em; margin: 0.6rem 0; } .preview-price small { font-size: 0.5em; font-weight: 500; color: #777; } .preview-price p, .preview-payment-note { font-size: 0.8rem; color: #666; line-height: 1.65; max-width: 52ch; } .preview-credit { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 0; margin: 0.5rem 0 0.75rem; } .preview-credit svg { flex-shrink: 0; width: 25px; height: 25px; color: var(--accent-red); } .preview-credit p { color: #444; font-size: 0.9rem; line-height: 1.6; max-width: 45ch; } .preview-credit strong { color: #000; } .preview-request-btn { background: #000; color: #fff; border: 1px solid #000; max-width: 100%; white-space: normal; text-align: left; } .preview-request-btn:hover { background: var(--accent-red); border-color: var(--accent-red); } .preview-request-btn svg { flex-shrink: 0; } .preview-payment-note { margin-top: 0.85rem; } .preview-playground { min-width: 0; } .preview-playground-label { font-family: var(--font-mono); color: #666; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; } .preview-service-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 1.25rem; } .preview-service-tabs button { padding: 0.75rem; border: 1px solid #ddd; border-radius: 8px; background: #fff; color: #555; font-size: 0.8rem; min-height: 44px; transition: background-color 0.2s, color 0.2s, border-color 0.2s; } .preview-service-tabs button[aria-pressed="true"] { background: #000; border-color: #000; color: #fff; } .preview-service-tabs button:focus-visible, .preview-request-btn:focus-visible { outline: 3px solid var(--accent-red); outline-offset: 4px; } .preview-demo { background: #000; border: 1px solid #000; border-radius: 14px; overflow: hidden; color: #fff; } .preview-demo-browser { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; border-bottom: 1px solid #333; padding: 0.9rem 1.15rem; font-family: var(--font-mono); font-size: 0.65rem; color: #aaa; } .preview-demo-browser svg { width: 12px; height: 12px; } .preview-demo-dots { color: #777; font-size: 0.55rem; letter-spacing: 0.15em; white-space: nowrap; } .preview-demo-canvas { padding: clamp(1.25rem, 2.5vw, 2rem); } .preview-demo-nav { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 2.5rem; } .preview-demo-nav strong { font-family: var(--font-display); font-size: 1.1rem; } .preview-demo-nav strong span { color: var(--accent-red); } .preview-demo-nav > span { font-family: var(--font-mono); font-size: 0.55rem; color: #888; } .preview-demo-heading > span:first-child { font-family: var(--font-mono); letter-spacing: 0.12em; font-size: 0.5rem; color: #aaa; } .preview-demo-heading > strong { display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 2.5vw, 2.5rem); line-height: 1.1; letter-spacing: -0.045em; margin: 0.75rem 0; white-space: pre-line; } .preview-demo-lines { display: grid; gap: 0.4rem; margin: 1rem 0; } .preview-demo-lines span { height: 4px; background: #333; border-radius: 3px; width: 80%; } .preview-demo-lines span:last-child { width: 55%; } .preview-demo-action { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--accent-red); color: #fff; padding: 0.65rem 0.85rem; font-size: 0.65rem; border-radius: 5px; } .preview-demo-action svg { width: 13px; height: 13px; } .preview-demo-modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; margin-top: 2rem; } .preview-demo-modules > span { display: grid; place-items: center; height: 65px; border: 1px solid #333; border-radius: 6px; color: #777; background: #111; transition: height 0.35s, background-color 0.35s; } .preview-demo-modules svg { width: 20px; height: 20px; } .preview-demo[data-kind="store"] .preview-demo-modules > span { height: 100px; background: #fff; color: #777; } .preview-demo[data-kind="system"] .preview-demo-modules > span:nth-child(2) { height: 100px; border-color: var(--accent-red); color: var(--accent-red); } .preview-demo[data-kind="other"] .preview-demo-modules > span { border-style: dashed; } .preview-demo-footer { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; justify-content: space-between; background: #f5f5f5; color: #666; padding: 0.85rem 1.15rem; font-size: 0.65rem; line-height: 1.5; } .preview-demo-footer strong { color: #000; font-weight: 500; } .preview-demo-caption { font-size: 0.8rem; color: #666; margin-top: 1rem; line-height: 1.6; min-height: 3.2em; } .preview-journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; list-style: none; padding: 0; margin: 4rem 0 0; } .preview-step { border-top: 1px solid #ccc; padding-top: 1.25rem; min-width: 0; } .preview-step-number { display: block; font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent-red); margin-bottom: 1rem; } .preview-step h3 { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.25; margin-bottom: 0.5rem; } .preview-step p { color: #666; font-size: 0.85rem; line-height: 1.6; } @media (max-width: 1024px) { .preview-offer-layout { gap: 2rem; } .preview-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .preview-offer-section { padding: 4rem 0; } .preview-offer-layout { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } .preview-offer-title { font-size: clamp(2.25rem, 9vw, 3.5rem); } .preview-offer-intro { font-size: 0.95rem; } .preview-request-btn { width: 100%; justify-content: space-between; font-size: 0.85rem; padding: 1rem; } .preview-journey { margin-top: 2.5rem; gap: 1.5rem 1rem; } .preview-step h3 { font-size: 1rem; } .preview-step p { font-size: 0.8rem; } } .partnership-page { background: #fff; color: #000; min-height: 100svh; padding: 9rem 0 5rem; } .partnership-layout { display: grid; grid-template-columns: 1fr 1.05fr; align-items: start; gap: clamp(2rem, 5vw, 5rem); } .partnership-intro { min-width: 0; } .partnership-eyebrow { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.08em; color: #666; } .partnership-intro h1 { color: #000; font-size: clamp(2.75rem, 5vw, 5rem); line-height: 1.04; letter-spacing: -0.05em; margin: 1.5rem 0; } .partnership-intro h1 em { color: var(--accent-red); } .partnership-lead { color: #555; font-size: 1rem; line-height: 1.75; max-width: 45ch; } .partnership-types { display: grid; gap: 0.75rem; margin-top: 2rem; } .partnership-type { display: flex; align-items: flex-start; gap: 1rem; padding: 1.2rem; border: 1px solid #ddd; border-radius: 12px; background: #fff; color: #000; text-align: left; transition: border-color 0.25s, background-color 0.25s; } .partnership-type > span { font-family: var(--font-mono); color: var(--accent-red); font-size: 0.8rem; padding-top: 0.25rem; } .partnership-type strong { display: block; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.3; margin-bottom: 0.4rem; } .partnership-type p { font-size: 0.9rem; line-height: 1.6; color: #666; } .partnership-type[aria-pressed="true"] { background: #000; border-color: #000; color: #fff; } .partnership-type[aria-pressed="true"] p { color: #bbb; } .partnership-type:focus-visible { outline: 3px solid var(--accent-red); outline-offset: 3px; } .partnership-alignment { color: #666; font-size: 0.9rem; line-height: 1.65; margin-top: 1.5rem; } .partnership-form { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; padding: clamp(1.25rem, 3vw, 2.5rem); border-radius: 16px; background: #000; } .partnership-form > .partnership-eyebrow { color: #aaa; } .partnership-form h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); color: #fff; line-height: 1.2; margin-bottom: 0.5rem; } .partnership-form .form-group { margin: 0; } .partnership-form .form-label { font-size: 0.9rem; line-height: 1.5; } .partnership-form .form-input, .partnership-form .form-textarea { width: 100%; font-size: 1rem; } .partnership-message { border-top: 1px solid #333; border-bottom: 1px solid #333; padding: 1rem 0; } .partnership-message summary { color: #ddd; cursor: pointer; font-size: 0.9rem; min-height: 24px; } .partnership-message pre { font-family: var(--font-body); font-size: 0.9rem; color: #bbb; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; margin-top: 1rem; } .partnership-send { background: #fff; color: #000; border: 1px solid #fff; min-height: 50px; white-space: normal; } .partnership-send:hover { background: var(--accent-red); color: #fff; border-color: var(--accent-red); } .partnership-send-note { font-size: 0.875rem; color: #aaa; text-align: center; line-height: 1.6; } .nav-link[aria-current="page"] { color: var(--accent-red); } @media (max-width: 767px) { .partnership-page { padding: 7rem 0 4rem; } .partnership-layout { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } .partnership-intro h1 { font-size: clamp(2.75rem, 10vw, 4rem); } .partnership-type { padding: 1rem; } } @media (max-width: 1024px) { .nav-glass-bar { display: none !important; } .mobile-menu-btn { display: flex !important; cursor: pointer; z-index: 100; } .hero-description-wrap { grid-template-columns: 1fr; gap: 2rem; } .hero-ctas { justify-content: flex-start; } .about-grid { grid-template-columns: 1fr; gap: 3rem; } .about-portrait-card { position: relative; top: 0; max-width: 420px; } .service-row { grid-template-columns: 50px 1fr auto; gap: 1.5rem; padding: 2rem 0.5rem; } .service-desc-wrap { grid-column: 2 / -1; margin-top: 0.5rem; } .differentials-grid { grid-template-columns: repeat(2, 1fr); } .process-timeline { grid-template-columns: 1fr; gap: 1.5rem; } .process-timeline::before { display: none; } .testimonials-grid { grid-template-columns: 1fr; } .footer-top-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } } @media (max-width: 767px) { :root { --container-pad: 1.25rem; --space-3xl: 6rem; --space-2xl: 4.5rem; } .header-nav { top: 1rem; } .nav-brand { font-size: 1.1rem; } .nav-actions { gap: 0.5rem; } .nav-actions .btn-primary { display: none !important; } .mobile-menu-btn { display: flex !important; width: 40px; height: 40px; cursor: pointer; flex-shrink: 0; z-index: 100; } .custom-cursor, .custom-cursor-follower { display: none !important; } body { cursor: auto !important; } .hero-section { padding-top: 6.5rem; min-height: 100vh; min-height: 100svh; } .hero-title { font-size: clamp(1.4rem, 6.2vw, 2.2rem); line-height: 1.12; letter-spacing: -0.015em; overflow-wrap: break-word; word-break: break-word; } @media (max-width: 480px) { .hero-title br { display: inline; } } .about-key-stats { grid-template-columns: 1fr; gap: 1.25rem; } .services-section { padding: 2.5rem 0 2rem 0; min-height: 100vh; min-height: 100svh; position: relative; overflow: hidden; } .services-section .section-header { margin-bottom: 1.25rem; } .services-list { position: relative; width: 100%; height: auto; gap: 1rem; border-top: none; } .service-row { position: relative; width: 100%; display: flex; flex-direction: column; gap: 0.85rem; padding: 1.25rem; background: #111111; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-sm); box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.85); overflow: hidden; } .is-stacked-services .service-row { position: absolute; top: 0; left: 0; will-change: transform; } .service-row::before { display: none; } .service-row:hover { padding-left: 1.25rem; } .service-row-header { display: flex; align-items: center; gap: 0.75rem; height: 44px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 0.4rem; flex-shrink: 0; } .service-row .service-num { font-size: 0.95rem; font-weight: 700; color: var(--accent-red); } .service-row .service-title { font-size: clamp(1rem, 3.8vw, 1.2rem); font-weight: 700; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .service-row .service-desc-wrap { display: flex; flex-direction: column; gap: 0.75rem; } .service-row .service-desc { font-size: 0.85rem; line-height: 1.5; color: var(--text-secondary); margin-bottom: 0; } .service-row .service-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; } .service-row .service-tag { font-size: 0.68rem; padding: 0.2rem 0.55rem; } .service-row .service-action { display: flex; justify-content: flex-end; margin-top: 0.25rem; } .service-row .service-circle-arrow { width: 38px; height: 38px; } .differentials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .differentials-grid .diff-card:nth-child(n + 5) { display: none; } .differentials-grid .diff-card { padding: 1.25rem 1rem; min-height: 0; min-width: 0; gap: 0.75rem; } .differentials-grid .diff-card-meta { margin-bottom: 0.35rem; } .differentials-grid .diff-icon { width: 38px; height: 38px; border-radius: 9px; } .differentials-grid .diff-icon svg { width: 21px; height: 21px; } .differentials-grid .diff-number { font-size: 1.25rem; } .differentials-grid .diff-title { font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; } .differentials-grid .diff-text { font-size: 0.875rem; line-height: 1.55; overflow-wrap: anywhere; } .portfolio-pin-wrapper:not(.is-horizontal-pinned) { overflow: hidden; } .portfolio-horizontal-track { padding-left: var(--container-pad); padding-right: var(--container-pad); display: flex; overflow-x: auto; scroll-snap-type: x mandatory; width: 100%; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } .portfolio-horizontal-track::-webkit-scrollbar { display: none; } .project-card { width: 82vw; scroll-snap-align: center; } .cinematic-transition-wrapper { height: 100vh; height: 100svh; min-height: 0; } .cinematic-title { font-size: clamp(1.8rem, 8vw, 2.75rem); } .cinematic-ring-1 { width: 220px; height: 220px; } .cinematic-ring-2 { width: 420px; height: 420px; } .cinematic-ring-3 { width: 620px; height: 620px; } .cta-actions-row { flex-direction: column; align-items: stretch; } .btn-cta-primary, .btn-cta-copy-email { width: 100%; text-align: center; } .footer-top-grid { grid-template-columns: 1fr; gap: 2rem; } .footer-bottom-bar { flex-direction: column; align-items: flex-start; } } @media (max-width: 390px) { :root { --container-pad: 1rem; } .hero-title { font-size: clamp(1.2rem, 5.5vw, 1.55rem); line-height: 1.15; } .btn { padding: 0.85rem 1.4rem; font-size: 0.75rem; } .project-card { width: 88vw; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .custom-cursor, .custom-cursor-follower { display: none !important; } .marquee-track { animation: none !important; } .diff-card:hover { translate: none; } .diff-card:hover .diff-icon { rotate: none; } } @media (hover: none), (pointer: coarse) { .custom-cursor, .custom-cursor-follower { display: none !important; } } #contato .cta-content-box { min-width: 0; } #contato .cta-headline { max-width: 100%; overflow-wrap: anywhere; text-wrap: balance; } #contato .cta-actions-row .btn { max-width: 100%; min-width: 0; white-space: normal; } #contato .cta-actions-row .btn-icon { flex-shrink: 0; } @media (max-width: 767px) { #contato { padding-block: clamp(3rem, 10vw, 5rem); } #contato .cta-content-box { gap: 1.75rem; } #contato .cta-headline { font-size: clamp(1.65rem, 6.5vw, 3rem); line-height: 1.1; letter-spacing: -0.025em; } #contato .cta-subtext { font-size: 1rem; line-height: 1.6; } #contato .cta-badge-inverted { line-height: 1.5; } #contato .cta-actions-row { width: 100%; gap: 0.75rem; } #contato .cta-actions-row .btn { width: 100%; padding: 1rem; font-size: 0.875rem; line-height: 1.4; } }