/* ANOMALY DETECTION — page-ai-anomaly.css
   LIGHT HERO · Teal #00C2A8 accent · Icon-heavy visual style */

/* ══ HERO (LIGHT) ══ */
.ano-hero {
   position: relative;
   background: #fff;
   padding: calc(var(--header-h) + 72px) 0 80px;
   overflow: hidden
}

.ano-hero__dots {
   position: absolute;
   inset: 0;
   background-image: radial-gradient(circle, rgba(0, 194, 168, .08) 1px, transparent 1px);
   background-size: 28px 28px;
   pointer-events: none
}

.ano-hero__blob {
   position: absolute;
   border-radius: 50%;
   pointer-events: none;
   filter: blur(80px)
}

.ano-blob--1 {
   width: 420px;
   height: 420px;
   background: rgba(0, 194, 168, .07);
   top: -100px;
   right: -80px;
   animation: blobFloat 8s ease-in-out infinite
}

.ano-blob--2 {
   width: 300px;
   height: 300px;
   background: rgba(139, 92, 246, .05);
   bottom: -60px;
   left: -40px;
   animation: blobFloat 10s ease-in-out 2s infinite
}

@keyframes blobFloat {

   0%,
   100% {
      transform: translate(0, 0)
   }

   50% {
      transform: translate(20px, -20px)
   }
}

.ano-hero__inner {
   position: relative;
   z-index: 1;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: center
}

/* Eyebrow */
.ano-hero__eyebrow {
   display: flex;
   align-items: center;
   gap: 10px;
   font-family: var(--font-heading);
   font-size: .78rem;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: #00C2A8;
   margin-bottom: 18px
}

.ano-pulse-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #00C2A8;
   animation: pulseDot 2s ease-in-out infinite
}

@keyframes pulseDot {

   0%,
   100% {
      box-shadow: 0 0 0 0 rgba(0, 194, 168, .4)
   }

   50% {
      box-shadow: 0 0 0 10px rgba(0, 194, 168, 0)
   }
}

.ano-hero__h1 {
   font-family: var(--font-heading);
   font-size: clamp(2rem, 3.8vw, 3.4rem);
   font-weight: 900;
   line-height: 1.1;
   letter-spacing: -.025em;
   color: var(--color-navy);
   margin-bottom: 16px
}

.ano-hero__accent {
   color: #00C2A8
}

.ano-hero__sub {
   font-size: .92rem;
   line-height: 1.75;
   color: var(--color-slate);
   max-width: 480px;
   margin-bottom: 24px
}

/* Feature chips */
.ano-hero__chips {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
   margin-bottom: 28px
}

.ano-chip {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 12px 14px;
   background: var(--color-off-white);
   border: 1px solid var(--color-border);
   border-radius: 10px;
   transition: all var(--transition)
}

.ano-chip:hover {
   border-color: #00C2A8;
   box-shadow: 0 4px 16px rgba(0, 194, 168, .1)
}

.ano-chip__icon {
   width: 36px;
   height: 36px;
   border-radius: 9px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: .9rem;
   flex-shrink: 0
}

.ano-chip div {
   display: flex;
   flex-direction: column;
   gap: 2px
}

.ano-chip strong {
   font-family: var(--font-heading);
   font-size: .8rem;
   font-weight: 700;
   color: var(--color-navy)
}

.ano-chip span {
   font-family: var(--font-heading);
   font-size: .68rem;
   color: var(--color-slate)
}

.ano-hero__ctas {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin-bottom: 24px
}

.ano-btn-primary {
   background: #00C2A8 !important;
   color: var(--color-navy) !important;
   border-color: #00C2A8 !important;
   font-weight: 700 !important
}

.ano-btn-primary:hover {
   background: #00a891 !important;
   border-color: #00a891 !important;
   box-shadow: 0 8px 32px rgba(0, 194, 168, .35) !important;
   transform: translateY(-2px)
}

/* Stat pills */
.ano-hero__stats {
   display: flex;
   gap: 8px;
   flex-wrap: wrap
}

.ano-hstat {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 6px 14px;
   border-radius: 100px;
   background: rgba(0, 194, 168, .07);
   border: 1px solid rgba(0, 194, 168, .2);
   font-family: var(--font-heading);
   font-size: .72rem
}

.ano-hstat strong {
   font-weight: 800;
   color: var(--color-navy)
}

.ano-hstat span {
   color: var(--color-slate)
}

/* Signal card */
.ano-signal-card {
   background: #fff;
   border: 1px solid var(--color-border);
   border-radius: 16px;
   overflow: hidden;
   box-shadow: 0 16px 48px rgba(0, 0, 0, .07), 0 2px 8px rgba(0, 194, 168, .08)
}

.ano-sc__bar {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 11px 16px;
   background: var(--color-off-white);
   border-bottom: 1px solid var(--color-border)
}

.ano-sc__dots {
   display: flex;
   gap: 4px
}

.ano-sc__dots span {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: var(--color-border)
}

.ano-sc__title {
   font-family: var(--font-heading);
   font-size: .76rem;
   font-weight: 600;
   color: var(--color-navy);
   flex: 1;
   display: flex;
   align-items: center;
   gap: 6px
}

.ano-sc__title i {
   color: #00C2A8
}

.ano-sc__live {
   display: flex;
   align-items: center;
   gap: 5px;
   font-family: var(--font-heading);
   font-size: .64rem;
   font-weight: 700;
   color: #10b981
}

.ano-sc__live span {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #10b981;
   animation: livePulse 1.4s infinite
}

@keyframes livePulse {

   0%,
   100% {
      opacity: 1
   }

   50% {
      opacity: .3
   }
}

.ano-sc__chart {
   background: #fafbff;
   padding: 12px 14px 0
}

.ano-sc__chart svg {
   width: 100%;
   height: auto;
   display: block
}

.ano-sc__alerts {
   display: flex;
   gap: 8px;
   padding: 10px 14px;
   flex-wrap: wrap
}

.ano-alert-pill {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 5px 12px;
   border-radius: 100px;
   font-family: var(--font-heading);
   font-size: .7rem;
   font-weight: 600
}

.ano-ap--red {
   background: rgba(239, 68, 68, .08);
   border: 1px solid rgba(239, 68, 68, .2);
   color: #ef4444
}

.ano-ap--amber {
   background: rgba(245, 158, 11, .08);
   border: 1px solid rgba(245, 158, 11, .2);
   color: #f59e0b
}

.ano-sc__footer {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 8px 16px;
   background: var(--color-off-white);
   border-top: 1px solid var(--color-border);
   font-family: var(--font-heading);
   font-size: .67rem;
   color: var(--color-slate);
   flex-wrap: wrap
}

.ano-sc__footer span {
   display: flex;
   align-items: center;
   gap: 5px
}

/* Mini KPIs */
.ano-hero__mini-kpis {
   display: flex;
   gap: 10px;
   margin-top: 14px
}

.ano-mk {
   flex: 1;
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 12px 14px;
   border-radius: 12px;
   border: 1px solid
}

.ano-mk--red {
   background: rgba(239, 68, 68, .06);
   border-color: rgba(239, 68, 68, .2)
}

.ano-mk--teal {
   background: rgba(0, 194, 168, .06);
   border-color: rgba(0, 194, 168, .2)
}

.ano-mk--purple {
   background: rgba(139, 92, 246, .06);
   border-color: rgba(139, 92, 246, .2)
}

.ano-mk>i {
   font-size: .9rem;
   flex-shrink: 0
}

.ano-mk--red>i {
   color: #ef4444
}

.ano-mk--teal>i {
   color: #00C2A8
}

.ano-mk--purple>i {
   color: #8b5cf6
}

.ano-mk div {
   display: flex;
   flex-direction: column;
   gap: 1px
}

.ano-mk strong {
   font-family: var(--font-heading);
   font-size: .9rem;
   font-weight: 900;
   color: var(--color-navy);
   line-height: 1
}

.ano-mk span {
   font-family: var(--font-heading);
   font-size: .62rem;
   color: var(--color-slate)
}

/* ══ HOW IT WORKS ══ */
.ano-eyebrow {
   color: #00C2A8 !important
}

.ano-how-grid {
   display: grid;
   grid-template-columns: 1fr 32px 1fr 32px 1fr 32px 1fr;
   gap: 0;
   align-items: center;
   margin-top: 48px
}

.ano-how-card {
   background: #fff;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-xl);
   padding: 28px 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   gap: 12px;
   transition: all var(--transition)
}

.ano-how-card:hover {
   box-shadow: var(--shadow-md);
   transform: translateY(-4px);
   border-color: #00C2A8
}

.ano-how-step {
   font-family: var(--font-heading);
   font-size: 2rem;
   font-weight: 900;
   color: rgba(0, 194, 168, .12);
   line-height: 1;
   margin-bottom: -8px
}

.ano-how-icon {
   width: 72px;
   height: 72px
}

.ano-how-icon svg {
   width: 72px;
   height: 72px
}

.ano-how-card h4 {
   font-family: var(--font-heading);
   font-size: .88rem;
   font-weight: 800;
   color: var(--color-navy)
}

.ano-how-card p {
   font-family: var(--font-heading);
   font-size: .74rem;
   color: var(--color-slate);
   line-height: 1.65
}

.ano-how-tags {
   display: flex;
   gap: 4px;
   flex-wrap: wrap;
   justify-content: center
}

.ano-how-tags span {
   font-family: var(--font-heading);
   font-size: .6rem;
   font-weight: 600;
   padding: 2px 8px;
   border-radius: 100px;
   background: rgba(0, 194, 168, .08);
   color: #00C2A8;
   border: 1px solid rgba(0, 194, 168, .2)
}

.ano-how-connector {
   display: flex;
   align-items: center;
   justify-content: center;
   color: #00C2A8;
   font-size: .9rem;
   opacity: .7
}

/* ══ ANOMALY TYPES ══ */
.ano-types-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px;
   margin-top: 48px
}

.ano-type-card {
   background: #fff;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-xl);
   padding: 24px 20px;
   display: flex;
   flex-direction: column;
   gap: 12px;
   transition: all var(--transition);
   border-top: 3px solid var(--ano-accent, #00C2A8)
}

.ano-type-card:hover {
   box-shadow: var(--shadow-md);
   transform: translateY(-4px)
}

.ano-type-icon {
   width: 64px;
   height: 64px;
   background: rgba(0, 0, 0, .02);
   border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center
}

.ano-type-icon svg {
   width: 64px;
   height: 64px
}

.ano-type-card h4 {
   font-family: var(--font-heading);
   font-size: .88rem;
   font-weight: 800;
   color: var(--color-navy)
}

.ano-type-bullets {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 6px
}

.ano-type-bullets li {
   display: flex;
   align-items: center;
   gap: 7px;
   font-family: var(--font-heading);
   font-size: .72rem;
   color: var(--color-slate)
}

.ano-type-bullets i {
   color: var(--ano-accent, #00C2A8);
   font-size: .5rem;
   flex-shrink: 0
}

/* ══ FEATURE ROWS ══ */
.ano-rows {
   background: var(--color-off-white)
}

.ano-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 56px;
   align-items: center;
   padding-block: 56px;
   border-bottom: 1px solid var(--color-border)
}

.ano-row:last-child {
   border-bottom: none
}

.ano-row--flip .ano-row__text {
   order: 2
}

.ano-row--flip .ano-row__visual {
   order: 1
}

.ano-row__icon {
   width: 52px;
   height: 52px;
   border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.15rem;
   margin-bottom: 14px
}

.ano-ri--teal {
   background: rgba(0, 194, 168, .1);
   color: #00C2A8
}

.ano-ri--amber {
   background: rgba(245, 158, 11, .1);
   color: #f59e0b
}

.ano-row__text h3 {
   font-size: 1.35rem;
   font-weight: 800;
   color: var(--color-navy);
   margin-bottom: 10px;
   line-height: 1.2
}

.ano-row__text p {
   font-size: .88rem;
   line-height: 1.75;
   color: var(--color-slate);
   margin-bottom: 16px
}

.ano-points {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 8px
}

.ano-points li {
   display: flex;
   align-items: center;
   gap: 9px;
   font-family: var(--font-heading);
   font-size: .8rem;
   color: var(--color-charcoal)
}

.ano-points i {
   font-size: .72rem;
   flex-shrink: 0;
   color: #00C2A8
}

.ano-points--amber i {
   color: #f59e0b
}

.ano-vis-card {
   background: #fff;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-xl);
   overflow: hidden;
   box-shadow: 0 8px 32px rgba(0, 194, 168, .07), 0 2px 8px rgba(0, 0, 0, .04)
}

.ano-vc-bar {
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 11px 16px;
   background: var(--color-off-white);
   border-bottom: 1px solid var(--color-border);
   font-family: var(--font-heading);
   font-size: .78rem;
   font-weight: 600;
   color: var(--color-charcoal)
}

/* Compare table */
.ano-compare {
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   overflow: hidden;
   margin: 12px 16px
}

.ano-cmp-row {
   display: grid;
   grid-template-columns: 1.2fr 1fr 1fr;
   font-family: var(--font-heading);
   font-size: .75rem
}

.ano-cmp-row--header {
   background: var(--color-navy)
}

.ano-cmp-row--header span {
   color: rgba(255, 255, 255, .6);
   font-size: .63rem;
   font-weight: 700;
   letter-spacing: .06em;
   padding: 8px 12px
}

.ano-cmp-row--header span:last-child {
   color: #00C2A8
}

.ano-cmp-row:not(.ano-cmp-row--header) {
   border-bottom: 1px solid var(--color-border);
   transition: background var(--transition)
}

.ano-cmp-row:not(.ano-cmp-row--header):hover {
   background: var(--color-off-white)
}

.ano-cmp-row:not(.ano-cmp-row--header) span {
   padding: 9px 12px
}

.ano-cmp-row:not(.ano-cmp-row--header) span:first-child {
   color: var(--color-navy);
   font-weight: 600
}

.ano-cmp-no {
   color: var(--color-slate)
}

.ano-cmp-yes {
   color: #00C2A8;
   font-weight: 700
}

/* RCA section */
.ano-rca-section {
   padding: 12px 16px
}

.ano-rca-title {
   font-family: var(--font-heading);
   font-size: .66rem;
   color: var(--color-slate);
   margin-bottom: 9px
}

.ano-rca-row {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 8px;
   font-family: var(--font-heading);
   font-size: .7rem
}

.ano-rca-name {
   min-width: 140px;
   color: var(--color-slate);
   font-size: .67rem
}

.ano-rca-bar {
   flex: 1;
   height: 7px;
   background: #f1f5f9;
   border-radius: 4px;
   overflow: hidden
}

.ano-rca-bar div {
   height: 100%;
   border-radius: 4px
}

.ano-rca-val {
   min-width: 74px;
   text-align: right;
   font-weight: 700;
   font-size: .68rem
}

/* TTF */
.ano-ttf {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px 16px;
   background: rgba(239, 68, 68, .04);
   border-top: 1px solid rgba(239, 68, 68, .12);
   margin-top: 4px
}

.ano-ttf-icon {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: rgba(239, 68, 68, .1);
   color: #ef4444;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: .9rem;
   flex-shrink: 0
}

.ano-ttf-body {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 2px
}

.ano-ttf-body strong {
   font-family: var(--font-heading);
   font-size: .78rem;
   font-weight: 700;
   color: var(--color-navy)
}

.ano-ttf-body span {
   font-family: var(--font-heading);
   font-size: .68rem;
   color: var(--color-slate)
}

.ano-ttf-badge {
   padding: 3px 12px;
   border-radius: 100px;
   background: #ef4444;
   color: #fff;
   font-family: var(--font-heading);
   font-size: .62rem;
   font-weight: 800;
   flex-shrink: 0
}

.ano-vc-footer {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 8px 16px;
   background: var(--color-off-white);
   border-top: 1px solid var(--color-border);
   font-family: var(--font-heading);
   font-size: .69rem;
   color: var(--color-slate)
}

.ano-vc-footer span {
   display: flex;
   align-items: center;
   gap: 5px
}

/* ══ INDUSTRIES ══ */
.ano-ind-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 12px
}

.ano-ind-card {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 14px 16px;
   background: var(--color-off-white);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-xl);
   transition: all var(--transition)
}

.ano-ind-card:hover {
   background: #fff;
   border-color: #00C2A8;
   box-shadow: var(--shadow-md);
   transform: translateX(3px)
}

.ano-ind-icon {
   width: 42px;
   height: 42px;
   border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: .95rem;
   flex-shrink: 0
}

.ano-ind-body {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 2px
}

.ano-ind-body strong {
   font-family: var(--font-heading);
   font-size: .8rem;
   font-weight: 700;
   color: var(--color-navy)
}

.ano-ind-body span {
   font-family: var(--font-heading);
   font-size: .64rem;
   color: var(--color-slate)
}

.ano-ind-arr {
   font-size: .75rem;
   opacity: 0;
   transition: all var(--transition)
}

.ano-ind-card:hover .ano-ind-arr {
   opacity: 1;
   transform: translateX(3px)
}

/* ══ METRICS ══ */
.ano-metrics {
   background: var(--color-navy);
   padding-block: 48px
}

.ano-metrics__grid {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 20px
}

.ano-metric {
   flex: 1;
   min-width: 110px;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 5px
}

.ano-metric>i {
   font-size: 1.2rem;
   color: rgba(255, 255, 255, .55);
   margin-bottom: 2px
}

.ano-metric strong {
   font-family: var(--font-heading);
   font-size: 1.35rem;
   font-weight: 900;
   color: #fff;
   line-height: 1
}

.ano-metric span {
   font-family: var(--font-heading);
   font-size: .7rem;
   color: rgba(255, 255, 255, .6);
   font-weight: 500
}

/* ══ CTA ══ */
.ano-cta {
   background: #fff
}

.ano-cta__inner {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 48px;
   align-items: center;
   background: linear-gradient(135deg, rgba(0, 194, 168, .04) 0%, rgba(0, 194, 168, .01) 100%);
   border: 1px solid rgba(0, 194, 168, .15);
   border-radius: var(--radius-xl);
   padding: 52px 48px
}

.ano-cta__icons {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px
}

.ano-cta-icon-box {
   width: 64px;
   height: 64px;
   border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.3rem;
   transition: all var(--transition)
}

.ano-cta-icon-box:hover {
   transform: scale(1.08)
}

.ano-cta__text {
   display: flex;
   flex-direction: column;
   gap: 14px
}

.ano-cta__text h2 {
   font-family: var(--font-heading);
   font-size: clamp(1.6rem, 3vw, 2.3rem);
   font-weight: 900;
   color: var(--color-navy);
   line-height: 1.15
}

.ano-cta__text p {
   font-size: .9rem;
   color: var(--color-slate);
   line-height: 1.75;
   max-width: 520px
}

.ano-cta__btns {
   display: flex;
   gap: 12px;
   flex-wrap: wrap
}

/* ══ RESPONSIVE ══ */
@media(max-width:1200px) {
   .ano-types-grid {
      grid-template-columns: repeat(3, 1fr)
   }

   .ano-ind-grid {
      grid-template-columns: repeat(2, 1fr)
   }
}

@media(max-width:1024px) {
   .ano-hero__inner {
      grid-template-columns: 1fr
   }

   .ano-hero__visual {
      display: none
   }

   .ano-how-grid {
      grid-template-columns: 1fr;
      gap: 16px
   }

   .ano-how-connector {
      transform: rotate(90deg)
   }

   .ano-row {
      grid-template-columns: 1fr
   }

   .ano-row--flip .ano-row__text,
   .ano-row--flip .ano-row__visual {
      order: unset
   }

   .ano-cta__inner {
      grid-template-columns: 1fr
   }

   .ano-cta__icons {
      display: none
   }
}

@media(max-width:768px) {
   .ano-types-grid {
      grid-template-columns: repeat(1, 1fr);
   }

   .ano-hero__chips {
      grid-template-columns: 1fr
   }

   .ano-ind-grid {
      grid-template-columns: 1fr
   }

   .ano-metrics__grid {
      justify-content: center
   }
}