@media (min-width: 768px){
	.banner-content h1
	{
		font-size: 56px;
	}
	.banner-content{
		padding-top: 60px;
		padding-bottom: 70px;
	}
}

/* =================================================
   NDIAL — Design system & real-screenshot components
================================================= */

:root{
	--ndial-navy: #0f2036;
	--ndial-navy-2: #14263f;
	--ndial-navy-3: #1b3352;
	--ndial-teal: #135E55;         /* the "n" color from the real NDIAL logo — now the primary brand color */
	--ndial-mint: #b4ead0;         /* light tint, sampled from the real NDIAL KPI cards */
	--ndial-yellow: #f2b705;
	--ndial-orange: #135E55;       /* alias kept for compatibility, mapped to brand teal */
	--ndial-orange-dark: #0d453f;
	--ndial-green: #135E55;        /* NDIAL brand color = logo "n" teal */
	--ndial-green-dark: #0d453f;
	--ndial-purple: #8b5cf6;
	--ndial-red: #ef4444;
	--ndial-gray: #94a3b8;
	--ndial-ink: #1a2333;
	--ndial-logo-orange: #FF6900;  /* legacy logo mark color — no longer used on the page */

	--page-bg: #ffffff;
	--surface-bg: #ffffff;
	--surface-border: #eef1f6;
	--alt-bg: #f5f8fb;
	--text-heading: #1a2333;
	--text-body: #6c6c6c;
	--text-muted: #8291a6;
	--nav-bg: #ffffff;
	--input-bg: #ffffff;
}

:root[data-theme="dark"]{
	--page-bg: #0b1420;
	--surface-bg: #101d2c;
	--surface-border: #223146;
	--alt-bg: #0d1826;
	--text-heading: #eef3f8;
	--text-body: #a9b8c8;
	--text-muted: #7e91a5;
	--nav-bg: #0f1c2b;
	--input-bg: #16263a;

	/* Brand color lightens in dark mode so it stays visible against dark surfaces */
	--ndial-teal: #2DD4BF;
	--ndial-orange: #2DD4BF;
	--ndial-green: #2DD4BF;
	--ndial-green-dark: #17B3A0;
	--ndial-orange-dark: #17B3A0;
	--ndial-mint: #163d38;
}

*{ box-sizing: border-box; }

/* ---------- Theme toggle + language switch (nav controls) ---------- */
.ndial-theme-toggle{
	display:flex;
	align-items:center;
	justify-content:center;
	width:38px;height:38px;
	border-radius:50%;
	border:1px solid #e7eaf1;
	background:#fff;
	color: var(--ndial-ink);
	font-size:17px;
	cursor:pointer;
	transition: all .2s ease;
	flex:0 0 auto;
}
.ndial-theme-toggle:hover{ border-color: var(--ndial-green); color: var(--ndial-green-dark); }

.ndial-lang-switch{
	display:flex;
	align-items:center;
	background:#f0f2f6;
	border-radius:20px;
	padding:3px;
	gap:2px;
	flex:0 0 auto;
}
.ndial-lang-switch .lang-btn{
	border:none;
	background:transparent;
	color:#7c8a9c;
	font-size:12px;
	font-weight:800;
	letter-spacing:.3px;
	padding:6px 12px;
	border-radius:16px;
	cursor:pointer;
	transition: all .2s ease;
}
.ndial-lang-switch .lang-btn.active{
	background: var(--ndial-green);
	color:#fff;
	box-shadow: 0 4px 10px rgba(19,94,85,.35);
}

.side-nav .side-item + .side-item{ margin-left:10px; }

@media (max-width: 991px){
	.side-nav-responsive .side-nav-inner .side-nav{ gap: 14px; }
}

html, body{
	max-width: 100%;
	overflow-x: hidden;
}

/* Remove leftover template illustration (blue/orange people-at-desks artwork) */
.footer-bg{
	background-image: none !important;
}

/* Nav logos: sized generously, and padding:0 because the template's
   .navbar-light .navbar-brand img{padding:10px 0} was eating half the
   height under box-sizing:border-box, making the logo render tiny. */
.navbar-brand img{
	max-width: 210px;
	width: auto;
	height: 48px;
	padding: 0 !important;
	object-fit: contain;
}
.mobile-nav .logo img{
	max-width: 140px;
	width: auto;
	height: 36px;
	padding: 0 !important;
	object-fit: contain;
}

.ndial-section-pad{
	padding-top: 110px;
	padding-bottom: 80px;
}

.ndial-alt-bg{
	background: #f5f8fb;
}

.ndial-eyebrow{
	display:inline-flex;
	align-items:center;
	gap:8px;
	color: var(--ndial-orange);
	font-weight:800;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing:1px;
	margin-bottom:14px;
}
.ndial-eyebrow::before{
	content:"";
	width:8px;height:8px;border-radius:50%;
	background: var(--ndial-orange);
	box-shadow: 0 0 0 4px rgba(19,94,85,.15);
}

.ndial-lead{
	max-width:640px;
	margin: 0 auto 20px;
	font-size: 17px;
}

.ndial-h2{
	font-size: 40px;
	line-height:1.25;
	color: var(--color-title, #2a284f);
	margin-bottom: 18px;
}
.ndial-h2 b{ font-weight: 800; }

/* ---------- Hero gradient mesh ---------- */
.ndial-hero-mesh{
	position:absolute;
	inset:0;
	overflow:hidden;
	z-index:0;
	pointer-events:none;
}
.ndial-hero-mesh span{
	position:absolute;
	border-radius:50%;
	filter: blur(70px);
	opacity:.5;
}
.ndial-hero-mesh span:nth-child(1){
	width:520px;height:520px; top:-160px; left:-100px;
	background: radial-gradient(circle, rgba(19,94,85,.55), transparent 70%);
}
.ndial-hero-mesh span:nth-child(2){
	width:460px;height:460px; top:-80px; right:-140px;
	background: radial-gradient(circle, rgba(19,94,85,.35), transparent 70%);
}
.ndial-hero-mesh span:nth-child(3){
	width:420px;height:420px; bottom:-220px; left:35%;
	background: radial-gradient(circle, rgba(19,94,85,.25), transparent 70%);
}
.banner-area .container-fluid,
.banner-area .container-max-2{
	position:relative;
	z-index:1;
}

.ndial-hero-badge-row{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin: 22px 0 6px;
}
.ndial-hero-badge-row span{
	display:inline-flex;
	align-items:center;
	gap:7px;
	background:#fff;
	border:1px solid #e9edf3;
	box-shadow: 0 8px 20px rgba(20,30,60,.06);
	padding: 7px 14px;
	border-radius: 30px;
	font-size: 13px;
	font-weight:700;
	color: var(--ndial-ink);
}
.ndial-hero-badge-row span i{
	color: var(--ndial-teal);
	font-size:16px;
}

/* ---------- Hero: eyebrow / headline / ghost button ---------- */
.ndial-hero-eyebrow{
	display:block;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--ndial-ink);
	margin-bottom: 18px;
}
.ndial-hero-h1{
	font-size: 52px;
	line-height: 1.18;
	font-weight: 800;
	color: var(--color-title, #2a284f);
	margin: 0 0 22px;
}
.ndial-hero-h1 .accent{
	color: var(--ndial-green);
}
.ndial-hero-sub{
	font-size: 17px;
	color: var(--paragraph-color, #6c6c6c);
	max-width: 480px;
	margin-bottom: 32px;
}
.ndial-hero-cta{
	display:flex;
	align-items:center;
	gap:16px;
	flex-wrap:wrap;
}
.ndial-btn-solid{
	display:inline-flex;
	align-items:center;
	gap:8px;
	background: linear-gradient(to right, var(--ndial-green-dark), var(--ndial-green));
	color:#fff !important;
	font-weight:700;
	font-size:15px;
	padding: 15px 28px;
	border-radius: 50px;
	text-decoration:none;
	box-shadow: 0 15px 30px rgba(19,94,85,.3);
	transition: transform .2s ease;
}
.ndial-btn-solid:hover{ transform: translateY(-2px); color:#fff; }
.ndial-btn-ghost{
	display:inline-flex;
	align-items:center;
	gap:8px;
	background:transparent;
	color: var(--ndial-ink) !important;
	font-weight:700;
	font-size:15px;
	padding: 14px 26px;
	border-radius: 50px;
	border: 1.5px solid #dbe2ea;
	text-decoration:none;
	transition: all .2s ease;
}
.ndial-btn-ghost:hover{ border-color: var(--ndial-green); color: var(--ndial-green-dark) !important; }

/* ---------- Hero: cascading card stack ---------- */
.ndial-cascade{
	position:relative;
	height: 540px;
}
.ndial-cascade .blob{
	position:absolute;
	border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
	filter: blur(1px);
}
.ndial-cascade .blob-1{
	width:120px; height:120px;
	right: 60px; top: 40px;
	background: linear-gradient(135deg, var(--ndial-green), var(--ndial-green-dark));
	opacity:.9;
}
.ndial-cascade .blob-2{
	width:90px; height:90px;
	left: 10px; bottom: 70px;
	background: linear-gradient(135deg, #40c886, var(--ndial-green));
	opacity:.85;
}
.cascade-card{
	position:absolute;
	background:#fff;
	border-radius: 16px;
	box-shadow: 0 30px 60px -15px rgba(15,32,54,.25);
	padding: 14px;
}
.cascade-card.card-shot{
	width: 78%;
	right: 0;
	top: 30px;
	transform: rotate(3deg);
	z-index:2;
	padding:0;
	overflow:hidden;
}
.cascade-card.card-shot img{ display:block; width:100%; }
.cascade-card.card-check{
	width: 230px;
	left: 0;
	top: 0;
	transform: rotate(-6deg);
	z-index:3;
}
.cascade-card.card-check ul{ list-style:none; margin:0; padding:0; }
.cascade-card.card-check li{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:12.5px;
	font-weight:700;
	color: var(--ndial-ink);
	padding:5px 0;
}
.cascade-card.card-check li i{
	color:#fff;
	background: var(--ndial-green);
	width:16px;height:16px;
	border-radius:50%;
	font-size:11px;
	display:flex;align-items:center;justify-content:center;
	flex:0 0 auto;
}
.cascade-card.card-status{
	width: 240px;
	left: 20px;
	bottom: 0;
	transform: rotate(-4deg);
	z-index:4;
	display:flex;
	align-items:center;
	gap:10px;
}
.cascade-card.card-status .avatar{
	width:38px;height:38px;
	border-radius:50%;
	background: var(--ndial-mint);
	color: var(--ndial-green-dark);
	display:flex;align-items:center;justify-content:center;
	font-weight:800;
	flex:0 0 auto;
}
.cascade-card.card-status strong{ display:block; font-size:13px; color: var(--ndial-ink); }
.cascade-card.card-status .live-row{
	display:flex; align-items:center; gap:5px;
	font-size:11.5px; font-weight:700; color: var(--ndial-green-dark);
}
.cascade-card.card-status .live-row i{
	width:7px;height:7px;border-radius:50%;
	background: var(--ndial-green);
	display:inline-block;
}

@media (max-width: 991px){
	.ndial-hero-h1{ font-size:38px; }
	.ndial-cascade{ height:auto; padding: 30px 0; }
	.cascade-card.card-shot{ position:relative; width:100%; right:auto; top:auto; transform:none; margin-bottom:20px; }
	.cascade-card.card-check{ position:relative; left:auto; top:auto; transform:none; width:auto; margin-bottom:14px; }
	.cascade-card.card-status{ position:relative; left:auto; bottom:auto; transform:none; width:auto; }
	.ndial-cascade .blob{ display:none; }
}

/* ---------- Browser-chrome frame for real screenshots ---------- */
.ndial-browser-frame{
	position:relative;
	background: var(--ndial-navy);
	border-radius: 16px;
	overflow:hidden;
	box-shadow: 0 50px 90px -25px rgba(15,32,54,.5), 0 15px 35px -10px rgba(15,32,54,.3);
	border: 1px solid rgba(255,255,255,.06);
}
.ndial-browser-frame .bf-bar{
	display:flex;
	align-items:center;
	gap:14px;
	padding: 11px 16px;
	background: var(--ndial-navy-2);
}
.ndial-browser-frame .bf-dots{ display:flex; gap:6px; flex:0 0 auto; }
.ndial-browser-frame .bf-dots span{
	width:10px;height:10px;border-radius:50%;
	display:inline-block;
}
.ndial-browser-frame .bf-dots span:nth-child(1){ background:#ef4444; }
.ndial-browser-frame .bf-dots span:nth-child(2){ background:#f2b705; }
.ndial-browser-frame .bf-dots span:nth-child(3){ background:#22c55e; }
.ndial-browser-frame .bf-url{
	flex:1;
	background: rgba(255,255,255,.08);
	color:#a8bcd1;
	font-size: 12px;
	padding: 6px 14px;
	border-radius: 20px;
	text-align:center;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.ndial-browser-frame .bf-live{
	flex:0 0 auto;
	display:flex;
	align-items:center;
	gap:6px;
	font-size:11px;
	font-weight:800;
	color:#7dd3a8;
	letter-spacing:.4px;
}
.ndial-browser-frame .bf-live i{
	width:7px;height:7px;border-radius:50%;
	background:#22c55e;
	display:inline-block;
	box-shadow: 0 0 0 3px rgba(34,197,94,.25);
}
.ndial-browser-frame .bf-shot{
	line-height:0;
	background:#fff;
	max-height: 560px;
	overflow:auto;
}
.ndial-browser-frame img{
	display:block;
	width:100%;
	height:auto;
}
.ndial-browser-frame.is-compact .bf-shot{ max-height: 420px; }

/* ---------- Floating stat badges over screenshots ---------- */
.ndial-visual-wrap{
	position:relative;
}
.ndial-float-badge{
	position:absolute;
	background:#fff;
	border-radius: 14px;
	padding: 10px 16px 10px 10px;
	box-shadow: 0 25px 50px -12px rgba(15,32,54,.35);
	display:flex;
	align-items:center;
	gap:10px;
	z-index: 6;
	animation: ndialFloat 5s ease-in-out infinite;
}
.ndial-float-badge .fb-icon{
	width: 36px;height:36px;
	border-radius: 10px;
	display:flex;align-items:center;justify-content:center;
	font-size:18px;
	flex:0 0 auto;
}
.ndial-float-badge strong{
	display:block;
	font-size: 14.5px;
	color: var(--ndial-ink);
	line-height:1.2;
}
.ndial-float-badge small{
	display:block;
	font-size: 11px;
	font-weight:700;
	color:#8291a6;
	text-transform:uppercase;
	letter-spacing:.3px;
}
.fb-green .fb-icon{ background: rgba(34,197,94,.14); color:#16a34a; }
.fb-orange .fb-icon{ background: rgba(19,94,85,.14); color: var(--ndial-orange); }
.fb-teal .fb-icon{ background: rgba(19,94,85,.14); color: var(--ndial-teal); }
.fb-top-left{ top:-22px; left:-30px; }
.fb-top-right{ top:-22px; right:-24px; }
.fb-bottom-left{ bottom:-22px; left:-28px; }
.fb-bottom-right{ bottom:-24px; right:-26px; }
.fb-mid-right{ top:40%; right:-34px; }

@keyframes ndialFloat{
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

/* ---------- Alternating feature rows ---------- */
.ndial-feature-row{
	display:flex;
	align-items:center;
	gap:60px;
	margin-bottom: 130px;
}
.ndial-feature-row:last-child{ margin-bottom:0; }
.ndial-feature-row.reverse{ flex-direction: row-reverse; }
.ndial-feature-row .ft-text{ flex: 0 0 40%; max-width:40%; }
.ndial-feature-row .ft-visual{ flex: 0 0 55%; max-width:55%; }

.ndial-feature-row .ft-text ul{
	list-style:none;
	margin: 22px 0 26px;
	padding:0;
}
.ndial-feature-row .ft-text ul li{
	display:flex;
	align-items:flex-start;
	gap:10px;
	font-size: 15px;
	color: var(--paragraph-color, #6c6c6c);
	padding: 7px 0;
}
.ndial-feature-row .ft-text ul li i{
	color: var(--ndial-teal);
	font-size: 19px;
	margin-top:1px;
	flex:0 0 auto;
}

.ndial-pill-tag{
	display:inline-flex;
	align-items:center;
	gap:6px;
	background: rgba(19,94,85,.1);
	color: var(--ndial-teal);
	font-weight:800;
	font-size:18px;
	text-transform:uppercase;
	letter-spacing:.5px;
	padding:8px 20px;
	border-radius:24px;
	margin-bottom: 12px;
}

/* ---------- Accordion: click a row to reveal image + explanation ---------- */
.ndial-accordion{
	max-width: 980px;
	margin: 0 auto;
}
.ndial-acc-item{
	background:#fff;
	border: 1px solid #eef1f6;
	border-radius: 16px;
	margin-bottom: 14px;
	overflow:hidden;
}
.ndial-acc-item[open]{
	border-color: rgba(19,94,85,.35);
	box-shadow: 0 20px 45px rgba(15,32,54,.08);
}
.ndial-acc-head{
	display:flex;
	align-items:center;
	gap:18px;
	padding: 22px 26px;
	cursor:pointer;
	list-style:none;
}
.ndial-acc-head::-webkit-details-marker{ display:none; }
.ndial-acc-head::marker{ content:""; }
.ndial-acc-head .acc-icon{
	flex:0 0 auto;
	width:46px;height:46px;
	border-radius:12px;
	background: var(--ndial-mint);
	color: var(--ndial-green-dark);
	display:flex;align-items:center;justify-content:center;
	font-size:21px;
}
.ndial-acc-head .acc-title{
	flex:1;
	min-width:0;
}
.ndial-acc-head .acc-eyebrow{
	display:block;
	font-size:11px;
	font-weight:800;
	text-transform:uppercase;
	letter-spacing:.4px;
	color: var(--ndial-green-dark);
	margin-bottom:3px;
}
.ndial-acc-head .acc-heading{
	display:block;
	font-size:18px;
	font-weight:700;
	color: var(--color-title, #2a284f);
}
.ndial-acc-head .acc-chevron{
	flex:0 0 auto;
	width:32px;height:32px;
	border-radius:50%;
	background:#f5f8fb;
	color:#8291a6;
	display:flex;align-items:center;justify-content:center;
	font-size:18px;
	transition: transform .25s ease;
}
.ndial-acc-item[open] .acc-chevron{
	transform: rotate(180deg);
	background: var(--ndial-green);
	color:#fff;
}
.ndial-acc-body{
	padding: 6px 26px 32px;
	border-top: 1px solid #f0f2f6;
	padding-top: 24px;
}
.ndial-acc-body .row{ margin:0 -12px; }
@media (max-width: 767px){
	.ndial-acc-head{ padding: 16px 18px; gap:12px; }
	.ndial-acc-head .acc-heading{ font-size:15px; }
	.ndial-acc-body{ padding: 20px 18px 26px; }
}

/* ---------- Numbered step walkthrough (real screenshots) ---------- */
.ndial-steps{
	display:flex;
	flex-direction:column;
	gap: 90px;
}
.ndial-step{
	display:flex;
	align-items:center;
	gap:50px;
}
.ndial-step.reverse{ flex-direction: row-reverse; }
.ndial-step .st-num{
	flex: 0 0 auto;
	width:46px;height:46px;
	border-radius:50%;
	background: linear-gradient(135deg, var(--ndial-orange), var(--ndial-orange-dark));
	color:#fff;
	font-weight:800;
	font-size:18px;
	display:flex;align-items:center;justify-content:center;
	box-shadow: 0 12px 24px rgba(19,94,85,.3);
}
.ndial-step .st-text{ flex: 0 0 26%; max-width:26%; }
.ndial-step .st-text h4{ font-size:19px; margin-bottom:8px; }
.ndial-step .st-text p{ font-size:14.5px; margin:0; }
.ndial-step .st-visual{ flex:1; min-width:0; }
.ndial-step .st-visual .ndial-browser-frame{ transform: scale(1); }

.ndial-step-connector{
	display:flex;
	justify-content:center;
	margin: -60px 0;
	position:relative;
	z-index:2;
}

/* ---------- Track cards (normal vs cobranzas) ---------- */
.ndial-track-header{
	display:flex;
	align-items:center;
	gap:14px;
	margin-bottom: 34px;
}
.ndial-track-header .badge-top{
	display:inline-block;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing:.4px;
	text-transform: uppercase;
	padding: 7px 16px;
	border-radius: 20px;
}
.track-normal .badge-top{ background: rgba(19,94,85,.1); color:#135e55; }
.track-cobranzas .badge-top{ background: rgba(19,94,85,.12); color: var(--ndial-orange); }
.ndial-track-header h3{ margin:0; font-size:24px; }
.ndial-track-header p{ margin: 4px 0 0; font-size:14.5px; }

/* ---------- Legend / bullet list (KPIs, structure explainers) ---------- */
.ndial-legend-grid{
	display:grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px 22px;
}
.ndial-legend-item{
	display:flex;
	gap: 12px;
	align-items:flex-start;
	background:#fff;
	border:1px solid #eef1f6;
	border-radius: 12px;
	padding: 14px 16px;
}
.ndial-legend-item .tag{
	flex: 0 0 auto;
	background: rgba(19,94,85,.12);
	color: var(--ndial-teal);
	font-weight:800;
	font-size: 11px;
	padding: 4px 10px;
	border-radius: 6px;
	white-space:nowrap;
}
.ndial-legend-item p{
	margin:0;
	font-size: 13.5px;
	color: #545a6b;
}

/* ---------- Differentiators ---------- */
.ndial-diff-card{
	background:#fff;
	border-radius: 14px;
	padding: 30px 26px;
	height:100%;
	border: 1px solid #eef1f6;
	transition: all .25s ease;
}
.ndial-diff-card:hover{
	box-shadow: 0 25px 50px rgba(20,30,60,.1);
	transform: translateY(-5px);
	border-color: transparent;
}
.ndial-diff-card .icon{
	width:54px;height:54px;
	border-radius: 13px;
	background: rgba(19,94,85,.1);
	color: var(--ndial-orange);
	display:flex;align-items:center;justify-content:center;
	font-size: 25px;
	margin-bottom: 18px;
}
.ndial-diff-card h3{ font-size: 18px; margin-bottom: 8px; }
.ndial-diff-card p{ font-size: 14.5px; margin:0; }

/* ---------- Support banner (dark panel + checklist) ---------- */
.ndial-support-banner h2{ color:#fff; font-size:32px; line-height:1.25; margin-bottom:16px; }
.ndial-support-banner .eyebrow{
	display:block;
	font-size:12.5px;
	font-weight:800;
	letter-spacing:1px;
	text-transform:uppercase;
	color: var(--ndial-teal);
	margin-bottom:14px;
}
.ndial-support-banner p.lead{ color:#c8d6e5; max-width:460px; margin-bottom:28px; }

/* ---------- Layered "chevron" support cards ---------- */
.ndial-support-card{
	position:relative;
	padding-right: 30px;
	margin-bottom: 26px;
}
.ndial-support-card .ssc-back{
	position:absolute;
	top:10px; right:0; bottom:-10px;
	width: 46px;
	background:#eef2f6;
	border-radius:16px;
	z-index:0;
}
.ndial-support-card .ssc-front{
	position:relative;
	z-index:1;
	background:#fff;
	border:1px solid #eef1f6;
	border-radius:16px;
	padding: 24px 40px 24px 24px;
	min-height: 128px;
}
.ndial-support-card .ssc-front h4{
	font-size:16.5px;
	margin-bottom:8px;
	color: var(--color-title, #2a284f);
}
.ndial-support-card .ssc-front p{
	font-size:13.5px;
	margin:0;
}
.ndial-support-card .ssc-chevron{
	position:absolute;
	z-index:2;
	right: 7px;
	top:50%;
	transform: translateY(-50%);
	width:30px;height:30px;
	border-radius:50%;
	background: var(--ndial-green);
	color:#fff;
	display:flex;align-items:center;justify-content:center;
	font-size:16px;
	box-shadow: 0 8px 18px rgba(19,94,85,.35);
}

/* ---------- Highlight cards (icon + Ver más) ---------- */
.ndial-highlight-card{
	text-align:center;
	background:#fff;
	border: 1px solid #eef1f6;
	border-radius: 18px;
	padding: 44px 32px 36px;
	height:100%;
	transition: all .25s ease;
}
.ndial-highlight-card:hover{
	box-shadow: 0 25px 55px rgba(15,32,54,.1);
	transform: translateY(-5px);
	border-color: transparent;
}
.ndial-highlight-card .hl-icon{
	width:72px;height:72px;
	margin: 0 auto 22px;
	border-radius:50%;
	border: 2px solid var(--ndial-green);
	color: var(--ndial-green-dark);
	display:flex;align-items:center;justify-content:center;
	font-size:30px;
}
.ndial-highlight-card h3{
	font-size:20px;
	margin-bottom:12px;
	color: var(--color-title, #2a284f);
}
.ndial-highlight-card p{
	font-size:14.5px;
	margin-bottom:26px;
}
.ndial-btn-pill{
	display:inline-flex;
	align-items:center;
	background: linear-gradient(to right, var(--ndial-green-dark), var(--ndial-green));
	color:#fff !important;
	font-weight:700;
	font-size:14px;
	padding: 11px 30px;
	border-radius:50px;
	text-decoration:none;
	box-shadow: 0 12px 24px rgba(19,94,85,.25);
	transition: transform .2s ease;
}
.ndial-btn-pill:hover{ transform: translateY(-2px); color:#fff; }

.ndial-cta-strip{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	margin-top: 46px;
	font-size:15px;
	font-weight:700;
	color: var(--color-title, #2a284f);
}
.ndial-cta-strip a{
	color: var(--ndial-green-dark);
	text-decoration:none;
	border-bottom: 1.5px dashed var(--ndial-green);
}
.ndial-cta-strip i{
	color: var(--ndial-green);
	font-size:20px;
}

/* ---------- Bento module grid ---------- */
.ndial-bento{
	display:grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 150px;
	gap: 18px;
}
.ndial-bento-card{
	grid-column: span 2;
	grid-row: span 1;
	background:#fff;
	border: 1px solid #eef1f6;
	border-radius: 16px;
	padding: 24px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	transition: all .25s ease;
	text-decoration:none;
}
.ndial-bento-card:hover{
	box-shadow: 0 25px 50px rgba(20,30,60,.1);
	transform: translateY(-4px);
	border-color: transparent;
}
.ndial-bento-card.big{ grid-column: span 2; grid-row: span 2; }
.ndial-bento-card .b-icon{
	width:44px;height:44px;
	border-radius:11px;
	display:flex;align-items:center;justify-content:center;
	font-size:21px;
	margin-bottom:14px;
}
.ndial-bento-card h4{ font-size:17px; margin-bottom:6px; color: var(--ndial-ink); }
.ndial-bento-card p{ font-size:13.5px; margin:0; color:#6c7689; }
.b-bg-1 .b-icon{ background:rgba(19,94,85,.12); color:var(--ndial-teal); }
.b-bg-2 .b-icon{ background:rgba(19,94,85,.12); color:var(--ndial-orange); }
.b-bg-3 .b-icon{ background:rgba(19,94,85,.12); color:#135e55; }
.b-bg-4 .b-icon{ background:rgba(139,92,246,.12); color:var(--ndial-purple); }
.b-bg-5 .b-icon{ background:rgba(34,197,94,.12); color:#16a34a; }
.b-bg-6 .b-icon{ background:rgba(239,68,68,.12); color:var(--ndial-red); }

/* ---------- Stat strip ---------- */
.ndial-stat-strip{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap: 0;
}
.ndial-stat-strip .stat{
	flex: 1 1 220px;
	text-align:center;
	padding: 10px 20px;
	border-right: 1px solid #e7eaf1;
}
.ndial-stat-strip .stat:last-child{ border-right:none; }
.ndial-stat-strip .stat h3{
	font-size: 32px;
	font-weight: 800;
	color: var(--color-title, #2a284f);
	margin-bottom: 4px;
}
.ndial-stat-strip .stat p{
	margin:0;
	font-size: 13.5px;
}

/* ---------- CTA gradient panel ---------- */
.ndial-cta-panel{
	position:relative;
	background: linear-gradient(120deg, var(--ndial-navy) 0%, #123a4a 55%, #0d4f4a 100%);
	border-radius: 28px;
	overflow:hidden;
	padding: 60px;
	color:#fff;
}
.ndial-cta-panel::before{
	content:"";
	position:absolute;
	width:420px;height:420px;
	border-radius:50%;
	background: radial-gradient(circle, rgba(19,94,85,.35), transparent 70%);
	top:-160px; right:-120px;
	filter: blur(10px);
}
.ndial-cta-panel h2{ color:#fff; font-size:36px; margin-bottom:14px; }
.ndial-cta-panel p{ color:#c8d6e5; max-width:520px; }
.ndial-cta-contact-card{
	position:relative;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.12);
	border-radius:18px;
	padding: 22px 24px;
	backdrop-filter: blur(6px);
}
.ndial-cta-contact-card .row-item{
	display:flex;
	gap:12px;
	align-items:center;
	padding: 10px 0;
	border-top: 1px solid rgba(255,255,255,.1);
}
.ndial-cta-contact-card .row-item:first-child{ border-top:none; }
.ndial-cta-contact-card .row-item i{
	width:36px;height:36px;
	border-radius:10px;
	background: rgba(255,255,255,.1);
	display:flex;align-items:center;justify-content:center;
	color: var(--ndial-teal);
	font-size:16px;
	flex:0 0 auto;
}
.ndial-cta-contact-card .row-item span{ font-size:14.5px; color:#e7eefb; }
a.ndial-cta-contact-card-row,
.ndial-cta-contact-card a.row-item{
	text-decoration:none;
	transition: opacity .2s ease;
}
.ndial-cta-contact-card a.row-item:hover{ opacity:.8; }
.ndial-cta-contact-card a.row-item:hover span{ color:#fff; }

.ndial-bento{ grid-auto-flow: dense; }

/* ---------- Stacked screenshot pair ---------- */
.ndial-stack{
	position:relative;
	padding-bottom: 50px;
	padding-left: 15%;
}
.ndial-stack .stack-behind{
	position:absolute;
	width: 62%;
	left:0;
	bottom:0;
	z-index:0;
	transform: rotate(-4deg);
	opacity:.97;
}
.ndial-stack .stack-front{
	position:relative;
	z-index:1;
}

.ndial-brand-band{
	padding: 50px 0;
	text-align:center;
	background: #fff;
}
.ndial-brand-band img{
	max-width: 420px;
	width:100%;
	border-radius: 14px;
	box-shadow: 0 25px 50px rgba(15,32,54,.18);
}

/* ---------- Monitor de usuario: table + sidebar (recreated UI) ---------- */
.ndial-usr-layout{ display:flex; gap:12px; }
.ndial-usr-sidebar{ flex: 0 0 130px; display:flex; flex-direction:column; gap:6px; }
.ndial-usr-state{
	display:flex; align-items:center; justify-content:space-between;
	background:#f6f8fb; border-radius:6px; padding:6px 8px; font-size:10px; font-weight:700; color:#3a4454;
}
.ndial-usr-state .lbl{ display:flex; align-items:center; gap:6px; }
.ndial-usr-state .dot{ width:8px;height:8px;border-radius:50%; background:#c3ccd6; flex:0 0 auto; }
.ndial-usr-state .n{ background:rgba(0,0,0,.08); border-radius:10px; padding:0 6px; }
.ndial-usr-state.active{ background: var(--ndial-green); color:#fff; }
.ndial-usr-state.active .dot{ background:#fff; }
.ndial-usr-state.active .n{ background:rgba(255,255,255,.25); }
.ndial-usr-state.active-queue{ background:#e8823c; color:#fff; }
.ndial-usr-state.active-queue .dot{ background:#fff; }
.ndial-usr-state.active-queue .n{ background:rgba(255,255,255,.25); }
.ndial-usr-total{
	margin-top:4px; text-align:center; background:#fff; border:1px solid #eef1f6; border-radius:8px; padding:10px 6px;
}
.ndial-usr-total b{ display:block; font-size:18px; color:#1a2333; }
.ndial-usr-total span{ font-size:8px; color:#8291a6; }

.ndial-usr-table-wrap{ flex:1; min-width:0; overflow-x:auto; }
.ndial-usr-table{ width:100%; border-collapse:collapse; font-size:9.5px; }
.ndial-usr-table thead th{
	text-align:left; background:var(--ndial-navy-2); color:#9db3c9; font-weight:700;
	padding:7px 8px; font-size:8px; text-transform:uppercase; white-space:nowrap;
}
.ndial-usr-table tbody td{ padding:6px 8px; border-top:1px solid #f0f2f6; color:#3a4454; white-space:nowrap; }
.ndial-usr-table .dev{ display:flex; align-items:center; gap:4px; color:#3a4454; font-weight:700; }
.ndial-usr-table .dev i{ color:#8291a6; font-size:10px; }

/* ---------- Reportería: filters + table (recreated UI) ---------- */
.ndial-rep-toolbar{ display:flex; align-items:flex-end; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.ndial-rep-field{ flex:1 1 0; min-width:100px; }
.ndial-rep-field label{ display:block; font-size:9px; font-weight:700; color:#8291a6; margin-bottom:4px; }
.ndial-rep-field .box{ border:1px solid #e7eaf1; border-radius:6px; padding:6px 8px; font-size:10px; color:#3a4454; }
.ndial-rep-go{
	background: var(--ndial-green); color:#fff; border:none; border-radius:6px;
	padding:8px 16px; font-size:10.5px; font-weight:700; flex:0 0 auto;
}
.ndial-rep-exports{ display:flex; gap:6px; margin-bottom:8px; }
.ndial-rep-exports span{
	display:flex; align-items:center; gap:4px; border-radius:5px; padding:4px 9px; font-size:9px; font-weight:700; color:#fff;
}
.ndial-rep-exports span.xlsx{ background: var(--ndial-green); }
.ndial-rep-exports span.csv{ background:#3a4454; }
.ndial-rep-count{ font-size:9.5px; color:#8291a6; margin-bottom:8px; }
.ndial-rep-table-wrap{ overflow-x:auto; }
.ndial-rep-table{ width:100%; border-collapse:collapse; font-size:9px; }
.ndial-rep-table thead th{ text-align:left; color:#26313f; font-weight:800; padding:6px 7px; white-space:nowrap; border-bottom:2px solid #eef1f6; }
.ndial-rep-table tbody td{ padding:6px 7px; border-top:1px solid #f0f2f6; color:#3a4454; white-space:nowrap; }
.ndial-rep-pager{ display:flex; align-items:center; gap:5px; margin-top:10px; font-size:9.5px; color:#5b6b7c; }
.ndial-rep-pager span{ padding:3px 8px; border-radius:5px; }
.ndial-rep-pager span.current{ background: var(--ndial-green); color:#fff; font-weight:700; }

/* ---------- Grabaciones (recreated UI) ---------- */
.ndial-rec-play{
	width:20px; height:20px; border-radius:4px; background: var(--ndial-green); color:#fff;
	display:inline-flex; align-items:center; justify-content:center; font-size:10px;
}

/* ---------- Chat interno (recreated UI) ---------- */
.ndial-chat-wrap{ display:flex; height:340px; border:1px solid #eef1f6; border-radius:8px; overflow:hidden; }
.ndial-chat-list{ flex:0 0 130px; border-right:1px solid #eef1f6; background:#fafbfc; padding:8px; }
.ndial-chat-tabsrow{ display:flex; gap:10px; font-size:9px; font-weight:700; color:#8291a6; margin-bottom:10px; }
.ndial-chat-tabsrow span.on{ color: var(--ndial-green); }
.ndial-chat-item{ display:flex; gap:7px; align-items:center; padding:6px; border-radius:6px; background:#fff; border:1px solid #eef1f6; }
.ndial-chat-item .av{ width:28px;height:28px;border-radius:50%; background: var(--ndial-mint); color:var(--ndial-green-dark); display:flex; align-items:center; justify-content:center; font-size:12px; flex:0 0 auto; }
.ndial-chat-item .meta strong{ display:block; font-size:9.5px; color:#1a2333; }
.ndial-chat-item .meta small{ font-size:8px; color:#8291a6; }
.ndial-chat-main{ flex:1; display:flex; flex-direction:column; background:#f7f8fa; }
.ndial-chat-head{ display:flex; align-items:center; justify-content:space-between; padding:9px 12px; background:#fff; border-bottom:1px solid #eef1f6; }
.ndial-chat-head .who{ display:flex; align-items:center; gap:8px; }
.ndial-chat-head .who .av{ width:28px;height:28px;border-radius:50%; background: var(--ndial-mint); color:var(--ndial-green-dark); display:flex; align-items:center; justify-content:center; font-size:12px; }
.ndial-chat-head strong{ font-size:10.5px; color:#1a2333; display:block; }
.ndial-chat-head small{ font-size:8px; color: var(--ndial-green); }
.ndial-chat-head .ic{ width:24px;height:24px;border-radius:50%; background: var(--ndial-green); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:11px; margin-left:5px; }
.ndial-chat-body{ flex:1; padding:14px; display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.ndial-chat-bubble{ max-width:65%; padding:6px 10px; border-radius:10px; font-size:9.5px; font-weight:700; }
.ndial-chat-bubble.in{ align-self:flex-start; background:#3a4454; color:#fff; border-bottom-left-radius:2px; }
.ndial-chat-bubble.out{ align-self:flex-end; background: var(--ndial-green); color:#fff; border-bottom-right-radius:2px; }
.ndial-chat-input{ display:flex; align-items:center; gap:8px; padding:8px 12px; background:#fff; border-top:1px solid #eef1f6; }
.ndial-chat-input .field{ flex:1; border:1px solid #e7eaf1; border-radius:20px; padding:6px 12px; font-size:9.5px; color:#a9b8c8; }
.ndial-chat-input .send{ background: var(--ndial-green); color:#fff; border-radius:16px; padding:6px 12px; font-size:9.5px; font-weight:700; }
.ndial-chat-input i{ color:#8291a6; font-size:14px; }

@media (max-width: 767px){
	.ndial-usr-layout{ flex-direction:column; }
	.ndial-usr-sidebar{ flex-direction:row; flex-wrap:wrap; }
	.ndial-chat-wrap{ height:auto; }
	.ndial-chat-list{ display:none; }
}

/* ---------- Full monitor dashboard (recreated UI) ---------- */
.ndial-mon{ background:#fff; padding: 16px; font-size:12px; }
.ndial-mon-toolbar{
	display:flex;
	flex-wrap:wrap;
	gap: 14px;
	margin-bottom: 10px;
}
.ndial-mon-filter{ flex: 1 1 0; min-width: 130px; }
.ndial-mon-filter .lbl{
	display:flex; align-items:center; gap:5px;
	font-size:10px; font-weight:800; color:#5b6b7c;
	margin-bottom:5px;
}
.ndial-mon-filter .lbl i{ color: var(--ndial-green); font-size:12px; }
.ndial-mon-pills{
	display:flex; flex-wrap:nowrap; overflow:hidden; gap:5px;
	border:1px solid #e7eaf1; border-radius:6px; padding:5px 7px; min-height:26px; align-items:center;
}
.ndial-mon-pills .pill{
	display:inline-flex; align-items:center; gap:3px;
	background:#f0f2f6; border-radius:4px; padding:2px 6px;
	font-size:9.5px; font-weight:700; color:#3a4454; white-space:nowrap;
}
.ndial-mon-select{
	display:flex; align-items:center; gap:6px;
	border:1px solid #e7eaf1; border-radius:6px; padding:5px 8px; min-height:26px;
}
.ndial-mon-select .ic{
	width:20px; height:20px; border-radius:4px; display:flex; align-items:center; justify-content:center;
	font-size:11px; color:#fff; flex:0 0 auto;
}
.ndial-mon-select .ic.on{ background: var(--ndial-green); }
.ndial-mon-select .ic.off{ background:#3a4454; }
.ndial-mon-select span{ font-size:10.5px; font-weight:700; color:#3a4454; }
.ndial-mon-info{
	font-size:10px; color:#8291a6; margin-bottom:14px; padding-bottom:12px;
	border-bottom:1px solid #f0f2f6;
}

.ndial-mon-row{ display:flex; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.ndial-mon-card{
	flex:1 1 0; min-width:150px;
	background:#fff; border:1px solid #eef1f6; border-radius:10px;
	padding:14px; box-shadow: 0 4px 14px rgba(15,32,54,.04);
}
.ndial-mon-card h6{
	text-align:center; font-size:12px; font-weight:800; color:#26313f; margin-bottom:10px;
}
.ndial-mon-card h6 b{ font-size:13px; }

.ndial-mon-donut-wrap{ display:flex; align-items:center; gap:14px; justify-content:center; }
.ndial-mon-donut{
	width:64px; height:64px; border-radius:50%; flex:0 0 auto;
	background: conic-gradient(var(--ndial-navy) 0deg 231deg, #d8dfe8 231deg 360deg);
	position:relative;
}
.ndial-mon-donut::after{
	content:""; position:absolute; inset:9px; background:#fff; border-radius:50%;
}
.ndial-mon-stats{ display:flex; flex-direction:column; gap:6px; }
.ndial-mon-stats .big{ font-size:16px; font-weight:800; color:#1a2333; }
.ndial-mon-stats .sub{ font-size:9px; color:#8291a6; }
.ndial-mon-stats-row{ display:flex; gap:16px; margin-top:2px; }

.ndial-mon-bars{ display:flex; align-items:flex-end; justify-content:space-around; height:70px; gap:8px; }
.ndial-mon-bars .bar-col{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:1 1 0; height:100%; justify-content:flex-end; }
.ndial-mon-bars .bar{ width:16px; border-radius:4px 4px 0 0; background: var(--ndial-green); }
.ndial-mon-bars .bar-col span{ font-size:8.5px; color:#8291a6; text-align:center; }

.ndial-mon-status-grid{
	display:grid; grid-template-columns: 1fr 1fr; gap:6px;
}
.ndial-mon-status{
	display:flex; align-items:center; justify-content:space-between;
	border-radius:6px; padding:6px 9px; font-size:10.5px; font-weight:700;
	background:#f6f8fb; color:#3a4454;
}
.ndial-mon-status .n{
	background:rgba(0,0,0,.08); border-radius:10px; padding:0 7px; font-size:10px;
}
.ndial-mon-status.on-talk{ background: var(--ndial-green); color:#fff; }
.ndial-mon-status.on-talk .n{ background:rgba(255,255,255,.25); }
.ndial-mon-status.on-predictive{ background:#f4d35e; color:#5b4600; }
.ndial-mon-status.on-predictive .n{ background:rgba(0,0,0,.1); }
.ndial-mon-status.on-queue{ background:#e8823c; color:#fff; }
.ndial-mon-status.on-queue .n{ background:rgba(255,255,255,.25); }

.ndial-mon-vbars{ display:flex; justify-content:space-around; gap:10px; }
.ndial-mon-vbars .vcol{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.ndial-mon-vbars .vbar{ width:10px; height:60px; border-radius:5px; background:#dfe6ee; position:relative; overflow:hidden; }
.ndial-mon-vbars .vbar i{ position:absolute; bottom:0; left:0; right:0; background: var(--ndial-green); border-radius:5px; display:block; }
.ndial-mon-vbars strong{ font-size:13px; color:#1a2333; }
.ndial-mon-vbars span{ font-size:8.5px; color:#8291a6; }

.ndial-mon-table-card{ flex: 1.4 1 0; min-width:220px; padding:10px 12px; }
.ndial-mon-table{ width:100%; border-collapse:collapse; font-size:9.5px; }
.ndial-mon-table thead th{ text-align:left; color:#8291a6; font-weight:800; padding:5px 6px; text-transform:uppercase; font-size:8.5px; }
.ndial-mon-table tbody td{ padding:5px 6px; border-top:1px solid #f0f2f6; color:#3a4454; white-space:nowrap; }
.ndial-mon-chip{ background:#f0f2f6; border-radius:4px; padding:1px 5px; font-weight:700; margin-left:4px; }
.ndial-mon-state{ border-radius:4px; padding:2px 6px; font-weight:700; }
.ndial-mon-state.grey{ background:#f0f2f6; color:#5b6b7c; }
.ndial-mon-state.talk{ background: var(--ndial-green); color:#fff; }
.ndial-mon-state.pause{ background:#fbdcdc; color:#b83b3b; }
.ndial-mon-state.avail{ background:#d9f2e6; color:#0d6b3f; }
.ndial-mon-state.ring{ background:#e6efff; color:#2a5bd7; }

.ndial-mon-bases{
	background:#fff; border:1px solid #eef1f6; border-radius:10px; padding:10px 12px;
}
.ndial-mon-bases .actions{ display:flex; gap:6px; margin-bottom:8px; }
.ndial-mon-bases .actions span{
	width:24px; height:24px; border-radius:5px; display:flex; align-items:center; justify-content:center;
	background: var(--ndial-green); color:#fff; font-size:12px;
}
.ndial-mon-bases .actions span.grey{ background:#3a4454; }
.ndial-mon-bases table{ width:100%; border-collapse:collapse; font-size:9.5px; }
.ndial-mon-bases thead th{ text-align:left; color:#8291a6; font-weight:800; padding:5px 6px; text-transform:uppercase; font-size:8.5px; }
.ndial-mon-bases tbody td{ padding:5px 6px; border-top:1px solid #f0f2f6; color:#3a4454; }
.ndial-mon-progress{ width:70px; height:5px; background:#eef1f6; border-radius:4px; overflow:hidden; display:inline-block; margin-right:6px; vertical-align:middle; }
.ndial-mon-progress i{ display:block; height:100%; background: var(--ndial-green); }

@media (max-width: 991px){
	.ndial-mon{ font-size:11px; }
	.ndial-mon-row{ flex-direction:column; }
}

/* ---------- Agent self-service portal (recreated UI) ---------- */
.ndial-portal-tabs{
	display:flex;
	gap: 28px;
	padding: 14px 18px;
	background:#fff;
	border-bottom: 1px solid #eef1f6;
	font-size: 13px;
	font-weight:700;
	color:#8291a6;
}
.ndial-portal-tabs span{
	display:flex;
	align-items:center;
	gap:6px;
	padding-bottom:10px;
}
.ndial-portal-tabs span.active{
	color: var(--ndial-green);
	border-bottom: 2px solid var(--ndial-green);
}
.ndial-portal-body{
	display:flex;
	gap:16px;
	padding:16px;
	background:#fff;
}
.ndial-portal-side{
	flex: 0 0 220px;
	display:flex;
	flex-direction:column;
	gap:10px;
}
.ndial-kpi-circles{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:8px;
}
.ndial-kpi-circle{
	background: var(--ndial-mint);
	border-radius: 10px;
	padding: 12px 8px;
	text-align:center;
}
.ndial-kpi-circle .c-dot{
	width:34px;height:34px;
	margin:0 auto 6px;
	border-radius:50%;
	background: var(--ndial-green);
	color:#fff;
	display:flex;align-items:center;justify-content:center;
	font-size:15px;
}
.ndial-kpi-circle strong{ display:block; font-size:15px; color:var(--ndial-ink); }
.ndial-kpi-circle small{ display:block; font-size:9.5px; color:#5b6b7c; margin-top:2px; }
.ndial-kpi-circle .goal{ display:block; font-size:8.5px; color:var(--ndial-green-dark); font-weight:700; margin-top:3px; background:#fff; border-radius:8px; padding:1px 0; }
.ndial-side-card{
	background:#f6f8fb;
	border-radius: 10px;
	padding: 9px 12px;
	font-size:11.5px;
	color:#5b6b7c;
	display:flex;
	align-items:center;
	gap:8px;
}
.ndial-side-card i{ color: var(--ndial-green); font-size:16px; }
.ndial-side-card strong{ display:block; font-size:12.5px; color:var(--ndial-ink); }

.ndial-portal-main{ flex:1; min-width:0; }
.ndial-portal-main h5{
	font-size:11.5px;
	font-weight:800;
	color: var(--ndial-ink);
	margin: 0 0 8px;
	text-transform:uppercase;
	letter-spacing:.3px;
}
.ndial-mini-table{
	width:100%;
	border-collapse:collapse;
	font-size:10.5px;
	margin-bottom:16px;
	overflow-x:auto;
}
.ndial-mini-table thead th{
	text-align:left;
	background:#f6f8fb;
	color:#8291a6;
	font-weight:700;
	padding:7px 9px;
	white-space:nowrap;
}
.ndial-mini-table tbody td{
	padding:7px 9px;
	border-top:1px solid #eef1f6;
	color:#5b6b7c;
	white-space:nowrap;
}
.ndial-mini-table tbody tr td{ color:#b7c0cc; font-style:italic; }

/* ---------- Call / typification screen (recreated UI) ---------- */
.ndial-call-banner{
	background: var(--ndial-yellow);
	color:#5b4600;
	font-weight:800;
	font-size:12px;
	padding:9px 16px;
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.ndial-call-banner span.btn-mini{
	background: var(--ndial-ink);
	color:#fff;
	padding:4px 12px;
	border-radius:6px;
	font-size:11px;
}
.ndial-call-body{ padding:16px 18px; background:#fff; }
.ndial-call-body h5{
	font-size:11px;
	font-weight:800;
	color: var(--ndial-ink);
	margin: 14px 0 8px;
	text-transform:uppercase;
	letter-spacing:.3px;
}
.ndial-call-body h5:first-child{ margin-top:0; }
.ndial-field-grid{
	display:grid;
	grid-template-columns: repeat(4, 1fr);
	gap:8px;
}
.ndial-field{
	display:flex;
	flex-direction:column;
	gap:3px;
}
.ndial-field label{
	font-size:9px;
	font-weight:700;
	color:#8291a6;
	text-transform:uppercase;
}
.ndial-field .box{
	border-radius:6px;
	padding:6px 8px;
	font-size:11px;
	border:1px solid #e7eaf1;
	color:#3a4454;
	background:#fff;
	min-height:26px;
}
.ndial-field.readonly .box{ background:#f6f8fb; color:#8291a6; }
.ndial-field.select .box::after{ content:"▾"; float:right; color:#b7c0cc; }
.ndial-call-textarea{
	margin-top:10px;
	border-radius:8px;
	border:1px solid #e7eaf1;
	min-height:46px;
	padding:8px 10px;
	font-size:11px;
	color:#b7c0cc;
}
.ndial-call-actions{
	display:flex;
	justify-content:flex-end;
	gap:8px;
	margin-top:14px;
}
.ndial-call-actions span{
	padding:8px 16px;
	border-radius:7px;
	font-size:11.5px;
	font-weight:700;
	color:#fff;
}
.ndial-call-actions .danger{ background:#ef4444; }
.ndial-call-actions .dark{ background: var(--ndial-ink); }
.ndial-call-actions .go{ background: var(--ndial-green); }

@media (max-width: 767px){
	.ndial-portal-body{ flex-direction:column; }
	.ndial-portal-side{ flex-direction:row; flex-wrap:wrap; }
	.ndial-field-grid{ grid-template-columns: repeat(2,1fr); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px){
	.ndial-bento{ grid-template-columns: repeat(2,1fr); }
	.ndial-bento-card.big{ grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 991px){
	.ndial-feature-row{ flex-direction: column !important; gap:34px; margin-bottom:80px; }
	.ndial-feature-row .ft-text, .ndial-feature-row .ft-visual{ flex: 1 1 100%; max-width:100%; }
	.ndial-step{ flex-direction: column !important; text-align:center; gap:20px; }
	.ndial-step .st-text{ max-width:100%; }
	.ndial-steps{ gap:56px; }
	.ndial-float-badge{ display:none; }
	.ndial-legend-grid{ grid-template-columns: 1fr; }
	.ndial-stat-strip .stat{ border-right:none; border-bottom:1px solid #e7eaf1; }
	.ndial-cta-panel{ padding: 40px 24px; }
	.ndial-stack{ padding-left:8%; }
	.ndial-stack .stack-behind{ display:none; }
}
@media (max-width: 575px){
	.ndial-h2{ font-size:30px; }
	.ndial-bento{ grid-template-columns: 1fr; grid-auto-rows:auto; }
	.ndial-bento-card, .ndial-bento-card.big{ grid-column:span 1; }
}

/* =================================================
   Dark mode — full site override
================================================= */
[data-theme="dark"] body{
	background: var(--page-bg);
	color: var(--text-body);
}
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6{
	color: var(--text-heading);
}
[data-theme="dark"] p{ color: var(--text-body); }
[data-theme="dark"] .h2-color,
[data-theme="dark"] .ndial-h2,
[data-theme="dark"] .banner-content h1{
	color: var(--text-heading) !important;
}
[data-theme="dark"] .section-title p{ color: var(--text-body); }

/* Nav */
[data-theme="dark"] .navbar-nav .nav-item .nav-link{ color: var(--text-heading) !important; }
[data-theme="dark"] .sticky-nav .main-nav{ background-color: var(--nav-bg) !important; }
[data-theme="dark"] .main-nav nav .side-nav .side-item .nav-menu-btn{ color:#fff !important; }
[data-theme="dark"] .mean-container .mean-bar{ background-color: var(--nav-bg); }
[data-theme="dark"] .mean-container .mean-nav{ background: var(--surface-bg); }
[data-theme="dark"] .mean-container .mean-nav ul li a{ color: var(--text-body); border-color: var(--surface-border); }
[data-theme="dark"] .ndial-theme-toggle{ background: var(--surface-bg); border-color: var(--surface-border); color: var(--text-heading); }
[data-theme="dark"] .ndial-lang-switch{ background: var(--surface-border); }
[data-theme="dark"] .ndial-lang-switch .lang-btn{ color: var(--text-muted); }
[data-theme="dark"] .side-nav-responsive .side-nav-inner{ background: var(--surface-bg); }
[data-theme="dark"] .dot-menu .circle{ background: var(--text-heading); }

/* Hero */
[data-theme="dark"] .ndial-hero-eyebrow{ color: var(--text-heading); }
[data-theme="dark"] .ndial-hero-sub{ color: var(--text-body); }
[data-theme="dark"] .ndial-hero-badge-row span{
	background: var(--surface-bg);
	border-color: var(--surface-border);
	color: var(--text-heading);
}
[data-theme="dark"] .ndial-btn-ghost{
	border-color: var(--surface-border);
	color: var(--text-heading) !important;
}
[data-theme="dark"] .cascade-card{ background: var(--surface-bg); }
[data-theme="dark"] .cascade-card.card-check li{ color: var(--text-heading); }
[data-theme="dark"] .cascade-card.card-status strong{ color: var(--text-heading); }

/* Accordion */
[data-theme="dark"] .ndial-acc-item{
	background: var(--surface-bg);
	border-color: var(--surface-border);
}
[data-theme="dark"] .ndial-acc-head .acc-icon{
	background: rgba(19,94,85,.14);
}
[data-theme="dark"] .ndial-acc-head .acc-heading{ color: var(--text-heading); }
[data-theme="dark"] .ndial-acc-body{ border-top-color: var(--surface-border); }
[data-theme="dark"] .ndial-acc-body p{ color: var(--text-body); }
[data-theme="dark"] .ndial-feature-row .ft-text ul li,
[data-theme="dark"] .ndial-acc-body ul li{ color: var(--text-body); }
[data-theme="dark"] .ndial-acc-head .acc-chevron{ background: var(--surface-border); color: var(--text-muted); }
[data-theme="dark"] .ndial-legend-item{
	background: var(--surface-bg);
	border-color: var(--surface-border);
}
[data-theme="dark"] .ndial-legend-item p{ color: var(--text-body); }
[data-theme="dark"] .ndial-float-badge{ background: var(--surface-bg); }
[data-theme="dark"] .ndial-float-badge strong{ color: var(--text-heading); }

/* Highlight cards */
[data-theme="dark"] .ndial-highlight-card{
	background: var(--surface-bg);
	border-color: var(--surface-border);
}
[data-theme="dark"] .ndial-highlight-card h3{ color: var(--text-heading); }
[data-theme="dark"] .ndial-cta-strip{ color: var(--text-heading); }

/* Support cards */
[data-theme="dark"] .ndial-support-card .ssc-front{
	background: var(--surface-bg);
	border-color: var(--surface-border);
}
[data-theme="dark"] .ndial-support-card .ssc-back{ background: var(--surface-border); }
[data-theme="dark"] .ndial-support-card .ssc-front h4{ color: var(--text-heading); }
[data-theme="dark"] .ndial-support-card .ssc-front p{ color: var(--text-body); }

/* Differentiator cards */
[data-theme="dark"] .ndial-diff-card{
	background: var(--surface-bg);
	border-color: var(--surface-border);
}

/* Alt background sections */
[data-theme="dark"] .ndial-alt-bg{ background: var(--alt-bg) !important; }

/* Forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-control.form-border{
	background-color: var(--input-bg) !important;
	border-color: var(--surface-border) !important;
	color: var(--text-heading) !important;
}
[data-theme="dark"] .form-control::placeholder{ color: var(--text-muted); opacity: 1; }
[data-theme="dark"] .seo-form-option .form-group i{ color: var(--text-muted); }

/* Footer */
[data-theme="dark"] .footer-area{ background: var(--surface-bg); }
[data-theme="dark"] .footer-widget .footer-list li a{ color: var(--text-body); }
[data-theme="dark"] .footer-widget .footer-list li a:hover{ color: var(--ndial-green); }
[data-theme="dark"] .footer-widget p{ color: var(--text-body); }
[data-theme="dark"] .footer-widget h3{ color: var(--ndial-green); }

/* Template-native brand-color text that needs to lighten in dark mode */
[data-theme="dark"] .section-title span{ color: var(--ndial-green); }
[data-theme="dark"] .main-nav nav .navbar-nav .nav-item a.active,
[data-theme="dark"] .main-nav nav .navbar-nav .nav-item a:hover,
[data-theme="dark"] .main-nav nav .navbar-nav .nav-item:hover a{ color: var(--ndial-green) !important; }
[data-theme="dark"] .side-nav-responsive .dot-menu .circle-inner .circle{ background-color: var(--ndial-green); }
[data-theme="dark"] .default-btn i{ color: var(--ndial-green); }
[data-theme="dark"] .copy-right-area{ border-top: 1px solid var(--surface-border); }
[data-theme="dark"] .copy-right-area .copy-right-text p{ color: var(--text-muted) !important; }
[data-theme="dark"] .newsletter-area .form-control{ background: var(--input-bg) !important; color: var(--text-heading) !important; }
[data-theme="dark"] .social-link li a{ background: var(--surface-border); color: var(--text-heading); }

/* Footer social icons: keep on-brand (real platform colors mismatched our 3-icon set) */
.footer-social-icon .social-link li a{
	background-color: rgba(19,94,85,.12) !important;
	color: var(--ndial-green-dark);
}
[data-theme="dark"] .footer-social-icon .social-link li a{
	background-color: rgba(19,94,85,.16) !important;
	color: #7fe3ac;
}

/* Preloader / misc backgrounds that should stay dark-aware */
[data-theme="dark"] .preloader{ background-color: var(--page-bg); }