/* ============================================================================
   OFFICIAL RECOGNITION SECTION — recognition-section.css
   ----------------------------------------------------------------------------
   Fully isolated stylesheet. Every selector is scoped under .rs-section so
   nothing here can leak into, override, or conflict with the rest of the
   site's CSS. Colour/typography values below are matched to the existing
   site's design tokens (dark navy / blue / cyan, Space Grotesk + Inter),
   but are declared as new custom properties on .rs-section rather than the
   global :root, so no existing variable is touched or redefined.
   ============================================================================ */

.rs-section{
  /* ---- Scoped design tokens (matched to the site's existing palette) ---- */
  --rs-bg:#060B16;
  --rs-bg2:#0F172A;
  --rs-bg3:#162033;
  --rs-blue:#2563EB;
  --rs-blue2:#1d4ed8;
  --rs-cyan:#00d4ff;
  --rs-purple:#8B5CF6;
  --rs-amber:#f59e0b;
  --rs-grad:linear-gradient(135deg,#00d4ff 0%,#2563EB 45%,#8B5CF6 100%);
  --rs-grad2:linear-gradient(135deg,#2563EB,#8B5CF6);
  --rs-glass:rgba(255,255,255,0.05);
  --rs-glass2:rgba(255,255,255,0.09);
  --rs-border:rgba(37,99,235,0.22);
  --rs-border-hover:rgba(0,212,255,0.45);
  --rs-t1:#f1f5f9;
  --rs-t2:#94a3b8;
  --rs-t3:#64748b;
  --rs-ff:'Space Grotesk',sans-serif;
  --rs-fb:'Inter',sans-serif;
  --rs-fm:'JetBrains Mono',monospace;
  --rs-radius:16px;
  --rs-radius-lg:22px;

  position:relative;
  isolation:isolate;
  background:var(--rs-bg);
  color:var(--rs-t1);
  font-family:var(--rs-fb);
  padding:6rem 1.5rem 0;
  overflow:hidden;
  box-sizing:border-box;
}
.rs-section *,
.rs-section *::before,
.rs-section *::after{
  box-sizing:border-box;
}

/* ============================== BACKGROUND ============================== */

.rs-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,var(--rs-bg) 0%,var(--rs-bg2) 55%,var(--rs-bg) 100%);
}
.rs-bg-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(37,99,235,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(37,99,235,.08) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 40%,transparent 90%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 40%,transparent 90%);
}
.rs-bg-glow{
  position:absolute;
  width:38vw;
  height:38vw;
  max-width:560px;
  max-height:560px;
  border-radius:50%;
  filter:blur(90px);
  opacity:.28;
}
.rs-bg-glow--left{
  left:-8%;
  top:8%;
  background:radial-gradient(circle,var(--rs-blue),transparent 70%);
}
.rs-bg-glow--right{
  right:-10%;
  bottom:0;
  background:radial-gradient(circle,var(--rs-purple),transparent 70%);
}
.rs-bg-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.5;
}

/* ============================== LAYOUT SHELL ============================= */

.rs-inner{
  position:relative;
  z-index:1;
  max-width:1280px;
  margin:0 auto;
}

/* ============================== HEADER =================================== */

.rs-header{
  text-align:center;
  max-width:760px;
  margin:0 auto 3.5rem;
}
.rs-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--rs-fm);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--rs-cyan);
  background:rgba(37,99,235,.1);
  border:1px solid var(--rs-border);
  padding:8px 18px 8px 14px;
  border-radius:30px;
  margin-bottom:1.4rem;
  backdrop-filter:blur(6px);
}
.rs-badge-icon{
  width:16px;
  height:16px;
  color:var(--rs-amber);
  flex-shrink:0;
}
.rs-heading{
  font-family:var(--rs-ff);
  font-size:clamp(1.9rem,4vw,3rem);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.15;
  margin:0 0 1.1rem;
  color:var(--rs-t1);
}
.rs-heading-accent{
  background:var(--rs-grad);
  background-size:200%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:rsGradShift 5s ease infinite;
}
.rs-intro{
  font-size:16px;
  line-height:1.8;
  color:var(--rs-t2);
  margin:0;
}

/* ============================== CONTENT GRID ============================== */

.rs-content{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3.5rem;
  align-items:center;
  margin-bottom:3.5rem;
}

/* -------- Certificate column -------- */

.rs-cert-col{
  display:flex;
  justify-content:center;
}
.rs-cert-card{
  position:relative;
  width:100%;
  max-width:480px;
  cursor:pointer;
  border:none;
  background:none;
  padding:0;
  animation:rsFloat 6s ease-in-out infinite;
  transform-style:preserve-3d;
  perspective:900px;
  outline-offset:6px;
}
.rs-cert-card:focus-visible{
  outline:2px solid var(--rs-cyan);
  border-radius:var(--rs-radius-lg);
}
.rs-cert-glow{
  position:absolute;
  inset:-6%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(37,99,235,.35),transparent 70%);
  filter:blur(30px);
  z-index:-1;
  transition:opacity .4s ease;
  opacity:.7;
}
.rs-cert-card:hover .rs-cert-glow,
.rs-cert-card:focus-visible .rs-cert-glow{
  opacity:1;
}
.rs-cert-frame{
  position:relative;
  border-radius:var(--rs-radius-lg);
  padding:14px;
  background:linear-gradient(160deg,var(--rs-glass2),var(--rs-glass));
  border:1px solid var(--rs-border);
  box-shadow:
    0 25px 60px rgba(2,8,23,.55),
    0 0 0 1px rgba(255,255,255,.03) inset;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s ease,border-color .35s ease;
  overflow:hidden;
}
.rs-cert-card:hover .rs-cert-frame,
.rs-cert-card:focus-visible .rs-cert-frame{
  border-color:var(--rs-border-hover);
  box-shadow:
    0 32px 80px rgba(2,8,23,.65),
    0 0 45px rgba(0,212,255,.18),
    0 0 0 1px rgba(255,255,255,.05) inset;
}
.rs-cert-img{
  display:block;
  width:100%;
  height:auto;
  border-radius:calc(var(--rs-radius-lg) - 8px);
  pointer-events:none;
  user-select:none;
}
.rs-cert-reflection{
  position:absolute;
  inset:14px;
  border-radius:calc(var(--rs-radius-lg) - 8px);
  background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,transparent 30%);
  pointer-events:none;
  mix-blend-mode:overlay;
}
.rs-cert-hint{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin:1.1rem 0 0;
  font-size:13px;
  color:var(--rs-t2);
}
.rs-cert-hint svg{
  width:15px;
  height:15px;
  color:var(--rs-cyan);
}

/* -------- Details column -------- */

.rs-details-col{
  display:flex;
  flex-direction:column;
  gap:2rem;
}
.rs-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.1rem;
  list-style:none;
  margin:0;
  padding:0;
}
.rs-card{
  position:relative;
  background:var(--rs-glass);
  border:1px solid var(--rs-border);
  border-radius:var(--rs-radius);
  padding:1.5rem 1.4rem;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,border-color .35s ease,background .35s ease;
}
.rs-card:hover{
  transform:translateY(-6px);
  border-color:var(--rs-border-hover);
  background:var(--rs-glass2);
  box-shadow:0 18px 40px rgba(2,8,23,.4),0 0 30px rgba(0,212,255,.14);
}
.rs-card-icon{
  width:42px;
  height:42px;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--rs-grad2);
  color:#fff;
  margin-bottom:.9rem;
  box-shadow:0 6px 18px rgba(37,99,235,.35);
}
.rs-card-icon svg{
  width:21px;
  height:21px;
}
.rs-card-title{
  font-family:var(--rs-ff);
  font-size:15.5px;
  font-weight:700;
  color:var(--rs-t1);
  margin:0 0 .45rem;
  line-height:1.3;
}
.rs-card-desc{
  font-size:12.8px;
  line-height:1.6;
  color:var(--rs-t2);
  margin:0;
}

/* -------- CTA button -------- */

.rs-cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  align-self:flex-start;
  font-family:var(--rs-ff);
  font-size:14.5px;
  font-weight:600;
  letter-spacing:.02em;
  color:#fff;
  background:var(--rs-grad2);
  background-size:200%;
  border:none;
  border-radius:10px;
  padding:15px 30px;
  cursor:pointer;
  animation:rsGlowPulse 3s ease-in-out infinite;
  transition:transform .3s ease,box-shadow .3s ease;
}
.rs-cta-btn svg{
  width:19px;
  height:19px;
  flex-shrink:0;
}
.rs-cta-btn .rs-cta-arrow{
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.rs-cta-btn:hover,
.rs-cta-btn:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(37,99,235,.45);
}
.rs-cta-btn:hover .rs-cta-arrow,
.rs-cta-btn:focus-visible .rs-cta-arrow{
  transform:translateX(5px);
}
.rs-cta-btn:focus-visible{
  outline:2px solid var(--rs-cyan);
  outline-offset:3px;
}

/* ============================== TRUST RIBBON =============================== */

.rs-ribbon{
  position:relative;
  border-top:1px solid var(--rs-border);
  padding:1.4rem 0;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.rs-ribbon-track{
  display:flex;
  width:max-content;
  animation:rsMarquee 80s linear infinite;
}
.rs-ribbon-set{
  display:flex;
  align-items:center;
  gap:2.75rem;
  list-style:none;
  margin:0;
  padding:0 1.375rem;
  flex-shrink:0;
}
.rs-ribbon-set li{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--rs-fb);
  font-size:14px;
  font-weight:500;
  color:var(--rs-t2);
  white-space:nowrap;
}
.rs-ribbon-set svg{
  width:18px;
  height:18px;
  color:var(--rs-cyan);
  flex-shrink:0;
}

/* ============================== SCROLL REVEAL =============================== */

.rs-reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--rs-delay,0ms);
}
.rs-reveal.rs-visible{
  opacity:1;
  transform:translateY(0);
}

/* ============================== MODAL ============================== */

.rs-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
}
.rs-modal[hidden]{
  display:none;
}
.rs-modal-overlay{
  position:absolute;
  inset:0;
  background:rgba(3,7,18,.86);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:rsFadeIn .3s ease both;
}
.rs-modal-panel{
  position:relative;
  z-index:1;
  width:100%;
  max-width:960px;
  max-height:88vh;
  overflow:auto;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  background:linear-gradient(160deg,var(--rs-bg3),var(--rs-bg2));
  border:1px solid var(--rs-border);
  border-radius:var(--rs-radius-lg);
  box-shadow:0 40px 100px rgba(0,0,0,.6);
  animation:rsZoomIn .35s cubic-bezier(.16,1,.3,1) both;
}
.rs-modal-close{
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(15,23,42,.7);
  color:var(--rs-t1);
  cursor:pointer;
  transition:background .25s ease,transform .25s ease;
}
.rs-modal-close:hover,
.rs-modal-close:focus-visible{
  background:rgba(37,99,235,.35);
  transform:rotate(90deg);
}
.rs-modal-close svg{
  width:18px;
  height:18px;
}
.rs-modal-image-col{
  padding:2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(2,8,23,.35);
}
.rs-modal-img{
  width:100%;
  height:auto;
  border-radius:10px;
  box-shadow:0 20px 50px rgba(0,0,0,.4);
}
.rs-modal-info-col{
  padding:2.4rem 2rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1rem;
}
.rs-modal-title{
  font-family:var(--rs-ff);
  font-size:20px;
  font-weight:700;
  margin:0;
  color:var(--rs-t1);
}
.rs-modal-desc{
  font-size:14px;
  line-height:1.7;
  color:var(--rs-t2);
  margin:0;
}
.rs-modal-download{
  display:inline-flex;
  align-items:center;
  gap:9px;
  align-self:flex-start;
  font-family:var(--rs-ff);
  font-size:13.5px;
  font-weight:600;
  color:#fff;
  background:var(--rs-grad2);
  padding:11px 22px;
  border-radius:8px;
  text-decoration:none;
  transition:transform .3s ease,box-shadow .3s ease;
}
.rs-modal-download:hover,
.rs-modal-download:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(37,99,235,.4);
}
.rs-modal-download svg{
  width:16px;
  height:16px;
}
.rs-modal-note{
  font-size:12px;
  color:var(--rs-t3);
  margin:0;
}

/* ============================== KEYFRAMES ============================== */

@keyframes rsFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
@keyframes rsGradShift{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
@keyframes rsGlowPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(37,99,235,0),0 4px 20px rgba(37,99,235,.3); }
  50%{ box-shadow:0 0 0 6px rgba(37,99,235,.08),0 8px 36px rgba(37,99,235,.5); }
}
@keyframes rsMarquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@keyframes rsFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes rsZoomIn{
  from{ opacity:0; transform:scale(.92) translateY(10px); }
  to{ opacity:1; transform:scale(1) translateY(0); }
}

/* ============================== RESPONSIVE ============================== */

/* Large desktop / wide screens */
@media (min-width:1600px){
  .rs-inner{ max-width:1440px; }
}

/* Laptop */
@media (max-width:1180px){
  .rs-content{ gap:2.5rem; }
  .rs-card-desc{ font-size:12.3px; }
}

/* Tablet */
@media (max-width:960px){
  .rs-section{ padding:4.5rem 1.25rem 0; }
  .rs-content{
    grid-template-columns:1fr;
    gap:2.75rem;
  }
  .rs-cert-col{ order:1; }
  .rs-details-col{ order:2; }
  .rs-cta-btn{ align-self:stretch; justify-content:center; }
  .rs-modal-panel{ grid-template-columns:1fr; }
  .rs-modal-image-col{ padding:1.5rem 1.5rem 0; }
}

/* Mobile */
@media (max-width:640px){
  .rs-section{ padding:3.5rem 1rem 0; }
  .rs-header{ margin-bottom:2.5rem; }
  .rs-cards{
    grid-template-columns:1fr;
  }
  .rs-cert-frame{ padding:10px; }
  .rs-modal{ padding:0; }
  .rs-modal-panel{
    max-height:100vh;
    height:100%;
    border-radius:0;
  }
  .rs-ribbon-set{ gap:2rem; }
}

/* Small mobile */
@media (max-width:380px){
  .rs-heading{ font-size:1.7rem; }
  .rs-intro{ font-size:14.5px; }
  .rs-card{ padding:1.25rem 1.1rem; }
}

/* ============================== MOTION / PERFORMANCE SAFETY ============================== */

@media (prefers-reduced-motion:reduce){
  .rs-section *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .rs-ribbon-track{
    animation:none;
  }
}