/* 3D / Interactive — perspective, layered depth, pointer-tilted surfaces */

body {
    background:
        radial-gradient(circle at 50% -10%, rgba(80, 120, 255, .35), transparent 55%),
        #07090f;
    color: #dde5f2;
    font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
    line-height: 1.6;
    perspective: 1200px;
}

.site-head {
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background: rgba(7, 9, 15, .7);
    backdrop-filter: blur(10px);
}
.brand { color: #ffffff; font-weight: 600; }
.site-head nav a { color: #93a2bb; }
.site-head nav a:hover { color: #ffffff; border-bottom-color: rgba(120, 160, 255, .8); }

.hero { padding: 5.5rem 0 4rem; position: relative; }
.eyebrow {
    color: #8fb0ff;
    letter-spacing: .16em;
    font-size: .72rem;
    margin-bottom: 1.6rem;
}
.hero h1 {
    color: #f4f8ff;
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -.04em;
    max-width: 16ch;
    /* stacked shadows read as extruded type, not a glow */
    text-shadow:
        0 1px 0 #b9c8e6,
        0 2px 0 #9fb2d6,
        0 3px 0 #8397bd,
        0 4px 0 #6a7ea6,
        0 8px 22px rgba(70, 110, 220, .45);
}
.lede { color: #9dabc2; }

.btn {
    border-radius: 10px;
    background: linear-gradient(180deg, #6d8cff, #3b5be0);
    border: 1px solid #7f9bff;
    color: #ffffff;
    box-shadow: 0 10px 24px -10px rgba(80, 120, 255, .8);
    transform: translateZ(0);
    transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px -12px rgba(80, 120, 255, .9);
}
.btn.ghost {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .2);
    color: #dde5f2;
}
.btn.ghost:hover { background: rgba(255, 255, 255, .12); color: #ffffff; }

.services { border-top: 1px solid rgba(255, 255, 255, .1); }
.services > .wrap { gap: 1.2rem; perspective: 900px; }
.services article {
    background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    padding: 1.7rem 1.5rem;
    transform-style: preserve-3d;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), border-color .3s ease;
    will-change: transform;
}
.services article:hover {
    transform: rotateX(6deg) rotateY(-8deg) translateZ(14px);
    border-color: rgba(140, 170, 255, .55);
}
.services article:nth-child(2):hover { transform: rotateX(6deg) rotateY(0deg) translateZ(18px); }
.services article:nth-child(3):hover { transform: rotateX(6deg) rotateY(8deg) translateZ(14px); }
.services h2 { color: #ffffff; font-weight: 600; }
.services p { color: #9dabc2; }
.num {
    color: #8fb0ff;
    font-family: 'Roboto Mono', ui-monospace, monospace;
    letter-spacing: .1em;
    margin-bottom: 1rem;
    transform: translateZ(20px);
    display: inline-block;
}

.quote { border-top: 1px solid rgba(255, 255, 255, .1); }
.quote blockquote { color: #eaf1ff; font-weight: 500; max-width: 30ch; }
.quote cite { color: #8695ad; }

.cta { border-top: 1px solid rgba(255, 255, 255, .1); }
.cta > .wrap {
    align-items: center;
    background: linear-gradient(135deg, rgba(110, 140, 255, .18), rgba(110, 140, 255, .04));
    border: 1px solid rgba(140, 170, 255, .28);
    border-radius: 18px;
    padding: 2.2rem 2rem;
}
.cta h2 { color: #ffffff; }

footer { border-top: 1px solid rgba(255, 255, 255, .1); }
footer .wrap { color: #74809a; }
.back-chip { background: rgba(255, 255, 255, .1); border-radius: 10px; }

@media (max-width: 760px) {
    .services article:hover { transform: none; }
    body { perspective: none; }
}
@media (prefers-reduced-motion: reduce) {
    .services article:hover { transform: none; }
    .btn:hover { transform: none; }
}