:root {
    --pq-premium-green: #35d5b0;
    --pq-premium-green-bright: #70f1cf;
    --pq-premium-graphite: #071018;
    --pq-premium-black: #03070b;
    --pq-premium-line: rgba(171, 203, 217, 0.16);
}

body {
    background:
        radial-gradient(circle at 50% -18%, rgba(53, 213, 176, 0.08), transparent 35%),
        #050c13;
}

.site-header {
    border-bottom-color: rgba(172, 206, 217, 0.11);
    background: rgba(4, 10, 16, 0.78);
    box-shadow: 0 12px 38px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(24px) saturate(135%);
}

.brand-mark {
    border: 1px solid rgba(112, 241, 207, 0.32);
    background: linear-gradient(145deg, #70f1cf, #25b894);
    color: #03110e;
    box-shadow:
        0 12px 30px rgba(53, 213, 176, 0.19),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.hero {
    isolation: isolate;
    overflow: hidden;
    padding-top: 118px;
    padding-bottom: 112px;
    background:
        radial-gradient(ellipse at 78% 31%, rgba(53, 213, 176, 0.15), transparent 27%),
        radial-gradient(ellipse at 74% 36%, rgba(84, 103, 255, 0.13), transparent 37%),
        radial-gradient(ellipse at 8% 14%, rgba(53, 213, 176, 0.06), transparent 30%),
        linear-gradient(155deg, #07121b 0%, #050b11 52%, #03070b 100%);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: 0.48;
    background-image:
        linear-gradient(rgba(174, 213, 223, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(174, 213, 223, 0.045) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.72), transparent 90%);
}

.hero-grid {
    position: relative;
    z-index: 2;
    grid-template-columns: 0.98fr 1.02fr;
    gap: 82px;
}

.hero-content::before {
    content: "";
    position: absolute;
    left: -34px;
    top: 4px;
    width: 1px;
    height: 136px;
    background: linear-gradient(to bottom, rgba(112, 241, 207, 0.85), transparent);
    box-shadow: 0 0 22px rgba(53, 213, 176, 0.26);
}

.hero h1 {
    max-width: 760px;
    margin-bottom: 26px;
    font-size: clamp(46px, 5.85vw, 78px);
    line-height: 0.98;
    letter-spacing: -0.062em;
    font-weight: 850;
    text-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
}

.hero-copy {
    max-width: 660px;
    color: #aab8c7;
    font-size: 18px;
    line-height: 1.76;
    letter-spacing: -0.008em;
}

.hero-badge {
    border-color: rgba(112, 241, 207, 0.22);
    background: linear-gradient(180deg, rgba(53, 213, 176, 0.095), rgba(53, 213, 176, 0.045));
    color: #d3f9ef;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 28px rgba(0,0,0,0.14);
}

.hero-badge span {
    background: linear-gradient(135deg, #74f2d1, #35d5b0);
    box-shadow: 0 5px 18px rgba(53, 213, 176, 0.18);
}

.hero .button-primary {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(145, 255, 226, 0.35);
    background: linear-gradient(135deg, #53dfbb 0%, #24b992 100%);
    color: #03120e;
    box-shadow: 0 18px 42px rgba(31, 184, 146, 0.21), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.hero .button-primary:hover {
    background: linear-gradient(135deg, #65e9c6 0%, #2ac69b 100%);
    transform: translateY(-2px);
}

.hero .button-secondary {
    border-color: rgba(177, 207, 219, 0.18);
    background: linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.028));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.055);
}

.product-showcase {
    min-height: 550px;
    perspective: 1450px;
}

.product-showcase::before,
.product-showcase::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border: 1px solid rgba(174, 213, 223, 0.12);
    background: linear-gradient(145deg, rgba(189, 220, 230, 0.09), rgba(26, 44, 57, 0.09) 50%, rgba(53, 213, 176, 0.035));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 28px 70px rgba(0,0,0,0.22);
}

.product-showcase::before {
    width: 260px;
    height: 96px;
    right: -72px;
    bottom: 48px;
    border-radius: 20px 5px 20px 5px;
    transform: rotate(-13deg) skewX(-6deg);
}

.product-showcase::after {
    width: 190px;
    height: 70px;
    left: -62px;
    top: 52px;
    border-radius: 4px 18px 4px 18px;
    transform: rotate(17deg) skewX(8deg);
}

.showcase-glow {
    width: 470px;
    height: 470px;
    opacity: 0.85;
    background: radial-gradient(circle, rgba(53, 213, 176, 0.18) 0%, rgba(79, 101, 255, 0.09) 45%, transparent 72%);
    filter: blur(44px);
}

.showcase-window {
    border: 1px solid rgba(189, 220, 230, 0.19);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(15, 28, 39, 0.97), rgba(5, 12, 19, 0.985));
    box-shadow:
        0 44px 110px rgba(0,0,0,0.52),
        0 0 0 1px rgba(255,255,255,0.018),
        inset 0 1px 0 rgba(255,255,255,0.08);
    transform: perspective(1250px) rotateY(-8deg) rotateX(3deg) rotateZ(-0.45deg) translateZ(16px);
    transition: transform 500ms cubic-bezier(.2,.75,.2,1), box-shadow 500ms ease;
}

.product-showcase:hover .showcase-window {
    transform: perspective(1250px) rotateY(-3.8deg) rotateX(1.3deg) translateY(-5px) translateZ(22px);
    box-shadow: 0 56px 128px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.09);
}

.showcase-titlebar,
.showcase-sidebar {
    border-color: rgba(173, 205, 217, 0.11);
    background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.008));
}

.showcase-sidebar span.active {
    border: 1px solid rgba(112, 241, 207, 0.12);
    background: rgba(53, 213, 176, 0.085);
    color: #b8f4e3;
}

.showcase-file {
    border-color: rgba(112, 241, 207, 0.26);
    background: linear-gradient(135deg, rgba(53,213,176,0.075), rgba(88,105,255,0.045));
}

.showcase-fields div {
    border: 1px solid rgba(178, 210, 221, 0.075);
    background: rgba(255,255,255,0.028);
}

.showcase-total {
    border: 1px solid rgba(112,241,207,0.13);
    background: linear-gradient(135deg, rgba(53,213,176,0.14), rgba(72,92,238,0.075));
}

.showcase-check {
    background: linear-gradient(135deg, #78edcf, #38cba5);
    box-shadow: 0 8px 22px rgba(53,213,176,0.2);
}

.floating-card {
    border-color: rgba(181, 216, 227, 0.17);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(17, 32, 43, 0.9), rgba(6, 14, 21, 0.94));
    box-shadow: 0 24px 62px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.07);
}

.floating-card-area { animation: pqPremiumFloatA 6.2s ease-in-out infinite; }
.floating-card-local { animation: pqPremiumFloatB 7.1s ease-in-out infinite; }

.workflow-strip {
    border-color: rgba(178, 210, 221, 0.09);
    background: linear-gradient(90deg, #071018, #0b1922 50%, #071018);
}

.workflow-strip-inner {
    min-height: 82px;
    color: #c6d4df;
}

.workflow-strip i {
    color: #58dfbd;
    text-shadow: 0 0 18px rgba(53,213,176,0.24);
}

.section-light {
    background: linear-gradient(180deg, #f7f9fb 0%, #f1f5f7 100%);
}

.workflow-card {
    overflow: hidden;
    border-color: rgba(37, 74, 87, 0.13);
    background: linear-gradient(160deg, #ffffff 0%, #f9fbfc 64%, #f2f7f6 100%);
    box-shadow: 0 22px 58px rgba(15, 35, 48, 0.075), inset 0 1px 0 rgba(255,255,255,0.9);
    transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

.workflow-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(53,213,176,0.72), transparent);
    opacity: 0.52;
}

.workflow-card:hover {
    z-index: 3;
    transform: translateY(-5px);
    border-color: rgba(53, 213, 176, 0.22);
    box-shadow: 0 30px 68px rgba(15, 35, 48, 0.11);
}

.step-icon {
    border: 1px solid rgba(34, 154, 125, 0.13);
    background: linear-gradient(145deg, rgba(53,213,176,0.12), rgba(53,213,176,0.055));
    color: #10846a;
}

.benefit-list li {
    border-color: rgba(172, 209, 220, 0.12);
    background: linear-gradient(145deg, rgba(255,255,255,0.038), rgba(255,255,255,0.012));
    transition: border-color 180ms ease, transform 180ms ease;
}

.benefit-list li:hover {
    transform: translateY(-2px);
    border-color: rgba(53,213,176,0.22);
}

.metrics-panel {
    border-color: rgba(184, 215, 225, 0.14);
    background: linear-gradient(155deg, rgba(26, 45, 58, 0.86), rgba(7, 16, 24, 0.94));
    box-shadow: 0 36px 90px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.06);
}

.metric-card {
    border: 1px solid rgba(184, 215, 225, 0.075);
    background: rgba(255,255,255,0.035);
}

.metric-card-primary {
    border-color: rgba(112,241,207,0.12);
    background: linear-gradient(135deg, rgba(53,213,176,0.16), rgba(72,90,227,0.08));
}

.section-local {
    background:
        radial-gradient(circle at 75% 42%, rgba(53,213,176,0.075), transparent 31%),
        linear-gradient(180deg, #07131c 0%, #050b11 100%);
}

.data-card {
    border-color: rgba(182, 214, 224, 0.13);
    background: linear-gradient(150deg, rgba(22,39,51,0.84), rgba(8,17,25,0.92));
    box-shadow: 0 24px 58px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.04);
}

.final-cta {
    border: 1px solid rgba(31, 94, 79, 0.13);
    border-radius: 26px;
    padding: 44px 48px;
    background:
        radial-gradient(circle at 82% 50%, rgba(53,213,176,0.13), transparent 24%),
        linear-gradient(145deg, #ffffff 0%, #f5f9f8 100%);
    box-shadow: 0 28px 70px rgba(25, 54, 63, 0.09), inset 0 1px 0 #fff;
}

.final-cta .button-primary {
    border: 1px solid rgba(24, 149, 118, 0.26);
    background: linear-gradient(135deg, #43dbb5, #20b58c);
    color: #03120e;
    box-shadow: 0 16px 36px rgba(32, 181, 140, 0.18);
}

@keyframes pqPremiumFloatA {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -8px, 0); }
}

@keyframes pqPremiumFloatB {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, 7px, 0); }
}

@media (max-width: 980px) {
    .hero { padding-top: 92px; padding-bottom: 84px; }
    .hero-grid { grid-template-columns: 1fr; gap: 54px; }
    .hero-content::before { display: none; }
    .product-showcase { width: min(700px, 100%); min-height: 490px; margin: 0 auto; }
    .showcase-window { transform: perspective(1200px) rotateY(-3deg) rotateX(1.4deg); }
}

@media (max-width: 700px) {
    .hero { padding-top: 70px; padding-bottom: 68px; }
    .hero h1 { font-size: clamp(42px, 13vw, 60px); }
    .hero-copy { font-size: 16px; }
    .product-showcase { min-height: 410px; }
    .showcase-window { transform: none; }
    .product-showcase:hover .showcase-window { transform: translateY(-2px); }
    .floating-card-area { left: 4px; bottom: 28px; }
    .floating-card-local { right: 3px; top: 35px; }
    .final-cta { padding: 30px 24px; border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .floating-card-area,
    .floating-card-local { animation: none; }
    .showcase-window,
    .workflow-card,
    .benefit-list li { transition: none; }
}