:root {
    --navy: #071a3d;
    --navy-2: #173260;
    --ink: #14213d;
    --muted: #66728a;
    --line: #dfe4f2;
    --paper: #ffffff;
    --soft: #f8f7ff;
    --gold: #8bbdf0;
    --gold-soft: #edf6ff;
    --green: #6842d8;
    --green-soft: #f0ebff;
    --purple: #6842d8;
    --periwinkle: #8bbdf0;
    --shadow: 0 24px 70px rgba(44, 35, 100, 0.13);
}

body {
    background:
        radial-gradient(circle at 8% 4%, rgba(104, 66, 216, 0.09), transparent 22rem),
        radial-gradient(circle at 96% 12%, rgba(139, 189, 240, 0.16), transparent 25rem),
        #ffffff;
}

.site-header {
    background: rgba(255, 255, 255, 0.8);
    border-bottom-color: rgba(104, 66, 216, 0.13);
    box-shadow: 0 8px 34px rgba(38, 28, 90, 0.06);
}

.brand-logo {
    display: block;
    width: 108px;
    height: 74px;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 8px 14px rgba(62, 34, 154, 0.14));
}

.footer-brand {
    width: max-content;
    padding: 8px 16px;
    border-radius: 16px;
    background: rgba(255,255,255,.94);
}

.footer-logo {
    width: 150px;
    height: 116px;
    filter: drop-shadow(0 14px 24px rgba(120, 84, 222, 0.24));
}

.nav { min-height: 82px; }
.nav-links a:not(.btn):hover, .text-link { color: var(--purple); }

.btn {
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    transform-style: preserve-3d;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.32), transparent 70%);
    transform: translateX(-130%);
    transition: transform .6s ease;
}

.btn:hover::after { transform: translateX(130%); }
.btn-primary { background: linear-gradient(135deg, #5630c3, #8062e6); box-shadow: 0 16px 34px rgba(104,66,216,.24); }
.btn-primary:hover { box-shadow: 0 22px 44px rgba(104,66,216,.3); }
.btn-whatsapp { background: var(--green-soft); color: var(--purple); }
.eyebrow { color: var(--purple); }
.surface { background: linear-gradient(145deg, #fbfaff, #f1f7ff); }

.service-card, .price-card, .portfolio-card, .testimonial-card,
.industry-card, .form-card, .summary-card, .contact-panel {
    position: relative;
    border-color: rgba(104,66,216,.14);
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,246,255,.9));
    box-shadow: 0 18px 44px rgba(38,25,91,.08), inset 0 1px 0 rgba(255,255,255,.9);
    transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
    transform-style: preserve-3d;
    transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease;
    will-change: transform;
}

.service-card::before, .price-card::before, .portfolio-card::before, .industry-card::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 20%), rgba(139,189,240,.2), transparent 34%);
}

.service-card:hover, .price-card:hover, .portfolio-card:hover, .industry-card:hover {
    --lift: -8px;
    box-shadow: 0 30px 65px rgba(56,34,126,.15), 0 8px 22px rgba(104,66,216,.08);
    border-color: rgba(104,66,216,.32);
}

.page-hero {
    color: var(--ink);
    background:
        radial-gradient(circle at 80% 30%, rgba(139,189,240,.28), transparent 28%),
        radial-gradient(circle at 72% 76%, rgba(104,66,216,.13), transparent 24%),
        linear-gradient(135deg, #ffffff, #f5f2ff 58%, #eef7ff);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(104,66,216,.1);
}

.page-hero .lead { color: var(--muted); }
.page-hero::after { display: none; }

.site-footer { background: linear-gradient(145deg, #071a3d, #211454); }
.reveal { will-change: transform, opacity; }
.reveal.visible { animation: reveal3d .75s cubic-bezier(.2,.75,.2,1) both; }

@keyframes reveal3d {
    from { opacity: 0; transform: perspective(900px) translateY(32px) rotateX(5deg); }
    to { opacity: 1; transform: perspective(900px) translateY(0) rotateX(0); }
}

@keyframes brandFloat { 50% { transform: translateY(-15px) rotate(8deg); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media (max-width: 760px) {
    .brand-logo { width: 84px; height: 62px; }
    .nav { min-height: 68px; }
    .service-card, .price-card, .portfolio-card, .industry-card { transform: none !important; }
}