/* ==========================================================
   AI-CRIMS FINAL VISUAL POLISH
   Landing + Public Repository
   Decorative/layout only. Backend functionality untouched.
========================================================== */

/* Fixed header must not create a phantom vertical gap. */
.header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:5000 !important;
}

/* LANDING: hero begins at the top of the page behind the fixed header. */
.hero{
  height:calc(100svh - 0px) !important;
  min-height:640px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}
.hero > .container,
.hero-grid{
  height:100% !important;
  min-height:0 !important;
}
.hero-grid{
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.hero-content{
  padding-top:92px !important;
  align-self:center !important;
}
.hero-visual,
.visual-stage,
.students-illustration{
  height:100% !important;
  min-height:0 !important;
}
.hero-illustration-img{
  height:100% !important;
  width:100% !important;
  object-fit:cover !important;
  object-position:58% center !important;
}

/* A gentle living photo atmosphere without the heavy black side. */
.hero::before{
  background:
    radial-gradient(600px 500px at 76% 45%,rgba(77,132,255,.18),transparent 72%),
    linear-gradient(90deg,rgba(4,8,25,.62),rgba(4,8,25,.22) 32%,transparent 65%) !important;
}
.hero::after{
  height:22% !important;
  background:linear-gradient(to top,rgba(3,8,30,.65),rgba(3,8,30,.12) 55%,transparent) !important;
}

/* Public repository pages: content starts immediately below fixed header. */
.repository-search{
  padding-top:125px !important;
  padding-bottom:72px !important;
  min-height:0 !important;
}
.repository-search[style*="padding-top"]{
  padding-top:125px !important;
}
.repository-search .section-heading{
  margin-bottom:38px !important;
}

/* Repository cards feel like part of the same living product. */
.repository-search .search-card{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(500px 220px at 85% 0%,rgba(79,115,255,.13),transparent 70%),
    linear-gradient(145deg,rgba(20,34,78,.72),rgba(8,15,39,.78)) !important;
  border-color:rgba(99,143,255,.24) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.30),0 0 45px rgba(65,102,255,.07) !important;
}
.repository-search .search-card::after{
  content:"";
  position:absolute;
  width:260px;height:260px;
  right:-150px;bottom:-170px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,246,.22),transparent 70%);
  filter:blur(8px);
  animation:repoAura 7s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes repoAura{
  from{transform:translate(0,0) scale(.9);opacity:.45}
  to{transform:translate(-35px,-25px) scale(1.15);opacity:.9}
}
.repository-search + .features{
  padding-top:65px !important;
}
.repository-search + .features .feature-card{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(240px 150px at 85% 10%,rgba(83,126,255,.14),transparent 70%),
    linear-gradient(145deg,rgba(17,29,67,.72),rgba(8,14,37,.82)) !important;
  border-color:rgba(98,139,255,.20) !important;
  box-shadow:0 18px 45px rgba(0,0,0,.22) !important;
  transition:transform .45s cubic-bezier(.16,.8,.24,1),border-color .3s,box-shadow .3s !important;
}
.repository-search + .features .feature-card:hover{
  transform:translateY(-10px) rotate(-.25deg) !important;
  border-color:rgba(34,211,238,.42) !important;
  box-shadow:0 25px 60px rgba(0,0,0,.30),0 0 35px rgba(69,124,255,.14) !important;
}
.repository-search + .features .feature-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(110deg,transparent 15%,rgba(34,211,238,.10) 45%,rgba(139,92,246,.18) 52%,transparent 75%);
  background-size:220% 100%;
  opacity:0;
  pointer-events:none;
}
.repository-search + .features .feature-card:hover::before{
  opacity:1;
  animation:repoSweep 1.2s ease forwards;
}
@keyframes repoSweep{
  from{background-position:110% 0}
  to{background-position:-20% 0}
}

/* Repository detail should not start with a giant empty region. */
body:has(.repository-search) .repository-search[style*="padding-top: 140px"]{
  padding-top:125px !important;
}


/* ==========================================================
   AI-CRIMS LOCALIZED LIGHT FEATURES + PROJECT OVERVIEW
   All selectors below are scoped to the requested target area.
   No global selectors are modified.
========================================================== */

.ai-crims-features-section {
  --ai-white: #ffffff;
  --ai-surface: #f8fbff;
  --ai-surface-2: #f3f7ff;
  --ai-ink: #0b1b3a;
  --ai-muted: #61708f;
  --ai-blue: #2563eb;
  --ai-violet: #7c3aed;
  --ai-cyan: #0891b2;
  --ai-teal: #0f9f9a;
  --ai-coral: #f97362;
  --ai-line: rgba(37, 99, 235, .13);
  --ai-shadow: 0 18px 48px rgba(24, 55, 112, .10);
  --ai-shadow-hover: 0 28px 62px rgba(24, 55, 112, .16);
}

/* ---------- Features section canvas + hero-to-light transition ---------- */
.ai-crims-features-section#features {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 116px 0 92px;
  background:
    radial-gradient(circle at 12% 22%, rgba(125, 211, 252, .20), transparent 27%),
    radial-gradient(circle at 88% 32%, rgba(196, 181, 253, .20), transparent 29%),
    linear-gradient(180deg, #f6f9ff 0%, #ffffff 28%, #f8fbff 100%);
}

.ai-crims-features-section#features::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -6%;
  right: -6%;
  top: -72px;
  height: 145px;
  border-radius: 0 0 50% 50%;
  background: linear-gradient(180deg, #0b1738 0%, #132c61 30%, rgba(246,249,255,.96) 82%, #f6f9ff 100%);
  pointer-events: none;
}

.ai-crims-features-section#features::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 420px;
  height: 420px;
  right: -180px;
  bottom: -190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(96, 165, 250, .13), transparent 68%);
  pointer-events: none;
}

.ai-crims-features-section#features > .container {
  position: relative;
  z-index: 2;
}

.ai-crims-features-section#features .core-features-bg {
  opacity: .42;
}

.ai-crims-features-section#features .core-features-gridlines {
  background-image:
    linear-gradient(rgba(37,99,235,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.045) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 75% 68% at 50% 42%, #000 20%, transparent 82%);
  mask-image: radial-gradient(ellipse 75% 68% at 50% 42%, #000 20%, transparent 82%);
}

.ai-crims-features-section#features .core-features-network {
  opacity: .13;
  filter: none;
}

/* ---------- Header ---------- */
.ai-crims-features-section#features .section-heading {
  position: relative;
  z-index: 3;
  max-width: 820px;
  margin: 0 auto 48px;
}

.ai-crims-features-section#features .section-heading .section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  margin-bottom: 18px;
  border: 1px solid rgba(37,99,235,.12);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(239,246,255,.96), rgba(245,243,255,.94));
  color: #3159a8;
  box-shadow: 0 8px 22px rgba(37,99,235,.07);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.ai-crims-features-section#features .section-heading h2 {
  color: var(--ai-ink);
  font-size: clamp(2.25rem, 4vw, 3.55rem);
  line-height: 1.08;
  letter-spacing: -.045em;
  margin-bottom: 18px;
}

.ai-crims-features-section#features .section-heading h2 span {
  background: linear-gradient(100deg, #2563eb 0%, #4f72e9 45%, #7c3aed 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.ai-crims-features-section#features .section-heading p {
  color: #63728e !important;
  max-width: 710px !important;
  font-size: 1rem;
  line-height: 1.8 !important;
}

/* ---------- Feature grid ---------- */
.ai-crims-features-section#features .core-features-grid {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  max-width: 1160px;
  margin: 0 auto;
}

.ai-crims-features-section#features .core-feature-card {
  --ai-accent: #2563eb;
  --ai-accent-soft: rgba(37,99,235,.12);
  position: relative;
  flex: 1 1 320px;
  max-width: 360px;
  min-height: 280px;
  padding: 30px 28px 28px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(37,99,235,.10) !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(247,250,255,.96)) !important;
  box-shadow: var(--ai-shadow) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: left;
  transform: translateY(0);
  transition: transform .35s cubic-bezier(.16,.8,.24,1), box-shadow .35s ease, border-color .35s ease;
}

.ai-crims-features-section#features .core-feature-card:nth-child(2) {
  --ai-accent: #7c3aed;
  --ai-accent-soft: rgba(124,58,237,.12);
}

.ai-crims-features-section#features .core-feature-card:nth-child(3) {
  --ai-accent: #0891b2;
  --ai-accent-soft: rgba(8,145,178,.12);
}

.ai-crims-features-section#features .core-feature-card:nth-child(4) {
  --ai-accent: #f97362;
  --ai-accent-soft: rgba(249,115,98,.12);
}

.ai-crims-features-section#features .core-feature-card:nth-child(5) {
  --ai-accent: #4f46e5;
  --ai-accent-soft: rgba(79,70,229,.12);
}

.ai-crims-features-section#features .core-feature-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -28px -78px auto;
  width: 190px;
  height: 190px;
  border-radius: 48% 52% 60% 40%;
  background: radial-gradient(circle at 35% 35%, var(--ai-accent-soft), transparent 68%);
  opacity: .95;
  transform: rotate(-14deg);
  transition: transform .45s ease, opacity .35s ease;
  pointer-events: none;
}

.ai-crims-features-section#features .core-feature-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 90px;
  height: 90px;
  right: 16px;
  top: 16px;
  border: 1px solid var(--ai-accent-soft);
  border-radius: 28px;
  transform: rotate(18deg);
  opacity: .7;
  pointer-events: none;
}

.ai-crims-features-section#features .core-feature-card:hover {
  transform: translateY(-7px) !important;
  border-color: color-mix(in srgb, var(--ai-accent) 28%, white) !important;
  box-shadow: var(--ai-shadow-hover) !important;
}

.ai-crims-features-section#features .core-feature-card:hover::before {
  transform: rotate(-4deg) scale(1.08);
  opacity: 1;
}

.ai-crims-features-section#features .core-feature-icon {
  position: relative;
  width: 58px;
  height: 58px;
  margin-bottom: 25px;
  border: 1px solid var(--ai-accent-soft) !important;
  border-radius: 17px;
  background: linear-gradient(145deg, #ffffff, var(--ai-accent-soft)) !important;
  color: var(--ai-accent);
  box-shadow: 0 10px 24px rgba(25,55,115,.08);
  transition: transform .35s ease, box-shadow .35s ease;
}

.ai-crims-features-section#features .core-feature-icon svg {
  width: 27px;
  height: 27px;
  stroke: var(--ai-accent) !important;
  stroke-width: 1.8;
}

.ai-crims-features-section#features .core-feature-card:hover .core-feature-icon {
  transform: translateY(-2px) rotate(-3deg) !important;
  box-shadow: 0 13px 28px rgba(25,55,115,.12);
}

.ai-crims-features-section#features .core-feature-card h3 {
  position: relative;
  z-index: 2;
  margin-bottom: 11px;
  color: var(--ai-ink) !important;
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.ai-crims-features-section#features .core-feature-card p {
  position: relative;
  z-index: 2;
  max-width: 270px;
  margin-bottom: 25px;
  color: var(--ai-muted) !important;
  font-size: .92rem;
  line-height: 1.7;
}

.ai-crims-features-section#features .core-feature-arrow {
  position: relative;
  z-index: 3;
  width: 40px;
  height: 40px;
  border: 1px solid var(--ai-accent-soft) !important;
  background: linear-gradient(135deg, #ffffff, var(--ai-accent-soft)) !important;
  color: var(--ai-accent) !important;
  box-shadow: 0 8px 18px rgba(25,55,115,.07);
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}

.ai-crims-features-section#features .core-feature-arrow:hover {
  transform: translateX(4px);
  background: var(--ai-accent) !important;
  border-color: var(--ai-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 11px 24px var(--ai-accent-soft);
}

/* ---------- Project Overview / statistics ---------- */
.ai-crims-features-section.ai-crims-project-overview {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 8px 0 82px !important;
  background: linear-gradient(180deg, #f8fbff 0%, #f2f7ff 100%) !important;
}

.ai-crims-features-section.ai-crims-project-overview::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -1px;
  width: 700px;
  height: 180px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(96,165,250,.12), transparent 70%);
  pointer-events: none;
}

.ai-crims-features-section.ai-crims-project-overview > .container {
  position: relative;
  z-index: 2;
}

.ai-crims-features-section.ai-crims-project-overview .stat-bar {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 8px !important;
  overflow: hidden;
  border: 1px solid rgba(37,99,235,.11) !important;
  border-radius: 26px !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 20px 55px rgba(34,67,125,.11) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.ai-crims-features-section.ai-crims-project-overview .stat-bar-item {
  position: relative;
  min-width: 0;
  padding: 27px 24px !important;
  border-radius: 19px;
  transition: background .3s ease, transform .3s ease;
}

.ai-crims-features-section.ai-crims-project-overview .stat-bar-item:not(:last-child)::after {
  background: rgba(37,99,235,.10) !important;
}

.ai-crims-features-section.ai-crims-project-overview .stat-bar-item:hover {
  background: linear-gradient(135deg, rgba(239,246,255,.75), rgba(245,243,255,.58));
  transform: translateY(-2px);
}

.ai-crims-features-section.ai-crims-project-overview .stat-bar-icon {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border: 1px solid rgba(37,99,235,.10);
  background: linear-gradient(145deg, #eff6ff, #f5f3ff);
  box-shadow: 0 9px 20px rgba(37,99,235,.08);
  font-size: 1.18rem;
}

.ai-crims-features-section.ai-crims-project-overview .stat-bar-copy {
  gap: 2px;
}

.ai-crims-features-section.ai-crims-project-overview .stat-bar-number {
  color: #10234a !important;
  font-size: 1.38rem;
  letter-spacing: -.025em;
}

.ai-crims-features-section.ai-crims-project-overview .stat-bar-label {
  color: #425577 !important;
  font-size: .82rem;
}

.ai-crims-features-section.ai-crims-project-overview .stat-bar-sub {
  color: #8491a9 !important;
  font-size: .73rem;
}

/* ---------- Target-only responsive behavior ---------- */
@media (max-width: 980px) {
  .ai-crims-features-section#features {
    padding: 100px 0 76px;
  }

  .ai-crims-features-section#features .core-feature-card {
    flex-basis: 300px;
  }

  .ai-crims-features-section.ai-crims-project-overview .stat-bar {
    grid-template-columns: repeat(2, 1fr);
  }

  .ai-crims-features-section.ai-crims-project-overview .stat-bar-item:nth-child(2)::after {
    display: none;
  }
}

@media (max-width: 640px) {
  .ai-crims-features-section#features {
    padding: 88px 0 62px;
  }

  .ai-crims-features-section#features::before {
    height: 105px;
    top: -55px;
  }

  .ai-crims-features-section#features .section-heading {
    margin-bottom: 34px;
  }

  .ai-crims-features-section#features .section-heading h2 {
    font-size: clamp(2rem, 9vw, 2.65rem);
  }

  .ai-crims-features-section#features .core-features-grid {
    gap: 17px;
  }

  .ai-crims-features-section#features .core-feature-card {
    flex: 1 1 100%;
    max-width: 440px;
    min-height: 255px;
    padding: 27px 24px 25px;
  }

  .ai-crims-features-section.ai-crims-project-overview {
    padding: 2px 0 58px !important;
  }

  .ai-crims-features-section.ai-crims-project-overview .stat-bar {
    grid-template-columns: 1fr;
    border-radius: 22px !important;
  }

  .ai-crims-features-section.ai-crims-project-overview .stat-bar-item {
    padding: 23px 20px !important;
  }

  .ai-crims-features-section.ai-crims-project-overview .stat-bar-item::after {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-crims-features-section#features .core-feature-card,
  .ai-crims-features-section#features .core-feature-icon,
  .ai-crims-features-section#features .core-feature-arrow,
  .ai-crims-features-section.ai-crims-project-overview .stat-bar-item {
    transition: none !important;
  }
}
/* ==========================================================
   AI-CRIMS FEATURES — FINAL COMPACT REFINEMENT
   TARGET ONLY: FEATURES + STAT BAR
   ========================================================== */

.ai-crims-features-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 48px 0 34px;

    background:
        radial-gradient(
            520px 300px at 5% 20%,
            rgba(74, 160, 255, .10),
            transparent 70%
        ),
        radial-gradient(
            500px 300px at 95% 35%,
            rgba(132, 102, 245, .09),
            transparent 70%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbff 52%,
            #f8f9ff 100%
        );
}


/* Keep existing background decoration subtle */
.ai-crims-features-section .core-features-bg {
    opacity: .28;
}

.ai-crims-features-section .core-features-gridlines {
    opacity: .16;
}

.ai-crims-features-section .core-features-network {
    opacity: .16;
}


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

.ai-crims-features-section .section-heading {
    position: relative;
    z-index: 3;

    max-width: 760px;
    margin: 0 auto 30px;

    text-align: center;
}

.ai-crims-features-section .section-heading .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 11px;
    padding: 6px 11px;

    border: 1px solid rgba(59, 125, 230, .14);
    border-radius: 999px;

    background: #eef5ff;

    color: #3974d8;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;

    box-shadow: 0 5px 16px rgba(49, 112, 220, .06);
}

.ai-crims-features-section .section-heading .section-tag::before {
    width: 5px;
    height: 5px;

    background: linear-gradient(
        135deg,
        #3185f4,
        #6b73ed
    );

    box-shadow: none;
}

.ai-crims-features-section .section-heading h2 {
    margin: 0 0 12px;

    color: #102650;

    font-size: clamp(2rem, 3.3vw, 2.9rem);
    line-height: 1.05;

    font-weight: 850;
    letter-spacing: -.045em;
}

.ai-crims-features-section .section-heading h2 span {
    display: inline;

    background: linear-gradient(
        100deg,
        #1875ea 0%,
        #416ff0 48%,
        #7359e7 100%
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ai-crims-features-section .section-heading p {
    max-width: 680px;
    margin: 0 auto;

    color: #667b9f;

    font-size: 13px;
    line-height: 1.65;
}


/* ==========================================================
   FIVE CARDS — COMPACT ONE ROW
   ========================================================== */

.ai-crims-features-section .core-features-grid {
    position: relative;
    z-index: 3;

    width: min(94%, 1480px);
    max-width: none;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 14px;
}


/* ==========================================================
   CARD
   ========================================================== */

.ai-crims-features-section .core-feature-card {
    position: relative;

    flex: none;

    width: auto;
    max-width: none;

    min-height: 174px;
    height: 174px;

    padding: 18px 19px;

    overflow: hidden;

    border: 1px solid rgba(77, 133, 215, .17);
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.99),
            rgba(247,250,255,.96)
        );

    box-shadow:
        0 10px 26px rgba(38, 78, 137, .09),
        inset 0 1px 0 rgba(255,255,255,.95);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transform: translateY(0);

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}


/* Top accent */
.ai-crims-features-section .core-feature-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 17px;
    right: 17px;

    height: 2px;

    border-radius: 0 0 8px 8px;

    opacity: .75;

    background: var(--feature-accent);
}


/* Bottom decorative circle */
.ai-crims-features-section .core-feature-card::after {
    content: "";

    position: absolute;

    right: -38px;
    bottom: -54px;

    width: 125px;
    height: 125px;

    border-radius: 50%;

    border: 1px solid
        color-mix(
            in srgb,
            var(--feature-accent) 14%,
            transparent
        );

    background:
        radial-gradient(
            circle,
            var(--feature-accent-soft),
            transparent 68%
        );

    opacity: .8;

    transform: none;

    pointer-events: none;

    z-index: 0;
}


/* Accent colors */
.ai-crims-features-section .core-feature-card:nth-child(1) {
    --feature-accent: #3185ee;
    --feature-accent-soft: rgba(49,133,238,.12);
}

.ai-crims-features-section .core-feature-card:nth-child(2) {
    --feature-accent: #7957e9;
    --feature-accent-soft: rgba(121,87,233,.11);
}

.ai-crims-features-section .core-feature-card:nth-child(3) {
    --feature-accent: #0eabb7;
    --feature-accent-soft: rgba(14,171,183,.11);
}

.ai-crims-features-section .core-feature-card:nth-child(4) {
    --feature-accent: #f47a55;
    --feature-accent-soft: rgba(244,122,85,.11);
}

.ai-crims-features-section .core-feature-card:nth-child(5) {
    --feature-accent: #5369e9;
    --feature-accent-soft: rgba(83,105,233,.11);
}


/* ==========================================================
   ICON
   ========================================================== */

.ai-crims-features-section .core-feature-icon {
    position: relative;
    z-index: 2;

    width: 42px;
    height: 42px;

    margin-bottom: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    border: 1px solid
        color-mix(
            in srgb,
            var(--feature-accent) 18%,
            rgba(255,255,255,.8)
        );

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--feature-accent) 13%,
                white
            ),
            rgba(255,255,255,.85)
        );

    color: var(--feature-accent);

    box-shadow:
        0 6px 15px
        color-mix(
            in srgb,
            var(--feature-accent) 10%,
            transparent
        );

    transition:
        transform .28s ease,
        box-shadow .28s ease;
}

.ai-crims-features-section .core-feature-icon::after {
    display: none;
}

.ai-crims-features-section .core-feature-icon svg {
    width: 21px;
    height: 21px;

    stroke: currentColor;

    color: var(--feature-accent);

    filter: none;
}


/* ==========================================================
   TITLE
   ========================================================== */

.ai-crims-features-section .core-feature-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 6px;

    color: #112650;

    font-size: 15px;
    line-height: 1.25;

    font-weight: 800;

    letter-spacing: -.02em;
}


/* ==========================================================
   DESCRIPTION
   ========================================================== */

.ai-crims-features-section .core-feature-card p {
    position: relative;
    z-index: 2;

    max-width: 225px;

    margin: 0;

    color: #64799d;

    font-size: 11px;
    line-height: 1.48;
}


/* ==========================================================
   ARROW
   ========================================================== */

.ai-crims-features-section .core-feature-arrow {
    position: absolute;
    z-index: 4;

    left: 18px;
    right: auto;
    bottom: 17px;

    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--feature-accent) 88%,
                white
            ),
            var(--feature-accent)
        );

    color: white;

    box-shadow:
        0 6px 14px
        color-mix(
            in srgb,
            var(--feature-accent) 20%,
            transparent
        );

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.ai-crims-features-section .core-feature-arrow svg {
    width: 13px;
    height: 13px;

    stroke: currentColor;
}

.ai-crims-features-section .core-feature-arrow:hover {
    transform: translateX(3px);

    box-shadow:
        0 8px 18px
        color-mix(
            in srgb,
            var(--feature-accent) 25%,
            transparent
        );
}


/* ==========================================================
   CARD HOVER
   ========================================================== */

.ai-crims-features-section .core-feature-card:hover {
    transform: translateY(-5px);

    border-color:
        color-mix(
            in srgb,
            var(--feature-accent) 32%,
            rgba(77,133,215,.12)
        );

    box-shadow:
        0 17px 34px rgba(38,78,137,.13);
}

.ai-crims-features-section .core-feature-card:hover
.core-feature-icon {
    transform: translateY(-2px);

    box-shadow:
        0 9px 20px
        color-mix(
            in srgb,
            var(--feature-accent) 14%,
            transparent
        );
}


/* ==========================================================
   STAT BAR — ONLY THE ONE DIRECTLY AFTER FEATURES
   ========================================================== */

.ai-crims-features-section + .stat-bar-section {
    position: relative;

    padding: 0 0 42px;

    background:
        linear-gradient(
            180deg,
            #f8f9ff 0%,
            #f7faff 100%
        );
}


/* Stat container */
.ai-crims-features-section + .stat-bar-section .stat-bar {
    width: min(94%, 1480px);

    margin: 0 auto;

    min-height: 116px;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    overflow: hidden;

    border: 1px solid rgba(76,135,220,.15);
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(247,250,255,.96)
        );

    box-shadow:
        0 12px 30px rgba(38,78,137,.09);

    backdrop-filter: blur(12px);
}


/* Individual stat */
.ai-crims-features-section + .stat-bar-section
.stat-bar-item {
    position: relative;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 20px 23px;
}


/* Divider */
.ai-crims-features-section + .stat-bar-section
.stat-bar-item:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 22px;
    bottom: 22px;
    right: 0;

    width: 1px;

    background: rgba(72,126,205,.13);
}


/* Stat icon */
.ai-crims-features-section + .stat-bar-section
.stat-bar-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    font-size: 16px;

    background:
        linear-gradient(
            145deg,
            #eef5ff,
            #e5eeff
        );

    box-shadow:
        0 6px 15px rgba(55,123,226,.08);
}


/* Stat copy */
.ai-crims-features-section + .stat-bar-section
.stat-bar-copy {
    display: flex;
    flex-direction: column;
}


/* Number */
.ai-crims-features-section + .stat-bar-section
.stat-bar-number {
    color: #142b55;

    font-size: 19px;
    line-height: 1.1;
    font-weight: 850;
}


/* Label */
.ai-crims-features-section + .stat-bar-section
.stat-bar-label {
    margin-top: 3px;

    color: #4c648c;

    font-size: 10px;
    line-height: 1.3;
    font-weight: 700;
}


/* Sub */
.ai-crims-features-section + .stat-bar-section
.stat-bar-sub {
    margin-top: 2px;

    color: #8c9db8;

    font-size: 8px;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1050px) {

    .ai-crims-features-section .core-features-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ai-crims-features-section + .stat-bar-section
    .stat-bar {
        grid-template-columns: repeat(2, 1fr);
    }

    .ai-crims-features-section + .stat-bar-section
    .stat-bar-item:nth-child(2)::after {
        display: none;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    .ai-crims-features-section {
        padding-top: 42px;
        padding-bottom: 28px;
    }

    .ai-crims-features-section .section-heading {
        width: 92%;
        margin-bottom: 25px;
    }

    .ai-crims-features-section .section-heading h2 {
        font-size: 32px;
    }

    .ai-crims-features-section .section-heading p {
        font-size: 12px;
    }

    .ai-crims-features-section .core-features-grid {
        width: 92%;

        grid-template-columns: 1fr;

        gap: 12px;
    }

    .ai-crims-features-section .core-feature-card {
        height: 165px;
        min-height: 165px;
    }

    .ai-crims-features-section + .stat-bar-section {
        padding-bottom: 30px;
    }

    .ai-crims-features-section + .stat-bar-section
    .stat-bar {
        width: 92%;

        grid-template-columns: 1fr;
    }

    .ai-crims-features-section + .stat-bar-section
    .stat-bar-item {
        padding: 15px 18px;
    }

    .ai-crims-features-section + .stat-bar-section
    .stat-bar-item::after {
        top: auto;
        right: 18px;
        bottom: 0;

        width: calc(100% - 36px);
        height: 1px;
    }

    .ai-crims-features-section + .stat-bar-section
    .stat-bar-item:last-child::after {
        display: none;
    }
}

/* ============================================================
   AI-CRIMS HISTORY — PREMIUM DARK ACADEMIC TIMELINE
   Scoped exclusively to .ai-crims-history-section
   ============================================================ */
.ai-crims-history-section#history {
  --history-bg:#0a1630;
  --history-bg-2:#0d1b38;
  --history-card:#111f3d;
  --history-card-2:#142544;
  --history-text:#f4f7ff;
  --history-muted:#9eacc5;
  --history-blue:#60a5fa;
  --history-cyan:#5eead4;
  --history-violet:#a78bfa;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:96px 0 104px !important;
  /* MATCHES THE WORKFLOW SECTION PALETTE */
  background:
    radial-gradient(circle at 78% 22%, rgba(0, 153, 255, .16), transparent 27%),
    radial-gradient(circle at 15% 82%, rgba(91, 65, 235, .12), transparent 32%),
    linear-gradient(135deg, #06142c 0%, #071b3b 48%, #07162f 100%) !important;
}
.ai-crims-history-section#history::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.25;
  background-image:
    linear-gradient(rgba(148,163,184,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 45%,#000 18%,transparent 88%);
  mask-image:radial-gradient(ellipse 85% 75% at 50% 45%,#000 18%,transparent 88%);
  pointer-events:none;
}
.ai-crims-history-section#history::after {
  content:"";
  position:absolute;
  z-index:-1;
  width:520px;height:520px;
  left:-260px;bottom:-300px;
  border-radius:50%;
  border:1px solid rgba(96,165,250,.07);
  box-shadow:0 0 0 70px rgba(96,165,250,.025),0 0 0 140px rgba(96,165,250,.018);
  pointer-events:none;
}
.ai-crims-history-section#history > .container { position:relative;z-index:2; }
.ai-crims-history-section#history .section-heading {
  max-width:820px;
  margin:0 auto 58px !important;
  text-align:center;
}
.ai-crims-history-section#history .section-heading .section-tag {
  display:inline-flex;
  padding:7px 13px !important;
  border:1px solid rgba(96,165,250,.18) !important;
  border-radius:999px !important;
  background:rgba(37,99,235,.09) !important;
  color:#8db8f4 !important;
  box-shadow:none !important;
  font-size:.68rem !important;
  font-weight:800 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase;
}
.ai-crims-history-section#history .section-heading h2 {
  margin:15px auto 17px !important;
  color:var(--history-text) !important;
  font-size:clamp(2.2rem,4vw,3.55rem) !important;
  line-height:1.08 !important;
  letter-spacing:-.045em !important;
  font-weight:800 !important;
}
.ai-crims-history-section#history .section-heading h2::first-line { color:#f4f7ff; }
.ai-crims-history-section#history .section-heading p {
  max-width:700px !important;
  margin:0 auto !important;
  color:var(--history-muted) !important;
  font-size:.98rem !important;
  line-height:1.8 !important;
}
.ai-crims-history-section#history .history-grid {
  display:grid !important;
  grid-template-columns:minmax(0,1.35fr) minmax(310px,.65fr) !important;
  gap:58px !important;
  align-items:start !important;
  max-width:1080px;
  margin:0 auto;
}
.ai-crims-history-section#history .history-timeline {
  position:relative;
  padding-left:58px !important;
}
.ai-crims-history-section#history .history-timeline::before {
  content:"";
  position:absolute;
  left:17px;
  top:18px;
  bottom:28px;
  width:1px;
  background:linear-gradient(180deg,rgba(96,165,250,.65),rgba(96,165,250,.20) 75%,transparent);
}
.ai-crims-history-section#history .history-milestone {
  position:relative;
  margin:0 0 22px !important;
}
.ai-crims-history-section#history .history-milestone:last-child { margin-bottom:0 !important; }
.ai-crims-history-section#history .history-dot {
  position:absolute !important;
  left:-58px !important;
  top:25px !important;
  width:35px !important;
  height:35px !important;
  border:1px solid rgba(96,165,250,.35) !important;
  border-radius:50% !important;
  background:#0d1b38 !important;
  box-shadow:0 0 0 6px rgba(96,165,250,.035) !important;
  z-index:3;
}
.ai-crims-history-section#history .history-dot::after {
  content:"";
  position:absolute;
  inset:9px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--history-blue),var(--history-violet));
  opacity:.9;
}
.ai-crims-history-section#history .history-milestone:nth-child(2) .history-dot::after { background:var(--history-violet); }
.ai-crims-history-section#history .history-milestone:nth-child(3) .history-dot::after { background:var(--history-cyan); }
.ai-crims-history-section#history .history-milestone:nth-child(4) .history-dot::after { background:#7dd3fc; }
.ai-crims-history-section#history .history-milestone-body {
  position:relative;
  overflow:hidden;
  padding:24px 27px 25px !important;
  border:1px solid rgba(148,163,184,.12) !important;
  border-radius:18px !important;
  background:linear-gradient(145deg,rgba(17,31,61,.98),rgba(13,27,56,.98)) !important;
  box-shadow:0 15px 36px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.025) !important;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease !important;
}
.ai-crims-history-section#history .history-milestone-body::after {
  content:"";
  position:absolute;
  width:170px;height:170px;
  right:-80px;bottom:-105px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(96,165,250,.10),transparent 70%);
  pointer-events:none;
}
.ai-crims-history-section#history .history-milestone:hover .history-milestone-body {
  transform:translateY(-4px);
  border-color:rgba(96,165,250,.25) !important;
  box-shadow:0 22px 44px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.ai-crims-history-section#history .history-year {
  display:block;
  margin-bottom:8px !important;
  color:#78b5ff !important;
  font-size:.69rem !important;
  font-weight:800 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase;
}
.ai-crims-history-section#history .history-milestone:nth-child(2) .history-year { color:#b49cff !important; }
.ai-crims-history-section#history .history-milestone:nth-child(3) .history-year { color:#65ddd2 !important; }
.ai-crims-history-section#history .history-milestone h3 {
  margin:0 0 10px !important;
  color:#f1f5ff !important;
  font-size:1.12rem !important;
  line-height:1.35 !important;
  font-weight:780 !important;
  letter-spacing:-.018em !important;
}
.ai-crims-history-section#history .history-milestone p {
  margin:0 !important;
  color:#93a3bf !important;
  font-size:.86rem !important;
  line-height:1.72 !important;
}
.ai-crims-history-section#history .history-visual {
  position:sticky;
  top:110px;
}
.ai-crims-history-section#history .history-card {
  position:relative;
  overflow:hidden;
  padding:31px !important;
  border:1px solid rgba(96,165,250,.16) !important;
  border-radius:24px !important;
  background:
    radial-gradient(330px 230px at 100% 0%,rgba(96,165,250,.13),transparent 72%),
    linear-gradient(145deg,#142747,#101f3d) !important;
  box-shadow:0 25px 65px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.ai-crims-history-section#history .history-card::before {
  content:"OUR MISSION";
  display:block;
  margin-bottom:17px;
  color:#7db8ff;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.17em;
}
.ai-crims-history-section#history .history-card::after {
  content:"";
  position:absolute;
  right:-75px;bottom:-85px;
  width:230px;height:230px;
  border:1px solid rgba(167,139,250,.08);
  border-radius:50%;
  box-shadow:0 0 0 35px rgba(167,139,250,.025),0 0 0 70px rgba(167,139,250,.018);
  pointer-events:none;
}
.ai-crims-history-section#history .history-card-icon {
  width:54px !important;
  height:54px !important;
  margin-bottom:19px !important;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(96,165,250,.17) !important;
  border-radius:16px !important;
  background:rgba(96,165,250,.09) !important;
  font-size:1.35rem !important;
}
.ai-crims-history-section#history .history-card h3 {
  margin:0 0 13px !important;
  color:#f5f8ff !important;
  font-size:1.5rem !important;
  line-height:1.2 !important;
  letter-spacing:-.03em !important;
}
.ai-crims-history-section#history .history-card > p {
  margin:0 !important;
  color:#9aa9c2 !important;
  font-size:.88rem !important;
  line-height:1.78 !important;
}
.ai-crims-history-section#history .history-card-stats {
  position:relative;
  z-index:2;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:0 !important;
  margin-top:28px !important;
  padding-top:22px !important;
  border-top:1px solid rgba(148,163,184,.12) !important;
}
.ai-crims-history-section#history .history-card-stat {
  padding:0 18px !important;
}
.ai-crims-history-section#history .history-card-stat:first-child { padding-left:0 !important; }
.ai-crims-history-section#history .history-card-stat:last-child {
  border-left:1px solid rgba(148,163,184,.12) !important;
}
.ai-crims-history-section#history .history-card-stat-number {
  display:block;
  color:#f4f7ff !important;
  font-size:1.75rem !important;
  line-height:1 !important;
  font-weight:800 !important;
}
.ai-crims-history-section#history .history-card-stat-label {
  display:block;
  margin-top:6px;
  color:#8192ae !important;
  font-size:.68rem !important;
  font-weight:700 !important;
  line-height:1.4 !important;
}
@media (max-width:900px) {
  .ai-crims-history-section#history { padding:82px 0 86px !important; }
  .ai-crims-history-section#history .history-grid { grid-template-columns:1fr !important; gap:35px !important; }
  .ai-crims-history-section#history .history-visual { position:relative;top:auto; }
  .ai-crims-history-section#history .history-card { max-width:720px;margin:0 auto; }
}
@media (max-width:620px) {
  .ai-crims-history-section#history { padding:68px 0 70px !important; }
  .ai-crims-history-section#history .section-heading { margin-bottom:40px !important; }
  .ai-crims-history-section#history .section-heading h2 { font-size:2rem !important; }
  .ai-crims-history-section#history .section-heading p { font-size:.86rem !important; }
  .ai-crims-history-section#history .history-timeline { padding-left:43px !important; }
  .ai-crims-history-section#history .history-timeline::before { left:13px; }
  .ai-crims-history-section#history .history-dot { left:-43px !important;width:29px !important;height:29px !important;top:25px !important; }
  .ai-crims-history-section#history .history-dot::after { inset:7px; }
  .ai-crims-history-section#history .history-milestone-body { padding:20px 20px 21px !important; }
  .ai-crims-history-section#history .history-milestone h3 { font-size:1rem !important; }
  .ai-crims-history-section#history .history-milestone p { font-size:.8rem !important; }
  .ai-crims-history-section#history .history-card { padding:25px !important; }
}
@media (prefers-reduced-motion:reduce) {
  .ai-crims-history-section#history .history-milestone-body { transition:none !important; }
}
/* ============================================================
   AI-CRIMS — TECHNOLOGY SECTION ONLY
   Premium Academic Technology Roadmap
   NO GLOBAL SELECTORS
============================================================ */

#technology.technology {
    --tech-ink: #10254a;
    --tech-text: #243b63;
    --tech-muted: #6b7d9e;
    --tech-blue: #3b82f6;
    --tech-blue-soft: #eaf3ff;
    --tech-lavender: #7c6ee6;
    --tech-cyan: #22b8cf;
    --tech-border: rgba(59, 130, 246, 0.13);

    position: relative !important;
    isolation: isolate !important;

    overflow: hidden !important;

    min-height: 720px;

    padding:
        105px 0 110px !important;

    color:
        var(--tech-ink) !important;

    background:
        radial-gradient(
            500px 380px at 4% 45%,
            rgba(96, 165, 250, 0.11),
            transparent 72%
        ),
        radial-gradient(
            500px 400px at 96% 18%,
            rgba(167, 139, 250, 0.10),
            transparent 72%
        ),
        linear-gradient(
            180deg,
            #f7faff 0%,
            #ffffff 48%,
            #f8fbff 100%
        ) !important;
}


/* ------------------------------------------------------------
   BACKGROUND TECHNICAL PATTERN
------------------------------------------------------------ */

#technology.technology::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    opacity: .72;

    background-image:
        linear-gradient(
            rgba(59, 130, 246, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(59, 130, 246, .035) 1px,
            transparent 1px
        );

    background-size:
        62px 62px;

    -webkit-mask-image:
        radial-gradient(
            ellipse 82% 80% at 50% 48%,
            #000 10%,
            transparent 85%
        );

    mask-image:
        radial-gradient(
            ellipse 82% 80% at 50% 48%,
            #000 10%,
            transparent 85%
        );
}


/* ------------------------------------------------------------
   SOFT DECORATIVE ORBIT
------------------------------------------------------------ */

#technology.technology::after {
    content: "";

    position: absolute;

    z-index: -1;

    right: -210px;
    bottom: -260px;

    width: 510px;
    height: 510px;

    border:
        1px solid
        rgba(124, 110, 230, .10);

    border-radius: 50%;

    box-shadow:
        0 0 0 75px rgba(124, 110, 230, .018),
        0 0 0 150px rgba(59, 130, 246, .012);

    pointer-events: none;
}


/* ============================================================
   CONTAINER
   Turn the existing structure into:
   LEFT  = Technology introduction
   RIGHT = roadmap
============================================================ */

#technology.technology > .container {
    position: relative;

    z-index: 2;

    display: grid !important;

    grid-template-columns:
        minmax(290px, .72fr)
        minmax(560px, 1.28fr) !important;

    column-gap:
        70px !important;

    align-items:
        center !important;

    max-width:
        1180px !important;
}


/* ============================================================
   LEFT — TECHNOLOGY INTRODUCTION
============================================================ */

#technology.technology .section-heading {
    position: relative;

    width: 100%;

    max-width:
        390px !important;

    margin:
        0 !important;

    text-align:
        left !important;
}


/* Small academic label */

#technology.technology .section-heading .section-tag {
    position: relative;

    display: inline-flex !important;

    align-items: center;

    gap: 8px;

    margin:
        0 0 22px !important;

    padding:
        8px 13px !important;

    border:
        1px solid
        rgba(59, 130, 246, .15) !important;

    border-radius:
        999px !important;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f1f6ff
        ) !important;

    color:
        #3564ae !important;

    box-shadow:
        0 8px 22px
        rgba(37, 99, 235, .055);

    font-size:
        .69rem !important;

    font-weight:
        800 !important;

    letter-spacing:
        .12em !important;

    text-transform:
        uppercase !important;
}


/* Decorative dot */

#technology.technology
.section-heading .section-tag::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #4b8df8;
}


/* LEFT MAIN TITLE */

#technology.technology
.section-heading h2 {
    position: relative;

    margin:
        0 0 22px !important;

    color:
        var(--tech-ink) !important;

    font-size:
        clamp(
            2.35rem,
            4vw,
            3.65rem
        ) !important;

    line-height:
        1.06 !important;

    font-weight:
        800 !important;

    letter-spacing:
        -.055em !important;
}


/*
   Adds the requested "Technology Stack" hierarchy
   without replacing existing/Jinja text.
*/

#technology.technology
.section-heading h2::before {
    content:
        "TECHNOLOGY STACK";

    display:
        block;

    margin-bottom:
        13px;

    color:
        #5682c8;

    font-size:
        .66rem;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        .18em;
}


/* LEFT DESCRIPTION */

#technology.technology
.section-heading p {
    max-width:
        360px !important;

    margin:
        0 !important;

    color:
        var(--tech-muted) !important;

    font-size:
        .94rem !important;

    line-height:
        1.85 !important;
}


/* ============================================================
   RIGHT SIDE
============================================================ */

#technology.technology .technology-grid {
    position: relative;

    display:
        grid !important;

    grid-template-columns:
        1fr !important;

    gap:
        20px !important;

    width:
        100%;

    margin:
        0 !important;
}


/* ============================================================
   TECHNOLOGY ROADMAP
============================================================ */

#technology.technology .technology-content {
    position: relative;

    display:
        flex !important;

    flex-direction:
        column !important;

    gap:
        0 !important;

    padding-left:
        34px;

    width:
        100%;
}


/* MAIN VERTICAL LINE */

#technology.technology .technology-content::before {
    content: "";

    position: absolute;

    left:
        9px;

    top:
        20px;

    bottom:
        20px;

    width:
        1px;

    background:
        linear-gradient(
            180deg,
            rgba(59, 130, 246, .05),
            rgba(59, 130, 246, .25),
            rgba(124, 110, 230, .24),
            rgba(34, 184, 207, .08)
        );
}


/* ============================================================
   ROADMAP ROW
============================================================ */

#technology.technology .technology-item {
    position: relative;

    display:
        grid !important;

    grid-template-columns:
        54px minmax(0, 1fr) !important;

    column-gap:
        18px;

    align-items:
        center;

    width:
        100%;

    min-height:
        108px;

    padding:
        19px 23px 19px 16px !important;

    margin:
        0 0 12px !important;

    border:
        1px solid
        var(--tech-border) !important;

    border-radius:
        18px !important;

    background:
        rgba(255,255,255,.88) !important;

    box-shadow:
        0 12px 30px
        rgba(31, 67, 125, .065) !important;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    transform:
        none !important;

    transition:
        border-color .28s ease,
        box-shadow .28s ease,
        background .28s ease !important;
}


/* ROADMAP NODE */

#technology.technology
.technology-item::before {
    content: "";

    position: absolute;

    left:
        -35px;

    top:
        50%;

    width:
        19px;

    height:
        19px;

    border:
        4px solid
        #ffffff;

    border-radius:
        50%;

    background:
        #5b8fe8;

    box-shadow:
        0 0 0 1px
        rgba(59, 130, 246, .20),
        0 6px 15px
        rgba(59, 130, 246, .16);

    transform:
        translateY(-50%);

    z-index:
        3;
}


/* SMALL CATEGORY LABEL */

#technology.technology
.technology-item::after {
    position: absolute;

    top:
        16px;

    right:
        20px;

    padding:
        4px 8px;

    border-radius:
        999px;

    background:
        #f1f6ff;

    color:
        #6381b2;

    font-size:
        .56rem;

    font-weight:
        800;

    letter-spacing:
        .10em;

    line-height:
        1.4;
}


/* Existing technologies mapped to academic categories */

#technology.technology
.technology-item:nth-child(1)::after {
    content:
        "TEXT INPUT";
}


#technology.technology
.technology-item:nth-child(2)::after {
    content:
        "TEXT INPUT";
}


#technology.technology
.technology-item:nth-child(3)::after {
    content:
        "TEXT PROCESSING";
}


#technology.technology
.technology-item:nth-child(4)::after {
    content:
        "SIMILARITY ANALYSIS";
}


/* NODE ACCENTS */

#technology.technology
.technology-item:nth-child(2)::before {
    background:
        #7c6ee6;
}

#technology.technology
.technology-item:nth-child(3)::before {
    background:
        #22a9c2;
}

#technology.technology
.technology-item:nth-child(4)::before {
    background:
        #6d72dc;
}


/* ============================================================
   ROADMAP TEXT
============================================================ */

#technology.technology
.technology-item h3 {
    position: relative;

    z-index: 2;

    margin:
        0 0 7px !important;

    color:
        var(--tech-ink) !important;

    font-size:
        .98rem !important;

    line-height:
        1.35 !important;

    font-weight:
        800 !important;

    letter-spacing:
        -.018em !important;
}


#technology.technology
.technology-item p {
    position: relative;

    z-index: 2;

    max-width:
        620px;

    margin:
        0 !important;

    padding-right:
        85px;

    color:
        var(--tech-muted) !important;

    font-size:
        .76rem !important;

    line-height:
        1.65 !important;
}


/* ============================================================
   ROADMAP HOVER
============================================================ */

#technology.technology
.technology-item:hover {
    border-color:
        rgba(59, 130, 246, .22) !important;

    background:
        #ffffff !important;

    box-shadow:
        0 17px 38px
        rgba(31, 67, 125, .11) !important;

    transform:
        translateX(5px) !important;
}


#technology.technology
.technology-item:hover::before {
    box-shadow:
        0 0 0 1px
        rgba(59, 130, 246, .25),
        0 7px 18px
        rgba(59, 130, 246, .20);
}


/* ============================================================
   AI PROCESS VISUAL
============================================================ */

#technology.technology .technology-visual {
    position:
        relative;

    width:
        100%;

    margin-top:
        3px;

    padding:
        0 0 0 34px;
}


/* AI CARD */

#technology.technology .ai-card {
    position:
        relative;

    width:
        100% !important;

    max-width:
        none !important;

    overflow:
        hidden;

    border:
        1px solid
        rgba(59, 130, 246, .11) !important;

    border-radius:
        19px !important;

    background:
        linear-gradient(
            135deg,
            #f7faff,
            #f8f6ff
        ) !important;

    box-shadow:
        0 14px 34px
        rgba(31, 67, 125, .065) !important;
}


/* AI HEADER */

#technology.technology .ai-header {
    display:
        flex;

    align-items:
        center;

    min-height:
        52px;

    padding:
        12px 19px !important;

    border-bottom:
        1px solid
        rgba(59, 130, 246, .08) !important;

    background:
        rgba(255,255,255,.58) !important;
}


#technology.technology .ai-badge {
    display:
        inline-flex;

    align-items:
        center;

    padding:
        6px 11px !important;

    border:
        1px solid
        rgba(59, 130, 246, .12) !important;

    border-radius:
        999px !important;

    background:
        #ffffff !important;

    color:
        #4b68a4 !important;

    font-size:
        .64rem !important;

    font-weight:
        800 !important;

    letter-spacing:
        .08em;
}


/* ============================================================
   AI FLOW — HORIZONTAL ROADMAP
============================================================ */

#technology.technology .ai-flow {
    position:
        relative;

    display:
        grid !important;

    grid-template-columns:
        repeat(5, minmax(0, 1fr)) !important;

    align-items:
        center;

    gap:
        9px !important;

    padding:
        19px !important;
}


/* Remove old vertical guide */

#technology.technology .ai-flow::before {
    content: "";

    position:
        absolute;

    left:
        42px;

    right:
        42px;

    top:
        50%;

    width:
        auto;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            rgba(59,130,246,.08),
            rgba(124,110,230,.20),
            rgba(34,184,207,.10)
        );

    transform:
        translateY(-50%);
}


/* FLOW BOX */

#technology.technology .flow-box {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        48px;

    padding:
        10px 9px !important;

    border:
        1px solid
        rgba(59, 130, 246, .10) !important;

    border-radius:
        12px !important;

    background:
        rgba(255,255,255,.94) !important;

    color:
        #243b63 !important;

    box-shadow:
        0 7px 17px
        rgba(31,67,125,.055);

    font-size:
        .67rem;

    font-weight:
        800;

    text-align:
        center;
}


/* ARROWS */

#technology.technology .flow-arrow {
    position:
        absolute;

    z-index:
        4;

    width:
        17px;

    height:
        17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #6f82ba !important;

    font-size:
        .75rem !important;

    background:
        #f7faff;

    border-radius:
        50%;
}


/* position the arrows between roadmap nodes */

#technology.technology .flow-arrow:nth-of-type(2) {
    left:
        20%;
}

#technology.technology .flow-arrow:nth-of-type(4) {
    left:
        40%;
}

#technology.technology .flow-arrow:nth-of-type(6) {
    left:
        60%;
}

#technology.technology .flow-arrow:nth-of-type(8) {
    left:
        80%;
}


/* FINAL RESULT */

#technology.technology .flow-result {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        48px;

    padding:
        10px 9px !important;

    border:
        1px solid
        rgba(124,110,230,.15) !important;

    border-radius:
        12px !important;

    background:
        linear-gradient(
            135deg,
            #eef5ff,
            #f5f0ff
        ) !important;

    color:
        #405b9e !important;

    box-shadow:
        0 8px 18px
        rgba(79,70,229,.06);

    font-size:
        .67rem;

    font-weight:
        800;

    text-align:
        center;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 980px) {

    #technology.technology > .container {
        grid-template-columns:
            1fr !important;

        row-gap:
            45px !important;

        max-width:
            760px !important;
    }


    #technology.technology
    .section-heading {
        max-width:
            650px !important;

        margin:
            0 auto !important;

        text-align:
            center !important;
    }


    #technology.technology
    .section-heading p {
        max-width:
            620px !important;

        margin:
            0 auto !important;
    }


    #technology.technology
    .technology-grid {
        width:
            100%;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 650px) {

    #technology.technology {
        padding:
            78px 0 80px !important;
    }


    #technology.technology > .container {
        width:
            calc(100% - 32px) !important;

        max-width:
            none !important;
    }


    #technology.technology
    .section-heading h2 {
        font-size:
            2.25rem !important;
    }


    #technology.technology
    .technology-content {
        padding-left:
            25px;
    }


    #technology.technology
    .technology-item {
        grid-template-columns:
            43px minmax(0, 1fr) !important;

        column-gap:
            13px;

        min-height:
            110px;

        padding:
            18px 17px 18px 13px !important;
    }


    #technology.technology
    .technology-item::before {
        left:
            -27px;

        width:
            15px;

        height:
            15px;
    }


    #technology.technology
    .technology-item p {
        padding-right:
            0;

        font-size:
            .73rem !important;
    }


    #technology.technology
    .technology-item::after {
        display:
            none;
    }


    #technology.technology
    .technology-visual {
        padding-left:
            25px;
    }


    #technology.technology
    .ai-flow {
        grid-template-columns:
            1fr !important;

        gap:
            7px !important;
    }


    #technology.technology
    .ai-flow::before {
        left:
            50%;

        right:
            auto;

        top:
            30px;

        bottom:
            30px;

        width:
            1px;

        height:
            auto;

        transform:
            translateX(-50%);
    }


    #technology.technology
    .flow-arrow {
        position:
            static;

        margin:
            -1px auto !important;

        transform:
            rotate(90deg);
    }

}