/* GDPRSolutions Network — extracted homepage styles | © 2026 The Raymond Brogan Corporation */
:root {
    --demo-green: #63dc00;
}


/* ============================================================
   DEMO SECTION
   ============================================================ */

.live-demo {
    padding: 90px 24px;
    position: relative;
}

.live-demo .section-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.live-demo h2 span {
    color: var(--demo-green);
}

.demo-intro {
    max-width: 760px;
    margin-bottom: 32px;
}


/* ============================================================
   DEMO LAUNCH CARD
   ============================================================ */

.demo-launch-card {
    max-width: 900px;
    margin: 35px auto 24px;
    padding: 28px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    background: rgba(255,255,255,.025);

    border:
        1px solid rgba(99,220,0,.25);

    border-radius: 18px;
}

.demo-launch-card strong {
    display: block;
    margin-bottom: 7px;
    font-size: 1.15rem;
}

.demo-launch-card small {
    opacity: .68;
    line-height: 1.6;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.demo-launch-btn,
.consent-primary,
.consent-secondary {

    appearance: none;

    padding: 13px 20px;

    border-radius: 9px;

    cursor: pointer;

    font: inherit;

    font-weight: 800;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease,
        border-color .2s ease;
}

.demo-launch-btn,
.consent-primary {

    border:
        1px solid var(--demo-green);

    background:
        var(--demo-green);

    color:
        #071006;

    box-shadow:
        0 0 18px rgba(99,220,0,.18);
}

.demo-launch-btn:hover,
.consent-primary:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 0 28px rgba(99,220,0,.35);
}

.consent-secondary {

    border:
        1px solid rgba(255,255,255,.16);

    background:
        rgba(255,255,255,.06);

    color:
        #fff;
}

.consent-secondary:hover {

    transform:
        translateY(-2px);

    background:
        rgba(255,255,255,.1);
}


/* ============================================================
   CUSTOMIZER
   ============================================================ */

.demo-builder {

    max-width: 900px;

    margin:
        0 auto 24px;

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 15px;
}

.demo-builder label {

    display: flex;

    flex-direction: column;

    gap: 8px;

    font-size: .76rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .08em;
}

.demo-builder select {

    width: 100%;

    padding: 12px 14px;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius: 8px;

    background:
        #11151a;

    color:
        #fff;

    font: inherit;
}


/* ============================================================
   DEMO STATUS PANEL
   ============================================================ */

.consent-status-panel {

    max-width: 900px;

    margin:
        0 auto;

    padding:
        25px;

    background:
        rgba(0,0,0,.22);

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:
        16px;
}

.consent-status-heading {

    display: block;

    margin-bottom: 18px;

    color:
        var(--demo-green);

    font-size:
        .76rem;

    font-weight:
        900;

    letter-spacing:
        .12em;
}

.status-line {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding:
        10px 0;

    border-bottom:
        1px solid rgba(255,255,255,.06);
}

.status-line:last-child {
    border-bottom: 0;
}

.status-line span {
    opacity: .65;
}

.status-line strong {
    text-align: right;
}


/* ============================================================
   DEMO DISCLAIMER
   ============================================================ */

.demo-disclaimer {

    max-width: 900px;

    margin:
        20px auto 0;

    text-align:
        center;

    font-size:
        .78rem;

    line-height:
        1.6;

    opacity:
        .62;
}


/* ============================================================
   MODAL BACKDROP
   ============================================================ */

.consent-backdrop {

    position:
        fixed;

    inset:
        0;

    z-index:
        99998;

    background:
        rgba(0,0,0,.62);

    backdrop-filter:
        blur(3px);
}

.consent-backdrop[hidden] {
    display: none !important;
}


/* ============================================================
   ACTUAL DEMONSTRATION BANNER
   ============================================================ */

.consent-banner {

    --banner-accent: #63dc00;

    position:
        fixed;

    z-index:
        99999;

    left:
        20px;

    right:
        20px;

    bottom:
        20px;

    max-width:
        1180px;

    margin:
        auto;

    padding:
        26px;

    color:
        #fff;

    background:
        #101419;

    border:
        1px solid rgba(255,255,255,.14);

    border-radius:
        16px;

    box-shadow:
        0 30px 100px rgba(0,0,0,.7);
}

.consent-banner[hidden] {
    display: none !important;
}


/* POSITION OPTIONS */

.consent-banner.position-left {

    right:
        auto;

    max-width:
        520px;
}

.consent-banner.position-right {

    left:
        auto;

    max-width:
        520px;
}


/* STYLE OPTIONS */

.consent-banner.style-card {

    max-width:
        600px;
}

.consent-banner.style-compact {

    max-width:
        850px;

    padding:
        18px 22px;
}


/* ============================================================
   DEMO BANNER CONTENT
   ============================================================ */

.consent-demo-label {

    display:
        inline-block;

    margin-bottom:
        12px;

    padding:
        5px 10px;

    color:
        var(--banner-accent);

    background:
        rgba(255,255,255,.055);

    border:
        1px solid var(--banner-accent);

    border-radius:
        999px;

    font-size:
        .67rem;

    font-weight:
        900;

    letter-spacing:
        .11em;
}

.consent-banner h3 {

    margin:
        0 40px 10px 0;

    font-size:
        1.35rem;
}

.consent-banner p {

    margin:
        0;

    line-height:
        1.65;

    opacity:
        .78;
}

.demo-only-note {

    margin-top:
        12px !important;

    font-size:
        .82rem;
}


/* ============================================================
   CLOSE BUTTON
   ============================================================ */

.consent-close {

    position:
        absolute;

    top:
        13px;

    right:
        15px;

    padding:
        4px 8px;

    border:
        0;

    background:
        transparent;

    color:
        #fff;

    font-size:
        1.5rem;

    cursor:
        pointer;

    opacity:
        .6;
}

.consent-close:hover {
    opacity: 1;
}


/* ============================================================
   CONSENT ACTIONS
   ============================================================ */

.consent-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-top:
        20px;
}

.consent-banner .consent-primary {

    background:
        var(--banner-accent);

    border-color:
        var(--banner-accent);
}


/* ============================================================
   PREFERENCE CENTER
   ============================================================ */

.consent-preferences {

    margin-top:
        22px;

    padding-top:
        18px;

    border-top:
        1px solid rgba(255,255,255,.1);
}

.consent-preferences[hidden] {
    display: none !important;
}

.preference-row {

    display:
        grid;

    grid-template-columns:
        1fr auto;

    align-items:
        center;

    gap:
        20px;

    padding:
        14px 0;

    border-bottom:
        1px solid rgba(255,255,255,.07);
}

.preference-row strong {

    display:
        block;

    margin-bottom:
        4px;
}

.preference-row small {

    display:
        block;

    line-height:
        1.5;

    opacity:
        .6;
}

.preference-required {

    color:
        var(--banner-accent);

    font-size:
        .7rem;

    font-weight:
        900;

    white-space:
        nowrap;
}


/* ============================================================
   TOGGLE SWITCH
   ============================================================ */

.demo-switch {

    position:
        relative;

    display:
        inline-block;

    width:
        50px;

    height:
        27px;
}

.demo-switch input {

    width:
        0;

    height:
        0;

    opacity:
        0;
}

.demo-slider {

    position:
        absolute;

    inset:
        0;

    cursor:
        pointer;

    background:
        #3c4148;

    border-radius:
        30px;

    transition:
        .25s;
}

.demo-slider::before {

    content:
        "";

    position:
        absolute;

    left:
        3px;

    top:
        3px;

    width:
        21px;

    height:
        21px;

    background:
        #fff;

    border-radius:
        50%;

    transition:
        .25s;
}

.demo-switch input:checked + .demo-slider {

    background:
        var(--banner-accent);
}

.demo-switch input:checked + .demo-slider::before {

    transform:
        translateX(23px);
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 760px) {

    .live-demo {
        padding:
            65px 18px;
    }

    .demo-launch-card {

        flex-direction:
            column;

        align-items:
            stretch;
    }

    .demo-launch-btn {
        width: 100%;
    }

    .demo-builder {

        grid-template-columns:
            1fr;
    }

    .status-line {

        flex-direction:
            column;

        gap:
            5px;
    }

    .status-line strong {
        text-align: left;
    }

    .consent-banner {

        left:
            10px;

        right:
            10px;

        bottom:
            10px;

        padding:
            20px;
    }

    .consent-banner.position-left,
    .consent-banner.position-right {

        left:
            10px;

        right:
            10px;

        max-width:
            none;
    }

    .consent-actions {

        flex-direction:
            column;
    }

    .consent-actions button {

        width:
            100%;
    }

}

	/* ============================================================
   GDPRSOLUTIONS.NET
   EXPANDED DEMO POSITIONS
   ============================================================ */


/* ------------------------------------------------------------
   TOP BAR
   ------------------------------------------------------------ */

.consent-banner.position-top {

    top: 20px;
    bottom: auto;

    left: 20px;
    right: 20px;

    max-width: 1180px;

    margin: auto;
}


/* ------------------------------------------------------------
   TOP LEFT
   ------------------------------------------------------------ */

.consent-banner.position-top-left {

    top: 20px;
    bottom: auto;

    left: 20px;
    right: auto;

    max-width: 520px;

    margin: 0;
}


/* ------------------------------------------------------------
   TOP RIGHT
   ------------------------------------------------------------ */

.consent-banner.position-top-right {

    top: 20px;
    bottom: auto;

    left: auto;
    right: 20px;

    max-width: 520px;

    margin: 0;
}


/* ------------------------------------------------------------
   CENTER
   ------------------------------------------------------------ */

.consent-banner.position-center {

    top: 50%;
    bottom: auto;

    left: 50%;
    right: auto;

    width: calc(100% - 40px);

    max-width: 620px;

    margin: 0;

    transform:
        translate(-50%, -50%);
}


/* ============================================================
   ANIMATED STYLE
   ============================================================ */

.consent-banner.style-animated {

    max-width: 650px;

    animation:
        gdprDemoEntrance .65s
        cubic-bezier(.16,1,.3,1)
        both;

    box-shadow:
        0 30px 100px rgba(0,0,0,.7),
        0 0 35px color-mix(
            in srgb,
            var(--banner-accent) 25%,
            transparent
        );
}


/* Animated accent line */

.consent-banner.style-animated::before {

    content: "";

    position: absolute;

    left: 18px;
    right: 18px;
    top: 0;

    height: 2px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--banner-accent),
            transparent
        );

    animation:
        gdprAccentSweep 2.5s
        ease-in-out
        infinite;
}


/* ------------------------------------------------------------
   ENTRANCE ANIMATION
   ------------------------------------------------------------ */

@keyframes gdprDemoEntrance {

    0% {

        opacity: 0;

        transform:
            translateY(45px)
            scale(.96);
    }

    100% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


/* ------------------------------------------------------------
   ACCENT SWEEP
   ------------------------------------------------------------ */

@keyframes gdprAccentSweep {

    0% {

        opacity: .25;

        transform:
            scaleX(.25);
    }

    50% {

        opacity: 1;

        transform:
            scaleX(1);
    }

    100% {

        opacity: .25;

        transform:
            scaleX(.25);
    }

}


/* ------------------------------------------------------------
   CENTER + ANIMATED
   Center needs its own animation because it uses translate
   for positioning.
   ------------------------------------------------------------ */

.consent-banner.position-center.style-animated {

    animation:
        gdprCenterEntrance .65s
        cubic-bezier(.16,1,.3,1)
        both;
}


@keyframes gdprCenterEntrance {

    0% {

        opacity: 0;

        transform:
            translate(-50%, -45%)
            scale(.92);
    }

    100% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }

}


/* ============================================================
   MOBILE POSITION CORRECTIONS
   ============================================================ */

@media (max-width: 760px) {

    .consent-banner.position-top {

        top: 10px;
        bottom: auto;

        left: 10px;
        right: 10px;
    }


    .consent-banner.position-top-left,
    .consent-banner.position-top-right {

        top: 10px;
        bottom: auto;

        left: 10px;
        right: 10px;

        max-width: none;
    }


    .consent-banner.position-center {

        width:
            calc(100% - 20px);
    }

}


/* ============================================================
   ACCESSIBILITY
   Respect reduced-motion preference.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .consent-banner.style-animated,
    .consent-banner.position-center.style-animated,
    .consent-banner.style-animated::before {

        animation:
            none !important;
    }

}
	

/* ============================================================
   GDPRSOLUTIONS NETWORK — INSTALLATION TERMINAL MOTION
   © 2026 The Raymond Brogan Corporation
   © 2026 GDPR Solutions Network
   All rights reserved.
   ============================================================ */

.gds-embed-terminal .gds-terminal-dot {
    display: inline-block;
    transform-origin: center;
    animation: gdsTerminalDotChase 1.2s ease-in-out infinite;
}

.gds-embed-terminal .gds-terminal-dot:nth-child(2) {
    animation-delay: .2s;
}

.gds-embed-terminal .gds-terminal-dot:nth-child(3) {
    animation-delay: .4s;
}

@keyframes gdsTerminalDotChase {
    0%, 60%, 100% {
        opacity: .3;
        transform: scale(1);
        box-shadow: none;
    }
    30% {
        opacity: 1;
        transform: scale(1.28);
        background-color: #00e6d0;
        box-shadow: 0 0 10px rgba(0, 230, 208, .85);
    }
}

.gds-embed-terminal .gds-terminal-label {
    animation: gdsTerminalLabelBreathe 3s ease-in-out infinite;
}

@keyframes gdsTerminalLabelBreathe {
    0%, 100% {
        opacity: .45;
        text-shadow: none;
    }
    50% {
        opacity: 1;
        color: #00e6d0;
        text-shadow: 0 0 12px rgba(0, 230, 208, .6);
    }
}

.gds-embed-terminal .gds-terminal-code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.gds-embed-terminal .gds-terminal-cursor {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    margin-left: 2px;
    background-color: #00f5df;
    vertical-align: -.18em;
    animation: gdsTerminalCursorBlink .7s steps(1) infinite;
}

@keyframes gdsTerminalCursorBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .gds-embed-terminal .gds-terminal-dot,
    .gds-embed-terminal .gds-terminal-label,
    .gds-embed-terminal .gds-terminal-cursor {
        animation: none;
    }
}