/* =============== Validate (What's Included) =============== */

.gradient-text{
  background: linear-gradient(90deg, var(--c-blue-900) 0%, var(--c-purple-900) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  display: inline-block;
}

/* Section */
.validate-section{
  background:#fff;
  padding:80px 80px 40px 80px;

  --icon-wrap: 88px; /* circle */
  --icon-size: 44px; /* icon inside */

  container-type: inline-size;
}

/* Shared width */
.validate-header,.validate-grid{
  width:100%;
  max-width:1536px;
  margin:0 auto;
  padding:0;
}

/* Header */
.validate-header{ text-align:center; margin-bottom:34px; }
.validate-badge{ display:inline-flex; align-items:center; justify-content:center; padding:5px 20px; border-radius:56px; border:1px solid #a942ef; background:transparent; }
.validate-badge__label{ color:#a942ef; font:700 18px/1 Roboto,system-ui,Arial,sans-serif; letter-spacing:.005em; }

.validate-title{
  margin:20px 0 10px; color:#060402;
  font:700 clamp(32px,4vw,56px)/120% Roboto,system-ui,Arial,sans-serif;
  letter-spacing:-.015em;
}
.validate-subtitle{
  color:rgba(14,10,2,.6);
  font:400 18px/150% Roboto,system-ui,Arial,sans-serif;
  max-width:960px; margin:0 auto;
}

/* ===== Grid of cards ===== */
.validate-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:20px;
}
@container (max-width: 1120px){
  .validate-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 680px){
  .validate-grid{ grid-template-columns: 1fr; }
}
@supports not (container-type: inline-size){
  @media (max-width: 1120px){ .validate-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 680px){  .validate-grid{ grid-template-columns: 1fr; } }
}

/* Card */
.validate-card{
  background:#ffffff; border:1px solid rgba(14,10,2,0.08); border-radius:16px;
  padding:20px;
  transition:transform .18s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow:0 0 0 rgba(0,0,0,0);

  display:grid;
  grid-template-columns: var(--icon-wrap) 1fr;
  grid-template-rows:auto auto;
  column-gap:20px; row-gap:6px;
  align-items:center;
  min-width:0;
}
.validate-card:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 60px -24px rgba(2,6,23,.18);
  background:#f5f5f5; border-color:rgba(14,10,2,0.12);
}

/* Icon bubble */
.validate-icon{
  grid-column:1; grid-row:1 / span 2;
  width:var(--icon-wrap); height:var(--icon-wrap); border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
  background:#a942ef; color:#fff; margin:0;
  box-shadow:0 10px 24px rgba(169,66,239,.22);
}
.validate-icon__img{ width:var(--icon-size); height:var(--icon-size); object-fit:contain; display:block; }

/* Title + underline */
.validate-card-title{
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.25;
}
.validate-card-title__text{
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  -webkit-hyphens: auto;
  hyphens: auto;
}
@container (max-width: 520px){
  .validate-card-title__text{ white-space: normal; }
}
@supports not (container-type: inline-size){
  @media (max-width: 520px){
    .validate-card-title__text{ white-space: normal; }
  }
}
.validate-card-title__text::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1px;
  width: 0;
  background-color: currentColor;
  transition: width .3s ease-in-out;
  pointer-events: none;
}
.validate-card:hover .validate-card-title__text::after{ width: 100%; }

.validate-card-desc{
  grid-column:2; grid-row:2; margin:0; color:#334155; font-size:14px; line-height:1.5;
  min-width:0;
}

/* Responsive padding tweaks */
@media (max-width:1024px){ .validate-section{ padding:64px 48px 36px; } }
@media (max-width:640px){  .validate-section{ --icon-wrap:64px; --icon-size:28px; padding:56px 20px 32px; } }

/* ===== CTA (gradient base; reversed gradient on hover; JS controls scale) ===== */
.validate-btn-wrapper { margin-top: 40px; text-align: center; }

.validate-cta {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 40px; border-radius: 8px;

  /* base gradient: blue -> purple */
  background: linear-gradient(90deg, #2665e2 0%, #c26de6 100%);
  color: #ffffff; text-decoration: none;
  font-weight: 700; font-size: 14px; line-height: 1;

  transition: box-shadow .2s ease;
  backface-visibility: hidden;
  transform: translateZ(0);
  overflow: hidden;
  will-change: transform, box-shadow;
  transform-origin: center center;
}
.validate-cta::after{
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  /* reversed on hover: purple -> blue */
  background: linear-gradient(90deg, #c26de6 0%, #2665e2 100%);
  opacity: 0; transition: opacity .2s ease; pointer-events: none; z-index: 0;
}
.validate-cta__label{ position: relative; z-index: 1; white-space: nowrap; }
.validate-cta:hover::after{ opacity: 1; }
.validate-cta, .validate-cta:hover{ opacity: 1 !important; }
/* =============== Validate (What's Included) =============== */

.gradient-text{
  background: linear-gradient(90deg, var(--c-blue-900) 0%, var(--c-purple-900) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  display: inline-block;
}

/* Section */
.validate-section{
  background:#fff;
  padding:40px 80px;

  --icon-wrap: 88px; /* circle */
  --icon-size: 44px; /* icon inside */

  container-type: inline-size;
}

/* Shared width */
.validate-header,.validate-grid{
  width:100%;
  max-width:1536px;
  margin:0 auto;
  padding:0;
}

/* Header */
.validate-header{ text-align:center; margin-bottom:34px; }
.validate-badge{ display:inline-flex; align-items:center; justify-content:center; padding:5px 20px; border-radius:56px; border:1px solid #a942ef; background:transparent; }
.validate-badge__label{ color:#a942ef; font:700 18px/1 Roboto,system-ui,Arial,sans-serif; letter-spacing:.005em; }

.validate-title{
  margin:20px 0 10px; color:#060402;
  font:700 clamp(32px,4vw,56px)/120% Roboto,system-ui,Arial,sans-serif;
  letter-spacing:-.015em;
}
.validate-subtitle{
  color:rgba(14,10,2,.6);
  font:400 18px/150% Roboto,system-ui,Arial,sans-serif;
  max-width:960px; margin:0 auto;
}

/* Title accent (blue→purple) + flipped variant */
.validate-accent{
  background: linear-gradient(90deg, #2665e2 0%, #c26de6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.validate-accent--flip{
  background: linear-gradient(90deg, #c26de6 0%, #2665e2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===== Grid of cards ===== */
.validate-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:20px;
}
@container (max-width: 1120px){
  .validate-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 680px){
  .validate-grid{ grid-template-columns: 1fr; }
}
@supports not (container-type: inline-size){
  @media (max-width: 1120px){ .validate-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 680px){  .validate-grid{ grid-template-columns: 1fr; } }
}

/* Card */
.validate-card{
  background:#ffffff; border:1px solid rgba(14,10,2,0.08); border-radius:16px;
  padding:20px;
  transition:transform .18s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow:0 0 0 rgba(0,0,0,0);

  display:grid;
  grid-template-columns: var(--icon-wrap) 1fr;
  grid-template-rows:auto auto;
  column-gap:20px; row-gap:6px;
  align-items:center;
  min-width:0;
}
.validate-card:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 60px -24px rgba(2,6,23,.18);
  background:#f5f5f5; border-color:rgba(14,10,2,0.12);
}

/* Icon bubble */
.validate-icon{
  grid-column:1; grid-row:1 / span 2;
  width:var(--icon-wrap); height:var(--icon-wrap); border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
  background:#a942ef; color:#fff; margin:0;
  box-shadow:0 10px 24px rgba(169,66,239,.22);
}
.validate-icon__img{ width:var(--icon-size); height:var(--icon-size); object-fit:contain; display:block; }

/* Title + underline */
.validate-card-title{
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.25;
}
.validate-card-title__text{
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  -webkit-hyphens: auto;
  hyphens: auto;
}
@container (max-width: 520px){
  .validate-card-title__text{ white-space: normal; }
}
@supports not (container-type: inline-size){
  @media (max-width: 520px){
    .validate-card-title__text{ white-space: normal; }
  }
}
.validate-card-title__text::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1px;
  width: 0;
  background-color: currentColor;
  transition: width .3s ease-in-out;
  pointer-events: none;
}
.validate-card:hover .validate-card-title__text::after{ width: 100%; }

.validate-card-desc{
  grid-column:2; grid-row:2; margin:0; color:#334155; font-size:14px; line-height:1.5;
  min-width:0;
}

/* Responsive padding tweaks */
@media (max-width:1024px){ .validate-section{ padding:64px 24px 36px; } }
@media (max-width:768px){  .validate-section{ --icon-wrap:64px; --icon-size:28px; padding:56px 20px 32px; } }

/* Smaller badge on responsive */
@media (max-width: 768px){
  .validate-badge{ padding: 4px 14px; border-radius: 40px; }
  .validate-badge span{ font-size: 14px; }
}

/* CTA — gradient base + reversed hover overlay to match Journey */
.validate-btn-wrapper { margin-top: 40px; text-align: center; }

.validate-cta{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 40px;
  border-radius: 8px;
  background-image: linear-gradient(90deg, #2665e2 0%, #c26de6 100%);
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,0.35);
  transition: box-shadow .2s ease;
  backface-visibility: hidden;
  transform: translateZ(0);
  overflow: hidden;
  will-change: transform, box-shadow;
  transform-origin: center center;
}
.validate-cta::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background-image: linear-gradient(90deg, #c26de6 0%, #2665e2 100%);
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
  z-index:0;
}
.validate-cta:hover::after{ opacity:1; }
.validate-cta__label{ position:relative; z-index:1; white-space:nowrap; }
.validate-cta, .validate-cta:hover{ opacity: 1 !important; }