﻿/* Shared AI Analyzer hero section (unscoped, reusable) */
.ai-hero{
  position:relative;
  padding:34px 0 0;
  background:var(--hero-bg-ai);
  overflow-x:hidden;
}
.ai-hero__title{font-weight:950;font-size:54px;line-height:1.05;color:#3a312c;margin:0}
.ai-hero__title .accent{color:var(--red)}
.ai-hero__sub{margin:12px 0 18px;color:#5f5853;font-weight:500;font-size:16px;line-height:1.7;max-width:520px}

.ai-stepStrip{
  /* background:rgba(255,255,255,.74); */
  border:1px solid rgba(64,44,36,.10);
  box-shadow:0 18px 34px rgba(24,18,14,.10);
  border-radius:22px;
  padding:16px 18px;
  display:flex;
  justify-content:flex-start;
  align-items:stretch;
  gap:14px;
  overflow:visible;
  text-align:left;
  margin-left:0;
  margin-right:auto;
}
.ai-step{
  flex:1 1 220px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
}
.ai-step__icon{
  width:52px;height:52px;border-radius:16px;
  display:grid;place-items:center;
  background:rgba(246,198,167,.30);
  border:1px solid rgba(230,123,42,.22);
  color:var(--orange);
  flex:0 0 auto;
  box-shadow:0 12px 18px rgba(24,18,14,.10);
  font-size:22px;
}
.ai-step__title{font-weight:950;color:#3a312c;font-size:18px;line-height:1.15;margin:0}
.ai-step__desc{margin:6px 0 0;color:#6b655f;font-weight:500;font-size:13px;line-height:1.45}
.ai-step__arrow{
  align-self:center;
  color:rgba(64,44,36,.35);
  font-size:26px;
  padding:0 4px;
}

.ai-hero__media{position:relative;min-height:460px;overflow:hidden}
.ai-hero__circle{
  position:absolute;
  right:-46px;top:10px;
  width:520px;height:520px;
  border-radius:999px;
  opacity:.95;
  filter:saturate(1.02);
}
.ai-hero__particles{
  position:absolute;inset:0;pointer-events:none;opacity:.70;
  background:
    radial-gradient(10px 10px at 64% 18%, rgba(255,255,255,.60), rgba(255,255,255,0) 70%),
    radial-gradient(7px 7px at 72% 30%, rgba(241,154,58,.35), rgba(255,255,255,0) 72%),
    radial-gradient(6px 6px at 86% 16%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%),
    radial-gradient(5px 5px at 92% 26%, rgba(230,123,42,.20), rgba(255,255,255,0) 72%),
    radial-gradient(4px 4px at 70% 10%, rgba(230,123,42,.16), rgba(255,255,255,0) 72%);
}
.ai-leaf{
  position:absolute;pointer-events:none;z-index:1;
  width:150px;height:110px;
  border-radius:70% 30% 60% 40% / 60% 40% 60% 40%;
  background:linear-gradient(145deg, rgba(86,102,70,.22), rgba(86,102,70,.06));
  border:1px solid rgba(86,102,70,.18);
  box-shadow:0 18px 26px rgba(24,18,14,.10);
  opacity:.90;
}
.ai-leaf:before{content:"";position:absolute;left:12px;right:14px;top:52%;height:2px;background:linear-gradient(90deg, rgba(86,102,70,.10), rgba(86,102,70,.35), rgba(86,102,70,.10));opacity:.85}
.ai-leaf--1{right:120px;bottom:74px;transform:rotate(18deg) scale(1.05)}
.ai-leaf--2{right:260px;bottom:18px;transform:rotate(40deg) scale(.92);opacity:.78}

.ai-hero__doc{
  position:absolute;
  right:-8px;bottom:-18px;
  width:min(460px, 52vw);
  height:auto;
  z-index:2;
  filter:drop-shadow(0 22px 30px rgba(24,18,14,.20));
}

.ai-hero__wave{display:block;width:100%;height:120px;margin-top:-64px;pointer-events:none}
.ai-hero__wavePath{fill:var(--cream)}

@media (max-width: 1200px){
  .ai-stepStrip{flex-wrap:wrap;align-items:flex-start}
  .ai-step{flex:1 1 280px}
  .ai-step__arrow{display:none}
}

@media (max-width: 992px){
  .ai-hero__media{min-height:360px;margin-top:10px}
  .ai-hero__circle{right:-20px;top:0;width:440px;height:440px}
  .ai-hero__doc{position:relative;right:auto;bottom:auto;width:100%;max-width:420px;margin:0 auto}
}

@media (max-width: 768px){
  .ai-stepStrip{flex-direction:column}
  .ai-step{flex:1 1 auto}
}

@media (max-width: 576px){
  .ai-hero{padding:18px 0 0}
  .ai-hero__title{font-size:40px}
  .ai-stepStrip{padding:14px}
  .ai-hero__media{min-height:260px}
  .ai-hero__circle{right:50%;top:6px;width:360px;height:360px;transform:translateX(60%)}
  .ai-leaf{width:120px;height:92px;opacity:.85}
  .ai-leaf--1{right:40px;bottom:34px;transform:rotate(18deg) scale(1)}
  .ai-leaf--2{right:140px;bottom:0;transform:rotate(40deg) scale(.9);opacity:.72}
}



.ai-hero__inner .ai-stepStrip{width:100%;max-width:680px;margin-left:0;margin-right:auto}

@media (max-width: 992px){
  .ai-hero__inner{min-height:auto}
}




