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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {

     /* Backgrounds */
     --bg: #070b18;
     --bg2: #111936;
     --bg-light: #ffffff;
 
     /* Brand Colors */
     --blue: #3f8cff;
     --purple: #9b5cff;
 
     /* Text */
     --text: #ffffff;
     --text2: #b9c3d8;
     --text-dark: #222222;
     --text-muted: #6b7280;
 
     /* Layout */
     --max-width: 1400px;

}

body {

    font-family: "Manrope", sans-serif;

    color: var(--text);

    background: var(--bg);

}

/* ===========================
   NAVBAR
=========================== */

header{

    position:absolute;

    width:100%;

    z-index:100;

}

.navbar{

    max-width:var(--max-width);

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:30px 60px;

}

.logo img{
    height: 48px;
    width: auto;
    display: block;

}

.nav-links{

    display:flex;

    list-style:none;

    gap:40px;

}

.nav-links a{

    color:white;

    text-decoration:none;

    transition:.3s;

}

.nav-links a:hover{

    color:var(--blue);

}

.btn-outline{

    color:white;

    text-decoration:none;

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

    padding:14px 28px;

    border-radius:999px;

    transition:.3s;

}

.btn-outline:hover{

    background:white;

    color:black;

}

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

.menu-toggle{

    display:none;

    background:none;

    border:none;

    color:#fff;

    font-size:2rem;

    cursor:pointer;

    transition:.3s;

}

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

.hero{

    position:relative;

    overflow:hidden;

    min-height:100vh;

    background:
        linear-gradient(rgba(6,8,20,.55),rgba(6,8,20,.75)),
        url("../images/hero-bg.jpg");

    background-size:cover;

    background-position:center;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    text-align:center;

    padding-bottom:90px;

}

.hero-content{

    position:relative;

    width:100%;

    max-width:1200px;

    display:flex;

    flex-direction:column;

    align-items:center;

    z-index:2;

}


.hero-photo{

    width:320px;

    max-width:52vw;

    opacity:.50 !important;

    filter:drop-shadow(0 0 14px rgba(59,130,246,.26)) !important;

    transform:translateY(150px);

    transition:.6s;

    position:relative;

    z-index:1;

}

.hero-text{

    position:relative;

    z-index:5;

    transform:translateY(75px);

}

.hero h1{

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

    font-weight:800;

    margin:0 auto 20px;

    line-height:1.05;

    letter-spacing:-0.035em;

    max-width:980px;

}

.hero h1 .tech{

    color:#3B82F6;

}

.hero h1 .business-word{

    color:#6D28D9;

}

.hero p{

    color:var(--text2);

    font-size:1.15rem;

    font-weight:500;

    letter-spacing:.02em;

    max-width:720px;

    line-height:1.8;

    margin:0 auto 45px;

}

.buttons{

    display:flex;

    justify-content:center;

    gap:25px;

}

.btn-primary{

    text-decoration:none;

    color:#fff;

    background:linear-gradient(135deg,#3B82F6,#7C3AED);

    padding:15px 34px;

    border-radius:999px;

    transition:.3s;

}

.btn-secondary{

    text-decoration:none;

    color:#fff;

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

    padding:15px 34px;

    border-radius:999px;

    transition:.3s;

}

.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(91,78,255,.35);

}

.btn-secondary:hover{

    background:#fff;

    color:#000;

}

/* HERO ICONS */

.hero-icons{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:1;

}

.hero-icon{

    position:absolute;

    width:44px;

    opacity:.45;

    transition:.45s ease;

    animation:floatIcon 6s ease-in-out infinite;

}


.hero-icon:nth-child(2){
    animation-delay:.8s;
}

.hero-icon:nth-child(3){
    animation-delay:1.4s;
}

.hero-icon:nth-child(4){
    animation-delay:2s;
}

.hero-icon:nth-child(5){
    animation-delay:2.6s;
}

.hero-icon:nth-child(6){
    animation-delay:1s;
}

.hero-icon:nth-child(7){
    animation-delay:1.7s;
}

.hero-icon:nth-child(8){
    animation-delay:2.3s;
}

.hero-icon:nth-child(9){
    animation-delay:2.9s;
}

.hero-icon:nth-child(10){
    animation-delay:3.4s;
}

@keyframes floatIcon{
    0%, 100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }
}

/* Enterprise */

.architecture{

    top:90px;

    left:calc(50% - 80px);

}

.cloud{

    top:130px;

    left:calc(50% - 150px);

}

.servers{

    top:200px;

    left:calc(50% - 170px);

}

.storage{

    top:260px;

    left:calc(50% - 230px);

}

.business-icon{

    top:330px;

    left:calc(50% - 230px);

}


/* Digital */

.design{

    top:85px;

    right:calc(50% - 90px);

}

.code{

    top:160px;

    right:calc(50% - 130px);

}

.seo{

    top:230px;

    right:calc(50% - 160px);

}

.ai{

    top:280px;

    right:calc(50% - 200px);

}

.analytics{

    top:330px;

    right:calc(50% - 160px);

}

/* Hover */

.hero:hover .hero-icon{

    opacity:.65;

}



/* ==========================
   ABOUT
========================== */

.about {

    background: var(--bg-light);

    padding:100px 20px 100px;

}

.about .container{

    max-width:900px;
    margin:0 auto;
    text-align:center;

}

.section-label{

    font-size:.85rem;
    letter-spacing:6px;
    color:var(--text-muted);
    margin-bottom:30px;

}

.about-photo{
    margin:42px 0 45px;
}

.about-photo img{
    width:220px;
    max-width:100%;
    height:auto;
    display:block;
    margin:0 auto;

    filter:contrast(1.03) saturate(1.02);
    border-radius:16px;
    box-shadow:
        0 20px 40px rgba(0,0,0,.12),
        0 0 28px rgba(63,140,255,.12);
}

.about-title{

    font-size:clamp(2.1rem,3.6vw,3.3rem);

    line-height:1.18;

    font-weight:800;

    color:var(--text-dark);

    max-width:900px;

    margin:0 auto 40px;

}



.about-text{

    max-width:760px;
    margin:0 auto;

}

.about-text p{

    font-size:1.15rem;
    line-height:2;
    color:var(--text-muted);

    margin-bottom:28px;

    text-align:left;

}

.about-tags{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:14px;

    margin-top:45px;

}

.about-tags span{

    padding:12px 22px;

    border-radius:999px;

    background:rgba(63,140,255,.05);

    border:1px solid rgba(63,140,255,.15);

    color:var(--text-dark);

    font-size:.95rem;

    font-weight:500;

    letter-spacing:.2px;

}

.about-tags span:hover{

    background:rgba(63,140,255,.08);

    border-color:rgba(63,140,255,.30);

}

/* ==========================
   SECTION DIVIDER
========================== */

.section-divider{

    height:80px;

    background:linear-gradient(
        to bottom,
        #ffffff 0%,
        #f7f9fc 20%,
        #0d1326 100%
    );

}

/* ==========================
   ENTERPRISE
========================== */

.enterprise{
    background:#0d1326;
    padding:120px 20px 50px;
}

.enterprise .container{

    max-width:1200px;

    margin:0 auto;

}

.enterprise-title{

    text-align:center;

    font-size:clamp(2.3rem,4vw,3.8rem);

    line-height:1.15;

    font-weight:800;

    color:#fff;

    margin-bottom:25px;

}

.enterprise-title span{

    color:var(--blue);

}

.enterprise-intro{

    max-width:760px;

    margin:0 auto 80px;

    text-align:center;

    color:var(--text2);

    font-size:1.15rem;

    line-height:1.9;

}

.text-blue{
    color: var(--blue);
}

.text-purple{
    color: var(--purple);
}

.text-blue{
    color: var(--blue);
}

.text-purple{
    color: var(--purple);
}

.enterprise-grid{

    display:grid;

    gap:35px;

    max-width:1000px;

    margin:0 auto;

}

.enterprise-card{

    background:#121b34;

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

    border-radius:22px;

    padding:45px;

    transition:.35s;

}

.enterprise-card:hover{

    transform:translateY(-6px);

    border-color:rgba(63,140,255,.35);

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

}

.card-icon{

    width:52px;
    height:52px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:28px;

}

.card-icon img{

    width:42px;
    height:42px;

    display:block;

}

.enterprise-card h3{

    color:#fff;

    font-size:2rem;

    margin-bottom:20px;

}

.enterprise-card p{

    color:var(--text2);

    line-height:1.9;

    font-size:1.08rem;

    margin-bottom:30px;

}

.enterprise-card a{

    color:var(--blue);

    text-decoration:none;

    font-weight:600;

}

.enterprise-card a:hover{

    color:#fff;

}

/* ==========================
   ENTERPRISE CLOSING
========================== */

.enterprise-closing{

    position:relative;

    max-width:900px;

    margin:170px auto 40px;

    text-align:center;

}

.enterprise-closing::before{

    content:"";

    display:block;

    width:120px;

    height:1px;

    margin:0 auto 70px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );

}

.enterprise-closing h2{

    font-size:clamp(2.3rem,4vw,3.8rem);

    line-height:1.15;

    font-weight:800;

    color:#fff;

    margin-bottom:28px;

}

.enterprise-closing h2 span{

    color:var(--blue);

}

.enterprise-closing p{

    color:var(--text2);

    font-size:1.05rem;

    letter-spacing:.08em;

    line-height:2;

}

/* ===================================================
   DIGITAL
=================================================== */


.digital{
    position:relative;
    overflow:hidden;
    background:#F4F6FB;
    padding:90px 20px 100px;
    box-shadow: inset 0 30px 40px rgba(255,255,255,.5);
}

.digital .section-label{
    display:block;
    text-align:center;
    margin-bottom:30px;

    transform:translateY(-20px);
}

.digital-title{
    max-width:820px;
    margin:0 auto 35px;
    line-height:0.95;
}

.digital-title .light{

    display:block;
    font-size:4rem;
    font-weight:800;
    color:#9b5cff;
    letter-spacing:-1px;
    margin-bottom:8px; 

}

.digital-title .accent{

    display:block;
    margin-top:0px;
    font-size:4rem;
    font-weight:300;
    color:#0d1326;

}

.digital-title span{

    display:block;

    margin-top:12px;

    color:var(--purple);

    text-shadow:
        0 12px 40px rgba(155,92,255,.18);

}

.digital-intro{

    max-width:820px;

    margin:0 auto 80px;

    color:#596273;

    font-size:1.15rem;

    line-height:1.9;
    
    margin-bottom:90px;

}


/* ==========================
        GRID
========================== */

.portfolio-wrapper{
    max-width:1380px;
    margin:80px auto 0;
}

.portfolio-grid{

    display:grid;

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

    grid-template-rows:repeat(16,90px);

    gap:18px;

    background:#fff;

    padding:40px;

    border-radius:40px;

    overflow:hidden;

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

}
/* ==========================
        CARD
========================== */

.card{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    background:#ddd;

    cursor:pointer;

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

}

.card img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .7s cubic-bezier(.22,.61,.36,1);

}

.card::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.65),
        rgba(0,0,0,.15) 55%,
        transparent
    );

    opacity:0;

    transition:.35s;

}

.card span{

    position:absolute;

    left:24px;

    bottom:22px;

    color:#fff;

    font-size:1.2rem;

    font-weight:700;

    opacity:0;

    transform:translateY(18px);

    transition:.35s;

    z-index:5;

}

.card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 25px 70px rgba(0,0,0,.28);

}

.card:hover img{

    transform:scale(1.08);

}

.card:hover::after{

    opacity:1;

}

.card:hover span{

    opacity:1;

    transform:none;

}


/* ==========================
        LAYOUT
========================== */

.branding{

    grid-column:1 / 3;

    grid-row:1 / 17;

}

.social{

    grid-column:3 / 9;

    grid-row:1 / 4;

}

.info{

    grid-column:9 / 13;

    grid-row:1 / 4;

}

.logo{

    grid-column:3 / 8;

    grid-row:4 / 9;

}

.freelancer{

    grid-column:8 / 13;

    grid-row:4 / 9;

}

.banner{

    grid-column:3 / 8;

    grid-row:9 / 12;

}

.tshirt{

    grid-column:8 / 13;

    grid-row:9 / 12;

}

.merch{

    grid-column:3 / 7;

    grid-row:12 / 17;

}

.web{

    grid-column:7 / 13;

    grid-row:12 / 17;

}

/* FINAL HERO DESKTOP SPACING */

.hero{
    padding-bottom:160px !important;
}

.lang-switch{
    color:white;
    text-decoration:none;
    font-weight:700;
    font-size:.9rem;
    letter-spacing:.08em;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.22);
    transition:.3s;
}

.lang-switch:hover{
    color:#fff;
    border-color:rgba(63,140,255,.65);
    background:rgba(63,140,255,.12);
}



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

@media(max-width:1100px){

.portfolio-grid{

    grid-template-columns: repeat(2,1fr);
    grid-template-rows: auto;

}

.card{

    grid-column:auto!important;

    grid-row:auto!important;

    aspect-ratio:1;

}

.branding{

    aspect-ratio:.45;

}

}


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

.projects{

    background:#0b1020;

    padding:90px 20px 10px;

}

.projects .section-label{

    display:block;
    text-align:center;
    margin-bottom:25px;

}

.projects-title{

    max-width:900px;
    margin:0 auto 30px;

    text-align:center;

    font-size:3.8rem;
    font-weight:300;
    line-height:1.1;

    color:#fff;

}

.projects-title span{

    display:block;

    margin-top:12px;

    color:var(--blue);

    font-weight:700;

}

.projects-intro{

    max-width:760px;
    margin:0 auto 80px;

    text-align:center;

    color:#aeb7cc;

    line-height:1.9;

    font-size:1.08rem;

}

.projects-grid{

    display:grid;

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

    gap:35px;

    margin-bottom:70px;

}

.projects-button{

    text-align:center;

    margin-top:0;

    padding:18px 42px;

    font-size:1rem;

}

.project-card{

    position:relative;

    overflow:hidden;

    border-radius:32px;

    aspect-ratio:4/5;

    text-decoration:none;

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

}

.project-card:hover{

    transform:translateY(-8px);

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

}

.project-card img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.6s;

}

.project-overlay{

    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:flex-start;

    padding:42px 72px 42px 42px;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.82),
        rgba(0,0,0,.25),
        transparent 62%
    );

}



.project-category{

    display:inline-flex;
    align-items:center;
    align-self:flex-start;

    width:auto;

    padding:7px 15px;

    font-size:.75rem;

    margin-bottom:22px;

}

.enterprise-tag{

    background:rgba(63,140,255,.15);

    color:#6fa8ff;

}

.digital-tag{

    background:rgba(155,92,255,.18);

    color:#bb8dff;

}

.project-overlay h3{

    color:#fff;

    font-size:2rem;

    margin-bottom:14px;

}



.project-overlay p{

    color:#c9d3e7;

    font-size:1rem;

    line-height:1.75;

    margin-top:6px;
    margin-bottom:0;

}

.project-tags{

    display:flex;
    flex-wrap:wrap;
    gap:12px;

    margin-top:28px;

}

.project-tags span{

    padding:7px 14px;

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

    border-radius:999px;

    font-size:.78rem;

    color:#bfc9de;

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

    transition:.3s;

}

.project-card:hover .project-tags span{

    border-color:rgba(63,140,255,.35);

    background:rgba(63,140,255,.08);

    color:#fff;

}

.project-image{

    overflow:hidden;

}

.project-image img{

    transition:transform .6s ease;

}

.project-card:hover .project-image img{

    transform:scale(1.06);

}

.project-content{

    padding:42px;

}

.project-arrow{

    position:absolute;

    right:26px;
    bottom:28px;

    font-size:1.5rem;

    font-weight:300;

    color:#fff;

    opacity:0;

    transform:translateY(8px);

    transition:all .35s ease;

}

.project-card:hover .project-arrow{

    opacity:1;

    transform:translateY(0);

}

/* ==========================================
   HERO INTRO ANIMATION
========================================== */

/* Početno stanje */

header,
.hero-photo,
.hero h1,
.hero p,
.buttons{

    opacity:0;

}

/* Header */

header{

    transform:translateY(-25px);

    animation:headerIntro .8s ease forwards;

}

/* Bosko */

.hero-photo{

    transform:translateY(90px);

    animation:photoIntro 1s ease forwards;

    animation-delay:.2s;

}

/* H1 */

.hero h1{

    transform:translateY(35px);

    animation:textIntro .8s ease forwards;

    animation-delay:.45s;

}

/* Subtitle */

.hero p{

    transform:translateY(25px);

    animation:textIntro .8s ease forwards;

    animation-delay:.65s;

}

/* Buttons */

.buttons{

    transform:translateY(25px);

    animation:textIntro .8s ease forwards;

    animation-delay:.85s;

}

/* Keyframes */

@keyframes headerIntro{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes photoIntro{

    to{

        opacity:1;

        transform:translateY(70px);

    }

}

@keyframes textIntro{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================
   FLOATING ICONS
========================================== */

@keyframes floatSlow{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

@keyframes floatMedium{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

@keyframes floatFast{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

}



/* ==========================
   CTA
========================== */

.cta{

    background:#0b1020;

    padding:90px 0;

}

.cta-card{

    background:#162033;

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

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

    border-radius:30px;

    padding:70px;

    display:flex;

    justify-content:flex-start;

    align-items:center;

    gap:140px;

    position:relative;

    overflow:hidden;

}

.cta-card::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:radial-gradient(rgba(59,130,246,.18),transparent 70%);

    top:-120px;

    right:-120px;

}

.cta-left{

    width:60%;

    position:relative;

    z-index:2;

}

.cta h2{

    font-size:clamp(2rem,4vw,3rem);

    margin:18px 0;

    line-height:1.2;

}

.cta-subtitle{

    color:var(--blue);

    font-size:1.15rem;

    font-weight:600;

    margin-bottom:24px;

}

.cta-text{

    color:var(--text2);

    line-height:1.9;

    max-width:620px;

    margin-bottom:40px;

}

.cta-info{

    display:flex;

    flex-wrap:wrap;

    gap:28px;

}

.cta-info a,

.cta-info span{

    color:var(--text2);

    text-decoration:none;

    transition:.3s;

}

.cta-info a:hover{

    color:white;

}

.cta-right{

    width:40%;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    justify-content:flex-start;

}

.cta-available{

    margin-bottom:35px;

}

.cta-small-title{

    display:block;

    font-size:.85rem;

    letter-spacing:.18em;

    text-transform:uppercase;

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

    margin-bottom:18px;

}

.cta-available ul{

    list-style:none;

    padding:0;

    margin:0;

}

.cta-available li{

    color:white;

    margin-bottom:12px;

    font-size:1rem;

    position:relative;

    padding-left:18px;

}

.cta-available li::before{

    content:"•";

    position:absolute;

    left:0;

    color:var(--blue);

}

.cta-right .btn-primary{

    width:200px;

    text-align:center;

    padding:18px 40px;

    margin-bottom:35px;

}



.cta-contact{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.cta-contact a,

.cta-contact span{

    color:var(--text2);

    text-decoration:none;

    transition:.3s;

}

.cta-contact a:hover{

    color:white;

}

.cta-right .btn-primary{

    font-size:1.05rem;

    padding:18px 42px;

}



.cta-contact i{

    width:22px;

    text-align:center;

    color:var(--blue);

}

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

.footer{

    background:#0b1020;

    padding:90px 20px 35px;

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

}

.footer-quote{

    text-align:center;

    font-size:1.6rem;

    font-weight:500;

    color:#fff;

    margin-bottom:35px;

}

.footer-divider{

    width:80px;

    height:1px;

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

    margin:0 auto 70px;

}

.footer-main{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:250px;

    margin-bottom:70px;

}

.footer-brand{

    width:220px;

    flex-shrink:0;

}

.footer-logo{

    width:110px;

    margin-bottom:12px;

}

.footer-logo-link{
    display:inline-block;
}

.footer-brand h3{

    margin-top:0;

    margin-bottom:0;

}

.footer-tagline{

    color:var(--text2);

    line-height:1.8;

}

.footer-links{

    display:flex;

    gap:140px;

}

.footer-links h4{

    margin-bottom:20px;

    font-size:.9rem;

    letter-spacing:.18em;

    text-transform:uppercase;

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

}

.footer-links a,

.footer-links span{

    display:block;

    color:var(--text2);

    text-decoration:none;

    margin-bottom:14px;

    transition:.3s;

}

.footer-links a:hover{

    color:var(--blue);

}

.footer-bottom{

    padding-top:35px;

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

    display:flex;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:15px;

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

    font-size:.9rem;

}

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

.page-hero {
    min-height: 65vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  
    background:
      linear-gradient(rgba(6, 8, 20, 0.72), rgba(6, 8, 20, 0.88)),
      url("../images/hero-bg.jpg");
  
    background-size: cover;
    background-position: center;
  
    padding: 160px 20px 120px;
  }
  
  .page-hero .container {
    max-width: 820px;
  }
  
  .page-hero h1 {
    font-size: clamp(2.5rem, 4vw, 4.2rem);
    line-height: 1.1;
    margin: 22px 0;
  }
  
  .page-hero p {
    color: var(--text2);
    font-size: 1.15rem;
    line-height: 1.9;
    margin: 0 auto 45px;
    max-width: 760px;
  }
  
  .page-buttons {
    display: flex;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
  }


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

@media (max-width:900px){

    /* Header */

    
    .navbar{

        padding:26px 34px;

    }

    .logo img{

        width:58px;

    }


    .menu-toggle{

        display:block;

        z-index:1001;

        font-size:2.2rem;

        color:white;

        background:none;

        border:none;

        cursor:pointer;

    }

    .btn-outline{

        display:none;

    }



    /* Hero */

    .hero{

        min-height:100vh;

        padding:100px 22px 45px;

        align-items:center;

        background-position:center;

    }

    .hero-content{

        max-width:100%;

    }

    .hero-icons{

        display:none;

    }

    .hero-photo{

        width:320px;
    
        max-width:52vw;
    
        opacity:.50 !important;
    
        filter:drop-shadow(0 0 14px rgba(59,130,246,.26)) !important;
    
        transform:translateY(115px);
    
        transition:.6s;
    
        position:relative;
    
        z-index:1;
    
    }

    .hero-text{

        transform:none;

        margin-top:0;

    }

   

    .hero h1{

        font-size:clamp(2.55rem, 11vw, 3.05rem);

        line-height:1.05;

        letter-spacing:-0.04em;

        margin-bottom:22px;

    }

    .hero p{

        font-size:1.1rem;

        line-height:1.55;

        max-width:340px;

        margin:0 auto 34px;

    }

    .buttons{

        flex-direction:column;

        align-items:center;

        gap:16px;

    }

    .btn-primary,
    .btn-secondary{

        width:180px;

        max-width:82vw;

        text-align:center;

        padding:15px 0;

        font-size:1rem;

    }

/* About mobile */

.about{

    padding:90px 24px 55px;

}

.about .container{

    max-width:100%;

}

.about-content{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:35px;

}

.about-image{

    order:1;

}

.about-text{

    order:2;

}

.about-image img{

    width:260px;

    max-width:80vw;

}

.about h2{

    font-size:clamp(2.1rem, 9vw, 2.8rem);

    line-height:1.12;

    margin-bottom:28px;

}

.about-text p{

    font-size:1.08rem;

    line-height:1.75;

    text-align:left;

    margin-bottom:26px;

}

.about-tags{

    margin-top:35px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:16px;

}

.about-tags span{

    width:auto;

    min-width:230px;

    padding:14px 24px;

    text-align:center;

}

/* Enterprise mobile */

.enterprise{
    padding:85px 24px 50px;
}

.enterprise-title{
    font-size:clamp(2.3rem, 10vw, 3rem);
    line-height:1.12;
    margin-bottom:24px;
}

.enterprise-intro{
    font-size:1.08rem;
    line-height:1.75;
    margin:0 auto 55px;
    max-width:360px;
}

.enterprise-grid{
    gap:28px;
    max-width:100%;
}

.enterprise-card{
    padding:36px 30px;
    border-radius:24px;
}

.card-icon{
    width:46px;
    height:46px;
    margin-bottom:24px;
}

.card-icon img{
    width:38px;
    height:38px;
}

.enterprise-card h3{
    font-size:clamp(1.9rem, 8vw, 2.35rem);
    line-height:1.18;
    margin-bottom:18px;
}

.enterprise-card p{
    font-size:1.02rem;
    line-height:1.75;
    margin-bottom:26px;
}

.enterprise-closing{
    margin:95px auto 30px;
    max-width:360px;
}

.enterprise-closing::before{
    width:100px;
    margin:0 auto 50px;
}

.enterprise-closing h2{
    font-size:clamp(2.15rem, 9vw, 2.8rem);
    line-height:1.15;
    margin-bottom:24px;
}

.enterprise-closing p{
    font-size:.98rem;
    line-height:1.8;
    letter-spacing:.06em;
}

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

.digital{
    padding:85px 20px 70px;
}

.digital .section-label{
    margin-bottom:24px;
    transform:none;
}

.digital-title{
    max-width:100%;
    margin:0 auto 30px;
    line-height:.95;
}

.digital-title .light{
    font-size:clamp(3.2rem, 15vw, 4.2rem);
    line-height:.95;
}

.digital-title .accent{
    font-size:clamp(3.2rem, 15vw, 4.2rem);
    line-height:.95;
}

.digital-intro{
    font-size:1.08rem;
    line-height:1.75;
    margin:0 auto 55px;
    max-width:360px;
}

.portfolio-wrapper{
    margin:55px auto 0;
    max-width:100%;
}

.portfolio-grid{
    display:grid;

    grid-template-columns:repeat(2, 1fr);
    grid-template-rows:none;
    grid-auto-rows:120px;
    grid-auto-flow:dense;

    gap:14px;

    padding:22px;

    border-radius:34px;

    overflow:hidden;

    background:#fff;

    box-shadow:0 30px 70px rgba(0,0,0,.10);
}

.card{
    grid-column:auto!important;
    grid-row:auto!important;

    aspect-ratio:auto!important;

    border-radius:22px;
}

/* Gornji mobile raspored */

.branding{
    grid-column:1 / 2!important;
    grid-row:span 4!important;
}

.social{
    grid-column:2 / 3!important;
    grid-row:span 1!important;
}

.info{
    grid-column:2 / 3!important;
    grid-row:span 1!important;
}

.logo{
    grid-column:2 / 3!important;
    grid-row:span 1!important;
}

.freelancer{
    grid-column:2 / 3!important;
    grid-row:span 1!important;
}

/* Ostale kartice */

.banner,
.tshirt,
.merch,
.web{
    grid-column:auto!important;
    grid-row:span 1!important;
}

/* Slike */

.card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.branding img{
    object-position:center top;
}

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

.projects{
    padding:85px 20px 20px;
}

.projects .section-label{
    margin-bottom:24px;
}

.projects-title{
    font-size:clamp(3rem, 13vw, 4rem);
    line-height:1.05;
    margin:0 auto 28px;
    max-width:360px;
}

.projects-title span{
    margin-top:12px;
}

.projects-intro{
    font-size:1.05rem;
    line-height:1.75;
    max-width:360px;
    margin:0 auto 55px;
}

.projects-grid{
    grid-template-columns:1fr;
    gap:28px;
    margin-bottom:40px;
}

.project-card{
    aspect-ratio:4 / 4.6;
    border-radius:28px;
}

.project-overlay{
    padding:34px 30px;
}

.project-category{
    font-size:.72rem;
    padding:7px 14px;
    margin-bottom:18px;
}

.project-overlay h3{
    font-size:2rem;
    line-height:1.15;
    margin-bottom:12px;
}

.project-overlay p{
    font-size:.98rem;
    line-height:1.65;
}

.project-tags{
    gap:10px;
    margin-top:24px;
}

.project-tags span{
    font-size:.75rem;
    padding:7px 13px;
}

.project-arrow{
    opacity:1;
    transform:none;
    right:24px;
    bottom:24px;
    font-size:1.4rem;
}

.projects-button{
    margin-top:0;
}

.projects-button .btn-primary{
    width:260px;
    padding:16px 0;
    font-size:1rem;
    text-align:center;
}

/* ===========================
   FINAL MOBILE PROJECTS / CTA FIX
=========================== */

.projects{
    padding-bottom:10px !important;
}

.projects-grid{
    margin-bottom:35px !important;
}

.projects-button{
    margin-bottom:35px !important;
}

.projects-button .btn-primary{
    width:270px !important;
    max-width:85vw !important;
    padding:17px 0 !important;
    font-size:1.05rem !important;
    display:inline-flex !important;
    justify-content:center !important;
    align-items:center !important;
}

.cta{
    padding-top:35px !important;
}

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

.cta{
    padding:35px 20px 55px;
}

.cta .container{
    max-width:100%;
}

.cta-card{
    padding:55px 34px;
    border-radius:28px;

    flex-direction:column;
    align-items:flex-start;
    gap:42px;
}

.cta-card::before{
    width:260px;
    height:260px;
    top:-90px;
    right:-90px;
}

.cta-left{
    width:100%;
}

.cta h2{
    font-size:clamp(2.2rem, 10vw, 3rem);
    line-height:1.12;
    margin:18px 0;
}

.cta-subtitle{
    font-size:1.1rem;
    line-height:1.55;
    margin-bottom:24px;
}

.cta-text{
    font-size:1.02rem;
    line-height:1.75;
    max-width:100%;
    margin-bottom:0;
}

.cta-right{
    width:100%;
    align-items:flex-start;
}

.cta-available{
    margin-bottom:30px;
}

.cta-small-title{
    font-size:.78rem;
    letter-spacing:.18em;
    margin-bottom:18px;
}

.cta-available li{
    font-size:1rem;
    margin-bottom:12px;
}

.cta-right .btn-primary{
    width:220px;
    max-width:100%;
    padding:15px 0;
    margin-bottom:34px;
    font-size:1rem;
}

.cta-contact{
    gap:16px;
}

.cta-contact a,
.cta-contact div,
.cta-contact span{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:1rem;
}

.cta-contact i{
    width:20px;
    flex-shrink:0;
}

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

.footer{
    padding:65px 24px 32px;
}

.footer-quote{
    font-size:1.45rem;
    line-height:1.35;
    max-width:330px;
    margin:0 auto 30px;
}

.footer-divider{
    margin:0 auto 55px;
}

.footer-main{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:45px;
    margin-bottom:55px;
    text-align:center;
}

.footer-brand{
    width:100%;
    text-align:center;
}

.footer-logo-link{
    display:inline-block;
}

.footer-logo{
    width:82px;
    margin-bottom:16px;
}

.footer-brand h3{
    font-size:1.4rem;
    margin:0;
}

.footer-links{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:42px;
}

.footer-links h4{
    margin-bottom:18px;
    font-size:.82rem;
    letter-spacing:.22em;
}

.footer-links a,
.footer-links span{
    margin-bottom:13px;
    font-size:1rem;
}

.footer-bottom{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:12px;
    padding-top:28px;
    font-size:.85rem;
    line-height:1.6;
}

}

/* FINAL HERO PHOTO POSITION DESKTOP*/

.hero .hero-photo{

    width:320px !important;

    max-width:52vw !important;

    opacity:.55 !important;

    filter:drop-shadow(0 0 14px rgba(59,130,246,.26)) !important;

    transform:translateY(115px) !important;

}


@media (max-width:900px){

    .hero{
        padding:100px 22px 65px !important;
    }

    .hero .hero-photo{
        width:230px !important;
        max-width:68vw !important;
        opacity:.68 !important;
        filter:drop-shadow(0 0 16px rgba(59,130,246,.30)) !important;
        transform:translateY(30px) !important;
    }

}

/* ===========================
   FINAL MOBILE LANGUAGE SWITCH
=========================== */

@media (max-width:900px){

    .lang-switch{
        display:inline-flex !important;
        position:absolute;
        top:34px;
        right:92px;
        width:42px;
        height:42px;
        align-items:center;
        justify-content:center;

        color:#fff;
        text-decoration:none;
        font-size:.78rem;
        font-weight:800;
        letter-spacing:.08em;

        border:1px solid rgba(255,255,255,.28);
        border-radius:50%;
        background:rgba(255,255,255,.04);
        backdrop-filter:blur(8px);

        z-index:1002;
    }

    .lang-switch:hover{
        border-color:rgba(63,140,255,.7);
        background:rgba(63,140,255,.14);
    }

    .nav-links .mobile-lang{
        display:none !important;
    }

}
/* ===========================
   FINAL MOBILE HEADER POSITION
=========================== */

@media (max-width:900px){

    .navbar{
        position:relative;
        padding:26px 34px;
        min-height:86px;
    }

    .logo img{
        width:58px;
        height:auto;
        display:block;
    }

    .menu-toggle{
        position:absolute !important;
        top:50% !important;
        right:34px !important;
        transform:translateY(-50%) !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        line-height:1 !important;
        height:42px !important;
        width:42px !important;
        padding:0 !important;
    }

    .navbar .lang-switch{
        display:flex !important;
        position:absolute !important;
        top:50% !important;
        right:92px !important;
        transform:translateY(-50%) !important;

        width:42px !important;
        height:42px !important;

        align-items:center !important;
        justify-content:center !important;

        color:#fff !important;
        text-decoration:none !important;
        font-size:.78rem !important;
        font-weight:800 !important;
        letter-spacing:.08em !important;
        line-height:1 !important;

        border:1px solid rgba(255,255,255,.28) !important;
        border-radius:50% !important;
        background:rgba(255,255,255,.04) !important;
        backdrop-filter:blur(8px) !important;

        z-index:2000 !important;
    }

}

/* ==================================================
   PROJECTS PAGE
================================================== */

.projects-page-hero{
    background:#0b1020;
    padding:180px 20px 110px;
    text-align:center;
}

.projects-page-hero .container{
    max-width:1100px;
    margin:auto;
}

.projects-page-hero h1{
    max-width:1050px;
    margin:25px auto 30px;

    font-size:clamp(3rem,4.7vw,4.7rem);
    line-height:1.05;
    font-weight:800;
    letter-spacing:-0.035em;

    color:#fff;
}

.projects-page-hero h1 span{
    display:block;
    margin-top:10px;

    color:var(--blue);
    font-weight:800;
}

.projects-page-hero p{
    max-width:760px;
    margin:0 auto;

    color:#aeb7cc;
    font-size:1.08rem;
    line-height:1.85;
}


/* ==================================================
   PROJECT SHOWCASE
================================================== */

.projects-showcase{
    background:#0b1020;
    padding:80px 20px 150px;
}

.projects-showcase .container,
.projects-digital .container{
    max-width:1320px;
    margin:auto;
}

.projects-section-heading{
    max-width:850px;
    margin-bottom:90px;
}

.projects-section-heading h2{
    margin-top:20px;

    color:#fff;

    font-size:clamp(2.7rem,5vw,4.6rem);
    line-height:1.08;

    font-weight:300;
}

.projects-section-heading h2 span{
    display:block;

    color:var(--blue);
    font-weight:700;
}


/* PROJECT ROW */

.project-feature{
    display:grid;

    grid-template-columns:
        minmax(0,1.12fr)
        minmax(0,.88fr);

    align-items:center;

    gap:85px;

    margin-bottom:150px;
}

.project-feature:last-child{
    margin-bottom:0;
}

.project-feature.reverse
.project-feature-image{
    order:2;
}

.project-feature.reverse
.project-feature-content{
    order:1;
}


/* IMAGE */

.project-feature-image{
    position:relative;

    overflow:hidden;

    border-radius:34px;

    aspect-ratio:4 / 5;

    background:#07101f;

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

.project-feature-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .7s ease;
}

.project-feature:hover
.project-feature-image img{
    transform:scale(1.025);
}

.project-number{
    position:absolute;

    top:28px;
    left:30px;

    font-size:.78rem;
    font-weight:700;
    letter-spacing:.16em;

    color:#fff;

    padding:9px 13px;

    border-radius:999px;

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

    background:rgba(6,12,25,.62);

    backdrop-filter:blur(12px);
}


/* CONTENT */

.project-feature-content{
    max-width:520px;
}

.project-type{
    color:#6fa8ff;

    font-size:.76rem;
    font-weight:700;

    letter-spacing:.18em;
}

.project-feature-content h2{
    margin:22px 0 9px;

    color:#fff;

    font-size:clamp(2.8rem,4vw,4.3rem);
    line-height:1.05;

    font-weight:700;
}

.project-feature-content h3{
    margin:0 0 30px;

    color:#d8e0ef;

    font-size:1.45rem;
    line-height:1.45;

    font-weight:400;
}

.project-feature-content > p{
    color:#aeb7cc;

    font-size:1.05rem;
    line-height:1.85;
}


/* META */

.project-meta{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:30px;

    padding:28px 0;

    margin:30px 0 0;

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

.project-meta div{
    display:flex;
    flex-direction:column;

    gap:8px;
}

.project-meta span{
    color:#65718b;

    font-size:.68rem;
    font-weight:700;

    letter-spacing:.16em;
}

.project-meta strong{
    color:#dce4f3;

    font-size:.92rem;

    font-weight:500;
}


/* TAGS */

.project-feature .project-tags{
    display:flex;
    flex-wrap:wrap;

    gap:10px;

    margin-top:27px;
}

.project-feature .project-tags span{
    padding:8px 15px;

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

    border-radius:999px;

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

    color:#bfc9de;

    font-size:.77rem;
}


/* VIEW PROJECT */

.project-view{
    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-top:35px;

    color:#fff;

    text-decoration:none;

    font-size:.95rem;
    font-weight:600;
}

.project-view span{
    color:var(--blue);

    font-size:1.25rem;

    transition:.3s;
}

.project-view:hover span{
    transform:
        translateX(4px)
        translateY(-4px);
}


/* ==================================================
   DIGITAL PROJECTS
================================================== */

.projects-digital{
    background:
        linear-gradient(
            180deg,
            #0b1020 0%,
            #10152a 100%
        );

    padding:130px 20px 150px;

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

.projects-digital
.projects-section-heading h2 span{
    color:var(--purple);
}

.digital-project .project-type{
    color:#bb8dff;
}



/* ==================================================
   OTHER SELECTED WORK
================================================== */

.projects-other{
    background:#10152a;
    padding:120px 20px 130px;
    border-top:1px solid rgba(255,255,255,.05);
}

.projects-other .container{
    max-width:1320px;
    margin:auto;
}

.projects-section-heading-compact{
    margin-bottom:55px;
}

.projects-other-intro{
    max-width:700px;
    margin-top:24px;
    color:#aeb7cc;
    font-size:1.02rem;
    line-height:1.8;
}

.other-projects-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
}

.other-project-card{
    min-height:245px;
    padding:34px;
    border-radius:26px;
    border:1px solid rgba(255,255,255,.07);
    background:
        radial-gradient(circle at top right, rgba(63,140,255,.08), transparent 36%),
        rgba(255,255,255,.025);
    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease;
}

.other-project-card.creative{
    background:
        radial-gradient(circle at top right, rgba(155,92,255,.10), transparent 36%),
        rgba(255,255,255,.025);
}

.other-project-card:hover{
    transform:translateY(-5px);
    border-color:rgba(63,140,255,.28);
}

.other-project-card.creative:hover{
    border-color:rgba(155,92,255,.30);
}

.other-project-type{
    display:block;
    margin-bottom:20px;
    color:#6fa8ff;
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.16em;
}

.other-project-card.creative .other-project-type{
    color:#bb8dff;
}

.other-project-card h3{
    margin-bottom:9px;
    color:#fff;
    font-size:1.8rem;
    line-height:1.15;
}

.other-project-card p{
    min-height:52px;
    color:#aeb7cc;
    font-size:.98rem;
    line-height:1.65;
}

.other-project-tags{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:25px;
}

.other-project-tags span{
    padding:7px 12px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:999px;
    color:#bfc9de;
    background:rgba(255,255,255,.02);
    font-size:.72rem;
}

/* ==================================================
   PROJECTS CTA
================================================== */

.projects-page-cta{
    background:#10152a;

    padding:40px 20px 120px;
}

.projects-page-cta-inner{
    max-width:1100px;

    margin:auto;

    padding:90px 70px;

    text-align:center;

    border-radius:34px;

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

    background:
        radial-gradient(
            circle at top right,
            rgba(63,140,255,.12),
            transparent 38%
        ),
        #0b1020;
}

.projects-page-cta h2{
    margin:20px auto;

    color:#fff;

    font-size:clamp(2.7rem,5vw,4.4rem);

    font-weight:300;

    line-height:1.1;
}

.projects-page-cta h2 span{
    color:var(--blue);

    font-weight:700;
}

.projects-page-cta p{
    max-width:650px;

    margin:0 auto 40px;

    color:#aeb7cc;

    line-height:1.8;
}


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

@media(max-width:900px){

    .projects-page-hero{
        padding:
            135px 22px
            80px;
    }

    .projects-page-hero h1{
        font-size:
            clamp(2.8rem,12vw,4rem);
    }

    .projects-filters{
        margin-top:40px;
    }


    .projects-showcase{
        padding:
            60px 20px
            100px;
    }

    .projects-section-heading{
        margin-bottom:55px;
    }


    .project-feature,
    .project-feature.reverse{
        grid-template-columns:1fr;

        gap:40px;

        margin-bottom:100px;
    }

    .project-feature.reverse
    .project-feature-image,

    .project-feature.reverse
    .project-feature-content{
        order:initial;
    }


    .project-feature-image{
        border-radius:28px;

        aspect-ratio:4 / 4.8;
    }


    .project-feature-content{
        max-width:none;
    }


    .project-feature-content h2{
        font-size:
            clamp(2.5rem,11vw,3.4rem);
    }

    .project-feature-content h3{
        font-size:1.2rem;
    }


    .project-meta{
        grid-template-columns:1fr;

        gap:22px;
    }


    .projects-digital{
        padding:
            95px 20px
            100px;
    }



    .projects-other{
        padding:85px 20px 90px;
    }

    .projects-section-heading-compact{
        margin-bottom:42px;
    }

    .projects-other-intro{
        font-size:1rem;
        line-height:1.7;
    }

    .other-projects-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .other-project-card{
        min-height:auto;
        padding:28px;
        border-radius:22px;
    }

    .other-project-card p{
        min-height:auto;
    }

    .projects-page-cta{
        padding:
            20px 20px
            80px;
    }

    .projects-page-cta-inner{
        padding:
            65px 30px;

        border-radius:28px;
    }

}

/* ==================================================
   HUAWEI DEMO DATA CENTER — PROJECT DETAIL PAGE
   Append this block to the END of css/style.css
================================================== */

.huawei-case{
    --case-accent:#e43b3b;
    --case-bg:#080d1b;
    --case-bg2:#0d1427;
    --case-line:rgba(255,255,255,.08);

    background:var(--case-bg);
}

.case-container{
    width:min(1320px, calc(100% - 40px));
    margin:0 auto;
}


/* HERO */

.case-hero{
    padding:175px 0 120px;

    background:
        radial-gradient(
            circle at 82% 25%,
            rgba(228,59,59,.11),
            transparent 28%
        ),
        #080d1b;
}

.case-hero-grid{
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(420px,.8fr);
    align-items:center;
    gap:90px;
}

.case-back{
    display:inline-block;
    margin-bottom:55px;

    color:#8d99b3;
    text-decoration:none;

    font-size:.88rem;
    font-weight:600;

    transition:.25s;
}

.case-back:hover{
    color:#fff;
    transform:translateX(-3px);
}

.case-eyebrow{
    display:block;

    color:#6fa8ff;

    font-size:.74rem;
    font-weight:800;
    letter-spacing:.2em;
    text-transform:uppercase;
}

.huawei-case .case-hero .case-eyebrow,
.huawei-case .case-recognition-section .case-eyebrow{
    color:#f06b6b;
}

.case-hero h1{
    max-width:720px;
    margin:24px 0 18px;

    color:#fff;

    font-size:clamp(4rem,6vw,6.5rem);
    font-weight:800;
    line-height:.96;
    letter-spacing:-.045em;
}

.case-hero h2{
    max-width:700px;
    margin:0 0 34px;

    color:#dce4f3;

    font-size:clamp(1.35rem,2vw,1.85rem);
    font-weight:400;
    line-height:1.45;
}

.case-lead{
    max-width:720px;

    color:#aeb7cc;

    font-size:1.08rem;
    line-height:1.85;
}

.case-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin-top:32px;
}

.case-tags span{
    padding:9px 16px;

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

    color:#c7d0e3;
    background:rgba(255,255,255,.025);

    font-size:.78rem;
}

.case-hero-meta{
    display:grid;
    grid-template-columns:.65fr 1.2fr 1.35fr;
    gap:26px;

    margin-top:42px;
    padding-top:28px;

    border-top:1px solid var(--case-line);
}

.case-hero-meta div{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.case-hero-meta span{
    color:#65718b;

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

.case-hero-meta strong{
    color:#dce4f3;

    font-size:.9rem;
    font-weight:500;
    line-height:1.5;
}

.case-hero-image{
    position:relative;
    overflow:hidden;

    border-radius:34px;
    aspect-ratio:4 / 5;

    background:#060b14;

    box-shadow:
        0 35px 100px rgba(0,0,0,.42),
        0 0 70px rgba(228,59,59,.07);
}

.case-hero-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}


/* SECTIONS */

.case-section{
    padding:135px 0;

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

    background:#080d1b;
}

.case-section-alt{
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(63,140,255,.055),
            transparent 28%
        ),
        #0b1122;
}

.case-two-column{
    display:grid;
    grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
    gap:120px;
    align-items:start;
}

.case-section-title{
    position:sticky;
    top:130px;
}

.case-section-title h2,
.case-section-heading h2,
.case-section-heading-centered h2,
.case-architecture-copy h2,
.case-recognition-copy h2{
    margin:22px 0 0;

    color:#fff;

    font-size:clamp(2.7rem,4vw,4.4rem);
    line-height:1.08;
    letter-spacing:-.035em;
}

.case-copy{
    max-width:700px;
}

.case-copy p,
.case-architecture-copy p,
.case-recognition-copy p{
    margin:0 0 26px;

    color:#aeb7cc;

    font-size:1.08rem;
    line-height:1.95;
}

.case-copy p:last-child,
.case-architecture-copy p:last-child{
    margin-bottom:0;
}

.case-section-heading{
    max-width:900px;
    margin-bottom:70px;
}

.case-section-heading > p{
    max-width:700px;
    margin-top:28px;

    color:#aeb7cc;
    font-size:1.05rem;
    line-height:1.85;
}

.case-section-heading-centered{
    max-width:900px;
    margin:0 auto 75px;
    text-align:center;
}

.case-section-heading-centered p{
    max-width:720px;
    margin:28px auto 0;

    color:#aeb7cc;
    font-size:1.05rem;
    line-height:1.85;
}


/* PURPOSE */

.case-purpose-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.case-info-card{
    min-height:310px;

    padding:38px 34px;

    border:1px solid var(--case-line);
    border-radius:26px;

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

.case-info-card > span{
    display:block;
    margin-bottom:62px;

    color:#f06b6b;

    font-size:.72rem;
    font-weight:800;
    letter-spacing:.15em;
}

.case-info-card h3{
    margin-bottom:18px;

    color:#fff;

    font-size:1.45rem;
}

.case-info-card p{
    color:#9eabc3;
    line-height:1.8;
}


/* TECHNOLOGIES */

.case-tech-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    border-top:1px solid var(--case-line);
    border-left:1px solid var(--case-line);
}

.case-tech-grid article{
    min-height:280px;
    padding:34px 30px;

    border-right:1px solid var(--case-line);
    border-bottom:1px solid var(--case-line);

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

.case-tech-number{
    display:block;
    margin-bottom:48px;

    color:#65718b;

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

.case-tech-grid h3{
    margin-bottom:15px;

    color:#fff;

    font-size:1.25rem;
}

.case-tech-grid p{
    color:#98a6c0;

    font-size:.93rem;
    line-height:1.75;
}


/* ARCHITECTURE */

.case-architecture-grid{
    display:grid;
    grid-template-columns:minmax(0,.78fr) minmax(420px,1fr);
    gap:90px;
    align-items:center;
}

.case-architecture-copy h2{
    margin-bottom:30px;
}

.case-document-figure{
    margin:0;

    padding:18px;

    border:1px solid var(--case-line);
    border-radius:26px;

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

.case-document-figure img{
    width:100%;
    display:block;

    border-radius:18px;
}

.case-document-figure figcaption{
    padding:16px 4px 2px;

    color:#76839d;

    font-size:.8rem;
    line-height:1.6;
}


/* ROLE */

.case-role-section{
    background:
        radial-gradient(
            circle at 80% 40%,
            rgba(228,59,59,.065),
            transparent 30%
        ),
        #080d1b;
}

.case-contribution-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    margin-top:100px;

    border-top:1px solid var(--case-line);
    border-left:1px solid var(--case-line);
}

.case-contribution-grid div{
    min-height:125px;

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

    padding:24px 28px;

    border-right:1px solid var(--case-line);
    border-bottom:1px solid var(--case-line);
}

.case-contribution-grid span{
    margin-bottom:12px;

    color:#65718b;

    font-size:.65rem;
    font-weight:800;
    letter-spacing:.15em;
}

.case-contribution-grid strong{
    color:#dce4f3;

    font-size:1rem;
    font-weight:600;
}



/* RECOGNITION */

.case-recognition-section{
    background:
        radial-gradient(
            circle at 18% 30%,
            rgba(228,59,59,.08),
            transparent 30%
        ),
        #080d1b;
}

.case-recognition-grid{
    display:grid;
    grid-template-columns:minmax(0,.8fr) minmax(500px,1fr);
    gap:90px;
    align-items:center;
}

.case-recognition-copy h2{
    margin-bottom:30px;
}

.case-recognition-copy strong{
    color:#fff;
}

.case-recognition-copy blockquote{
    margin:35px 0;

    padding-left:25px;

    border-left:2px solid var(--case-accent);

    color:#fff;

    font-size:clamp(1.5rem,2.5vw,2.35rem);
    font-weight:600;
    line-height:1.35;
}

.case-recognition-note{
    color:#76839d !important;
    font-size:.9rem !important;
}

/* ==================================================
   PC PRESS — REFINED LAYOUT
================================================== */

.huawei-case .case-press-images{
    display:grid;
    grid-template-columns:1.05fr .78fr;
    gap:22px;
    align-items:center;

    max-width:760px;
    margin-left:auto;
}

.huawei-case .case-press-images figure{
    margin:0;
    overflow:hidden;

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

    background:#fff;
}

/* naslovna */
.huawei-case .case-press-images figure:first-child{
    transform:translateY(-10px);
}

.huawei-case .case-press-images figure:first-child img{
    width:100%;
    display:block;

    aspect-ratio:3 / 4;
    object-fit:contain;
    object-position:center;
}

/* sadržaj */
.huawei-case .case-press-images figure:last-child img{
    width:100%;
    display:block;

    aspect-ratio:4 / 5;
    object-fit:cover;
    object-position:center;
}


/* OUTCOME */

.case-outcome-section{
    text-align:center;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(63,140,255,.08),
            transparent 35%
        ),
        #0b1122;
}

.case-outcome{
    max-width:1050px;
}

.case-outcome h2{
    margin:24px auto 32px;

    color:#fff;

    font-size:clamp(3rem,5vw,5rem);
    font-weight:800;
    line-height:1.05;
    letter-spacing:-.04em;
}

.case-outcome h2 span{
    display:block;
    color:#3f8cff;
}

.case-outcome p{
    max-width:760px;
    margin:0 auto;

    color:#aeb7cc;

    font-size:1.08rem;
    line-height:1.9;
}


/* BOTTOM NAV */

.case-next{
    padding:45px 0 120px;

    background:#0b1122;
}

.case-next-card{
    padding:80px 60px;

    text-align:center;

    border:1px solid var(--case-line);
    border-radius:32px;

    background:
        radial-gradient(
            circle at top right,
            rgba(228,59,59,.08),
            transparent 32%
        ),
        #080d1b;
}

.case-next-card > span{
    color:#65718b;

    font-size:.7rem;
    font-weight:800;
    letter-spacing:.18em;
}

.case-next-card h2{
    margin:18px 0 35px;

    color:#fff;

    font-size:clamp(2.3rem,4vw,3.8rem);
}


/* RESPONSIVE */

@media(max-width:1050px){

    .case-hero-grid,
    .case-two-column,
    .case-architecture-grid,
    .case-recognition-grid{
        grid-template-columns:1fr;
        gap:55px;
    }

    .case-section-title{
        position:static;
    }

    .case-hero-content{
        max-width:760px;
    }

    .case-hero-image{
        max-width:650px;
        width:100%;
    }

    .case-tech-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .case-archive-grid{
        grid-template-columns:1fr 1fr;
    }

    .case-archive-large{
        grid-column:1 / -1;
    }

    .case-archive-large img{
        height:auto;
        max-height:680px;
    }
}


@media(max-width:700px){

    .case-container{
        width:min(100% - 40px, 1320px);
    }

    .case-hero{
        padding:135px 0 80px;
    }

    .case-back{
        margin-bottom:40px;
    }

    .case-hero h1{
        font-size:clamp(3.2rem,16vw,4.5rem);
    }

    .case-hero h2{
        font-size:1.2rem;
    }

    .case-hero-meta{
        grid-template-columns:1fr;
        gap:22px;
    }

    .case-section{
        padding:90px 0;
    }

    .case-two-column{
        gap:40px;
    }

    .case-section-title h2,
    .case-section-heading h2,
    .case-section-heading-centered h2,
    .case-architecture-copy h2,
    .case-recognition-copy h2{
        font-size:clamp(2.4rem,11vw,3.4rem);
    }

    .case-purpose-grid,
    .case-tech-grid,
    .case-contribution-grid,
    .case-archive-grid,
    .case-press-images{
        grid-template-columns:1fr;
    }

    .case-info-card{
        min-height:0;
    }

    .case-info-card > span,
    .case-tech-number{
        margin-bottom:28px;
    }

    .case-tech-grid article{
        min-height:0;
    }

    .case-contribution-grid{
        margin-top:65px;
    }

    .case-archive-large{
        grid-column:auto;
    }

    .case-archive-grid img{
        height:auto;
    }

    .case-next-card{
        padding:60px 28px;
    }
}

/* ==========================================
   HUAWEI CASE — TYPOGRAPHY REFINEMENT
========================================== */

/* Glavni naslov */
.case-hero h1{
    font-size:clamp(3.6rem,5vw,5.6rem);
    font-weight:700;
    line-height:1.02;
    letter-spacing:-0.025em;
}

/* Naslovi sekcija */
.case-section-title h2,
.case-section-heading h2,
.case-section-heading-centered h2,
.case-architecture-copy h2,
.case-recognition-copy h2{
    font-size:clamp(2.4rem,3.4vw,3.7rem);
    font-weight:600;
    line-height:1.15;
    letter-spacing:-0.02em;
}

/* Outcome naslov dole */
.case-outcome h2{
    font-size:clamp(2.8rem,4.2vw,4.3rem);
    font-weight:700;
    line-height:1.1;
    letter-spacing:-0.025em;
}

/* ==================================================
   HUAWEI CASE — PROJECT ARCHIVE
================================================== */

.huawei-case .case-archive-section{
    background:#0b1122;
}


/* Glavni grid */

.huawei-case .case-archive-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;

    gap:24px !important;

    max-width:940px !important;
    width:100% !important;

    margin:0 auto !important;
}


/* Sve kartice */

.huawei-case .case-archive-grid figure{
    margin:0 !important;

    overflow:hidden;

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

    background:#080d1b;
}


/* ==================================================
   GLAVNA SLIKA — BROCHURE COVER
================================================== */

.huawei-case .case-archive-large{
    grid-column:1 / -1 !important;

    width:780px !important;
    max-width:100% !important;

    justify-self:center !important;
}


/* landscape, ali viša nego sada */

.huawei-case .case-archive-large img{
    display:block;

    width:100% !important;
    height:auto !important;

    aspect-ratio:16 / 9 !important;

    object-fit:cover !important;
    object-position:center !important;
}


/* ==================================================
   DONJE DVE SLIKE
================================================== */

.huawei-case .case-archive-wide{
    width:100% !important;
}


/* malo viši landscape format */

.huawei-case .case-archive-wide img{
    display:block;

    width:100% !important;
    height:auto !important;

    aspect-ratio:3 / 2 !important;

    object-fit:cover !important;
    object-position:center !important;
}


/* Private Cloud diagram nemoj cropovati */

.huawei-case .case-archive-wide:last-child img{
    object-fit:contain !important;

    background:#171717;
}


/* Caption */

.huawei-case .case-archive-grid figcaption{
    padding:16px 18px !important;

    color:#8390aa;

    font-size:.8rem;
    line-height:1.55;
}


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

@media(max-width:1000px){

    .huawei-case .case-archive-grid{
        max-width:760px !important;
    }

    .huawei-case .case-archive-large{
        width:100% !important;
    }

}


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

@media(max-width:700px){

    .huawei-case .case-archive-grid{
        grid-template-columns:1fr !important;

        max-width:100% !important;

        gap:20px !important;
    }

    .huawei-case .case-archive-large{
        grid-column:auto !important;

        width:100% !important;
    }

    .huawei-case .case-archive-large img{
        aspect-ratio:4 / 3 !important;
    }

    .huawei-case .case-archive-wide img{
        aspect-ratio:4 / 3 !important;
    }

}

/* ==================================================
   HOME HERO — SCATTERED ICONS ABOVE H1
================================================== */

/* vrati hero tekst na staru poziciju */
.hero-text{
    position:relative;
    z-index:5;
    transform:translateY(75px) !important;
}

/* zona za ikonice */
.hero-icons{
    position:absolute !important;
    inset:0 !important;

    display:block !important;

    pointer-events:none;
    z-index:4;
}

/* osnovni stil */
.hero-icon{
    position:absolute !important;

    width:42px !important;
    opacity:.48;

    animation:floatIcon 6s ease-in-out infinite;
}


/* ==================================================
   ENTERPRISE — LEVO / PLAVO
================================================== */

.architecture{
    top:40px !important;
    left:31% !important;
}

.cloud{
    top:115px !important;
    left:25% !important;
}

.servers{
    top:125px !important;
    left:35% !important;
}

.storage{
    top:180px !important;
    left:29% !important;
}

.business-icon{
    top:70px !important;
    left:40% !important;
}


/* ==================================================
   DIGITAL — DESNO / LJUBIČASTO
================================================== */

.design{
    top:55px !important;
    right:39% !important;
}

.code{
    top:160px !important;
    right:50% !important;
}

.seo{
    top:90px !important;
    right:45% !important;
}

.ai{
    top:10px !important;
    right:50% !important;
}

.analytics{
    top:135px !important;
    right:37% !important;
}

.hero-icons{
    transform:translateY(-130px);
}

/* ==================================================
   ABOUT PAGE
   Append to the end of css/style.css
================================================== */

.about-page{background:#070b18;}

.about-page-container{
    width:min(1320px, calc(100% - 40px));
    margin:0 auto;
}

.about-kicker{
    display:block;
    color:#6fa8ff;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.2em;
    text-transform:uppercase;
}

/* HERO */

.about-hero{
    padding:180px 0 120px;
    background:
        radial-gradient(circle at 78% 32%, rgba(155,92,255,.11), transparent 28%),
        radial-gradient(circle at 22% 38%, rgba(63,140,255,.10), transparent 30%),
        #070b18;
}

.about-hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(350px,.72fr);
    gap:110px;
    align-items:center;
}

.about-hero-copy h1{
    max-width:850px;
    margin:24px 0 28px;
    color:#fff;
    font-size:clamp(3rem,4.8vw,5.2rem);
    font-weight:800;
    line-height:1.01;
    letter-spacing:-.045em;
}

.about-hero-copy h1 span{
    display:block;
    color:#3f8cff;
}

.about-hero-lead{
    max-width:730px;
    margin:0;
    color:#aeb7cc;
    font-size:1.12rem;
    line-height:1.9;
}

.about-hero-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:38px;
}

.about-hero-tags span,
.world-tags span{
    padding:8px 14px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:999px;
    color:#bac5da;
    background:rgba(255,255,255,.02);
    font-size:.77rem;
}

.about-portrait{
    position:relative;
    overflow:hidden;
    max-width:420px;
    margin-left:auto;
    border-radius:34px;
    background:
    linear-gradient(
        145deg,
        #f1efe9,
        #e7e5df
    );
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 35px 80px rgba(0,0,0,.36);
}

.about-portrait img{
    display:block;
    width:100%;
    height:auto;
}

.about-portrait-caption{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin:18px 0 0 auto;
    max-width:420px;
    color:#68758f;
    font-size:.65rem;
    font-weight:800;
    letter-spacing:.16em;
}

.about-portrait-caption i{
    display:block;
    width:70px;
    height:1px;
    background:linear-gradient(90deg,#3f8cff,#9b5cff);
}

/* STORY */

.about-story{
    padding:145px 0;
    border-top:1px solid rgba(255,255,255,.05);
    background:#0b1020;
}

.about-story-grid{
    display:grid;
    grid-template-columns:minmax(0,.88fr) minmax(0,1fr);
    gap:120px;
}

.about-story-title h2,
.about-section-heading h2,
.selected-copy h2{
    margin:22px 0 0;
    color:#fff;
    font-size:clamp(2.7rem,4vw,4.3rem);
    font-weight:700;
    line-height:1.1;
    letter-spacing:-.03em;
}

.about-story-title h2 span{color:#3f8cff;}

.about-story-copy p{
    margin:0 0 28px;
    color:#aeb7cc;
    font-size:1.08rem;
    line-height:1.95;
}

/* TWO WORLDS */

.about-worlds{
    padding:145px 0;
    background:linear-gradient(180deg,#0b1020 0%,#0d1327 100%);
    border-top:1px solid rgba(255,255,255,.05);
}

.about-section-heading{
    max-width:900px;
    margin-bottom:75px;
}

.about-worlds-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}

.about-world-card{
    min-height:510px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:42px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:30px;
}

.enterprise-world{
    background:
        radial-gradient(circle at 10% 0%, rgba(63,140,255,.14), transparent 34%),
        #091120;
}

.digital-world{
    background:
        radial-gradient(circle at 100% 0%, rgba(155,92,255,.16), transparent 36%),
        #111025;
}

.world-index{
    color:#596781;
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.16em;
}

.world-label{
    display:block;
    margin-bottom:18px;
    color:#6fa8ff;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.18em;
}

.digital-world .world-label{color:#bb8dff;}

.about-world-card h3{
    max-width:560px;
    margin:0 0 22px;
    color:#fff;
    font-size:clamp(2rem,3vw,3.2rem);
    line-height:1.12;
}

.about-world-card p{
    max-width:590px;
    color:#a4aec2;
    line-height:1.85;
}

.world-tags{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:28px;
}

.about-world-card > a{
    margin-top:40px;
    text-decoration:none;
    font-size:.92rem;
    font-weight:600;
}

.enterprise-world > a{color:#77adff;}
.digital-world > a{color:#bf92ff;}

/* JOURNEY */

.about-journey{
    padding:145px 0;
    background:#070b18;
    border-top:1px solid rgba(255,255,255,.05);
}

.journey-list{
    max-width:1100px;
    margin-left:auto;
    border-top:1px solid rgba(255,255,255,.08);
}

.journey-item{
    display:grid;
    grid-template-columns:100px 1fr;
    gap:25px;
    padding:42px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.journey-number{
    color:#53617a;
    font-size:.7rem;
    font-weight:800;
    letter-spacing:.15em;
}

.journey-copy > span{
    display:block;
    margin-bottom:10px;
    color:#6fa8ff;
    font-size:.67rem;
    font-weight:800;
    letter-spacing:.17em;
}

.journey-copy h3{
    margin:0 0 12px;
    color:#fff;
    font-size:1.65rem;
}

.journey-copy p{
    max-width:760px;
    margin:0;
    color:#9da9bf;
    line-height:1.8;
}

/* SELECTED */

.about-selected{
    padding:145px 0;
    background:#0b1020;
    border-top:1px solid rgba(255,255,255,.05);
}

.selected-grid{
    display:grid;
    grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
    gap:110px;
    align-items:center;
}

.selected-copy h2{margin-bottom:26px;}

.selected-copy p{
    max-width:600px;
    color:#a5b0c4;
    line-height:1.9;
}

.about-text-link{
    display:inline-block;
    margin-top:28px;
    color:#77adff;
    text-decoration:none;
    font-weight:600;
}

.selected-points{border-top:1px solid rgba(255,255,255,.08);}

.selected-points div{
    display:grid;
    grid-template-columns:55px 1fr;
    gap:20px;
    padding:25px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.selected-points span{
    color:#5e6b84;
    font-size:.67rem;
    font-weight:800;
}

.selected-points p{
    margin:0;
    color:#d4dbea;
    line-height:1.6;
}

/* PHILOSOPHY */

.about-philosophy{
    padding:160px 20px;
    text-align:center;
    background:
        radial-gradient(circle at 50% 50%, rgba(63,140,255,.08), transparent 35%),
        #0d1327;
}

.about-philosophy .about-page-container{max-width:1050px;}

.about-philosophy blockquote{
    margin:26px auto 32px;
    color:#fff;
    font-size:clamp(3rem,5vw,5rem);
    font-weight:800;
    line-height:1.06;
    letter-spacing:-.04em;
}

.about-philosophy blockquote span{
    display:block;
    color:#9b5cff;
}

.about-philosophy p{
    max-width:700px;
    margin:0 auto;
    color:#a7b1c5;
    font-size:1.08rem;
    line-height:1.9;
}

/* CTA */

.about-cta{
    padding:55px 0 120px;
    background:#0d1327;
}

.about-cta-card{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:60px;
    padding:70px 75px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:32px;
    background:
        radial-gradient(circle at 100% 0%, rgba(155,92,255,.10), transparent 30%),
        radial-gradient(circle at 0% 100%, rgba(63,140,255,.08), transparent 30%),
        #080d1b;
}

.about-cta-card h2{
    margin:18px 0 12px;
    color:#fff;
    font-size:clamp(2.2rem,3.5vw,3.5rem);
}

.about-cta-card p{
    max-width:670px;
    margin:0;
    color:#9da9bd;
    line-height:1.75;
}

.about-cta-card .btn-primary{flex-shrink:0;}

/* RESPONSIVE */

@media(max-width:1000px){
    .about-hero-grid,
    .about-story-grid,
    .selected-grid{
        grid-template-columns:1fr;
        gap:60px;
    }

    .about-portrait{
        max-width:380px;
        margin:0;
    }

    .about-portrait-caption{
        max-width:380px;
        margin-left:0;
    }

    .about-worlds-grid{grid-template-columns:1fr;}

    .about-cta-card{
        align-items:flex-start;
        flex-direction:column;
    }
}

@media(max-width:700px){
    .about-page-container{width:min(100% - 40px,1320px);}
    .about-hero{padding:135px 0 85px;}
    .about-hero-copy h1{font-size:clamp(3rem,14vw,4.3rem);}

    .about-story,
    .about-worlds,
    .about-journey,
    .about-selected{padding:95px 0;}

    .about-world-card{
        min-height:440px;
        padding:32px 28px;
    }

    .journey-item{
        grid-template-columns:45px 1fr;
        gap:15px;
        padding:32px 0;
    }

    .about-philosophy{padding:105px 20px;}
    .about-cta{padding:30px 0 80px;}

    .about-cta-card{
        padding:55px 30px;
        border-radius:28px;
    }
}

/* ==================================================
   ABOUT — DESKTOP SECTION SPACING FINAL
================================================== */

@media (min-width:701px){

    .about-story,
    .about-worlds,
    .about-journey,
    .about-selected{
        padding-top:85px !important;
        padding-bottom:85px !important;
    }

    .about-philosophy{
        padding-top:95px !important;
        padding-bottom:95px !important;
    }

    .about-cta{
        padding-top:35px !important;
        padding-bottom:80px !important;
    }

    .about-section-heading{
        margin-bottom:45px !important;
    }

}

/* ==================================================
   ABOUT PAGE — INTERACTIONS / HOVER EFFECTS
   Final overrides
================================================== */


/* =========================
   TAGS / PILLS
========================= */

.about-hero-tags span,
.world-tags span{
    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease,
        color .25s ease;
}


/* Enterprise / default hover */

.about-hero-tags span:hover,
.enterprise-world .world-tags span:hover{
    transform:translateY(-3px);

    border-color:rgba(111,168,255,.45);

    background:rgba(63,140,255,.08);

    color:#fff;

    box-shadow:
        0 10px 30px rgba(0,0,0,.18),
        0 0 18px rgba(63,140,255,.10);
}


/* Digital hover */

.digital-world .world-tags span:hover{
    transform:translateY(-3px);

    border-color:rgba(187,141,255,.45);

    background:rgba(155,92,255,.09);

    color:#fff;

    box-shadow:
        0 10px 30px rgba(0,0,0,.18),
        0 0 18px rgba(155,92,255,.12);
}


/* =========================
   TEXT LINKS
========================= */

.about-world-card > a,
.about-text-link{
    display:inline-block;

    transition:
        transform .25s ease,
        opacity .25s ease,
        letter-spacing .25s ease;
}

.about-world-card > a:hover,
.about-text-link:hover{
    transform:translateX(5px);

    letter-spacing:.01em;

    opacity:.95;
}


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

.about-page .btn-primary,
.about-page .btn-outline{
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease,
        background .25s ease;
}


/* Primary */

.about-page .btn-primary:hover{
    transform:translateY(-3px);

    box-shadow:
        0 12px 30px rgba(63,140,255,.18),
        0 8px 25px rgba(155,92,255,.12);
}


/* Outline */

.about-page .btn-outline:hover{
    transform:translateY(-3px);

    border-color:rgba(255,255,255,.35);

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


/* =========================
   TWO WORLDS CARDS
========================= */

.about-world-card{
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


/* Enterprise card */

.enterprise-world:hover{
    transform:translateY(-5px);

    border-color:rgba(63,140,255,.22);

    box-shadow:
        0 20px 55px rgba(0,0,0,.20),
        0 0 35px rgba(63,140,255,.06);
}


/* Digital card */

.digital-world:hover{
    transform:translateY(-5px);

    border-color:rgba(155,92,255,.25);

    box-shadow:
        0 20px 55px rgba(0,0,0,.20),
        0 0 35px rgba(155,92,255,.07);
}


/* =========================
   JOURNEY ITEMS
========================= */

.journey-item{
    transition:
        padding-left .30s ease,
        background .30s ease;
}

.journey-item:hover{
    padding-left:12px;

    background:
        linear-gradient(
            90deg,
            rgba(63,140,255,.025),
            transparent 70%
        );
}


/* =========================
   SELECTED EXPERIENCE ROWS
========================= */

.selected-points div{
    transition:
        padding-left .25s ease,
        background .25s ease;
}

.selected-points div:hover{
    padding-left:10px;

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


/* =========================
   DESKTOP ONLY
   Avoid hover movement on touch devices
========================= */

@media(max-width:700px){

    .about-world-card:hover,
    .about-page .btn-primary:hover,
    .about-page .btn-outline:hover,
    .about-hero-tags span:hover,
    .world-tags span:hover,
    .journey-item:hover,
    .selected-points div:hover{
        transform:none;
    }

    .journey-item:hover,
    .selected-points div:hover{
        padding-left:0;
    }

}

/* ==================================================
   DDOR CASE STUDY
   Uses shared .case-* project-detail styles.
   Append to the END of css/style.css
================================================== */

.ddor-case{
    --ddor-blue:#3f8cff;
    --ddor-blue-soft:#6fa8ff;
    background:#080d1b;
}

.ddor-case .case-eyebrow{
    color:var(--ddor-blue-soft);
}

.ddor-case .case-hero{
    background:
        radial-gradient(
            circle at 82% 28%,
            rgba(63,140,255,.13),
            transparent 30%
        ),
        #080d1b;
}

.ddor-case .case-hero-image{
    box-shadow:
        0 35px 100px rgba(0,0,0,.42),
        0 0 70px rgba(63,140,255,.09);
}

.ddor-case .case-info-card > span{
    color:var(--ddor-blue-soft);
}


/* =========================
   KEY NUMBERS
========================= */

.ddor-numbers-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid rgba(255,255,255,.08);
    border-left:1px solid rgba(255,255,255,.08);
}

.ddor-number{
    min-height:190px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:32px;
    border-right:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.012);

    transition:
        background .3s ease,
        transform .3s ease;
}

.ddor-number:hover{
    background:rgba(63,140,255,.045);
    transform:translateY(-3px);
}

.ddor-number strong{
    display:block;
    margin-bottom:10px;
    color:#fff;
    font-size:clamp(2.8rem,4vw,4.4rem);
    font-weight:700;
    line-height:1;
    letter-spacing:-.04em;
}

.ddor-number span{
    color:#8f9db8;
    font-size:.82rem;
    line-height:1.5;
}


/* =========================
   CARD HOVERS
========================= */

.ddor-case .case-info-card,
.ddor-case .case-tech-grid article,
.ddor-case .case-contribution-grid div{
    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease;
}

.ddor-case .case-info-card:hover,
.ddor-case .case-tech-grid article:hover{
    transform:translateY(-4px);
    border-color:rgba(63,140,255,.18);
    background:rgba(63,140,255,.025);
}

.ddor-case .case-contribution-grid div:hover{
    background:rgba(63,140,255,.025);
}


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

@media(max-width:900px){
    .ddor-numbers-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:600px){
    .ddor-numbers-grid{
        grid-template-columns:1fr;
    }

    .ddor-number{
        min-height:145px;
    }
}

/* ==================================================
   VMWARE VCF PoC CASE STUDY
   Uses the shared .case-* project-detail styles.
   Append to the END of css/style.css
================================================== */

.vcf-case{
    --vcf-blue:#3f8cff;
    --vcf-purple:#9b5cff;
    background:#080d1b;
}

.vcf-case .case-hero{
    background:
        radial-gradient(circle at 82% 25%, rgba(155,92,255,.11), transparent 28%),
        radial-gradient(circle at 22% 35%, rgba(63,140,255,.08), transparent 30%),
        #080d1b;
}

.vcf-case .case-eyebrow{
    color:#8aaeff;
}

.vcf-case .case-hero-image{
    box-shadow:
        0 35px 100px rgba(0,0,0,.42),
        0 0 70px rgba(99,86,255,.10);
}

.vcf-case .case-info-card > span{
    color:#9f8cff;
}


/* =========================
   VCF STACK
========================= */

.vcf-stack-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.vcf-stack-card{
    min-height:270px;
    padding:34px 30px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(155,92,255,.055), transparent 42%),
        rgba(255,255,255,.012);
    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease;
}

.vcf-stack-card:hover{
    transform:translateY(-4px);
    border-color:rgba(122,112,255,.22);
    background:rgba(99,86,255,.025);
}

.vcf-stack-card > span{
    display:block;
    margin-bottom:48px;
    color:#67738d;
    font-size:.67rem;
    font-weight:800;
    letter-spacing:.16em;
}

.vcf-stack-card h3{
    margin:0 0 14px;
    color:#fff;
    font-size:1.35rem;
}

.vcf-stack-card p{
    margin:0;
    color:#99a6be;
    font-size:.94rem;
    line-height:1.75;
}


/* =========================
   CUSTOMER CASES
========================= */

.vcf-cases-section{
    background:
        radial-gradient(circle at 10% 20%, rgba(63,140,255,.06), transparent 28%),
        radial-gradient(circle at 90% 75%, rgba(155,92,255,.06), transparent 28%),
        #080d1b;
}

.vcf-customer-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}

.vcf-customer-card{
    min-height:520px;
    display:flex;
    flex-direction:column;
    padding:42px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:30px;
    background:#0b1122;
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.vcf-customer-card:first-child{
    background:
        radial-gradient(circle at 0% 0%, rgba(63,140,255,.10), transparent 34%),
        #0b1122;
}

.vcf-customer-card:last-child{
    background:
        radial-gradient(circle at 100% 0%, rgba(155,92,255,.12), transparent 35%),
        #0b1122;
}

.vcf-customer-card:hover{
    transform:translateY(-5px);
    border-color:rgba(122,112,255,.20);
    box-shadow:0 22px 60px rgba(0,0,0,.22);
}

.vcf-customer-index{
    display:block;
    margin-bottom:65px;
    color:#66728b;
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.18em;
}

.vcf-customer-card h3{
    margin:0 0 8px;
    color:#fff;
    font-size:clamp(2.2rem,3vw,3.4rem);
    line-height:1;
    letter-spacing:-.03em;
}

.vcf-customer-card h4{
    margin:0 0 24px;
    color:#c7d0e2;
    font-size:1rem;
    font-weight:500;
}

.vcf-customer-card > p{
    margin:0;
    color:#9ba8bf;
    line-height:1.85;
}

.vcf-case-facts{
    display:grid;
    grid-template-columns:1fr;
    margin-top:auto;
    padding-top:34px;
}

.vcf-case-facts div{
    display:grid;
    grid-template-columns:95px 1fr;
    gap:15px;
    padding:15px 0;
    border-top:1px solid rgba(255,255,255,.07);
}

.vcf-case-facts span{
    color:#65718a;
    font-size:.66rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.vcf-case-facts strong{
    color:#d9e0ed;
    font-size:.9rem;
    font-weight:500;
}


/* =========================
   HOVERS
========================= */

.vcf-case .case-tech-grid article,
.vcf-case .case-contribution-grid div{
    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease;
}

.vcf-case .case-tech-grid article:hover{
    transform:translateY(-4px);
    border-color:rgba(122,112,255,.18);
    background:rgba(99,86,255,.02);
}

.vcf-case .case-contribution-grid div:hover{
    background:rgba(99,86,255,.02);
}


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

@media(max-width:1000px){

    .vcf-stack-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .vcf-customer-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:650px){

    .vcf-stack-grid{
        grid-template-columns:1fr;
    }

    .vcf-customer-card{
        min-height:0;
        padding:34px 28px;
    }

    .vcf-customer-index{
        margin-bottom:40px;
    }

}

/* ==================================================
   ICT NETWORKS CASE STUDY
   Uses shared .case-* project-detail styles.
   Append to the END of css/style.css
================================================== */

.ict-case{
    --ict-orange:#ff7a00;
    --ict-orange-soft:#ff9d45;
    background:#080d1b;
}

.ict-case .case-hero{
    background:
        radial-gradient(circle at 82% 28%, rgba(255,122,0,.11), transparent 29%),
        radial-gradient(circle at 20% 40%, rgba(63,140,255,.055), transparent 30%),
        #080d1b;
}

.ict-case .case-eyebrow{
    color:var(--ict-orange-soft);
}

.ict-case .case-hero-image{
    box-shadow:
        0 35px 100px rgba(0,0,0,.42),
        0 0 65px rgba(255,122,0,.08);
}

.ict-case .case-info-card > span{
    color:var(--ict-orange-soft);
}

/* STRATEGY CARDS */

.ict-strategy-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.ict-strategy-card{
    min-height:285px;
    padding:34px 30px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(255,122,0,.045), transparent 42%),
        rgba(255,255,255,.012);
    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease;
}

.ict-strategy-card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,122,0,.22);
    background:rgba(255,122,0,.025);
}

.ict-strategy-card > span{
    display:block;
    margin-bottom:52px;
    color:#68748d;
    font-size:.67rem;
    font-weight:800;
    letter-spacing:.16em;
}

.ict-strategy-card h3{
    margin:0 0 14px;
    color:#fff;
    font-size:1.35rem;
}

.ict-strategy-card p{
    margin:0;
    color:#99a6be;
    font-size:.94rem;
    line-height:1.78;
}

/* LEGACY SEO */

.ict-legacy-section{
    background:
        radial-gradient(circle at 80% 50%, rgba(255,122,0,.055), transparent 32%),
        #0b1020;
}

.ict-live-link{
    display:inline-block;
    margin-top:24px;
    color:var(--ict-orange-soft);
    text-decoration:none;
    font-weight:650;
    transition:
        transform .25s ease,
        color .25s ease;
}

.ict-live-link:hover{
    transform:translateX(5px);
    color:#fff;
}

/* TOOL GRID */

.ict-tool-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid rgba(255,255,255,.08);
    border-left:1px solid rgba(255,255,255,.08);
}

.ict-tool-grid div{
    min-height:155px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:28px;
    border-right:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.012);
    transition:
        background .3s ease,
        transform .3s ease;
}

.ict-tool-grid div:hover{
    background:rgba(255,122,0,.025);
    transform:translateY(-3px);
}

.ict-tool-grid span{
    margin-bottom:10px;
    color:#68748d;
    font-size:.65rem;
    font-weight:800;
    letter-spacing:.15em;
}

.ict-tool-grid strong{
    color:#e8edf7;
    font-size:1rem;
    font-weight:550;
}

/* HOVERS */

.ict-case .case-tech-grid article,
.ict-case .case-contribution-grid div{
    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease;
}

.ict-case .case-tech-grid article:hover{
    transform:translateY(-4px);
    border-color:rgba(255,122,0,.18);
    background:rgba(255,122,0,.02);
}

.ict-case .case-contribution-grid div:hover{
    background:rgba(255,122,0,.02);
}

/* RESPONSIVE */

@media(max-width:1000px){

    .ict-strategy-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .ict-tool-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:650px){

    .ict-strategy-grid,
    .ict-tool-grid{
        grid-template-columns:1fr;
    }

    .ict-strategy-card{
        min-height:0;
    }

}

/* ==================================================
   STRONG & EMPOWERED CASE STUDY
   Uses shared .case-* project-detail styles.
   Append to the END of css/style.css
================================================== */

.se-case{
    --se-mint:#85d2c1;
    --se-blue:#377792;
    --se-dark:#282828;
    background:#080d1b;
}

.se-case .case-hero{
    background:
        radial-gradient(circle at 82% 26%, rgba(133,210,193,.11), transparent 30%),
        radial-gradient(circle at 24% 40%, rgba(55,119,146,.08), transparent 32%),
        #080d1b;
}

.se-case .case-eyebrow{
    color:var(--se-mint);
}

.se-case .case-hero-image{
    box-shadow:
        0 35px 100px rgba(0,0,0,.42),
        0 0 65px rgba(133,210,193,.07);
}

.se-hero-image img{
    object-fit:cover;
    object-position:center;
}

.se-case .case-info-card > span{
    color:var(--se-mint);
}


/* =========================
   IDENTITY GRID
========================= */

.se-identity-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.se-identity-card{
    min-height:285px;
    padding:34px 30px;

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

    background:
        radial-gradient(circle at 100% 0%, rgba(133,210,193,.05), transparent 42%),
        rgba(255,255,255,.012);

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

.se-identity-card:hover{
    transform:translateY(-4px);
    border-color:rgba(133,210,193,.22);
    background:rgba(133,210,193,.025);
}

.se-identity-card > span{
    display:block;
    margin-bottom:52px;

    color:#65758c;

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

.se-identity-card h3{
    margin:0 0 14px;

    color:#fff;

    font-size:1.35rem;
}

.se-identity-card p{
    margin:0;

    color:#99a6be;

    font-size:.94rem;
    line-height:1.78;
}


/* =========================
   BRAND GUIDE
========================= */

.se-brand-system{
    background:
        radial-gradient(circle at 18% 30%, rgba(133,210,193,.05), transparent 28%),
        #0b1020;
}

.se-brand-system-grid{
    display:grid;
    grid-template-columns:minmax(280px,.62fr) minmax(0,1fr);
    gap:110px;
    align-items:start;
}

.se-brand-guide-wrap{
    display:flex;
    justify-content:center;
}

.se-brand-guide-wrap img{
    display:block;
    width:min(100%,360px);
    height:auto;

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

    box-shadow:0 24px 70px rgba(0,0,0,.28);
}

.se-brand-system-copy h2{
    margin:22px 0 25px;

    color:#fff;

    font-size:clamp(2.7rem,4vw,4.25rem);
    line-height:1.08;
    letter-spacing:-.03em;
}

.se-brand-system-copy > p{
    max-width:620px;

    color:#9da9bd;

    line-height:1.9;
}

.se-brand-list{
    margin-top:45px;
    border-top:1px solid rgba(255,255,255,.08);
}

.se-brand-list div{
    display:grid;
    grid-template-columns:55px 1fr;
    gap:18px;

    padding:21px 0;

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

.se-brand-list span{
    color:#65758c;

    font-size:.66rem;
    font-weight:800;
    letter-spacing:.13em;
}

.se-brand-list strong{
    color:#dbe2ef;

    font-size:.95rem;
    font-weight:550;
}


/* =========================
   WEB GALLERY
========================= */

.se-web-section{
    background:
        radial-gradient(circle at 85% 25%, rgba(55,119,146,.06), transparent 30%),
        #080d1b;
}

.se-web-gallery{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}

.se-web-main{
    margin:0;
    overflow:hidden;

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

    background:#000;

    box-shadow:0 25px 65px rgba(0,0,0,.25);
}

.se-web-main img{
    display:block;
    width:100%;
    height:100%;

    aspect-ratio:1.45/1;

    object-fit:cover;
    object-position:center;
}


/* =========================
   SHARED HOVERS
========================= */

.se-case .case-tech-grid article,
.se-case .case-contribution-grid div{
    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease;
}

.se-case .case-tech-grid article:hover{
    transform:translateY(-4px);
    border-color:rgba(133,210,193,.18);
    background:rgba(133,210,193,.02);
}

.se-case .case-contribution-grid div:hover{
    background:rgba(133,210,193,.02);
}


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

@media(max-width:1000px){

    .se-identity-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .se-brand-system-grid{
        grid-template-columns:1fr;
        gap:60px;
    }

    .se-brand-guide-wrap{
        justify-content:flex-start;
    }

    .se-web-gallery{
        grid-template-columns:1fr;
    }

}

@media(max-width:650px){

    .se-identity-grid{
        grid-template-columns:1fr;
    }

    .se-identity-card{
        min-height:0;
    }

    .se-brand-guide-wrap img{
        width:min(100%,320px);
    }

}

/* ==================================================
   STRONG & EMPOWERED — V2 OVERRIDES
   Add this ONCE at the very end of style.css
================================================== */


/* =========================
   HERO — LANDSCAPE LAPTOP MOCKUP
========================= */

.se-case .se-hero-image{
    aspect-ratio:4 / 3 !important;
    align-self:center;
    background:#05070b;
}

.se-case .se-hero-image img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
}


/* =========================
   BRAND SYSTEM — NEW 3-PART LAYOUT
========================= */

.se-case .se-brand-system{
    padding-top:115px;
    padding-bottom:115px;

    background:
        radial-gradient(
            circle at 50% 18%,
            rgba(133,210,193,.055),
            transparent 30%
        ),
        #0b1020;
}

.se-case .se-brand-heading{
    max-width:940px;
    margin:0 auto 65px;
}

.se-case .se-brand-heading > p{
    max-width:760px;
    margin:24px auto 0;

    color:#9da9bd;
    line-height:1.9;
}


/* 
   Columns follow the natural aspect ratios of the three images.
   This keeps their displayed heights visually close without cropping.
*/

.se-brand-guide-grid{
    display:grid;

    grid-template-columns:
        minmax(0,.72fr)
        minmax(0,1.08fr)
        minmax(0,2.15fr);

    gap:22px;

    align-items:start;

    max-width:1180px;
    margin:0 auto;
}


.se-brand-guide-card{
    margin:0;

    overflow:hidden;

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

    background:#fff;

    box-shadow:0 24px 65px rgba(0,0,0,.24);

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

.se-brand-guide-card:hover{
    transform:translateY(-5px);

    border-color:rgba(133,210,193,.24);

    box-shadow:
        0 30px 75px rgba(0,0,0,.30),
        0 0 30px rgba(133,210,193,.05);
}


.se-brand-guide-label{
    display:flex;
    align-items:center;
    gap:14px;

    padding:15px 17px;

    background:#0b1120;

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

.se-brand-guide-label span{
    color:#66758e;

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

.se-brand-guide-label strong{
    color:#dbe4ef;

    font-size:.78rem;
    font-weight:600;
}


.se-brand-guide-card img{
    display:block;

    width:100%;
    height:auto;

    object-fit:contain;
}


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

@media(max-width:1000px){

    .se-brand-guide-grid{
        grid-template-columns:1fr 1.4fr;
        max-width:820px;
    }

    .se-brand-guide-03{
        grid-column:1 / -1;
        width:min(100%,760px);
        justify-self:center;
    }

}


@media(max-width:650px){

    .se-case .se-hero-image{
        aspect-ratio:4 / 3 !important;
    }

    .se-case .se-brand-system{
        padding-top:85px;
        padding-bottom:85px;
    }

    .se-case .se-brand-heading{
        margin-bottom:45px;
    }

    .se-brand-guide-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .se-brand-guide-03{
        grid-column:auto;
        width:100%;
    }

}

/* ==================================================
   STRONG & EMPOWERED — FINAL LAYOUT FIX
   Paste at the VERY END of style.css
================================================== */


/* =========================
   HERO — show the complete square mockup
========================= */

.se-case .case-hero-image.se-hero-image{
    aspect-ratio:1 / 1 !important;
    overflow:hidden !important;

    background:#05070b !important;
}

.se-case .case-hero-image.se-hero-image img{
    display:block !important;

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
    object-position:center !important;
}


/* =========================
   BRAND SYSTEM
   Part 01 + 02 side by side
   Part 03 full width below
========================= */

.se-case .se-brand-system{
    padding-top:105px !important;
    padding-bottom:105px !important;
}

.se-case .se-brand-heading{
    max-width:900px !important;
    margin:0 auto 55px !important;
}


/* Top row proportions are intentionally 2:3.
   The original files are 482px and 724px wide
   with the same height, so they align naturally. */

.se-case .se-brand-guide-grid{
    display:grid !important;

    grid-template-columns:
        minmax(0,2fr)
        minmax(0,3fr) !important;

    gap:26px !important;

    width:100% !important;
    max-width:900px !important;

    margin:0 auto !important;

    align-items:start !important;
}


.se-case .se-brand-guide-card{
    display:block !important;

    width:100% !important;
    max-width:none !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;

    border:1px solid rgba(255,255,255,.09) !important;
    border-radius:22px !important;

    background:#fff !important;

    box-shadow:0 24px 65px rgba(0,0,0,.25) !important;
}


/* third / widest part */

.se-case .se-brand-guide-03{
    grid-column:1 / -1 !important;

    width:100% !important;
    max-width:900px !important;

    justify-self:center !important;
}


/* labels */

.se-case .se-brand-guide-label{
    display:flex !important;
    align-items:center !important;

    gap:14px !important;

    padding:15px 18px !important;

    background:#0b1120 !important;

    border-bottom:1px solid rgba(255,255,255,.08) !important;
}

.se-case .se-brand-guide-label span{
    color:#718099 !important;

    font-size:.65rem !important;
    font-weight:800 !important;
    letter-spacing:.14em !important;
}

.se-case .se-brand-guide-label strong{
    color:#e3e9f3 !important;

    font-size:.82rem !important;
    font-weight:600 !important;
}


/* preserve natural image proportions — NO CROPPING */

.se-case .se-brand-guide-card img{
    display:block !important;

    width:100% !important;
    height:auto !important;

    max-width:100% !important;

    object-fit:contain !important;

    border-radius:0 !important;
}


/* subtle hover only */

.se-case .se-brand-guide-card{
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease !important;
}

.se-case .se-brand-guide-card:hover{
    transform:translateY(-4px) !important;

    border-color:rgba(133,210,193,.22) !important;

    box-shadow:
        0 30px 75px rgba(0,0,0,.30),
        0 0 28px rgba(133,210,193,.04) !important;
}


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

@media(max-width:900px){

    .se-case .se-brand-guide-grid{
        max-width:720px !important;

        grid-template-columns:
            minmax(0,2fr)
            minmax(0,3fr) !important;
    }

}


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

@media(max-width:650px){

    .se-case .case-hero-image.se-hero-image{
        aspect-ratio:1 / 1 !important;
    }

    .se-case .se-brand-system{
        padding-top:80px !important;
        padding-bottom:80px !important;
    }

    .se-case .se-brand-guide-grid{
        grid-template-columns:1fr !important;

        max-width:100% !important;

        gap:20px !important;
    }

    .se-case .se-brand-guide-03{
        grid-column:auto !important;
    }

}

/* ==================================================
   ENTERPRISE PAGE
   Append to the END of css/style.css
================================================== */

.enterprise-page{
    --ent-bg:#070b18;
    --ent-bg2:#0b1020;
    --ent-blue:#3f8cff;
    --ent-blue-soft:#6fa8ff;
    --ent-purple:#9b5cff;

    background:var(--ent-bg);
}

.enterprise-container{
    width:min(1320px, calc(100% - 40px));
    margin:0 auto;
}

.enterprise-kicker{
    display:block;

    color:var(--ent-blue-soft);

    font-size:.7rem;
    font-weight:800;
    letter-spacing:.2em;
    text-transform:uppercase;
}


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

.enterprise-hero{
    min-height:860px;

    display:flex;
    align-items:center;

    padding:165px 0 110px;

    overflow:hidden;

    background:
        radial-gradient(circle at 80% 34%, rgba(63,140,255,.10), transparent 28%),
        radial-gradient(circle at 62% 48%, rgba(155,92,255,.065), transparent 30%),
        #070b18;

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

.enterprise-hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(440px,.85fr);
    gap:95px;
    align-items:center;
}

.enterprise-hero-copy h1{
    max-width:840px;
    margin:24px 0 28px;

    color:#fff;

    font-size:clamp(3.6rem,5.6vw,6.1rem);
    font-weight:800;
    line-height:1.01;
    letter-spacing:-.045em;
}

.enterprise-hero-copy h1 span{
    display:block;
    color:var(--ent-blue);
}

.enterprise-hero-lead{
    max-width:720px;
    margin:0;

    color:#aeb8cc;

    font-size:1.1rem;
    line-height:1.9;
}

.enterprise-hero-actions{
    display:flex;
    align-items:center;
    gap:28px;

    margin-top:38px;
}

.enterprise-text-link{
    display:inline-block;

    color:#7eb1ff;

    text-decoration:none;

    font-weight:600;

    transition:
        transform .25s ease,
        color .25s ease;
}

.enterprise-text-link:hover{
    transform:translateX(5px);
    color:#fff;
}

.enterprise-hero-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin-top:34px;
}

.enterprise-hero-tags span{
    padding:8px 14px;

    border:1px solid rgba(255,255,255,.09);
    border-radius:999px;

    color:#b9c5d9;

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

    font-size:.76rem;

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

.enterprise-hero-tags span:hover{
    transform:translateY(-3px);

    border-color:rgba(111,168,255,.36);
    background:rgba(63,140,255,.055);

    color:#fff;
}


/* =========================
   ARCHITECTURE VISUAL
========================= */

.enterprise-architecture-visual{
    position:relative;

    width:min(100%,560px);
    aspect-ratio:1 / 1;

    margin-left:auto;
}

.architecture-glow{
    position:absolute;

    width:56%;
    height:56%;

    left:22%;
    top:22%;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(63,140,255,.16),
            rgba(63,140,255,.03) 45%,
            transparent 70%
        );

    filter:blur(8px);
}

.architecture-core{
    position:absolute;
    z-index:4;

    left:50%;
    top:50%;

    width:190px;
    height:190px;

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

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    border:1px solid rgba(111,168,255,.30);
    border-radius:50%;

    background:
        radial-gradient(circle at 40% 35%, rgba(63,140,255,.16), transparent 55%),
        #0c1427;

    box-shadow:
        0 0 0 18px rgba(63,140,255,.025),
        0 0 0 44px rgba(63,140,255,.012),
        0 25px 60px rgba(0,0,0,.30);
}

.architecture-core span{
    margin-bottom:8px;

    color:#6d7f9f;

    font-size:.6rem;
    font-weight:800;
    letter-spacing:.17em;
}

.architecture-core strong{
    color:#fff;

    font-size:1.35rem;
}

.architecture-node{
    position:absolute;
    z-index:5;

    min-width:118px;

    padding:16px 18px;

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

    background:#0b1223;

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

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

.architecture-node:hover{
    transform:translateY(-4px);
    border-color:rgba(111,168,255,.25);
    background:#0d172c;
}

.architecture-node span{
    display:block;
    margin-bottom:6px;

    color:#596b8d;

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

.architecture-node strong{
    color:#dfe7f5;

    font-size:.88rem;
    font-weight:600;
}

.node-cloud{
    left:4%;
    top:16%;
}

.node-dc{
    right:3%;
    top:12%;
}

.node-platform{
    right:0;
    top:59%;
}

.node-ops{
    left:8%;
    top:67%;
}

.node-business{
    left:38%;
    bottom:2%;
}

.architecture-line{
    position:absolute;
    z-index:2;

    height:1px;

    background:
        linear-gradient(
            90deg,
            rgba(63,140,255,.0),
            rgba(63,140,255,.34),
            rgba(63,140,255,.0)
        );

    transform-origin:left center;
}

.line-1{
    width:205px;
    left:27%;
    top:33%;
    transform:rotate(28deg);
}

.line-2{
    width:190px;
    left:54%;
    top:35%;
    transform:rotate(-30deg);
}

.line-3{
    width:205px;
    left:57%;
    top:55%;
    transform:rotate(24deg);
}

.line-4{
    width:210px;
    left:25%;
    top:57%;
    transform:rotate(-30deg);
}

.line-5{
    width:175px;
    left:49%;
    top:62%;
    transform:rotate(88deg);
}


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

.enterprise-intro{
    padding:125px 0;

    background:#0b1020;
}

.enterprise-intro-grid{
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1fr);
    gap:120px;
}

.enterprise-intro h2{
    margin:22px 0 0;

    color:#fff;

    font-size:clamp(2.8rem,4.1vw,4.35rem);
    font-weight:700;
    line-height:1.09;
    letter-spacing:-.035em;
}

.enterprise-intro h2 span{
    display:block;
    color:var(--ent-blue);
}

.enterprise-intro-copy p{
    margin:0 0 25px;

    color:#a6b1c6;

    font-size:1.06rem;
    line-height:1.92;
}


/* =========================
   SHARED SECTION HEADING
========================= */

.enterprise-section-heading{
    max-width:850px;
    margin-bottom:65px;
}

.enterprise-section-heading-wide{
    max-width:950px;
}

.enterprise-section-heading h2{
    margin:22px 0 0;

    color:#fff;

    font-size:clamp(2.75rem,4vw,4.4rem);
    font-weight:700;
    line-height:1.08;
    letter-spacing:-.035em;
}

.enterprise-section-heading > p{
    max-width:730px;
    margin:24px 0 0;

    color:#8f9db6;

    line-height:1.85;
}


/* =========================
   PILLARS
========================= */

.enterprise-pillars{
    padding:125px 0;

    background:
        linear-gradient(180deg,#0b1020,#0d1327);

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

.enterprise-pillars-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.enterprise-pillar-card{
    min-height:520px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    padding:38px;

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

    background:
        radial-gradient(circle at 0% 0%, rgba(63,140,255,.085), transparent 36%),
        #091120;

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

.enterprise-pillar-card:nth-child(2){
    background:
        radial-gradient(circle at 50% 0%, rgba(63,140,255,.065), transparent 36%),
        #091120;
}

.enterprise-pillar-card:nth-child(3){
    background:
        radial-gradient(circle at 100% 0%, rgba(155,92,255,.09), transparent 38%),
        #111025;
}

.enterprise-pillar-card:hover{
    transform:translateY(-5px);
    border-color:rgba(111,168,255,.20);

    box-shadow:0 25px 60px rgba(0,0,0,.20);
}

.pillar-index{
    color:#596781;

    font-size:.68rem;
    font-weight:800;
    letter-spacing:.15em;
}

.pillar-label{
    display:block;
    margin-bottom:15px;

    color:#6fa8ff;

    font-size:.68rem;
    font-weight:800;
    letter-spacing:.18em;
}

.enterprise-pillar-card:nth-child(3) .pillar-label{
    color:#bb8dff;
}

.enterprise-pillar-card h3{
    margin:0 0 20px;

    color:#fff;

    font-size:2rem;
    line-height:1.15;
}

.enterprise-pillar-card p{
    margin:0;

    color:#9da9bd;

    line-height:1.8;
}

.enterprise-pillar-card ul{
    margin:30px 0 0;
    padding:0;

    list-style:none;
}

.enterprise-pillar-card li{
    padding:10px 0;

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

    color:#c2cad9;

    font-size:.88rem;
}


/* =========================
   CAPABILITIES
========================= */

.enterprise-capabilities{
    padding:125px 0;

    background:#070b18;

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

.enterprise-capability-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;

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

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

.enterprise-capability-grid article{
    min-height:240px;

    padding:30px;

    background:#080d1b;

    transition:
        background .3s ease,
        transform .3s ease;
}

.enterprise-capability-grid article:hover{
    background:#0b1325;
    transform:translateY(-3px);
}

.enterprise-capability-grid article > span{
    display:block;

    margin-bottom:48px;

    color:#53627f;

    font-size:.64rem;
    font-weight:800;
    letter-spacing:.13em;
}

.enterprise-capability-grid h3{
    margin:0 0 12px;

    color:#fff;

    font-size:1.25rem;
}

.enterprise-capability-grid p{
    margin:0;

    color:#94a1b8;

    font-size:.9rem;
    line-height:1.72;
}


/* =========================
   APPROACH
========================= */

.enterprise-approach{
    padding:125px 0;

    background:#0b1020;

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

.enterprise-process{
    max-width:1120px;
    margin-left:auto;

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

.enterprise-process-step{
    display:grid;
    grid-template-columns:95px 1fr;
    gap:25px;

    padding:35px 0;

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

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

.enterprise-process-step:hover{
    padding-left:10px;

    background:
        linear-gradient(
            90deg,
            rgba(63,140,255,.025),
            transparent 70%
        );
}

.enterprise-process-step > span{
    color:#586682;

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

.enterprise-process-step strong{
    display:block;

    margin-bottom:8px;

    color:#fff;

    font-size:1.45rem;
}

.enterprise-process-step p{
    max-width:760px;
    margin:0;

    color:#9aa6ba;

    line-height:1.8;
}


/* =========================
   PRINCIPLES
========================= */

.enterprise-principles{
    padding:125px 0;

    background:#0d1327;

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

.enterprise-principles-grid{
    display:grid;
    grid-template-columns:minmax(0,.75fr) minmax(0,1fr);
    gap:110px;
    align-items:start;
}

.enterprise-principles-title h2{
    margin:22px 0 0;

    color:#fff;

    font-size:clamp(2.7rem,3.8vw,4.1rem);
    line-height:1.09;
    letter-spacing:-.03em;
}

.enterprise-principles-list{
    border-top:1px solid rgba(255,255,255,.08);
}

.enterprise-principles-list div{
    display:grid;
    grid-template-columns:55px 1fr;
    gap:18px;

    padding:23px 0;

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

.enterprise-principles-list span{
    color:#5d6b86;

    font-size:.65rem;
    font-weight:800;
}

.enterprise-principles-list strong{
    color:#dbe3ef;

    font-size:.98rem;
    font-weight:550;
    line-height:1.55;
}


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

.enterprise-selected{
    padding:125px 0;

    background:#070b18;

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

.enterprise-selected-heading h2 span{
    color:var(--ent-blue);
}

.enterprise-project-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.enterprise-project-card{
    overflow:hidden;

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

    background:#0a1020;

    text-decoration:none;

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

.enterprise-project-card:hover{
    transform:translateY(-6px);

    border-color:rgba(111,168,255,.20);

    box-shadow:0 28px 70px rgba(0,0,0,.28);
}

.enterprise-project-image{
    overflow:hidden;

    aspect-ratio:4 / 3;

    background:#07101f;
}

.enterprise-project-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .5s ease;
}

.enterprise-project-card:hover .enterprise-project-image img{
    transform:scale(1.03);
}

.enterprise-project-content{
    padding:28px 28px 30px;
}

.enterprise-project-content > span{
    display:block;
    margin-bottom:13px;

    color:#6fa8ff;

    font-size:.64rem;
    font-weight:800;
    letter-spacing:.15em;
}

.enterprise-project-content h3{
    margin:0 0 9px;

    color:#fff;

    font-size:1.55rem;
}

.enterprise-project-content p{
    min-height:50px;

    margin:0 0 26px;

    color:#9ca8bc;

    line-height:1.65;
}

.enterprise-project-content strong{
    color:#dfe8f7;

    font-size:.84rem;
    font-weight:600;
}

.enterprise-projects-link{
    margin-top:42px;
    text-align:center;
}


/* =========================
   CTA
========================= */

.enterprise-cta{
    padding:45px 0 110px;

    background:#070b18;
}

.enterprise-cta-card{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:60px;

    padding:65px 70px;

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

    background:
        radial-gradient(circle at 100% 0%, rgba(155,92,255,.09), transparent 30%),
        radial-gradient(circle at 0% 100%, rgba(63,140,255,.08), transparent 30%),
        #0b1020;
}

.enterprise-cta-card h2{
    max-width:760px;

    margin:18px 0 12px;

    color:#fff;

    font-size:clamp(2.4rem,3.5vw,3.7rem);
    line-height:1.1;
    letter-spacing:-.025em;
}

.enterprise-cta-card p{
    max-width:670px;
    margin:0;

    color:#9faabd;

    line-height:1.8;
}

.enterprise-cta-card .btn-primary{
    flex-shrink:0;
}


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

@media(max-width:1100px){

    .enterprise-hero-grid{
        grid-template-columns:1fr;
        gap:70px;
    }

    .enterprise-architecture-visual{
        margin:0 auto;
    }

    .enterprise-pillars-grid{
        grid-template-columns:1fr;
    }

    .enterprise-pillar-card{
        min-height:420px;
    }

    .enterprise-capability-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .enterprise-principles-grid{
        grid-template-columns:1fr;
        gap:55px;
    }

    .enterprise-project-grid{
        grid-template-columns:1fr;
    }

    .enterprise-project-card{
        display:grid;
        grid-template-columns:.9fr 1.1fr;
    }

    .enterprise-project-image{
        aspect-ratio:auto;
        min-height:300px;
    }

}

@media(max-width:760px){

    .enterprise-hero{
        min-height:0;
        padding:135px 0 90px;
    }

    .enterprise-hero-copy h1{
        font-size:clamp(3rem,13vw,4.4rem);
    }

    .enterprise-hero-actions{
        align-items:flex-start;
        flex-direction:column;
    }

    .enterprise-architecture-visual{
        width:min(100%,480px);
    }

    .enterprise-intro,
    .enterprise-pillars,
    .enterprise-capabilities,
    .enterprise-approach,
    .enterprise-principles,
    .enterprise-selected{
        padding:90px 0;
    }

    .enterprise-intro-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .enterprise-capability-grid{
        grid-template-columns:1fr;
    }

    .enterprise-process-step{
        grid-template-columns:45px 1fr;
        gap:15px;
    }

    .enterprise-project-card{
        display:block;
    }

    .enterprise-project-image{
        min-height:0;
        aspect-ratio:4 / 3;
    }

    .enterprise-cta-card{
        align-items:flex-start;
        flex-direction:column;

        padding:50px 30px;
    }

}

@media(max-width:560px){

    .enterprise-architecture-visual{
        transform:scale(.9);
        transform-origin:center;
    }

    .architecture-node{
        min-width:105px;
        padding:13px 14px;
    }

    .architecture-core{
        width:165px;
        height:165px;
    }

}

/* ==================================================
   ENTERPRISE — FINAL TYPOGRAPHY & SPACING TWEAKS
================================================== */


/* HERO H1 — slightly smaller */

.enterprise-hero-copy h1{
    max-width:780px;

    font-size:clamp(3.2rem,4.7vw,5.15rem);
    line-height:1.03;
    letter-spacing:-.04em;
}


/* WHAT I DO — give the section more room */

.enterprise-intro{
    padding-top:145px;
    padding-bottom:145px;
}

.enterprise-intro-grid{
    grid-template-columns:minmax(0,.82fr) minmax(0,1fr);

    gap:150px;

    align-items:start;
}


/* slightly narrower title block */

.enterprise-intro h2{
    max-width:580px;

    line-height:1.12;
}


/* give body copy a little more breathing room */

.enterprise-intro-copy{
    max-width:650px;
}

.enterprise-intro-copy p{
    margin-bottom:32px;

    line-height:2;
}


/* MOBILE */

@media(max-width:760px){

    .enterprise-hero-copy h1{
        font-size:clamp(2.9rem,12vw,4.1rem);
    }

    .enterprise-intro{
        padding-top:95px;
        padding-bottom:95px;
    }

    .enterprise-intro-grid{
        grid-template-columns:1fr;

        gap:55px;
    }

}

/* ==================================================
   ENTERPRISE — WHAT I DO LAYOUT FIX
================================================== */

.enterprise-intro{
    padding:120px 0 !important;
}

.enterprise-intro-grid{
    display:grid !important;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(0,.85fr) !important;

    gap:95px !important;

    align-items:center !important;
}


/* LEFT SIDE */

.enterprise-intro h2{
    max-width:760px !important;

    margin:22px 0 0 !important;

    font-size:clamp(2.8rem,3.8vw,4rem) !important;

    line-height:1.08 !important;
    letter-spacing:-.035em !important;
}

.enterprise-intro h2 span{
    display:inline !important;
    color:#3f8cff !important;
}


/* RIGHT SIDE */

.enterprise-intro-copy{
    max-width:590px !important;
}

.enterprise-intro-copy p{
    margin:0 0 28px !important;

    font-size:1.05rem !important;
    line-height:1.9 !important;
}


/* MOBILE */

@media(max-width:760px){

    .enterprise-intro{
        padding:90px 0 !important;
    }

    .enterprise-intro-grid{
        grid-template-columns:1fr !important;
        gap:50px !important;
    }

    .enterprise-intro h2{
        max-width:100% !important;

        font-size:clamp(2.5rem,11vw,3.6rem) !important;
    }

}

/* ==================================================
   DIGITAL PAGE
   Append to the END of css/style.css
================================================== */

.digital-page{
    --dig-bg:#070b18;
    --dig-bg2:#0d1022;
    --dig-purple:#9b5cff;
    --dig-purple-soft:#bd91ff;
    --dig-blue:#3f8cff;
    --dig-cyan:#75d8e8;

    background:var(--dig-bg);
}

.digital-container{
    width:min(1320px, calc(100% - 40px));
    margin:0 auto;
}

.digital-kicker{
    display:block;

    color:var(--dig-purple-soft);

    font-size:.7rem;
    font-weight:800;
    letter-spacing:.2em;
    text-transform:uppercase;
}


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

.digital-hero{
    min-height:860px;

    display:flex;
    align-items:center;

    padding:165px 0 105px;

    overflow:hidden;

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

    background:
        radial-gradient(circle at 79% 32%, rgba(155,92,255,.14), transparent 29%),
        radial-gradient(circle at 62% 55%, rgba(63,140,255,.07), transparent 30%),
        #070b18;
}

.digital-hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(470px,.92fr);
    gap:90px;
    align-items:center;
}

.digital-hero-copy h1{
    max-width:780px;

    margin:24px 0 28px;

    color:#fff;

    font-size:clamp(3.4rem,5vw,5.45rem);
    font-weight:800;
    line-height:1.02;
    letter-spacing:-.045em;
}

.digital-hero-copy h1 span{
    display:block;

    background:linear-gradient(90deg,#9b5cff,#5b7cff 62%,#75d8e8);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.digital-hero-lead{
    max-width:700px;
    margin:0;

    color:#aeb8cc;

    font-size:1.1rem;
    line-height:1.9;
}

.digital-hero-actions{
    display:flex;
    align-items:center;
    gap:28px;

    margin-top:38px;
}

.digital-text-link{
    display:inline-block;

    color:#be95ff;

    text-decoration:none;
    font-weight:600;

    transition:
        transform .25s ease,
        color .25s ease;
}

.digital-text-link:hover{
    transform:translateX(5px);
    color:#fff;
}

.digital-hero-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin-top:34px;
}

.digital-hero-tags span,
.digital-feature-tags span{
    padding:8px 14px;

    border:1px solid rgba(255,255,255,.09);
    border-radius:999px;

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

    color:#bec5d6;

    font-size:.76rem;

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

.digital-hero-tags span:hover{
    transform:translateY(-3px);

    border-color:rgba(189,145,255,.38);
    background:rgba(155,92,255,.065);

    color:#fff;
}


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

.digital-hero-visual{
    position:relative;

    width:min(100%,610px);
    aspect-ratio:1 / 1;

    margin-left:auto;
}

.digital-visual-glow{
    position:absolute;

    width:70%;
    height:70%;

    left:15%;
    top:13%;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(155,92,255,.18),
            rgba(63,140,255,.05) 45%,
            transparent 72%
        );

    filter:blur(16px);
}

.digital-preview-card{
    position:absolute;
    z-index:4;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.09);
    border-radius:26px;

    background:#0b1020;

    box-shadow:0 30px 70px rgba(0,0,0,.32);

    text-decoration:none;

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

.digital-preview-card:hover{
    border-color:rgba(189,145,255,.25);

    box-shadow:
        0 35px 80px rgba(0,0,0,.35),
        0 0 30px rgba(155,92,255,.06);
}

.digital-preview-main{
    width:72%;
    left:1%;
    top:9%;

    transform:rotate(-4deg);
}

.digital-preview-main:hover{
    transform:rotate(-2deg) translateY(-5px);
}

.digital-preview-secondary{
    width:58%;
    right:0;
    bottom:8%;

    transform:rotate(5deg);
}

.digital-preview-secondary:hover{
    transform:rotate(3deg) translateY(-5px);
}

.digital-preview-image{
    aspect-ratio:1.35 / 1;
    overflow:hidden;
    background:#080b12;
}

.digital-preview-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .5s ease;
}

.digital-preview-card:hover .digital-preview-image img{
    transform:scale(1.03);
}

.digital-preview-copy{
    padding:16px 18px 18px;
}

.digital-preview-copy span{
    display:block;
    margin-bottom:6px;

    color:#9e83d6;

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

.digital-preview-copy strong{
    color:#fff;

    font-size:.95rem;
}

.digital-orbit-label{
    position:absolute;
    z-index:7;

    min-width:105px;

    padding:13px 15px;

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

    background:rgba(9,14,29,.92);

    box-shadow:0 12px 30px rgba(0,0,0,.20);
}

.digital-orbit-label span{
    display:block;
    margin-bottom:5px;

    color:#6d617f;

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

.digital-orbit-label strong{
    color:#e1d8ef;
    font-size:.82rem;
}

.label-brand{
    right:3%;
    top:8%;
}

.label-web{
    left:0;
    bottom:16%;
}

.label-search{
    right:5%;
    bottom:0;
}


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

.digital-page .digital-intro{
    padding:120px 0;
    background:#0b1020;
}

.digital-page .digital-intro-grid{
    display:grid;
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    gap:95px;
    align-items:start;
}

.digital-page .digital-intro h2{
    max-width:760px;

    margin:22px 0 0;

    color:#fff;

    font-size:clamp(2.8rem,3.8vw,4rem);
    font-weight:700;
    line-height:1.08;
    letter-spacing:-.035em;
}

.digital-page .digital-intro h2 span{
    display:inline;

    color:#9b5cff;
}

.digital-page .digital-intro-copy{
    max-width:590px;
}

.digital-page .digital-intro-copy p{
    margin:0 0 28px;

    color:#a6b1c6;

    font-size:1.05rem;
    line-height:1.9;
}


/* =========================
   SHARED HEADING
========================= */

.digital-section-heading{
    max-width:860px;
    margin-bottom:65px;
}

.digital-section-heading-wide{
    max-width:960px;
}

.digital-section-heading h2{
    margin:22px 0 0;

    color:#fff;

    font-size:clamp(2.75rem,4vw,4.35rem);
    font-weight:700;
    line-height:1.08;
    letter-spacing:-.035em;
}

.digital-section-heading > p{
    max-width:730px;
    margin:24px 0 0;

    color:#929db2;

    line-height:1.85;
}


/* =========================
   PILLARS
========================= */

.digital-pillars{
    padding:125px 0;

    background:
        linear-gradient(180deg,#0b1020,#0d1022);

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

.digital-pillars-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.digital-pillar-card{
    min-height:440px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    padding:38px;

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

    background:
        radial-gradient(circle at 0% 0%, rgba(155,92,255,.10), transparent 38%),
        #101025;

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

.digital-pillar-card:nth-child(2){
    background:
        radial-gradient(circle at 100% 0%, rgba(63,140,255,.085), transparent 38%),
        #0b1124;
}

.digital-pillar-card:nth-child(3){
    background:
        radial-gradient(circle at 0% 100%, rgba(117,216,232,.07), transparent 38%),
        #09131d;
}

.digital-pillar-card:nth-child(4){
    background:
        radial-gradient(circle at 100% 100%, rgba(155,92,255,.08), transparent 38%),
        #111025;
}

.digital-pillar-card:hover{
    transform:translateY(-5px);

    border-color:rgba(189,145,255,.20);

    box-shadow:0 25px 60px rgba(0,0,0,.20);
}

.digital-pillar-index{
    color:#625c78;

    font-size:.68rem;
    font-weight:800;
    letter-spacing:.15em;
}

.digital-pillar-label{
    display:block;
    margin-bottom:14px;

    color:#bd91ff;

    font-size:.67rem;
    font-weight:800;
    letter-spacing:.18em;
}

.digital-pillar-card:nth-child(2) .digital-pillar-label{
    color:#75a9ff;
}

.digital-pillar-card:nth-child(3) .digital-pillar-label{
    color:#75d8e8;
}

.digital-pillar-card h3{
    margin:0 0 18px;

    color:#fff;

    font-size:2rem;
}

.digital-pillar-card p{
    max-width:560px;
    margin:0;

    color:#9fa8bb;

    line-height:1.8;
}

.digital-pillar-card ul{
    margin:28px 0 0;
    padding:0;

    list-style:none;
}

.digital-pillar-card li{
    padding:10px 0;

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

    color:#c5ccda;

    font-size:.88rem;
}


/* =========================
   CAPABILITIES
========================= */

.digital-capabilities{
    padding:125px 0;

    background:#070b18;

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

.digital-capability-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:1px;

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

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

.digital-capability-grid article{
    min-height:235px;

    padding:30px;

    background:#080d1b;

    transition:
        transform .3s ease,
        background .3s ease;
}

.digital-capability-grid article:hover{
    transform:translateY(-3px);

    background:
        linear-gradient(
            145deg,
            rgba(155,92,255,.04),
            rgba(63,140,255,.018)
        ),
        #090f1e;
}

.digital-capability-grid article > span{
    display:block;

    margin-bottom:46px;

    color:#5f5973;

    font-size:.64rem;
    font-weight:800;
    letter-spacing:.13em;
}

.digital-capability-grid h3{
    margin:0 0 12px;

    color:#fff;

    font-size:1.25rem;
}

.digital-capability-grid p{
    margin:0;

    color:#94a1b8;

    font-size:.9rem;
    line-height:1.72;
}


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

.digital-process-section{
    padding:125px 0;

    background:#0b1020;

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

.digital-process{
    max-width:1120px;
    margin-left:auto;

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

.digital-process-step{
    display:grid;
    grid-template-columns:95px 1fr;
    gap:25px;

    padding:34px 0;

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

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

.digital-process-step:hover{
    padding-left:10px;

    background:
        linear-gradient(
            90deg,
            rgba(155,92,255,.025),
            transparent 70%
        );
}

.digital-process-step > span{
    color:#625b78;

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

.digital-process-step strong{
    display:block;
    margin-bottom:8px;

    color:#fff;

    font-size:1.45rem;
}

.digital-process-step p{
    max-width:760px;
    margin:0;

    color:#9ba5b8;

    line-height:1.8;
}


/* =========================
   FEATURED WORK
========================= */

.digital-featured{
    padding:125px 0;

    background:
        radial-gradient(circle at 15% 30%, rgba(155,92,255,.055), transparent 26%),
        radial-gradient(circle at 85% 70%, rgba(63,140,255,.04), transparent 26%),
        #070b18;

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

.digital-featured-heading h2 span{
    color:#9b5cff;
}

.digital-featured-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}

.digital-feature-card{
    overflow:hidden;

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

    background:#0c1020;

    text-decoration:none;

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

.digital-feature-card:hover{
    transform:translateY(-6px);

    border-color:rgba(189,145,255,.20);

    box-shadow:
        0 28px 70px rgba(0,0,0,.28),
        0 0 30px rgba(155,92,255,.04);
}

.digital-feature-image{
    overflow:hidden;

    aspect-ratio:1.35 / 1;

    background:#060910;
}

.digital-feature-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .5s ease;
}

.digital-feature-card:hover .digital-feature-image img{
    transform:scale(1.03);
}

.digital-feature-content{
    padding:30px 30px 32px;
}

.digital-feature-content > span{
    display:block;
    margin-bottom:13px;

    color:#bd91ff;

    font-size:.64rem;
    font-weight:800;
    letter-spacing:.15em;
}

.digital-feature-content h3{
    margin:0 0 8px;

    color:#fff;

    font-size:2rem;
}

.digital-feature-content > p{
    margin:0;

    color:#a1abbd;

    font-size:1rem;
}

.digital-feature-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;

    margin:25px 0;
}

.digital-feature-content > strong{
    color:#e3e7ef;

    font-size:.85rem;
    font-weight:600;
}


/* =========================
   OTHER CREATIVE
========================= */

.digital-other{
    padding:125px 0;

    background:#0d1022;

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

.digital-other-grid{
    display:grid;
    grid-template-columns:minmax(0,.75fr) minmax(0,1fr);
    gap:110px;
    align-items:start;
}

.digital-other-title h2{
    margin:22px 0 22px;

    color:#fff;

    font-size:clamp(2.7rem,3.8vw,4.1rem);
    line-height:1.08;
    letter-spacing:-.03em;
}

.digital-other-title h2 span{
    display:block;

    color:#9b5cff;
}

.digital-other-title p{
    max-width:520px;
    margin:0;

    color:#98a3b6;

    line-height:1.85;
}

.digital-other-list{
    border-top:1px solid rgba(255,255,255,.08);
}

.digital-other-list > div{
    display:grid;
    grid-template-columns:52px 1fr auto;
    gap:20px;
    align-items:center;

    padding:24px 0;

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

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

.digital-other-list > div:hover{
    padding-left:10px;

    background:
        linear-gradient(
            90deg,
            rgba(155,92,255,.025),
            transparent 70%
        );
}

.digital-other-list > div > span{
    color:#615a75;

    font-size:.65rem;
    font-weight:800;
}

.digital-other-list strong{
    display:block;
    margin-bottom:4px;

    color:#e7ebf2;

    font-size:1rem;
}

.digital-other-list p{
    margin:0;

    color:#8f9aae;

    font-size:.88rem;
}

.digital-other-list em{
    color:#87729e;

    font-size:.62rem;
    font-style:normal;
    font-weight:800;
    letter-spacing:.13em;
}


/* =========================
   PRINCIPLE
========================= */

.digital-principle{
    padding:145px 20px;

    text-align:center;

    background:
        radial-gradient(circle at 50% 50%, rgba(155,92,255,.085), transparent 34%),
        #080d1b;
}

.digital-principle .digital-container{
    max-width:1080px;
}

.digital-principle blockquote{
    margin:25px auto 30px;

    color:#fff;

    font-size:clamp(3rem,5vw,5rem);
    font-weight:800;
    line-height:1.05;
    letter-spacing:-.04em;
}

.digital-principle blockquote span{
    display:block;

    background:linear-gradient(90deg,#9b5cff,#5d7cff,#75d8e8);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.digital-principle p{
    max-width:700px;
    margin:0 auto;

    color:#a1acbe;

    font-size:1.05rem;
    line-height:1.9;
}


/* =========================
   CTA
========================= */

.digital-cta{
    padding:40px 0 110px;

    background:#080d1b;
}

.digital-cta-card{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:60px;

    padding:65px 70px;

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

    background:
        radial-gradient(circle at 100% 0%, rgba(155,92,255,.12), transparent 30%),
        radial-gradient(circle at 0% 100%, rgba(63,140,255,.06), transparent 30%),
        #0c1020;
}

.digital-cta-card h2{
    max-width:720px;

    margin:18px 0 12px;

    color:#fff;

    font-size:clamp(2.4rem,3.5vw,3.7rem);
    line-height:1.1;
    letter-spacing:-.025em;
}

.digital-cta-card p{
    max-width:650px;
    margin:0;

    color:#9faabd;

    line-height:1.8;
}

.digital-cta-card .btn-primary{
    flex-shrink:0;
}


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

@media(max-width:1100px){

    .digital-hero-grid{
        grid-template-columns:1fr;
        gap:70px;
    }

    .digital-hero-visual{
        margin:0 auto;
    }

    .digital-capability-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .digital-other-grid{
        grid-template-columns:1fr;
        gap:55px;
    }

}

@media(max-width:760px){

    .digital-hero{
        min-height:0;
        padding:135px 0 90px;
    }

    .digital-hero-copy h1{
        font-size:clamp(2.9rem,12vw,4.15rem);
    }

    .digital-hero-actions{
        align-items:flex-start;
        flex-direction:column;
    }

    .digital-hero-visual{
        width:min(100%,520px);
    }

    .digital-intro,
    .digital-pillars,
    .digital-capabilities,
    .digital-process-section,
    .digital-featured,
    .digital-other{
        padding:90px 0;
    }

    .digital-intro-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .digital-pillars-grid{
        grid-template-columns:1fr;
    }

    .digital-capability-grid{
        grid-template-columns:1fr;
    }

    .digital-process-step{
        grid-template-columns:45px 1fr;
        gap:15px;
    }

    .digital-featured-grid{
        grid-template-columns:1fr;
    }

    .digital-principle{
        padding:105px 20px;
    }

    .digital-cta-card{
        align-items:flex-start;
        flex-direction:column;

        padding:50px 30px;
    }

}

@media(max-width:560px){

    .digital-preview-main{
        width:75%;
    }

    .digital-preview-secondary{
        width:62%;
    }

    .digital-orbit-label{
        min-width:94px;
        padding:11px 12px;
    }

    .digital-other-list > div{
        grid-template-columns:42px 1fr;
    }

    .digital-other-list em{
        display:none;
    }

}

.digital-hero-copy h1{
    line-height:1.06 !important;
}

/* DIGITAL HERO — proper line separation */

.digital-hero-copy h1{
    line-height:1 !important;
    overflow:visible !important;
}

.digital-hero-copy h1 .digital-hero-line-white{
    display:block !important;

    padding-bottom:.12em;

    background:none !important;

    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
}

.digital-hero-copy h1 .digital-hero-line-gradient{
    display:block !important;

    margin-top:-.04em;

    background:linear-gradient(
        90deg,
        #9b5cff,
        #5b7cff 62%,
        #75d8e8
    ) !important;

    -webkit-background-clip:text !important;
    background-clip:text !important;

    color:transparent !important;
    -webkit-text-fill-color:transparent !important;
}

/* DIGITAL HERO — FIX CLIPPED "g" IN GRADIENT TEXT */

.digital-hero-copy h1 .digital-hero-line-gradient{
    display:block !important;

    line-height:1.08 !important;

    padding-bottom:.14em !important;

    margin-bottom:-.14em !important;

    overflow:visible !important;
}

/* DIGITAL HERO — smaller H1 */

.digital-hero-copy h1{
    font-size:clamp(3rem,4.3vw,4.7rem) !important;
    line-height:1.06 !important;
}

/* ==================================================
   CONTACT PAGE — EN + SR
   Append to the END of css/style.css
================================================== */

.contact-page{--contact-bg:#070b18;--contact-bg2:#0b1020;--contact-blue:#3f8cff;--contact-purple:#9b5cff;background:var(--contact-bg);}
.contact-container{width:min(1320px,calc(100% - 40px));margin:0 auto;}
.contact-kicker{display:block;color:#7eaaff;font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;}

.contact-hero{min-height:850px;display:flex;align-items:center;padding:165px 0 105px;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.05);background:radial-gradient(circle at 75% 35%,rgba(63,140,255,.09),transparent 28%),radial-gradient(circle at 82% 62%,rgba(155,92,255,.10),transparent 29%),#070b18;}
.contact-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(460px,.88fr);gap:95px;align-items:center;}
.contact-hero-copy h1{max-width:760px;margin:24px 0 28px;color:#fff;font-size:clamp(3.45rem,5vw,5.35rem);font-weight:800;line-height:1.02;letter-spacing:-.045em;}
.contact-hero-copy h1 span{display:block;background:linear-gradient(90deg,#3f8cff,#7074ff 55%,#9b5cff);-webkit-background-clip:text;background-clip:text;color:transparent;}
.contact-lead{max-width:700px;margin:0;color:#aab5c9;font-size:1.08rem;line-height:1.9;}
.contact-hero-actions{display:flex;align-items:center;gap:28px;margin-top:38px;}
.contact-hero-actions .btn-primary{display:inline-flex;align-items:center;gap:10px;}
.contact-text-link{display:inline-block;color:#9d9fff;text-decoration:none;font-weight:600;transition:transform .25s ease,color .25s ease;}
.contact-text-link:hover{transform:translateX(5px);color:#fff;}
.contact-quick-info{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:630px;margin-top:46px;padding-top:25px;border-top:1px solid rgba(255,255,255,.07);}
.contact-quick-info span{display:block;margin-bottom:7px;color:#596781;font-size:.62rem;font-weight:800;letter-spacing:.14em;}
.contact-quick-info strong{color:#dfe6f1;font-size:.92rem;font-weight:550;}

.contact-visual{position:relative;width:min(100%,560px);aspect-ratio:1/1;margin-left:auto;}
.contact-visual-glow{position:absolute;width:48%;height:48%;border-radius:50%;filter:blur(20px);}
.contact-glow-blue{left:18%;top:25%;background:rgba(63,140,255,.12);}
.contact-glow-purple{right:14%;bottom:20%;background:rgba(155,92,255,.12);}
.contact-center-node{position:absolute;z-index:5;left:50%;top:50%;width:180px;height:180px;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(121,138,255,.27);border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(63,140,255,.13),transparent 50%),radial-gradient(circle at 70% 70%,rgba(155,92,255,.11),transparent 48%),#0b1326;box-shadow:0 0 0 18px rgba(85,111,255,.02),0 25px 60px rgba(0,0,0,.28);}
.contact-center-node span{margin-bottom:8px;color:#71819f;font-size:.58rem;font-weight:800;letter-spacing:.16em;}
.contact-center-node strong{color:#fff;font-size:1.45rem;}
.contact-node{position:absolute;z-index:6;min-width:165px;padding:17px 19px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:#0a1121;box-shadow:0 15px 35px rgba(0,0,0,.20);transition:transform .3s ease,border-color .3s ease,background .3s ease;}
.contact-node:hover{transform:translateY(-4px);border-color:rgba(121,138,255,.23);background:#0c1629;}
.contact-node span{display:block;margin-bottom:6px;color:#596782;font-size:.57rem;font-weight:800;letter-spacing:.13em;}
.contact-node strong{display:block;margin-bottom:4px;color:#eef2f8;font-size:.9rem;}
.contact-node small{color:#7e8ca5;font-size:.68rem;}
.contact-node-enterprise{left:1%;top:14%;}.contact-node-digital{right:0;top:15%;}.contact-node-collaboration{right:3%;bottom:10%;}
.contact-line{position:absolute;z-index:2;height:1px;background:linear-gradient(90deg,rgba(63,140,255,0),rgba(97,119,255,.34),rgba(155,92,255,0));transform-origin:left center;}
.contact-line-a{width:215px;left:26%;top:34%;transform:rotate(28deg);}.contact-line-b{width:200px;left:55%;top:35%;transform:rotate(-29deg);}.contact-line-c{width:200px;left:57%;top:59%;transform:rotate(31deg);}

.contact-section-heading{max-width:900px;margin-bottom:65px;}
.contact-section-heading h2{margin:22px 0 0;color:#fff;font-size:clamp(2.8rem,4vw,4.35rem);font-weight:700;line-height:1.08;letter-spacing:-.035em;}
.contact-section-heading h2 span{color:#9b5cff;}
.contact-section-heading p{max-width:690px;margin:23px 0 0;color:#96a2b7;line-height:1.85;}

.contact-topics{padding:125px 0;background:#0b1020;border-bottom:1px solid rgba(255,255,255,.05);}
.contact-topic-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.contact-topic-card{min-height:460px;padding:38px;border:1px solid rgba(255,255,255,.08);border-radius:28px;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;}
.contact-topic-card:hover{transform:translateY(-5px);box-shadow:0 25px 60px rgba(0,0,0,.22);}
.enterprise-topic{background:radial-gradient(circle at 0 0,rgba(63,140,255,.09),transparent 38%),#091120;}.enterprise-topic:hover{border-color:rgba(63,140,255,.22);}
.digital-topic{background:radial-gradient(circle at 100% 0,rgba(155,92,255,.11),transparent 38%),#111025;}.digital-topic:hover{border-color:rgba(155,92,255,.23);}
.contact-topic-icon{width:52px;height:52px;display:flex;align-items:center;justify-content:center;margin-bottom:55px;border:1px solid rgba(255,255,255,.08);border-radius:16px;color:#90b8ff;background:rgba(255,255,255,.02);}.digital-topic .contact-topic-icon{color:#c79fff;}
.contact-topic-label{display:block;margin-bottom:13px;color:#6fa8ff;font-size:.65rem;font-weight:800;letter-spacing:.17em;}.digital-topic .contact-topic-label{color:#bd91ff;}
.contact-topic-card h3{margin:0 0 17px;color:#fff;font-size:2rem;}.contact-topic-card>p{max-width:570px;margin:0;color:#9da8ba;line-height:1.82;}
.contact-topic-tags{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 34px;}.contact-topic-tags span{padding:8px 13px;border:1px solid rgba(255,255,255,.08);border-radius:999px;color:#b9c2d1;font-size:.73rem;}
.contact-topic-card>a{color:#e6ebf4;text-decoration:none;font-size:.86rem;font-weight:600;}

.contact-direct{padding:125px 0;background:#070b18;}
.contact-direct-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1fr);gap:115px;align-items:start;}
.contact-direct-copy h2{margin:22px 0 20px;color:#fff;font-size:clamp(2.75rem,3.8vw,4rem);line-height:1.08;letter-spacing:-.03em;}.contact-direct-copy p{max-width:520px;margin:0;color:#9ca7ba;line-height:1.85;}
.contact-direct-list{border-top:1px solid rgba(255,255,255,.08);}
.contact-method{display:grid;grid-template-columns:54px 1fr auto;gap:20px;align-items:center;min-height:100px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.08);text-decoration:none;transition:padding-left .3s ease,background .3s ease;}
a.contact-method:hover{padding-left:10px;background:linear-gradient(90deg,rgba(78,106,255,.03),transparent 70%);}
.contact-method-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.08);border-radius:13px;color:#8faeff;}
.contact-method span{display:block;margin-bottom:5px;color:#596782;font-size:.61rem;font-weight:800;letter-spacing:.14em;}.contact-method strong{color:#e5eaf3;font-size:1rem;font-weight:550;}.contact-method-arrow{color:#6a7892;font-size:.8rem;}

.contact-final{padding:30px 0 110px;background:#070b18;}
.contact-final-card{padding:85px 60px;border:1px solid rgba(255,255,255,.08);border-radius:32px;text-align:center;background:radial-gradient(circle at 18% 50%,rgba(63,140,255,.08),transparent 27%),radial-gradient(circle at 82% 50%,rgba(155,92,255,.10),transparent 27%),#0b1020;}
.contact-final-card h2{max-width:900px;margin:22px auto 20px;color:#fff;font-size:clamp(3rem,4.7vw,5rem);font-weight:800;line-height:1.05;letter-spacing:-.04em;}.contact-final-card h2 span{display:block;background:linear-gradient(90deg,#3f8cff,#7f70ff,#9b5cff);-webkit-background-clip:text;background-clip:text;color:transparent;}
.contact-final-card p{max-width:650px;margin:0 auto 32px;color:#a2adbf;line-height:1.85;}

.contact-footer{padding:34px 0;border-top:1px solid rgba(255,255,255,.06);background:#060a15;}.contact-footer-inner{display:flex;justify-content:space-between;align-items:center;gap:30px;}.contact-footer-brand{display:flex;align-items:center;gap:12px;text-decoration:none;}.contact-footer-brand img{width:30px;height:30px;}.contact-footer-brand span{color:#fff;font-weight:700;}.contact-footer-copy{display:flex;gap:28px;color:#67748a;font-size:.72rem;}

@media(max-width:1050px){.contact-hero-grid{grid-template-columns:1fr;gap:65px;}.contact-visual{margin:0 auto;}.contact-direct-grid{grid-template-columns:1fr;gap:55px;}}
@media(max-width:760px){.contact-hero{min-height:0;padding:135px 0 90px;}.contact-hero-copy h1{font-size:clamp(3rem,12vw,4.2rem);}.contact-hero-actions{flex-direction:column;align-items:flex-start;}.contact-quick-info{grid-template-columns:1fr;}.contact-topics,.contact-direct{padding:90px 0;}.contact-topic-grid{grid-template-columns:1fr;}.contact-topic-card{min-height:0;}.contact-final-card{padding:65px 28px;}.contact-footer-inner,.contact-footer-copy{flex-direction:column;align-items:flex-start;}}
@media(max-width:560px){.contact-visual{transform:scale(.9);transform-origin:center;}.contact-node{min-width:140px;padding:14px 15px;}.contact-center-node{width:160px;height:160px;}}

.contact-final-card h2 .contact-final-line-white{
    display:block !important;
    background:none !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
}

.contact-final-card h2 .contact-final-line-gradient{
    display:block !important;
    background:none !important;
    color:#7568ff !important;
    -webkit-text-fill-color:#7568ff !important;
}

/* ==================================================
   MOBILE NAVIGATION — FINAL SINGLE VERSION
================================================== */

@media (max-width:900px){

    html,
    body{
        width:100% !important;
        max-width:100% !important;
        overflow-x:hidden !important;
    }

    header{
        transform:none !important;
        animation:none !important;
        opacity:1 !important;
        width:100% !important;
        max-width:100% !important;
    }

    .navbar{
        position:relative !important;
        width:100% !important;
        max-width:100% !important;
        min-height:86px !important;
        padding:26px 34px !important;
        box-sizing:border-box !important;
    }

    .menu-toggle{
        display:flex !important;
        position:absolute !important;
        top:50% !important;
        right:34px !important;
        transform:translateY(-50%) !important;
        width:42px !important;
        height:42px !important;
        padding:0 !important;
        align-items:center !important;
        justify-content:center !important;
        background:none !important;
        border:0 !important;
        color:#fff !important;
        font-size:2.2rem !important;
        line-height:1 !important;
        cursor:pointer !important;
        z-index:3001 !important;
    }

    .navbar .lang-switch{
        display:flex !important;
        position:absolute !important;
        top:50% !important;
        right:92px !important;
        transform:translateY(-50%) !important;
        width:42px !important;
        height:42px !important;
        padding:0 !important;
        align-items:center !important;
        justify-content:center !important;
        border:1px solid rgba(255,255,255,.28) !important;
        border-radius:50% !important;
        background:rgba(255,255,255,.04) !important;
        color:#fff !important;
        text-decoration:none !important;
        font-size:.78rem !important;
        font-weight:800 !important;
        letter-spacing:.08em !important;
        line-height:1 !important;
        z-index:3001 !important;
    }

    .btn-outline{
        display:none !important;
    }

    /* Closed menu is removed from rendering, so it cannot widen the page. */
    .nav-links{
        display:none !important;
    }

    /* Open mobile drawer. */
    .nav-links.active{
        display:flex !important;
        position:fixed !important;
        top:0 !important;
        right:0 !important;
        bottom:0 !important;
        left:auto !important;
        width:min(320px,82vw) !important;
        max-width:82vw !important;
        height:100dvh !important;
        margin:0 !important;
        padding:100px 28px 50px !important;
        box-sizing:border-box !important;
        flex-direction:column !important;
        flex-wrap:nowrap !important;
        justify-content:center !important;
        align-items:center !important;
        gap:30px !important;
        list-style:none !important;
        background:#0b1020 !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        z-index:3000 !important;
    }

    .nav-links.active > li{
        display:block !important;
        flex:0 0 auto !important;
        width:100% !important;
        margin:0 !important;
        padding:0 !important;
        text-align:center !important;
    }

    .nav-links.active > li > a{
        display:block !important;
        width:100% !important;
        padding:4px 0 !important;
        color:#fff !important;
        font-size:1.15rem !important;
        line-height:1.45 !important;
        text-decoration:none !important;
        white-space:nowrap !important;
    }
}

/* ==================================================
   HOME HERO — MOBILE CLEAN VERSION
================================================== */

@media (max-width:900px){

    /* Floating icons completely off on mobile */
    .hero-icons{
        display:none !important;
    }

    .hero{
        min-height:100svh !important;

        padding:125px 24px 55px !important;

        background:
            linear-gradient(
                rgba(5,8,20,.64),
                rgba(5,8,20,.82)
            ),
            url("../images/hero-mobile.jpg") !important;

        background-size:cover !important;
        background-repeat:no-repeat !important;
        background-position:center center !important;

        align-items:center !important;
    }

    .hero-content{
        width:100% !important;
        max-width:100% !important;
    }

    .hero-text{
        transform:none !important;
        margin:0 !important;
    }

    .hero h1{
        font-size:clamp(2.65rem,11vw,3.25rem) !important;
        line-height:1.04 !important;
        max-width:390px !important;
        margin:0 auto 26px !important;
    }

    .hero p{
        max-width:360px !important;
        margin:0 auto 38px !important;

        font-size:1.05rem !important;
        line-height:1.6 !important;
    }

    .buttons{
        gap:16px !important;
    }
}

/* ABOUT HERO — MOBILE H1 FIX */

@media (max-width:760px){

    .about-hero-copy h1{
        font-size:clamp(2.65rem,11vw,3.45rem) !important;
        line-height:1.08 !important;
        letter-spacing:-0.03em !important;

        max-width:92% !important;
        margin-bottom:26px !important;
    }

}

/* ==================================================
   CONTACT — MOBILE FINAL FIX
================================================== */

@media (max-width:760px){

    /* HERO TITLE */
    .contact-hero-copy h1{
        font-size:clamp(2.75rem,11vw,3.45rem) !important;
        line-height:1.10 !important;
        letter-spacing:-0.035em !important;

        overflow:visible !important;
    }

    /* Gradient / second line - protect descenders (g, y, p...) */
    .contact-hero-copy h1 span,
    .contact-final-card h2 span,
    .contact-final-line-white,
    .contact-final-line-gradient{
        line-height:1.12 !important;
        padding-bottom:.10em !important;
        margin-bottom:-.10em !important;
        overflow:visible !important;
    }


    /* HERO CTA */
    .contact-hero-actions .btn-primary{
        width:215px !important;
        min-height:58px !important;

        padding:0 22px !important;

        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;

        gap:10px !important;

        font-size:1rem !important;
        white-space:nowrap !important;
    }


    /* FINAL CTA HEADING */
    .contact-final-card h2{
        font-size:clamp(2.45rem,10vw,3.25rem) !important;
        line-height:1.10 !important;

        max-width:100% !important;
        overflow:visible !important;
    }


    /* WRITE TO ME */
    .contact-final-card .btn-primary{
        width:210px !important;
        min-height:58px !important;

        padding:0 24px !important;

        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;

        font-size:1rem !important;
        white-space:nowrap !important;
    }

}

/* ==================================================
   PREMIUM BATHROOM / CERAMICS RETAIL PROJECT
   Append to the END of style.css
================================================== */

.retail-case{
    background:#070b18;
}


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

.retail-case .retail-hero{
    background:
        radial-gradient(circle at 82% 20%, rgba(155,92,255,.07), transparent 30%),
        radial-gradient(circle at 70% 62%, rgba(63,140,255,.06), transparent 34%),
        #070b18;
}

.retail-case .case-hero-content h1{
    font-size:clamp(3.35rem,4.7vw,5.15rem);
    line-height:1.03;
    letter-spacing:-.04em;
}

.retail-hero-image{
    background:#0b1020;
}

.retail-hero-image img{
    object-fit:contain !important;
    background:#0b1020;
}


/* =========================
   SCOPE GRID
========================= */

.retail-scope-grid article{
    min-height:260px;
}


/* =========================
   VISUAL APPROACH
========================= */

.retail-approach-grid{
    display:grid;
    grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
    gap:85px;
    align-items:center;
}

.retail-approach-copy h2{
    margin:20px 0 26px;

    color:#fff;

    font-size:clamp(2.5rem,3.5vw,3.75rem);
    font-weight:650;
    line-height:1.12;
    letter-spacing:-.03em;
}

.retail-approach-copy p{
    margin:0 0 20px;

    color:#9ca7ba;

    line-height:1.85;
}

.retail-approach-image{
    overflow:hidden;

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

    background:#0a1020;

    box-shadow:0 28px 70px rgba(0,0,0,.28);
}

.retail-approach-image img{
    display:block;

    width:100%;
    height:100%;

    max-height:720px;

    object-fit:contain;

    background:#0a1020;
}


/* =========================
   GALLERY
========================= */

.retail-gallery-section{
    overflow:hidden;
}

.retail-gallery{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px;

    margin-top:70px;
}

.retail-gallery-card{
    margin:0;

    overflow:hidden;

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

    background:#0a1020;

    box-shadow:0 24px 60px rgba(0,0,0,.22);

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

.retail-gallery-card:hover{
    transform:translateY(-5px);

    border-color:rgba(131,108,255,.24);

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

.retail-gallery-image{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    aspect-ratio:4 / 3;

    padding:18px;

    background:
        radial-gradient(circle at 50% 20%,rgba(93,112,255,.045),transparent 38%),
        #080e1b;
}

.retail-gallery-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;
}

.retail-gallery-card figcaption{
    display:flex;
    gap:18px;
    align-items:flex-start;

    padding:22px 24px 24px;

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

.retail-gallery-card figcaption > span{
    flex:0 0 auto;

    color:#667a9f;

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

.retail-gallery-card figcaption strong{
    display:block;

    margin-bottom:5px;

    color:#fff;

    font-size:.95rem;
}

.retail-gallery-card figcaption small{
    display:block;

    color:#7f8ba1;

    font-size:.75rem;
    line-height:1.5;
}

.retail-gallery-wide{
    grid-column:1 / -1;

    max-width:920px;
    width:100%;

    justify-self:center;
}

.retail-gallery-wide .retail-gallery-image{
    aspect-ratio:16 / 10;
}


/* =========================
   SMALL HOVER DETAILS
========================= */

.retail-case .case-tags span,
.retail-case .case-contribution-grid > div,
.retail-case .case-info-card,
.retail-case .case-tech-grid article{
    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease;
}

.retail-case .case-info-card:hover,
.retail-case .case-tech-grid article:hover,
.retail-case .case-contribution-grid > div:hover{
    transform:translateY(-4px);
}


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

@media(max-width:1050px){

    .retail-approach-grid{
        grid-template-columns:1fr;
        gap:55px;
    }

    .retail-approach-image{
        max-width:760px;
        width:100%;

        margin:0 auto;
    }

}

@media(max-width:760px){

    .retail-case .case-hero-content h1{
        font-size:clamp(2.5rem,10.5vw,3.35rem) !important;
        line-height:1.07 !important;
    }

    .retail-case .case-hero-content h2{
        font-size:1.35rem !important;
        line-height:1.35 !important;
    }

    .retail-hero-image{
        margin-top:12px;
    }

    .retail-hero-image img{
        object-fit:contain !important;
    }

    .retail-scope-grid article{
        min-height:0;
    }

    .retail-approach-copy h2{
        font-size:clamp(2.15rem,9vw,3rem);
    }

    .retail-gallery{
        grid-template-columns:1fr;
        gap:22px;

        margin-top:45px;
    }

    .retail-gallery-wide{
        grid-column:auto;
        max-width:none;
    }

    .retail-gallery-image,
    .retail-gallery-wide .retail-gallery-image{
        aspect-ratio:4 / 3;
        padding:10px;
    }

    .retail-gallery-card figcaption{
        padding:18px 18px 20px;
    }

}

@media(max-width:480px){

    .retail-gallery-image,
    .retail-gallery-wide .retail-gallery-image{
        aspect-ratio:1 / 1;
    }

}

/* RETAIL PROJECT — 3 x 2 SCOPE GRID */

.retail-case .retail-scope-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

@media(max-width:1050px){

    .retail-case .retail-scope-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

}

@media(max-width:760px){

    .retail-case .retail-scope-grid{
        grid-template-columns:1fr !important;
    }

}

/* HOME — ENTERPRISE INTRO CLASS CONFLICT FIX */

#enterprise p.enterprise-intro{
    max-width:760px !important;

    margin:0 auto 80px !important;
    padding:0 !important;

    background:transparent !important;

    text-align:center !important;

    color:var(--text2) !important;

    font-size:1.15rem !important;
    line-height:1.9 !important;
}

/* ==================================================
   ENTERPRISE PAGE — INTRO CLASS CONFLICT FIX
================================================== */

body.enterprise-page section.enterprise-intro{
    width:100% !important;
    max-width:none !important;

    margin:0 !important;

    padding:120px 0 !important;

    background:#0b1020 !important;

    text-align:left !important;
}

/* ==================================================
   DIGITAL PAGE — INTRO CLASS CONFLICT FIX
================================================== */

body.digital-page section.digital-intro{
    width:100% !important;
    max-width:none !important;

    margin:0 !important;

    padding:120px 0 !important;

    background:#0b1020 !important;

    color:inherit !important;
    font-size:inherit !important;
    line-height:normal !important;
    text-align:left !important;
}

/* ==================================================
   DIGITAL PAGE — THREE FEATURED PROJECTS
================================================== */


/* =========================
   HERO — THIRD PROJECT
========================= */

.digital-page .digital-preview-main{
    width:62% !important;
    left:0 !important;
    top:5% !important;
    z-index:4;

    transform:rotate(-4deg);
}

.digital-page .digital-preview-secondary{
    width:53% !important;
    right:0 !important;
    bottom:8% !important;
    z-index:5;

    transform:rotate(4deg);
}

.digital-page .digital-preview-tertiary{
    width:46%;

    left:7%;
    bottom:0;

    z-index:6;

    transform:rotate(-2deg);
}

.digital-page .digital-preview-tertiary:hover{
    transform:rotate(-1deg) translateY(-5px);
}


/* Retail image needs a slightly better crop */
.digital-page .digital-preview-tertiary .digital-preview-image img{
    object-position:center 25%;
}


/* Orbit labels — slightly repositioned */
.digital-page .label-brand{
    right:1%;
    top:5%;
}

.digital-page .label-web{
    left:-1%;
    bottom:20%;
}

.digital-page .label-search{
    right:2%;
    bottom:-2%;
}


/* =========================
   FEATURED WORK — 3 COLUMNS
========================= */

.digital-page .digital-featured-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:24px !important;
}

.digital-page .digital-feature-content h3{
    font-size:1.65rem;
}


/* TABLET */
@media(max-width:1100px){

    .digital-page .digital-featured-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

}


/* MOBILE */
@media(max-width:760px){

    .digital-page .digital-featured-grid{
        grid-template-columns:1fr !important;
    }

    .digital-page .digital-preview-main{
        width:66% !important;
    }

    .digital-page .digital-preview-secondary{
        width:55% !important;
    }

    .digital-page .digital-preview-tertiary{
        width:48%;
        left:5%;
    }

}

/* ==================================================
   DIGITAL PAGE — INTERACTIONS V2
================================================== */

.digital-page .digital-feature-card{
    transform-style:preserve-3d;

    transition:
        transform .22s ease-out,
        border-color .3s ease,
        box-shadow .3s ease;
}

.digital-page .digital-feature-card:hover{
    border-color:rgba(155,92,255,.40);

    box-shadow:
        0 38px 90px rgba(0,0,0,.38),
        0 0 42px rgba(125,80,255,.12);
}


/* HERO CARDS */

.digital-page .digital-preview-card{
    transition:
        transform .18s ease-out,
        box-shadow .3s ease,
        border-color .3s ease;
}


/* SCROLL REVEAL */

.digital-page .digital-reveal{
    opacity:0;

    transform:translateY(42px) scale(.98);

    transition:
        opacity .75s ease,
        transform .75s cubic-bezier(.2,.7,.2,1);
}

.digital-page .digital-reveal.is-visible{
    opacity:1;

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


/* MOBILE */

@media(max-width:760px){

    .digital-page .digital-feature-card{
        transform:none !important;
    }

}


/* ACCESSIBILITY */

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

    .digital-page .digital-reveal{
        opacity:1 !important;
        transform:none !important;
    }

}

/* ==================================================
   DIGITAL HERO — MOUSE INTERACTION
================================================== */

.digital-page .digital-hero-visual{
    --mouse-x:50%;
    --mouse-y:50%;
}


/* svetlosni spot prati miš */
.digital-page .digital-hero-visual::after{
    content:"";

    position:absolute;
    inset:0;

    z-index:3;

    pointer-events:none;

    opacity:0;

    background:
        radial-gradient(
            180px circle at var(--mouse-x) var(--mouse-y),
            rgba(139,92,246,.22),
            rgba(63,140,255,.10) 35%,
            transparent 70%
        );

    transition:opacity .25s ease;
}


.digital-page .digital-hero-visual:hover::after{
    opacity:1;
}


.digital-page .digital-preview-card{
    will-change:transform;

    transition:
        transform .15s ease-out,
        box-shadow .3s ease !important;
}

/* ==================================================
   DIGITAL FEATURED CARDS — MOUSE EFFECT
================================================== */

.digital-page .digital-feature-card{
    position:relative;
    transform-style:preserve-3d;
    will-change:transform;

    transition:
        transform .16s ease-out,
        box-shadow .25s ease,
        border-color .25s ease !important;
}

.digital-page .digital-feature-card::after{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;
    z-index:5;

    opacity:0;

    background:
        radial-gradient(
            260px circle at var(--card-x, 50%) var(--card-y, 50%),
            rgba(155,92,255,.18),
            rgba(63,140,255,.07) 38%,
            transparent 70%
        );

    transition:opacity .25s ease;
}

.digital-page .digital-feature-card:hover::after{
    opacity:1;
}

/* ==================================================
   DIGITAL HERO — FINAL CARD POSITION TWEAK
================================================== */

/* Strong & Empowered — malo više napred i vidljivije */
.digital-page .digital-preview-main{
    width:62% !important;
    left:5% !important;   /* bilo 1% */
    top:-1% !important;   /* bilo 3% */
    z-index:5 !important;
}

/* ICT ostaje pozadi desno */
.digital-page .digital-preview-secondary{
    width:53% !important;
    right:0 !important;
    bottom:7% !important;
    z-index:4 !important;
}

/* Retail — napred, ali malo niže */
.digital-page .digital-preview-tertiary{
    width:45% !important;
    left:8% !important;
    bottom:-2% !important;
    z-index:6 !important;
}


/* 01 BRAND — približi ga Strong kartici */
.digital-page .label-brand{
    left:65% !important;  /* prati karticu */
    right:auto !important;
    top:6% !important;
    z-index:8 !important;
}


/* ostale dve oznake */
.digital-page .label-web{
    left:0 !important;
    bottom:18% !important;
    z-index:8 !important;
}

.digital-page .label-search{
    right:2% !important;
    bottom:-1% !important;
    z-index:8 !important;
}

/* CONTACT H1 FIX */
.contact-hero h1,
.contact-hero-title,
.contact-hero-copy h1 {
  line-height: 1.15;
  padding-bottom: 0.12em;
  overflow: visible;
}

.contact-hero h1 span,
.contact-hero-title span,
.contact-hero-copy h1 span {
  display: inline-block;
  padding-bottom: 0.08em;
  overflow: visible;
}

.case-next-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:28px;
    margin-top:24px;
    flex-wrap:wrap;
  }
  
  .case-secondary-link{
    display:inline-flex;
    align-items:center;
    padding:12px 18px;
    border:1px solid rgba(255,255,255,0.16);
    border-radius:999px;
    color:#b9c3d8;
    text-decoration:none;
    font-weight:600;
    transition:0.25s ease;
  }
  
  .case-secondary-link:hover{
    color:#fff;
    border-color:#6D28D9;
    background:rgba(109,40,217,0.10);
    transform:translateY(-1px);
  }

  /* =========================================================
   MOBILE FINAL FIXES — Enterprise / Digital / Projects
========================================================= */

@media (max-width: 760px) {

    /* =========================
       ENTERPRISE HERO BUTTONS
    ========================= */
  
    body.enterprise-page .enterprise-hero-actions{
      display:flex !important;
      flex-direction:column !important;
      align-items:flex-start !important;
      gap:20px !important;
    }
  
    body.enterprise-page .enterprise-hero-actions .btn-primary{
      display:inline-flex !important;
      align-items:center !important;
      justify-content:center !important;
      width:auto !important;
      min-width:220px !important;
      padding:15px 24px !important;
      white-space:nowrap !important;
      text-align:center !important;
    }
  
  
    /* =========================
       DIGITAL — MY APPROACH
    ========================= */
  
    body.digital-page .digital-intro-grid{
      display:grid !important;
      grid-template-columns:1fr !important;
      gap:36px !important;
    }
  
    body.digital-page .digital-intro-grid > div{
      width:100% !important;
      max-width:none !important;
    }
  
    body.digital-page .digital-intro h2{
      max-width:100% !important;
      font-size:clamp(2.8rem, 13vw, 4rem) !important;
      line-height:0.98 !important;
    }
  
    body.digital-page .digital-intro-copy{
      width:100% !important;
      max-width:none !important;
    }
  
    body.digital-page .digital-intro-copy p{
      width:100% !important;
      max-width:none !important;
      font-size:1.05rem !important;
      line-height:1.8 !important;
    }
  
  
    /* =========================
       PROJECTS FINAL CTA BUTTON
    ========================= */
  
    .projects-page-cta-inner .btn-primary{
      display:inline-flex !important;
      align-items:center !important;
      justify-content:center !important;
      width:auto !important;
      min-width:145px !important;
      padding:15px 28px !important;
      white-space:nowrap !important;
      text-align:center !important;
    }
  
  }