/* =====================================================================
   BASE — reset, typography, layout utilities
   ===================================================================== */

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--body);
  background:var(--bg);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px;}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  color:var(--ink);
  margin:0 0 .6em;
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.02em;
}
h3,h4,h5,h6{font-weight:700;}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px;}
@media (max-width: 575px){ .container{padding:0 18px;} }

section{position:relative;}
.section-pad{padding:72px 0;}
.section-pad-sm{padding:48px 0;}
@media (max-width: 991px){
  .section-pad{padding:56px 0;}
  .section-pad-sm{padding:38px 0;}
}
@media (max-width: 575px){
  .section-pad{padding:44px 0;}
  .section-pad-sm{padding:32px 0;}
}

.bg-soft{background:var(--bg-soft);}
.bg-dark{background:var(--gradient-dark);color:rgba(255,255,255,.72);}
.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark h4{color:#fff;}

/* ---- Eyebrow / signature "Signal" mark ----------------------------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--blue-600);
  background:var(--bg-tint);
  border:1px solid rgba(55,87,201,.14);
  padding:7px 16px 7px 10px;
  border-radius:var(--radius-pill);
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--gradient-signal);
  flex-shrink:0;
}
.bg-dark .eyebrow{color:var(--gold-400);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);}

.text-gradient,.hl{
  background:var(--gradient-signal);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.section-head{max-width:640px;margin-bottom:38px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head p{font-size:17px;margin:0;}
.section-head h2{font-size:clamp(28px,3.6vw,42px);}

/* ---- Buttons -------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  letter-spacing:.01em;
  padding:15px 30px;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-3px);}
.btn i{font-size:13px;transition:transform .3s var(--ease);}
.btn:hover i.fa-arrow-right{transform:translateX(4px);}

.btn-primary{background:var(--gradient-brand);color:#fff;box-shadow:0 10px 24px rgba(55,87,201,.28);}
.btn-primary:hover{box-shadow:0 16px 34px rgba(55,87,201,.4);color:#fff;}

.btn-gold{background:var(--gradient-signal);color:var(--blue-900);box-shadow:var(--shadow-gold);}
.btn-gold:hover{box-shadow:0 18px 38px rgba(217,164,0,.42);color:var(--blue-900);}

.btn-outline{background:#fff;border-color:var(--line);color:var(--ink);box-shadow:var(--shadow-sm);}
.btn-outline:hover{border-color:var(--blue-500);color:var(--blue-600);box-shadow:var(--shadow-md);}
.bg-dark .btn-outline{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28);color:#fff;}
.bg-dark .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff;}

.btn-light{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm);}
.btn-light:hover{color:var(--blue-600);box-shadow:var(--shadow-md);}
.btn-sm{padding:11px 22px;font-size:13px;}
.btn-block{width:100%;}

/* ---- Badges / chips --------------------------------------------------*/
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px;border-radius:var(--radius-pill);
  font-size:13px;font-weight:600;font-family:var(--font-display);
  background:var(--bg-tint);color:var(--blue-700);
}

/* ---- Cards shared ----------------------------------------------------*/
.card-flat{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.card-flat:hover{transform:translateY(-7px);box-shadow:0 22px 44px rgba(55,87,201,.16);border-color:rgba(55,87,201,.22);}

/* ---- Divider dot row (process/step rhythm) ---------------------------*/
.rule{height:1px;background:var(--line);border:0;margin:0;}
.bg-dark .rule{background:var(--line-dark);}

/* ---- Misc ------------------------------------------------------------*/
.overflow-hidden{overflow:hidden;}
.rounded-media{border-radius:var(--radius-lg);overflow:hidden;}
.fw-num{font-family:var(--font-display);font-weight:700;}

/* ---- Abstract decorative backgrounds (modern mesh-blob accents) ------*/
.section-decor{position:relative;isolation:isolate;}
.section-decor::before{
  content:"";position:absolute;top:-14%;left:-8%;width:420px;height:420px;
  background:radial-gradient(circle,rgba(55,87,201,.14),transparent 68%);
  pointer-events:none;z-index:0;
}
.section-decor::after{
  content:"";position:absolute;bottom:-18%;right:-10%;width:460px;height:460px;
  background:radial-gradient(circle,rgba(217,164,0,.16),transparent 68%);
  pointer-events:none;z-index:0;
}
.section-decor > .container{position:relative;z-index:1;}
.dot-grid{
  background-image:radial-gradient(rgba(24,28,51,.08) 1.6px, transparent 1.6px);
  background-size:24px 24px;
}

/* ---- Reveal-on-scroll (progressive enhancement, JS adds .in-view) ----*/
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.in-view{opacity:1;transform:none;}