@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/raleway-latin-400.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: 'Raleway'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/raleway-latinext-400.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: 'Raleway'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/raleway-latin-700.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: 'Raleway'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/raleway-latinext-700.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: 'Raleway'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/raleway-latin-900.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: 'Raleway'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/raleway-latinext-900.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: 'DM Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/dmsans-latin-300.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: 'DM Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/dmsans-latinext-300.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: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/dmsans-latin-400.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: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/dmsans-latinext-400.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: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/dmsans-latin-500.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: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/dmsans-latinext-500.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: 'Raleway Fallback'; src: local('Arial'); ascent-override: 73.3%; descent-override: 18.25%; line-gap-override: 0%; size-adjust: 128.23%; } @font-face { font-family: 'DM Sans Fallback'; src: local('Arial'); ascent-override: 79.19%; descent-override: 24.75%; line-gap-override: 0%; size-adjust: 125.28%; } :root { --color-primary: #cbff00; --color-dark: #111111; --color-light: #f5f5f0; } * { margin: 0; padding: 0; box-sizing: border-box; } html { overflow-x: hidden; } body { font-family: "DM Sans", "DM Sans Fallback", sans-serif; background: var(--color-dark); color: var(--color-light); line-height: 1.6; overflow-x: hidden; } .container { max-width: 1400px; margin: 0 auto; padding: 0 40px; } header { position: fixed; top: 0; width: 100%; background: var(--color-dark); z-index: 1000; padding: 0; height: 72px; overflow: visible; } header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(203, 255, 0, 0.1); pointer-events: none; } .header-content { max-width: 1400px; margin: 0 auto; padding: 0 40px; display: flex; justify-content: space-between; align-items: center; height: 100%; } .logo { text-decoration: none; display: flex; align-items: center; } .logo-img { height: 96px; width: auto; } nav { display: flex; margin-right: auto; margin-left: 40px; } nav a { color: var(--color-light); text-decoration: none; margin: 0 24px; font-size: 13px; } nav a:hover { color: var(--color-primary); } nav a.active { color: var(--color-primary); font-weight: 400; font-size: 13px; } .btn-cta { display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary); color: var(--color-dark); padding: 0.4rem 20px; font-size: 0.9rem; border-radius: 4px; font-weight: 600; border: none; cursor: pointer; text-decoration: none; transition: opacity .15s, transform .1s; } .btn-cta:hover { opacity: .85; transform: translateY(-1px); } .btn-cta:active { transform: translateY(0); } .burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; position: relative; z-index: 1001; } .burger__line { width: 24px; height: 2px; background: var(--color-light); border-radius: 2px; transition: all 0.3s; } main { margin-top: 80px; } .fizz-glow-wrap { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .fizz-glow { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(203, 255, 0, 0.16) 0%, rgba(203, 255, 0, 0) 70%); } .fizz-glow--1 { width: 700px; height: 700px; top: -220px; right: -220px; } .fizz-glow--2 { width: 550px; height: 550px; bottom: -220px; left: -200px; opacity: .7; } main, footer { position: relative; z-index: 1; } .hm-section-title { font-family: "Raleway", "Raleway Fallback", sans-serif; font-weight: 900; font-size: clamp(1.95rem, 3.4vw, 2.9rem); line-height: 1.12; color: var(--color-light); margin-bottom: 0.75rem; } .hm-section-title em { font-style: italic; color: var(--color-primary); } .hm-accent { color: var(--color-primary); } .hm-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: "DM Sans", "DM Sans Fallback", sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 0.75rem; } footer { background: #0a0a0a; border-top: 1px solid #333; padding: 40px; margin-top: 60px; } .footer-content { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 40px; } .footer-section h2 { color: var(--color-primary); font-size: 13px; font-weight: 600; margin-bottom: 12px; } .footer-section a { color: #888; text-decoration: none; font-size: 12px; display: block; margin-bottom: 8px; } .footer-section a:hover { color: var(--color-primary); } .footer-linkedin { display: flex; align-items: center; gap: 6px; } .footer-linkedin img { border-radius: 3px; } .footer-bottom { border-top: 1px solid #333; padding-top: 24px; text-align: center; color: #888; font-size: 11px; } .fizz-animate { opacity: 1; transform: none; } @media (max-width: 960px) { .fizz-glow--1, .fizz-glow--2 { width: 350px; height: 350px; } header { overflow: visible; } .header-content { padding: 0 20px; width: 100%; } .logo { margin-right: auto; } .header-content .burger { display: flex; } nav { display: none; position: fixed; top: 72px; left: 0; right: 0; width: 100%; background: #1a1a1a; flex-direction: column; padding: 1.5rem 2rem; gap: 1rem; border-bottom: 1px solid rgba(203, 255, 0, 0.1); z-index: 999; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); margin: 0; } nav.open { display: flex; } nav a { font-size: 13px; margin: 0; } .btn-cta { display: none; } .hero h1 { font-size: 32px; } .services h2, .portfolio h2, .process h2 { font-size: 32px; } .hero-ctas { flex-direction: column; } .hm-section-title { font-size: clamp(1.55rem, 4.8vw, 2.3rem); } .hm-eyebrow { font-size: 0.75rem; } }