/* ============================================================ */
/* APPLIED AI IN PRODUCTION — listing + detail page styles       */
/* ============================================================ */

/* === LISTING PAGE === */
.applied-listing{
  padding:140px 0 120px;
  background:linear-gradient(180deg, var(--obsidian) 0%, var(--void) 100%);
  position:relative;
}
.applied-listing::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(212,162,76,0.06), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(212,162,76,0.04), transparent 50%);
  pointer-events:none;
}
.applied-listing .container{position:relative; z-index:1}

.applied-listing .section-head{
  text-align:left;
  margin-bottom:80px;
  max-width:920px;
}
.applied-listing .section-head .eyebrow{
  display:inline-block;
  font-family:var(--mono);
  font-size:0.74rem;
  letter-spacing:0.32em;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:24px;
  font-weight:500;
}
.applied-listing .section-head h1{
  font-family:var(--sans);
  font-size:clamp(2.8rem, 5.5vw, 4.6rem);
  font-weight:200;
  line-height:1.04;
  letter-spacing:-0.025em;
  color:var(--ivory);
  margin-bottom:32px;
}
.applied-listing .section-head h1 .italic{
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  background:linear-gradient(135deg, var(--gold-bright), var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.applied-listing .section-head .lead{
  font-size:1.05rem;
  line-height:1.65;
  color:var(--pearl);
  font-weight:300;
  max-width:680px;
}

/* CARD GRID */
.usecase-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}
@media(max-width:1200px){.usecase-grid{grid-template-columns:repeat(3, 1fr)}}
@media(max-width:900px){.usecase-grid{grid-template-columns:repeat(2, 1fr)}}
@media(max-width:600px){.usecase-grid{grid-template-columns:1fr}}

.usecase-card{
  display:flex;
  flex-direction:column;
  background:var(--ivory);
  border-radius:14px;
  text-decoration:none;
  color:inherit;
  overflow:hidden;
  transition:transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
             box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow:0 8px 24px -8px rgba(0,0,0,0.3);
}
.usecase-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 60px -12px rgba(0,0,0,0.45),
             0 0 0 1px rgba(212,162,76,0.25);
}

.usecase-card-img{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:12px;
  margin:8px 8px 0;
  background:#1a2028;
}
.usecase-card-img svg{
  width:100%;
  height:100%;
  display:block;
}

.usecase-card-body{
  padding:20px 22px 26px;
}
.usecase-card-body p{
  font-family:var(--sans);
  font-size:0.9rem;
  line-height:1.55;
  color:#5a6878;
  font-weight:400;
  margin:0;
}

/* === DETAIL PAGE === */
.uc-hero{
  position:relative;
  padding:160px 0 100px;
  background:linear-gradient(180deg, var(--obsidian) 0%, var(--void) 100%);
  overflow:hidden;
}
.uc-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(212,162,76,0.08), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(212,162,76,0.04), transparent 50%);
  pointer-events:none;
}
.uc-hero::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(212,162,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,162,76,0.04) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 70%);
  pointer-events:none;
}
.uc-hero .container{position:relative; z-index:1}

.uc-hero-grid{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:80px;
  align-items:center;
}
@media(max-width:1100px){.uc-hero-grid{grid-template-columns:1fr; gap:50px}}

.uc-hero-text .breadcrumbs{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:0.74rem;
  letter-spacing:0.18em;
  color:var(--silver);
  text-transform:uppercase;
  margin-bottom:32px;
}
.uc-hero-text .breadcrumbs a{color:var(--silver); text-decoration:none; transition:color 0.3s}
.uc-hero-text .breadcrumbs a:hover{color:var(--gold)}
.uc-hero-text .breadcrumbs .sep{color:rgba(138,149,168,0.4)}
.uc-hero-text .breadcrumbs .current{color:var(--gold)}

.uc-hero-text .id-tag{
  display:inline-block;
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.32em;
  color:var(--gold);
  text-transform:uppercase;
  font-weight:500;
  margin-bottom:28px;
  padding:6px 14px;
  border:1px solid rgba(212,162,76,0.28);
  border-radius:3px;
  background:rgba(212,162,76,0.06);
}

.uc-hero-text h1{
  font-family:var(--sans);
  font-size:clamp(2.6rem, 5.2vw, 4.2rem);
  font-weight:200;
  line-height:1.05;
  letter-spacing:-0.025em;
  color:var(--ivory);
  margin-bottom:32px;
}
.uc-hero-text h1 .italic{
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  background:linear-gradient(135deg, var(--gold-bright), var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.uc-hero-text .lead{
  font-size:1.05rem;
  line-height:1.7;
  color:var(--pearl);
  font-weight:300;
  margin-bottom:42px;
  max-width:600px;
}

.uc-hero-cta{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.uc-hero-visual{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.6);
  border:1px solid var(--line);
}
.uc-hero-visual svg{display:block; width:100%; height:auto}

/* PROBLEM SECTION */
.uc-problem{
  padding:120px 0;
  background:var(--obsidian);
}
.uc-problem .pq-content{
  max-width:900px;
  margin:0 auto;
  text-align:center;
}
.uc-problem .eyebrow{
  display:inline-block;
  font-family:var(--mono);
  font-size:0.74rem;
  letter-spacing:0.32em;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:24px;
  font-weight:500;
}
.uc-problem h2{
  font-family:var(--sans);
  font-size:clamp(2rem, 4vw, 3.2rem);
  font-weight:200;
  line-height:1.18;
  letter-spacing:-0.02em;
  color:var(--ivory);
  margin-bottom:28px;
}
.uc-problem h2 .italic{
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  background:linear-gradient(135deg, var(--gold-bright), var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.uc-problem p{
  font-size:1.05rem;
  line-height:1.7;
  color:var(--pearl);
  font-weight:300;
}

/* TWO-TRACK SECTION (RETROFIT vs GREENFIELD) */
.uc-tracks{
  padding:140px 0;
  background:linear-gradient(180deg, var(--obsidian), var(--void));
  position:relative;
}
.uc-tracks .section-head{
  text-align:center;
  margin-bottom:80px;
}
.uc-tracks .section-head .eyebrow{
  display:inline-block;
  font-family:var(--mono);
  font-size:0.74rem;
  letter-spacing:0.32em;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:24px;
  font-weight:500;
}
.uc-tracks .section-head h2{
  font-family:var(--sans);
  font-size:clamp(2.4rem, 4.5vw, 3.6rem);
  font-weight:200;
  line-height:1.1;
  color:var(--ivory);
  letter-spacing:-0.022em;
}
.uc-tracks .section-head h2 .italic{
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  background:linear-gradient(135deg, var(--gold-bright), var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.tracks-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}
@media(max-width:1000px){.tracks-grid{grid-template-columns:1fr}}

.track-card{
  padding:48px 40px;
  background:var(--carbon);
  border:1px solid var(--line);
  border-radius:8px;
  position:relative;
  display:flex;
  flex-direction:column;
}
.track-card.retrofit{border-top:3px solid var(--gold)}
.track-card.greenfield{border-top:3px solid var(--teal-bright, #15A3A3)}

.track-card .track-label{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.32em;
  text-transform:uppercase;
  font-weight:500;
  margin-bottom:24px;
  display:flex;
  align-items:center;
  gap:10px;
}
.track-card.retrofit .track-label{color:var(--gold)}
.track-card.greenfield .track-label{color:var(--teal-bright, #15A3A3)}
.track-card .track-label::before{
  content:'';
  width:24px;
  height:1px;
  background:currentColor;
}

.track-card h3{
  font-family:var(--sans);
  font-size:clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight:200;
  line-height:1.18;
  color:var(--ivory);
  letter-spacing:-0.018em;
  margin-bottom:24px;
}
.track-card h3 .italic{
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
}
.track-card.retrofit h3 .italic{
  background:linear-gradient(135deg, var(--gold-bright), var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.track-card.greenfield h3 .italic{
  color:var(--teal-bright, #15A3A3);
}

.track-card .track-body p{
  font-size:0.98rem;
  line-height:1.7;
  color:var(--pearl);
  font-weight:300;
  margin-bottom:18px;
}
.track-card .track-body p:last-child{margin-bottom:0}

.track-card ul{
  list-style:none;
  padding:24px 0 0;
  margin:24px 0 0;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.track-card ul li{
  position:relative;
  padding-left:24px;
  font-size:0.92rem;
  line-height:1.55;
  color:var(--ivory);
  font-weight:300;
}
.track-card.retrofit ul li::before{
  content:'';
  position:absolute;
  left:0;
  top:7px;
  width:10px;
  height:10px;
  border:1.5px solid var(--gold);
  border-radius:2px;
  transform:rotate(45deg);
  background:linear-gradient(135deg, transparent 50%, var(--gold) 50%);
}
.track-card.greenfield ul li::before{
  content:'';
  position:absolute;
  left:0;
  top:7px;
  width:10px;
  height:10px;
  border:1.5px solid var(--teal-bright, #15A3A3);
  border-radius:50%;
  background:radial-gradient(circle, var(--teal-bright, #15A3A3) 30%, transparent 30%);
}

/* PROCESS SECTION */
.uc-process{
  padding:140px 0;
  background:var(--void);
}
.uc-process .section-head{
  text-align:center;
  margin-bottom:80px;
}
.uc-process .section-head .eyebrow{
  display:inline-block;
  font-family:var(--mono);
  font-size:0.74rem;
  letter-spacing:0.32em;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:24px;
  font-weight:500;
}
.uc-process .section-head h2{
  font-family:var(--sans);
  font-size:clamp(2.4rem, 4.5vw, 3.6rem);
  font-weight:200;
  line-height:1.1;
  color:var(--ivory);
  letter-spacing:-0.022em;
}
.uc-process .section-head h2 .italic{
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  background:linear-gradient(135deg, var(--gold-bright), var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.process-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  position:relative;
}
@media(max-width:1000px){.process-grid{grid-template-columns:repeat(2, 1fr); gap:36px 0}}
@media(max-width:560px){.process-grid{grid-template-columns:1fr; gap:28px 0}}

.process-step{
  padding:32px 32px;
  position:relative;
}
.process-step:not(:last-child)::after{
  content:'';
  position:absolute;
  right:0;
  top:32px;
  bottom:32px;
  width:1px;
  background:var(--line);
}
@media(max-width:1000px){
  .process-step:nth-child(2n)::after{display:none}
  .process-step:nth-child(odd)::after{
    right:auto; left:0;
    top:auto; bottom:-18px;
    width:auto; height:1px;
    left:32px; right:32px;
  }
}

.process-step .step-num{
  font-family:var(--display);
  font-style:italic;
  font-size:2.4rem;
  font-weight:500;
  color:var(--gold);
  margin-bottom:16px;
  line-height:1;
}
.process-step h4{
  font-family:var(--sans);
  font-size:1.1rem;
  font-weight:500;
  color:var(--ivory);
  margin-bottom:14px;
  letter-spacing:-0.005em;
}
.process-step p{
  font-size:0.92rem;
  line-height:1.6;
  color:var(--silver);
  font-weight:300;
}

/* COMPATIBLE-WITH SECTION (related products + series) */
.uc-compatible{
  padding:120px 0;
  background:var(--obsidian);
}
.uc-compatible .section-head{
  text-align:center;
  margin-bottom:60px;
}
.uc-compatible .section-head .eyebrow{
  display:inline-block;
  font-family:var(--mono);
  font-size:0.74rem;
  letter-spacing:0.32em;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:24px;
  font-weight:500;
}
.uc-compatible .section-head h2{
  font-family:var(--sans);
  font-size:clamp(2rem, 4vw, 3rem);
  font-weight:200;
  line-height:1.1;
  color:var(--ivory);
}
.uc-compatible .section-head h2 .italic{
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  background:linear-gradient(135deg, var(--gold-bright), var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.compat-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
@media(max-width:900px){.compat-grid{grid-template-columns:1fr}}

.compat-card{
  display:flex;
  flex-direction:column;
  padding:32px 28px;
  background:var(--carbon);
  border:1px solid var(--line);
  border-radius:6px;
  text-decoration:none;
  color:inherit;
  transition:transform 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.compat-card:hover{
  transform:translateY(-4px);
  border-color:rgba(212,162,76,0.3);
  box-shadow:0 20px 50px -16px rgba(212,162,76,0.15);
}
.compat-card .compat-tag{
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.28em;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:14px;
  font-weight:500;
}
.compat-card h4{
  font-family:var(--sans);
  font-size:1.15rem;
  font-weight:500;
  color:var(--ivory);
  margin-bottom:10px;
}
.compat-card p{
  font-size:0.9rem;
  line-height:1.55;
  color:var(--silver);
  font-weight:300;
  flex-grow:1;
}
.compat-card .compat-arrow{
  margin-top:20px;
  display:inline-flex;
  align-items:center;
  color:var(--gold);
  transition:transform 0.3s;
}
.compat-card:hover .compat-arrow{transform:translateX(6px)}
.compat-card .compat-arrow svg{width:18px; height:18px}

/* RELATED USE CASES */
.uc-related{
  padding:120px 0;
  background:linear-gradient(180deg, var(--obsidian), var(--void));
}
.uc-related .section-head{
  text-align:center;
  margin-bottom:60px;
}
.uc-related .section-head .eyebrow{
  display:inline-block;
  font-family:var(--mono);
  font-size:0.74rem;
  letter-spacing:0.32em;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:24px;
  font-weight:500;
}
.uc-related .section-head h2{
  font-family:var(--sans);
  font-size:clamp(2rem, 4vw, 3rem);
  font-weight:200;
  line-height:1.1;
  color:var(--ivory);
}
.uc-related .section-head h2 .italic{
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  background:linear-gradient(135deg, var(--gold-bright), var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Reveal animation */
.reveal{opacity:0; transform:translateY(30px); transition:opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1)}
.reveal.visible{opacity:1; transform:translateY(0)}


/* ============================================================ */
/* SCENE MOTION — subtle animations to make composites feel live */
/* ============================================================ */
@keyframes ucPulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 0.35; }
}
@keyframes ucBlink {
  0%, 60%, 100% { opacity: 1; }
  70%, 90%      { opacity: 0.25; }
}
@keyframes ucBeamShimmer {
  0%, 100% { opacity: 0.30; }
  50%      { opacity: 0.55; }
}
@keyframes ucScanTravel {
  0%   { transform: translateY(-4px); opacity: 0.5; }
  50%  { transform: translateY(0);    opacity: 1;   }
  100% { transform: translateY(4px);  opacity: 0.5; }
}
@keyframes ucBokehDrift {
  0%, 100% { transform: translate(0, 0);     opacity: 0.6; }
  50%      { transform: translate(8px, -6px); opacity: 0.9; }
}
@keyframes ucGlow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(127, 205, 205, 0.5)); }
  50%      { filter: drop-shadow(0 0 6px rgba(127, 205, 205, 0.95)); }
}
@keyframes ucSpark {
  0%, 100% { opacity: 0;    transform: scale(0.6); }
  20%      { opacity: 0.95; transform: scale(1);   }
  60%      { opacity: 0.4;  transform: scale(0.85);}
}
@keyframes ucFlow {
  0%   { stroke-dashoffset: 0;   }
  100% { stroke-dashoffset: -36; }
}
@keyframes ucGentleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* Apply animations */
.uc-anim-pulse  { animation: ucPulse 2.4s ease-in-out infinite; }
.uc-anim-blink  { animation: ucBlink 1.6s ease-in-out infinite; }
.uc-anim-beam   { animation: ucBeamShimmer 3.8s ease-in-out infinite;
                   transform-origin: center top; }
.uc-anim-scan   { animation: ucScanTravel 2.2s ease-in-out infinite;
                   transform-box: fill-box; transform-origin: center; }
.uc-anim-bokeh-1{ animation: ucBokehDrift 8s ease-in-out infinite; }
.uc-anim-bokeh-2{ animation: ucBokehDrift 11s ease-in-out infinite reverse; }
.uc-anim-bokeh-3{ animation: ucBokehDrift 9.5s ease-in-out infinite; }
.uc-anim-glow   { animation: ucGlow 2.8s ease-in-out infinite; }
.uc-anim-spark  { animation: ucSpark 1.4s ease-in-out infinite; }
.uc-anim-spark.delay-1 { animation-delay: 0.2s; }
.uc-anim-spark.delay-2 { animation-delay: 0.5s; }
.uc-anim-spark.delay-3 { animation-delay: 0.8s; }
.uc-anim-spark.delay-4 { animation-delay: 1.1s; }
.uc-anim-spark.delay-5 { animation-delay: 0.35s; }
.uc-anim-flow   { animation: ucFlow 1.8s linear infinite; }
.uc-anim-float  { animation: ucGentleFloat 4s ease-in-out infinite; }

/* Pause all animations if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .uc-anim-pulse,
  .uc-anim-blink,
  .uc-anim-beam,
  .uc-anim-scan,
  .uc-anim-bokeh-1, .uc-anim-bokeh-2, .uc-anim-bokeh-3,
  .uc-anim-glow,
  .uc-anim-spark,
  .uc-anim-flow,
  .uc-anim-float {
    animation: none !important;
  }
}