:root { --bg: #08090b; --ink: #f8f8f8; --cyan: #00dbe8; }
html { overflow-x: clip; }
body { overflow: visible; background: #08090b; }
.masthead { display: flex; align-items: center; justify-content: space-between; height: 96px; gap: 32px; border-bottom: 1px solid #242629; }
.masthead .brand { width: 208px; }
.masthead nav { display: flex; gap: 34px; font-size: 14px; color: #c5c7c9; }
.masthead nav a { padding: 12px 0; transition: color .2s; }
.masthead nav a:hover { color: white; }
.nav-contact { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 13px 18px; min-height: 48px; border: 1px solid #4b4e51; border-radius: 14px; background: linear-gradient(150deg,#ffffff16,#ffffff05); box-shadow: inset 0 1px 0 #ffffff12; color: #f8f8f8; font-size: 14px; }
.nav-contact:hover { background: #ffffff18; }
.nav-contact svg, .intro-button svg, .intro-work svg { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.intro { position: relative; padding-top: 34px; }
.intro-meta { display: flex; justify-content: space-between; font-size: 14px; line-height: 1.5; color: #9a9ba1; }
.intro h1 { position: relative; z-index: 2; max-width: none; font-size: clamp(60px,7.05vw,104px); font-weight: 700; line-height: 1.04; letter-spacing: -.058em; margin: 33px 0 0; }
.intro h1 span { color: var(--cyan); text-shadow: none; }
.intro-stage { display: grid; grid-template-columns: 38% 62%; min-height: 378px; position: relative; margin-top: 20px; align-items: center; }
.intro-brief { position: relative; z-index: 2; max-width: 370px; padding: 28px 0 36px; }
.intro-brief p { font-size: 17px; line-height: 1.6; color: #c0c2c7; margin: 0 0 27px; }
.intro-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 35px; min-height: 60px; padding: 18px 24px; border: 0; border-radius: 15px; background: #00dbe8; color: #081112; font-size: 16px; font-weight: 600; transition: background .2s, transform .2s; }
.intro-button:hover { background: #80f5f5; transform: translateY(-2px); }
.intro-work { display: flex; width: max-content; align-items: center; gap: 28px; padding: 16px 0 0; font-size: 14px; color: #aeb0b5; }
.intro-work:hover { color: white; }
.intro-work svg { width: 17px; height: 17px; }
.intro-figure { margin: 0; position: absolute; width: 66%; right: 0; top: -42px; height: 420px; pointer-events: none; perspective: 1100px; }
.intro-figure img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: lighten; mask-image: radial-gradient(ellipse 68% 75% at 50% 48%,black 51%,transparent 87%); transform: translate3d(var(--art-x,0px),var(--art-y,0px),0) rotate(var(--art-r,0deg)); transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.intro-services { position: relative; display: flex; align-items: center; justify-content: space-between; border-block: 1px solid #292b2d; min-height: 70px; font-size: 16px; }
.intro-services a { padding: 16px 0; color: #b6b9bd; transition: color .2s; }
.intro-services a:hover { color: var(--cyan); }
.intro-services a+a::before { content: '/'; color: #494c50; margin-right: clamp(16px,4vw,64px); }
@media (min-width:1500px) { .intro-stage { min-height: 435px; } .intro-figure { height: 540px; top: -90px; } }
@media (max-width:1050px) { .masthead { gap: 20px; } .masthead .brand { width: 176px; } .masthead nav { gap: 22px; } .nav-contact { font-size: 13px; padding: 12px 15px; gap: 8px; } .intro-brief { max-width: 320px; } .intro-figure { right: -12px; top: -38px; height: 375px; } .intro-stage { min-height: 345px; } .intro-brief p { font-size: 16px; } }
@media (max-width:760px) { .masthead { height: 82px; } .masthead nav { display: none; } .masthead .brand { width: 174px; } .nav-contact { min-height: 42px; font-size: 12px; } .nav-contact svg { display: none; } .intro { padding-top: 27px; } .intro-meta { font-size: 13px; } .intro-meta span:last-child { display: none; } .intro h1 { font-size: clamp(42px,7.5vw,60px); line-height: 1.06; margin-top: 24px; letter-spacing: -.05em; } .intro-stage { display: flex; flex-direction: column; align-items: stretch; margin-top: 5px; } .intro-brief { max-width: 460px; padding: 24px 0 0; } .intro-brief p { margin-bottom: 22px; } .intro-button { min-height: 54px; padding: 15px 20px; border-radius: 12px; } .intro-work { display: inline-flex; margin-left: 24px; font-size: 13px; gap: 10px; } .intro-figure { position: relative; width: 100%; height: auto; aspect-ratio: 1.5; right: auto; top: auto; margin-top: 14px; } .intro-services { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; padding-block: 8px; font-size: 14px; } .intro-services a { padding: 12px 0; } .intro-services a+a::before { content: none; } }
@media (max-width:440px) { .intro h1 { font-size: clamp(33px,8.55vw,38px); letter-spacing: -.05em; } .intro-work { margin-left: 18px; font-size: 12px; gap: 5px; } .intro-button { font-size: 14px; gap: 14px; } .intro-button svg { width: 18px; } .masthead { gap: 12px; } .masthead .brand { width: 158px; } .nav-contact { padding-inline: 12px; } .intro-brief p { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .intro-figure img { transform: none; } }