/* =================================================
   THEME VARIABLES
================================================= */

:root{
/* light mode (default) */

--bg-main:#f8fafc;
--bg-section:#ffffff;
--bg-card:#ffffff;

--text-main:#0f172a;
--text-muted:#475569;

--border:rgba(0,0,0,.08);

--primary:#025546;
--accent:#22c55e;

}

/* DARK MODE */

body.dark-mode{

--bg-main:#020617;
--bg-section:#020617;
--bg-card:#0f172a;

--text-main:#e2e8f0;
--text-muted:#94a3b8;

--border:rgba(255,255,255,.08);

}
/* Body Text Font */
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Fallback if Visby CF isn't available */
    font-weight: 300; /* Helvetica LT 45 (Light) */
    color: var(--text-main);
    line-height: 1.6; /* For better readability */
	font-size:18px;
}

/* Headings and Key Messages (Visby CF) */
h1, h2, h3, h4, h5, h6, .headline, .key-message {
    font-family: 'Visby Regular';
    font-weight: 700; /* High-impact, bold for headings */
}

/* Example of Key Message and Hero Section */
.hero-section h1,
.cta-title {
     font-family: 'Visby Regular';
    font-weight: 700; /* Strong for calls-to-action */
    font-size: 48px;
    color: var(--accent);
}

/* Floating Theme Button */
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(34, 197, 94, .55);
}
.theme-toggle{
position:fixed;
bottom:25px;
left:25px;
width:52px;
height:52px;
border-radius:50%;
border:none;
background:#025546;
color:#fff;
font-size:20px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:9999;
box-shadow:0 10px 25px rgba(0,0,0,.35);
transition:all .3s ease;
}

.theme-toggle:hover{
transform:translateY(-3px) scale(1.05);
box-shadow:0 14px 35px rgba(0,0,0,.45);
}

body{
background:var(--bg-main);
color:var(--text-main);
transition:background .3s,color .3s;
}

/* sections */

.section-soft,
.solution-section,
.features-section,
.compare-section,
.industry-section,
.deploy-section,
.roi-section,
.trust-section,
.demo-section{
background:var(--bg-section);
}

/* cards */

.cap-card,
.analytics-card,
.soft-card,
.dashboard-preview,
.industry-card,
.journey-step,
.stat-mini,
.compare-wrapper,
.cta-card{
background:var(--bg-card);
border:1px solid var(--border);

}

/* muted text */

.text-secondary,
.feature-sub,
.solution-text,
.roi-sub,
.industry-text,
.compare-sub{
color:var(--text-muted)!important;
}
.accent-col {color: var(--accent);}
/* =================================================
   NAVBAR
================================================= */

.navbar-custom{
position:fixed;
top:0;
width:100%;
z-index:999;
padding:20px 0;
transition:all .3s ease;
}

/* scrolled navbar */

.navbar-custom.scrolled{
background:var(--bg-card);
backdrop-filter:blur(12px);
padding:12px 0;
box-shadow:0 5px 20px rgba(0,0,0,.15);
}

/* subtle divider */

.navbar-custom::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:1px;
background:var(--border);
}

/* =================================================
   LOGO
================================================= */

.navbar-brand img{
    height:50px;
    width:auto;
}
.navbar-brands img{
    height:40px;
    width:auto;
}
@media (max-width:768px){
 .navbar-brand img{
  width:100%;
  max-width:250px;
 }
}
/* =================================================
   NAV LINKS
================================================= */

.navbar-nav .nav-link{
color:var(--text-muted) !important;
margin:0 12px;
position:relative;
transition:.3s;
font-weight:500;
}

/* underline animation */

.navbar-nav .nav-link::after{
content:"";
position:absolute;
bottom:-6px;
left:0;
width:0%;
height:2px;
background:var(--accent);
transition:.3s;
}

.navbar-nav .nav-link:hover{
color:var(--text-main) !important;
}

.navbar-nav .nav-link:hover::after{
width:100%;
}

/* =================================================
   DEMO BUTTON
================================================= */

.btn-demo{
background:var(--accent);
border:none;
padding:10px 22px;
font-weight:600;
border-radius:8px;
transition:.3s;
color:#fff;
box-shadow:0 0 15px rgba(34,197,94,.35);
}

.btn-demo:hover{
transform:translateY(-2px);
background-color: var(--bs-btn-hover-bg);
color:#fff;
box-shadow:0 0 25px rgba(34,197,94,.55);
}

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

.navbar-toggler{
border:none;
}

.navbar-toggler:focus{
box-shadow:none;
}

.custom-toggler{
border:none;
width:30px;
height:22px;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:0;
}

/* hamburger lines */

.custom-toggler span{
display:block;
height:2px;
width:100%;
background:var(--text-main);
border-radius:2px;
transition:all .3s ease;
}

/* animation */

.custom-toggler.active span:nth-child(1){
transform:rotate(45deg) translate(5px,5px);
}

.custom-toggler.active span:nth-child(2){
opacity:0;
}

.custom-toggler.active span:nth-child(3){
transform:rotate(-45deg) translate(6px,-6px);
}

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

@media(max-width:991px){

.navbar-custom{
background:var(--bg-card);
}

.navbar-collapse{
background:var(--bg-section);
padding:20px;
border-radius:12px;
margin-top:10px;
border:1px solid var(--border);
}

.navbar-nav .nav-link{
padding:12px 0;
}

}

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

.hero-section{
position:relative;
min-height:93vh;
padding-top:120px;
overflow:hidden;
background:var(--bg-main);
color:var(--text-main);
}

/* background */

.hero-bg{
position:absolute;
inset:0;
z-index:0;
}

.hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(to bottom,rgba(0,0,0,.15),rgba(0,0,0,.25));
}

/* =================================================
   METRICS STRIP
================================================= */

.metrics-strip{
display:flex;
justify-content:center;
align-items:center;
gap:80px;
padding:18px 0;
background:var(--bg-card);
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
}

.metric-item{
display:flex;
align-items:center;
gap:12px;
color:var(--text-muted);
font-weight:500;
font-size:16px;
}

.metric-item i{
color:var(--accent);
font-size:18px;
}

/* mobile */

@media(max-width:768px){

.metrics-strip{
flex-direction:column;
gap:15px;
padding:20px 0;
}

}

/* =================================================
   ANALYTICS CARD
================================================= */

.analytics-card{
background: var(--bg-card);
    border-radius: 14px;
    border: 1px solid var(--border);
    padding: 22px;
    position: relative;
    overflow: hidden;    
box-shadow:
0 25px 60px rgba(0,0,0,.65),
inset 0 0 60px rgba(34,197,94,.04);
}

/* subtle glow background */
.analytics-card::before{
content:"";
position:absolute;
width:500px;
height:500px;
background:radial-gradient(circle,rgba(34,197,94,.15),transparent 70%);
top:-200px;
right:-200px;
}

/* browser header */

.browser-bar{
background:var(--bg-card);
border-bottom:1px solid var(--border);
padding:8px 12px;
border-radius:10px 10px 0 0;
margin:-26px -26px 20px -26px;
display:flex;
align-items:center;
gap:10px;
}

.dot{
width:10px;
height:10px;
border-radius:50%;
}

.dot.red{background:#ef4444;}
.dot.yellow{background:#f59e0b;}
.dot.green{background:var(--accent);}

.browser-url{
background:var(--bg-section);
padding:4px 10px;
border-radius:6px;
font-size:12px;
color:var(--text-muted);
margin-left:10px;
flex:1;
border:1px solid var(--border);
}

/* =================================================
   TRAFFIC GRAPH
================================================= */

.traffic-graph{
height:120px;
display:flex;
align-items:flex-end;
gap:6px;
position:relative;
}

.bar{
width:8px;
background:linear-gradient(to top,var(--accent),#4ade80);
border-radius:4px 4px 0 0;
animation:barAnim 2.5s infinite ease-in-out alternate;
}

/* shimmer */

.scan-line{
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(90deg, transparent, rgba(144, 238, 144, 0.16), transparent);
animation:scan 3s linear infinite;
}

@keyframes scan{
to{left:100%;}
}

@keyframes barAnim{
from{transform:scaleY(.4);}
to{transform:scaleY(1);}
}

/* =================================================
   STATS
================================================= */

.stat-mini{
background:var(--bg-card);
border:1px solid var(--border);
border-radius:10px;
padding:14px;
transition:.25s;
}


.stat-mini:hover{
border-color:#22c55e;
box-shadow:0 0 20px rgba(34,197,94,.25);
}

.stat-mini small{
font-size:12px;
}

.stat-mini h5{
font-size:28px;
margin-top:6px;
}
/* ===============================
DEVICE HEALTH SECTION
================================ */

.device-health{
margin-bottom:25px;
}

/* header */

.device-header h6{
font-weight:600;
font-size:15px;
margin-bottom:16px;
}

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

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

/* ===============================
DEVICE CARD
================================ */

.device-box{
background:var(--bg-section);
border:1px solid rgba(255,255,255,.06);
border-radius:14px;
padding:20px;
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:170px;
position:relative;
transition:.25s;
overflow:hidden;
}

/* hover */

.device-box:hover{
transform:translateY(-5px);
box-shadow:0 18px 35px rgba(0,0,0,.6);
border-color:rgba(255,255,255,.15);
}

/* ===============================
TOP SECTION
================================ */

.device-top{
display:flex;
justify-content:space-between;
align-items:flex-start;
margin-bottom:5px;
}

.device-title{
font-size:12px;
font-weight:600;
color:var(--text-main);
min-height:40px
}

.device-box small{
font-size:11px;
color:var(--text-muted);
}

/* ===============================
ICON
================================ */

.device-icon{
font-size:20px;
color:var(--accent);
opacity:.9;
}

/* ===============================
VALUE
================================ */

.device-value{
font-size:20px;
font-weight:700;
color:var(--text-main);
line-height:1;
margin:10px 0;
}

.device-value span{
font-size:22px;
margin-left:8px;
color:var(--text-main);
}

/* ===============================
STATUS
================================ */

.device-status{
font-size:13px;
display:flex;
align-items:center;
gap:6px;
font-weight:500;
margin-top:auto;
}

.device-status.online{
color:#22c55e;
}

.device-status.offline{
color:#ef4444;
}

.device-status.alerts{
color:#f59e0b;
}

/* ===============================
BOTTOM HEALTH BAR
================================ */

.device-box::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:4px;
border-radius:0 0 14px 14px;
background:#22c55e;
box-shadow:0 0 12px rgba(34,197,94,.6);
}

.device-box.offline::after{
background:#ef4444;
box-shadow:0 0 12px rgba(239,68,68,.6);
}

.device-box.alerts::after{
background:#f59e0b;
box-shadow:0 0 12px rgba(245,158,11,.6);
}

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

@media(max-width:992px){

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

}

@media(max-width:576px){

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

}


/* =================================================
   ACTIVITY WAVE
================================================= */

.wave{
height:80px;
display:flex;
align-items:flex-end;
gap:4px;
margin-top:20px;
}

.wave div{
flex:1;
background:var(--border);
border-radius:4px 4px 0 0;
animation:wave 1.6s infinite ease-in-out;
}

.wave div:nth-child(odd){animation-delay:.2s}
.wave div:nth-child(even){animation-delay:.4s}

@keyframes wave{
0%,100%{height:15%;}
50%{height:90%;}
}

.device-status.online i{
animation:pulse 2s infinite;
}

@keyframes pulse{
0%{opacity:1;}
50%{opacity:.4;}
100%{opacity:1;}
}

/* =================================================
   GLASS CARD
================================================= */

.glass-card{
background:var(--bg-card);
border:1px solid var(--border);
border-radius:14px;
padding:6px 12px;
}

/* =================================================
   GRADIENT TEXT
================================================= */

.text-gradient{
background:linear-gradient(90deg,var(--accent),#6ee7b7);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

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

.btn-primary-custom{
background:var(--accent);
border:none;
font-weight:700;
padding:14px 28px;
border-radius:10px;
transition:.3s;
color:#fff;
}

.btn-primary-custom:hover{
transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(34, 197, 94, .55);
}
.btn-outline-dark{
 color:var(--accent);
}
.play-circle{
width:35px;
height:35px;
background:rgba(34,197,94,.08);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
color:var(--accent);
}
.hero-section::before{
content:"";
position:absolute;
width:700px;
height:700px;
background:radial-gradient(circle,rgba(34,197,94,.15),transparent 70%);
top:-200px;
left:-200px;
}

/* CAPABILITY CARDS */
.cap-card{
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
padding:26px;
height:100%;
transition:.25s;
}

.cap-card:hover{
transform:translateY(-6px);
border-color:#1fb6ff;
box-shadow:0 0 25px rgba(31,182,255,.25);
}

/* DEPLOY */
.deploy-box{
background:linear-gradient(135deg,#0d213a,#081726);
border-radius:20px;
padding:40px;
border:1px solid rgba(255,255,255,.08);
}

/* TABLE PANEL */
.compare-panel{
background:rgba(255,255,255,.04);
border-radius:18px;
border:1px solid rgba(255,255,255,.08);
padding:20px;
}

table td, table th{
padding:18px!important;
border-color:rgba(255,255,255,.08)!important;
}

/* TESTIMONIAL */
.test-card{
background:rgba(255,255,255,.05);
border-radius:16px;
padding:20px;
}

/* CTA */
.cta-box{
background:linear-gradient(135deg,#16a34a,#15803d);
border-radius:20px;
padding:40px;
}



/* ---------- SECTION BASE ---------- */
/* ===============================
   SOFT PREMIUM SECTION
=============================== */

.section-soft{
padding:60px 0;
background:var(--bg-section);
position:relative;
overflow:hidden;
}

/* background glow */

.section-soft::before{
content:"";
position:absolute;
top:-200px;
left:50%;
transform:translateX(-50%);
width:900px;
height:600px;
background:radial-gradient(circle, rgba(34,197,94,.18), transparent 70%);
pointer-events:none;
}

/* CARD */

.soft-card{
position:relative;
background:linear-gradient(180deg,#ffffff,#f1f5f9);
border-radius:24px;
padding:60px 50px;
overflow:hidden;
border:1px solid var(--border);
box-shadow:0 30px 70px rgba(0,0,0,.08);
transition:all .35s ease;
animation:softFloat 6s ease-in-out infinite;
}

/* DARK MODE CARD */

body.dark-mode .soft-card{
background:linear-gradient(180deg,#0f172a,#0b1220);
border:1px solid rgba(255,255,255,.08);
box-shadow:0 30px 70px rgba(0,0,0,.45);
}

/* green glow inside card */

.soft-card::before{
content:"";
position:absolute;
top:-120px;
left:50%;
transform:translateX(-50%);
width:500px;
height:300px;
background:radial-gradient(circle, rgba(34,197,94,.25), transparent 70%);
z-index:0;
}

/* HEADER */

.soft-header{
position:relative;
z-index:1;
}

.soft-tag{
font-size:13px;
text-transform:uppercase;
color:var(--accent);
letter-spacing:1px;
}

.soft-header h2{
font-size:38px;
font-weight:700;
margin:15px 0;
}

.soft-header p{
color:var(--text-muted);
}

/* FEATURES */

.soft-features{
position:relative;
z-index:1;
display:flex;
justify-content:space-between;
gap:30px;
}

/* ITEM */

.soft-item{
flex:1;
padding:18px;
border-radius:12px;
transition:.25s;
}

.soft-item:hover{
background:rgba(34,197,94,.08);
transform:translateY(-3px);
}

body.dark-mode .soft-item:hover{
background:rgba(34,197,94,.08);
}

/* ICON */

.soft-item i{
font-size:26px;
color:var(--accent);
margin-bottom:15px;
display:inline-block;
transition:.25s;
}

.soft-item:hover i{
transform:scale(1.15);
}

/* TEXT */

.soft-item h5{
font-weight:600;
margin-bottom:8px;
}

.soft-item p{
color:var(--text-muted);
font-size:15px;
line-height:1.7;
}

/* FLOAT ANIMATION */

@keyframes softFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-4px)}
}

/* MOBILE */

@media(max-width:992px){

.soft-card{
padding:40px 30px;
}

.soft-features{
flex-direction:column;
gap:35px;
}

.soft-header h2{
font-size:28px;
}

}
/* =================================================
   SOLUTION SECTION
================================================= */

.solution-section{
padding:60px 0;
background:var(--bg-section);
}

/* badge */

.solution-badge{
display:inline-block;
padding:6px 14px;
border-radius:30px;
background:rgba(34,197,94,.08);
color:var(--accent);
font-weight:600;
font-size:14px;
margin-bottom:20px;
}

/* title */

.solution-title{
font-size:44px;
font-weight:700;
line-height:1.2;
letter-spacing:-0.6px;
color:var(--text-main);
}

/* description */

.solution-text{
color:var(--text-muted);
font-size:18px;
margin-top:18px;
max-width:520px;
}
.spotlight-list{
list-style:none;
padding:0;
margin:0;
}

.spotlight-list li{
display:flex;
align-items:flex-start;
gap:10px;
margin-bottom:10px;
font-size:18px;
color:var(--text-main);
}

.spotlight-list i{
color:#22c55e;
font-size:18px;
margin-top:3px;
}

/* =================================================
   DASHBOARD CARD
================================================= */

.dashboard-preview{
background:linear-gradient(180deg,#ffffff,#f1f5f9);
border-radius:18px;
padding:24px;
border:1px solid var(--border);
position:relative;
box-shadow:0 25px 60px rgba(0,0,0,.08);
transition:all .3s ease;
}

/* dark mode */

body.dark-mode .dashboard-preview{
background:linear-gradient(145deg,#0f172a,#020617);
border:1px solid rgba(255,255,255,.08);
box-shadow:0 30px 70px rgba(0,0,0,.5);
}

/* hover */

.dashboard-preview:hover{
transform:translateY(-5px);
}

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

.browser-header{
display:flex;
align-items:center;
gap:8px;
margin-bottom:20px;
}

.browser-dot{
width:10px;
height:10px;
border-radius:50%;
}

.dot-red{background:#ef4444;}
.dot-yellow{background:#f59e0b;}
.dot-green{background:var(--accent);}

.browser-url{
background:var(--bg-card);
padding:5px 12px;
border-radius:6px;
font-size:12px;
color:var(--text-muted);
margin-left:8px;
flex:1;
border:1px solid var(--border);
}

/* =================================================
   MODULE CARDS
================================================= */

.module{
background:var(--bg-card);
border:1px solid var(--border);
border-radius:12px;
padding:18px;
margin-bottom:14px;
display:flex;
justify-content:space-between;
align-items:center;
transition:.25s;
}

/* hover */

.module:hover{
border-color:var(--accent);
transform:translateX(4px);
}

/* module name */

.module-name{
font-weight:600;
color:var(--text-main);
}

/* status */

.status-online{
color:var(--accent);
font-size:14px;
font-weight:500;
}

/* ===============================
   NETWORK MODULE CARDS
=============================== */

.module{
background:var(--bg-card);
border:1px solid var(--border);
border-radius:12px;
padding:18px;
margin-bottom:14px;
display:flex;
justify-content:space-between;
align-items:center;
transition:.25s;
}

/* hover */

.module:hover{
border-color:var(--accent);
transform:translateX(4px);
}

.module-name{
font-weight:600;
color:var(--text-main);
}

.status-online{
color:var(--accent);
font-size:14px;
font-weight:500;
}
/* ---------- FEATURES SECTION ---------- */
/* =================================================
   FEATURES SECTION
================================================= */

.features-section{
padding:60px 0;
background:var(--bg-section);
}

/* heading */

.feature-heading{
font-size:42px;
font-weight:700;
color:var(--text-main);
}

.feature-sub{
color:var(--text-muted);
max-width:720px;
margin:auto;
font-size:18px;
}

/* =================================================
   LEFT SPOTLIGHT FEATURE
================================================= */

.feature-spotlight{
background:var(--bg-card);
border:1px solid var(--border);
border-radius:22px;
padding:40px;
height:100%;
transition:.25s;
}

.feature-spotlight:hover{
border-color:var(--accent);
transform:translateY(-4px);
}

/* icon */

.spotlight-icon{
width:70px;
height:70px;
border-radius:18px;
background:linear-gradient(135deg,var(--accent),#16a34a);
display:flex;
align-items:center;
justify-content:center;
font-size:30px;
color:#fff;
margin-bottom:20px;
}

/* text */

.feature-spotlight h3{
font-size:26px;
font-weight:700;
margin-bottom:12px;
color:var(--text-main);
}

.feature-spotlight p{
color:var(--text-muted);
line-height:1.8;
margin-bottom:20px;
}

/* list */

.spotlight-list{
list-style:none;
padding:0;
margin:0;
}

.spotlight-list li{
margin-bottom:10px;
color:var(--text-muted);
position:relative;
padding-left:24px;
}

.spotlight-list li::before{
content:"✓";
position:absolute;
left:0;
color:var(--accent);
font-weight:700;
}

/* =================================================
   RIGHT FEATURE LIST
================================================= */

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

.feature-item{
display:flex;
gap:16px;
align-items:flex-start;
padding:18px;
border-radius:14px;
background:var(--bg-card);
border:1px solid var(--border);
transition:.25s;
}

.feature-item:hover{
border-color:var(--accent);
background:rgba(34,197,94,.08);
transform:translateX(4px);
}

.feature-item i{
font-size:22px;
color:var(--accent);
margin-top:4px;
}

.feature-item h5{
margin:0;
font-weight:600;
color:var(--text-main);
}

.feature-item p{
margin:4px 0 0;
color:var(--text-muted);
font-size:14.5px;
}

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

@media(max-width:991px){

.feature-spotlight{
padding:30px;
}

.feature-heading{
font-size:30px;
}

}
/* =================================================
   COMPARISON SECTION
================================================= */

.compare-section{
padding:60px 0;
background:var(--bg-section);
}

/* title */

.compare-title{
font-size:42px;
font-weight:700;
margin-bottom:18px;
color:var(--text-main);
}

.compare-sub{
color:var(--text-muted);
max-width:760px;
margin:auto;
font-size:18px;
}
.compare-row{
display:flex;
align-items:center;
gap:14px;
}

/* BAD icon */

.bad-icon{
color:#ef4444;
font-size:22px;
flex-shrink:0;
}

/* GOOD icon */

.good-icon{
color:#22c55e;
font-size:22px;
flex-shrink:0;
}

/* Meraki column text */

.compare-row.good span{
color:#16a34a;
font-weight:600;
}
/* =================================================
   TABLE WRAPPER
================================================= */

.compare-wrapper{
margin-top:60px;
border-radius:18px;
overflow:hidden;
border:1px solid var(--border);
background:var(--bg-card);
}

/* headers */

.compare-header{
background:var(--bg-card);
padding:22px;
font-weight:600;
text-align:center;
border-bottom:1px solid var(--border);
}

/* column highlights */

.compare-left{
    background: rgb(162 162 162 / 20%);
}

.compare-right{
background:rgba(34,197,94,.08);
}

/* rows */

.compare-row{
padding:20px;
border-top:1px solid var(--border);
text-align:center;
}

/* feature column */

.compare-feature{
font-weight:600;
text-align:left;
padding-left:24px;
color:var(--text-main);
}

/* status colors */

.bad{
color:#737373;
font-weight:500;
}

.good{
color:var(--accent);
font-weight:600;
}
/* =================================================
   INDUSTRY SECTION
================================================= */

.industry-section{
padding:60px 0;
background:var(--bg-section);
}

/* title */

.industry-title{
font-size:42px;
font-weight:700;
margin-bottom:18px;
color:var(--text-main);
}

.industry-sub{
color:var(--text-muted);
max-width:760px;
margin:auto;
font-size:18px;
}

/* =================================================
   INDUSTRY CARDS
================================================= */

.industry-card{
background:var(--bg-card);
border:1px solid var(--border);
border-radius:18px;
padding:26px;
height:100%;
transition:.25s ease;
}

.industry-card:hover{
transform:translateY(-6px);
border-color:var(--accent);
box-shadow:0 25px 55px rgba(0,0,0,.15);
}

/* dark mode shadow */

body.dark-mode .industry-card:hover{
box-shadow:0 25px 55px rgba(0,0,0,.45);
}

/* icon */

.industry-icon{
width:52px;
height:52px;
border-radius:14px;
background:rgba(34,197,94,.08);
display:flex;
align-items:center;
justify-content:center;
color:var(--accent);
font-size:24px;
margin-bottom:16px;
}

/* title */

.industry-name{
font-size:20px;
font-weight:600;
margin-bottom:10px;
color:var(--text-main);
}

/* text */

.industry-text{
color:var(--text-muted);
line-height:1.7;
font-size:15.5px;
}
/* =================================================
   DEPLOYMENT SECTION
================================================= */

.deploy-section{
padding:60px 0;
background:var(--bg-section);
}

.deploy-title{
font-size:42px;
font-weight:700;
color:var(--text-main);
}

.deploy-sub{
color:var(--text-muted);
max-width:720px;
margin:auto;
font-size:18px;
margin-top:10px;
}

/* =================================================
   HORIZONTAL JOURNEY
================================================= */

.journey-wrapper{
position:relative;
overflow-x:auto;
padding-bottom:20px;
margin-top:50px;
}

/* scrollbar */

.journey-wrapper::-webkit-scrollbar{
height:6px;
}

.journey-wrapper::-webkit-scrollbar-thumb{
background:rgba(34,197,94,.08);
border-radius:10px;
}

/* track */

.journey-track{
display:flex;
gap:30px;
min-width:900px;
position:relative;
}

/* connector line */

.journey-track::before{
content:'';
position:absolute;
top:38px;
left:60px;
right:60px;
height:2px;
background:var(--border);
z-index:0;
}

/* =================================================
   STEP CARDS
================================================= */

.journey-step{
min-width:230px;
background:var(--bg-card);
border:1px solid var(--border);
border-radius:18px;
padding:24px;
text-align:center;
position:relative;
z-index:1;
transition:.3s;
}

.journey-step:hover{
transform:translateY(-8px);
border-color:var(--accent);
box-shadow:0 25px 60px rgba(0,0,0,.15);
}

/* dark mode hover shadow */

body.dark-mode .journey-step:hover{
box-shadow:0 25px 60px rgba(0,0,0,.45);
}

/* step badge */

.step-badge{
width:48px;
height:48px;
border-radius:50%;
background:linear-gradient(135deg,var(--accent),#16a34a);
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 14px;
font-weight:700;
color:#fff;
box-shadow:0 10px 25px rgba(34,197,94,.35);
}

/* step text */

.journey-step h5{
font-weight:600;
margin-bottom:8px;
color:var(--text-main);
}

.journey-step p{
color:var(--text-muted);
font-size:14.5px;
}

/* =================================================
   ZERO TOUCH BANNER
================================================= */

.zero-touch-banner{
margin-top:60px;
text-align:center;
padding:22px;
border-radius:14px;
background:rgba(34,197,94,.08);
border:1px solid rgba(34,197,94,.35);
color:var(--text-main);
}
/* =================================================
   ROI / BENEFITS SECTION
================================================= */

.roi-section{
padding:60px 0;
background:var(--bg-section);
}

/* title */

.roi-title{
font-size:38px;
font-weight:700;
color:var(--text-main);
}

.roi-sub{
color:var(--text-muted);
max-width:720px;
margin:auto;
font-size:18px;
}

/* =================================================
   KPI METRICS
================================================= */

.roi-metrics{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:20px;
margin:50px 0 60px;
}

.metric{
text-align:center;
padding:20px 15px;
background:rgba(34,197,94,.08);
border:1px solid rgba(34,197,94,.25);
border-radius:16px;
}

.metric h3{
font-size:30px;
color:var(--accent);
font-weight:700;
margin-bottom:5px;
}

.metric p{
color:var(--text-muted);
margin:0;
}
@media(max-width:992px){

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

}

@media(max-width:576px){

.roi-metrics{
grid-template-columns:1fr;
}

}
/* =================================================
   BENEFIT STRIPS
================================================= */

.roi-benefits{
max-width:850px;
margin:0 auto;
}

.roi-row{
display:flex;
gap:18px;
padding:20px 18px;
border-bottom:1px solid var(--border);
align-items:flex-start;
}

.roi-row i{
color:var(--accent);
font-size:22px;
margin-top:5px;
}

.roi-row h5{
margin:0;
font-weight:600;
color:var(--text-main);
}

.roi-row p{
margin:5px 0 0;
color:var(--text-muted);
}

/* =================================================
   ROI BANNER
================================================= */

.roi-banner{
margin-top:70px;
padding:40px;
text-align:center;
border-radius:18px;
background:linear-gradient(135deg,rgba(34,197,94,.15),rgba(34,197,94,.05));
border:1px solid rgba(34,197,94,.35);
}

.roi-banner h3{
color:var(--accent);
font-weight:700;
}

.roi-banner p{
color:var(--text-muted);
}

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

@media(max-width:768px){

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

.roi-title{
font-size:30px;
}

}
/* =================================================
   TRUST SECTION
================================================= */

.trust-section{
padding:60px 0;
background:var(--bg-section);
}

/* title */

.trust-title{
font-size:42px;
font-weight:700;
margin-bottom:18px;
color:var(--text-main);
}

.trust-sub{
color:var(--text-muted);
max-width:760px;
margin:auto;
font-size:18px;
}

/* grid item */

.trust-item{
text-align:center;
padding:30px;
}

/* icon */

.trust-icon{
width:64px;
height:64px;
border-radius:16px;
background:rgba(34,197,94,.08);
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
color:var(--accent);
margin:auto auto 18px;
}

/* label */

.trust-label{
font-weight:600;
font-size:18px;
margin-bottom:8px;
color:var(--text-main);
}

/* text */

.trust-text{
color:var(--text-muted);
font-size:15.5px;
line-height:1.7;
}

/* divider */

.trust-divider{
height:1px;
background:var(--border);
margin:60px 0;
}

/* bottom statement */

.trust-section .text-success{
color:var(--accent) !important;
}

/* =================================================
   FINAL CTA SECTION
================================================= */

.final-cta{
padding:130px 0;
background:linear-gradient(135deg,rgba(34,197,94,.05),rgba(34,197,94,.15));
position:relative;
overflow:hidden;
}

/* glow background */

.final-cta::before{
content:"";
position:absolute;
width:500px;
height:500px;
background:radial-gradient(circle, rgba(34,197,94,.25), transparent 60%);
top:-120px;
left:-120px;
}

.final-cta::after{
content:"";
position:absolute;
width:500px;
height:500px;
background:radial-gradient(circle, rgba(34,197,94,.20), transparent 60%);
bottom:-140px;
right:-140px;
}

/* card */

.cta-card{
background:var(--bg-card);
border:1px solid var(--border);
backdrop-filter:blur(12px);
border-radius:24px;
padding:70px 50px;
text-align:center;
position:relative;
z-index:2;
}

/* title */

.cta-title{
font-size:44px;
font-weight:700;
color:var(--text-main);
margin-bottom:18px;
}

/* text */

.cta-text{
color:var(--text-muted);
font-size:18px;
max-width:720px;
margin:auto;
}

/* button */

.cta-btn{
margin-top:35px;
background:var(--accent);
color:#fff;
font-weight:700;
padding:16px 38px;
border-radius:12px;
font-size:18px;
transition:.25s;
text-decoration:none;
display:inline-block;
}

.cta-btn:hover{
transform:translateY(-4px);
box-shadow:0 18px 35px rgba(0,0,0,.25);
}

/* note */

.cta-note{
margin-top:16px;
color:var(--text-muted);
font-size:14px;
}
/* =================================================
   DEMO SECTION
================================================= */

.demo-section{
padding:60px 0;
background:var(--bg-section);
}

/* card */

.demo-card{
border-radius:22px;
overflow:hidden;
box-shadow:0 40px 90px rgba(0,0,0,.15);
}

body.dark-mode .demo-card{
box-shadow:0 40px 90px rgba(0,0,0,.55);
}

/* LEFT PANEL */

/* Light mode */

.demo-left{
background:linear-gradient(180deg,#ecfdf5,#d1fae5);
color:var(--text-main);
padding:60px 50px;

}

/* Dark mode */

body.dark-mode .demo-left{
background:linear-gradient(180deg,#4ade80,#16a34a);
color:#fff;
}

.demo-left h2{
font-weight:700;
font-size:38px;
margin-bottom:18px;
}

.demo-left p{
opacity:.95;
line-height:1.8;
margin-bottom:30px;
}

/* benefits */

.demo-benefit{
background:rgba(255,255,255,.15);
padding:14px 16px;
border-radius:10px;
margin-bottom:14px;
display:flex;
align-items:center;
gap:12px;
}

.demo-benefit i{
font-size:18px;
}

/* secure note */

.demo-secure{
margin-top:40px;
font-size:14px;
opacity:.9;
}

/* RIGHT PANEL */

.demo-right{
background:var(--bg-card);
padding: 50px;
}

/* form */

.form-label{
font-size:14px;
color:var(--text-muted);
margin-bottom:6px;
}

.form-control{
background:#9393935e;
border:1px solid var(--border);
color:var(--text-main);
padding:12px;
border-radius:10px;
}

.form-control:focus{
background:var(--bg-card);
border-color:var(--accent);
box-shadow:none;
color:var(--text-main);
}
.form-control::placeholder {
  color: #000;

}

.demo-btn{
background:var(--accent) !important;
border:none;
width:100%;
font-size:20px;
padding:16px;
font-weight:700;
border-radius:12px;
margin-top:18px;
transition:.25s;
color:#fff !important;
}

.demo-btn:hover{
transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(34, 197, 94, .55);
}

/* note */

.demo-note{
font-size:13px;
color:var(--text-muted);
margin-top:12px;
text-align:center;
}

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

.footer-section{
background:var(--bg-card);
padding:90px 0 30px;
color:var(--text-muted);
}

/* logo */

.footer-logo img{
width:100%;
max-width:250px;
}

.footer-logo{
display:flex;
align-items:center;
gap:12px;
font-size:22px;
font-weight:600;
color:var(--text-main);
}

/* description */

.footer-desc{
margin-top:20px;
max-width:280px;
line-height:1.8;
font-size:16px;
}

/* headings */

.footer-heading{
font-weight:600;
font-size:18px;
margin-bottom:20px;
color:var(--text-main);
}

/* links */

.footer-links a{
display:block;
margin-bottom:12px;
color:var(--text-muted);
text-decoration:none;
transition:.2s;
font-size:16px;
}

.footer-links a:hover{
color:var(--accent);
}

/* social */

.footer-social{
margin-top:20px;
display:flex;
gap:12px;
}

.footer-social a{
width:38px;
height:38px;
background:var(--bg-card);
border:1px solid var(--border);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:var(--text-muted);
transition:.2s;
}

.footer-social a:hover{
background:var(--accent);
color:#fff;
}

/* contact */

.contact-item{
display:flex;
align-items:center;
gap:14px;
margin-bottom:18px;
}

.contact-icon{
width:40px;
height:40px;
border-radius:8px;
background:var(--bg-card);
border:1px solid var(--border);
display:flex;
align-items:center;
justify-content:center;
color:var(--accent);
}

/* bottom */

.footer-bottom{
margin-top:60px;
padding-top:25px;
padding-bottom:40px;
border-top:1px solid var(--border);
display:flex;
justify-content:space-between;
flex-wrap:wrap;
font-size:15px;
}

.footer-bottom-links a{
margin-left:25px;
color:var(--text-muted);
text-decoration:none;
}

.footer-bottom-links a:hover{
color:var(--accent);
}

#pageLoader{
  position:fixed;
  inset:0;
  background:#081726;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

/* Square container */
.loader-box{
  width:46px;
  height:46px;
  background:#1a1a1a;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
}

/* Minimal "m" style shape */
.loader-m{
  width:18px;
  height:14px;
  position:relative;
}

.loader-m span{
  position:absolute;
  width:4px;
  height:14px;
  background:#2
}

/* Accurate Minimal Green Logo Loader */


#pageLoader{
  position:fixed;
  inset:0;
  background:#f2f4f5;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.loader-logo{
  width:110px;
  height:110px;
}
/* Sticky Button Base */
.book-demo-btn{
    position:fixed;
    background:#22c55e;
    color:#fff;
    font-size:16px;
    font-weight:600;
    padding:12px 30px;
    border-radius:50px;
    box-shadow:0 10px 20px rgba(0,0,0,.2);
    z-index:9999;
    text-decoration:none;
    transition:.3s;
}

/* Hover */
.book-demo-btn:hover{
    background:#16a34a;
}

/* DESKTOP - Right side vertical middle */
@media (min-width:992px){

    .book-demo-btn{
        right: 25px;
        top:50%;
        transform:rotate(-90deg) translateY(-50%);
        transform-origin:right top;
        border-radius:30px 30px 0 0;
    }

}

/* MOBILE - Bottom center */
@media (max-width:991px){

    .book-demo-btn{
        left:50%;
        bottom:20px;
        transform:translateX(-50%);
        border-radius:50px;
    }

}
/* By default, hide both logos */
#light-logo, #dark-logo {
    display: none;
}

/* Show the light logo when the theme is light */
body[data-theme="light"] #light-logo {
    display: block;
}

/* Show the dark logo when the theme is dark */
body[data-theme="dark"] #dark-logo {
    display: block;
}
.consent-check{
font-size:14px;
color:var(--text-muted);
}

.consent-check a{
color:var(--accent);
text-decoration:none;
}

.consent-check a:hover{
text-decoration:underline;
}
.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}
.form-check-input{
border:1px solid var(--border);
box-shadow:0 3px 8px rgba(0,0,0,.2);
}

.form-check-input:checked{
background-color:var(--accent);
border-color:var(--accent);
box-shadow:
0 0 0 2px rgba(34,197,94,.2),
0 0 12px rgba(34,197,94,.4);
}
/* BACKDROP */

.exit-popup{
position:fixed;
inset:0;
background:rgba(0,0,0,.65);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
opacity:0;
visibility:hidden;
transition:.35s;
}

.exit-popup.show{
opacity:1;
visibility:visible;
}

/* POPUP BOX */

.popup-box{
background:linear-gradient(180deg,#020617,#020617);
border:1px solid rgba(255,255,255,.08);
border-radius:16px;
padding:40px 35px;
max-width:480px;
width:90%;
text-align:center;
position:relative;
box-shadow:0 40px 80px rgba(0,0,0,.6);
animation:popupEnter .4s ease;
}

/* CLOSE */

.popup-close{
position:absolute;
top:10px;
right:14px;
border:none;
background:none;
font-size:28px;
color:#94a3b8;
cursor:pointer;
}

/* TEXT */

.popup-small{
font-size:14px;
color:#94a3b8;
margin-bottom:8px;
}

.popup-title{
font-size:34px;
font-weight:700;
margin-bottom:10px;
}

.popup-text{
color:#94a3b8;
margin-bottom:25px;
}

/* TIMER */

.popup-timer{
display:flex;
justify-content:center;
gap:14px;
margin-bottom:25px;
}

.timer-box{
background:#020617;
border:1px solid rgba(255,255,255,.08);
border-radius:10px;
padding:12px 14px;
min-width:70px;
}

.timer-box span{
font-size:22px;
font-weight:700;
color:#22c55e;
}

.timer-box small{
display:block;
font-size:11px;
color:#94a3b8;
}

/* BUTTON */

.popup-btn{
display:block;
background:#22c55e;
color:#fff;
padding:14px;
border-radius:10px;
font-weight:600;
text-decoration:none;
transition:.25s;
}

.popup-btn:hover{
background:#16a34a;
transform:translateY(-2px);
}

/* ANIMATION */

@keyframes popupEnter{
from{
transform:translateY(30px);
opacity:0;
}
to{
transform:translateY(0);
opacity:1;
}
}
 .meraki-section {
	 background: var(--bg-section);
    padding: 60px 0;   
    text-align: center;
  }

  .section-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-main); /* Dark text color */
  }

  .section-subtitle {
    font-size: 18px;
    color: var(--text-muted); /* Muted text color */
    margin-bottom: 30px;
  }

  .btn-primary {
    background-color: #22c55e; /* Meraki theme color */
    border: none;
    padding: 14px 40px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.3s ease;
  }

  .btn-primary:hover {
    background-color: #16a34a; /* Darker shade on hover */
	 transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(34, 197, 94, .55);
}

  
  .thankyou-section{
padding:150px 0 100px 0;
}

.thankyou-text{
max-width:700px;
margin:15px auto 35px;
color:#64748b;
font-size:16px;
line-height:1.7;
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:80px;
}