/* Technology + "How it works" sections restyled to match the dark, cinematic front page */

#technology.section-light,.how-section.section-light{
  --fm-ink:#0d0f0c;--fm-cream:#fffaf2;--fm-gold:#f4d8ba;--fm-text:#c9cbbf;--fm-muted:#8f9387;--fm-line:#ffffff1c;
  position:relative;isolation:isolate;overflow:hidden;color:var(--fm-cream);background:var(--fm-ink)}

/* Flame glow backdrop, echoing the hero video */
#technology.section-light:before,.how-section.section-light:before{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:url(../media/combustion-fullscreen-poster.jpg) center/cover no-repeat;filter:blur(40px) saturate(1.1);opacity:.22;transform:scale(1.15)}
#technology.section-light:after,.how-section.section-light:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 85% 15%,#f38a501f,transparent 70%),linear-gradient(180deg,#040504f2,#0d0f0cd9 35%,#0d0f0ce6 75%,#040504)}
.how-section.section-light:before{background-position:30% 70%;opacity:.16}
.how-section.section-light:after{background:radial-gradient(ellipse 55% 60% at 10% 85%,#f38a501a,transparent 70%),linear-gradient(180deg,#040504,#0d0f0ce0 40%,#040504f5)}

/* Typography shared with the hero */
#technology .eyebrow,.how-section .eyebrow{color:#eee9de}
#technology .section-number{color:var(--fm-muted)}
#technology h2,.how-section h2{color:var(--fm-cream)}
#technology h2 em,.how-section h2 em{color:var(--fm-gold)}
#technology .intro-explanation{border-left-color:#f38a5055}
#technology .intro-explanation>p:first-child{color:var(--fm-cream)}
#technology .intro-explanation>p:last-child{color:var(--fm-text)}

/* ---------- Capability cards ---------- */
#technology .capability,#technology .capability:first-child,#technology .capability:last-child{
  background:linear-gradient(160deg,#ffffff0d,#ffffff03 45%,#f38a5008);border:1px solid var(--fm-line);
  box-shadow:inset 0 1px 0 #ffffff12,0 30px 60px #00000040;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease),transform .45s var(--ease),background .45s}
#technology .capability:before{content:'';display:block!important;position:absolute;left:0;right:0;top:0;width:auto;height:1px;border:0;border-radius:0;transform:none;box-shadow:none;z-index:1;
  background:linear-gradient(90deg,transparent,#ffaa7080,transparent);opacity:.35;transition:opacity .45s}
#technology .capability-top>span{color:var(--fm-muted);font-variant-numeric:tabular-nums}
#technology .capability-top svg{color:#f0a070;stroke:currentColor;fill:none;opacity:.9}
#technology .capability-field{color:#ffaa70}
#technology .capability-field svg{opacity:.75;-webkit-mask-image:linear-gradient(90deg,#0004,#000 45%,#000 70%,#0006);mask-image:linear-gradient(90deg,#0004,#000 45%,#000 70%,#0006)}
#technology .capability-field>span{background:linear-gradient(100deg,transparent 35%,#ffd2a522 50%,transparent 65%)}
#technology .capability h3{color:var(--fm-cream)}
#technology .capability>p{color:var(--fm-text)}
@media(hover:hover){
  #technology .capability:hover,.js #technology .capability.reveal.is-visible:hover{transform:translateY(-5px);border-color:#f38a5055;
    background:linear-gradient(160deg,#ffffff12,#ffffff04 45%,#f38a5014);box-shadow:inset 0 1px 0 #ffffff1a,0 34px 70px #00000055,0 0 60px #f38a5014}
  #technology .capability:hover:before{opacity:1}
  #technology .capability:hover .capability-field svg{opacity:1}
}

/* ---------- Steps ---------- */
.how-section .how-intro>p:not(.eyebrow){color:var(--fm-text)}
.how-section .dark-link{color:var(--fm-cream)}
.how-section .dark-link:hover{color:#ff9d67}
.how-section .text-button{border-color:#ffffff40}
.how-section .how-steps:before{background:linear-gradient(#f38a5000,#f38a5099 15%,#f38a5099 85%,#f38a5000)}
.how-section .how-step{background:linear-gradient(120deg,#ffffff0c,#ffffff03);border:1px solid var(--fm-line);
  box-shadow:inset 0 1px 0 #ffffff10,0 24px 50px #00000038;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.how-section .how-step:after{background:radial-gradient(circle at 100% 0,#f38a5014,transparent 60%);width:160px}
.how-section .how-step:before{background:#f38a50;border-color:#0d0f0c;box-shadow:0 0 0 1px #f38a5066,0 0 14px #f38a5099}
.how-section .how-step .step-index{color:#f0a070}
.how-section .how-step h3{color:var(--fm-cream)}
.how-section .how-step p{color:var(--fm-text)}
.how-section .how-step .step-mark{color:#f0a070;transition:transform .35s var(--ease)}
@media(hover:hover){
  .how-section .how-step:hover{border-color:#f38a5050;background:linear-gradient(120deg,#ffffff12,#f38a500a)}
  .how-section .how-step:hover .step-mark{transform:translate(3px,-3px)}
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #technology .capability,.how-section .how-step{background:#171a16}
}