:root{
--navy:#071a3a;
--navy2:#0b2856;
--blue:#1261d8;
--yellow:#ffd21c;
--ink:#101828;
--muted:#667085;
--line:#e4e7ec;
--bg:#f7f9fc;
}

*{
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
overflow-x:hidden;
font-size:16px;
}

body{
font-family:"Inter",sans-serif;
color:var(--ink);
background:#fff;
font-size:16px;
font-weight:400;
line-height:1.7;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

/* ================================
   ANCHOR / FIXED HEADER POSITIONING
   ================================ */

#home{
scroll-margin-top:0;
}

#solutions,
#services,
#requirement,
#support,
#about{
scroll-margin-top:50px;
}

@media(max-width:991.98px){

#solutions,
#services,
#requirement,
#support,
#about{
scroll-margin-top:50px;
}

}

@media(max-width:767.98px){

body{
font-size:15.5px;
line-height:1.65;
}

#solutions,
#services,
#requirement,
#support,
#about{
scroll-margin-top:50px;
}

}

/* ================================
   FONTS
   ================================ */

@font-face{
font-family:"Inter";
src:url("../fonts/Inter-Regular.woff2") format("woff2");
font-weight:400;
font-style:normal;
font-display:swap;
}

@font-face{
font-family:"Inter";
src:url("../fonts/Inter-Medium.woff2") format("woff2");
font-weight:500;
font-style:normal;
font-display:swap;
}

@font-face{
font-family:"Inter";
src:url("../fonts/Inter-SemiBold.woff2") format("woff2");
font-weight:600;
font-style:normal;
font-display:swap;
}

@font-face{
font-family:"Inter";
src:url("../fonts/Inter-Bold.woff2") format("woff2");
font-weight:700;
font-style:normal;
font-display:swap;
}

@font-face{
font-family:"Inter";
src:url("../fonts/Inter-ExtraBold.woff2") format("woff2");
font-weight:800;
font-style:normal;
font-display:swap;
}

button,
input,
textarea,
select,
.navbar,
.nav-link,
.btn,
.hero-section,
.section-padding,
.site-footer,
h1,
h2,
h3,
h4,
h5,
h6{
font-family:"Inter",sans-serif;
}

h1{
font-weight:800;
}

h2,
h3{
font-weight:700;
}

.nav-link{
font-weight:500;
}

.btn{
font-weight:600;
}

body.drawer-open{
overflow:hidden!important;
}

img,
svg,
video,
iframe{
max-width:100%;
}

a{
text-decoration:none;
}

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

.site-header{
position:fixed!important;
top:0!important;
left:0!important;
right:0!important;
width:100%!important;
z-index:9999!important;
background:rgba(255,255,255,.96);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border-bottom:1px solid rgba(16,24,40,.08);
}

.navbar{
padding:.75rem 0;
}

.navbar-brand{
display:inline-flex;
align-items:center;
flex:0 0 auto;
width:auto!important;
max-width:max-content!important;
padding:0!important;
margin:0!important;
}

.brand-logo{
display:block;
width:auto!important;
height:42px!important;
max-width:180px!important;
object-fit:contain;
}

.desktop-nav{
display:flex;
align-items:center;
gap:8px;
}

.desktop-nav .nav-link{
position:relative;
color:#101828;
font-weight:600;
font-size:.93rem;
padding:.65rem .75rem;
transition:color .25s ease;
}

.desktop-nav .nav-link.active{
color:var(--blue)!important;
font-weight:700;
}

.desktop-nav .nav-link.active::after{
content:"";
position:absolute;
left:12px;
right:12px;
bottom:-8px;
height:3px;
background:var(--yellow);
border-radius:3px;
}

/* ================================
   HAMBURGER
   ================================ */

.hamburger{
position:relative!important;
display:none!important;
align-items:center!important;
justify-content:center!important;
flex-direction:column!important;
gap:5px!important;
width:36px!important;
height:36px!important;
min-width:36px!important;
min-height:36px!important;
padding:5px!important;
margin:0!important;
background:transparent!important;
border:0!important;
border-radius:0!important;
appearance:none!important;
-webkit-appearance:none!important;
cursor:pointer!important;
z-index:10000!important;
}

.hamburger span{
display:block!important;
position:relative!important;
width:100%!important;
height:3px!important;
min-height:3px!important;
margin:0!important;
padding:0!important;
background:var(--navy)!important;
border:0!important;
border-radius:3px!important;
opacity:1!important;
visibility:visible!important;
}

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

.mobile-drawer{
position:fixed!important;
top:0!important;
right:0!important;
bottom:0!important;
left:auto!important;
display:block!important;
width:320px!important;
max-width:88vw!important;
height:100vh!important;
height:100dvh!important;
margin:0!important;
padding:78px 20px 25px!important;
background:rgba(5,15,34,.99)!important;
border-left:1px solid rgba(255,255,255,.08)!important;
box-shadow:-15px 0 45px rgba(0,0,0,.35)!important;
transform:translate3d(110%,0,0)!important;
visibility:hidden!important;
opacity:0!important;
overflow-x:hidden!important;
overflow-y:auto!important;
-webkit-overflow-scrolling:touch!important;
overscroll-behavior:contain!important;
z-index:10001!important;
transition:
transform .36s cubic-bezier(.22,.9,.3,1),
opacity .2s ease,
visibility 0s linear .36s!important;
}

.mobile-drawer.open{
display:block!important;
transform:translate3d(0,0,0)!important;
visibility:visible!important;
opacity:1!important;
pointer-events:auto!important;
transition:
transform .36s cubic-bezier(.22,.9,.3,1),
opacity .2s ease,
visibility 0s linear 0s!important;
}

/* ================================
   DRAWER CLOSE BUTTON
   ================================ */

.mobile-drawer .drawer-close{
position:absolute!important;
top:14px!important;
right:14px!important;
left:auto!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:44px!important;
height:44px!important;
min-width:44px!important;
min-height:44px!important;
padding:0!important;
margin:0!important;
background:rgba(255,255,255,.10)!important;
border:1px solid rgba(255,255,255,.18)!important;
border-radius:10px!important;
appearance:none!important;
-webkit-appearance:none!important;
cursor:pointer!important;
visibility:visible!important;
opacity:1!important;
pointer-events:auto!important;
z-index:100000!important;
}

.mobile-drawer .drawer-close span{
position:absolute!important;
top:50%!important;
left:50%!important;
display:block!important;
width:25px!important;
height:3px!important;
min-width:25px!important;
min-height:3px!important;
padding:0!important;
margin:0!important;
background:#fff!important;
border:0!important;
border-radius:3px!important;
opacity:1!important;
visibility:visible!important;
pointer-events:none!important;
transform-origin:center center!important;
}

.mobile-drawer .drawer-close span:first-child{
transform:translate(-50%,-50%) rotate(45deg)!important;
}

.mobile-drawer .drawer-close span:last-child{
transform:translate(-50%,-50%) rotate(-45deg)!important;
}

.mobile-drawer .drawer-close:hover{
background:var(--yellow)!important;
border-color:var(--yellow)!important;
}

.mobile-drawer .drawer-close:hover span{
background:var(--navy)!important;
}

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

.mobile-drawer-header{
display:flex!important;
justify-content:space-between!important;
align-items:center!important;
width:100%!important;
padding:0 4px 18px!important;
margin:0 0 8px!important;
border-bottom:1px solid rgba(255,255,255,.09)!important;
}

.mobile-drawer-header span{
color:var(--yellow)!important;
font-size:.7rem!important;
letter-spacing:.16em!important;
font-weight:800!important;
}

.mobile-drawer-header small{
color:#71849f!important;
font-size:.65rem!important;
font-weight:700!important;
}

/* ================================
   DRAWER LINKS
   ================================ */

.mobile-drawer > a{
display:flex!important;
align-items:center!important;
gap:14px!important;
width:100%!important;
padding:16px 12px!important;
color:#dce7f6!important;
border-bottom:1px solid rgba(255,255,255,.06)!important;
font-size:.9rem!important;
font-weight:600!important;
transition:
background .2s ease,
color .2s ease,
padding-left .2s ease!important;
}

.mobile-drawer > a i:first-child{
width:22px!important;
min-width:22px!important;
flex:0 0 22px!important;
color:var(--yellow)!important;
font-size:17px!important;
text-align:center!important;
}

.mobile-drawer > a:hover{
padding-left:18px!important;
color:#fff!important;
background:rgba(255,255,255,.05)!important;
}

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

.mobile-drawer .mobile-drawer-cta{
margin-top:18px!important;
padding:14px 15px!important;
border:0!important;
border-radius:11px!important;
background:var(--yellow)!important;
color:var(--navy)!important;
}

.mobile-drawer .mobile-drawer-cta i:first-child{
color:var(--navy)!important;
}

.mobile-drawer .mobile-drawer-cta:hover{
padding-left:15px!important;
background:#ffe55d!important;
color:var(--navy)!important;
}

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

.mobile-drawer-contact{
margin-top:30px!important;
padding:20px 12px!important;
border-top:1px solid rgba(255,255,255,.08)!important;
}

.mobile-drawer-contact small{
display:block!important;
color:#71849f!important;
font-size:.65rem!important;
letter-spacing:.1em!important;
font-weight:700!important;
margin-bottom:13px!important;
}

.mobile-drawer-contact a{
display:flex!important;
align-items:center!important;
gap:10px!important;
color:#b8c8dd!important;
font-size:.78rem!important;
margin-bottom:11px!important;
}

.mobile-drawer-contact a:hover{
color:#fff!important;
}

.mobile-drawer-contact i{
width:18px!important;
color:var(--yellow)!important;
}

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

.btn-primary-cta{
background:var(--blue);
color:#fff;
border:0;
border-radius:10px;
padding:.75rem 1.15rem;
font-weight:700;
}

.btn-yellow{
background:var(--yellow);
color:var(--navy);
border:0;
border-radius:10px;
font-weight:800;
padding:.8rem 1.2rem;
}

.btn-yellow:hover{
background:#ffe55d;
color:var(--navy);
}

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

.hero-section{
position:relative;
overflow:hidden;
padding:100px 0 88px;
background:
radial-gradient(
circle at 80% 20%,
#174b91 0,
#0b2856 38%,
#071a3a 75%
);
color:#fff;
}

.hero-section:after{
content:"";
position:absolute;
inset:auto -10% -180px auto;
width:520px;
height:520px;
border:1px solid rgba(255,255,255,.1);
border-radius:50%;
pointer-events:none;
}

.eyebrow,
.section-kicker{
font-size:.75rem;
letter-spacing:.16em;
font-weight:800;
color:var(--blue);
margin-bottom:14px;
}

.eyebrow{
color:var(--yellow);
}

.hero-section h1{
font-size:clamp(2.8rem,5vw,4.8rem);
font-weight:800;
line-height:1.05;
letter-spacing:-.045em;
}

.hero-section h1 span{
color:var(--yellow);
}

.section-padding h2,
.support-section h2{
font-size:clamp(2rem,3.5vw,3rem);
font-weight:800;
line-height:1.12;
letter-spacing:-.035em;
}

.solution-card h3,
.service-card h3{
font-size:1.15rem;
font-weight:700;
line-height:1.3;
}

.support-label{
font-size:.75rem;
font-weight:800;
letter-spacing:.12em;
}

.hero-copy{
max-width:650px;
font-size:1.12rem;
line-height:1.8;
color:#d6e2f5;
}

.hero-trust{
display:flex;
flex-wrap:wrap;
gap:18px;
color:#d6e2f5;
font-size:.88rem;
}

.hero-panel{
padding:22px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
border-radius:24px;
box-shadow:0 25px 70px rgba(0,0,0,.2);
}

.hero-panel-top{
display:flex;
align-items:center;
gap:9px;
margin-bottom:25px;
color:#bcd0ec;
font-size:.7rem;
letter-spacing:.13em;
font-weight:800;
}

.status-dot{
width:8px;
height:8px;
background:#5be37a;
border-radius:50%;
box-shadow:0 0 0 5px rgba(91,227,122,.12);
}

.platform-flow{
display:flex;
align-items:center;
gap:10px;
max-width:100%;
min-width:0;
}

.flow-card{
flex:1;
min-width:0;
max-width:100%;
min-height:145px;
padding:18px;
background:#fff;
color:var(--ink);
border-radius:16px;
}

.flow-icon{
display:flex;
align-items:center;
justify-content:center;
width:54px;
height:54px;
margin-bottom:14px;
border-radius:14px;
background:var(--yellow);
color:var(--navy);
font-size:25px;
line-height:1;
box-shadow:0 8px 20px rgba(7,26,58,.12);
transition:all .3s ease;
}

.flow-icon i{
color:var(--navy);
font-size:25px;
line-height:1;
transition:all .3s ease;
}

.flow-card:hover .flow-icon{
background:var(--navy);
color:var(--yellow);
transform:translateY(-3px);
box-shadow:0 12px 25px rgba(7,26,58,.2);
}

.flow-card:hover .flow-icon i{
color:var(--yellow);
}

.flow-card > span:not(.flow-icon){
display:block;
font-weight:800;
font-size:1.05rem;
}

.flow-card small{
display:block;
margin-top:7px;
color:var(--muted);
line-height:1.4;
}

.flow-line{
width:22px;
height:2px;
flex:0 0 22px;
background:var(--yellow);
}

.hero-mini-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
max-width:100%;
min-width:0;
margin-top:12px;
}

.hero-mini-grid div{
min-width:0;
padding:12px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.08);
border-radius:10px;
color:#dbe7f7;
font-size:.76rem;
text-align:center;
overflow-wrap:anywhere;
}

@media(max-width:991.98px){

.hero-section{
padding:92px 0 75px;
}

}

@media(max-width:767.98px){

.hero-section{
padding:86px 0 60px;
}

.hero-section h1{
font-size:2.7rem;
line-height:1.08;
letter-spacing:-.035em;
}

.section-padding h2,
.support-section h2{
font-size:2rem;
line-height:1.15;
}

}

/* ================================
   QUICK INTENT
   ================================ */

.quick-intent{
padding:65px 0;
background:var(--bg);
}

.intent-head,
.section-title-row{
display:flex;
justify-content:space-between;
align-items:end;
gap:30px;
margin-bottom:24px;
}

.intent-head h2,
.section-title-row h2{
margin:0;
font-size:clamp(2rem,3vw,3.1rem);
letter-spacing:-.04em;
font-weight:800;
line-height:1.12;
}

.intent-head p,
.section-title-row p{
max-width:450px;
margin:0;
color:var(--muted);
line-height:1.7;
}

.intent-card{
display:block;
height:100%;
min-width:0;
max-width:100%;
padding:22px;
background:#fff;
border:1px solid var(--line);
border-radius:16px;
color:var(--ink);
transition:
transform .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}

.intent-card:hover{
transform:translateY(-4px);
border-color:#b7cdf4;
box-shadow:0 15px 35px rgba(16,24,40,.08);
}

.intent-icon{
display:flex;
align-items:center;
justify-content:center;
width:52px;
height:52px;
margin-bottom:16px;
border-radius:14px;
background:rgba(255,193,7,.15);
color:var(--navy);
font-size:24px;
line-height:1;
transition:all .3s ease;
}

.intent-icon i{
color:var(--navy);
font-size:24px;
line-height:1;
transition:all .3s ease;
}

.intent-card strong{
display:block;
margin-bottom:8px;
font-size:1rem;
line-height:1.4;
}

.intent-card .intent-description{
display:block;
color:var(--muted);
font-size:.86rem;
line-height:1.55;
}

.intent-card:hover .intent-icon{
background:var(--navy);
color:var(--yellow);
transform:translateY(-3px);
box-shadow:0 10px 24px rgba(7,26,58,.18);
}

.intent-card:hover .intent-icon i{
color:var(--yellow);
}

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

.section-padding{
padding:95px 0;
}

.light{
color:var(--yellow);
}

.light-row p{
color:#b8c8dd;
}

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

.solution-card{
position:relative;
overflow:hidden;
isolation:isolate;
background-color:var(--navy);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
min-height:250px;
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:24px;
transition:
transform .25s ease,
border-color .25s ease,
box-shadow .25s ease;
}

.solution-card h3{
color:#fff;
margin:0 0 10px;
padding:0;
text-shadow:0 2px 10px rgba(0,0,0,.35);
}

.solution-card p{
color:#e4edf9;
margin:0;
padding:0;
line-height:1.6;
text-shadow:0 1px 5px rgba(0,0,0,.3);
}

.solution-overlay{
position:absolute;
inset:0;
z-index:0;
background:
linear-gradient(
180deg,
rgba(7,26,58,.18) 0%,
rgba(7,26,58,.48) 42%,
rgba(7,26,58,.94) 100%
);
transition:background .3s ease;
}

.solution-card h3,
.solution-card p,
.solution-card .solution-icon{
position:relative;
z-index:2;
}

.solution-card:hover{
transform:translateY(-5px);
border-color:rgba(255,210,28,.7);
box-shadow:0 20px 45px rgba(7,26,58,.22);
}

.solution-card:hover .solution-overlay{
background:
linear-gradient(
180deg,
rgba(7,26,58,.10) 0%,
rgba(7,26,58,.38) 42%,
rgba(7,26,58,.91) 100%
);
}

.solution-card .solution-icon{
flex-shrink:0;
}

.solution-icon{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:center;
width:52px;
height:52px;
margin-bottom:16px;
border-radius:14px;
background:var(--yellow);
color:var(--navy);
font-size:24px;
line-height:1;
box-shadow:0 8px 20px rgba(0,0,0,.15);
transition:all .3s ease;
}

.solution-icon i{
color:var(--navy);
font-size:24px;
line-height:1;
}

.solution-card:hover .solution-icon{
background:var(--navy);
color:var(--yellow);
transform:translateY(-3px);
}

.solution-card:hover .solution-icon i{
color:var(--yellow);
}

/* ================================
   SOLUTION IMAGES
   ================================ */

.solution-hardware{
background-image:url("../images/solutions/it-hardware.jpg");
}

.solution-printing{
background-image:url("../images/solutions/printing-scanning.jpg");
}

.solution-networking{
background-image:url("../images/solutions/networking-wifi.jpg");
}

.solution-cctv{
background-image:url("../images/solutions/cctv-surveillance.jpg");
}

.solution-access{
background-image:url("../images/solutions/biometric-access-control.jpg");
}

.solution-software{
background-image:url("../images/solutions/business-software.jpg");
}

.solution-display{
background-image:url("../images/solutions/interactive-display.jpg");
}

.solution-av{
background-image:url("../images/solutions/audio-video.jpg");
}

.solution-intercom{
background-image:url("../images/solutions/office-intercom.jpg");
}

@media(max-width:767.98px){

.solution-card{
min-height:235px;
padding:24px;
}

.solution-card h3{
font-size:1.08rem;
}

.solution-card p{
font-size:.88rem;
line-height:1.55;
}

}

/* ================================
   DARK SECTION
   ================================ */

.dark-section{
background:var(--navy);
color:#fff;
}

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

.service-card{
height:100%;
padding:28px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.12);
border-radius:18px;
}

.service-icon{
display:flex;
align-items:center;
justify-content:center;
width:52px;
height:52px;
margin-bottom:22px;
border-radius:14px;
background:var(--yellow);
color:var(--navy);
font-size:24px;
line-height:1;
box-shadow:0 8px 20px rgba(0,0,0,.12);
transition:all .3s ease;
}

.service-icon i{
color:var(--navy);
font-size:24px;
line-height:1;
transition:all .3s ease;
}

.service-card:hover .service-icon{
background:#fff;
color:var(--navy);
transform:translateY(-3px);
box-shadow:0 12px 25px rgba(0,0,0,.2);
}

.service-card:hover .service-icon i{
color:var(--blue);
}

.service-card h3{
margin:22px 0 10px;
font-size:1.2rem;
}

.service-card p{
margin:0;
color:#b8c8dd;
line-height:1.6;
}

/* ================================
   FORM INTENT
   ================================ */

.form-header > span#selectedIntent{
display:inline-flex;
align-items:center;
justify-content:center;
flex-wrap:nowrap;
width:auto;
max-width:100%;
min-width:0;
box-sizing:border-box;
margin:0;
padding:6px 8px;
gap:2px;
background:#eaf1ff;
border-radius:999px;
color:var(--blue);
font-size:.8rem;
font-weight:700;
line-height:1.2;
white-space:nowrap;
}

.form-header > span#selectedIntent > span{
padding:0;
margin:0;
background:transparent;
border-radius:0;
color:inherit;
font-size:inherit;
font-weight:inherit;
white-space:nowrap;
}

#selectedIntent i{
flex:0 0 auto;
line-height:1;
}

#selectedIntent i.bi-whatsapp{
color:#25D366;
}

#selectedIntent i.bi-send-fill{
color:#1877F2;
}

#selectedIntent .intent-divider{
padding:0;
margin:0 1px;
background:transparent;
color:#9aa4b2;
font-size:.8em;
font-weight:600;
}

@media(max-width:576px){

.form-header{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:6px;
width:100%;
}

.form-header > span#selectedIntent{
align-self:flex-start;
max-width:100%;
padding:6px 8px;
font-size:.75rem;
gap:2px;
}

}

@media(max-width:380px){

.form-header > span#selectedIntent{
padding:5px 7px;
font-size:.7rem;
gap:1px;
}

}

/* ================================
   REQUIREMENT
   ================================ */

.requirement-section{
background:var(--bg);
}

.requirement-section h2{
font-size:clamp(2.1rem,4vw,3.5rem);
font-weight:800;
letter-spacing:-.045em;
}

.lead{
color:var(--muted);
line-height:1.8;
}

.requirement-points{
margin-top:30px;
}

.requirement-points div{
display:flex;
align-items:center;
gap:15px;
padding:16px 0;
border-bottom:1px solid var(--line);
}

.requirement-number{
color:var(--blue);
font-size:.75rem;
font-weight:700;
}

.requirement-form{
padding:28px;
background:#fff;
border:1px solid var(--line);
border-radius:22px;
box-shadow:0 20px 60px rgba(16,24,40,.07);
}

.form-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
}

.form-header strong{
font-size:1.25rem;
}

label{
width:100%;
color:#344054;
font-size:.8rem;
font-weight:700;
}

.form-control{
margin-top:7px;
padding:.8rem .9rem;
border-color:#d0d5dd;
border-radius:10px;
}

.form-control:focus{
border-color:#7ca8ee;
box-shadow:0 0 0 .2rem rgba(18,97,216,.1);
}

.form-result{
margin-top:15px;
color:var(--muted);
font-size:.85rem;
}

#submitRequirementBtn{
transition:all .2s ease-in-out;
}

#submitRequirementBtn:hover{
color:#d7e7ff;
background-color:#0056b3!important;
border-color:#004085!important;
transform:translateY(-2px);
box-shadow:0 4px 8px rgba(0,0,0,.15);
}

/* ================================
   SUPPORT
   ================================ */

.support-section{
padding:55px 0;
background:#f7f9fc;
}

.support-box{
position:relative;
display:flex;
justify-content:space-between;
align-items:stretch;
gap:55px;
overflow:hidden;
padding:48px;
background:
radial-gradient(
circle at 85% 20%,
rgba(18,97,216,.22),
transparent 30%
),
linear-gradient(135deg,#071a3a,#0b2856);
border:1px solid rgba(255,255,255,.12);
border-radius:26px;
color:#fff;
box-shadow:0 25px 60px rgba(7,26,58,.16);
}

.support-box:before{
content:"";
position:absolute;
width:320px;
height:320px;
right:-140px;
bottom:-190px;
border:1px solid rgba(255,255,255,.08);
border-radius:50%;
pointer-events:none;
}

.support-box:after{
content:"";
position:absolute;
width:190px;
height:190px;
right:-80px;
bottom:-110px;
border:1px solid rgba(255,210,28,.12);
border-radius:50%;
pointer-events:none;
}

.support-content{
position:relative;
z-index:2;
flex:1;
min-width:0;
}

.support-label{
display:flex;
align-items:center;
gap:10px;
margin-bottom:16px;
color:var(--yellow);
font-size:.72rem;
letter-spacing:.16em;
font-weight:800;
}

.support-status{
display:inline-block;
width:9px;
height:9px;
background:#5be37a;
border-radius:50%;
box-shadow:0 0 0 5px rgba(91,227,122,.12);
}

.support-content h2{
max-width:650px;
margin:0;
font-size:clamp(2rem,4vw,3.25rem);
line-height:1.08;
letter-spacing:-.045em;
font-weight:800;
}

.support-description{
max-width:680px;
margin:18px 0 0;
color:#c4d2e6;
font-size:1rem;
line-height:1.75;
}

.support-features{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:28px;
}

.support-features div{
display:flex;
align-items:center;
gap:9px;
padding:10px 14px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.11);
border-radius:10px;
color:#dce7f6;
font-size:.78rem;
font-weight:600;
}

.support-features i{
color:var(--yellow);
font-size:16px;
}

.support-actions{
position:relative;
z-index:2;
width:350px;
flex:0 0 350px;
padding:24px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.13);
border-radius:20px;
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
}

.support-action-title{
margin-bottom:18px;
}

.support-action-title span{
display:block;
margin-bottom:5px;
color:#9fb5d2;
font-size:.66rem;
letter-spacing:.14em;
font-weight:800;
}

.support-action-title strong{
display:block;
color:#fff;
font-size:1.15rem;
font-weight:800;
}

.support-btn{
display:flex;
align-items:center;
gap:12px;
width:100%;
min-height:68px;
margin-top:12px;
padding:10px 13px;
border-radius:13px;
transition:all .25s ease;
}

.support-btn-icon{
display:flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
flex:0 0 42px;
border-radius:11px;
font-size:19px;
}

.support-btn span:nth-child(2){
flex:1;
min-width:0;
}

.support-btn small{
display:block;
margin-bottom:2px;
font-size:.68rem;
font-weight:600;
}

.support-btn strong{
display:block;
font-size:.88rem;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.support-btn > i{
font-size:15px;
transition:transform .25s ease;
}

.support-btn:hover > i{
transform:translate(3px,-3px);
}

.support-btn-primary{
background:var(--yellow);
color:var(--navy);
}

.support-btn-primary .support-btn-icon{
background:var(--navy);
color:var(--yellow);
}

.support-btn-primary small{
color:#344054;
}

.support-btn-primary strong{
color:var(--navy);
}

.support-btn-secondary{
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.14);
color:#fff;
}

.support-btn-secondary .support-btn-icon{
background:rgba(255,255,255,.1);
color:var(--yellow);
}

.support-btn-secondary small{
color:#9fb5d2;
}

.support-btn-secondary strong{
color:#fff;
}

.support-btn:hover{
transform:translateY(-2px);
}

.support-btn-primary:hover{
background:#ffe55d;
color:var(--navy);
}

.support-btn-secondary:hover{
background:rgba(255,255,255,.11);
color:#fff;
}

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

.about-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px;
}

.about-grid div{
padding:28px;
background:var(--bg);
border:1px solid var(--line);
border-radius:18px;
}

.about-grid strong{
display:block;
font-size:1.1rem;
}

.about-grid span{
display:block;
margin-top:7px;
color:var(--muted);
}

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

.site-footer{
position:relative;
overflow:hidden;
padding:70px 0 25px;
background:#050f22;
color:#b8c8dd;
}

.site-footer:before{
content:"";
position:absolute;
width:420px;
height:420px;
right:-220px;
top:-240px;
border:1px solid rgba(255,255,255,.06);
border-radius:50%;
pointer-events:none;
}

.site-footer:after{
content:"";
position:absolute;
width:260px;
height:260px;
right:-140px;
top:-150px;
border:1px solid rgba(255,210,28,.06);
border-radius:50%;
pointer-events:none;
}

.footer-contact-link .bi-whatsapp{
color:#25D366;
}

.footer-main{
display:grid;
grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);
gap:70px;
align-items:start;
}

.footer-brand,
.footer-contact{
min-width:0;
}

.footer-logo{
width:auto;
height:45px;
margin-bottom:20px;
padding:5px 0;
background:transparent;
border-radius:6px;
}

.footer-brand p{
width:100%;
margin:0;
color:#9fb1ca;
font-size:.9rem;
line-height:1.7;
}

.footer-status{
display:inline-flex;
align-items:center;
gap:9px;
margin-top:20px;
padding:9px 14px;
border:1px solid rgba(255,255,255,.12);
border-radius:999px;
background:rgba(255,255,255,.05);
color:rgba(255,255,255,.82);
font-size:13px;
font-weight:600;
letter-spacing:.15px;
}

.footer-status-icon{
display:inline-flex;
align-items:center;
justify-content:center;
color:#25D366;
font-size:14px;
}

.site-footer h3{
margin:5px 0 22px;
color:#fff;
font-size:.95rem;
font-weight:800;
}

.footer-contact{
padding:24px;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.09);
border-radius:18px;
}

.footer-contact h3{
margin-top:0;
margin-bottom:10px;
}

.footer-contact > p{
margin-bottom:20px;
color:#9fb1ca;
font-size:.8rem;
line-height:1.65;
}

.footer-contact-link{
display:flex;
align-items:center;
gap:11px;
margin-bottom:12px;
padding:10px;
background:rgba(255,255,255,.035);
border-radius:11px;
color:#fff!important;
transition:all .2s ease;
}

.footer-contact-link:hover{
background:rgba(255,255,255,.08);
transform:translateY(-2px);
}

.footer-contact-icon{
display:flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
flex:0 0 38px;
background:var(--yellow);
border-radius:10px;
color:var(--navy);
font-size:16px;
}

.footer-contact-link small{
display:block;
margin-bottom:2px;
color:#8296b3;
font-size:.62rem;
}

.footer-contact-link strong{
display:block;
color:#fff;
font-size:.78rem;
font-weight:700;
overflow-wrap:anywhere;
}

.footer-contact-value{
display:block;
font-weight:600;
}

.footer-cta{
display:flex!important;
align-items:center;
justify-content:space-between;
gap:10px;
width:100%;
margin-top:15px;
padding:12px 15px;
background:var(--yellow);
border-radius:10px;
color:var(--navy)!important;
font-size:.78rem;
font-weight:800;
transition:all .2s ease;
}

.footer-cta:hover{
background:#fff;
color:var(--navy);
}

.footer-cta .bi-whatsapp{
color:#25D366;
}

.footer-cta i{
font-size:14px;
}

.footer-bottom{
position:relative;
z-index:2;
display:flex;
justify-content:space-between;
align-items:center;
gap:25px;
padding-top:22px;
border-top:1px solid rgba(255,255,255,.09);
font-size:.72rem;
}

.footer-copyright{
color:#71849f;
}

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

@media(max-width:991.98px){

.mobile-drawer{
z-index:10001!important;
}

.hamburger{
z-index:10000!important;
}

.site-header .navbar{
position:relative;
z-index:10000;
}

.desktop-nav{
display:none!important;
}

.hamburger{
display:flex!important;
}

.mobile-drawer{
display:block!important;
}

.mobile-drawer .drawer-close{
display:flex!important;
visibility:visible!important;
opacity:1!important;
pointer-events:auto!important;
}

.platform-flow{
flex-direction:column;
}

.flow-card{
width:100%;
min-height:auto;
}

.flow-line{
width:2px;
height:18px;
}

.support-box{
display:block;
padding:38px;
}

.support-actions{
width:100%;
margin-top:32px;
}

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

.footer-brand{
grid-column:1 / -1;
}

.footer-contact{
grid-column:1 / -1;
max-width:100%;
}

}

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

@media(max-width:767.98px){

.navbar{
position:relative;
z-index:1001;
}

.navbar > .container{
position:relative;
display:flex;
align-items:center;
justify-content:space-between;
}

.hamburger{
display:flex!important;
visibility:visible!important;
opacity:1!important;
pointer-events:auto!important;
width:34px!important;
height:36px!important;
min-width:34px!important;
min-height:36px!important;
padding:5px!important;
margin-left:auto!important;
}

.hamburger span{
display:block!important;
visibility:visible!important;
opacity:1!important;
}

.mobile-drawer{
display:block!important;
visibility:hidden!important;
opacity:0!important;
pointer-events:none!important;
width:320px!important;
max-width:88vw!important;
padding:78px 18px 25px!important;
}

.mobile-drawer.open{
display:block!important;
visibility:visible!important;
opacity:1!important;
pointer-events:auto!important;
}

.mobile-drawer .drawer-close{
display:flex!important;
visibility:visible!important;
opacity:1!important;
pointer-events:auto!important;
position:absolute!important;
top:14px!important;
right:14px!important;
width:44px!important;
height:44px!important;
min-width:44px!important;
min-height:44px!important;
}

.mobile-drawer .drawer-close span{
display:block!important;
visibility:visible!important;
opacity:1!important;
}

.intent-head,
.section-title-row,
.support-box{
display:block;
}

.intent-head p,
.section-title-row p{
margin-top:14px;
}

.section-padding{
padding:70px 0;
}

.support-section{
padding:40px 0;
}

.support-box{
padding:28px 22px;
border-radius:20px;
}

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

.support-features div{
width:100%;
}

.support-actions{
padding:18px;
margin-top:26px;
}

.site-footer{
padding:55px 0 22px;
}

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

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

.footer-brand{
grid-column:1 / -1;
}

.footer-contact{
grid-column:1 / -1;
}

}

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

@media(max-width:480px){

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

.footer-brand,
.footer-contact{
grid-column:auto;
}

}

/* ================================
   EXTRA SMALL MOBILE
   ================================ */

@media(max-width:380px){

.mobile-drawer{
width:300px!important;
max-width:90vw!important;
}

.mobile-drawer .drawer-close{
top:14px!important;
right:14px!important;
width:44px!important;
height:44px!important;
}

}

/* ================================
   FORM INPUT SELECTION
   ================================ */

input,
textarea{
-webkit-user-select:text;
-moz-user-select:text;
-ms-user-select:text;
user-select:text;
}