/* ============================================================
   GDPRSOLUTIONS.NET
   COMING SOON
   Version 1.0
   ============================================================ */


/* ============================================================
   VARIABLES
   ============================================================ */

:root {

    --bg:
        #071018;

    --bg-deep:
        #03080d;

    --surface:
        #0c1822;

    --surface-light:
        #112431;

    --border:
        rgba(255,255,255,.09);

    --border-bright:
        rgba(255,255,255,.16);

    --white:
        #f7fbff;

    --text:
        #d5e0e7;

    --muted:
        #81919d;

    --cyan:
        #20d5d2;

    --cyan-bright:
        #58f4e9;

    --blue:
        #268cff;

    --green:
        #38e29d;

    --orange:
        #ffae57;

    --max-width:
        1180px;

}


/* ============================================================
   RESET
   ============================================================ */

* {

    box-sizing:
        border-box;

    margin:
        0;

    padding:
        0;

}


html {

    scroll-behavior:
        smooth;

}


body {

    background:
        var(--bg-deep);

    color:
        var(--text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height:
        1.6;

    overflow-x:
        hidden;

}


/* ============================================================
   BACKGROUND
   ============================================================ */

.background-grid {

    position:
        fixed;

    inset:
        0;

    pointer-events:
        none;

    opacity:
        .16;

    background-image:
        linear-gradient(
            rgba(32,213,210,.12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(32,213,210,.12) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 80%
        );

    z-index:
        -3;

}


.background-glow {

    position:
        fixed;

    width:
        700px;

    height:
        700px;

    border-radius:
        50%;

    filter:
        blur(140px);

    opacity:
        .11;

    pointer-events:
        none;

    z-index:
        -2;

}


.glow-one {

    background:
        var(--cyan);

    top:
        -300px;

    left:
        -200px;

}


.glow-two {

    background:
        var(--blue);

    right:
        -300px;

    top:
        350px;

}


/* ============================================================
   HEADER
   ============================================================ */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;


    border-bottom:
        1px solid var(--border);

    background:
        rgba(3,8,13,.78);

    backdrop-filter:
        blur(20px);

}


.header-inner {

    width:
        min(
            calc(100% - 40px),
            var(--max-width)
        );

    margin:
        auto;

    min-height:
        82px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.brand {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    color:
        var(--white);

    text-decoration:
        none;

}


.brand-shield {

    width:
        40px;

    height:
        40px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgba(32,213,210,.45);

    border-radius:
        12px;

    color:
        var(--cyan-bright);

    background:
        rgba(32,213,210,.08);

    font-weight:
        900;

    box-shadow:
        0 0 30px rgba(32,213,210,.12);

}


.brand-name {

    font-size:
        1.2rem;

    font-weight:
        800;

    letter-spacing:
        -.03em;

}


.brand-name span {

    color:
        var(--cyan);

}


.brand-name small {

    color:
        var(--muted);

}


.header-status {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    font-size:
        .82rem;

    color:
        var(--muted);

    text-transform:
        uppercase;

    letter-spacing:
        .12em;

}


.status-dot {

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(--green);

    box-shadow:
        0 0 15px var(--green);

    animation:
        pulse 2s infinite;

}


@keyframes pulse {

    50% {

        opacity:
            .35;

        transform:
            scale(.8);

    }

}


/* ============================================================
   GENERAL
   ============================================================ */

.section-inner {

    width:
        min(
            calc(100% - 40px),
            var(--max-width)
        );

    margin:
        auto;

}


.section-label,
.eyebrow {

    color:
        var(--cyan);

    font-size:
        .76rem;

    font-weight:
        800;

    letter-spacing:
        .2em;

    text-transform:
        uppercase;

}


/* ============================================================
   HERO
   ============================================================ */

.hero {

    min-height:
        780px;

    display:
        grid;

    place-items:
        center;

    text-align:
        center;

    padding:
        100px 20px;

}


.hero-content {

    width:
        min(950px,100%);

}


.hero h1 {

    margin-top:
        22px;

    color:
        var(--white);

    font-size:
        clamp(
            3rem,
            8vw,
            6.8rem
        );

    line-height:
        .98;

    letter-spacing:
        -.065em;

}


.hero h1 span {

    display:
        block;

    color:
        transparent;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--blue)
        );

    background-clip:
        text;

    -webkit-background-clip:
        text;

}


.hero-copy {

    max-width:
        750px;

    margin:
        32px auto 0;

    color:
        #aebbc4;

    font-size:
        1.15rem;

}


/* ============================================================
   PROCESS
   ============================================================ */

.process {

    margin:
        55px auto 0;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        20px;

    flex-wrap:
        wrap;

}


.process-item {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    text-align:
        left;

}


.process-number {

    color:
        var(--cyan);

    font-size:
        .7rem;

    font-weight:
        900;

    letter-spacing:
        .1em;

}


.process-item strong {

    display:
        block;

    color:
        var(--white);

}


.process-item small {

    color:
        var(--muted);

}


.process-arrow {

    color:
        #38505f;

    font-size:
        1.3rem;

}


/* ============================================================
   CODE PREVIEW
   ============================================================ */

.code-preview {

    max-width:
        690px;

    margin:
        50px auto 0;

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

    border-radius:
        14px;

    overflow:
        hidden;

    background:
        rgba(4,10,15,.88);

    box-shadow:
        0 30px 80px rgba(0,0,0,.35);

}


.code-header {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        12px 15px;

    border-bottom:
        1px solid var(--border);

}


.code-header span {

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        #31414c;

}


.code-header small {

    margin-left:
        auto;

    color:
        #586873;

    letter-spacing:
        .12em;

}


.code-preview code {

    display:
        block;

    padding:
        23px;

    overflow-x:
        auto;

    color:
        var(--cyan-bright);

    font-family:
        "Courier New",
        monospace;

    font-size:
        .9rem;

}


/* ============================================================
   TRANSPARENCY
   ============================================================ */

.transparency {

    padding:
        120px 0;

    background:
        rgba(8,18,26,.68);

    border-top:
        1px solid var(--border);

    border-bottom:
        1px solid var(--border);

}


.transparency .section-inner {

    max-width:
        900px;

}


.transparency h2,
.launch h2,
.signup-heading h2,
.final-message h2 {

    margin-top:
        13px;

    color:
        var(--white);

    font-size:
        clamp(
            2.2rem,
            5vw,
            4rem
        );

    line-height:
        1.05;

    letter-spacing:
        -.045em;

}


.transparency h2 span {

    color:
        var(--cyan);

}


.transparency > .section-inner > p {

    margin-top:
        25px;

    max-width:
        750px;

    color:
        #9caab4;

    font-size:
        1.05rem;

}


/* ============================================================
   COOKIE DEMO
   ============================================================ */

.cookie-demo {

    margin-top:
        50px;

    border:
        1px solid var(--border-bright);

    border-radius:
        18px;

    background:
        #0b151d;

    overflow:
        hidden;

    box-shadow:
        0 35px 100px rgba(0,0,0,.35);

}


.demo-top {

    padding:
        22px 25px;

    display:
        flex;

    justify-content:
        space-between;

    border-bottom:
        1px solid var(--border);

}


.demo-top strong,
.cookie-info strong {

    display:
        block;

    color:
        var(--white);

}


.demo-top small,
.cookie-info small {

    color:
        var(--muted);

}


.demo-close {

    color:
        var(--muted);

    font-size:
        1.5rem;

}


.cookie-row {

    display:
        flex;

    align-items:
        center;

    gap:
        17px;

    padding:
        20px 25px;

    border-bottom:
        1px solid var(--border);

}


.cookie-row:last-child {

    border-bottom:
        0;

}


.cookie-icon {

    flex:
        0 0 40px;

    width:
        40px;

    height:
        40px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        11px;

}


.cookie-icon.detected {

    color:
        var(--green);

    background:
        rgba(56,226,157,.09);

}


.cookie-icon.pending {

    color:
        var(--orange);

    background:
        rgba(255,174,87,.09);

}


.cookie-info {

    flex:
        1;

}


.cookie-state {

    padding:
        5px 9px;

    border-radius:
        6px;

    font-size:
        .65rem;

    font-weight:
        900;

    letter-spacing:
        .1em;

}


.cookie-state.active {

    color:
        var(--green);

    background:
        rgba(56,226,157,.09);

}


.cookie-state.waiting {

    color:
        var(--orange);

    background:
        rgba(255,174,87,.09);

}


/* ============================================================
   FEATURES
   ============================================================ */

.features {

    padding:
        100px 0;

}


.feature-grid {

    display:
        grid;

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

    gap:
        20px;

}


.feature {

    padding:
        28px;

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

    border-radius:
        16px;

    background:
        rgba(12,24,34,.65);

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease;

}


.feature:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(32,213,210,.35);

    background:
        rgba(17,36,49,.85);

}


.feature-icon {

    margin-bottom:
        20px;

    color:
        var(--cyan);

    font-size:
        1.4rem;

    font-weight:
        900;

}


.feature h3 {

    color:
        var(--white);

    font-size:
        1.05rem;

}


.feature p {

    margin-top:
        10px;

    color:
        var(--muted);

    font-size:
        .9rem;

}


/* ============================================================
   COUNTDOWN
   ============================================================ */

.launch {

    padding:
        110px 0;

    text-align:
        center;

    border-top:
        1px solid var(--border);

}


.countdown {

    margin-top:
        50px;

    display:
        flex;

    justify-content:
        center;

    gap:
        15px;

}


.countdown-box {

    width:
        150px;

    padding:
        27px 15px;

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

    border-radius:
        15px;

    background:
        rgba(12,24,34,.7);

}


.countdown-box strong {

    display:
        block;

    color:
        var(--white);

    font-size:
        2.7rem;

    line-height:
        1;

    font-variant-numeric:
        tabular-nums;

}


.countdown-box span {

    display:
        block;

    margin-top:
        10px;

    color:
        var(--cyan);

    font-size:
        .7rem;

    text-transform:
        uppercase;

    letter-spacing:
        .15em;

}


/* ============================================================
   SIGNUPS
   ============================================================ */

.signup-section {

    padding:
        110px 0;

    background:
        rgba(8,18,26,.7);

    border-top:
        1px solid var(--border);

    border-bottom:
        1px solid var(--border);

}


.signup-heading {

    text-align:
        center;

}


.signup-heading p {

    margin-top:
        15px;

    color:
        var(--muted);

}


.signup-grid {

    max-width:
        940px;

    margin:
        55px auto 0;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        25px;

}


.signup-card {

    position:
        relative;

    padding:
        38px;

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

    border-radius:
        20px;

    background:
        var(--surface);

}


.featured-card {

    border-color:
        rgba(32,213,210,.32);

    box-shadow:
        0 0 50px rgba(32,213,210,.06);

}


.featured-label {

    position:
        absolute;

    top:
        17px;

    right:
        17px;

    color:
        var(--cyan);

    font-size:
        .6rem;

    font-weight:
        900;

    letter-spacing:
        .14em;

}


.signup-icon {

    font-size:
        1.7rem;

    margin-bottom:
        18px;

}


.signup-card h3 {

    color:
        var(--white);

    font-size:
        1.35rem;

}


.signup-card > p {

    min-height:
        78px;

    margin-top:
        10px;

    color:
        var(--muted);

    font-size:
        .92rem;

}


.signup-form {

    margin-top:
        25px;

}


.signup-form input {

    width:
        100%;

    padding:
        15px 16px;

    border:
        1px solid var(--border-bright);

    border-radius:
        9px;

    outline:
        none;

    background:
        #071018;

    color:
        var(--white);

    font-size:
        .95rem;

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

}


.signup-form input:focus {

    border-color:
        var(--cyan);

    box-shadow:
        0 0 0 3px rgba(32,213,210,.08);

}


.signup-form button {

    width:
        100%;

    margin-top:
        11px;

    padding:
        15px;

    border:
        0;

    border-radius:
        9px;

    cursor:
        pointer;

    color:
        #031011;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--cyan-bright)
        );

    font-size:
        .9rem;

    font-weight:
        900;

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.signup-form button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 30px rgba(32,213,210,.18);

}


.privacy-note {

    display:
        block;

    margin-top:
        12px;

    text-align:
        center;

    color:
        #65747e;

}


/* ============================================================
   FINAL MESSAGE
   ============================================================ */

.final-message {

    padding:
        130px 20px;

    text-align:
        center;

}


.final-message .section-inner {

    max-width:
        800px;

}


.shield-large {

    width:
        65px;

    height:
        65px;

    margin:
        0 auto 30px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgba(32,213,210,.35);

    border-radius:
        18px;

    color:
        var(--cyan-bright);

    background:
        rgba(32,213,210,.07);

    font-size:
        1.6rem;

    font-weight:
        900;

}


.final-message p {

    margin:
        22px auto;

    max-width:
        650px;

    color:
        var(--muted);

}


.final-tagline {

    color:
        var(--cyan);

    letter-spacing:
        .04em;

}


/* ============================================================
   FOOTER
   ============================================================ */

footer {

    border-top:
        1px solid var(--border);

    padding:
        35px 20px;

}


.footer-inner {

    width:
        min(100%,var(--max-width));

    margin:
        auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        #667782;

    font-size:
        .78rem;

}


.footer-brand {

    color:
        var(--white);

    font-weight:
        800;

}


.footer-brand span {

    color:
        var(--cyan);

}


.footer-development {

    text-transform:
        uppercase;

    letter-spacing:
        .1em;

}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

.sr-only {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    padding:
        0;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(0,0,0,0);

    white-space:
        nowrap;

    border:
        0;

}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    .feature-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .signup-grid {

        grid-template-columns:
            1fr;

    }


    .signup-card > p {

        min-height:
            auto;

    }

}


@media (max-width: 650px) {

    .header-status {

        display:
            none;

    }


    .hero {

        min-height:
            auto;

        padding:
            90px 20px;

    }


    .process {

        flex-direction:
            column;

        align-items:
            flex-start;

        width:
            fit-content;

    }


    .process-arrow {

        display:
            none;

    }


    .feature-grid {

        grid-template-columns:
            1fr;

    }


    .countdown {

        display:
            grid;

        grid-template-columns:
            1fr 1fr;

    }


    .countdown-box {

        width:
            100%;

    }


    .cookie-row {

        align-items:
            flex-start;

        flex-wrap:
            wrap;

    }


    .cookie-state {

        margin-left:
            57px;

    }


    .footer-inner {

        flex-direction:
            column;

        text-align:
            center;

    }

}
/* Fixed navigation: space is measured by shared header script. */
body { padding-top: var(--gds-header-height, 82px); }