:root {
    --signal: #19c8f3;
    --signal-soft: #72e4ff;
    --midnight: #050b12;
    --graphite: #0a141e;
    --steel: #a9b8c2;
    --ice: #edf6f8;
}

body.intro-locked {
    overflow: hidden;
}

body[data-page="home"] {
    background: var(--ice);
}

.brand-intro {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: grid;
    overflow: hidden;
    place-items: center;
    color: #fff;
    background:
        radial-gradient(circle at 50% 44%, rgba(18, 177, 231, .22), transparent 25%),
        radial-gradient(circle at 50% 118%, rgba(0, 116, 176, .2), transparent 40%),
        linear-gradient(135deg, #020609 0%, #06121a 50%, #02070b 100%);
    transition: opacity .8s var(--ease), visibility .8s;
}

.brand-intro::before,
.brand-intro::after {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    letter-spacing: -.08em;
    line-height: 1;
}

.brand-intro::before {
    left: 2.5vw;
    bottom: -3.5vw;
    content: "YE";
    color: transparent;
    font-size: clamp(180px, 31vw, 620px);
    -webkit-text-stroke: 1px rgba(79, 209, 247, .06);
}

.brand-intro::after {
    right: 3vw;
    top: 4vh;
    content: "2005 / İSTANBUL";
    color: rgba(155, 207, 224, .25);
    font-size: 9px;
    letter-spacing: .34em;
}

.brand-intro[hidden] {
    display: none !important;
}

.brand-intro.is-leaving {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.intro-grid {
    position: absolute;
    inset: -20%;
    opacity: .17;
    background-image:
        linear-gradient(rgba(65, 204, 255, .11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(65, 204, 255, .11) 1px, transparent 1px);
    background-size: 84px 84px;
    transform: perspective(600px) rotateX(68deg) translateY(38%);
    transform-origin: center bottom;
    mask-image: linear-gradient(to top, #000, transparent 72%);
}

.intro-beam {
    position: absolute;
    width: 1px;
    height: 180%;
    top: -40%;
    background: linear-gradient(transparent, rgba(95, 226, 255, .95), transparent);
    box-shadow: 0 0 24px rgba(31, 204, 255, .95);
    opacity: 0;
}

.intro-beam-a { left: 22%; transform: rotate(28deg); }
.intro-beam-b { right: 22%; transform: rotate(-28deg); }

.intro-stage {
    position: relative;
    width: min(920px, calc(100% - 48px));
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    perspective: 1200px;
    text-align: center;
    isolation: isolate;
}

.intro-stage::before {
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    width: min(820px, 84vw);
    height: min(260px, 35vh);
    content: "";
    border: 1px solid rgba(94, 218, 251, .1);
    background: linear-gradient(105deg, transparent 20%, rgba(79, 214, 252, .08) 50%, transparent 80%);
    box-shadow: inset 0 0 80px rgba(24, 153, 198, .06), 0 0 100px rgba(0, 0, 0, .35);
    transform: translate(-50%, -50%) skewX(-8deg);
}

.intro-orbit {
    position: absolute;
    left: 50%;
    top: 42%;
    border: 1px solid rgba(66, 212, 255, .24);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotateX(67deg);
}

.intro-orbit::before,
.intro-orbit::after {
    position: absolute;
    border-radius: inherit;
    content: "";
}

.intro-orbit::before {
    inset: -7px;
    border: 1px dashed rgba(255, 255, 255, .12);
}

.intro-orbit::after {
    width: 9px;
    height: 9px;
    top: 50%;
    left: -5px;
    background: var(--signal-soft);
    box-shadow: 0 0 22px var(--signal);
}

.intro-orbit-a { width: 660px; height: 660px; }
.intro-orbit-b { width: 470px; height: 470px; transform: translate(-50%, -50%) rotateX(67deg) rotateZ(52deg); }

.intro-logo-stack {
    position: relative;
    width: min(680px, 76vw);
    aspect-ratio: 891 / 91;
    margin-bottom: 48px;
    transform-style: preserve-3d;
    transform: rotateX(9deg) rotateY(-5deg) rotateZ(-.5deg) scale(.9);
    opacity: 1;
}

.intro-logo-stack::before {
    position: absolute;
    z-index: -1;
    inset: -90% -14%;
    content: "";
    border-radius: 50%;
    background: conic-gradient(from 20deg, transparent, rgba(76, 218, 255, .08), transparent 30%, rgba(76, 218, 255, .13), transparent 62%);
    filter: blur(6px);
    opacity: 0;
}

.intro-logo-stack::after {
    position: absolute;
    z-index: 4;
    top: -42%;
    bottom: -42%;
    left: -28%;
    width: 13%;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(180, 240, 255, .84), transparent);
    filter: blur(3px);
    mix-blend-mode: screen;
    opacity: 0;
    transform: skewX(-18deg);
}

.intro-logo-stack img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(calc(.38 + (7 - var(--layer)) * .09)) saturate(1.2);
    transform: translate3d(calc(var(--layer) * -.55px), calc(var(--layer) * .65px), calc(var(--layer) * -2px));
}

.intro-logo-stack img:last-child {
    filter: drop-shadow(0 0 20px rgba(43, 207, 255, .35));
}

.intro-stage > p {
    margin: 0 0 10px;
    color: var(--signal-soft);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .42em;
    text-transform: uppercase;
}

.intro-title {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(17px, 2vw, 26px);
    font-weight: 650;
    letter-spacing: .12em;
}

.intro-actions {
    display: flex;
    align-items: center;
    margin-top: 40px;
}

.intro-start,
.intro-skip,
.intro-sound {
    border: 0;
    cursor: pointer;
}

.intro-start {
    min-width: 220px;
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 10px 0 24px;
    color: #06101a;
    background: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.intro-start span {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    color: #fff;
    background: #07131e;
    border-radius: 50%;
}

.intro-skip {
    position: absolute;
    z-index: 3;
    right: 30px;
    bottom: 24px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border: 1px solid rgba(142, 210, 231, .2);
    color: rgba(255, 255, 255, .68);
    background: rgba(6, 17, 24, .5);
    backdrop-filter: blur(12px);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
}

.intro-skip span {
    color: var(--signal-soft);
    font-size: 13px;
}

.intro-progress {
    position: absolute;
    left: 50%;
    bottom: 34px;
    width: min(380px, 46vw);
    height: 1px;
    overflow: hidden;
    background: rgba(255, 255, 255, .13);
    transform: translateX(-50%);
}

.intro-progress i {
    display: block;
    width: 0;
    height: 100%;
    background: var(--signal-soft);
    box-shadow: 0 0 18px var(--signal);
}

.intro-sound {
    position: absolute;
    left: 30px;
    bottom: 24px;
    color: rgba(255, 255, 255, .48);
    background: transparent;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
}

.intro-sound span { color: var(--signal-soft); }

.brand-intro.is-running .intro-logo-stack {
    animation: intro-logo-flight 6.7s linear both;
}

.brand-intro.is-running .intro-logo-stack::before { animation: intro-logo-energy 6.7s linear both; }
.brand-intro.is-running .intro-logo-stack::after { animation: intro-logo-scan 6.7s linear both; }
.brand-intro.is-running .intro-logo-stack img { animation: intro-layer-energy 6.7s linear both; }
.brand-intro.is-running .intro-stage { animation: intro-stage-drift 6.7s linear both; }

.brand-intro.is-running .intro-orbit-a { animation: intro-orbit-spin 6.7s linear both; }
.brand-intro.is-running .intro-orbit-b { animation: intro-orbit-spin-alt 6.7s linear both; }
.brand-intro.is-running .intro-beam-a { animation: intro-beam 2.7s .55s ease both; }
.brand-intro.is-running .intro-beam-b { animation: intro-beam 2.4s 2.2s ease both; }
.brand-intro.is-running .intro-progress i { animation: intro-progress 6.7s linear both; }
.brand-intro.is-running .intro-actions { pointer-events: none; opacity: 0; transition: opacity .35s ease; }
.brand-intro.is-running .intro-skip { animation: intro-skip-reveal .5s 1.15s var(--ease) forwards; pointer-events: auto; }
.brand-intro.is-running .intro-stage > p,
.brand-intro.is-running .intro-title { animation: intro-copy-flow 6.7s linear both; }
.brand-intro.is-running .intro-stage::before { animation: intro-panel-sweep 6.7s var(--ease) both; }

@keyframes intro-logo-flight {
    0% { opacity: 0; transform: translate3d(0, 34px, -300px) rotateX(64deg) rotateY(-13deg) rotateZ(-7deg) scale(.52); filter: blur(8px); }
    12% { opacity: .72; filter: blur(2px); }
    27% { opacity: 1; transform: translate3d(-9px, 12px, -90px) rotateX(38deg) rotateY(-8deg) rotateZ(-4deg) scale(.76); filter: blur(0); }
    48% { transform: translate3d(5px, -2px, 8px) rotateX(15deg) rotateY(-3deg) rotateZ(-1.2deg) scale(.94); }
    68% { transform: translate3d(-3px, -8px, 34px) rotateX(5deg) rotateY(2deg) rotateZ(.2deg) scale(1.01); }
    84% { opacity: 1; transform: translate3d(4px, -15px, 78px) rotateX(0) rotateY(4deg) rotateZ(.8deg) scale(1.075); filter: blur(0); }
    100% { opacity: 0; transform: translate3d(0, -34px, 190px) rotateX(-4deg) rotateY(7deg) rotateZ(1.5deg) scale(1.19); filter: blur(6px); }
}

@keyframes intro-logo-energy {
    0% { opacity: 0; transform: rotate(-12deg) scale(.65); }
    18% { opacity: .8; }
    82% { opacity: .32; transform: rotate(210deg) scale(1.08); }
    100% { opacity: 0; transform: rotate(260deg) scale(1.22); }
}

@keyframes intro-logo-scan {
    0%, 9% { left: -28%; opacity: 0; }
    16% { opacity: .9; }
    43% { left: 112%; opacity: .22; }
    44%, 56% { left: -28%; opacity: 0; }
    63% { opacity: .68; }
    88% { left: 112%; opacity: .12; }
    100% { left: 112%; opacity: 0; }
}

@keyframes intro-layer-energy {
    0% { filter: brightness(.45) saturate(.75); }
    24% { filter: brightness(.88) saturate(1.22) drop-shadow(0 0 8px rgba(59, 214, 255, .18)); }
    62% { filter: brightness(1.08) saturate(1.32) drop-shadow(0 0 22px rgba(59, 214, 255, .35)); }
    100% { filter: brightness(.84) saturate(1.1) drop-shadow(0 0 30px rgba(59, 214, 255, .12)); }
}

@keyframes intro-stage-drift {
    from { transform: translateY(8px) scale(.985); }
    to { transform: translateY(-10px) scale(1.015); }
}

@keyframes intro-orbit-spin {
    from { opacity: .15; transform: translate(-50%, -50%) rotateX(67deg) rotateZ(0); }
    70% { opacity: .6; }
    to { opacity: 0; transform: translate(-50%, -50%) rotateX(67deg) rotateZ(280deg) scale(1.3); }
}

@keyframes intro-orbit-spin-alt {
    from { opacity: .08; transform: translate(-50%, -50%) rotateX(67deg) rotateZ(52deg); }
    to { opacity: 0; transform: translate(-50%, -50%) rotateX(67deg) rotateZ(-210deg) scale(.72); }
}

@keyframes intro-beam {
    0%, 100% { opacity: 0; }
    35%, 64% { opacity: .8; }
}

@keyframes intro-progress { to { width: 100%; } }
@keyframes intro-skip-reveal { to { opacity: 1; transform: translateY(0); } }
@keyframes intro-copy-flow {
    0%, 12% { opacity: 0; transform: translateY(12px); }
    26%, 72% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-18px); }
}
@keyframes intro-panel-sweep {
    0% { opacity: 0; transform: translate(-50%, -50%) skewX(-8deg) scaleX(.45); }
    18%, 72% { opacity: 1; transform: translate(-50%, -50%) skewX(-8deg) scaleX(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) skewX(-8deg) scaleX(1.22); }
}

.page-signal {
    position: fixed;
    z-index: 90;
    left: 22px;
    top: 50%;
    width: 1px;
    height: 34vh;
    pointer-events: none;
    background: rgba(11, 35, 50, .14);
    transform: translateY(-50%);
}

.page-signal i {
    position: absolute;
    left: -3px;
    top: var(--signal-y, 0%);
    width: 7px;
    height: 7px;
    border: 1px solid var(--signal);
    border-radius: 50%;
    background: var(--ice);
    box-shadow: 0 0 12px var(--signal);
    transition: top .16s linear;
}

.page-signal span {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: var(--signal-y, 0%);
    background: var(--signal);
    box-shadow: 0 0 10px rgba(25, 200, 243, .55);
}

body[data-page="home"] .cinematic-hero {
    display: block;
    height: auto;
    min-height: 100svh;
    max-height: none;
    background: #060c12;
}

body[data-page="home"] .cinematic-media .hero-frame img {
    filter: saturate(.86) contrast(1.04);
}

body[data-page="home"] .cinematic-overlay {
    background:
        linear-gradient(90deg, rgba(3, 9, 14, .94) 0%, rgba(3, 9, 14, .72) 43%, rgba(3, 9, 14, .14) 78%),
        linear-gradient(0deg, rgba(3, 9, 14, .76) 0%, transparent 48%);
}

.hero-blueprint {
    position: absolute;
    z-index: 2;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-blueprint::before,
.hero-blueprint::after {
    position: absolute;
    content: "";
    opacity: .26;
}

.hero-blueprint::before {
    inset: 0;
    background-image:
        linear-gradient(rgba(69, 210, 255, .1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(69, 210, 255, .1) 1px, transparent 1px);
    background-size: 86px 86px;
    mask-image: linear-gradient(90deg, #000, transparent 68%);
}

.hero-blueprint::after {
    width: 52vw;
    height: 52vw;
    right: -18vw;
    top: 10vh;
    border: 1px solid var(--signal);
    border-radius: 50%;
    box-shadow: 0 0 80px rgba(25, 200, 243, .16), inset 0 0 80px rgba(25, 200, 243, .08);
}

.hero-blueprint i {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(83, 218, 255, .7), transparent);
}

.hero-blueprint i:nth-child(1) { top: 22%; left: 52%; width: 38%; height: 1px; animation: signal-pulse 3.8s ease-in-out infinite; }
.hero-blueprint i:nth-child(2) { top: 28%; left: 64%; width: 1px; height: 34%; background: linear-gradient(transparent, rgba(83, 218, 255, .6), transparent); animation: signal-pulse 4.3s 1s ease-in-out infinite; }
.hero-blueprint i:nth-child(3) { bottom: 17%; left: 46%; width: 45%; height: 1px; animation: signal-pulse 5s .4s ease-in-out infinite; }
.hero-blueprint i:nth-child(4) { bottom: 12%; left: 72%; width: 8px; height: 8px; border: 1px solid var(--signal); background: transparent; box-shadow: 0 0 16px var(--signal); animation: signal-node 2s ease-in-out infinite; }

@keyframes signal-pulse { 0%,100% { opacity: .15; transform: scaleX(.55); } 50% { opacity: 1; transform: scaleX(1); } }
@keyframes signal-node { 50% { transform: scale(1.8); opacity: .45; } }

body[data-page="home"] .cinematic-content {
    position: relative;
    z-index: 4;
    height: auto;
    min-height: max(100svh, 1040px);
    display: grid;
    align-content: start;
    grid-template-columns: 72px minmax(0, 1040px);
    gap: 26px;
    padding-top: clamp(178px, 18vh, 222px);
    padding-bottom: 200px;
}

.hero-index {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 14px;
    padding-top: 14px;
    color: rgba(255, 255, 255, .62);
    font-family: "Space Grotesk", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2em;
}

.hero-index i { width: 1px; height: 86px; background: linear-gradient(var(--signal), transparent); }
.hero-index b { color: var(--signal-soft); writing-mode: vertical-rl; }

body[data-page="home"] .cinematic-copy {
    width: min(1040px, 100%);
}

body[data-page="home"] .hero-motion-title {
    max-width: 1040px;
    margin-bottom: 30px;
    font-size: clamp(52px, 5vw, 88px);
    line-height: .94;
    letter-spacing: -.058em;
}

body[data-page="home"] .hero-motion-title em {
    color: var(--signal-soft);
    font-family: "Newsreader", serif;
    font-weight: 400;
}

body[data-page="home"] .cinematic-lead {
    display: block;
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, .74);
    font-size: clamp(15px, 1.25vw, 19px);
    line-height: 1.75;
}

body[data-page="home"] .cinematic-actions {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 30px;
    margin-top: 34px;
}

body[data-page="home"] .hero-bottom {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 30px;
}

.hero-values {
    display: flex;
    align-items: center;
    gap: 13px;
    color: rgba(255, 255, 255, .56);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.hero-values i { width: 18px; height: 1px; background: rgba(255, 255, 255, .24); }

.section-heading-row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .65fr);
    align-items: end;
    gap: 72px;
}

.section-heading-row h2,
.about-precision h2,
.twin-showcase-head h2,
.home-contact-fluid h2 {
    margin: 0;
    font-size: clamp(42px, 5vw, 76px);
    line-height: 1;
    letter-spacing: -.055em;
}

.section-heading-row > p {
    margin: 0;
    color: #586975;
    line-height: 1.8;
}

.service-matrix {
    position: relative;
    overflow: hidden;
    padding: 150px 0 170px;
    background:
        linear-gradient(rgba(8, 27, 39, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(8, 27, 39, .055) 1px, transparent 1px),
        #edf3f4;
    background-size: 72px 72px;
}

.section-wire {
    position: absolute;
    right: 5vw;
    top: 0;
    width: min(520px, 42vw);
    height: 110px;
    border-top: 1px solid rgba(18, 167, 212, .4);
    border-right: 1px solid rgba(18, 167, 212, .4);
}

.section-wire span { position: absolute; right: -4px; bottom: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 14px var(--signal); }
.section-wire i { position: absolute; right: 0; top: 0; width: 42%; height: 1px; background: var(--signal); animation: signal-pulse 4s infinite; }

.service-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 72px;
}

.service-card {
    --expertise-shift: 0px;
    position: relative;
    min-height: 560px;
    overflow: hidden;
    color: #fff;
    background: #08131d;
    isolation: isolate;
}

.service-card::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: "";
    background: linear-gradient(0deg, rgba(2, 8, 12, .96), rgba(2, 8, 12, .1) 68%);
}

.service-card::after {
    position: absolute;
    z-index: 2;
    inset: 10px;
    border: 1px solid rgba(116, 226, 255, .17);
    content: "";
    transition: border-color .4s var(--ease), inset .4s var(--ease);
}

.service-card figure,
.service-card figure img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.service-card figure img { object-fit: cover; transform: translateX(var(--expertise-shift)) scale(1.04); filter: saturate(.72); transition: transform .9s var(--ease), filter .6s ease; }

.service-card-no {
    position: absolute;
    z-index: 3;
    top: 30px;
    left: 30px;
    color: var(--signal-soft);
    font-family: "Space Grotesk", sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
}

.service-card-copy {
    position: absolute;
    z-index: 3;
    right: 32px;
    bottom: 34px;
    left: 32px;
}

.service-card-copy h3 { margin-bottom: 14px; font-size: clamp(27px, 2.3vw, 39px); line-height: 1; letter-spacing: -.045em; }
.service-card-copy p { min-height: 80px; margin-bottom: 26px; color: rgba(255, 255, 255, .66); font-size: 14px; line-height: 1.7; }
.service-card-copy span { display: flex; align-items: center; justify-content: space-between; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.2); font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.service-card-copy b { color: var(--signal-soft); font-size: 19px; }

.service-card:hover figure img { transform: translateX(var(--expertise-shift)) scale(1.11); filter: saturate(1); }
.service-card:hover::after { inset: 0; border-color: rgba(116, 226, 255, .7); }

body[data-page="home"] .digital-twin-showcase {
    padding-top: 156px;
    padding-bottom: 160px;
    background:
        radial-gradient(circle at 70% 20%, rgba(23, 184, 230, .13), transparent 30%),
        #050b11;
}

.twin-scanline {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.twin-scanline::after {
    position: absolute;
    left: 0;
    top: -20%;
    width: 100%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(76, 221, 255, .7), transparent);
    box-shadow: 0 0 24px var(--signal);
    animation: twin-scan 8s linear infinite;
}

@keyframes twin-scan { to { top: 120%; } }

body[data-page="home"] .twin-showcase-head,
body[data-page="home"] .twin-console { position: relative; z-index: 1; }

body[data-page="home"] .twin-console {
    margin-top: 72px;
    border: 1px solid rgba(91, 214, 249, .28);
    border-color: rgba(112, 205, 233, .24);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(8, 20, 28, .98), rgba(4, 10, 15, .99));
    box-shadow: 0 38px 120px rgba(0, 0, 0, .48), 0 0 0 8px rgba(14, 53, 70, .07);
    overflow: hidden;
}

body[data-page="home"] .twin-viewport {
    height: clamp(560px, 46vw, 720px);
    min-height: 560px;
    margin: 12px;
    border: 1px solid rgba(106, 175, 199, .16);
    border-radius: 12px;
    box-shadow: inset 0 0 90px rgba(0, 0, 0, .38);
}

body[data-page="home"] .twin-viewport::before,
body[data-page="home"] .twin-viewport::after {
    position: absolute;
    z-index: 3;
    right: 0;
    left: 0;
    height: 15px;
    content: "";
    pointer-events: none;
    background: linear-gradient(180deg, rgba(2, 7, 10, .88), rgba(2, 7, 10, .18));
}

body[data-page="home"] .twin-viewport::before { top: 0; }
body[data-page="home"] .twin-viewport::after { bottom: 0; transform: rotate(180deg); }

body[data-page="home"] .twin-viewport canvas {
    filter: saturate(1.08) contrast(1.035);
}

body[data-page="home"] .twin-console-bar {
    min-height: 86px;
    padding-inline: 30px;
    background: linear-gradient(90deg, rgba(8, 22, 30, .98), rgba(5, 13, 19, .98));
}

body[data-page="home"] .twin-camera-label {
    top: 20px;
    right: 20px;
    border-radius: 999px;
    background: rgba(5, 14, 20, .72);
}

.twin-telemetry-rail {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(220px, .72fr) minmax(250px, .83fr);
    margin: 0 12px 12px;
    border: 1px solid rgba(106, 175, 199, .16);
    border-radius: 12px;
    background: rgba(7, 18, 25, .96);
    overflow: hidden;
}

.twin-telemetry-rail .twin-status-card,
.twin-telemetry-rail .twin-product-card,
.twin-safety-card {
    position: relative;
    inset: auto;
    width: auto;
    min-width: 0;
    min-height: 112px;
    padding: 22px 24px;
    border: 0;
    border-right: 1px solid rgba(106, 175, 199, .14);
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    text-align: left;
}

.twin-telemetry-rail .twin-product-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.twin-safety-card {
    border-right: 0;
}

.twin-safety-card > span {
    display: block;
    color: #5f7f8c;
    font: 700 8px/1 "Space Grotesk", sans-serif;
    letter-spacing: .14em;
}

.twin-safety-card > b {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 12px;
    color: #e8f7fa;
    font: 600 12px/1.25 "Space Grotesk", sans-serif;
    letter-spacing: .035em;
}

.twin-safety-card > b i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #a9ef64;
    box-shadow: 0 0 14px rgba(169, 239, 100, .7);
}

.twin-safety-card > small {
    display: block;
    margin-top: 8px;
    color: #6d8792;
    font: 600 9px/1.3 "Space Grotesk", sans-serif;
}

body[data-page="home"] .twin-line-strip {
    margin: 0 12px 12px;
    border: 1px solid rgba(106, 175, 199, .16);
    border-radius: 12px;
    background: rgba(7, 18, 25, .96);
}

body[data-page="home"] .twin-bath-track {
    grid-template-columns: repeat(28, minmax(3px, 1fr));
}

.about-precision {
    position: relative;
    overflow: hidden;
    padding: 164px 0;
    background: #f6f8f8;
}

.about-precision::before {
    position: absolute;
    right: -14vw;
    top: -12vw;
    width: 40vw;
    height: 40vw;
    border: 1px solid rgba(18, 172, 217, .18);
    border-radius: 50%;
    content: "";
}

.about-precision-grid {
    display: grid;
    grid-template-columns: 1.03fr .97fr;
    align-items: center;
    gap: clamp(54px, 8vw, 126px);
}

.about-precision-media {
    position: relative;
    min-height: 640px;
    overflow: hidden;
    background: #0a1620;
}

.about-precision-media::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: "";
    background: linear-gradient(0deg, rgba(3, 10, 15, .72), transparent 58%);
}

.about-precision-media img { width: 100%; height: calc(100% + 70px); object-fit: cover; transform: translateY(var(--parallax-shift, 0)); }
.about-precision-media > span { position: absolute; z-index: 2; left: 34px; bottom: 32px; display: flex; align-items: flex-end; gap: 14px; color: rgba(255,255,255,.72); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.about-precision-media > span b { color: #fff; font-family: "Space Grotesk", sans-serif; font-size: 52px; line-height: .82; letter-spacing: -.05em; }

.about-precision-copy > p:not(.section-label) { max-width: 610px; margin-top: 28px; color: #5b6b76; font-size: 17px; line-height: 1.85; }

.line-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 46px;
    min-width: 220px;
    margin-top: 30px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(7, 22, 33, .35);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.line-link span { color: var(--blue-dark); font-size: 18px; transition: transform .3s var(--ease); }
.line-link:hover span { transform: translate(4px, -4px); }

.works-reel {
    overflow: hidden;
    padding: 156px 0 176px;
    color: #fff;
    background: #08121b;
}

.works-reel .section-heading-row { align-items: center; }
.works-reel .section-label { color: var(--signal-soft); }
.works-reel .line-link { justify-self: end; border-color: rgba(255,255,255,.28); }
.works-reel .line-link span { color: var(--signal-soft); }

.work-track {
    display: grid;
    grid-auto-columns: minmax(330px, 38vw);
    grid-auto-flow: column;
    gap: 16px;
    overflow-x: auto;
    margin-top: 68px;
    padding: 0 max(32px, calc((100vw - var(--container)) / 2)) 24px;
    scrollbar-width: thin;
    scrollbar-color: var(--signal) rgba(255,255,255,.08);
    scroll-snap-type: x proximity;
}

.work-frame {
    position: relative;
    min-height: 480px;
    overflow: hidden;
    background: #0d1c28;
    scroll-snap-align: start;
}

.work-frame::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(2,8,12,.88), transparent 52%); }
.work-frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.76); transition: transform 1s var(--ease), filter .5s ease; }
.work-frame span { position: absolute; z-index: 1; right: 25px; bottom: 24px; left: 25px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.25); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.work-frame:hover img { transform: scale(1.07); filter: saturate(1); }

.home-references { padding: 106px 0; background: #edf3f4; }
.home-references .references-head { display: flex; align-items: center; justify-content: space-between; }
.home-references .line-link { margin-top: 0; }

body[data-page="home"] .home-contact-fluid {
    position: relative;
    overflow: hidden;
    padding: 150px 0;
    background:
        linear-gradient(rgba(66, 203, 244, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(66, 203, 244, .055) 1px, transparent 1px),
        #050b11;
    background-size: 68px 68px;
}

.contact-laser { position: absolute; inset: 0; pointer-events: none; }
.contact-laser i { position: absolute; right: 8%; top: 0; width: 1px; height: 100%; background: linear-gradient(transparent, rgba(64,214,255,.6), transparent); }
.contact-laser span { position: absolute; right: calc(8% - 4px); top: 16%; width: 9px; height: 9px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 22px var(--signal); animation: contact-node 5s ease-in-out infinite; }
@keyframes contact-node { 0%,100% { top: 16%; } 50% { top: 82%; } }

body[data-page="home"] .home-contact-grid { position: relative; z-index: 1; }
body[data-page="home"] .home-contact-copy h2 { max-width: 580px; }
body[data-page="home"] .home-contact-copy > p:not(.section-label) { max-width: 510px; }

@media (max-width: 1120px) {
    body[data-page="home"] .cinematic-content { grid-template-columns: 56px minmax(0, 1fr); }
    .service-card { min-height: 510px; }
    .service-card-copy p { min-height: 105px; }
    .about-precision-grid { gap: 58px; }
}

@media (max-width: 900px) {
    .page-signal { display: none; }
    .section-heading-row,
    .about-precision-grid { grid-template-columns: 1fr; }
    .service-cards { grid-template-columns: 1fr; }
    .service-card { min-height: 460px; }
    .service-card-copy p { min-height: auto; }
    .about-precision-media { min-height: 520px; }
    .work-track { grid-auto-columns: minmax(310px, 72vw); }
    body[data-page="home"] .twin-viewport { height: 630px; }
    .twin-telemetry-rail { grid-template-columns: 1fr 1fr; }
    .twin-safety-card { grid-column: 1 / 3; border-top: 1px solid rgba(106, 175, 199, .14); }
}

@media (max-width: 680px) {
    .intro-stage { min-height: 430px; }
    .intro-logo-stack { width: 88vw; margin-bottom: 42px; }
    .intro-orbit-a { width: 92vw; height: 92vw; }
    .intro-orbit-b { width: 68vw; height: 68vw; }
    .intro-actions { margin-top: 32px; }
    .intro-sound { left: 16px; bottom: 14px; }
    .intro-skip { right: 16px; bottom: 14px; }
    .intro-progress { bottom: 72px; width: calc(100% - 32px); }
    body[data-page="home"] .cinematic-content { display: block; height: auto; min-height: 100svh; padding-top: 150px; padding-bottom: 78px; }
    .hero-index { display: none; }
    body[data-page="home"] .hero-motion-title { max-width: calc(100vw - 32px); font-size: clamp(40px, 10.8vw, 56px); line-height: .96; }
    body[data-page="home"] .cinematic-copy,
    body[data-page="home"] .cinematic-lead,
    body[data-page="home"] .cinematic-actions { max-width: calc(100vw - 32px); }
    body[data-page="home"] .cinematic-actions { align-items: flex-start; flex-direction: column; gap: 16px; }
    body[data-page="home"] .hero-bottom { grid-template-columns: 1fr auto; }
    .hero-values { display: none; }
    .section-heading-row { gap: 28px; }
    .service-matrix,
    .about-precision,
    .works-reel,
    body[data-page="home"] .home-contact-fluid { padding: 104px 0; }
    .service-cards { margin-top: 44px; }
    .service-card { min-height: 430px; }
    .service-card-copy { right: 24px; bottom: 24px; left: 24px; }
    body[data-page="home"] .twin-showcase-head { display: block; }
    body[data-page="home"] .twin-showcase-head > p { margin-top: 26px; }
    body[data-page="home"] .twin-console { width: calc(100% - 24px); margin-top: 44px; }
    body[data-page="home"] .twin-viewport { height: 500px; min-height: 500px; margin: 8px; }
    .twin-telemetry-rail { grid-template-columns: 1fr; margin: 0 8px 8px; }
    .twin-telemetry-rail .twin-status-card,
    .twin-telemetry-rail .twin-product-card,
    .twin-safety-card { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(106, 175, 199, .14); }
    .twin-safety-card { grid-column: auto; border-bottom: 0; }
    body[data-page="home"] .twin-line-strip { margin: 0 8px 8px; }
    .about-precision-media { min-height: 430px; }
    .work-track { grid-auto-columns: 84vw; }
    .home-references .references-head { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 680px) and (max-height: 720px) {
    body[data-page="home"] .cinematic-content { padding-top: 126px; padding-bottom: 64px; }
    body[data-page="home"] .hero-motion-title { font-size: clamp(38px, 10vw, 52px); }
    body[data-page="home"] .cinematic-lead { font-size: 14px; line-height: 1.62; }
    body[data-page="home"] .cinematic-actions { margin-top: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .brand-intro.is-running .intro-logo-stack,
    .brand-intro.is-running .intro-orbit-a,
    .brand-intro.is-running .intro-orbit-b,
    .brand-intro.is-running .intro-beam-a,
    .brand-intro.is-running .intro-beam-b,
    .brand-intro.is-running .intro-progress i,
    .twin-scanline::after,
    .contact-laser span,
    .hero-blueprint i { animation: none !important; }
}