/* ============================================================
   JURA V1 FINAL — FUTURISTIC
   More geometry, light, depth and contrast.
   ============================================================ */

body{
    background:
        linear-gradient(
            127deg,
            rgba(10,58,38,.10) 0 14%,
            transparent 14% 25%,
            rgba(183,139,40,.075) 25% 37%,
            transparent 37% 58%,
            rgba(15,78,51,.08) 58% 71%,
            transparent 71%
        ),
        radial-gradient(
            ellipse at 7% 3%,
            rgba(24,116,74,.18),
            transparent 30rem
        ),
        radial-gradient(
            ellipse at 95% 27%,
            rgba(206,163,56,.13),
            transparent 31rem
        ),
        radial-gradient(
            ellipse at 52% 87%,
            rgba(14,74,48,.10),
            transparent 35rem
        ),
        #f3f7f4;
}


/*
 * More pronounced geometric grid.
 */

body::before{
    opacity:1;

    background:
        linear-gradient(
            30deg,
            transparent 0 44%,
            rgba(17,95,60,.055) 44% 46%,
            transparent 46% 100%
        ),
        linear-gradient(
            150deg,
            transparent 0 64%,
            rgba(184,139,40,.045) 64% 66%,
            transparent 66% 100%
        ),
        linear-gradient(
            90deg,
            transparent 0 49.6%,
            rgba(21,95,61,.025) 49.6% 50.4%,
            transparent 50.4%
        );

    background-size:
        180px 180px,
        250px 250px,
        105px 105px;
}


/*
 * Futuristic navigation surface.
 */

header::before{
    background:
        linear-gradient(
            112deg,
            rgba(11,65,42,.15) 0 13%,
            transparent 13% 23%,
            rgba(196,151,43,.12) 23% 34%,
            transparent 34% 53%,
            rgba(21,95,61,.11) 53% 68%,
            transparent 68% 82%,
            rgba(181,138,43,.08) 82% 100%
        ),
        radial-gradient(
            ellipse at 8% 20%,
            rgba(38,139,91,.19),
            transparent 18rem
        ),
        radial-gradient(
            ellipse at 91% 12%,
            rgba(218,176,66,.15),
            transparent 16rem
        );
}

header::after{
    width:245px;
    height:90px;
    right:2%;
    top:-4px;

    opacity:.52;

    clip-path:polygon(
        0 36%,
        18% 0,
        48% 15%,
        70% 0,
        100% 31%,
        83% 57%,
        100% 100%,
        56% 82%,
        25% 100%,
        7% 66%
    );

    background:
        linear-gradient(
            130deg,
            rgba(21,95,61,.27),
            rgba(199,153,44,.20)
        );
}


/*
 * Stronger menu treatment.
 */

#nav{
    padding:5px;

    border-radius:14px;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.62),
            rgba(237,246,240,.72)
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(21,95,61,.07),
        0 9px 30px
        rgba(13,67,44,.07);

    backdrop-filter:blur(9px);
}

#nav > a{
    padding-inline:11px;
}

#nav > a:hover{
    background:
        linear-gradient(
            135deg,
            rgba(21,95,61,.13),
            rgba(188,145,43,.10)
        );

    box-shadow:
        0 6px 17px
        rgba(12,68,44,.08);
}


/*
 * Stronger cards/forms.
 */

.card,
.panel,
.form-panel,
.auth-card,
.shop-card,
.product-card{
    border-radius:19px;

    box-shadow:
        0 18px 48px
        rgba(10,54,35,.09);

    backdrop-filter:blur(3px);
}

.card::before,
.panel::before,
.form-panel::before,
.auth-card::before,
.shop-card::before,
.product-card::before{
    top:-50px;
    right:-48px;

    width:175px;
    height:150px;

    opacity:.13;

    clip-path:polygon(
        46% 0,
        100% 18%,
        88% 62%,
        100% 100%,
        48% 84%,
        7% 100%,
        17% 57%,
        0 20%
    );
}


/*
 * Additional geometry on forms.
 */

.form-panel::after,
.auth-card::after{
    content:"";
    position:absolute;
    z-index:0;

    left:-60px;
    bottom:-80px;

    width:180px;
    height:180px;

    opacity:.065;

    transform:rotate(22deg);

    background:
        repeating-linear-gradient(
            45deg,
            var(--jura-green) 0 2px,
            transparent 2px 13px
        );

    clip-path:polygon(
        50% 0,
        100% 50%,
        50% 100%,
        0 50%
    );

    pointer-events:none;
}


/*
 * Controls remain readable.
 */

input,
select,
textarea{
    background:
        rgba(255,255,255,.91) !important;

    border-radius:12px !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(21,95,61,.025);
}


/*
 * Logo/name must stay clean.
 */

.brand,
.brand *,
.mark,
.logo,
.logo *{
    text-shadow:none !important;
    filter:none !important;
}


/*
 * Shop contrast and button alignment.
 */

.product-card,
.shop-card,
.shop-product{
    color:var(--jura-ink,#17241d) !important;
}

.product-card p,
.shop-card p,
.shop-product p{
    opacity:.91;
}

.product-card .button,
.shop-card .button,
.shop-product .button{
    min-height:44px;

    display:inline-flex;

    align-items:center;
    justify-content:center;
}


/*
 * Footer geometry — no fake red.
 */

footer::before{
    width:390px;
    height:330px;

    opacity:.13;

    background:
        linear-gradient(
            130deg,
            var(--jura-gold,#b58a2b),
            var(--jura-green,#155f3d)
        );
}


/*
 * Dark mode remains disabled.
 */

.jura-theme-toggle,
.theme-toggle,
#theme-toggle,
[data-theme-toggle]{
    display:none !important;
}