/* Hero background */
.b-step {
  border:solid 1px #B3BDC9;
  border-radius:16px;
}
.ft-ar {
  color:#2F80E2;
  margin-right:6px;
}

.hero-dark-bg {
  position: relative;
  background: #1A467C;
  overflow: hidden;
}

.hero-bg-waves {
  position: absolute;
  top: 0;
  right: 0;
  width: 62%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero-bg-waves svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* keep your existing content above the new background layer */
.hero-with-chat.hero-dark-bg .wrap {
  position: relative;
  z-index: 1;
}

/* New Home classes */

.tp-mrm{
  position:relative;
  background:#fff;
  border:1px solid var(--border, #e3e8ef);
  border-radius:16px;
  padding-left:calc(1.5em + 4px);
  box-shadow:0 1px 2px rgba(13,27,61,.05);
  transition:transform .25s ease, box-shadow .25s ease;
}
.tp-mrm::before{
  content:"";
  position:absolute;
  top:0; left:1px; bottom:0;
  width:5px;
  border-radius:30px 0 0 30px;
  background:linear-gradient(180deg,#0d1b3d 0%,#1A467C 45%,#2F80E2 100%);
}
.tp-mrm::after{
  content:"";
  position:absolute; inset:0;
  border-radius:16px;
  box-shadow:inset 0 0 0 1px rgba(13,27,61,.06);
  pointer-events:none;
}
.tp-mrm:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 38px rgba(13,27,61,.12);
}

.tp-control{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  color:#fff;
  background:linear-gradient(155deg,#0a1631 0%,#12285a 38%,#1f4b96 72%,#3272c9 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  box-shadow:0 26px 50px rgba(8,17,40,.30);
  transition:transform .25s ease, box-shadow .25s ease;
}
.tp-control:hover{
  transform:translateY(-5px);
  box-shadow:0 32px 60px rgba(8,17,40,.36);
}
/* diagonal capsule + circle vector, matches brand background reference */
.tp-control::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image: url("../assets/bg-vector.svg");
  background-repeat:no-repeat;
  background-position:100% 180%;

  pointer-events:none;
}
.tp-control > *{ position:relative; z-index:1; }

.tp-control h3{ color:#fff; }
.tp-control .p-func{ color:#a9c4ec; }
.tp-control .desc{ color:#cddbf3; }
.tp-control .p-feats li{ color:#e1eafa; }
.tp-control .p-feats li::before{ background:#7fb3f2; }


/* ============================================================
   2) WHY NOW — highlight cards + restyled bullet list
   .wn-card = each of the 3 grid-3 cards
   .wn-list = the ul.simple-list below them
   ============================================================ */

.wn-card{
  position:relative;
  background:#fff;
  border:1px solid var(--border, #e3e8ef);
  border-top:4px solid #2c66bb;
  border-radius:14px;
  padding:30px 26px 26px;
  box-shadow:0 1px 2px rgba(13,27,61,.05);
  transition:transform .25s ease, box-shadow .25s ease, border-top-color .25s ease;
}
.wn-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 34px rgba(13,27,61,.12);
  border-top-color:#e8a13c;
}
.wn-card h4{
  font-size:20px;
  line-height:1.35;
  margin-bottom:10px;
}
.wn-card p{
  font-size:16px;
  line-height:1.62;
}

.wn-list{
  list-style:none;
  margin:40px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.wn-list li{
  position:relative;
  font-size:16px;
  font-weight:500;
  line-height:1.55;
  color:var(--navy,#0d1b3d);
  padding:15px 22px 15px 58px;
  background:#EAF2FC80;
  border:1px solid #BFD8F6;
  border-radius:12px;
}
.wn-list li::before{
  content:"→";
  position:absolute;
  left:20px; top:50%;
  transform:translateY(-50%);
  width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; color:#fff;
  background:#22509f;
  border-radius:50%;
}




/* ============================================================
   3) CORE CAPABILITIES — highlight tiles + accent markers
   .cc-tile = each of the 4 cap-tile anchors
   ============================================================ */

.cc-tile{
  position:relative;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--border, #e3e8ef);
  border-radius:16px;
  padding:32px 24px 26px;
  box-shadow:0 1px 2px rgba(13,27,61,.05);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  min-height: 270px;
}
.cc-tile::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:linear-gradient(90deg,#17306a,#22509f,#5fa1e2);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
}
.cc-tile:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 36px rgba(13,27,61,.12);
  border-color:#BFD8F6;
}
.cc-tile:hover::before{ transform:scaleX(1); }
.cc-tile .cap-ico{
  width:54px; height:54px;
  display:flex; align-items:center; justify-content:center;
  border-radius:13px;
  background:#EAF2FC;
  margin-bottom:18px;
}
.cc-tile .cap-ico svg{
  width:26px; height:26px;
  stroke:#22509f;
}
.cc-tile h5{
  font-size:19.5px;
  line-height:1.3;
  margin-bottom:8px;
}
.cc-tile p{
  font-size:16px;
  line-height:1.58;
  color:var(--muted,#5b6b85);
}

.module-card .mod-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:14px;
  font-weight:600;
  color:#22509f;
}

.module-card .mod-link::before{
  content:"→";
  width:18px; height:18px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:11px; color:#fff;
  background:#22509f;
  border-radius:50%;
  flex-shrink:0;
}

.cc-tile .cap-link{
  display:inline-flex;
  position: absolute;
  top:86%;
  align-items:center;
  gap:7px;
  font-size:14px;
  font-weight:600;
  color:#2F80E2;
  padding-bottom:40px;
}
.cc-tile .cap-link::before{
  content:"→";
  width:18px; height:18px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:11px; color:#fff;
  background:#2F80E2;
  border-radius:50%;
  flex-shrink:0;
}


/* ============================================================
   4) LATEST THINKING — highlighted cards, 14px body copy
   .tk-card = each .thinking-card
   ============================================================ */

.tk-card{
  position:relative;
  overflow:hidden;
  display:block;
  background:#fff;
  border:1px solid var(--border, #e3e8ef);
  border-radius:14px;
  padding:26px 24px;
  box-shadow:0 1px 2px rgba(13,27,61,.05);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.tk-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:linear-gradient(90deg,#17306a,#22509f,#5fa1e2);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
}
.tk-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 30px rgba(13,27,61,.12);
  border-color:#BFD8F6;
  background:#F7FAFE;
}
.tk-card:hover::before{ transform:scaleX(1); }
.tk-card .meta{
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  color:#22509f;
}
.tk-card p{
  font-size:16px;
  line-height:1.65;
}
.tk-card .read-more{
  font-size:14px;
  font-weight:700;
}

@media (max-width:640px){
  .tp-control::before{ background-size:130% auto; opacity:.8; }
  .wn-list li{ font-size:17px; padding:16px 18px 16px 50px; }
  .hero-bg-waves {display:none;}
}





/* ===== Mobile nav ===== */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid rgba(255,255,255,0.22);
  border-radius:10px;
  background:rgba(255,255,255,0.06);
  cursor:pointer;
  flex-shrink:0;
}
.nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  background:#fff;
  border-radius:1px;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2){
  opacity:0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}




@media (max-width: 980px){
  .nav-row{
    flex-wrap:wrap;
    gap:12px;
    position:relative;
  }
  .logo{
    flex:1;
    min-width:0;
    gap:8px;
  }
  .logo img{
    width:96px;
    height:auto;
  }
  .logo .by{
    display:none;
  }
  .btn-request{
    margin-left:auto;
    padding:8px 14px;
    font-size:13px;
  }
  .nav-toggle{
    display:flex;
  }
 
  /* Slide-down mobile menu */
  nav.primary{
    display:none;
    flex:0 0 100%;
    order:10;
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
    gap:0;
    max-height:min(78vh, 640px);
    overflow-y:auto;
    padding:8px 0 12px;
    border-top:1px solid rgba(255,255,255,0.12);
    margin-top:4px;
  }
  header.site.nav-open nav.primary{
    display:flex;
  }
  header.site.nav-open{
    position:sticky;
    top:0;
  }

  nav.primary > .nav-item{
    position:static;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  nav.primary a.top-link{
    display:flex;
    width:100%;
    justify-content:space-between;
    padding:14px 4px;
    font-size:15px;
    color:#fff;
  }
  .nav-item .caret{
    transition:transform .2s ease;
  }
  .nav-item.open .caret{
    transform:rotate(180deg);
  }

  /* Accordion panels instead of hover dropdowns */
  .nav-item .dropdown,
  .nav-item .mega{
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    display:none;
    background:rgba(255,255,255,0.04);
    border:none;
    border-radius:10px;
    box-shadow:none;
    min-width:0;
    width:100%;
    padding:6px 8px 10px;
    margin:0 0 10px;
  }
  .nav-item.open .dropdown,
  .nav-item.open .mega{
    display:block;
  }

  /* Force single-column mega menus on mobile (Products / Use Cases) */
  nav.primary .mega-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:4px !important;
  }
  nav.primary .mega-col{
    min-width:0;
    width:100%;
  }
  nav.primary .mega-col h6{
    color:rgba(255,255,255,0.45);
    margin:10px 4px 6px;
    padding:0 8px;
  }
  nav.primary .mega-col:first-child h6{
    margin-top:4px;
  }
  .nav-item .dropdown a,
  .nav-item .mega a{
    display:flex;
    flex-direction:column;
    gap:2px;
    color:#fff;
    padding:10px 10px;
    border-radius:8px;
    margin:0;
    min-width:0;
  }
  .nav-item .dropdown a:hover,
  .nav-item .mega a:hover{
    background:rgba(255,255,255,0.08);
  }
  .nav-item .dropdown a .d-title,
  .nav-item .mega a .d-title{
    color:#fff;
    font-size:13.5px;
    line-height:1.3;
    white-space:normal;
    word-break:break-word;
  }
  .nav-item .dropdown a .d-sub,
  .nav-item .mega a .d-sub{
    color:rgba(255,255,255,0.5);
    font-size:11.5px;
    line-height:1.35;
    white-space:normal;
  }
}

/* ===== Capabilities grid responsive fix ===== */
@media (max-width: 900px){
  .cap-grid-4-fix{
    grid-template-columns: repeat(2, 1fr) !important;
  }
  

}
@media (max-width: 560px){
  .cap-grid-4-fix{
    grid-template-columns: 1fr !important;
  }
  .nav-item:hover .mega{ transform:translateX(0) translateY(0); }
 
}


/* ============================================================
   responsive.css
   Mobile / tablet responsiveness fixes for
   aureon-ai-control-plane.html
   Link this AFTER styles.css and custom.css
   ============================================================ */

/* ---------- 1. GOVERNANCE ENVELOPE DIAGRAM ----------
   The 3-card grid (ACTION / ACTION TRACE / CONTEXT METADATA)
   uses an inline style="grid-template-columns:1fr 1fr 1fr".
   This attribute-selector override collapses it to 1 column
   on mobile without needing to touch the inline style. */
@media (max-width: 900px){
  .product-mock .mock-body > div[style*="grid-template-columns:1fr 1fr 1fr"]{
    grid-template-columns: 1fr !important;
  }
  .mock-body{ padding: 18px !important; }
}

/* ---------- 2. LIVE CONTROL PANEL (5-column agent rows) ----------
   Lets the panel scroll horizontally on mobile instead of
   squeezing 5 columns and cutting off text. Requires wrapping
   .control-panel-mock in <div class="cp-scroll"> in the HTML. */
@media (max-width: 760px){
  .cp-scroll{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -20px;
    padding: 0 20px;
  }
  .cp-scroll .control-panel-mock{
    min-width: 640px;
  }
   
}

/* ---------- 3. COMPARISON TABLE (vs-table) ----------
   Tables don't reflow — wrap in a horizontally scrollable
   container instead of letting columns get crushed. Requires
   wrapping <table class="vs-table"> in <div class="table-scroll">
   in the HTML. */
.table-scroll{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 760px){
  .table-scroll{
    margin: 0 -20px;
    padding: 0 20px;
  }
  .vs-table{
    min-width: 620px;
  }
}

/* ---------- 4. GENERAL GRID RESPONSIVENESS ---------- */
@media (max-width: 992px){
  .grid-4{ grid-template-columns: repeat(2, 1fr) !important; gap: 16px; }
  .grid-3{ grid-template-columns: repeat(2, 1fr) !important; gap: 16px; }
  .cap-grid{ grid-template-columns: repeat(2, 1fr) !important; gap: 16px; }
  .split-panel{ grid-template-columns: 1fr !important; gap: 20px; }
  .footer-grid{ grid-template-columns: repeat(2, 1fr) !important; gap: 32px; }
}
@media (max-width: 600px){
  .grid-4{ grid-template-columns: 1fr !important; }
  .grid-3{ grid-template-columns: 1fr !important; }
  .cap-grid{ grid-template-columns: 1fr !important; }
  .footer-grid{ grid-template-columns: 1fr !important; gap: 28px; }
}

/* ---------- 5. LAYER DIAGRAM ("Where SAFR sits") ----------
   Already stacks (flex-direction:column); just tighten
   padding on small screens. */
@media (max-width: 600px){
  section .wrap > div[style*="max-width:820px"] div[style*="padding:20px 24px"],
  section .wrap > div[style*="max-width:820px"] div[style*="padding:24px 24px"]{
    padding: 16px 18px !important;
  }
  .res-grid {
    grid-template-columns:1fr !important;
  }
}

/* ---------- 6. HERO / TYPOGRAPHY / SPACING ---------- */
@media (max-width: 600px){
  .hero-sub{ padding: 56px 0 40px !important; }
  .hero-sub h1{ font-size: 28px !important; line-height: 1.25 !important; }
  .hero-sub .lead{ font-size: 15px !important; }
  .cta-row{ align-items: stretch; gap: 10px; }
  .cta-row .btn{ text-align: center; width: auto; margin-bottom:10px; }
  .h2{ font-size: 24px !important; line-height: 1.3 !important; }
  .body-l{ font-size: 14.5px !important; }
}

/* ---------- 7. MARQUEE CHIPS (regulator logos row) ---------- */
@media (max-width: 760px){
  .marquee{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start !important;
    margin: 0 -20px;
    padding: 4px 20px;
  }
  .marquee .chip{ flex-shrink: 0; }
}

/* ---------- 8. PILOT CTA / OPTIONS ROW ---------- */
@media (max-width: 760px){
  .pilot-cta{ flex-direction: column; align-items: stretch !important; gap: 24px; }
  .pilot-cta .options{ flex-direction: column; }
  .steps-row-4 {
    grid-template-columns: 1fr 1fr !important; }
}


.bg-surface1 {
  background:#EAF2FC; border-top: solid 1px #BFD8F6;
}

.steps-row-4 {
  display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 32px 0;
}

.cta-row .btn-primary {
  margin-right:12px;
}


 /* --- Contact page: Book a demo / Get in touch redesign --- */
  .contact-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:0;
    border:1px solid var(--border, #e5e7eb);
    border-radius:20px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 1px 2px rgba(16,24,40,.04), 0 12px 32px -16px rgba(16,24,40,.12);
  }
  .contact-form-pane{ padding:48px 48px 44px; }
  .contact-info-pane{
    padding:48px 40px 44px;
    background:linear-gradient(180deg, #EAF2FC 0%, #EAF2FC 100%);
    border-left:1px solid var(--border, #e5e7eb);
  }
  .contact-form-pane h2{ margin-bottom:14px; }
  .cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .cf-field label{ display:block; margin-bottom:6px; }
  .cf-field input, .cf-field select, .cf-field textarea{
    width:100%; padding:12px 14px; border:1px solid var(--border-strong, #d7dbe0);
    border-radius:10px; font-size:14px; font-family:inherit; background:#fff;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus{
    outline:none; border-color:var(--blue, #2554ea);
    box-shadow:0 0 0 3px rgba(37,84,234,.12);
  }
  .cf-submit{
    display:inline-flex; align-items:center; gap:8px;
    align-self:flex-start; margin-top:6px;
  }
  .cf-submit svg{ width:16px; height:16px; }
 
  .info-heading{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
  .info-sub{ color:var(--muted, #6b7280); font-size:16px; margin-bottom:28px; }
 
  .contact-methods{ display:flex; flex-direction:column; gap:10px; margin-bottom:32px; }
  .contact-method{
    display:flex; align-items:center; gap:14px;
    padding:14px 16px; border:1px solid var(--border, #e5e7eb);
    border-radius:14px; background:#fff;
    transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  }
  .contact-method:hover{
    border-color:var(--blue, #2554ea);
    transform:translateY(-1px);
    box-shadow:0 6px 16px -8px rgba(37,84,234,.25);
  }
  .cm-icon{
    flex:none; width:38px; height:38px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(37,84,234,.08); color:var(--blue, #2554ea);
  }
  .cm-icon svg{ width:18px; height:18px; }
  .cm-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .cm-label{ font-size:12px; letter-spacing:.06em; color:var(--muted, #6b7280); font-weight:600; text-transform:uppercase; }
  .cm-value{ color:var(--blue, #2554ea); font-weight:600; font-size:14.5px; text-decoration:none; word-break:break-all; }
 
  .offices-block{
    border-top:1px solid var(--border, #e5e7eb); padding-top:24px;
  }
  .offices-title{
    display:flex; align-items:center; gap:8px;
    font-size:12px; letter-spacing:.06em; color:var(--muted, #6b7280);
    font-weight:600; text-transform:uppercase; margin-bottom:14px;
  }
  .offices-title svg{ width:14px; height:14px; }
  .office-list{ display:flex; flex-direction:column; gap:2px; }
  .office-row{
    display:flex; align-items:center; gap:10px;
    font-size:14px; color:var(--slate, #374151);
    padding:8px 4px; border-radius:8px;
  }
  .office-row:hover{ background:rgba(37,84,234,.05); }
  .office-row svg{ flex:none; width:15px; height:15px; color:var(--blue, #2554ea); }
  .office-city{ font-weight:600; color:#1f2937; }
  .office-country{ color:var(--muted, #6b7280); }
 
  @media (max-width: 860px){
    .contact-grid{ grid-template-columns:1fr; border-radius:16px; }
    .contact-info-pane{ border-left:none; border-top:1px solid var(--border, #e5e7eb); }
    .contact-form-pane, .contact-info-pane{ padding:32px 24px; }
    .cf-row{ grid-template-columns:1fr; }
  }
 
  /* --- Footer social icons --- */
  .footer-bottom .social{ display:flex; align-items:center; gap:10px; }
  .footer-bottom .social a{
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:9px;
    border:1px solid var(--border, #e5e7eb);
    color:var(--slate, #374151);
    transition:background .15s ease, color .15s ease, border-color .15s ease;
  }
  .footer-bottom .social a:hover{
    background:var(--blue, #2554ea); border-color:var(--blue, #2554ea); color:#fff;
  }
  .footer-bottom .social a svg{ width:17px; height:17px; }

/* ===== Back to top ===== */
.back-to-top{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:60;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:12px;
  background:#0A1628;
  color:#fff;
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:0 8px 24px rgba(10,22,40,0.28);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .2s ease, visibility .2s ease, transform .2s ease, background .15s ease;
}
.back-to-top.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}
.back-to-top:hover{
  background:var(--blue, #2554ea);
  border-color:var(--blue, #2554ea);
}

/* ===== Demo request modal ===== */
#aureon-demo-modal{
  display:none !important;
  position:fixed;
  inset:0;
  z-index:1000;
  align-items:center;
  justify-content:center;
  padding:24px;
}
#aureon-demo-modal.is-open{
  display:flex !important;
}
.demo-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(6,23,45,0.55);
}
.demo-modal-panel{
  position:relative;
  z-index:1;
  width:100%;
  max-width:500px;
  background:#fff;
  border-radius:12px;
  padding:28px 30px;
  box-shadow:0 16px 48px rgba(11,41,81,0.28);
}
.demo-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
  gap:12px;
}
.demo-modal-head h2{
  margin:0;
  font-size:22px;
  font-weight:700;
  color:#0B2951;
  line-height:1.25;
  padding-right:8px;
}
.demo-modal-close{
  background:none;
  border:none;
  font-size:28px;
  line-height:1;
  color:#5c708a;
  cursor:pointer;
  padding:0 4px;
}
.demo-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:14px;
  font-size:14px;
  font-weight:600;
  color:#0B2951;
}
.demo-field input,
.demo-field textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid rgba(11,41,81,0.12);
  border-radius:8px;
  font-size:14px;
  font-weight:400;
  font-family:inherit;
  color:#0B2951;
  box-sizing:border-box;
  resize:vertical;
}
.demo-field input:focus,
.demo-field textarea:focus{
  outline:none;
  border-color:#2f80e2;
  box-shadow:0 0 0 3px rgba(47,128,226,0.15);
}
.demo-modal-error{
  margin:0 0 12px;
  font-size:13px;
  font-weight:500;
  color:#c4322b;
}
.demo-modal-success{
  padding:8px 0 4px;
}
.demo-modal-success__text{
  margin:0 0 20px;
  font-size:15px;
  line-height:1.55;
  color:#0B2951;
  font-weight:500;
}
.demo-modal-hint{
  margin:0 0 16px;
  font-size:14px;
  line-height:1.5;
  font-weight:400;
  color:#5c708a;
}
.demo-modal-hint strong{
  color:#0B2951;
  font-weight:600;
}
.demo-modal-actions{
  display:flex;
  gap:12px;
  margin-top:6px;
}
.demo-modal-actions--center{
  justify-content:center;
}
.demo-modal-submit,
.demo-modal-cancel{
  flex:1;
  border-radius:8px;
  padding:12px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}
.demo-modal-close-btn{
  flex:0 0 auto;
  min-width:96px;
  width:auto;
  border-radius:8px;
  padding:10px 20px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  background:linear-gradient(135deg,#2563EB,#3B82F6);
  color:#fff;
  border:none;
  box-shadow:0 0 20px rgba(59,130,246,.28);
}
.demo-modal-submit{
  background:linear-gradient(135deg,#2563EB,#3B82F6);
  color:#fff;
  border:none;
  box-shadow:0 0 20px rgba(59,130,246,.28);
}
.demo-modal-submit:disabled{
  opacity:0.7;
  cursor:not-allowed;
}
.demo-modal-otp-actions{
  margin-top:12px;
  text-align:center;
}
.demo-modal-otp-actions button{
  background:none;
  border:none;
  color:#2563EB;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  padding:4px 8px;
}
.demo-modal-otp-actions button:disabled{
  opacity:0.6;
  cursor:not-allowed;
}
.demo-modal-cancel{
  background:#f3f4f6;
  color:#1f2937;
  border:1px solid #e5e7eb;
}

/* ===== CMS collection cards (resources pages) ===== */
.cms-cards-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  margin-top:8px;
}
.cms-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-3);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.cms-card:hover{
  border-color:rgba(47,128,226,0.35);
  box-shadow:var(--e-2);
  transform:translateY(-2px);
}
.cms-card__media{
  position:relative;
  aspect-ratio:16/9;
  background:#eef3f9;
  overflow:hidden;
}
.cms-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.cms-card__media--empty{
  background:linear-gradient(135deg,#eef5ff 0%,#f3f4f6 100%);
}
.cms-card__body{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:20px 20px 22px;
  flex:1;
}
.cms-card__badge{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--blue);
}
.cms-card__title{
  margin:0;
  font-size:17px;
  font-weight:700;
  line-height:1.35;
  color:var(--navy);
}
.cms-card__excerpt{
  margin:0;
  font-size:13.5px;
  line-height:1.55;
  color:var(--muted);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.cms-card__date{
  margin-top:auto;
  padding-top:6px;
  font-size:12.5px;
  color:var(--muted-2, #8f9daf);
}
.cms-cards-loading,
.cms-cards-empty{
  margin:12px 0 0;
  font-size:15px;
  color:var(--muted);
}
@media (max-width:1200px){
  .cms-cards-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:980px){
  .cms-cards-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .cms-cards-grid{ grid-template-columns:1fr; }
}

.wrap.wrap-cms{
  max-width:1280px;
 
}


.pa .stepper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  gap: 4px;
}

.pa .stepper::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 40px;
  right: 40px;
  height: 2px;
  background: linear-gradient(90deg, #2f80e2 0%, #6D28D9 100%);
  opacity: 0.35;
  z-index: 0;
}

.pa .step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  flex: 1;
  min-width: 0;
  padding: 0 4px;
  transition: transform 0.15s ease;
}

.pa .step:hover {
  transform: translateY(-2px);
}

.pa .step-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #2f80e2;
  color: #0b2951;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.pa .step:hover .step-circle {
  background: #2f80e2;
  color: #fff;
  box-shadow: 0 4px 12px rgba(47,128,226,0.35);
}

.pa .step-label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 3px;
}

.pa .step-sub {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
  padding-bottom: 15px;
}

@media (max-width: 720px) {
  .pa .stepper {
    flex-wrap: wrap;
    row-gap: 20px;
  }
  .pa .stepper::before { display: none; }
  .pa .step { flex: 0 0 25%; }
}

@media (max-width: 480px) {
  .pa .step { flex: 0 0 33.333%; }
  .pa  .step-sub { display: none; }
}