/* ============================================================
   RESOURCES PAGE — resources.css
   ============================================================ */
:root{
  --mb:#0A0A56;--mb2:#15156D;--mb3:#312CA1;
  --vi:#6617FF;--vi2:#9B54FF;--vi-soft:#F4EEFF;
  --mg:#FFBB4E;--mg2:#FFC776;--mg-soft:#FFF6E5;
  --ink:#0B0B1E;--ink2:#2A2A3C;--muted:#6B6B7B;
  --line:#E5E5EC;--line-2:#EFEFF4;
  --bg:#FFFFFF;--bg-soft:#F7F7FA;--wh:#FFFFFF;
}

/* ══════════════════════════════════════════
   HERO — dark midnight blue
══════════════════════════════════════════ */
.res-hero{
  position:relative;
  background:linear-gradient(135deg,#06062e 0%,#0a0a56 55%,#0e0e6a 100%);
  padding:98px 56px 80px;
  overflow:hidden;
  min-height:420px;
  display:flex;align-items:center;
}
.res-hero-orb{
  position:absolute;border-radius:50%;pointer-events:none;
}
.res-hero-orb1{
  width:500px;height:500px;
  top:-120px;right:-80px;
  background:radial-gradient(circle,rgba(102,23,255,0.2) 0%,transparent 65%);
}
.res-hero-orb2{
  width:380px;height:380px;
  bottom:-100px;left:-60px;
  background:radial-gradient(circle,rgba(255,187,78,0.12) 0%,transparent 65%);
}
.res-hero-glyph{
  position:absolute;right:80px;top:50%;
  transform:translateY(-50%);
  width:360px;height:360px;opacity:0.6;pointer-events:none;
}
.res-hero-glyph svg{width:100%;height:100%}
.res-hero-inner{
  position:relative;z-index:2;
  max-width:1320px;width:100%;margin:0 auto;
}
.res-breadcrumb{
  display:flex;align-items:center;gap:8px;
  font-size:13px;color:rgba(255,255,255,0.4);
  margin-bottom:24px;letter-spacing:0.04em;
}
.res-breadcrumb a{color:rgba(255,255,255,0.4);transition:color 0.15s; text-decoration:none;}
.res-breadcrumb a:hover{color:rgba(255,255,255,0.8)}
.res-breadcrumb span{color:rgba(255,255,255,0.25)}
.res-breadcrumb .cur{color:rgba(255,255,255,0.7)}
.res-eyebrow{
  display:flex;align-items:center;gap:10px;
  font-size:13px;font-weight:600;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--mg);margin-bottom:20px;
}
.ey-bar{width:28px;height:2px;background:var(--mg);flex-shrink:0}
.res-hero-h{
  font-family:'Archivo',sans-serif;
  font-size:clamp(38px,5vw,61px);
  font-weight:800;color:var(--wh);
  line-height:1.06;letter-spacing:-0.02em;
  margin-bottom:20px;max-width:760px;
}
.res-hero-h em{font-style:normal;color:var(--mg)}
.res-hero-sub{
  font-size:1.05rem;color:rgba(255,255,255,0.62);
  line-height:1.72;max-width:620px;font-weight:300;
}

/* ══════════════════════════════════════════
   CATEGORY BAR
══════════════════════════════════════════ */
.res-cat-bar{
  background:var(--wh);border-bottom:1px solid var(--line);
  padding:16px 56px;position:sticky;top:68px;z-index:40;
}
.res-cat-inner{
  max-width:1320px;margin:0 auto;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.res-cat-label{
  font-size:12px;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--muted);font-weight:600;white-space:nowrap;
}
.res-cat-pills{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.res-cat-pill{
  font-size:14px;color:var(--ink2);
  background:transparent;border:1px solid var(--line);
  padding:8px 16px;border-radius:30px;cursor:pointer;
  transition:all 0.2s;font-weight:500;font-family:'Roboto',sans-serif;
  white-space:nowrap;
}
.res-cat-pill:hover{border-color:var(--mb3);color:var(--mb)}
.res-cat-pill.active{background:var(--mb);color:var(--wh);border-color:var(--mb)}
.res-cat-search{position:relative}
.res-cat-search input{
  font-family:'Roboto',sans-serif;font-size:14px;
  background:var(--bg-soft);border:1px solid var(--line);
  border-radius:30px;padding:10px 16px 10px 36px;
  width:220px;outline:none;color:var(--ink);transition:all 0.2s;
}
.res-cat-search input:focus{border-color:var(--mb3);background:var(--wh)}
.res-cat-search svg{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;stroke:var(--muted);fill:none;
}

/* ══════════════════════════════════════════
   SECTION WRAPPERS
══════════════════════════════════════════ */
.res-section{padding:50px 0 0;overflow:hidden}
.res-section-light{background:var(--wh)}
.res-section-dark{
  background:linear-gradient(160deg,#06062e 0%,#0a0a56 100%);
  padding-bottom:0;
}
.sec-head {
    margin-bottom: 28px;
}

.sec-h {
    font-family: 'Archivo', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--mb);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left:70px;
}

.sec-h::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
    max-width: 60%;
}
/* .res-section-inner{
  max-width:1320px;margin:0 auto;
  padding:0 56px 32px;
}
.res-section-header{margin-bottom:32px}
.res-sec-eyebrow{
  font-size:0.65rem;font-weight:700;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--vi);margin-bottom:10px;
} */
/* .res-ey-gold{color:var(--mg)} */
/* .res-sec-h{
  font-family:'Archivo',sans-serif;
  font-size:clamp(1.6rem,2.5vw,2.2rem);
  font-weight:800;color:var(--mb);
  line-height:1.1;letter-spacing:-0.02em;
  margin-bottom:10px;
}
.res-sec-h span{color:var(--vi)} 
.res-sec-h-light{color:var(--wh)}
.res-sec-h-light span{color:var(--mg)}
.res-sec-sub{
  font-size:0.9rem;color:var(--muted);
  line-height:1.72;max-width:580px;
}
.res-sec-sub-light{color:rgba(255,255,255,0.55)}*/

/* ══════════════════════════════════════════
   CAROUSEL
══════════════════════════════════════════ */
.res-carousel-wrap{
  position:relative;
  padding-bottom:16px;
  /* Fade edges */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 4%,#000 96%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 4%,#000 96%,transparent 100%);
}
.res-track{
  display:flex;
  gap:20px;
  width:max-content;
  padding:8px 56px 8px;
}

/* LTR — scrolls left */
.res-carousel-ltr .res-track{
  animation:resScrollL 60s linear infinite;
  will-change:transform;
}
@keyframes resScrollL{
  0%  {transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* RTL — scrolls right */
.res-carousel-rtl .res-track{
  animation:resScrollR 70s linear infinite;
  will-change:transform;
}
@keyframes resScrollR{
  0%  {transform:translateX(-50%)}
  100%{transform:translateX(0)}
}

/* Pause on hover */
.res-carousel-wrap:hover .res-track{
  animation-play-state:paused;
}

/* ══════════════════════════════════════════
   CARDS
══════════════════════════════════════════ */
.res-card{
  flex-shrink:0;
  width:400px;
  background:var(--wh);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  transition:all 0.25s;
  display:flex;flex-direction:column;
  text-decoration:none;
  color:inherit;
}
.res-card:hover{
  border-color:var(--mb3);
  transform:translateY(-4px);
  box-shadow:0 18px 48px -12px rgba(10,10,86,0.16);
}

/* Card image */
.res-card-img{
  aspect-ratio:25/10;
  position:relative;overflow:hidden;
  background:var(--mb);
}
/* Gradient variants */
.res-card-img.v1{background:linear-gradient(135deg,#0A0A56 0%,#312CA1 100%)}
.res-card-img.v2{background:linear-gradient(135deg,#15156D 0%,#6617FF 100%)}
.res-card-img.v3{background:linear-gradient(135deg,#0A0A56 0%,#15156D 50%,#312CA1 100%)}
.res-card-img.v4{background:linear-gradient(135deg,#312CA1 0%,#6617FF 100%)}
.res-card-img.v5{background:linear-gradient(135deg,#0A0A56 0%,#9B54FF 100%)}
.res-card-img.v6{background:linear-gradient(135deg,#15156D 0%,#312CA1 50%,#6617FF 100%)}
.res-card-img.v7{background:linear-gradient(135deg,#0A0A56 0%,#312CA1 50%,#9B54FF 100%)}

/* Grid pattern overlay */
.res-card-img::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px);
  background-size:30px 30px;
}
/* Gold glow overlay */
.res-card-img::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 70% 30%,rgba(255,187,78,0.15) 0%,transparent 50%);
}

.res-card-glyph{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:64px;height:64px;opacity:0.9;z-index:2;
}
.res-wp-icon{
  position:absolute;top:16px;right:16px;
  font-size:28px;z-index:3;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* Category badge on image */
.res-card-cat{
  position:absolute;top:14px;left:14px;
  background:rgba(255,255,255,0.14);
  backdrop-filter:blur(6px);
  color:var(--wh);font-size:11px;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;
  padding:5px 11px;border-radius:30px;
  border:1px solid rgba(255,255,255,0.22);z-index:3;
}
.res-cat-gold{
  background:rgba(255,187,78,0.2);
  border-color:rgba(255,187,78,0.4);
  color:var(--mg);
}

/* Card body */
.res-card-body{
  padding:20px 20px 18px;
  display:flex;flex-direction:column;flex:1;
}
.res-card-meta{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--muted);
  margin-bottom:10px;
  text-transform:uppercase;letter-spacing:0.1em;
  font-weight:500;flex-wrap:wrap;
}
.res-card-meta .dot{width:3px;height:3px;background:var(--muted);border-radius:50%}

/* Type badges */
.res-type-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:30px;
  font-size:9px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
}
.res-badge-article{background:var(--vi-soft);color:var(--vi)}
.res-badge-article .tb-dot{width:4px;height:4px;border-radius:50%;background:var(--vi)}
.res-badge-cs{background:var(--mg-soft);color:#7A5200}
.res-badge-cs .tb-dot{width:4px;height:4px;border-radius:50%;background:var(--mg)}
.res-badge-wp{background:#EEF0F7;color:var(--mb)}
.res-badge-wp .tb-dot{width:4px;height:4px;border-radius:50%;background:var(--mb)}

.res-card h3{
  font-family:'Archivo',sans-serif;
  font-size:15px;font-weight:700;color:var(--mb);
  line-height:1.35;letter-spacing:-0.005em;
  margin-bottom:8px;flex:1;
}
.res-card p{
  font-size:14px;color:var(--ink2);
  line-height:1.65;margin-bottom:14px;
}

/* Key result row (case study) */
.res-card-result{
  display:flex;align-items:center;gap:6px;
  font-size:11px;color:var(--mb);font-weight:600;
  background:var(--mg-soft);border-radius:6px;
  padding:7px 10px;margin-bottom:12px;
}
.res-result-check{color:var(--mg);font-weight:700}

/* Card footer */
.res-card-foot{
  display:flex;align-items:center;
  justify-content:space-between;
  padding-top:12px;border-top:1px solid var(--line-2);
  margin-top:auto;
}
.res-card-svc{
  font-size:10px;color:var(--muted);
  text-transform:uppercase;letter-spacing:0.08em;
  font-weight:500;line-height:1.3;max-width:55%;
}
.res-card-link{
  font-size:11px;color:var(--vi);font-weight:600;
  display:flex;align-items:center;gap:4px;white-space:nowrap;
}
.res-card-link svg{width:11px;height:11px;stroke:var(--vi);transition:transform 0.2s}
.res-card:hover .res-card-link svg{transform:translateX(3px)}
.res-link-download{color:var(--mb);font-size:12px}

/* ══════════════════════════════════════════
   CASE STUDY CARD — visual panel design
══════════════════════════════════════════ */
.cs-visual-panel{
  aspect-ratio:8/3;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  justify-content:space-between;
  padding:20px 22px;color:#fff;
}
/* Grid texture */
.cs-visual-panel::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px);
  background-size:28px 28px;
}
/* Gold radial glow */
.cs-visual-panel::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 75% 25%,rgba(255,187,78,0.15) 0%,transparent 55%);
}
.cs-visual-panel > *{position:relative;z-index:2}

/* Gradient variants */
.cs-visual-panel.v1{background:linear-gradient(135deg,#0A0A56 0%,#312CA1 100%)}
.cs-visual-panel.v2{background:linear-gradient(135deg,#15156D 0%,#6617FF 100%)}
.cs-visual-panel.v3{background:linear-gradient(135deg,#0A0A56 0%,#15156D 50%,#312CA1 100%)}
.cs-visual-panel.v4{background:linear-gradient(135deg,#312CA1 0%,#6617FF 100%)}
.cs-visual-panel.v5{background:linear-gradient(135deg,#0A0A56 0%,#9B54FF 100%)}
.cs-visual-panel.v6{background:linear-gradient(135deg,#15156D 0%,#312CA1 50%,#6617FF 100%)}
.cs-visual-panel.v7{background:linear-gradient(135deg,#0A0A56 0%,#312CA1 50%,#9B54FF 100%)}

/* Top row: industry tag + geography */
.cs-vp-top{
  display:flex;justify-content:space-between;
  align-items:flex-start;gap:8px;
}
.cs-vp-ind{
  background:rgba(255,255,255,0.14);
  backdrop-filter:blur(6px);
  font-size:9px;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;
  padding:5px 11px;border-radius:30px;
  border:1px solid rgba(255,255,255,0.22);color:#fff;
  white-space:nowrap;
}
.cs-vp-geo{
  font-size:10px;color:rgba(255,255,255,0.75);
  text-transform:uppercase;letter-spacing:0.1em;
  font-weight:500;display:flex;align-items:center;gap:4px;
  white-space:nowrap;
}
.cs-vp-geo svg{
  width:11px;height:11px;
  stroke:var(--mg);fill:none;stroke-width:2;flex-shrink:0;
}

/* Stat number + label */
.cs-vp-stat{display:flex;flex-direction:column;gap:4px}
.cs-vp-num{
  font-family:'Archivo',sans-serif;
  font-size:34px;font-weight:700;color:#fff;
  letter-spacing:-0.02em;line-height:1;
}
.cs-vp-num em{font-style:normal;color:var(--mg);font-weight:700}
.cs-vp-lbl{
  font-size:11px;color:rgba(255,255,255,0.78);
  letter-spacing:0.06em;line-height:1.4;max-width:90%;
}

/* Service label in footer */
.cs-vp-svc{
  font-size:10px;color:var(--muted);
  text-transform:uppercase;letter-spacing:0.08em;
  font-weight:500;line-height:1.3;flex:1;min-width:0;
}
.cs-vp-svc strong{
  color:var(--mb);font-weight:600;
  display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
}

/* Empty state */
.res-empty{
  padding:48px 56px;font-size:0.9rem;color:var(--muted);
}
.res-empty a{color:var(--vi);font-weight:600}
.res-empty-dark{color:rgba(255,255,255,0.5)}
.res-empty-dark a{color:var(--mg)}

/* ══════════════════════════════════════════
   SUBSCRIBE
══════════════════════════════════════════ */
.res-subscribe{
  background:var(--mb2);padding:80px 56px;
  position:relative;overflow:hidden;
}
.res-subscribe::before{
  content:'';position:absolute;top:-100px;right:-100px;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(102,23,255,0.25) 0%,transparent 60%);
}
.res-subscribe::after{
  content:'';position:absolute;bottom:-150px;left:-50px;
  width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,187,78,0.12) 0%,transparent 60%);
}
.res-subscribe-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
  background-size:60px 60px;pointer-events:none;
}
.res-subscribe-inner{
  max-width:1320px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;
  gap:80px;align-items:center;position:relative;z-index:2;
}
.res-sub-eyebrow{
  display:flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--mg);font-weight:600;margin-bottom:18px;
}
.res-sub-left h2{
  font-family:'Archivo',sans-serif;font-size:clamp(1.6rem,3vw,2.8rem);
  font-weight:700;color:var(--wh);line-height:1.1;
  letter-spacing:-0.02em;margin-bottom:20px;
}
.res-sub-left h2 em{font-style:normal;color:var(--mg)}
.res-sub-left p{font-size:1rem;color:rgba(255,255,255,0.7);line-height:1.7}
.res-sub-form{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;padding:36px;
}
.res-sub-form-label{
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--mg);font-weight:600;margin-bottom:14px;
}
.res-sub-form-row{display:flex;gap:10px;margin-bottom:16px}
.res-sub-form input{
  flex:1;font-family:'Roboto',sans-serif;font-size:14px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:30px;padding:15px 22px;color:var(--wh);
  outline:none;transition:all 0.2s;
}
.res-sub-form input::placeholder{color:rgba(255,255,255,0.4)}
.res-sub-form input:focus{border-color:var(--mg);background:rgba(255,255,255,0.12)}
.res-sub-form button{
  background:var(--mg);color:var(--mb);
  font-family:'Roboto',sans-serif;font-size:13px;font-weight:600;
  padding:15px 28px;border:none;border-radius:30px;
  cursor:pointer;white-space:nowrap;transition:all 0.2s;
}
.res-sub-form button:hover{background:var(--mg2)}
.res-sub-form-note{
  font-size:11px;color:rgba(255,255,255,0.45);
  line-height:1.6;display:flex;align-items:flex-start;gap:8px;
}
.res-sub-form-note svg{
  width:13px;height:13px;stroke:rgba(255,255,255,0.45);
  flex-shrink:0;margin-top:2px;fill:none;
}

/* ══════════════════════════════════════════
   SECTION FILTER HIDE
══════════════════════════════════════════ */
.res-section.is-hidden{display:none}
.res-card.is-hidden{display:none}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media(max-width:1024px){
  .res-hero{padding:64px 32px 56px}
  /* sticky bar accounts for the reduced nav height on tablets */
  .res-cat-bar{padding:14px 32px;top:70px}
  .res-subscribe{padding:64px 32px}
  .res-subscribe-inner{grid-template-columns:1fr;gap:40px}
}
@media(max-width:768px){
  .res-cat-bar{top:60px}
}
@media(max-width:680px){
  .res-hero{padding:48px 20px 40px;min-height:auto}
  .res-hero-glyph{display:none}
  /* un-stick the filter bar so it doesn't overlap small-screen content */
  .res-cat-bar{padding:12px 16px;position:static;top:auto}
  .res-cat-inner{flex-wrap:wrap;gap:10px}
  .res-cat-pills{gap:4px}
  .res-cat-search input{width:130px}
  .res-track{padding:8px 16px}
  .res-card{width:260px}
  .res-subscribe{padding:48px 20px}
  .res-sub-form-row{flex-direction:column}
  .res-sub-form{padding:24px}
  .res-sub-left h2{font-size:clamp(1.4rem,5vw,2rem)}
}
@media(max-width:400px){
  .res-card{width:220px}
  .res-cat-pill{font-size:11px;padding:6px 12px}
}