:root{
	--navy-950:#080C16;
	--navy-900:#0B1220;
	--navy-800:#121B30;
	--navy-700:#1A2540;
	--line-on-navy:rgba(255,255,255,0.10);
	--paper:#F6F7FB;
	--paper-dim:#ECEEF4;
	--card:#FFFFFF;
	--ink:#0E1526;
	--ink-soft:#3C4457;
	--slate:#5B6478;
	--slate-light:#8A93A6;
	--signal:#2E5BFF;
	--signal-bright:#5B7FFF;
	--pulse:#22D3C9;
	--pulse-soft:rgba(34,211,201,0.16);
	--signal-soft:rgba(46,91,255,0.14);
	--white:#FFFFFF;
	--display: 'Space Grotesk', sans-serif;
	--body: 'Inter', sans-serif;
	--mono: 'JetBrains Mono', monospace;
	--radius-sm:10px;
	--radius-md:16px;
	--radius-lg:24px;
	--ease: cubic-bezier(.22,.9,.32,1);
	--ats-navy: #061f4f;
    --ats-navy-2: #073b82;
    --ats-blue: #075dcc;
    --ats-blue-2: #0879df;
    --ats-cyan: #2dd9c4;
    --ats-amber: #ffb454;
    --ats-ink: #0b1830;
    --ats-muted: #4a5670;
    --ats-deep: #0a1730;
    --ats-deep-2: #0e2040;
    --ats-faint: #8a93a8;
    --ats-line:rgba(7,61,130,0.14);
    --ats-paper: #ffffff;
}
  
.wrap{
	max-width:1180px;
	margin:0 auto;
	padding:0 32px;
}

.nav{
	position:sticky; top:0; z-index:50;
	background:rgba(8,12,22,0.85);
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
	border-bottom:1px solid var(--line-on-navy);
}

.nav .wrap{
    display:flex; 
	align-items:center; 
	justify-content:space-between;
    height:76px;
}

.nav-logo{
    font-family:var(--display);
    font-weight:700;
    font-size:19px;
    color:var(--white);
    letter-spacing:-0.01em;
    display:flex; 
	align-items:center; 
	gap:10px;
}

.nav-logo .dot{
    width:8px; height:8px; 
	border-radius:50%;
    background:var(--pulse);
    box-shadow:0 0 0 4px rgba(34,211,201,0.18);
}

.nav-links{
    display:flex; 
	align-items:center; 
	gap:36px;
}

.nav-links a{
    font-size:14px; 
	color:rgba(255,255,255,0.72);
    font-weight:500;
    transition:color .2s;
}

.nav-links a:hover{
	color:var(--white);
}

.nav-cta{
    display:inline-flex; 
	align-items:center; 
	gap:8px;
    background:var(--signal);
    color:var(--white) !important;
    font-size:14px; 
	font-weight:600;
    padding:10px 18px;
    border-radius:999px;
    transition:background .2s, transform .2s;
}

.nav-cta:hover{
	background:var(--signal-bright); 
	transform:translateY(-1px);
}

@media (max-width:820px){ 
	.nav-links{
		display:none;
	} 
}

.cloud-communication{
    background:
        radial-gradient(1100px 520px at 78% -10%, rgba(46,91,255,0.25), transparent 40%),
        radial-gradient(700px 420px at 10% 110%, rgba(34,211,201,0.14), transparent 30%),

        linear-gradient(rgba(5,15,35,0.60), rgba(5,15,35,0.70)),
        url("../images/cloud-communication-services-1.png") center center / cover no-repeat;
}

.customer-exp {
    background:
        radial-gradient(1100px 520px at 78% -10%, rgba(46,91,255,0.25), transparent 40%),
        radial-gradient(700px 420px at 10% 110%, rgba(34,211,201,0.14), transparent 30%),

        linear-gradient(rgba(5,15,35,0.60), rgba(5,15,35,0.70)),
        url("../images/customer-experience-and-support.png") center center / cover no-repeat;
}

.ai-automation {
    background:
        radial-gradient(1100px 520px at 78% -10%, rgba(46,91,255,0.25), transparent 40%),
        radial-gradient(700px 420px at 10% 110%, rgba(34,211,201,0.14), transparent 30%),

        linear-gradient(rgba(5,15,35,0.60), rgba(5,15,35,0.70)),
        url("../images/ai-and-automation-services-3.png") center center / cover no-repeat;
}

.collection{
    background:
        radial-gradient(1100px 520px at 78% -10%, rgba(46,91,255,0.25), transparent 40%),
        radial-gradient(700px 420px at 10% 110%, rgba(34,211,201,0.14), transparent 30%),

        linear-gradient(rgba(5,15,35,0.60), rgba(5,15,35,0.70)),
        url("../images/collection-process-services-1.png") center center / cover no-repeat;
}

.data-analytics{
    background:
        radial-gradient(1100px 520px at 78% -10%, rgba(46,91,255,0.25), transparent 40%),
        radial-gradient(700px 420px at 10% 110%, rgba(34,211,201,0.14), transparent 30%),

        linear-gradient(rgba(5,15,35,0.60), rgba(5,15,35,0.70)),
        url("../images/data-and-advanced-analytics-image-1.png") center center / cover no-repeat;
}

.security{
    background:
        radial-gradient(1100px 520px at 78% -10%, rgba(46,91,255,0.25), transparent 40%),
        radial-gradient(700px 420px at 10% 110%, rgba(34,211,201,0.14), transparent 30%),

        linear-gradient(rgba(5,15,35,0.60), rgba(5,15,35,0.70)),
        url("../images/reliability-and-security-image-1.png") center center / cover no-repeat;
}

.hero{
    position:relative;
    color:var(--white);
    padding:100px 0;
    overflow:hidden;
}


.hero h1{
    font-family:var(--display);
    font-weight:600;
    line-height:1.08;
}

.hero h1 em{
    font-style:normal;
    background:linear-gradient(90deg, var(--signal-bright), var(--pulse));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.hero-actions{
    margin-top:36px;
    display:flex; 
	align-items:center; 
	gap:22px;
    flex-wrap:wrap;
}

.btn-primary{
    display:inline-flex; 
	align-items:center; 
	gap:10px;
    background:var(--white);
    color:var(--navy-950) !important;
    font-weight:600; 
	font-size:15px;
    padding:14px 24px;
    border-radius:999px;
    transition:transform .2s var(--ease), box-shadow .2s var(--ease);
    box-shadow:0 0 0 0 rgba(46,91,255,0);
}

.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 30px -8px rgba(46,91,255,0.55);
}

.btn-primary svg{
	width:16px; 
	height:16px; 
	transition:transform .2s;
}

.btn-primary:hover svg{
	transform:translateX(3px);
}

.hero-note{
    font-family:var(--mono);
    font-size:12.5px;
    color:rgba(255,255,255,0.45);
    letter-spacing:.03em;
}

.intro-premium {
    position: relative;
    overflow: hidden;
    background: linear-gradient( 135deg, #f8fbff 0%, #ffffff 45%, #eef8ff 100%);
    isolation: isolate;
}

.intro-bg-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(10px);
    z-index: -1;
}

.intro-glow-1 {
    width: 520px;
    height: 520px;
    top: -220px;
    right: -120px;
    background: rgba(46, 91, 255, 0.10);
}

.intro-glow-2 {
    width: 420px;
    height: 420px;
    bottom: -220px;
    left: -160px;
    background: rgba(34, 211, 201, 0.09);
}

.intro-premium-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: 30px;
}

.intro-content {
    position: relative;
    z-index: 5;
}

.intro-content h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--navy-950);
}

.intro-content h2 span {
    display: block;
    background: linear-gradient(90deg, var(--signal-bright), var(--pulse));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: filter .35s ease, text-shadow .35s ease;
}

.intro-content h2:hover span {
    filter: brightness(1.15);
    text-shadow:
        0 0 15px rgba(46, 91, 255, .18),
        0 0 35px rgba(34, 211, 201, .12);
}

.intro-lead {
    max-width: 610px;
    margin: 32px 0 0;
    font-size: 18px;
    line-height: 1.7;
    font-weight: 450;
    color: #26384d;
}

.intro-description {
    max-width: 650px;
    margin-top: 22px;
}

.intro-description p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.75;
    color: #023248;
}

.intro-description p + p {
    margin-top: 14px;
}

.intro-visual {
    position: relative;
    min-height: 570px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visual-glow {
    position: absolute;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    background:radial-gradient(circle, rgba(46, 91, 255, .22), rgba(34, 211, 201, .08) 45%, transparent 70%);
    filter: blur(10px);
    transition: transform .6s ease;
}

.image-card {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background: #dfeeff;
    box-shadow:
        0 30px 80px rgba(18, 48, 92, .18),
        0 5px 20px rgba(18, 48, 92, .08);
    transform: rotate(2deg);
    transition:transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s ease, filter .5s ease;
}

.image-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background:linear-gradient(135deg, rgba(46,91,255,.16), transparent 35%, rgba(34,211,201,.08) );
    pointer-events: none;
}

.image-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition:transform .8s cubic-bezier(.2,.8,.2,1), filter .5s ease;
}

.intro-visual:hover .image-card {
    transform: rotate(0deg) translateY(-6px);
    box-shadow:0 40px 100px rgba(18, 48, 92, .22), 0 8px 30px rgba(46, 91, 255, .12);
}

.intro-visual:hover .image-card img {
    transform: scale(1.05);
}

.intro-visual:hover .visual-glow {
    transform: scale(1.12);
}

.visual-orbit {
    position: absolute;
    border: 1px solid rgba(46, 91, 255, .12);
    border-radius: 50%;
    pointer-events: none;
}

.orbit-1 {
    width: 500px;
    height: 500px;
    transform: rotate(25deg);
}

.orbit-2 {
    width: 600px;
    height: 280px;
    transform: rotate(-25deg);
}

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

@keyframes floatBottom {
    0%, 100% { transform: translateY(0);}
    50% { transform: translateY(9px);}
}

@media (max-width: 1050px) {
    .intro-premium-grid {
        gap: 50px;
    }
    .intro-content h2 {
        font-size: 46px;
    }
    .intro-visual {
        min-height: 500px;
    }
    .orbit-1 {
        width: 440px;
        height: 440px;
    }
    .orbit-2 {
        width: 520px;
        height: 240px;
    }
}


@media (max-width: 820px) {
    .intro-premium {
        padding: 75px 0 85px;
    }
    .intro-premium-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .intro-content h2 {
        font-size: clamp(40px, 8vw, 58px);
    }
    .intro-visual {
        min-height: 500px;
    }
}


@media (max-width: 520px) {
    .intro-premium {
        padding: 60px 0;
    }
    .intro-content h2 {
        font-size: 38px;
    }
    .intro-lead {
        font-size: 16px;
    }
    .intro-description p {
        font-size: 15px;
    }
    .intro-visual {
		min-height: 150px;
    }
    .orbit-1,
    .orbit-2 {
        display: none;
    }
}

.capabilities{
    padding:24px 0 100px;
}

.cap-head{
    display:flex; 
	align-items:flex-end; 
	justify-content:space-between;
    margin-bottom:44px;
    gap:24px;
    flex-wrap:wrap;
}
  
.cap-head h2{
    font-family:var(--display);
    font-weight:600;
    font-size:clamp(24px,2.6vw,30px);
    letter-spacing:-0.01em;
    color:var(--ink);
}

.cap-head p{
    color:var(--slate);
    font-size:15px;
    max-width:340px;
    line-height:1.6;
}

.cap-body{
    display:grid;
    grid-template-columns:340px 1fr;
    gap:64px;
    align-items:start;
}

.cap-side{ 
	position:sticky; 
	top:96px; 
}
  
.cap-side h2{
    font-family:var(--display);
    font-weight:600;
    font-size:clamp(24px,2.6vw,30px);
    letter-spacing:-0.01em;
    color:var(--ink);
    line-height:1.2;
}

.cap-side p{
    color:var(--slate);
    font-size:15px;
    line-height:1.65;
    margin-top:16px;
    max-width:320px;
}

.cap-side .cap-count{
    display:inline-flex; 
	align-items:center; 
	gap:8px;
    margin-top:28px;
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.06em;
    color:var(--slate-light);
}

.cap-side .cap-count::before{
    content:""; 
	width:16px; 
	height:1px; 
	background:var(--slate-light);
}

.cap-accordion{
    border-top:1px solid var(--paper-dim);
}

.cap-item{
    border-bottom:1px solid var(--paper-dim);
}

.cap-item-head{
    width:100%;
    display:flex;
    align-items:center;
    gap:15px;
    padding:10px 5px;
    background:none;
    border:none;
    cursor:pointer;
    text-align:left;
    font-family:inherit;
}

.cap-item-icon{
    flex:none;
    width:38px; 
	height:38px;
    border-radius:10px;
    background:var(--paper-dim);
    border:1px solid var(--paper-dim);
    display:flex; 
	align-items:center; 
	justify-content:center;
    transition:background .25s, border-color .25s;
}

.cap-item-icon svg{
    width:18px; 
	height:18px;
    stroke:var(--signal);
    fill:none;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:stroke .25s;
}

.cap-item-title{
    flex:1;
    font-family:var(--display);
    font-weight:600;
    font-size:18px;
    color: #032d60;
    letter-spacing:-0.005em;
    transition:color .2s;
}

.cap-toggle{
    flex:none;
    width:34px; 
	height:34px;
    border-radius:50%;
    border:1px solid var(--paper-dim);
    background:var(--paper);
    position:relative;
    transition:background .25s, border-color .25s, transform .25s var(--ease);
}

.cap-toggle::before, .cap-toggle::after{
    content:"";
    position:absolute;
    background:var(--ink);
    transition:transform .25s var(--ease), background .25s;
}

.cap-toggle::before{ /* horizontal */
    left:50%; 
	top:50%; 
	width:12px; 
	height:1.6px;
    transform:translate(-50%,-50%);
}

.cap-toggle::after{ /* vertical */
    left:50%; 
	top:50%; 
	width:1.6px; 
	height:12px;
    transform:translate(-50%,-50%);
}

.cap-item.is-open .cap-toggle::after{ 
	transform:translate(-50%,-50%) rotate(90deg) scaleY(0); 
}

.cap-item.is-open .cap-toggle{ 
	background:var(--navy-950); border-color:var(--navy-950); 
}

.cap-item.is-open .cap-toggle::before{ 
	background:var(--white); 
}

.cap-item.is-open .cap-toggle::after{ 
	background:var(--white); 
}

.cap-item:hover .cap-item-title{ 
	color:var(--signal); 
}

.cap-item:hover .cap-item-icon{ 
	background:var(--signal-soft); 
	border-color:var(--signal); 
}

.cap-item:hover .cap-item-icon svg{ 
	stroke:var(--signal); 
}

.cap-item-body{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .38s var(--ease);
}

.cap-item.is-open .cap-item-body{ 
	grid-template-rows:1fr; 
}

.cap-item-body-inner{ 
	overflow:hidden; 
}

.cap-item-desc{
	padding: 0 4px 30px 50px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--slate);
    max-width: 640px;
    font-weight: 600;
}

@media (max-width:900px){
    .cap-body{ 
		grid-template-columns:1fr; 
		gap:32px; 
	}
    .cap-side{ 
		position:static; 
	}
}

@media (max-width:560px){
    .cap-item-head{ gap:14px; }
    .cap-item-title{ font-size:16px; }
    .cap-item-desc{ padding-left:0; }
}

  /* ============ ACHIEVE BAND ============ */

.achieve{
    color:var(--white);
    padding: 30px 0 60px;
    position:relative;
    overflow:hidden;
	background : cornflowerblue;
}

.achieve::after{
    content:"";
    position:absolute; 
	left:50%; 
	top:0; 
	bottom:0;
    width:1px;
    background:linear-gradient(180deg, transparent, rgba(255,255,255,0.08), transparent);
}

.achieve-head{ 
	text-align:center; 
	max-width:560px; 
	margin:0 auto 40px; 
}
  
.achieve-head h2{
    font-family:var(--display);
    font-weight:600;
    font-size:clamp(26px,3vw,34px);
    letter-spacing:-0.015em;
    margin-top:14px;
}

.achieve-list{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    max-width:980px;
    margin:0 auto;
    background:var(--line-on-navy);
    border:1px solid var(--line-on-navy);
    border-radius:var(--radius-lg);
    overflow:hidden;
}

.achieve-item{
    background:var(--navy-900);
    padding:26px 24px;
    display:flex; 
	align-items:center; 
	gap:14px;
}

.check{
    flex:none;
    width:26px; 
	height:26px;
    border-radius:50%;
    background:var(--pulse-soft);
    border:1px solid rgba(34,211,201,0.4);
    display:flex; 
	align-items:center; 
	justify-content:center;
}

.check svg{ 
	width:13px; 
	height:13px; 
	stroke:var(--pulse); 
	stroke-width:2.4; 
	fill:none; 
}

.achieve-item span{
	font-size:14.5px;
    font-weight:500;
    color:rgba(255,255,255,0.88);
  }

@media (max-width:820px){ 
	.achieve-list{
		grid-template-columns:1fr;
	} 
}

/* ============ WHY MODERN CX ============ */
.why{
    background:var(--paper);
    padding:100px 0;
}

.why-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
    align-items:start;
}
  
.why h2{
    font-family:var(--display);
    font-weight:600;
    font-size:clamp(26px,3vw,32px);
    line-height:1.2;
    letter-spacing:-0.015em;
    margin-top:14px;
    color:var(--ink);
}

.why-copy p{
    font-size:16px;
    line-height:1.75;
    color:var(--ink-soft);
    margin-bottom:16px;
}

.why-stat-card{
	background : #9a4335;
    border-radius:var(--radius-lg);
    padding:38px 34px;
    color:var(--white);
    position:relative;
    overflow:hidden;
}

.why-stat-card::before{
    content:"";
    position:absolute; 
	right:-40px; 
	top:-40px;
    width:180px; 
	height:180px;
    background:radial-gradient(circle, rgba(46,91,255,0.35), transparent 70%);
}

.why-stat-row{
    display:flex; 
	align-items:baseline; 
	gap:10px;
    padding:18px 0;
    border-bottom:1px solid var(--line-on-navy);
}

.why-stat-row:last-child{ 
	border-bottom:none; 
}

.why-stat-num{
    font-family:var(--display);
    font-weight:700;
    font-size:30px;
    background:linear-gradient(90deg, var(--white), var(--pulse));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.why-stat-text{
    font-size: 13.5px;
    color: #fff;
    line-height: 1.5;
    font-weight: 700;
}

@media (max-width:900px){ 
	.why-grid{
		grid-template-columns:1fr;
	} 
}

/* CTA */
.ats-article-cta {
    margin-bottom: 15px;
    border-radius: 16px;
    place-items: center;
    padding: 44px 38px;
}

.ats-article-cta__card {
    position: relative;
    overflow: hidden;
    padding: 44px 38px;
    border-radius: 16px;
    background: linear-gradient(125deg,var(--ats-navy) 0%, var(--ats-navy-2) 38%, var(--ats-blue) 70%, var(--ats-blue-2) 100%);
}

.ats-article-cta__title {
    margin-bottom: 12px;
    color: #fff;
    font-family: "Space Grotesk", sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.ats-article-cta__description {
    margin-bottom: 26px;
    color: rgba(255,255,255,.75);
    font-size: 14.5px;
    line-height: 1.6;
}

.ats-article-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: end;
}

.ats-article-cta__button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.ats-article-cta__button svg {
    width: 14px;
    height: 14px;
}

.ats-article-cta__button--secondary {
    color: #fff;
    border: 1px solid rgba(255,255,255,.4);
    background: transparent;
}

.ats-article-cta__button--secondary:hover {
    color: #fff;
    border-color: #fff;
    background: rgba(255,255,255,.08);
    transform: translateY(-2px);
}