:root { color-scheme: light; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #f5f5f5; color: #10121c; font-family: Inter, Arial, sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; z-index: 30; top: -60px; left: 18px; padding: 12px 16px; background: #fff; color: #10121c; }
.skip-link:focus { top: 18px; }
.sticky-header { position: fixed; z-index: 20; left: 50%; top: 0; transform: translateX(-50%); width: min(100%, 1440px); height: calc(98px * var(--scale, 1)); background: #191919; }
.header-logo { position: absolute; left: calc(64px * var(--scale, 1)); top: calc(27px * var(--scale, 1)); display: block; width: calc(148px * var(--scale, 1)); height: calc(44px * var(--scale, 1)); transition: transform .2s ease, opacity .2s ease; }
.header-logo img { display: block; width: 100%; height: 100%; }
.header-logo:hover { transform: scale(1.04); }
.header-links { position: absolute; top: calc(40px * var(--scale, 1)); right: calc(53px * var(--scale, 1)); display: flex; gap: calc(69px * var(--scale, 1)); }
.header-nav { position: relative; color: #fff; font-size: calc(16px * var(--scale, 1)); line-height: 1.25; text-decoration: none; white-space: nowrap; }
.header-nav::after { content: ''; position: absolute; left: 50%; bottom: calc(-5px * var(--scale, 1)); width: 100%; height: 2px; background: #fff; transform: translateX(-50%) scaleX(0); transform-origin: center; transition: transform .2s ease; }
.header-nav:hover::after, .header-nav:focus-visible::after { transform: translateX(-50%) scaleX(1); }
.header-logo:focus-visible, .header-nav:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.reference-canvas { position: relative; width: min(100%, 1440px); aspect-ratio: 1440 / 3491; margin-inline: auto; overflow: hidden; --scale: 1; }
.design-stage { position: absolute; left: 0; top: 0; width: 1440px; height: 3491px; overflow: hidden; transform: scale(var(--scale)); transform-origin: top left; }
.page-base { position: absolute; inset: 0; background: #f5f5f5; }
.gradient-disc { position: absolute; pointer-events: none; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; opacity: .48; }
.disc-1 { left: -26px; top: 819px; width: 200px; height: 203px; background-image: url('assets/figma-v3/imgEllipse1.svg'); }
.disc-2 { left: 941px; top: 544px; width: 544px; height: 551px; background-image: url('assets/figma-v3/imgEllipse2.svg'); }
.disc-3 { left: 520px; top: 356px; width: 339px; height: 344px; background-image: url('assets/figma-v3/imgEllipse3.svg'); transform: rotate(45deg); }
.disc-4 { left: 1293px; top: 3192px; width: 162px; height: 164px; background-image: url('assets/figma-v3/imgEllipse4.svg'); transform: rotate(105deg); }
.disc-5 { left: -37px; top: 3003px; width: 480px; height: 488px; background-image: url('assets/figma-v3/imgEllipse5.svg'); transform: rotate(180deg); }
.disc-6 { left: 630px; top: 2762px; width: 290px; height: 294px; background-image: url('assets/figma-v3/imgEllipse6.svg'); transform: rotate(-60deg); }
.hero { position: absolute; z-index: 1; left: 60px; top: 123px; width: 1328px; height: 599px; overflow: hidden; border-radius: 40px; background: #fafafa; }
.hero-wash { position: absolute; inset: 0; background: radial-gradient(ellipse 470px 330px at 61% 72%, rgba(185,205,255,.22), transparent 75%); }
.hero-star { position: absolute; z-index: 1; left: 920px; top: 35px; width: 410px; height: 317px; transform: rotate(42deg); }
.hero-portrait { position: absolute; z-index: 2; left: 620px; top: 9px; width: 710px; height: 710px; object-fit: contain; }
.hero-eyebrow { position: absolute; z-index: 3; left: 50px; top: 50px; margin: 0; font-size: 17.6px; line-height: 1.25; }
.hero h1 { position: absolute; z-index: 3; left: 50px; top: 76px; margin: 0; font-size: 52px; font-weight: 700; line-height: 1.06; letter-spacing: -.025em; }
.hero-description { position: absolute; z-index: 3; left: 50px; top: 262px; margin: 0; width: 465px; color: #111; font-size: 19px; line-height: 1.0; }
.hero-button { position: absolute; z-index: 4; left: 51px; top: 476px; display: flex; align-items: center; justify-content: center; width: 303px; height: 73px; border-radius: 11px; background: #2452ff; color: #fff; font-size: 20px; font-weight: 700; text-decoration: none; transition: background-color .22s ease, transform .22s ease, box-shadow .22s ease; }
.hero-button:hover, .hero-button:focus-visible { background: #193fcf; transform: scale(1.035); box-shadow: 0 13px 28px rgba(25,65,207,.25); }
.hero-button:active { background: #1437b9; transform: scale(1.015); }
.hero-button:focus-visible { outline: 3px solid #10121c; outline-offset: 3px; }
.services { position: absolute; z-index: 1; left: 110px; top: 834px; width: 1220px; }
h2, h3, p { overflow-wrap: normal; }
.services h2, .benefits h2, .process-section h2 { margin: 0; font-size: 30.4px; font-weight: 700; line-height: 1.2; }
.service-grid { display: grid; grid-template-columns: repeat(3, 388px); gap: 28px; margin-top: 35px; }
.live-card { background: rgba(255,255,255,.92); transform: scale(1); transition: background-color .22s ease, color .22s ease, box-shadow .22s ease, transform .22s ease; }
.live-card:hover { position: relative; z-index: 3; background: #2452ff; color: #fff; box-shadow: 0 13px 27px rgba(36,82,255,.18); transform: scale(1.025); }
.service-card { height: 231px; padding: 35px 44px; border-radius: 12px; }
.service-card h3 { margin: 0; color: #2452ff; font-size: 21.6px; font-weight: 700; line-height: 1.2; }
.service-card p { margin: 35px 0 0; font-size: 16.8px; line-height: 1.25; }
.service-card:hover h3 { color: #fff; }
.projects-redesign { position: absolute; z-index: 2; left: 0; top: 1259px; width: 1440px; height: 578px; overflow: hidden; background: #191919; color: #fff; }
.projects-redesign h2 { position: absolute; left: 110px; top: 40px; margin: 0; font-size: 30.4px; line-height: 1.2; }
.project-viewport { position: absolute; left: 0; right: 0; top: 105px; height: 363px; overflow: hidden; }
.project-track { display: flex; gap: 34px; width: max-content; padding-left: 110px; transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.project-card { display: block; flex: none; width: 461px; height: 363px; overflow: hidden; border-radius: 29px; background: #fff; color: #10121c; text-decoration: none; box-shadow: 0 8px 12px rgba(0,0,0,.45); }
.project-card:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.project-image-placeholder { height: 256px; background: #fff; }
.project-meta { height: 107px; padding: 14px 20px; background: #f5f5f5; }
.project-meta h3 { margin: 0 0 3px; font-size: 20px; line-height: 1.1; }
.project-meta p { margin: 0 0 3px; font-size: 14px; line-height: 1.2; }
.project-date { color: #64666e; font-size: 12px; line-height: 1.2; }
.project-controls { position: absolute; left: 50%; bottom: 38px; display: flex; gap: 54px; transform: translateX(-50%); }
.project-arrow { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #151515; font: 26px/1 Inter, Arial, sans-serif; cursor: pointer; box-shadow: 0 3px 6px rgba(0,0,0,.23); transition: background-color .2s ease, transform .2s ease; }
.project-arrow:hover, .project-arrow:focus-visible { background: #e7ecff; transform: scale(1.08); }
.project-arrow:disabled { opacity: .55; cursor: default; transform: none; }
.project-arrow:focus-visible { outline: 2px solid #2452ff; outline-offset: 3px; }
.benefits { position: absolute; z-index: 1; left: 110px; top: 1919px; width: 1220px; }
.benefit-grid { display: grid; grid-template-columns: repeat(3, 388px); gap: 28px; margin-top: 32px; }
.benefit-card { height: 169px; padding: 27px 28px; border-radius: 10px; background: rgba(255,255,255,.72); }
.benefit-card h3 { margin: 0; font-size: 20px; line-height: 1.25; }
.benefit-card p { margin: 22px 0 0; font-size: 16.8px; line-height: 1.42; }
.process-section { position: absolute; z-index: 1; left: 90px; top: 2285px; width: 1260px; }
.process-section h2 { margin-left: 20px; font-size: 32px; }
.process-grid { display: grid; grid-template-columns: 407px 407px 407px; gap: 15px; margin-top: 63px; }
.process-card { position: relative; height: 232px; border: 6px solid #2452ff; background: rgba(255,255,255,.36); text-align: center; transform: scale(1); transition: background-color .22s ease, color .22s ease, box-shadow .22s ease, transform .22s ease; }
.process-number-wrap { position: absolute; left: 0; top: 36px; width: 100%; height: 56px; overflow: hidden; }
.process-number-wrap img { display: block; width: auto; height: 56px; margin: 0 auto; transition: filter .22s ease; }
.process-card h3 { position: absolute; top: 112px; left: 0; width: 100%; margin: 0; font-size: 20px; line-height: 1.3; }
.process-card p { position: absolute; top: 149px; left: 0; width: 100%; margin: 0; color: #595e6b; font-size: 16px; line-height: 1.22; }
.process-card:hover { z-index: 3; background: #2452ff; color: #fff; box-shadow: 0 13px 27px rgba(36,82,255,.22); transform: scale(1.02); }
.process-card:hover p { color: #fff; }
.process-card:hover img { filter: brightness(0) invert(1); }
.contact-redesign { position: absolute; z-index: 1; left: 52px; top: 2721px; width: 1328px; height: 582px; border-radius: 40px; background: radial-gradient(ellipse 440px 260px at 51% 58%, rgba(214,226,255,.25), transparent 80%), radial-gradient(ellipse 460px 320px at 4% 98%, rgba(164,190,255,.24), transparent 80%), #fafafa; }
.contact-heading { position: absolute; left: 0; right: 0; top: 111px; margin: 0; font-size: 50px; font-weight: 700; line-height: 1.1; letter-spacing: -.025em; text-align: center; }
.contact-heading span { color: #2452ff; }
.social-links { position: absolute; left: 76px; top: 244px; display: flex; justify-content: center; gap: 30px; width: 1200px; height: 42px; }
.social-links a { display: flex; flex: 0 0 255px; align-items: center; justify-content: center; gap: 9px; color: #10121c; font-size: 21px; font-weight: 500; line-height: 1.2; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; transition: color .2s ease, transform .2s ease; }
.social-links a img { width: 27px; height: 27px; object-fit: contain; }
.social-links a:hover, .social-links a:focus-visible { color: #2452ff; transform: translateY(-2px); }
.social-links a:focus-visible { outline: 2px solid #2452ff; outline-offset: 5px; }
.contact-note { position: absolute; left: 30px; right: 30px; top: 335px; margin: 0; color: #a2a7b0; font-size: 26px; line-height: 1.25; text-align: center; }
.footer-panel { position: absolute; z-index: 2; left: 0; top: 3367px; display: flex; align-items: center; justify-content: space-between; width: 1440px; height: 124px; padding: 0 60px; background: #191919; color: #fff; transform-origin: center bottom; transition: transform .22s ease, box-shadow .22s ease; }
.footer-panel > span { font-size: 20.8px; font-weight: 700; }
.footer-contact { display: flex; align-items: center; justify-content: center; min-width: 170px; height: 52px; border-radius: 8px; color: #fff; font-size: 17.6px; font-weight: 700; text-decoration: none; transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.footer-panel:hover { transform: scale(1.02); box-shadow: 0 -12px 28px rgba(36,82,255,.2); }
.footer-panel:hover .footer-contact, .footer-contact:focus-visible { background: #fff; color: #2452ff; transform: scale(1.03); }
.footer-contact:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.jump-anchor { position: absolute; left: 0; width: 1px; height: 1px; scroll-margin-top: 115px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }