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

body {
font-family:'Poppins',sans-serif;
color:#000;
background:#fafcff
}

button,input,select,textarea {
font-family:inherit
}

html {
scrollbar-width:thin;
scrollbar-color:#074b88 #e4ecf5
}

::-webkit-scrollbar {
width:14px
}

::-webkit-scrollbar-track {
background:#e4ecf5;
box-shadow:inset 0 0 4px #0b1e2e26;
border-radius:20px
}

::-webkit-scrollbar-thumb {
background:#074b88;
background-image:linear-gradient(90deg,#fff0 0%,#ffffff40 50%,#fff0 100%);
border-radius:20px;
border:4px solid #e4ecf5;
min-height:40px
}

::-webkit-scrollbar-thumb:hover {
background-color:#053763
}

::-webkit-scrollbar-corner {
background:transparent
}

.scroll-top {
position:fixed;
bottom:30px;
right:30px;
width:56px;
height:56px;
border:none;
border-radius:50%;
background:#25d366;
box-shadow:0 8px 24px #0b1e2e40;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
z-index:999;
text-decoration:none;
transition:transform .3s ease,box-shadow .3s ease;
animation:whatsapp-bounce 2.6s ease-in-out infinite
}

.scroll-top::before {
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius:50%;
background:#25d366;
z-index:-1;
animation:whatsapp-pulse 2.2s ease-out infinite
}

.scroll-top:hover {
transform:translateY(-3px);
box-shadow:0 10px 28px #0b1e2e4d;
animation-play-state:paused
}

.scroll-top i {
color:#fff;
font-size:28px
}

@keyframes whatsapp-pulse {
0% {
transform:scale(1);
opacity:.6
}
100% {
transform:scale(1.9);
opacity:0
}
}

@keyframes whatsapp-bounce {
0%,20%,50%,80%,100% {
transform:translateY(0)
}
40% {
transform:translateY(-8px)
}
60% {
transform:translateY(-4px)
}
}

@media (prefers-reduced-motion:reduce) {
.scroll-top,.scroll-top::before {
animation:none
}
}

.hero {
min-height:88vh;
display:flex;
flex-direction:column;
align-items:center;
background:url(../image/bg_home.png) center center / cover no-repeat;
background-color:#eef4fa;
padding-top:100px
}

header {
width:100%;
position:fixed;
top:0;
left:0;
z-index:9999;
display:flex;
justify-content:center;
padding:15px 20px;
background:transparent;
transition:background .3s ease
}

header.scrolled {
background:#fffffff2;
backdrop-filter:blur(10px);
box-shadow:0 4px 20px #00000014;
padding:10px 20px
}

.navbar {
width:100%;
max-width:1200px;
background:#fff;
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 28px;
border-radius:18px;
box-shadow:0 10px 30px #00000014;
flex-wrap:wrap;
gap:15px;
transition:all .3s ease
}

header.scrolled .navbar {
padding:10px 24px;
background:transparent;
box-shadow:none;
border-radius:0
}

.logo img {
width:140px;
display:block;
transition:width .3s ease
}

header.scrolled .logo img {
width:120px
}

.menu-toggle {
display:none;
background:none;
border:none;
font-size:22px;
color:#111;
cursor:pointer;
padding:6px;
line-height:1
}

nav {
display:flex;
align-items:center;
gap:30px;
flex-wrap:wrap
}

/* Wraps <nav> + the login/demo button on mobile so the menu becomes a
   compact right-aligned card instead of stretching the whole navbar
   (see responsive.css). On desktop it stays display:contents so it has
   zero effect — nav + login-btn behave as direct children of .navbar. */
.mobile-menu-panel {
display:contents
}

nav>a,.drop-btn {
text-decoration:none;
color:#111;
font-size:16px;
font-weight:500;
transition:.3s;
white-space:nowrap
}

nav>a:hover,.drop-btn:hover {
color:#074b88
}

.login-btn {
background:#074b88;
color:#fff;
text-decoration:none;
padding:10px 24px;
border-radius:12px;
font-weight:500;
transition:.3s;
white-space:nowrap;
font-size:15px
}

.login-btn:hover {
background:#053763;
transform:translateY(-2px)
}

.dropdown {
position:relative
}

.drop-btn i {
margin-left:6px;
font-size:12px;
transition:transform .3s ease
}

.dropdown.show .drop-btn i,.dropdown:hover .drop-btn i {
transform:rotate(180deg)
}

.dropdown-content {
position:absolute;
top:65px;
left:50%;
transform:translateX(-50%);
width:700px;
max-width:90vw;
background:#fff;
border-radius:20px;
padding:30px 35px;
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
box-shadow:0 20px 60px #00000026;
opacity:0;
visibility:hidden;
transition:.25s ease;
pointer-events:none
}

.dropdown.show .dropdown-content {
opacity:1;
visibility:visible;
top:55px;
pointer-events:auto
}

.dropdown-content.resources-dropdown {
width:440px;
grid-template-columns:1fr;
padding:20px
}

.resources-grid {
display:grid;
grid-template-columns:max-content max-content;
gap:6px 24px
}

.resources-grid a {
white-space:nowrap
}

.menu-column.resources-grid a i {
color:inherit;
width:22px;
font-size:20px
}

.menu-column h4 {
color:#074b88;
font-size:13px;
letter-spacing:2px;
margin-bottom:18px;
text-transform:uppercase
}

.menu-column a {
display:flex;
align-items:center;
gap:12px;
text-decoration:none;
color:#074b88;
padding:12px 14px;
border-radius:12px;
transition:.3s
}

.menu-column a i {
color:#074b88;
width:24px;
font-size:18px
}

.menu-column a img {
width:22px;
height:22px;
flex-shrink:0;
object-fit:contain
}

.menu-column a:hover {
background:#f4f8ff;
color:#074b88
}

.hero-content {
text-align:center;
margin-top:50px;
width:90%;
max-width:900px
}

.badge {
display:inline-flex;
align-items:center;
gap:10px;
background:#fff;
color:#074b88;
padding:8px 22px;
border-radius:15px;
box-shadow:-6px 6px 14px #1f4d721f;
font-weight:600;
font-size:15px
}

.hero-content h1 {
margin-top:30px;
font-size:65px;
line-height:1.15;
font-weight:800;
color:#0b1e2e

}

.hero-content h1 span {
color:#074b88
}

.hero-content p {
margin:25px auto 0;
max-width:780px;
color:#4a5a6e;
font-size:20px;
line-height:1.6
}

.hero-buttons {
display:flex;
justify-content:center;
gap:20px;
margin-top:40px;
flex-wrap:wrap
}

.primary-btn {
background:#074b88;
color:#fff;
text-decoration:none;
padding:16px 38px;
border-radius:14px;
font-weight:600;
transition:.3s;
display:inline-flex;
align-items:center;
gap:8px
}

.primary-btn:hover {
background:#053763;
transform:translateY(-2px)
}

.secondary-btn {
border:2px solid #074b88;
color:#074b88;
text-decoration:none;
padding:16px 38px;
border-radius:14px;
font-weight:600;
transition:.3s;
display:inline-flex;
align-items:center;
gap:8px;
background:transparent
}

.secondary-btn:hover {
background:#074b88;
color:#fff;
transform:translateY(-2px)
}

.home_dash {
width:100%;
display:flex;
justify-content:center;
align-items:center;
margin-top:70px;
margin-bottom:60px;
padding:0 20px
}

.home_dash img {
width:90%;
max-width:1200px;
height:auto;
transition:transform .3s ease
}

.problems-section {
max-width:1200px;
margin:0 auto;
padding:80px 20px 100px;
text-align:center
}

.problems-section .badge {
margin-bottom:25px
}

.problems-section h2 {
font-size:52px;
font-weight:800;
line-height:1.15;
color:#0b1e2e;
margin-bottom:18px
}

.section-desc {
max-width:950px;
margin:0 auto 55px;
color:#848282;
font-size:20px;
line-height:1.7
}

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

.cards .card {
grid-column:span 2
}

.cards .card:nth-child(4) {
grid-column:2 / 4
}

.cards .card:nth-child(5) {
grid-column:4 / 6
}

.card {
background:#fff;
border:1px solid #ececec;
border-radius:24px;
padding:32px 28px;
text-align:left;
transition:.3s;
box-shadow:0 4px 12px #00000005
}

.icon {
width:54px;
height:54px;
border-radius:50%;
background:#184b70;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:22px
}

.card h3 {
font-size:26px;
font-weight:700;
line-height:1.3;
margin-bottom:14px;
color:#0b1e2e
}

.card p {
color:#5b6b7e;
font-size:17px;
line-height:1.6
}

.modules-section {
padding-top:60px;
max-width:1200px;
margin:0 auto;
text-align:center
}

.modules-badge {
margin-bottom:25px
}

.modules-section>h2 {
font-size:44px;
font-weight:800;
line-height:1.2;
color:#0b1e2e;
margin-bottom:18px
}

.modules-section>.section-desc {
margin-bottom:70px
}

.module-row {
display:flex;
align-items:center;
gap:60px;
text-align:left;
margin-bottom:90px
}

.module-row:last-child {
margin-bottom:0
}

.module-content {
flex:1;
min-width:0
}

.module-label {
display:block;
color:#074b88;
font-size:13px;
font-weight:700;
letter-spacing:1.5px;
margin-bottom:12px;
text-transform:uppercase
}

.module-content h3 {
font-size:30px;
font-weight:700;
line-height:1.3;
color:#0b1e2e;
margin-bottom:18px
}

.module-content p {
color:#5b6b7e;
font-size:17px;
line-height:1.6;
margin-bottom:28px;
max-width:460px
}

.module-buttons {
display:flex;
flex-wrap:wrap;
gap:16px
}

.btn-light {
background:#dcecfb;
color:#074b88;
text-decoration:none;
padding:14px 26px;
border-radius:12px;
font-weight:600;
font-size:15px;
transition:.3s;
display:inline-flex;
align-items:center
}

.btn-light:hover {
background:#c5e0f7
}

.module-image {
flex:1;
min-width:0;
display:flex;
justify-content:center;
align-items:center;
padding:20px;
border-radius:28px
}

.module-image img {
width:100%;
max-width:600px;
height:auto;
border-radius:16px;
transition:transform .35s ease,box-shadow .35s ease
}

.integrations-section {
overflow:hidden;
padding:80px 20px
}

.integrations-row {
position:relative;
display:flex;
align-items:center;
gap:40px;
max-width:1200px;
margin:0 auto;
padding:50px 60px;
background:url(../image/icon_bg_img.png) center center / cover no-repeat;
border-radius:24px;
overflow:hidden
}

.integrations-content {
flex:0 0 auto;
width:100%;
max-width:520px
}

.integrations-content .badge {
margin-bottom:22px
}

.integrations-content h2 {
font-size:50px;
font-weight:800;
line-height:1.2;
color:#0b1e2e;
margin-bottom:16px
}

.integrations-content p {
color:#848282;
font-size:20px;
line-height:1.6;
margin-bottom:30px;
max-width:480px
}

.integrations-image {
position:absolute;
right:0;
bottom:0
}

.integrations-image img {
width:100%;
max-width:650px;
height:auto;
display:block
}

.industries-section {
max-width:1200px;
margin:0 auto;
padding:80px 20px 10px;
text-align:center
}

.industries-section .badge {
margin-bottom:25px
}

.industries-section h2 {
font-size:50px;
line-height:1.15;
color:#0b1e2e;
margin-bottom:18px
}

.industries-grid {
display:grid;
grid-template-columns:repeat(5,1fr);
gap:45px 20px;
margin-top:60px
}

.industry-item {
display:flex;
flex-direction:column;
align-items:center;
gap:18px
}

.industry-icon {
width:64px;
height:64px;
display:flex;
align-items:center;
justify-content:center;
font-size:30px;
color:#0b1e2e;
border-radius:14px
}

.industry-item h3 {
font-size:20px;
font-weight:500;
color:#074b88;
line-height:1.4
}

.blogs-section {
max-width:1200px;
margin:0 auto;
text-align:center
}

.blogs-section .badge {
margin-bottom:25px
}

.blogs-section h2 {
font-size:44px;
font-weight:800;
line-height:1.15;
color:#0b1e2e;
margin-bottom:18px
}

.blogs-grid {
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:28px;
margin:60px 0 50px;
text-align:left
}

.blog-card {
flex:1 1 calc((100% - 56px) / 3);
max-width:calc((100% - 56px) / 3);
background:#fff;
border:1px solid #ececec;
border-radius:20px;
overflow:hidden;
box-shadow:0 4px 12px #00000005;
display:flex;
flex-direction:column;
text-decoration:none;
transition:.3s
}

.blog-card:hover {
box-shadow:0 20px 40px #0000000f;
border-color:#d0dfed
}

.blog-card__image {
width:100%;
aspect-ratio:16 / 10;
object-fit:cover;
display:block;
background:#eef4fa
}

.blog-card__body {
padding:20px 22px 24px
}

.blog-card__title {
font-size:18px;
font-weight:700;
color:#0b1e2e;
line-height:1.35;
margin-bottom:10px
}

.blog-card__date {
display:block;
color:#8a97a8;
font-size:14px;
margin-bottom:16px
}

.blog-card__cta {
display:inline-flex;
align-items:center;
gap:8px;
background:#dcecfb;
color:#074b88;
padding:10px 20px;
border-radius:10px;
font-weight:600;
font-size:14px;
transition:.3s
}

.blog-card:hover .blog-card__cta {
background:#c5e0f7
}

.blogs-state {
flex:1 1 100%;
text-align:center;
color:#5b6b7e;
padding:20px 0
}

.view-all-btn {
display:inline-flex;
align-items:center;
gap:8px;
background:#074b88;
color:#fff;
text-decoration:none;
padding:14px 30px;
border-radius:12px;
font-weight:600;
transition:.3s
}

.view-all-btn:hover {
background:#053763;
transform:translateY(-2px)
}

.faq-section {
max-width:1200px;
margin:0 auto;
padding:80px 20px 100px
}

.faq-row {
display:flex;
align-items:flex-start;
gap:60px
}

.faq-content {
flex:1;
min-width:0;
max-width:420px
}

.faq-content .badge {
margin-bottom:22px
}

.faq-content h2 {
font-size:40px;
font-weight:800;
line-height:1.2;
color:#0b1e2e;
margin-bottom:16px
}

.faq-content p {
color:#5b6b7e;
font-size:16px;
line-height:1.6;
margin-bottom:30px
}

.faq-list {
flex:1.4;
min-width:0
}

.faq-item {
border-bottom:1px solid #e4ecf5
}

.faq-question {
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
background:none;
border:none;
cursor:pointer;
padding:22px 0;
text-align:left;
font-family:inherit;
font-size:17px;
font-weight:600;
color:#074b88;
line-height:1.4
}

.faq-question i {
flex-shrink:0;
color:#074b88;
font-size:14px;
transition:transform .3s ease
}

.faq-item.active .faq-question i {
transform:rotate(180deg)
}

.faq-answer {
max-height:0;
overflow:hidden;
transition:max-height .3s ease
}

.faq-answer p {
color:#5b6b7e;
font-size:15px;
line-height:1.6;
padding:0 0 22px
}

.faq-item.active .faq-answer {
max-height:300px
}

.fade-in {
opacity:0;
transform:translateY(30px);
transition:opacity .8s ease,transform .8s ease
}

.fade-in.visible {
opacity:1;
transform:translateY(0)
}

.app-section {
width:92%;
max-width:1400px;
margin:80px auto;
background:#074b88;
border-radius:28px;
padding:50px 60px 0;
color:#fff;
overflow:hidden
}

.app-header {
text-align:center;
margin-bottom:45px
}

.app-badge {
display:inline-flex;
align-items:center;
gap:8px;
background:#fff;
color:#074b88;
padding:8px 18px;
border-radius:30px;
font-size:14px;
font-weight:600;
margin-bottom:18px
}

.app-header h2 {
font-size:52px;
font-weight:700;
margin-bottom:10px
}

.app-header p {
color:#D8E7EF;
font-size:18px
}

.app-wrapper {
display:grid;
grid-template-columns:1fr 420px 1fr;
align-items:center;
gap:40px
}

.feature-column {
display:flex;
flex-direction:column;
gap:35px
}

.feature-card {
display:flex;
gap:18px;
align-items:flex-start
}

.feature-icon {
width:62px;
height:62px;
border-radius:50%;
background:#62B5EC;
display:flex;
justify-content:center;
align-items:center;
flex-shrink:0
}

.feature-icon i {
color:#fff;
font-size:26px
}

.feature-card h4 {
font-size:20px;
margin-bottom:8px
}

.feature-card p {
color:#D5E5EE;
line-height:1.6;
font-size:16px
}

.mobile-preview {
display:flex;
justify-content:center;
align-items:flex-end;
align-self:end
}

.mobile-preview img {
width:360px;
max-width:100%;
display:block
}

.footer {
background:url(../image/icon_bg_img.png) center center/cover no-repeat;
padding:70px 0 25px;
position:relative
}

.footer-overlay {
width:90%;
max-width:1400px;
margin:auto
}

.footer-top {
display:grid;
grid-template-columns:2.2fr 1fr 1.8fr 1fr;
gap:60px;
align-items:flex-start
}

.footer-about img {
width:180px;
margin-bottom:22px
}

.footer-about p {
color:#294B63;
font-size:16px;
line-height:1.7;
margin-bottom:28px;
max-width:290px
}

.contact-info {
display:flex;
flex-direction:column;
gap:15px
}

.contact-info div {
display:flex;
align-items:center;
gap:12px;
color:#294B63;
font-size:15px
}

.contact-info i {
color:#224E6C;
width:20px
}

.footer-column {
display:flex;
flex-direction:column
}

.footer-column h4 {
margin-bottom:22px;
color:#224E6C;
font-size:18px;
font-weight:700
}

.footer-column a {
display:inline-flex;
align-items:center;
gap:8px;
text-decoration:none;
color:#294B63;
margin-bottom:15px;
transition:.3s;
font-size:15px
}

.footer-column a i {
font-size:13px;
width:14px;
text-align:center
}

.footer-column a:hover {
color:#1D4D70;
padding-left:5px
}

.footer-bottom {
margin-top:45px;
border-top:1px solid #234e6d40;
padding-top:25px;
display:flex;
justify-content:space-between;
align-items:center
}

.social-icons {
display:flex;
gap:12px
}

.social-icons a {
width:38px;
height:38px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#234E6D;
color:#fff;
text-decoration:none;
transition:.3s
}

.social-icons a:hover {
background:#163B53;
transform:translateY(-3px)
}

.footer-bottom p {
color:#294B63;
font-size:15px;
font-weight:500
}

.footer-legal {
display:flex;
align-items:center;
gap:18px
}

.footer-legal a {
color:#294B63;
font-size:15px;
font-weight:500;
text-decoration:none;
transition:.3s
}

.footer-legal a:hover {
color:#074b88
}