:root{
    --navy:#062e51;
    --navy-2:#073b64;
    --navy-3:#0a4877;
    --blue:#078df0;
    --blue-light:#25bff4;
    --cyan:#02abc2;
    --purple:#754ee8;
    --green:#08aa81;
    --text:#12304d;
    --muted:#60758b;
    --line:#dce7ef;
    --bg:#f6f9fc;
    --white:#fff;
    --max:1240px;
    --radius:20px;
    --shadow:0 22px 55px rgba(5,44,79,.12);
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    color:var(--text);
    background:#fff;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    max-width:100%;
    display:block;
}

button,
input,
textarea,
select{
    font:inherit;
}

.container{
    width:min(calc(100% - 48px), var(--max));
    margin-inline:auto;
}

/* ==========================================================
   HEADER
   ========================================================== */

.site-header{
    position:sticky;
    z-index:1000;
    top:0;
    width:100%;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(8,63,105,.08);
    transition:.25s ease;
}

.site-header.scrolled{
    box-shadow:0 8px 30px rgba(8,48,80,.08);
}

.header-inner{
    width:min(calc(100% - 48px), var(--max));
    min-height:84px;
    margin:auto;
    display:flex;
    align-items:center;
    gap:34px;
}

.brand{
    display:inline-flex;
    align-items:center;
    gap:12px;
    min-width:245px;
}

.brand-mark{
    width:54px;
    height:42px;
    display:block;
    position:relative;
}

.brand-k{
    position:absolute;
    display:block;
    background:linear-gradient(135deg,#00a6f5,#064f8f);
    transform:skew(-12deg);
}

.brand-k-1{
    width:16px;
    height:42px;
    left:5px;
    top:0;
}

.brand-k-2{
    width:29px;
    height:15px;
    left:18px;
    top:10px;
    transform:skew(-12deg) rotate(-38deg);
    transform-origin:left center;
}

.brand-copy{
    display:flex;
    flex-direction:column;
    line-height:1;
}

.brand-copy strong{
    color:#0a355b;
    font-size:27px;
    font-weight:850;
    letter-spacing:-1px;
}

.brand-copy small{
    font-size:8px;
    font-weight:800;
    letter-spacing:2.3px;
    margin-top:6px;
    color:#6f8397;
}

.desktop-nav{
    display:flex;
    align-items:center;
    gap:29px;
    margin-left:auto;
    height:84px;
}

.desktop-nav > a,
.nav-dropdown-trigger{
    font-size:14px;
    font-weight:700;
    color:#183c5d;
    height:84px;
    display:flex;
    align-items:center;
    position:relative;
}

.desktop-nav > a:after,
.nav-dropdown-trigger:after{
    position:absolute;
    left:50%;
    bottom:15px;
    width:0;
    height:3px;
    border-radius:10px;
    content:"";
    background:var(--blue);
    transform:translateX(-50%);
    transition:.2s;
}

.desktop-nav > a:hover:after,
.nav-dropdown-trigger:hover:after,
.desktop-nav .active:after{
    width:26px;
}

.nav-dropdown{
    position:relative;
    height:84px;
}

.chevron{
    margin-left:5px;
    font-size:15px;
}

.mega-menu{
    visibility:hidden;
    opacity:0;
    transform:translateY(8px);
    pointer-events:none;
    position:absolute;
    top:72px;
    left:50%;
    width:580px;
    padding:14px;
    border:1px solid #e2eaf0;
    border-radius:18px;
    background:#fff;
    box-shadow:0 30px 60px rgba(4,37,65,.15);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    transition:.2s;
}

.nav-dropdown:hover .mega-menu{
    visibility:visible;
    opacity:1;
    transform:translate(-50%,0);
    pointer-events:auto;
}

.mega-card{
    display:flex;
    align-items:center;
    gap:13px;
    padding:14px;
    border-radius:12px;
    transition:.18s;
}

.mega-card:hover{
    background:#f5f9fc;
}

.mega-icon{
    width:42px;
    height:42px;
    border-radius:12px;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:20px;
}

.mega-connect .mega-icon{background:var(--blue);}
.mega-communicate .mega-icon{background:var(--cyan);}
.mega-protect .mega-icon{background:var(--purple);}
.mega-ai .mega-icon{background:var(--green);}

.mega-card strong,
.mega-card small{
    display:block;
}

.mega-card strong{
    font-size:14px;
}

.mega-card small{
    margin-top:2px;
    font-size:11px;
    color:var(--muted);
}

.header-whatsapp{
    flex:none;
    background:var(--navy);
    color:white;
    padding:13px 22px;
    border-radius:999px;
    display:flex;
    align-items:center;
    gap:9px;
    font-weight:750;
    font-size:14px;
    transition:.2s;
}

.header-whatsapp:hover{
    background:var(--blue);
    transform:translateY(-1px);
}

.mobile-menu-button,
.mobile-menu{
    display:none;
}

/* ==========================================================
   BUTTONS / GLOBAL
   ========================================================== */

.button{
    min-height:50px;
    padding:0 24px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    font-weight:760;
    font-size:14px;
    border:1px solid transparent;
    cursor:pointer;
    transition:.2s ease;
}

.button-primary{
    color:#fff;
    background:linear-gradient(135deg,#078cf1,#04b4ee);
    box-shadow:0 13px 25px rgba(0,142,238,.2);
}

.button-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 30px rgba(0,142,238,.26);
}

.button-outline-light{
    color:#fff;
    border-color:rgba(255,255,255,.7);
    background:rgba(255,255,255,.06);
}

.button-outline-light:hover{
    background:#fff;
    color:var(--navy);
}

.button-white{
    color:var(--navy);
    background:#fff;
}

.eyebrow{
    display:block;
    color:var(--blue);
    font-size:12px;
    font-weight:850;
    letter-spacing:1.8px;
    margin-bottom:10px;
}

.eyebrow.light{
    color:#6ed8ff;
}

.section-heading{
    max-width:800px;
    margin-bottom:42px;
}

.section-heading.centered{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

.section-heading h2{
    font-size:40px;
    line-height:1.12;
    margin:0;
    letter-spacing:-1.5px;
    color:var(--navy);
}

.section-heading h2 span{
    color:var(--blue);
}

.section-heading p{
    max-width:650px;
    margin:14px auto 0;
    color:var(--muted);
}

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

.hero-home{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 79% 40%,rgba(2,169,238,.19),transparent 30%),
        linear-gradient(110deg,#052d4e 0%,#063d69 52%,#0a557e 100%);
    color:#fff;
}

.hero-bg-grid{
    position:absolute;
    inset:0;
    opacity:.1;
    background-image:
        linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);
    background-size:52px 52px;
    mask-image:linear-gradient(90deg,transparent,black,transparent);
}

.hero-home-inner{
    position:relative;
    min-height:590px;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:45px;
}

.hero-copy{
    padding:70px 0;
}

.hero-copy .eyebrow{
    color:#45c8ff;
}

.hero-copy h1{
    margin:0;
    font-size:58px;
    line-height:1.01;
    letter-spacing:-2.5px;
    font-weight:850;
}

.hero-copy h1 span{
    color:#29c6f4;
}

.hero-copy > p{
    margin:23px 0 29px;
    max-width:620px;
    font-size:17px;
    color:#e1ebf2;
}

.hero-actions{
    display:flex;
    gap:13px;
    flex-wrap:wrap;
}

.hero-trust{
    display:flex;
    align-items:center;
    gap:36px;
    margin-top:38px;
    padding-top:28px;
    border-top:1px solid rgba(255,255,255,.15);
}

.hero-trust div{
    display:flex;
    flex-direction:column;
}

.hero-trust strong{
    font-size:21px;
}

.hero-trust span{
    font-size:11px;
    color:#bcd0de;
}

.hero-visual{
    position:relative;
    height:500px;
    display:grid;
    place-items:center;
}

.hero-screen{
    width:520px;
    height:335px;
    background:#f7fbfe;
    border-radius:20px;
    overflow:hidden;
    position:relative;
    transform:perspective(1200px) rotateY(-8deg) rotateX(3deg);
    box-shadow:
        0 35px 90px rgba(0,10,25,.38),
        0 0 0 1px rgba(255,255,255,.12);
    z-index:2;
}

.hero-screen-top{
    height:36px;
    background:#edf4f8;
    display:flex;
    align-items:center;
    padding:0 16px;
    gap:6px;
}

.hero-screen-top span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#b6c8d5;
}

.dashboard{
    display:flex;
    height:calc(100% - 36px);
}

.dashboard-sidebar{
    width:67px;
    background:#07375c;
    padding:18px 13px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:19px;
}

.mini-logo{
    width:34px;
    height:34px;
    border-radius:9px;
    display:grid;
    place-items:center;
    color:#fff;
    font-weight:900;
    background:linear-gradient(135deg,#16a5ff,#01bed9);
    margin-bottom:8px;
}

.side-line{
    width:28px;
    height:5px;
    border-radius:5px;
    background:rgba(255,255,255,.2);
}

.side-line.active{
    background:#24c1f3;
}

.dashboard-main{
    padding:26px;
    flex:1;
}

.dashboard-title{
    height:11px;
    width:130px;
    background:#d5e3eb;
    border-radius:10px;
    margin-bottom:22px;
}

.metric-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.metric{
    border:1px solid #e2edf3;
    background:white;
    border-radius:12px;
    padding:12px;
    display:flex;
    align-items:center;
    gap:9px;
}

.metric-icon{
    width:30px;
    height:30px;
    border-radius:8px;
    display:grid;
    place-items:center;
    color:#fff;
    flex:none;
}

.metric-icon.blue{background:var(--blue);}
.metric-icon.purple{background:var(--purple);}
.metric-icon.green{background:var(--green);}

.metric small,
.metric strong{
    display:block;
}

.metric small{
    color:#7590a4;
    font-size:8px;
}

.metric strong{
    color:#153c5d;
    font-size:10px;
}

.chart-card{
    height:145px;
    margin-top:18px;
    border:1px solid #e4edf2;
    border-radius:13px;
    background:#fff;
    padding:18px 20px;
}

.chart-bars{
    height:100%;
    display:flex;
    align-items:flex-end;
    gap:12px;
}

.chart-bars i{
    flex:1;
    background:linear-gradient(#13b9f3,#1689df);
    border-radius:5px 5px 2px 2px;
    opacity:.83;
}

.hero-orbit{
    position:absolute;
    border:1px solid rgba(50,212,255,.18);
    border-radius:50%;
}

.orbit-one{
    width:520px;
    height:520px;
}

.orbit-two{
    width:385px;
    height:385px;
}

.floating-tech-card{
    position:absolute;
    z-index:3;
    padding:13px 17px;
    display:flex;
    gap:9px;
    align-items:center;
    border:1px solid rgba(255,255,255,.2);
    border-radius:13px;
    background:rgba(3,39,68,.84);
    backdrop-filter:blur(12px);
    box-shadow:0 18px 35px rgba(0,0,0,.18);
    font-size:12px;
    font-weight:700;
}

.floating-tech-card span{
    width:25px;
    height:25px;
    border-radius:7px;
    display:grid;
    place-items:center;
    background:#09ae91;
}

.tech-card-1{
    right:-12px;
    top:90px;
}

.tech-card-2{
    left:10px;
    bottom:74px;
}

/* ==========================================================
   SOLUTIONS
   ========================================================== */

.solutions-section{
    padding:78px 0 88px;
    background:#fff;
}

.solution-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.solution-card{
    position:relative;
    min-height:470px;
    padding:27px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:.25s;
}

.solution-card:before{
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    content:"";
    background:var(--card-color);
}

.solution-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow);
}

.solution-blue{--card-color:var(--blue);}
.solution-cyan{--card-color:var(--cyan);}
.solution-purple{--card-color:var(--purple);}
.solution-green{--card-color:var(--green);}

.solution-icon{
    width:52px;
    height:52px;
    border-radius:15px;
    display:grid;
    place-items:center;
    color:#fff;
    background:var(--card-color);
    font-size:26px;
    margin-bottom:20px;
}

.solution-number{
    position:absolute;
    top:27px;
    right:27px;
    font-weight:850;
    font-size:12px;
    color:#becbd5;
}

.solution-card h3{
    margin:0;
    color:var(--card-color);
    font-size:23px;
}

.solution-card h4{
    margin:3px 0 12px;
    font-size:12px;
    color:#506c83;
}

.solution-card p{
    font-size:13px;
    color:var(--muted);
    margin:0 0 17px;
}

.solution-card ul{
    margin:0 0 22px;
    padding:0;
    list-style:none;
}

.solution-card li{
    position:relative;
    padding:5px 0 5px 21px;
    font-size:12px;
    color:#294a64;
}

.solution-card li:before{
    content:"✓";
    position:absolute;
    left:0;
    color:var(--card-color);
    font-weight:900;
}

.solution-card > a{
    margin-top:auto;
    color:var(--card-color);
    font-weight:800;
    font-size:12px;
}

.solution-grid.compact .solution-card{
    min-height:290px;
}

/* ==========================================================
   PARTNER
   ========================================================== */

.partner-section{
    padding:85px 0;
    background:#f5f9fc;
    border-top:1px solid #e7eef3;
}

.partner-grid{
    display:grid;
    grid-template-columns:.85fr 1.5fr;
    gap:75px;
    align-items:start;
}

.partner-copy h2{
    margin:0;
    color:var(--navy);
    font-size:42px;
    line-height:1.08;
    letter-spacing:-1.7px;
}

.partner-copy h2 span{
    color:var(--blue);
}

.partner-copy p{
    color:var(--muted);
    margin:20px 0;
}

.text-link{
    color:var(--blue);
    font-weight:800;
    font-size:14px;
}

.benefits-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    background:#fff;
    border:1px solid #e0eaf1;
    border-radius:18px;
    overflow:hidden;
}

.benefit{
    min-height:140px;
    padding:24px;
    display:flex;
    gap:14px;
    border-right:1px solid #e5edf2;
    border-bottom:1px solid #e5edf2;
}

.benefit:nth-child(even){
    border-right:0;
}

.benefit:nth-last-child(-n+2){
    border-bottom:0;
}

.benefit > span{
    font-size:28px;
    color:var(--blue);
}

.benefit h3{
    margin:0 0 4px;
    font-size:14px;
    color:var(--navy);
}

.benefit p{
    margin:0;
    font-size:12px;
    color:var(--muted);
}

/* ==========================================================
   INDUSTRIES
   ========================================================== */

.industry-band{
    padding:56px 0;
    color:#fff;
    background:
        linear-gradient(90deg,rgba(3,47,81,.97),rgba(6,69,107,.92)),
        radial-gradient(circle at center,#286c92,#052f50);
}

.industry-inner{
    display:grid;
    grid-template-columns:.85fr 1.6fr;
    align-items:center;
    gap:60px;
}

.industry-copy h2{
    margin:0;
    font-size:32px;
    line-height:1.1;
}

.industry-copy p{
    max-width:400px;
    color:#c6d7e3;
    font-size:14px;
}

.industries{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:6px;
}

.industries div{
    text-align:center;
    font-size:11px;
    color:#e2edf3;
}

.industries span{
    display:block;
    font-size:25px;
    margin-bottom:8px;
}

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

.inner-hero{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 76% 40%,rgba(0,176,243,.18),transparent 27%),
        linear-gradient(115deg,#f7fbfd,#eef7fb);
    border-bottom:1px solid #dfeaf1;
}

.inner-hero-grid{
    min-height:480px;
    display:grid;
    grid-template-columns:1fr .8fr;
    align-items:center;
    gap:70px;
}

.inner-hero h1{
    max-width:720px;
    font-size:49px;
    line-height:1.04;
    letter-spacing:-2px;
    margin:0;
    color:var(--navy);
}

.inner-hero h1 span{
    color:var(--blue);
}

.inner-hero p{
    max-width:650px;
    color:var(--muted);
    font-size:17px;
    margin:22px 0 28px;
}

.inner-hero-art{
    position:relative;
    height:350px;
    display:grid;
    place-items:center;
}

.art-ring{
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(5,144,225,.22);
}

.art-ring-1{
    width:310px;
    height:310px;
}

.art-ring-2{
    width:220px;
    height:220px;
}

.art-center{
    position:relative;
    z-index:2;
    width:125px;
    height:125px;
    border-radius:35px;
    color:#fff;
    display:grid;
    place-items:center;
    font-size:57px;
    font-weight:900;
    background:linear-gradient(135deg,#0798ed,#08bac9);
    box-shadow:0 25px 50px rgba(0,129,206,.25);
}

.internal-content{
    padding:80px 0;
}

.service-list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:17px;
}

.service-item{
    min-height:205px;
    border:1px solid #e1eaf0;
    padding:28px;
    border-radius:16px;
    transition:.2s;
    background:#fff;
}

.service-item:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow);
}

.service-item > span{
    color:var(--blue);
    font-weight:900;
    font-size:12px;
}

.service-item h3{
    margin:13px 0 7px;
    font-size:19px;
    color:var(--navy);
}

.service-item p{
    margin:0;
    color:var(--muted);
    font-size:13px;
}

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

.service-orbit{
    position:relative;
    width:340px;
    height:340px;
    margin:auto;
    border-radius:50%;
    border:1px solid rgba(0,139,224,.18);
    display:grid;
    place-items:center;
}

.service-orbit:before{
    content:"";
    position:absolute;
    width:215px;
    height:215px;
    border-radius:50%;
    border:1px dashed rgba(0,139,224,.28);
}

.service-orbit strong{
    position:relative;
    z-index:2;
    width:100px;
    height:100px;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:50px;
    border-radius:30px;
    background:linear-gradient(135deg,#078ff0,#04b2dc);
}

.orbit-node{
    position:absolute;
    z-index:3;
    width:64px;
    height:64px;
    border-radius:18px;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:27px;
    box-shadow:0 15px 30px rgba(3,67,105,.14);
}

.node-a{
    top:-10px;
    left:138px;
    background:var(--blue);
}

.node-b{
    right:-8px;
    top:138px;
    background:var(--cyan);
}

.node-c{
    bottom:-8px;
    left:138px;
    background:var(--purple);
}

.node-d{
    left:-8px;
    top:138px;
    background:var(--green);
}

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

.process-section{
    padding:85px 0;
}

.process-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:13px;
}

.process-grid article{
    padding:27px 20px;
    border:1px solid #dfe8ef;
    border-radius:15px;
    background:#fff;
}

.process-grid span{
    color:var(--blue);
    font-weight:900;
    font-size:12px;
}

.process-grid h3{
    color:var(--navy);
    font-size:18px;
    margin:13px 0 7px;
}

.process-grid p{
    font-size:12px;
    color:var(--muted);
    margin:0;
}

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

.contact-section{
    padding:80px 0;
    background:linear-gradient(130deg,#f5fafc,#fff);
}

.contact-grid{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:75px;
    align-items:center;
}

.contact-copy h1{
    font-size:53px;
    line-height:1;
    letter-spacing:-2px;
    color:var(--navy);
    margin:0;
}

.contact-copy h1 span{
    display:block;
    color:var(--blue);
}

.contact-copy > p{
    color:var(--muted);
    max-width:480px;
    margin:23px 0 35px;
}

.contact-direct{
    display:grid;
    gap:12px;
}

.contact-direct a{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px;
    border-radius:13px;
    border:1px solid #dde8ef;
    background:#fff;
}

.contact-direct a > span{
    width:42px;
    height:42px;
    border-radius:11px;
    background:#edf8fd;
    display:grid;
    place-items:center;
    color:var(--blue);
}

.contact-direct small,
.contact-direct strong{
    display:block;
}

.contact-direct small{
    color:#8091a0;
    font-size:10px;
}

.contact-direct strong{
    color:var(--navy);
    font-size:13px;
}

.contact-form{
    background:#fff;
    border:1px solid #dfe8ee;
    border-radius:22px;
    padding:34px;
    box-shadow:0 28px 65px rgba(0,50,84,.1);
}

.field-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
}

.contact-form label{
    display:block;
    margin-bottom:16px;
}

.contact-form label > span{
    display:block;
    font-size:11px;
    font-weight:800;
    color:#294862;
    margin-bottom:7px;
}

.contact-form input,
.contact-form textarea,
.contact-form select{
    width:100%;
    border:1px solid #d7e4ec;
    border-radius:10px;
    outline:0;
    padding:13px 14px;
    color:var(--text);
    background:#fbfdfe;
    transition:.18s;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
    border-color:#43afea;
    box-shadow:0 0 0 3px rgba(10,153,232,.08);
}

.contact-form textarea{
    resize:vertical;
}

.button-submit{
    border:0;
}

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

.cta-band{
    padding:52px 0;
    color:#fff;
    background:linear-gradient(110deg,#057fce,#05a8da);
}

.cta-band-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:45px;
}

.cta-band h2{
    margin:0;
    font-size:29px;
    line-height:1.08;
}

.cta-band p{
    margin:10px 0 0;
    max-width:650px;
    color:#dff4ff;
    font-size:13px;
}

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

.site-footer{
    background:#052f50;
    color:#fff;
    padding:55px 0 18px;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.7fr repeat(3,1fr);
    gap:55px;
    padding-bottom:40px;
}

.brand-footer .brand-copy strong,
.brand-footer .brand-copy small{
    color:#fff;
}

.brand-footer .brand-k{
    background:#fff;
}

.footer-brand p{
    max-width:340px;
    color:#a9c0d1;
    font-size:13px;
}

.footer-grid h4{
    margin:8px 0 15px;
    font-size:13px;
}

.footer-grid > div:not(:first-child){
    display:flex;
    flex-direction:column;
    gap:9px;
}

.footer-grid a,
.footer-grid span{
    color:#a8bed0;
    font-size:12px;
}

.footer-grid a:hover{
    color:#fff;
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.12);
    padding-top:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#8ea9bc;
    font-size:11px;
}

.footer-social{
    display:flex;
    gap:8px;
}

.footer-social a{
    width:29px;
    height:29px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:8px;
    display:grid;
    place-items:center;
    color:#fff;
}

.floating-whatsapp{
    position:fixed;
    z-index:900;
    right:23px;
    bottom:23px;
    width:58px;
    height:58px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#17b56a;
    color:#fff;
    font-size:27px;
    box-shadow:0 13px 32px rgba(3,92,51,.3);
}

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

@media(max-width:1100px){

    .desktop-nav{
        gap:19px;
    }

    .header-whatsapp{
        padding-inline:16px;
    }

    .hero-copy h1{
        font-size:48px;
    }

    .hero-screen{
        width:450px;
    }

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

    .industries{
        grid-template-columns:repeat(3,1fr);
        row-gap:25px;
    }

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

}

@media(max-width:900px){

    .desktop-nav,
    .header-whatsapp{
        display:none;
    }

    .header-inner{
        min-height:74px;
    }

    .brand{
        min-width:0;
    }

    .mobile-menu-button{
        display:flex;
        margin-left:auto;
        border:0;
        background:none;
        width:42px;
        height:42px;
        flex-direction:column;
        justify-content:center;
        gap:5px;
        padding:8px;
    }

    .mobile-menu-button span{
        width:100%;
        height:2px;
        border-radius:2px;
        background:var(--navy);
    }

    .mobile-menu{
        position:absolute;
        top:74px;
        left:0;
        width:100%;
        padding:15px 24px 24px;
        background:#fff;
        border-top:1px solid #e5edf2;
        box-shadow:0 20px 40px rgba(5,40,67,.12);
    }

    .mobile-menu.open{
        display:flex;
        flex-direction:column;
    }

    .mobile-menu a{
        padding:11px 0;
        border-bottom:1px solid #eff3f6;
        font-size:14px;
        font-weight:700;
    }

    .mobile-whatsapp{
        margin-top:12px;
        border:0 !important;
        text-align:center;
        background:#0b9ee9;
        color:#fff !important;
        border-radius:999px;
        padding:13px !important;
    }

    .hero-home-inner{
        grid-template-columns:1fr;
        padding-bottom:45px;
    }

    .hero-copy{
        padding:60px 0 20px;
    }

    .hero-visual{
        height:390px;
    }

    .hero-screen{
        width:min(90vw,520px);
    }

    .partner-grid,
    .industry-inner,
    .inner-hero-grid,
    .contact-grid{
        grid-template-columns:1fr;
    }

    .industry-inner{
        gap:35px;
    }

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

    .inner-hero-grid{
        padding:60px 0;
        gap:25px;
    }

    .inner-hero-art{
        height:300px;
    }

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

    .footer-grid > div:last-child{
        grid-column:2/4;
    }

}

@media(max-width:620px){

    .container,
    .header-inner{
        width:min(calc(100% - 32px), var(--max));
    }

    .brand-mark{
        width:44px;
        height:35px;
        transform:scale(.86);
        transform-origin:left center;
    }

    .brand-copy strong{
        font-size:21px;
    }

    .brand-copy small{
        font-size:6px;
        letter-spacing:1.7px;
    }

    .hero-copy h1{
        font-size:40px;
        letter-spacing:-1.7px;
    }

    .hero-copy > p{
        font-size:15px;
    }

    .hero-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .hero-trust{
        gap:15px;
        justify-content:space-between;
    }

    .hero-trust strong{
        font-size:17px;
    }

    .hero-trust span{
        font-size:9px;
    }

    .hero-visual{
        height:300px;
    }

    .hero-screen{
        height:245px;
    }

    .metric-grid{
        gap:5px;
    }

    .metric{
        padding:6px;
    }

    .metric-icon{
        display:none;
    }

    .dashboard-sidebar{
        width:48px;
    }

    .chart-card{
        height:100px;
    }

    .tech-card-1{
        right:0;
        top:10px;
    }

    .tech-card-2{
        left:0;
        bottom:5px;
    }

    .section-heading h2,
    .partner-copy h2{
        font-size:31px;
    }

    .solution-grid,
    .service-list,
    .process-grid,
    .benefits-grid,
    .field-row{
        grid-template-columns:1fr;
    }

    .solution-card{
        min-height:0;
    }

    .benefit{
        border-right:0;
        border-bottom:1px solid #e5edf2 !important;
    }

    .benefit:last-child{
        border-bottom:0 !important;
    }

    .partner-grid{
        gap:35px;
    }

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

    .inner-hero h1,
    .contact-copy h1{
        font-size:38px;
        letter-spacing:-1.4px;
    }

    .inner-hero p{
        font-size:15px;
    }

    .inner-hero-art{
        height:230px;
    }

    .art-ring-1{
        width:230px;
        height:230px;
    }

    .art-ring-2{
        width:160px;
        height:160px;
    }

    .art-center{
        width:90px;
        height:90px;
        border-radius:24px;
        font-size:40px;
    }

    .service-orbit{
        width:250px;
        height:250px;
    }

    .service-orbit:before{
        width:155px;
        height:155px;
    }

    .orbit-node{
        width:50px;
        height:50px;
        border-radius:14px;
    }

    .node-a,
    .node-c{
        left:100px;
    }

    .node-b,
    .node-d{
        top:100px;
    }

    .cta-band-inner{
        flex-direction:column;
        align-items:flex-start;
    }

    .footer-grid{
        grid-template-columns:1fr 1fr;
        gap:35px;
    }

    .footer-grid > div:first-child,
    .footer-grid > div:last-child{
        grid-column:1/3;
    }

    .footer-bottom{
        flex-direction:column;
        align-items:flex-start;
        gap:15px;
    }

}

/* ==========================================================
   KONECTEK PHOTO DECORATION V2
   ========================================================== */

/* HERO PHOTO */

.hero-photo-shell{
    position:absolute;
    inset:25px -55px 25px 45px;
    border-radius:28px;
    overflow:hidden;
    z-index:0;
    opacity:.48;
    transform:rotate(-2deg);
    box-shadow:0 40px 90px rgba(0,0,0,.28);
}

.hero-main-photo{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:saturate(.82) contrast(1.04);
}

.hero-photo-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(4,45,77,.82) 0%,
            rgba(4,55,88,.43) 43%,
            rgba(0,91,133,.22) 100%
        ),
        linear-gradient(
            0deg,
            rgba(2,37,63,.68),
            transparent 62%
        );
}

.hero-screen{
    transform:
        perspective(1200px)
        rotateY(-8deg)
        rotateX(3deg)
        translateY(8px);
}


/* SOLUTION PHOTOS */

.solution-card{
    padding-bottom:22px;
}

.solution-photo{
    position:relative;
    height:125px;
    margin:
        8px
        -14px
        18px;
    overflow:hidden;
    border-radius:13px;
    background:#eef4f8;
}

.solution-photo:after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            0deg,
            rgba(4,46,78,.22),
            transparent 65%
        );
}

.solution-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:
        transform .45s ease,
        filter .45s ease;
}

.solution-card:hover .solution-photo img{
    transform:scale(1.06);
}


/* ==========================================================
   VISUAL STORY
   ========================================================== */

.visual-story-section{
    padding:90px 0;
    background:
        linear-gradient(
            180deg,
            #f8fbfd 0%,
            #ffffff 100%
        );
}

.visual-story-heading{
    max-width:none;
    display:grid;
    grid-template-columns:1.2fr .8fr;
    align-items:end;
    gap:70px;
    margin-bottom:38px;
}

.visual-story-heading h2{
    max-width:650px;
}

.visual-story-heading > p{
    margin:0 0 5px;
    max-width:470px;
}

.visual-story-grid{
    display:grid;
    grid-template-columns:1.35fr .65fr;
    grid-template-rows:255px 255px;
    gap:18px;
}

.visual-story-card{
    position:relative;
    min-height:250px;
    overflow:hidden;
    border-radius:23px;
    box-shadow:
        0 18px 45px rgba(4,47,79,.09);
}

.visual-story-large{
    grid-row:1 / 3;
}

.visual-story-card img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .65s ease;
}

.visual-story-card:hover img{
    transform:scale(1.045);
}

.visual-story-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            0deg,
            rgba(2,37,64,.86) 0%,
            rgba(2,37,64,.22) 58%,
            rgba(2,37,64,.02) 100%
        );
}

.visual-story-large .visual-story-overlay{
    background:
        linear-gradient(
            0deg,
            rgba(2,37,64,.91) 0%,
            rgba(2,37,64,.40) 55%,
            rgba(2,37,64,.03) 100%
        );
}

.visual-story-content{
    position:absolute;
    z-index:2;
    left:29px;
    right:29px;
    bottom:27px;
    color:#fff;
}

.visual-story-content > span{
    display:block;
    margin-bottom:8px;
    font-size:10px;
    line-height:1;
    font-weight:850;
    letter-spacing:1.8px;
    color:#59d7ff;
}

.visual-story-content h3{
    max-width:530px;
    margin:0;
    font-size:22px;
    line-height:1.15;
}

.visual-story-large .visual-story-content h3{
    font-size:32px;
    letter-spacing:-.8px;
}

.visual-story-content a{
    display:inline-flex;
    margin-top:16px;
    font-size:13px;
    font-weight:800;
    color:#fff;
}


/* ==========================================================
   PARTNER PHOTO
   ========================================================== */

.partner-copy{
    position:relative;
}

.partner-photo{
    position:relative;
    height:235px;
    margin-bottom:34px;
    border-radius:22px;
    overflow:hidden;
    box-shadow:
        0 22px 48px rgba(4,49,82,.13);
}

.partner-photo:after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            0deg,
            rgba(4,49,80,.50),
            transparent 62%
        );
}

.partner-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.partner-photo-badge{
    position:absolute;
    z-index:2;
    right:17px;
    bottom:17px;
    min-width:135px;
    padding:13px 17px;
    color:#fff;
    border:1px solid rgba(255,255,255,.25);
    border-radius:13px;
    background:
        rgba(5,50,82,.83);
    backdrop-filter:blur(12px);
}

.partner-photo-badge strong,
.partner-photo-badge span{
    display:block;
}

.partner-photo-badge strong{
    font-size:23px;
    line-height:1;
    color:#41ceff;
}

.partner-photo-badge span{
    margin-top:4px;
    font-size:10px;
    color:#dcecf5;
}


/* ==========================================================
   INDUSTRY PHOTO
   ========================================================== */

.industry-band-photo{
    position:relative;
    background:
        linear-gradient(
            90deg,
            rgba(3,42,71,.97) 0%,
            rgba(3,53,85,.91) 50%,
            rgba(3,62,94,.84) 100%
        ),
        url(
            "https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=2000&q=85"
        )
        center 55% / cover
        no-repeat;
}

.industry-band-photo:before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(
            circle at 75% 50%,
            rgba(0,176,239,.13),
            transparent 40%
        );
}

.industry-band-photo .industry-inner{
    position:relative;
    z-index:2;
}


/* subtle background details */

.solutions-section{
    position:relative;
    overflow:hidden;
}

.solutions-section:before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    right:-220px;
    top:60px;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(9,157,234,.075),
            transparent 70%
        );
    pointer-events:none;
}

.solutions-section:after{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    left:-220px;
    bottom:-70px;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(109,76,232,.055),
            transparent 70%
        );
    pointer-events:none;
}


/* responsive */

@media(max-width:900px){

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

    .visual-story-grid{
        grid-template-columns:1fr 1fr;
        grid-template-rows:390px 250px;
    }

    .visual-story-large{
        grid-column:1 / 3;
        grid-row:auto;
    }

    .hero-photo-shell{
        inset:20px -15px;
    }

}

@media(max-width:620px){

    .hero-photo-shell{
        inset:5px -8px;
        opacity:.37;
    }

    .solution-photo{
        height:165px;
    }

    .visual-story-section{
        padding:65px 0;
    }

    .visual-story-grid{
        display:grid;
        grid-template-columns:1fr;
        grid-template-rows:auto;
    }

    .visual-story-large{
        grid-column:auto;
        min-height:390px;
    }

    .visual-story-card{
        min-height:260px;
    }

    .visual-story-large .visual-story-content h3{
        font-size:26px;
    }

    .partner-photo{
        height:220px;
    }

}

/* ==========================================================
   KONECTEK UI V3
   compact photos / masonry / slider / newsletter / pro footer
   ========================================================== */

/* ----------------------------------------------------------
   REDUCIR FOTOS EXISTENTES
   ---------------------------------------------------------- */

.solution-photo{
    height:86px !important;
    margin:8px -6px 16px !important;
    border-radius:10px !important;
}

.partner-photo{
    height:165px !important;
    margin-bottom:26px !important;
}

.hero-photo-shell{
    inset:42px 0 42px 105px !important;
    opacity:.34 !important;
}

.hero-main-photo{
    filter:saturate(.75) contrast(1.04) brightness(.9);
}


/* ----------------------------------------------------------
   TYPOGRAPHY DETAILS
   ---------------------------------------------------------- */

h1,
h2,
h3{
    text-wrap:balance;
}

.section-heading h2,
.partner-copy h2,
.showcase-head h2,
.tech-slider-top h2,
.conversion-main h2{
    font-weight:850;
    letter-spacing:-1.8px;
}

.showcase-head h2 span,
.tech-slider-top h2 span,
.conversion-main h2 span{
    color:#28c6f3;
}


/* ----------------------------------------------------------
   COMPACT MASONRY
   ---------------------------------------------------------- */

.konectek-showcase{
    padding:76px 0;
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(4,150,231,.07),
            transparent 30%
        ),
        #fff;
}

.showcase-head{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:60px;
    align-items:end;
    margin-bottom:30px;
}

.showcase-head h2{
    margin:0;
    font-size:39px;
    line-height:1.08;
    color:var(--navy);
}

.showcase-head p{
    margin:0 0 5px;
    color:var(--muted);
    max-width:450px;
}

.masonry-tech{
    display:grid;
    grid-template-columns:1.35fr .65fr .65fr;
    grid-template-rows:170px 170px;
    gap:14px;
}

.masonry-card{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    background:#eff5f8;
    min-height:0;
    box-shadow:0 14px 32px rgba(7,52,84,.08);
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.masonry-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 45px rgba(7,52,84,.14);
}

.masonry-wide{
    grid-row:1 / 3;
}

.masonry-small{
    min-height:170px;
}

.masonry-mini{
    padding:24px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

.masonry-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s ease;
}

.masonry-card:hover img{
    transform:scale(1.045);
}

.masonry-shade{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            0deg,
            rgba(3,38,64,.82) 0%,
            rgba(3,38,64,.14) 65%,
            transparent 100%
        );
}

.masonry-copy{
    position:absolute;
    left:20px;
    right:20px;
    bottom:18px;
    z-index:2;
    color:#fff;
}

.masonry-copy small,
.masonry-mini small{
    display:block;
    font-size:9px;
    font-weight:850;
    letter-spacing:1.6px;
    margin-bottom:6px;
}

.masonry-copy small{
    color:#5ed9ff;
}

.masonry-copy h3{
    margin:0;
    max-width:390px;
    font-size:18px;
    line-height:1.1;
}

.masonry-wide .masonry-copy h3{
    font-size:26px;
}

.tech-gradient-card{
    color:#fff;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(77,216,255,.34),
            transparent 38%
        ),
        linear-gradient(135deg,#07456f,#087cab);
}

.security-gradient-card{
    color:#fff;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(167,123,255,.35),
            transparent 38%
        ),
        linear-gradient(135deg,#302269,#6747b9);
}

.tech-gradient-icon{
    width:37px;
    height:37px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:rgba(255,255,255,.13);
    border:1px solid rgba(255,255,255,.18);
    margin-bottom:auto;
    font-size:18px;
}

.masonry-mini h3{
    margin:0;
    font-size:17px;
    line-height:1.15;
}


/* ----------------------------------------------------------
   SLIDER
   ---------------------------------------------------------- */

.tech-slider-section{
    padding:0 0 82px;
    background:#fff;
}

.tech-slider-shell{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    padding:38px;
    color:#fff;
    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(26,188,255,.17),
            transparent 30%
        ),
        linear-gradient(115deg,#052e50,#063e67);
}

.tech-slider-top{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:26px;
}

.tech-slider-top h2{
    margin:0;
    font-size:32px;
    line-height:1.08;
}

.slider-controls{
    display:flex;
    gap:8px;
}

.slider-controls button{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.2);
    color:#fff;
    background:rgba(255,255,255,.08);
    cursor:pointer;
    transition:.2s;
}

.slider-controls button:hover{
    background:#fff;
    color:var(--navy);
}

.tech-slider-track{
    display:flex;
    gap:14px;
    overflow:auto;
    scroll-behavior:smooth;
    scrollbar-width:none;
    scroll-snap-type:x mandatory;
}

.tech-slider-track::-webkit-scrollbar{
    display:none;
}

.tech-slide{
    flex:0 0 calc(25% - 11px);
    min-width:245px;
    min-height:235px;
    padding:23px;
    border-radius:16px;
    scroll-snap-align:start;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.12);
    transition:.22s ease;
}

.tech-slide:hover{
    transform:translateY(-3px);
    background:rgba(255,255,255,.11);
}

.tech-slide-number{
    float:right;
    color:#6c93ae;
    font-size:10px;
    font-weight:850;
}

.tech-slide-icon{
    width:44px;
    height:44px;
    border-radius:13px;
    display:grid;
    place-items:center;
    background:#0aa1e9;
    margin-bottom:22px;
    font-size:22px;
}

.tech-slide h3{
    margin:0 0 8px;
    font-size:20px;
}

.tech-slide p{
    margin:0 0 18px;
    color:#c0d4e2;
    font-size:12px;
}

.tech-slide a{
    color:#5bd5ff;
    font-size:12px;
    font-weight:800;
}


/* ----------------------------------------------------------
   CONVERSION + NEWSLETTER
   ---------------------------------------------------------- */

.conversion-zone{
    padding:64px 0;
    color:#fff;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(56,205,255,.16),
            transparent 32%
        ),
        linear-gradient(120deg,#067dc4,#064978);
}

.conversion-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    align-items:center;
    gap:55px;
}

.conversion-main h2{
    margin:0;
    font-size:37px;
    line-height:1.04;
}

.conversion-main p{
    max-width:590px;
    color:#d7ebf6;
    margin:15px 0 24px;
}

.newsletter-card{
    padding:27px;
    border-radius:18px;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(13px);
}

.newsletter-label{
    display:block;
    font-size:9px;
    font-weight:850;
    letter-spacing:1.7px;
    color:#77ddff;
    margin-bottom:9px;
}

.newsletter-card h3{
    margin:0;
    font-size:21px;
    line-height:1.12;
}

.newsletter-card p{
    margin:10px 0 18px;
    color:#d9eaf3;
    font-size:12px;
}

.newsletter-form{
    display:flex;
    gap:8px;
}

.newsletter-form input{
    min-width:0;
    flex:1;
    height:46px;
    border:0;
    border-radius:999px;
    padding:0 17px;
    outline:none;
    color:var(--text);
}

.newsletter-form button{
    height:46px;
    padding:0 18px;
    border:0;
    border-radius:999px;
    background:#fff;
    color:var(--navy);
    font-weight:800;
    cursor:pointer;
    white-space:nowrap;
}

.newsletter-card small{
    display:block;
    margin-top:10px;
    color:#b8d6e6;
    font-size:9px;
}


/* ----------------------------------------------------------
   PROFESSIONAL FOOTER
   ---------------------------------------------------------- */

.site-footer-pro{
    padding:56px 0 18px;
    background:#032a48;
}

.footer-top-pro{
    display:grid;
    grid-template-columns:1.05fr 1.95fr;
    gap:70px;
}

.footer-brand-pro p{
    max-width:390px;
    color:#9fb8ca;
    font-size:13px;
    margin:20px 0;
}

.footer-contact-chips{
    display:flex;
    gap:9px;
    flex-wrap:wrap;
}

.footer-contact-chips a{
    padding:9px 13px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:999px;
    color:#d6e7f1;
    font-size:10px;
    background:rgba(255,255,255,.035);
}

.footer-columns-pro{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.footer-columns-pro > div{
    display:flex;
    flex-direction:column;
    gap:9px;
}

.footer-columns-pro h4{
    margin:4px 0 8px;
    color:#fff;
    font-size:12px;
}

.footer-columns-pro a,
.footer-columns-pro span{
    color:#9eb7c9;
    font-size:11px;
}

.footer-columns-pro a:hover{
    color:#fff;
}

.footer-divider{
    height:1px;
    background:rgba(255,255,255,.1);
    margin-top:38px;
}

.footer-bottom-pro{
    min-height:62px;
    display:grid;
    grid-template-columns:1fr auto auto;
    align-items:center;
    gap:25px;
    color:#819daf;
    font-size:10px;
}

.footer-legal{
    display:flex;
    gap:15px;
}

.footer-legal a{
    color:#819daf;
}

.footer-bottom-pro .footer-social{
    display:flex;
    gap:6px;
}

.footer-bottom-pro .footer-social a{
    width:28px;
    height:28px;
    border-radius:50%;
}


/* ----------------------------------------------------------
   RESPONSIVE V3
   ---------------------------------------------------------- */

@media(max-width:900px){

    .showcase-head,
    .conversion-grid,
    .footer-top-pro{
        grid-template-columns:1fr;
        gap:28px;
    }

    .masonry-tech{
        grid-template-columns:1fr 1fr;
        grid-template-rows:250px 160px 160px;
    }

    .masonry-wide{
        grid-column:1 / 3;
        grid-row:auto;
    }

    .tech-slide{
        flex-basis:45%;
    }

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

    .footer-bottom-pro{
        grid-template-columns:1fr auto;
    }

    .footer-bottom-pro .footer-social{
        grid-column:1 / 3;
    }

}

@media(max-width:620px){

    .solution-photo{
        height:110px !important;
    }

    .hero-photo-shell{
        inset:15px 0 !important;
    }

    .showcase-head h2{
        font-size:31px;
    }

    .masonry-tech{
        grid-template-columns:1fr;
        grid-template-rows:auto;
    }

    .masonry-wide{
        grid-column:auto;
        min-height:270px;
    }

    .masonry-small{
        min-height:185px;
    }

    .masonry-mini{
        min-height:180px;
    }

    .tech-slider-shell{
        padding:25px 20px;
        border-radius:18px;
    }

    .tech-slider-top{
        align-items:flex-start;
        flex-direction:column;
    }

    .tech-slider-top h2{
        font-size:28px;
    }

    .tech-slide{
        flex-basis:82%;
        min-width:82%;
    }

    .conversion-main h2{
        font-size:31px;
    }

    .newsletter-form{
        flex-direction:column;
    }

    .newsletter-form button{
        width:100%;
    }

    .footer-columns-pro{
        grid-template-columns:1fr 1fr;
        gap:28px 20px;
    }

    .footer-bottom-pro{
        grid-template-columns:1fr;
        align-items:flex-start;
        padding-block:20px;
    }

    .footer-bottom-pro .footer-social{
        grid-column:auto;
    }

}


/* ==========================================================
   KONECTEK PROFESSIONAL NAV V4
   ========================================================== */

svg{
    stroke:currentColor;
    stroke-width:1.55;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
}


/* TOP BAR */

.site-header-pro{
    overflow:visible;
}

.header-topbar{
    height:31px;
    background:#042b49;
    color:#a9c1d2;
}

.header-topbar-inner{
    width:min(calc(100% - 48px),var(--max));
    height:100%;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:9px;
    letter-spacing:.2px;
}

.header-topbar-inner > div{
    display:flex;
    align-items:center;
    gap:10px;
}

.header-topbar a{
    color:#c8d8e4;
}

.topbar-dot{
    width:3px;
    height:3px;
    border-radius:50%;
    background:#32bceb;
}


/* MAIN */

.header-main{
    width:min(calc(100% - 48px),var(--max));
    height:76px;
    margin:auto;
    display:flex;
    align-items:center;
    gap:30px;
}

.brand-pro{
    min-width:220px;
}

.brand-pro .brand-copy strong{
    font-size:24px;
}


/* NAV */

.main-nav-pro{
    display:flex;
    align-items:center;
    gap:25px;
    margin-left:auto;
    height:76px;
}

.main-nav-pro > a,
.mega-trigger{
    position:relative;
    height:76px;
    border:0;
    padding:0;
    background:transparent;
    color:#173a57;
    display:flex;
    align-items:center;
    gap:5px;
    font-weight:700;
    font-size:13px;
    cursor:pointer;
}

.main-nav-pro > a:after,
.mega-trigger:after{
    content:"";
    position:absolute;
    left:50%;
    bottom:13px;
    width:0;
    height:2px;
    background:#069ce8;
    transform:translateX(-50%);
    transition:.2s;
}

.main-nav-pro > a:hover:after,
.mega-trigger:hover:after,
.main-nav-pro .active:after{
    width:22px;
}

.mega-trigger svg{
    width:13px;
    height:13px;
}


/* ACTION ICONS */

.header-actions{
    display:flex;
    align-items:center;
    gap:7px;
    margin-left:7px;
}

.nav-icon-button{
    position:relative;
    width:39px;
    height:39px;
    border:1px solid #dde7ee;
    border-radius:50%;
    background:#fff;
    color:#143c5b;
    display:grid;
    place-items:center;
    cursor:pointer;
    transition:.2s;
}

.nav-icon-button svg{
    width:18px;
    height:18px;
}

.nav-icon-button:hover{
    border-color:#9bd5f3;
    color:#078ed6;
    background:#f6fbfe;
}

.nav-action-link,
.nav-register{
    height:39px;
    padding:0 12px;
    border-radius:999px;
    display:flex;
    align-items:center;
    gap:6px;
    font-size:11px;
    font-weight:720;
    white-space:nowrap;
}

.nav-action-link{
    color:#173c59;
}

.nav-register{
    border:1px solid #dbe7ee;
    color:#173c59;
}

.nav-action-link svg,
.nav-register svg{
    width:16px;
    height:16px;
}

.cart-count{
    position:absolute;
    top:-4px;
    right:-3px;
    width:16px;
    height:16px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#079eea;
    color:#fff;
    font-size:8px;
    font-weight:800;
}


/* ==========================================================
   MEGA MENU
   ========================================================== */

.mega-trigger-wrap{
    position:relative;
    height:76px;
}

.mega-menu-pro{
    position:fixed;
    z-index:1100;
    top:107px;
    left:50%;
    width:min(1160px,calc(100vw - 60px));
    transform:
        translateX(-50%)
        translateY(9px);

    visibility:hidden;
    opacity:0;
    pointer-events:none;

    padding:27px;
    border:1px solid #e2ebf1;
    border-radius:19px;

    background:#fff;

    box-shadow:
        0 35px 70px
        rgba(3,39,66,.17);

    display:grid;
    grid-template-columns:250px 1fr;
    gap:30px;

    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility .18s ease;
}

.mega-trigger-wrap:hover .mega-menu-pro,
.mega-trigger-wrap:focus-within .mega-menu-pro{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transform:
        translateX(-50%)
        translateY(0);
}

.mega-intro{
    padding:8px 24px 8px 4px;
    border-right:1px solid #e6edf2;
}

.mega-label{
    color:#079be6;
    font-size:9px;
    font-weight:850;
    letter-spacing:1.7px;
}

.mega-intro h3{
    margin:9px 0 8px;
    font-size:21px;
    line-height:1.1;
    color:#073454;
}

.mega-intro p{
    margin:0 0 18px;
    color:#718596;
    font-size:11px;
}

.mega-all-link{
    display:flex;
    align-items:center;
    gap:7px;
    color:#078edb;
    font-size:11px;
    font-weight:800;
}

.mega-all-link svg{
    width:14px;
}

.mega-columns{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:21px;
}

.mega-service-column{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.mega-group-title{
    margin-bottom:4px;
    padding-bottom:9px;
    border-bottom:1px solid #e5edf2;
    color:#063654;
    font-size:13px;
    font-weight:850;
}

.mega-service-column > a:not(.mega-group-title){
    position:relative;
    padding:5px 7px 5px 0;
    border-radius:7px;
    color:#526d81;
    font-size:10.5px;
    transition:.16s;
}

.mega-service-column > a:not(.mega-group-title):hover{
    padding-left:7px;
    color:#058fd7;
    background:#f5fafc;
}


/* ==========================================================
   SEARCH
   ========================================================== */

.search-overlay{
    position:fixed;
    z-index:3000;
    inset:0;
    padding-top:95px;

    visibility:hidden;
    opacity:0;

    background:rgba(3,30,50,.5);
    backdrop-filter:blur(6px);

    transition:.2s;
}

.search-overlay.open{
    visibility:visible;
    opacity:1;
}

.search-panel{
    width:min(760px,calc(100% - 32px));
    max-height:75vh;
    overflow:auto;
    margin:auto;
    padding:22px;
    border-radius:18px;
    background:#fff;
    box-shadow:0 30px 80px rgba(0,20,38,.25);
}

.search-panel-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:17px;
    color:#6a8091;
    font-size:11px;
    font-weight:800;
}

.search-close,
.drawer-close{
    width:34px;
    height:34px;
    border:1px solid #e0e8ee;
    border-radius:50%;
    background:#fff;
    display:grid;
    place-items:center;
    cursor:pointer;
}

.search-close svg,
.drawer-close svg{
    width:16px;
}

.search-input-wrap{
    height:56px;
    border:1px solid #dce7ee;
    border-radius:14px;
    display:flex;
    align-items:center;
    gap:11px;
    padding:0 16px;
}

.search-input-wrap svg{
    width:19px;
    color:#7d93a4;
}

.search-input-wrap input{
    flex:1;
    border:0;
    outline:0;
    font-size:15px;
}

.search-results{
    display:grid;
    gap:7px;
    margin-top:13px;
}

.search-result-item{
    padding:12px 14px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#244761;
    font-size:12px;
}

.search-result-item:hover{
    background:#f4f9fc;
    color:#078fd9;
}


/* ==========================================================
   RIGHT DRAWER
   ========================================================== */

.side-drawer-overlay{
    position:fixed;
    z-index:3998;
    inset:0;

    visibility:hidden;
    opacity:0;

    background:rgba(2,27,46,.45);
    backdrop-filter:blur(4px);

    transition:.24s;
}

.side-drawer-overlay.open{
    visibility:visible;
    opacity:1;
}

.side-drawer{
    position:fixed;
    z-index:3999;
    top:0;
    right:0;
    bottom:0;

    width:min(420px,92vw);

    background:#fff;

    transform:translateX(105%);
    transition:transform .3s cubic-bezier(.22,.8,.22,1);

    display:flex;
    flex-direction:column;

    box-shadow:
        -30px 0 80px
        rgba(3,30,52,.16);
}

.side-drawer.open{
    transform:translateX(0);
}

.drawer-header{
    min-height:83px;
    padding:16px 22px;
    border-bottom:1px solid #e8eef2;

    display:flex;
    align-items:center;
    justify-content:space-between;
}

.drawer-header .brand{
    transform:scale(.85);
    transform-origin:left center;
}

.drawer-body{
    flex:1;
    overflow:auto;
    padding:31px 28px;
}

.drawer-kicker{
    color:#079be6;
    font-size:9px;
    font-weight:850;
    letter-spacing:1.8px;
}

.drawer-body > h2{
    margin:8px 0 9px;
    color:#073754;
    font-size:27px;
    line-height:1.05;
}

.drawer-body > p{
    margin:0 0 25px;
    color:#728596;
    font-size:12px;
}

.drawer-support-card{
    display:flex;
    gap:13px;
    padding:17px;
    border-radius:14px;
    background:#f2f8fb;
}

.drawer-support-icon{
    width:41px;
    height:41px;
    flex:none;
    border-radius:11px;
    background:#fff;
    display:grid;
    place-items:center;
    color:#078fd9;
}

.drawer-support-icon svg{
    width:20px;
}

.drawer-support-card strong{
    color:#123c59;
    font-size:13px;
}

.drawer-support-card p{
    margin:3px 0 0;
    color:#718898;
    font-size:10px;
}

.drawer-contact-list{
    display:grid;
    gap:8px;
    margin:20px 0 28px;
}

.drawer-contact-list a{
    display:flex;
    align-items:center;
    gap:13px;
    min-height:59px;
    padding:10px 12px;
    border:1px solid #e1eaf0;
    border-radius:12px;
}

.drawer-contact-list svg{
    width:20px;
    color:#078fd9;
}

.drawer-contact-list small,
.drawer-contact-list strong{
    display:block;
}

.drawer-contact-list small{
    color:#8395a3;
    font-size:9px;
}

.drawer-contact-list strong{
    color:#163d59;
    font-size:11px;
}

.drawer-links{
    display:flex;
    flex-direction:column;
}

.drawer-links > span{
    margin-bottom:7px;
    color:#8a9ba8;
    font-size:9px;
    font-weight:850;
    letter-spacing:1.6px;
}

.drawer-links a{
    min-height:43px;
    border-bottom:1px solid #ecf1f4;

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

    color:#284b64;
    font-size:11px;
    font-weight:700;
}

.drawer-links svg{
    width:14px;
}

.drawer-footer{
    padding:19px 27px;
    border-top:1px solid #e7edf1;
}

.drawer-footer .button{
    width:100%;
}


/* ==========================================================
   SERVICE DETAIL
   ========================================================== */

.service-detail-hero{
    position:relative;
    min-height:570px;
    overflow:hidden;
    background:#052f51;
}

.service-detail-bg{
    position:absolute;
    inset:0;
}

.service-detail-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.service-detail-shade{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(3,38,66,.97) 0%,
            rgba(3,45,75,.90) 45%,
            rgba(3,52,83,.45) 72%,
            rgba(3,50,80,.25) 100%
        );
}

.service-detail-hero-grid{
    position:relative;
    z-index:2;

    min-height:570px;

    display:flex;
    align-items:center;
}

.service-detail-copy{
    max-width:680px;
    padding:65px 0;
    color:#fff;
}

.service-back{
    display:inline-flex;
    margin-bottom:27px;
    color:#a9ccdf;
    font-size:11px;
    font-weight:700;
}

.service-detail-icon{
    width:52px;
    height:52px;
    margin-bottom:16px;
    border-radius:14px;
    background:var(--service-color);
    display:grid;
    place-items:center;
}

.service-detail-icon svg{
    width:26px;
    height:26px;
    stroke:#fff;
}

.service-kicker{
    color:#54d1ff;
    font-size:10px;
    font-weight:850;
    letter-spacing:1.8px;
}

.service-detail-copy h1{
    margin:8px 0 4px;
    font-size:55px;
    line-height:1;
    letter-spacing:-2px;
}

.service-detail-copy h2{
    margin:0 0 18px;
    font-size:21px;
    font-weight:500;
    color:#d6e7f1;
}

.service-detail-copy > p{
    max-width:625px;
    margin:0 0 28px;
    color:#c8d9e5;
    font-size:15px;
}

.service-hero-actions{
    display:flex;
    align-items:center;
    gap:20px;
}

.service-secondary-link{
    color:#fff;
    font-size:12px;
    font-weight:750;
}


/* body */

.service-detail-body{
    padding:82px 0;
}

.service-body-grid{
    display:grid;
    grid-template-columns:1.4fr .6fr;
    gap:80px;
}

.service-main-column h2{
    max-width:620px;
    margin:0;
    color:#073655;
    font-size:38px;
    line-height:1.08;
    letter-spacing:-1.4px;
}

.service-lead{
    max-width:680px;
    color:#657d8e;
    font-size:15px;
    margin:17px 0 30px;
}

.service-benefits-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.service-benefits-grid article{
    min-height:95px;
    padding:17px;
    border:1px solid #e1eaf0;
    border-radius:13px;
    display:flex;
    gap:12px;
    align-items:flex-start;
}

.benefit-check{
    width:28px;
    height:28px;
    flex:none;
    border-radius:50%;
    background:#edf8fd;
    display:grid;
    place-items:center;
    color:#078fd9;
}

.benefit-check svg{
    width:14px;
}

.service-benefits-grid p{
    margin:4px 0 0;
    color:#36556c;
    font-size:12px;
}

.service-info-card{
    position:sticky;
    top:140px;
    padding:28px;
    border-radius:18px;
    background:#f3f8fb;
    border:1px solid #e2ebf0;
}

.service-info-label{
    color:#078fd9;
    font-size:9px;
    font-weight:850;
    letter-spacing:1.5px;
}

.service-info-card h3{
    margin:9px 0;
    color:#073653;
    font-size:22px;
    line-height:1.08;
}

.service-info-card p{
    margin:0 0 20px;
    color:#718797;
    font-size:11px;
}


/* process */

.service-process{
    padding:75px 0;
    background:#f5f9fc;
    border-top:1px solid #e6edf2;
}

.service-process-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:11px;
}

.service-process-grid article{
    padding:22px;
    border-radius:13px;
    border:1px solid #dfe8ee;
    background:#fff;
}

.service-process-grid strong{
    color:#079be6;
    font-size:10px;
}

.service-process-grid h3{
    margin:10px 0 5px;
    color:#0b3855;
    font-size:15px;
}

.service-process-grid p{
    margin:0;
    color:#748796;
    font-size:10px;
}


/* ==========================================================
   ACCOUNT / REGISTER / CART
   ========================================================== */

.utility-page{
    min-height:600px;
    padding:85px 0;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(5,157,230,.08),
            transparent 30%
        ),
        #f8fbfd;
}

.utility-page-grid{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:70px;
    align-items:center;
}

.utility-page-copy h1,
.cart-page-head h1{
    margin:0;
    color:#073654;
    font-size:47px;
    letter-spacing:-1.8px;
}

.utility-page-copy p,
.cart-page-head p{
    color:#708495;
}

.utility-card{
    max-width:570px;
    padding:34px;
    border-radius:19px;
    background:#fff;
    border:1px solid #dfe9ef;
    box-shadow:0 20px 55px rgba(5,49,80,.09);
}

.utility-card h2{
    margin:0 0 22px;
    color:#073654;
}

.utility-card label{
    display:block;
    margin-bottom:15px;
    color:#35566d;
    font-size:10px;
    font-weight:750;
}

.utility-card input{
    display:block;
    width:100%;
    margin-top:6px;
    padding:12px 14px;
    border:1px solid #dae6ed;
    border-radius:9px;
    outline:none;
}

.utility-note{
    margin:18px 0 0;
    color:#8596a3;
    font-size:9px;
}

.cart-page-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
}

.cart-page-head p{
    max-width:620px;
}

.empty-cart{
    min-height:300px;
    margin-top:35px;
    border:1px dashed #cad9e3;
    border-radius:18px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:#fff;
}

.empty-cart svg{
    width:42px;
    height:42px;
    color:#88a3b5;
}

.empty-cart h2{
    margin:15px 0 5px;
    color:#153e5b;
}

.empty-cart p{
    max-width:420px;
    margin:0;
    color:#7b909f;
    font-size:12px;
}


/* ==========================================================
   RESPONSIVE HEADER V4
   ========================================================== */

@media(max-width:1180px){

    .nav-account-link span,
    .nav-register span{
        display:none;
    }

    .nav-account-link,
    .nav-register{
        width:39px;
        padding:0;
        justify-content:center;
        border:1px solid #dde7ee;
    }

}


@media(max-width:980px){

    .header-topbar,
    .main-nav-pro,
    .header-actions{
        display:none;
    }

    .header-main{
        height:72px;
    }

    .mobile-menu-button-pro{
        display:grid;
        place-items:center;
        margin-left:auto;
        width:40px;
        height:40px;
        border:1px solid #dce6ed;
        border-radius:50%;
        background:#fff;
    }

    .mobile-menu-button-pro svg{
        width:19px;
    }

    .mobile-menu-pro{
        top:72px;
        max-height:calc(100vh - 72px);
        overflow:auto;
    }

    .mobile-menu-pro details{
        padding:10px 0;
        border-bottom:1px solid #eef2f5;
    }

    .mobile-menu-pro summary{
        cursor:pointer;
        font-weight:750;
        font-size:14px;
    }

    .mobile-menu-pro details strong{
        display:block;
        margin:15px 0 3px;
        color:#078fd9;
        font-size:10px;
    }

    .mobile-menu-pro details a{
        padding:6px 0 6px 10px;
        border:0;
        font-size:11px;
        font-weight:600;
    }

    .mega-menu-pro{
        display:none;
    }

    .service-body-grid{
        grid-template-columns:1fr;
        gap:35px;
    }

    .service-info-card{
        position:static;
    }

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

}


@media(max-width:620px){

    .header-main{
        width:calc(100% - 28px);
    }

    .service-detail-hero,
    .service-detail-hero-grid{
        min-height:520px;
    }

    .service-detail-copy h1{
        font-size:39px;
    }

    .service-detail-copy h2{
        font-size:17px;
    }

    .service-detail-copy > p{
        font-size:13px;
    }

    .service-benefits-grid{
        grid-template-columns:1fr;
    }

    .service-main-column h2{
        font-size:31px;
    }

    .service-process-grid{
        grid-template-columns:1fr 1fr;
    }

    .utility-page-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .cart-page-head{
        align-items:flex-start;
        flex-direction:column;
    }

}

/* ==========================================================
   HOME COMMERCIAL PACKAGES V5
   ========================================================== */

.commercial-packages{
    padding:82px 0;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(5,158,231,.08),
            transparent 30%
        ),
        #f7fafc;
    border-top:1px solid #e6edf2;
    border-bottom:1px solid #e6edf2;
}

.commercial-packages-head{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    align-items:end;
    gap:55px;
    margin-bottom:34px;
}

.commercial-packages-head h2{
    margin:0;
    max-width:650px;
    color:#073654;
    font-size:40px;
    line-height:1.07;
    letter-spacing:-1.7px;
}

.commercial-packages-head h2 span{
    color:#078fd9;
}

.commercial-packages-head > p{
    max-width:460px;
    margin:0 0 5px;
    color:#6c8191;
    font-size:13px;
}


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


.commercial-package{
    position:relative;
    min-height:445px;
    padding:27px;
    border-radius:20px;
    border:1px solid #dde8ef;
    background:#fff;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.commercial-package:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:var(--package-color);
}

.commercial-package:hover{
    transform:translateY(-5px);
    box-shadow:0 24px 55px rgba(5,48,80,.11);
    border-color:#cddfe9;
}


.package-connect{
    --package-color:#078df0;
}

.package-protect{
    --package-color:#754ee8;
}

.package-ai{
    --package-color:#08aa81;
}


.commercial-package.featured{
    box-shadow:0 18px 45px rgba(77,61,164,.12);
}


.package-badge{
    position:absolute;
    top:18px;
    right:18px;
    padding:6px 9px;
    border-radius:999px;
    color:#6845d7;
    background:#f0ebff;
    font-size:8px;
    font-weight:850;
    letter-spacing:1px;
}


.package-top{
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:22px;
}


.package-icon{
    width:46px;
    height:46px;
    border-radius:13px;
    display:grid;
    place-items:center;
    color:#fff;
    background:var(--package-color);
}

.package-icon svg{
    width:23px;
    height:23px;
    stroke:#fff;
    stroke-width:1.5;
}


.package-label{
    color:var(--package-color);
    font-size:9px;
    font-weight:900;
    letter-spacing:1.7px;
}


.commercial-package h3{
    margin:0 0 10px;
    color:#083654;
    font-size:25px;
    line-height:1.05;
    letter-spacing:-.7px;
}


.commercial-package > p{
    margin:0 0 20px;
    min-height:58px;
    color:#6c8191;
    font-size:12px;
}


.commercial-package ul{
    list-style:none;
    padding:0;
    margin:0 0 24px;
    display:grid;
    gap:9px;
}


.commercial-package li{
    display:flex;
    align-items:center;
    gap:9px;
    color:#315068;
    font-size:11px;
}


.commercial-package li > span{
    width:20px;
    height:20px;
    flex:none;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:var(--package-color);
    background:
        color-mix(
            in srgb,
            var(--package-color) 9%,
            white
        );
    font-size:9px;
    font-weight:900;
}


.package-bottom{
    margin-top:auto;
    padding-top:19px;
    border-top:1px solid #e7eef2;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:15px;
}


.package-price-placeholder small,
.package-price-placeholder strong{
    display:block;
}


.package-price-placeholder small{
    margin-bottom:2px;
    color:#8a9ba8;
    font-size:8px;
    text-transform:uppercase;
    letter-spacing:.8px;
}


.package-price-placeholder strong{
    color:#153d59;
    font-size:12px;
}


.package-link{
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--package-color);
    font-size:11px;
    font-weight:850;
}


.packages-footnote{
    margin-top:18px;
    padding:20px 22px;
    border:1px solid #dce8ef;
    border-radius:15px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
}


.packages-footnote > div{
    display:flex;
    align-items:center;
    gap:13px;
}


.packages-footnote-icon{
    width:36px;
    height:36px;
    flex:none;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#078fd9;
    background:#edf8fd;
}


.packages-footnote-icon svg{
    width:17px;
    height:17px;
}


.packages-footnote p{
    max-width:760px;
    margin:0;
    color:#677d8e;
    font-size:11px;
}


@media(max-width:900px){

    .commercial-packages-head{
        grid-template-columns:1fr;
        gap:12px;
    }

    .commercial-package-grid{
        grid-template-columns:1fr;
    }

    .commercial-package{
        min-height:0;
    }

}


@media(max-width:620px){

    .commercial-packages{
        padding:65px 0;
    }

    .commercial-packages-head h2{
        font-size:31px;
    }

    .packages-footnote{
        align-items:flex-start;
        flex-direction:column;
    }

    .packages-footnote .button{
        width:100%;
    }

}

/* ==========================================================
   KONECTEK PACKAGE ICON HARD FIX V6
   Evita SVG gigantes si alguna regla anterior es cacheada
   ========================================================== */

.commercial-packages svg{
    display:block !important;
    max-width:100% !important;
    max-height:100% !important;
}

.commercial-package .package-icon{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
    max-width:46px !important;
    max-height:46px !important;

    display:grid !important;
    place-items:center !important;

    border-radius:13px !important;
    overflow:hidden !important;
}

.commercial-package .package-icon svg{
    width:23px !important;
    height:23px !important;
    min-width:23px !important;
    min-height:23px !important;
    max-width:23px !important;
    max-height:23px !important;

    stroke:#fff !important;
    stroke-width:1.5 !important;
    fill:none !important;
}

.commercial-package-grid{
    position:relative !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:18px !important;
}

.commercial-package{
    position:relative !important;
    width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
}

@media(max-width:900px){

    .commercial-package-grid{
        grid-template-columns:1fr !important;
    }

}

/* ==========================================================
   HOME CONTACT / QUOTE BOX V7
   ========================================================== */

.home-contact-box{
    padding:84px 0;
    background:#fff;
}

.home-contact-shell{
    position:relative;
    overflow:hidden;

    display:grid;
    grid-template-columns:.9fr 1.1fr;

    border-radius:24px;

    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(35,195,243,.18),
            transparent 36%
        ),
        linear-gradient(
            125deg,
            #052e50 0%,
            #06456f 48%,
            #f7fafc 48%,
            #ffffff 100%
        );

    box-shadow:
        0 28px 70px
        rgba(4,44,73,.14);

    border:1px solid #dfe8ee;
}


/* LEFT */

.home-contact-copy{
    padding:45px 42px;
    color:#fff;
}

.home-contact-copy h2{
    margin:0;
    max-width:480px;

    font-size:38px;
    line-height:1.05;

    letter-spacing:-1.7px;
}

.home-contact-copy h2 span{
    display:block;
    color:#48d1fa;
}

.home-contact-copy > p{
    max-width:475px;
    margin:17px 0 28px;

    color:#c8dbe7;
    font-size:13px;
}


.home-contact-points{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.home-contact-points > div{
    display:flex;
    align-items:center;
    gap:11px;

    padding:12px;

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

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

.home-contact-point-icon{
    width:36px;
    height:36px;
    flex:none;

    display:grid;
    place-items:center;

    border-radius:10px;

    color:#55d3fb;
    background:rgba(255,255,255,.08);
}

.home-contact-point-icon svg{
    width:18px;
    height:18px;
}

.home-contact-points small,
.home-contact-points strong{
    display:block;
}

.home-contact-points small{
    color:#92b6cb;
    font-size:8px;
}

.home-contact-points strong{
    color:#fff;
    font-size:11px;
}


.home-contact-note{
    margin-top:20px;
    padding-top:18px;

    display:flex;
    gap:10px;

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

.home-contact-note > span{
    width:25px;
    height:25px;
    flex:none;

    display:grid;
    place-items:center;

    color:#42cef8;
}

.home-contact-note svg{
    width:17px;
}

.home-contact-note p{
    margin:1px 0 0;
    max-width:420px;

    color:#a9c4d5;
    font-size:10px;
}


/* RIGHT FORM */

.home-quote-form{
    padding:38px 40px;

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

.quote-form-head{
    margin-bottom:22px;
}

.quote-form-head > span{
    color:#078fd9;
    font-size:9px;
    font-weight:850;
    letter-spacing:1.6px;
}

.quote-form-head h3{
    margin:5px 0 0;

    color:#073654;

    font-size:24px;
    line-height:1.1;

    letter-spacing:-.7px;
}


.quote-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.home-quote-form label{
    display:block;
}

.home-quote-form label > span{
    display:block;

    margin-bottom:6px;

    color:#34566e;

    font-size:9px;
    font-weight:800;
}

.home-quote-form input,
.home-quote-form select,
.home-quote-form textarea{
    width:100%;

    border:1px solid #d9e5ec;
    border-radius:9px;

    outline:0;

    background:#fbfdfe;

    color:#193e58;

    transition:
        border-color .18s,
        box-shadow .18s;
}

.home-quote-form input,
.home-quote-form select{
    height:44px;
    padding:0 12px;
}

.home-quote-form textarea{
    padding:12px;
    resize:vertical;
}

.home-quote-form input:focus,
.home-quote-form select:focus,
.home-quote-form textarea:focus{
    border-color:#47afe8;

    box-shadow:
        0 0 0 3px
        rgba(5,153,228,.08);
}


.quote-message{
    margin-top:14px;
}


.quote-submit-row{
    margin-top:16px;

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

.quote-submit-row small{
    color:#8295a3;
    font-size:9px;
}


/* decorative detail */

.home-contact-shell:before{
    content:"";

    position:absolute;
    left:41%;
    top:-70px;

    width:160px;
    height:160px;

    border-radius:50%;

    border:
        1px solid
        rgba(78,210,250,.13);

    pointer-events:none;
}

.home-contact-shell:after{
    content:"";

    position:absolute;
    left:38%;
    bottom:-110px;

    width:220px;
    height:220px;

    border-radius:50%;

    border:
        1px solid
        rgba(78,210,250,.1);

    pointer-events:none;
}


@media(max-width:900px){

    .home-contact-shell{
        grid-template-columns:1fr;

        background:
            linear-gradient(
                180deg,
                #052e50 0%,
                #06456f 43%,
                #fff 43%,
                #fff 100%
            );
    }

}


@media(max-width:620px){

    .home-contact-box{
        padding:64px 0;
    }

    .home-contact-copy{
        padding:32px 24px;
    }

    .home-contact-copy h2{
        font-size:31px;
    }

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

    .home-quote-form{
        padding:28px 22px;
    }

    .quote-form-grid{
        grid-template-columns:1fr;
    }

    .quote-submit-row{
        align-items:flex-start;
        flex-direction:column;
    }

    .quote-submit-row .button{
        width:100%;
    }

}

/* ==========================================================
   KONECTEK HERO SLIDER V8
   ========================================================== */

.kone-hero-slider{
    position:relative;
    height:640px;
    min-height:640px;
    overflow:hidden;
    background:#042d4d;
    color:#fff;
}


/* slides */

.kone-hero-track,
.kone-hero-slide{
    position:absolute;
    inset:0;
}

.kone-hero-slide{
    visibility:hidden;
    opacity:0;
    transition:
        opacity .95s cubic-bezier(.22,.8,.22,1),
        visibility .95s;
}

.kone-hero-slide.active{
    visibility:visible;
    opacity:1;
    z-index:2;
}


/* background */

.kone-hero-bg{
    position:absolute;
    inset:-3%;
    overflow:hidden;
}

.kone-hero-bg img{
    width:100%;
    height:100%;
    object-fit:cover;

    transform:
        scale(1.08)
        translate3d(0,0,0);

    will-change:transform;

    animation:
        koneHeroMotion 13s
        ease-in-out
        infinite alternate;
}


/* each active image starts another movement */

.kone-hero-slide:nth-child(2) .kone-hero-bg img{
    animation-name:koneHeroMotionTwo;
}

.kone-hero-slide:nth-child(3) .kone-hero-bg img{
    animation-name:koneHeroMotionThree;
}

.kone-hero-slide:nth-child(4) .kone-hero-bg img{
    animation-name:koneHeroMotionFour;
}


@keyframes koneHeroMotion{

    0%{
        transform:
            scale(1.08)
            translate3d(-1.5%,0,0);
    }

    100%{
        transform:
            scale(1.16)
            translate3d(1.5%,-1.5%,0);
    }

}


@keyframes koneHeroMotionTwo{

    0%{
        transform:
            scale(1.10)
            translate3d(2%,0,0);
    }

    100%{
        transform:
            scale(1.17)
            translate3d(-2%,-1%,0);
    }

}


@keyframes koneHeroMotionThree{

    0%{
        transform:
            scale(1.08)
            translate3d(0,-1%,0);
    }

    100%{
        transform:
            scale(1.16)
            translate3d(1.5%,1%,0);
    }

}


@keyframes koneHeroMotionFour{

    0%{
        transform:
            scale(1.10)
            translate3d(-1%,1%,0);
    }

    100%{
        transform:
            scale(1.18)
            translate3d(1.5%,-1%,0);
    }

}


/* overlays */

.kone-hero-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(3,37,65,.98) 0%,
            rgba(3,43,72,.91) 35%,
            rgba(3,48,77,.64) 58%,
            rgba(3,48,77,.18) 100%
        );
}

.kone-hero-overlay-purple{
    background:
        linear-gradient(
            90deg,
            rgba(21,24,61,.98) 0%,
            rgba(33,29,82,.90) 38%,
            rgba(44,31,99,.58) 65%,
            rgba(31,24,70,.18) 100%
        );
}

.kone-hero-overlay-green{
    background:
        linear-gradient(
            90deg,
            rgba(3,46,58,.98) 0%,
            rgba(3,62,70,.91) 38%,
            rgba(2,89,89,.58) 66%,
            rgba(2,85,81,.14) 100%
        );
}


/* subtle grid */

.kone-hero-grid-effect{
    position:absolute;
    inset:0;

    opacity:.08;

    background-image:
        linear-gradient(
            rgba(255,255,255,.15) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.15) 1px,
            transparent 1px
        );

    background-size:54px 54px;

    mask-image:
        linear-gradient(
            90deg,
            black,
            rgba(0,0,0,.6),
            transparent
        );
}


/* content */

.kone-hero-content{
    position:relative;
    z-index:3;
    height:100%;
    display:flex;
    align-items:center;
}

.kone-hero-copy{
    max-width:690px;
    padding-bottom:35px;
}


/* animated content */

.kone-hero-kicker,
.kone-hero-copy h1,
.kone-hero-copy > p,
.kone-hero-actions,
.kone-hero-stats{
    opacity:0;
    transform:translateY(22px);
}

.kone-hero-slide.active .kone-hero-kicker{
    animation:
        koneHeroTextIn .75s
        .20s
        forwards;
}

.kone-hero-slide.active .kone-hero-copy h1{
    animation:
        koneHeroTextIn .85s
        .32s
        forwards;
}

.kone-hero-slide.active .kone-hero-copy > p{
    animation:
        koneHeroTextIn .8s
        .45s
        forwards;
}

.kone-hero-slide.active .kone-hero-actions{
    animation:
        koneHeroTextIn .8s
        .56s
        forwards;
}

.kone-hero-slide.active .kone-hero-stats{
    animation:
        koneHeroTextIn .8s
        .67s
        forwards;
}


@keyframes koneHeroTextIn{

    to{
        opacity:1;
        transform:translateY(0);
    }

}


.kone-hero-kicker{
    display:inline-flex;
    align-items:center;
    gap:9px;

    margin-bottom:14px;

    color:#50d1fc;

    font-size:10px;
    font-weight:850;
    letter-spacing:2px;
}

.kone-hero-kicker:before{
    content:"";
    width:24px;
    height:1px;
    background:currentColor;
}

.kone-hero-kicker.purple{
    color:#c9a7ff;
}

.kone-hero-kicker.green{
    color:#57e7c1;
}


.kone-hero-copy h1{
    max-width:680px;

    margin:0;

    font-size:59px;
    line-height:.99;

    letter-spacing:-2.7px;
    font-weight:860;

    text-wrap:balance;
}

.kone-hero-copy h1 span{
    display:block;
    color:#4ed0fa;
}

.kone-hero-slide:nth-child(3)
.kone-hero-copy h1 span{
    color:#c7a8ff;
}

.kone-hero-slide:nth-child(4)
.kone-hero-copy h1 span{
    color:#59e5bf;
}


.kone-hero-copy > p{
    max-width:590px;

    margin:21px 0 27px;

    color:#d1e0e9;

    font-size:15px;
    line-height:1.65;
}


.kone-hero-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}


.kone-hero-outline{
    color:#fff;
    border:1px solid rgba(255,255,255,.42);
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(8px);
}

.kone-hero-outline:hover{
    color:#073654;
    background:#fff;
}


/* stats */

.kone-hero-stats{
    display:flex;
    gap:38px;

    margin-top:34px;
    padding-top:23px;

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

.kone-hero-stats div{
    display:flex;
    flex-direction:column;
}

.kone-hero-stats strong{
    font-size:19px;
    color:#fff;
}

.kone-hero-stats span{
    margin-top:2px;
    color:#9eb8c8;
    font-size:9px;
}


/* floating cards */

.hero-floating-card{
    position:absolute;
    z-index:4;

    min-width:215px;

    padding:12px 15px;

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

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

    border-radius:13px;

    color:#fff;

    background:
        rgba(5,45,75,.67);

    backdrop-filter:blur(14px);

    box-shadow:
        0 18px 50px
        rgba(0,0,0,.20);

    opacity:0;

    animation:
        floatingHeroCard
        4.5s
        ease-in-out
        infinite alternate;
}

.kone-hero-slide.active
.hero-floating-card{
    animation:
        floatingHeroAppear .7s .8s forwards,
        floatingHeroCard 4.5s 1.5s ease-in-out infinite alternate;
}


@keyframes floatingHeroAppear{

    from{
        opacity:0;
        transform:
            translateY(20px)
            scale(.97);
    }

    to{
        opacity:1;
        transform:
            translateY(0)
            scale(1);
    }

}


@keyframes floatingHeroCard{

    0%{
        transform:translateY(0);
    }

    100%{
        transform:translateY(-9px);
    }

}


.hero-floating-one,
.hero-floating-two,
.hero-floating-three,
.hero-floating-four{
    right:9%;
    bottom:105px;
}


.hero-floating-icon{
    width:38px;
    height:38px;
    flex:none;

    display:grid;
    place-items:center;

    border-radius:11px;

    color:#fff;
    background:#078fe4;
}

.hero-floating-icon svg{
    width:20px;
    height:20px;
}

.hero-floating-icon.purple-icon{
    background:#7550dc;
}

.hero-floating-icon.green-icon{
    background:#08a883;
}


.hero-floating-card small,
.hero-floating-card strong{
    display:block;
}

.hero-floating-card small{
    color:#87bdd8;
    font-size:7px;
    letter-spacing:1px;
}

.hero-floating-card strong{
    margin-top:2px;
    font-size:10px;
}


/* ==========================================================
   CONTROLS
   ========================================================== */

.kone-hero-controls{
    position:absolute;
    z-index:10;
    left:50%;
    bottom:30px;

    transform:translateX(-50%);

    display:flex;
    align-items:center;
    justify-content:space-between;
}


.kone-hero-pagination{
    display:flex;
    align-items:center;
    gap:7px;
}


.kone-hero-dot{
    width:36px;
    height:22px;

    padding:0;
    border:0;
    background:none;

    cursor:pointer;

    display:flex;
    align-items:center;
}


.kone-hero-dot span{
    width:100%;
    height:2px;

    display:block;

    border-radius:99px;

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

    overflow:hidden;

    transition:.25s;
}


.kone-hero-dot.active span{
    background:#fff;
}


.kone-hero-arrows{
    display:flex;
    gap:7px;
}


.kone-hero-arrows button{
    width:39px;
    height:39px;

    border-radius:50%;

    display:grid;
    place-items:center;

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

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

    color:#fff;

    backdrop-filter:blur(8px);

    cursor:pointer;

    transition:.2s;
}


.kone-hero-arrows button:hover{
    color:#063555;
    background:#fff;
}


.kone-hero-arrows svg{
    width:17px;
    height:17px;
}


/* progress */

.kone-hero-progress{
    position:absolute;
    z-index:10;
    left:0;
    right:0;
    bottom:0;

    height:3px;

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


.kone-hero-progress span{
    display:block;

    width:0;
    height:100%;

    background:
        linear-gradient(
            90deg,
            #079ee8,
            #5bd9ff
        );
}


/* ==========================================================
   RESPONSIVE HERO V8
   ========================================================== */

@media(max-width:900px){

    .kone-hero-slider{
        height:610px;
        min-height:610px;
    }

    .kone-hero-copy{
        max-width:650px;
    }

    .kone-hero-copy h1{
        font-size:49px;
    }

    .hero-floating-card{
        right:30px;
        bottom:95px;
    }

}


@media(max-width:620px){

    .kone-hero-slider{
        height:650px;
        min-height:650px;
    }

    .kone-hero-content{
        align-items:flex-start;
    }

    .kone-hero-copy{
        padding-top:74px;
        padding-bottom:90px;
    }

    .kone-hero-copy h1{
        font-size:40px;
        line-height:1.02;
        letter-spacing:-1.7px;
    }

    .kone-hero-copy > p{
        font-size:13px;
    }

    .kone-hero-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .kone-hero-actions .button{
        width:100%;
    }

    .kone-hero-stats{
        gap:20px;
    }

    .kone-hero-stats strong{
        font-size:16px;
    }

    .hero-floating-card{
        display:none;
    }

    .kone-hero-bg{
        inset:-1%;
    }

    .kone-hero-overlay{
        background:
            linear-gradient(
                90deg,
                rgba(3,38,66,.98) 0%,
                rgba(3,43,72,.91) 66%,
                rgba(3,48,77,.52) 100%
            );
    }

    .kone-hero-controls{
        bottom:25px;
    }

    .kone-hero-arrows{
        display:none;
    }

}

/* ==========================================================
   KONECTEK INTERNAL CONTENT V9
   ========================================================== */


/* ==========================================================
   INTERNAL 3-SLIDE HERO
   ========================================================== */

.internal-slider{
    position:relative;
    height:535px;
    min-height:535px;
    overflow:hidden;
    color:#fff;
    background:#052f50;
}

.internal-slider-track,
.internal-slide{
    position:absolute;
    inset:0;
}

.internal-slide{
    visibility:hidden;
    opacity:0;
    transition:
        opacity .9s ease,
        visibility .9s ease;
}

.internal-slide.active{
    visibility:visible;
    opacity:1;
    z-index:2;
}

.internal-slide-photo{
    position:absolute;
    inset:-4%;
    overflow:hidden;
}

.internal-slide-photo img{
    width:100%;
    height:100%;
    object-fit:cover;

    animation:
        internalHeroPhotoMove
        13s
        ease-in-out
        infinite alternate;

    transform:scale(1.08);
}

.internal-slide:nth-child(2)
.internal-slide-photo img{
    animation-name:
        internalHeroPhotoMove2;
}

.internal-slide:nth-child(3)
.internal-slide-photo img{
    animation-name:
        internalHeroPhotoMove3;
}


@keyframes internalHeroPhotoMove{

    from{
        transform:
            scale(1.08)
            translate3d(-1%,0,0);
    }

    to{
        transform:
            scale(1.16)
            translate3d(1.5%,-1%,0);
    }

}

@keyframes internalHeroPhotoMove2{

    from{
        transform:
            scale(1.11)
            translate3d(2%,0,0);
    }

    to{
        transform:
            scale(1.18)
            translate3d(-1.5%,1%,0);
    }

}

@keyframes internalHeroPhotoMove3{

    from{
        transform:
            scale(1.09)
            translate3d(0,1%,0);
    }

    to{
        transform:
            scale(1.17)
            translate3d(1%,-1.5%,0);
    }

}


.internal-slide-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(3,37,64,.98) 0%,
            rgba(4,45,74,.89) 42%,
            rgba(4,52,83,.49) 70%,
            rgba(4,52,83,.15) 100%
        );
}

.internal-slide-grid{
    position:absolute;
    inset:0;

    opacity:.07;

    background-image:
        linear-gradient(
            rgba(255,255,255,.16) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.16) 1px,
            transparent 1px
        );

    background-size:55px 55px;
}

.internal-slide-content{
    position:relative;
    z-index:3;

    height:100%;

    display:flex;
    align-items:center;
}

.internal-slide-copy{
    max-width:720px;
    padding-bottom:25px;
}

.internal-slide-kicker{
    display:inline-flex;
    align-items:center;
    gap:9px;

    color:#55d3fb;

    font-size:10px;
    font-weight:850;
    letter-spacing:1.8px;

    opacity:0;
    transform:translateY(20px);
}

.internal-slide-kicker:before{
    content:"";
    width:23px;
    height:1px;
    background:currentColor;
}

.internal-slide-copy h1{
    margin:12px 0 16px;

    max-width:720px;

    color:#fff;

    font-size:50px;
    line-height:1.02;

    letter-spacing:-2px;

    opacity:0;
    transform:translateY(22px);
}

.internal-slide-copy > p{
    max-width:610px;

    color:#d0e0e9;

    font-size:15px;
    line-height:1.65;

    opacity:0;
    transform:translateY(22px);
}

.internal-slide-actions{
    margin-top:25px;

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

    opacity:0;
    transform:translateY(22px);
}

.internal-hero-secondary{
    color:#fff;
    font-size:12px;
    font-weight:750;
}


.internal-slide.active
.internal-slide-kicker{
    animation:
        internalTextIn .7s .15s forwards;
}

.internal-slide.active
.internal-slide-copy h1{
    animation:
        internalTextIn .8s .27s forwards;
}

.internal-slide.active
.internal-slide-copy > p{
    animation:
        internalTextIn .8s .40s forwards;
}

.internal-slide.active
.internal-slide-actions{
    animation:
        internalTextIn .8s .52s forwards;
}


@keyframes internalTextIn{

    to{
        opacity:1;
        transform:translateY(0);
    }

}


.internal-slider-controls{
    position:absolute;
    z-index:10;

    left:50%;
    bottom:27px;

    transform:translateX(-50%);

    display:flex;
    align-items:center;
    justify-content:space-between;
}


.internal-slider-dots{
    display:flex;
    gap:7px;
}

.internal-slider-dots button{
    width:42px;
    height:20px;

    border:0;
    padding:0;

    background:transparent;
    cursor:pointer;
}

.internal-slider-dots span{
    display:block;

    width:100%;
    height:2px;

    border-radius:10px;

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

.internal-slider-dots button.active span{
    background:#fff;
}


.internal-slider-arrows{
    display:flex;
    gap:7px;
}

.internal-slider-arrows button{
    width:38px;
    height:38px;

    border-radius:50%;

    display:grid;
    place-items:center;

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

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

    color:#fff;

    cursor:pointer;
}

.internal-slider-arrows svg{
    width:16px;
}

.internal-progress{
    position:absolute;
    z-index:12;

    left:0;
    right:0;
    bottom:0;

    height:3px;

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

.internal-progress span{
    display:block;

    width:0;
    height:100%;

    background:
        linear-gradient(
            90deg,
            #079ee8,
            #5bd9ff
        );
}


/* ==========================================================
   GROUP PAGE
   ========================================================== */

.group-intro{
    padding:75px 0;
}

.group-intro-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:80px;
}

.group-intro h2{
    margin:0;

    max-width:570px;

    color:#073654;

    font-size:38px;
    line-height:1.08;

    letter-spacing:-1.5px;
}

.group-intro-grid > div:last-child{
    color:#677e8f;
    font-size:14px;
}

.group-intro-grid p{
    margin:0 0 14px;
}


.group-services-section{
    padding:80px 0;
    background:#f7fafc;
}

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

.group-service-card{
    overflow:hidden;

    border-radius:17px;

    border:1px solid #dfe8ee;

    background:#fff;

    transition:
        transform .25s,
        box-shadow .25s;
}

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

    box-shadow:
        0 22px 55px
        rgba(5,48,80,.11);
}

.group-service-image{
    height:170px;
    overflow:hidden;
}

.group-service-image img{
    width:100%;
    height:100%;
    object-fit:cover;

    transition:transform .5s;
}

.group-service-card:hover img{
    transform:scale(1.05);
}

.group-service-body{
    position:relative;
    padding:23px;
}

.group-service-number{
    position:absolute;
    top:23px;
    right:23px;

    color:#b8c6d0;

    font-size:10px;
    font-weight:850;
}

.group-service-body h3{
    margin:0 0 9px;

    color:#073654;

    font-size:19px;
}

.group-service-body p{
    min-height:75px;

    color:#708494;

    font-size:11px;
}

.group-service-body a{
    color:var(--group-color);

    font-size:11px;
    font-weight:850;
}


.group-benefits{
    padding:80px 0;
}

.group-benefits-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:80px;
}

.group-benefits-copy h2{
    margin:0;

    color:#073654;

    font-size:38px;
    line-height:1.07;
}

.group-benefits-copy p{
    color:#6e8392;
}

.group-feature-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:11px;
}

.group-feature-list > div{
    min-height:72px;

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

    padding:15px;

    border-radius:12px;
    border:1px solid #e1eaf0;

    color:#36566d;

    font-size:11px;
}

.group-feature-list span{
    width:30px;
    height:30px;

    flex:none;

    display:grid;
    place-items:center;

    border-radius:50%;

    color:#078fd9;
    background:#edf8fd;
}

.group-feature-list svg{
    width:14px;
}


.group-ideal{
    padding:80px 0;
    background:#f7fafc;
}

.ideal-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:12px;
}

.ideal-grid article{
    padding:23px;

    border:1px solid #dee8ee;
    border-radius:14px;

    background:#fff;
}

.ideal-grid strong{
    color:#078fd9;
    font-size:10px;
}

.ideal-grid p{
    margin:12px 0 0;

    color:#516d81;

    font-size:11px;
}


.group-how{
    padding:80px 0;
}

.group-how-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:11px;
}

.group-how-grid article{
    padding:23px;

    border-radius:14px;

    border:1px solid #dfe8ee;

    background:#fff;
}

.group-how-grid strong{
    color:#079be6;
    font-size:10px;
}

.group-how-grid h3{
    margin:10px 0 5px;
    color:#073654;
    font-size:15px;
}

.group-how-grid p{
    margin:0;
    color:#738797;
    font-size:10px;
}


.group-contact-cta{
    padding:55px 0;

    color:#fff;

    background:
        linear-gradient(
            110deg,
            #057fc9,
            #064f7a
        );
}

.group-contact-cta-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
}

.group-contact-cta h2{
    margin:0;

    font-size:31px;
}

.group-contact-cta p{
    margin:8px 0 0;
    color:#d2e7f3;
}


/* ==========================================================
   SERVICE DETAIL RICH
   ========================================================== */

.service-rich-intro{
    padding:85px 0;
}

.service-rich-intro-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:65px;
    align-items:center;
}

.service-rich-photo{
    position:relative;

    height:420px;

    overflow:hidden;

    border-radius:22px;

    box-shadow:
        0 24px 60px
        rgba(5,48,80,.14);
}

.service-rich-photo img{
    width:100%;
    height:100%;
    object-fit:cover;

    transition:transform .7s;
}

.service-rich-photo:hover img{
    transform:scale(1.04);
}

.service-rich-photo:after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            0deg,
            rgba(3,37,62,.60),
            transparent 55%
        );
}

.service-rich-photo-label{
    position:absolute;
    z-index:2;

    left:22px;
    bottom:20px;

    color:#fff;
}

.service-rich-photo-label small,
.service-rich-photo-label strong{
    display:block;
}

.service-rich-photo-label small{
    color:#5ed8ff;

    font-size:9px;
    font-weight:850;
    letter-spacing:1.5px;
}

.service-rich-photo-label strong{
    margin-top:3px;
    font-size:17px;
}


.service-rich-copy h2{
    margin:0;

    color:#073654;

    font-size:39px;
    line-height:1.06;

    letter-spacing:-1.5px;
}

.service-rich-copy p{
    color:#698090;
    font-size:13px;
}

.service-rich-lead{
    font-size:16px !important;
    line-height:1.65;
}


.service-rich-benefits{
    padding:82px 0;
    background:#f7fafc;
}

.service-rich-benefit-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.service-rich-benefit-grid article{
    position:relative;

    min-height:220px;

    padding:24px;

    border-radius:15px;
    border:1px solid #dee8ee;

    background:#fff;

    transition:
        transform .23s,
        box-shadow .23s;
}

.service-rich-benefit-grid article:hover{
    transform:translateY(-4px);

    box-shadow:
        0 18px 45px
        rgba(4,48,80,.09);
}

.service-benefit-number{
    position:absolute;

    top:21px;
    right:21px;

    color:#becbd4;

    font-size:9px;
    font-weight:850;
}

.service-benefit-icon{
    width:40px;
    height:40px;

    display:grid;
    place-items:center;

    border-radius:11px;

    color:#078fd9;
    background:#edf8fd;

    margin-bottom:22px;
}

.service-benefit-icon svg{
    width:17px;
}

.service-rich-benefit-grid h3{
    margin:0 0 8px;

    color:#103d59;

    font-size:15px;
}

.service-rich-benefit-grid p{
    margin:0;

    color:#758896;

    font-size:10px;
}


.service-rich-operation{
    padding:85px 0;
}

.service-operation-grid{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:80px;
}

.service-operation-grid h2{
    margin:0;

    color:#073654;

    font-size:37px;
    line-height:1.08;
}

.service-operation-grid > div:first-child p{
    color:#6d8292;
}

.service-operation-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.service-operation-list > div{
    padding:20px;

    border:1px solid #dfe8ee;
    border-radius:13px;
}

.service-operation-list span{
    color:#078fd9;
    font-size:9px;
    font-weight:850;
}

.service-operation-list strong{
    display:block;

    margin:8px 0 4px;

    color:#163e59;

    font-size:13px;
}

.service-operation-list p{
    margin:0;

    color:#788c9b;

    font-size:10px;
}


.service-related{
    padding:82px 0;
    background:#f7fafc;
}

.service-related-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.service-related-card{
    overflow:hidden;

    border-radius:16px;

    border:1px solid #dee8ef;

    background:#fff;

    transition:.25s;
}

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

    box-shadow:
        0 20px 50px
        rgba(4,48,80,.10);
}

.service-related-image{
    height:150px;
    overflow:hidden;
}

.service-related-image img{
    width:100%;
    height:100%;
    object-fit:cover;

    transition:transform .45s;
}

.service-related-card:hover img{
    transform:scale(1.05);
}

.service-related-card > div:last-child{
    padding:20px;
}

.service-related-card span{
    color:#0799e3;

    font-size:8px;
    font-weight:850;
    letter-spacing:1.3px;
}

.service-related-card h3{
    margin:7px 0 5px;

    color:#073654;

    font-size:17px;
}

.service-related-card p{
    min-height:38px;

    color:#728696;

    font-size:10px;
}

.service-related-card strong{
    color:#078fd9;
    font-size:10px;
}


.service-faq{
    padding:85px 0;
}

.service-faq-grid{
    display:grid;
    grid-template-columns:.75fr 1.25fr;
    gap:80px;
}

.service-faq-grid h2{
    margin:0;

    color:#073654;

    font-size:37px;
    line-height:1.08;
}

.service-faq-grid > div:first-child p{
    color:#748797;
}

.faq-list{
    border-top:1px solid #dde7ed;
}

.faq-list details{
    border-bottom:1px solid #dde7ed;
}

.faq-list summary{
    cursor:pointer;
    list-style:none;

    padding:18px 0;

    color:#173e59;

    font-size:12px;
    font-weight:750;
}

.faq-list summary::-webkit-details-marker{
    display:none;
}

.faq-list p{
    padding:0 0 18px;
    margin:0;

    color:#758897;

    font-size:11px;
    line-height:1.7;
}


.service-final-cta{
    padding:55px 0;

    color:#fff;

    background:
        linear-gradient(
            115deg,
            #052f50,
            #075d8d
        );
}

.service-final-cta-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:45px;
}

.service-final-cta h2{
    max-width:700px;

    margin:0;

    font-size:30px;
    line-height:1.08;
}

.service-final-cta p{
    color:#bcd4e2;
}


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

.services-all{
    padding:85px 0;
}

.services-all-group{
    margin-top:60px;
}

.services-all-group-head{
    margin-bottom:19px;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:25px;
}

.services-all-group-head span{
    font-size:9px;
    font-weight:900;
    letter-spacing:1.5px;
}

.services-all-group-head h3{
    max-width:700px;

    margin:6px 0 0;

    color:#073654;

    font-size:27px;
    line-height:1.08;
}

.services-all-group-head > a{
    color:#078fd9;

    font-size:11px;
    font-weight:850;
}

.services-all-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
}

.services-all-card{
    overflow:hidden;

    border:1px solid #dfe8ee;
    border-radius:15px;

    background:#fff;
}

.services-all-card img{
    width:100%;
    height:135px;
    object-fit:cover;
}

.services-all-card > div{
    padding:18px;
}

.services-all-card h4{
    margin:0 0 5px;

    color:#123e59;

    font-size:15px;
}

.services-all-card p{
    min-height:38px;

    margin:0 0 12px;

    color:#718697;

    font-size:10px;
}

.services-all-card strong{
    color:#078fd9;
    font-size:10px;
}


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

.about-story{
    padding:82px 0;
}

.about-story-grid{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:80px;
}

.about-story h2{
    margin:0;

    color:#073654;

    font-size:40px;
    line-height:1.07;
}

.about-story-grid > div:last-child{
    color:#687f90;

    font-size:14px;
}

.about-process{
    padding:82px 0;

    background:#f7fafc;
}

.about-process-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:12px;
}

.about-process-grid article{
    padding:23px;

    border:1px solid #dfe8ee;
    border-radius:14px;

    background:#fff;
}

.about-process-grid span{
    color:#078fd9;
    font-size:9px;
    font-weight:850;
}

.about-process-grid h3{
    margin:10px 0 6px;

    color:#073654;

    font-size:15px;
}

.about-process-grid p{
    margin:0;

    color:#748898;

    font-size:10px;
}

.about-values{
    padding:82px 0;
}

.about-values-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.about-values-grid article{
    padding:25px;

    border-radius:14px;
    border:1px solid #dfe8ee;
}

.about-values-grid h3{
    margin:0 0 7px;

    color:#073654;

    font-size:17px;
}

.about-values-grid p{
    margin:0;

    color:#748898;

    font-size:11px;
}


/* ==========================================================
   CONTACT RICH
   ========================================================== */

.contact-rich{
    padding:85px 0;
}

.contact-rich-grid{
    display:grid;
    grid-template-columns:.7fr 1.3fr;
    gap:70px;
}

.contact-rich-info h2{
    margin:0;

    color:#073654;

    font-size:38px;
}

.contact-rich-info > p{
    color:#708595;
}

.contact-rich-info > a{
    display:block;

    margin-top:10px;
    padding:15px;

    border:1px solid #dde8ef;
    border-radius:12px;
}

.contact-rich-info strong,
.contact-rich-info span{
    display:block;
}

.contact-rich-info strong{
    color:#078fd9;
    font-size:9px;
}

.contact-rich-info span{
    color:#1f4762;
    font-size:12px;
}

.contact-rich-form{
    padding:30px;

    border:1px solid #dfe8ee;
    border-radius:18px;

    background:#fff;

    box-shadow:
        0 22px 55px
        rgba(5,48,80,.08);
}

.contact-rich-form label{
    display:block;
    margin-bottom:14px;
}

.contact-rich-form label > span{
    display:block;

    margin-bottom:5px;

    color:#35566d;

    font-size:9px;
    font-weight:800;
}

.contact-rich-form input,
.contact-rich-form select,
.contact-rich-form textarea{
    width:100%;

    border:1px solid #d9e5ec;
    border-radius:9px;

    padding:12px;

    outline:0;

    background:#fbfdfe;
}


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

@media(max-width:950px){

    .group-intro-grid,
    .group-benefits-grid,
    .service-rich-intro-grid,
    .service-operation-grid,
    .service-faq-grid,
    .about-story-grid,
    .contact-rich-grid{
        grid-template-columns:1fr;
        gap:35px;
    }

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

    .ideal-grid,
    .group-how-grid,
    .about-process-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .service-rich-benefit-grid,
    .about-values-grid{
        grid-template-columns:repeat(2,1fr);
    }

}


@media(max-width:620px){

    .internal-slider{
        height:610px;
        min-height:610px;
    }

    .internal-slide-content{
        align-items:flex-start;
    }

    .internal-slide-copy{
        padding-top:72px;
    }

    .internal-slide-copy h1{
        font-size:38px;
        letter-spacing:-1.5px;
    }

    .internal-slide-copy > p{
        font-size:13px;
    }

    .internal-slide-actions{
        align-items:stretch;
        flex-direction:column;
    }

    .internal-slide-actions .button{
        width:100%;
    }

    .internal-slider-arrows{
        display:none;
    }

    .group-services-grid,
    .services-all-grid,
    .ideal-grid,
    .group-how-grid,
    .about-process-grid,
    .service-rich-benefit-grid,
    .service-related-grid,
    .about-values-grid,
    .service-operation-list,
    .group-feature-list{
        grid-template-columns:1fr;
    }

    .service-rich-photo{
        height:300px;
    }

    .group-contact-cta-inner,
    .service-final-cta-inner{
        align-items:flex-start;
        flex-direction:column;
    }

    .group-contact-cta .button,
    .service-final-cta .button{
        width:100%;
    }

    .services-all-group-head{
        align-items:flex-start;
        flex-direction:column;
    }

}

/* ==========================================================
   HEADER TOOL GROUP SPACING V10
   Separación visual entre navegación y herramientas
   ========================================================== */

@media(min-width:1181px){

    .header-actions{
        margin-left:24px !important;
    }

}

@media(min-width:981px) and (max-width:1180px){

    .header-actions{
        margin-left:16px !important;
    }

}

/* ==========================================================
   HEADER SPACING FIX V11
   El layout NO se mueve.
   Solo se desplaza visualmente el grupo de herramientas.
   ========================================================== */

@media(min-width:1181px){

    .header-actions{
        margin-left:7px !important;
        transform:translateX(14px);
    }

}

@media(min-width:981px) and (max-width:1180px){

    .header-actions{
        margin-left:7px !important;
        transform:translateX(9px);
    }

}

/* ==========================================================
   SOBRE KONECTEK V11
   ========================================================== */

.about-v11-intro{
    padding:88px 0;
}

.about-v11-intro-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:90px;
}

.about-v11-intro h2{
    margin:0;
    color:#073654;
    font-size:43px;
    line-height:1.04;
    letter-spacing:-1.8px;
}

.about-v11-intro h2 span{
    display:block;
    color:#078fd9;
}

.about-v11-intro-copy{
    color:#657d8e;
    font-size:14px;
    line-height:1.75;
}

.about-v11-lead{
    color:#244e69;
    font-size:17px;
    font-weight:550;
}


.about-philosophy{
    padding:85px 0;
    background:#f7fafc;
}

.about-philosophy-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

.about-philosophy-grid article{
    min-height:240px;
    padding:26px;
    border:1px solid #dfe8ee;
    border-radius:16px;
    background:#fff;
    transition:.25s;
}

.about-philosophy-grid article:hover{
    transform:translateY(-5px);
    box-shadow:0 22px 50px rgba(4,48,80,.09);
}

.about-v11-icon{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    margin-bottom:25px;
    border-radius:12px;
    color:#078fd9;
    background:#edf8fd;
}

.about-v11-icon svg{
    width:21px;
}

.about-philosophy-grid h3{
    color:#0a3956;
    margin:0 0 8px;
    font-size:17px;
}

.about-philosophy-grid p{
    margin:0;
    color:#758897;
    font-size:11px;
}


.about-360{
    padding:90px 0;
}

.about-360-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:75px;
    align-items:center;
}

.about-360-visual{
    position:relative;
    height:500px;
    overflow:hidden;
    border-radius:22px;
}

.about-360-visual img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.about-360-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            0deg,
            rgba(3,45,73,.60),
            transparent 58%
        );
}

.about-360-badge{
    position:absolute;
    right:20px;
    bottom:20px;
    padding:17px 20px;
    border-radius:14px;
    background:rgba(4,46,75,.88);
    backdrop-filter:blur(10px);
    color:#fff;
}

.about-360-badge strong,
.about-360-badge span{
    display:block;
}

.about-360-badge strong{
    color:#4cd4ff;
    font-size:28px;
}

.about-360-badge span{
    font-size:9px;
}

.about-360-copy h2{
    margin:0;
    color:#073654;
    font-size:39px;
    line-height:1.06;
}

.about-360-copy > p{
    color:#6c8292;
    font-size:13px;
}

.about-360-list{
    margin-top:25px;
    display:grid;
    gap:8px;
}

.about-360-list a{
    min-height:62px;
    padding:11px 13px;
    border:1px solid #e0e9ef;
    border-radius:11px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:12px;
    align-items:center;
    transition:.2s;
}

.about-360-list a:hover{
    padding-left:18px;
    background:#f7fbfd;
}

.about-360-list .dot{
    width:9px;
    height:9px;
    border-radius:50%;
}

.dot.connect{
    background:#078df0;
}

.dot.communicate{
    background:#02abc2;
}

.dot.protect{
    background:#754ee8;
}

.dot.ai{
    background:#08aa81;
}

.about-360-list strong,
.about-360-list small{
    display:block;
}

.about-360-list strong{
    color:#163e59;
    font-size:12px;
}

.about-360-list small{
    margin-top:2px;
    color:#8395a3;
    font-size:9px;
}

.about-360-list b{
    color:#078fd9;
}


.about-workflow-v11{
    padding:85px 0;
    background:#f7fafc;
}

.about-workflow-line{
    position:relative;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:12px;
}

.about-workflow-line:before{
    content:"";
    position:absolute;
    left:8%;
    right:8%;
    top:34px;
    height:1px;
    background:#cddce5;
}

.about-workflow-line article{
    position:relative;
    padding:21px;
    border-radius:14px;
    border:1px solid #dfe8ee;
    background:#fff;
}

.about-workflow-line article > span{
    position:relative;
    z-index:2;
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#078fd9;
    color:#fff;
    font-size:8px;
    font-weight:850;
}

.about-workflow-line h3{
    margin:18px 0 6px;
    color:#073654;
    font-size:15px;
}

.about-workflow-line p{
    margin:0;
    color:#778a99;
    font-size:10px;
}


.about-difference{
    padding:90px 0;
}

.about-difference-grid{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:80px;
}

.about-difference h2{
    margin:0;
    color:#073654;
    font-size:38px;
    line-height:1.07;
}

.about-difference > .container > div:first-child p,
.about-difference-grid > div:first-child p{
    color:#6d8292;
}

.about-difference-cards{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.about-difference-cards article{
    display:flex;
    gap:14px;
    padding:20px;
    border:1px solid #dfe8ee;
    border-radius:13px;
}

.about-difference-cards > article > strong{
    color:#078fd9;
    font-size:9px;
}

.about-difference-cards h3{
    margin:0 0 5px;
    color:#163e59;
    font-size:14px;
}

.about-difference-cards p{
    margin:0;
    color:#758999;
    font-size:10px;
}


.about-numbers{
    padding:65px 0;
    background:#052f50;
}

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

.about-numbers article{
    text-align:center;
    border-right:1px solid rgba(255,255,255,.12);
}

.about-numbers article:last-child{
    border:0;
}

.about-numbers strong,
.about-numbers span{
    display:block;
}

.about-numbers strong{
    color:#55d5ff;
    font-size:35px;
}

.about-numbers span{
    color:#b9cedb;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:1px;
}


.about-final-v11{
    padding:63px 0;
    color:#fff;
    background:
        linear-gradient(
            105deg,
            #087fc3,
            #05517d
        );
}

.about-final-v11-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
}

.about-final-v11 h2{
    margin:0;
    max-width:720px;
    font-size:33px;
    line-height:1.08;
}

.about-final-v11 p{
    color:#d2e6f1;
}


@media(max-width:900px){

    .about-v11-intro-grid,
    .about-360-grid,
    .about-difference-grid{
        grid-template-columns:1fr;
        gap:35px;
    }

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

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

    .about-workflow-line:before{
        display:none;
    }

}


@media(max-width:620px){

    .about-philosophy-grid,
    .about-workflow-line,
    .about-difference-cards,
    .about-numbers-grid{
        grid-template-columns:1fr;
    }

    .about-360-visual{
        height:330px;
    }

    .about-numbers article{
        padding:20px 0;
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.1);
    }

    .about-final-v11-inner{
        align-items:flex-start;
        flex-direction:column;
    }

    .about-final-v11 .button{
        width:100%;
    }

}

/* ==========================================================
   CONTACT & QUOTE FLOWS V11
   ========================================================== */

.contact-selector{
    padding:78px 0 42px;
    background:#fff;
}

.quote-mode-selector{
    max-width:1000px;
    margin:35px auto 0;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.quote-mode{
    min-height:150px;
    padding:20px;
    border:1px solid #dde7ee;
    border-radius:15px;
    background:#fff;
    text-align:left;
    cursor:pointer;
    transition:.2s;
}

.quote-mode:hover{
    transform:translateY(-3px);
    border-color:#aad7ee;
}

.quote-mode.active{
    border-color:#079be6;
    box-shadow:
        0 0 0 3px
        rgba(7,155,230,.07);
    background:#f8fcfe;
}

.quote-mode-icon{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    margin-bottom:15px;
    border-radius:11px;
    color:#078fd9;
    background:#edf8fd;
}

.quote-mode-icon svg{
    width:18px;
}

.quote-mode strong,
.quote-mode small{
    display:block;
}

.quote-mode strong{
    color:#133f5b;
    font-size:14px;
}

.quote-mode small{
    margin-top:5px;
    color:#7d909e;
    font-size:9px;
}


.quote-workspace{
    padding:35px 0 90px;
    background:#f7fafc;
}

.quote-flow{
    display:none;
}

.quote-flow.active{
    display:block;
    animation:quoteFlowIn .35s ease;
}

@keyframes quoteFlowIn{

    from{
        opacity:0;
        transform:translateY(8px);
    }

    to{
        opacity:1;
        transform:none;
    }

}

.quote-flow-intro{
    max-width:750px;
    margin:0 auto 26px;
    text-align:center;
}

.quote-flow-intro h2{
    margin:0;
    color:#073654;
    font-size:35px;
    line-height:1.08;
}

.quote-flow-intro p{
    color:#748797;
}


.quote-pro-form{
    max-width:1000px;
    margin:auto;
    overflow:hidden;
    border:1px solid #dfe8ee;
    border-radius:20px;
    background:#fff;
    box-shadow:
        0 22px 55px
        rgba(4,48,80,.08);
}

.quote-section{
    padding:29px 32px;
    border-bottom:1px solid #e7edf1;
}

.quote-section-title{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
}

.quote-section-title > span{
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#fff;
    background:#078fd9;
    font-size:8px;
    font-weight:850;
}

.quote-section-title strong,
.quote-section-title small{
    display:block;
}

.quote-section-title strong{
    color:#173f5a;
    font-size:13px;
}

.quote-section-title small{
    color:#8395a2;
    font-size:9px;
}


.quote-fields{
    display:grid;
    gap:13px;
}

.quote-fields.two{
    grid-template-columns:1fr 1fr;
}

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

.quote-pro-form label > span{
    display:block;
    margin-bottom:6px;
    color:#385970;
    font-size:9px;
    font-weight:750;
}

.quote-pro-form input[type=text],
.quote-pro-form input[type=email],
.quote-pro-form input[type=tel],
.quote-pro-form select,
.quote-pro-form textarea{
    width:100%;
    border:1px solid #d8e4eb;
    border-radius:9px;
    outline:0;
    background:#fbfdfe;
    color:#21445e;
}

.quote-pro-form input[type=text],
.quote-pro-form input[type=email],
.quote-pro-form input[type=tel],
.quote-pro-form select{
    height:44px;
    padding:0 12px;
}

.quote-pro-form textarea{
    padding:12px;
    resize:vertical;
}

.quote-pro-form input:focus,
.quote-pro-form select:focus,
.quote-pro-form textarea:focus{
    border-color:#49ace1;
    box-shadow:
        0 0 0 3px
        rgba(7,155,230,.07);
}

.quote-full{
    display:block;
    margin-top:14px;
}


.service-radio-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:9px;
}

.service-radio-grid label{
    cursor:pointer;
}

.service-radio-grid input{
    position:absolute;
    opacity:0;
}

.service-radio-grid label > span{
    min-height:48px;
    margin:0;
    padding:13px;
    border:1px solid #dfe8ee;
    border-radius:10px;
    display:flex;
    align-items:center;
    color:#36566d;
    background:#fff;
}

.service-radio-grid input:checked + span{
    color:#057cc0;
    border-color:#079be6;
    background:#f1fafe;
}


.solution-checkbox-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}

.solution-checkbox-grid label{
    cursor:pointer;
}

.solution-checkbox-grid input{
    position:absolute;
    opacity:0;
}

.solution-check-card{
    min-height:112px;
    margin:0 !important;
    padding:17px;
    border:1px solid #dfe8ee;
    border-radius:12px;
    display:flex !important;
    flex-direction:column;
    justify-content:center;
}

.solution-check-card strong,
.solution-check-card small{
    display:block;
}

.solution-check-card strong{
    color:#163f5b;
    font-size:13px;
}

.solution-check-card small{
    margin-top:5px;
    color:#8093a1;
    font-size:9px;
}

.solution-checkbox-grid input:checked + .solution-check-card{
    border-color:#079be6;
    background:#f0fafe;
    box-shadow:
        inset 0 0 0 1px #079be6;
}


.budget-options{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:9px;
}

.budget-options label{
    cursor:pointer;
}

.budget-options input{
    position:absolute;
    opacity:0;
}

.budget-options span{
    min-height:44px;
    margin:0 !important;
    padding:11px;
    border:1px solid #dfe8ee;
    border-radius:10px;
    display:grid !important;
    place-items:center;
    color:#4c687c;
    text-align:center;
}

.budget-options input:checked + span{
    color:#0784ca;
    border-color:#079be6;
    background:#eff9fe;
}


.quote-form-submit{
    padding:22px 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    background:#f9fbfc;
}

.quote-form-submit strong,
.quote-form-submit small{
    display:block;
}

.quote-form-submit strong{
    color:#193f59;
    font-size:12px;
}

.quote-form-submit small{
    color:#8395a2;
    font-size:9px;
}


.contact-direct-v11{
    padding:85px 0;
}

.contact-direct-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.contact-direct-grid > a{
    min-height:160px;
    padding:23px;
    border:1px solid #dfe8ee;
    border-radius:15px;
    display:flex;
    gap:15px;
    align-items:flex-start;
    transition:.22s;
}

.contact-direct-grid > a:hover{
    transform:translateY(-4px);
    box-shadow:
        0 20px 45px
        rgba(4,48,80,.09);
}

.contact-direct-grid > a > span{
    width:42px;
    height:42px;
    flex:none;
    display:grid;
    place-items:center;
    border-radius:11px;
    color:#078fd9;
    background:#edf8fd;
}

.contact-direct-grid svg{
    width:20px;
}

.contact-direct-grid small,
.contact-direct-grid strong{
    display:block;
}

.contact-direct-grid small{
    color:#078fd9;
    font-size:8px;
    font-weight:850;
    letter-spacing:1.2px;
}

.contact-direct-grid strong{
    margin-top:5px;
    color:#173f59;
    font-size:13px;
}

.contact-direct-grid p{
    color:#788b99;
    font-size:10px;
}


.contact-help-v11{
    padding:70px 0;
    background:#f7fafc;
}

.contact-help-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:80px;
}

.contact-help-grid h2{
    margin:0;
    color:#073654;
    font-size:35px;
    line-height:1.08;
}

.contact-help-grid > p{
    margin:0;
    color:#698091;
    font-size:14px;
    line-height:1.7;
}


@media(max-width:900px){

    .quote-mode-selector{
        grid-template-columns:1fr;
    }

    .solution-checkbox-grid{
        grid-template-columns:1fr 1fr;
    }

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

    .contact-help-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

}


@media(max-width:620px){

    .quote-fields.two,
    .quote-fields.three,
    .service-radio-grid,
    .solution-checkbox-grid,
    .budget-options{
        grid-template-columns:1fr;
    }

    .quote-section{
        padding:24px 19px;
    }

    .quote-form-submit{
        padding:20px;
        align-items:flex-start;
        flex-direction:column;
    }

    .quote-form-submit .button{
        width:100%;
    }

}

/* ==========================================================
   KONECTEK GLOBAL MOTION SYSTEM V12
   ========================================================== */

/* ----------------------------------------------------------
   BASE REVEAL
   ---------------------------------------------------------- */

[data-reveal]{
    opacity:0;
    transform:
        translate3d(0,28px,0);
    transition:
        opacity .72s cubic-bezier(.22,.8,.22,1),
        transform .72s cubic-bezier(.22,.8,.22,1);
    will-change:
        opacity,
        transform;
}

[data-reveal].is-visible{
    opacity:1;
    transform:
        translate3d(0,0,0);
}


/* variantes */

[data-reveal="left"]{
    transform:
        translate3d(-32px,0,0);
}

[data-reveal="right"]{
    transform:
        translate3d(32px,0,0);
}

[data-reveal="up"]{
    transform:
        translate3d(0,30px,0);
}

[data-reveal="down"]{
    transform:
        translate3d(0,-24px,0);
}

[data-reveal="scale"]{
    transform:
        scale(.96);
}

[data-reveal="soft-scale"]{
    transform:
        translateY(18px)
        scale(.975);
}

[data-reveal="rotate"]{
    transform:
        translateY(24px)
        rotate(1.5deg)
        scale(.98);
}

[data-reveal].is-visible{
    transform:
        translate3d(0,0,0)
        scale(1)
        rotate(0);
}


/* ----------------------------------------------------------
   STAGGER
   ---------------------------------------------------------- */

[data-reveal-delay="1"]{
    transition-delay:.06s;
}

[data-reveal-delay="2"]{
    transition-delay:.12s;
}

[data-reveal-delay="3"]{
    transition-delay:.18s;
}

[data-reveal-delay="4"]{
    transition-delay:.24s;
}

[data-reveal-delay="5"]{
    transition-delay:.30s;
}

[data-reveal-delay="6"]{
    transition-delay:.36s;
}


/* ----------------------------------------------------------
   HEADINGS
   ---------------------------------------------------------- */

.motion-heading{
    overflow:hidden;
}

.motion-heading > *{
    transform-origin:left center;
}


/* ----------------------------------------------------------
   IMAGE MOTION
   ---------------------------------------------------------- */

.motion-image{
    position:relative;
    overflow:hidden;
}

.motion-image img{
    transform:
        scale(1.035);
    transition:
        transform 1.1s
        cubic-bezier(.22,.8,.22,1),
        filter .8s ease;
}

.motion-image.is-visible img{
    transform:
        scale(1);
}

.motion-image:hover img{
    transform:
        scale(1.045);
}


/* ----------------------------------------------------------
   CARD MOTION
   ---------------------------------------------------------- */

.motion-card{
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}

.motion-card:hover{
    transform:
        translateY(-5px);
}


/* ----------------------------------------------------------
   LINK / BUTTON MICRO MOTION
   ---------------------------------------------------------- */

.button,
.package-link,
.text-link,
.mega-service-column a,
.drawer-links a,
.service-related-card,
.group-service-card,
.services-all-card{
    transition:
        transform .22s ease,
        background .22s ease,
        color .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

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

.button span,
.package-link span,
.text-link span{
    display:inline-block;
    transition:
        transform .22s ease;
}

.button:hover span,
.package-link:hover span,
.text-link:hover span{
    transform:
        translateX(4px);
}


/* ----------------------------------------------------------
   SECTION BACKGROUND MOTION
   ---------------------------------------------------------- */

.motion-section{
    position:relative;
}

.motion-section:before,
.motion-section:after{
    pointer-events:none;
}


/* ----------------------------------------------------------
   FLOATING DECOR
   ---------------------------------------------------------- */

.motion-float{
    animation:
        koneFloat 5.8s
        ease-in-out
        infinite alternate;
}

@keyframes koneFloat{

    from{
        transform:
            translate3d(0,0,0);
    }

    to{
        transform:
            translate3d(0,-9px,0);
    }

}


/* ----------------------------------------------------------
   SOFT PULSE
   ---------------------------------------------------------- */

.motion-pulse{
    animation:
        konePulse 3.2s
        ease-in-out
        infinite alternate;
}

@keyframes konePulse{

    from{
        box-shadow:
            0 0 0
            rgba(7,158,232,0);
    }

    to{
        box-shadow:
            0 0 0 9px
            rgba(7,158,232,.055);
    }

}


/* ----------------------------------------------------------
   PARALLAX IMAGE
   ---------------------------------------------------------- */

[data-parallax]{
    will-change:transform;
    transform:
        translate3d(0,0,0);
}


/* ----------------------------------------------------------
   SHIMMER FOR SPECIAL CARDS
   ---------------------------------------------------------- */

.motion-shimmer{
    position:relative;
    overflow:hidden;
}

.motion-shimmer:after{
    content:"";

    position:absolute;
    top:-50%;
    left:-90%;

    width:55%;
    height:200%;

    transform:
        rotate(18deg);

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

    transition:
        left .8s ease;
}

.motion-shimmer:hover:after{
    left:140%;
}


/* ----------------------------------------------------------
   UNDERLINE EFFECT
   ---------------------------------------------------------- */

.motion-link{
    position:relative;
}

.motion-link:after{
    content:"";

    position:absolute;
    left:0;
    bottom:-3px;

    width:0;
    height:1px;

    background:currentColor;

    transition:
        width .25s ease;
}

.motion-link:hover:after{
    width:100%;
}


/* ----------------------------------------------------------
   SECTION SEPARATION
   ---------------------------------------------------------- */

main > section{
    isolation:isolate;
}


/* ----------------------------------------------------------
   HERO EXTRA DEPTH
   ---------------------------------------------------------- */

.kone-hero-slide.active
.kone-hero-grid-effect,
.internal-slide.active
.internal-slide-grid{
    animation:
        subtleGridDrift
        14s
        linear
        infinite alternate;
}

@keyframes subtleGridDrift{

    from{
        transform:
            translate3d(0,0,0);
    }

    to{
        transform:
            translate3d(10px,7px,0);
    }

}


/* ----------------------------------------------------------
   MEGA MENU ENTRANCE
   ---------------------------------------------------------- */

.mega-menu-pro{
    transform:
        translateX(-50%)
        translateY(10px)
        scale(.985);
}

.mega-trigger-wrap:hover
.mega-menu-pro,
.mega-trigger-wrap:focus-within
.mega-menu-pro{
    transform:
        translateX(-50%)
        translateY(0)
        scale(1);
}


/* ----------------------------------------------------------
   DRAWER ENTRANCE DETAIL
   ---------------------------------------------------------- */

.side-drawer .drawer-body > *{
    opacity:0;
    transform:
        translateX(12px);
    transition:
        opacity .35s ease,
        transform .35s ease;
}

.side-drawer.open
.drawer-body > *{
    opacity:1;
    transform:none;
}

.side-drawer.open
.drawer-body > *:nth-child(1){
    transition-delay:.08s;
}

.side-drawer.open
.drawer-body > *:nth-child(2){
    transition-delay:.12s;
}

.side-drawer.open
.drawer-body > *:nth-child(3){
    transition-delay:.16s;
}

.side-drawer.open
.drawer-body > *:nth-child(4){
    transition-delay:.20s;
}

.side-drawer.open
.drawer-body > *:nth-child(5){
    transition-delay:.24s;
}


/* ----------------------------------------------------------
   FORM FOCUS MOTION
   ---------------------------------------------------------- */

input,
select,
textarea{
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

input:focus,
select:focus,
textarea:focus{
    transform:
        translateY(-1px);
}


/* ----------------------------------------------------------
   FOOTER MOTION
   ---------------------------------------------------------- */

.site-footer-pro a{
    transition:
        color .2s ease,
        transform .2s ease;
}

.site-footer-pro a:hover{
    transform:
        translateX(2px);
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media(max-width:620px){

    [data-reveal]{
        transform:
            translate3d(0,18px,0);
    }

    [data-reveal="left"],
    [data-reveal="right"]{
        transform:
            translate3d(0,18px,0);
    }

}


/* ----------------------------------------------------------
   ACCESSIBILITY
   ---------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){

    *,
    *:before,
    *:after{
        scroll-behavior:auto !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }

    [data-reveal]{
        opacity:1 !important;
        transform:none !important;
    }

    [data-parallax]{
        transform:none !important;
    }

}

/* ==========================================================
   HEADER ON SCROLL V12
   ========================================================== */

.site-header-pro{
    transition:
        box-shadow .25s ease,
        background .25s ease;
}

.site-header-pro.header-scrolled{
    box-shadow:
        0 8px 28px
        rgba(4,42,69,.10);
}

.site-header-pro.header-scrolled
.header-main{
    transition:
        height .25s ease;
}

@media(min-width:981px){

    .site-header-pro.header-scrolled
    .header-main{
        height:69px;
    }

    .site-header-pro.header-scrolled
    .main-nav-pro,
    .site-header-pro.header-scrolled
    .mega-trigger-wrap,
    .site-header-pro.header-scrolled
    .main-nav-pro > a,
    .site-header-pro.header-scrolled
    .mega-trigger{
        height:69px;
    }

}

/* ==========================================================
   KONECTEK GLOBAL MOTION SYSTEM V12
   ========================================================== */

/* ----------------------------------------------------------
   BASE REVEAL
   ---------------------------------------------------------- */

[data-reveal]{
    opacity:0;
    transform:
        translate3d(0,28px,0);
    transition:
        opacity .72s cubic-bezier(.22,.8,.22,1),
        transform .72s cubic-bezier(.22,.8,.22,1);
    will-change:
        opacity,
        transform;
}

[data-reveal].is-visible{
    opacity:1;
    transform:
        translate3d(0,0,0);
}


/* variantes */

[data-reveal="left"]{
    transform:
        translate3d(-32px,0,0);
}

[data-reveal="right"]{
    transform:
        translate3d(32px,0,0);
}

[data-reveal="up"]{
    transform:
        translate3d(0,30px,0);
}

[data-reveal="down"]{
    transform:
        translate3d(0,-24px,0);
}

[data-reveal="scale"]{
    transform:
        scale(.96);
}

[data-reveal="soft-scale"]{
    transform:
        translateY(18px)
        scale(.975);
}

[data-reveal="rotate"]{
    transform:
        translateY(24px)
        rotate(1.5deg)
        scale(.98);
}

[data-reveal].is-visible{
    transform:
        translate3d(0,0,0)
        scale(1)
        rotate(0);
}


/* ----------------------------------------------------------
   STAGGER
   ---------------------------------------------------------- */

[data-reveal-delay="1"]{
    transition-delay:.06s;
}

[data-reveal-delay="2"]{
    transition-delay:.12s;
}

[data-reveal-delay="3"]{
    transition-delay:.18s;
}

[data-reveal-delay="4"]{
    transition-delay:.24s;
}

[data-reveal-delay="5"]{
    transition-delay:.30s;
}

[data-reveal-delay="6"]{
    transition-delay:.36s;
}


/* ----------------------------------------------------------
   HEADINGS
   ---------------------------------------------------------- */

.motion-heading{
    overflow:hidden;
}

.motion-heading > *{
    transform-origin:left center;
}


/* ----------------------------------------------------------
   IMAGE MOTION
   ---------------------------------------------------------- */

.motion-image{
    position:relative;
    overflow:hidden;
}

.motion-image img{
    transform:
        scale(1.035);
    transition:
        transform 1.1s
        cubic-bezier(.22,.8,.22,1),
        filter .8s ease;
}

.motion-image.is-visible img{
    transform:
        scale(1);
}

.motion-image:hover img{
    transform:
        scale(1.045);
}


/* ----------------------------------------------------------
   CARD MOTION
   ---------------------------------------------------------- */

.motion-card{
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}

.motion-card:hover{
    transform:
        translateY(-5px);
}


/* ----------------------------------------------------------
   LINK / BUTTON MICRO MOTION
   ---------------------------------------------------------- */

.button,
.package-link,
.text-link,
.mega-service-column a,
.drawer-links a,
.service-related-card,
.group-service-card,
.services-all-card{
    transition:
        transform .22s ease,
        background .22s ease,
        color .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

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

.button span,
.package-link span,
.text-link span{
    display:inline-block;
    transition:
        transform .22s ease;
}

.button:hover span,
.package-link:hover span,
.text-link:hover span{
    transform:
        translateX(4px);
}


/* ----------------------------------------------------------
   SECTION BACKGROUND MOTION
   ---------------------------------------------------------- */

.motion-section{
    position:relative;
}

.motion-section:before,
.motion-section:after{
    pointer-events:none;
}


/* ----------------------------------------------------------
   FLOATING DECOR
   ---------------------------------------------------------- */

.motion-float{
    animation:
        koneFloat 5.8s
        ease-in-out
        infinite alternate;
}

@keyframes koneFloat{

    from{
        transform:
            translate3d(0,0,0);
    }

    to{
        transform:
            translate3d(0,-9px,0);
    }

}


/* ----------------------------------------------------------
   SOFT PULSE
   ---------------------------------------------------------- */

.motion-pulse{
    animation:
        konePulse 3.2s
        ease-in-out
        infinite alternate;
}

@keyframes konePulse{

    from{
        box-shadow:
            0 0 0
            rgba(7,158,232,0);
    }

    to{
        box-shadow:
            0 0 0 9px
            rgba(7,158,232,.055);
    }

}


/* ----------------------------------------------------------
   PARALLAX IMAGE
   ---------------------------------------------------------- */

[data-parallax]{
    will-change:transform;
    transform:
        translate3d(0,0,0);
}


/* ----------------------------------------------------------
   SHIMMER FOR SPECIAL CARDS
   ---------------------------------------------------------- */

.motion-shimmer{
    position:relative;
    overflow:hidden;
}

.motion-shimmer:after{
    content:"";

    position:absolute;
    top:-50%;
    left:-90%;

    width:55%;
    height:200%;

    transform:
        rotate(18deg);

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

    transition:
        left .8s ease;
}

.motion-shimmer:hover:after{
    left:140%;
}


/* ----------------------------------------------------------
   UNDERLINE EFFECT
   ---------------------------------------------------------- */

.motion-link{
    position:relative;
}

.motion-link:after{
    content:"";

    position:absolute;
    left:0;
    bottom:-3px;

    width:0;
    height:1px;

    background:currentColor;

    transition:
        width .25s ease;
}

.motion-link:hover:after{
    width:100%;
}


/* ----------------------------------------------------------
   SECTION SEPARATION
   ---------------------------------------------------------- */

main > section{
    isolation:isolate;
}


/* ----------------------------------------------------------
   HERO EXTRA DEPTH
   ---------------------------------------------------------- */

.kone-hero-slide.active
.kone-hero-grid-effect,
.internal-slide.active
.internal-slide-grid{
    animation:
        subtleGridDrift
        14s
        linear
        infinite alternate;
}

@keyframes subtleGridDrift{

    from{
        transform:
            translate3d(0,0,0);
    }

    to{
        transform:
            translate3d(10px,7px,0);
    }

}


/* ----------------------------------------------------------
   MEGA MENU ENTRANCE
   ---------------------------------------------------------- */

.mega-menu-pro{
    transform:
        translateX(-50%)
        translateY(10px)
        scale(.985);
}

.mega-trigger-wrap:hover
.mega-menu-pro,
.mega-trigger-wrap:focus-within
.mega-menu-pro{
    transform:
        translateX(-50%)
        translateY(0)
        scale(1);
}


/* ----------------------------------------------------------
   DRAWER ENTRANCE DETAIL
   ---------------------------------------------------------- */

.side-drawer .drawer-body > *{
    opacity:0;
    transform:
        translateX(12px);
    transition:
        opacity .35s ease,
        transform .35s ease;
}

.side-drawer.open
.drawer-body > *{
    opacity:1;
    transform:none;
}

.side-drawer.open
.drawer-body > *:nth-child(1){
    transition-delay:.08s;
}

.side-drawer.open
.drawer-body > *:nth-child(2){
    transition-delay:.12s;
}

.side-drawer.open
.drawer-body > *:nth-child(3){
    transition-delay:.16s;
}

.side-drawer.open
.drawer-body > *:nth-child(4){
    transition-delay:.20s;
}

.side-drawer.open
.drawer-body > *:nth-child(5){
    transition-delay:.24s;
}


/* ----------------------------------------------------------
   FORM FOCUS MOTION
   ---------------------------------------------------------- */

input,
select,
textarea{
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

input:focus,
select:focus,
textarea:focus{
    transform:
        translateY(-1px);
}


/* ----------------------------------------------------------
   FOOTER MOTION
   ---------------------------------------------------------- */

.site-footer-pro a{
    transition:
        color .2s ease,
        transform .2s ease;
}

.site-footer-pro a:hover{
    transform:
        translateX(2px);
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media(max-width:620px){

    [data-reveal]{
        transform:
            translate3d(0,18px,0);
    }

    [data-reveal="left"],
    [data-reveal="right"]{
        transform:
            translate3d(0,18px,0);
    }

}


/* ----------------------------------------------------------
   ACCESSIBILITY
   ---------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){

    *,
    *:before,
    *:after{
        scroll-behavior:auto !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }

    [data-reveal]{
        opacity:1 !important;
        transform:none !important;
    }

    [data-parallax]{
        transform:none !important;
    }

}

/* ==========================================================
   HEADER ON SCROLL V12
   ========================================================== */

.site-header-pro{
    transition:
        box-shadow .25s ease,
        background .25s ease;
}

.site-header-pro.header-scrolled{
    box-shadow:
        0 8px 28px
        rgba(4,42,69,.10);
}

.site-header-pro.header-scrolled
.header-main{
    transition:
        height .25s ease;
}

@media(min-width:981px){

    .site-header-pro.header-scrolled
    .header-main{
        height:69px;
    }

    .site-header-pro.header-scrolled
    .main-nav-pro,
    .site-header-pro.header-scrolled
    .mega-trigger-wrap,
    .site-header-pro.header-scrolled
    .main-nav-pro > a,
    .site-header-pro.header-scrolled
    .mega-trigger{
        height:69px;
    }

}

/* ==========================================================
   KONECTEK MOTION V13
   slower / stronger / more varied
   ========================================================== */


/* ----------------------------------------------------------
   GLOBAL REVEAL TIMING
   ---------------------------------------------------------- */

[data-reveal]{
    opacity:0;

    transition-property:
        opacity,
        transform,
        filter;

    transition-duration:
        1.15s;

    transition-timing-function:
        cubic-bezier(.2,.75,.2,1);

    will-change:
        opacity,
        transform,
        filter;
}


/* ----------------------------------------------------------
   EFFECT VARIANTS
   ---------------------------------------------------------- */

[data-reveal="zoom-in"]{
    transform:
        scale(.72);

    filter:
        blur(3px);
}

[data-reveal="zoom-out"]{
    transform:
        scale(1.22);

    filter:
        blur(2px);
}

[data-reveal="left"]{
    transform:
        translate3d(-85px,0,0)
        rotate(-1.5deg);
}

[data-reveal="right"]{
    transform:
        translate3d(85px,0,0)
        rotate(1.5deg);
}

[data-reveal="up"]{
    transform:
        translate3d(0,75px,0);
}

[data-reveal="down"]{
    transform:
        translate3d(0,-75px,0);
}

[data-reveal="rotate-left"]{
    transform:
        translate3d(-45px,40px,0)
        rotate(-7deg)
        scale(.92);
}

[data-reveal="rotate-right"]{
    transform:
        translate3d(45px,40px,0)
        rotate(7deg)
        scale(.92);
}

[data-reveal="flip-soft"]{
    transform:
        perspective(1000px)
        rotateX(18deg)
        translateY(55px)
        scale(.94);

    transform-origin:
        center bottom;
}

[data-reveal="inside"]{
    transform:
        translate3d(0,35px,0)
        scale(.82);

    filter:
        blur(2px);
}

[data-reveal="outside"]{
    transform:
        translate3d(0,-20px,0)
        scale(1.16);

    filter:
        blur(2px);
}

[data-reveal="bounce"]{
    transform:
        translate3d(0,85px,0)
        scale(.92);
}


/* ----------------------------------------------------------
   FINAL STATE
   ---------------------------------------------------------- */

[data-reveal].is-visible{
    opacity:1;

    transform:
        translate3d(0,0,0)
        rotate(0)
        scale(1)
        perspective(1000px)
        rotateX(0);

    filter:
        blur(0);
}


/* ----------------------------------------------------------
   BOUNCE SPECIAL
   ---------------------------------------------------------- */

[data-reveal="bounce"].is-visible{
    animation:
        koneRevealBounce
        1.35s
        cubic-bezier(.22,.75,.2,1)
        both;
}


@keyframes koneRevealBounce{

    0%{
        opacity:0;
        transform:
            translateY(85px)
            scale(.92);
    }

    58%{
        opacity:1;
        transform:
            translateY(-12px)
            scale(1.015);
    }

    76%{
        transform:
            translateY(6px)
            scale(.995);
    }

    90%{
        transform:
            translateY(-2px)
            scale(1.002);
    }

    100%{
        opacity:1;
        transform:
            translateY(0)
            scale(1);
    }

}


/* ----------------------------------------------------------
   DELAYS MÁS EVIDENTES
   ---------------------------------------------------------- */

[data-reveal-delay="1"]{
    transition-delay:.12s;
}

[data-reveal-delay="2"]{
    transition-delay:.24s;
}

[data-reveal-delay="3"]{
    transition-delay:.36s;
}

[data-reveal-delay="4"]{
    transition-delay:.48s;
}

[data-reveal-delay="5"]{
    transition-delay:.60s;
}

[data-reveal-delay="6"]{
    transition-delay:.72s;
}

[data-reveal-delay="7"]{
    transition-delay:.84s;
}

[data-reveal-delay="8"]{
    transition-delay:.96s;
}


/* ----------------------------------------------------------
   CARDS AÚN MÁS MARCADAS
   ---------------------------------------------------------- */

.motion-card{
    transform-origin:center center;
}

.motion-card.is-visible:hover{
    transform:
        translateY(-7px)
        scale(1.012);
}


/* ----------------------------------------------------------
   IMAGES
   ---------------------------------------------------------- */

.motion-image img{
    transform:
        scale(1.10);

    transition:
        transform 1.6s
        cubic-bezier(.2,.75,.2,1),
        filter 1.2s ease;
}

.motion-image.is-visible img{
    transform:
        scale(1);
}

.motion-image:hover img{
    transform:
        scale(1.06);
}


/* ----------------------------------------------------------
   HEADINGS LONGER
   ---------------------------------------------------------- */

.section-heading,
.commercial-packages-head,
.showcase-head,
.group-intro-grid,
.group-benefits-grid,
.service-rich-intro-grid,
.service-operation-grid,
.service-faq-grid,
.about-v11-intro-grid,
.about-360-grid,
.about-difference-grid,
.contact-help-grid,
.conversion-grid,
.footer-top-pro{
    transition-duration:
        1.25s !important;
}


/* ----------------------------------------------------------
   FLOATING ITEMS
   ---------------------------------------------------------- */

.motion-float{
    animation:
        koneFloatSlow
        6.5s
        ease-in-out
        infinite alternate;
}


@keyframes koneFloatSlow{

    0%{
        transform:
            translateY(0)
            rotate(0);
    }

    100%{
        transform:
            translateY(-11px)
            rotate(.7deg);
    }

}


/* ----------------------------------------------------------
   ICON PULSE SLOWER
   ---------------------------------------------------------- */

.motion-pulse{
    animation:
        konePulseSlow
        4.4s
        ease-in-out
        infinite alternate;
}


@keyframes konePulseSlow{

    from{
        transform:
            scale(1);

        box-shadow:
            0 0 0
            rgba(7,158,232,0);
    }

    to{
        transform:
            scale(1.035);

        box-shadow:
            0 0 0 11px
            rgba(7,158,232,.045);
    }

}


/* ----------------------------------------------------------
   HOVER DEPTH
   ---------------------------------------------------------- */

.group-service-card,
.service-related-card,
.services-all-card,
.commercial-package,
.about-philosophy-grid article,
.contact-direct-grid > a,
.quote-mode,
.tech-slide,
.masonry-card{
    transform-origin:center;
}


/* ----------------------------------------------------------
   PARALLAX SLOWER
   ---------------------------------------------------------- */

[data-parallax]{
    transition:
        transform .35s linear;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media(max-width:620px){

    [data-reveal]{
        transition-duration:
            .95s;
    }

    [data-reveal="left"],
    [data-reveal="right"]{
        transform:
            translateY(45px)
            scale(.96);
    }

    [data-reveal="rotate-left"],
    [data-reveal="rotate-right"]{
        transform:
            translateY(45px)
            scale(.94);
    }

}


/* ----------------------------------------------------------
   ACCESSIBILITY
   ---------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){

    [data-reveal],
    [data-reveal].is-visible{
        opacity:1 !important;
        transform:none !important;
        filter:none !important;
        animation:none !important;
        transition:none !important;
    }

}

/* ==========================================================
   EXTRA BOX EFFECTS V13
   ========================================================== */

.commercial-package:nth-child(1){
    transform-origin:
        left center;
}

.commercial-package:nth-child(2){
    transform-origin:
        center bottom;
}

.commercial-package:nth-child(3){
    transform-origin:
        right center;
}


.quote-mode:nth-child(1),
.contact-direct-grid > a:nth-child(1){
    transform-origin:
        left center;
}

.quote-mode:nth-child(2),
.contact-direct-grid > a:nth-child(2){
    transform-origin:
        center center;
}

.quote-mode:nth-child(3),
.contact-direct-grid > a:nth-child(3){
    transform-origin:
        right center;
}


/* ligera profundidad cuando entran */

.motion-card.is-visible{
    box-shadow:
        0 10px 28px
        rgba(4,48,80,.055);
}


/* tarjetas grandes con bounce más visible */

.commercial-package[data-reveal="bounce"].is-visible,
.quote-mode[data-reveal="bounce"].is-visible,
.group-service-card[data-reveal="bounce"].is-visible{
    animation-duration:
        1.5s;
}


/* hover posterior a la entrada */

.group-service-card.is-visible:hover,
.service-related-card.is-visible:hover,
.commercial-package.is-visible:hover,
.about-philosophy-grid article.is-visible:hover,
.contact-direct-grid > a.is-visible:hover{
    transform:
        translateY(-7px)
        scale(1.015);
}

/* ==========================================================
   NO MOUSE PAUSE / NO HOVER INTERRUPTION V14
   ========================================================== */

/*
 * Mientras un elemento todavía está ejecutando su reveal,
 * el hover no debe cambiar su transform y cortar visualmente
 * la animación.
 */

[data-reveal]:not(.is-visible):hover{
    pointer-events:auto;
}


/*
 * Una vez visible sí puede tener micro-hover,
 * pero nunca afecta la animación de entrada.
 */

[data-reveal].is-visible.motion-card:hover,
[data-reveal].is-visible.group-service-card:hover,
[data-reveal].is-visible.service-related-card:hover,
[data-reveal].is-visible.commercial-package:hover,
[data-reveal].is-visible.quote-mode:hover,
[data-reveal].is-visible.contact-direct-grid > a:hover{
    animation-play-state:running !important;
}


/*
 * Ningún elemento animado se pausa por hover.
 */

.kone-hero-slider:hover *,
.internal-slider:hover *,
.motion-float:hover,
.motion-pulse:hover,
[data-reveal]:hover{
    animation-play-state:running !important;
}


/*
 * Las fotos con movimiento continuo tampoco se detienen.
 */

.kone-hero-bg img,
.internal-slide-photo img,
.motion-float,
.motion-pulse{
    animation-play-state:running !important;
}