/* ==========================================================
   ORION PROJECTS
   ========================================================== */

.projects-page {
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 8%, rgba(49, 91, 163, .15), transparent 25rem),
        radial-gradient(circle at 88% 28%, rgba(108, 55, 147, .10), transparent 30rem),
        #020712;
}

.projects-page h1,
.projects-page h2,
.projects-page h3,
.projects-page p {
    margin-top: 0;
}

.eyebrow {
    margin-bottom: 12px;
    color: #78d9ff;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .2em;
}


/* ==========================================================
   INTRO
   ========================================================== */

.projects-intro-v2 {
    position: relative;

    width: min(1380px, 94%);
    min-height: 440px;

    margin: 0 auto;
    padding: 105px 0 50px;

    display: grid;
    grid-template-columns: .8fr 1.2fr;
    align-items: center;
    gap: 5%;
}

.intro-copy {
    position: relative;
    z-index: 2;
}

.intro-copy h1 {
    max-width: 820px;
    margin-bottom: 20px;

    font-size: clamp(2.6rem, 5vw, 5.2rem);
    line-height: .98;
    letter-spacing: -.055em;
}

.intro-copy h1 span {
    display: block;

    background:
        linear-gradient(90deg, #79dfff, #b9caff, #dfb7ff);

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.intro-copy > p:last-child {
    max-width: 680px;

    color: #9fb0c1;
    font-size: 1.02rem;
    line-height: 1.65;
}


/* ORION tér */

.intro-space {
    position: relative;

    width: 100%;
    height: 310px;
}

.intro-space::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.4px),
        radial-gradient(circle, rgba(112,195,255,.65) 0 1px, transparent 1.5px);

    background-position:
        20px 15px,
        73px 57px;

    background-size:
        97px 83px,
        139px 121px;

    opacity: .45;

    mask-image:
        radial-gradient(circle, black, transparent 75%);
}

.orbit {
    position: absolute;

    left: 50%;
    top: 50%;

    border: 1px solid rgba(113,202,255,.11);
    border-radius: 50%;

    transform: translate(-50%, -50%) rotate(-20deg);
}

.orbit-a {
    width: 390px;
    height: 175px;
}

.orbit-b {
    width: 290px;
    height: 120px;

    transform: translate(-50%, -50%) rotate(34deg);
}

.orion-mini {
    position: absolute;

    width: 220px;
    height: 245px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%) rotate(-5deg);

    filter: drop-shadow(0 0 12px rgba(90,190,255,.16));
}

.orion-mini .star {
    position: absolute;

    width: 7px;
    height: 7px;

    z-index: 2;

    background: white;
    border-radius: 50%;

    box-shadow:
        0 0 5px white,
        0 0 15px #55c9ff,
        0 0 28px rgba(85,201,255,.5);
}

.st1 { left:34px; top:22px; }
.st2 { right:30px; top:48px; }
.st3 { left:76px; top:105px; }
.st4 { left:108px; top:111px; }
.st5 { left:139px; top:116px; }
.st6 { left:40px; bottom:24px; }
.st7 { right:30px; bottom:8px; }

.const-line {
    position: absolute;

    z-index: 1;

    height: 1px;

    background:
        linear-gradient(90deg,
            rgba(84,191,255,.12),
            rgba(84,191,255,.75),
            rgba(84,191,255,.12));

    transform-origin: left center;
}

.cl1 { width:107px; left:38px; top:26px; transform:rotate(14deg); }
.cl2 { width:83px; left:38px; top:27px; transform:rotate(60deg); }
.cl3 { width:37px; left:79px; top:108px; transform:rotate(10deg); }
.cl4 { width:35px; left:111px; top:114px; transform:rotate(9deg); }
.cl5 { width:100px; left:78px; top:110px; transform:rotate(112deg); }
.cl6 { width:102px; left:143px; top:119px; transform:rotate(66deg); }


/* ==========================================================
   NAGY TERMÉKBEMUTATÓK
   ========================================================== */

.product-feature {
    width: min(1380px, 94%);
    min-height: 410px;

    margin: 18px auto;

    display: grid;
    grid-template-columns: 1.15fr .85fr;

    overflow: hidden;

    border: 1px solid rgba(150,190,220,.14);
    border-radius: 24px;

    background:
        linear-gradient(145deg,
            rgba(15,25,40,.90),
            rgba(4,9,18,.96));

    box-shadow:
        0 25px 80px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.04);
}

.product-feature.reverse {
    grid-template-columns: .85fr 1.15fr;
}

.product-feature.reverse .feature-visual {
    order: 2;
}

.product-feature.reverse .feature-copy {
    order: 1;
}

.feature-copy {
    padding: clamp(32px, 5vw, 65px);

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.product-state {
    width: max-content;

    margin-bottom: 15px;
    padding: 5px 9px;

    color: #b7d4e7;

    border: 1px solid rgba(180,210,230,.22);
    border-radius: 99px;

    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.state-live {
    color: #89f6ba;
    border-color: rgba(83,235,153,.3);
}

.state-soon {
    color: #d0b5ff;
    border-color: rgba(182,133,255,.32);
}

.product-type {
    margin-bottom: 8px;

    color: #72879a;
    font-size: .7rem;
    letter-spacing: .13em;
}

.feature-copy h2 {
    margin-bottom: 16px;

    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 1;
    letter-spacing: -.045em;
}

.feature-lead {
    max-width: 530px;
    margin-bottom: 12px;

    color: #d8e5ee;
    font-size: 1.05rem;
    line-height: 1.55;
}

.feature-text {
    max-width: 560px;

    color: #8799a9;
    font-size: .9rem;
    line-height: 1.65;
}

.feature-actions {
    margin-top: 25px;
}

.project-button {
    display: inline-flex;

    padding: 10px 16px;

    color: #dcebf5;
    text-decoration: none;

    border: 1px solid rgba(150,205,240,.24);
    border-radius: 9px;

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

    transition: .2s ease;
}

.project-button:hover {
    transform: translateY(-2px);

    border-color: rgba(126,220,255,.65);
    background: rgba(86,194,255,.08);
}

.project-button.primary {
    color: #03111b;
    border-color: #80ddff;

    background:
        linear-gradient(135deg,#a3e9ff,#68cfff);
}


/* ==========================================================
   NEWS VIZUÁL
   ========================================================== */

.feature-visual {
    position: relative;
    min-height: 410px;
    overflow: hidden;
}

.visual-news {
    background:
        radial-gradient(circle at 55% 50%,
            rgba(0,188,255,.17),
            transparent 31%),
        radial-gradient(circle at 80% 20%,
            rgba(80,84,255,.10),
            transparent 35%),
        #050d17;
}

.world {
    position: absolute;

    width: 290px;
    height: 290px;

    left: 50%;
    top: 50%;

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

    border: 1px solid rgba(89,213,255,.6);
    border-radius: 50%;

    box-shadow:
        0 0 80px rgba(0,180,255,.12),
        inset 0 0 55px rgba(0,180,255,.06);
}

.latitude,
.longitude {
    position: absolute;
    border: 1px solid rgba(91,210,255,.23);
    border-radius: 50%;
}

.latitude {
    left: 5%;
    width: 90%;
}

.lat1 {
    height: 32%;
    top: 18%;
}

.lat2 {
    height: 32%;
    bottom: 18%;
}

.longitude {
    top: 5%;
    height: 90%;
}

.long1 {
    width: 38%;
    left: 31%;
}

.long2 {
    width: 70%;
    left: 15%;
}

.world-point {
    position: absolute;

    width: 6px;
    height: 6px;

    background: #9cecff;
    border-radius: 50%;

    box-shadow:
        0 0 8px #71ddff,
        0 0 20px rgba(113,221,255,.65);
}

.wp1 { left:24%; top:34%; }
.wp2 { right:25%; top:27%; }
.wp3 { left:37%; bottom:23%; }
.wp4 { right:17%; bottom:37%; }

.news-stream {
    position: absolute;

    display: grid;
    gap: 8px;
}

.news-stream span {
    display: block;

    height: 2px;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(117,222,255,.65),
            transparent);
}

.stream-a {
    width: 230px;
    left: -15px;
    top: 95px;
    transform: rotate(8deg);
}

.stream-b {
    width: 190px;
    right: -20px;
    bottom: 75px;
    transform: rotate(-13deg);
}

.visual-word {
    position: absolute;

    right: 24px;
    bottom: 15px;

    color: rgba(255,255,255,.08);

    font-size: clamp(2.8rem,6vw,6rem);
    font-weight: 900;
    letter-spacing: -.06em;
}


/* ==========================================================
   TRANSCRIPT
   ========================================================== */

.visual-transcript {
    display: grid;
    place-items: center;

    background:
        radial-gradient(circle,
            rgba(160,87,255,.18),
            transparent 35%),
        radial-gradient(circle at 20% 80%,
            rgba(45,177,255,.10),
            transparent 40%),
        #090816;
}

.transcript-wave {
    display: flex;
    align-items: center;
    gap: 7px;

    height: 170px;
}

.transcript-wave i {
    width: 4px;

    border-radius: 10px;

    background:
        linear-gradient(to top,
            #6a62ff,
            #cf78ff,
            #80e8ff);

    box-shadow: 0 0 12px rgba(172,107,255,.25);
}

.transcript-wave i:nth-child(1)  { height:18px; }
.transcript-wave i:nth-child(2)  { height:35px; }
.transcript-wave i:nth-child(3)  { height:64px; }
.transcript-wave i:nth-child(4)  { height:97px; }
.transcript-wave i:nth-child(5)  { height:53px; }
.transcript-wave i:nth-child(6)  { height:122px; }
.transcript-wave i:nth-child(7)  { height:76px; }
.transcript-wave i:nth-child(8)  { height:145px; }
.transcript-wave i:nth-child(9)  { height:89px; }
.transcript-wave i:nth-child(10) { height:57px; }
.transcript-wave i:nth-child(11) { height:132px; }
.transcript-wave i:nth-child(12) { height:79px; }
.transcript-wave i:nth-child(13) { height:110px; }
.transcript-wave i:nth-child(14) { height:61px; }
.transcript-wave i:nth-child(15) { height:91px; }
.transcript-wave i:nth-child(16) { height:47px; }
.transcript-wave i:nth-child(17) { height:68px; }
.transcript-wave i:nth-child(18) { height:32px; }
.transcript-wave i:nth-child(19) { height:16px; }

.transcript-line {
    position: absolute;
    left: 10%;

    height: 1px;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(210,175,255,.3),
            transparent);
}

.tl1 { width:55%; top:24%; }
.tl2 { width:75%; top:50%; }
.tl3 { width:45%; bottom:20%; }


/* ==========================================================
   K9 + AGILITY
   ========================================================== */

.project-pair {
    width: min(1380px,94%);
    margin: 18px auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.project-showcase {
    overflow: hidden;

    border: 1px solid rgba(180,200,220,.13);
    border-radius: 22px;

    background:
        linear-gradient(145deg,
            rgba(15,23,35,.92),
            rgba(5,9,16,.97));

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035);
}

.showcase-graphic {
    height: 210px;

    display: grid;
    place-items: center;

    overflow: hidden;
}

.showcase-graphic svg {
    width: 100%;
    height: 100%;
}

.showcase-k9 .showcase-graphic {
    background:
        radial-gradient(circle at 50% 60%,
            rgba(255,139,61,.16),
            transparent 45%),
        #100b08;
}

.k9-graphic svg {
    fill: none;
    stroke: rgba(255,169,102,.8);
    stroke-width: 2;
}

.k9-route {
    stroke-dasharray: 7 10;
    opacity: .45;
}

.k9-graphic circle {
    fill: #ff9d58;
    stroke: none;
}

.k9-graphic .paw-pad,
.k9-graphic ellipse {
    fill: rgba(255,135,64,.10);
    stroke: rgba(255,161,91,.72);
}

.showcase-agility .showcase-graphic {
    background:
        radial-gradient(circle at 60% 45%,
            rgba(255,75,145,.14),
            transparent 40%),
        radial-gradient(circle at 30% 75%,
            rgba(255,180,55,.10),
            transparent 35%),
        #100810;
}

.agility-graphic svg {
    fill: none;
    stroke-width: 2;
}

.agility-track {
    stroke: rgba(255,113,166,.55);
    stroke-dasharray: 8 9;
}

.agility-hoop {
    stroke: #ff9857;
}

.agility-jump {
    stroke: #ff6ea7;
}

.agility-graphic circle:not(.agility-hoop) {
    fill: #ffb45f;
    stroke: none;
}

.showcase-copy {
    padding: 26px 28px 30px;
}

.showcase-copy h2 {
    margin-bottom: 9px;

    font-size: clamp(1.7rem,3vw,2.7rem);
    letter-spacing: -.035em;
}

.showcase-copy p {
    max-width: 480px;
    margin-bottom: 20px;

    color: #899aaa;
}

.showcase-copy a {
    color: #a8ddf5;
    text-decoration: none;
    font-weight: 700;
}


/* ==========================================================
   TOVÁBBI PROJEKTEK
   ========================================================== */

.more-projects {
    width: min(1380px,94%);
    margin: 85px auto 0;
}

.section-heading {
    margin-bottom: 30px;

    display: grid;
    grid-template-columns: 1fr .65fr;
    gap: 50px;
    align-items: end;
}

.section-heading h2 {
    margin-bottom: 0;

    font-size: clamp(2rem,4vw,3.6rem);
    letter-spacing: -.04em;
}

.section-heading > p {
    max-width: 520px;

    color: #8193a3;
}

.project-list-v2 {
    border-top: 1px solid rgba(170,200,220,.15);
}

.project-row {
    min-height: 125px;
    padding: 17px 20px;

    display: grid;
    grid-template-columns: 160px 1fr 50px;
    gap: 28px;
    align-items: center;

    color: inherit;
    text-decoration: none;

    border-bottom: 1px solid rgba(170,200,220,.13);

    transition:
        background .2s ease,
        padding-left .2s ease;
}

.project-row:hover {
    padding-left: 28px;

    background:
        linear-gradient(90deg,
            rgba(255,255,255,.035),
            transparent 65%);
}

.row-visual {
    position: relative;

    height: 90px;

    overflow: hidden;

    border-radius: 12px;

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

.row-copy h3 {
    margin-bottom: 6px;

    font-size: 1.35rem;
}

.row-copy p {
    margin-bottom: 0;

    color: #7e91a1;
    font-size: .88rem;
}

.row-arrow {
    color: #7acff2;
    font-size: 1.3rem;
}


/* Market */

.market .row-visual {
    background:
        radial-gradient(circle at 50% 100%,
            rgba(64,255,167,.13),
            transparent 70%);
}

.bars {
    height: 100%;

    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 7px;

    padding-bottom: 13px;
}

.bars i {
    width: 10px;

    background:
        linear-gradient(to top,
            rgba(59,255,159,.25),
            #6affba);

    border-radius: 2px 2px 0 0;
}

.bars i:nth-child(1) { height:20px; }
.bars i:nth-child(2) { height:38px; }
.bars i:nth-child(3) { height:29px; }
.bars i:nth-child(4) { height:55px; }
.bars i:nth-child(5) { height:68px; }


/* Chef */

.chef .row-visual {
    background:
        radial-gradient(circle,
            rgba(255,181,71,.14),
            transparent 65%);
}

.chef-ring {
    position: absolute;

    width: 75px;
    height: 25px;

    left: calc(50% - 37px);
    bottom: 15px;

    border: 1px solid #ffc470;
    border-radius: 50%;
}

.chef-steam {
    position: absolute;

    width: 13px;
    height: 40px;

    top: 16px;

    border-left: 1px solid rgba(255,214,151,.75);
    border-radius: 50%;
}

.cs1 { left:45%; }
.cs2 { left:55%; top:10px; }


/* Audio */

.audio {
    --project-accent: #cf72ff;
}

.audio-bars {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;

    background:
        radial-gradient(circle,
            rgba(203,82,255,.14),
            transparent 65%);
}

.audio-bars i {
    width: 4px;

    border-radius: 5px;

    background:
        linear-gradient(to top,#9957ff,#ff73c7);
}

.audio-bars i:nth-child(1) { height:20px; }
.audio-bars i:nth-child(2) { height:43px; }
.audio-bars i:nth-child(3) { height:65px; }
.audio-bars i:nth-child(4) { height:36px; }
.audio-bars i:nth-child(5) { height:58px; }
.audio-bars i:nth-child(6) { height:31px; }
.audio-bars i:nth-child(7) { height:15px; }


/* Maker */

.maker .row-visual {
    background:
        radial-gradient(circle,
            rgba(255,215,81,.13),
            transparent 65%);
}

.maker-shape {
    position: absolute;

    width: 38px;
    height: 38px;

    top: 26px;

    border: 1px solid rgba(255,216,94,.7);
}

.ms1 {
    left:34px;
    transform:rotate(15deg);
}

.ms2 {
    left:62px;
    border-radius:50%;
}

.ms3 {
    left:89px;
    transform:rotate(45deg);
}


/* Video */

.video .row-visual {
    display:grid;
    place-items:center;

    background:
        radial-gradient(circle,
            rgba(255,71,126,.14),
            transparent 65%);
}

.video-frame {
    position:relative;

    width:75px;
    height:48px;

    border:1px solid rgba(255,106,151,.75);
    border-radius:4px;
}

.video-frame span {
    position:absolute;

    left:30px;
    top:14px;

    width:0;
    height:0;

    border-top:9px solid transparent;
    border-bottom:9px solid transparent;
    border-left:14px solid #ff709c;
}


/* Radar */

.detector .row-visual {
    display:grid;
    place-items:center;

    background:
        radial-gradient(circle,
            rgba(75,255,183,.12),
            transparent 65%);
}

.radar {
    position:relative;

    width:68px;
    height:68px;

    border:1px solid rgba(91,255,193,.6);
    border-radius:50%;
}

.radar::before,
.radar::after {
    content:"";

    position:absolute;

    border:1px solid rgba(91,255,193,.25);
    border-radius:50%;
}

.radar::before {
    inset:12px;
}

.radar::after {
    inset:25px;
}

.radar i {
    position:absolute;

    width:32px;
    height:1px;

    left:50%;
    top:50%;

    background:#63ffc4;

    transform-origin:left;
    transform:rotate(-42deg);
}


/* Sensor */

.sensor {
    background:
        radial-gradient(circle,
            rgba(91,175,255,.13),
            transparent 65%);
}

.sensor span {
    position:absolute;

    width:18px;
    height:18px;

    left:calc(50% - 9px);
    top:calc(50% - 9px);

    border:1px solid #82cbff;
    border-radius:50%;

    box-shadow:0 0 14px rgba(87,190,255,.4);
}

.sensor i {
    position:absolute;

    width:5px;
    height:5px;

    background:#8dd2ff;
    border-radius:50%;
}

.sensor i:nth-child(1) { left:25%; top:24%; }
.sensor i:nth-child(2) { right:22%; top:30%; }
.sensor i:nth-child(3) { left:28%; bottom:19%; }
.sensor i:nth-child(4) { right:25%; bottom:20%; }


/* ==========================================================
   ÜGYFÉLPROJEKTEK
   ========================================================== */

.client-projects {
    width: min(1380px,94%);

    margin: 90px auto 70px;
    padding: 55px;

    border: 1px solid rgba(160,195,220,.13);
    border-radius: 22px;

    background:
        radial-gradient(circle at 90% 20%,
            rgba(77,170,255,.09),
            transparent 35%),
        rgba(8,15,25,.72);
}

.client-projects h2 {
    max-width: 850px;
    margin-bottom: 20px;

    font-size: clamp(2rem,4vw,3.7rem);
    line-height:1.05;
    letter-spacing:-.04em;
}

.client-projects h2 span {
    display:block;
    color:#8fdcff;
}

.client-projects > p:not(.eyebrow) {
    max-width:760px;

    color:#899cab;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1100px) {

    .projects-intro-v2 {
        min-height:360px;

        grid-template-columns:.65fr 1.35fr;
    }

    .intro-copy h1 {
        font-size:clamp(2.4rem,5vw,3.7rem);
    }

    .product-feature,
    .product-feature.reverse {
        grid-template-columns:1fr 1fr;
        min-height:350px;
    }

    .feature-visual {
        min-height:350px;
    }

    .world {
        width:230px;
        height:230px;
    }

    .project-row {
        grid-template-columns:125px 1fr 35px;
    }

}


/* ==========================================================
   TELEFON / KESKENY TABLET
   ========================================================== */

@media (max-width: 760px) {

    .projects-intro-v2 {
        width:90%;
        min-height:auto;

        padding-top:85px;

        grid-template-columns:1fr;
    }

    .intro-space {
        height:180px;
        order:2;
    }

    .intro-copy {
        order:1;
    }

    .orion-mini {
        transform:
            translate(-50%,-50%)
            rotate(-5deg)
            scale(.68);
    }

    .product-feature,
    .product-feature.reverse {
        width:90%;

        grid-template-columns:1fr;
    }

    .product-feature.reverse .feature-visual,
    .product-feature.reverse .feature-copy {
        order:initial;
    }

    .feature-visual {
        min-height:260px;
    }

    .feature-copy {
        padding:27px 23px 30px;
    }

    .world {
        width:190px;
        height:190px;
    }

    .project-pair {
        width:90%;

        grid-template-columns:1fr;
    }

    .showcase-graphic {
        height:170px;
    }

    .more-projects {
        width:90%;
        margin-top:60px;
    }

    .section-heading {
        grid-template-columns:1fr;
        gap:12px;
    }

    .project-row {
        min-height:105px;

        padding:12px 4px;

        grid-template-columns:85px 1fr 24px;
        gap:15px;
    }

    .row-visual {
        height:70px;
    }

    .row-copy h3 {
        font-size:1.05rem;
    }

    .row-copy p {
        font-size:.78rem;
    }

    .client-projects {
        width:90%;

        margin-top:60px;
        padding:28px 23px;
    }

}

/* =========================================================
   COLORFUL UNIFIED PROJECT CARDS V2
   ========================================================= */


/* ---------------------------------------------------------
   COMMON CARD DEPTH
   --------------------------------------------------------- */

.project-showcase {
    position: relative;

    isolation: isolate;

    background:
        linear-gradient(
            145deg,
            rgba(7,20,38,.88),
            rgba(2,8,18,.96)
        ) !important;
}

.project-showcase::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -2;

    pointer-events: none;

    opacity: .9;
}

.project-showcase::after {
    content: "";

    position: absolute;
    inset: 1px;

    z-index: -1;

    pointer-events: none;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.025),
            transparent 38%
        );
}

.showcase-graphic {
    position: relative;

    overflow: hidden;

    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.015),
            rgba(0,0,0,.04)
        );
}

.showcase-graphic::after {
    content: "";

    position: absolute;
    inset: auto 8% 5px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(130,210,255,.22),
            transparent
        );
}

.showcase-graphic svg {
    position: relative;
    z-index: 2;
}


/* ---------------------------------------------------------
   MARKETWATCHER — GREEN / CYAN
   --------------------------------------------------------- */

.showcase-marketwatcher::before {
    background:
        radial-gradient(
            circle at 28% 23%,
            rgba(44,226,160,.16),
            transparent 34%
        ),
        radial-gradient(
            circle at 78% 5%,
            rgba(64,198,255,.08),
            transparent 30%
        );
}

.marketwatcher-graphic {
    background:
        radial-gradient(
            ellipse at 48% 65%,
            rgba(44,226,160,.12),
            transparent 55%
        );
}

.mw-glow {
    position: absolute;

    width: 260px;
    height: 120px;

    left: 22%;
    top: 28%;

    border-radius: 50%;

    background: rgba(42,230,160,.14);

    filter: blur(45px);
}

.marketwatcher-graphic .mw-grid {
    stroke: rgba(89,219,190,.12);
    stroke-width: 1;
}

.marketwatcher-graphic .mw-bar {
    fill: rgba(56,224,163,.10);
    stroke: url(#mwGradient);
    stroke-width: 2;
}

.marketwatcher-graphic .mw-trend {
    fill: none;

    stroke: url(#mwGradient);
    stroke-width: 4;

    filter: url(#mwGlow);
}

.marketwatcher-graphic .mw-point {
    fill: #66f0bd;
    stroke: #071d17;
    stroke-width: 2;
}

.marketwatcher-graphic .mw-label {
    fill: rgba(95,226,200,.34);

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;
}

.mw-mini-data {
    position: absolute;

    left: 7%;
    top: 10%;

    z-index: 4;

    padding: 7px 9px;

    border: 1px solid rgba(70,230,178,.20);
    border-radius: 6px;

    background: rgba(3,18,17,.7);
}

.mw-mini-data span,
.mw-mini-data strong {
    display: block;
}

.mw-mini-data span {
    color: #69bca2;

    font-size: .43rem;
    letter-spacing: .12em;
}

.mw-mini-data strong {
    margin-top: 2px;

    color: #6df0bd;

    font-size: .78rem;
}


/* ---------------------------------------------------------
   CHEF — ORANGE / GOLD / CYAN
   --------------------------------------------------------- */

.showcase-chef::before {
    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(255,151,55,.17),
            transparent 36%
        ),
        radial-gradient(
            circle at 72% 20%,
            rgba(255,207,89,.07),
            transparent 27%
        );
}

.chef-project-graphic {
    background:
        radial-gradient(
            ellipse at center,
            rgba(255,151,55,.10),
            transparent 60%
        );
}

.chef-card-glow {
    position: absolute;

    width: 300px;
    height: 120px;

    left: 23%;
    top: 25%;

    border-radius: 50%;

    background: rgba(255,153,55,.15);

    filter: blur(50px);
}

.chef-project-graphic .chef-book-shape,
.chef-project-graphic .chef-book-center {
    fill: rgba(255,164,61,.035);

    stroke: url(#chefGradient);
    stroke-width: 2.3;

    filter: url(#chefGlow);
}

.chef-project-graphic .chef-book-text {
    fill: none;

    stroke: rgba(255,216,137,.42);
    stroke-width: 1.6;
}

.chef-project-graphic .chef-orbit-dot {
    fill: #ffb34f;
    stroke: #ffe6a9;
}

.chef-floating-tag {
    position: absolute;

    z-index: 4;

    padding: 5px 8px;

    color: #ffc46f;

    border: 1px solid rgba(255,177,74,.18);
    border-radius: 5px;

    background: rgba(30,17,4,.72);

    font-size: .42rem;
    font-weight: 750;
    letter-spacing: .1em;
}

.chef-floating-tag.tag-one {
    left: 8%;
    top: 16%;
}

.chef-floating-tag.tag-two {
    right: 6%;
    bottom: 15%;
}


/* ---------------------------------------------------------
   AUDIO — PURPLE / MAGENTA / CYAN
   --------------------------------------------------------- */

.showcase-audio::before {
    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(162,92,255,.17),
            transparent 35%
        ),
        radial-gradient(
            circle at 72% 30%,
            rgba(235,81,255,.08),
            transparent 28%
        );
}

.audio-project-graphic {
    background:
        radial-gradient(
            ellipse at center,
            rgba(154,81,255,.10),
            transparent 62%
        );
}

.audio-glow {
    position: absolute;

    width: 330px;
    height: 100px;

    left: 20%;
    top: 30%;

    background: rgba(179,76,255,.16);

    border-radius: 50%;

    filter: blur(50px);
}

.audio-project-graphic .audio-center {
    fill: none;

    stroke: rgba(160,120,255,.13);
    stroke-width: 1;
}

.audio-project-graphic .audio-wave {
    fill: none;

    stroke: url(#audioGradient);
    stroke-width: 4;

    filter:
        drop-shadow(
            0 0 6px rgba(191,90,255,.42)
        );
}

.audio-time {
    position: absolute;

    left: 8%;
    right: 8%;
    bottom: 10px;

    z-index: 4;

    display: flex;
    align-items: center;
    gap: 8px;
}

.audio-time span {
    color: rgba(199,181,255,.55);

    font-size: .42rem;
}

.audio-time i {
    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(181,89,255,.55),
            rgba(87,218,255,.22)
        );
}


/* ---------------------------------------------------------
   MAKER — CORAL / AMBER / LIME
   --------------------------------------------------------- */

.showcase-maker::before {
    background:
        radial-gradient(
            circle at 25% 22%,
            rgba(255,105,77,.15),
            transparent 34%
        ),
        radial-gradient(
            circle at 72% 20%,
            rgba(255,190,73,.08),
            transparent 30%
        );
}

.maker-project-graphic {
    background:
        radial-gradient(
            ellipse at center,
            rgba(255,137,73,.09),
            transparent 60%
        );
}

.maker-glow {
    position: absolute;

    width: 280px;
    height: 140px;

    left: 24%;
    top: 20%;

    border-radius: 50%;

    background: rgba(255,126,70,.14);

    filter: blur(50px);
}

.maker-project-graphic .maker-object {
    fill: rgba(255,159,72,.035);

    stroke: url(#makerGradient);
    stroke-width: 2.2;
}

.maker-project-graphic .maker-path {
    fill: none;

    stroke: rgba(255,199,83,.48);
    stroke-width: 1.5;
    stroke-dasharray: 5 8;
}

.maker-project-graphic .maker-node {
    fill: #ffc55c;
    stroke: none;
}

.maker-label {
    position: absolute;

    right: 7%;
    top: 12%;

    color: rgba(255,192,91,.55);

    font-size: .46rem;
    font-weight: 800;
    letter-spacing: .19em;
}


/* ---------------------------------------------------------
   VIDEO — PINK / VIOLET / CYAN
   --------------------------------------------------------- */

.showcase-video::before {
    background:
        radial-gradient(
            circle at 28% 20%,
            rgba(255,62,139,.16),
            transparent 35%
        ),
        radial-gradient(
            circle at 74% 20%,
            rgba(110,92,255,.11),
            transparent 30%
        );
}

.video-project-graphic {
    background:
        radial-gradient(
            ellipse at center,
            rgba(178,74,255,.10),
            transparent 62%
        );
}

.video-glow {
    position: absolute;

    width: 330px;
    height: 125px;

    left: 20%;
    top: 25%;

    border-radius: 50%;

    background: rgba(192,62,220,.15);

    filter: blur(50px);
}

.video-project-graphic .video-screen {
    fill: rgba(113,72,190,.035);

    stroke: url(#videoGradient);
    stroke-width: 2.3;

    filter:
        drop-shadow(
            0 0 8px rgba(177,72,255,.23)
        );
}

.video-project-graphic .video-play {
    fill: rgba(255,84,157,.16);

    stroke: #ee7aff;
    stroke-width: 2;
}

.video-project-graphic .video-timeline {
    fill: none;

    stroke: rgba(118,202,255,.25);
    stroke-width: 1;
}

.video-project-graphic .video-clip {
    fill: rgba(178,91,255,.13);

    stroke: rgba(225,104,255,.48);
    stroke-width: 1;
}

.video-badge {
    position: absolute;

    right: 7%;
    top: 10%;

    color: rgba(228,139,255,.6);

    font-size: .43rem;
    font-weight: 800;
    letter-spacing: .16em;
}


/* ---------------------------------------------------------
   ORIONICS DETEKTOR — GREEN / ELECTRIC BLUE
   --------------------------------------------------------- */

.showcase-detector::before {
    background:
        radial-gradient(
            circle at 35% 25%,
            rgba(52,255,173,.13),
            transparent 36%
        ),
        radial-gradient(
            circle at 72% 20%,
            rgba(42,143,255,.10),
            transparent 30%
        );
}

.detector-project-graphic {
    background:
        radial-gradient(
            circle at center,
            rgba(47,221,167,.09),
            transparent 60%
        );
}

.detector-glow {
    position: absolute;

    width: 240px;
    height: 180px;

    left: 30%;
    top: 10%;

    border-radius: 50%;

    background: rgba(48,231,173,.12);

    filter: blur(50px);
}

.detector-project-graphic .radar-ring,
.detector-project-graphic .radar-cross {
    fill: none;

    stroke: rgba(82,226,190,.26);
    stroke-width: 1.4;
}

.detector-project-graphic .radar-sweep {
    fill: rgba(61,235,179,.10);

    stroke: rgba(73,231,186,.55);
    stroke-width: 1.3;
}

.detector-project-graphic .radar-target {
    fill: #56f2bd;

    stroke: rgba(191,255,237,.75);
    stroke-width: 2;

    filter:
        drop-shadow(
            0 0 7px rgba(70,255,190,.6)
        );
}

.detector-project-graphic .radar-target.small {
    fill: #4ea9ff;
}

.detector-alert {
    position: absolute;

    left: 8%;
    top: 11%;

    display: flex;
    align-items: center;
    gap: 6px;

    color: rgba(91,233,197,.64);

    font-size: .43rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.detector-alert i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #4cf0b6;

    box-shadow:
        0 0 9px rgba(76,240,182,.75);
}


/* ---------------------------------------------------------
   TRICODER — CYAN / BLUE / VIOLET
   --------------------------------------------------------- */

.showcase-tricoder::before {
    background:
        radial-gradient(
            circle at 27% 18%,
            rgba(51,215,255,.15),
            transparent 34%
        ),
        radial-gradient(
            circle at 74% 25%,
            rgba(120,81,255,.11),
            transparent 31%
        );
}

.tricoder-project-graphic {
    background:
        radial-gradient(
            circle at center,
            rgba(64,143,255,.11),
            transparent 60%
        );
}

.tricoder-glow {
    position: absolute;

    width: 270px;
    height: 170px;

    left: 27%;
    top: 12%;

    border-radius: 50%;

    background: rgba(69,138,255,.13);

    filter: blur(50px);
}

.tricoder-project-graphic .tri-orbit {
    fill: none;

    stroke: rgba(73,203,255,.20);
    stroke-width: 1.2;
    stroke-dasharray: 6 7;
}

.tricoder-project-graphic .tri-orbit.second {
    stroke: rgba(156,104,255,.22);
}

.tricoder-project-graphic .tri-link {
    fill: none;

    stroke: url(#triGradient);
    stroke-width: 1.6;

    opacity: .65;
}

.tricoder-project-graphic .tri-core {
    fill: rgba(64,192,255,.16);

    stroke: #68ddff;
    stroke-width: 2.5;

    filter:
        drop-shadow(
            0 0 9px rgba(71,198,255,.45)
        );
}

.tricoder-project-graphic .tri-node {
    fill: #72e2ff;

    stroke: rgba(205,242,255,.7);
    stroke-width: 1.5;
}

.tri-readout {
    position: absolute;

    right: 7%;
    bottom: 10%;

    z-index: 4;

    display: flex;
    align-items: center;
    gap: 6px;

    color: rgba(138,207,255,.55);

    font-size: .4rem;
    letter-spacing: .1em;
}

.tri-readout i {
    width: 22px;
    height: 1px;

    background: #62d9ff;
}

.tri-readout strong {
    color: #72e4ff;

    font-size: .43rem;
}


/* ---------------------------------------------------------
   CARD ACCENT LINES
   --------------------------------------------------------- */

.showcase-marketwatcher {
    border-top-color: rgba(59,226,168,.28) !important;
}

.showcase-chef {
    border-top-color: rgba(255,164,61,.30) !important;
}

.showcase-audio {
    border-top-color: rgba(180,91,255,.30) !important;
}

.showcase-maker {
    border-top-color: rgba(255,139,75,.30) !important;
}

.showcase-video {
    border-top-color: rgba(222,76,210,.30) !important;
}

.showcase-detector {
    border-top-color: rgba(61,231,174,.28) !important;
}

.showcase-tricoder {
    border-top-color: rgba(73,189,255,.30) !important;
}


/* ---------------------------------------------------------
   KEEP THE GRID COMPACT
   --------------------------------------------------------- */

.project-showcase {
    min-height: 320px !important;
}

.showcase-graphic {
    height: 150px !important;
    min-height: 150px !important;
}

@media (max-width: 1100px) {

    .project-showcase {
        min-height: 295px !important;
    }

    .showcase-graphic {
        height: 135px !important;
        min-height: 135px !important;
    }

}

@media (max-width: 700px) {

    .project-showcase {
        min-height: 270px !important;
    }

    .showcase-graphic {
        height: 120px !important;
        min-height: 120px !important;
    }

    .mw-mini-data,
    .chef-floating-tag,
    .maker-label,
    .video-badge,
    .detector-alert,
    .tri-readout {
        transform: scale(.9);
    }

}