/* HERO SEC  */

.devops-hero{

background:
linear-gradient(180deg,#071426,#091a33);

color:white;

padding:120px 60px;

font-family:Inter,system-ui;

}


/* CONTAINER */

.hero-container{

max-width:1300px;
margin:auto;

display:grid;
grid-template-columns:1fr 1fr;

align-items:center;
gap:60px;

}


/* BADGE */

.hero-badge{

display:inline-block;

padding:6px 14px;

border-radius:20px;

background:#10294b;

color:#7da8ff;

font-size:13px;

margin-bottom:22px;

}


/* TITLE */

.hero-left h1{

font-size:58px;
line-height:1.1;

margin-bottom:24px;

}


.gradient{

background:linear-gradient(
90deg,
#ff9b6d,
#f06a2f
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}


/* TEXT */

.hero-left p{

color:#9fb2d0;

font-size:18px;
line-height:1.6;

margin-bottom:34px;

}


/* BUTTONS */

.hero-buttons{

display:flex;
gap:16px;

}


.btn-primary{

background:#ff7a2f;

padding:14px 26px;

border-radius:10px;

font-weight:600;

cursor:pointer;

}


.btn-secondary{

background:#1a2e4f;

padding:14px 26px;

border-radius:10px;

cursor:pointer;

}


/* IMAGE */

.hero-image{

position:relative;

border-radius:18px;

overflow:hidden;

background:#0d2241;

padding:12px;

box-shadow:
0 30px 80px rgba(0,0,0,.4);

}

.hero-image img{

width:100%;
border-radius:12px;

}


/* IMAGE STAT */

.image-stat{

position:absolute;

bottom:20px;
left:20px;

background:rgba(20,35,60,.9);

padding:14px 18px;

border-radius:12px;

display:flex;
gap:14px;

align-items:center;

}

.image-stat span{

font-size:12px;
opacity:.7;

}

.image-stat h4{

font-size:18px;

}


/* METRICS */

.hero-metrics{

max-width:1300px;

margin:70px auto 0;

display:grid;
grid-template-columns:repeat(4,1fr);

gap:20px;

}


.metric{

background:#0e2446;

padding:26px;

border-radius:16px;

}

.metric p{

color:#9fb2d0;

font-size:14px;

margin-bottom:10px;

}

.metric h3{

font-size:24px;

}


.metric-top{

color:#6da3ff;

font-weight:600;

margin-bottom:10px;

}

.metric-top.orange{

color:#ff8b3d;

}


/* RESPONSIVE */

@media(max-width:1000px){

.hero-container{

grid-template-columns:1fr;

}

.hero-left h1{

font-size:42px;

}

.hero-metrics{

grid-template-columns:1fr 1fr;

}

}
.deployment-overlay {
  position: absolute;
  left: 28px;
  bottom: 28px;

  display: flex;
  align-items: center;
  gap: 16px;

  min-width: 420px;
  padding: 18px 22px;

  border-radius: 20px;
  overflow: hidden;

  background: linear-gradient(
    135deg,
    rgba(16, 32, 62, 0.82),
    rgba(18, 36, 68, 0.58)
  );

  border: 1px solid rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.deployment-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 38%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
}

.deployment-overlay::after {
  content: "";
  position: absolute;
  inset: auto auto 0 0;
  width: 140px;
  height: 140px;
  background: radial-gradient(
    circle,
    rgba(94, 143, 255, 0.16) 0%,
    rgba(94, 143, 255, 0) 72%
  );
  pointer-events: none;
}

/* ICON BOX */
.deployment-overlay__icon {
  position: relative;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px;

  background: linear-gradient(
    180deg,
    rgba(255, 136, 62, 0.18),
    rgba(255, 136, 62, 0.1)
  );

  border: 1px solid rgba(255, 146, 84, 0.18);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 20px rgba(255, 122, 47, 0.12);
}

/* CSS-only icon */
.deployment-overlay__icon span {
  position: relative;
  width: 18px;
  height: 18px;
  display: block;
}

.deployment-overlay__icon span::before,
.deployment-overlay__icon span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 2px;
  background: #ff8a42;
  box-shadow: 0 0 10px rgba(255, 138, 66, 0.16);
}

.deployment-overlay__icon span::before {
  width: 4px;
  height: 10px;
  box-shadow:
    7px -3px 0 #ff8a42,
    14px -7px 0 #ff8a42;
}

.deployment-overlay__icon span::after {
  left: -2px;
  bottom: -2px;
  width: 22px;
  height: 22px;
  background: none;
  border-left: 2px solid rgba(255, 138, 66, 0.8);
  border-bottom: 2px solid rgba(255, 138, 66, 0.8);
  border-radius: 0;
  box-shadow: none;
}

/* TEXT */
.deployment-overlay__content {
  position: relative;
  z-index: 1;
}

.deployment-overlay__content p {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: none;
  font-weight: 700;
  color: rgba(223, 231, 245, 0.72);
}

.deployment-overlay__content h4 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f5f8ff;
}

/* optional hover polish */
.deployment-overlay {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.deployment-overlay:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* responsive */
@media (max-width: 767px) {
  .deployment-overlay {
    left: 16px;
    right: 16px;
    bottom: 16px;
    min-width: 0;
    width: auto;
    padding: 14px 16px;
    gap: 12px;
    border-radius: 16px;
  }

  .deployment-overlay__icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 12px;
  }

  .deployment-overlay__content p {
    font-size: 11px;
  }

  .deployment-overlay__content h4 {
    font-size: 16px;
  }
}
.hero-image {
  position: relative;
}
.deployment-overlay {
  min-width: 460px;
  padding: 20px 24px;
  border-radius: 22px;
  background: linear-gradient(
    135deg,
    rgba(19, 38, 72, 0.82),
    rgba(16, 30, 56, 0.62)
  );
  z-index: 1;
}

.deployment-overlay__content h4 {
  font-size: 20px;
}
.deployment-overlay {
  background: linear-gradient(
    135deg,
    rgba(24, 40, 74, 0.72),
    rgba(18, 31, 58, 0.48)
  );
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  
}
/* HERO */

.devops-hero{
background:linear-gradient(180deg,#071426,#091a33);
color:white;
padding:80px 20px;
font-family:Inter,system-ui;
}

/* CONTAINER */

.hero-container{
max-width:1300px;
margin:auto;

display:grid;
grid-template-columns:1fr;
gap:40px;
}

/* BADGE */

.hero-badge{
display:inline-block;
padding:6px 12px;
border-radius:20px;
background:#10294b;
color:#7da8ff;
font-size:12px;
margin-bottom:18px;
}

/* TITLE */

.hero-left h1{
font-size:34px;
line-height:1.2;
margin-bottom:18px;
}

/* GRADIENT WORD */

.gradient{
background:linear-gradient(90deg,#ff9b6d,#f06a2f);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* TEXT */

.hero-left p{
color:#9fb2d0;
font-size:15px;
line-height:1.6;
margin-bottom:24px;
}

/* BUTTONS */

.hero-buttons{
display:flex;
flex-wrap:wrap;
gap:12px;
}

.btn-primary{
background:#ff7a2f;
padding:12px 18px;
border-radius:10px;
font-weight:600;
cursor:pointer;
font-size:14px;
}

.btn-secondary{
background:#1a2e4f;
padding:12px 18px;
border-radius:10px;
font-size:14px;
}

/* IMAGE */

.hero-image{
position:relative;
border-radius:16px;
overflow:hidden;
background:#0d2241;
padding:8px;
box-shadow:0 20px 60px rgba(0,0,0,.35);
}

.hero-image img{
width:100%;
border-radius:10px;
display:block;
}

.deployment-overlay{

position:absolute;
left:12px;
right:12px;
bottom:12px;

display:flex;
align-items:center;
gap:12px;

padding:12px 14px;

border-radius:14px;

background:linear-gradient(
135deg,
rgba(24,40,74,.72),
rgba(18,31,58,.48)
);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);

box-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* ICON */

.deployment-overlay__icon{

width:38px;
height:38px;
flex-shrink:0;

display:flex;
align-items:center;
justify-content:center;

border-radius:10px;

background:rgba(255,136,62,.15);
border:1px solid rgba(255,136,62,.2);
}

/* SIMPLE ICON */

.deployment-overlay__icon span{
width:12px;
height:12px;
background:#ff8a42;
display:block;
border-radius:2px;
box-shadow:
6px -3px 0 #ff8a42,
12px -6px 0 #ff8a42;
}

/* TEXT */

.deployment-overlay__content p{
font-size:11px;
opacity:.75;
margin-bottom:2px;
}

.deployment-overlay__content h4{
font-size:14px;
font-weight:700;
}

.hero-metrics{

max-width:1300px;
margin:50px auto 0;

display:grid;
grid-template-columns:1fr;
gap:16px;

}

.metric{

background:#0e2446;
padding:20px;
border-radius:14px;

}

.metric p{
color:#9fb2d0;
font-size:13px;
margin-bottom:8px;
}

.metric h3{
font-size:20px;
}

.metric-top{
font-size:13px;
margin-bottom:6px;
color:#6da3ff;
}

.metric-top.orange{
color:#ff8b3d;
}

@media(min-width:768px){

.hero-left h1{
font-size:46px;
}

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

.deployment-overlay{
left:20px;
right:auto;
width:auto;
}

}

@media(min-width:1100px){

.devops-hero{
padding:120px 60px;
}

.hero-container{
grid-template-columns:1fr 1fr;
gap:60px;
}

.hero-left h1{
font-size:58px;
}

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

.deployment-overlay{
padding:18px 22px;
border-radius:20px;
}

.deployment-overlay__content h4{
font-size:20px;
}

}

/* CARDS */

.services{
padding:60px 20px;
background:#f4f6f9;
}

.services-grid{
max-width:1200px;
margin:auto;

display:grid;
grid-template-columns:1fr;
gap:24px;
}


/* CARD */

.service-card{

background:#0e1e36;

border-radius:12px;

overflow:hidden;

transition:all .3s ease;

box-shadow:0 8px 30px rgba(0,0,0,.08);

}


/* IMAGE */

.service-image{
height:200px;
overflow:hidden;
}

.service-image img{
width:100%;
height:100%;
object-fit:cover;

transition:transform .5s ease;
}


/* CONTENT */

.service-content{
padding:22px;
}

.service-content h3{
color:white;
font-size:20px;
margin-bottom:10px;
}

.service-content p{
color:#a7b5c9;
font-size:14px;
line-height:1.6;
margin-bottom:18px;
}

.service-link{
color:#ff7a2f;
font-weight:600;
font-size:14px;
text-decoration:none;
}


/* HOVER */

.service-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 60px rgba(0,0,0,.18);
}

.service-card:hover img{
transform:scale(1.05);
}


/* TABLET */

@media(min-width:768px){

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

}


/* DESKTOP */

@media(min-width:1100px){

.services{
padding:100px 40px;
}

.services-grid{
grid-template-columns:repeat(3,1fr);
gap:32px;
}

.service-image{
height:220px;
}

.service-content h3{
font-size:22px;
}

.service-content p{
font-size:15px;
}

}
.service-card{
background:linear-gradient(
180deg,
#0e1e36,
#0a1628
);
border:1px solid rgba(255,255,255,.06);
}


/* comparison  */

.devops-comparison{

background:linear-gradient(
180deg,
#0d1626,
#111c2e
);

padding:80px 20px;
color:white;
font-family:Inter,system-ui;

}


.container{
max-width:1200px;
margin:auto;
text-align:center;
}


.devops-comparison h2{
font-size:34px;
margin-bottom:12px;
}


.subtitle{
color:#9fb2d0;
max-width:640px;
margin:auto;
margin-bottom:50px;
line-height:1.6;
}


/* GRID */

.comparison-grid{

display:grid;
grid-template-columns:1fr;
gap:24px;

}


/* CARD */

.comparison-card{

background:linear-gradient(
180deg,
#1c2434,
#111827
);

padding:30px;

border-radius:18px;

border:1px solid rgba(255,255,255,.05);

box-shadow:
0 10px 40px rgba(0,0,0,.4);

text-align:left;

}


/* METRIC LABEL */

.metric{

font-size:12px;
letter-spacing:.08em;
color:#7e90a9;

display:block;
margin-bottom:6px;

}


/* TITLE */

.comparison-card h3{

font-size:22px;
margin-bottom:20px;

}


/* LEGACY BOX */

.legacy-box{

background:rgba(255,70,70,.06);

border:1px solid rgba(255,70,70,.25);

border-radius:12px;

padding:16px;

margin-bottom:16px;

}

.legacy-box span{
color:#ff6b6b;
font-weight:600;
font-size:14px;
}

.legacy-box p{
color:#d0d9e6;
margin-top:6px;
font-size:14px;
}


/* MODERN BOX */

.modern-box{

background:rgba(0,200,120,.08);

border:1px solid rgba(0,200,120,.3);

border-radius:12px;

padding:16px;

}

.modern-box span{
color:#42e08a;
font-weight:600;
font-size:14px;
}

.modern-box p{
color:#d0d9e6;
margin-top:6px;
font-size:14px;
}


/* TABLET */

@media(min-width:768px){

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

.devops-comparison h2{
font-size:40px;
}

}


/* DESKTOP */

@media(min-width:1100px){

.devops-comparison{
padding:120px 40px;
}

.comparison-grid{
grid-template-columns:repeat(4,1fr);
gap:30px;
}

}
.comparison-card::before{

content:"";
position:absolute;

top:0;
left:20px;
right:20px;
height:3px;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.25),
transparent
);

border-radius:4px;

}
/* MODELS */

.engagement{

padding:80px 20px;
background:#f4f6f9;
font-family:Inter,system-ui;

}


.engagement-container{
max-width:1200px;
margin:auto;
text-align:center;
}


.engagement h2{

font-size:34px;
margin-bottom:10px;

}


.engagement-sub{

color:#8fa2b8;
max-width:650px;
margin:auto;
margin-bottom:50px;
line-height:1.6;

}


/* GRID */

.engagement-grid{

display:grid;
grid-template-columns:1fr;
gap:24px;

}


/* CARD */

.engagement-card{

position:relative;

border-radius:14px;

overflow:hidden;

cursor:pointer;

}


/* IMAGE */

.engagement-img{

width:100%;
height:260px;
object-fit:cover;

transition:transform .6s ease;

}


/* OVERLAY */

.engagement-overlay{

position:absolute;
inset:0;

padding:24px;

display:flex;
flex-direction:column;
justify-content:flex-end;

text-align:left;

color:white;

background:linear-gradient(
180deg,
rgba(10,20,40,.2),
rgba(10,20,40,.9)
);

}


/* ICON */

.engagement-icon{

font-size:22px;
margin-bottom:10px;

}


/* TEXT */

.engagement-overlay h3{

font-size:20px;
margin-bottom:8px;

}

.engagement-overlay p{

font-size:14px;
line-height:1.5;
margin-bottom:12px;
color:#d2d9e6;

}


.engagement-type{

font-size:12px;
letter-spacing:.06em;
font-weight:600;
opacity:.8;

}


/* HOVER */

.engagement-card:hover img{

transform:scale(1.05);

}


/* TABLET */

@media(min-width:768px){

.engagement-grid{

grid-template-columns:repeat(2,1fr);

}

}


/* DESKTOP */

@media(min-width:1100px){

.engagement{

padding:120px 40px;

}

.engagement-grid{

grid-template-columns:repeat(4,1fr);
gap:30px;

}

.engagement-img{
height:280px;
}

}


.engagement-overlay{
background:
linear-gradient(
180deg,
rgba(10,20,40,.2),
rgba(10,20,40,.95)
),
radial-gradient(
circle at top,
rgba(0,120,255,.25),
transparent 60%
);
}


/* IMPACT  */

/* IMPACT SECTION */

.impact{

background:linear-gradient(
180deg,
#0b1a2e,
#0e2038
);

color:white;
padding:80px 20px;
font-family:Inter,system-ui;

}

.impact-container{

max-width:1200px;
margin:auto;

display:grid;
grid-template-columns:1fr;
gap:40px;

}


/* LEFT */

.impact-left h2{

font-size:34px;
margin-bottom:12px;

}

.impact-sub{

color:#9fb2d0;
margin-bottom:30px;
line-height:1.6;

}

.impact-list{

list-style:none;
padding:0;

}

.impact-list li{

margin-bottom:14px;
position:relative;
padding-left:28px;
color:#d2d9e6;

}

.impact-list li::before{

content:"✔";
position:absolute;
left:0;
top:0;

color:#ff7a2f;
font-weight:bold;

}


/* TABLE */

.impact-table{

background:linear-gradient(
180deg,
#1a2a42,
#132238
);

border-radius:16px;

overflow:hidden;

border:1px solid rgba(255,255,255,.05);

}


table{

width:100%;
border-collapse:collapse;

}

th{

text-align:left;
padding:16px;

font-size:13px;
letter-spacing:.05em;

color:#9fb2d0;

}

th.modern{
color:#ff7a2f;
}

td{

padding:18px 16px;
border-top:1px solid rgba(255,255,255,.06);

color:#d2d9e6;

}

.modern-cell{
color:#ffffff;
}


/* ECOSYSTEM */

.ecosystem{

padding:80px 20px;
text-align:center;

}

.ecosystem h2{

font-size:32px;
margin-bottom:10px;

}

.ecosystem p{

color:#9fb2d0;
margin-bottom:40px;

}


.ecosystem-row{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;

max-width:900px;
margin:auto;

}

.ecosystem-row div{

padding:14px;

background:#0d1b30;
border-radius:10px;

font-weight:600;

}


/* TABLET */

@media(min-width:768px){

.impact-container{

grid-template-columns:1fr 1fr;

}

.ecosystem-row{

grid-template-columns:repeat(3,1fr);

}

}


/* DESKTOP */

@media(min-width:1100px){

.impact{
padding:120px 40px;
}

.impact-left h2{
font-size:44px;
}

.ecosystem{
padding:120px 40px;
}

.ecosystem-row{

grid-template-columns:repeat(6,1fr);

}

}
.impact-table{
backdrop-filter:blur(12px);
box-shadow:0 20px 80px rgba(0,0,0,.35);
}
.tech-ecosystem{
font-family:Inter,system-ui;
}

/* HEADER */

.tech-header{

background:#f4f6f9;

text-align:center;

padding:80px 20px 60px;

}

.tech-header h2{

font-size:40px;
font-weight:700;
color:#111827;

margin-bottom:10px;

}

.tech-header p{

font-size:16px;
color:#8fa2b8;

}


/* FULL WIDTH BAR */

.tech-bar{

width:100%;

background:#0b1628;

padding:28px 0;

}


/* INNER ROW */

.tech-row{

max-width:1200px;
margin:auto;

display:flex;
align-items:center;
justify-content:space-between;

padding:0 40px;

flex-wrap:wrap;
gap:20px;

}


/* ITEM */

.tech-item{

display:flex;
align-items:center;
gap:12px;

color:white;
font-weight:600;
font-size:20px;

}


/* ICON */

.icon{

color:#ff7a2f;
font-size:22px;

}


/* MOBILE */

@media(max-width:900px){

.tech-row{

justify-content:center;

}

.tech-item{

font-size:18px;

}

}
/* HEADER */

.tech-header{
background:#f4f6f9;
text-align:center;
padding:80px 20px 60px;
}

.tech-header h2{
font-size:40px;
margin-bottom:10px;
}

.tech-header p{
color:#8fa2b8;
}


/* DARK BAR */

.tech-bar{
width:100%;
background:#0b1628;
padding:28px 0;
}

.tech-row{
max-width:1200px;
margin:auto;

display:flex;
align-items:center;
justify-content:space-between;

padding:0 40px;
gap:20px;
}


/* ITEMS */

.tech-item{
display:flex;
align-items:center;
gap:12px;

color:white;
font-weight:600;
font-size:20px;
}

.icon{
color:#ff7a2f;
font-size:22px;
}


/* WHITE SPACE BELOW */

.tech-bottom-space{
background:#f4f6f9;
height:120px;
}
/* IMPACT SECTION BASE */
.impact {
  background: linear-gradient(180deg, #0b1a2e, #0e2038);
  color: white;
  padding: 80px 20px;
  font-family: Inter, system-ui;
  overflow: hidden;
}

.impact-container {
  max-width: 1300px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr; /* Stacked by default for mobile */
  gap: 50px;
  align-items: center;
}

/* LEFT CONTENT */
.impact-left h2 {
  font-size: 34px;
  line-height: 1.2;
  margin-bottom: 16px;
  background: linear-gradient(90deg, #fff, #9fb2d0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.impact-sub {
  color: #9fb2d0;
  margin-bottom: 30px;
  line-height: 1.6;
  font-size: 16px;
}

.impact-list {
  list-style: none;
  padding: 0;
}

.impact-list li {
  margin-bottom: 16px;
  position: relative;
  padding-left: 32px;
  color: #d2d9e6;
  font-size: 15px;
}

.impact-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #ff7a2f;
  font-weight: bold;
  filter: drop-shadow(0 0 5px rgba(255, 122, 47, 0.4));
}

/* TABLE STYLING (The Modern Look) */
.impact-table {
  background: linear-gradient(145deg, rgba(26, 42, 66, 0.4), rgba(19, 34, 56, 0.6));
  border-radius: 24px;
  padding: 8px; /* Inner spacing for the table */
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

th {
  text-align: left;
  padding: 20px 24px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(159, 178, 208, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

th.modern {
  color: #ff7a2f;
  font-weight: 700;
}

td {
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #d2d9e6;
  font-size: 15px;
  vertical-align: middle;
}

tr:last-child td {
  border-bottom: none;
}

/* HIGHLIGHTING THE "MODERN" COLUMN */
.modern-cell {
  color: #ffffff;
  font-weight: 600;
  background: rgba(255, 122, 47, 0.03); /* Extremely subtle tint */
}

/* --- RESPONSIVE LOGIC --- */

/* TABLET & DESKTOP: Side-by-Side */
@media (min-width: 1100px) {
  .impact {
    padding: 120px 60px;
  }
  .impact-container {
    grid-template-columns: 450px 1fr; /* Fixed left, fluid right */
    gap: 80px;
  }
  .impact-left h2 {
    font-size: 52px;
  }
}

/* MOBILE: Table deconstruction */
@media (max-width: 768px) {
  .impact-table {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
  }

  /* Force table to not behave like a table */
  table, thead, tbody, th, td, tr {
    display: block;
    width: 100%;
  }

  /* Hide headers on mobile */
  thead {
    display: none;
  }

  /* Each row becomes a card */
  tr {
    background: rgba(26, 42, 66, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    margin-bottom: 20px;
    padding: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  }

  td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 12px 10px;
    display: flex;
    flex-direction: column; /* Stack label over value */
    gap: 4px;
    text-align: left;
  }

  td:last-child {
    border-bottom: none;
    background: rgba(255, 122, 47, 0.08); /* Highlight the outcome card-bottom */
    border-radius: 0 0 12px 12px;
  }

  /* Inject Labels using :before */
  td:nth-of-type(1)::before { content: "Metric"; font-size: 11px; color: #7e90a9; text-transform: uppercase; }
  td:nth-of-type(2)::before { content: "Manual (Legacy)"; font-size: 11px; color: #ff6b6b; text-transform: uppercase; }
  td:nth-of-type(3)::before { content: "Automated (Modern)"; font-size: 11px; color: #ff7a2f; text-transform: uppercase; }

  .modern-cell {
    color: #fff;
  }
}

/* CTA FORM  */

.cta-section{

background:linear-gradient(180deg,#0b1628,#091326);

padding:60px 20px;

font-family:Inter,system-ui;

}

/* CARD */

.cta-card{

background:linear-gradient(90deg,#182c49,#1c3558);

border-radius:28px;

padding:40px;

max-width:1200px;
margin:auto;

border:1px solid rgba(255,255,255,0.06);

box-shadow:0 40px 100px rgba(0,0,0,.4);

display:grid;
gap:40px;

}

/* LEFT SIDE */

.cta-left h2{

font-size:36px;
margin-bottom:20px;
color:white;

}

.cta-desc{

color:#9fb2d0;
line-height:1.6;
margin-bottom:30px;

}

/* FEATURES */

.cta-feature{

display:flex;
gap:16px;

margin-bottom:20px;

}

.feature-icon{

width:44px;
height:44px;

border-radius:10px;

display:flex;
align-items:center;
justify-content:center;

font-size:18px;

}

.feature-icon.orange{

background:#3a2b25;
color:#ff7a2f;

}

.feature-icon.blue{

background:#22365a;
color:#5aa6ff;

}

.cta-feature h4{

color:white;
margin-bottom:4px;

}

.cta-feature p{

color:#9fb2d0;
font-size:14px;

}

/* FORM */

.cta-form form{

display:flex;
flex-direction:column;
gap:18px;

}

/* INPUT GROUP */

.input-group{

display:flex;
flex-direction:column;
gap:6px;

}

label{

font-size:12px;
color:#9fb2d0;
letter-spacing:.5px;

}

input,select,textarea{

background:#24364e;

border:1px solid rgba(255,255,255,0.08);

border-radius:12px;

padding:14px;

color:white;

font-size:14px;

}

textarea{

min-height:110px;
resize:none;

}

/* ROW */

.form-row{

display:grid;
grid-template-columns:1fr;
gap:16px;

}

/* BUTTON */

.cta-btn{

margin-top:10px;

background:#ff7a2f;

border:none;

padding:16px;

border-radius:12px;

font-weight:600;

color:white;

font-size:16px;

cursor:pointer;

}

.cta-btn:hover{

background:#ff6a18;

}

/* NOTE */

.form-note{

font-size:12px;
color:#7e93b3;
margin-top:8px;

}

/* DESKTOP */

@media (min-width:900px){

.cta-card{

grid-template-columns:1fr 1fr;
padding:60px;

}

.form-row{

grid-template-columns:1fr 1fr;

}

}
/* INPUT GROUP */

.input-group{
display:flex;
flex-direction:column;
gap:8px;
}

/* LABEL */

.input-group label{

font-size:12px;
letter-spacing:.08em;

color:#9fb2d0;

font-weight:600;

text-transform:uppercase;

}


/* INPUT / SELECT / TEXTAREA */

input,
select,
textarea{

width:100%;

padding:16px 18px;

border-radius:14px;

background:linear-gradient(
180deg,
rgba(36,54,78,.9),
rgba(30,47,70,.95)
);

border:1px solid rgba(255,255,255,.08);

color:#ffffff;

font-size:15px;

outline:none;

transition:all .25s ease;

backdrop-filter:blur(6px);

}

/* PLACEHOLDER */

input::placeholder,
textarea::placeholder{

color:#7f97b5;

}

/* HOVER */

input:hover,
select:hover,
textarea:hover{

border-color:rgba(255,255,255,.16);

background:linear-gradient(
180deg,
rgba(42,64,94,.95),
rgba(34,54,84,1)
);

}

/* FOCUS STATE */

input:focus,
select:focus,
textarea:focus{

border-color:#ff7a2f;

box-shadow:
0 0 0 2px rgba(255,122,47,.15),
0 6px 20px rgba(0,0,0,.35);

background:linear-gradient(
180deg,
rgba(42,64,94,1),
rgba(34,54,84,1)
);

}

/* TEXTAREA */

textarea{

min-height:120px;

resize:none;

}

/* SELECT */

select{

appearance:none;

background-image:
linear-gradient(45deg, transparent 50%, #9fb2d0 50%),
linear-gradient(135deg, #9fb2d0 50%, transparent 50%);

background-position:
calc(100% - 20px) calc(50% - 4px),
calc(100% - 14px) calc(50% - 4px);

background-size:6px 6px,6px 6px;

background-repeat:no-repeat;

padding-right:40px;

}
.cta-form form{
gap:22px;
}
input,
select,
textarea{

width:100%;

/* SIZE */
height:64px;

/* TEXT SPACING */
padding:0 24px;

/* STYLE */
border-radius:14px;

background:#223651;

border:1px solid rgba(255,255,255,0.08);

color:#ffffff;

font-size:16px;
font-weight:500;

outline:none;

transition:all .25s ease;

}

/* TEXTAREA */
textarea{
height:140px;
padding:18px 24px;
resize:none;
}

/* PLACEHOLDER */
input::placeholder,
textarea::placeholder{
color:#8fa2b8;
}

/* FOCUS */
input:focus,
select:focus,
textarea:focus{

border-color:#ff7a2f;

box-shadow:0 0 0 2px rgba(255,122,47,.15);

background:#253c5a;

}
/* FORCE LEFT PADDING + WHITE INPUT TEXT */
input,
select,
textarea {
  padding-left: 28px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
}

/* keep placeholder lighter */
input::placeholder,
textarea::placeholder {
  color: rgba(255,255,255,0.45) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.45) !important;
}

/* some browsers/autofill make text dark */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 0 0 1000px #223651 inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* textarea needs full padding */
textarea {
  padding: 18px 28px !important;
}
/* ===== PREMIUM BUTTON EFFECTS ===== */

.btn-primary,
.btn-secondary,
.cta-btn{
position:relative;
overflow:hidden;
display:inline-flex;
align-items:center;
justify-content:center;

color:#fff !important;
text-decoration:none;

transition:
transform .25s ease,
box-shadow .25s ease,
background .25s ease;
}

/* shimmer layer */

.btn-primary::before,
.btn-secondary::before,
.cta-btn::before{
content:"";
position:absolute;
top:0;
left:-120%;

width:65%;
height:100%;

background:linear-gradient(
110deg,
transparent,
rgba(255,255,255,.35),
transparent
);

transform:skewX(-20deg);

transition:left .7s ease;
}

/* shimmer animation */

.btn-primary:hover::before,
.btn-secondary:hover::before,
.cta-btn:hover::before{
left:140%;
}

/* hover lift */

.btn-primary:hover,
.btn-secondary:hover,
.cta-btn:hover{
transform:translateY(-3px);
box-shadow:0 16px 40px rgba(0,0,0,.35);
}

/* press effect */

.btn-primary:active,
.btn-secondary:active,
.cta-btn:active{
transform:translateY(1px) scale(.97);
}

/* focus accessibility */

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.cta-btn:focus-visible{
outline:2px solid #4fb4ff;
outline-offset:3px;
}

/* keep text white always */

.btn-primary:hover,
.btn-secondary:hover,
.cta-btn:hover{
color:#fff !important;
}
.liquid-text{

background:linear-gradient(
90deg,
#ff7a2f,
#ffae3d,
#ff7a2f
);

background-size:200% auto;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

animation:liquidMove 4s linear infinite;

}

@keyframes liquidMove{

0%{background-position:0%}
100%{background-position:200%}

}

.wave-text{
position:relative;
display:inline-block;
}

.wave-text span{
display:inline-block;
transition:transform .4s ease;
}

.wave-text:hover span{

animation:waveMove .7s ease forwards;

}

@keyframes waveMove{

0%{transform:translateY(0)}
50%{transform:translateY(-10px)}
100%{transform:translateY(0)}

}
a:hover{

background:linear-gradient(
90deg,
#ff7a2f,
#ffb36a,
#ff7a2f
);

background-size:200%;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

animation:gradientMove 2s linear infinite;

}

@keyframes gradientMove{

0%{background-position:0%}
100%{background-position:200%}

}
h1:hover,
h2:hover{

text-shadow:
0 0 10px rgba(255,122,47,.6),
0 0 30px rgba(255,122,47,.4);

}
/* SAFE MAGNIFIER TEXT */

.mag-text{
display:inline-block;
cursor:default;
}

.mag-text span{
display:inline-block;
transition: transform .18s ease, color .18s ease;
transform-origin:center bottom;
}

/* center letter */

.mag-text span.focus{
transform: translateY(-6px) scale(1.25);

background: linear-gradient(135deg,#ffb36a,#ff7a2f,#f05a1a);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* nearby letters */

.mag-text span.near{
transform: translateY(-3px) scale(1.12);
}