/* Home hero: aurora light, translucent glass and the original portrait. */
.home-page:before {
    display:none
}

.home-page .nav {
    background:rgba(23,22,46,.78);
    border:1px solid rgba(225,213,255,.16);
    box-shadow:inset 0 1px 0 #ffffff12,0 12px 40px #08091724;
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    color:#f6f2ff
}

.home-page .nav .brand-mark {
    background:linear-gradient(145deg,#d7bdff,#a586f0);
    color:#30204d;
    box-shadow:inset 0 1px 0 #ffffff70,0 0 24px #b193ff25
}

.home-page .nav-links>a:hover,.home-page .nav-links>a[aria-current] {
    background:#ffffff0d;
    box-shadow:none
}

.home-page .nav-links .contact-link,.home-page .menu-toggle {
    background:#d4b8ff;
    color:#29203e;
    box-shadow:inset 0 1px 0 #ffffff70,0 4px 18px #a889ed20
}

.home-page .nav-links .contact-link:hover {
    background:#e0caff
}

.hero-shell {
    --hero-ink:#f5f1ff;
    --hero-muted:#c6bfdc;
    position:relative;
    isolation:isolate;
    overflow:clip;
    margin-top:-108px;
    padding:108px 0 34px;
    border-radius:0 0 48px 48px;
    background:#111225;
    color:var(--hero-ink)
}

.hero-atmosphere {
    position:absolute;
    z-index:-1;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    background:radial-gradient(ellipse at 73% 44%,#34295080,transparent 58%),linear-gradient(130deg,#101323,#1b1533 70%,#17182f)
}

.hero-aurora {
    position:absolute;
    width:780px;
    height:780px;
    border-radius:50%;
    opacity:.64;
    background:radial-gradient(circle, var(--aurora-color) 0%,transparent 66%);
    will-change:transform
}

.hero-aurora--violet {
    --aurora-color:#8358d58c;
    top:-330px;
    left:16%
}

.hero-aurora--blue {
    --aurora-color:#479bcc70;
    top:70px;
    right:-220px;
    width:920px;
    height:920px
}

.hero-aurora--pink {
    --aurora-color:#c760b451;
    bottom:-440px;
    left:14%
}

.hero-grid {
    position:absolute;
    inset:0;
    opacity:.36;
    background-image:linear-gradient(#e5d7ff0c 1px,transparent 1px),linear-gradient(90deg,#e5d7ff0c 1px,transparent 1px);
    background-size:72px 72px;
    mask-image:linear-gradient(90deg,transparent,black 65%,transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,black 65%,transparent)
}

.hero-shell .hero {
    grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
    gap:42px;
    padding:76px 0 40px;
    min-height:690px
}

.hero-shell .hero-copy {
    position:relative;
    z-index:2;
    min-width:0
}

.hero-shell .eyebrow {
    border:1px solid #d3baff30;
    padding:9px 14px;
    margin-bottom:26px;
    background:#cab4ff0c;
    color:#dfd0ff;
    box-shadow:inset 0 1px 0 #ffffff0c;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    font-size:11px;
    letter-spacing:1.5px
}

.hero-shell .eyebrow:before {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#cfb6ff;
    box-shadow:0 0 12px #c4a6ff90
}

.hero-shell h1 {
    font-family:var(--font);
    font-weight:900;
    font-size:clamp(48px,5.3vw,76px);
    line-height:1.06;
    letter-spacing:-3.2px;
    margin:0
}

.hero-shell h1 span {
    padding:0 0 .12em;
    margin:0;
    border-radius:0;
    box-shadow:none;
    transform:none;
    color:#cfb6ff;
    background:linear-gradient(100deg,#dcbeff 10%,#b4b3ff 55%,#8ee5ef 100%);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent
}

.hero-shell .hero-lead {
    max-width:515px;
    margin:23px 0 28px;
    font-size:17px;
    font-weight:500;
    line-height:1.8;
    color:var(--hero-muted)
}

.hero-shell .hero-lead strong {
    color:var(--hero-ink);
    font-weight:800
}

.hero-shell .actions {
    gap:12px
}

.hero-shell .hero .button {
    border-radius:16px;
    min-height:54px;
    padding:16px 22px;
    font-size:14px;
    font-weight:900;
    box-shadow:inset 0 1px 0 #ffffff50,0 8px 28px #0c0b2520
}

.hero-shell .hero .button.primary {
    background:linear-gradient(120deg,#dfc6ff,#beb9ff);
    color:#29203f
}

.hero-shell .button.primary span {
    font-size:21px;
    line-height:1
}

.hero-shell .hero .button.secondary {
    color:#f0eaff;
    background:#ffffff08;
    border:1px solid #e0d6ff30;
    box-shadow:inset 0 1px 0 #ffffff0c;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px)
}

.hero-shell .button:hover {
    box-shadow:inset 0 1px 0 #ffffff60,0 8px 30px #baa0ff20
}

.hero-shell :focus-visible {
    outline-color:#c9b0ff
}

.hero-proof {
    display:flex;
    gap:27px;
    margin-top:32px;
    padding-top:23px;
    border-top:1px solid #dfd6ff1a;
    max-width:460px
}

.hero-proof>div+div {
    border-left:1px solid #dfd6ff25;
    padding-left:27px
}

.hero-proof strong,.hero-proof span {
    display:block
}

.hero-proof strong {
    font-size:17px;
    line-height:1.4;
    font-weight:800;
    color:#e8dcff
}

.hero-proof span {
    font-size:11px;
    margin-top:4px;
    color:#bcb2d0;
    font-weight:500
}

.hero-shell .hero-visual {
    height:555px;
    width:100%;
    max-width:540px;
    margin:0 auto;
    min-width:0
}

.hero-orbit {
    position:absolute;
    border:1px solid #d6bbff20;
    border-radius:50%;
    pointer-events:none
}

.hero-orbit--outer {
    inset:13px -25px 5px;
    transform:rotate(-24deg) scaleY(.83)
}

.hero-orbit--inner {
    inset:34px -5px 31px;
    transform:rotate(22deg) scaleX(.88);
    border-color:#a5deec20
}

.hero-orbit--outer:after {
    content:'';
    position:absolute;
    top:16%;
    right:13%;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#d8c0ff;
    box-shadow:0 0 18px #c7a1ff
}

.hero-shell .portrait-stage {
    inset:27px 41px 42px 34px;
    border:1px solid #e0d9ff40;
    border-radius:180px 180px 42px 42px;
    background:linear-gradient(145deg,#c4b0fc1e,#afd8e414 55%,#bddbff06);
    box-shadow:inset 0 1px 0 #ffffff30,inset 0 -1px 0 #ffffff10,0 25px 70px #060b2730;
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    transform:rotate(-3deg);
    transition:transform .4s ease-out
}

.hero-shell .portrait-stage:before {
    inset:12px;
    border:1px solid #ebe6ff12;
    border-radius:inherit;
    background:radial-gradient(ellipse at 50% 33%,#c3bbff25,transparent 66%);
    box-shadow:none
}

.hero-shell .portrait-stage img {
    height:104%;
    width:100%;
    left:0;
    bottom:-8%;
    filter:drop-shadow(0 16px 24px #090b3430);
    mask-image:linear-gradient(black 65%,transparent 96%);
    -webkit-mask-image:linear-gradient(black 65%,transparent 96%)
}

.hero-visual-note {
    position:absolute;
    top:3px;
    right:15px;
    z-index:3;
    font-size:11px;
    font-weight:600;
    letter-spacing:.3px;
    color:#dfd2f5
}

.hero-visual-note>span {
    margin-right:6px;
    color:#c9b2ff
}

.hero-shell .float-label {
    background:rgba(37,34,65,.82);
    border:1px solid #e0d7ff30;
    box-shadow:inset 0 1px 0 #ffffff18,0 16px 40px #060b2430;
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    border-radius:21px;
    padding:17px 19px;
    color:var(--hero-ink)
}

.hero-shell .float-label.top {
    top:53%;
    right:-8px;
    gap:12px;
    transform:rotate(3deg)
}

.hero-shell .float-label.top .code-icon {
    background:linear-gradient(145deg,#c0b2ff28,#a6dbe81a);
    border:1px solid #d5c3ff35;
    box-shadow:inset 0 1px 0 #ffffff15;
    color:#d5c3ff;
    border-radius:13px;
    width:43px;
    height:43px;
    font-size:19px
}

.hero-shell .float-label strong,.hero-shell .float-label.bottom b {
    font-family:var(--font);
    font-weight:800
}

.hero-shell .float-label strong {
    font-size:16px
}

.hero-shell .float-label span {
    color:#c6b9df;
    font-size:11px;
    font-weight:500
}

.hero-shell .float-label.bottom {
    bottom:19px;
    left:5px;
    min-width:285px;
    transform:rotate(-3deg);
    padding:18px 22px
}

.hero-shell .float-label.bottom>span {
    color:#c4afec;
    font-size:9px;
    letter-spacing:1.4px;
    font-weight:800
}

.hero-shell .float-label.bottom b {
    font-size:18px;
    margin:7px 0
}

.hero-shell .mini-brand {
    box-shadow:inset 0 1px 0 #ffffff30;
    border:1px solid #ffffff12;
    border-radius:10px
}

.hero-shell .mini-brand.pimer {
    background:#fff0e4
}

.hero-shell .float-roles>span {
    font-size:10px;
    font-weight:800
}

.hero-shell .visual-caption {
    display:block;
    bottom:-10px;
    right:24px;
    color:#c0b2d8;
    font-size:8px;
    letter-spacing:2px;
    font-weight:600
}

.hero-shell .hero-line {
    padding:22px 0;
    color:#c5b9da;
    font-size:10px;
    letter-spacing:1px;
    font-weight:700
}

.hero-location-dot {
    width:6px;
    height:6px;
    border-radius:50%;
    background:#9bd9d0;
    box-shadow:0 0 10px #9bd9d050
}

.hero-shell .hero-motion-toggle {
    margin:0;
    padding:9px 12px;
    min-height:36px;
    border:1px solid #dfd1ff20;
    border-radius:10px;
    background:#ffffff06;
    box-shadow:none;
    font-size:10px;
    color:#cfc3e4;
    font-weight:600;
    letter-spacing:0
}

.hero-shell .hero-motion-toggle:hover {
    background:#ffffff10;
    color:white
}

.hero-shell .mouse {
    border-color:#c8b4e980
}

.hero-shell .mouse:before {
    background:#d9c7f6
}

.hero-shell .expertise-strip {
    background:#ffffff06;
    border:1px solid #dfd1ff1c;
    border-radius:20px;
    box-shadow:inset 0 1px 0 #ffffff08;
    color:#dbd0ed;
    padding:20px 27px;
    font-family:var(--font);
    font-size:13px;
    font-weight:600;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px)
}

.hero-shell .expertise-strip i {
    width:4px;
    height:4px;
    background:#b9a2d6;
    box-shadow:none
}

.motion-on .hero-aurora--violet {
    animation:hero-aurora-drift 24s ease-in-out infinite alternate
}

.motion-on .hero-aurora--blue {
    animation:hero-aurora-drift 30s ease-in-out -11s infinite alternate-reverse
}

.motion-on .hero-aurora--pink {
    animation:hero-aurora-drift 28s ease-in-out -17s infinite alternate
}

.motion-on .hero-shell .float-label.top {
    animation:hero-glass-float 10s ease-in-out infinite
}

.motion-on .hero-shell .float-label.bottom {
    animation:hero-glass-float 12s ease-in-out -4s infinite reverse
}

.hero-shell.hero-idle .hero-aurora,.hero-shell.hero-idle .float-label {
    animation-play-state:paused
}

.hero-shell.hero-idle .hero-aurora {
    will-change:auto
}

@keyframes hero-aurora-drift {
    from { transform:translate3d(-35px,-25px,0) scale(.95) }
    to { transform:translate3d(65px,45px,0) scale(1.13) }
}

@keyframes hero-glass-float {
    0%,100% { translate:0 0 }
    50% { translate:0 -8px }
}

@media(max-width:1150px) {
    .hero-shell .hero { gap:25px; min-height:650px; padding-top:62px }
    .hero-shell h1 { font-size:clamp(46px,5.8vw,65px); letter-spacing:-2.6px }
    .hero-shell .hero-visual { height:515px }
    .hero-shell .hero .button { padding-inline:17px }
    .hero-shell .portrait-stage { inset-inline:20px }
    .hero-shell .float-label.top { right:-4px }
    .hero-shell .float-label.bottom { left:-6px; min-width:265px }
}

@media(max-width:900px) {
    .hero-shell { margin-top:-102px; padding-top:102px }
    .home-page .nav-links { background:rgba(27,25,49,.97); border:1px solid #dfd1ff25; box-shadow:0 18px 45px #0b0a2825; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px) }
    .hero-shell .hero { gap:20px; min-height:600px; padding:52px 0 28px }
    .hero-shell h1 { font-size:clamp(44px,5.7vw,52px); letter-spacing:-2px }
    .hero-shell .hero-lead { font-size:16px; line-height:1.75 }
    .hero-shell .hero-visual { height:465px }
    .hero-shell .portrait-stage { inset:24px 20px 40px; border-radius:150px 150px 34px 34px }
    .hero-shell .float-label.top { padding:13px; gap:9px; right:0 }
    .hero-shell .float-label.top .code-icon { width:34px; height:34px; font-size:16px }
    .hero-shell .float-label strong { font-size:14px }
    .hero-shell .float-label.bottom { min-width:240px; padding:16px 18px; left:0 }
    .hero-shell .float-label.bottom b { font-size:16px }
    .hero-proof { gap:18px; margin-top:26px; padding-top:20px }
    .hero-proof>div+div { padding-left:18px }
    .hero-proof strong { font-size:14px }
    .hero-proof span { font-size:10px }
    .hero-shell .expertise-strip { gap:12px 20px }
}

@media(max-width:760px) {
    .hero-shell .hero { display:grid; grid-template-columns:minmax(0,1fr); gap:35px; padding-top:48px }
    .hero-shell .hero-copy { max-width:600px }
    .hero-shell h1 { font-size:clamp(46px,8.6vw,64px); letter-spacing:-2.4px }
    .hero-shell .hero-lead { max-width:520px }
    .hero-shell .hero-visual { width:420px; max-width:100%; height:500px }
    .hero-shell .portrait-stage { inset:25px 28px 43px }
    .hero-shell .float-label.top { right:0 }
    .hero-shell .float-label.bottom { min-width:275px }
    .hero-shell .float-label.bottom b { font-size:18px }
    .hero-shell .hero-line { flex-wrap:wrap; gap:14px; justify-content:space-between }
    .hero-shell .scroll-cue { margin-left:auto }
    .hero-shell .cities { width:100% }
    .hero-shell .expertise-strip { display:grid; grid-template-columns:1fr 1fr; padding:20px; gap:16px; justify-content:normal }
    .hero-shell .expertise-strip i { display:none }
    .hero-shell .expertise-strip>span { font-size:12px }
}

@media(max-width:600px) {
    .hero-shell { margin-top:-90px; padding:90px 0 24px; border-radius:0 0 30px 30px }
    .hero-shell .hero { padding:42px 4px 22px; gap:30px }
    .hero-shell .eyebrow { font-size:9px; letter-spacing:1.2px; padding:9px 12px; margin-bottom:24px }
    .hero-shell h1 { font-size:clamp(42px,10.8vw,62px); line-height:1.08; letter-spacing:-1.9px }
    .hero-shell h1 span { padding:0 0 .12em; margin:0 }
    .hero-shell .hero-lead { font-size:15px; margin:19px 0 23px; line-height:1.8 }
    .hero-shell .hero .button { min-height:49px!important; font-size:14px!important; padding:14px 16px; border-radius:13px }
    .hero-shell .actions { display:grid; grid-template-columns:minmax(0,1fr); gap:10px }
    .hero-proof { margin-top:25px; gap:17px }
    .hero-proof>div+div { padding-left:17px }
    .hero-shell .hero-visual { height:440px; width:370px; margin:4px auto 8px }
    .hero-shell .portrait-stage { inset:24px 25px 34px; border-radius:140px 140px 32px 32px }
    .hero-shell .float-label.top { top:53%; padding:13px 14px; border-radius:16px }
    .hero-shell .float-label.bottom { bottom:10px; min-width:252px; padding:16px 18px; border-radius:18px }
    .hero-shell .float-label.bottom b { font-size:17px }
    .hero-shell .float-label.bottom>span { font-size:8px }
    .hero-shell .hero-visual-note { right:8px; font-size:10px }
    .hero-shell .hero-orbit--outer { inset-inline:-10px }
    .hero-shell .visual-caption { right:8px; font-size:7px; letter-spacing:1.4px; bottom:-15px }
    .hero-shell .hero-line { padding:20px 4px 18px; font-size:9px }
    .hero-shell .cities { gap:8px }
    .hero-shell .scroll-cue { letter-spacing:0 }
    .hero-aurora { width:620px; height:620px }
    .hero-aurora--violet { left:-200px; top:-180px }
    .hero-aurora--blue { top:420px; right:-270px }
    .hero-aurora--pink { left:-200px; bottom:-250px }
}

@media(max-width:370px) {
    .hero-shell h1 { font-size:39px; letter-spacing:-1.8px }
    .hero-shell .hero .button { padding-inline:13px; font-size:13px!important }
    .hero-proof strong { font-size:12px }
    .hero-proof span { font-size:9px }
    .hero-shell .hero-visual { height:415px }
    .hero-shell .float-label.bottom { min-width:237px }
    .hero-shell .expertise-strip { padding:17px 14px; gap:14px 10px }
    .hero-shell .expertise-strip>span { font-size:11px }
}

@media(prefers-reduced-motion:reduce) {
    .hero-aurora { will-change:auto }
}

.no-motion .hero-aurora {
    will-change:auto
}