/* =========================================================
   Texnoqraf — isometric build machine (home page)
   Colours are tokens so the scene follows the site theme.
   ========================================================= */
.tg-iso {
    --iso-bg-1: #10141d;
    --iso-bg-2: #07090D;
    --iso-top: #242a38;
    --iso-left: #171b25;
    --iso-right: #11141c;
    --iso-edge: rgba(245, 247, 250, .08);
    --iso-belt: #0b0d12;
    --iso-slat: rgba(245, 247, 250, .09);
    --iso-grid: rgba(245, 247, 250, .07);
    --iso-ink: #F5F7FA;
    --iso-muted: rgba(245, 247, 250, .42);
    --iso-screen: #06080c;
    --iso-accent: #3F6EE9;
    --iso-accent2: #5C9DFF;
    --iso-ok: #34D399;

    --p-page: #EEF2FA;
    --p-side-l: #C5CEDF;
    --p-side-r: #AEB9CE;
    --p-chrome: #DCE3F0;
    --p-card: #D7DFEE;
    --p-line: #A9B5CB;
    --p-ink: #1B2233;
    --p-code: #151A26;
    --p-wire: #3F6EE9;

    --iso-vignette: rgba(0, 0, 0, .38);
    --iso-sheen: rgba(255, 255, 255, .045);

    position: relative;
}

:root[data-theme="light"] .tg-iso {
    --iso-bg-1: #FFFFFF;
    --iso-bg-2: #EAEEF6;
    --iso-top: #FFFFFF;
    --iso-left: #E3E8F1;
    --iso-right: #D3DAE7;
    --iso-edge: rgba(10, 12, 18, .09);
    --iso-belt: #C4CCDA;
    --iso-slat: rgba(10, 12, 18, .10);
    --iso-grid: rgba(10, 12, 18, .07);
    --iso-ink: #0A0C12;
    --iso-muted: rgba(10, 12, 18, .45);
    --iso-screen: #0E1320;

    --p-page: #FFFFFF;
    --p-side-l: #D5DCE8;
    --p-side-r: #C2CBDB;
    --p-chrome: #EDF1F7;
    --p-card: #E6EBF4;

    --iso-shadow: #0A0C12;
    --iso-vignette: rgba(10, 12, 18, .06);
    --iso-sheen: rgba(63, 110, 233, .07);
}

/* Hero bento: machine tile top-right, welcome text bottom-right.
   Pinned explicitly — the template's "Type 04" rule would
   otherwise pull a 3rd medium tile into the left column. */
.bringer-hero-type06 .bringer-bento-grid > .tg-iso {
    grid-area: 1 / 3 / 2 / 5;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.bringer-hero-type06 .bringer-bento-grid > .tg-iso + .is-medium {
    grid-area: 2 / 3 / 3 / 5;
}
/* Rows follow their content: the animation tile sets row 1, the welcome
   card only takes the height its text needs, the title card spans both. */
.bringer-hero-type06 .bringer-bento-grid {
    grid-template-rows: auto auto;
}
@media only screen and (max-width: 960px) {
    /* Every row sizes to its own content. The template's implicit rows are
       1fr, which stretched the short welcome card to the tallest row. */
    .bringer-hero-type06 .bringer-bento-grid {
        grid-template-rows: none;
        grid-auto-rows: auto;
    }
    .bringer-hero-type06 .bringer-bento-grid > .is-large {
        min-height: 480px;
    }
    .bringer-hero-type06 .bringer-bento-grid > .tg-iso {
        grid-area: 3 / 1 / 4 / 3;
    }
    .bringer-hero-type06 .bringer-bento-grid > .tg-iso + .is-medium {
        grid-area: 4 / 1 / 5 / 3;
    }
}

.tg-iso-stage {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid var(--bringer-s-border);
    background: radial-gradient(120% 90% at 55% 40%, var(--iso-bg-1) 0%, var(--iso-bg-2) 70%);
}

/* glass finish: soft inner vignette + a slow light sheen every ~11s */
.tg-iso-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 90px var(--iso-vignette);
    background: linear-gradient(115deg, transparent 42%, var(--iso-sheen) 50%, transparent 58%) no-repeat;
    background-size: 300% 100%;
    background-position: 100% 0;
    animation: tg-iso-sheen 11s cubic-bezier(.45, 0, .2, 1) infinite;
}
@keyframes tg-iso-sheen {
    0%, 72% { background-position: 100% 0; }
    100%    { background-position: 0% 0; }
}

.tg-iso-svg {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(.965);
    transform-origin: 50% 55%;
    filter: blur(6px);
    transition: opacity .9s ease, transform 1.4s cubic-bezier(.16, 1, .3, 1), filter 1s ease;
}
.tg-iso.is-ready .tg-iso-svg {
    opacity: 1;
    transform: none;
    filter: none;
}

/* --- Faces --------------------------------------------- */
.tg-iso polygon {
    stroke: var(--iso-edge);
    stroke-width: 1;
    stroke-linejoin: round;
}
.tg-iso .iso-t { fill: var(--iso-top); }
.tg-iso .iso-l { fill: var(--iso-left); }
.tg-iso .iso-r { fill: var(--iso-right); }

.tg-iso .iso-plinth .iso-t { fill: var(--iso-left); }
.tg-iso .iso-cap .iso-t { fill: var(--iso-left); }
.tg-iso .iso-belt .iso-t { fill: var(--iso-belt); }
.tg-iso .iso-pad .iso-t { fill: var(--iso-left); }

.tg-iso .iso-floor path {
    stroke: var(--iso-grid);
    stroke-width: 1;
    fill: none;
}
.tg-iso .iso-slats path {
    stroke: var(--iso-slat);
    stroke-width: 2;
    fill: none;
}
.tg-iso .iso-rollers circle {
    fill: var(--iso-belt);
    stroke: var(--iso-edge);
    stroke-width: .03;
}

/* --- Input cubes ----------------------------------------- */
.tg-iso .iso-logo,
.tg-iso .iso-band { fill: var(--b); }
.tg-iso .iso-band { opacity: .85; }

/* --- Machine --------------------------------------------- */
.tg-iso .iso-trim {
    fill: none;
    stroke: var(--iso-accent2);
    stroke-width: 1.5;
    stroke-opacity: .55;
    stroke-linecap: round;
}
.tg-iso .iso-screen { fill: var(--iso-screen); stroke: var(--iso-edge); stroke-width: .02; }
.tg-iso .iso-vent { fill: var(--iso-right); }
.tg-iso .iso-label {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    fill: var(--iso-muted);
}
.tg-iso .iso-label { font-size: .26px; font-weight: 600; letter-spacing: .01px; }

.tg-iso .cd-a { fill: #5C9DFF; }
.tg-iso .cd-b { fill: #FF6B6B; }
.tg-iso .cd-c { fill: rgba(245, 247, 250, .28); }
.tg-iso .cd-d { fill: #4FC08D; }
.tg-iso .cd-e { fill: #C792EA; }

.tg-iso .iso-led { fill: var(--iso-right); stroke: var(--iso-edge); stroke-width: .02; }
.tg-iso .iso-led-on { fill: var(--iso-ok); }
.tg-iso .iso-track { fill: var(--iso-belt); }
.tg-iso .iso-bar { fill: url(#tgiso-bar); }
.tg-iso .iso-bar.is-ok { fill: url(#tgiso-bar2); }
.tg-iso .iso-bar-glow { fill: #B9CFFF; }
.tg-iso .iso-bar-glow.is-ok { fill: #A7F3D0; }
.tg-iso .iso-bar-halo { fill: var(--iso-accent2); }
.tg-iso .is-ok .iso-bar-halo { fill: var(--iso-ok); }
.tg-iso .iso-bar-core { fill: #FFFFFF; }
.tg-iso .iso-label.iso-pct { font-size: .2px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tg-iso .iso-shadow { fill: var(--iso-shadow, var(--b)); }
.tg-iso .iso-shadow.is-screen { fill: var(--iso-shadow, var(--iso-accent2)); }
.tg-iso .p-scan { fill: #DCE8FF; }
.tg-iso .iso-shock { fill: none; stroke: var(--iso-accent2); }
.tg-iso .iso-slot { fill: var(--iso-screen); }
.tg-iso .iso-slot-glow { fill: var(--iso-accent); fill-opacity: .28; }
.tg-iso .iso-slot-lip { stroke: var(--iso-accent2); stroke-width: .05; stroke-linecap: round; }

.tg-iso .iso-ring,
.tg-iso .iso-ring-dash {
    fill: none;
    stroke: var(--iso-accent2);
    stroke-width: .045;
}
.tg-iso .iso-ring { stroke-opacity: .3; }
.tg-iso .iso-ring-dash { stroke-dasharray: .22 .16; stroke-opacity: .8; }
.tg-iso .iso-ring-dash.is-inner { stroke-dasharray: .1 .12; stroke-opacity: .6; }
.tg-iso .iso-well { fill: var(--iso-screen); stroke: var(--iso-accent); stroke-width: .05; }
.tg-iso .iso-core { fill: var(--iso-accent2); }
.tg-iso .iso-cone,
.tg-iso .iso-beam { stroke: none; }

.tg-iso .iso-holo path {
    fill: var(--b);
    filter: drop-shadow(0 0 6px var(--b));
}
.tg-iso .iso-holo-ring {
    fill: none;
    stroke: var(--b);
    stroke-width: .03;
    stroke-dasharray: .08 .1;
    stroke-opacity: .6;
}

.tg-iso .iso-particle polygon { stroke: none; }
.tg-iso .iso-particle .iso-t { fill: var(--b); }
.tg-iso .iso-particle .iso-l,
.tg-iso .iso-particle .iso-r { fill: var(--b); fill-opacity: .6; }

/* --- Pad + portal ---------------------------------------- */
.tg-iso .iso-pad-ring { fill: none; stroke: var(--iso-accent2); stroke-width: .04; stroke-opacity: .55; }
.tg-iso .iso-pad-glow { fill: var(--iso-accent); fill-opacity: .35; }
.tg-iso .iso-portal-glow { fill: var(--iso-accent); fill-opacity: .22; }

/* --- Output screens -------------------------------------- */
.tg-iso .iso-panel .iso-t { fill: var(--p-page); }
.tg-iso .iso-panel .iso-l { fill: var(--p-side-l); }
.tg-iso .iso-panel .iso-r { fill: var(--p-side-r); }
.tg-iso .p-page { fill: var(--p-page); }
.tg-iso .p-chrome { fill: var(--p-chrome); }
.tg-iso .p-dot { fill: var(--p-line); }
.tg-iso .p-url { fill: var(--p-page); }
.tg-iso .p-piece {
    stroke: var(--p-wire);
    stroke-width: .018;
    stroke-dasharray: .05 .035;
}
.tg-iso .p-acc { fill: #3F6EE9; }
.tg-iso .p-acc2 { fill: #9DBBFF; }
.tg-iso .p-card { fill: var(--p-card); }
.tg-iso .p-line { fill: var(--p-line); }
.tg-iso .p-ink { fill: var(--p-ink); }
.tg-iso .p-code { fill: var(--p-code); }
.tg-iso .p-ok { fill: #34D399; }

.tg-iso .iso-badge rect { fill: var(--iso-ok); stroke: none; }
.tg-iso .iso-badge text {
    font-family: var(--bringer-t-content-ff, Inter, sans-serif);
    font-size: 12px;
    font-weight: 600;
    fill: #06281C;
}
.tg-iso .iso-badge-check {
    fill: none;
    stroke: #06281C;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- SEO line -------------------------------------------- */
.tg-iso .iso-ico * {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.tg-iso .iso-ico .is-accent { stroke: var(--iso-accent2); }
.tg-iso .iso-ico .is-fill { fill: currentColor; stroke: none; }
.tg-iso .iso-ico .g-b { stroke: #4285F4; stroke-linecap: butt; stroke-width: 3; }
.tg-iso .iso-ico .g-r { stroke: #EA4335; stroke-linecap: butt; stroke-width: 3; }
.tg-iso .iso-ico .g-y { stroke: #FBBC05; stroke-linecap: butt; stroke-width: 3; }
.tg-iso .iso-ico .g-g { stroke: #34A853; stroke-linecap: butt; stroke-width: 3; }

.tg-iso .iso-ped .iso-t { fill: var(--iso-left); }
.tg-iso .iso-ped-ring { fill: none; stroke: var(--iso-accent2); stroke-width: .04; stroke-opacity: .6; }
.tg-iso .iso-ped-glow { fill: var(--iso-accent); fill-opacity: .45; }

.tg-iso .iso-tile { color: var(--iso-ink); }
.tg-iso .iso-tile-bg {
    fill: var(--iso-top);
    stroke: var(--iso-accent2);
    stroke-opacity: .55;
    stroke-width: 1.2;
}
.tg-iso .iso-tile-halo { fill: var(--iso-accent); fill-opacity: .3; stroke: none; }
.tg-iso .iso-tether {
    stroke: var(--iso-accent2);
    stroke-opacity: .35;
    stroke-width: 1;
    stroke-dasharray: 2 3;
}
.tg-iso .iso-scan {
    stroke: var(--iso-accent2);
    stroke-width: 1.6;
    stroke-dasharray: 4 4;
    stroke-linecap: round;
    filter: drop-shadow(0 0 3px var(--iso-accent2));
}
.tg-iso .iso-scan-dot { fill: var(--iso-accent2); filter: drop-shadow(0 0 4px var(--iso-accent2)); }

.tg-iso .iso-sweep { fill: var(--iso-ok); fill-opacity: .35; stroke: none; }
.tg-iso .is-seo .iso-trim { stroke: var(--iso-ok); }
.tg-iso .iso-slot-glow.is-ok { fill: var(--iso-ok); }
.tg-iso .iso-slot-lip.is-ok { stroke: var(--iso-ok); }
.tg-iso .iso-rank-line {
    fill: none;
    stroke: var(--iso-ok);
    stroke-width: .04;
    stroke-linejoin: round;
}
.tg-iso .iso-holo2 { color: var(--iso-ok); }
.tg-iso .iso-holo2 .iso-ico { filter: drop-shadow(0 0 4px var(--iso-ok)); }

.tg-iso .p-url.is-seo { fill: #C9F2DF; }
.tg-iso .p-seo { fill: #34D399; }

.tg-iso .iso-badge.is-rank rect { fill: #FFFFFF; stroke: #4285F4; stroke-width: 1.5; }
.tg-iso .iso-badge.is-rank text { fill: #1B2233; font-weight: 700; }

.tg-iso .iso-portal-logo circle { fill: none; }

/* =========================================================
   Hero title card: animated aurora background
   ========================================================= */
.tg-hero-bg {
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(130% 100% at 0% 100%, #16235a 0%, #0b1024 55%, #070a16 100%);
}
/* Extra breathing room around the hero headline and intro text. */
.tg-hero-bg .bringer-page-title,
.tg-hero-bg .bringer-highlight {
    padding: 0 calc(var(--stg-gap) * 0.75);
}
.tg-hero-bg .bringer-page-title {
    padding-top: calc(var(--stg-gap) * 0.5);
}
.tg-hero-bg .bringer-highlight {
    padding-bottom: calc(var(--stg-gap) * 0.5);
}
/* Keep the intro text's original 320px line length despite the side padding. */
@media only screen and (min-width: 740px) {
    .bringer-hero-type06 .is-large .tg-hero-bg p {
        max-width: calc(320px + var(--stg-gap) * 1.5);
    }
}
.tg-hero-bg > :not(.tg-aurora) {
    position: relative;
    z-index: 1;
}
.tg-hero-bg .bringer-page-title,
.tg-hero-bg p,
:root[data-theme="light"] .tg-hero-bg .bringer-page-title,
:root[data-theme="light"] .tg-hero-bg p {
    color: #F6F8FC;
}
.tg-aurora {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
/* Optional hero background photo (Admin → Homepage → Hero). */
.tg-hero-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tg-hero-photo-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 10, 22, .25) 0%, rgba(7, 10, 22, .55) 55%, rgba(7, 10, 22, .85) 100%);
}
.tg-aurora > span {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}
.tg-aurora-a {
    width: 90%;
    aspect-ratio: 1;
    left: -25%;
    top: -20%;
    background: radial-gradient(closest-side, rgba(63, 110, 233, .75), rgba(63, 110, 233, 0));
    animation: tg-drift-a 18s ease-in-out infinite alternate;
}
.tg-aurora-b {
    width: 80%;
    aspect-ratio: 1;
    right: -30%;
    top: 25%;
    background: radial-gradient(closest-side, rgba(139, 92, 246, .6), rgba(139, 92, 246, 0));
    animation: tg-drift-b 22s ease-in-out infinite alternate;
}
.tg-aurora-c {
    width: 70%;
    aspect-ratio: 1;
    left: 5%;
    bottom: -30%;
    background: radial-gradient(closest-side, rgba(52, 211, 153, .35), rgba(52, 211, 153, 0));
    animation: tg-drift-c 26s ease-in-out infinite alternate;
}
/* faint isometric floor grid, drifting like a belt */
.tg-aurora-grid {
    inset: -80px -80px -80px -160px;
    border-radius: 0 !important;
    background-image:
        repeating-linear-gradient(30deg, rgba(245, 247, 250, .07) 0 1px, transparent 1px 36px),
        repeating-linear-gradient(-30deg, rgba(245, 247, 250, .07) 0 1px, transparent 1px 36px);
    -webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, transparent 70%);
            mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, transparent 70%);
    animation: tg-grid 12s linear infinite;
}

@keyframes tg-drift-a {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(30%, 25%) scale(1.2); }
}
@keyframes tg-drift-b {
    0%   { transform: translate(0, 0) scale(1.1); }
    100% { transform: translate(-35%, -30%) scale(.9); }
}
@keyframes tg-drift-c {
    0%   { transform: translate(0, 0) scale(.9); }
    100% { transform: translate(40%, -20%) scale(1.15); }
}
@keyframes tg-grid {
    /* one tile of the 30deg lattice, so the loop is seamless */
    to { transform: translateX(72px); }
}
@media (prefers-reduced-motion: reduce) {
    .tg-aurora > span { animation: none; }
    .tg-iso-stage::after { animation: none; }
    .tg-iso-svg { transform: none; filter: none; transition: opacity .6s ease; }
}