:root{
    --idem-navy:#06152f;
    --idem-navy-2:#081d3e;
    --idem-blue:#0b2a58;
    --idem-blue-light:#1677ff;

    --idem-orange:#ff7417;
    --idem-orange-hover:#ff8b36;

    --idem-white:#ffffff;
    --idem-light:#f7f9fc;
    --idem-border:#e8edf4;
    --idem-text:#15233c;
    --idem-muted:#65748b;

    --container:1440px;
}


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

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

html{
    scroll-behavior:smooth;
}

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

    color:var(--idem-text);

    background:#ffffff;

    overflow-x:hidden;
}

body.menu-open{
    overflow:hidden;
}

a{
    text-decoration:none;
}

button{
    font-family:inherit;
}


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

.idem-navbar{
    position:absolute;

    top:0;
    left:0;

    width:100%;

    z-index:1000;

    transition:.35s ease;
}

.idem-navbar.scrolled{
    position:fixed;

    background:rgba(5,18,40,.94);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:0 10px 40px rgba(0,0,0,.15);
}

.nav-inner{
    width:min(
        var(--container),
        calc(100% - 60px)
    );

    min-height:92px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:28px;
}

.brand{
    display:flex;

    align-items:center;

    flex-shrink:0;
}

.brand img{
    width:180px;

    height:auto;

    display:block;
}

.main-menu{
    display:flex;

    align-items:center;

    justify-content:center;

    gap:27px;

    list-style:none;

    margin-left:auto;

    margin-right:auto;
}

.main-menu a{
    position:relative;

    color:#ffffff;

    font-size:14px;

    font-weight:600;

    transition:.25s ease;
}

.main-menu a:hover{
    color:var(--idem-orange);
}

.main-menu a.active::after{
    content:"";

    position:absolute;

    left:0;

    bottom:-12px;

    width:100%;

    height:2px;

    background:var(--idem-orange);

    border-radius:20px;
}

.nav-actions{
    display:flex;

    align-items:center;

    gap:12px;

    flex-shrink:0;
}

.btn-login,
.btn-contact{
    min-height:46px;

    padding:0 19px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    border-radius:9px;

    font-size:13px;

    font-weight:700;

    transition:.25s ease;
}

.btn-login{
    color:#ffffff;

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

.btn-login:hover{
    background:#ffffff;

    color:var(--idem-navy);
}

.btn-contact{
    color:#ffffff;

    background:var(--idem-orange);

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

    box-shadow:0 12px 30px rgba(255,116,23,.18);
}

.btn-contact:hover{
    background:var(--idem-orange-hover);

    border-color:var(--idem-orange-hover);

    transform:translateY(-2px);
}

.menu-toggle{
    display:none;

    width:46px;

    height:46px;

    align-items:center;

    justify-content:center;

    border-radius:8px;

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

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

    color:#ffffff;

    font-size:25px;

    cursor:pointer;
}


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

.hero{
    min-height:780px;

    position:relative;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 75% 40%,
            rgba(0,113,255,.18),
            transparent 29%
        ),

        radial-gradient(
            circle at 96% 35%,
            rgba(255,116,23,.08),
            transparent 16%
        ),

        linear-gradient(
            115deg,
            #06162f 0%,
            #071a38 48%,
            #031128 100%
        );
}

.hero::before{
    content:"";

    position:absolute;

    inset:0;

    opacity:.22;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size:52px 52px;
}

.hero-container{
    position:relative;

    z-index:3;

    width:min(
        var(--container),
        calc(100% - 60px)
    );

    margin:auto;

    padding-top:125px;

    padding-bottom:75px;

    display:grid;

    grid-template-columns:48% 52%;

    align-items:center;
}

.hero-content{
    max-width:690px;

    animation:heroContent .8s ease both;
}

@keyframes heroContent{

    from{
        opacity:0;

        transform:translateX(-30px);
    }

    to{
        opacity:1;

        transform:none;
    }

}

.hero-eyebrow{
    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:24px;

    color:#ffffff;

    font-size:13px;

    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;
}

.hero-eyebrow::before{
    content:"";

    width:28px;

    height:3px;

    background:var(--idem-orange);

    border-radius:10px;
}

.hero h1{
    color:#ffffff;

    font-size:clamp(48px,5vw,76px);

    line-height:1.03;

    font-weight:800;

    letter-spacing:-3px;

    margin-bottom:28px;
}

.hero h1 span{
    color:var(--idem-orange);
}

.hero-description{
    max-width:620px;

    color:#d6e1f0;

    font-size:18px;

    line-height:1.8;

    margin-bottom:34px;
}

.hero-buttons{
    display:flex;

    flex-wrap:wrap;

    gap:16px;
}

.hero-btn-primary,
.hero-btn-secondary{
    min-height:56px;

    padding:0 26px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    border-radius:9px;

    font-size:15px;

    font-weight:700;

    transition:.3s ease;
}

.hero-btn-primary{
    background:var(--idem-orange);

    color:#ffffff;

    box-shadow:0 15px 35px rgba(255,116,23,.20);
}

.hero-btn-primary:hover{
    background:var(--idem-orange-hover);

    transform:translateY(-3px);
}

.hero-btn-secondary{
    border:1px solid rgba(255,255,255,.55);

    color:#ffffff;

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

.hero-btn-secondary:hover{
    background:#ffffff;

    color:var(--idem-navy);

    transform:translateY(-3px);
}

.hero-features{
    margin-top:48px;

    display:flex;

    flex-wrap:wrap;

    gap:28px;
}

.hero-feature{
    display:flex;

    align-items:center;

    gap:10px;

    color:#e6eef9;

    font-size:13px;

    font-weight:600;
}

.hero-feature-icon{
    width:34px;

    height:34px;

    flex-shrink:0;

    border:1px solid rgba(255,116,23,.55);

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--idem-orange);

    background:rgba(255,116,23,.04);
}


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

.hero-visual{
    min-height:590px;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:transform .15s ease-out;
}

.tech-orbit{
    position:absolute;

    width:580px;

    height:580px;

    border:1px solid rgba(38,144,255,.18);

    border-radius:50%;
}

.tech-orbit::before,
.tech-orbit::after{
    content:"";

    position:absolute;

    border-radius:50%;

    border:1px solid rgba(38,144,255,.14);
}

.tech-orbit::before{
    inset:55px;
}

.tech-orbit::after{
    inset:115px;
}

.node{
    position:absolute;

    width:9px;

    height:9px;

    border-radius:50%;

    background:#49c0ff;

    box-shadow:
        0 0 8px #29aaff,
        0 0 20px rgba(41,170,255,.95);
}

.n1{top:20%;left:11%;}
.n2{top:8%;right:23%;}
.n3{top:46%;right:2%;}
.n4{bottom:15%;right:19%;}
.n5{bottom:12%;left:14%;}


/* LAPTOP */

.laptop{
    width:510px;

    position:relative;

    z-index:5;

    margin-top:90px;
}

.laptop-screen{
    height:310px;

    background:#08111e;

    border:8px solid #1d2430;

    border-bottom-width:14px;

    border-radius:18px 18px 8px 8px;

    overflow:hidden;

    box-shadow:0 30px 75px rgba(0,0,0,.45);
}

.screen-ui{
    height:100%;

    background:#f7f9fc;

    display:grid;

    grid-template-columns:80px 1fr;
}

.screen-sidebar{
    background:#09254b;

    padding:22px 12px;
}

.screen-mini-logo{
    width:43px;

    height:9px;

    background:var(--idem-orange);

    border-radius:10px;

    margin-bottom:28px;
}

.screen-sidebar span{
    display:block;

    width:42px;

    height:6px;

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

    border-radius:10px;

    margin-bottom:18px;
}

.screen-main{
    padding:23px;
}

.screen-title{
    width:130px;

    height:12px;

    background:#16243c;

    border-radius:15px;

    margin-bottom:20px;
}

.screen-stats{
    display:grid;

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

    gap:10px;

    margin-bottom:16px;
}

.screen-stat{
    height:65px;

    background:#ffffff;

    border-radius:9px;

    box-shadow:0 3px 12px rgba(29,57,88,.08);
}

.screen-chart{
    height:130px;

    background:#ffffff;

    border-radius:10px;

    box-shadow:0 3px 12px rgba(29,57,88,.08);
}

.laptop-base{
    width:112%;

    height:18px;

    margin-left:-6%;

    background:linear-gradient(#b7bec8,#505967);

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


/* PHONE */

.phone{
    position:absolute;

    z-index:7;

    right:5px;

    bottom:55px;

    width:135px;

    height:285px;

    border:6px solid #171c25;

    border-radius:27px;

    background:#081b38;

    box-shadow:0 25px 50px rgba(0,0,0,.55);

    overflow:hidden;

    animation:phoneFloat 5s ease-in-out infinite;
}

@keyframes phoneFloat{

    0%,
    100%{
        transform:translateY(0) rotate(2deg);
    }

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

}

.phone-notch{
    width:52px;

    height:13px;

    background:#171c25;

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

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

.phone-content{
    padding:31px 12px;
}

.phone-logo{
    width:30px;

    height:5px;

    background:var(--idem-orange);

    border-radius:10px;

    margin-bottom:13px;
}

.phone-heading{
    width:87px;

    height:9px;

    background:#ffffff;

    border-radius:10px;

    margin-bottom:9px;
}

.phone-copy{
    width:70px;

    height:5px;

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

    border-radius:10px;

    margin-bottom:18px;
}

.phone-card{
    height:58px;

    border-radius:8px;

    margin-bottom:10px;

    background:linear-gradient(
        135deg,
        rgba(17,104,220,.5),
        rgba(37,140,255,.12)
    );
}

.phone-bars{
    height:80px;

    display:flex;

    gap:5px;

    align-items:flex-end;

    padding:12px;

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

    border-radius:8px;
}

.phone-bars span{
    flex:1;

    background:#2688ff;

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

.phone-bars span:nth-child(1){height:30%;}
.phone-bars span:nth-child(2){height:55%;}
.phone-bars span:nth-child(3){height:40%;}
.phone-bars span:nth-child(4){height:78%;}
.phone-bars span:nth-child(5){height:62%;}


/* FLOATING CARDS */

.float-card{
    position:absolute;

    z-index:9;

    width:125px;

    min-height:95px;

    padding:15px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:#ffffff;

    background:linear-gradient(
        145deg,
        rgba(14,48,90,.94),
        rgba(4,21,48,.94)
    );

    border:1px solid rgba(39,135,255,.32);

    border-radius:15px;

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

    backdrop-filter:blur(10px);

    animation:floatCard 5s ease-in-out infinite;
}

@keyframes floatCard{

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

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

}

.float-card i{
    font-size:30px;

    margin-bottom:9px;
}

.float-card span{
    font-size:11px;

    font-weight:700;

    line-height:1.35;
}

.card-web{
    top:10px;

    left:48%;

    color:#54a7ff;
}

.card-software{
    left:3%;

    top:145px;

    color:#5aa7ff;
}

.card-marketing{
    right:1%;

    top:115px;

    color:var(--idem-orange);
}

.card-auto{
    left:-1%;

    bottom:150px;

    color:#73d7ff;
}

.card-branding{
    right:-1%;

    bottom:155px;

    color:var(--idem-orange);
}

.card-cloud{
    left:50%;

    bottom:3px;

    color:#78b9ff;
}


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

.section{
    padding:95px 0;
}

.section-container{
    width:min(
        var(--container),
        calc(100% - 60px)
    );

    margin:auto;
}

.section-heading{
    text-align:center;

    margin-bottom:52px;
}

.section-heading h2,
.products-heading h2,
.portfolio-header h2{
    color:var(--idem-navy);

    font-size:clamp(34px,4vw,50px);

    line-height:1.12;

    letter-spacing:-2px;

    margin-bottom:16px;
}

.section-heading h2 span,
.products-heading h2 span,
.portfolio-header h2 span{
    color:var(--idem-orange);
}

.section-heading p,
.products-heading p,
.portfolio-header p{
    color:var(--idem-muted);

    font-size:16px;

    line-height:1.8;
}

.section-kicker{
    display:inline-flex;

    align-items:center;

    gap:10px;

    font-size:12px;

    font-weight:800;

    letter-spacing:.14em;

    margin-bottom:18px;
}

.section-kicker::before{
    content:"";

    width:24px;

    height:2px;

    background:var(--idem-orange);
}

.section-kicker.orange{
    color:var(--idem-orange);
}


/* ==========================================================
   SERVICES
========================================================== */

.services-section{
    background:#ffffff;
}

.services-grid{
    display:grid;

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

    gap:18px;
}

.service-card{
    --card-color:#665ee8;

    min-height:320px;

    position:relative;

    padding:34px 23px 28px;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    background:#ffffff;

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

    border-radius:18px;

    transition:.35s ease;
}

.service-card:hover{
    transform:translateY(-10px);

    box-shadow:0 20px 55px rgba(7,35,73,.10);
}

.service-icon{
    width:66px;

    height:66px;

    margin-bottom:23px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    color:var(--card-color);

    background:#f4f7ff;

    font-size:30px;
}

.service-card h3{
    color:var(--idem-navy);

    font-size:17px;

    font-weight:800;

    margin-bottom:14px;
}

.service-card p{
    color:#68768b;

    font-size:13px;

    line-height:1.8;

    margin-bottom:23px;
}

.service-link{
    margin-top:auto;

    display:inline-flex;

    align-items:center;

    gap:7px;

    color:var(--idem-orange);

    font-size:13px;

    font-weight:800;
}

.service-web{--card-color:#665ee8;}
.service-software{--card-color:#5478ff;}
.service-automation{--card-color:#17ae69;}
.service-marketing{--card-color:#ff7417;}
.service-branding{--card-color:#e13972;}
.service-cloud{--card-color:#3997ef;}


/* ==========================================================
   SECTORS
========================================================== */

.sectors{
    margin-top:70px;
}

.sectors-title{
    text-align:center;

    margin-bottom:38px;
}

.sectors-title h3{
    color:var(--idem-navy);

    font-size:30px;

    font-weight:800;
}

.sectors-title span{
    color:var(--idem-orange);
}

.sector-grid{
    display:grid;

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

    gap:18px;
}

.sector-item{
    min-height:122px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:14px;

    text-align:center;

    border-radius:15px;

    transition:.3s ease;
}

.sector-item:hover{
    background:#f8faff;

    transform:translateY(-4px);
}

.sector-icon{
    color:#0d3571;

    font-size:35px;

    transition:.3s;
}

.sector-item:hover .sector-icon{
    color:var(--idem-orange);
}

.sector-item span{
    color:#35445d;

    font-size:13px;

    font-weight:700;
}


/* ==========================================================
   WHY IDEM
========================================================== */

.why-idem{
    position:relative;

    padding:100px 0;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(26,113,255,.15),
            transparent 30%
        ),

        linear-gradient(
            120deg,
            #06152f,
            #082044
        );
}

.why-heading{
    max-width:760px;

    margin-bottom:60px;
}

.why-heading .section-kicker{
    color:#76adff;
}

.why-heading h2{
    color:#ffffff;

    font-size:clamp(34px,4vw,54px);

    line-height:1.1;

    letter-spacing:-2px;

    margin-bottom:20px;
}

.why-heading h2 span{
    color:var(--idem-orange);
}

.why-heading p{
    color:#b8c7da;

    font-size:17px;

    line-height:1.8;
}

.why-grid{
    display:grid;

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

    gap:22px;
}

.why-item{
    display:flex;

    gap:18px;

    padding:28px;

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

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

    border-radius:18px;

    transition:.3s ease;
}

.why-item:hover{
    transform:translateY(-7px);

    border-color:rgba(255,116,23,.28);
}

.why-icon{
    width:52px;

    height:52px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    color:var(--idem-orange);

    background:rgba(255,116,23,.10);
}

.why-item h3{
    color:#ffffff;

    font-size:16px;

    font-weight:800;

    margin-bottom:10px;
}

.why-item p{
    color:#aebed2;

    font-size:13px;

    line-height:1.75;
}


/* ==========================================================
   PORTFOLIO
========================================================== */

.portfolio-section{
    background:#f8fafd;
}

.portfolio-header{
    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:40px;

    margin-bottom:40px;
}

.portfolio-header > div{
    max-width:770px;
}

.portfolio-main-link{
    flex-shrink:0;

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding-bottom:5px;

    color:var(--idem-navy);

    font-size:14px;

    font-weight:800;

    border-bottom:2px solid var(--idem-orange);
}

.portfolio-filters{
    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:35px;
}

.filter-btn{
    padding:11px 19px;

    background:#ffffff;

    color:#637086;

    border:1px solid #e4eaf2;

    border-radius:50px;

    font-size:13px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;
}

.filter-btn.active,
.filter-btn:hover{
    background:var(--idem-navy);

    color:#ffffff;

    border-color:var(--idem-navy);
}

.portfolio-grid{
    display:grid;

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

    gap:25px;
}

.project-card{
    background:#ffffff;

    border:1px solid #e6ecf3;

    border-radius:20px;

    overflow:hidden;

    transition:.35s ease;
}

.project-card:hover{
    transform:translateY(-9px);

    box-shadow:0 25px 60px rgba(9,34,72,.10);
}

.project-card.hide{
    display:none;
}

.project-image{
    min-height:270px;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;
}

.project-school{
    background:linear-gradient(135deg,#eff3ff,#dfe8ff);
}

.project-health{
    background:linear-gradient(135deg,#eaf9f7,#d9f0ed);
}

.project-realestate{
    background:linear-gradient(135deg,#fff2e9,#f9e2d5);
}

.project-tag{
    position:absolute;

    top:18px;

    right:18px;

    padding:7px 12px;

    background:#ffffff;

    border-radius:50px;

    color:var(--idem-navy);

    font-size:11px;

    font-weight:800;
}

.project-browser,
.health-interface{
    width:76%;

    height:190px;

    background:#ffffff;

    border-radius:13px;

    box-shadow:0 20px 45px rgba(32,67,125,.17);
}

.browser-bar{
    height:25px;

    padding:0 10px;

    display:flex;

    align-items:center;

    gap:5px;

    background:#f3f6fa;
}

.browser-bar span{
    width:6px;

    height:6px;

    background:#c7cfda;

    border-radius:50%;
}

.browser-body{
    height:calc(100% - 25px);

    display:grid;

    grid-template-columns:45px 1fr;
}

.project-sidebar{
    background:#12356b;
}

.project-dashboard,
.health-interface{
    padding:15px;
}

.project-dash-title,
.health-top{
    width:90px;

    height:8px;

    margin-bottom:15px;

    background:#1b3156;

    border-radius:10px;
}

.project-stats,
.health-grid{
    display:grid;

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

    gap:7px;
}

.project-stats span,
.health-grid div{
    height:38px;

    background:#eef3f9;

    border-radius:6px;
}

.project-chart,
.health-chart{
    height:70px;

    margin-top:12px;

    background:#f7fbfb;

    border-radius:7px;
}

.realestate-phone{
    width:130px;

    height:220px;

    padding:9px;

    background:#161d28;

    border-radius:22px;

    transform:rotate(5deg);
}

.realestate-image{
    height:110px;

    border-radius:14px;

    background:linear-gradient(135deg,#dcc3a7,#9c7656);
}

.realestate-lines{
    padding:15px 7px;
}

.realestate-lines span{
    display:block;

    height:6px;

    margin-bottom:8px;

    background:#dfe4ea;

    border-radius:8px;
}

.realestate-lines span:nth-child(1){
    width:80%;
}

.realestate-lines span:nth-child(2){
    width:60%;
}

.realestate-lines span:nth-child(3){
    width:70%;

    background:var(--idem-orange);
}

.project-content{
    padding:25px;
}

.project-sector,
.product-sector-name{
    display:block;

    color:var(--idem-orange);

    font-size:10px;

    font-weight:800;

    letter-spacing:.12em;

    margin-bottom:9px;
}

.project-content h3{
    color:var(--idem-navy);

    font-size:20px;

    margin-bottom:11px;
}

.project-content p{
    color:#738096;

    font-size:13px;

    line-height:1.75;

    margin-bottom:19px;
}

.project-content a{
    display:inline-flex;

    align-items:center;

    gap:7px;

    color:var(--idem-navy);

    font-size:13px;

    font-weight:800;
}


/* ==========================================================
   PRODUCTS
========================================================== */

.idem-products{
    background:#ffffff;
}

.products-heading{
    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:40px;

    margin-bottom:48px;
}

.products-heading > div:first-child{
    max-width:790px;
}

.products-badge{
    flex-shrink:0;

    padding:12px 18px;

    color:var(--idem-navy);

    background:#ffffff;

    border:1px solid #e5ebf3;

    border-radius:50px;

    font-size:13px;

    font-weight:800;
}

.products-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;
}

.idem-product-card{
    min-height:460px;

    position:relative;

    padding:32px;

    background:#ffffff;

    border:1px solid #e6ebf2;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 15px 45px rgba(9,34,72,.05);
}

.product-school360,
.product-medicloud{
    display:grid;

    grid-template-columns:1fr .9fr;

    gap:25px;
}

.product-top{
    position:absolute;

    top:25px;

    left:30px;

    right:30px;

    display:flex;

    align-items:center;

    justify-content:space-between;
}

.product-logo{
    width:50px;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    color:#ffffff;

    font-size:13px;

    font-weight:800;
}

.product-logo-school{
    background:#5368e8;
}

.product-logo-medical{
    background:#1c8a87;
}

.product-label{
    color:#596982;

    font-size:10px;

    font-weight:800;
}

.product-content{
    padding-top:85px;
}

.product-content h3,
.product-coming-inner h3{
    color:var(--idem-navy);

    font-size:29px;

    margin-bottom:13px;
}

.product-content p,
.product-coming-inner p{
    color:#6d7a90;

    font-size:14px;

    line-height:1.8;

    margin-bottom:20px;
}

.product-features{
    display:flex;

    flex-wrap:wrap;

    gap:10px 15px;

    margin-bottom:24px;
}

.product-features span{
    color:#45536a;

    font-size:12px;

    font-weight:700;
}

.product-features i{
    color:#27ad73;
}

.product-primary{
    min-height:46px;

    padding:0 17px;

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#ffffff;

    background:var(--idem-navy);

    border-radius:9px;

    font-size:12px;

    font-weight:800;

    transition:.25s;
}

.product-primary:hover{
    background:var(--idem-orange);
}

.product-visual{
    padding-top:70px;

    display:flex;

    align-items:flex-end;

    justify-content:center;
}

.product-browser,
.medical-window{
    width:100%;

    max-width:290px;

    height:220px;

    background:#f8faff;

    border-radius:14px;

    box-shadow:0 25px 50px rgba(31,58,116,.16);
}

.product-browser-top{
    height:28px;

    padding:10px;

    display:flex;

    gap:5px;

    background:#eef1f8;
}

.product-browser-top span{
    width:6px;

    height:6px;

    background:#c5ccda;

    border-radius:50%;
}

.product-browser-body{
    height:calc(100% - 28px);

    display:grid;

    grid-template-columns:47px 1fr;
}

.product-menu{
    background:#2c4387;
}

.product-dashboard,
.medical-window{
    padding:14px;
}

.product-title-line,
.medical-logo-mini{
    width:95px;

    height:8px;

    margin-bottom:13px;

    background:#314b7a;

    border-radius:8px;
}

.product-small-cards,
.medical-stats{
    display:grid;

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

    gap:6px;
}

.product-small-cards span,
.medical-stats span{
    height:37px;

    background:#ffffff;

    border-radius:6px;
}

.product-big-chart,
.medical-chart{
    height:95px;

    margin-top:10px;

    background:#ffffff;

    border-radius:7px;
}

.medical-header{
    display:flex;

    justify-content:space-between;
}

.medical-user{
    width:27px;

    height:27px;

    background:#d8efed;

    border-radius:50%;
}

.medical-data{
    margin-top:12px;

    padding:14px;

    background:#ffffff;
}

.medical-line{
    width:75%;

    height:7px;

    margin-bottom:8px;

    background:#dbe7e7;
}

.medical-line.short{
    width:50%;
}

.product-coming{
    grid-column:1 / -1;

    min-height:320px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;
}

.product-coming-inner{
    max-width:620px;
}

.coming-icon{
    width:70px;

    height:70px;

    margin:0 auto 22px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--idem-orange);

    background:rgba(255,116,23,.08);

    border-radius:20px;

    font-size:31px;
}

.coming-status{
    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:20px;

    padding:8px 12px;

    background:#f5f7fa;

    border-radius:50px;

    font-size:11px;

    font-weight:800;
}

.coming-status span{
    width:7px;

    height:7px;

    background:#2cc975;

    border-radius:50%;
}

.coming-link{
    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    color:var(--idem-navy);

    font-size:13px;

    font-weight:800;
}


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

.process-section{
    background:#ffffff;
}

.process-line{
    display:grid;

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

    gap:24px;

    margin-top:60px;
}

.process-step{
    text-align:center;
}

.process-number{
    color:#cbd5e1;

    font-size:11px;

    font-weight:800;

    margin-bottom:8px;
}

.process-icon{
    width:90px;

    height:90px;

    margin:0 auto 22px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--idem-orange);

    border:1px solid #e5ebf3;

    border-radius:50%;

    font-size:32px;

    transition:.3s ease;
}

.process-step:hover .process-icon{
    background:var(--idem-navy);

    color:#ffffff;

    transform:translateY(-7px);
}

.process-step h3{
    color:var(--idem-navy);

    font-size:18px;

    margin-bottom:10px;
}

.process-step p{
    color:#718096;

    font-size:13px;

    line-height:1.7;
}


/* ==========================================================
   CONTACT SECTION
========================================================== */

.contact-section{
    padding:100px 0;

    background:#f7f9fc;
}

.contact-box{
    display:grid;

    grid-template-columns:1fr .85fr;

    gap:65px;

    align-items:center;
}

.contact-left{
    max-width:680px;
}

.contact-left h2{
    color:var(--idem-navy);

    font-size:clamp(38px,4vw,58px);

    line-height:1.08;

    letter-spacing:-2px;

    margin-bottom:20px;
}

.contact-left h2 span{
    color:var(--idem-orange);
}

.contact-left > p{
    color:#69778b;

    font-size:17px;

    line-height:1.8;

    margin-bottom:36px;
}

.contact-info{
    display:flex;

    flex-direction:column;

    gap:14px;
}

.contact-item{
    display:flex;

    align-items:center;

    gap:16px;

    padding:16px 18px;

    color:var(--idem-navy);

    background:#ffffff;

    border:1px solid #e6ebf2;

    border-radius:14px;

    transition:.3s ease;
}

.contact-item:hover{
    transform:translateX(5px);

    border-color:rgba(255,116,23,.25);

    box-shadow:0 12px 30px rgba(7,35,73,.06);
}

.contact-icon{
    width:45px;

    height:45px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--idem-orange);

    background:rgba(255,116,23,.08);

    border-radius:12px;

    font-size:20px;
}

.contact-item div:last-child{
    display:flex;

    flex-direction:column;

    gap:3px;
}

.contact-item span{
    color:#8793a5;

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;
}

.contact-item strong{
    color:var(--idem-navy);

    font-size:14px;
}

.contact-actions-card{
    padding:34px;

    background:#ffffff;

    border:1px solid #e5ebf2;

    border-radius:24px;

    box-shadow:0 25px 60px rgba(7,35,73,.09);
}

.contact-card-label{
    color:var(--idem-orange);

    font-size:11px;

    font-weight:800;

    letter-spacing:.12em;
}

.contact-actions-card h3{
    margin-top:10px;

    color:var(--idem-navy);

    font-size:27px;

    line-height:1.3;

    margin-bottom:8px;
}

.contact-actions-card > p{
    color:#7b8799;

    font-size:13px;

    margin-bottom:24px;
}

.contact-action{
    min-height:72px;

    padding:13px 16px;

    margin-bottom:11px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    color:var(--idem-navy);

    background:#f8fafd;

    border:1px solid #eef1f5;

    border-radius:13px;

    transition:.25s;
}

.contact-action:hover{
    background:#ffffff;

    border-color:rgba(255,116,23,.25);

    transform:translateY(-2px);
}

.contact-action > div{
    display:flex;

    align-items:center;

    gap:14px;
}

.contact-action > div > i{
    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--idem-orange);

    background:#ffffff;

    border-radius:10px;

    font-size:19px;
}

.contact-action span{
    display:flex;

    flex-direction:column;

    gap:3px;
}

.contact-action strong{
    color:var(--idem-navy);

    font-size:13px;
}

.contact-action small{
    color:#8793a5;

    font-size:11px;
}

.whatsapp-action{
    color:#ffffff;

    background:#0b6b49;

    border-color:#0b6b49;
}

.whatsapp-action strong,
.whatsapp-action small{
    color:#ffffff;
}

.whatsapp-action > div > i{
    color:#ffffff;

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

.whatsapp-action > i{
    color:#ffffff;
}


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

.final-cta{
    padding:50px 0 90px;

    background:#ffffff;
}

.cta-box{
    min-height:390px;

    padding:70px 60px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    border-radius:30px;

    background:
        radial-gradient(
            circle at 18% 20%,
            rgba(255,116,23,.15),
            transparent 28%
        ),

        radial-gradient(
            circle at 88% 20%,
            rgba(22,119,255,.20),
            transparent 30%
        ),

        linear-gradient(
            120deg,
            #06152f,
            #082550
        );
}

.cta-content{
    max-width:820px;
}

.cta-kicker{
    color:var(--idem-orange);

    font-size:12px;

    font-weight:800;

    letter-spacing:.12em;
}

.cta-content h2{
    color:#ffffff;

    font-size:clamp(36px,4vw,58px);

    line-height:1.08;

    margin:18px 0;
}

.cta-content h2 span{
    color:var(--idem-orange);
}

.cta-content p{
    color:#becbdc;

    font-size:17px;

    line-height:1.8;

    margin-bottom:30px;
}

.cta-buttons{
    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:14px;
}

.cta-primary,
.cta-secondary{
    min-height:54px;

    padding:0 24px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border-radius:9px;

    font-size:14px;

    font-weight:800;
}

.cta-primary{
    color:#ffffff;

    background:var(--idem-orange);
}

.cta-secondary{
    color:#ffffff;

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


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

.site-footer{
    padding:80px 0 25px;

    color:#ffffff;

    background:#041126;
}

.footer-grid{
    display:grid;

    grid-template-columns:2fr 1fr 1fr 1.5fr;

    gap:60px;

    padding-bottom:55px;

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

.footer-brand img{
    width:185px;

    margin-bottom:24px;
}

.footer-brand p{
    max-width:430px;

    color:#9fb0c7;

    font-size:14px;

    line-height:1.8;

    margin-bottom:25px;
}

.footer-social{
    display:flex;

    gap:10px;
}

.footer-social a{
    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#ffffff;

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

    border-radius:9px;

    transition:.25s;
}

.footer-social a:hover{
    background:var(--idem-orange);

    transform:translateY(-3px);
}

.footer-column{
    display:flex;

    flex-direction:column;

    gap:13px;
}

.footer-column h3{
    color:#ffffff;

    font-size:15px;

    margin-bottom:7px;
}

.footer-column a,
.footer-location{
    display:flex;

    align-items:flex-start;

    gap:8px;

    color:#9fb0c7;

    font-size:13px;

    line-height:1.6;
}

.footer-column a:hover{
    color:var(--idem-orange);
}

.footer-column i{
    color:var(--idem-orange);
}

.footer-bottom{
    min-height:75px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

    color:#788ba5;

    font-size:12px;
}

.footer-bottom div{
    display:flex;

    gap:20px;
}

.footer-bottom a{
    color:#788ba5;
}


/* ==========================================================
   FLOATING WHATSAPP
========================================================== */

.floating-whatsapp{
    position:fixed;

    right:24px;

    bottom:24px;

    z-index:5000;

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#ffffff;

    background:#16a466;

    border-radius:50%;

    font-size:27px;

    box-shadow:0 15px 35px rgba(13,119,74,.30);

    transition:.3s ease;
}

.floating-whatsapp:hover{
    color:#ffffff;

    transform:translateY(-5px) scale(1.04);
}


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

.mobile-panel{
    position:fixed;

    z-index:9999;

    top:0;

    right:-100%;

    width:min(360px,88%);

    height:100vh;

    padding:26px;

    background:#06152f;

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

    transition:right .35s ease;
}

.mobile-panel.open{
    right:0;
}

.mobile-panel-header{
    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:40px;
}

.mobile-panel-header img{
    width:140px;
}

.mobile-close{
    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:8px;

    color:#ffffff;

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

    font-size:23px;

    cursor:pointer;
}

.mobile-links{
    display:flex;

    flex-direction:column;
}

.mobile-links a{
    color:#ffffff;

    padding:15px 4px;

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

    font-weight:600;
}

.mobile-contact{
    min-height:52px;

    margin-top:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    color:#ffffff;

    background:var(--idem-orange);

    border-radius:8px;

    font-weight:700;
}

.mobile-overlay{
    position:fixed;

    inset:0;

    z-index:9998;

    background:rgba(0,0,0,.55);

    opacity:0;

    visibility:hidden;

    transition:.3s ease;
}

.mobile-overlay.open{
    opacity:1;

    visibility:visible;
}


/* ==========================================================
   REVEAL
========================================================== */

.reveal{
    opacity:0;

    transform:translateY(30px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}

.reveal.visible{
    opacity:1;

    transform:none;
}


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

@media(max-width:1280px){

    .services-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .sector-grid{
        grid-template-columns:repeat(4,1fr);
    }

    .main-menu{
        gap:18px;
    }

}


@media(max-width:1050px){

    .main-menu,
    .nav-actions{
        display:none;
    }

    .menu-toggle{
        display:flex;
    }

    .hero{
        min-height:auto;
    }

    .hero-container{
        grid-template-columns:1fr;

        padding-top:145px;
    }

    .hero-visual{
        min-height:620px;

        margin-top:25px;
    }

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

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

    .products-grid{
        grid-template-columns:1fr;
    }

    .product-coming{
        grid-column:auto;
    }

    .process-line{
        grid-template-columns:repeat(3,1fr);
    }

    .contact-box{
        grid-template-columns:1fr;
    }

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

}


@media(max-width:768px){

    .nav-inner,
    .section-container{
        width:calc(100% - 32px);
    }

    .brand img{
        width:145px;
    }

    .hero-container{
        width:calc(100% - 36px);

        padding-top:125px;
    }

    .hero h1{
        font-size:48px;

        letter-spacing:-2px;
    }

    .hero-description{
        font-size:16px;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .hero-btn-primary,
    .hero-btn-secondary{
        width:100%;
    }

    .hero-features{
        display:grid;

        grid-template-columns:1fr 1fr;
    }

    .hero-visual{
        min-height:475px;

        transform:scale(.78);

        transform-origin:top center;

        margin-bottom:-80px;
    }

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

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

    .why-grid{
        grid-template-columns:1fr;
    }

    .portfolio-header,
    .products-heading{
        flex-direction:column;

        align-items:flex-start;
    }

    .portfolio-grid{
        grid-template-columns:1fr;
    }

    .products-badge{
        display:none;
    }

    .product-school360,
    .product-medicloud{
        grid-template-columns:1fr;
    }

    .product-visual{
        padding-top:15px;
    }

    .process-line{
        grid-template-columns:1fr;

        gap:38px;
    }

    .contact-section{
        padding:75px 0;
    }

    .contact-actions-card{
        padding:25px;
    }

    .contact-item strong{
        font-size:12px;

        overflow-wrap:anywhere;
    }

    .cta-box{
        min-height:auto;

        padding:60px 25px;
    }

    .cta-buttons{
        flex-direction:column;
    }

    .cta-primary,
    .cta-secondary{
        width:100%;
    }

    .footer-grid{
        grid-template-columns:1fr;

        gap:38px;
    }

    .footer-bottom{
        flex-direction:column;

        align-items:flex-start;

        padding:25px 0;
    }

}


@media(max-width:520px){

    .hero h1{
        font-size:42px;
    }

    .hero-features{
        grid-template-columns:1fr;
    }

    .hero-visual{
        width:calc(100% + 110px);

        margin-left:-55px;

        margin-bottom:-165px;

        transform:scale(.62);
    }

    .section{
        padding:70px 0;
    }

    .services-grid{
        grid-template-columns:1fr;
    }

    .contact-left h2{
        font-size:38px;
    }

    .contact-actions-card{
        padding:20px;
    }

    .floating-whatsapp{
        right:17px;

        bottom:17px;

        width:54px;

        height:54px;
    }

}