:root{ color-scheme: dark; --color-bg: #02050b; --color-bg-deep: #01040a; --color-panel: rgba(2, 13, 27, .84); --color-panel-strong: rgba(5, 18, 36, .92); --color-panel-glass: rgba(6, 18, 38, .64); --color-text: #f3f8ff; --color-muted: #94a9bf; --color-soft: #d7dce7; --color-blue: #0099ff; --color-cyan: #00e7ff; --color-orange: #ff8b1f; --color-gold: #ffd66b; --color-purple: #ba63ff; --bg: var(--color-bg); --panel: var(--color-panel); --panel-strong: var(--color-panel-strong); --text: var(--color-text); --muted: var(--color-muted); --blue: var(--color-blue); --cyan: var(--color-cyan); --orange: var(--color-orange); --gold: var(--color-gold); --purple: var(--color-purple); --line-blue: rgba(0, 178, 255, .35); --line-orange: rgba(255, 139, 31, .42); --gradient-brand: linear-gradient(100deg, #6490ff 0%, #315dff 38%, #ff9c28 72%, #ffd36c 100%); --gradient-brand-inner: linear-gradient(108deg, #3158dd 0%, #304dc5 42%, #a85d25 67%, #f1982d 100%); --gradient-premium: linear-gradient(102deg, #9bc7ff 0%, #466eff 13%, #3c49aa 39%, #5b3423 64%, #c66f25 84%, #ffd76c 100%); --gradient-premium-inner: linear-gradient(100deg, #3859eb 0%, #3149c5 34%, #262433 56%, #673b1f 76%, #b46325 100%); --gradient-card-edge: linear-gradient(105deg, #9dbdff 0%, #6f86ea 54%, #d7aa78 100%); --gradient-panel: linear-gradient(145deg, rgba(4, 12, 31, .82), rgba(2, 6, 18, .94)); --gradient-text: linear-gradient(90deg, var(--color-cyan), var(--color-blue), var(--color-orange)); --shadow-cyan: 0 0 20px rgba(0, 217, 255, .38); --shadow-blue: 0 0 24px rgba(62, 128, 255, .22); --shadow-orange: 0 0 22px rgba(255, 139, 31, .24); --shadow-panel: 0 18px 44px rgba(0, 0, 0, .34); --shadow-button: drop-shadow(0 0 8px rgba(74, 122, 255, .9)) drop-shadow(0 0 13px rgba(255, 139, 31, .8)) } :root{ --font-heading: "Orbitron", "Space Grotesk", system-ui, sans-serif; --font-display: var(--font-heading); --font-body: "Inter", "Space Grotesk", system-ui, sans-serif; --font-ui: "Space Grotesk", "Inter", system-ui, sans-serif } :root{ --fs-xs: clamp(.7rem, .67rem+.1vw, .78rem); --fs-sm: clamp(.8rem, .77rem+.14vw, .9rem); --fs-md: clamp(.92rem, .88rem+.18vw, 1.02rem); --fs-lg: clamp(1.05rem, .98rem+.3vw, 1.2rem); --fs-xl: clamp(1.28rem, 1.12rem+.56vw, 1.56rem); --fs-2xl: clamp(2.25rem, 1.75rem+2vw, 3.9rem); --fs-3xl: clamp(2.8rem, 2rem+3.2vw, 5.1rem); --line-height-tight: 1.04; --line-height-heading: 1.12; --line-height-body: 1.58; --letter-spacing-tight: .01em; --letter-spacing-heading: .045em; --letter-spacing-ui: .08em; --section-kicker-size: 16px; --section-title-size: clamp(42px, 3.7vw, 54px); --section-subtitle-size: 18px; --section-title-line-height: 1.06; --section-subtitle-line-height: 1.45 } :root{ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --section-gap: clamp(64px, 8vw, 112px); --section-pad-x: clamp(16px, 4vw, 64px); --page-gutter: clamp(18px, 2.5vw, 64px); --page-max-width: 1840px; --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px; --ease-standard: cubic-bezier(.2, .8, .2, 1); --transition-fast: 160ms var(--ease-standard); --transition: 260ms var(--ease-standard); --transition-slow: 520ms var(--ease-standard); --z-bg: -1; --z-base: 1; --z-floating: 10; --z-header: 100; --z-modal: 1000; --hud-button-cut: 13px; --hud-button-clip: polygon(0 var(--hud-button-cut), var(--hud-button-cut) 0, calc(100% - var(--hud-button-cut)) 0, 100% var(--hud-button-cut), 100% calc(100% - var(--hud-button-cut)), calc(100% - var(--hud-button-cut)) 100%, var(--hud-button-cut) 100%, 0 calc(100% - var(--hud-button-cut))); --hud-card-cut-x: 46px; --hud-card-cut-y: 58px; --hud-card-clip: polygon(0 var(--hud-button-cut), var(--hud-button-cut) 0, calc(100% - var(--hud-button-cut)) 0, 100% var(--hud-button-cut), 100% calc(100% - var(--hud-button-cut)), calc(100% - var(--hud-button-cut)) 100%, var(--hud-button-cut) 100%, 0 calc(100% - var(--hud-button-cut))) } .form-status{ min-height: 24px; margin: 0; color: var(--color-cyan); font: 700 var(--fs-sm)/1.4 var(--font-body); letter-spacing: .03em } .form-status.is-error{ color: var(--color-orange) } [aria-invalid="true"]{ border-color: var(--color-orange) !important; box-shadow: 0 0 0 1px rgba(255, 139, 31, .55), var(--shadow-orange) !important } @media (prefers-reduced-motion:reduce) { *, *::before, *::after{ scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important } } *{ box-sizing: border-box } html{ scroll-behavior: smooth } body{ margin: 0; color: var(--text); font-family: var(--font-ui); background: var(--bg); overflow-x: hidden } body::before{ content: ""; position: fixed; inset: 0; z-index: -5; background: radial-gradient(circle at 17% 18%, rgba(0, 153, 255, .17), transparent 33%), radial-gradient(circle at 83% 15%, rgba(255, 139, 31, .17), transparent 31%), radial-gradient(circle at 75% 78%, rgba(0, 231, 255, .09), transparent 33%), linear-gradient(180deg, #02050b 0%, #061422 43%, #02050b 100%) } .cyber-bg{ position: fixed; inset: 0; z-index: -4; pointer-events: none; background-image: linear-gradient(rgba(0, 153, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 153, 255, .045) 1px, transparent 1px), linear-gradient(120deg, transparent 0 48%, rgba(0, 231, 255, .07) 49%, transparent 50%), linear-gradient(60deg, transparent 0 48%, rgba(255, 139, 31, .06) 49%, transparent 50%); background-size: 34px 34px, 34px 34px, 260px 260px, 260px 260px; mask-image: radial-gradient(circle at 50% 30%, black, transparent 90%) } .scanline{ position: fixed; left: 0; right: 0; top: -260px; height: 260px; z-index: -3; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(0, 231, 255, .045), transparent); animation: scan 7s linear infinite } a{ color: inherit; text-decoration: none } .header{ position: sticky; top: 0; z-index: 10000; width: 100%; height: 108px; margin: 0; display: grid; grid-template-columns: 500px 1fr 176px; gap: 36px; align-items: center; padding: 0 72px 0 92px; overflow: hidden; background: radial-gradient(circle at 33% 43%, rgba(0, 136, 255, .18), transparent 2px), radial-gradient(circle at 34.4% 67%, rgba(0, 231, 255, .2), transparent 1px), radial-gradient(circle at 41% 20%, rgba(0, 153, 255, .16), transparent 2px), linear-gradient(180deg, rgba(1, 7, 16, .98) 0%, rgba(0, 5, 13, .94) 55%, rgba(1, 10, 23, .98) 100%); border-top: 1px solid rgba(222, 245, 255, .42); border-bottom: 1px solid rgba(49, 112, 183, .45); box-shadow: inset 0 -14px 28px rgba(0, 87, 171, .15), 0 8px 22px rgba(0, 0, 0, .5); backdrop-filter: blur(18px) } .header::before{ content: ""; position: absolute; left: 64px; right: 72px; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(0, 136, 255, .48) 19%, rgba(0, 231, 255, .18) 55%, rgba(255, 139, 31, .5) 92%, transparent 100%); box-shadow: 0 0 16px rgba(0, 153, 255, .36), 0 0 18px rgba(255, 139, 31, .3) } .header::after{ content: ""; position: absolute; right: 15px; bottom: -14px; width: 92px; height: 92px; border-right: 1px solid rgba(255, 139, 31, .22); border-bottom: 1px solid rgba(255, 139, 31, .2); transform: skewX(-44deg); transform-origin: right bottom; pointer-events: none } .brand{ display: flex; align-items: center; gap: 24px; min-width: 0 } .brand img{ width: 88px; height: 88px; object-fit: contain; border-radius: 50%; filter: drop-shadow(0 0 14px rgba(0, 153, 255, .72)) drop-shadow(0 0 12px rgba(255, 139, 31, .58)) } .brand strong{ display: block; font-family: Orbitron, sans-serif; font-size: 28px; line-height: 1; text-transform: uppercase; letter-spacing: .04em; color: #f3f7ff; white-space: nowrap } .brand small{ display: block; color: #b8bdc8; margin-top: 10px; font-family: Orbitron, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap } .nav{ display: flex; justify-content: center; align-items: center; gap: 48px; font-size: 20px; font-weight: 700 } .nav a{ position: relative; color: #d8dde8; line-height: 1; } .nav a::after{ content: ""; position: absolute; left: 50%; bottom: -15px; width: 0; height: 2px; background: #7fb0ff; box-shadow: 0 0 13px rgba(87, 151, 255, .95), 0 0 24px rgba(87, 151, 255, .62); transform: translateX(-50%); transition: .25s ease } .nav a.active::after{ width: 58px } .hire-btn, .experience-toggle, .send-message, .footer-hire{ position: relative; isolation: isolate; --hud-button-cut: 10px; width: 174px; height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 0 20px 0 28px; color: #fff7ef; border: 0; background: transparent; clip-path: var(--hud-button-clip); filter: drop-shadow(0 0 10px rgba(52, 112, 255, .65)) drop-shadow(0 0 14px rgba(255, 142, 31, .7)); font-family: var(--font-ui); font-size: 20px; font-weight: 800; line-height: 1; transition: transform .22s ease, filter .22s ease } .hire-btn{ justify-self: end } .hire-btn::before, .hire-btn::after, .experience-toggle::before, .experience-toggle::after, .send-message::before, .send-message::after, .footer-hire::before, .footer-hire::after{ content: ""; position: absolute; clip-path: inherit; pointer-events: none } .hire-btn::before, .experience-toggle::before, .send-message::before, .footer-hire::before{ inset: 0; z-index: -2; background: linear-gradient(100deg, #6490ff 0%, #315dff 38%, #ff9c28 72%, #ffd36c 100%) } .hire-btn::after, .experience-toggle::after, .send-message::after, .footer-hire::after{ inset: 3px; z-index: -1; background: linear-gradient(90deg, rgba(255, 255, 255, .2) 0 1px, transparent 1px 100%), linear-gradient(108deg, #3158dd 0%, #304dc5 42%, #a85d25 67%, #f1982d 100%); box-shadow: inset 9px 0 15px rgba(0, 211, 255, .3), inset -9px 0 18px rgba(255, 199, 73, .38), inset 0 0 14px rgba(255, 255, 255, .22) } .hire-btn:hover, .experience-toggle:hover, .experience-toggle:focus-visible, .send-message:hover, .send-message:focus-visible, .footer-hire:hover, .footer-hire:focus-visible{ transform: none; outline: none } .hire-btn i, .experience-toggle i, .send-message i, .footer-hire i, .footer-hire svg{ display: inline-flex; align-items: center; justify-content: center; color: #ffd46b; width: 29px; height: 29px; stroke-width: 2.2; filter: drop-shadow(0 0 8px rgba(255, 203, 86, .95)) drop-shadow(0 2px 5px rgba(0, 0, 0, .7)) } .menu-toggle{ display: none; --hud-button-cut: 8px; width: 48px; height: 48px; border: 1px solid var(--line-blue); border-radius: 0; background: rgba(255, 255, 255, .04); color: white; clip-path: var(--hud-button-clip) } .menu-toggle i{ width: 25px; height: 25px; stroke-width: 2.4 } .hero{ width: 100%; min-height: 760px; margin: 0 auto; padding: 76px 120px 70px 188px; display: grid; grid-template-columns: minmax(560px, .82fr) minmax(720px, 1.18fr); gap: 46px; align-items: center; border-bottom: 1px solid rgba(0, 153, 255, .18); overflow: hidden; background: linear-gradient(rgba(46, 103, 170, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(46, 103, 170, .045) 1px, transparent 1px), radial-gradient(circle at 70% 48%, rgba(58, 115, 255, .19), transparent 29%), radial-gradient(circle at 78% 48%, rgba(255, 139, 31, .16), transparent 28%), linear-gradient(90deg, rgba(0, 10, 23, .92), rgba(1, 7, 16, .88)); background-size: 42px 42px, 42px 42px, auto, auto, auto } .hero-left{ position: relative; z-index: 5 } .intro, .label{ margin: 0 0 16px; color: var(--cyan); text-transform: uppercase; letter-spacing: .12em; font-size: 14px; font-weight: 800 } .hero h1{ margin: 0; max-width: 820px; font-size: clamp(42px, 5vw, 42px); line-height: 1.1; letter-spacing: 0; font-weight: 800; } .hero h1 span, .about-text h2 span, .contact-info h2 span{ background: linear-gradient(90deg, var(--blue), var(--orange)); -webkit-background-clip: text; color: transparent } .hero-role{ margin: 22px 0 0; color: #e9f3ff; font-size: 23px; font-weight: 700; } .hero-role em{ color: var(--orange); margin: 0 12px; font-style: normal } .hero-copy{ width: min(720px, 100%); margin: 24px 0 0; color: var(--muted); font-size: 20px; line-height: 1.55; font-weight: 600 } .actions, .socials{ display: flex; flex-wrap: wrap; gap: 18px; margin-top: 31px } .btn{ --hud-button-cut: 10px; min-width: 174px; min-height: 52px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 0; clip-path: var(--hud-button-clip); color: white; font-size: 15px; font-weight: 800; transition: .25s ease } .btn:hover{ transform: none } .btn.blue{ border: 1px solid rgba(0, 231, 255, .7); background: linear-gradient(90deg, #006cff, #00d9ff); box-shadow: 0 0 24px rgba(0, 153, 255, .55), inset 0 0 18px rgba(255, 255, 255, .14) } .btn.orange{ background: linear-gradient(90deg, #ff6a00, #ffa42b); box-shadow: 0 0 24px rgba(255, 139, 31, .55), inset 0 0 18px rgba(255, 255, 255, .14) } .actions{ gap: 28px; flex-wrap: nowrap; margin-top: 38px } .actions .btn{ position: relative; isolation: isolate; --hud-button-cut: 12px; width: 276px; height: 62px; min-width: 0; min-height: 0; padding: 0 28px; gap: 32px; border: 0; border-radius: 0; background: transparent; clip-path: var(--hud-button-clip); color: #fff9f2; font-size: 22px; font-weight: 800; line-height: 1; filter: drop-shadow(0 0 11px rgba(44, 101, 255, .62)) } .actions .btn::before, .actions .btn::after{ content: ""; position: absolute; clip-path: inherit; pointer-events: none } .actions .btn::before{ inset: 0; z-index: -2 } .actions .btn::after{ inset: 3px; z-index: -1; box-shadow: inset 10px 0 20px rgba(255, 255, 255, .15), inset -10px 0 20px rgba(255, 255, 255, .12), inset 0 0 18px rgba(255, 255, 255, .18) } .actions .btn.blue{ filter: drop-shadow(0 0 10px rgba(71, 126, 255, .82)) drop-shadow(0 0 16px rgba(64, 176, 255, .5)) } .actions .btn.blue::before{ background: linear-gradient(100deg, #79bdff 0%, #4169ff 12%, #3253dc 70%, #8dd8ff 100%) } .actions .btn.blue::after{ background: linear-gradient(102deg, #334dd8 0%, #314ad0 58%, #214391 100%) } .actions .btn.orange{ filter: drop-shadow(0 0 10px rgba(255, 145, 40, .82)) drop-shadow(0 0 16px rgba(255, 185, 72, .52)) } .actions .btn.orange::before{ background: linear-gradient(100deg, #ffb35a 0%, #f18b2d 12%, #d36720 70%, #ffd47a 100%) } .actions .btn.orange::after{ background: linear-gradient(102deg, #793817 0%, #6b3115 58%, #9c541d 100%) } .actions .btn i{ flex: 0 0 auto; width: 30px; height: 30px; stroke-width: 2.3; filter: drop-shadow(0 0 8px currentColor) } .actions .btn.blue i{ color: #9fdcff } .actions .btn.orange i{ color: #ffd263 } .socials{ gap: 24px; margin-top: 38px; align-items: center } .socials a{ width: 42px; height: 42px; display: grid; place-items: center; color: rgba(247, 250, 255, .96); filter: drop-shadow(0 0 7px rgba(255, 255, 255, .42)); transition: transform .22s ease, color .22s ease, filter .22s ease } .socials a:hover{ color: rgba(247, 250, 255, .96); transform: none; filter: drop-shadow(0 0 7px rgba(255, 255, 255, .42)); box-shadow: inset 0 0 13px rgba(95, 164, 255, .16), 0 0 14px rgba(51, 124, 213, .22) } .socials a:not(:last-child) svg{ width: 34px; height: 34px; fill: currentColor; stroke-width: 2.55 } .socials:last-child svg{ width: 34px; height: 34px; stroke-width: 2.55 } .footer-socials a{ width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(172, 214, 255, .25); border-radius: 6px; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 15px rgba(0, 153, 255, .06); color: #eaf6ff; font-weight: 800 } .scroll-down{ position: absolute; left: 50%; bottom: 20px; width: 40px; height: 40px; transform: translateX(-50%); perspective: 126px; pointer-events: none } .scroll-down svg{ position: absolute; left: 50%; width: 100%; fill: currentColor; color: #fff; opacity: 0; filter: blur(4px) drop-shadow(0 0 36px #0fb); animation: scroll-chevron 2s infinite cubic-bezier(.8, 0, .2, 1) } .scroll-down svg:nth-child(1){ animation-delay: 0s } .scroll-down svg:nth-child(2){ animation-delay: .5s } .scroll-down svg:nth-child(3){ animation-delay: 1s } .scroll-down svg:nth-child(4){ animation-delay: 1.5s } .stats{ position: relative; isolation: isolate; width: min(1780px, calc(100% - 56px)); min-height: 158px; margin: 0 auto; transform: none; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; padding: 26px 92px; overflow: hidden; background: linear-gradient(rgba(46, 103, 170, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(46, 103, 170, .03) 1px, transparent 1px); background-size: 42px 42px, 42px 42px, auto, auto; border: 0; clip-path: var(--hud-button-clip); box-shadow: 0 0 30px rgba(0, 0, 0, .38) } .stats::before, .stats::after{ content: ""; position: absolute; pointer-events: none; clip-path: inherit } .stats::before{ inset: 0; z-index: -2; background: linear-gradient(100deg, #79aaff 0%, #5f8fe7 58%, #ff9d32 100%); box-shadow: 0 0 20px rgba(93, 151, 255, .42), 0 0 18px rgba(255, 139, 31, .22) } .stats::after{ inset: 5px; z-index: -1; background: radial-gradient(circle at 10% 48%, rgba(85, 138, 255, .22), transparent 20%), radial-gradient(circle at 88% 48%, rgba(255, 139, 31, .2), transparent 22%), linear-gradient(90deg, rgba(4, 15, 32, .98), rgba(1, 7, 18, .98) 56%, rgba(31, 18, 8, .96)); box-shadow: inset 0 0 42px rgba(0, 0, 0, .42), inset 22px 0 28px rgba(77, 142, 255, .12), inset -24px 0 30px rgba(255, 139, 31, .12) } .stat{ position: relative; z-index: 2; min-height: 96px; display: grid; grid-template-columns: 86px auto; grid-template-rows: auto auto; align-content: center; justify-content: center; gap: 4px 22px; background: transparent } .stat:not(:last-child)::after{ content: ""; position: absolute; top: 8px; right: 0; width: 2px; height: 80px; background: linear-gradient(180deg, transparent, rgba(255, 139, 31, .42), transparent); box-shadow: 0 0 14px rgba(255, 139, 31, .22) } .stat-icon{ grid-row: span 2; width: 72px; height: 72px; display: grid; place-items: center; align-self: center; justify-self: center; border: 3px solid rgba(98, 138, 255, .72); border-radius: 50%; background: radial-gradient(circle, rgba(24, 50, 92, .92), rgba(4, 13, 28, .9)); color: #ccefff; box-shadow: inset 0 0 16px rgba(92, 151, 255, .28), 0 0 15px rgba(75, 131, 255, .5) } .stat-icon i, .stat-icon svg{ width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.95; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px currentColor) } .stat-icon .iconify-ui-icon{ width: 34px; height: 34px; color: #91a9ff; filter: invert(65%) sepia(44%) saturate(1174%) hue-rotate(196deg) brightness(105%) contrast(102%) drop-shadow(0 0 7px rgba(126, 157, 255, .9)) } .orange-icon{ border-color: rgba(255, 166, 47, .62); background: radial-gradient(circle, rgba(88, 48, 11, .92), rgba(22, 11, 3, .9)); color: var(--gold); box-shadow: inset 0 0 17px rgba(255, 184, 67, .28), 0 0 19px rgba(255, 139, 31, .42) } .orange-icon .iconify-ui-icon{ width: 34px; height: 34px; filter: invert(68%) sepia(80%) saturate(922%) hue-rotate(345deg) brightness(104%) contrast(101%) drop-shadow(0 0 7px rgba(255, 171, 53, .9)) } .stat strong{ color: #f7fbff; font-family: var(--font-ui); font-size: 42px; font-weight: 800; line-height: .84; } .stat:last-child strong{ color: #ffad34; } .stat small{ color: #a7aebd; font-size: 17px; font-weight: 700; line-height: 1; } .section{ width: min(1320px, calc(100% - 72px)); margin: 0 auto; padding: 62px 36px } .about{ position: relative; width: 100%; min-height: 640px; display: grid; grid-template-columns: minmax(500px, .86fr) minmax(620px, 1.14fr); gap: 76px; align-items: center; padding: 72px 170px 74px; overflow: hidden; background: transparent; border-top: 1px solid rgba(59, 134, 217, .32); border-bottom: 1px solid rgba(255, 139, 31, .22) } .about::before{ display: none } .about::after{ display: none } .about-text{ position: relative; z-index: 1; align-self: center } .about-text>.label{ font-size: 13px } .about-text h2, .contact-info h2{ margin: 0 0 14px; font-size: clamp(30px, 2.8vw, 34px); line-height: 1.04 } .about-text p:not(.label), .contact-info p{ color: var(--muted); max-width: 700px; line-height: 1.5; font-size: 15px; font-weight: 600 } .info-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 22px; margin-top: 24px; max-width: 930px } .info-grid article{ min-height: 64px; padding: 11px 18px 12px; border: 2px solid rgba(0, 153, 255, .25); border-radius: 8px; background: rgba(4, 13, 26, .74); box-shadow: inset 0 0 22px rgba(0, 153, 255, .06), 0 0 14px rgba(0, 153, 255, .08) } .info-grid article:nth-child(even){ border-color: rgba(255, 139, 31, .32); background: rgba(22, 14, 7, .68); box-shadow: inset 0 0 22px rgba(255, 139, 31, .07), 0 0 14px rgba(255, 139, 31, .08) } .info-grid b{ display: flex; align-items: center; gap: 10px; color: #8befff; font-size: 16px; line-height: 1 } .info-grid article:nth-child(even) b{ color: var(--gold) } .info-grid b i, .info-grid b svg{ width: 24px; height: 24px; stroke-width: 2.2; filter: drop-shadow(0 0 7px currentColor) } .info-grid small{ display: block; margin-top: 7px; padding-left: 32px; color: #d1e4f8; font-size: 14px; font-weight: 600 } .experience{ position: relative; width: 100%; min-height: 410px; padding: 28px 108px 66px; overflow: hidden; background: linear-gradient(rgba(0, 153, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 153, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 95, 190, .11), transparent 48%, rgba(255, 139, 31, .1)), rgba(1, 7, 16, .82); background-size: 38px 38px, 38px 38px, auto, auto; border-top: 1px solid rgba(55, 125, 212, .22); border-bottom: 1px solid rgba(255, 139, 31, .2) } .experience::before, .experience::after{ content: ""; position: absolute; pointer-events: none; z-index: 0 } .experience::before{ inset: 42px 46px 18px; border: 2px solid rgba(61, 137, 224, .42); border-right-color: rgba(255, 139, 31, .38); clip-path: var(--hud-button-clip); box-shadow: inset 22px 0 28px rgba(0, 153, 255, .12), inset -22px 0 28px rgba(255, 139, 31, .12), 0 0 24px rgba(0, 153, 255, .12) } .experience::after{ left: 57px; top: 166px; width: 4px; height: 48px; background: #71caff; box-shadow: 0 0 14px #71caff } .experience>*{ position: relative; z-index: 1 } .experience .label{ margin-left: 12px; margin-bottom: 24px; color: #70caff; font-size: 23px; font-weight: 800; letter-spacing: .1em; } .year-track{ position: relative; margin: 0 116px 22px; display: grid; grid-template-columns: repeat(6, 1fr); color: #e8f5ff; font-size: 20px; font-weight: 800; line-height: 1; text-align: center; } .year-track::before{ content: ""; position: absolute; left: -6%; right: -6%; top: 50%; height: 2px; transform: translateY(-50%); background: linear-gradient(90deg, var(--blue), var(--purple), var(--orange)); box-shadow: 0 0 16px rgba(0, 153, 255, .5), 0 0 16px rgba(255, 139, 31, .32); z-index: -1 } .year-track span{ position: relative; display: inline-grid; place-items: center; min-height: 32px; background: rgba(1, 7, 16, .96) } .year-track span::after{ content: ""; position: absolute; right: -26%; top: 50%; width: 17px; height: 17px; border: 3px solid currentColor; border-radius: 50%; background: #07111f; box-shadow: 0 0 13px currentColor, inset 0 0 8px currentColor; transform: translate(50%, -50%) } .year-track span:nth-child(-n+3){ color: #8fbaff } .year-track span:nth-child(n+4){ color: #ffad3c } .jobs, .project-grid, .service-grid{ display: grid; gap: 28px } .jobs{ grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px } .job, .project-card, .service, .contact, .footer{ border-radius: 8px; background: linear-gradient(145deg, rgba(4, 17, 34, .84), rgba(2, 7, 14, .82)); box-shadow: inset 0 0 30px rgba(0, 153, 255, .035) } .job{ position: relative; isolation: isolate; min-height: 246px; padding: 22px 22px; border: 0; border-radius: 0; background: rgba(3, 13, 28, .86); box-shadow: inset 0 0 26px rgba(0, 153, 255, .07) } .job::before{ content: ""; position: absolute; inset: 0; z-index: -1; clip-path: inherit; background: rgba(87, 169, 255, .78) } .job::after{ content: ""; position: absolute; inset: 3px; z-index: -1; clip-path: inherit; background: linear-gradient(145deg, rgba(7, 24, 48, .96), rgba(2, 8, 18, .94)) } .blue-border::before{ background: rgba(91, 171, 255, .8) } .purple-border::before{ background: rgba(205, 119, 255, .78) } .orange-border::before{ background: rgba(255, 154, 34, .8) } .purple-border::after{ background: linear-gradient(145deg, rgba(28, 18, 52, .96), rgba(4, 8, 18, .94)) } .orange-border::after{ background: linear-gradient(145deg, rgba(40, 22, 5, .96), rgba(5, 8, 12, .94)) } .job h3, .project-card h3, .service h3{ margin: 0 0 6px; font-size: 23px; line-height: 1.05 } .job b{ display: block; margin-bottom: 10px; color: #9bbdff; font-size: 16px; line-height: 1.08 } .job time, .job small{ display: block; color: #b7c4d7; font-size: 12px; font-weight: 700; line-height: 1.25 } .job small{ margin-top: 5px; color: #899aaf } .purple-border h3{ color: #d7a9ff } .orange-border h3, .orange-border b{ color: #ffc16a } .job p, .project-card p, .service p{ margin: 11px 0 0; color: var(--muted); line-height: 1.32; font-size: 13px; font-weight: 600 } .job p strong{ color: #dceeff } .tech-stack-showcase{ display: grid; grid-template-columns: 390px minmax(0, 1fr); column-gap: 36px; align-items: start; width: min(1840px, calc(100% - 80px)); margin: 0 auto; padding: 58px 58px 70px 72px; overflow: hidden; border: 1px solid rgba(80, 142, 255, .42); background: linear-gradient(rgba(38, 102, 180, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(38, 102, 180, .045) 1px, transparent 1px), radial-gradient(circle at 74% 13%, rgba(0, 117, 255, .16), transparent 26%), radial-gradient(circle at 30% 98%, rgba(255, 136, 22, .09), transparent 24%), linear-gradient(135deg, rgba(2, 9, 23, .98), rgba(1, 5, 14, .98)); background-size: 42px 42px, 42px 42px, auto, auto, auto; box-shadow: inset 0 0 64px rgba(55, 119, 255, .1) } .tech-hero-copy::after{ content: ""; display: block; width: 305px; height: 2px; margin-top: 24px; background: linear-gradient(90deg, #5d9eff 0 38%, #ffad25 38% 40%, rgba(255, 173, 37, .72) 41%, transparent 86%) } .tech-trust{ position: absolute; left: 0; top: auto; bottom: 0; width: 356px; min-height: 98px; padding: 18px 22px 18px 92px; display: block; color: #dce8ff; border: 1px solid rgba(128, 171, 255, .84); background: radial-gradient(circle at 14% 50%, rgba(73, 132, 255, .35), transparent 28%), linear-gradient(135deg, rgba(9, 32, 73, .85), rgba(5, 14, 33, .9)); clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px); box-shadow: inset 0 0 26px rgba(67, 126, 255, .21), 0 0 20px rgba(60, 120, 255, .22) } .tech-trust-icon{ position: absolute; left: 24px; top: 50%; width: 54px; height: 54px; object-fit: contain; transform: translateY(-50%); filter: invert(71%) sepia(93%) saturate(1174%) hue-rotate(159deg) brightness(105%) contrast(103%) drop-shadow(0 0 12px rgba(95, 157, 255, .88)) } .tech-trust span{ display: block; max-width: 240px; color: rgba(232, 239, 251, .84); font-size: 13px; line-height: 1.45 } .tech-trust b{ display: block; margin-bottom: 5px; color: #74b6ff; font-size: 14px; line-height: 1.2 } .tech-content{ grid-column: 2; min-width: 0 } .tech-category-grid{ margin-top: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px } .tech-category{ --tech-accent: #35caff; position: relative; min-height: 338px; padding: 24px 26px 28px; border: 1px solid color-mix(in srgb, var(--tech-accent) 72%, transparent); border-radius: 12px; background: radial-gradient(circle at 14% 0, color-mix(in srgb, var(--tech-accent) 18%, transparent), transparent 28%), linear-gradient(145deg, rgba(4, 16, 38, .84), rgba(1, 7, 19, .94)); box-shadow: inset 0 0 34px color-mix(in srgb, var(--tech-accent) 8%, transparent), 0 0 24px rgba(0, 0, 0, .2) } .tech-category.purple{ --tech-accent: #bd6bff } .tech-category.blue{ --tech-accent: #4aa7ff } .tech-category.orange{ --tech-accent: #ff8b1f } .tech-category.magenta{ --tech-accent: #df6dff } .tech-category.teal{ --tech-accent: #43f3d2 } .tech-category h3{ margin: 0 0 18px; padding-bottom: 16px; display: flex; align-items: center; gap: 14px; color: var(--tech-accent); border-bottom: 1px solid color-mix(in srgb, var(--tech-accent) 28%, transparent); font: 900 18px/1.15 var(--font-ui); letter-spacing: .02em; text-transform: uppercase } .tech-category h3 img{ width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 0 9px currentColor) } .tech-category h3 img[src*="iconify-ui"], .tech-list img[src*="iconify-ui"]{ filter: invert(71%) sepia(93%) saturate(1174%) hue-rotate(159deg) brightness(105%) contrast(103%) drop-shadow(0 0 9px color-mix(in srgb, var(--tech-accent) 70%, transparent)) } .tech-list{ display: grid; gap: 18px 24px } .tech-list.two-col{ grid-template-columns: 1fr 1fr } .tech-list span, .leadership-list span{ min-width: 0; display: flex; align-items: center; gap: 13px; color: #f3f6ff; font-size: 15px; line-height: 1.25 } .tech-list img{ width: 28px; height: 28px; object-fit: contain; flex: 0 0 28px; filter: drop-shadow(0 0 8px rgba(80, 190, 255, .26)) } .tech-list b, .leadership-list b{ width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; color: var(--tech-accent); border: 1px solid currentColor; border-radius: 8px; font: 900 10px/1 var(--font-ui); } .tech-wide-row{ margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: stretch } .leadership-card{ width: 100%; grid-column: 1 / -1; margin-top: 0; min-height: 190px } .leadership-marquee{ position: relative; overflow: hidden; padding: 4px 0 8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent) } .leadership-list{ display: flex; width: max-content; gap: 30px; animation: leadership-marquee 34s linear infinite; will-change: transform } .leadership-marquee:hover .leadership-list{ animation-play-state: paused } .leadership-group{ display: flex; gap: 30px; align-items: stretch; padding-inline: 15px } .leadership-list span{ width: 156px; min-height: 88px; padding: 16px 14px; justify-content: center; flex-direction: column; text-align: center; border: 1px solid rgba(67, 243, 210, .26); border-radius: var(--card-radius, 16px); background: radial-gradient(circle at 50% 0, rgba(67, 243, 210, .16), transparent 52%), linear-gradient(145deg, rgba(8, 31, 50, .78), rgba(2, 10, 21, .88)); box-shadow: inset 0 0 20px rgba(67, 243, 210, .06), 0 12px 24px rgba(0, 0, 0, .22); flex: 0 0 156px } .leadership-list img{ width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--tech-accent) 56%, transparent)) } .tech-exploring-card{ --tech-accent: #8ba4ff; position: relative; min-height: 190px; padding: 24px 26px; display: grid; grid-template-columns: minmax(160px, .8fr) minmax(220px, 1fr); gap: 20px; align-items: center; overflow: hidden; color: #eef3ff; border: 1px solid rgba(147, 170, 255, .84); border-radius: 12px; background: radial-gradient(circle at 65% 45%, rgba(67, 123, 255, .34), transparent 32%), radial-gradient(circle at 96% 75%, rgba(255, 169, 68, .13), transparent 28%), linear-gradient(112deg, rgba(12, 27, 66, .92), rgba(4, 8, 20, .96) 52%, rgba(22, 15, 14, .9)); box-shadow: inset 0 0 36px rgba(49, 102, 255, .16), inset -28px 0 50px rgba(255, 155, 47, .08), 0 0 28px rgba(30, 88, 255, .18) } .tech-exploring-card::after{ content: ""; position: absolute; inset: 5px; z-index: -1; clip-path: inherit; background: radial-gradient(rgba(80, 150, 255, .22) 1px, transparent 1px) 0 0 / 18px 18px, linear-gradient(112deg, rgba(14, 28, 68, .75), rgba(4, 8, 20, .9) 52%, rgba(21, 13, 11, .78)) } @media (max-width:1200px) { .tech-stack-showcase, .tech-category-grid, .tech-wide-row, .tech-bottom-cta{ grid-template-columns: 1fr } .tech-stack-showcase .tech-hero, .tech-content{ grid-column: 1 } .tech-trust{ position: static; width: min(356px, 100%); margin-top: 28px } .leadership-list{ gap: 24px } .leadership-group{ gap: 24px; padding-inline: 12px } .leadership-list span{ width: 148px; flex-basis: 148px } } @media (max-width:700px) { .tech-stack-showcase{ width: calc(100% - 22px); padding: 34px 18px } .tech-list.two-col, .tech-exploring-card{ grid-template-columns: 1fr } .leadership-list, .leadership-group{ gap: 18px } .leadership-list span{ width: 138px; min-height: 82px; flex-basis: 138px } } .tech-category.cyan, .tech-category.blue{ --tech-ui-icon-filter: brightness(0) saturate(100%) invert(64%) sepia(93%) saturate(1602%) hue-rotate(169deg) brightness(105%) contrast(101%) } .tech-category.purple{ --tech-ui-icon-filter: brightness(0) saturate(100%) invert(61%) sepia(87%) saturate(1840%) hue-rotate(228deg) brightness(104%) contrast(101%) } .tech-category.orange{ --tech-ui-icon-filter: brightness(0) saturate(100%) invert(68%) sepia(91%) saturate(1569%) hue-rotate(345deg) brightness(103%) contrast(101%) } .tech-category.magenta{ --tech-ui-icon-filter: brightness(0) saturate(100%) invert(67%) sepia(73%) saturate(2397%) hue-rotate(239deg) brightness(104%) contrast(101%) } .tech-category.teal{ --tech-ui-icon-filter: brightness(0) saturate(100%) invert(82%) sepia(78%) saturate(668%) hue-rotate(111deg) brightness(101%) contrast(101%) } .tech-stack-showcase .tech-category h3 img, .tech-stack-showcase .tech-list img, .tech-stack-showcase .leadership-list img{ opacity: 1 !important; filter: saturate(1.35) brightness(1.08) contrast(1.04) drop-shadow(0 0 9px rgba(255, 255, 255, .16)) !important } .tech-stack-showcase .tech-category h3 img[src*="iconify-ui"], .tech-stack-showcase .tech-list img[src*="iconify-ui"]{ filter: var(--tech-ui-icon-filter) drop-shadow(0 0 10px color-mix(in srgb, var(--tech-accent) 72%, transparent)) !important } .section-head{ display: flex; justify-content: space-between; align-items: end; gap: 22px; margin-bottom: 22px } .section-head h2{ margin: 0; font-size: 28px } .section-head a{ color: var(--gold); font-weight: 800 } .projects{ width: min(1840px, calc(100% - 80px)); margin: 0 auto; padding: 34px 54px 42px 74px; overflow: hidden; border-top: 1px solid rgba(83, 151, 255, .18); border-bottom: 1px solid rgba(255, 139, 31, .14); background: linear-gradient(rgba(46, 103, 170, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(46, 103, 170, .035) 1px, transparent 1px), radial-gradient(circle at 12% 42%, rgba(73, 142, 255, .11), transparent 17%), radial-gradient(circle at 88% 46%, rgba(255, 139, 31, .12), transparent 18%), linear-gradient(90deg, rgba(1, 9, 20, .96), rgba(2, 8, 17, .94)); background-size: 40px 40px, 40px 40px, auto, auto, auto } .projects::before{ width: 88px; height: 340px; left: 0; top: 48px; border-left: 2px solid rgba(81, 153, 255, .62); border-top: 2px solid rgba(81, 153, 255, .44); border-bottom: 2px solid rgba(81, 153, 255, .32); clip-path: var(--hud-button-clip) } .projects::after{ width: 112px; height: 340px; right: 0; top: 48px; bottom: auto; border-right: 2px solid rgba(255, 151, 30, .64); border-top: 2px solid rgba(255, 151, 30, .38); border-bottom: 2px solid rgba(255, 151, 30, .38); clip-path: var(--hud-button-clip) } .projects .section-head{ position: relative; z-index: 5; margin: 0 0 16px 28px; align-items: start } .projects .section-head h2{ display: none } .projects .label{ margin: 0; color: #78c7ff; font-size: 24px; letter-spacing: .14em; } .projects .section-head .btn{ position: relative; isolation: isolate; --hud-button-cut: 10px; width: 230px; height: 48px; min-width: 0; min-height: 0; margin-right: 10px; padding: 0 18px 0 26px; justify-content: space-between; border: 0; border-radius: 0; background: transparent; clip-path: var(--hud-button-clip); color: rgba(245, 245, 244, .9); font-size: 18px; filter: drop-shadow(0 0 10px rgba(255, 139, 31, .34)) } .projects .section-head .btn::before, .projects .section-head .btn::after{ content: ""; position: absolute; clip-path: inherit; pointer-events: none } .projects .section-head .btn::before{ inset: 0; z-index: -2; background: linear-gradient(100deg, rgba(255, 168, 58, .3), rgba(255, 168, 58, .78)) } .projects .section-head .btn::after{ inset: 3px; z-index: -1; background: linear-gradient(100deg, rgba(9, 12, 18, .94), rgba(38, 22, 7, .94)); box-shadow: inset -9px 0 18px rgba(255, 139, 31, .22) } .project-grid{ grid-template-columns: repeat(3, 1fr) } .project-card{ position: relative; isolation: isolate; min-height: 360px; padding: 0; border: 0; border-radius: 0; background: transparent; clip-path: var(--hud-button-clip); overflow: hidden; transition: .25s ease; box-shadow: none } .project-card:hover{ transform: none } .project-card::before, .project-card::after{ content: ""; position: absolute; clip-path: inherit; pointer-events: none } .project-card::before{ inset: 0; z-index: -2; background: #5aa8ff; filter: drop-shadow(0 0 13px rgba(83, 164, 255, .68)) } .project-card::after{ inset: 3px; z-index: -1; background: rgba(2, 8, 18, .96); box-shadow: inset 0 0 30px rgba(74, 146, 255, .08) } .project-card.orange-border::before{ background: #f59b25; filter: drop-shadow(0 0 13px rgba(255, 151, 30, .66)) } .project-card.orange-border::after{ background: rgba(13, 9, 8, .97); box-shadow: inset 0 0 30px rgba(255, 151, 30, .08) } .project-image{ position: relative; height: 100%; min-height: 360px; display: grid; place-items: start; padding: 28px; margin: 0; border: 0; border-radius: 0; overflow: hidden } .project-image::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0 48%, rgba(0, 7, 16, .76) 58%, rgba(0, 7, 16, .92) 100%), linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: auto, 32px 32px, 32px 32px; opacity: 1 } .ngrx-project{ background: linear-gradient(90deg, rgba(103, 194, 255, .34) 0 2px, transparent 2px 100%) 18% 44% / 54px 54px, linear-gradient(rgba(103, 194, 255, .28) 0 2px, transparent 2px 100%) 18% 44% / 54px 54px, radial-gradient(circle at 78% 34%, rgba(255, 211, 108, .72), transparent 18%), radial-gradient(circle at 18% 78%, rgba(49, 93, 255, .62), transparent 24%), linear-gradient(135deg, #061223, #0d1d3d 54%, #140c06) } .mfe-project{ background: linear-gradient(120deg, transparent 0 41%, rgba(187, 100, 255, .42) 41.5% 42.4%, transparent 43%), linear-gradient(36deg, transparent 0 54%, rgba(103, 194, 255, .32) 54.4% 55.2%, transparent 56%), radial-gradient(circle at 74% 32%, rgba(187, 100, 255, .72), transparent 19%), radial-gradient(circle at 18% 78%, rgba(103, 194, 255, .46), transparent 22%), linear-gradient(135deg, #07111f, #181037 62%, #050817) } .ng17-project{ background: radial-gradient(circle at 90% 42%, rgba(255, 156, 40, .72), transparent 13%), linear-gradient(8deg, transparent 0 44%, rgba(103, 194, 255, .3) 44.5% 45.2%, transparent 46%), radial-gradient(circle at 24% 76%, rgba(255, 211, 108, .44), transparent 21%), linear-gradient(110deg, #07101e, #101b33 48%, #241004) } .project-image span{ position: relative; z-index: 2; padding: 7px 18px; border: 2px solid rgba(70, 160, 255, .38); border-radius: 999px; background: rgba(0, 10, 20, .48); color: #9bd8ff; font-size: 16px; font-weight: 800; line-height: 1; box-shadow: inset 0 0 14px rgba(66, 153, 255, .18), 0 0 14px rgba(66, 153, 255, .25) } .project-card h3, .project-card p, .tags{ position: relative; z-index: 3; padding: 0 30px } .project-card h3{ margin-top: -126px; color: #f4f7ff; font-size: 26px; line-height: 1.08; } .project-card p{ margin-top: 8px; color: rgba(218, 226, 239, .82); font-size: 18px; line-height: 1.22; font-weight: 700 } .tags{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; padding-right: 104px } .tags span{ padding: 7px 13px; border: 2px solid rgba(85, 151, 239, .26); border-radius: 4px; background: rgba(0, 7, 18, .48); color: rgba(206, 223, 246, .9); font-size: 16px; line-height: 1; font-weight: 700; box-shadow: inset 0 0 12px rgba(83, 151, 255, .06) } .orange-border .tags span{ border-color: rgba(255, 151, 30, .28) } .project-arrow{ position: absolute; z-index: 6; right: 27px; bottom: 84px; width: 66px; height: 82px; display: grid; place-items: center; border: 3px solid rgba(84, 152, 239, .34); border-radius: 8px; background: rgba(3, 12, 24, .72); color: #75caff; font-size: 0; box-shadow: inset 0 0 18px rgba(83, 151, 255, .13), 0 0 16px rgba(83, 151, 255, .16) } .project-arrow::before{ content: ""; width: 31px; height: 31px; background: currentColor; clip-path: var(--hud-button-clip); filter: drop-shadow(0 0 8px currentColor) } .orange-border .project-arrow{ border-color: rgba(255, 151, 30, .38); color: #ffc146; box-shadow: inset 0 0 18px rgba(255, 151, 30, .14), 0 0 16px rgba(255, 151, 30, .16) } .certifications.certs-hud{ position: relative; display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 36px; width: min(1840px, calc(100% - 80px)); min-height: 505px; margin: 0 auto; padding: 38px 54px 78px 72px; overflow: hidden; border: 1px solid rgba(99, 149, 255, .62); background: linear-gradient(rgba(61, 118, 205, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(61, 118, 205, .045) 1px, transparent 1px), radial-gradient(circle at 14% 58%, rgba(61, 115, 255, .17), transparent 20%), radial-gradient(circle at 75% 52%, rgba(255, 157, 57, .09), transparent 18%), linear-gradient(105deg, rgba(3, 10, 20, .98), rgba(3, 8, 17, .96)); background-size: 34px 34px, 34px 34px, auto, auto, auto; box-shadow: inset 0 0 0 13px rgba(5, 16, 34, .88), inset 0 0 58px rgba(61, 126, 255, .16) } .certifications.certs-hud{ grid-template-columns: 388px minmax(0, 1fr); gap: 34px; min-height: 508px; padding: 38px 58px 70px 72px } .certifications.certs-hud::after{ display: none } .certifications.certs-hud .cert-copy{ grid-column: 1; padding-top: 10px } .certifications.certs-hud .cert-copy .label{ margin: 0 0 22px; color: #62a9ff; font-size: 18px; letter-spacing: .08em } .certifications.certs-hud .cert-copy h2{ font-size: 42px } .certifications.certs-hud .cert-copy::after{ width: 305px; height: 2px; margin-top: 24px; background: linear-gradient(90deg, #5d9eff 0 38%, #ffad25 38% 40%, rgba(255, 173, 37, .72) 41%, transparent 86%) } .certifications.certs-hud .cert-copy>p:not(.label){ display: block; width: 300px; margin: 28px 0 0; color: rgba(235, 239, 247, .88); font-size: 16px; line-height: 1.62 } .certifications.certs-hud .cert-trust{ position: absolute; top: 292px; left: 0; display: grid; width: 356px; min-height: 112px } .certifications.certs-hud .cert-grid{ grid-column: 2; grid-auto-columns: calc((100% - 128px) / 5); gap: 32px; align-self: start; width: 100%; margin-top: 70px; padding: 48px 0 20px; overflow-x: auto; overflow-y: visible; scrollbar-width: none } .certifications.certs-hud .cert-grid::-webkit-scrollbar{ display: none } .certifications.certs-hud .cert-grid::before{ content: ""; position: absolute; z-index: 0; left: 4%; right: 4%; top: 28px; display: block; height: 2px; background: linear-gradient(90deg, rgba(93, 158, 255, .12), #5d9eff 8%, #9a63ff 31%, #24e7ea 52%, #ff9b2c 74%, #5d9eff 94%, rgba(93, 158, 255, .12)); box-shadow: 0 0 14px rgba(83, 156, 255, .7) } .certifications.certs-hud .cert-card{ min-height: 320px; padding: 30px 22px 18px; clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px); box-shadow: 0 0 18px color-mix(in srgb, var(--cert-accent), transparent 68%) } .certifications.certs-hud .cert-card::before{ background: var(--cert-accent); filter: drop-shadow(0 0 13px color-mix(in srgb, var(--cert-accent), transparent 34%)) } .certifications.certs-hud .cert-card::after{ inset: 2px; background: linear-gradient(135deg, transparent 18px, color-mix(in srgb, var(--cert-accent), transparent 66%) 19px, transparent 20px) 18px 18px / calc(100% - 36px) calc(100% - 36px) no-repeat, radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--cert-accent), transparent 78%) 1px, transparent 2px) 0 0 / 13px 13px, radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--cert-accent), transparent 88%), transparent 35%), linear-gradient(180deg, var(--cert-bg-1), var(--cert-bg-2)); box-shadow: inset 0 0 30px color-mix(in srgb, var(--cert-accent), transparent 90%), inset 0 0 0 16px rgba(3, 9, 22, .18) } .certifications.certs-hud .cert-card time{ top: -58px; min-width: 70px; height: 36px; color: var(--cert-accent); font-size: 17px; } .certifications.certs-hud .cert-card time::before{ top: 35px; height: 24px } .certifications.certs-hud .cert-card time::after{ top: 50px; width: 15px; height: 15px; border-width: 2px; background: #062143 } .certifications.certs-hud .cert-icon{ width: 70px; height: 70px; margin-bottom: 12px; background: transparent; border: 0; border-radius: 0; box-shadow: none } .certifications.certs-hud .cert-icon::before, .certifications.certs-hud .cert-icon::after{ display: none } .certifications.certs-hud .cert-icon-img{ background: transparent; border: 0; box-shadow: none } .certifications.certs-hud .cert-icon-img::before, .certifications.certs-hud .cert-icon-img::after{ display: none } .certifications.certs-hud .cert-icon-img img{ width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--cert-accent), transparent 34%)) } .certifications.certs-hud .cert-card h3{ min-height: 70px; font-size: 20px; line-height: 1.16 } .certifications.certs-hud .cert-card h3::after{ width: 42px; margin-top: 14px } .certifications.certs-hud .cert-card p{ font-size: 13px; line-height: 1.35 } .certifications.certs-hud .cert-card small{ margin-top: 12px; font-size: 13px } .certifications.certs-hud .cert-card a{ width: 124px; height: 34px; margin-top: 13px; gap: 12px; font-size: 13px } .certifications.certs-hud .cert-card a svg{ width: 14px; height: 14px } @media (max-width:1300px) { .certifications.certs-hud{ grid-template-columns: 1fr } .certifications.certs-hud .cert-grid{ grid-column: 1; grid-auto-columns: minmax(190px, 230px) } .certifications.certs-hud .cert-trust{ position: relative; top: auto; margin-top: 24px } } .certifications.certs-hud{ grid-template-columns: 388px minmax(0, 1fr); min-height: 508px; padding: 38px 58px 70px 72px; column-gap: 34px; background: radial-gradient(circle at 55% 45%, rgba(0, 194, 255, .07), transparent 34%), radial-gradient(circle at 74% 34%, rgba(255, 146, 31, .06), transparent 30%), linear-gradient(180deg, rgba(3, 12, 28, .99), rgba(2, 8, 20, .99)) } .certifications.certs-hud::after .certifications.certs-hud .cert-copy{ padding: 4px 0 0 } .certifications.certs-hud .cert-copy .section-kicker, .certifications.certs-hud .cert-copy>.label{ margin-bottom: 18px; font-size: 16px; color: #00c8ff; } .certifications.certs-hud .cert-copy h2{ margin: 0; font-size: clamp(34px, 3.2vw, 44px); line-height: .98; letter-spacing: 0; } .certifications.certs-hud .cert-copy h2::after{ width: 204px; margin-top: 22px; background: linear-gradient(90deg, #28caff, #2e7cff 44%, #ff9d1c 55%, transparent); box-shadow: 0 0 16px rgba(0, 185, 255, .8), 108px 0 16px rgba(255, 153, 28, .78) } .certifications.certs-hud .cert-copy p{ display: block; max-width: 282px; margin-top: 24px; font-size: 15px; line-height: 1.6; color: rgba(244, 248, 255, .86) } .certifications.certs-hud .cert-trust{ position: absolute; left: 0; top: 292px; width: 356px; min-height: 98px; padding: 18px 22px 18px 96px; background: linear-gradient(135deg, rgba(20, 65, 145, .32), rgba(4, 14, 35, .86)); border-color: rgba(78, 168, 255, .92); box-shadow: inset 0 0 34px rgba(26, 100, 255, .22), 0 0 24px rgba(20, 145, 255, .22) } .certifications.certs-hud .cert-grid{ grid-column: 2; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 128px) / 5); gap: 32px; align-items: stretch; min-width: 0; margin-top: 68px; padding: 48px 0 20px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none } .certifications.certs-hud .cert-grid::-webkit-scrollbar .certifications.certs-hud .cert-grid::before{ top: 28px; left: 4%; right: 4%; height: 2px; display: block; background: linear-gradient(90deg, rgba(0, 195, 255, .05), #18c9ff 11%, #8a56ff 31%, #15f6ea 50%, #ff9b1b 73%, #438cff 91%, rgba(67, 140, 255, .05)); box-shadow: 0 0 14px rgba(0, 180, 255, .75), 0 0 18px rgba(255, 143, 26, .28) } .certifications.certs-hud .cert-card{ min-height: 320px; padding: 30px 22px 18px; clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px); background: transparent; border: 0; color: #f7fbff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 0 28px color-mix(in srgb, var(--cert-accent) 38%, transparent) } .certifications.certs-hud .cert-card::before{ inset: 0; display: block; opacity: 1; background: var(--cert-accent); filter: drop-shadow(0 0 13px color-mix(in srgb, var(--cert-accent) 78%, transparent)) } .certifications.certs-hud .cert-card::after{ inset: 1px; opacity: 1; background: linear-gradient(90deg, color-mix(in srgb, var(--cert-accent) 11%, transparent), transparent 28%, color-mix(in srgb, var(--cert-accent) 8%, transparent)), radial-gradient(circle at 50% 16%, color-mix(in srgb, var(--cert-accent) 18%, transparent), transparent 38%), radial-gradient(circle, color-mix(in srgb, var(--cert-accent) 30%, transparent) 1px, transparent 1.2px) 18px 36px / 13px 13px, linear-gradient(180deg, rgba(5, 15, 36, .98), rgba(3, 10, 24, .98)) } .certifications.certs-hud .cert-card time{ top: -58px; min-width: 70px; height: 36px; padding: 0 14px; border-radius: 0; font-size: 17px; line-height: 34px; background: rgba(6, 18, 44, .98); color: var(--cert-accent); clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 9px), 0 9px) } .certifications.certs-hud .cert-card time::before .certifications.certs-hud .cert-card time::after{ top: 50px; width: 15px; height: 15px; border-width: 2px; background: #061a38; box-shadow: 0 0 0 4px rgba(7, 24, 58, .95), 0 0 16px currentColor } .certifications.certs-hud .cert-icon, .certifications.certs-hud .cert-icon-img, .certifications.certs-hud .cert-icon-text, .certifications.certs-hud .cert-icon.angular, .certifications.certs-hud .cert-icon.ts, .certifications.certs-hud .cert-icon.openai, .certifications.certs-hud .cert-icon.aws, .certifications.certs-hud .cert-icon.gcp{ width: 72px; height: 72px; margin-bottom: 12px; border-radius: 0; background: transparent; box-shadow: none } .certifications.certs-hud .cert-icon::before, .certifications.certs-hud .cert-icon::after, .certifications.certs-hud .cert-icon-img::before, .certifications.certs-hud .cert-icon-img::after, .certifications.certs-hud .cert-icon-text::before, .certifications.certs-hud .cert-icon-text::after{ display: none } .certifications.certs-hud .cert-icon-img img{ width: 70px; height: 70px; object-fit: contain; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--cert-accent) 70%, transparent)) } .certifications.certs-hud .cert-card h3{ min-height: 70px; font-size: 20px; line-height: 1.16; color: #fff } .certifications.certs-hud .cert-card h3::after .certifications.certs-hud .cert-card p .certifications.certs-hud .cert-card small .certifications.certs-hud .cert-card a{ width: 124px; height: 34px; margin-top: 13px; gap: 12px; font-size: 13px; background: rgba(2, 11, 28, .78); box-shadow: inset 0 0 16px color-mix(in srgb, var(--cert-accent) 18%, transparent), 0 0 12px color-mix(in srgb, var(--cert-accent) 18%, transparent) } .certifications.certs-hud .cert-grid{ position: relative; z-index: 3; margin-top: 54px; padding-top: 76px; overflow-x: auto; overflow-y: visible !important } .certifications.certs-hud .cert-grid::before{ top: 36px; z-index: 1; opacity: 1 } .certifications.certs-hud .cert-card{ position: relative; z-index: 2; clip-path: none; overflow: visible !important } .certifications.certs-hud .cert-card::before, .certifications.certs-hud .cert-card::after{ clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px) } .certifications.certs-hud .cert-card time{ position: absolute; left: 50%; top: -66px; z-index: 20; display: inline-grid; place-items: center; transform: translateX(-50%); opacity: 1; visibility: visible } .certifications.certs-hud .cert-card time::before{ content: ""; position: absolute; left: 50%; top: 34px; width: 2px; height: 70px; z-index: 19; background: linear-gradient(180deg, var(--cert-accent), #f5fcff 58%, var(--cert-accent)); transform: translateX(-50%); box-shadow: 0 0 12px var(--cert-accent), 0 0 22px color-mix(in srgb, var(--cert-accent) 55%, transparent) } .certifications.certs-hud .cert-card time::after{ content: ""; position: absolute; left: 50%; top: 66px; width: 18px; height: 18px; z-index: 21; border: 2px solid #e9fbff; border-radius: 50%; background: #062143; transform: translateX(-50%); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cert-accent) 34%, transparent), 0 0 18px var(--cert-accent) } .certifications.certs-hud .cert-grid{ --cert-track-card: calc((100% - 128px) / 5); --cert-track-gap: 32px } .certifications.certs-hud .cert-grid::before{ left: calc(var(--cert-track-card) / 2); right: auto; width: calc((var(--cert-track-card) * 5)+(var(--cert-track-gap) * 5)); transform: none } .certifications.certs-hud{ grid-template-columns: 388px minmax(0, 1fr); min-height: 508px; padding: 38px 58px 70px 72px; background: linear-gradient(rgba(32, 86, 168, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(32, 86, 168, .035) 1px, transparent 1px), radial-gradient(circle at 16% 54%, rgba(73, 142, 255, .11), transparent 18%), radial-gradient(circle at 82% 52%, rgba(255, 139, 31, .08), transparent 17%), linear-gradient(105deg, rgba(2, 8, 18, .98), rgba(1, 6, 15, .98)); background-size: 34px 34px, 34px 34px, auto, auto, auto } .certifications.certs-hud .cert-grid{ grid-auto-columns: calc((100% - 128px) / 5); gap: 32px; margin-top: 68px; padding: 48px 0 20px } .certifications.certs-hud .cert-card{ min-height: 320px; padding: 30px 22px 18px; color: #fff; background: transparent; clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px) } .certifications.certs-hud .cert-card::before{ inset: 0; background: var(--cert-accent); filter: drop-shadow(0 0 12px color-mix(in srgb, var(--cert-accent), transparent 34%)); opacity: 1 } .certifications.certs-hud .cert-card::after{ inset: 2px; opacity: 1; background: linear-gradient(135deg, transparent 18px, color-mix(in srgb, var(--cert-accent), transparent 62%) 19px, transparent 20px) 18px 18px / calc(100% - 36px) calc(100% - 36px) no-repeat, radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--cert-accent), transparent 72%) 1px, transparent 2px) 0 0 / 13px 13px, radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--cert-accent), transparent 88%), transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--cert-accent), #061125 88%), rgba(2, 8, 18, .97)); box-shadow: inset 0 0 30px color-mix(in srgb, var(--cert-accent), transparent 88%), inset 0 0 0 16px rgba(3, 9, 22, .16) } .certifications.certs-hud .cert-card time{ top: -58px; min-width: 70px; height: 36px; font-size: 17px } .certifications.certs-hud .cert-card time::before .certifications.certs-hud .cert-card time::after{ top: 50px; width: 15px; height: 15px } .certifications.certs-hud .cert-icon-img img{ width: 62px; height: 62px; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--cert-accent), transparent 34%)) } .certifications.certs-hud .cert-card h3 .certifications.certs-hud .cert-card h3::after .certifications.certs-hud .cert-card p, .certifications.certs-hud .cert-card small{ font-size: 13px } .certifications.certs-hud .cert-card small{ margin-top: 12px } .certifications.certs-hud .cert-card a{ width: 124px; height: 34px; margin-top: 13px; font-size: 13px } .certifications.certs-hud::before, .certifications.certs-hud::after{ content: ""; position: absolute; pointer-events: none } .certifications.certs-hud::before{ inset: 26px 36px 52px; border: 1px solid rgba(85, 141, 255, .44); clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 18px); box-shadow: inset 0 0 42px rgba(42, 107, 218, .11) } .certifications.certs-hud::after{ left: 184px; right: 210px; top: 53px; height: 1px; background: linear-gradient(90deg, transparent, #5b95ff 7%, #4d75d8 42%, #ffb34e 70%, #6d91ff 93%, transparent); box-shadow: 0 0 14px rgba(89, 153, 255, .68) } .certifications.certs-hud .cert-copy{ position: relative; z-index: 2; display: block; padding: 18px 0 0 } .certifications.certs-hud .cert-copy::after{ content: ""; display: block; width: 305px; height: 2px; margin-top: 26px; background: linear-gradient(90deg, #6ea7ff 0 39%, #ffaf2d 39% 41%, rgba(255, 175, 45, .8) 42%, transparent 88%); box-shadow: 0 0 10px rgba(91, 157, 255, .38), 0 0 10px rgba(255, 169, 37, .55) } .certifications.certs-hud .cert-copy .label{ display: inline-flex; align-items: center; gap: 13px; margin: 0 0 23px; color: #6aa9ff; font-family: var(--font-ui); font-size: 19px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .certifications.certs-hud .cert-copy .label i, .certifications.certs-hud .cert-copy .label svg{ width: 28px; height: 28px } .certifications.certs-hud .cert-copy h2{ margin: 0; color: #fff; font-family: var(--font-heading); font-size: 43px; font-weight: 900; line-height: 1; letter-spacing: 0; text-transform: uppercase; } .certifications.certs-hud .cert-copy h2::after{ display: none } .certifications.certs-hud .cert-copy>p:not(.label){ width: 300px; margin: 33px 0 0; color: rgba(235, 239, 247, .88); font-size: 16px; line-height: 1.65 } .certifications.certs-hud .cert-trust{ position: absolute; left: 0; top: 285px; display: grid; grid-template-columns: 66px 1fr; align-items: center; width: 356px; min-height: 112px; padding: 17px 24px; color: #dce8ff; border: 1px solid rgba(128, 171, 255, .84); background: radial-gradient(circle at 14% 50%, rgba(73, 132, 255, .35), transparent 28%), linear-gradient(135deg, rgba(9, 32, 73, .85), rgba(5, 14, 33, .9)); clip-path: polygon(17px 0, calc(100% - 17px) 0, 100% 17px, 100% calc(100% - 17px), calc(100% - 17px) 100%, 17px 100%, 0 calc(100% - 17px), 0 17px); box-shadow: inset 0 0 26px rgba(67, 126, 255, .21), 0 0 20px rgba(60, 120, 255, .22) } .certifications.certs-hud .cert-trust i, .certifications.certs-hud .cert-trust svg{ width: 48px; height: 48px; color: #69a8ff; filter: drop-shadow(0 0 12px rgba(95, 157, 255, .88)) } .certifications.certs-hud .cert-trust span{ display: block; color: rgba(232, 239, 251, .84); font-size: 14px; line-height: 1.5 } .certifications.certs-hud .cert-trust b{ display: block; margin-bottom: 5px; color: #74b6ff; font-size: 15px } .certifications.certs-hud .cert-grid{ position: relative; z-index: 3; display: grid; grid-auto-flow: column; grid-auto-columns: 216px; grid-template-columns: none; gap: 34px; align-self: start; padding-top: 92px; padding-bottom: 20px; overflow-x: auto; overflow-y: visible; overscroll-behavior-inline: contain; scrollbar-color: rgba(119, 171, 255, .72) rgba(6, 18, 38, .82); scrollbar-width: thin; scroll-padding-inline: 6px; scroll-snap-type: x proximity } .certifications.certs-hud .cert-grid::before{ content: ""; position: absolute; z-index: 0; left: 5%; right: 5%; top: 38px; display: block; height: 2px; background: linear-gradient(90deg, rgba(101, 167, 255, .12), #6aa7ff 8%, #8f6cff 30%, #6ee6ef 52%, #eda44d 73%, #769dff 93%, rgba(101, 167, 255, .12)); box-shadow: 0 0 10px rgba(101, 167, 255, .72), 0 0 18px rgba(118, 118, 255, .28) } .certifications.certs-hud .cert-grid::-webkit-scrollbar{ height: 10px } .certifications.certs-hud .cert-grid::-webkit-scrollbar-track{ background: rgba(4, 14, 31, .84); border: 1px solid rgba(80, 137, 255, .26) } .certifications.certs-hud .cert-grid::-webkit-scrollbar-thumb{ background: linear-gradient(90deg, #5c95ff, #79e6ef, #f1a44d); border: 2px solid rgba(4, 14, 31, .84); box-shadow: 0 0 10px rgba(107, 165, 255, .5) } .certifications.certs-hud .cert-card{ --cert-accent: #6fa8ff; --cert-bg-1: rgba(10, 29, 62, .82); --cert-bg-2: rgba(3, 9, 22, .96); position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; min-height: 320px; padding: 46px 20px 17px; color: #fff; text-align: center; border: 0; background: transparent; clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 24px), calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px), 0 24px); z-index: 1; scroll-snap-align: start } .certifications.certs-hud .cert-card::before, .certifications.certs-hud .cert-card::after{ content: ""; position: absolute; clip-path: inherit; pointer-events: none } .certifications.certs-hud .cert-card::before{ inset: 0; z-index: -2; background: var(--cert-accent); box-shadow: 0 0 18px color-mix(in srgb, var(--cert-accent), transparent 30%); filter: drop-shadow(0 0 9px color-mix(in srgb, var(--cert-accent), transparent 38%)) } .certifications.certs-hud .cert-card::after{ inset: 2px; z-index: -1; background: linear-gradient(135deg, transparent 18px, color-mix(in srgb, var(--cert-accent), transparent 62%) 19px, transparent 20px) 18px 18px / calc(100% - 36px) calc(100% - 36px) no-repeat, radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--cert-accent), transparent 88%), transparent 34%), radial-gradient(circle, rgba(99, 149, 255, .13) 1px, transparent 1.5px), linear-gradient(180deg, var(--cert-bg-1), var(--cert-bg-2)); background-size: calc(100% - 36px) calc(100% - 36px), auto, 13px 13px, auto; box-shadow: inset 0 0 28px rgba(87, 145, 255, .1), inset 0 0 0 18px rgba(4, 13, 29, .2) } .certifications.certs-hud .cert-card.blue-border{ --cert-accent: #6ea0ff; --cert-bg-1: rgba(8, 26, 69, .9) } .certifications.certs-hud .cert-card.purple-border{ --cert-accent: #a77cff; --cert-bg-1: rgba(27, 16, 65, .9) } .certifications.certs-hud .cert-card.teal-border{ --cert-accent: #75e9ee; --cert-bg-1: rgba(8, 47, 54, .76) } .certifications.certs-hud .cert-card.orange-border{ --cert-accent: #f5a03a; --cert-bg-1: rgba(48, 24, 7, .86) } .certifications.certs-hud .cert-card time{ position: absolute; z-index: 4; top: -72px; left: 50%; min-width: 76px; height: 41px; display: grid; place-items: center; color: #cfe8ff; font-family: var(--font-ui); font-size: 20px; font-weight: 800; letter-spacing: .03em; border: 1px solid var(--cert-accent); background: linear-gradient(180deg, color-mix(in srgb, var(--cert-accent), #11264c 24%), color-mix(in srgb, var(--cert-accent), #040b19 82%)); clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); transform: translateX(-50%); box-shadow: 0 0 0 2px rgba(10, 22, 46, .86), 0 0 18px color-mix(in srgb, var(--cert-accent), transparent 35%), inset 0 0 14px color-mix(in srgb, var(--cert-accent), transparent 72%) } .certifications.certs-hud .cert-card time::before{ content: ""; position: absolute; left: 50%; top: 40px; width: 2px; height: 36px; background: linear-gradient(180deg, var(--cert-accent), color-mix(in srgb, var(--cert-accent), #fff 22%)); transform: translateX(-50%); box-shadow: 0 0 10px var(--cert-accent), 0 0 18px color-mix(in srgb, var(--cert-accent), transparent 30%) } .certifications.certs-hud .cert-card time::after{ content: ""; position: absolute; left: 50%; top: 70px; width: 18px; height: 18px; border: 2px solid #dff4ff; border-radius: 50%; background: var(--cert-accent); transform: translateX(-50%); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cert-accent), transparent 76%), 0 0 18px var(--cert-accent), 0 0 30px color-mix(in srgb, var(--cert-accent), transparent 38%) } .certifications.certs-hud .cert-icon{ position: relative; width: 68px; height: 70px; display: grid; place-items: center; margin-bottom: 14px; color: var(--cert-accent); background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .12), transparent 42%), linear-gradient(145deg, rgba(10, 28, 61, .96), rgba(3, 9, 22, .96)); border: 1px solid color-mix(in srgb, var(--cert-accent), transparent 18%); border-radius: 50%; font-family: var(--font-heading); font-size: 24px; font-weight: 900; letter-spacing: .03em; line-height: 1; box-shadow: 0 0 18px color-mix(in srgb, var(--cert-accent), transparent 52%), inset 0 0 18px color-mix(in srgb, var(--cert-accent), transparent 84%) } .certifications.certs-hud .cert-icon::before{ content: ""; position: absolute; inset: 8px; border: 1px solid color-mix(in srgb, var(--cert-accent), transparent 34%); border-radius: 50%; pointer-events: none } .certifications.certs-hud .cert-icon::after{ content: ""; position: absolute; left: 18px; right: 18px; bottom: 14px; height: 2px; background: var(--cert-accent); box-shadow: 0 0 8px var(--cert-accent) } .certifications.certs-hud .cert-card h3{ min-height: 82px; margin: 0; color: #f7f9ff; font-family: var(--font-ui); font-size: 24px; font-weight: 800; line-height: 1.24; } .certifications.certs-hud .cert-card h3::after{ content: ""; display: block; width: 39px; height: 2px; margin: 18px auto 0; background: var(--cert-accent); box-shadow: 0 0 10px var(--cert-accent) } .certifications.certs-hud .cert-card p{ margin: 0; color: rgba(232, 235, 244, .88); font-size: 16px; line-height: 1.35 } .certifications.certs-hud .cert-card small{ margin-top: 22px; color: rgba(239, 243, 250, .86); font-size: 16px; font-weight: 500 } .certifications.certs-hud .cert-card a{ width: 150px; min-width: 0; height: 43px; margin-top: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; color: var(--cert-accent); font-family: var(--font-ui); font-size: 16px; font-weight: 900; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; border: 1px solid color-mix(in srgb, var(--cert-accent), transparent 16%); background: rgba(3, 12, 26, .78); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); box-shadow: inset 0 0 13px color-mix(in srgb, var(--cert-accent), transparent 82%) } .certifications.certs-hud .cert-card a i, .certifications.certs-hud .cert-card a svg{ width: 17px; height: 17px } @media (max-width:1500px) { .certifications.certs-hud{ grid-template-columns: 320px minmax(0, 1fr); gap: 26px; padding-left: 48px; padding-right: 42px } .certifications.certs-hud .cert-grid{ gap: 18px } .certifications.certs-hud .cert-card{ padding-left: 18px; padding-right: 18px } .certifications.certs-hud .cert-card h3{ font-size: 18px } .certifications.certs-hud .cert-trust{ width: 320px } } @media (max-width:1100px) { .certifications.certs-hud{ grid-template-columns: 1fr; min-height: 0; padding: 42px 32px 88px } .certifications.certs-hud::after{ display: none } .certifications.certs-hud .cert-copy{ padding-top: 0 } .certifications.certs-hud .cert-copy>p:not(.label), .certifications.certs-hud .cert-copy::after{ width: min(520px, 100%) } .certifications.certs-hud .cert-trust{ position: relative; top: auto; width: min(420px, 100%); margin-top: 28px } .certifications.certs-hud .cert-grid{ grid-template-columns: none; grid-auto-columns: minmax(190px, 230px); gap: 64px 22px; padding-top: 78px } .certifications.certs-hud .cert-grid::before{ left: 8%; right: 8%; top: 31px } .certifications.certs-hud .cert-card time{ top: -62px } .certifications.certs-hud .cert-card time::before{ height: 29px } .certifications.certs-hud .cert-card time::after{ top: 63px } } @media (max-width:700px) { .certifications.certs-hud{ width: calc(100% - 22px); padding: 32px 16px 82px; box-shadow: inset 0 0 0 8px rgba(5, 16, 34, .88), inset 0 0 38px rgba(61, 126, 255, .14) } .certifications.certs-hud::before{ inset: 15px 12px 48px } .certifications.certs-hud .cert-copy .label{ font-size: 15px } .certifications.certs-hud .cert-copy h2{ font-size: clamp(34px, 10vw, 43px) } .certifications.certs-hud .cert-copy>p:not(.label){ font-size: 15px } .certifications.certs-hud .cert-trust{ grid-template-columns: 54px 1fr; padding: 15px 16px } .certifications.certs-hud .cert-trust i, .certifications.certs-hud .cert-trust svg{ width: 38px; height: 38px } .certifications.certs-hud .cert-grid{ grid-template-columns: none; grid-auto-columns: minmax(220px, 76vw); gap: 58px; padding-top: 70px } .certifications.certs-hud .cert-grid::before{ display: block; left: 18px; right: 18px; top: 27px } .certifications.certs-hud .cert-card{ min-height: 308px; padding: 28px 20px 20px } } .certifications.certs-hud .cert-card::before, .certifications.certs-hud .cert-card::after .certifications.certs-hud .cert-card time{ position: absolute; left: 50%; top: -64px; z-index: 8; display: inline-grid; place-items: center; transform: translateX(-50%); opacity: 1; visibility: visible } .certifications.certs-hud .cert-card time::before{ top: 36px; height: 52px; z-index: 7 } .certifications.certs-hud .cert-card time::after{ top: 56px; z-index: 2 } .certifications.certs-hud .cert-grid{ overflow-y: visible !important } .certifications.certs-hud .cert-card{ overflow: visible !important } .certifications.certs-hud .cert-card time{ top: -66px; z-index: 20 } .certifications.certs-hud .cert-trust::before, .certifications.certs-hud .cert-trust::after{ content: ""; position: absolute; clip-path: inherit; pointer-events: none } .certifications.certs-hud .cert-trust::before{ inset: 0; z-index: -2; background: linear-gradient(115deg, #89a8ff 0%, #4d7cff 42%, #7bb9ff 100%); box-shadow: 0 0 20px rgba(94, 145, 255, .42) } .certifications.certs-hud .cert-trust::after{ inset: 2px; z-index: -1; background: radial-gradient(circle at 22% 52%, rgba(75, 121, 255, .22), transparent 35%), linear-gradient(135deg, rgba(12, 28, 69, .98), rgba(7, 18, 46, .98)); box-shadow: inset 0 0 34px rgba(68, 113, 255, .18), inset 0 0 0 1px rgba(132, 175, 255, .12) } .certifications.certs-hud .cert-trust i, .certifications.certs-hud .cert-trust svg, .certifications.certs-hud .cert-trust-icon{ position: absolute; left: 54px; top: 50%; width: 72px; height: 72px; color: #8fb3ff; stroke-width: 2.6; transform: translateY(-50%); filter: invert(72%) sepia(49%) saturate(931%) hue-rotate(194deg) brightness(103%) contrast(101%) drop-shadow(0 0 13px rgba(128, 174, 255, .82)) } .certifications.certs-hud .cert-trust span{ display: block; max-width: 230px; font-size: 19px; line-height: 1.42; color: rgba(230, 235, 247, .88) } .certifications.certs-hud .cert-trust b{ display: block; margin-bottom: 10px; color: #94b8ff; font-size: 20px; font-weight: 800; line-height: 1.25 } .certifications.certs-hud .cert-icon, .certifications.certs-hud .cert-icon-img, .certifications.certs-hud .cert-icon-img img, .certifications.certs-hud .cert-icon.angular, .certifications.certs-hud .cert-icon.ts, .certifications.certs-hud .cert-icon.openai, .certifications.certs-hud .cert-icon.aws, .certifications.certs-hud .cert-icon.gcp{ border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important } .certifications.certs-hud .cert-icon::before, .certifications.certs-hud .cert-icon::after, .certifications.certs-hud .cert-icon-img::before, .certifications.certs-hud .cert-icon-img::after, .certifications.certs-hud .cert-icon-text::before, .certifications.certs-hud .cert-icon-text::after{ display: none !important; content: none !important } .certifications.certs-hud .cert-card time{ --year-cut: 12px; min-width: 76px; height: 40px; border: 0; background: transparent; overflow: visible; clip-path: polygon(var(--year-cut) 0, calc(100% - var(--year-cut)) 0, 100% var(--year-cut), 100% calc(100% - var(--year-cut)), calc(100% - var(--year-cut)) 100%, var(--year-cut) 100%, 0 calc(100% - var(--year-cut)), 0 var(--year-cut)) } .certifications.certs-hud .cert-card time>*{ position: relative; z-index: 2 } .certifications.certs-hud .cert-card time::before{ top: 38px } .certifications.certs-hud .cert-card time::after{ top: 66px } .certifications.certs-hud .cert-card time{ box-shadow: 0 0 0 2px rgba(5, 13, 30, .9), 0 0 18px color-mix(in srgb, var(--cert-accent) 68%, transparent) } .certifications.certs-hud .cert-card time{ background: linear-gradient(180deg, color-mix(in srgb, var(--cert-accent) 32%, #17264b), color-mix(in srgb, var(--cert-accent) 14%, #060b1a)) } .certifications.certs-hud .cert-grid::before{ top: 20px } .certifications.certs-hud .cert-card time{ top: -72px } .certifications.certs-hud .cert-card time::before{ top: 40px; height: 72px } .certifications.certs-hud .cert-card time::after{ top: 68px } .certifications.certs-hud .cert-grid::before{ top: 23px; height: 2px; z-index: 1; background: linear-gradient(90deg, rgba(64, 124, 255, .18), #6ea0ff 16%, #8f63ff 34%, #74e7ee 52%, #f1a142 74%, #6f9bff 93%, rgba(64, 124, 255, .12)); box-shadow: 0 0 9px rgba(112, 160, 255, .72), 0 0 18px rgba(112, 231, 238, .26) } .certifications.certs-hud .cert-card time{ top: -72px; height: 40px; min-width: 76px; z-index: 6 } .certifications.certs-hud .cert-card time::before{ top: 40px; height: 42px; z-index: 5 } .certifications.certs-hud .cert-card time::after{ top: 64px; width: 18px; height: 18px; z-index: 7 } .certifications.certs-hud .cert-card time{ top: -72px; height: 40px; min-width: 76px; overflow: visible; border: 1px solid var(--cert-accent); clip-path: none; border-radius: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--cert-accent) 32%, #17264b), color-mix(in srgb, var(--cert-accent) 14%, #060b1a)); box-shadow: 0 0 0 2px rgba(5, 13, 30, .9), 0 0 18px color-mix(in srgb, var(--cert-accent) 68%, transparent), inset 0 0 14px color-mix(in srgb, var(--cert-accent) 24%, transparent) } .certifications.certs-hud .cert-card time{ clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px) } .certifications.certs-hud .cert-card time::before, .certifications.certs-hud .cert-card time::after{ clip-path: none } .certifications.certs-hud .cert-card time::before{ top: 38px; height: 46px; z-index: -1 } .certifications.certs-hud .cert-card time::after{ top: 62px; z-index: 22 } .certifications.certs-hud .cert-grid{ padding-top: 74px } .certifications.certs-hud .cert-grid::before{ top: 22px } .certifications.certs-hud{ grid-template-columns: 390px minmax(0, 1fr); min-height: 520px; padding: 38px 58px 56px 72px; column-gap: 36px } .certifications.certs-hud .cert-trust{ left: 0; top: 284px; width: 356px; min-height: 98px; padding: 18px 22px 18px 92px } .certifications.certs-hud .cert-grid{ margin-top: 32px; padding-top: 68px; padding-bottom: 8px } .certifications.certs-hud .cert-grid::before{ top: 22px; left: calc(var(--cert-track-card) / 2); width: calc((var(--cert-track-card) * 5)+(var(--cert-track-gap) * 5)) } .certifications.certs-hud .cert-card{ min-height: 300px; padding: 24px 18px 16px } .certifications.certs-hud .cert-card time{ top: -66px; min-width: 68px; height: 34px; font-size: 16px; line-height: 32px; clip-path: none !important } .certifications.certs-hud .cert-card time::before{ top: 34px; height: 43px } .certifications.certs-hud .cert-card time::after{ top: 53px; width: 16px; height: 16px } .certifications.certs-hud{ min-height: 650px; padding-top: 50px; padding-bottom: 82px } .certifications.certs-hud .cert-grid{ margin-top: 54px; padding-top: 76px } .certifications.certs-hud .cert-card{ min-height: 330px } .certifications.certs-hud .cert-card{ background: transparent !important; box-shadow: 0 0 28px color-mix(in srgb, var(--cert-accent) 32%, transparent) !important; overflow: visible !important } .certifications.certs-hud .cert-card::before, .certifications.certs-hud .cert-card::after{ clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px) !important } .certifications.certs-hud .cert-card::after{ inset: 1px !important } .certifications.certs-hud{ min-height: 760px; padding-top: 56px; padding-bottom: 130px } .certifications.certs-hud .cert-trust{ top: 430px } .certifications.certs-hud .cert-grid{ margin-top: 60px } .certifications.certs-hud{ padding-top: 58px; padding-bottom: 110px; align-items: start } .certifications.certs-hud .cert-copy{ padding-top: 0 } .certifications.certs-hud .cert-copy h2{ margin-top: 20px } .certifications.certs-hud .cert-copy p:not(.label){ margin-top: 26px } .certifications.certs-hud .cert-trust{ top: 422px } .certifications.certs-hud .cert-grid{ margin-top: 52px; padding-top: 78px; padding-bottom: 34px } .certifications.certs-hud .cert-card{ min-height: 350px; padding-top: 30px; padding-bottom: 20px } .certifications.certs-hud{ grid-template-columns: 390px minmax(0, 1fr); min-height: 520px; padding: 38px 58px 56px 72px; column-gap: 36px; align-items: start } .certifications.certs-hud .cert-copy{ padding-top: 8px } .certifications.certs-hud .cert-copy h2{ margin-top: 0; font-size: 42px } .certifications.certs-hud .cert-copy p:not(.label){ max-width: 292px; margin-top: 24px; font-size: 15px; line-height: 1.58 } .certifications.certs-hud .cert-trust{ margin: 0; left: 0; top: 284px; width: 356px; min-height: 98px; padding: 18px 22px 18px 92px; display: block; clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px) } .certifications.certs-hud .cert-trust i, .certifications.certs-hud .cert-trust svg, .certifications.certs-hud .cert-trust-icon{ left: 24px; width: 54px; height: 54px } .certifications.certs-hud .cert-trust span{ max-width: 240px; font-size: 13px; line-height: 1.45 } .certifications.certs-hud .cert-trust b{ margin-bottom: 5px; font-size: 14px; line-height: 1.2 } .certifications.certs-hud .cert-grid{ grid-column: 2; grid-auto-columns: calc((100% - 128px) / 5); gap: 32px; margin-top: 32px; padding-top: 68px; padding-bottom: 8px; overflow-x: auto; overflow-y: visible !important } .certifications.certs-hud .cert-grid::before{ top: 22px; left: calc(var(--cert-track-card) / 2); right: auto; width: calc((var(--cert-track-card) * 5)+(var(--cert-track-gap) * 4)); height: 2px } .certifications.certs-hud .cert-card .certifications.certs-hud .cert-card time{ top: -66px; min-width: 68px; height: 34px; font-size: 16px; line-height: 32px; overflow: visible !important; clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px) !important } .certifications.certs-hud .cert-card time::before{ top: 34px; height: 43px; z-index: 5 } .certifications.certs-hud .cert-card time::after{ top: 53px; width: 16px; height: 16px; z-index: 22 } .certifications.certs-hud .cert-icon, .certifications.certs-hud .cert-icon-img{ width: 62px; height: 62px; margin-bottom: 10px } .certifications.certs-hud .cert-icon-img img{ width: 62px; height: 62px } .certifications.certs-hud .cert-card h3{ min-height: 62px; font-size: 18px; line-height: 1.16 } .certifications.certs-hud .cert-card p, .certifications.certs-hud .cert-card small{ font-size: 12px } .certifications.certs-hud .cert-card a{ width: 118px; height: 32px; margin-top: 11px; font-size: 12px } .certifications.certs-hud .cert-card time{ overflow: visible !important; clip-path: none !important; border: 1px solid var(--cert-accent); background: linear-gradient(135deg, transparent 0 9px, rgba(7, 17, 42, .96) 9px) top left / 50% 50% no-repeat, linear-gradient(225deg, transparent 0 9px, rgba(7, 17, 42, .96) 9px) top right / 50% 50% no-repeat, linear-gradient(45deg, transparent 0 9px, rgba(7, 17, 42, .96) 9px) bottom left / 50% 50% no-repeat, linear-gradient(315deg, transparent 0 9px, rgba(7, 17, 42, .96) 9px) bottom right / 50% 50% no-repeat } .certifications.certs-hud .cert-grid::before{ width: calc((var(--cert-track-card) * 5)+(var(--cert-track-gap) * 5)) } .certifications.certs-hud .cert-card time{ top: -72px; min-width: 76px; height: 40px; overflow: visible !important; clip-path: none !important; border: 1px solid var(--cert-accent); background: linear-gradient(135deg, transparent 0 10px, rgba(7, 17, 42, .96) 10px) top left / 50% 50% no-repeat, linear-gradient(225deg, transparent 0 10px, rgba(7, 17, 42, .96) 10px) top right / 50% 50% no-repeat, linear-gradient(45deg, transparent 0 10px, rgba(7, 17, 42, .96) 10px) bottom left / 50% 50% no-repeat, linear-gradient(315deg, transparent 0 10px, rgba(7, 17, 42, .96) 10px) bottom right / 50% 50% no-repeat; box-shadow: 0 0 0 2px rgba(5, 13, 30, .9), 0 0 18px color-mix(in srgb, var(--cert-accent) 68%, transparent), inset 0 0 16px color-mix(in srgb, var(--cert-accent) 28%, transparent) } .certifications.certs-hud .cert-card time::before{ top: 39px; height: 44px; z-index: -1 } .certifications.certs-hud .cert-copy{ padding-top: 32px } .certifications.certs-hud .cert-grid{ margin-top: 84px } .certifications.certs-hud .cert-trust{ top: calc(84px+78px+350px - 98px) } .contact{ width: min(1840px, calc(100% - 80px)); margin: 0 auto; padding: 44px 80px 44px 520px; display: grid; grid-template-columns: minmax(380px, .78fr) minmax(620px, 1.22fr); gap: 44px; align-items: center; border: 1px solid rgba(0, 153, 255, .24); overflow: hidden; background: linear-gradient(rgba(46, 103, 170, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(46, 103, 170, .035) 1px, transparent 1px), radial-gradient(circle at 10% 46%, rgba(66, 132, 255, .17), transparent 16%), radial-gradient(circle at 13% 48%, rgba(255, 148, 31, .11), transparent 14%), linear-gradient(90deg, rgba(2, 10, 21, .96), rgba(1, 8, 18, .95)); background-size: 40px 40px, 40px 40px, auto, auto, auto; box-shadow: inset 0 0 0 1px rgba(0, 153, 255, .08), inset 0 0 48px rgba(0, 0, 0, .3) } .radar{ position: absolute; left: 52px; top: 50%; width: 220px; height: 220px; transform: translateY(-50%); border: 1px solid rgba(0, 231, 255, .26); border-radius: 50%; background: repeating-radial-gradient(circle, rgba(102, 171, 255, .22) 0 2px, transparent 3px 18px), radial-gradient(circle, transparent 0 23%, rgba(0, 153, 255, .12) 23.8% 25%, transparent 25.8% 45%, rgba(255, 139, 31, .12) 46% 47%, transparent 48%), conic-gradient(from -24deg, rgba(79, 146, 255, .78), transparent 36%, rgba(255, 159, 33, .72), transparent 65%, rgba(79, 146, 255, .58)); opacity: .96; animation: rotate 11s linear infinite; filter: drop-shadow(0 0 18px rgba(85, 157, 255, .52)) drop-shadow(0 0 14px rgba(255, 139, 31, .32)) } .radar::before, .radar::after{ content: ""; position: absolute; border-radius: 50%; pointer-events: none } .radar::before{ inset: 44px; border: 2px solid rgba(108, 174, 255, .34); box-shadow: inset 0 0 20px rgba(61, 132, 255, .15), 0 0 16px rgba(255, 139, 31, .22) } .radar::after{ inset: 82px; border: 1px solid rgba(119, 178, 255, .52); background: rgba(1, 9, 20, .55); box-shadow: 0 0 24px rgba(75, 150, 255, .2) } .radar.hud-portrait{ width: 460px; height: 460px; display: grid; place-items: center; border: 0; border-radius: 0; background: transparent; box-shadow: none; animation: none } .radar.hud-portrait::before, .radar.hud-portrait::after{ content: none } .hud-frame{ width: 420px; height: 420px; position: relative; display: grid; place-items: center } .hud-ring{ position: absolute; border-radius: 50%; border: 2px solid rgba(103, 194, 255, .78); filter: drop-shadow(0 0 8px rgba(103, 194, 255, .72)) drop-shadow(0 0 10px rgba(255, 156, 40, .32)); will-change: transform, translate } .hud-ring-1{ width: 410px; height: 410px; border-style: dashed; border-color: rgba(103, 194, 255, .72); animation: rotate 18s linear infinite } .hud-ring-2{ width: 340px; height: 340px; border-top-color: transparent; border-right-color: #ff9c28; border-bottom-color: transparent; border-left-color: #68c7ff; animation: rotateReverse 12s linear infinite } .hud-ring-3{ width: 270px; height: 270px; border-style: dotted; border-color: rgba(255, 156, 40, .78); animation: rotate 10s linear infinite } .hud-ring-4{ width: 210px; height: 210px; border-top-color: #ffd36c; border-right-color: transparent; border-bottom-color: #68c7ff; border-left-color: transparent; animation: rotateReverse 7s linear infinite } .avatar-box{ position: relative; z-index: 5; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 247, 239, .95) 0 8%, rgba(120, 202, 255, .96) 9% 18%, transparent 19%), radial-gradient(circle, rgba(5, 18, 38, .96) 0 42%, rgba(16, 51, 96, .82) 43% 58%, transparent 59%), conic-gradient(from 18deg, #68c7ff, #315dff, #ff9c28, #ffd36c, #68c7ff); box-shadow: 0 0 24px rgba(103, 194, 255, .7), 0 0 28px rgba(255, 142, 31, .42), inset 0 0 24px rgba(255, 255, 255, .18) } .avatar-box::before, .avatar-box::after{ content: ""; position: absolute; inset: 18px; border-radius: 50%; pointer-events: none } .avatar-box::before{ border: 2px solid rgba(120, 202, 255, .58); box-shadow: inset 0 0 20px rgba(103, 194, 255, .26), 0 0 18px rgba(103, 194, 255, .38) } .avatar-box::after{ inset: 50%; width: 14px; height: 14px; background: #fff7ef; box-shadow: 0 0 14px rgba(255, 247, 239, .92), 0 0 24px rgba(255, 211, 108, .72); transform: translate(-50%, -50%) } .contact-info{ position: relative; z-index: 2; align-self: center; padding-left: 0 } .contact-info .label{ margin-bottom: 12px; color: #74c6ff; font-size: 14px !important; letter-spacing: .13em; } .contact-info h2{ max-width: 520px; margin: 0 0 18px; font-size: 30px !important; line-height: 1.12; letter-spacing: 0; } .contact-info .contact-description{ display: block !important; padding-left: 0 !important; margin-left: 0 !important } .contact-info .contact-description::before, .contact-info .contact-description .contact-detail-icon, .contact-info .contact-description .iconify-ui-icon{ content: none !important; display: none !important } .contact-info .contact-detail{ gap: 14px; margin-top: 14px; font-size: 16px !important } .contact-detail-icon{ width: 24px; min-width: 24px; display: inline-grid; place-items: center; color: #68c7ff; line-height: 1; filter: drop-shadow(0 0 8px rgba(0, 231, 255, .55)) } .contact-detail-icon .iconify-ui-icon{ margin-right: 0px; width: 22px; height: 22px; filter: invert(76%) sepia(79%) saturate(684%) hue-rotate(153deg) brightness(104%) contrast(102%) drop-shadow(0 0 8px rgba(0, 231, 255, .55)) } .contact-form{ position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 18px; align-self: center; align-content: center } .contact-form .wide{ grid-column: 1 / -1 } .contact-form .hud-action{ justify-self: start } input, textarea{ width: 100%; min-height: 40px; padding: 0 16px; border: 2px solid rgba(48, 103, 170, .36); border-radius: 6px; background: rgba(2, 10, 20, .64); color: white; outline: none; font-family: var(--font-ui); font-size: 16px; font-weight: 700; box-shadow: inset 0 0 16px rgba(0, 153, 255, .05), 0 0 8px rgba(0, 0, 0, .24) } textarea{ min-height: 96px; padding-top: 13px; resize: vertical } input:focus, textarea:focus{ border-color: var(--cyan); box-shadow: 0 0 12px rgba(0, 231, 255, .2) } .footer{ width: min(1840px, calc(100% - 80px)); margin: 0 auto; padding: 38px 60px 0; display: grid; grid-template-columns: minmax(230px, 1.18fr) minmax(120px, .62fr) minmax(140px, .7fr) minmax(125px, .62fr) minmax(150px, .72fr) minmax(190px, .86fr); gap: 22px; align-items: start; border-top: 1px solid rgba(0, 153, 255, .24); background: linear-gradient(rgba(46, 103, 170, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(46, 103, 170, .035) 1px, transparent 1px), radial-gradient(circle at 10% 18%, rgba(45, 119, 255, .18), transparent 18%), radial-gradient(circle at 90% 14%, rgba(255, 139, 31, .15), transparent 18%), linear-gradient(90deg, rgba(0, 10, 22, .96), rgba(1, 8, 17, .94)); background-size: 40px 40px, 40px 40px, auto, auto, auto; box-shadow: inset 0 1px 0 rgba(96, 162, 255, .2), inset 0 -1px 0 rgba(255, 139, 31, .16), 0 -18px 48px rgba(0, 0, 0, .35); overflow: hidden } .footer>div{ display: grid; gap: 12px; align-content: start } .footer>div:not(.footer-brand):not(.footer-bottom){ padding-left: 28px; border-left: 1px solid rgba(77, 141, 227, .16) } .footer-brand-head{ display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 18px } .footer-brand img{ width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 0 18px rgba(82, 151, 255, .55)) drop-shadow(0 0 14px rgba(255, 139, 31, .4)) } .footer b, .footer strong{ color: white; text-transform: uppercase; letter-spacing: .1em; } .footer strong{ display: block; font-size: 24px; line-height: 1.1 } .footer b{ color: #72b9ff; font-size: 14px; letter-spacing: .16em; } .footer-cta-label{ display: none } .footer-cta-title{ margin: 0; color: #72b9ff; font-family: var(--font-heading); font-size: 14px; line-height: 1.1; letter-spacing: .16em; text-transform: uppercase; } .footer a, .footer p, .footer small{ margin: 0; color: var(--muted); font-size: 15px; line-height: 1.35; font-weight: 600 } .footer small{ display: block; margin-top: 5px } .footer-brand p{ max-width: 320px; margin-top: 22px; font-size: 17px; line-height: 1.42 } .footer-column a{ width: fit-content; position: relative; transition: color .2s ease, transform .2s ease } .footer-column a:hover{ color: #f3f8ff; transform: translateX(3px) } .footer-quick-links{ grid-template-columns: 1fr; align-items: start; gap: 12px } .footer-quick-links b{ grid-column: 1 / -1 } .footer-quick-links a{ white-space: nowrap } .footer-socials{ display: flex; flex-wrap: wrap; gap: 12px; width: 100%; padding-top: 4px } .footer-socials a{ width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(121, 174, 244, .22); border-radius: 7px; background: rgba(255, 255, 255, .045); color: rgba(248, 251, 255, .96); box-shadow: inset 0 0 16px rgba(87, 151, 239, .12), 0 0 14px rgba(0, 0, 0, .25) } .footer-socials a:hover{ border-color: rgba(134, 194, 255, .5); background: rgba(92, 153, 255, .12); transform: translateY(-2px) } .footer-socials svg:not(.mail-icon){ width: 29px; height: 29px; fill: currentColor; stroke-width: 2.65; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .42)) } .footer-socials svg{ width: 29px; height: 29px; color: #f7fbff; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .42)) } .footer-socials svg path{ fill: #f7fbff } .footer-socials i svg, .footer-socials [data-lucide]{ fill: none } .footer-cta p{ margin-top: 2px; max-width: 220px } .footer .footer-cta{ grid-column: auto; min-height: 0; align-self: start; display: grid; gap: 12px; min-width: 0; overflow: hidden } .footer-cta-label{ display: block } .footer-cta .section-divider{ width: min(100%, 180px); margin-top: 8px } .footer-cta .footer-cta-title{ max-width: 190px; font-size: clamp(28px, 2.15vw, 34px) !important; line-height: 1.08 !important } .footer-cta .section-description{ max-width: 180px; font-size: 14px !important; line-height: 1.35 !important } .footer-hire{ --hud-button-cut: 12px; width: 210px; height: 54px; margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 42px; border: 0; border-radius: 0; background: linear-gradient(100deg, rgba(255, 183, 74, .95), rgba(255, 214, 109, .95)) padding-box, linear-gradient(105deg, #ff9d30, #ffd56e) border-box; clip-path: var(--hud-button-clip); color: #fff7eb; font-size: 19px; font-weight: 800; box-shadow: inset 0 0 0 4px rgba(65, 32, 8, .72), inset 0 0 24px rgba(255, 157, 48, .48), 0 0 18px rgba(255, 139, 31, .65) } .footer-hire svg{ width: 26px; height: 26px; color: #ffd45d; filter: drop-shadow(0 0 8px rgba(255, 203, 86, .9)) } .footer-connect>.footer-hire, .copy{ display: none } .footer-bottom{ grid-column: 1 / -1; min-height: 52px; margin: 26px -60px 0; padding: 0 60px; display: flex !important; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255, 139, 31, .14); background: rgba(0, 5, 12, .34) } .footer-bottom p{ font-size: 15px; color: rgba(188, 199, 216, .72) } .footer-bottom .heart{ color: #ff442f; } @media (max-width:1200px) { .footer{ grid-template-columns: 1.2fr 1fr 1fr; gap: 30px 24px } .footer-cta{ grid-column: span 2 } } @media (max-width:760px) { .footer{ width: calc(100% - 22px); padding: 30px 20px 0; grid-template-columns: 1fr; gap: 26px } .footer>div:not(.footer-brand):not(.footer-bottom){ padding-left: 0; padding-top: 18px; border-left: 0; border-top: 1px solid rgba(77, 141, 227, .16) } .footer-brand-head{ grid-template-columns: 72px 1fr } .footer-brand img{ width: 72px; height: 72px } .footer strong{ font-size: 20px } .footer-cta{ grid-column: auto } .footer-bottom{ min-height: auto; margin: 4px -20px 0; padding: 16px 20px; display: grid !important; gap: 8px; justify-content: start } } .btn, .hire-btn, .menu-toggle, .actions .btn, .projects .section-head .btn, .send-message, .footer-hire{ --hud-button-cut: 12px; border-radius: 0; clip-path: var(--hud-button-clip) } .experience-toggle, .send-message, .footer-hire{ --hud-button-cut: 10px; min-width: 174px; height: 56px; padding: 0 20px 0 28px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; border: 0; border-radius: 0; color: #fff7ef; background: transparent; box-shadow: none; filter: drop-shadow(0 0 10px rgba(52, 112, 255, .65)) drop-shadow(0 0 14px rgba(255, 142, 31, .7)); font: 800 20px/1 var(--font-ui); clip-path: var(--hud-button-clip) } .hud-action{ --hud-button-cut: 13px; position: relative; isolation: isolate; width: var(--hud-action-width, 310px); min-width: var(--hud-action-min-width, var(--hud-action-width, 310px)); height: var(--hud-action-height, 64px); padding: 0 var(--hud-action-pad-x, 0); display: inline-flex; align-items: center; justify-content: center; gap: var(--hud-action-gap, 54px); color: #fff9f2; border: 0; border-radius: 0; background: transparent; clip-path: var(--hud-button-clip); font: 800 var(--hud-action-font-size, 22px)/1 var(--font-ui); letter-spacing: 0; text-decoration: none; filter: drop-shadow(0 0 8px rgba(74, 122, 255, .9)) drop-shadow(0 0 13px rgba(255, 139, 31, .8)); box-shadow: none } .hud-action::before, .hud-action::after{ content: ""; position: absolute; clip-path: inherit; pointer-events: none } .hud-action::before{ inset: 0; z-index: -2; background: linear-gradient(102deg, #9bc7ff 0%, #466eff 13%, #3c49aa 39%, #5b3423 64%, #c66f25 84%, #ffd76c 100%); box-shadow: 0 0 12px rgba(81, 128, 255, .9), 0 0 16px rgba(255, 139, 31, .85) } .hud-action::after{ inset: 4px; z-index: -1; background: linear-gradient(90deg, rgba(255, 255, 255, .18) 0 1px, transparent 1px 100%), radial-gradient(circle at 12% 50%, rgba(117, 163, 255, .34), transparent 28%), radial-gradient(circle at 86% 50%, rgba(255, 177, 60, .42), transparent 30%), linear-gradient(100deg, #3859eb 0%, #3149c5 34%, #262433 56%, #673b1f 76%, #b46325 100%); box-shadow: inset 12px 0 18px rgba(100, 151, 255, .58), inset -12px 0 18px rgba(255, 146, 35, .68), inset 0 0 13px rgba(255, 255, 255, .13) } .hud-action i, .hud-action svg{ width: 31px; height: 31px; color: #ffd45d; stroke-width: 2.45; filter: drop-shadow(0 0 8px rgba(255, 203, 86, .98)) drop-shadow(0 2px 4px rgba(0, 0, 0, .7)) } .hud-action:hover, .hud-action:focus-visible{ transform: none; outline: none; filter: drop-shadow(0 0 8px rgba(74, 122, 255, .9)) drop-shadow(0 0 13px rgba(255, 139, 31, .8)) } .hud-action:focus-visible, .btn:focus-visible, .hire-btn:focus-visible, .menu-toggle:focus-visible, .experience-toggle:focus-visible, .footer-hire:focus-visible{ outline: 2px solid var(--color-cyan); outline-offset: 4px } .hud-action:active, .btn:active, .hire-btn:active, .menu-toggle:active, .experience-toggle:active, .footer-hire:active{ transform: translateY(1px) scale(.99); filter: drop-shadow(0 0 6px rgba(74, 122, 255, .72)) drop-shadow(0 0 10px rgba(255, 139, 31, .62)) } .hud-action:disabled, .hud-action[aria-disabled="true"], .btn:disabled, .btn[aria-disabled="true"], .hire-btn[aria-disabled="true"], .menu-toggle:disabled, .experience-toggle:disabled, .footer-hire[aria-disabled="true"]{ cursor: not-allowed; opacity: .48; pointer-events: none; filter: grayscale(.35) } .experience-toggle{ width: auto; min-width: 266px } .footer-hire{ width: 174px; min-width: 174px; margin-top: 10px } .experience-toggle::before, .send-message::before, .footer-hire::before{ inset: 0; z-index: -2; background: linear-gradient(100deg, #6490ff 0%, #315dff 38%, #ff9c28 72%, #ffd36c 100%); box-shadow: none } .experience-toggle::after, .send-message::after, .footer-hire::after{ inset: 3px; z-index: -1; background: linear-gradient(90deg, rgba(255, 255, 255, .2) 0 1px, transparent 1px 100%), linear-gradient(108deg, #3158dd 0%, #304dc5 42%, #a85d25 67%, #f1982d 100%); box-shadow: inset 9px 0 15px rgba(0, 211, 255, .3), inset -9px 0 18px rgba(255, 199, 73, .38), inset 0 0 14px rgba(255, 255, 255, .22) } .experience-toggle:hover, .experience-toggle:focus-visible, .send-message:hover, .send-message:focus-visible, .footer-hire:hover, .footer-hire:focus-visible{ transform: none; filter: drop-shadow(0 0 10px rgba(52, 112, 255, .65)) drop-shadow(0 0 14px rgba(255, 142, 31, .7)); outline: none } .experience-toggle i, .send-message i, .footer-hire i, .footer-hire svg{ width: 29px; height: 29px; color: #ffd46b; stroke-width: 2.2; filter: drop-shadow(0 0 8px rgba(255, 203, 86, .95)) drop-shadow(0 2px 5px rgba(0, 0, 0, .7)) } .services-hud, .certs-hud{ width: min(1880px, calc(100% - 64px)); padding: 34px 52px 42px; display: grid; grid-template-columns: 430px 1fr; gap: 46px; background: linear-gradient(rgba(32, 104, 188, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(32, 104, 188, .045) 1px, transparent 1px), radial-gradient(circle at 70% 20%, rgba(28, 129, 255, .1), transparent 28%), linear-gradient(135deg, rgba(1, 6, 17, .96), rgba(1, 6, 17, .985)); background-size: 80px 80px, 80px 80px, auto, auto; border: 1px solid rgba(0, 148, 255, .46); clip-path: var(--hud-button-clip); overflow: hidden } .certs-hud::before, .certs-hud::after{ display: none } .services-copy, .cert-copy{ align-self: stretch; display: grid; align-content: start; gap: 28px; padding: 54px 0 0 6px } .services-copy .label, .cert-copy .label{ margin: 0; display: flex; align-items: center; gap: 12px; color: #08cfff; font: 800 18px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase } .services-copy .label svg, .cert-copy .label svg{ width: 24px; height: 24px; filter: drop-shadow(0 0 8px currentColor) } .services-copy h2, .cert-copy h2{ margin: 0; color: #fff; font-size: clamp(42px, 4vw, 42px); line-height: 1; text-transform: uppercase; } .services-copy h2 span{ color: #168cff } .services-copy h2::after, .cert-copy h2::after{ content: ""; display: block; width: 180px; height: 2px; margin-top: 34px; background: linear-gradient(90deg, #1d8fff, #ff9a27, transparent); box-shadow: 0 0 12px rgba(255, 154, 39, .6) } .services-hud .service-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 28px } .services-hud .service, .certs-hud .cert-card{ position: relative; min-height: 305px; padding: 36px 34px 30px; display: grid; justify-items: center; align-content: center; text-align: center; border: 1px solid rgba(28, 142, 255, .56); border-radius: 0; background: linear-gradient(145deg, rgba(4, 12, 31, .72), rgba(2, 6, 18, .92)); clip-path: var(--hud-button-clip); box-shadow: inset 0 0 34px rgba(26, 120, 255, .06), 0 0 24px rgba(0, 119, 255, .08); overflow: visible } .services-hud .service::before, .certs-hud .cert-card::before{ content: ""; position: absolute; inset: 0; border: 1px solid currentColor; clip-path: inherit; opacity: .52; pointer-events: none } .services-hud .service::after, .certs-hud .cert-card::after{ content: ""; position: absolute; inset: 18px; background: radial-gradient(circle at 12% 8%, currentColor 0 1px, transparent 2px) 0 0 / 10px 10px; opacity: .12; pointer-events: none } .services-hud .service.blue-border, .certs-hud .cert-card.blue-border{ color: #0aa8ff } .services-hud .service.purple-border, .certs-hud .cert-card.purple-border{ color: #a86bff; border-color: rgba(168, 107, 255, .6) } .services-hud .service.orange-border, .certs-hud .cert-card.orange-border{ color: #ff8a1e; border-color: rgba(255, 138, 30, .62) } .services-hud .service.teal-border, .certs-hud .cert-card.teal-border{ color: #00d8e8; border-color: rgba(0, 216, 232, .62) } .services-hud .service small{ position: absolute; top: 26px; left: 28px; width: 62px; height: 48px; display: grid; place-items: center; color: currentColor; border: 1px solid currentColor; border-radius: 12px; background: rgba(1, 6, 17, .58); font: 800 29px/1 var(--font-ui); box-shadow: 0 0 16px color-mix(in srgb, currentColor 32%, transparent) } .services-hud .service>span{ width: 96px; height: 96px; margin: 0 0 18px; display: grid; place-items: center; color: currentColor; border: 3px solid currentColor; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .04), rgba(0, 0, 0, .28)); box-shadow: 0 0 18px color-mix(in srgb, currentColor 42%, transparent) } .services-hud .service>span svg{ width: 48px; height: 48px; stroke-width: 1.8 } .services-hud .service h3, .certs-hud .cert-card h3{ margin: 0 0 14px; color: #fff; font-size: 23px; line-height: 1.1; } .services-hud .service p, .certs-hud .cert-card p{ margin: 0; color: #e3e6ef; font-size: 15px; line-height: 1.45 } .services-hud .service a, .certs-hud .cert-card a, .cert-all{ min-width: 150px; height: 40px; margin-top: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; color: currentColor; border: 1px solid currentColor; border-radius: 6px; background: rgba(1, 6, 17, .5); font: 800 14px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; box-shadow: inset 0 0 16px color-mix(in srgb, currentColor 10%, transparent) } .certs-hud{ grid-template-columns: 430px 1fr; margin-top: 32px; padding-bottom: 64px } .cert-trust{ width: 360px; min-height: 118px; margin-top: 24px; padding: 20px 22px; display: grid; grid-template-columns: 62px 1fr; gap: 18px; align-items: center; color: #09cfff; border: 1px solid rgba(0, 174, 255, .7); clip-path: var(--hud-button-clip); background: rgba(3, 14, 34, .62) } .cert-trust svg{ width: 54px; height: 54px; filter: drop-shadow(0 0 10px currentColor) } .cert-trust b{ display: block; color: #0cd8ff; margin-bottom: 6px } .cert-trust span{ color: #d9deea; font-size: 14px; line-height: 1.38 } .certs-hud .cert-grid{ position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; align-self: center } .certs-hud .cert-grid::before{ content: ""; position: absolute; left: 8%; right: 8%; top: -36px; height: 2px; background: linear-gradient(90deg, #0aa8ff, #a86bff, #00d8e8, #ff8a1e, #0aa8ff); box-shadow: 0 0 12px rgba(0, 204, 255, .5) } .certs-hud .cert-card{ min-height: 340px; padding-top: 54px } .certs-hud .cert-card time{ position: absolute; top: -58px; left: 50%; min-width: 74px; height: 38px; display: grid; place-items: center; color: currentColor; border: 1px solid currentColor; border-radius: 7px; background: #07101f; font: 800 19px/1 var(--font-ui); transform: translateX(-50%); box-shadow: 0 0 12px color-mix(in srgb, currentColor 38%, transparent) } .certs-hud .cert-card time::after{ content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 28px; background: currentColor; box-shadow: 0 0 10px currentColor } .certs-hud .cert-icon{ position: static; width: 78px; height: 78px; margin-bottom: 18px; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .08); border-radius: 12px; font: 900 37px/1 var(--font-ui) } .certs-hud .cert-icon.cloud{ background: linear-gradient(135deg, #4285f4, #34a853 48%, #fbbc05 49%, #ea4335); border-radius: 50% } .certs-hud .cert-card small{ margin-top: 18px; color: #dce1ec; font-size: 14px } @media (max-width:1300px) { .services-hud, .certs-hud{ grid-template-columns: 1fr } .services-hud .service-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) } .certs-hud .cert-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px 24px } } @media (max-width:700px) { .services-hud, .certs-hud{ width: calc(100% - 22px); padding: 28px 16px 42px; clip-path: var(--hud-button-clip) } .services-hud .service-grid, .certs-hud .cert-grid{ grid-template-columns: 1fr } .services-hud .services-copy h2{ padding: 0; font-size: 40px } .services-hud .services-copy h2::before, .services-hud .services-copy h2::after{ display: none } .cert-copy, .services-copy{ padding-top: 0 } .cert-trust, .cert-all{ width: 100%; min-width: 0 } } .projects .section-head .header-match-btn, .footer-hire.header-match-btn{ color: #fff7ef; } .projects .section-head .header-match-btn i, .footer-hire.header-match-btn i, .footer-hire.header-match-btn svg{ color: #ffd46b } .header-match-btn, .footer-hire.header-match-btn{ position: relative; isolation: isolate; --hud-button-cut: 10px; width: 174px; height: 56px; min-width: 174px; min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 0 20px 0 28px; border: 0; border-radius: 0; color: #fff7ef; background: transparent; clip-path: var(--hud-button-clip); filter: drop-shadow(0 0 10px rgba(52, 112, 255, .65)) drop-shadow(0 0 14px rgba(255, 142, 31, .7)); font: 800 20px/1 var(--font-ui); text-decoration: none; box-shadow: none } .header-match-btn::before, .header-match-btn::after{ content: ""; position: absolute; clip-path: inherit; pointer-events: none } .header-match-btn::before{ inset: 0; z-index: -2; background: linear-gradient(100deg, #6490ff 0%, #315dff 38%, #ff9c28 72%, #ffd36c 100%) } .header-match-btn::after{ inset: 3px; z-index: -1; background: linear-gradient(90deg, rgba(255, 255, 255, .2) 0 1px, transparent 1px 100%), linear-gradient(108deg, #3158dd 0%, #304dc5 42%, #a85d25 67%, #f1982d 100%); box-shadow: inset 9px 0 15px rgba(0, 211, 255, .3), inset -9px 0 18px rgba(255, 199, 73, .38), inset 0 0 14px rgba(255, 255, 255, .22) } .header-match-btn:hover, .header-match-btn:focus-visible{ transform: none; color: #fff7ef; outline: none } .header-match-btn i, .header-match-btn svg{ width: 29px; height: 29px; flex: 0 0 auto; color: #ffd46b; stroke-width: 2.2; filter: drop-shadow(0 0 8px rgba(255, 203, 86, .95)) drop-shadow(0 2px 5px rgba(0, 0, 0, .7)) } .projects .section-head .header-match-btn{ width: auto; min-width: 252px; color: #fff7ef; } .header-match-btn{ position: relative; isolation: isolate; --hud-button-cut: 10px; width: 174px; height: 56px; min-width: 174px; min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 0 20px 0 28px; border: 0; border-radius: 0; color: #fff7ef; background: transparent; clip-path: var(--hud-button-clip); filter: drop-shadow(0 0 10px rgba(52, 112, 255, .65)) drop-shadow(0 0 14px rgba(255, 142, 31, .7)); font-family: var(--font-ui); font-size: 20px; font-weight: 800; line-height: 1; text-decoration: none; box-shadow: none } .header-match-btn::before, .header-match-btn::after .header-match-btn::before .header-match-btn::after .header-match-btn:hover, .header-match-btn:focus-visible .header-match-btn i, .header-match-btn svg .projects .section-head .header-match-btn{ width: auto; min-width: 252px; margin-right: 10px } .footer-hire.header-match-btn{ width: 174px; min-width: 174px } .footer-connect>.footer-hire.header-match-btn{ display: none } .hire-btn, .footer-hire, .footer-hire.header-match-btn, .actions .btn{ white-space: nowrap; flex-wrap: nowrap } .hire-btn, .footer-hire, .footer-hire.header-match-btn{ width: 210px; min-width: 210px; gap: 18px; padding: 0 24px 0 30px } .actions .btn{ width: 300px; min-width: 300px; gap: 22px; padding: 0 30px } .hire-btn b, .hire-btn i, .hire-btn svg, .footer-hire i, .footer-hire svg, .actions .btn span, .actions .btn i, .actions .btn svg{ flex: 0 0 auto } .iconify-ui-icon{ display: inline-block; width: 1em; height: 1em; object-fit: contain; flex: 0 0 auto; vertical-align: -.14em; filter: drop-shadow(0 0 8px currentColor) } .stat-icon .iconify-ui-icon, .service>span .iconify-ui-icon, .cta-mark .iconify-ui-icon{ width: 1em; height: 1em } .service a .iconify-ui-icon, .cert-card a .iconify-ui-icon{ width: 14px; height: 14px } .hud-action .iconify-ui-icon, .header-match-btn .iconify-ui-icon, .hire-btn .iconify-ui-icon, .footer-hire .iconify-ui-icon, .experience-toggle .iconify-ui-icon, .actions .btn .iconify-ui-icon{ width: 29px; height: 29px; color: #ffd46b; filter: invert(84%) sepia(56%) saturate(622%) hue-rotate(348deg) brightness(103%) contrast(101%) drop-shadow(0 0 8px rgba(255, 203, 86, .95)) } .actions .btn.blue .iconify-ui-icon{ filter: invert(80%) sepia(50%) saturate(667%) hue-rotate(172deg) brightness(104%) contrast(104%) drop-shadow(0 0 8px rgba(159, 220, 255, .9)) } .socials .iconify-ui-icon, .footer-socials .iconify-ui-icon{ width: 22px; height: 22px; filter: invert(96%) sepia(7%) saturate(700%) hue-rotate(180deg) brightness(105%) contrast(101%) drop-shadow(0 0 7px rgba(255, 255, 255, .42)) } .contact-info .iconify-ui-icon, .info-grid .iconify-ui-icon{ width: 20px; height: 20px; margin-right: 8px; filter: invert(74%) sepia(78%) saturate(937%) hue-rotate(165deg) brightness(101%) contrast(102%) drop-shadow(0 0 8px rgba(0, 213, 255, .72)) } .stats .stat-icon .iconify-ui-icon{ width: 34px; height: 34px; filter: invert(65%) sepia(44%) saturate(1174%) hue-rotate(196deg) brightness(105%) contrast(102%) drop-shadow(0 0 7px rgba(126, 157, 255, .9)) } .stats .stat-icon.orange-icon .iconify-ui-icon{ filter: invert(68%) sepia(80%) saturate(922%) hue-rotate(345deg) brightness(104%) contrast(101%) drop-shadow(0 0 7px rgba(255, 171, 53, .9)) } .service-grid{ grid-template-columns: repeat(4, 1fr) } .service{ min-height: 170px; padding: 24px; border: 1px solid rgba(0, 153, 255, .28) } .service>span{ width: 46px; height: 46px; display: inline-grid; place-items: center; margin-bottom: 14px; border: 1px solid rgba(0, 231, 255, .34); border-radius: 50%; background: rgba(0, 153, 255, .10); color: var(--cyan); font-size: 22px } .services{ width: min(1840px, calc(100% - 80px)); margin: 0 auto; padding: 44px 58px 50px 84px; overflow: hidden; border-top: 1px solid rgba(83, 151, 255, .18); border-bottom: 1px solid rgba(255, 139, 31, .14); background: linear-gradient(rgba(46, 103, 170, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(46, 103, 170, .035) 1px, transparent 1px), radial-gradient(circle at 7% 50%, rgba(73, 142, 255, .14), transparent 14%), radial-gradient(circle at 91% 48%, rgba(255, 139, 31, .13), transparent 16%), linear-gradient(90deg, rgba(1, 9, 20, .96), rgba(2, 8, 17, .94)); background-size: 40px 40px, 40px 40px, auto, auto, auto } .services::before{ width: 92px; height: 154px; left: 0; top: 40px; border-left: 2px solid rgba(81, 153, 255, .62); border-top: 2px solid rgba(81, 153, 255, .44); border-bottom: 2px solid rgba(81, 153, 255, .28); clip-path: var(--hud-button-clip) } .services::after{ width: 120px; height: 188px; right: 0; top: 36px; bottom: auto; border-right: 2px solid rgba(255, 151, 30, .62); border-top: 2px solid rgba(255, 151, 30, .36); border-bottom: 2px solid rgba(255, 151, 30, .36); clip-path: var(--hud-button-clip) } .services .label{ margin: 0 0 24px 28px; color: #78c7ff; font-size: 24px; letter-spacing: .14em; } .services .service-grid{ position: relative; z-index: 4; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px } .services .service{ position: relative; isolation: isolate; min-height: 212px; padding: 34px 30px 30px; display: grid; grid-template-columns: 82px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 12px 24px; align-items: center; border: 0; border-radius: 0; background: transparent; clip-path: var(--hud-button-clip); box-shadow: 0 14px 34px rgba(0, 0, 0, .22), 0 0 18px rgba(67, 145, 255, .08); transition: transform .22s ease, filter .22s ease } .services .service::before, .services .service::after{ content: ""; position: absolute; clip-path: inherit; pointer-events: none } .services .service::before{ inset: 0; z-index: -2; background: #5aa8ff; filter: drop-shadow(0 0 12px rgba(83, 164, 255, .68)) } .services .service::after{ inset: 3px; z-index: -1; background: radial-gradient(circle at 17% 50%, rgba(105, 184, 255, .18), transparent 33%), linear-gradient(145deg, rgba(7, 24, 48, .96), rgba(2, 8, 18, .95)); box-shadow: inset 0 0 28px rgba(74, 146, 255, .11), inset 0 0 2px rgba(255, 255, 255, .14) } .services .service h3::before{ content: "01"; display: block; margin-bottom: 10px; color: #69b8ff; font-size: 11px; font-weight: 900; line-height: 1; letter-spacing: .22em; } .services .service:nth-child(2) h3::before{ content: "02"; color: #bb64ff } .services .service:nth-child(3) h3::before{ content: "03"; color: #f6a12f } .services .service:nth-child(4) h3::before{ content: "04"; color: #ffd36c } .services .service.purple-border::before{ background: #bb64ff; filter: drop-shadow(0 0 12px rgba(187, 100, 255, .62)) } .services .service.purple-border::after{ background: radial-gradient(circle at 17% 50%, rgba(187, 100, 255, .2), transparent 33%), linear-gradient(145deg, rgba(27, 17, 51, .96), rgba(5, 8, 18, .95)) } .services .service.orange-border::before{ background: #f59b25; filter: drop-shadow(0 0 12px rgba(255, 151, 30, .62)) } .services .service.orange-border::after{ background: radial-gradient(circle at 17% 50%, rgba(255, 151, 30, .18), transparent 34%), linear-gradient(145deg, rgba(42, 23, 6, .96), rgba(6, 8, 12, .95)) } .services .service>span{ position: relative; grid-column: 1; grid-row: 1 / span 2; width: 76px; height: 76px; margin: 0; display: grid; place-items: center; align-self: center; border: 3px solid currentColor; border-radius: 50%; background: radial-gradient(circle, rgba(92, 164, 255, .16), rgba(1, 10, 22, .72) 62%, rgba(1, 10, 22, .92)); color: #69b8ff; box-shadow: 0 0 16px rgba(87, 164, 255, .48), inset 0 0 16px rgba(87, 164, 255, .18) } .services .service>span::after{ content: ""; position: absolute; inset: -12px; border-radius: inherit; border: 1px solid currentColor; opacity: .22 } .services .purple-border>span{ color: #bb64ff; background: radial-gradient(circle, rgba(188, 100, 255, .18), rgba(12, 8, 25, .78) 62%, rgba(7, 7, 16, .94)); box-shadow: 0 0 16px rgba(187, 100, 255, .45), inset 0 0 16px rgba(187, 100, 255, .18) } .services .orange-border>span{ color: #f6a12f; background: radial-gradient(circle, rgba(255, 158, 38, .18), rgba(24, 13, 4, .78) 62%, rgba(9, 8, 10, .94)); box-shadow: 0 0 16px rgba(255, 151, 30, .45), inset 0 0 16px rgba(255, 151, 30, .18) } .services .service>span svg{ width: 42px; height: 42px; stroke-width: 1.75; filter: drop-shadow(0 0 8px currentColor) } .services .service h3{ grid-column: 2; margin: 0; color: #f4f7ff; font-size: 26px; line-height: 1.08; letter-spacing: 0; } .services .service.purple-border h3{ color: #f3e2ff } .services .service.orange-border h3{ color: #ffc66f } .services .service p{ grid-column: 2; margin: 0; max-width: 360px; color: rgba(211, 219, 234, .82); font-size: 18px; line-height: 1.28; font-weight: 700 } .services .service:hover{ transform: translateY(-3px); filter: brightness(1.08) } .services .service::marker{ content: none } .services-hud{ position: relative; width: min(1880px, calc(100% - 64px)); padding: 58px 112px 52px; display: grid; grid-template-columns: 1fr; gap: 28px; overflow: hidden } .services-hud .services-copy{ max-width: 760px; justify-self: center; padding: 0; display: grid; gap: 16px; text-align: center } .services-hud .services-copy .label{ justify-content: center; margin: 0; color: #ff8200; font-size: 13px; letter-spacing: .04em } .services-hud .services-copy h2{ position: relative; margin: 0; padding: 0 62px; font-size: 34px; line-height: 1; letter-spacing: .04em; text-align: center } .services-hud .services-copy h2::before, .services-hud .services-copy h2::after{ content: ""; position: absolute; top: 50%; width: 22px; height: 76px; display: block; background: none; border: 2px solid currentColor; box-shadow: none; transform: translateY(-50%) } .services-hud .services-copy h2::before{ left: 0; color: #00cfff; border-right: 0 } .services-hud .services-copy h2::after{ right: 0; color: #ff8200; border-left: 0 } .services-hud .services-copy h2 span{ color: #0c93ff; } .services-hud .service-grid{ position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 38px; margin-top: 24px } .services-hud .service{ --hud-card-cut-x: 70px; --hud-card-cut-y: 52px; position: relative; isolation: isolate; min-height: 342px; padding: 34px 46px 30px; display: grid; grid-template-columns: 1fr; grid-template-rows: 112px auto 1fr auto; justify-items: center; align-items: start; align-content: start; text-align: center; color: #08aaff; border: 0; border-radius: 0; background: transparent; clip-path: var(--hud-button-clip); box-shadow: none } .services-hud .service::before, .services-hud .service::after{ content: ""; position: absolute; clip-path: inherit; pointer-events: none } .services-hud .service::before{ inset: 0; z-index: -2; border: 2px solid currentColor; background: radial-gradient(circle at 50% 26%, color-mix(in srgb, currentColor 12%, transparent), transparent 25%), linear-gradient(132deg, rgba(2, 12, 32, .84), rgba(2, 7, 18, .94) 64%, color-mix(in srgb, currentColor 8%, transparent)); filter: none; box-shadow: inset 0 0 42px rgba(0, 0, 0, .44), 0 0 24px color-mix(in srgb, currentColor 24%, transparent) } .services-hud .service.purple-border::before, .services-hud .service.orange-border::before, .services-hud .service.teal-border::before, .services-hud .service.blue-border::before{ background: radial-gradient(circle at 50% 26%, color-mix(in srgb, currentColor 12%, transparent), transparent 25%), linear-gradient(132deg, rgba(2, 12, 32, .84), rgba(2, 7, 18, .94) 64%, color-mix(in srgb, currentColor 8%, transparent)); filter: none } .services-hud .service::after{ inset: 32px 28px; z-index: -1; opacity: .18; background: radial-gradient(circle at 82% 30%, currentColor 0 1px, transparent 2px) 0 0 / 13px 13px, linear-gradient(currentColor, currentColor) 0 100% / 72px 1px no-repeat } .services-hud .service.purple-border::after, .services-hud .service.orange-border::after, .services-hud .service.teal-border::after, .services-hud .service.blue-border::after{ background: radial-gradient(circle at 82% 30%, currentColor 0 1px, transparent 2px) 0 0 / 13px 13px, linear-gradient(currentColor, currentColor) 0 100% / 72px 1px no-repeat } .services-hud .service.blue-border, .services-hud .service.teal-border{ color: #08aaff } .services-hud .service.purple-border{ color: #8d63ff } .services-hud .service.orange-border{ color: #ff8200 } .services-hud .service small{ position: absolute; top: 34px; left: 38px; width: auto; height: auto; display: block; color: currentColor; border: 0; background: none; font: 800 26px/1 var(--font-ui); box-shadow: none } .services-hud .service>span{ position: relative; z-index: 1; grid-column: auto; grid-row: auto; align-self: start; justify-self: center; width: 112px; height: 112px; margin: 0 auto 28px; display: grid; place-items: center; color: currentColor; border: 0; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, currentColor 8%, transparent) 0 38%, transparent 39%), radial-gradient(circle, transparent 0 48%, color-mix(in srgb, currentColor 72%, transparent) 49% 50%, transparent 51%), radial-gradient(circle, transparent 0 62%, color-mix(in srgb, currentColor 42%, transparent) 63% 64%, transparent 65%); box-shadow: inset 0 0 22px color-mix(in srgb, currentColor 10%, transparent), 0 0 28px color-mix(in srgb, currentColor 24%, transparent) } .services-hud .service>span::before, .services-hud .service>span::after{ content: ""; position: absolute; border-radius: 50%; pointer-events: none } .services-hud .service>span::before{ inset: 0; background: conic-gradient(from -26deg, transparent 0 18deg, currentColor 18deg 48deg, transparent 48deg 140deg, currentColor 140deg 158deg, transparent 158deg 360deg); -webkit-mask: radial-gradient(circle, transparent 0 55%, #000 56% 59%, transparent 60%); mask: radial-gradient(circle, transparent 0 55%, #000 56% 59%, transparent 60%); opacity: .95; filter: drop-shadow(0 0 8px currentColor) } .services-hud .service>span::after{ inset: 13px; background: conic-gradient(from 88deg, transparent 0 24deg, currentColor 24deg 56deg, transparent 56deg 210deg, currentColor 210deg 236deg, transparent 236deg 360deg); -webkit-mask: radial-gradient(circle, transparent 0 58%, #000 59% 63%, transparent 64%); mask: radial-gradient(circle, transparent 0 58%, #000 59% 63%, transparent 64%); opacity: .55; filter: drop-shadow(0 0 6px currentColor) } .services-hud .service>span svg{ position: relative; z-index: 1; width: 54px; height: 54px; stroke-width: 1.7; filter: drop-shadow(0 0 8px currentColor); transition: transform .3s ease, filter .3s ease } .services-hud .service:hover>span svg{ transform: translateY(-4px) scale(1.05); filter: drop-shadow(0 0 12px currentColor) } .services-hud .service h3{ grid-column: auto; justify-self: center; margin: 0 0 14px; color: #fff; font-size: 25px; line-height: 1.12; text-align: center; } .services-hud .service h3::before{ content: none; display: none } .services.services-hud .service h3::before{ content: none; display: none } .services-hud .service.purple-border h3, .services-hud .service.orange-border h3{ color: #fff } .services-hud .service p{ grid-column: auto; justify-self: center; max-width: 380px; margin: 0 auto; color: #e8edf7; font-size: 16px; font-weight: 400; line-height: 1.48; text-align: center } .services-hud .service a{ grid-column: auto; justify-self: center; align-self: end; min-width: 0; height: auto; margin-top: 22px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; color: currentColor; border: 0; background: none; box-shadow: none; font: 800 14px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; text-decoration: none } @media (max-width:1300px) { .services-hud .service-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) } } @media (max-width:700px) { .services-hud{ width: calc(100% - 22px); padding: 28px 16px 42px; clip-path: var(--hud-button-clip) } .services-hud .service-grid{ grid-template-columns: 1fr } .services-hud .services-copy h2{ padding: 0; font-size: 30px } .services-hud .services-copy h2::before, .services-hud .services-copy h2::after{ display: none } } .services.services-hud .service{ clip-path: polygon(28px 0, calc(100% - 46px) 0, calc(100% - 30px) 16px, 100% 16px, 100% calc(100% - 28px), calc(100% - 28px) 100%, 28px 100%, 0 calc(100% - 28px), 0 28px) } .services.services-hud .service::before, .services.services-hud .service::after{ clip-path: inherit } .services.services-hud .service::before{ border: 2px solid currentColor; background: radial-gradient(circle at 50% 25%, color-mix(in srgb, currentColor 13%, transparent), transparent 28%), linear-gradient(132deg, rgba(2, 14, 34, .9), rgba(2, 7, 18, .96) 64%, color-mix(in srgb, currentColor 9%, transparent)) } .services.services-hud .service::after{ inset: 29px 30px; opacity: .52; background: linear-gradient(currentColor, currentColor) 0 0 / 64px 1px no-repeat, linear-gradient(currentColor, currentColor) 100% 0 / 64px 1px no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 64px 1px no-repeat, linear-gradient(135deg, transparent 0 18px, currentColor 18px 19px, transparent 19px) 0 0 / 84px 84px no-repeat, linear-gradient(225deg, transparent 0 18px, currentColor 18px 19px, transparent 19px) 100% 0 / 84px 84px no-repeat, linear-gradient(45deg, transparent 0 18px, currentColor 18px 19px, transparent 19px) 0 100% / 84px 84px no-repeat, radial-gradient(circle at 86% 30%, currentColor 0 1px, transparent 2px) 0 0 / 13px 13px } .services.services-hud .service small{ top: 36px; left: 38px } .services.services-hud .service>span{ margin-top: 8px } .services.services-hud{ padding-top: 42px; padding-bottom: 46px } .services.services-hud .service-grid{ gap: 18px 22px } @media (min-width:901px) and (max-width:1300px) { .services.services-hud .service-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)) } } .services.services-hud .service{ min-height: 245px; padding: 24px 28px 22px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center } .services.services-hud .service small{ top: 22px; left: 26px; width: 48px; height: 36px; font-size: 17px } .services.services-hud .service>span{ width: 72px; height: 72px; margin: 8px auto 18px; color: #00bfff; border-width: 2px; box-shadow: 0 0 18px rgba(0, 191, 255, .46), inset 0 0 18px rgba(0, 191, 255, .18) } .services.services-hud .service>span::before{ content: ""; position: absolute; inset: 6px; border: 1px solid currentColor; border-radius: inherit; opacity: .42 } .services.services-hud .service>span::after{ inset: -7px; opacity: .28 } .services.services-hud .service>span .iconify-ui-icon{ width: 34px; height: 34px; filter: invert(63%) sepia(96%) saturate(1605%) hue-rotate(165deg) brightness(107%) contrast(101%) drop-shadow(0 0 9px rgba(0, 191, 255, .92)) } .services.services-hud .service.purple-border>span{ color: #a772ff; box-shadow: 0 0 18px rgba(167, 114, 255, .5), inset 0 0 18px rgba(167, 114, 255, .2) } .services.services-hud .service.purple-border>span .iconify-ui-icon{ filter: invert(63%) sepia(74%) saturate(1287%) hue-rotate(218deg) brightness(105%) contrast(104%) drop-shadow(0 0 9px rgba(167, 114, 255, .92)) } .services.services-hud .service.orange-border>span{ color: #ff961e; box-shadow: 0 0 18px rgba(255, 150, 30, .5), inset 0 0 18px rgba(255, 150, 30, .2) } .services.services-hud .service.orange-border>span .iconify-ui-icon{ filter: invert(67%) sepia(87%) saturate(1454%) hue-rotate(347deg) brightness(103%) contrast(101%) drop-shadow(0 0 9px rgba(255, 150, 30, .92)) } .services.services-hud .service.teal-border>span{ color: #5be7ff } .services.services-hud .service h3{ margin: 0 0 12px; font-size: 18px; line-height: 1.15 } .services.services-hud .service p{ max-width: 310px; margin: 0 auto 14px; font-size: 13px; line-height: 1.38 } .services.services-hud .service a{ margin-top: auto } .services.services-hud .service a .iconify-ui-icon{ width: 18px; height: 18px; filter: drop-shadow(0 0 7px currentColor) } .services.services-hud{ display: grid; grid-template-columns: 388px minmax(0, 1fr); gap: 34px; width: min(1840px, calc(100% - 80px)); padding: 58px 58px 110px 72px; align-items: start } .services.services-hud .services-copy{ position: relative; grid-column: 1; max-width: 320px; min-height: 592px; justify-self: stretch; padding-top: 32px; text-align: left } .services.services-hud .services-copy .label{ justify-content: flex-start; margin: 0 0 22px; color: #62a9ff; font-size: 18px !important; letter-spacing: .08em } .services.services-hud .services-copy h2{ margin-top: 20px; padding: 0; text-align: left } .services.services-hud .services-copy h2::before, .services.services-hud .services-copy h2::after{ display: none } .services.services-hud .service-trust{ position: absolute; z-index: 2; left: 0; top: auto; bottom: 0; display: grid; grid-template-columns: 66px 1fr; align-items: center; width: 356px; min-height: 112px; padding: 17px 24px; color: #dce8ff; border: 1px solid rgba(128, 171, 255, .84); background: radial-gradient(circle at 14% 50%, rgba(73, 132, 255, .35), transparent 28%), linear-gradient(135deg, rgba(9, 32, 73, .85), rgba(5, 14, 33, .9)); clip-path: polygon(17px 0, calc(100% - 17px) 0, 100% 17px, 100% calc(100% - 17px), calc(100% - 17px) 100%, 17px 100%, 0 calc(100% - 17px), 0 17px); box-shadow: inset 0 0 26px rgba(67, 126, 255, .21), 0 0 20px rgba(60, 120, 255, .22) } .services.services-hud .service-trust-icon{ width: 48px; height: 48px; object-fit: contain; filter: invert(66%) sepia(92%) saturate(1093%) hue-rotate(176deg) brightness(108%) contrast(102%) drop-shadow(0 0 12px rgba(95, 157, 255, .88)) } .services.services-hud .service-trust span{ display: block; color: rgba(232, 239, 251, .84); font-size: 14px; line-height: 1.5 } .services.services-hud .service-trust b{ display: block; margin-bottom: 5px; color: #74b6ff; font-size: 15px } .services.services-hud .service-grid{ grid-column: 2; align-self: start; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 22px; width: 100%; margin-top: 84px } @media (max-width:1180px) { .services.services-hud{ grid-template-columns: 1fr; padding: 48px 40px 72px } .services.services-hud .services-copy, .services.services-hud .service-grid{ grid-column: 1 } .services.services-hud .services-copy{ position: static; max-width: 760px; min-height: 0; justify-self: center; text-align: center } .services.services-hud .services-copy .label{ justify-content: center } .services.services-hud .service-trust{ position: static; width: min(356px, 100%); margin: 28px auto 0; text-align: left } .services.services-hud .service-grid{ margin-top: 28px } } .experience{ --timeline-left: 300px; --timeline-line: 386px; min-height: 760px; width: min(1840px, calc(100% - 80px)); padding: 64px 128px 70px 164px; overflow: hidden } .experience-scroll{ position: relative; width: 100%; min-height: 600px; margin: 0; padding: 56px 54px 44px 380px; overflow: visible; background: linear-gradient(rgba(46, 103, 170, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(46, 103, 170, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 153, 255, .08), transparent 54%, rgba(255, 139, 31, .08)), rgba(0, 7, 16, .72); background-size: 40px 40px, 40px 40px, auto, auto; border: 1px solid rgba(59, 134, 217, .34); clip-path: var(--hud-button-clip); box-shadow: inset 26px 0 30px rgba(0, 153, 255, .1), inset -26px 0 30px rgba(255, 139, 31, .1), 0 0 22px rgba(0, 153, 255, .12) } .experience .label{ position: absolute; z-index: 6; left: 118px; top: 36px; width: auto; margin: 0; padding-left: 0; font-size: 24px } .experience .label::before{ display: none } .year-track{ position: absolute; left: 112px; top: 118px; bottom: 72px; width: 260px; min-width: 0; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(4, 1fr); grid-template-columns: 1fr; align-items: center; color: #eef5ff; font-size: 25px; text-align: right } .year-track::before{ left: auto; right: -54px; top: 0; bottom: 0; width: 3px; height: 3px; height: auto; transform: none; background: linear-gradient(180deg, rgba(92, 166, 255, .2), #5aa8ff 12%, #5aa8ff 88%, rgba(92, 166, 255, .2)); box-shadow: 0 0 14px rgba(83, 164, 255, .72) } .year-track span{ min-height: 0; padding: 0 70px 0 0; justify-self: stretch; background: transparent; box-shadow: none } .year-track span:first-child, .year-track span:nth-child(2){ display: none } .year-track span:nth-child(3){ grid-row: 1 } .year-track span:nth-child(4){ grid-row: 2 } .year-track span:nth-child(5){ grid-row: 3; color: #e8f2ff } .year-track span:nth-child(6){ grid-row: 4; color: #f5f8ff } .year-track span:nth-child(4)::before{ content: "2019 - 2021" } .year-track span:nth-child(4){ font-size: 0 } .year-track span:nth-child(4)::before{ font-size: 25px } .year-track span::after{ right: 10px; top: 50%; width: 24px; height: 24px; display: block; border: 4px solid #79b7ff; background: #081527; box-shadow: 0 0 16px #69adff, inset 0 0 10px #69adff } .year-track span:last-child::after{ display: block; right: 10px } .jobs{ width: 100%; min-width: 0; display: grid; grid-template-columns: 1fr; gap: 28px } .job{ width: 100%; height: 126px; min-height: 126px; padding: 25px 116px 22px 44px; --hud-button-cut: 20px; display: grid; grid-template-columns: 250px 1fr 86px; column-gap: 34px; align-items: center; clip-path: var(--hud-button-clip); color: #dbe8ff; box-shadow: inset 0 0 28px rgba(72, 139, 255, .08), 0 0 18px rgba(76, 151, 255, .18) } .jobs .job:nth-child(1), .jobs .job:nth-child(2){ display: none } .jobs .job:nth-child(3){ grid-row: 1 } .jobs .job:nth-child(4){ grid-row: 2 } .jobs .job:nth-child(5){ grid-row: 3 } .jobs .job:nth-child(6){ grid-row: 4 } .jobs .job:nth-child(3) h3{ color: #eef5ff } .jobs .job:nth-child(3) b{ color: #b7c8ff } .jobs .job:nth-child(6) h3, .jobs .job:nth-child(6) b{ color: #ffc66f } .jobs .job:nth-child(5) h3, .jobs .job:nth-child(5) b{ color: #e5a9ff } .job h3{ grid-column: 1; margin: 0 0 9px; color: #eef5ff; font-size: 24px; line-height: .98; } .job b{ grid-column: 1; margin: 0; color: #9cb8ff; font-size: 20px; line-height: 1; } .job time, .job small{ display: none } .job p{ grid-column: 2; grid-row: 1 / span 2; margin: 0; color: #c7d0df; font-size: 16px; line-height: 1.35; font-weight: 700; } .job p+p{ display: none } .job p strong{ display: none } .job::before, .job::after{ content: "" } .job::before{ filter: drop-shadow(0 0 11px rgba(83, 164, 255, .52)) } .job::after{ inset: 3px } .job::marker{ display: none } .job::after{ background: linear-gradient(145deg, rgba(5, 19, 40, .97), rgba(1, 8, 19, .96)) } .job:nth-child(5)::after{ background: linear-gradient(145deg, rgba(29, 18, 47, .97), rgba(4, 8, 18, .96)) } .job:nth-child(6)::after{ background: linear-gradient(145deg, rgba(37, 21, 6, .97), rgba(6, 8, 11, .96)) } .job::before{ background: rgba(91, 171, 255, .8) } .job:nth-child(5)::before{ background: rgba(205, 119, 255, .78); filter: drop-shadow(0 0 11px rgba(205, 119, 255, .46)) } .job:nth-child(6)::before{ background: rgba(255, 154, 34, .8); filter: drop-shadow(0 0 11px rgba(255, 154, 34, .46)) } .job::after{ box-shadow: inset 0 0 28px rgba(72, 139, 255, .08) } .job::before{ box-shadow: none } .job h3::after{ content: ""; position: absolute; right: 44px; top: 50%; width: 72px; height: 72px; transform: translateY(-50%); border: 3px solid rgba(130, 179, 255, .6); border-radius: 50%; background: radial-gradient(circle, rgba(125, 171, 255, .18), rgba(4, 13, 27, .88) 62%), linear-gradient(currentColor, currentColor) 50% 28% / 22px 3px no-repeat, linear-gradient(currentColor, currentColor) 50% 50% / 38px 3px no-repeat, linear-gradient(currentColor, currentColor) 50% 72% / 26px 3px no-repeat; color: currentColor; box-shadow: 0 0 16px rgba(93, 164, 255, .46), inset 0 0 15px rgba(93, 164, 255, .16) } .blue-border::after{ background: linear-gradient(145deg, rgba(5, 19, 40, .97), rgba(1, 8, 19, .96)) } @media (max-width:1100px) { .experience{ width: calc(100% - 32px); min-height: 760px; padding: 54px 20px 48px } .experience-scroll{ width: 100%; padding: 72px 24px 34px 260px } .year-track, .jobs{ width: auto; min-width: 0 } .year-track{ left: 46px; top: 138px; bottom: 64px; width: 190px; font-size: 18px } .year-track span{ padding-right: 48px } .year-track span:nth-child(4)::before{ font-size: 18px } .year-track span::after{ right: 5px } .job{ grid-template-columns: 190px 1fr 68px; height: 134px; min-height: 134px; padding: 22px 94px 20px 30px } .job h3{ font-size: 20px } .job b{ font-size: 17px } .job p{ font-size: 14px } .job h3::after{ right: 28px; width: 58px; height: 58px } } @media (max-width:700px) { .experience{ width: calc(100% - 22px); min-height: auto; padding: 42px 14px 40px } .experience-scroll{ min-height: auto; padding: 78px 14px 24px } .experience .label{ left: 24px; top: 30px; font-size: 18px } .year-track{ display: none } .job{ grid-template-columns: 1fr; height: auto; min-height: 190px; padding: 26px 82px 24px 24px } .job p{ grid-column: 1; grid-row: auto; margin-top: 14px } .job h3::after{ right: 22px; width: 48px; height: 48px } } .experience{ width: min(1870px, calc(100% - 96px)); min-height: 1600px; padding: 46px 72px 60px; scroll-margin-top: 128px; isolation: isolate; background: linear-gradient(rgba(48, 110, 184, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(48, 110, 184, .04) 1px, transparent 1px), radial-gradient(circle at 18% 28%, rgba(70, 151, 255, .13), transparent 24%), linear-gradient(90deg, rgba(2, 16, 32, .93), rgba(1, 7, 16, .96) 52%, rgba(5, 12, 20, .95)); background-size: 42px 42px, 42px 42px, auto, auto; clip-path: var(--hud-button-clip) } .experience::before{ display: none } .experience::after{ display: none } .experience-scroll{ position: relative; z-index: 2; min-height: 1390px; padding: 128px 130px 46px 407px; background: transparent; border: 0; clip-path: var(--hud-button-clip); box-shadow: none } .experience .label{ left: 118px; top: 54px; color: #75cfff; font-size: 25px; letter-spacing: .12em; text-transform: uppercase } .experience-copy{ position: relative; z-index: 3; max-width: 760px; margin: 44px 0 0 118px } .experience-copy h2{ margin: 0; color: #f8fbff; font-size: 42px; line-height: 1; text-transform: uppercase; letter-spacing: .05em; } .experience-copy h2::after{ content: ""; display: block; width: 170px; height: 2px; margin-top: 20px; background: linear-gradient(90deg, #1d8fff, #ff9a27, transparent); box-shadow: 0 0 12px rgba(255, 154, 39, .6) } .experience-copy>p{ max-width: 650px; margin: 18px 0 0; color: #d7dce7; font-size: 18px; font-weight: 700; line-height: 1.48 } .experience-trust{ width: min(100%, 560px); margin-top: 24px; padding: 16px 20px; display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 16px; border: 1px solid rgba(112, 202, 255, .26); background: linear-gradient(110deg, rgba(8, 26, 53, .76), rgba(21, 12, 29, .62)); clip-path: var(--hud-button-clip); box-shadow: inset 0 0 22px rgba(76, 149, 255, .1), 0 0 18px rgba(0, 153, 255, .1) } .experience-trust-icon{ width: 42px; height: 42px; filter: invert(77%) sepia(38%) saturate(1173%) hue-rotate(171deg) brightness(106%) contrast(101%) drop-shadow(0 0 9px rgba(112, 202, 255, .62)) } .experience-trust span{ color: #cbd5e3; font-size: 15px; font-weight: 700; line-height: 1.42 } .experience-trust b{ display: block; margin-bottom: 2px; color: #ffffff; font-size: 18px; text-transform: uppercase; letter-spacing: .05em } .year-track{ left: 17px; top: 78px; bottom: 48px; width: 350px; display: grid; grid-template-rows: repeat(6, 1fr); grid-template-columns: 1fr; align-items: center; margin: 0; color: #f2f5f8; font-size: 23px; font-weight: 800; text-align: right } .year-track::before{ left: auto; right: 42px; top: 0; bottom: 0; width: 4px; height: auto; background: linear-gradient(180deg, rgba(83, 165, 255, .2), #68adff 10%, #68adff 90%, rgba(83, 165, 255, .16)); box-shadow: 0 0 14px rgba(99, 177, 255, .78); transform: none } .year-track span, .year-track span:first-child, .year-track span:nth-child(2), .year-track span:nth-child(3), .year-track span:nth-child(4), .year-track span:nth-child(5), .year-track span:nth-child(6){ display: block; grid-row: auto; min-height: 0; padding: 0 96px 0 0; color: #f3f6fb; background: transparent; font-size: 23px; line-height: 1; } .year-track span:nth-child(4)::before, .year-track span:nth-child(5)::before, .year-track span:nth-child(6)::before{ content: none } .year-track span::after, .year-track span:last-child::after{ right: 44px; top: 50%; display: block; width: 28px; height: 28px; border: 4px solid #78baff; background: radial-gradient(circle, #7fc4ff 0 16%, #091427 18% 49%, #091427 50%); box-shadow: 0 0 16px rgba(112, 183, 255, .95), inset 0 0 9px rgba(112, 183, 255, .85); transform: translate(50%, -50%) } .year-track span:first-child{ color: #ffd27a } .year-track span:first-child::before{ background: rgba(255, 184, 82, .72); box-shadow: 0 0 14px rgba(255, 184, 82, .68) } .year-track span:first-child::after{ width: 38px; height: 38px; border-color: #ffd27a; background: radial-gradient(circle, #f6fbff 0 13%, #9dc7ff 14% 25%, #071427 26% 58%, rgba(255, 184, 82, .34) 59%); box-shadow: 0 0 24px rgba(157, 199, 255, .95), 0 0 32px rgba(255, 184, 82, .65), inset 0 0 12px rgba(255, 184, 82, .72) } .year-track span::before{ content: ""; position: absolute; right: -6px; top: 50%; width: 64px; height: 2px; background: rgba(71, 130, 202, .42); box-shadow: 0 0 9px rgba(80, 156, 244, .3); transform: translateY(-50%) } .jobs{ display: flex; flex-direction: column-reverse; gap: 24px; width: 100% } .jobs .job, .jobs .job:nth-child(1), .jobs .job:nth-child(2), .jobs .job:nth-child(3), .jobs .job:nth-child(4), .jobs .job:nth-child(5), .jobs .job:nth-child(6){ display: grid; grid-template-columns: minmax(290px, 360px) minmax(360px, 1fr) 88px; grid-row: auto } .jobs .job:nth-child(n+5){ display: grid } .experience.is-collapsed{ min-height: 1180px } .experience.is-collapsed .experience-scroll{ min-height: 960px } .experience.is-collapsed .year-track{ grid-template-rows: repeat(4, 1fr) } .experience.is-collapsed .year-track span:nth-child(n+5), .experience.is-collapsed .jobs .job:nth-child(-n+2){ display: none } .experience-toggle{ position: relative; z-index: 4; justify-self: end; margin: 30px 0 0 auto; min-width: 190px; height: 48px; display: inline-grid; place-items: center; padding: 0 26px; border: 0; color: #f5fbff; font: 800 16px/1 var(--font-ui); cursor: pointer; background: linear-gradient(100deg, rgba(41, 91, 217, .96), rgba(255, 139, 31, .92)); clip-path: var(--hud-button-clip); box-shadow: inset 0 0 18px rgba(255, 255, 255, .18), 0 0 18px rgba(73, 142, 255, .34), 0 0 18px rgba(255, 139, 31, .28); } .experience-toggle:hover, .experience-toggle:focus-visible{ filter: brightness(1.12); outline: none } .job{ height: 198px; min-height: 198px; padding: 24px 46px 22px 36px; column-gap: 36px; align-items: center; --hud-button-cut: 22px; color: #dce8fb; background: transparent; clip-path: var(--hud-button-clip); box-shadow: 0 0 18px rgba(66, 150, 255, .2), inset 0 0 30px rgba(74, 151, 255, .08); opacity: 1 !important } .job::after{ inset: 3px; background: linear-gradient(145deg, rgba(6, 21, 43, .97), rgba(3, 11, 24, .97)); box-shadow: inset 0 0 34px rgba(76, 149, 255, .08) } .job::before{ background: #5f9cff; filter: drop-shadow(0 0 12px rgba(89, 160, 255, .58)) } .job.purple-border::before{ background: #c579ec; filter: drop-shadow(0 0 12px rgba(210, 118, 255, .44)) } .job.orange-border::before{ background: #bd7626; filter: drop-shadow(0 0 12px rgba(222, 135, 43, .5)) } .job.purple-border::after{ background: linear-gradient(145deg, rgba(31, 19, 45, .97), rgba(7, 10, 22, .97)) } .job.orange-border::after{ background: linear-gradient(145deg, rgba(34, 22, 10, .97), rgba(8, 10, 13, .97)) } .job h3{ grid-column: 1; grid-row: 1; margin: 0 0 8px 66px; color: #edf5ff; font-size: 25px; line-height: 1; white-space: nowrap } .job h3::after{ display: none } .job b{ grid-column: 1; grid-row: 2; margin-left: 66px; color: #bdd0ff; font-size: 20px; line-height: 1 } .job.purple-border h3, .job.purple-border b{ color: #efb5ff } .job.orange-border h3, .job.orange-border b{ color: #ffc25e } .job p{ grid-column: 2; grid-row: auto; max-width: 760px; color: #c8d2df; font-size: 15px; font-weight: 700; line-height: 1.42; transform: none } .job time, .job small{ display: block; grid-column: 1; margin-left: 66px; color: #aeb9c8; font-size: 13px; font-weight: 700; line-height: 1.18; } .job time{ grid-row: 3; margin-top: 10px } .job small{ grid-row: 4 } .job .skills-line{ grid-column: 1; grid-row: 5; margin: 8px 0 0 66px; color: #d8e5f4; font-size: 13px } .job .skills-line strong{ display: inline; color: #78caff } .job .job-summary{ grid-column: 2; grid-row: 1 / span 5; align-self: center; margin: 0; font-size: 16px } .job .summary-link{ position: relative; z-index: 2; display: grid; grid-template-columns: 138px minmax(0, 1fr); gap: 22px; align-items: center; max-width: 100%; color: #f3f6fb; font-size: 20px; font-weight: 800; line-height: 1.45; text-decoration: none } .job .summary-link img{ width: 138px; height: 74px; object-fit: contain; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .58); border-radius: 8px; background: rgba(255, 255, 255, .95); box-shadow: 0 0 14px rgba(255, 255, 255, .12) } .job .summary-link span{ min-width: 0 } .job .summary-link:hover, .job .summary-link:focus-visible{ color: #ffffff; outline: none; filter: brightness(1.08) } .job p+p{ display: block } .company-logo{ position: relative; z-index: 2; grid-column: 1; grid-row: 1 / span 2; width: 50px; height: 50px; display: grid; place-items: center; align-self: start; justify-self: start; color: #bfe2ff; background: transparent; box-shadow: none } .company-logo img{ width: 50px; height: 50px; object-fit: contain; filter: drop-shadow(0 0 5px rgba(255, 255, 255, .28)) } a.company-logo{ transition: transform .18s ease, filter .18s ease } a.company-logo:hover, a.company-logo:focus-visible{ transform: translateY(-1px) scale(1.05); filter: brightness(1.15); outline: none } .company-logo.logo-fallback{ font-size: 14px; font-weight: 900; letter-spacing: .03em; } .job.purple-border .company-logo{ color: #f1bdff } .job.orange-border .company-logo{ color: #ffd073 } .job-icon{ display: none; position: relative; z-index: 1; grid-column: 3; grid-row: 1 / span 2; justify-self: end; width: 76px; height: 76px; border: 3px solid rgba(128, 179, 255, .62); border-radius: 50%; color: #91c4ff; background: radial-gradient(circle, rgba(116, 171, 255, .18), rgba(7, 16, 31, .92) 64%); box-shadow: 0 0 17px rgba(99, 167, 255, .42), inset 0 0 16px rgba(93, 164, 255, .16) } .job.purple-border .job-icon{ color: #ffc779; border-color: rgba(205, 137, 72, .66); box-shadow: 0 0 17px rgba(217, 135, 52, .3), inset 0 0 16px rgba(217, 135, 52, .14) } .job.orange-border .job-icon{ color: #ffc35f; border-color: rgba(213, 141, 54, .72); box-shadow: 0 0 17px rgba(213, 141, 54, .34), inset 0 0 16px rgba(213, 141, 54, .16) } .job-icon::before, .job-icon::after{ content: ""; position: absolute; inset: 18px } .icon-engineer::before{ border: 4px solid currentColor; border-radius: 50% 50% 42% 42%; box-shadow: 0 18px 0 -8px currentColor, -15px 27px 0 -9px currentColor, 15px 27px 0 -9px currentColor } .icon-engineer::after{ inset: 36px 20px 19px; border: 4px solid currentColor; border-top-left-radius: 18px; border-top-right-radius: 18px; border-bottom: 0 } .icon-modules::before{ inset: 21px; border: 4px solid currentColor; border-radius: 50%; box-shadow: -19px 21px 0 -2px rgba(5, 15, 30, .9), -19px 21px 0 2px currentColor, 19px 21px 0 -2px rgba(5, 15, 30, .9), 19px 21px 0 2px currentColor, 0 -19px 0 -2px rgba(5, 15, 30, .9), 0 -19px 0 2px currentColor } .icon-modules::after{ inset: 26px 38px; border-left: 3px solid currentColor; box-shadow: -18px 20px 0 -1px currentColor, 18px 20px 0 -1px currentColor } .icon-chart::before{ inset: 24px 19px 21px; background: linear-gradient(currentColor, currentColor) left bottom / 7px 20px no-repeat, linear-gradient(currentColor, currentColor) 13px bottom / 7px 30px no-repeat, linear-gradient(currentColor, currentColor) 26px bottom / 7px 42px no-repeat, linear-gradient(currentColor, currentColor) 39px bottom / 7px 26px no-repeat; border-bottom: 3px solid currentColor } .icon-chart::after{ inset: 20px 16px; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor } .icon-target::before{ inset: 20px; border: 4px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 9px rgba(5, 15, 30, .9), inset 0 0 0 13px currentColor } .icon-target::after{ inset: 12px; background: linear-gradient(currentColor, currentColor) 50% 0 / 3px 15px no-repeat, linear-gradient(currentColor, currentColor) 50% 100% / 3px 15px no-repeat, linear-gradient(90deg, currentColor, currentColor) 0 50% / 15px 3px no-repeat, linear-gradient(90deg, currentColor, currentColor) 100% 50% / 15px 3px no-repeat } @media (max-width:1100px) { .experience{ width: calc(100% - 32px); padding: 54px 18px 48px } .experience-scroll{ padding: 118px 24px 34px 258px } .experience .label{ left: 42px; top: 32px } .experience-copy{ max-width: 620px; margin: 42px 0 0 42px } .experience-copy h2{ font-size: 34px } .experience-copy>p{ max-width: 560px; font-size: 16px } .experience-trust{ width: min(100%, 520px) } .year-track{ left: 18px; top: 190px; bottom: 58px; width: 216px; font-size: 17px } .year-track span, .year-track span:first-child, .year-track span:nth-child(2), .year-track span:nth-child(3), .year-track span:nth-child(4){ padding-right: 72px; font-size: 17px } .year-track::before{ right: 34px } .year-track span::after, .year-track span:last-child::after{ right: 36px; width: 24px; height: 24px } .year-track span:first-child::after{ width: 32px; height: 32px } .year-track span::before{ right: -10px; width: 52px } .jobs .job, .jobs .job:nth-child(1), .jobs .job:nth-child(2), .jobs .job:nth-child(3), .jobs .job:nth-child(4){ grid-template-columns: 210px 1fr 68px } .job{ height: auto; min-height: 220px; padding: 22px 30px; column-gap: 26px } .job h3{ font-size: 20px } .job b{ font-size: 17px } .job p{ font-size: 14px } .job time, .job small, .job .skills-line{ font-size: 12px } .job-icon{ width: 60px; height: 60px } } @media (max-width:700px) { .experience{ width: calc(100% - 22px); padding: 42px 12px 38px } .experience-scroll{ padding: 232px 12px 22px } .experience .label{ left: 24px; top: 28px; font-size: 17px } .experience-copy{ max-width: none; margin: 38px 12px 0 } .experience-copy h2{ font-size: 28px } .experience-copy h2::after{ width: 128px; margin-top: 14px } .experience-copy>p{ font-size: 14px; line-height: 1.45 } .experience-trust{ margin-top: 18px; padding: 14px 16px; grid-template-columns: 38px 1fr; gap: 12px } .experience-trust-icon{ width: 34px; height: 34px } .experience-trust span{ font-size: 13px } .experience-trust b{ font-size: 14px } .year-track{ display: none } .jobs{ gap: 18px } .jobs .job, .jobs .job:nth-child(1), .jobs .job:nth-child(2), .jobs .job:nth-child(3), .jobs .job:nth-child(4), .jobs .job:nth-child(5), .jobs .job:nth-child(6){ grid-template-columns: 1fr 58px } .job{ height: auto; min-height: 260px; padding: 24px 20px } .job h3, .job b, .job time, .job small, .job p{ grid-column: 1 } .job h3{ white-space: normal; margin-left: 58px } .job b, .job time, .job small, .job .skills-line{ margin-left: 58px } .company-logo{ grid-column: 1; width: 44px; height: 44px } .company-logo img{ width: 44px; height: 44px } .job p{ grid-row: auto; margin-top: 14px; max-width: none } .job .skills-line, .job .job-summary{ grid-column: 1; grid-row: auto } .job .summary-link{ grid-template-columns: 112px minmax(0, 1fr); gap: 14px; font-size: 16px } .job .summary-link img{ width: 112px; height: 62px } .job-icon{ grid-column: 2; grid-row: 1 / span 2; width: 52px; height: 52px } } .experience-toggle, .send-message, .footer-hire{ --hud-button-cut: 10px; min-width: 174px; height: 56px; padding: 0 20px 0 28px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; border: 0; color: #fff7ef; background: transparent; box-shadow: none; filter: drop-shadow(0 0 10px rgba(52, 112, 255, .65)) drop-shadow(0 0 14px rgba(255, 142, 31, .7)); font: 800 20px/1 var(--font-ui); clip-path: var(--hud-button-clip) } .experience-toggle::before, .send-message::before, .footer-hire::before .experience-toggle::after, .send-message::after, .footer-hire::after .experience-toggle:hover, .experience-toggle:focus-visible, .send-message:hover, .send-message:focus-visible, .footer-hire:hover, .footer-hire:focus-visible .experience-toggle i, .send-message i, .footer-hire i, .footer-hire svg .experience{ display: grid; grid-template-columns: 388px minmax(0, 1fr); gap: 34px; width: min(1870px, calc(100% - 96px)); min-height: 820px; padding: 38px 58px 70px 72px; overflow: hidden } .experience.is-collapsed{ min-height: 820px } .experience-copy{ grid-column: 1; position: relative; z-index: 4; max-width: 388px; min-height: 520px; margin: 0; padding-top: 10px } .experience-copy .label, .experience .experience-copy .label{ position: static; width: auto; margin: 0 0 22px; padding: 0; color: #62a9ff; font-size: 18px; letter-spacing: .08em; text-transform: uppercase } .experience-copy .label::before, .experience .experience-copy .label::before{ display: none } .experience-copy h2 .experience-copy h2::after{ content: ""; display: block; width: 305px; height: 2px; margin-top: 24px; background: linear-gradient(90deg, #5d9eff 0 38%, #ffad25 38% 40%, rgba(255, 173, 37, .72) 41%, transparent 86%); box-shadow: none } .experience-copy>p:not(.label){ display: block; width: 300px; max-width: 100%; margin: 28px 0 0; color: rgba(235, 239, 247, .88); font-size: 16px; font-weight: 500; line-height: 1.62 } .experience-trust{ position: absolute; top: 292px; left: 0; display: grid; width: 356px; min-height: 112px; margin: 0 } .experience-scroll{ grid-column: 2; align-self: start; width: 100%; min-height: 650px; margin-top: 70px; padding: 54px 28px 24px 270px; overflow: visible } .experience.is-collapsed .experience-scroll{ min-height: 650px } .experience .year-track{ left: -34px; top: 42px; bottom: 64px; width: 278px; font-size: 18px } .experience .year-track span, .experience .year-track span:first-child, .experience .year-track span:nth-child(2), .experience .year-track span:nth-child(3), .experience .year-track span:nth-child(4), .experience .year-track span:nth-child(5), .experience .year-track span:nth-child(6){ padding-right: 112px; font-size: 18px } .experience .year-track::before{ right: 86px } .experience .year-track span::after, .experience .year-track span:last-child::after{ right: 86px } .experience .year-track span::before{ right: -8px; width: 94px } @media (max-width:1100px) { .experience{ grid-template-columns: 1fr; width: calc(100% - 32px); padding: 54px 24px 48px } .experience-copy{ grid-column: 1; max-width: 620px; min-height: 0; margin: 0 } .experience-trust{ position: relative; top: auto; left: auto; width: min(100%, 520px); margin-top: 24px } .experience-scroll{ grid-column: 1; margin-top: 34px; padding: 118px 24px 34px 258px } } @media (max-width:700px) { .experience{ width: calc(100% - 22px); padding: 42px 12px 38px } .experience-copy h2{ font-size: 28px } .experience-copy h2::after{ width: 128px; margin-top: 14px } .experience-copy>p:not(.label){ width: auto; font-size: 14px; line-height: 1.45 } .experience-trust{ width: 100% } .experience-scroll{ padding: 32px 12px 22px } } .cyber-bg::before, .cyber-bg::after{ content: ""; position: fixed; inset: 0; pointer-events: none } .cyber-bg::before{ opacity: .05; background: linear-gradient(rgba(100, 180, 255, .8) 1px, transparent 1px), linear-gradient(90deg, rgba(100, 180, 255, .8) 1px, transparent 1px); background-size: 44px 44px; animation: grid-drift 24s linear infinite } .cyber-bg::after{ opacity: .26; background: radial-gradient(circle at 12% 24%, rgba(90, 220, 255, .9) 0 1px, transparent 2px), radial-gradient(circle at 78% 34%, rgba(255, 173, 37, .85) 0 1px, transparent 2px), radial-gradient(circle at 54% 78%, rgba(87, 135, 255, .75) 0 1px, transparent 2px); background-size: 260px 220px, 340px 280px, 300px 260px; animation: particles-float 18s ease-in-out infinite alternate } .scanline{ position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .35; background: linear-gradient(180deg, transparent 0 44%, rgba(95, 209, 255, .16) 50%, transparent 56%); background-size: 100% 480px; animation: scan-pass 9s linear infinite } .hero-orbit-stats span, .trusted-strip, .testimonial-card, .github-activity{ position: relative; overflow: hidden } .hero-orbit-stats b, .github-metrics b{ display: block; color: #fff; font-size: 18px; line-height: 1; } .hero-orbit-stats small, .github-metrics small{ display: block; margin-top: 5px; color: rgba(222, 230, 245, .78); font-size: 10px; line-height: 1.2 } .trusted-strip{ min-height: auto; padding: clamp(34px, 4vw, 54px) clamp(22px, 4vw, 58px); background: radial-gradient(circle at 12% 50%, rgba(91, 180, 255, .12), transparent 18%), radial-gradient(circle at 88% 48%, rgba(255, 173, 37, .1), transparent 20%), linear-gradient(135deg, rgba(5, 15, 34, .9), rgba(3, 9, 22, .96)) } .identity-badges span, .job-proof span, .project-actions a, .cert-meta span{ border: 1px solid rgba(95, 190, 255, .3); background: rgba(27, 54, 104, .22); color: #9fd4ff } .about-profile-card{ position: relative; width: min(100%, 1180px); aspect-ratio: 16 / 9; height: auto; min-height: 500px; max-height: 620px; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 50%, rgba(0, 130, 255, .5), transparent 18%), radial-gradient(circle at 22% 48%, rgba(0, 215, 255, .12), transparent 28%), radial-gradient(circle at 78% 50%, rgba(195, 90, 255, .13), transparent 28%), linear-gradient(135deg, rgba(2, 9, 23, .98), rgba(3, 6, 18, .98)); border: 1px solid rgba(99, 179, 255, .22); box-shadow: inset 0 0 86px rgba(17, 85, 185, .2), 0 0 28px rgba(0, 132, 255, .14) } .about-profile-card::before{ content: ""; position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(circle at 27% 50%, rgba(0, 210, 255, .82) 0 3px, transparent 4px), radial-gradient(circle at 73% 50%, rgba(180, 88, 255, .82) 0 3px, transparent 4px), repeating-linear-gradient(0deg, transparent 0 74px, rgba(0, 120, 255, .09) 75px 76px, transparent 77px 150px), repeating-linear-gradient(90deg, transparent 0 74px, rgba(0, 120, 255, .08) 75px 76px, transparent 77px 150px); background-size: 100% 100%; opacity: .58 } .about-profile-card::after{ content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent 0 33%, rgba(0, 205, 255, .42) 33.3% 33.5%, transparent 34% 66%, rgba(186, 86, 255, .34) 66.5% 66.7%, transparent 67%), repeating-linear-gradient(22deg, transparent 0 54px, rgba(0, 140, 255, .13) 55px 56px, transparent 57px 134px), repeating-linear-gradient(-22deg, transparent 0 62px, rgba(168, 88, 255, .11) 63px 64px, transparent 65px 148px); mask-image: radial-gradient(circle at 50% 50%, transparent 0 29%, #000 30% 100%), linear-gradient(#000, #000); mask-composite: add; opacity: .58 } .about-profile-card .cyan .icon img{ filter: invert(78%) sepia(98%) saturate(1297%) hue-rotate(132deg) brightness(105%) contrast(104%) drop-shadow(0 0 12px rgba(0, 234, 255, .62)) } .about-profile-card .purple .icon img{ filter: invert(72%) sepia(60%) saturate(1518%) hue-rotate(219deg) brightness(104%) contrast(101%) drop-shadow(0 0 12px rgba(217, 121, 255, .62)) } .about-profile-card .cyan{ --profile-accent: #00eaff; border-color: #00eaff; color: #fff; box-shadow: 0 0 25px rgba(0, 234, 255, .42), inset 0 0 25px rgba(0, 234, 255, .05) } .about-profile-card .purple{ --profile-accent: #d979ff; border-color: #c56bff; color: #fff; box-shadow: 0 0 25px rgba(197, 107, 255, .42), inset 0 0 25px rgba(197, 107, 255, .05) } .about-profile-card .particle{ position: absolute; z-index: 1; width: 4px; height: 4px; border-radius: 50%; background: #00eaff; box-shadow: 0 0 12px #00eaff; animation: float 4s infinite ease-in-out } .company-logo:hover{ transform: translateY(-3px) scale(1.05); filter: drop-shadow(0 0 16px rgba(94, 210, 255, .45)) } .job-proof{ grid-column: 2 / 3; display: flex; flex-wrap: wrap; gap: 5px 7px; margin-top: 5px } .job-proof span, .job-proof em{ display: inline-flex; align-items: center; min-height: 20px; padding: 3px 7px; font-size: 10px; line-height: 1.1; font-style: normal; border-radius: 999px } .job-proof em{ color: rgba(238, 244, 255, .84); background: rgba(255, 173, 37, .10); border: 1px solid rgba(255, 173, 37, .24) } .tech-category{ transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease } .tech-category:hover, .testimonial-card:hover, .project-card:hover, .service:hover{ transform: translateY(-5px); box-shadow: 0 0 34px rgba(82, 172, 255, .2), inset 0 0 28px rgba(82, 172, 255, .08) } .tech-category h3::after{ content: attr(data-empty) } .tech-category::before, .service::before, .project-card::before, .testimonial-card::before{ content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(99, 218, 255, .16), transparent 34%); transition: opacity .2s ease } .tech-category:hover::before, .service:hover::before, .project-card:hover::before, .testimonial-card:hover::before{ opacity: 1 } .tech-category[data-tech-count] h3{ align-items: flex-start; flex-wrap: wrap } .tech-exploring-card{ isolation: isolate; min-height: 280px; padding: clamp(24px, 3vw, 34px); grid-template-columns: minmax(280px, .82fr) minmax(360px, 1.18fr); gap: clamp(24px, 4vw, 56px); align-items: center } .tech-exploring-card::after{ content: ""; position: absolute; inset: 12px; z-index: -1; opacity: .36; background: radial-gradient(circle at 70% 52%, rgba(112, 136, 255, .46), transparent 42%); filter: blur(18px); animation: pulse-glow 2.8s ease-in-out infinite alternate } .service>span{ transition: transform .24s ease, filter .24s ease } .service:hover>span{ transform: translateY(-5px) rotate(-8deg) scale(1.08); filter: drop-shadow(0 0 18px rgba(91, 220, 255, .55)) } .service-flow{ display: grid; gap: 6px; margin: 13px 0 8px; text-align: left } .service-flow span{ display: grid; grid-template-columns: 70px 1fr; gap: 8px; color: rgba(235, 241, 252, .78); font-size: 12px; line-height: 1.25 } .service-flow b{ color: #7fdcff; font-size: 10px; text-transform: uppercase; letter-spacing: .08em } .testimonial-grid{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin-top: 34px } .testimonial-card, .github-activity{ border-radius: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(93, 168, 255, .18), transparent 34%), rgba(5, 14, 31, .76); border: 1px solid rgba(105, 166, 255, .32); box-shadow: inset 0 0 24px rgba(95, 145, 255, .08) } .testimonial-card b{ color: #fff; font-size: 18px; line-height: 1.15 } .testimonial-card p{ color: rgba(229, 236, 248, .82); line-height: 1.55 } .project-proof{ display: grid; gap: 6px; margin-top: 14px; padding: 0 30px; color: rgba(235, 241, 252, .78); font-size: 13px } .project-proof b{ color: #8fd9ff } .project-actions{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding: 0 30px 28px } .project-actions a{ padding: 7px 10px; color: #dfeaff; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase } .projects .project-card{ min-height: 620px } .projects .project-image{ height: 330px; min-height: 330px } .projects .project-card h3{ margin-top: -84px } .projects .project-card p{ font-size: 16px } .projects .tags span{ font-size: 12px } .cert-grid::before{ content: ""; position: absolute; left: 0; right: 0; top: 31px; height: 2px; background: linear-gradient(90deg, rgba(93, 158, 255, .18), rgba(93, 158, 255, .9), rgba(255, 173, 37, .9), rgba(93, 158, 255, .18)); box-shadow: 0 0 16px rgba(111, 174, 255, .5) } .cert-meta{ display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; margin: 9px auto 0 } .cert-meta span{ padding: 3px 6px; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase } .testimonials{ min-height: 620px; padding: clamp(48px, 5vw, 78px) clamp(22px, 4vw, 58px); background: radial-gradient(circle at 13% 18%, rgba(91, 160, 255, .12), transparent 20%), radial-gradient(circle at 84% 22%, rgba(255, 173, 37, .12), transparent 22%), linear-gradient(135deg, rgba(5, 15, 34, .94), rgba(3, 9, 22, .96)) } .testimonial-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: clamp(30px, 4vw, 52px) } .testimonial-card{ --testimonial-accent: #66dfff; min-height: 250px; padding: 30px 28px 26px; display: flex; flex-direction: column; gap: 20px; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px)); border-color: color-mix(in srgb, var(--testimonial-accent) 46%, transparent); background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--testimonial-accent) 16%, transparent), transparent 38%), linear-gradient(145deg, rgba(12, 27, 58, .72), rgba(3, 10, 24, .92)); box-shadow: inset 0 0 28px color-mix(in srgb, var(--testimonial-accent) 8%, transparent), 0 0 22px rgba(0, 0, 0, .22) } .testimonial-card.orange-border{ --testimonial-accent: #ffad37 } .testimonial-card.purple-border{ --testimonial-accent: #a46cff } .testimonial-mark{ position: absolute; right: 24px; top: 12px; color: color-mix(in srgb, var(--testimonial-accent) 38%, transparent); font-family: var(--font-heading); font-size: 78px; line-height: 1; } .testimonial-top{ position: relative; z-index: 2; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: center } .testimonial-top img{ width: 44px; height: 44px; padding: 10px; border: 1px solid color-mix(in srgb, var(--testimonial-accent) 48%, transparent); background: rgba(7, 18, 42, .7); filter: invert(75%) sepia(83%) saturate(684%) hue-rotate(161deg) brightness(104%) contrast(101%) drop-shadow(0 0 12px color-mix(in srgb, var(--testimonial-accent) 54%, transparent)) } .testimonial-top b{ display: block; color: #fff; font-size: 20px; line-height: 1.15 } .testimonial-top small{ display: block; margin-top: 4px; color: color-mix(in srgb, var(--testimonial-accent) 72%, #d9e6ff); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase } .testimonial-card p{ position: relative; z-index: 2; margin: 0; color: rgba(232, 239, 251, .86); font-size: 17px; line-height: 1.55; font-weight: 650 } .testimonial-meta{ position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto } .testimonial-meta span{ padding: 7px 10px; color: color-mix(in srgb, var(--testimonial-accent) 78%, #e9f4ff); font-size: 11px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; border: 1px solid color-mix(in srgb, var(--testimonial-accent) 34%, transparent); background: rgba(4, 14, 32, .66) } .github-activity{ scroll-margin-top: 120px; min-height: 620px; padding: clamp(44px, 5vw, 78px) clamp(22px, 4vw, 58px); display: grid; grid-template-columns: minmax(320px, .92fr) minmax(420px, 1.08fr); gap: clamp(28px, 4vw, 58px); align-items: start; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(91, 190, 255, .16), transparent 34%), radial-gradient(circle at 14% 18%, rgba(69, 134, 255, .14), transparent 20%), radial-gradient(circle at 88% 22%, rgba(255, 173, 37, .12), transparent 22%), linear-gradient(135deg, rgba(5, 15, 34, .94), rgba(3, 9, 22, .96)) } .github-copy{ align-self: start } .github-focus{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px } .github-focus span{ display: inline-flex; align-items: center; gap: 9px; min-height: 38px; padding: 8px 12px; color: #c8dcff; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border: 1px solid rgba(111, 166, 255, .3); background: rgba(7, 19, 42, .62) } .github-focus img{ width: 22px; height: 22px; object-fit: contain } .github-metrics{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-self: start } .github-metrics span{ min-height: 122px; position: relative; overflow: hidden; display: grid; grid-template-rows: 28px auto auto; place-items: center; padding: 16px 14px; text-align: center; border: 1px solid rgba(111, 166, 255, .38); background: linear-gradient(145deg, rgba(24, 47, 88, .46), rgba(4, 13, 30, .78)), rgba(20, 39, 78, .2); box-shadow: inset 0 0 22px rgba(91, 160, 255, .08), 0 0 18px rgba(0, 0, 0, .18) } .github-metrics span::after{ content: ""; position: absolute; inset: auto 18px 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(92, 220, 255, .82), rgba(255, 173, 37, .72), transparent); box-shadow: 0 0 12px rgba(91, 220, 255, .42) } .github-metrics img{ width: 25px; height: 25px; object-fit: contain; filter: invert(75%) sepia(83%) saturate(684%) hue-rotate(161deg) brightness(104%) contrast(101%) drop-shadow(0 0 10px rgba(86, 221, 255, .48)) } .github-board{ grid-column: 1 / -1; position: relative; padding: 22px; border: 1px solid rgba(111, 166, 255, .3); background: radial-gradient(circle at 74% 35%, rgba(91, 220, 255, .12), transparent 28%), rgba(4, 13, 30, .7); box-shadow: inset 0 0 28px rgba(93, 158, 255, .08) } .github-board-head{ display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(111, 166, 255, .16) } .github-board-head span{ color: #9edaff; font-size: 16px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase } .github-board-head small{ color: rgba(222, 231, 246, .66); font-size: 12px; font-weight: 700 } .contribution-graph{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 20px; gap: 6px } .contribution-graph span{ min-width: 0; border: 1px solid rgba(100, 190, 255, .16); background: rgba(33, 55, 94, .36); box-shadow: inset 0 0 10px rgba(0, 0, 0, .18); transition: transform .2s ease, filter .2s ease } .contribution-graph span:hover{ transform: translateY(-2px); filter: brightness(1.25) } .contribution-graph span:nth-child(3n){ background: rgba(92, 222, 255, .32) } .contribution-graph span:nth-child(4n){ background: rgba(255, 173, 37, .3) } .contribution-graph span:nth-child(7n){ background: rgba(135, 104, 255, .38) } .contribution-graph span:nth-child(11n){ background: rgba(92, 222, 255, .62); box-shadow: 0 0 14px rgba(92, 222, 255, .22) } .github-legend{ display: flex; justify-content: flex-end; align-items: center; gap: 7px; margin-top: 16px; color: rgba(222, 231, 246, .62); font-size: 11px; font-weight: 700 } .github-legend i{ width: 15px; height: 15px; border: 1px solid rgba(100, 190, 255, .16); background: rgba(33, 55, 94, .36) } .github-legend i:nth-of-type(2){ background: rgba(92, 222, 255, .26) } .github-legend i:nth-of-type(3){ background: rgba(135, 104, 255, .38) } .github-legend i:nth-of-type(4){ background: rgba(255, 173, 37, .42) } .github-activity .hud-action{ justify-self: start; align-self: start } .contact-availability{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0 } .contact{ padding-right: clamp(34px, 5vw, 72px); grid-template-columns: minmax(360px, .88fr) minmax(440px, .92fr); gap: clamp(28px, 4vw, 58px) } .contact-form{ min-width: 0 } .contact-availability span{ padding: 14px; color: rgba(231, 238, 250, .84); border: 1px solid rgba(104, 169, 255, .3); background: rgba(7, 17, 37, .62) } .contact-availability b{ display: block; margin-bottom: 5px; color: #8fd9ff; text-transform: uppercase; letter-spacing: .08em; font-size: 11px } .footer-stack span{ color: rgba(225, 233, 246, .72); font-size: 14px; line-height: 1.7 } .footer{ padding-left: clamp(34px, 3vw, 60px); padding-right: clamp(34px, 3vw, 60px); grid-template-columns: minmax(230px, 1.18fr) minmax(120px, .62fr) minmax(140px, .7fr) minmax(125px, .62fr) minmax(150px, .72fr) minmax(190px, .86fr); gap: 22px; align-items: start } .footer .footer-cta{ min-height: 0; align-self: start; display: grid; gap: 12px; min-width: 0; overflow: hidden } .footer-cta-label .footer-cta .section-divider .footer-cta .footer-cta-title .footer-cta .section-description .footer-cta .footer-hire{ order: initial } @media (max-width:1180px) { .footer{ grid-template-columns: 1.2fr .75fr .8fr .75fr .9fr } .footer .footer-cta{ grid-column: 1 / -1; max-width: 520px; padding-top: 22px } } .cursor-glow{ position: fixed; left: 0; top: 0; width: 260px; height: 260px; pointer-events: none; z-index: 9999; opacity: .42; border-radius: 50%; background: radial-gradient(circle, rgba(85, 205, 255, .18), rgba(255, 173, 37, .1) 38%, transparent 68%); transform: translate3d(-50%, -50%, 0); mix-blend-mode: screen } @media (max-width:1180px) { .github-activity{ grid-template-columns: 1fr } .github-board{ grid-column: auto } } @media (max-width:900px) { .testimonial-grid{ grid-template-columns: 1fr } .contact-availability, .github-metrics{ grid-template-columns: 1fr } .job-proof{ grid-column: 1 / -1 } .tech-exploring-card{ grid-template-columns: 1fr } .about-profile-card{ min-height: 620px; aspect-ratio: auto } } @media (max-width:1500px) { .tech-exploring-card{ min-height: 360px; grid-template-columns: 1fr; gap: 0 } } @media (max-width:640px) { .service-flow span{ grid-template-columns: 1fr } .contribution-graph{ grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 16px; gap: 5px } .github-board{ padding: 16px } .github-board-head{ display: grid; gap: 6px } .github-focus span{ width: 100% } .about-profile-card{ min-height: 720px; aspect-ratio: auto } } @media (prefers-reduced-motion:reduce) { .cyber-bg::before, .cyber-bg::after, .scanline, .hero-tech-orbit, .hero-tech-orbit img, .identity-orbit, .trusted-track, .explore-cube-3d, .explore-platform{ animation: none !important } } body{ font-family: var(--font-body); font-size: var(--fs-md); line-height: var(--line-height-body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased } h1, h2, h3, .brand strong, .stat strong, .section-head h2, .services-copy h2, .cert-copy h2{ font-family: var(--font-heading); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading) } p, li, small, input, textarea{ font-family: var(--font-body) } .btn, .hud-action, .hire-btn, .header-match-btn, .experience-toggle, .cert-all, .service a, .cert-card a, button{ font-family: var(--font-ui); font-weight: 800; letter-spacing: var(--letter-spacing-ui); text-transform: uppercase; transition: transform var(--transition), filter var(--transition), box-shadow var(--transition), color var(--transition) } input, textarea, button, a{ -webkit-tap-highlight-color: transparent } img, svg{ max-width: 100% } img{ height: auto } .section>.label, .section-head .label, .about-text>.label, .contact-info>.label, .experience>.label, .skills-hud .skills-intro>.label, .services-hud .services-copy>.label, .certs-hud .cert-copy>.label, .certifications .label, .projects .label{ font-size: var(--section-kicker-size); line-height: 1.1 } .section-head h2, .about-text h2, .contact-info h2, .skills-hud .skills-intro h2, .services-hud .services-copy h2, .certs-hud .cert-copy h2, .services-copy h2, .cert-copy h2{ font-size: var(--section-title-size); line-height: var(--section-title-line-height) } .hero h1{ font-size: clamp(34px, 4.1vw, 38px) } .hero-role, .hero-copy, .about-text p, .contact-info p, .footer-brand p{ font-size: 17px } .intro, .section>.label, .section-head .label, .skills-hud .skills-intro>.label, .services-hud .services-copy>.label, .certs-hud .cert-copy>.label{ font-size: 14px } .btn, .hire-btn, .header-match-btn, .hud-action, .footer-hire, .experience-toggle, .service a, .cert-card a{ font-size: 15px } .stat strong, .experience-copy h2, .certifications.certs-hud .cert-copy h2{ font-size: 36px } .brand strong{ font-size: 22px } .nav a{ font-size: 16px } .stat span, .job b, .job .summary-link, .service h3, .cert-card h3, .info-grid h3, .core-strength h3, .exploring-card h3{ font-size: 17px } .job h3{ font-size: 21px } .job p, .job .job-summary, .service p, .cert-card p, .cert-card small, .experience-copy>p, .experience-trust span, .services-cta p, .services-cta li, .footer a, .footer p, .footer small{ font-size: 14px } .section-label{ display: inline-flex !important; align-items: center !important; gap: 10px !important; color: #8fc4ff !important; font-family: var(--font-ui) !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1.1 !important; letter-spacing: .12em !important; text-transform: uppercase !important; } .section-label-icon, .section-label .credential-badge-icon{ flex: 0 0 auto; width: 28px; height: 28px; object-fit: contain; filter: var(--section-label-icon-filter, invert(68%) sepia(83%) saturate(966%) hue-rotate(174deg) brightness(106%) contrast(104%) drop-shadow(0 0 10px rgba(0, 194, 255, .72))) } #home .section-label, #experience .section-label, #certifications .section-label, #contact .section-label{ --section-label-icon-filter: invert(68%) sepia(83%) saturate(966%) hue-rotate(174deg) brightness(106%) contrast(104%) drop-shadow(0 0 10px rgba(0, 194, 255, .72)) } #about .section-label, #skills .section-label, #services .section-label, #projects .section-label, .footer-cta .section-label{ --section-label-icon-filter: invert(72%) sepia(93%) saturate(1201%) hue-rotate(342deg) brightness(104%) contrast(103%) drop-shadow(0 0 10px rgba(255, 169, 37, .76)) } .section-title{ color: #f8fbff !important; font-family: var(--font-heading); font-size: clamp(34px, 4.1vw, 38px) !important; line-height: var(--section-title-line-height); letter-spacing: var(--letter-spacing-heading); } .section-title span{ color: transparent; background: linear-gradient(90deg, var(--blue), var(--orange)); -webkit-background-clip: text; background-clip: text } .section-description{ color: rgba(235, 239, 247, .88) !important; font-family: var(--font-body); font-size: 17px !important; line-height: var(--section-subtitle-line-height); font-weight: 500 } .section-divider{ position: relative; z-index: 3; display: block; min-width: 250px; width: 100%; ; max-width: 100%; height: 2px; margin: 24px auto; background: linear-gradient(90deg, transparent 0%, #6ea5ff 10%, #7eb0ff 30%, #ffb14a 60%, rgba(255, 151, 32, .88) 90%, transparent 100%); box-shadow: 0 0 6px rgba(91, 157, 255, .58), 0 0 10px rgba(255, 169, 37, .42) } .section-divider::before{ content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: #ffd076; transform: translate(-50%, -50%); box-shadow: 0 0 4px #fff5c8, 0 0 10px rgba(255, 171, 48, .95), 0 0 18px rgba(255, 133, 30, .75) } .tech-trust{ display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 16px; padding: 18px 22px } .tech-trust .tech-trust-icon{ position: static; width: 52px; height: 52px; transform: none } .tech-trust span{ max-width: none; min-width: 0; font-size: 14px; line-height: 1.5 } .tech-trust b{ font-size: 15px } .section-trust, .experience-trust, .tech-trust, .services.services-hud .service-trust, .certifications.certs-hud .cert-trust{ --tech-accent: #35caff; color: #dce8fb; border: 1px solid color-mix(in srgb, var(--tech-accent) 72%, transparent) !important; border-radius: 12px !important; background: radial-gradient(circle at 14% 0, color-mix(in srgb, var(--tech-accent) 18%, transparent), transparent 28%), linear-gradient(145deg, rgba(4, 16, 38, .84), rgba(1, 7, 19, .94)) !important; clip-path: none !important; box-shadow: inset 0 0 34px color-mix(in srgb, var(--tech-accent) 8%, transparent), 0 0 24px rgba(0, 0, 0, .2) !important } .tech-trust, .certifications.certs-hud .cert-trust{ --tech-accent: #4aa7ff } .experience-trust{ --tech-accent: #bd6bff } .services.services-hud .service-trust{ --tech-accent: #ff8b1f } .projects-trust{ --tech-accent: #35caff } .services.services-hud .service-trust{ isolation: isolate; color: #08aaff; border: 0 !important; border-radius: 0 !important; background: transparent !important; clip-path: var(--hud-button-clip) !important; box-shadow: none !important } .services.services-hud .service-trust::before, .services.services-hud .service-trust::after{ content: ""; position: absolute; clip-path: inherit; pointer-events: none } .services.services-hud .service-trust::before{ inset: 0; z-index: -2; border: 2px solid currentColor; background: radial-gradient(circle at 50% 26%, color-mix(in srgb, currentColor 12%, transparent), transparent 25%), linear-gradient(132deg, rgba(2, 12, 32, .84), rgba(2, 7, 18, .94) 64%, color-mix(in srgb, currentColor 8%, transparent)); box-shadow: inset 0 0 42px rgba(0, 0, 0, .44), 0 0 24px color-mix(in srgb, currentColor 24%, transparent) } .services.services-hud .service-trust::after{ inset: 22px 24px; z-index: -1; opacity: .18; background: radial-gradient(circle at 82% 30%, currentColor 0 1px, transparent 2px) 0 0 / 13px 13px, linear-gradient(currentColor, currentColor) 0 100% / 72px 1px no-repeat } .hero-left, .about-text, .contact-info, .footer-cta{ display: flex; flex-direction: column; align-self: stretch } .hero-left{ min-height: 560px; justify-content: flex-start } .about-text{ min-height: 470px } .contact-info{ min-height: 520px } .footer-cta{ min-height: 360px } .hero-left .actions{ order: 10 } .hero-left .socials{ order: 11 } .about-text .info-grid, .contact-info .contact-detail, .footer-cta .footer-hire{ order: 10 } .experience-trust, .tech-trust, .services.services-hud .service-trust{ bottom: 0; top: auto } @media (max-width:1100px) { .hero-left, .about-text, .contact-info, .footer-cta{ min-height: 0 } .experience-trust, .certifications.certs-hud .cert-trust{ position: relative; inset: auto; margin-top: 24px } } .services.services-hud .services-copy::after, .tech-hero-copy::after, .certifications.certs-hud .cert-copy::after, .experience-copy h2::after{ display: none !important } :where(.hud-button){ --button-width: auto; --button-min-width: 152px; --button-height: 44px; --button-cut: 9px; --button-pad-x: 20px; --button-gap: 11px; --button-font-size: 16px; --button-icon-size: 18px; --button-outer: linear-gradient(100deg, #6490ff 0%, #315dff 38%, #ff9c28 72%, #ffd36c 100%); --button-inner: linear-gradient(108deg, #3158dd 0%, #304dc5 42%, #a85d25 67%, #f1982d 100%); position: relative; isolation: isolate; width: var(--button-width) !important; min-width: var(--button-min-width) !important; height: var(--button-height) !important; min-height: var(--button-height) !important; padding-inline: var(--button-pad-x) !important; display: inline-flex; align-items: center; justify-content: center; gap: var(--button-gap) !important; border: 0; border-radius: 0; color: #fff7ef; background: transparent; clip-path: var(--hud-button-clip); --hud-button-cut: var(--button-cut) !important; font: 800 var(--button-font-size)/1 var(--font-ui) !important; white-space: nowrap; text-decoration: none; filter: drop-shadow(0 0 10px rgba(52, 112, 255, .65)) drop-shadow(0 0 14px rgba(255, 142, 31, .7)) } :where(.hud-button)::before, :where(.hud-button)::after{ content: ""; position: absolute; clip-path: inherit; pointer-events: none } :where(.hud-button)::before{ inset: 0; z-index: -2; background: var(--button-outer) } :where(.hud-button)::after{ inset: 3px; z-index: -1; background: linear-gradient(90deg, rgba(255, 255, 255, .2) 0 1px, transparent 1px 100%), var(--button-inner); box-shadow: inset 9px 0 15px rgba(0, 211, 255, .3), inset -9px 0 18px rgba(255, 199, 73, .38), inset 0 0 14px rgba(255, 255, 255, .22) } :where(.hud-button):where(img, svg, i, b, span){ flex: 0 0 auto } :where(.hud-button):where(.iconify-ui-icon, svg, i, b, span){ width: var(--button-icon-size) !important; height: var(--button-icon-size) !important; font-size: var(--button-icon-size) !important } :where(.hire-btn, .footer-hire, .footer-hire.header-match-btn){ --button-width: 150px; --button-min-width: 150px; --button-height: 46px; --button-cut: 9px; --button-pad-x: 18px; --button-gap: 10px; --button-font-size: 16px; --button-icon-size: 18px } .actions .btn{ --button-width: 230px; --button-min-width: 230px; --button-height: 46px; --button-cut: 9px; --button-pad-x: 22px; --button-gap: 14px; --button-font-size: 16px; --button-icon-size: 18px } .actions .btn.blue{ --button-outer: linear-gradient(100deg, #79bdff 0%, #4169ff 12%, #3253dc 70%, #8dd8ff 100%); --button-inner: linear-gradient(102deg, #334dd8 0%, #314ad0 58%, #214391 100%) } :where(.hud-action){ --button-width: 260px; --button-min-width: 260px; --button-height: 46px; --button-cut: 9px; --button-gap: 14px; --button-font-size: 16px; --button-icon-size: 18px } .experience-toggle{ --button-min-width: 210px; --button-height: 42px; --button-font-size: 16px; --button-icon-size: 18px } .projects .section-head .header-match-btn{ --button-width: auto; --button-min-width: 210px; --button-height: 42px; --button-font-size: 16px; --button-icon-size: 18px } .project-card, .cert-card, .job, .service, .services-hud .service, .certs-hud .cert-card, .info-grid article{ --hud-card-cut-x: 46px; --hud-card-cut-y: 58px; border-radius: 0; clip-path: var(--hud-button-clip) } .project-card::before, .project-card::after, .cert-card::before, .cert-card::after, .job::before, .job::after, .service::before, .service::after, .services-hud .service::before, .services-hud .service::after, .certs-hud .cert-card::before, .certs-hud .cert-card::after{ clip-path: inherit } main{ width: 100%; overflow: hidden } main>section:not(#home){ content-visibility: auto; contain-intrinsic-size: 760px } .stats, .hero, .section, .about, .experience, .skills, .services, .services-hud, .certifications, .certs-hud, .projects, .contact, .footer{ width: min(var(--page-max-width), calc(100% - (var(--page-gutter) * 2))); max-width: var(--page-max-width); margin-left: auto; margin-right: auto } @media (max-width:1700px) { .header{ height: 92px; grid-template-columns: 360px 1fr 150px; gap: 26px; padding: 0 42px } .brand{ gap: 17px } .brand img{ width: 72px; height: 72px } .brand strong{ font-size: 20px } .brand small{ margin-top: 7px; font-size: 8px } .nav{ gap: 30px; font-size: 15px } .nav a::after{ bottom: -17px } .nav a.active::after{ width: 44px } .hire-btn{ width: 148px; height: 48px; gap: 12px; font-size: 17px } .hire-btn i{ width: 25px; height: 25px } .actions{ gap: 18px } .actions .btn{ width: 218px; height: 54px; padding: 0 24px; gap: 16px; font-size: 18px } .actions .btn::after{ inset: 3px } .actions .btn i{ width: 28px; height: 28px } .stats{ width: min(1500px, calc(100% - 64px)); min-height: 132px; padding: 20px 62px } .stat{ grid-template-columns: 72px auto; gap: 3px 17px } .stat-icon{ width: 60px; height: 60px; border-width: 2px } .stat-icon i, .stat-icon svg{ width: 32px; height: 32px } .stat strong{ font-size: 42px } .stat small{ font-size: 14px } .about{ grid-template-columns: minmax(320px, .85fr) minmax(520px, 1.15fr); gap: 52px; min-height: 560px; padding: 56px 68px 58px } .about-text h2{ font-size: clamp(36px, 3.4vw, 42px) } .about-text p:not(.label){ font-size: 16px } .info-grid b{ font-size: 16px } .info-grid small{ font-size: 14px } .experience{ padding: 28px 54px 54px } .experience .label{ font-size: 18px } .year-track{ margin: 0 72px 20px; font-size: 12px } .jobs{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px } .job{ min-height: 210px; padding: 22px } .job h3{ font-size: 18px } .job b{ font-size: 15px; margin-bottom: 12px } .job p{ font-size: 13px } } @media (max-width:1100px) { .header{ grid-template-columns: 1fr auto; height: auto; min-height: 82px; padding: 12px 22px } .menu-toggle{ display: block } .nav{ display: none; grid-column: 1 / -1; justify-content: start; flex-wrap: wrap; padding: 18px 0 8px } .nav.open{ display: flex } .hire-btn{ display: none } .hero, .about, .contact{ grid-template-columns: 1fr } .about{ padding: 46px 28px; gap: 28px } .about::after{ width: 260px; opacity: .45 } .experience{ padding: 34px 28px 48px } .experience::before{ inset: 34px 16px 18px } .experience::after{ display: none } .year-track{ grid-template-columns: repeat(3, 1fr); gap: 8px 0; margin: 0 24px 20px; font-size: 11px } .year-track span::after{ display: none } .stats, .jobs, .skill-matrix, .cert-grid, .project-grid, .service-grid, .footer{ grid-template-columns: repeat(2, 1fr) } .stats{ gap: 18px 0; padding: 22px 34px; clip-path: var(--hud-button-clip) } .stat:nth-child(2)::after{ display: none } .contact-info{ padding-left: 0 } .contact{ padding: 54px 28px } .radar{ right: 30px; left: auto; opacity: .35 } .radar.hud-portrait{ opacity: .72; transform: translateY(-50%) scale(.78); transform-origin: center } } @media (max-width:700px) { .hero, .section, .stats{ width: calc(100% - 22px) } .hero{ padding: 48px 18px } .hero h1{ font-size: 42px } .actions{ flex-wrap: wrap; gap: 14px } .actions .btn{ width: min(236px, 100%) } .stats, .jobs, .skill-matrix, .cert-grid, .project-grid, .service-grid, .footer, .info-grid, .contact-form{ grid-template-columns: 1fr } .stats{ padding: 20px 18px } .certifications{ padding: 34px 18px 38px } .certifications .section-head{ margin-left: 0 } .cert-card{ min-height: 210px; padding: 26px 22px 24px 104px } .cert-icon{ left: 22px; width: 62px; height: 62px; font-size: 17px } .about{ min-height: auto; padding: 38px 16px } .experience{ padding: 32px 16px 44px } .experience .label{ margin-left: 0 } .year-track{ display: none } .stat{ justify-content: start; padding-left: 22px } .stat::after{ display: none } .jobs{ gap: 16px } .section{ padding: 50px 16px } .year-track{ display: none } .footer{ padding: 30px 20px 0 } .contact{ padding: 42px 16px } .radar.hud-portrait{ opacity: .24; transform: translateY(-50%) scale(.56); right: -92px } .footer-quick-links{ grid-template-columns: 1fr } .footer-cta{ grid-column: auto } .copy{ left: 20px; right: 20px } .brand strong{ font-size: 14px } .brand img{ width: 52px; height: 52px } } .section>.label, .section-head .label, .about-text>.label, .contact-info>.label, .experience>.label, .skills-hud .skills-intro>.label, .services-hud .services-copy>.label, .certs-hud .cert-copy>.label, .certifications .label, .projects .label @media (max-width:700px){ .about-profile-layout .portrait-panel { display: grid !important; transform: none !important } .about.about-profile-layout { display: grid !important; grid-template-columns: 1fr !important; gap: 28px !important; align-items: start !important; padding: 28px 18px 48px !important } .about-profile-layout .about-text { width: 100% !important } } .section-head h2, .about-text h2, .contact-info h2, .skills-hud .skills-intro h2, .services-hud .services-copy h2, .certs-hud .cert-copy h2, .services-copy h2, .cert-copy h2 .project-card, .cert-card, .job, .service, .services-hud .service, .certs-hud .cert-card, .info-grid article .stats, .hero, .section, .about, .experience, .skills, .services, .services-hud, .certifications, .certs-hud, .projects, .contact, .footer .header{ left: 0; right: 0; width: 100%; max-width: none; margin-left: 0; margin-right: 0; justify-content: center } @media (max-width:700px) { :root{ --section-kicker-size: 14px; --section-title-size: clamp(30px, 9vw, 38px); --section-subtitle-size: 14px; --page-gutter: 11px } .section>.label, .section-head .label, .about-text>.label, .contact-info>.label, .experience>.label, .skills-hud .skills-intro>.label, .services-hud .services-copy>.label, .certs-hud .cert-copy>.label, .certifications .label, .projects .label{ font-size: var(--section-kicker-size) } .section-head h2, .about-text h2, .contact-info h2, .skills-hud .skills-intro h2, .services-hud .services-copy h2, .certs-hud .cert-copy h2, .services-copy h2, .cert-copy h2{ font-size: var(--section-title-size) } .project-card, .cert-card, .job, .service, .services-hud .service, .certs-hud .cert-card, .info-grid article{ --hud-card-cut-x: 28px; --hud-card-cut-y: 32px; clip-path: var(--hud-button-clip) } .section-label{ font-size: 14px !important } .section-title{ font-size: 42px !important } .section-description{ font-size: 17px !important } .stats, .hero, .section, .about, .experience, .skills, .services, .services-hud, .certifications, .certs-hud, .projects, .contact, .footer{ width: calc(100% - (var(--page-gutter) * 2)) } } html, body{ max-width: 100%; overflow-x: clip } *, *::before, *::after{ min-width: 0 } @media (min-width:1841px) { :root{ --page-gutter: 40px } .header, .stats, .hero, .section, .about, .experience, .skills, .services, .services-hud, .certifications, .certs-hud, .projects, .contact, .footer{ width: min(1840px, calc(100% - 80px)) } .header{ width: 100%; max-width: none } } @media (max-width:1200px) { :root{ --page-gutter: 24px } .hero, .about, .experience, .tech-stack-showcase, .services.services-hud, .certifications.certs-hud, .contact, .footer{ width: calc(100% - (var(--page-gutter) * 2)) !important; min-height: auto !important; padding: 44px 32px !important } .hero, .about, .tech-stack-showcase, .services.services-hud, .certifications.certs-hud, .contact{ grid-template-columns: 1fr !important; gap: 34px !important } .tech-stack-showcase .tech-hero, .tech-content, .services.services-hud .services-copy, .services.services-hud .service-grid, .certifications.certs-hud .cert-copy, .certifications.certs-hud .cert-grid{ grid-column: 1 !important } .tech-stack-showcase .tech-hero, .services.services-hud .services-copy, .certifications.certs-hud .cert-copy{ position: relative !important; min-height: 0 !important; max-width: 780px !important; padding-top: 0 !important } .tech-trust, .services.services-hud .service-trust, .certifications.certs-hud .cert-trust, .experience-trust{ position: relative !important; inset: auto !important; width: min(420px, 100%) !important; margin-top: 26px !important } .tech-category-grid, .services.services-hud .service-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; margin-top: 30px !important } .certifications.certs-hud .cert-grid{ display: grid !important; grid-template-columns: repeat(3, minmax(220px, 1fr)) !important; grid-auto-flow: row !important; grid-auto-columns: auto !important; gap: 88px 24px !important; margin-top: 34px !important; padding-top: 78px !important; overflow: visible !important } .certifications.certs-hud .cert-grid::before{ left: 0 !important; right: 0 !important; width: auto !important } .contact{ padding-left: 32px !important } .radar.hud-portrait{ position: relative !important; left: auto !important; right: auto !important; top: auto !important; justify-self: center; transform: none !important } .contact-info, .contact-form{ width: 100% } } @media (max-width:900px) { :root{ --page-gutter: 18px } .header{ width: 100%; min-height: 74px; padding: 10px 16px } .brand{ max-width: calc(100vw - 104px) } .nav.open{ gap: 12px 18px } .hero, .about, .experience, .tech-stack-showcase, .tech-stack-cta-section, .services.services-hud, .services-cta-section, .certifications.certs-hud, .contact, .footer{ width: calc(100% - (var(--page-gutter) * 2)) !important; padding: 36px 24px !important } .hero-right, .portrait-panel, .radar.hud-portrait{ transform: scale(.82) !important; transform-origin: center } .stats{ width: calc(100% - (var(--page-gutter) * 2)) !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important } .tech-category-grid, .services.services-hud .service-grid, .certifications.certs-hud .cert-grid, .project-grid, .jobs, .footer{ grid-template-columns: 1fr !important } .tech-wide-row, .tech-bottom-cta, .services-cta{ grid-template-columns: 1fr !important } .leadership-list{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important } .tech-exploring-card{ grid-template-columns: 1fr !important } .contact-form{ grid-template-columns: 1fr !important } .contact-form .wide{ grid-column: 1 !important } .footer-bottom, .copy{ position: static !important; grid-column: 1 / -1 !important } } @media (min-width:701px) and (max-width:1200px) { .experience .experience-scroll{ position: relative !important; padding: 118px 24px 34px 258px !important } .experience .year-track{ position: absolute !important; left: 0 !important; top: 107px !important; bottom: 95px !important; width: 220px !important; margin: 0 !important; display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: repeat(4, minmax(0, 1fr)) !important; gap: 0 !important } .experience .year-track span, .experience .year-track span:first-child, .experience .year-track span:nth-child(2), .experience .year-track span:nth-child(3), .experience .year-track span:nth-child(4){ display: inline-grid !important; place-items: center end !important; padding-right: 72px !important; font-size: 17px !important } .experience .year-track::before{ right: 44px !important } .experience .year-track span::after, .experience .year-track span:last-child::after{ right: 44px !important } .experience .year-track span::before{ right: -8px !important; width: 52px !important } .experience.is-collapsed .year-track span:nth-child(n+5){ display: none !important } } @media (max-width:700px) { :root{ --page-gutter: 11px } .hero, .about, .experience, .tech-stack-showcase, .tech-stack-cta-section, .services.services-hud, .services-cta-section, .certifications.certs-hud, .contact, .footer{ padding: 30px 16px !important } .section-label{ font-size: 12px !important; gap: 8px !important; letter-spacing: .1em !important } .section-label-icon, .section-label .credential-badge-icon{ width: 22px !important; height: 22px !important } .section-title, .hero h1, .about-text h2, .experience-copy h2, .tech-hero-copy h2, .services-copy h2, .cert-copy h2, .contact-info h2, .footer-cta-title{ font-size: clamp(28px, 10vw, 38px) !important; line-height: 1.08 !important; overflow-wrap: anywhere } .section-description, .hero-copy, .about-text p, .contact-info .contact-description{ font-size: 15px !important; line-height: 1.55 !important } .section-divider{ min-width: 0 !important; width: min(305px, 100%) !important; margin-left: 0 !important; margin-right: 0 !important } .hero-left, .about-text, .contact-info, .footer-cta{ min-height: 0 !important } .actions, .socials, .footer-socials{ width: 100% } .actions .hud-button, .hud-action, .footer-hire, .hire-btn{ --button-width: 100%; --button-min-width: 0; max-width: 100% } .hero-right, .portrait-panel, .radar.hud-portrait{ display: none !important } .stats{ grid-template-columns: 1fr !important; padding: 18px 14px !important } .stat{ padding-left: 0 !important } .info-grid, .tech-list.two-col, .leadership-list{ grid-template-columns: 1fr !important } .leadership-list span{ min-height: 0 !important; flex-direction: row !important; justify-content: flex-start !important; text-align: left !important; border-right: 0 !important } .tech-category, .services.services-hud .service, .certifications.certs-hud .cert-card, .project-card, .job{ min-height: auto !important } .certifications.certs-hud .cert-grid{ grid-auto-flow: row !important; grid-auto-columns: auto !important; gap: 82px !important; padding-top: 74px !important } .certifications.certs-hud .cert-card{ width: 100% !important; padding: 28px 18px 18px !important } .certifications.certs-hud .cert-icon, .certifications.certs-hud .cert-icon-img{ position: relative !important; left: auto !important; top: auto !important; margin: 0 auto 12px !important } .certifications.certs-hud .cert-card h3{ min-height: 0 !important } .contact-detail{ align-items: flex-start !important; overflow-wrap: anywhere } .footer{ gap: 24px !important } } @media (max-width:420px) { :root{ --page-gutter: 8px } .header{ padding-inline: 12px } .brand img{ width: 44px !important; height: 44px !important } .brand strong{ font-size: 12px !important } .brand small{ font-size: 8px !important } .menu-toggle{ width: 42px !important; height: 42px !important } .hero, .about, .experience, .tech-stack-showcase, .tech-stack-cta-section, .services.services-hud, .services-cta-section, .certifications.certs-hud, .contact, .footer{ padding: 26px 12px !important } .section-title, .hero h1, .about-text h2, .experience-copy h2, .tech-hero-copy h2, .services-copy h2, .cert-copy h2, .contact-info h2{ font-size: clamp(25px, 11vw, 34px) !important } .section-description{ font-size: 14px !important } .section-trust, .experience-trust, .tech-trust, .services.services-hud .service-trust, .certifications.certs-hud .cert-trust{ grid-template-columns: 42px minmax(0, 1fr) !important; padding: 14px 14px !important } .tech-trust .tech-trust-icon, .services.services-hud .service-trust-icon, .certifications.certs-hud .cert-trust-icon, .experience-trust-icon{ width: 38px !important; height: 38px !important } .tech-list span, .leadership-list span, .services-cta li, .contact-detail{ font-size: 14px !important } input, textarea{ font-size: 16px !important } } .hero{ position: relative; min-height: min(860px, calc(100vh - 24px)); padding: clamp(48px, 6vw, 96px) clamp(36px, 5.4vw, 94px); display: grid; grid-template-columns: minmax(500px, .92fr) minmax(560px, 1.08fr); gap: clamp(42px, 6vw, 120px); align-items: center; border: 1px solid rgba(80, 138, 220, .18); border-radius: 18px; background: linear-gradient(rgba(60, 125, 210, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(60, 125, 210, .05) 1px, transparent 1px), radial-gradient(circle at 71% 47%, rgba(56, 112, 255, .19), transparent 27%), radial-gradient(circle at 86% 64%, rgba(255, 149, 37, .13), transparent 26%), linear-gradient(105deg, rgba(2, 12, 28, .98), rgba(1, 7, 17, .98)); background-size: 42px 42px, 42px 42px, auto, auto, auto; overflow: hidden } .hero::before{ content: ""; position: absolute; inset: auto -8% -18% 38%; height: 360px; background: repeating-linear-gradient(90deg, rgba(64, 127, 255, .22) 0 1px, transparent 1px 48px), repeating-linear-gradient(0deg, rgba(64, 127, 255, .16) 0 1px, transparent 1px 48px); transform: perspective(620px) rotateX(68deg); transform-origin: center bottom; opacity: .38; pointer-events: none } .hero-left{ position: relative; z-index: 4; max-width: 860px } .hero .section-label{ gap: 14px; margin-bottom: 28px; color: rgba(236, 243, 255, .92); font-size: clamp(14px, 1vw, 18px); letter-spacing: .12em } .hero .section-label span{ color: #76a5ff } .hero .section-title{ max-width: 820px; font-size: clamp(48px, 4.8vw, 76px); line-height: 1.12; letter-spacing: 0 } .hero .section-title span{ display: block; width: fit-content; background: linear-gradient(90deg, #477eff, #a16dff 36%, #ef72c7 61%, #ff9d2f); -webkit-background-clip: text; background-clip: text; color: transparent } .hero-role{ margin-top: 34px; color: #f4f7ff; font-size: clamp(20px, 1.45vw, 27px); font-weight: 900 } .hero-role em{ margin-inline: 18px; color: #ff9d2f } .hero-copy{ max-width: 790px; margin-top: 28px; color: rgba(226, 235, 248, .9); font-size: clamp(18px, 1.25vw, 23px); line-height: 1.55 } .hero-copy b:first-of-type, .hero-copy b:nth-of-type(2){ color: #ffb03a } .hero-copy b:last-of-type{ color: #77a5ff } .hero .section-divider{ width: min(720px, 100%); margin-top: 34px } .actions{ margin-top: 44px; display: flex; flex-wrap: wrap; gap: 30px } .actions .hud-button{ width: min(280px, 100%); min-height: 62px; justify-content: space-between; padding-inline: 30px; border-radius: 8px; font-size: 17px; letter-spacing: .08em } .actions .hud-button span{ font-size: 26px } .socials{ margin-top: 44px; display: flex; gap: 32px } .socials a{ width: 58px; height: 58px; border-radius: 10px; background: rgba(7, 18, 38, .78); border: 1px solid rgba(121, 174, 255, .22); box-shadow: inset 0 0 18px rgba(90, 154, 255, .08), 0 0 20px rgba(0, 0, 0, .22) } .trusted-companies{ position: relative; isolation: isolate; min-height: 520px !important; padding: 48px 64px 70px !important; overflow: hidden; border: none !important; border-radius: 36px !important; background: radial-gradient(circle at 7% 22%, rgba(0, 153, 255, .16), transparent 24%), radial-gradient(circle at 91% 73%, rgba(255, 139, 31, .12), transparent 24%), linear-gradient(115deg, rgba(4, 13, 33, .98), rgba(3, 5, 18, .96) 54%, rgba(18, 7, 19, .93)); box-shadow: inset 0 0 48px rgba(0, 153, 255, .08), inset -18px 0 44px rgba(255, 139, 31, .08), 0 0 24px rgba(0, 153, 255, .2), 0 0 24px rgba(255, 139, 31, .14) } .trusted-companies::before{ content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(rgba(80, 145, 230, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(80, 145, 230, .035) 1px, transparent 1px); background-size: 42px 42px } .trusted-companies::after{ display: none } .trusted-head{ position: relative; z-index: 2; display: flex; align-items: flex-start; gap: 28px } .trusted-eyebrow{ margin: 0; color: #f8fbff !important; font-family: var(--font-heading); font-size: clamp(34px, 4.1vw, 38px) !important; font-weight: 900; line-height: 1.1; letter-spacing: var(--letter-spacing-heading); text-transform: uppercase; } .trusted-eyebrow span{ background: linear-gradient(90deg, var(--blue), var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent } .trusted-map{ position: absolute; z-index: 0; top: 28px; right: 72px; width: min(760px, 48%); height: 260px; opacity: .27; background-image: radial-gradient(circle, rgba(210, 144, 255, .48) 1.6px, transparent 1.8px); background-size: 10px 10px; mask-image: radial-gradient(ellipse at 22% 42%, #000 0 17%, transparent 18%), radial-gradient(ellipse at 52% 45%, #000 0 22%, transparent 23%), radial-gradient(ellipse at 77% 40%, #000 0 26%, transparent 27%), radial-gradient(ellipse at 60% 74%, #000 0 10%, transparent 11%); -webkit-mask-image: radial-gradient(ellipse at 22% 42%, #000 0 17%, transparent 18%), radial-gradient(ellipse at 52% 45%, #000 0 22%, transparent 23%), radial-gradient(ellipse at 77% 40%, #000 0 26%, transparent 27%), radial-gradient(ellipse at 60% 74%, #000 0 10%, transparent 11%) } .trusted-company-card{ --trusted-accent: #20b7ff; position: relative; min-height: 158px; padding: 26px 22px; display: flex; align-items: center; gap: 20px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--trusted-accent) 64%, transparent); border-radius: 20px; background: radial-gradient(circle at var(--mx, 86%) var(--my, 50%), color-mix(in srgb, var(--trusted-accent) 18%, transparent), transparent 36%), linear-gradient(145deg, rgba(9, 20, 45, .8), rgba(3, 7, 20, .92)); box-shadow: inset 0 0 28px rgba(255, 255, 255, .025), 0 16px 30px rgba(0, 0, 0, .24), 0 8px 18px color-mix(in srgb, var(--trusted-accent) 28%, transparent) } .trusted-company-card::before{ content: ""; position: absolute; inset: auto 22px 0; height: 3px; background: linear-gradient(90deg, transparent, var(--trusted-accent), transparent); box-shadow: 0 0 18px var(--trusted-accent) } .trusted-company-card::after{ content: ""; position: absolute; right: 22px; top: 38px; width: 56px; height: 56px; opacity: .32; background-image: radial-gradient(circle, var(--trusted-accent) 1.6px, transparent 1.8px); background-size: 9px 9px } .trusted-company-card img{ width: 86px; height: 86px; flex: 0 0 auto; object-fit: contain; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .96); box-shadow: 0 0 20px rgba(255, 255, 255, .24) } .trusted-company-card strong, .trusted-company-name{ position: relative; z-index: 1; min-width: 0; color: #f8fbff; font-family: var(--font-heading); font-size: clamp(18px, 1.1vw, 22px); font-weight: 800; line-height: 1.1; white-space: nowrap; } .trusted-purple{ --trusted-accent: #d95cff } .trusted-blue{ --trusted-accent: #29a8ff } .trusted-green{ --trusted-accent: #78e65b } .trusted-orange{ --trusted-accent: #ff8b28 } .trusted-cyan{ --trusted-accent: #19b7ff } @media (max-width:1200px) { .trusted-companies{ padding: 42px 36px 52px !important } } @media (max-width:700px) { .trusted-companies{ min-height: auto !important; padding: 30px 18px 34px !important; border-radius: 22px !important } .trusted-head{ gap: 16px } .trusted-map{ display: none } .trusted-company-card{ min-height: 118px } .trusted-company-card img{ width: 74px; height: 74px } } .experience{ display: grid !important; grid-template-columns: minmax(280px, 390px) minmax(0, 1fr) !important; gap: clamp(22px, 3vw, 44px) !important; align-items: start !important; min-height: 100vh !important; padding: clamp(30px, 3.2vw, 56px) !important; overflow: visible !important; border: none !important; border-radius: 0 !important; background: linear-gradient(rgba(48, 110, 184, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(48, 110, 184, .05) 1px, transparent 1px), radial-gradient(circle at 16% 28%, rgba(70, 151, 255, .14), transparent 24%), linear-gradient(90deg, rgba(2, 17, 34, .96), rgba(1, 7, 16, .98) 52%, rgba(5, 12, 20, .96)) !important; background-size: 42px 42px, 42px 42px, auto, auto !important; clip-path: none !important } .experience::before, .experience::after, .experience>.svg-frame{ display: none !important } .experience-copy{ grid-column: 1 !important; position: sticky !important; top: 32px !important; z-index: 4 !important; display: flex !important; flex-direction: column !important; max-width: 390px !important; min-height: 860px !important; margin: 0 !important; padding: 0 0 0 clamp(0px, 2vw, 38px) !important } .experience-copy .section-label{ display: flex !important; align-items: center !important; gap: 10px !important; margin: 0 0 24px !important; color: #9bc2ff !important; font: 900 15px/1 var(--font-ui, "Space Grotesk", system-ui, sans-serif) !important; letter-spacing: .16em !important; text-transform: uppercase !important } .experience-copy .section-label-icon{ width: 24px !important; height: 24px !important } .experience-copy .section-title{ margin: 0 !important; color: #f8fbff !important; font-family: var(--font-heading, "Orbitron", system-ui, sans-serif) !important; font-size: clamp(34px, 3.4vw, 48px) !important; line-height: .98 !important; letter-spacing: .05em !important; text-transform: uppercase !important; } .experience-copy .section-title span{ display: block !important; background: linear-gradient(90deg, #61b9ff, #ffbd65) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important } .experience-copy .section-title::after{ content: none !important } .experience-copy .section-description{ width: min(320px, 100%) !important; margin: 30px 0 0 !important; color: rgba(235, 239, 247, .92) !important; font-size: clamp(15px, 1.1vw, 18px) !important; font-weight: 800 !important; line-height: 1.52 !important } .experience-trust{ position: relative !important; left: auto !important; bottom: auto !important; width: min(390px, 100%) !important; min-height: 0 !important; margin: auto 0 0 !important; padding: 20px !important; display: grid !important; grid-template-columns: 48px minmax(0, 1fr) !important; gap: 14px !important; align-items: center !important; border: 1px solid rgba(196, 114, 255, .75) !important; border-radius: var(--card-radius, 16px) !important; background: linear-gradient(135deg, rgba(8, 20, 43, .94), rgba(13, 8, 26, .96)) !important; box-shadow: inset 0 0 28px rgba(196, 114, 255, .12) !important; clip-path: none !important } .experience-trust-icon{ width: 44px !important; height: 44px !important } .experience-trust span{ color: #e8f6ff !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1.45 !important } .experience-trust b{ display: block !important; margin-bottom: 6px !important; background: linear-gradient(90deg, #66caff, #ffcb72) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; font-size: 16px !important; line-height: 1.18 !important; letter-spacing: .08em !important; text-transform: uppercase !important } .experience-scroll{ grid-column: 2 !important; position: relative !important; z-index: 3 !important; display: grid !important; grid-template-columns: minmax(190px, 250px) minmax(0, 1fr) !important; gap: clamp(18px, 2.4vw, 28px) !important; align-items: start !important; min-height: 0 !important; margin: 78px 0 0 !important; padding: 0 !important; overflow: visible !important; opacity: 1 !important; visibility: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; clip-path: none !important } .experience .year-track{ grid-column: 1 !important; position: sticky !important; top: 32px !important; width: 100% !important; min-height: 0 !important; display: grid !important; grid-template-rows: repeat(6, 170px) !important; gap: 22px !important; color: #f2f6fb !important; text-align: right !important } .experience .year-track::before{ content: "" !important; position: absolute !important; top: -16px !important; bottom: -18px !important; right: 28px !important; width: 4px !important; background: linear-gradient(180deg, rgba(83, 165, 255, .18), #68adff 10%, #68adff 90%, rgba(83, 165, 255, .16)) !important; box-shadow: 0 0 18px rgba(99, 177, 255, .8) !important } .experience .year-track span{ position: relative !important; display: grid !important; place-items: center end !important; padding: 0 78px 0 0 !important; color: #f3f6fb !important; background: transparent !important; font-size: clamp(16px, 1.25vw, 21px) !important; font-weight: 900 !important; line-height: 1.05 !important; white-space: nowrap !important; } .experience .year-track span:first-child{ color: #ffd27a !important } .experience .year-track span::before{ content: "" !important; position: absolute !important; right: -24px !important; top: 50% !important; width: 58px !important; height: 2px !important; background: rgba(71, 130, 202, .46) !important; transform: translateY(-50%) !important } .experience .year-track span::after{ content: "" !important; position: absolute !important; right: 28px !important; top: 50% !important; width: 30px !important; height: 30px !important; border: 4px solid #78baff !important; border-radius: 50% !important; background: radial-gradient(circle, #7fc4ff 0 16%, #091427 18% 49%, #091427 50%) !important; box-shadow: 0 0 16px rgba(112, 183, 255, .95), inset 0 0 9px rgba(112, 183, 255, .85) !important; transform: translate(50%, -50%) !important } .experience .year-track span:first-child::after{ width: 42px !important; height: 42px !important; border-color: #ffd27a !important; box-shadow: 0 0 24px rgba(157, 199, 255, .95), 0 0 32px rgba(255, 184, 82, .65) !important } .experience.is-collapsed .year-track span:nth-child(n+5), .experience.is-collapsed .experience-jobs>article:nth-child(-n+2){ display: none !important } .experience.is-collapsed .year-track{ min-height: 0 !important; grid-template-rows: repeat(4, 170px) !important } .experience.is-expanded .year-track, .experience:not(.is-collapsed) .year-track{ min-height: 0 !important; grid-template-rows: repeat(6, 170px) !important } .experience .jobs, .experience .experience-jobs{ grid-column: 2 !important; position: relative !important; z-index: 3 !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; display: flex !important; flex-direction: column-reverse !important; gap: 22px !important; opacity: 1 !important; visibility: visible !important; transform: none !important } .experience .job, .experience .experience-jobs>article{ width: 100% !important; max-width: none !important; min-width: 0 !important; min-height: 170px !important; height: 170px !important; padding: 20px 28px !important; display: grid !important; grid-template-columns: minmax(250px, .9fr) minmax(240px, 1.1fr) !important; column-gap: 22px !important; align-items: center !important; position: relative !important; isolation: isolate !important; opacity: 1 !important; visibility: visible !important; transform: none !important; border: 3px solid #c579ec !important; border-radius: 0 !important; background: linear-gradient(145deg, rgba(31, 19, 45, .84), rgba(7, 10, 22, .95)) !important; clip-path: var(--hud-button-clip, polygon(0 18px, 18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px))) !important; --hud-button-cut: 18px; box-shadow: inset 0 0 34px rgba(199, 112, 255, .1), 0 0 18px rgba(210, 118, 255, .22) !important } .experience .job.orange-border{ border-color: #bd7626 !important; background: linear-gradient(145deg, rgba(40, 25, 9, .84), rgba(8, 10, 13, .95)) !important; box-shadow: inset 0 0 34px rgba(255, 149, 38, .1), 0 0 18px rgba(222, 135, 43, .22) !important } .experience .job.blue-border{ border-color: #45b7ff !important; background: linear-gradient(145deg, rgba(8, 24, 52, .84), rgba(2, 9, 22, .95)) !important } .experience .job::before, .experience .job::after{ display: none !important } .experience .job>*{ min-width: 0 !important; position: relative !important; z-index: 2 !important } .experience .company-logo{ grid-column: 1 !important; grid-row: 1 / span 2 !important; width: 46px !important; height: 46px !important; display: grid !important; place-items: center !important; color: #ffffff !important; font-size: 14px !important; font-weight: 900 !important; text-decoration: none !important; background: rgba(255, 255, 255, .94) !important; border-radius: 4px !important; overflow: hidden !important } .experience .logo-fallback{ background: linear-gradient(135deg, #17487e, #0b1830) !important } .experience .company-logo img{ width: 100% !important; height: 100% !important; object-fit: contain !important } .experience .job h3{ grid-column: 1 !important; grid-row: 1 !important; margin: 0 0 7px 58px !important; color: #efb5ff !important; font-size: clamp(20px, 1.45vw, 26px) !important; line-height: 1.06 !important; letter-spacing: .03em !important; white-space: normal !important } .experience .job b{ grid-column: 1 !important; grid-row: 2 !important; margin: 0 0 0 58px !important; color: #efb5ff !important; font-size: 16px !important; line-height: 1.16 !important } .experience .job.orange-border h3, .experience .job.orange-border b{ color: #ffc25e !important } .experience .job.blue-border h3, .experience .job.blue-border b{ color: #91d7ff !important } .experience .job time, .experience .job small{ display: block !important; grid-column: 1 !important; margin-left: 58px !important; color: #aeb9c8 !important; font-size: 12px !important; font-weight: 900 !important; line-height: 1.22 !important } .experience .job time{ grid-row: 3 !important; margin-top: 12px !important } .experience .job small{ grid-row: 4 !important; margin-top: 8px !important } .experience .job .skills-line{ grid-column: 1 !important; grid-row: 5 !important; margin: 10px 0 0 58px !important; color: #d8e5f4 !important; font-size: 12px !important; font-weight: 900 !important; line-height: 1.25 !important } .experience .job .skills-line strong{ display: inline !important; color: #78caff !important } .experience .job .job-proof, .experience .job-icon{ display: none !important } .experience .job .job-summary{ grid-column: 2 !important; grid-row: 1 / span 5 !important; align-self: center !important; min-width: 0 !important; margin: 0 !important; color: #f7f8fb !important; font-size: 14px !important; font-weight: 900 !important; line-height: 1.35 !important } .experience .job .summary-link{ display: grid !important; grid-template-columns: 108px minmax(0, 1fr) !important; gap: 18px !important; align-items: center !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; color: #f7f8fb !important; text-decoration: none !important } .experience .job .summary-link img{ width: 108px !important; height: 62px !important; object-fit: contain !important; padding: 7px 12px !important; border: 0 !important; border-radius: 8px !important; background: rgba(255, 255, 255, .95) !important } .experience .job .summary-link span{ display: block !important; min-width: 0 !important; overflow-wrap: anywhere !important; white-space: normal !important } .experience .experience-toggle{ grid-column: 2 !important; justify-self: start !important; width: 235px !important; min-width: 0 !important; min-height: 46px !important; margin: 28px 0 0 !important; font-size: 14px !important } @media (max-width:1300px) { .experience{ grid-template-columns: 1fr !important; min-height: auto !important; padding: 36px 24px 42px !important } .experience-copy{ position: relative !important; top: auto !important; min-height: 0 !important; max-width: 760px !important; padding-left: 0 !important } .experience-trust{ margin-top: 28px !important } .experience-scroll{ grid-column: 1 !important; margin-top: 28px !important; grid-template-columns: 180px minmax(0, 1fr) !important } .experience .year-track{ position: relative !important; top: auto !important } .experience .year-track span{ padding-right: 66px !important; font-size: 16px !important } .experience .job{ grid-template-columns: 1fr !important } .experience .job .job-summary{ grid-column: 1 !important; grid-row: auto !important; margin-top: 18px !important } } @media (max-width:760px) { .experience{ width: calc(100% - 22px) !important; padding: 26px 14px 34px !important } .experience-copy .section-title{ font-size: 30px !important } .experience-copy .section-description{ width: auto !important; font-size: 15px !important } .experience-trust{ grid-template-columns: 1fr !important } .experience-scroll{ grid-template-columns: 1fr !important; gap: 0 !important } .experience .year-track{ display: none !important } .experience .job{ padding: 20px 16px !important } .experience .company-logo, .experience .job h3, .experience .job b, .experience .job time, .experience .job small, .experience .job .skills-line{ grid-column: 1 !important; margin-left: 0 !important } .experience .company-logo{ grid-row: auto !important; margin-bottom: 12px !important } .experience .job h3, .experience .job b, .experience .job time, .experience .job small, .experience .job .skills-line{ grid-row: auto !important } .experience .job .summary-link{ grid-template-columns: 1fr !important; gap: 12px !important } .experience .job .summary-link img{ width: 112px !important } .experience .experience-toggle{ grid-column: 1 !important; width: 100% !important } } .experience .job, .experience .experience-jobs>article{ overflow: hidden !important; border-width: 1px !important; background: radial-gradient(circle at 16% 0%, rgba(118, 92, 255, .18), transparent 34%), radial-gradient(circle at 86% 50%, rgba(55, 210, 255, .09), transparent 30%), linear-gradient(135deg, rgba(13, 23, 45, .96), rgba(4, 8, 18, .98)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 42px rgba(93, 118, 255, .08), 0 16px 34px rgba(0, 0, 0, .32), 0 0 22px rgba(116, 91, 255, .16) !important; transition: filter 180ms ease, transform 180ms ease, box-shadow 180ms ease !important } .experience .job::before{ content: "" !important; display: block !important; position: absolute !important; inset: 1px !important; z-index: 0 !important; pointer-events: none !important; background: linear-gradient(105deg, rgba(255, 255, 255, .1), transparent 22% 78%, rgba(255, 255, 255, .045)), radial-gradient(circle at var(--mx, 18%) var(--my, 0%), rgba(255, 255, 255, .12), transparent 34%) !important; opacity: .7 !important; clip-path: inherit !important } .experience .job::after{ content: "" !important; display: block !important; position: absolute !important; left: 0 !important; top: 22px !important; bottom: 22px !important; width: 4px !important; z-index: 1 !important; pointer-events: none !important; background: linear-gradient(180deg, transparent, #b98cff, transparent) !important; box-shadow: 0 0 18px rgba(185, 140, 255, .7) !important } .experience .job.orange-border{ border-color: rgba(255, 190, 94, .74) !important; background: radial-gradient(circle at 16% 0%, rgba(255, 190, 94, .2), transparent 34%), radial-gradient(circle at 88% 52%, rgba(82, 220, 255, .08), transparent 32%), linear-gradient(135deg, rgba(24, 28, 33, .96), rgba(10, 12, 18, .98)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 42px rgba(255, 183, 71, .08), 0 16px 34px rgba(0, 0, 0, .32), 0 0 22px rgba(255, 172, 58, .18) !important } .experience .job.orange-border::after{ background: linear-gradient(180deg, transparent, #ffc86b, transparent) !important; box-shadow: 0 0 18px rgba(255, 200, 107, .72) !important } .experience .job.purple-border{ border-color: rgba(188, 129, 255, .72) !important; background: radial-gradient(circle at 16% 0%, rgba(188, 129, 255, .22), transparent 34%), radial-gradient(circle at 82% 58%, rgba(45, 217, 255, .08), transparent 32%), linear-gradient(135deg, rgba(17, 17, 42, .97), rgba(7, 8, 21, .98)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 42px rgba(188, 129, 255, .09), 0 16px 34px rgba(0, 0, 0, .32), 0 0 22px rgba(188, 129, 255, .18) !important } .experience .job.blue-border{ border-color: rgba(69, 202, 255, .76) !important; background: radial-gradient(circle at 16% 0%, rgba(69, 202, 255, .18), transparent 34%), radial-gradient(circle at 84% 54%, rgba(85, 255, 190, .08), transparent 32%), linear-gradient(135deg, rgba(8, 25, 48, .97), rgba(3, 9, 21, .98)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 42px rgba(69, 202, 255, .08), 0 16px 34px rgba(0, 0, 0, .32), 0 0 22px rgba(69, 202, 255, .18) !important } .experience .job.blue-border::after{ background: linear-gradient(180deg, transparent, #45caff, transparent) !important; box-shadow: 0 0 18px rgba(69, 202, 255, .72) !important } .experience .job:hover{ filter: brightness(1.06) saturate(1.08) !important; transform: translateY(-2px) !important } #experience.experience{ grid-auto-flow: column !important } #experience.experience .experience-scroll{ grid-column: 2 !important; display: grid !important; grid-template-columns: minmax(170px, 230px) minmax(0, 1fr) !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; transform: none !important; padding: clamp(58px, 5vw, 78px) clamp(30px, 4vw, 58px) !important } #experience.experience .year-track{ grid-column: 1 !important; display: grid !important; grid-template-rows: repeat(6, 170px) !important; opacity: 1 !important; visibility: visible !important; transform: none !important } #experience.experience.is-collapsed .year-track{ grid-template-rows: repeat(6, 170px) !important } #experience.experience.is-collapsed .year-track span:nth-child(n+5){ display: grid !important } #experience.experience .experience-jobs{ grid-column: 2 !important; display: flex !important; opacity: 1 !important; visibility: visible !important; transform: none !important } #experience.experience .experience-jobs>.job{ display: grid !important; opacity: 1 !important; visibility: visible !important } @media (max-width:1300px) { #experience.experience{ grid-auto-flow: row !important } #experience.experience .experience-scroll{ grid-column: 1 !important; grid-template-columns: 170px minmax(0, 1fr) !important } } @media (max-width:760px) { #experience.experience .experience-scroll{ grid-template-columns: 1fr !important } #experience.experience .experience-jobs{ grid-column: 1 !important } } #experience.experience .experience-jobs{ gap: 24px !important } #experience.experience .experience-jobs>.job{ height: 178px !important; min-height: 178px !important; padding: 22px 32px !important; grid-template-columns: minmax(300px, .94fr) minmax(300px, 1.06fr) !important; column-gap: 32px !important; border-width: 1px !important; border-radius: 0 !important; background: linear-gradient(110deg, rgba(255, 255, 255, .105), transparent 18% 82%, rgba(255, 255, 255, .055)), radial-gradient(circle at 8% 10%, rgba(255, 255, 255, .14), transparent 24%), radial-gradient(circle at 92% 52%, rgba(56, 213, 255, .1), transparent 34%), linear-gradient(135deg, rgba(15, 25, 45, .97), rgba(4, 9, 20, .985)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(255, 255, 255, .04), 0 18px 38px rgba(0, 0, 0, .34), 0 0 24px rgba(92, 174, 255, .12) !important } #experience.experience .experience-jobs>.job::before{ inset: 0 !important; background: linear-gradient(90deg, rgba(255, 255, 255, .08), transparent 34%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 46px) !important; opacity: .5 !important } #experience.experience .experience-jobs>.job::after{ top: 18px !important; bottom: 18px !important; width: 5px !important; border-radius: 999px !important } #experience.experience .job.orange-border{ border-color: rgba(255, 196, 97, .82) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 18px 38px rgba(0, 0, 0, .34), 0 0 28px rgba(255, 181, 69, .18) !important } #experience.experience .job.purple-border{ border-color: rgba(204, 146, 255, .78) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 18px 38px rgba(0, 0, 0, .34), 0 0 28px rgba(194, 130, 255, .18) !important } #experience.experience .job.blue-border{ border-color: rgba(74, 206, 255, .82) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 18px 38px rgba(0, 0, 0, .34), 0 0 28px rgba(74, 206, 255, .18) !important } #experience.experience .company-logo{ width: 54px !important; height: 54px !important; padding: 6px !important; border: 1px solid rgba(255, 255, 255, .22) !important; border-radius: 10px !important; background: rgba(255, 255, 255, .96) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, .26), inset 0 0 0 1px rgba(0, 0, 0, .04) !important } #experience.experience .logo-fallback{ padding: 0 !important; color: #dff4ff !important; background: linear-gradient(135deg, rgba(46, 127, 220, .92), rgba(9, 28, 63, .98)) !important } #experience.experience .job h3{ margin-left: 70px !important; margin-bottom: 6px !important; font-size: clamp(19px, 1.35vw, 24px) !important; line-height: 1.02 !important; } #experience.experience .job b, #experience.experience .job time, #experience.experience .job small, #experience.experience .job .skills-line{ margin-left: 70px !important } #experience.experience .job b{ font-size: 13.5px !important; opacity: .96 !important } #experience.experience .job time, #experience.experience .job small{ color: rgba(224, 233, 246, .76) !important; font-size: 10.5px !important } #experience.experience .job .skills-line{ width: fit-content !important; max-width: calc(100% - 70px) !important; padding: 3px 9px !important; color: #e9f7ff !important; border: 1px solid rgba(111, 204, 255, .24) !important; border-radius: 999px !important; background: rgba(58, 169, 255, .1) !important } #experience.experience .job .job-summary{ justify-self: stretch !important; padding: 14px 16px !important; border: 1px solid rgba(255, 255, 255, .08) !important; background: rgba(255, 255, 255, .035) !important; box-shadow: inset 0 0 24px rgba(255, 255, 255, .025) !important } #experience.experience .job .summary-link{ grid-template-columns: 112px minmax(0, 1fr) !important; gap: 20px !important } #experience.experience .job .summary-link img{ width: 112px !important; height: 66px !important; border-radius: 10px !important; box-shadow: 0 10px 22px rgba(0, 0, 0, .24) !important } #experience.experience .job .summary-link span, #experience.experience .job .job-summary{ font-size: 12.25px !important; line-height: 1.38 !important } #experience.experience .job:hover{ filter: brightness(1.08) saturate(1.08) !important; transform: translateY(-3px) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 22px 46px rgba(0, 0, 0, .4), 0 0 34px rgba(98, 190, 255, .22) !important } @media (max-width:1300px) { #experience.experience .experience-jobs>.job{ height: auto !important; min-height: 190px !important; grid-template-columns: 1fr !important } } @media (max-width:760px) { #experience.experience .experience-jobs>.job{ min-height: 0 !important; padding: 20px 16px !important } #experience.experience .job h3, #experience.experience .job b, #experience.experience .job time, #experience.experience .job small, #experience.experience .job .skills-line{ margin-left: 0 !important } #experience.experience .job .skills-line{ max-width: 100% !important } #experience.experience .job .job-summary{ padding: 12px !important } } #experience.experience .experience-jobs>.job{ border-radius: var(--card-radius, 16px) !important; clip-path: none !important } #experience.experience .experience-jobs>.job::before{ border-radius: inherit !important; clip-path: none !important } #experience.experience.is-collapsed .year-track{ grid-template-rows: repeat(4, 170px) !important } #experience.experience.is-collapsed .year-track span:nth-child(n+5), #experience.experience.is-collapsed .experience-jobs>.job:nth-child(-n+2){ display: none !important } #experience.experience.is-expanded .experience-copy{ min-height: 1264px !important } @media (max-width:1300px) { #experience.experience.is-expanded .experience-copy{ min-height: 0 !important } } #experience.experience .experience-jobs>.job{ --company-rgb: 112, 194, 255; --company-rgb-soft: 138, 216, 255; --company-title: #a8ddff; border-width: 2px !important; border-color: rgba(var(--company-rgb), .82) !important; border-radius: 18px !important; background: radial-gradient(circle at 10% 50%, rgba(var(--company-rgb), .13), transparent 32%), linear-gradient(115deg, rgba(7, 16, 36, .98), rgba(6, 10, 23, .98) 54%, rgba(var(--company-rgb), .075)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(var(--company-rgb), .18), 0 16px 34px rgba(0, 0, 0, .34), 0 0 20px rgba(var(--company-rgb), .22) !important } #experience.experience .experience-jobs>.job:nth-child(1){ --company-rgb: 66, 111, 208; --company-rgb-soft: 133, 201, 255; --company-title: #94d6ff } #experience.experience .experience-jobs>.job:nth-child(2){ --company-rgb: 117, 189, 82; --company-rgb-soft: 155, 231, 105; --company-title: #a8e57f } #experience.experience .experience-jobs>.job:nth-child(3){ --company-rgb: 72, 140, 216; --company-rgb-soft: 106, 179, 255; --company-title: #88c8ff } #experience.experience .experience-jobs>.job:nth-child(4){ --company-rgb: 169, 68, 205; --company-rgb-soft: 221, 91, 255; --company-title: #d88cff } #experience.experience .experience-jobs>.job:nth-child(5){ --company-rgb: 72, 140, 216; --company-rgb-soft: 108, 188, 255; --company-title: #8fcaff } #experience.experience .experience-jobs>.job:nth-child(6){ --company-rgb: 194, 111, 39; --company-rgb-soft: 255, 142, 58; --company-title: #ffa86f } #experience.experience .experience-jobs>.job::before, #experience.experience .experience-jobs>.job::after{ content: "" !important; display: block !important; position: absolute !important; pointer-events: none !important; z-index: 1 !important } #experience.experience .experience-jobs>.job::before{ top: 38px !important; right: 34px !important; width: 72px !important; height: 72px !important; border-radius: 0 !important; background-image: radial-gradient(circle, rgba(var(--company-rgb), .54) 1.5px, transparent 1.8px) !important; background-size: 10px 10px !important; opacity: .5 !important; mask-image: linear-gradient(90deg, transparent, #000 30%, #000 76%, transparent) !important } #experience.experience .experience-jobs>.job::after{ left: 26px !important; right: 26px !important; bottom: 0 !important; top: auto !important; width: auto !important; height: 4px !important; border-radius: 999px 999px 0 0 !important; background: linear-gradient(90deg, transparent, rgba(var(--company-rgb), .55) 16%, rgba(var(--company-rgb-soft), .95) 50%, rgba(var(--company-rgb), .55) 84%, transparent) !important; box-shadow: 0 0 18px rgba(var(--company-rgb), .55), 0 -6px 22px rgba(var(--company-rgb), .16) !important; opacity: .95 !important } #experience.experience .job h3, #experience.experience .job.orange-border h3, #experience.experience .job.purple-border h3, #experience.experience .job.blue-border h3{ color: #f8fbff !important; } #experience.experience .job b, #experience.experience .job.orange-border b, #experience.experience .job.purple-border b, #experience.experience .job.blue-border b{ color: var(--company-title) !important } #experience.experience .company-logo{ border-color: rgba(var(--company-rgb), .34) !important; border-radius: 12px !important; background: rgba(255, 255, 255, .98) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, .28), 0 0 24px rgba(var(--company-rgb), .24), inset 0 0 0 1px rgba(var(--company-rgb), .08) !important } #experience.experience .logo-fallback{ background: linear-gradient(135deg, rgba(var(--company-rgb-soft), .84), rgba(var(--company-rgb), .82) 45%, rgba(8, 18, 42, .98)) !important } #experience.experience .job .skills-line{ color: #f4fbff !important; border-color: rgba(var(--company-rgb), .38) !important; background: rgba(var(--company-rgb), .14) !important } #experience.experience .job .job-summary{ border-color: rgba(var(--company-rgb), .18) !important; background: linear-gradient(90deg, rgba(var(--company-rgb), .08), rgba(255, 255, 255, .03)) !important; box-shadow: inset 0 0 24px rgba(var(--company-rgb), .045) !important } #experience.experience .experience-trust{ width: min(440px, 100%) !important; min-height: 150px !important; padding: 22px 24px !important; grid-template-columns: 58px minmax(0, 1fr) !important; gap: 18px !important; align-items: center !important; border: 2px solid transparent !important; border-radius: 18px !important; background: radial-gradient(circle at 13% 52%, rgba(64, 202, 238, .16), transparent 28%), radial-gradient(circle at 78% 18%, rgba(180, 101, 232, .14), transparent 34%), radial-gradient(circle at 96% 82%, rgba(255, 142, 58, .1), transparent 30%), linear-gradient(90deg, rgba(155, 231, 105, .045), transparent 22%), linear-gradient(135deg, rgba(13, 22, 45, .98), rgba(5, 6, 20, .99)) padding-box, linear-gradient(115deg, #75bd52 0%, #48a6ff 28%, #b465e8 58%, #ffa86f 100%) border-box !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 28px rgba(180, 101, 232, .06), 0 0 22px rgba(180, 101, 232, .18), 0 0 18px rgba(64, 202, 238, .08), 0 0 18px rgba(117, 189, 82, .08), 0 0 18px rgba(255, 168, 111, .08) !important } #experience.experience .experience-trust-icon{ width: 50px !important; height: 50px !important; filter: brightness(0) saturate(100%) invert(68%) sepia(87%) saturate(1380%) hue-rotate(163deg) brightness(104%) contrast(103%) drop-shadow(0 0 14px rgba(64, 202, 238, .5)) !important } #experience.experience .experience-trust span{ color: #f4f8ff !important; max-width: 290px !important; font-size: clamp(12px, .72vw, 14px) !important; font-weight: 700 !important; line-height: 1.5 !important; letter-spacing: 0 !important; overflow-wrap: normal !important; word-break: normal !important; white-space: normal !important } #experience.experience .experience-trust b{ display: block !important; margin: 0 0 10px !important; background: linear-gradient(90deg, #8fcaff 0%, #aee1ff 34%, #a8e57f 58%, #e9dda5 78%, #ffa86f 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; font-family: var(--font-ui, "Space Grotesk", system-ui, sans-serif) !important; font-size: clamp(14px, .88vw, 17px) !important; font-weight: 900 !important; line-height: 1.32 !important; letter-spacing: .11em !important; text-transform: uppercase !important; overflow-wrap: normal !important; word-break: normal !important; white-space: normal !important } @media (max-width:1300px) { #experience.experience .experience-trust{ width: min(500px, 100%) !important; margin-top: 28px !important } } @media (max-width:560px) { #experience.experience .experience-trust{ grid-template-columns: 48px minmax(0, 1fr) !important; gap: 14px !important; padding: 18px 16px !important } #experience.experience .experience-trust-icon{ width: 42px !important; height: 42px !important } #experience.experience .experience-trust span{ font-size: 13px !important } #experience.experience .experience-trust b{ font-size: 13px !important; letter-spacing: .07em !important } } #experience.experience .experience-jobs>.job{ --company-rgb: 112, 194, 255; --company-rgb-soft: 138, 216, 255; --company-title: #a8ddff; border-color: rgba(var(--company-rgb), .72) !important; background: linear-gradient(110deg, rgba(255, 255, 255, .085), transparent 18% 82%, rgba(255, 255, 255, .04)), radial-gradient(circle at 8% 20%, rgba(var(--company-rgb), .23), transparent 27%), radial-gradient(circle at 95% 52%, rgba(var(--company-rgb-soft), .13), transparent 34%), linear-gradient(135deg, rgba(12, 20, 38, .97), rgba(4, 9, 20, .985)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 0 34px rgba(var(--company-rgb), .075), 0 18px 38px rgba(0, 0, 0, .34), 0 0 28px rgba(var(--company-rgb), .18) !important } #experience.experience .experience-jobs>.job:nth-child(1) #experience.experience .experience-jobs>.job:nth-child(2) #experience.experience .experience-jobs>.job:nth-child(3) #experience.experience .experience-jobs>.job:nth-child(4) #experience.experience .experience-jobs>.job:nth-child(5) #experience.experience .experience-jobs>.job:nth-child(6) #experience.experience .job h3, #experience.experience .job b, #experience.experience .job.orange-border h3, #experience.experience .job.orange-border b, #experience.experience .job.purple-border h3, #experience.experience .job.purple-border b, #experience.experience .job.blue-border h3, #experience.experience .job.blue-border b{ color: var(--company-title) !important } #experience.experience .company-logo{ border-color: rgba(var(--company-rgb), .34) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, .28), 0 0 24px rgba(var(--company-rgb), .24), inset 0 0 0 1px rgba(var(--company-rgb), .08) !important } #experience.experience .logo-fallback #experience.experience .job .skills-line #experience.experience .job .job-summary #experience.experience .job .summary-link img{ box-shadow: 0 10px 22px rgba(0, 0, 0, .24), 0 0 20px rgba(var(--company-rgb), .18) !important } #experience.experience .job:hover{ box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 38px rgba(var(--company-rgb), .1), 0 22px 46px rgba(0, 0, 0, .4), 0 0 34px rgba(var(--company-rgb), .26) !important } #experience.experience .experience-jobs>.job{ border-width: 2px !important; border-color: rgba(var(--company-rgb), .82) !important; border-radius: 18px !important; background: radial-gradient(circle at 10% 50%, rgba(var(--company-rgb), .13), transparent 32%), linear-gradient(115deg, rgba(7, 16, 36, .98), rgba(6, 10, 23, .98) 54%, rgba(var(--company-rgb), .075)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(var(--company-rgb), .18), 0 16px 34px rgba(0, 0, 0, .34), 0 0 20px rgba(var(--company-rgb), .22) !important } #experience.experience .experience-jobs>.job::before, #experience.experience .experience-jobs>.job::after #experience.experience .experience-jobs>.job::before #experience.experience .experience-jobs>.job::after #experience.experience .company-logo{ border-radius: 12px !important; background: rgba(255, 255, 255, .98) !important } #experience.experience .job h3{ font-size: 18px !important; color: #f8fbff !important; } #experience.experience .job b{ color: var(--company-title) !important } #experience.experience{ position: relative !important; display: grid !important; grid-template-columns: minmax(320px, 520px) minmax(0, 1fr) !important; gap: 0 !important; align-items: stretch !important; min-height: 760px !important; padding: 0 !important; overflow: hidden !important; border: 1px solid rgba(60, 147, 255, .72) !important; border-radius: 14px !important; background: linear-gradient(rgba(51, 122, 190, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(51, 122, 190, .045) 1px, transparent 1px), radial-gradient(circle at 94% 98%, rgba(255, 168, 44, .22), transparent 22%), radial-gradient(circle at 92% 4%, rgba(0, 168, 255, .14), transparent 24%), linear-gradient(90deg, rgba(2, 14, 31, .98), rgba(1, 7, 18, .99) 48%, rgba(3, 8, 15, .98)) !important; background-size: 42px 42px, 42px 42px, auto, auto, auto !important; box-shadow: inset 0 0 68px rgba(35, 116, 255, .1), inset 0 -1px 0 rgba(255, 182, 56, .58), 0 0 28px rgba(45, 136, 255, .16) !important; clip-path: none !important } #experience.experience::before, #experience.experience::after{ content: "" !important; position: absolute !important; display: block !important; pointer-events: none !important } #experience.experience::before{ inset: 0 !important; opacity: .42 !important; background: radial-gradient(circle, rgba(0, 168, 255, .85) 0 1px, transparent 1.8px) 91% 4% / 88px 92px no-repeat, radial-gradient(circle, rgba(0, 168, 255, .65) 0 1px, transparent 1.8px) 37% 9% / 132px 120px no-repeat, radial-gradient(circle, rgba(0, 168, 255, .95) 0 1px, transparent 1.8px) 37% 91% / 120px 112px no-repeat !important } #experience.experience::after{ right: -120px !important; bottom: -148px !important; width: 420px !important; height: 420px !important; border-radius: 50% !important; border: 1px solid rgba(255, 169, 37, .24) !important; box-shadow: 0 0 0 42px rgba(255, 169, 37, .06), 0 0 0 84px rgba(255, 169, 37, .045), 0 0 0 126px rgba(255, 169, 37, .035), 0 0 46px rgba(255, 169, 37, .3) !important } #experience.experience .experience-copy{ position: relative !important; top: auto !important; z-index: 2 !important; display: flex !important; flex-direction: column !important; grid-column: 1 !important; max-width: none !important; min-height: 760px !important; margin: 0 !important; padding: 78px 58px 74px !important; border-radius: 14px 0 0 14px !important; background: radial-gradient(circle at 86% 0%, rgba(0, 135, 255, .26), transparent 24%), radial-gradient(circle at 6% 74%, rgba(255, 169, 37, .09), transparent 24%), linear-gradient(180deg, rgba(7, 21, 45, .9), rgba(2, 9, 22, .96)) !important; box-shadow: inset -1px 0 0 rgba(70, 144, 255, .8), inset 0 0 42px rgba(42, 119, 255, .12), 10px 0 36px rgba(50, 128, 255, .28) !important } #experience.experience .experience-copy::before, #experience.experience .experience-copy::after{ content: "" !important; position: absolute !important; pointer-events: none !important } #experience.experience .experience-copy::before{ right: -18px !important; top: 48% !important; width: 36px !important; height: 36px !important; border: 1px solid rgba(130, 190, 255, .9) !important; border-radius: 50% !important; background: radial-gradient(circle, #6fd7ff 0 7px, rgba(31, 92, 190, .92) 8px 12px, transparent 13px), rgba(10, 29, 61, .92) !important; box-shadow: 0 0 20px rgba(83, 162, 255, .86), 0 0 0 12px rgba(42, 116, 255, .18), 0 0 0 28px rgba(42, 116, 255, .08) !important } #experience.experience .experience-copy::after{ left: 230px !important; bottom: -96px !important; width: 300px !important; height: 300px !important; border-radius: 50% !important; border: 1px solid rgba(52, 145, 255, .14) !important; box-shadow: 0 0 0 24px rgba(52, 145, 255, .045), 0 0 0 48px rgba(52, 145, 255, .035), 0 0 0 72px rgba(52, 145, 255, .025) !important } #experience.experience .experience-copy .section-label{ margin-bottom: clamp(66px, 7vw, 94px) !important } #experience.experience .experience-copy .section-title{ margin: 0 !important } #experience.experience .experience-copy .section-title::after{ content: none !important } #experience.experience .experience-copy .section-divider{ margin: clamp(34px, 4vw, 48px) 0 clamp(32px, 4vw, 44px) !important } #experience.experience .experience-copy .section-description{ width: min(360px, 100%) !important; margin: 0 !important } #experience.experience .experience-trust{ margin-top: auto !important } #experience.experience .experience-scroll{ position: relative !important; z-index: 1 !important; grid-column: 2 !important; display: grid !important; grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) !important; gap: clamp(24px, 2.6vw, 38px) !important; align-items: start !important; min-width: 0 !important; min-height: 760px !important; margin: 0 !important; padding: clamp(58px, 5vw, 78px) clamp(30px, 4vw, 58px) !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important } #experience.experience .experience-scroll::before{ content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(90deg, rgba(37, 96, 155, .08) 1px, transparent 1px), linear-gradient(rgba(37, 96, 155, .08) 1px, transparent 1px) !important; background-size: 64px 64px !important; opacity: .52 !important; mask-image: linear-gradient(90deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, .2) 80%) !important } #experience.experience .year-track, #experience.experience .experience-jobs, #experience.experience .experience-toggle{ position: relative !important; z-index: 2 !important } #experience.experience .year-track{ top: auto !important; width: 100% !important; overflow: visible !important } #experience.experience .year-track::before{ right: 34px !important } #experience.experience .year-track span{ min-width: max-content !important; padding: 0 84px 0 0 !important; overflow: visible !important; font-size: clamp(12px, .78vw, 14px) !important; letter-spacing: .01em !important } #experience.experience .year-track span::before{ right: -92px !important; width: 126px !important } #experience.experience .year-track span::after{ right: 34px !important } #experience.experience .experience-toggle{ grid-column: 2 !important; justify-self: center !important } @media (max-width:1180px) { #experience.experience{ grid-template-columns: 1fr !important } #experience.experience .experience-copy{ min-height: 0 !important; border-radius: 14px 14px 0 0 !important; padding: 56px 34px 42px !important } #experience.experience .experience-copy::before, #experience.experience .experience-copy::after{ display: none !important } #experience.experience .experience-copy .section-label{ margin-bottom: 44px !important } #experience.experience .experience-trust{ margin-top: 36px !important } #experience.experience .experience-scroll{ grid-column: 1 !important; min-height: 0 !important; padding: 40px 34px 52px !important } } @media (max-width:760px) { #experience.experience{ border-radius: 10px !important } #experience.experience .experience-copy, #experience.experience .experience-scroll{ padding-left: 18px !important; padding-right: 18px !important } } #experience.experience .experience-scroll{ --timeline-col: 260px; --timeline-gap: 38px; --timeline-node-inset: 34px; grid-template-columns: var(--timeline-col) minmax(0, 1fr) !important; column-gap: var(--timeline-gap) !important; row-gap: 24px !important } #experience.experience .experience-scroll::after{ content: "" !important; position: absolute !important; z-index: 1 !important; top: clamp(58px, 5vw, 78px) !important; bottom: clamp(58px, 5vw, 78px) !important; left: calc(clamp(30px, 4vw, 58px)+var(--timeline-col) - var(--timeline-node-inset)) !important; width: 4px !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(83, 165, 255, .18), #68adff 10%, #68adff 90%, rgba(83, 165, 255, .16)) !important; box-shadow: 0 0 18px rgba(99, 177, 255, .8) !important } #experience.experience .year-track, #experience.experience .experience-jobs{ display: contents !important } #experience.experience .year-track::before{ content: none !important } #experience.experience .year-track span{ grid-column: 1 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; align-self: stretch !important; min-width: 0 !important; height: 100% !important; min-height: 178px !important; padding: 0 72px 0 0 !important; white-space: nowrap !important; overflow: visible !important; font-size: clamp(12px, .78vw, 14px) !important } #experience.experience .year-track span::after{ right: var(--timeline-node-inset) !important; z-index: 3 !important } #experience.experience .year-track span::before{ right: calc(-1 * var(--timeline-gap)) !important; z-index: 4 !important; width: calc(var(--timeline-gap)+var(--timeline-node-inset)+18px) !important; height: 2px !important; background: linear-gradient(90deg, rgba(117, 186, 255, .9), rgba(117, 186, 255, .62)) !important; box-shadow: 0 0 10px rgba(117, 186, 255, .6) !important } #experience.experience .experience-jobs>.job{ grid-column: 2 !important; align-self: stretch !important; z-index: 3 !important; height: auto !important; min-height: 178px !important; overflow: visible !important } #experience.experience .experience-jobs>.job::after{ content: "" !important; position: absolute !important; left: calc(-1 * (var(--timeline-gap)+var(--timeline-node-inset)+22px)) !important; right: auto !important; top: 50% !important; bottom: auto !important; z-index: 6 !important; width: calc(var(--timeline-gap)+var(--timeline-node-inset)+24px) !important; height: 2px !important; border-radius: 999px !important; transform: translateY(-50%) !important; background: linear-gradient(90deg, rgba(117, 186, 255, .24), rgba(117, 186, 255, .95), rgba(117, 186, 255, .78)) !important; box-shadow: 0 0 12px rgba(117, 186, 255, .72) !important; opacity: 1 !important } #experience.experience .year-track span:nth-child(1), #experience.experience .experience-jobs>.job:nth-child(6){ grid-row: 1 !important } #experience.experience .year-track span:nth-child(2), #experience.experience .experience-jobs>.job:nth-child(5){ grid-row: 2 !important } #experience.experience .year-track span:nth-child(3), #experience.experience .experience-jobs>.job:nth-child(4){ grid-row: 3 !important } #experience.experience .year-track span:nth-child(4), #experience.experience .experience-jobs>.job:nth-child(3){ grid-row: 4 !important } #experience.experience .year-track span:nth-child(5), #experience.experience .experience-jobs>.job:nth-child(2){ grid-row: 5 !important } #experience.experience .year-track span:nth-child(6), #experience.experience .experience-jobs>.job:nth-child(1){ grid-row: 6 !important } #experience.experience .experience-scroll{ --timeline-col: 230px; --timeline-gap: 38px; --timeline-node-inset: 28px } #experience.experience .experience-scroll::after{ display: none !important } #experience.experience .year-track span{ --timeline-accent: #69a7ff; justify-content: flex-end !important; padding: 0 76px 0 0 !important; color: var(--timeline-accent) !important; font-size: clamp(15px, 1vw, 20px) !important; font-weight: 950 !important; letter-spacing: .01em !important; } #experience.experience .year-track span:nth-child(1){ --timeline-accent: #ffd96a } #experience.experience .year-track span:nth-child(2){ --timeline-accent: #69a7ff } #experience.experience .year-track span:nth-child(3){ --timeline-accent: #c366ff } #experience.experience .year-track span:nth-child(4){ --timeline-accent: #69e6ef } #experience.experience .year-track span:nth-child(5){ --timeline-accent: #7fe57a } #experience.experience .year-track span:nth-child(6){ --timeline-accent: #86b6ff } #experience.experience .year-track span::after{ right: var(--timeline-node-inset) !important; width: 36px !important; height: 36px !important; border: 2px solid var(--timeline-accent) !important; background: radial-gradient(circle, var(--timeline-accent) 0 6px, rgba(8, 15, 32, .96) 7px 17px, transparent 18px), rgba(3, 10, 24, .96) !important; box-shadow: 0 0 18px color-mix(in srgb, var(--timeline-accent) 78%, transparent), 0 0 34px color-mix(in srgb, var(--timeline-accent) 36%, transparent), inset 0 0 12px color-mix(in srgb, var(--timeline-accent) 38%, transparent) !important; transform: translate(50%, -50%) !important } #experience.experience .year-track span::before{ right: calc(-1 * var(--timeline-gap)) !important; width: calc(var(--timeline-gap)+var(--timeline-node-inset)+26px) !important; height: 2px !important; background: linear-gradient(90deg, color-mix(in srgb, var(--timeline-accent) 95%, transparent), color-mix(in srgb, var(--timeline-accent) 50%, transparent), transparent) !important; box-shadow: 0 0 10px color-mix(in srgb, var(--timeline-accent) 56%, transparent) !important } #experience.experience .year-track span::before{ right: calc(-1 * var(--timeline-gap)) !important; z-index: 6 !important; width: calc(var(--timeline-gap)+var(--timeline-node-inset)) !important; height: 2px !important; background: linear-gradient(90deg, color-mix(in srgb, var(--timeline-accent) 96%, transparent) 0, color-mix(in srgb, var(--timeline-accent) 78%, transparent) 62%, color-mix(in srgb, var(--timeline-accent) 52%, transparent) 100%) !important; box-shadow: 0 0 12px color-mix(in srgb, var(--timeline-accent) 64%, transparent) !important } #experience.experience .year-track span:nth-child(1)::before, #experience.experience .year-track span:nth-child(3)::before{ background: linear-gradient(90deg, color-mix(in srgb, var(--timeline-accent) 95%, transparent), color-mix(in srgb, var(--timeline-accent) 56%, transparent) 58%, transparent 58% 72%, color-mix(in srgb, var(--timeline-accent) 42%, transparent) 72% 76%, transparent 76% 82%, color-mix(in srgb, var(--timeline-accent) 42%, transparent) 82% 86%, transparent 86%) !important } #experience.experience .year-track span:nth-child(1)::before, #experience.experience .year-track span:nth-child(3)::before{ background: linear-gradient(90deg, color-mix(in srgb, var(--timeline-accent) 96%, transparent) 0, color-mix(in srgb, var(--timeline-accent) 76%, transparent) 62%, color-mix(in srgb, var(--timeline-accent) 48%, transparent) 100%) !important } #experience.experience .year-track span{ align-self: stretch !important; height: 100% !important; min-height: var(--experience-card-row, 178px) !important; transform: translateY(50%) !important } #experience.experience .year-track span::before{ right: calc(-1 * (var(--timeline-gap)+132px)) !important; width: calc(var(--timeline-gap)+var(--timeline-node-inset)+176px) !important; z-index: 30 !important; height: 3px !important; background: linear-gradient(90deg, color-mix(in srgb, var(--timeline-accent) 100%, transparent) 0, color-mix(in srgb, var(--timeline-accent) 86%, transparent) 52%, color-mix(in srgb, var(--timeline-accent) 62%, transparent) 100%) !important; box-shadow: 0 0 12px color-mix(in srgb, var(--timeline-accent) 72%, transparent), 0 0 22px color-mix(in srgb, var(--timeline-accent) 28%, transparent) !important } .why-work{ padding: 64px 72px 70px !important } .why-work .section-head{ margin-bottom: 0 } .why-work{ display: grid !important; grid-template-columns: minmax(0, 70%) minmax(0, 30%) !important; grid-template-rows: auto auto 1fr !important; column-gap: clamp(32px, 5vw, 86px) !important; row-gap: 32px !important; align-items: start !important } .why-work .section-head{ grid-column: 2 !important; grid-row: 1 !important } .why-work .section-description{ max-width: 1120px } .why-work-grid{ grid-column: 1 !important; grid-row: 1 / span 3 !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 22px !important; margin-top: 0 !important } .why-work-trust{ position: relative !important; z-index: 2 !important; grid-column: 2 !important; grid-row: 2 !important; justify-self: end !important; margin: 0 0 0 !important } .why-work-card{ --why-accent: var(--card-border-accent, rgba(0, 231, 255, .78)); --why-accent-soft: var(--why-accent); --why-icon-filter: brightness(0) saturate(100%) invert(68%) sepia(83%) saturate(966%) hue-rotate(174deg) brightness(106%) contrast(104%); position: relative !important; min-height: 190px !important; padding: 30px 28px !important; border: 1px solid color-mix(in srgb, var(--why-accent) 58%, transparent) !important; border-radius: 18px !important; background: radial-gradient(circle at 13% 16%, color-mix(in srgb, var(--why-accent) 18%, transparent), transparent 34%), radial-gradient(circle at 88% 70%, color-mix(in srgb, var(--why-accent-soft) 12%, transparent), transparent 30%), linear-gradient(145deg, rgba(10, 20, 43, .95), rgba(2, 8, 20, .98)) !important; box-shadow: inset 0 0 28px color-mix(in srgb, var(--why-accent) 10%, transparent), 0 14px 30px rgba(0, 0, 0, .28), 0 0 20px color-mix(in srgb, var(--why-accent) 16%, transparent) !important; overflow: hidden !important } .why-work-card::before{ content: "" !important; position: absolute !important; top: 26px !important; right: 26px !important; width: 64px !important; height: 64px !important; background-image: radial-gradient(circle, color-mix(in srgb, var(--why-accent) 58%, transparent) 1.4px, transparent 1.8px) !important; background-size: 9px 9px !important; opacity: .38 !important } .why-work-card::after{ content: "" !important; position: absolute !important; left: 18px !important; right: 18px !important; bottom: 0 !important; height: 3px !important; border-radius: 999px 999px 0 0 !important; background: linear-gradient(90deg, transparent, var(--why-accent), var(--why-accent-soft), transparent) !important; box-shadow: 0 0 18px color-mix(in srgb, var(--why-accent) 52%, transparent) !important } .why-work-card>*{ position: relative !important; z-index: 2 !important } .why-work-card .why-card-icon{ position: relative !important; display: grid !important; place-items: center !important; width: 54px !important; height: 54px !important; margin: 0 0 24px !important; border: 1px solid color-mix(in srgb, var(--why-accent) 68%, transparent); border-radius: var(--card-radius, 16px); background: radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .42), transparent 28%), linear-gradient(135deg, color-mix(in srgb, var(--why-accent) 42%, #ffffff 10%), color-mix(in srgb, var(--why-accent) 22%, rgba(5, 18, 42, .95))); box-shadow: 0 0 24px color-mix(in srgb, var(--why-accent) 42%, transparent), 0 12px 26px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 0 18px color-mix(in srgb, var(--why-accent) 18%, transparent) } .why-work-card .why-card-icon::after{ content: "" !important; position: absolute !important; inset: -8px !important; z-index: -1 !important; border-radius: inherit !important; background: radial-gradient(circle, color-mix(in srgb, var(--why-accent) 32%, transparent), transparent 68%) !important } .why-work-card img{ display: block !important; width: 28px !important; height: 28px !important; margin: 0 !important; object-fit: contain !important; filter: brightness(0) invert(1) drop-shadow(0 0 7px color-mix(in srgb, var(--why-accent) 75%, transparent)) !important } .why-work-card b{ margin: 0; color: #f8fbff !important; font-family: var(--font-heading); font-size: clamp(17px, 1.08vw, 22px) !important; font-weight: 900 !important; line-height: 1.22 !important; letter-spacing: .02em !important; text-transform: uppercase; } .why-work-card span{ max-width: 92%; margin-top: 12px !important; color: rgba(229, 239, 252, .84) !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.5 !important } .why-work-card.blue-border{ --why-accent: #34b9ff; --why-accent-soft: #7cc8ff } .why-work-card.purple-border{ --why-accent: #b66aff; --why-accent-soft: #e179ff; --why-icon-filter: brightness(0) saturate(100%) invert(60%) sepia(83%) saturate(2535%) hue-rotate(232deg) brightness(104%) contrast(101%) } .why-work-card.orange-border{ --why-accent: #ff9d36; --why-accent-soft: #ffd06f; --why-icon-filter: brightness(0) saturate(100%) invert(70%) sepia(80%) saturate(1022%) hue-rotate(342deg) brightness(104%) contrast(101%) } .why-work-card.teal-border{ --why-accent: #4fdcff; --why-accent-soft: #84f0ff; --why-icon-filter: brightness(0) saturate(100%) invert(73%) sepia(59%) saturate(1608%) hue-rotate(154deg) brightness(105%) contrast(101%) } .why-work-card.green-border{ --why-accent: #75bd52; --why-accent-soft: #a8e57f; --why-icon-filter: brightness(0) saturate(100%) invert(73%) sepia(50%) saturate(739%) hue-rotate(49deg) brightness(97%) contrast(92%) } .why-work-card:nth-child(1){ --why-accent: #5b8cff; --why-accent-soft: #a8c4ff } .why-work-card:nth-child(2){ --why-accent: #9b5cff; --why-accent-soft: #d29bff } .why-work-card:nth-child(3){ --why-accent: #ff8b3d; --why-accent-soft: #ffc073 } .why-work-card:nth-child(4){ --why-accent: #29d3ff; --why-accent-soft: #87efff } .why-work-card:nth-child(5){ --why-accent: #ff6b9a; --why-accent-soft: #ffadc8 } .why-work-card:nth-child(6){ --why-accent: #f5c542; --why-accent-soft: #ffe58a } .why-work-card:nth-child(7){ --why-accent: #7c4dff; --why-accent-soft: #b49cff } .why-work-card:nth-child(8){ --why-accent: #00c2a8; --why-accent-soft: #6fffe9 } .why-work-card:nth-child(9){ --why-accent: #75bd52; --why-accent-soft: #b9ee88 } @media (max-width:1200px) { .why-work{ grid-template-columns: 1fr !important } .why-work .section-head, .why-work-trust, .why-work-grid{ grid-column: 1 !important; grid-row: auto !important } .why-work-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important } .why-work-trust{ justify-self: stretch !important; width: min(720px, 100%) !important } } @media (max-width:700px) { .why-work{ padding: 30px 16px !important } .why-work-grid{ grid-template-columns: 1fr !important } .why-work-trust{ grid-template-columns: 48px minmax(0, 1fr) !important; gap: 14px !important } .why-work-card{ min-height: 0 !important } } .testimonials{ position: relative !important; min-height: auto !important; padding: clamp(56px, 5vw, 86px) clamp(28px, 4vw, 68px) clamp(64px, 5vw, 92px) !important; overflow: hidden !important; background: radial-gradient(circle at 16% 12%, rgba(77, 156, 255, .2), transparent 24%), radial-gradient(circle at 86% 18%, rgba(255, 174, 68, .16), transparent 26%), linear-gradient(180deg, rgba(8, 18, 42, .96), rgba(2, 8, 20, .98)) !important } .testimonials::before{ content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; opacity: .4 !important; background: linear-gradient(rgba(124, 183, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 183, 255, .08) 1px, transparent 1px) !important; background-size: 72px 72px !important; mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent) !important } .testimonials .section-head{ position: relative !important; z-index: 2 !important; max-width: 940px !important } .testimonials .testimonial-grid{ position: relative !important; z-index: 2 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(20px, 2vw, 28px) !important; margin-top: clamp(42px, 5vw, 70px) !important; align-items: stretch !important } .testimonials .testimonial-card{ --testimonial-accent: #62d8ff; --card-border: color-mix(in srgb, var(--testimonial-accent) 42%, transparent); --card-border-accent: color-mix(in srgb, var(--testimonial-accent) 76%, white 4%); --card-glow: color-mix(in srgb, var(--testimonial-accent) 18%, transparent); min-height: 285px !important; padding: 30px 28px 26px !important; display: flex !important; flex-direction: column !important; gap: 18px !important; border-color: var(--card-border) !important; border-radius: 14px !important; background: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--testimonial-accent) 20%, transparent), transparent 36%), linear-gradient(145deg, rgba(12, 29, 62, .82), rgba(3, 9, 22, .94)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 34px color-mix(in srgb, var(--testimonial-accent) 10%, transparent), 0 22px 44px rgba(0, 0, 0, .24) !important } .testimonials .testimonial-card.orange-border{ --testimonial-accent: #ffb33e } .testimonials .testimonial-card.purple-border{ --testimonial-accent: #a977ff } .testimonials .testimonial-rail{ position: absolute !important; left: 26px !important; right: 26px !important; top: 0 !important; height: 3px !important; background: linear-gradient(90deg, transparent, var(--testimonial-accent), transparent) !important; box-shadow: 0 0 18px color-mix(in srgb, var(--testimonial-accent) 68%, transparent) !important } .testimonials .testimonial-mark{ right: 26px !important; top: 20px !important; color: color-mix(in srgb, var(--testimonial-accent) 35%, transparent) !important; font-size: 68px !important; opacity: .8 !important } .testimonials .testimonial-top{ display: grid !important; grid-template-columns: 58px minmax(0, 1fr) !important; gap: 16px !important; align-items: center !important } .testimonials .testimonial-icon{ position: relative !important; display: grid !important; width: 52px !important; height: 52px !important; place-items: center !important; border: 1px solid color-mix(in srgb, var(--testimonial-accent) 52%, transparent) !important; border-radius: 6px !important; background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .22), transparent 32%), linear-gradient(145deg, color-mix(in srgb, var(--testimonial-accent) 70%, #183054), rgba(11, 26, 55, .88)) !important; box-shadow: 0 0 24px color-mix(in srgb, var(--testimonial-accent) 28%, transparent), inset 0 0 18px rgba(255, 255, 255, .08) !important } .testimonials .testimonial-top img{ width: 25px !important; height: 25px !important; padding: 0 !important; border: 0 !important; background: transparent !important; filter: brightness(0) invert(1) drop-shadow(0 0 8px color-mix(in srgb, var(--testimonial-accent) 80%, transparent)) !important } .testimonials .testimonial-top b{ font-size: clamp(19px, 1.3vw, 24px) !important; line-height: 1.08 !important } .testimonials .testimonial-top small{ margin-top: 6px !important; color: color-mix(in srgb, var(--testimonial-accent) 80%, #dbeafe) !important; font-size: 12px !important; letter-spacing: .1em !important } .testimonials .testimonial-card p{ max-width: 94% !important; color: rgba(226, 236, 250, .86) !important; font-size: clamp(16px, 1vw, 18px) !important; line-height: 1.58 !important; font-weight: 700 !important } .testimonials .testimonial-proof{ position: relative !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; margin-top: auto !important; padding: 12px 14px !important; border: 1px solid color-mix(in srgb, var(--testimonial-accent) 22%, transparent) !important; border-radius: 8px !important; background: rgba(2, 10, 25, .46) !important } .testimonials .testimonial-proof span, .testimonials .testimonial-proof strong{ color: rgba(220, 233, 249, .82) !important; font-family: var(--font-body) !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .05em !important; text-transform: uppercase !important } .testimonials .testimonial-proof strong{ color: color-mix(in srgb, var(--testimonial-accent) 82%, #ffffff) !important } .testimonials .testimonial-meta{ margin-top: 0 !important; gap: 9px !important } .testimonials .testimonial-meta span{ padding: 8px 11px !important; border-radius: 0 !important; background: color-mix(in srgb, var(--testimonial-accent) 10%, rgba(5, 15, 35, .86)) !important } @media (max-width:1180px) { .testimonials .testimonial-grid{ grid-template-columns: 1fr !important } .testimonials .testimonial-card{ min-height: 0 !important } } @media (max-width:640px) { .testimonials{ padding: 34px 16px 44px !important } .testimonials .testimonial-card{ padding: 24px 18px 20px !important } .testimonials .testimonial-top{ grid-template-columns: 48px minmax(0, 1fr) !important } .testimonials .testimonial-icon{ width: 44px !important; height: 44px !important } .testimonials .testimonial-proof{ align-items: flex-start !important; flex-direction: column !important; gap: 4px !important } } #why-work-with-me.why-work{ position: relative !important; display: grid !important; grid-template-columns: minmax(320px, 520px) minmax(0, 1fr) !important; grid-template-rows: 1fr !important; gap: 0 !important; align-items: stretch !important; min-height: 760px !important; padding: 0 !important; overflow: hidden !important; border: 1px solid rgba(60, 147, 255, .72) !important; border-radius: 14px !important; background: linear-gradient(rgba(51, 122, 190, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(51, 122, 190, .045) 1px, transparent 1px), radial-gradient(circle at 94% 98%, rgba(255, 168, 44, .22), transparent 22%), radial-gradient(circle at 92% 4%, rgba(0, 168, 255, .14), transparent 24%), linear-gradient(90deg, rgba(2, 14, 31, .98), rgba(1, 7, 18, .99) 48%, rgba(3, 8, 15, .98)) !important; background-size: 42px 42px, 42px 42px, auto, auto, auto !important; box-shadow: inset 0 0 68px rgba(35, 116, 255, .1), inset 0 -1px 0 rgba(255, 182, 56, .58), 0 0 28px rgba(45, 136, 255, .16) !important } #why-work-with-me.why-work::before, #why-work-with-me.why-work::after{ content: "" !important; position: absolute !important; pointer-events: none !important } #why-work-with-me.why-work::before{ inset: 0 !important; opacity: .42 !important; background: radial-gradient(circle, rgba(0, 168, 255, .85) 0 1px, transparent 1.8px) 91% 4% / 88px 92px no-repeat, radial-gradient(circle, rgba(0, 168, 255, .65) 0 1px, transparent 1.8px) 37% 9% / 132px 120px no-repeat, radial-gradient(circle, rgba(0, 168, 255, .95) 0 1px, transparent 1.8px) 37% 91% / 120px 112px no-repeat !important } #why-work-with-me.why-work::after{ right: -120px !important; bottom: -148px !important; width: 420px !important; height: 420px !important; border-radius: 50% !important; border: 1px solid rgba(255, 169, 37, .24) !important; box-shadow: 0 0 0 42px rgba(255, 169, 37, .06), 0 0 0 84px rgba(255, 169, 37, .045), 0 0 0 126px rgba(255, 169, 37, .035), 0 0 46px rgba(255, 169, 37, .3) !important } #why-work-with-me .why-work-copy{ position: relative !important; z-index: 2 !important; display: flex !important; flex-direction: column !important; gap: 28px !important; min-height: 760px !important; padding: 56px 50px 40px !important; border-radius: 14px 0 0 14px !important; background: radial-gradient(circle at 86% 0%, rgba(0, 135, 255, .26), transparent 24%), radial-gradient(circle at 6% 74%, rgba(255, 169, 37, .09), transparent 24%), linear-gradient(180deg, rgba(7, 21, 45, .9), rgba(2, 9, 22, .96)) !important; box-shadow: inset -1px 0 0 rgba(70, 144, 255, .8), inset 0 0 42px rgba(42, 119, 255, .12), 10px 0 36px rgba(50, 128, 255, .28) !important } #why-work-with-me .why-work-copy::before, #why-work-with-me .why-work-copy::after{ content: "" !important; position: absolute !important; pointer-events: none !important } #why-work-with-me .why-work-copy::before{ right: -18px !important; top: 48% !important; width: 36px !important; height: 36px !important; border: 1px solid rgba(130, 190, 255, .9) !important; border-radius: 50% !important; background: radial-gradient(circle, #6fd7ff 0 7px, rgba(31, 92, 190, .92) 8px 12px, transparent 13px), rgba(10, 29, 61, .92) !important; box-shadow: 0 0 20px rgba(83, 162, 255, .86), 0 0 0 12px rgba(42, 116, 255, .18), 0 0 0 28px rgba(42, 116, 255, .08) !important } #why-work-with-me .why-work-copy::after{ left: 230px !important; bottom: -96px !important; width: 300px !important; height: 300px !important; border-radius: 50% !important; border: 1px solid rgba(52, 145, 255, .14) !important; box-shadow: 0 0 0 24px rgba(52, 145, 255, .045), 0 0 0 48px rgba(52, 145, 255, .035), 0 0 0 72px rgba(52, 145, 255, .025) !important } #why-work-with-me .section-head{ position: relative !important; z-index: 2 !important; grid-column: auto !important; grid-row: auto !important; margin: 0 !important } #why-work-with-me .section-label{ margin-bottom: 44px !important } #why-work-with-me .section-description{ max-width: 420px !important } #why-work-with-me .why-work-trust{ position: relative !important; z-index: 2 !important; grid-column: auto !important; grid-row: auto !important; justify-self: stretch !important; margin-top: auto !important } #why-work-with-me .why-work-stage{ position: relative !important; z-index: 1 !important; min-width: 0 !important; min-height: 760px !important; padding: clamp(58px, 5vw, 78px) clamp(30px, 4vw, 58px) !important } #why-work-with-me .why-work-stage::before{ content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(90deg, rgba(37, 96, 155, .08) 1px, transparent 1px), linear-gradient(rgba(37, 96, 155, .08) 1px, transparent 1px) !important; background-size: 64px 64px !important; opacity: .52 !important; mask-image: linear-gradient(90deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, .2) 80%) !important } #why-work-with-me .why-work-grid{ position: relative !important; z-index: 2 !important; grid-column: auto !important; grid-row: auto !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 22px !important; margin: 0 !important } @media (max-width:1320px) { #why-work-with-me .why-work-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important } } @media (max-width:1180px) { #why-work-with-me.why-work{ grid-template-columns: 1fr !important } #why-work-with-me .why-work-copy{ min-height: 0 !important; border-radius: 14px 14px 0 0 !important; padding: 54px 34px 42px !important } #why-work-with-me .why-work-copy::before, #why-work-with-me .why-work-copy::after{ display: none !important } #why-work-with-me .section-label{ margin-bottom: 38px !important } #why-work-with-me .why-work-stage{ min-height: 0 !important; padding: 40px 34px 52px !important } #why-work-with-me .why-work-trust{ margin-top: 10px !important } } @media (max-width:760px) { #why-work-with-me.why-work{ border-radius: 10px !important } #why-work-with-me .why-work-copy, #why-work-with-me .why-work-stage{ padding-left: 18px !important; padding-right: 18px !important } #why-work-with-me .why-work-grid{ grid-template-columns: 1fr !important } } #skills.tech-stack-showcase{ position: relative !important; display: grid !important; grid-template-columns: minmax(320px, 520px) minmax(0, 1fr) !important; gap: 0 !important; align-items: stretch !important; min-height: 760px !important; padding: 0 !important; overflow: hidden !important; border: 1px solid rgba(60, 147, 255, .72) !important; border-radius: 14px !important; background: linear-gradient(rgba(51, 122, 190, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(51, 122, 190, .045) 1px, transparent 1px), radial-gradient(circle at 94% 98%, rgba(255, 168, 44, .2), transparent 22%), radial-gradient(circle at 92% 4%, rgba(0, 168, 255, .14), transparent 24%), linear-gradient(90deg, rgba(2, 14, 31, .98), rgba(1, 7, 18, .99) 48%, rgba(3, 8, 15, .98)) !important; background-size: 42px 42px, 42px 42px, auto, auto, auto !important; box-shadow: inset 0 0 68px rgba(35, 116, 255, .1), inset 0 -1px 0 rgba(255, 182, 56, .58), 0 0 28px rgba(45, 136, 255, .16) !important } #skills.tech-stack-showcase::before, #skills.tech-stack-showcase::after{ content: "" !important; position: absolute !important; pointer-events: none !important } #skills.tech-stack-showcase::before{ inset: 0 !important; opacity: .42 !important; background: radial-gradient(circle, rgba(0, 168, 255, .85) 0 1px, transparent 1.8px) 91% 4% / 88px 92px no-repeat, radial-gradient(circle, rgba(0, 168, 255, .65) 0 1px, transparent 1.8px) 37% 9% / 132px 120px no-repeat, radial-gradient(circle, rgba(0, 168, 255, .95) 0 1px, transparent 1.8px) 37% 91% / 120px 112px no-repeat !important } #skills.tech-stack-showcase::after{ right: -120px !important; bottom: -148px !important; width: 420px !important; height: 420px !important; border-radius: 50% !important; border: 1px solid rgba(255, 169, 37, .24) !important; box-shadow: 0 0 0 42px rgba(255, 169, 37, .06), 0 0 0 84px rgba(255, 169, 37, .045), 0 0 0 126px rgba(255, 169, 37, .035), 0 0 46px rgba(255, 169, 37, .3) !important } #skills .skills-copy{ position: relative !important; z-index: 2 !important; display: flex !important; flex-direction: column !important; min-height: 760px !important; padding: 78px 58px 74px !important; border-radius: 14px 0 0 14px !important; background: radial-gradient(circle at 24% 10%, rgba(80, 150, 255, .18), transparent 32%), linear-gradient(180deg, rgba(7, 21, 45, .9), rgba(2, 9, 22, .96)) !important; box-shadow: inset -1px 0 0 rgba(70, 144, 255, .8), inset 0 0 42px rgba(42, 119, 255, .12), 10px 0 36px rgba(50, 128, 255, .28) !important } #skills .skills-copy::before, #skills .skills-copy::after{ content: "" !important; position: absolute !important; pointer-events: none !important } #skills .skills-copy::before{ right: -16px !important; top: 48% !important; width: 32px !important; height: 32px !important; border: 1px solid rgba(130, 190, 255, .86) !important; border-radius: 50% !important; background: radial-gradient(circle, #66c8ff 0 6px, rgba(35, 89, 180, .9) 7px 10px, transparent 11px), rgba(10, 29, 61, .92) !important; box-shadow: 0 0 18px rgba(83, 162, 255, .82), 0 0 0 9px rgba(42, 116, 255, .18) !important } #skills .skills-copy::after{ left: 230px !important; bottom: -90px !important; width: 280px !important; height: 280px !important; border-radius: 50% !important; border: 1px solid rgba(52, 145, 255, .14) !important; box-shadow: 0 0 0 24px rgba(52, 145, 255, .045), 0 0 0 48px rgba(52, 145, 255, .035), 0 0 0 72px rgba(52, 145, 255, .025) !important } #skills .tech-hero-copy{ position: relative !important; z-index: 2 !important; display: flex !important; flex-direction: column !important; min-height: 100% !important } #skills .section-label{ margin-bottom: clamp(66px, 7vw, 94px) !important } #skills .tech-trust{ margin-top: auto !important } #skills .skills-stage{ position: relative !important; z-index: 1 !important; min-width: 0 !important; min-height: 760px !important; padding: clamp(64px, 6vw, 92px) clamp(30px, 4vw, 62px) !important } #skills .skills-stage::before{ content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(90deg, rgba(37, 96, 155, .08) 1px, transparent 1px), linear-gradient(rgba(37, 96, 155, .08) 1px, transparent 1px) !important; background-size: 64px 64px !important; opacity: .52 !important; mask-image: linear-gradient(90deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, .2) 80%) !important } #skills .tech-content{ position: relative !important; z-index: 2 !important; width: 100% !important; margin: 0 !important; padding: 0 !important } #skills .tech-category-grid{ margin: 0 !important } @media (max-width:1180px) { #skills.tech-stack-showcase{ grid-template-columns: 1fr !important } #skills .skills-copy{ min-height: 0 !important; border-radius: 14px 14px 0 0 !important; padding: 56px 34px 42px !important } #skills .skills-copy::before, #skills .skills-copy::after{ display: none !important } #skills .section-label{ margin-bottom: 44px !important } #skills .tech-trust{ margin-top: 36px !important } #skills .skills-stage{ min-height: 0 !important; padding: 40px 34px 52px !important } } @media (max-width:760px) { #skills.tech-stack-showcase{ border-radius: 10px !important } #skills .skills-copy, #skills .skills-stage{ padding-left: 18px !important; padding-right: 18px !important } } .services.services-hud{ position: relative !important; display: grid !important; grid-template-columns: minmax(420px, 520px) minmax(0, 1fr) !important; gap: 0 !important; align-items: stretch !important; min-height: 760px !important; padding: 0 !important; overflow: hidden !important; border: 1px solid rgba(60, 147, 255, .72) !important; border-radius: 14px !important; background: linear-gradient(rgba(51, 122, 190, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(51, 122, 190, .045) 1px, transparent 1px), radial-gradient(circle at 94% 98%, rgba(255, 168, 44, .2), transparent 22%), radial-gradient(circle at 92% 4%, rgba(0, 168, 255, .14), transparent 24%), linear-gradient(90deg, rgba(2, 14, 31, .98), rgba(1, 7, 18, .99) 48%, rgba(3, 8, 15, .98)) !important; background-size: 42px 42px, 42px 42px, auto, auto, auto !important; box-shadow: inset 0 0 68px rgba(35, 116, 255, .1), inset 0 -1px 0 rgba(255, 182, 56, .58), 0 0 28px rgba(45, 136, 255, .16) !important } .services.services-hud::before, .services.services-hud::after{ content: "" !important; position: absolute !important; pointer-events: none !important } .services.services-hud::before{ inset: 0 !important; opacity: .42 !important; background: radial-gradient(circle, rgba(0, 168, 255, .85) 0 1px, transparent 1.8px) 91% 4% / 88px 92px no-repeat, radial-gradient(circle, rgba(0, 168, 255, .65) 0 1px, transparent 1.8px) 37% 9% / 132px 120px no-repeat, radial-gradient(circle, rgba(0, 168, 255, .95) 0 1px, transparent 1.8px) 37% 91% / 120px 112px no-repeat !important } .services.services-hud::after{ right: -120px !important; bottom: -148px !important; width: 420px !important; height: 420px !important; border-radius: 50% !important; border: 1px solid rgba(255, 169, 37, .24) !important; box-shadow: 0 0 0 42px rgba(255, 169, 37, .06), 0 0 0 84px rgba(255, 169, 37, .045), 0 0 0 126px rgba(255, 169, 37, .035), 0 0 46px rgba(255, 169, 37, .3) !important } .services.services-hud .services-copy{ position: relative !important; z-index: 2 !important; display: flex !important; flex-direction: column !important; max-width: 520px !important; min-height: 760px !important; padding: 78px 58px 74px !important; border-radius: 14px 0 0 14px !important; background: radial-gradient(circle at 24% 10%, rgba(80, 150, 255, .18), transparent 32%), linear-gradient(180deg, rgba(7, 21, 45, .9), rgba(2, 9, 22, .96)) !important; box-shadow: inset -1px 0 0 rgba(70, 144, 255, .8), inset 0 0 42px rgba(42, 119, 255, .12), 10px 0 36px rgba(50, 128, 255, .28) !important } .services.services-hud .services-copy::before, .services.services-hud .services-copy::after{ content: "" !important; position: absolute !important; pointer-events: none !important } .services.services-hud .services-copy::before{ right: -16px !important; top: 48% !important; width: 32px !important; height: 32px !important; border: 1px solid rgba(130, 190, 255, .86) !important; border-radius: 50% !important; background: radial-gradient(circle, #66c8ff 0 6px, rgba(35, 89, 180, .9) 7px 10px, transparent 11px), rgba(10, 29, 61, .92) !important; box-shadow: 0 0 18px rgba(83, 162, 255, .82), 0 0 0 9px rgba(42, 116, 255, .18) !important } .services.services-hud .services-copy::after{ left: 230px !important; bottom: -90px !important; width: 280px !important; height: 280px !important; border-radius: 50% !important; border: 1px solid rgba(52, 145, 255, .14) !important; box-shadow: 0 0 0 24px rgba(52, 145, 255, .045), 0 0 0 48px rgba(52, 145, 255, .035), 0 0 0 72px rgba(52, 145, 255, .025) !important } .services.services-hud .section-label{ margin-bottom: clamp(66px, 7vw, 94px) !important } .services.services-hud .service-trust{ margin-top: auto !important } .services.services-hud .services-stage{ position: relative !important; z-index: 1 !important; min-width: 0 !important; min-height: 760px !important; padding: clamp(64px, 6vw, 92px) clamp(30px, 4vw, 62px) !important } .services.services-hud .services-stage::before{ content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(90deg, rgba(37, 96, 155, .08) 1px, transparent 1px), linear-gradient(rgba(37, 96, 155, .08) 1px, transparent 1px) !important; background-size: 64px 64px !important; opacity: .52 !important; mask-image: linear-gradient(90deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, .2) 80%) !important } .services.services-hud .service-grid{ position: relative !important; z-index: 2 !important; margin: 0 !important } @media (max-width:1180px) { .services.services-hud{ grid-template-columns: 1fr !important } .services.services-hud .services-copy{ max-width: 520px !important; min-height: 0 !important; border-radius: 14px 14px 0 0 !important; padding: 56px 34px 42px !important } .services.services-hud .services-copy::before, .services.services-hud .services-copy::after{ display: none !important } .services.services-hud .section-label{ margin-bottom: 44px !important } .services.services-hud .service-trust{ margin-top: 36px !important } .services.services-hud .services-stage{ min-height: 0 !important; padding: 40px 34px 52px !important } } @media (max-width:760px) { .services.services-hud{ border-radius: 10px !important } .services.services-hud .services-copy, .services.services-hud .services-stage{ padding-left: 18px !important; padding-right: 18px !important } } #projects.projects{ position: relative !important; display: grid !important; grid-template-columns: minmax(320px, 520px) minmax(0, 1fr) !important; gap: 0 !important; align-items: stretch !important; min-height: 760px !important; padding: 0 !important; overflow: hidden !important; border: 1px solid rgba(60, 147, 255, .72) !important; border-radius: 14px !important; background: linear-gradient(rgba(51, 122, 190, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(51, 122, 190, .045) 1px, transparent 1px), radial-gradient(circle at 94% 98%, rgba(255, 168, 44, .2), transparent 22%), radial-gradient(circle at 92% 4%, rgba(0, 168, 255, .14), transparent 24%), linear-gradient(90deg, rgba(2, 14, 31, .98), rgba(1, 7, 18, .99) 48%, rgba(3, 8, 15, .98)) !important; background-size: 42px 42px, 42px 42px, auto, auto, auto !important; box-shadow: inset 0 0 68px rgba(35, 116, 255, .1), inset 0 -1px 0 rgba(255, 182, 56, .58), 0 0 28px rgba(45, 136, 255, .16) !important } #projects.projects::before, #projects.projects::after{ content: "" !important; position: absolute !important; pointer-events: none !important } #projects.projects::before{ inset: 0 !important; opacity: .42 !important; background: radial-gradient(circle, rgba(0, 168, 255, .85) 0 1px, transparent 1.8px) 91% 4% / 88px 92px no-repeat, radial-gradient(circle, rgba(0, 168, 255, .65) 0 1px, transparent 1.8px) 37% 9% / 132px 120px no-repeat, radial-gradient(circle, rgba(0, 168, 255, .95) 0 1px, transparent 1.8px) 37% 91% / 120px 112px no-repeat !important } #projects.projects::after{ right: -120px !important; bottom: -148px !important; width: 420px !important; height: 420px !important; border-radius: 50% !important; border: 1px solid rgba(255, 169, 37, .24) !important; box-shadow: 0 0 0 42px rgba(255, 169, 37, .06), 0 0 0 84px rgba(255, 169, 37, .045), 0 0 0 126px rgba(255, 169, 37, .035), 0 0 46px rgba(255, 169, 37, .3) !important } #projects .projects-copy{ position: relative !important; z-index: 2 !important; display: flex !important; flex-direction: column !important; min-height: 760px !important; padding: 78px 58px 74px !important; border-radius: 14px 0 0 14px !important; background: radial-gradient(circle at 24% 10%, rgba(80, 150, 255, .18), transparent 32%), linear-gradient(180deg, rgba(7, 21, 45, .9), rgba(2, 9, 22, .96)) !important; box-shadow: inset -1px 0 0 rgba(70, 144, 255, .8), inset 0 0 42px rgba(42, 119, 255, .12), 10px 0 36px rgba(50, 128, 255, .28) !important } #projects .projects-copy::before, #projects .projects-copy::after{ content: "" !important; position: absolute !important; pointer-events: none !important } #projects .projects-copy::before{ right: -10px !important; top: 48% !important; width: 20px !important; height: 20px !important; background: #58a9ff !important; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) !important; box-shadow: 0 0 18px rgba(83, 162, 255, .86), 0 0 0 10px rgba(42, 116, 255, .16) !important } #projects .projects-copy::after{ left: 230px !important; bottom: -90px !important; width: 280px !important; height: 280px !important; border-radius: 50% !important; border: 1px solid rgba(52, 145, 255, .14) !important; box-shadow: 0 0 0 24px rgba(52, 145, 255, .045), 0 0 0 48px rgba(52, 145, 255, .035), 0 0 0 72px rgba(52, 145, 255, .025) !important } #projects .section-label{ margin-bottom: clamp(66px, 7vw, 94px) !important } #projects .projects-trust{ margin-top: auto !important } #projects .projects-stage{ position: relative !important; z-index: 1 !important; min-width: 0 !important; min-height: 760px !important; padding: clamp(64px, 6vw, 92px) clamp(30px, 4vw, 62px) clamp(108px, 8vw, 132px) !important } #projects .projects-stage::before{ content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(90deg, rgba(37, 96, 155, .08) 1px, transparent 1px), linear-gradient(rgba(37, 96, 155, .08) 1px, transparent 1px) !important; background-size: 64px 64px !important; opacity: .52 !important; mask-image: linear-gradient(90deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, .2) 80%) !important } #projects .project-view-all{ position: absolute !important; right: clamp(30px, 4vw, 62px) !important; bottom: clamp(34px, 4vw, 52px) !important; z-index: 5 !important } #projects .project-grid{ position: relative !important; z-index: 2 !important; display: grid !important; grid-template-columns: repeat(3, minmax(220px, 1fr)) !important; gap: clamp(18px, 1.6vw, 24px) !important; margin: 0 !important; align-items: stretch !important } #projects .project-card{ --project-accent: #5aa8ff; grid-column: auto !important; min-height: 580px !important; padding: 0 0 22px !important; overflow: hidden !important; border: 1px solid color-mix(in srgb, var(--project-accent) 58%, transparent) !important; border-radius: var(--card-radius, 16px) !important; background: radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--project-accent) 18%, transparent), transparent 34%), linear-gradient(145deg, rgba(7, 18, 40, .97), rgba(2, 8, 21, .99)) !important; clip-path: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 38px color-mix(in srgb, var(--project-accent) 8%, transparent), 0 18px 38px rgba(0, 0, 0, .34), 0 0 24px color-mix(in srgb, var(--project-accent) 13%, transparent) !important; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important } #projects .project-card.purple-border{ --project-accent: #a76dff } #projects .project-card.orange-border{ --project-accent: #ffad45 } #projects .project-card.teal-border{ --project-accent: #41e8d6 } #projects .project-card:hover{ transform: translateY(-5px) !important; border-color: color-mix(in srgb, var(--project-accent) 82%, transparent) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 24px 48px rgba(0, 0, 0, .42), 0 0 34px color-mix(in srgb, var(--project-accent) 24%, transparent) !important } #projects .project-card::before, #projects .project-card::after{ clip-path: none !important } #projects .project-card::before{ inset: 0 !important; z-index: 1 !important; opacity: .55 !important; background: linear-gradient(110deg, rgba(255, 255, 255, .09), transparent 18% 82%, rgba(255, 255, 255, .04)), radial-gradient(circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--project-accent) 18%, transparent), transparent 32%) !important; filter: none !important } #projects .project-card::after{ display: none !important } #projects .project-image{ height: 210px !important; min-height: 210px !important; margin: 22px 22px 0 !important; overflow: hidden !important; border-radius: 12px !important; border: 1px solid color-mix(in srgb, var(--project-accent) 32%, transparent) !important; background-color: rgba(4, 12, 28, .82) !important; box-shadow: inset 0 0 32px rgba(255, 255, 255, .035), 0 14px 26px rgba(0, 0, 0, .28) !important } #projects .project-image span{ left: 50% !important; top: 24px !important; transform: translateX(-50%) !important; white-space: nowrap !important; border-color: color-mix(in srgb, var(--project-accent) 46%, transparent) !important; background: rgba(7, 18, 39, .78) !important; color: #dff3ff !important } #projects .design-system-project{ background: radial-gradient(circle at 18% 28%, rgba(65, 232, 214, .34), transparent 20%), radial-gradient(circle at 76% 42%, rgba(94, 168, 255, .26), transparent 22%), linear-gradient(90deg, rgba(65, 232, 214, .28) 1px, transparent 1px), linear-gradient(rgba(65, 232, 214, .18) 1px, transparent 1px), linear-gradient(145deg, rgba(5, 30, 43, .92), rgba(4, 9, 24, .96)) !important; background-size: auto, auto, 46px 46px, 46px 46px, auto !important } #projects .analytics-project{ background: linear-gradient(135deg, rgba(167, 109, 255, .42) 0 2px, transparent 2px 34px), radial-gradient(circle at 74% 34%, rgba(167, 109, 255, .36), transparent 22%), radial-gradient(circle at 24% 72%, rgba(65, 216, 255, .22), transparent 22%), linear-gradient(145deg, rgba(18, 14, 52, .92), rgba(4, 8, 21, .96)) !important } #projects .project-card h3, #projects .project-card p, #projects .tags, #projects .project-proof, #projects .project-actions{ position: relative !important; z-index: 3 !important; padding-inline: 22px !important } #projects .project-card h3{ min-height: 76px !important; margin: 20px 0 8px !important; display: flex !important; align-items: flex-end !important; font-size: clamp(22px, 1.42vw, 28px) !important; line-height: 1.06 !important; letter-spacing: .01em !important } #projects .project-card p{ margin: 0 !important; color: rgba(225, 235, 249, .84) !important; min-height: 70px !important; font-size: 14px !important; line-height: 1.34 !important } #projects .tags{ display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 14px !important } #projects .tags span{ padding: 6px 10px !important; border-color: color-mix(in srgb, var(--project-accent) 34%, transparent) !important; background: color-mix(in srgb, var(--project-accent) 10%, rgba(255, 255, 255, .035)) !important; font-size: 11px !important; line-height: 1 !important } #projects .project-proof{ display: grid !important; grid-template-columns: 76px minmax(0, 1fr) !important; gap: 9px 12px !important; min-height: 112px !important; margin-top: 18px !important; color: rgba(231, 238, 250, .82) !important; font-size: 12px !important; line-height: 1.36 !important } #projects .project-proof b{ color: color-mix(in srgb, var(--project-accent) 76%, #ffffff) !important } #projects .project-actions{ display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 18px !important; padding-right: 88px !important } #projects .project-actions a{ min-height: 34px !important; padding: 9px 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 11px !important; line-height: 1 !important } #projects .project-arrow{ right: 22px !important; bottom: 22px !important; width: 54px !important; height: 54px !important; border-radius: 12px !important; border-color: color-mix(in srgb, var(--project-accent) 48%, transparent) !important; background: rgba(3, 10, 24, .78) !important; color: color-mix(in srgb, var(--project-accent) 74%, #ffffff) !important } @media (max-width:1200px) { #projects.projects{ grid-template-columns: 1fr !important } #projects .projects-copy{ min-height: 0 !important; border-radius: 14px 14px 0 0 !important; padding: 56px 34px 42px !important } #projects .projects-copy::before, #projects .projects-copy::after{ display: none !important } #projects .section-label{ margin-bottom: 44px !important } #projects .projects-trust{ margin-top: 36px !important } #projects .projects-stage{ min-height: 0 !important; padding: 40px 34px 112px !important } #projects .project-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important } #projects .project-card{ grid-column: auto !important } } @media (max-width:760px) { #projects.projects{ border-radius: 10px !important } #projects .projects-copy, #projects .projects-stage{ padding-left: 18px !important; padding-right: 18px !important } #projects .project-grid{ grid-template-columns: 1fr !important } #projects .project-card{ min-height: 0 !important } #projects .project-proof{ grid-template-columns: 1fr !important } } #testimonials.testimonials{ position: relative !important; display: grid !important; grid-template-columns: minmax(320px, 520px) minmax(0, 1fr) !important; gap: 0 !important; align-items: stretch !important; min-height: 760px !important; padding: 0 !important; overflow: hidden !important; border: 1px solid rgba(60, 147, 255, .72) !important; border-radius: 14px !important; background: linear-gradient(rgba(51, 122, 190, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(51, 122, 190, .045) 1px, transparent 1px), radial-gradient(circle at 94% 98%, rgba(255, 168, 44, .2), transparent 22%), radial-gradient(circle at 92% 4%, rgba(0, 168, 255, .14), transparent 24%), linear-gradient(90deg, rgba(2, 14, 31, .98), rgba(1, 7, 18, .99) 48%, rgba(3, 8, 15, .98)) !important; background-size: 42px 42px, 42px 42px, auto, auto, auto !important; box-shadow: inset 0 0 68px rgba(35, 116, 255, .1), inset 0 -1px 0 rgba(255, 182, 56, .58), 0 0 28px rgba(45, 136, 255, .16) !important } #testimonials.testimonials::before, #testimonials.testimonials::after{ content: "" !important; position: absolute !important; pointer-events: none !important } #testimonials.testimonials::before{ inset: 0 !important; opacity: .42 !important; background: radial-gradient(circle, rgba(0, 168, 255, .85) 0 1px, transparent 1.8px) 91% 4% / 88px 92px no-repeat, radial-gradient(circle, rgba(0, 168, 255, .65) 0 1px, transparent 1.8px) 37% 9% / 132px 120px no-repeat, radial-gradient(circle, rgba(0, 168, 255, .95) 0 1px, transparent 1.8px) 37% 91% / 120px 112px no-repeat !important } #testimonials.testimonials::after{ right: -120px !important; bottom: -148px !important; width: 420px !important; height: 420px !important; border-radius: 50% !important; border: 1px solid rgba(255, 169, 37, .24) !important; box-shadow: 0 0 0 42px rgba(255, 169, 37, .06), 0 0 0 84px rgba(255, 169, 37, .045), 0 0 0 126px rgba(255, 169, 37, .035), 0 0 46px rgba(255, 169, 37, .3) !important } #testimonials .testimonial-copy{ position: relative !important; z-index: 2 !important; display: flex !important; flex-direction: column !important; min-height: 760px !important; padding: 78px 58px 74px !important; border-radius: 14px 0 0 14px !important; background: radial-gradient(circle at 24% 10%, rgba(80, 150, 255, .18), transparent 32%), linear-gradient(180deg, rgba(7, 21, 45, .9), rgba(2, 9, 22, .96)) !important; box-shadow: inset -1px 0 0 rgba(70, 144, 255, .8), inset 0 0 42px rgba(42, 119, 255, .12), 10px 0 36px rgba(50, 128, 255, .28) !important } #testimonials .testimonial-copy::before, #testimonials .testimonial-copy::after{ content: "" !important; position: absolute !important; pointer-events: none !important } #testimonials .testimonial-copy::before{ right: -16px !important; top: 48% !important; width: 32px !important; height: 32px !important; border: 1px solid rgba(130, 190, 255, .86) !important; border-radius: 50% !important; background: radial-gradient(circle, #66c8ff 0 6px, rgba(35, 89, 180, .9) 7px 10px, transparent 11px), rgba(10, 29, 61, .92) !important; box-shadow: 0 0 18px rgba(83, 162, 255, .82), 0 0 0 9px rgba(42, 116, 255, .18) !important } #testimonials .testimonial-copy::after{ left: 230px !important; bottom: -90px !important; width: 280px !important; height: 280px !important; border-radius: 50% !important; border: 1px solid rgba(52, 145, 255, .14) !important; box-shadow: 0 0 0 24px rgba(52, 145, 255, .045), 0 0 0 48px rgba(52, 145, 255, .035), 0 0 0 72px rgba(52, 145, 255, .025) !important } #testimonials .section-label{ display: flex !important; align-items: center !important; gap: 14px !important; margin: 0 0 clamp(66px, 7vw, 94px) !important; color: #7fc5ff !important; font: 900 15px/1 var(--font-ui, "Space Grotesk", system-ui, sans-serif) !important; letter-spacing: .28em !important; text-transform: uppercase !important } #testimonials .section-label-icon{ width: 24px !important; height: 24px !important; filter: brightness(0) saturate(100%) invert(61%) sepia(98%) saturate(2319%) hue-rotate(171deg) brightness(107%) contrast(104%) drop-shadow(0 0 12px rgba(0, 174, 255, .82)) !important } #testimonials .testimonial-trust{ margin-top: auto !important } #testimonials .testimonial-stage{ position: relative !important; z-index: 1 !important; min-width: 0 !important; min-height: 760px !important; padding: clamp(64px, 6vw, 92px) clamp(30px, 4vw, 62px) !important } #testimonials .testimonial-stage::before{ content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(90deg, rgba(37, 96, 155, .08) 1px, transparent 1px), linear-gradient(rgba(37, 96, 155, .08) 1px, transparent 1px) !important; background-size: 64px 64px !important; opacity: .52 !important; mask-image: linear-gradient(90deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, .2) 80%) !important } #testimonials .testimonial-grid{ position: relative !important; z-index: 2 !important; display: grid !important; grid-template-columns: repeat(3, minmax(220px, 1fr)) !important; gap: clamp(18px, 2vw, 28px) !important; margin: 0 !important; align-items: stretch !important } @media (max-width:1180px) { #testimonials.testimonials{ grid-template-columns: 1fr !important } #testimonials .testimonial-copy{ min-height: 0 !important; border-radius: 14px 14px 0 0 !important; padding: 56px 34px 42px !important } #testimonials .testimonial-copy::before, #testimonials .testimonial-copy::after{ display: none !important } #testimonials .section-label{ margin-bottom: 44px !important } #testimonials .testimonial-trust{ margin-top: 36px !important } #testimonials .testimonial-stage{ min-height: 0 !important; padding: 40px 34px 52px !important } #testimonials .testimonial-grid{ grid-template-columns: 1fr !important } } @media (max-width:640px) { #testimonials.testimonials{ border-radius: 10px !important } #testimonials .testimonial-copy, #testimonials .testimonial-stage{ padding-left: 18px !important; padding-right: 18px !important } } #certifications.certs-hud{ position: relative !important; display: grid !important; grid-template-columns: minmax(320px, 520px) minmax(0, 1fr) !important; gap: 0 !important; align-items: stretch !important; min-height: 760px !important; padding: 0 !important; overflow: hidden !important; border: 1px solid rgba(60, 147, 255, .72) !important; border-radius: 14px !important; background: linear-gradient(rgba(51, 122, 190, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(51, 122, 190, .045) 1px, transparent 1px), radial-gradient(circle at 94% 98%, rgba(255, 168, 44, .2), transparent 22%), radial-gradient(circle at 92% 4%, rgba(0, 168, 255, .14), transparent 24%), linear-gradient(90deg, rgba(2, 14, 31, .98), rgba(1, 7, 18, .99) 48%, rgba(3, 8, 15, .98)) !important; background-size: 42px 42px, 42px 42px, auto, auto, auto !important; box-shadow: inset 0 0 68px rgba(35, 116, 255, .1), inset 0 -1px 0 rgba(255, 182, 56, .58), 0 0 28px rgba(45, 136, 255, .16) !important } #certifications.certs-hud::before, #certifications.certs-hud::after{ content: "" !important; position: absolute !important; pointer-events: none !important } #certifications.certs-hud::before{ inset: 0 !important; opacity: .42 !important; background: radial-gradient(circle, rgba(0, 168, 255, .85) 0 1px, transparent 1.8px) 91% 4% / 88px 92px no-repeat, radial-gradient(circle, rgba(0, 168, 255, .65) 0 1px, transparent 1.8px) 37% 9% / 132px 120px no-repeat, radial-gradient(circle, rgba(0, 168, 255, .95) 0 1px, transparent 1.8px) 37% 91% / 120px 112px no-repeat !important } #certifications.certs-hud::after{ right: -120px !important; bottom: -148px !important; width: 420px !important; height: 420px !important; border-radius: 50% !important; border: 1px solid rgba(255, 169, 37, .24) !important; box-shadow: 0 0 0 42px rgba(255, 169, 37, .06), 0 0 0 84px rgba(255, 169, 37, .045), 0 0 0 126px rgba(255, 169, 37, .035), 0 0 46px rgba(255, 169, 37, .3) !important } #certifications.certs-hud .cert-copy{ position: relative !important; z-index: 2 !important; display: flex !important; flex-direction: column !important; min-height: 760px !important; padding: 78px 58px 74px !important; border-radius: 14px 0 0 14px !important; background: radial-gradient(circle at 24% 10%, rgba(80, 150, 255, .18), transparent 32%), linear-gradient(180deg, rgba(7, 21, 45, .9), rgba(2, 9, 22, .96)) !important; box-shadow: inset -1px 0 0 rgba(70, 144, 255, .8), inset 0 0 42px rgba(42, 119, 255, .12), 10px 0 36px rgba(50, 128, 255, .28) !important } #certifications.certs-hud .cert-copy::before, #certifications.certs-hud .cert-copy::after{ content: "" !important; position: absolute !important; pointer-events: none !important } #certifications.certs-hud .cert-copy::before{ right: -10px !important; top: 48% !important; width: 20px !important; height: 20px !important; background: #58a9ff !important; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) !important; box-shadow: 0 0 18px rgba(83, 162, 255, .86), 0 0 0 10px rgba(42, 116, 255, .16) !important } #certifications.certs-hud .cert-copy::after{ left: 230px !important; bottom: -90px !important; width: 280px !important; height: 280px !important; border-radius: 50% !important; border: 1px solid rgba(52, 145, 255, .14) !important; box-shadow: 0 0 0 24px rgba(52, 145, 255, .045), 0 0 0 48px rgba(52, 145, 255, .035), 0 0 0 72px rgba(52, 145, 255, .025) !important } #certifications.certs-hud .section-label{ margin-bottom: clamp(66px, 7vw, 94px) !important } #certifications.certs-hud .cert-trust{ margin-top: auto !important } #certifications.certs-hud .cert-stage{ position: relative !important; z-index: 1 !important; min-width: 0 !important; min-height: 760px !important; padding: clamp(64px, 6vw, 92px) clamp(30px, 4vw, 62px) !important } #certifications.certs-hud .cert-stage::before{ content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(90deg, rgba(37, 96, 155, .08) 1px, transparent 1px), linear-gradient(rgba(37, 96, 155, .08) 1px, transparent 1px) !important; background-size: 64px 64px !important; opacity: .52 !important; mask-image: linear-gradient(90deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, .2) 80%) !important } #certifications.certs-hud .cert-card{ --cert-accent: #78a8ff; --cert-surface: rgba(6, 16, 36, .94); color: #f5f9ff !important; padding: 34px 24px 24px !important; border: 1px solid color-mix(in srgb, var(--cert-accent) 58%, transparent) !important; border-radius: 8px !important; background: linear-gradient(135deg, transparent 0 20px, var(--cert-surface) 20px) top left / 51% 51% no-repeat, linear-gradient(225deg, transparent 0 20px, var(--cert-surface) 20px) top right / 51% 51% no-repeat, linear-gradient(45deg, transparent 0 20px, var(--cert-surface) 20px) bottom left / 51% 51% no-repeat, linear-gradient(315deg, transparent 0 20px, var(--cert-surface) 20px) bottom right / 51% 51% no-repeat !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 34px color-mix(in srgb, var(--cert-accent) 14%, transparent), 0 20px 44px rgba(0, 0, 0, .34), 0 0 26px color-mix(in srgb, var(--cert-accent) 18%, transparent) !important; transform: translateZ(0) } #certifications.certs-hud .cert-card.blue-border{ --cert-accent: #82a8ff } #certifications.certs-hud .cert-card.purple-border{ --cert-accent: #a984ff } #certifications.certs-hud .cert-card.teal-border{ --cert-accent: #8fe9ea } #certifications.certs-hud .cert-card.orange-border{ --cert-accent: #ffb14a } #certifications.certs-hud .cert-card::before{ z-index: -1 !important; opacity: 1 !important; background: radial-gradient(circle at 50% 16%, color-mix(in srgb, var(--cert-accent) 30%, transparent), transparent 30%), linear-gradient(180deg, color-mix(in srgb, var(--cert-accent) 13%, transparent), transparent 46%) !important } #certifications.certs-hud .cert-card::after{ left: 18px !important; right: 18px !important; bottom: 0 !important; height: 3px !important; opacity: .95 !important; background: linear-gradient(90deg, transparent, var(--cert-accent), transparent) !important; box-shadow: 0 0 18px color-mix(in srgb, var(--cert-accent) 72%, transparent) !important } #certifications.certs-hud .cert-card:hover{ transform: translateY(-6px) !important; border-color: color-mix(in srgb, var(--cert-accent) 82%, white 4%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 42px color-mix(in srgb, var(--cert-accent) 18%, transparent), 0 26px 52px rgba(0, 0, 0, .4), 0 0 34px color-mix(in srgb, var(--cert-accent) 28%, transparent) !important } #certifications.certs-hud .cert-icon, #certifications.certs-hud .cert-icon-img{ display: grid !important; width: 76px !important; height: 76px !important; place-items: center !important; margin: 0 auto 18px !important; border: 1px solid color-mix(in srgb, var(--cert-accent) 48%, transparent) !important; border-radius: 10px !important; background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .22), transparent 34%), linear-gradient(145deg, rgba(255, 255, 255, .12), color-mix(in srgb, var(--cert-accent) 22%, rgba(4, 12, 28, .88))) !important; box-shadow: inset 0 0 20px rgba(255, 255, 255, .08), 0 0 24px color-mix(in srgb, var(--cert-accent) 34%, transparent) !important } #certifications.certs-hud .cert-icon-img img{ width: 52px !important; height: 52px !important; object-fit: contain !important; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--cert-accent) 42%, transparent)) !important } #certifications.certs-hud .cert-icon:not(.cert-icon-img){ color: #f8fbff !important; font-family: var(--font-heading) !important; font-size: 23px !important; font-weight: 900 !important; letter-spacing: .04em !important; } #certifications.certs-hud .cert-card h3{ min-height: 58px !important; margin-bottom: 16px !important; color: #ffffff !important; font-size: 19px !important; line-height: 1.16 !important; } #certifications.certs-hud .cert-card h3::after{ width: 42px !important; height: 2px !important; margin: 13px auto 0 !important; background: var(--cert-accent) !important; box-shadow: 0 0 12px color-mix(in srgb, var(--cert-accent) 70%, transparent) !important } #certifications.certs-hud .cert-card p, #certifications.certs-hud .cert-card small{ color: rgba(226, 237, 252, .82) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.35 !important } #certifications.certs-hud .cert-card small{ display: inline-grid !important; min-width: 86px !important; min-height: 26px !important; place-items: center !important; margin: 14px auto 12px !important; border: 1px solid color-mix(in srgb, var(--cert-accent) 26%, transparent) !important; border-radius: 999px !important; color: color-mix(in srgb, var(--cert-accent) 84%, #ffffff) !important; background: rgba(3, 12, 29, .6) !important } #certifications.certs-hud .cert-meta{ justify-content: center !important; gap: 8px !important; margin: 0 auto 14px !important } #certifications.certs-hud .cert-meta span{ padding: 6px 9px !important; border: 1px solid color-mix(in srgb, var(--cert-accent) 28%, transparent) !important; color: color-mix(in srgb, var(--cert-accent) 82%, #ffffff) !important; background: color-mix(in srgb, var(--cert-accent) 11%, rgba(5, 15, 34, .82)) !important } #certifications.certs-hud .cert-card a{ width: 132px !important; height: 36px !important; border: 1px solid color-mix(in srgb, var(--cert-accent) 36%, transparent) !important; color: color-mix(in srgb, var(--cert-accent) 88%, #ffffff) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--cert-accent) 18%, rgba(255, 255, 255, .08)), rgba(9, 18, 39, .92)) !important; box-shadow: inset 0 0 16px rgba(255, 255, 255, .05), 0 0 18px color-mix(in srgb, var(--cert-accent) 20%, transparent) !important } #certifications.certs-hud .cert-card a:hover{ color: #06101f !important; background: linear-gradient(135deg, #ffffff, var(--cert-accent)) !important } #certifications.certs-hud .cert-grid{ position: relative !important; z-index: 2 !important; --cert-track-gap: 32px; --cert-track-card: calc((100% - 96px) / 4); grid-auto-columns: calc((100% - 96px) / 4) !important; gap: var(--cert-track-gap) !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: visible !important; overscroll-behavior-inline: contain !important; scroll-padding-inline: 0 !important; scroll-snap-type: x proximity !important; scrollbar-width: thin !important; scrollbar-color: rgba(119, 171, 255, .72) rgba(6, 18, 38, .82) !important } #certifications.certs-hud .cert-grid::-webkit-scrollbar{ display: block !important; height: 9px !important } #certifications.certs-hud .cert-grid::-webkit-scrollbar-track{ background: rgba(4, 14, 31, .84) !important; border: 1px solid rgba(80, 137, 255, .26) !important } #certifications.certs-hud .cert-grid::-webkit-scrollbar-thumb{ background: linear-gradient(90deg, #5c95ff, #79e6ef, #f1a44d) !important; border: 2px solid rgba(4, 14, 31, .84) !important; box-shadow: 0 0 10px rgba(107, 165, 255, .5) !important } #certifications.certs-hud .cert-grid::before{ left: calc(12.5% - 12px) !important; right: auto !important; width: calc(150%+16px) !important } #certifications.certs-hud .cert-card{ scroll-snap-align: start !important } @media (max-width:1180px) { #certifications.certs-hud{ grid-template-columns: 1fr !important } #certifications.certs-hud .cert-copy{ min-height: 0 !important; border-radius: 14px 14px 0 0 !important; padding: 56px 34px 42px !important } #certifications.certs-hud .cert-copy::before, #certifications.certs-hud .cert-copy::after{ display: none !important } #certifications.certs-hud .section-label{ margin-bottom: 44px !important } #certifications.certs-hud .cert-trust{ margin-top: 36px !important } #certifications.certs-hud .cert-stage{ min-height: 0 !important; padding: 40px 34px 52px !important } } @media (max-width:720px) { #certifications.certs-hud{ border-radius: 10px !important } #certifications.certs-hud .cert-copy, #certifications.certs-hud .cert-stage{ padding-left: 18px !important; padding-right: 18px !important } #certifications.certs-hud .cert-grid{ --cert-track-gap: 18px; grid-auto-columns: minmax(240px, 82vw) !important } #certifications.certs-hud .cert-grid::before{ left: 41vw !important; width: calc(492vw+90px) !important } } #github-activity.github-activity{ position: relative !important; grid-template-columns: minmax(360px, .82fr) minmax(560px, 1.18fr) !important; gap: clamp(30px, 4vw, 64px) !important; min-height: auto !important; padding: clamp(58px, 5vw, 88px) clamp(34px, 4vw, 70px) clamp(108px, 7vw, 130px) !important; overflow: hidden !important; background: radial-gradient(circle at 18% 12%, rgba(95, 160, 255, .18), transparent 26%), radial-gradient(circle at 86% 22%, rgba(255, 174, 68, .15), transparent 28%), linear-gradient(180deg, rgba(7, 18, 42, .96), rgba(2, 8, 20, .98)) !important } #github-activity.github-activity::before{ content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; opacity: .38 !important; background: linear-gradient(rgba(124, 183, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 183, 255, .08) 1px, transparent 1px) !important; background-size: 68px 68px !important; mask-image: linear-gradient(180deg, transparent, #000 18%, #000 86%, transparent) !important } #github-activity .github-copy, #github-activity .github-metrics, #github-activity .github-board, #github-activity .hud-action{ position: relative !important; z-index: 2 !important } #github-activity .github-copy{ max-width: 780px !important } #github-activity .section-title{ max-width: 760px !important; text-wrap: balance } #github-activity .section-description{ max-width: 720px !important } #github-activity .github-focus{ gap: 12px !important; margin-top: 30px !important } #github-activity .github-focus span{ min-height: 44px !important; padding: 9px 14px !important; border-color: rgba(124, 183, 255, .34) !important; border-radius: 6px !important; background: linear-gradient(135deg, rgba(18, 38, 80, .82), rgba(5, 14, 32, .88)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 20px rgba(91, 160, 255, .08) !important } #github-activity .github-focus img{ filter: drop-shadow(0 0 8px rgba(91, 220, 255, .32)) !important } #github-activity .github-metrics{ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; align-self: start !important; margin-top: 6px !important } #github-activity .github-metrics span{ min-height: 132px !important; padding: 20px 16px !important; border-color: rgba(124, 183, 255, .36) !important; border-radius: 8px !important; background: radial-gradient(circle at 50% 0%, rgba(91, 220, 255, .16), transparent 38%), linear-gradient(145deg, rgba(18, 37, 76, .72), rgba(4, 12, 29, .9)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 26px rgba(91, 160, 255, .1), 0 18px 38px rgba(0, 0, 0, .24) !important } #github-activity .github-metrics span::before{ content: "" !important; position: absolute !important; inset: 12px !important; border: 1px solid rgba(124, 183, 255, .08) !important; border-radius: 6px !important; pointer-events: none !important } #github-activity .github-metrics span::after{ left: 20px !important; right: 20px !important; background: linear-gradient(90deg, transparent, rgba(92, 220, 255, .85), rgba(255, 190, 78, .75), transparent) !important } #github-activity .github-metrics img{ width: 30px !important; height: 30px !important } #github-activity .github-metrics b{ color: #f8fbff !important; font-family: var(--font-heading) !important; font-size: clamp(22px, 1.6vw, 30px) !important; line-height: 1 !important; } #github-activity .github-metrics small{ color: rgba(225, 235, 249, .74) !important; font-size: 12px !important; font-weight: 750 !important } #github-activity .github-board{ grid-column: 1 / -1 !important; padding: clamp(24px, 2.5vw, 34px) !important; border-color: rgba(124, 183, 255, .32) !important; border-radius: 8px !important; background: radial-gradient(circle at 18% 8%, rgba(91, 160, 255, .12), transparent 24%), radial-gradient(circle at 88% 22%, rgba(255, 174, 68, .1), transparent 24%), linear-gradient(145deg, rgba(8, 20, 46, .9), rgba(3, 10, 24, .96)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 34px rgba(91, 160, 255, .09), 0 22px 46px rgba(0, 0, 0, .24) !important } #github-activity .github-board::before{ content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; border-radius: inherit !important; background: linear-gradient(90deg, transparent, rgba(92, 220, 255, .42), rgba(255, 190, 78, .36), transparent) top / 100% 2px no-repeat, linear-gradient(90deg, transparent, rgba(92, 220, 255, .34), transparent) bottom / 100% 2px no-repeat !important } #github-activity .github-board-head{ margin-bottom: 22px !important; padding-bottom: 16px !important } #github-activity .github-board-head span{ color: #b9dcff !important; font-size: 17px !important } #github-activity .github-board-head small{ color: rgba(226, 237, 252, .72) !important } #github-activity .contribution-graph{ grid-template-columns: repeat(12, minmax(30px, 1fr)) !important; grid-auto-rows: 22px !important; gap: 7px !important } #github-activity .contribution-graph span{ border-radius: 3px !important; border-color: rgba(124, 183, 255, .2) !important; background: rgba(24, 45, 82, .62) !important } #github-activity .contribution-graph span:nth-child(3n){ background: rgba(92, 222, 255, .34) !important } #github-activity .contribution-graph span:nth-child(4n){ background: rgba(255, 173, 37, .34) !important } #github-activity .contribution-graph span:nth-child(7n){ background: rgba(135, 104, 255, .42) !important } #github-activity .contribution-graph span:nth-child(11n){ background: rgba(92, 222, 255, .68) !important } #github-activity .github-legend{ margin-top: 20px !important } #github-activity .github-legend i{ border-radius: 3px !important } #github-activity .hud-action{ position: absolute !important; right: clamp(34px, 4vw, 70px) !important; bottom: clamp(34px, 4vw, 52px) !important; justify-self: auto !important; align-self: auto !important } @media (max-width:1180px) { #github-activity.github-activity{ grid-template-columns: 1fr !important } #github-activity .github-metrics{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important } } @media (max-width:760px) { #github-activity.github-activity{ padding: 38px 16px 104px !important } #github-activity .github-metrics{ grid-template-columns: 1fr !important } #github-activity .github-board-head{ align-items: start !important; flex-direction: column !important } #github-activity .contribution-graph{ grid-template-columns: repeat(6, minmax(0, 1fr)) !important } #github-activity .hud-action{ right: 16px !important; bottom: 30px !important } } #github-activity.github-activity{ position: relative !important; display: grid !important; grid-template-columns: minmax(320px, 520px) minmax(0, 1fr) !important; gap: 0 !important; align-items: stretch !important; min-height: 760px !important; padding: 0 !important; overflow: hidden !important; border: 1px solid rgba(60, 147, 255, .72) !important; border-radius: 14px !important; background: linear-gradient(rgba(51, 122, 190, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(51, 122, 190, .045) 1px, transparent 1px), radial-gradient(circle at 94% 98%, rgba(255, 168, 44, .22), transparent 22%), radial-gradient(circle at 92% 4%, rgba(0, 168, 255, .14), transparent 24%), linear-gradient(90deg, rgba(2, 14, 31, .98), rgba(1, 7, 18, .99) 48%, rgba(3, 8, 15, .98)) !important; background-size: 42px 42px, 42px 42px, auto, auto, auto !important; box-shadow: inset 0 0 68px rgba(35, 116, 255, .1), inset 0 -1px 0 rgba(255, 182, 56, .58), 0 0 28px rgba(45, 136, 255, .16) !important } #github-activity.github-activity::before, #github-activity.github-activity::after{ content: "" !important; position: absolute !important; display: block !important; pointer-events: none !important } #github-activity.github-activity::before{ inset: 0 !important; opacity: .42 !important; background: radial-gradient(circle, rgba(0, 168, 255, .85) 0 1px, transparent 1.8px) 91% 4% / 88px 92px no-repeat, radial-gradient(circle, rgba(0, 168, 255, .65) 0 1px, transparent 1.8px) 37% 9% / 132px 120px no-repeat, radial-gradient(circle, rgba(0, 168, 255, .95) 0 1px, transparent 1.8px) 37% 91% / 120px 112px no-repeat !important; mask-image: none !important } #github-activity.github-activity::after{ right: -120px !important; bottom: -148px !important; width: 420px !important; height: 420px !important; border-radius: 50% !important; border: 1px solid rgba(255, 169, 37, .24) !important; box-shadow: 0 0 0 42px rgba(255, 169, 37, .06), 0 0 0 84px rgba(255, 169, 37, .045), 0 0 0 126px rgba(255, 169, 37, .035), 0 0 46px rgba(255, 169, 37, .3) !important } #github-activity .github-copy{ position: relative !important; z-index: 2 !important; display: flex !important; flex-direction: column !important; grid-column: 1 !important; max-width: none !important; min-height: 760px !important; margin: 0 !important; padding: 78px 58px 74px !important; border-radius: 14px 0 0 14px !important; background: radial-gradient(circle at 86% 0%, rgba(0, 135, 255, .26), transparent 24%), radial-gradient(circle at 6% 74%, rgba(255, 169, 37, .09), transparent 24%), linear-gradient(180deg, rgba(7, 21, 45, .9), rgba(2, 9, 22, .96)) !important; box-shadow: inset -1px 0 0 rgba(70, 144, 255, .8), inset 0 0 42px rgba(42, 119, 255, .12), 10px 0 36px rgba(50, 128, 255, .28) !important } #github-activity .github-copy::before, #github-activity .github-copy::after{ content: "" !important; position: absolute !important; pointer-events: none !important } #github-activity .github-copy::before{ right: -18px !important; top: 48% !important; width: 36px !important; height: 36px !important; border: 1px solid rgba(130, 190, 255, .9) !important; border-radius: 50% !important; background: radial-gradient(circle, #6fd7ff 0 7px, rgba(31, 92, 190, .92) 8px 12px, transparent 13px), rgba(10, 29, 61, .92) !important; box-shadow: 0 0 20px rgba(83, 162, 255, .86), 0 0 0 12px rgba(42, 116, 255, .18), 0 0 0 28px rgba(42, 116, 255, .08) !important } #github-activity .github-copy::after{ left: 230px !important; bottom: -96px !important; width: 300px !important; height: 300px !important; border-radius: 50% !important; border: 1px solid rgba(52, 145, 255, .14) !important; box-shadow: 0 0 0 24px rgba(52, 145, 255, .045), 0 0 0 48px rgba(52, 145, 255, .035), 0 0 0 72px rgba(52, 145, 255, .025) !important } #github-activity .section-label{ margin-bottom: clamp(66px, 7vw, 94px) !important } #github-activity .section-title{ max-width: none !important } #github-activity .section-divider{ margin: clamp(34px, 4vw, 48px) 0 clamp(32px, 4vw, 44px) !important } #github-activity .section-description{ max-width: 360px !important; margin: 0 !important } #github-activity .github-focus{ display: grid !important; gap: 12px !important; margin-top: auto !important } #github-activity .github-stage{ position: relative !important; z-index: 1 !important; display: grid !important; grid-template-rows: auto minmax(0, 1fr) auto !important; gap: 24px !important; grid-column: 2 !important; min-width: 0 !important; min-height: 760px !important; padding: clamp(58px, 5vw, 78px) clamp(30px, 4vw, 58px) !important } #github-activity .github-stage::before{ content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(90deg, rgba(37, 96, 155, .08) 1px, transparent 1px), linear-gradient(rgba(37, 96, 155, .08) 1px, transparent 1px) !important; background-size: 64px 64px !important; opacity: .52 !important; mask-image: linear-gradient(90deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, .2) 80%) !important } #github-activity .github-stage>*{ position: relative !important; z-index: 2 !important } #github-activity .github-metrics{ margin: 0 !important } #github-activity .github-board{ grid-column: auto !important; min-height: 0 !important } #github-activity .hud-action{ position: relative !important; right: auto !important; bottom: auto !important; justify-self: center !important; align-self: end !important } @media (max-width:1180px) { #github-activity.github-activity{ grid-template-columns: 1fr !important } #github-activity .github-copy{ min-height: 0 !important; border-radius: 14px 14px 0 0 !important; padding: 56px 34px 42px !important } #github-activity .github-copy::before, #github-activity .github-copy::after{ display: none !important } #github-activity .section-label{ margin-bottom: 44px !important } #github-activity .github-focus{ margin-top: 36px !important } #github-activity .github-stage{ grid-column: 1 !important; min-height: 0 !important; padding: 40px 34px 52px !important } } @media (max-width:760px) { #github-activity.github-activity{ border-radius: 10px !important; padding: 0 !important } #github-activity .github-copy, #github-activity .github-stage{ padding-left: 18px !important; padding-right: 18px !important } } #contact.contact{ padding: 44px 80px !important; grid-template-columns: minmax(280px, 360px) minmax(330px, .84fr) minmax(500px, 1.12fr) !important; gap: clamp(28px, 3.2vw, 54px) !important; align-items: center !important; background: linear-gradient(rgba(46, 103, 170, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(46, 103, 170, .04) 1px, transparent 1px), radial-gradient(circle at 13% 50%, rgba(90, 226, 255, .16), transparent 18%), radial-gradient(circle at 18% 52%, rgba(255, 188, 86, .1), transparent 16%), linear-gradient(90deg, rgba(2, 10, 21, .98), rgba(1, 8, 18, .95)) !important; background-size: 40px 40px, 40px 40px, auto, auto, auto !important } #contact .contact-info{ grid-column: 2 !important } #contact .contact-form{ grid-column: 3 !important } #contact .contact-hud.radar.hud-portrait{ position: relative !important; left: auto !important; right: auto !important; top: auto !important; z-index: 1 !important; grid-column: 1 !important; grid-row: 1 !important; width: min(360px, 100%) !important; height: auto !important; aspect-ratio: 1 !important; justify-self: start !important; align-self: center !important; display: grid !important; place-items: center !important; transform: none !important; opacity: 1 !important; overflow: visible !important; isolation: isolate !important; filter: drop-shadow(0 0 30px rgba(90, 226, 255, .24)) drop-shadow(0 0 34px rgba(255, 171, 58, .16)) !important } #contact .contact-hud.radar.hud-portrait::before, #contact .contact-hud.radar.hud-portrait::after{ content: "" !important; position: absolute !important; pointer-events: none !important; border-radius: 50% !important } #contact .contact-hud.radar.hud-portrait::before{ inset: -2% !important; border: 1px solid rgba(90, 226, 255, .2) !important; background: linear-gradient(135deg, transparent 0 49.7%, rgba(90, 226, 255, .22) 49.9% 50.1%, transparent 50.3%), radial-gradient(circle at 50% 50%, rgba(90, 226, 255, .12), transparent 34%), repeating-radial-gradient(circle, transparent 0 25px, rgba(90, 226, 255, .08) 26px 27px, transparent 28px 50px) !important; box-shadow: inset 0 0 34px rgba(90, 226, 255, .08), 0 0 30px rgba(90, 226, 255, .1) !important } #contact .contact-hud.radar.hud-portrait::after{ inset: 17% !important; border: 1px dashed rgba(255, 188, 86, .28) !important; background: radial-gradient(circle at 50% 50%, rgba(255, 188, 86, .12), transparent 24%), rgba(4, 13, 28, .28) !important; box-shadow: inset 0 0 24px rgba(255, 188, 86, .05), 0 0 20px rgba(255, 188, 86, .08) !important } #contact .contact-hud .hud-frame{ position: relative !important; z-index: 2 !important; width: 100% !important; height: auto !important; aspect-ratio: 1 !important; display: grid !important; place-items: center !important } #contact .contact-hud .hud-ring{ position: absolute !important; left: 50% !important; top: 50% !important; aspect-ratio: 1 !important; height: auto !important; margin: 0 !important; border-radius: 50% !important; box-sizing: border-box !important; transform-origin: center !important; filter: drop-shadow(0 0 8px rgba(90, 226, 255, .5)) drop-shadow(0 0 12px rgba(255, 188, 86, .18)) !important } #contact .contact-hud .hud-ring-1{ width: 100% !important; border: 1px dashed rgba(90, 226, 255, .54) !important; animation: contact-hud-spin 22s linear infinite !important } #contact .contact-hud .hud-ring-2{ width: 80% !important; border: 2px solid transparent !important; border-left-color: rgba(90, 226, 255, .82) !important; border-right-color: rgba(255, 188, 86, .74) !important; animation: contact-hud-spin-reverse 15s linear infinite !important } #contact .contact-hud .hud-ring-3{ width: 61% !important; border: 1px dotted rgba(255, 188, 86, .72) !important; animation: contact-hud-spin 11s linear infinite !important } #contact .contact-hud .hud-ring-4{ width: 42% !important; border: 2px solid transparent !important; border-top-color: rgba(255, 213, 111, .82) !important; border-bottom-color: rgba(90, 226, 255, .82) !important; animation: contact-hud-spin-reverse 8s linear infinite !important } #contact .contact-hud .animation-hud-icon{ position: absolute !important; z-index: 5 !important; width: 38px !important; height: 38px !important; padding: 8px !important; border: 1px solid rgba(90, 226, 255, .36) !important; border-radius: 10px !important; background: rgba(5, 18, 42, .82) !important; object-fit: contain !important; filter: brightness(0) saturate(100%) invert(79%) sepia(69%) saturate(613%) hue-rotate(167deg) brightness(103%) contrast(102%) drop-shadow(0 0 8px rgba(90, 226, 255, .5)) !important; box-shadow: inset 0 0 14px rgba(90, 226, 255, .12), 0 0 18px rgba(90, 226, 255, .18) !important; animation: contact-hud-float 3.8s ease-in-out infinite !important } #contact .contact-hud .animation-hud-icon-a{ left: 9% !important; top: 18% !important } #contact .contact-hud .animation-hud-icon-b{ right: 9% !important; bottom: 18% !important; animation-delay: -1.6s !important; filter: brightness(0) saturate(100%) invert(74%) sepia(70%) saturate(509%) hue-rotate(342deg) brightness(104%) contrast(101%) drop-shadow(0 0 8px rgba(255, 188, 86, .48)) !important } #contact .contact-hud .avatar-box{ position: relative !important; z-index: 4 !important; width: 38% !important; height: auto !important; aspect-ratio: 1 !important; border-radius: 14px !important; background: linear-gradient(rgba(90, 226, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(90, 226, 255, .12) 1px, transparent 1px), radial-gradient(circle at 50% 44%, rgba(255, 247, 239, .92) 0 6%, rgba(90, 226, 255, .82) 7% 15%, transparent 16%), radial-gradient(circle, rgba(5, 18, 38, .98) 0 48%, rgba(16, 51, 96, .84) 49% 66%, transparent 67%), conic-gradient(from 18deg, #68c7ff, #315dff, #ff9c28, #ffd36c, #68c7ff) !important; background-size: 18px 18px, 18px 18px, auto, auto, auto !important; box-shadow: 0 0 24px rgba(90, 226, 255, .5), 0 0 28px rgba(255, 188, 86, .28), inset 0 0 22px rgba(255, 255, 255, .12) !important } #contact .contact-hud .avatar-box::before{ inset: 14px !important; border-radius: 10px !important; border: 1px solid rgba(120, 202, 255, .58) !important } #contact .contact-hud .avatar-box::after{ width: 12px !important; height: 12px !important } #contact .contact-detail{ display: grid !important; grid-template-columns: 46px minmax(0, 1fr) !important; gap: 14px !important; align-items: center !important; width: min(520px, 100%) !important; min-height: 58px !important; margin: 11px 0 0 !important; padding: 6px 14px 6px 8px !important; border: 1px solid rgba(90, 226, 255, .13) !important; border-radius: 10px !important; background: linear-gradient(135deg, rgba(13, 31, 64, .42), rgba(4, 12, 28, .16)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 20px rgba(90, 226, 255, .04) !important; line-height: 1 !important } #contact .contact-detail-icon{ display: grid !important; width: 42px !important; min-width: 42px !important; height: 42px !important; place-items: center !important; align-self: center !important; border: 1px solid rgba(90, 226, 255, .28) !important; border-radius: 8px !important; background: rgba(7, 21, 46, .48) !important; box-shadow: inset 0 0 14px rgba(90, 226, 255, .08), 0 0 18px rgba(90, 226, 255, .12) !important } #contact .contact-detail-icon .iconify-ui-icon{ display: block !important; width: 22px !important; height: 22px !important } #contact .contact-detail>span:last-child{ display: flex !important; min-height: 42px !important; min-width: 0 !important; align-items: center !important; font-size: 15px !important; padding-top: 0 !important; line-height: 1.12 !important; overflow-wrap: anywhere !important } #contact .contact-detail:hover{ border-color: rgba(90, 226, 255, .28) !important; background: linear-gradient(135deg, rgba(18, 42, 84, .52), rgba(4, 12, 28, .22)) !important } @media (max-width:1180px) { #contact.contact{ grid-template-columns: minmax(230px, 300px) minmax(0, 1fr) !important } #contact .contact-hud.radar.hud-portrait{ grid-column: 1 !important; grid-row: 1 / span 2 !important; width: min(300px, 100%) !important; justify-self: start !important; margin: 0 !important } #contact .contact-info{ grid-column: 2 !important; grid-row: 1 !important } #contact .contact-form{ grid-column: 2 !important; grid-row: 2 !important } } @media (max-width:820px) { #contact.contact{ grid-template-columns: 1fr !important; gap: 26px !important } #contact .contact-hud.radar.hud-portrait, #contact .contact-info, #contact .contact-form{ grid-column: 1 !important; grid-row: auto !important } #contact .contact-hud.radar.hud-portrait{ grid-row: auto !important; width: min(280px, 76vw) !important; margin: 0 auto !important } } @media (max-width:640px) { #contact .contact-hud.radar.hud-portrait{ display: none !important } #contact .contact-detail{ grid-template-columns: 38px minmax(0, 1fr) !important; gap: 10px !important; min-height: 52px !important; padding: 6px 10px 6px 7px !important } #contact .contact-detail-icon{ width: 36px !important; min-width: 36px !important; height: 36px !important } #contact .contact-detail-icon .iconify-ui-icon{ width: 19px !important; height: 19px !important } #contact .contact-detail>span:last-child{ min-height: 36px !important; font-size: 14px !important } } :root{ --card-cut: 12px; --card-radius: 16px; --card-padding: 24px; --card-min-height: 180px; --card-bg: linear-gradient(145deg, rgba(8, 24, 52, .84), rgba(2, 9, 22, .94)); --card-border: rgba(120, 184, 255, .2); --card-border-accent: rgba(0, 231, 255, .42); --card-glow: rgba(0, 153, 255, .14); --card-title: #f5f9ff; --card-text: var(--color-muted, #94a9bf); --card-shadow: inset 0 0 26px rgba(0, 153, 255, .08), 0 18px 34px rgba(0, 0, 0, .24); --card-hover-shadow: inset 0 0 34px rgba(0, 153, 255, .12), 0 22px 44px rgba(0, 0, 0, .3) } .portfolio-card, .project-card, .cert-card, .job, .service, .services-hud .service, .certs-hud .cert-card, .testimonial-card, .tech-category, .why-work-card, .overview-card, .core-strength, .exploring-card, .info-grid article{ position: relative; isolation: isolate; overflow: hidden; min-height: var(--card-min-height); padding: var(--card-padding); border: 1px solid var(--card-border); border-radius: var(--card-radius) !important; background: var(--card-bg); box-shadow: var(--card-shadow); clip-path: none !important } .portfolio-card::before, .project-card::before, .cert-card::before, .job::before, .service::before, .services-hud .service::before, .certs-hud .cert-card::before, .testimonial-card::before, .tech-category::before, .why-work-card::before, .overview-card::before, .core-strength::before, .exploring-card::before, .info-grid article::before{ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .72; background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), var(--card-glow), transparent 34%), linear-gradient(90deg, rgba(255, 255, 255, .04), transparent 30% 70%, rgba(255, 255, 255, .025)) } .portfolio-card::after, .project-card::after, .cert-card::after, .job::after, .service::after, .services-hud .service::after, .certs-hud .cert-card::after, .testimonial-card::after, .tech-category::after, .why-work-card::after, .overview-card::after, .core-strength::after, .exploring-card::after, .info-grid article::after{ content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--card-border-accent), transparent); box-shadow: 0 0 14px var(--card-border-accent); opacity: .72 } .portfolio-card:hover, .project-card:hover, .cert-card:hover, .job:hover, .service:hover, .services-hud .service:hover, .certs-hud .cert-card:hover, .testimonial-card:hover, .tech-category:hover, .why-work-card:hover, .overview-card:hover, .core-strength:hover, .exploring-card:hover, .info-grid article:hover{ border-color: var(--card-border-accent); box-shadow: var(--card-hover-shadow) } .portfolio-card h3, .project-card h3, .cert-card h3, .job h3, .service h3, .services-hud .service h3, .certs-hud .cert-card h3, .testimonial-card b, .tech-category h3, .why-work-card b, .overview-card h3, .core-strength h3, .exploring-card h3, .info-grid article b{ color: var(--card-title) } .portfolio-card p, .portfolio-card small, .project-card p, .cert-card p, .cert-card small, .job p, .job small, .service p, .services-hud .service p, .certs-hud .cert-card p, .testimonial-card p, .tech-category p, .why-work-card span, .overview-card p, .core-strength p, .exploring-card p, .info-grid article small{ color: var(--card-text) } .info-grid article{ --card-min-height: 0; min-height: auto !important; padding: 18px 24px !important } .blue-border, .portfolio-card.is-blue{ --card-border: rgba(0, 178, 255, .34); --card-border-accent: rgba(0, 231, 255, .78); --card-glow: rgba(0, 153, 255, .2) } .purple-border, .portfolio-card.is-purple{ --card-border: rgba(186, 99, 255, .34); --card-border-accent: rgba(186, 99, 255, .78); --card-glow: rgba(186, 99, 255, .2) } .orange-border, .portfolio-card.is-orange{ --card-border: rgba(255, 139, 31, .36); --card-border-accent: rgba(255, 139, 31, .82); --card-glow: rgba(255, 139, 31, .2) } .teal-border, .portfolio-card.is-teal{ --card-border: rgba(0, 231, 255, .3); --card-border-accent: rgba(0, 231, 255, .72); --card-glow: rgba(0, 231, 255, .16) } .green-border, .portfolio-card.is-green{ --card-border: rgba(46, 213, 115, .3); --card-border-accent: rgba(46, 213, 115, .72); --card-glow: rgba(46, 213, 115, .16) } @media (max-width:700px) { :root{ --card-cut: 10px; --card-radius: 16px; --card-padding: 20px; --card-min-height: 0 } } :root{ --site-section-width: min(var(--page-max-width, 1840px), calc(100% - (var(--page-gutter, 24px) * 2))) } main>section, .hero, .stats, .section, .about, .experience, .tech-stack-showcase, .tech-stack-cta-section, .services, .services-hud, .services-cta-section, .certifications, .certs-hud, .projects, .testimonials, .github-activity, .contact, .why-work, .trusted-strip, .footer{ width: var(--site-section-width) !important; max-width: var(--page-max-width, 1840px) !important; margin-left: auto !important; margin-right: auto !important; border: none !important } .header{ width: 100% !important; max-width: none !important } @media (min-width:1841px) { :root{ --site-section-width: min(var(--page-max-width, 1840px), calc(100% - 80px)) } } @media (max-width:1200px) { :root{ --site-section-width: calc(100% - (var(--page-gutter, 24px) * 2)) } } @media (max-width:900px) { :root{ --site-section-width: calc(100% - (var(--page-gutter, 18px) * 2)) } } @media (max-width:700px) { :root{ --site-section-width: calc(100% - (var(--page-gutter, 11px) * 2)) } } @media (max-width:420px) { :root{ --site-section-width: calc(100% - (var(--page-gutter, 8px) * 2)) } } .section-trust, .experience-trust, .tech-trust, .services.services-hud .service-trust, .certifications.certs-hud .cert-trust, #certifications.certs-hud .cert-trust, .testimonials .testimonial-trust, #testimonials .testimonial-trust, .why-work-trust, .projects-trust{ position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; grid-column: auto !important; grid-row: auto !important; width: min(440px, 100%) !important; height: auto !important; min-height: 150px !important; padding: 22px 24px !important; display: grid !important; grid-template-columns: 58px minmax(0, 1fr) !important; gap: 18px !important; align-items: center !important; align-self: flex-start !important; border: 2px solid transparent !important; border-radius: 18px !important; clip-path: none !important; background: radial-gradient(circle at 13% 52%, rgba(64, 202, 238, .16), transparent 28%), radial-gradient(circle at 78% 18%, rgba(180, 101, 232, .14), transparent 34%), radial-gradient(circle at 96% 82%, rgba(255, 142, 58, .1), transparent 30%), linear-gradient(90deg, rgba(155, 231, 105, .045), transparent 22%), linear-gradient(135deg, rgba(13, 22, 45, .98), rgba(5, 6, 20, .99)) padding-box, linear-gradient(115deg, #75bd52 0%, #48a6ff 28%, #b465e8 58%, #ffa86f 100%) border-box !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 28px rgba(180, 101, 232, .06), 0 0 22px rgba(180, 101, 232, .18), 0 0 18px rgba(64, 202, 238, .08), 0 0 18px rgba(117, 189, 82, .08), 0 0 18px rgba(255, 168, 111, .08) !important } .section-trust::before, .section-trust::after, .experience-trust::before, .experience-trust::after, .tech-trust::before, .tech-trust::after, .services.services-hud .service-trust::before, .services.services-hud .service-trust::after, .certifications.certs-hud .cert-trust::before, .certifications.certs-hud .cert-trust::after, #certifications.certs-hud .cert-trust::before, #certifications.certs-hud .cert-trust::after, .testimonials .testimonial-trust::before, .testimonials .testimonial-trust::after, #testimonials .testimonial-trust::before, #testimonials .testimonial-trust::after, .why-work-trust::before, .why-work-trust::after, .projects-trust::before, .projects-trust::after{ display: none !important } .section-trust img, .section-trust .section-trust-icon, .experience-trust-icon, .tech-trust .tech-trust-icon, .services.services-hud .service-trust-icon, .certifications.certs-hud .cert-trust-icon, #certifications.certs-hud .cert-trust-icon, .testimonials .testimonial-trust-icon, #testimonials .testimonial-trust-icon, .why-work-trust-icon, .projects-trust-icon{ position: relative !important; left: auto !important; top: auto !important; grid-column: 1 !important; grid-row: 1 !important; width: 50px !important; height: 50px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; object-fit: contain !important; transform: none !important; filter: brightness(0) saturate(100%) invert(68%) sepia(87%) saturate(1380%) hue-rotate(163deg) brightness(104%) contrast(103%) drop-shadow(0 0 14px rgba(64, 202, 238, .5)) !important } .section-trust span, .experience-trust span, .tech-trust span, .services.services-hud .service-trust span, .certifications.certs-hud .cert-trust span, #certifications.certs-hud .cert-trust span, .testimonials .testimonial-trust span, #testimonials .testimonial-trust span, .why-work-trust span, .projects-trust span{ grid-column: 2 !important; grid-row: 1 !important; max-width: 290px !important; margin: 0 !important; color: #f4f8ff !important; font-size: clamp(12px, .72vw, 14px) !important; font-weight: 700 !important; line-height: 1.5 !important; letter-spacing: 0 !important; overflow-wrap: normal !important; word-break: normal !important; white-space: normal !important } .section-trust b, .experience-trust b, .tech-trust b, .services.services-hud .service-trust b, .certifications.certs-hud .cert-trust b, #certifications.certs-hud .cert-trust b, .testimonials .testimonial-trust b, #testimonials .testimonial-trust b, .why-work-trust b, .projects-trust b{ display: block !important; margin: 0 0 10px !important; background: linear-gradient(90deg, #8fcaff 0%, #aee1ff 34%, #a8e57f 58%, #e9dda5 78%, #ffa86f 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; font-family: var(--font-ui, "Space Grotesk", system-ui, sans-serif) !important; font-size: clamp(14px, .88vw, 17px) !important; font-weight: 900 !important; line-height: 1.32 !important; letter-spacing: .11em !important; text-transform: uppercase !important; overflow-wrap: normal !important; word-break: normal !important; white-space: normal !important } @media (max-width:560px) { .section-trust, .experience-trust, .tech-trust, .services.services-hud .service-trust, .certifications.certs-hud .cert-trust, #certifications.certs-hud .cert-trust, .testimonials .testimonial-trust, #testimonials .testimonial-trust, .why-work-trust, .projects-trust{ grid-template-columns: 48px minmax(0, 1fr) !important; gap: 14px !important; min-height: 0 !important; padding: 18px 16px !important } .section-trust img, .section-trust .section-trust-icon, .experience-trust-icon, .tech-trust .tech-trust-icon, .services.services-hud .service-trust-icon, .certifications.certs-hud .cert-trust-icon, #certifications.certs-hud .cert-trust-icon, .testimonials .testimonial-trust-icon, #testimonials .testimonial-trust-icon, .why-work-trust-icon, .projects-trust-icon{ width: 42px !important; height: 42px !important } .section-trust span, .experience-trust span, .tech-trust span, .services.services-hud .service-trust span, .certifications.certs-hud .cert-trust span, #certifications.certs-hud .cert-trust span, .testimonials .testimonial-trust span, #testimonials .testimonial-trust span, .why-work-trust span, .projects-trust span, .section-trust b, .experience-trust b, .tech-trust b, .services.services-hud .service-trust b, .certifications.certs-hud .cert-trust b, #certifications.certs-hud .cert-trust b, .testimonials .testimonial-trust b, #testimonials .testimonial-trust b, .why-work-trust b, .projects-trust b{ font-size: 13px !important } .section-trust b, .experience-trust b, .tech-trust b, .services.services-hud .service-trust b, .certifications.certs-hud .cert-trust b, #certifications.certs-hud .cert-trust b, .testimonials .testimonial-trust b, #testimonials .testimonial-trust b, .why-work-trust b, .projects-trust b{ letter-spacing: .07em !important } } #services .service, #projects .project-card, #certifications .cert-card, #about .about-profile-layout{ position: relative; isolation: isolate } #services .service, #projects .project-card, #certifications .cert-card{ position: relative; overflow: hidden } #services .service::after{ content: ""; position: absolute; inset: 18px; background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(92, 202, 255, .24) 23px 24px, transparent 25px 48px), linear-gradient(180deg, transparent, rgba(92, 202, 255, .16), transparent); opacity: 0; transform: translateY(-22%); animation: live-stream 5.8s linear infinite; pointer-events: none; z-index: 0 } #services .service:nth-child(2n)::after{ animation-delay: -1.4s } #services .service>*{ position: relative; z-index: 1 } #projects .project-card::after{ content: ""; position: absolute; right: -70px; top: -70px; width: 190px; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(111, 185, 255, .26); box-shadow: 0 0 0 18px rgba(88, 151, 255, .05), 0 0 0 42px rgba(172, 111, 255, .035), inset 0 0 30px rgba(88, 151, 255, .12); opacity: .34; animation: live-portal-spin 10s linear infinite; pointer-events: none } #certifications .cert-card::after{ content: ""; position: absolute; left: 14px; right: 14px; top: 50%; height: 2px; background: linear-gradient(90deg, transparent, rgba(94, 224, 255, .72), transparent); box-shadow: 0 0 14px rgba(94, 224, 255, .5); opacity: .18; animation: live-scan 3.8s ease-in-out infinite; pointer-events: none } #about .about-profile-layout::after{ content: ""; position: absolute; right: clamp(18px, 4vw, 68px); bottom: clamp(18px, 4vw, 68px); width: 230px; aspect-ratio: 1; background: radial-gradient(circle at 14% 28%, rgba(91, 224, 255, .9) 0 2px, transparent 3px), radial-gradient(circle at 34% 68%, rgba(124, 165, 255, .82) 0 2px, transparent 3px), radial-gradient(circle at 58% 36%, rgba(177, 108, 255, .82) 0 2px, transparent 3px), radial-gradient(circle at 78% 72%, rgba(255, 193, 71, .82) 0 2px, transparent 3px), linear-gradient(25deg, transparent 49%, rgba(91, 224, 255, .18) 50%, transparent 51%), linear-gradient(145deg, transparent 49%, rgba(255, 193, 71, .16) 50%, transparent 51%); border-radius: 50%; opacity: .16; animation: live-constellation 6s ease-in-out infinite; pointer-events: none } @media (prefers-reduced-motion:reduce) { #services .service::after, #projects .project-card::after, #certifications .cert-card::after, #about .about-profile-layout::after{ animation: none !important } } .trusted-companies{ min-height: 0 !important; padding: 42px 64px 46px !important } .trusted-companies .section-description{ margin-bottom: 0 !important } .trusted-companies .section-divider{ margin-top: 24px !important; margin-bottom: 0 !important } .trusted-company-marquee{ --trusted-card-width: 330px; --trusted-card-gap: 18px; position: relative; z-index: 2; width: 100%; margin: 24px 0 0 !important; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent) } .trusted-company-track{ display: flex; align-items: stretch; width: max-content; gap: var(--trusted-card-gap); transform: translate3d(0, 0, 0); animation: company-marquee 24s linear infinite; will-change: transform } .trusted-company-marquee .trusted-company-card{ width: var(--trusted-card-width) !important; min-height: 112px !important; flex: 0 0 var(--trusted-card-width); border-radius: 8px !important; background: linear-gradient(135deg, rgba(17, 31, 62, .86), rgba(4, 9, 23, .92)) !important } #services .service-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important } #services .service{ min-height: 300px !important; display: grid !important; grid-template-columns: 86px minmax(0, 1fr) !important; align-content: start !important; text-align: left !important; padding: 30px !important } #services .service>small{ grid-row: 1 / span 3 !important; position: static !important; width: auto !important; color: rgba(131, 191, 255, .18) !important; font-size: 58px !important; line-height: .88 !important; letter-spacing: -.02em !important } #services .service>span{ justify-self: start !important; width: 54px !important; height: 54px !important; margin: 0 0 18px !important } #services .service h3{ font-size: 24px !important; text-align: left !important } #services .service p{ max-width: 520px !important; margin-left: 0 !important; text-align: left !important } #services .service-flow, #services .service a{ grid-column: 2 !important } #projects .project-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: stretch !important } #projects .project-card:first-child{ grid-column: 1 / -1 !important; min-height: 430px !important; display: grid !important; grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr) !important; gap: 22px 30px !important } #projects .project-card:first-child::before{ content: "Featured Project"; position: absolute; top: 22px; left: 24px; z-index: 3; color: #ffd36a; font: 900 12px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase } #projects .project-card:first-child .project-image{ grid-row: 1 / span 5 !important; min-height: 100% !important; margin-top: 34px !important } #projects .project-card:first-child h3{ margin-top: 42px !important; font-size: 34px !important } #github-activity .github-metrics{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important } #github-activity .github-metrics span{ min-height: 128px !important; border-radius: 8px !important; background: radial-gradient(circle at 20% 0, rgba(91, 222, 255, .16), transparent 36%), linear-gradient(135deg, rgba(18, 34, 70, .86), rgba(5, 9, 24, .92)) !important } #github-activity .contribution-graph span{ animation: contribution-pulse 4.8s ease-in-out infinite; animation-delay: calc((var(--i, 1) * 43ms)) } #github-activity .contribution-graph span:nth-child(3n){ --i: 3 } #github-activity .contribution-graph span:nth-child(4n){ --i: 7 } #github-activity .contribution-graph span:nth-child(5n){ --i: 11 } .final-cta{ min-height: 440px; padding: clamp(46px, 6vw, 86px); display: grid; place-items: center; text-align: center; background: radial-gradient(circle at 50% 0, rgba(91, 202, 255, .18), transparent 34%), radial-gradient(circle at 80% 90%, rgba(255, 185, 76, .16), transparent 30%), linear-gradient(rgba(61, 124, 210, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(61, 124, 210, .055) 1px, transparent 1px), linear-gradient(135deg, rgba(3, 13, 31, .96), rgba(1, 7, 18, .98)); background-size: auto, auto, 48px 48px, 48px 48px, auto } .final-cta .section-title{ max-width: 900px; margin: 0 auto; font-size: clamp(42px, 5.2vw, 84px) } .final-cta .section-description{ max-width: 680px; margin-inline: auto } .final-cta .hud-button{ margin-top: 26px } #experience .year-track span{ display: grid !important; gap: 4px !important; align-content: center !important; min-width: 142px !important } #experience .year-track span b{ display: block !important; color: inherit !important; font: 900 15px/1.1 var(--font-ui) !important; letter-spacing: 0 !important } #experience .year-track span small{ display: block !important; color: rgba(219, 232, 255, .78) !important; font: 800 9px/1.1 var(--font-body) !important; letter-spacing: .08em !important; text-transform: uppercase !important } @media (max-width:1320px) { .engineering-command-center .exploring-main, #services .service-grid, #projects .project-grid, #projects .project-card:first-child{ grid-template-columns: 1fr !important } #projects .project-card:first-child .project-image{ grid-row: auto !important } } @media (max-width:760px) { #services .service{ grid-template-columns: 1fr !important } #services .service>small, #services .service-flow, #services .service a{ grid-column: auto !important } .engineering-command-center .roadmap-line, #github-activity .github-metrics{ grid-template-columns: 1fr !important } .trusted-companies{ padding: 30px 18px 34px !important } .trusted-company-marquee{ --trusted-card-width: 250px; --trusted-card-gap: 14px } } main>section, .section, .hero, .stats, .about, .experience, .tech-stack-showcase, .tech-stack-cta-section, .services, .services-hud, .services-cta-section, .certifications, .certs-hud, .projects, .testimonials, .github-activity, .contact, .why-work, .trusted-strip, .final-cta, .border-frame, .footer{ border: 0 !important; border-radius: 0 !important; } main>section::before, main>section::after, .section::before, .section::after, .border-frame::before, .border-frame::after{ border: 0 !important; border-radius: 0 !important; } #experience.experience{ border: 0 !important; } section, section::before, section::after{ border: 0 !important; border-radius: 0 !important; } #home.hero.border-frame, #about.about.section.border-frame.about-profile-layout, #experience.section.experience.border-frame, #why-work-with-me.section.why-work.border-frame, #skills.section.tech-stack-showcase.border-frame, #services.section.services.border-frame.services-hud, #projects.section.projects.border-frame, #testimonials.section.testimonials.border-frame, #certifications.section.certifications.border-frame.certs-hud, #github-activity.section.github-activity.border-frame, #contact.section.contact.border-frame, section.stats, section.trusted-strip.trusted-companies, section.section.final-cta.border-frame, #home.hero.border-frame::before, #home.hero.border-frame::after, #about.about.section.border-frame.about-profile-layout::before, #about.about.section.border-frame.about-profile-layout::after, #experience.section.experience.border-frame::before, #experience.section.experience.border-frame::after, #why-work-with-me.section.why-work.border-frame::before, #why-work-with-me.section.why-work.border-frame::after, #skills.section.tech-stack-showcase.border-frame::before, #skills.section.tech-stack-showcase.border-frame::after, #services.section.services.border-frame.services-hud::before, #services.section.services.border-frame.services-hud::after, #projects.section.projects.border-frame::before, #projects.section.projects.border-frame::after, #testimonials.section.testimonials.border-frame::before, #testimonials.section.testimonials.border-frame::after, #certifications.section.certifications.border-frame.certs-hud::before, #certifications.section.certifications.border-frame.certs-hud::after, #github-activity.section.github-activity.border-frame::before, #github-activity.section.github-activity.border-frame::after, #contact.section.contact.border-frame::before, #contact.section.contact.border-frame::after, section.stats::before, section.stats::after, section.trusted-strip.trusted-companies::before, section.trusted-strip.trusted-companies::after, section.section.final-cta.border-frame::before, section.section.final-cta.border-frame::after{ border: 0 !important; border-radius: 0 !important; } #experience.experience{ --experience-row-height: 188px; --experience-row-gap: 24px; --experience-timeline-col: clamp(180px, 14vw, 240px); --experience-node-size: 36px; --experience-node-inset: 28px; overflow: hidden !important; } #experience.experience .experience-scroll{ grid-template-columns: var(--experience-timeline-col) minmax(0, 1fr) !important; gap: var(--experience-row-gap) 40px !important; align-items: stretch !important; position: relative !important; } #experience.experience .experience-scroll::before{ display: none !important; } #experience.experience .year-track, #experience.experience .experience-jobs{ display: grid !important; grid-template-rows: repeat(6, var(--experience-row-height)) !important; gap: var(--experience-row-gap) !important; } #experience.experience .year-track{ position: relative !important; } #experience.experience .year-track::before{ content: "" !important; position: absolute !important; z-index: 5 !important; top: 0 !important; bottom: 0 !important; left: auto !important; right: var(--experience-node-inset) !important; width: 3px !important; border-radius: 999px !important; transform: translateX(50%) !important; background: linear-gradient(180deg, rgba(255, 217, 106, 0.72), rgba(105, 167, 255, 0.72) 33%, rgba(195, 102, 255, 0.72) 56%, rgba(105, 230, 239, 0.72) 78%, rgba(127, 229, 122, 0.72)) !important; box-shadow: 0 0 14px rgba(117, 186, 255, 0.42) !important; } #experience.experience .year-track::after{ content: "\2191" !important; position: absolute !important; z-index: 9 !important; top: -22px !important; left: auto !important; right: var(--experience-node-inset) !important; width: 28px !important; height: 32px !important; display: grid !important; place-items: center !important; transform: translateX(50%) !important; color: #ffe36f !important; font-family: var(--font-ui), system-ui, sans-serif !important; font-size: 24px !important; font-weight: 950 !important; line-height: 1 !important; } #experience.experience .experience-jobs{ flex-direction: initial !important; } #experience.experience.is-collapsed .year-track, #experience.experience.is-collapsed .experience-jobs{ grid-template-rows: repeat(4, var(--experience-row-height)) !important; } #experience.experience.is-collapsed .year-track span:nth-child(n+5), #experience.experience.is-collapsed .experience-jobs>.job:nth-child(-n+2){ display: none !important; } #experience.experience .year-track span, #experience.experience .experience-jobs>.job{ min-height: 0 !important; height: var(--experience-row-height) !important; } #experience.experience .year-track span{ display: flex !important; align-items: center !important; justify-content: flex-end !important; position: relative !important; transform: none !important; } #experience.experience .year-track span:nth-child(1), #experience.experience .experience-jobs>.job:nth-child(6){ grid-row: 1 !important; } #experience.experience .year-track span:nth-child(2), #experience.experience .experience-jobs>.job:nth-child(5){ grid-row: 2 !important; } #experience.experience .year-track span:nth-child(3), #experience.experience .experience-jobs>.job:nth-child(4){ grid-row: 3 !important; } #experience.experience .year-track span:nth-child(4), #experience.experience .experience-jobs>.job:nth-child(3){ grid-row: 4 !important; } #experience.experience .year-track span:nth-child(5), #experience.experience .experience-jobs>.job:nth-child(2){ grid-row: 5 !important; } #experience.experience .year-track span:nth-child(6), #experience.experience .experience-jobs>.job:nth-child(1){ grid-row: 6 !important; } #experience.experience .experience-jobs>.job{ grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.1fr) !important; align-content: center !important; overflow: visible !important; } #experience.experience .job .job-summary{ align-self: center !important; min-width: 0 !important; max-width: 100% !important; } #experience.experience .job .summary-link{ grid-template-columns: minmax(96px, 128px) minmax(0, 1fr) !important; min-width: 0 !important; } #experience.experience .job .summary-link span{ overflow-wrap: anywhere !important; } #experience.experience .year-track span::before{ content: "" !important; position: absolute !important; top: 50% !important; left: calc(100% - 38px) !important; right: auto !important; z-index: 7 !important; width: calc(40px + clamp(140px, 10vw, 190px)) !important; height: 3px !important; border-radius: 999px !important; transform: translateY(-50%) !important; background: linear-gradient(90deg, var(--timeline-accent), color-mix(in srgb, var(--timeline-accent) 76%, transparent) 58%, color-mix(in srgb, var(--timeline-accent) 38%, transparent)) !important; box-shadow: 0 0 12px color-mix(in srgb, var(--timeline-accent) 64%, transparent), 0 0 24px color-mix(in srgb, var(--timeline-accent) 28%, transparent) !important; opacity: 1 !important; } #experience.experience .year-track span::after{ z-index: 8 !important; right: var(--experience-node-inset) !important; } #experience.experience .year-track span::after{ content: "↑" !important; display: grid !important; place-items: center !important; color: var(--timeline-accent) !important; font-family: var(--font-ui), system-ui, sans-serif !important; font-size: 20px !important; font-weight: 950 !important; line-height: 1 !important; background: linear-gradient(180deg, var(--timeline-accent), var(--timeline-accent)) center / 3px 100% no-repeat, linear-gradient(90deg, var(--timeline-accent), var(--timeline-accent)) center / 100% 3px no-repeat, rgba(3, 10, 24, 0.96) !important; } #experience.experience .experience-toggle{ grid-column: 2 !important; justify-self: end !important; } #why-work-with-me.why-work, #why-work-with-me.why-work::before, #why-work-with-me.why-work::after{ box-shadow: none !important; } @media (max-width: 1180px) { #experience.experience{ --experience-row-height: auto; } #experience.experience .experience-scroll{ grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) !important; } #experience.experience .year-track, #experience.experience .experience-jobs, #experience.experience.is-collapsed .year-track, #experience.experience.is-collapsed .experience-jobs{ grid-template-rows: none !important; } #experience.experience .year-track span, #experience.experience .experience-jobs>.job{ height: auto !important; min-height: 190px !important; } #experience.experience .year-track span{ transform: none !important; } #experience.experience .experience-jobs>.job{ grid-template-columns: 1fr !important; overflow: hidden !important; } } @media (max-width: 760px) { #experience.experience .experience-scroll{ grid-template-columns: 1fr !important; } #experience.experience .year-track{ display: none !important; } #experience.experience .experience-toggle{ grid-column: 1 !important; } } .trusted-strip.trusted-companies, .trusted-strip.trusted-companies::before, .trusted-strip.trusted-companies::after, .trusted-companies .trusted-company-card, .trusted-companies .trusted-company-card::before, .trusted-companies .trusted-company-card::after{ border-radius: 0 !important; box-shadow: none !important; } .info-grid article b{ display: inline-flex !important; align-items: center !important; gap: 10px !important; } .info-grid .info-icon{ width: 22px !important; height: 22px !important; flex: 0 0 22px !important; object-fit: contain !important; filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.32)) !important; } .info-grid article:nth-child(2n) .info-icon{ filter: brightness(0) saturate(100%) invert(82%) sepia(66%) saturate(569%) hue-rotate(349deg) brightness(104%) contrast(101%) drop-shadow(0 0 8px rgba(255, 211, 105, 0.36)) !important; } #experience.experience .year-track span::after{ content: "\2191" !important; width: var(--experience-node-size) !important; height: var(--experience-node-size) !important; z-index: 8 !important; background: radial-gradient(circle, var(--timeline-accent) 0 4px, transparent 5px), linear-gradient(180deg, var(--timeline-accent), var(--timeline-accent)) center / 3px 100% no-repeat, linear-gradient(90deg, var(--timeline-accent), var(--timeline-accent)) center / 100% 3px no-repeat, rgba(3, 10, 24, 0.96) !important; } #experience.experience .experience-copy .section-title, #experience.experience .experience-copy .section-description{ background: transparent !important; background-color: transparent !important; background-image: none !important; } #experience.experience .experience-copy .section-title span{ background: transparent !important; background-color: transparent !important; background-image: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #9fc8ff !important; } #experience.experience .experience-copy *, #experience.experience .experience-copy *::before, #experience.experience .experience-copy *::after{ -webkit-tap-highlight-color: transparent !important; } #experience.experience .experience-copy *::selection{ background: transparent !important; color: inherit !important; } #experience.experience .experience-scroll::before{ left: calc(var(--experience-timeline-col) - var(--experience-node-inset) - (var(--experience-node-size) / 2)) !important; transform: translateX(-50%) !important; } #experience.experience, #experience.experience::before, #experience.experience::after, #experience.experience .experience-scroll, #experience.experience .experience-copy, #experience.experience .experience-jobs, #experience.experience .experience-jobs>.job{ border-radius: 0 !important; box-shadow: none !important; } .experience::after, #experience.experience::after{ content: none !important; display: none !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } #why-work-with-me.why-work .why-work-card > b{ display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 0 12px !important; line-height: 1.2 !important; white-space: normal !important; } #why-work-with-me.why-work .why-work-card > b + span{ display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; line-height: 1.45 !important; white-space: normal !important; } #why-work-with-me .why-work-copy, #why-work-with-me .why-work-stage, #why-work-with-me .section-head{ border: 0 !important; border-left: 0 !important; border-right: 0 !important; box-shadow: none !important; } #why-work-with-me .why-work-copy::before, #why-work-with-me .why-work-copy::after, #why-work-with-me .why-work-stage::before, #why-work-with-me .why-work-stage::after{ content: none !important; display: none !important; border: 0 !important; box-shadow: none !important; } #skills.tech-stack-showcase, #skills.tech-stack-showcase::before, #skills.tech-stack-showcase::after{ border-radius: 0 !important; box-shadow: none !important; } #skills.tech-stack-showcase .skills-copy{ box-shadow: none !important; } #skills.tech-stack-showcase .skills-copy::before, #skills.tech-stack-showcase .skills-copy::after{ content: none !important; display: none !important; border: 0 !important; box-shadow: none !important; } #skills.tech-stack-showcase .tech-category-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 42px !important; align-items: start !important; } #skills.tech-stack-showcase .tech-category{ min-height: 0 !important; padding: 26px 34px 30px !important; display: flex !important; flex-direction: column !important; border-radius: 0 !important; border: 1px solid color-mix(in srgb, var(--tech-accent) 44%, rgba(255, 255, 255, .1)) !important; background: linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 24%), radial-gradient(circle at 16% 0, color-mix(in srgb, var(--tech-accent) 18%, transparent), transparent 32%), linear-gradient(145deg, rgba(8, 20, 44, .94), rgba(2, 8, 22, .98)) !important; box-shadow: none !important; overflow: hidden !important; } #skills.tech-stack-showcase .tech-category::before{ border-radius: inherit !important; } #skills.tech-stack-showcase .tech-category::after{ left: 22px !important; right: 22px !important; bottom: 0 !important; border-radius: 0 !important; box-shadow: none !important; } #skills.tech-stack-showcase .leadership-card{ min-height: 0 !important; padding: 26px 34px 30px !important; } #skills.tech-stack-showcase .leadership-card .leadership-marquee{ padding: 0 !important; } #skills.tech-stack-showcase .tech-category h3{ display: flex !important; align-items: center !important; gap: 18px !important; min-height: 48px !important; margin: 0 0 20px !important; padding: 0 0 16px !important; font-size: 16px !important; line-height: 1.18 !important; } #skills.tech-stack-showcase .tech-category h3 img{ flex: 0 0 36px !important; width: 36px !important; height: 36px !important; } #skills.tech-stack-showcase .tech-list.two-col{ display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px 34px !important; align-content: start !important; } #skills.tech-stack-showcase .tech-list span{ display: grid !important; grid-template-columns: 44px minmax(0, 1fr) !important; align-items: center !important; column-gap: 16px !important; min-height: 44px !important; font-size: 14px !important; line-height: 1.22 !important; white-space: normal !important; } #skills.tech-stack-showcase .tech-list span img{ width: 34px !important; height: 34px !important; justify-self: start !important; } #skills.tech-stack-showcase *, #skills.tech-stack-showcase *::before, #skills.tech-stack-showcase *::after{ border-radius: 0 !important; } #skills.tech-stack-showcase .tech-trust{ border-radius: 18px !important; } #skills.tech-stack-showcase .leadership-card{ border-radius: 18px !important; } #skills.tech-stack-showcase .leadership-list span{ border-radius: 14px !important; } #skills.tech-stack-showcase .tech-category{ border-radius: 18px !important; } #experience.experience .year-track::before, #experience.experience .year-track::after, #experience.experience .year-track span::before, #experience.experience .year-track span::after{ content: none !important; display: none !important; background: none !important; border: 0 !important; box-shadow: none !important; } [hidden], #github-activity[hidden]{ display: none !important; } html, body{ max-width: 100%; overflow-x: clip; } img, svg, video, canvas{ max-width: 100%; } main, section, div, article, aside, form, header, footer{ min-width: 0; } a, button, input, textarea, select{ min-width: 0; } .section-title, .hero h1, .about-text h2, .contact-info h2, .projects .section-head h2, .certifications.certs-hud .cert-copy h2, .services-hud .services-copy h2{ overflow-wrap: anywhere; } .section-description, .hero-copy, .hero-role, .job p, .skills-line, .project-card p, .service p, .testimonial-card p, .contact-detail, .footer p, .footer a{ overflow-wrap: anywhere; } .header{ grid-template-columns: minmax(260px, 500px) minmax(0, 1fr) auto !important; gap: clamp(16px, 2.2vw, 36px) !important; padding-inline: clamp(18px, 4vw, 92px) !important; } .brand{ gap: clamp(12px, 1.6vw, 24px) !important; } .brand img{ width: clamp(58px, 6vw, 88px) !important; height: clamp(58px, 6vw, 88px) !important; } .brand strong{ font-size: clamp(18px, 2vw, 28px) !important; } .brand small{ font-size: clamp(11px, 1vw, 13px) !important; } .nav{ gap: clamp(18px, 2.5vw, 48px) !important; font-size: clamp(14px, 1.4vw, 20px) !important; } .hero, .about, .why-work, .tech-stack-showcase, .services.services-hud, .projects, .testimonials, .certifications.certs-hud, #contact.contact{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: clamp(26px, 4vw, 64px) !important; } .stats{ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; } .info-grid, .why-work-grid, .service-grid, #services .service-grid, .project-grid, #projects .project-grid, .testimonial-grid, .cert-grid, .tech-category-grid{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important; } .tech-list.two-col, #skills.tech-stack-showcase .tech-list.two-col{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important; } .project-card:first-child, #projects .project-card:first-child{ grid-template-columns: minmax(0, 1fr) !important; } .project-card:first-child .project-image, #projects .project-card:first-child .project-image{ grid-row: auto !important; } .experience-scroll, #experience.experience .experience-scroll{ grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) !important; padding-inline: clamp(16px, 4vw, 56px) !important; } #experience.experience .experience-jobs>.job, .job{ grid-template-columns: minmax(0, 1fr) !important; padding-inline: clamp(18px, 3.4vw, 34px) !important; } .certifications.certs-hud .cert-grid, #certifications.certs-hud .cert-grid{ grid-auto-columns: minmax(220px, min(76vw, 280px)) !important; max-width: 100% !important; } .actions, .project-actions, .footer-socials, .socials{ flex-wrap: wrap; } .hud-button, .btn, .actions .btn, .hire-btn, .experience-toggle, .send-message, .footer-hire, .header-match-btn{ max-width: 100%; white-space: normal; } input, textarea, select{ width: 100%; max-width: 100%; } #experience.experience .experience-jobs>.job{ grid-template-columns: minmax(280px, .9fr) minmax(360px, 1.1fr) !important; grid-auto-flow: row !important; align-items: center !important; align-content: center !important; column-gap: clamp(28px, 3vw, 56px) !important; overflow: hidden !important; } #experience.experience .job .company-logo, #experience.experience .job h3, #experience.experience .job b, #experience.experience .job time, #experience.experience .job small, #experience.experience .job .skills-line, #experience.experience .job .job-proof{ grid-column: 1 !important; min-width: 0 !important; max-width: 100% !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; } #experience.experience .job .job-summary{ grid-column: 2 !important; grid-row: 1 / span 6 !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; align-self: center !important; justify-self: stretch !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; } #experience.experience .job .summary-link{ display: grid !important; grid-template-columns: minmax(96px, 128px) minmax(0, 1fr) !important; align-items: center !important; } #experience.experience .job .summary-link span{ min-width: 0 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; } #experience.experience .experience-copy::before, #experience.experience .experience-copy::after{ content: none !important; display: none !important; background: none !important; border: 0 !important; box-shadow: none !important; } #experience.experience .experience-copy, #experience.experience .experience-scroll, #experience.experience .year-track{ border-left: 0 !important; border-right: 0 !important; box-shadow: none !important; } #experience.experience .experience-scroll::before, #experience.experience .experience-scroll::after, #experience.experience .year-track::before, #experience.experience .year-track::after, #experience.experience .year-track span::before, #experience.experience .year-track span::after{ content: none !important; display: none !important; background: none !important; border: 0 !important; box-shadow: none !important; } @media (max-width: 1180px){ .hero, .about, .why-work, .tech-stack-showcase, .services.services-hud, .projects, .testimonials, .certifications.certs-hud, #contact.contact{ grid-template-columns: 1fr !important; } .skills-stage, .services-stage, .projects-stage, .testimonial-stage, .cert-stage, .contact-form, .contact-info{ grid-column: 1 !important; } .footer{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 900px){ :root{ --section-title-size: clamp(34px, 8vw, 46px); --section-subtitle-size: 16px; } .header{ min-height: 82px !important; height: auto !important; grid-template-columns: minmax(0, 1fr) auto !important; overflow: visible !important; padding-block: 10px !important; } .hire-btn{ display: none !important; } .menu-toggle{ display: inline-flex !important; justify-self: end !important; } .nav{ position: absolute !important; left: 12px !important; right: 12px !important; top: calc(100% + 8px) !important; z-index: 10001 !important; display: none !important; grid-template-columns: 1fr !important; gap: 0 !important; padding: 10px !important; border: 1px solid rgba(120, 184, 255, .22) !important; background: rgba(3, 10, 24, .98) !important; box-shadow: 0 18px 38px rgba(0, 0, 0, .42) !important; } .nav.open{ display: grid !important; } .nav a{ padding: 14px 12px !important; } .nav a::after{ bottom: 6px !important; } .hero{ min-height: auto !important; padding-block: clamp(40px, 8vw, 78px) !important; } .experience-scroll, #experience.experience .experience-scroll{ grid-template-columns: 1fr !important; } .year-track, #experience.experience .year-track{ display: none !important; } } @media (max-width: 700px){ :root{ --site-section-width: calc(100% - 20px); } .hero, .about, #experience.experience, .why-work, .tech-stack-showcase, .services.services-hud, .projects, .testimonials, .certifications.certs-hud, #contact.contact, .final-cta, .footer{ width: var(--site-section-width) !important; padding-inline: clamp(14px, 4vw, 22px) !important; } .section-title, .hero h1{ font-size: clamp(29px, 8.8vw, 34px) !important; line-height: 1.16 !important; } .section-label{ font-size: clamp(12px, 3.5vw, 15px) !important; } .hero-left, .hero-copy, .hero .section-divider, .actions, .socials{ width: 100% !important; max-width: min(100%, 340px) !important; } .hero .section-label{ max-width: min(100%, 340px) !important; gap: 8px !important; letter-spacing: .08em !important; } .hero .section-title, .hero h1{ max-width: min(100%, 340px) !important; } .hero-role{ display: flex !important; flex-wrap: wrap !important; gap: 6px 10px !important; font-size: clamp(17px, 5vw, 20px) !important; line-height: 1.35 !important; } .hero-copy{ font-size: 15px !important; } .actions, .project-actions{ display: grid !important; grid-template-columns: 1fr !important; } .actions .btn, .project-actions a, .project-view-all, .send-message, .footer-hire{ width: 100% !important; min-width: 0 !important; } .actions .hud-button, .actions .btn{ height: 56px !important; padding-inline: 22px !important; gap: 14px !important; justify-content: space-between !important; font-size: 15px !important; } .socials{ gap: 12px !important; } .socials a{ width: 56px !important; height: 56px !important; } .stats{ grid-template-columns: 1fr 1fr !important; padding-inline: 14px !important; } #skills.tech-stack-showcase .tech-category-grid, .tech-category-grid, .service-grid, #services .service-grid, .project-grid, #projects .project-grid, .testimonial-grid, .why-work-grid, .info-grid{ grid-template-columns: 1fr !important; } .certifications.certs-hud .cert-grid, #certifications.certs-hud .cert-grid{ grid-template-columns: 1fr !important; grid-auto-columns: auto !important; overflow-x: visible !important; gap: 22px !important; padding-top: 24px !important; } .certifications.certs-hud .cert-grid::before, #certifications.certs-hud .cert-grid::before, .certifications.certs-hud .cert-card time::before, .certifications.certs-hud .cert-card time::after{ display: none !important; } .certifications.certs-hud .cert-card time{ position: static !important; transform: none !important; margin-bottom: 14px !important; } .footer{ grid-template-columns: 1fr !important; } } @media (max-width: 420px){ .hero-left, .hero-copy, .hero .section-divider, .actions, .socials{ width: 100% !important; max-width: 100% !important; } .hero .section-title, .hero h1{ font-size: clamp(29px, 8.8vw, 34px) !important; line-height: 1.16 !important; } .hero .section-label{ gap: 8px !important; letter-spacing: .08em !important; } .hero-role{ font-size: clamp(17px, 5vw, 20px) !important; line-height: 1.35 !important; } .hero-copy{ font-size: 15px !important; } .actions .hud-button, .actions .btn{ width: 100% !important; min-width: 0 !important; height: 56px !important; padding-inline: 22px !important; gap: 14px !important; justify-content: space-between !important; font-size: 15px !important; } .brand span{ min-width: 0 !important; } .brand strong, .brand small{ white-space: normal !important; } .brand img{ width: 52px !important; height: 52px !important; } .hero, .about, #experience.experience, .why-work, .tech-stack-showcase, .services.services-hud, .projects, .testimonials, .certifications.certs-hud, #contact.contact, .final-cta, .footer{ width: calc(100% - 12px) !important; padding-inline: 12px !important; } .stats{ grid-template-columns: 1fr !important; } .section-trust, .experience-trust, .tech-trust, .services.services-hud .service-trust, .certifications.certs-hud .cert-trust, .testimonials .testimonial-trust, .why-work-trust, .projects-trust, .contact-detail, .footer-brand-head{ grid-template-columns: 1fr !important; } .section-trust img, .experience-trust-icon, .tech-trust .tech-trust-icon, .services.services-hud .service-trust-icon, .certifications.certs-hud .cert-trust-icon, .testimonials .testimonial-trust-icon, .why-work-trust-icon, .projects-trust-icon{ grid-column: auto !important; } } @media (max-width: 1180px){ #experience.experience .experience-jobs>.job{ grid-template-columns: 1fr !important; } #experience.experience .job .company-logo, #experience.experience .job h3, #experience.experience .job b, #experience.experience .job time, #experience.experience .job small, #experience.experience .job .skills-line, #experience.experience .job .job-proof, #experience.experience .job .job-summary{ grid-column: 1 !important; grid-row: auto !important; } } #experience.experience .experience-copy{ align-self: stretch !important; min-height: 0 !important; padding-block: clamp(58px, 6vw, 96px) !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; gap: 28px !important; } #experience.experience .experience-copy .section-label{ margin-bottom: clamp(46px, 5vw, 86px) !important; } #experience.experience .experience-copy .section-title{ margin: 0 !important; max-width: 440px !important; } #experience.experience .experience-copy .section-divider{ width: min(440px, 100%) !important; margin: 8px 0 18px !important; } #experience.experience .experience-copy .section-description{ max-width: 440px !important; margin: 0 !important; font-size: clamp(17px, 1.05vw, 21px) !important; line-height: 1.65 !important; } #experience.experience .experience-trust{ margin-top: auto !important; width: min(440px, 100%) !important; } #experience.experience .experience-scroll{ grid-template-columns: minmax(170px, 220px) minmax(0, 1fr) !important; gap: 28px clamp(28px, 3.8vw, 68px) !important; align-items: start !important; padding: clamp(36px, 4vw, 58px) clamp(24px, 4vw, 68px) clamp(40px, 4vw, 64px) !important; min-height: 0 !important; } #experience.experience .year-track, #experience.experience .experience-jobs, #experience.experience.is-collapsed .year-track, #experience.experience.is-collapsed .experience-jobs{ grid-template-rows: repeat(4, minmax(178px, auto)) !important; gap: clamp(24px, 2.2vw, 34px) !important; } #experience.experience .year-track{ padding-top: 8px !important; } #experience.experience .year-track span{ justify-content: flex-start !important; align-items: flex-start !important; height: auto !important; min-height: 178px !important; padding-top: 18px !important; color: var(--timeline-accent, #9fc8ff) !important; font-size: clamp(19px, 1.45vw, 27px) !important; letter-spacing: .03em !important; white-space: nowrap !important; } #experience.experience .experience-jobs>.job{ height: auto !important; min-height: 178px !important; padding: clamp(22px, 2vw, 30px) clamp(26px, 2.8vw, 44px) !important; grid-template-columns: minmax(280px, .86fr) minmax(360px, 1.14fr) !important; column-gap: clamp(34px, 4vw, 72px) !important; border-width: 1px !important; border-radius: 8px !important; overflow: hidden !important; } #experience.experience .experience-jobs>.job::before{ top: 34px !important; left: 18px !important; right: auto !important; width: 84px !important; height: 84px !important; opacity: .28 !important; } #experience.experience .company-logo{ width: 58px !important; height: 58px !important; } #experience.experience .job h3{ margin-bottom: 8px !important; font-size: clamp(22px, 1.45vw, 28px) !important; line-height: 1.08 !important; } #experience.experience .job b{ display: block !important; margin-bottom: 14px !important; font-size: clamp(14px, .85vw, 16px) !important; } #experience.experience .job time, #experience.experience .job small{ display: block !important; margin-bottom: 7px !important; font-size: clamp(11px, .75vw, 13px) !important; line-height: 1.35 !important; } #experience.experience .job .skills-line{ margin-top: 12px !important; } #experience.experience .job .job-summary{ min-height: 104px !important; padding: 18px 24px !important; border-radius: 4px !important; background: radial-gradient(circle at 8% 50%, rgba(var(--company-rgb), .1), transparent 34%), linear-gradient(90deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025)) !important; } #experience.experience .job .summary-link{ grid-template-columns: minmax(110px, 150px) minmax(0, 1fr) !important; gap: clamp(22px, 2.2vw, 36px) !important; } #experience.experience .job .summary-link img{ width: min(150px, 100%) !important; height: 72px !important; object-fit: contain !important; } #experience.experience .job .summary-link span{ font-size: clamp(13px, .9vw, 16px) !important; line-height: 1.35 !important; } #experience.experience .experience-toggle{ grid-column: 2 !important; justify-self: end !important; margin-top: 22px !important; width: min(260px, 100%) !important; } @media (max-width: 1180px){ #experience.experience .experience-copy{ padding-block: 0 !important; } #experience.experience .experience-copy .section-label{ margin-bottom: 18px !important; } #experience.experience .experience-trust{ margin-top: 10px !important; } #experience.experience .experience-scroll{ grid-template-columns: 1fr !important; padding-inline: clamp(16px, 4vw, 34px) !important; } #experience.experience .year-track{ display: none !important; } #experience.experience .experience-jobs, #experience.experience.is-collapsed .experience-jobs{ grid-template-rows: none !important; } #experience.experience .experience-jobs>.job{ grid-template-columns: 1fr !important; } #experience.experience .experience-toggle{ grid-column: 1 !important; } } #experience.experience .experience-scroll{ grid-template-columns: minmax(130px, 180px) minmax(0, 1fr) !important; gap: 22px clamp(24px, 3vw, 44px) !important; padding: 44px clamp(28px, 4vw, 58px) 54px !important; } #experience.experience .year-track, #experience.experience .experience-jobs, #experience.experience.is-collapsed .year-track, #experience.experience.is-collapsed .experience-jobs{ grid-template-rows: repeat(4, minmax(148px, auto)) !important; gap: 26px !important; } #experience.experience .year-track span{ min-height: 148px !important; padding-top: 20px !important; font-size: clamp(18px, 1.4vw, 24px) !important; line-height: 1.1 !important; } #experience.experience .experience-jobs>.job{ min-height: 148px !important; padding: 22px 28px !important; display: grid !important; grid-template-columns: 64px minmax(230px, .92fr) minmax(280px, .88fr) !important; grid-template-rows: auto auto auto auto !important; gap: 7px 22px !important; align-items: center !important; border-radius: 6px !important; } #experience.experience .company-logo{ grid-column: 1 !important; grid-row: 1 / span 4 !important; width: 52px !important; height: 52px !important; align-self: start !important; margin: 0 !important; } #experience.experience .job h3, #experience.experience .job b, #experience.experience .job time, #experience.experience .job small, #experience.experience .job .skills-line, #experience.experience .job .job-proof{ grid-column: 2 !important; margin-left: 0 !important; } #experience.experience .job h3{ grid-row: 1 !important; margin: 0 !important; font-size: clamp(20px, 1.15vw, 25px) !important; line-height: 1.1 !important; letter-spacing: .01em !important; } #experience.experience .job b{ grid-row: 2 !important; margin: 0 !important; font-size: 14px !important; line-height: 1.25 !important; } #experience.experience .job time{ grid-row: 3 !important; margin: 4px 0 0 !important; font-size: 12px !important; line-height: 1.3 !important; } #experience.experience .job small, #experience.experience .job .skills-line{ font-size: 12px !important; line-height: 1.3 !important; } #experience.experience .job small{ grid-row: 4 !important; margin: 0 !important; } #experience.experience .job .skills-line{ grid-row: 5 !important; width: fit-content !important; max-width: 100% !important; margin: 4px 0 0 !important; padding: 4px 10px !important; } #experience.experience .job .job-summary{ grid-column: 3 !important; grid-row: 1 / span 5 !important; min-height: 86px !important; padding: 14px 18px !important; align-self: center !important; } #experience.experience .job .summary-link{ grid-template-columns: 112px minmax(0, 1fr) !important; gap: 18px !important; } #experience.experience .job .summary-link img{ width: 112px !important; height: 58px !important; border-radius: 8px !important; } #experience.experience .job .summary-link span{ font-size: 13px !important; line-height: 1.35 !important; } #experience.experience .experience-toggle{ margin-top: 12px !important; } @media (max-width: 1180px){ #experience.experience .experience-scroll{ grid-template-columns: 1fr !important; } #experience.experience .experience-jobs>.job{ grid-template-columns: 56px minmax(0, 1fr) !important; } #experience.experience .job .job-summary{ grid-column: 1 / -1 !important; grid-row: auto !important; margin-top: 10px !important; } } @media (max-width: 700px){ #experience.experience .experience-jobs>.job{ grid-template-columns: 1fr !important; padding: 20px 16px !important; } #experience.experience .company-logo, #experience.experience .job h3, #experience.experience .job b, #experience.experience .job time, #experience.experience .job small, #experience.experience .job .skills-line, #experience.experience .job .job-summary{ grid-column: 1 !important; grid-row: auto !important; } } #experience.experience .year-track{ overflow: visible !important; } #experience.experience .year-track span{ position: relative !important; align-items: center !important; padding-top: 0 !important; padding-right: 18px !important; } #experience.experience .year-track span::before{ content: "" !important; display: block !important; position: absolute !important; top: 50% !important; left: calc(100% + 4px) !important; width: clamp(68px, 6vw, 112px) !important; height: 2px !important; border: 0 !important; border-radius: 999px !important; transform: translateY(-50%) !important; background: linear-gradient(90deg, currentColor 0%, color-mix(in srgb, currentColor 58%, transparent) 62%, transparent 100%) !important; box-shadow: 0 0 12px currentColor !important; opacity: .82 !important; } #experience.experience .year-track span::after{ content: "" !important; display: block !important; position: absolute !important; top: 50% !important; left: calc(100% + clamp(64px, 5.7vw, 106px)) !important; width: 14px !important; height: 14px !important; border: 2px solid currentColor !important; border-radius: 50% !important; background: rgba(4, 10, 22, .98) !important; box-shadow: 0 0 14px currentColor, inset 0 0 8px color-mix(in srgb, currentColor 45%, transparent) !important; opacity: .95 !important; transform: translateY(-50%) !important; } @media (max-width: 1180px){ #experience.experience .year-track span::before, #experience.experience .year-track span::after{ content: none !important; display: none !important; } } :root{ --professional-panel: rgba(5, 14, 28, .92); --professional-panel-soft: rgba(8, 20, 38, .78); --professional-line: rgba(148, 163, 184, .22); --professional-text: #f8fbff; --professional-muted: #b4c2d2; } body{ font-family: "Inter", "Segoe UI", system-ui, sans-serif !important; } .scanline, .trusted-map, .job-icon, .testimonial-rail, .testimonial-mark, .github-board::before, .github-board::after{ opacity: .18 !important; filter: none !important; } .header, .hero, .stats, .trusted-strip, .about, #experience.experience, .why-work, .tech-stack-showcase, .services.services-hud, .projects, .testimonials, .certifications.certs-hud, #contact.contact, .final-cta, .footer{ box-shadow: 0 18px 44px rgba(0, 0, 0, .28) !important; } .header{ height: 86px !important; grid-template-columns: minmax(260px, 380px) 1fr 150px !important; padding: 0 clamp(18px, 4vw, 64px) !important; background: rgba(3, 10, 22, .9) !important; border-bottom: 1px solid var(--professional-line) !important; } .brand img{ width: 58px !important; height: 58px !important; filter: none !important; } .brand strong{ font-family: "Inter", "Segoe UI", system-ui, sans-serif !important; font-size: clamp(16px, 1.4vw, 22px) !important; letter-spacing: 0 !important; text-transform: none !important; } .brand small, .nav a, .section-label, .hero-role, .section-description, .hero-copy, .job time, .job small, .skills-line, .project-proof span, .cert-card p, .testimonial-card p{ } .brand small{ letter-spacing: .04em !important; font-family: "Inter", "Segoe UI", system-ui, sans-serif !important; } .nav{ gap: clamp(18px, 2.4vw, 34px) !important; font-size: 15px !important; justify-content: flex-end !important; } .hire-btn, .actions .btn, .project-actions a, .project-view-all, .send-message, .footer-hire, .hud-action{ filter: none !important; border-radius: 999px !important; clip-path: none !important; } .hire-btn::before, .hire-btn::after, .actions .btn::before, .actions .btn::after, .project-view-all::before, .project-view-all::after, .footer-hire::before, .footer-hire::after{ border-radius: inherit !important; clip-path: inherit !important; } .hero{ min-height: auto !important; padding: clamp(76px, 8vw, 132px) clamp(20px, 6vw, 110px) clamp(70px, 7vw, 110px) !important; grid-template-columns: minmax(0, .95fr) minmax(360px, .8fr) !important; gap: clamp(34px, 5vw, 84px) !important; } .hero h1, .section-title{ font-family: "Inter", "Segoe UI", system-ui, sans-serif !important; font-size: clamp(40px, 5vw, 76px) !important; line-height: 1.03 !important; letter-spacing: -.04em !important; text-transform: none !important; } .hero h1{ max-width: 880px !important; } .section-title{ max-width: 920px !important; } .hero-role{ color: #dbeafe !important; font-size: clamp(18px, 1.6vw, 24px) !important; line-height: 1.35 !important; } .hero-copy, .section-description{ color: var(--professional-muted) !important; font-size: clamp(17px, 1.25vw, 21px) !important; line-height: 1.72 !important; font-weight: 500 !important; } .section-label{ color: #8fc7ff !important; font-family: "Inter", "Segoe UI", system-ui, sans-serif !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: .1em !important; margin: 0 !important; } .stats{ width: min(1320px, calc(100% - 40px)) !important; min-height: 132px !important; padding: 22px clamp(18px, 4vw, 56px) !important; border-radius: 28px !important; clip-path: none !important; border: 1px solid var(--professional-line) !important; } .stat{ grid-template-columns: 54px minmax(0, auto) !important; } .stat strong{ font-size: clamp(26px, 3vw, 42px) !important; } .stat small{ color: var(--professional-muted) !important; font-size: 14px !important; } .trusted-company-card, .info-grid article, .why-work-card, .tech-category, .service, .project-card, .testimonial-card, .cert-card, .github-activity, .contact-detail{ border: 1px solid var(--professional-line) !important; border-radius: 20px !important; clip-path: none !important; background: linear-gradient(145deg, var(--professional-panel), var(--professional-panel-soft)) !important; box-shadow: 0 16px 36px rgba(0, 0, 0, .22) !important; } .project-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(20px, 2.2vw, 32px) !important; } .project-card{ min-height: 0 !important; padding: clamp(24px, 2.4vw, 36px) !important; } .project-card h3{ font-size: clamp(24px, 2.1vw, 34px) !important; line-height: 1.1 !important; letter-spacing: -.02em !important; } .project-card p{ color: var(--professional-muted) !important; font-size: 16px !important; line-height: 1.65 !important; } .project-proof{ display: grid !important; grid-template-columns: minmax(92px, .28fr) minmax(0, 1fr) !important; gap: 10px 16px !important; margin-top: 22px !important; padding: 18px !important; border: 1px solid rgba(148, 163, 184, .16) !important; border-radius: 16px !important; background: rgba(255, 255, 255, .035) !important; } .project-proof b{ color: #f8fbff !important; font-size: 13px !important; text-transform: uppercase !important; letter-spacing: .06em !important; } .project-proof span{ color: #c9d6e5 !important; font-size: 14px !important; line-height: 1.5 !important; } .project-image{ min-height: 126px !important; border-radius: 18px !important; box-shadow: none !important; } .cert-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; } .cert-card h3{ font-size: clamp(20px, 1.5vw, 26px) !important; line-height: 1.18 !important; } .testimonial-card p{ font-size: clamp(16px, 1.1vw, 19px) !important; line-height: 1.65 !important; } @media (max-width: 1180px){ .hero, .project-grid, .cert-grid{ grid-template-columns: 1fr !important; } } #experience.experience .experience-scroll{ --experience-year-col: clamp(180px, 15vw, 260px); --experience-card-gap: clamp(34px, 3vw, 54px); --experience-row-gap: clamp(22px, 2.4vw, 34px); --experience-node-size: 22px; display: grid !important; grid-template-columns: var(--experience-year-col) minmax(0, 1fr) !important; column-gap: var(--experience-card-gap) !important; row-gap: var(--experience-row-gap) !important; align-items: stretch !important; padding: clamp(34px, 4vw, 58px) clamp(18px, 4vw, 58px) clamp(42px, 4vw, 64px) !important; } #experience.experience .year-track, #experience.experience .experience-jobs, #experience.experience.is-collapsed .year-track, #experience.experience.is-collapsed .experience-jobs{ display: contents !important; } #experience.experience .year-track::before, #experience.experience .year-track::after, #experience.experience .experience-scroll::before, #experience.experience .experience-scroll::after{ content: none !important; display: none !important; } #experience.experience .year-track span, #experience.experience .experience-jobs > .job{ height: auto !important; min-height: clamp(168px, 14vw, 218px) !important; align-self: stretch !important; } #experience.experience .year-track span{ grid-column: 1 !important; position: relative !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; padding: 0 calc(var(--experience-node-size) + 16px) 0 0 !important; margin: 0 !important; transform: none !important; overflow: visible !important; line-height: 1.1 !important; } #experience.experience .experience-jobs > .job{ grid-column: 2 !important; margin: 0 !important; overflow: hidden !important; } #experience.experience .experience-toggle{ grid-column: 2 !important; justify-self: end !important; } #experience.experience .year-track span:nth-child(1), #experience.experience .experience-jobs > .job:nth-child(6){ grid-row: 1 !important; } #experience.experience .year-track span:nth-child(2), #experience.experience .experience-jobs > .job:nth-child(5){ grid-row: 2 !important; } #experience.experience .year-track span:nth-child(3), #experience.experience .experience-jobs > .job:nth-child(4){ grid-row: 3 !important; } #experience.experience .year-track span:nth-child(4), #experience.experience .experience-jobs > .job:nth-child(3){ grid-row: 4 !important; } #experience.experience .year-track span:nth-child(5), #experience.experience .experience-jobs > .job:nth-child(2){ grid-row: 5 !important; } #experience.experience .year-track span:nth-child(6), #experience.experience .experience-jobs > .job:nth-child(1){ grid-row: 6 !important; } #experience.experience .year-track span::before{ content: "" !important; display: block !important; position: absolute !important; top: 50% !important; left: calc(100% - var(--experience-node-size) - 8px) !important; width: calc(var(--experience-card-gap) + var(--experience-node-size) + 16px) !important; height: 2px !important; border: 0 !important; border-radius: 999px !important; transform: translateY(-50%) !important; background: linear-gradient(90deg, currentColor, color-mix(in srgb, currentColor 58%, transparent) 72%, transparent) !important; box-shadow: none !important; opacity: .86 !important; z-index: 2 !important; } #experience.experience .year-track span::after{ content: "" !important; display: block !important; position: absolute !important; top: 50% !important; left: calc(100% + var(--experience-card-gap) - (var(--experience-node-size) / 2)) !important; width: var(--experience-node-size) !important; height: var(--experience-node-size) !important; border: 2px solid currentColor !important; border-radius: 50% !important; background: #071225 !important; box-shadow: 0 0 14px color-mix(in srgb, currentColor 55%, transparent) !important; transform: translateY(-50%) !important; opacity: 1 !important; z-index: 4 !important; } @media (max-width: 1180px){ #experience.experience .experience-scroll{ grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) !important; column-gap: 28px !important; } } @media (max-width: 760px){ #experience.experience .experience-scroll{ display: block !important; } #experience.experience .year-track, #experience.experience .year-track span, #experience.experience .year-track span::before, #experience.experience .year-track span::after{ display: none !important; content: none !important; } #experience.experience .experience-jobs{ display: grid !important; gap: 18px !important; } } :root{ --page-heading-size: clamp(38px, 4.1vw, 60px); --page-heading-line: 1.08; --page-heading-weight: 850; --page-heading-letter: -0.035em; } .section-title, .hero .section-title, .hero h1, .trusted-eyebrow, .about-text h2, .experience-copy .section-title, #experience.experience .experience-copy .section-title, .tech-hero-copy h2, .services-copy .section-title, .projects .section-title, .testimonial-copy .section-title, .cert-copy .section-title, .final-cta .section-title, .contact-info h2, .footer-cta-title{ font-family: "Inter", "Segoe UI", system-ui, sans-serif !important; font-size: var(--page-heading-size) !important; line-height: var(--page-heading-line) !important; font-weight: var(--page-heading-weight) !important; letter-spacing: var(--page-heading-letter) !important; text-transform: none !important; margin-top: 0 !important; max-width: 980px !important; } .section-title span, .hero .section-title span, .hero h1 span, .trusted-eyebrow span, .about-text h2 span, .experience-copy .section-title span, #experience.experience .experience-copy .section-title span, .tech-hero-copy h2 span, .services-copy .section-title span, .projects .section-title span, .testimonial-copy .section-title span, .cert-copy .section-title span, .final-cta .section-title span, .contact-info h2 span, .footer-cta-title span{ display: inline !important; font: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; } @media (max-width: 760px){ :root{ --page-heading-size: clamp(31px, 9vw, 42px); } } main .section-label, .hero .section-label, .trusted-strip .section-label, .about .section-label, #experience.experience .section-label, #experience.experience .experience-copy .section-label, #why-work-with-me .section-label, #skills.tech-stack-showcase .section-label, #services.services-hud .section-label, #projects.projects .section-label, #testimonials.testimonials .section-label, #certifications.certs-hud .section-label, #github-activity.github-activity .section-label, #contact.contact .section-label, .final-cta .section-label, .footer .section-label{ margin: 0 !important; } #services.services-hud .services-copy, #projects.projects .projects-copy, #testimonials.testimonials .testimonial-copy, #certifications.certs-hud .cert-copy{ border: 0 !important; border-left: 0 !important; border-right: 0 !important; box-shadow: none !important; } #services.services-hud .services-copy::before, #services.services-hud .services-copy::after, #projects.projects .projects-copy::before, #projects.projects .projects-copy::after, #testimonials.testimonials .testimonial-copy::before, #testimonials.testimonials .testimonial-copy::after, #certifications.certs-hud .cert-copy::before, #certifications.certs-hud .cert-copy::after{ content: none !important; display: none !important; border: 0 !important; box-shadow: none !important; } .hud-button, a.hud-button, button.hud-button, .actions .hud-button, .actions .btn, .hire-btn, .experience-toggle, .project-view-all, .hud-action, .footer-hire, .header-match-btn{ width: auto !important; min-width: 156px !important; height: 48px !important; min-height: 48px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; padding: 0 20px !important; border: 0 !important; border-radius: 999px !important; clip-path: none !important; isolation: isolate !important; position: relative !important; overflow: hidden !important; background: radial-gradient(circle at 62% 42%, rgba(255, 255, 255, .28), transparent 24%), linear-gradient(100deg, #5f7cff 0%, #677fff 33%, #d59b55 67%, #f3c45d 100%) !important; box-shadow: inset 0 0 0 4px rgba(125, 145, 255, .55), inset 0 0 28px rgba(255, 255, 255, .16), 0 14px 28px rgba(0, 0, 0, .34) !important; color: #fff !important; font-family: "Inter", "Segoe UI", system-ui, sans-serif !important; font-size: clamp(13px, .9vw, 17px) !important; font-weight: 900 !important; letter-spacing: .055em !important; line-height: 1 !important; text-transform: uppercase !important; white-space: nowrap !important; filter: none !important; transform: none !important; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important; } .hud-button::before, .hud-button::after, .actions .btn::before, .actions .btn::after, .hire-btn::before, .hire-btn::after, .experience-toggle::before, .experience-toggle::after, .project-view-all::before, .project-view-all::after, .hud-action::before, .hud-action::after, .footer-hire::before, .footer-hire::after, .header-match-btn::before, .header-match-btn::after{ content: none !important; display: none !important; } .hud-button:hover, .hud-button:focus-visible, .actions .btn:hover, .actions .btn:focus-visible, .hire-btn:hover, .hire-btn:focus-visible, .experience-toggle:hover, .experience-toggle:focus-visible, .project-view-all:hover, .project-view-all:focus-visible, .hud-action:hover, .hud-action:focus-visible, .footer-hire:hover, .footer-hire:focus-visible, .header-match-btn:hover, .header-match-btn:focus-visible{ transform: translateY(-1px) !important; outline: none !important; box-shadow: inset 0 0 0 4px rgba(125, 145, 255, .62), inset 0 0 30px rgba(255, 255, 255, .2), 0 18px 34px rgba(0, 0, 0, .38) !important; } .hud-button .iconify-ui-icon, .actions .btn .iconify-ui-icon, .hire-btn .iconify-ui-icon, .experience-toggle .iconify-ui-icon, .project-view-all .iconify-ui-icon, .hud-action .iconify-ui-icon, .footer-hire .iconify-ui-icon, .header-match-btn .iconify-ui-icon, .hud-button svg, .hud-button i, .hud-button b{ width: 24px !important; height: 24px !important; min-width: 24px !important; color: #ffe62e !important; font-size: 0 !important; line-height: 1 !important; filter: brightness(0) saturate(100%) invert(89%) sepia(94%) saturate(1094%) hue-rotate(339deg) brightness(103%) contrast(103%) !important; } .hire-btn{ justify-self: end !important; min-width: 156px !important; } .actions{ align-items: center !important; } @media (max-width: 760px){ .hud-button, a.hud-button, button.hud-button, .actions .hud-button, .actions .btn, .experience-toggle, .project-view-all, .hud-action, .footer-hire, .header-match-btn{ width: 100% !important; min-width: 0 !important; height: 60px !important; min-height: 60px !important; padding: 0 26px !important; font-size: 18px !important; } } .header .nav{ justify-content: flex-end !important; margin-left: auto !important; } #services.services-hud{ grid-template-columns: minmax(420px, 520px) minmax(0, 1fr) !important; gap: clamp(28px, 3.2vw, 54px) !important; } #services.services-hud .services-stage{ min-width: 0 !important; padding: clamp(36px, 4vw, 58px) clamp(18px, 2.4vw, 34px) !important; } #services.services-hud .service-grid, #services .service-grid{ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(18px, 1.6vw, 26px) !important; } #services.services-hud .service{ min-width: 0 !important; padding: clamp(22px, 2vw, 30px) clamp(20px, 1.8vw, 28px) !important; } @media (max-width: 1280px){ #services.services-hud .service-grid, #services .service-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 760px){ #services.services-hud .service-grid, #services .service-grid{ grid-template-columns: 1fr !important; } } #projects .project-card{ border: 1px solid color-mix(in srgb, var(--project-accent, #5aa8ff) 48%, rgba(255, 255, 255, .08)) !important; border-radius: 14px !important; background: linear-gradient(135deg, color-mix(in srgb, var(--project-accent, #5aa8ff) 10%, transparent), transparent 34%), linear-gradient(180deg, rgba(8, 18, 40, .9), rgba(2, 7, 18, .96)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 48px rgba(255, 255, 255, .025), 0 22px 44px rgba(0, 0, 0, .32) !important; } #projects .project-card:hover{ transform: translateY(-4px) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 52px color-mix(in srgb, var(--project-accent, #5aa8ff) 9%, transparent), 0 28px 54px rgba(0, 0, 0, .4), 0 0 28px color-mix(in srgb, var(--project-accent, #5aa8ff) 20%, transparent) !important; } #projects .project-card::before{ opacity: .38 !important; background: radial-gradient(circle at 16% 14%, color-mix(in srgb, var(--project-accent, #5aa8ff) 22%, transparent), transparent 18%), linear-gradient(90deg, color-mix(in srgb, var(--project-accent, #5aa8ff) 44%, transparent), transparent 36%) !important; } #projects .project-image{ border-radius: 12px !important; border: 1px solid color-mix(in srgb, var(--project-accent, #5aa8ff) 42%, rgba(255, 255, 255, .08)) !important; background-blend-mode: screen, normal, normal, normal !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -44px 70px rgba(0, 0, 0, .42), 0 16px 34px rgba(0, 0, 0, .34) !important; } #projects .project-image::after{ content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px) !important; background-size: 42px 42px !important; opacity: .22 !important; } #projects .project-image span{ z-index: 2 !important; padding: 8px 18px !important; border-radius: 999px !important; border: 1px solid color-mix(in srgb, var(--project-accent, #5aa8ff) 52%, rgba(255, 255, 255, .14)) !important; background: rgba(5, 15, 34, .82) !important; box-shadow: 0 0 22px color-mix(in srgb, var(--project-accent, #5aa8ff) 22%, transparent) !important; color: #f5f9ff !important; font-size: 12px !important; letter-spacing: .03em !important; } #projects .project-card h3{ color: #f8fbff !important; } #projects .project-card p{ color: rgba(226, 235, 249, .86) !important; } #projects .tags span{ border-radius: 8px !important; border: 1px solid color-mix(in srgb, var(--project-accent, #5aa8ff) 42%, rgba(255, 255, 255, .08)) !important; background: color-mix(in srgb, var(--project-accent, #5aa8ff) 14%, rgba(255, 255, 255, .035)) !important; color: #eaf4ff !important; font-weight: 800 !important; } #projects .project-proof{ border: 1px solid color-mix(in srgb, var(--project-accent, #5aa8ff) 24%, rgba(255, 255, 255, .08)) !important; border-radius: 12px !important; background: linear-gradient(135deg, color-mix(in srgb, var(--project-accent, #5aa8ff) 9%, transparent), transparent 42%), rgba(255, 255, 255, .035) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important; } #projects .project-proof b{ color: color-mix(in srgb, var(--project-accent, #5aa8ff) 74%, #ffffff) !important; letter-spacing: .04em !important; } #projects .project-proof span{ color: rgba(231, 239, 252, .9) !important; } #projects .project-actions a{ border-radius: 999px !important; border: 1px solid color-mix(in srgb, var(--project-accent, #5aa8ff) 48%, rgba(255, 255, 255, .1)) !important; background: rgba(7, 17, 38, .82) !important; color: #f5f9ff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important; } #projects .project-actions a:hover{ background: color-mix(in srgb, var(--project-accent, #5aa8ff) 18%, rgba(7, 17, 38, .82)) !important; } #projects .project-grid{ grid-template-columns: repeat(3, minmax(220px, 1fr)) !important; align-items: stretch !important; } #projects .project-card, #projects .project-card:first-child{ grid-column: auto !important; display: flex !important; flex-direction: column !important; min-height: 620px !important; padding: 0 0 22px !important; } #projects .project-card:first-child::before{ content: "" !important; top: auto !important; left: auto !important; } #projects .project-card:first-child .project-image, #projects .project-card .project-image{ grid-row: auto !important; width: auto !important; height: 190px !important; min-height: 190px !important; margin: 22px 22px 0 !important; } #projects .project-card:first-child h3, #projects .project-card h3{ min-height: 68px !important; margin: 22px 0 8px !important; font-size: clamp(22px, 1.42vw, 28px) !important; } #projects .project-card:first-child p, #projects .project-card p{ min-height: 70px !important; } #projects .project-proof{ margin-top: 18px !important; } #projects .project-actions{ margin-top: auto !important; padding-top: 18px !important; } @media (max-width: 1180px){ #projects .project-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 760px){ #projects .project-grid{ grid-template-columns: 1fr !important; } #projects .project-card, #projects .project-card:first-child{ min-height: 0 !important; } } #testimonials .testimonial-grid{ align-items: stretch !important; gap: clamp(20px, 2vw, 32px) !important; } #testimonials .testimonial-card{ --testimonial-accent: #67bdff; position: relative !important; min-height: 360px !important; padding: 32px 30px 28px 34px !important; display: flex !important; flex-direction: column !important; gap: 22px !important; border: 1px solid color-mix(in srgb, var(--testimonial-accent) 42%, rgba(255, 255, 255, .08)) !important; border-radius: 16px !important; background: linear-gradient(90deg, color-mix(in srgb, var(--testimonial-accent) 20%, transparent) 0 5px, transparent 5px), radial-gradient(circle at 14% 12%, color-mix(in srgb, var(--testimonial-accent) 20%, transparent), transparent 22%), linear-gradient(145deg, rgba(12, 24, 48, .9), rgba(4, 8, 22, .96)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 22px 44px rgba(0, 0, 0, .28) !important; overflow: hidden !important; } #testimonials .testimonial-card.orange-border{ --testimonial-accent: #f0b65b; } #testimonials .testimonial-card.purple-border{ --testimonial-accent: #b38aff; } #testimonials .testimonial-card::before{ content: "" !important; position: absolute !important; right: -62px !important; top: -62px !important; width: 176px !important; height: 176px !important; border-radius: 50% !important; background: radial-gradient(circle, color-mix(in srgb, var(--testimonial-accent) 20%, transparent), transparent 68%) !important; opacity: .82 !important; pointer-events: none !important; } #testimonials .testimonial-card::after{ content: "" !important; position: absolute !important; inset: 18px !important; border-radius: 12px !important; border: 1px solid rgba(255, 255, 255, .045) !important; pointer-events: none !important; } #testimonials .testimonial-top{ position: relative !important; z-index: 2 !important; display: grid !important; grid-template-columns: 58px minmax(0, 1fr) !important; gap: 18px !important; align-items: center !important; } #testimonials .testimonial-icon{ width: 58px !important; height: 58px !important; border-radius: 14px !important; display: grid !important; place-items: center !important; background: linear-gradient(145deg, color-mix(in srgb, var(--testimonial-accent) 34%, rgba(255, 255, 255, .08)), rgba(255, 255, 255, .05)) !important; border: 1px solid color-mix(in srgb, var(--testimonial-accent) 42%, rgba(255, 255, 255, .12)) !important; box-shadow: 0 0 22px color-mix(in srgb, var(--testimonial-accent) 22%, transparent) !important; } #testimonials .testimonial-icon img{ width: 26px !important; height: 26px !important; } #testimonials .testimonial-top b{ color: #f8fbff !important; font-size: clamp(22px, 1.55vw, 30px) !important; line-height: 1.05 !important; letter-spacing: -.02em !important; } #testimonials .testimonial-top small{ margin-top: 6px !important; color: color-mix(in srgb, var(--testimonial-accent) 72%, #ffffff) !important; letter-spacing: .11em !important; } #testimonials .testimonial-card p{ position: relative !important; z-index: 2 !important; margin: 0 !important; color: rgba(228, 236, 248, .88) !important; font-size: 18px !important; line-height: 1.55 !important; font-weight: 750 !important; } #testimonials .testimonial-proof{ position: relative !important; z-index: 2 !important; margin: auto 0 0 !important; padding: 16px 18px !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; border: 1px solid color-mix(in srgb, var(--testimonial-accent) 26%, rgba(255, 255, 255, .08)) !important; border-radius: 12px !important; background: rgba(2, 9, 24, .58) !important; } #testimonials .testimonial-proof span, #testimonials .testimonial-proof strong{ margin: 0 !important; color: rgba(239, 246, 255, .9) !important; font-size: 13px !important; line-height: 1.25 !important; letter-spacing: .04em !important; text-transform: uppercase !important; } #testimonials .testimonial-proof strong{ color: color-mix(in srgb, var(--testimonial-accent) 76%, #ffffff) !important; } #testimonials .testimonial-meta{ position: relative !important; z-index: 2 !important; margin: 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 10px !important; } #testimonials .testimonial-meta span{ min-height: 36px !important; padding: 0 14px !important; display: inline-flex !important; align-items: center !important; border: 1px solid color-mix(in srgb, var(--testimonial-accent) 34%, rgba(255, 255, 255, .08)) !important; border-radius: 0 !important; background: color-mix(in srgb, var(--testimonial-accent) 12%, rgba(255, 255, 255, .035)) !important; color: color-mix(in srgb, var(--testimonial-accent) 78%, #ffffff) !important; font-size: 12px !important; font-weight: 900 !important; letter-spacing: .06em !important; } @media (max-width: 760px){ #testimonials .testimonial-card{ min-height: 0 !important; padding: 26px 22px !important; } #testimonials .testimonial-proof{ grid-template-columns: 1fr !important; } } #certifications.certs-hud .cert-stage{ overflow-x: auto !important; overflow-y: hidden !important; padding-bottom: 34px !important; scrollbar-width: thin !important; scrollbar-color: rgba(122, 183, 255, .85) rgba(7, 18, 40, .74) !important; } #certifications.certs-hud .cert-stage::-webkit-scrollbar{ height: 12px !important; } #certifications.certs-hud .cert-stage::-webkit-scrollbar-track{ border-radius: 999px !important; background: rgba(7, 18, 40, .74) !important; box-shadow: inset 0 0 0 1px rgba(122, 183, 255, .16) !important; } #certifications.certs-hud .cert-stage::-webkit-scrollbar-thumb{ border-radius: 999px !important; border: 3px solid rgba(7, 18, 40, .74) !important; background: linear-gradient(90deg, #6f86ff, #46d9ff, #ffb34f) !important; } #certifications.certs-hud .cert-grid, .certifications.certs-hud .cert-grid{ --cert-scroll-gap: clamp(24px, 2.4vw, 40px); width: max-content !important; min-width: 100% !important; display: grid !important; grid-auto-flow: column !important; grid-auto-columns: calc((100% - (var(--cert-scroll-gap) * 3)) / 3.5) !important; grid-template-columns: none !important; gap: var(--cert-scroll-gap) !important; align-items: stretch !important; padding: 96px clamp(14px, 2vw, 28px) 18px !important; } #certifications.certs-hud .cert-card{ width: 100% !important; min-width: 0 !important; min-height: clamp(430px, 45vh, 560px) !important; padding-top: clamp(46px, 4vw, 64px) !important; padding-bottom: clamp(34px, 3vw, 48px) !important; justify-content: center !important; } #certifications.certs-hud .cert-icon, #certifications.certs-hud .cert-icon-img{ margin-bottom: clamp(24px, 2.8vw, 38px) !important; } #certifications.certs-hud .cert-card h3{ margin-bottom: clamp(22px, 2vw, 32px) !important; } #certifications.certs-hud .cert-card p{ margin-bottom: clamp(18px, 2vw, 28px) !important; } #certifications.certs-hud .cert-meta{ margin-top: clamp(18px, 2vw, 28px) !important; } #certifications.certs-hud .cert-card a{ margin-top: clamp(28px, 3vw, 42px) !important; } @media (max-width: 760px){ #certifications.certs-hud .cert-grid, .certifications.certs-hud .cert-grid{ grid-auto-columns: minmax(280px, 86vw) !important; padding: 88px 4px 18px !important; } #certifications.certs-hud .cert-card{ min-height: 420px !important; } } #certifications.section.certifications.border-frame.certs-hud, #certifications.certs-hud{ border: 0 !important; border-radius: 0 !important; clip-path: none !important; box-shadow: none !important; } #certifications.section.certifications.border-frame.certs-hud::before, #certifications.section.certifications.border-frame.certs-hud::after, #certifications.certs-hud::before, #certifications.certs-hud::after{ content: none !important; display: none !important; } #testimonials.section.testimonials.border-frame, #testimonials.testimonials{ border: 0 !important; border-radius: 0 !important; clip-path: none !important; box-shadow: none !important; } #testimonials.section.testimonials.border-frame::before, #testimonials.section.testimonials.border-frame::after, #testimonials.testimonials::before, #testimonials.testimonials::after{ content: none !important; display: none !important; } #projects.section.projects.border-frame, #projects.projects{ border: 0 !important; border-radius: 0 !important; clip-path: none !important; box-shadow: none !important; } #projects.section.projects.border-frame::before, #projects.section.projects.border-frame::after, #projects.projects::before, #projects.projects::after{ content: none !important; display: none !important; } #services.section.services.border-frame.services-hud, #services.services-hud{ clip-path: none !important; } :root{ --type-12: 12px; --type-16: 16px; --type-20: 20px; --type-24: 24px; --type-28: 28px; --type-32: 32px; --page-heading-size: var(--type-32) !important; --section-title-size: var(--type-32) !important; --section-kicker-size: var(--type-12) !important; --section-subtitle-size: var(--type-16) !important; --fs-xs: var(--type-12) !important; --fs-sm: var(--type-12) !important; --fs-md: var(--type-16) !important; --fs-lg: var(--type-20) !important; --fs-xl: var(--type-24) !important; --fs-2xl: var(--type-28) !important; --fs-3xl: var(--type-32) !important; } body, .header, .section-description, .hero p, .about p, .experience p, .why-work p, .tech-stack-showcase p, .services p, .projects p, .testimonials p, .certifications p, .contact p, .footer p, .footer a, .footer b, .footer small, .footer span, .stats, .service p, .project-card p, .testimonial-card p, .cert-card p, .cert-card h3, .cert-card small, .project-proof, .testimonial-proof, .contact-detail, .contact-form input, .contact-form textarea{ font-size: var(--type-16) !important; } .nav a, .hud-button, a.hud-button, button.hud-button, .actions .btn, .hire-btn, .section-label, .tags span, .project-actions a, .cert-meta span, .testimonial-meta span, .cert-card time, .form-status, small{ font-size: var(--type-12) !important; } .hero .role, .hero .subtitle, .about-text h3, .experience-card h3, .why-work-card b, .tech-category h3, .contact-detail b, .footer-brand strong{ font-size: var(--type-20) !important; } .section-title, .hero h1, .hero .section-title, .about-text h2, .experience-copy .section-title, #experience.experience .experience-copy .section-title, .tech-hero-copy h2, .services-copy .section-title, .projects .section-title, .testimonial-copy .section-title, .cert-copy .section-title, .contact-info h2, .final-cta .section-title, .footer-cta-title{ font-size: var(--type-32) !important; } .service h3, #services.services-hud .service h3, .project-card h3, #projects .project-card h3, .testimonial-card b, #testimonials .testimonial-top b, .cert-card h3, #certifications.certs-hud .cert-card h3{ font-size: var(--type-24) !important; } .hero-title, .hero h1{ font-size: var(--type-32) !important; } .stats b, .metric b, .service small, .timeline-year, .job-year{ font-size: var(--type-28) !important; } @media (max-width: 760px){ :root{ --page-heading-size: var(--type-32) !important; } .hud-button, a.hud-button, button.hud-button, .actions .btn, .hire-btn, .footer-hire{ font-size: var(--type-12) !important; } } :root{ --icon-xs: 16px; --icon-sm: 20px; --icon-md: 28px; --icon-lg: 44px; --card-pad-sm: 18px; --card-pad-md: 24px; --card-pad-lg: 30px; } .section-label-icon, .credential-badge-icon, .iconify-ui-icon{ width: var(--icon-sm) !important; height: var(--icon-sm) !important; } .nav-logo img, .footer-brand-head img{ width: 38px !important; height: 38px !important; } .socials a, .footer-socials a, .contact-detail-icon, .stat-icon, .metric-icon{ width: 44px !important; height: 44px !important; min-width: 44px !important; } .socials a .iconify-ui-icon, .footer-socials a .iconify-ui-icon, .contact-detail-icon .iconify-ui-icon, .stat-icon .iconify-ui-icon, .metric-icon .iconify-ui-icon{ width: var(--icon-md) !important; height: var(--icon-md) !important; } .service, #services.services-hud .service, .project-card, #projects .project-card, .testimonial-card, #testimonials .testimonial-card, .cert-card, #certifications.certs-hud .cert-card, .why-work-card, .tech-category, .job, .portfolio-card, .contact-detail{ padding: var(--card-pad-md) !important; } #services.services-hud .service{ min-height: 430px !important; } #projects .project-card, #projects .project-card:first-child{ min-height: 560px !important; } #testimonials .testimonial-card{ min-height: 320px !important; } #certifications.certs-hud .cert-card{ min-height: clamp(390px, 40vh, 500px) !important; padding: var(--card-pad-lg) var(--card-pad-md) var(--card-pad-md) !important; } #services.services-hud .service>span, #certifications.certs-hud .cert-icon, #certifications.certs-hud .cert-icon-img, #testimonials .testimonial-icon{ width: var(--icon-lg) !important; height: var(--icon-lg) !important; min-width: var(--icon-lg) !important; } #services.services-hud .service>span svg, #services.services-hud .service>span img, #certifications.certs-hud .cert-icon-img img, #testimonials .testimonial-icon img{ width: var(--icon-md) !important; height: var(--icon-md) !important; } #projects .project-image, #projects .project-card:first-child .project-image, #projects .project-card .project-image{ height: 160px !important; min-height: 160px !important; margin: 18px 18px 0 !important; } #projects .project-proof, #testimonials .testimonial-proof{ padding: 14px 16px !important; } .hud-button, a.hud-button, button.hud-button, .actions .btn, .hire-btn, .experience-toggle, .project-view-all, .hud-action, .footer-hire, .header-match-btn{ min-width: 136px !important; height: 42px !important; min-height: 42px !important; padding: 0 18px !important; gap: 10px !important; } .hud-button .iconify-ui-icon, a.hud-button .iconify-ui-icon, button.hud-button .iconify-ui-icon{ width: var(--icon-sm) !important; height: var(--icon-sm) !important; min-width: var(--icon-sm) !important; } @media (max-width: 760px){ .service, #services.services-hud .service, .project-card, #projects .project-card, .testimonial-card, #testimonials .testimonial-card, .cert-card, #certifications.certs-hud .cert-card, .why-work-card, .tech-category, .job, .portfolio-card, .contact-detail{ padding: var(--card-pad-sm) !important; min-height: 0 !important; } .hud-button, a.hud-button, button.hud-button, .actions .btn, .hire-btn, .footer-hire{ height: 44px !important; min-height: 44px !important; } } section.stats, .stats{ width: min(var(--page-max-width, 1840px), calc(100% - 64px)) !important; max-width: none !important; margin-inline: auto !important; border-radius: 0 !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; padding-inline: clamp(24px, 5vw, 96px) !important; } .stat{ justify-content: center !important; grid-template-columns: 44px minmax(0, auto) !important; } @media (max-width: 900px){ section.stats, .stats{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 560px){ section.stats, .stats{ width: calc(100% - 24px) !important; grid-template-columns: 1fr !important; } } #home.hero{ grid-template-columns: minmax(0, 1fr) !important; } #home .hero-left{ max-width: 980px !important; } #about.about-profile-layout{ grid-template-columns: minmax(280px, 420px) minmax(0, 1fr) !important; align-items: center !important; gap: clamp(28px, 5vw, 72px) !important; } #about.about-profile-layout .about-text{ max-width: 1040px !important; } #about .static-portrait-panel{ display: grid !important; place-items: center !important; } #about .static-about-portrait{ width: min(100%, 360px) !important; margin: 0 !important; display: grid !important; gap: 18px !important; justify-items: center !important; animation: none !important; } #about .static-about-portrait, #about .static-about-portrait::before, #about .static-about-portrait::after, #about .static-about-portrait *{ animation: none !important; } #about .static-about-portrait img{ width: min(320px, 100%) !important; aspect-ratio: 1 !important; object-fit: cover !important; object-position: center top !important; border-radius: 50% !important; border: 1px solid rgba(139, 190, 255, .5) !important; box-shadow: 0 18px 44px rgba(0, 0, 0, .34), 0 0 22px rgba(91, 169, 255, .18) !important; } #about .static-about-portrait figcaption{ width: 100% !important; padding: 18px 20px !important; display: grid !important; gap: 8px !important; text-align: center !important; border: 1px solid rgba(139, 190, 255, .38) !important; border-radius: 8px !important; background: linear-gradient(135deg, rgba(7, 16, 35, .9), rgba(4, 8, 20, .96)) !important; } #about .static-about-portrait strong{ font-size: var(--type-32) !important; line-height: 1 !important; } #about .static-about-portrait span{ font-size: var(--type-12) !important; line-height: 1.3 !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: #aebdd5 !important; } @media (max-width: 900px){ #about.about-profile-layout{ grid-template-columns: 1fr !important; } } html{ scroll-padding-top: calc(86px + env(safe-area-inset-top, 0px)) !important; } body{ min-width: 320px !important; overflow-x: clip !important; } img, svg, canvas, video, iframe{ max-width: 100% !important; } img, svg{ height: auto; } main, section, .header, .footer, .hero-left, .about-text, .experience-copy, .services-copy, .projects-copy, .testimonial-copy, .cert-copy, .contact-info, .service-grid, .project-grid, .testimonial-grid, .why-work-grid, .tech-category-grid, .info-grid, .contact-form, .contact-detail, .job, .service, .project-card, .testimonial-card, .cert-card{ min-width: 0 !important; } p, h1, h2, h3, h4, h5, h6, a, span, small, strong, b, li, input, textarea, button{ overflow-wrap: anywhere; word-break: normal; } .header, .hero, .about, #experience.experience, .why-work, .tech-stack-showcase, .services.services-hud, .projects, .testimonials, .certifications.certs-hud, #contact.contact, .final-cta, .footer{ width: min(var(--page-max-width, 1840px), calc(100% - clamp(24px, 5vw, 96px))) !important; margin-inline: auto !important; } .header{ width: 100% !important; max-width: none !important; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)) !important; } .actions, .project-actions, .footer-socials, .socials, .cert-meta, .testimonial-meta{ min-width: 0 !important; } .actions{ flex-wrap: wrap !important; } .actions .hud-button, .actions .btn{ flex: 0 1 auto !important; } .contact-form input, .contact-form textarea{ width: 100% !important; min-width: 0 !important; font-size: max(16px, var(--type-16)) !important; } @media (min-width: 1921px){ :root{ --page-max-width: 1840px; } .header{ padding-inline: clamp(32px, 5vw, 120px) !important; } } @media (max-width: 1280px){ .header{ grid-template-columns: minmax(220px, auto) minmax(0, 1fr) auto !important; gap: clamp(12px, 2vw, 24px) !important; } .header .nav{ gap: clamp(12px, 1.4vw, 18px) !important; } .hire-btn{ min-width: 128px !important; } } @media (max-width: 1024px){ .header{ position: sticky !important; top: 0 !important; height: auto !important; min-height: 76px !important; grid-template-columns: minmax(0, 1fr) 48px !important; overflow: visible !important; } .brand{ min-width: 0 !important; } .brand strong, .brand small{ white-space: normal !important; } .menu-toggle{ display: grid !important; place-items: center !important; justify-self: end !important; min-width: 44px !important; min-height: 44px !important; font-size: 0 !important; } .menu-toggle::before, .menu-toggle::after{ content: "" !important; width: 22px !important; height: 2px !important; display: block !important; background: currentColor !important; box-shadow: 0 7px 0 currentColor !important; } .menu-toggle::after{ box-shadow: none !important; transform: translateY(-7px) !important; } .header .nav{ position: absolute !important; left: max(16px, env(safe-area-inset-left, 0px)) !important; right: max(16px, env(safe-area-inset-right, 0px)) !important; top: calc(100% + 8px) !important; z-index: 10001 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; max-height: min(70svh, 520px) !important; padding: 14px !important; overflow: auto !important; border: 1px solid rgba(126, 170, 255, .24) !important; border-radius: 16px !important; background: rgba(3, 10, 22, .98) !important; box-shadow: 0 24px 48px rgba(0, 0, 0, .42) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(-8px) !important; transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important; } .header .nav.open{ opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) !important; } .header .nav a{ min-height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 10px 12px !important; border-radius: 10px !important; background: rgba(255, 255, 255, .045) !important; } .header .nav a::after{ content: none !important; } .header > .hire-btn{ display: none !important; } .hero, .about, #experience.experience, .services.services-hud, .projects, .testimonials, .certifications.certs-hud, #contact.contact, .footer{ grid-template-columns: 1fr !important; } .services.services-hud, .projects, .testimonials, .certifications.certs-hud, #contact.contact{ gap: clamp(24px, 5vw, 48px) !important; } } @media (max-width: 760px){ html{ scroll-padding-top: calc(76px + env(safe-area-inset-top, 0px)) !important; } .header, .hero, .about, #experience.experience, .why-work, .tech-stack-showcase, .services.services-hud, .projects, .testimonials, .certifications.certs-hud, #contact.contact, .final-cta, .footer{ width: calc(100% - 24px) !important; } .header{ width: 100% !important; } .hero, .about, #experience.experience, .why-work, .tech-stack-showcase, .services.services-hud, .projects, .testimonials, .certifications.certs-hud, #contact.contact, .final-cta{ padding: clamp(36px, 9vw, 56px) 16px !important; } .brand img{ width: 44px !important; height: 44px !important; } .brand strong{ font-size: 16px !important; line-height: 1.15 !important; } .brand small{ font-size: 10px !important; line-height: 1.2 !important; } .header .nav{ grid-template-columns: 1fr !important; } .hero-role em{ margin-inline: 6px !important; } .actions, .project-actions{ width: 100% !important; } .actions .hud-button, .actions .btn, .project-actions a{ width: 100% !important; } .info-grid, .why-work-grid, .tech-category-grid, .service-grid, .project-grid, .testimonial-grid{ grid-template-columns: 1fr !important; } .job .summary-link, #experience.experience .job .summary-link{ grid-template-columns: 1fr !important; } #experience.experience .job .summary-link img{ width: min(180px, 100%) !important; } #certifications.certs-hud .cert-stage{ margin-inline: -4px !important; } #certifications.certs-hud .cert-grid, .certifications.certs-hud .cert-grid{ grid-auto-columns: minmax(260px, 86vw) !important; } .footer{ padding-inline: 16px !important; } } @media (max-width: 380px){ :root{ --page-heading-size: 30px !important; } .hero, .about, #experience.experience, .why-work, .tech-stack-showcase, .services.services-hud, .projects, .testimonials, .certifications.certs-hud, #contact.contact, .final-cta{ width: calc(100% - 16px) !important; padding-inline: 12px !important; } .hud-button, a.hud-button, button.hud-button{ min-height: 48px !important; padding-inline: 16px !important; font-size: 14px !important; } } @media (orientation: landscape) and (max-height: 520px){ .header .nav{ max-height: calc(100svh - 92px) !important; } .hero{ padding-block: 32px !important; } } #services.services-hud{ width: min(var(--page-max-width, 1840px), calc(100% - clamp(24px, 5vw, 96px))) !important; display: grid !important; grid-template-columns: minmax(360px, 420px) minmax(0, 1fr) !important; align-items: stretch !important; gap: clamp(24px, 3vw, 48px) !important; overflow: visible !important; } #services.services-hud .services-copy{ width: 100% !important; max-width: 420px !important; min-width: 0 !important; } #services.services-hud .services-stage{ width: 100% !important; min-width: 0 !important; min-height: 0 !important; padding: clamp(22px, 3vw, 42px) !important; overflow: visible !important; } #services.services-hud .service-grid, #services .service-grid{ width: 100% !important; min-width: 0 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(16px, 2vw, 26px) !important; align-items: stretch !important; } #services.services-hud .service, #services .service{ width: 100% !important; min-width: 0 !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: clamp(14px, 1.6vw, 20px) !important; grid-template-columns: none !important; text-align: left !important; padding: clamp(22px, 2.2vw, 32px) !important; } #services.services-hud .service > small, #services .service > small{ position: static !important; width: auto !important; grid-column: auto !important; grid-row: auto !important; order: 2 !important; font-size: clamp(42px, 4vw, 58px) !important; line-height: .9 !important; } #services.services-hud .service > span, #services .service > span{ order: 1 !important; flex: 0 0 auto !important; align-self: center !important; margin: 0 0 clamp(8px, 1vw, 14px) !important; } #services.services-hud .service h3, #services .service h3{ order: 3 !important; width: 100% !important; max-width: none !important; margin: 0 !important; text-align: left !important; line-height: 1.15 !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; } #services.services-hud .service p, #services .service p{ order: 4 !important; width: 100% !important; max-width: none !important; margin: 0 !important; text-align: left !important; overflow-wrap: normal !important; word-break: normal !important; } #services.services-hud .service-flow, #services .service-flow{ order: 5 !important; width: 100% !important; grid-column: auto !important; display: grid !important; gap: 10px !important; } #services.services-hud .service-flow span, #services .service-flow span{ min-width: 0 !important; overflow-wrap: break-word !important; } #services.services-hud .service a, #services .service a{ order: 6 !important; grid-column: auto !important; margin-top: auto !important; } @media (max-width: 1200px){ #services.services-hud{ grid-template-columns: 1fr !important; } #services.services-hud .services-copy{ max-width: 680px !important; } #services.services-hud .service-grid, #services .service-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 700px){ #services.services-hud{ width: calc(100% - 16px) !important; } #services.services-hud .services-stage{ padding: 12px !important; } #services.services-hud .service-grid, #services .service-grid{ grid-template-columns: 1fr !important; } #services.services-hud .service, #services .service{ padding: 20px !important; } } html { scroll-behavior: auto !important; } *, *::before, *::after { animation: none !important; animation-name: none !important; animation-delay: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; transition: none !important; } main > section { position: relative !important; width: min(var(--page-max-width, 1840px), calc(100% - clamp(24px, 5vw, 96px))) !important; max-width: none !important; margin-inline: auto !important; box-sizing: border-box !important; } :root { --split-left-padding-block: clamp(48px, 4vw, 68px); --split-left-padding-inline: clamp(34px, 3.2vw, 56px); } #experience.section.experience.border-frame .experience-copy, #why-work-with-me.section.why-work.border-frame .why-work-copy, #skills.section.tech-stack-showcase.border-frame .skills-copy, #services.section.services.border-frame.services-hud .services-copy, #projects.section.projects.border-frame .projects-copy, #testimonials.section.testimonials.border-frame .testimonial-copy, #certifications.section.certifications.border-frame.certs-hud .cert-copy, #github-activity.section.github-activity.border-frame .github-copy { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: var(--split-left-padding-block) var(--split-left-padding-inline) !important; align-self: stretch !important; border-radius: 0 !important; box-sizing: border-box !important; } @media (max-width: 760px) { :root { --split-left-padding-block: 38px; --split-left-padding-inline: 18px; } } @media (min-width: 1181px) { #experience.experience { grid-template-columns: minmax(420px, 520px) minmax(0, 1fr) !important; gap: 0 !important; align-items: stretch !important; } #experience .experience-copy { width: 100% !important; max-width: 520px !important; box-sizing: border-box !important; } #experience .experience-scroll { width: 100% !important; min-width: 0 !important; margin-left: 0 !important; box-sizing: border-box !important; } } #home.hero { width: min(var(--page-max-width, 1840px), calc(100% - clamp(24px, 5vw, 96px))) !important; max-width: none !important; margin-inline: auto !important; box-sizing: border-box !important; overflow-x: clip !important; } @media (max-width: 760px) { main > section, #home.hero { width: calc(100% - 24px) !important; } } @media (max-width: 1024px) { .header { grid-template-columns: minmax(0, 1fr) 54px !important; } .header .menu-toggle { position: relative !important; z-index: 10002 !important; justify-self: end !important; width: 54px !important; height: 54px !important; min-width: 54px !important; min-height: 54px !important; padding: 14px !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: center !important; gap: 6px !important; border: 0 !important; border-radius: 8px !important; clip-path: none !important; background: transparent !important; color: #fff !important; box-shadow: none !important; cursor: pointer !important; } .header .menu-toggle::before, .header .menu-toggle::after { content: none !important; display: none !important; } .header .menu-toggle > span { display: block !important; width: 100% !important; height: 3px !important; border-radius: 999px !important; background: #fff !important; box-shadow: 0 0 8px rgba(126, 181, 255, .4) !important; transform-origin: center !important; transition: transform .2s ease, opacity .2s ease !important; } .header .menu-toggle[aria-expanded="true"] > span:first-child { transform: translateY(9px) rotate(45deg) !important; } .header .menu-toggle[aria-expanded="true"] > span:nth-child(2) { opacity: 0 !important; } .header .menu-toggle[aria-expanded="true"] > span:last-child { transform: translateY(-9px) rotate(-45deg) !important; } } @media (max-width: 760px) { .header { grid-template-columns: minmax(0, 1fr) 44px !important; } .header .menu-toggle { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; padding: 11px !important; gap: 5px !important; border-radius: 8px !important; } .header .menu-toggle > span { width: 22px !important; height: 2px !important; align-self: center !important; border-radius: 999px !important; } .header .menu-toggle[aria-expanded="true"] > span:first-child { transform: translateY(7px) rotate(45deg) !important; } .header .menu-toggle[aria-expanded="true"] > span:nth-child(2) { opacity: 0 !important; } .header .menu-toggle[aria-expanded="true"] > span:last-child { transform: translateY(-7px) rotate(-45deg) !important; } } #home.hero { grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr) !important; align-items: center !important; gap: clamp(36px, 5vw, 88px) !important; } #home .hero-profile { position: relative; min-height: 520px; display: grid; place-items: center; isolation: isolate; } #home .hero-profile-orbit { position: absolute; width: min(430px, 92%); aspect-ratio: 1; border: 1px solid rgba(116, 164, 255, .18); border-radius: 50%; background: radial-gradient(circle, rgba(91, 128, 255, .14), transparent 62%); box-shadow: 0 0 70px rgba(86, 116, 255, .12); z-index: -1; } #home .hero-profile-card { position: relative; width: min(390px, 100%); margin: 0; padding: 18px; border: 1px solid rgba(132, 174, 255, .62); border-radius: 18px; background: linear-gradient(145deg, rgba(11, 28, 60, .94), rgba(8, 10, 24, .96)); box-shadow: 0 28px 64px rgba(0, 0, 0, .4), 0 0 28px rgba(78, 125, 255, .16), inset 0 0 30px rgba(255, 187, 61, .06); } #home .hero-profile-photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center top; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .16); } #home .hero-logo-badge { position: absolute; top: -28px; right: -24px; width: 76px; height: 76px; display: grid; place-items: center; padding: 8px; border: 1px solid rgba(255, 198, 78, .75); border-radius: 20px; background: #071126; box-shadow: 0 0 26px rgba(255, 184, 53, .3); z-index: 2; } #home .hero-logo-badge img { width: 100%; height: 100%; object-fit: contain; } #home .hero-profile-card figcaption { display: grid; gap: 7px; padding: 20px 8px 4px; text-align: center; } #home .hero-profile-card strong { color: #f7f9ff; font-size: 24px; line-height: 1.1; } #home .hero-profile-card figcaption > span { color: #a9b9d5; font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } #home .hero-profile-card small { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; color: #9ff0c8; font-weight: 800; } #home .hero-profile-card small i { width: 8px; height: 8px; border-radius: 50%; background: #49e894; box-shadow: 0 0 10px #49e894; } #home .hero-tech-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; min-width: 170px; min-height: 40px; padding: 8px 13px; border: 1px solid rgba(126, 171, 255, .3); border-left: 3px solid #82a8ff; border-radius: 7px; background: rgba(5, 14, 32, .96); box-shadow: 0 10px 24px rgba(0, 0, 0, .32); color: #dce9ff; font-size: 11px; font-weight: 800; letter-spacing: .035em; backdrop-filter: blur(12px); } #home .hero-tech-chip img { width: 22px; height: 22px; object-fit: contain; } #home .hero-tech-chip-angular { top: 18%; left: -36px; } #home .hero-tech-chip-ai { top: calc(18% + 52px); left: -36px; right: auto; border-color: rgba(105, 224, 223, .48); border-left-color: #69dfdf; } #home .hero-tech-chip-mfe { top: calc(18% + 104px); bottom: auto; left: -36px; border-color: rgba(255, 188, 70, .5); border-left-color: #ffbc46; } #home .hero-experience-badge { position: absolute; right: -14px; bottom: 5%; z-index: 4; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid rgba(255, 195, 72, .6); border-radius: 9px; background: linear-gradient(135deg, rgba(19, 26, 62, .96), rgba(31, 18, 18, .96)); box-shadow: 0 14px 28px rgba(0, 0, 0, .38); } #home .hero-experience-badge strong { background: linear-gradient(135deg, #8fa8ff, #ffd05f); background-clip: text; -webkit-background-clip: text; color: transparent; font-size: 30px; line-height: 1; } #home .hero-experience-badge > span { color: #e8efff; font-size: 10px; font-weight: 900; line-height: 1.25; letter-spacing: .1em; text-transform: uppercase; } @media (max-width: 1024px) { #home.hero { grid-template-columns: 1fr !important; } #home .hero-profile { min-height: 0; padding-block: 28px; } #home .hero-tech-chip-angular { left: max(0px, calc(50% - 235px)); } #home .hero-tech-chip-ai { left: max(0px, calc(50% - 235px)); right: auto; } #home .hero-tech-chip-mfe { left: max(0px, calc(50% - 245px)); } #home .hero-experience-badge { right: max(0px, calc(50% - 225px)); } } @media (max-width: 560px) { #home .hero-profile-card { width: min(330px, calc(100% - 24px)); } #home .hero-logo-badge { right: -10px; width: 64px; height: 64px; } #home .hero-tech-chip, #home .hero-experience-badge { position: relative; inset: auto; width: min(330px, calc(100% - 24px)); justify-content: center; margin-top: 10px; } #home .hero-tech-chip-angular { margin-top: 22px; } #home .hero-experience-badge { display: flex; } } #services.services-hud { width: min(var(--page-max-width, 1840px), calc(100% - clamp(24px, 5vw, 96px))) !important; margin-inline: auto !important; gap: 0 !important; box-sizing: border-box !important; } @media (min-width: 1201px) { #services.services-hud { grid-template-columns: minmax(420px, 520px) minmax(0, 1fr) !important; } #services.services-hud .services-copy { max-width: 520px !important; } } @media (max-width: 1200px) { #services.services-hud { grid-template-columns: 1fr !important; gap: 0 !important; padding: 0 !important; } #services.services-hud .services-copy { width: 100% !important; max-width: none !important; min-height: 0 !important; padding: 48px clamp(24px, 5vw, 48px) 40px !important; box-sizing: border-box !important; } #services.services-hud .services-stage { width: 100% !important; padding: 36px clamp(24px, 5vw, 48px) 48px !important; box-sizing: border-box !important; } } @media (max-width: 760px) { #services.services-hud { width: calc(100% - 24px) !important; margin-inline: auto !important; padding: 0 !important; } #services.services-hud .services-copy, #services.services-hud .services-stage { width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; } #services.services-hud .services-copy { padding-top: 40px !important; padding-bottom: 34px !important; } #services.services-hud .services-stage { padding-top: 24px !important; padding-bottom: 36px !important; } #services.services-hud .service-grid, #services .service-grid { width: 100% !important; grid-template-columns: 1fr !important; gap: 18px !important; } #services.services-hud .service, #services .service { width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; } } #skills.tech-stack-showcase .tech-category-grid { gap: 18px 22px !important; } #skills.tech-stack-showcase .tech-category, #skills.tech-stack-showcase .leadership-card { padding: 20px 24px 22px !important; } #skills.tech-stack-showcase .tech-category h3 { gap: 12px !important; min-height: 40px !important; margin-bottom: 14px !important; padding-bottom: 12px !important; } #skills.tech-stack-showcase .tech-category h3 img { width: 30px !important; height: 30px !important; flex-basis: 30px !important; } #skills.tech-stack-showcase .tech-list.two-col { gap: 10px 18px !important; } #skills.tech-stack-showcase .tech-list span { grid-template-columns: 34px minmax(0, 1fr) !important; column-gap: 10px !important; min-height: 36px !important; } #skills.tech-stack-showcase .tech-list span img { width: 28px !important; height: 28px !important; } @media (max-width: 760px) { #skills.tech-stack-showcase .tech-category-grid { gap: 16px !important; } #skills.tech-stack-showcase .tech-category, #skills.tech-stack-showcase .leadership-card { padding: 18px !important; } } #projects .project-grid { gap: 18px !important; } #projects .project-card, #projects .project-card:first-child { min-height: 520px !important; padding: 0 0 18px !important; display: flex !important; flex-direction: column !important; grid-template-columns: none !important; gap: 0 !important; } #projects .project-card:first-child::before { content: "" !important; display: block !important; inset: 0 !important; } #projects .project-card .project-image, #projects .project-card:first-child .project-image { height: 150px !important; min-height: 150px !important; margin: 14px 14px 0 !important; } #projects .project-card h3, #projects .project-card:first-child h3 { min-height: 54px !important; margin: 16px 0 6px !important; } #projects .project-card p, #projects .project-card:first-child p { min-height: 56px !important; margin-bottom: 12px !important; } #projects .tags { gap: 7px !important; margin-top: 10px !important; } #projects .tags span { padding: 6px 9px !important; } #projects .project-proof { margin-top: 12px !important; padding: 16px 18px !important; grid-template-columns: 96px minmax(0, 1fr) !important; row-gap: 8px !important; column-gap: 14px !important; min-height: 0 !important; border: 0 !important; border-left: 3px solid var(--project-accent, #5aa8ff) !important; border-radius: 0 !important; background: linear-gradient( 90deg, color-mix(in srgb, var(--project-accent, #5aa8ff) 10%, rgba(255, 255, 255, .025)), rgba(255, 255, 255, .018) 72%, transparent ) !important; box-shadow: none !important; } #projects .project-proof b { white-space: nowrap !important; overflow-wrap: normal !important; word-break: normal !important; } #projects .project-proof span { overflow-wrap: normal !important; word-break: normal !important; } #projects .project-actions { gap: 8px !important; padding-top: 12px !important; } @media (max-width: 760px) { #projects .project-grid { gap: 16px !important; } #projects .project-card, #projects .project-card:first-child { min-height: 0 !important; } } #certifications, #certifications *, #certifications::before, #certifications::after, #certifications *::before, #certifications *::after { animation: none !important; transition: none !important; } #certifications .cert-card:hover, #certifications .cert-card:hover *, #certifications .cert-card:hover::before, #certifications .cert-card:hover::after { transform: none !important; } #certifications.certs-hud .cert-stage { padding-top: 22px !important; } #certifications.certs-hud .cert-grid, .certifications.certs-hud .cert-grid { --cert-scroll-gap: 32px !important; padding-top: 78px !important; padding-left: clamp(14px, 2vw, 28px) !important; } #certifications.certs-hud .cert-grid::before, .certifications.certs-hud .cert-grid::before { content: none !important; display: none !important; } #certifications.certs-hud .cert-card { position: relative !important; overflow: visible !important; } #certifications.certs-hud .cert-card time { position: absolute !important; top: -27px !important; left: 50% !important; right: auto !important; bottom: auto !important; z-index: 6 !important; width: 54px !important; height: 54px !important; min-width: 54px !important; padding: 0 !important; display: grid !important; place-items: center !important; border: 3px solid var(--cert-accent, #8bdfff) !important; border-radius: 50% !important; background: #071225 !important; color: #eef8ff !important; font-size: 11px !important; font-weight: 900 !important; line-height: 1 !important; box-shadow: 0 0 16px color-mix(in srgb, var(--cert-accent, #8bdfff) 62%, transparent), inset 0 0 12px rgba(255, 255, 255, .06) !important; transform: translateX(-50%) !important; } #certifications.certs-hud .cert-card time::before { content: "" !important; position: absolute !important; top: auto !important; right: auto !important; bottom: 51px !important; left: 50% !important; width: 3px !important; height: 44px !important; border: 0 !important; background: linear-gradient(180deg, transparent, var(--cert-accent, #8bdfff)) !important; box-shadow: 0 0 8px color-mix(in srgb, var(--cert-accent, #8bdfff) 55%, transparent) !important; transform: translateX(-50%) !important; } #certifications.certs-hud .cert-card time::after { content: none !important; display: none !important; } @media (max-width: 760px) { #certifications.certs-hud .cert-stage { padding-top: 16px !important; } #certifications.certs-hud .cert-grid, .certifications.certs-hud .cert-grid { --cert-scroll-gap: 26px !important; padding-top: 62px !important; padding-left: 14px !important; } #certifications.certs-hud .cert-card { overflow: visible !important; } #certifications.certs-hud .cert-card time { top: -26px !important; left: 50% !important; width: 52px !important; height: 52px !important; min-width: 52px !important; transform: translateX(-50%) !important; } #certifications.certs-hud .cert-card time::before { content: "" !important; display: block !important; height: 30px !important; } } #contact .contact-hud, #contact .contact-hud *, #contact .contact-hud::before, #contact .contact-hud::after, #contact .contact-hud *::before, #contact .contact-hud *::after { animation: none !important; animation-delay: 0s !important; animation-duration: 0s !important; transition: none !important; } #contact.contact .contact-hud.radar.hud-portrait, #contact.contact .contact-hud.radar.hud-portrait::before, #contact.contact .contact-hud.radar.hud-portrait::after, #contact.contact .contact-hud.radar.hud-portrait .hud-frame, #contact.contact .contact-hud.radar.hud-portrait .hud-ring, #contact.contact .contact-hud.radar.hud-portrait .animation-hud-icon, #contact.contact .contact-hud.radar.hud-portrait .avatar-box, #contact.contact .contact-hud.radar.hud-portrait .avatar-box::before, #contact.contact .contact-hud.radar.hud-portrait .avatar-box::after { animation: none !important; animation-name: none !important; animation-play-state: paused !important; transition: none !important; } #contact.contact .contact-hud.radar.hud-portrait .hud-ring-1 { transform: translate(-50%, -50%) rotate(8deg) !important; } #contact.contact .contact-hud.radar.hud-portrait .hud-ring-2 { transform: translate(-50%, -50%) rotate(28deg) !important; } #contact.contact .contact-hud.radar.hud-portrait .hud-ring-3 { transform: translate(-50%, -50%) rotate(-12deg) !important; } #contact.contact .contact-hud.radar.hud-portrait .hud-ring-4 { transform: translate(-50%, -50%) rotate(42deg) !important; } #contact.contact .contact-hud.radar.hud-portrait .animation-hud-icon { transform: none !important; } :where( .hud-button, .btn, .service > a, .cert-card > a, .project-actions > a ) .iconify-ui-icon { display: block !important; flex: 0 0 auto !important; width: 20px !important; height: 20px !important; min-width: 20px !important; opacity: 1 !important; visibility: visible !important; filter: brightness(0) saturate(100%) invert(89%) sepia(94%) saturate(1094%) hue-rotate(339deg) brightness(103%) contrast(103%) drop-shadow(0 0 6px rgba(255, 220, 50, .75)) !important; } :where( .hud-button, .btn, .service > a, .cert-card > a, .project-actions > a ):hover .iconify-ui-icon, :where( .hud-button, .btn, .service > a, .cert-card > a, .project-actions > a ):focus-visible .iconify-ui-icon { opacity: 1 !important; visibility: visible !important; } :where(button, a) .iconify-ui-icon[src*="arrow-"] { opacity: 1 !important; visibility: visible !important; filter: brightness(0) saturate(100%) invert(58%) sepia(91%) saturate(1675%) hue-rotate(188deg) brightness(104%) contrast(104%) drop-shadow(0 0 6px rgba(72, 170, 255, .72)) !important; } #contact .contact-detail-icon { display: grid !important; place-items: center !important; padding: 0 !important; line-height: 0 !important; } #contact .contact-detail-icon .iconify-ui-icon { position: static !important; display: block !important; width: 26px !important; height: 26px !important; margin: 0 !important; inset: auto !important; transform: none !important; } @media (max-width: 760px) { #projects .projects-stage { width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; padding-bottom: 28px !important; overflow: hidden !important; box-sizing: border-box !important; } #projects .project-view-all { position: relative !important; inset: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 24px 0 0 !important; padding-inline: 18px !important; box-sizing: border-box !important; transform: none !important; } } :root { --split-right-padding-block: clamp(34px, 3.5vw, 56px); --split-right-padding-inline: clamp(28px, 3.2vw, 52px); } #experience.section.experience.border-frame .experience-scroll, #why-work-with-me.section.why-work.border-frame .why-work-stage, #skills.section.tech-stack-showcase.border-frame .skills-stage, #services.section.services.border-frame.services-hud .services-stage, #projects.section.projects.border-frame .projects-stage, #testimonials.section.testimonials.border-frame .testimonial-stage, #certifications.section.certifications.border-frame.certs-hud .cert-stage, #github-activity.section.github-activity.border-frame .github-stage { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: var(--split-right-padding-block) var(--split-right-padding-inline) !important; align-self: stretch !important; border-radius: 0 !important; box-sizing: border-box !important; } #certifications.section.certifications.border-frame.certs-hud .cert-grid { margin: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; border-radius: 0 !important; box-sizing: border-box !important; } @media (max-width: 760px) { :root { --split-right-padding-block: 28px; --split-right-padding-inline: 16px; } }

/* Final chamfered treatment for the existing Hire Me buttons. */
html body .hire-btn,
html body .footer-hire,
html body .actions .btn.orange {
  --hire-button-cut: 17px;
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  clip-path: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 8px rgba(85, 116, 255, .56)) drop-shadow(0 0 8px rgba(255, 181, 62, .42)) !important;
  font-weight: 900 !important;
  letter-spacing: .025em !important;
  text-shadow: 0 0 7px rgba(255, 255, 255, .58) !important;
}

html body .hire-btn::before,
html body .footer-hire::before,
html body .actions .btn.orange::before,
html body .hire-btn::after,
html body .footer-hire::after,
html body .actions .btn.orange::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  clip-path: none !important;
}

html body .hire-btn::before,
html body .footer-hire::before,
html body .actions .btn.orange::before {
  z-index: -2 !important;
  inset: 0 !important;
  background: linear-gradient(100deg, #6490ff 0%, #315dff 38%, #ff9c28 72%, #ffd36c 100%) !important;
}

html body .hire-btn::after,
html body .footer-hire::after,
html body .actions .btn.orange::after {
  z-index: -1 !important;
  inset: 4px !important;
  background: linear-gradient(100deg, #6490ff 0%, #315dff 38%, #ff9c28 72%, #ffd36c 100%) !important;
  box-shadow: inset 0 0 18px rgba(255, 255, 255, .18), inset 0 0 14px rgba(255, 190, 73, .24) !important;
}

html body .hire-btn > *,
html body .footer-hire > *,
html body .actions .btn.orange > * {
  position: relative !important;
  z-index: 1 !important;
}

html body .hire-btn .iconify-ui-icon,
html body .footer-hire .iconify-ui-icon,
html body .actions .btn.orange .iconify-ui-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: brightness(0) saturate(100%) invert(91%) sepia(94%) saturate(1677%) hue-rotate(351deg) brightness(108%) contrast(108%) drop-shadow(0 0 6px rgba(255, 229, 34, .95)) !important;
}

html body .hire-btn:hover,
html body .hire-btn:focus-visible,
html body .footer-hire:hover,
html body .footer-hire:focus-visible,
html body .actions .btn.orange:hover,
html body .actions .btn.orange:focus-visible {
  transform: translateY(-2px) !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 11px rgba(85, 116, 255, .72)) drop-shadow(0 0 12px rgba(255, 181, 62, .58)) !important;
}

html body .actions .btn.orange,
html body .footer-hire {
  width: 300px !important;
  min-width: 300px !important;
  height: 90px !important;
  min-height: 90px !important;
  padding: 0 34px 0 40px !important;
  gap: 30px !important;
  font-size: 30px !important;
  line-height: 1 !important;
}

html body .actions .btn.orange .iconify-ui-icon,
html body .footer-hire .iconify-ui-icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
}

html body .actions .btn.orange {
  height: 44px !important;
  min-height: 44px !important;
  padding-inline: 28px !important;
  gap: 18px !important;
  font-size: 16px !important;
}

html body .actions .btn.orange .iconify-ui-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
}

html body .header .hire-btn {
  --hire-button-cut: 12px;
}

@media (max-width: 760px) {
  html body .actions .btn.orange,
  html body .footer-hire {
    width: 100% !important;
    min-width: 0 !important;
    height: 68px !important;
    min-height: 68px !important;
    padding-inline: 26px !important;
    gap: 20px !important;
    font-size: 22px !important;
  }
}

/* Keep every website action button consistent in color and height. */
html body :is(
  .hud-button,
  .btn,
  .experience-toggle,
  .send-message,
  .project-view-all,
  .hud-action,
  .footer-hire,
  .header-match-btn,
  .service > a,
  .cert-card > a,
  .project-actions > a
) {
  height: 44px !important;
  min-height: 44px !important;
  border: 0 !important;
  border-radius: 999px !important;
  clip-path: none !important;
  color: #fff !important;
  background: linear-gradient(100deg, #6490ff 0%, #315dff 38%, #ff9c28 72%, #ffd36c 100%) !important;
  box-shadow: inset 0 0 16px rgba(255, 255, 255, .18), 0 0 14px rgba(79, 112, 255, .35), 0 0 14px rgba(255, 157, 40, .28) !important;
}

html body :is(
  .hud-button,
  .btn,
  .experience-toggle,
  .send-message,
  .project-view-all,
  .hud-action,
  .footer-hire,
  .header-match-btn,
  .service > a,
  .cert-card > a,
  .project-actions > a
)::before,
html body :is(
  .hud-button,
  .btn,
  .experience-toggle,
  .send-message,
  .project-view-all,
  .hud-action,
  .footer-hire,
  .header-match-btn,
  .service > a,
  .cert-card > a,
  .project-actions > a
)::after {
  content: none !important;
  display: none !important;
}

html body :is(
  .hud-button,
  .btn,
  .experience-toggle,
  .send-message,
  .project-view-all,
  .hud-action,
  .footer-hire,
  .header-match-btn,
  .service > a,
  .cert-card > a,
  .project-actions > a
) .iconify-ui-icon {
  color: #fff200 !important;
  filter: brightness(0) saturate(100%) invert(91%) sepia(97%) saturate(1874%) hue-rotate(353deg) brightness(108%) contrast(106%) drop-shadow(0 0 6px rgba(255, 235, 30, .85)) !important;
}

html body .footer-hire {
  width: 174px !important;
  min-width: 174px !important;
  max-width: 174px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 20px !important;
  gap: 14px !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

html body .footer-hire .iconify-ui-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
}

@media (max-width: 760px) {
  html body .footer-hire {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Hero action pair: reference colors with rounded ends. */
html body .hero .actions .btn {
  --hero-button-cut: 14px;
  width: 230px !important;
  min-width: 230px !important;
  max-width: 230px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 26px !important;
  justify-content: space-between !important;
  gap: 18px !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 999px !important;
  clip-path: none !important;
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

html body .hero .actions .btn.blue {
  background: transparent !important;
  box-shadow: inset 0 0 16px rgba(255, 255, 255, .18), 0 0 14px rgba(79, 112, 255, .42) !important;
}

html body .hero .actions .btn.orange {
  background: transparent !important;
  box-shadow: inset 0 0 16px rgba(255, 255, 255, .14), 0 0 14px rgba(255, 157, 40, .34) !important;
}

html body .hero .actions .btn::before,
html body .hero .actions .btn::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  border-radius: inherit !important;
  clip-path: none !important;
  pointer-events: none !important;
}

html body .hero .actions .btn::before {
  inset: 0 !important;
  z-index: -2 !important;
}

html body .hero .actions .btn::after {
  inset: 3px !important;
  z-index: -1 !important;
  box-shadow: inset 0 0 16px rgba(255, 255, 255, .14) !important;
}

html body .hero .actions .btn.blue::before {
  background: linear-gradient(100deg, #536cff 0%, #7186ff 58%, #9fcaff 100%) !important;
}

html body .hero .actions .btn.blue::after {
  background: linear-gradient(100deg, #5365c9 0%, #626bd2 54%, #46547e 100%) !important;
}

html body .hero .actions .btn.orange::before {
  background: linear-gradient(100deg, #f0a447 0%, #d37b35 55%, #ffd277 100%) !important;
}

html body .hero .actions .btn.orange::after {
  background: linear-gradient(100deg, #87512f 0%, #713f26 56%, #8e592e 100%) !important;
}

html body .hero .actions .btn .iconify-ui-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
}

html body .hero .actions .btn.blue .iconify-ui-icon {
  filter: brightness(0) saturate(100%) invert(83%) sepia(56%) saturate(755%) hue-rotate(169deg) brightness(105%) contrast(105%) drop-shadow(0 0 6px rgba(137, 225, 255, .9)) !important;
}

html body .hero .actions .btn.orange .iconify-ui-icon {
  filter: brightness(0) saturate(100%) invert(91%) sepia(97%) saturate(1874%) hue-rotate(353deg) brightness(108%) contrast(106%) drop-shadow(0 0 6px rgba(255, 235, 30, .9)) !important;
}

@media (max-width: 760px) {
  html body .hero .actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Shared hover and focus interaction for every action button. */
html body :is(
  .hud-button,
  .btn,
  .experience-toggle,
  .send-message,
  .project-view-all,
  .hud-action,
  .footer-hire,
  .header-match-btn,
  .service > a,
  .cert-card > a,
  .project-actions > a
) {
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease !important;
}

html body :is(
  .hud-button,
  .btn,
  .experience-toggle,
  .send-message,
  .project-view-all,
  .hud-action,
  .footer-hire,
  .header-match-btn,
  .service > a,
  .cert-card > a,
  .project-actions > a
):hover,
html body :is(
  .hud-button,
  .btn,
  .experience-toggle,
  .send-message,
  .project-view-all,
  .hud-action,
  .footer-hire,
  .header-match-btn,
  .service > a,
  .cert-card > a,
  .project-actions > a
):focus-visible {
  transform: translateY(-2px) !important;
  filter: brightness(1.08) drop-shadow(0 0 8px rgba(84, 116, 255, .55)) drop-shadow(0 0 8px rgba(255, 176, 54, .48)) !important;
  box-shadow: inset 0 0 18px rgba(255, 255, 255, .2), 0 0 18px rgba(93, 126, 255, .4), 0 0 18px rgba(255, 165, 48, .34) !important;
  outline: none !important;
}

html body .footer .footer-cta {
  overflow: visible !important;
  padding-bottom: 20px !important;
}

html body .footer .footer-hire {
  margin-bottom: 8px !important;
  overflow: visible !important;
}

html body #projects .projects-stage {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding-bottom: clamp(34px, 3vw, 52px) !important;
}

html body #projects .project-grid {
  width: 100% !important;
  flex: 0 0 auto !important;
}

html body #projects .project-view-all {
  position: static !important;
  inset: auto !important;
  align-self: flex-end !important;
  width: auto !important;
  min-width: 190px !important;
  max-width: 100% !important;
  margin: 26px 0 0 auto !important;
  flex: 0 0 auto !important;
  transform: none !important;
}

@media (max-width: 760px) {
  html body #projects .projects-stage {
    overflow: hidden !important;
    padding-bottom: 32px !important;
  }

  html body #projects .project-view-all {
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 22px !important;
  }
}

/* Seamless trusted-company marquee. The track contains two identical five-card sets. */
html body .trusted-company-marquee {
  --trusted-loop-distance: -1740px;
  overflow: hidden !important;
}

html body .trusted-company-track {
  animation: trusted-company-scroll 28s linear infinite !important;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
}

html body .trusted-company-marquee:hover .trusted-company-track,
html body .trusted-company-marquee:focus-within .trusted-company-track {
  animation-play-state: paused !important;
}

@keyframes trusted-company-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(var(--trusted-loop-distance), 0, 0);
  }
}

@media (max-width: 760px) {
  html body .trusted-company-marquee {
    --trusted-loop-distance: -1320px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .trusted-company-track {
    animation: none !important;
    transform: translate3d(0, 0, 0) !important;
  }
}

/* Leadership marquee moves in the reverse direction of the company marquee. */
html body .leadership-marquee {
  overflow: hidden !important;
}

html body .leadership-list {
  display: flex !important;
  width: max-content !important;
  gap: 0 !important;
  animation: leadership-marquee-reverse 34s linear infinite !important;
  transform: translate3d(-50%, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
}

html body .leadership-group {
  display: flex !important;
  flex: 0 0 auto !important;
}

html body .leadership-marquee:hover .leadership-list,
html body .leadership-marquee:focus-within .leadership-list {
  animation-play-state: paused !important;
}

@keyframes leadership-marquee-reverse {
  from {
    transform: translate3d(-50%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .leadership-list {
    animation: none !important;
    transform: translate3d(0, 0, 0) !important;
  }
}

html body .final-cta .hud-action {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
}

@media (max-width: 760px) {
  html body .final-cta .hud-action {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

html body #experience .experience-copy .section-description {
  font-size: var(--type-16) !important;
  font-weight: 500 !important;
  line-height: 1.72 !important;
}

/* One default and hover shadow system for every action button. */
html body :is(
  .hero .actions .btn,
  .header .hire-btn,
  .footer .footer-hire,
  .final-cta .hud-action,
  .experience-toggle,
  .send-message,
  .project-view-all,
  .hud-action,
  .hud-button,
  .service > a,
  .cert-card > a,
  .project-actions > a
) {
  filter: none !important;
  box-shadow:
    inset 0 0 16px rgba(255, 255, 255, .16),
    0 0 12px rgba(84, 116, 255, .34),
    0 0 12px rgba(255, 170, 48, .28) !important;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease !important;
}

html body :is(
  .hero .actions .btn,
  .header .hire-btn,
  .footer .footer-hire,
  .final-cta .hud-action,
  .experience-toggle,
  .send-message,
  .project-view-all,
  .hud-action,
  .hud-button,
  .service > a,
  .cert-card > a,
  .project-actions > a
):hover,
html body :is(
  .hero .actions .btn,
  .header .hire-btn,
  .footer .footer-hire,
  .final-cta .hud-action,
  .experience-toggle,
  .send-message,
  .project-view-all,
  .hud-action,
  .hud-button,
  .service > a,
  .cert-card > a,
  .project-actions > a
):focus-visible {
  transform: translateY(-2px) !important;
  filter: brightness(1.08) !important;
  box-shadow:
    inset 0 0 20px rgba(255, 255, 255, .22),
    0 0 20px rgba(84, 116, 255, .52),
    0 0 20px rgba(255, 170, 48, .44) !important;
  outline: none !important;
}

html body #projects .project-view-all:hover,
html body #projects .project-view-all:focus-visible {
  transform: translateY(-2px) !important;
  filter: brightness(1.08) !important;
  box-shadow:
    inset 0 0 20px rgba(255, 255, 255, .22),
    0 0 20px rgba(84, 116, 255, .52),
    0 0 20px rgba(255, 170, 48, .44) !important;
  outline: none !important;
}

html body #services .service > a {
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 20px !important;
  justify-content: space-between !important;
  gap: 14px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body #services .service > a .iconify-ui-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
}

@media (max-width: 760px) {
  html body #services .service > a {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Service cards keep their original compact text-link treatment. */
html body #services .service > a {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: auto 0 0 auto !important;
  padding: 0 !important;
  align-self: end !important;
  justify-self: end !important;
  justify-content: flex-end !important;
  gap: 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--card-border-accent) !important;
  box-shadow: none !important;
  filter: none !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
}

html body #services .service > a .iconify-ui-icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  filter: brightness(0) saturate(100%) invert(65%) sepia(94%) saturate(1118%) hue-rotate(176deg) brightness(105%) contrast(103%) drop-shadow(0 0 5px rgba(75, 172, 255, .72)) !important;
}

html body #services .service.blue-border > a .iconify-ui-icon {
  filter: brightness(0) saturate(100%) invert(65%) sepia(94%) saturate(1118%) hue-rotate(176deg) brightness(105%) contrast(103%) drop-shadow(0 0 5px rgba(75, 172, 255, .72)) !important;
}

html body #services .service.purple-border > a .iconify-ui-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(79%) saturate(2447%) hue-rotate(229deg) brightness(105%) contrast(101%) drop-shadow(0 0 5px rgba(167, 114, 255, .74)) !important;
}

html body #services .service.orange-border > a .iconify-ui-icon {
  filter: brightness(0) saturate(100%) invert(66%) sepia(96%) saturate(1803%) hue-rotate(347deg) brightness(103%) contrast(102%) drop-shadow(0 0 5px rgba(255, 150, 30, .76)) !important;
}

html body #services .service.teal-border > a .iconify-ui-icon {
  filter: brightness(0) saturate(100%) invert(82%) sepia(63%) saturate(1805%) hue-rotate(151deg) brightness(103%) contrast(104%) drop-shadow(0 0 5px rgba(0, 231, 255, .72)) !important;
}

html body #services .service > a:hover,
html body #services .service > a:focus-visible {
  transform: translateX(3px) !important;
  filter: brightness(1.12) !important;
  box-shadow: none !important;
  outline: none !important;
}

html body #experience.experience .experience-copy *::selection {
  color: HighlightText !important;
  background: Highlight !important;
}

html body #experience.experience .experience-copy *::-moz-selection {
  color: HighlightText !important;
  background: Highlight !important;
}