/* AI Automation page — styles specific to ai-automation.html (shared rules live in css/site.css) */

.hero{padding:100px 0 82px;border-bottom:1px solid var(--line)}
.hero:before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;background:rgba(45,168,255,.15);filter:blur(26px);right:-170px;top:-230px}
.hero:after{content:"";position:absolute;width:400px;height:400px;border-radius:50%;background:rgba(142,240,199,.08);filter:blur(30px);left:-220px;bottom:-250px}
.hero-inner{max-width:820px}
.hero-copy{max-width:680px;margin:0 0 30px}

.tag-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px}
.tag-row span{
  border:1px solid var(--line);padding:7px 10px;border-radius:10px;
  background:rgba(255,255,255,.03);color:#aec2d3;font-size:13px
}

/* What can be automated */
.auto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.auto-card{
  padding:26px;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015))
}
.auto-card .icon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:rgba(45,168,255,.12);font-size:22px;margin-bottom:18px}
.auto-card h3{font-size:20px;margin:0 0 10px}
.auto-card ul{margin:0;padding-left:18px;color:#d5e2eb;font-size:14px}
.auto-card ul li{margin:5px 0}

/* How it works */
.steps{display:grid;gap:14px}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:16px;
  border:1px solid var(--line);border-radius:18px;padding:20px;
  background:rgba(255,255,255,.022)
}
.step-num{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:rgba(45,168,255,.11);color:#8fe5ff;font-weight:800
}
.step h3{margin:0 0 5px;font-size:18px}
.step p{margin:0;color:var(--muted);font-size:14px}

/* Positioning / principles */
.principles-section{
  background:var(--bg-soft);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)
}
.principles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.principle{
  border:1px solid var(--line);border-radius:20px;padding:24px;
  background:rgba(255,255,255,.025)
}
.principle .icon{font-size:24px;margin-bottom:14px}
.principle h3{font-size:18px;margin:0 0 10px}
.principle p{margin:0;color:var(--muted);font-size:14px}

/* Engagement offers */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.offer{padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.offer.featured{background:linear-gradient(145deg,#123454,#0d2238);border-color:rgba(98,208,255,.4)}
.offer .price{font-size:34px;font-weight:800;letter-spacing:-.03em;margin:14px 0 8px}
.offer .price small{font-size:14px;font-weight:600;color:var(--muted)}
.offer p{color:var(--muted)}

/* Before / after comparison */
.flow-compare{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.flow-col{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;background:rgba(255,255,255,.025)
}
.flow-col.after{border-color:rgba(142,240,199,.28);background:rgba(142,240,199,.05)}
.flow-col h4{margin:0 0 16px;font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:#9bb0c0}
.flow-steps{display:grid;gap:8px}
.flow-step{
  padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.03);font-size:14px;color:#d8e6ee
}
.flow-arrow{text-align:center;color:var(--brand-2);font-weight:900}
.flow-note{margin-top:20px;color:var(--muted);font-size:15px;max-width:760px}

/* FAQ */
.faq-list{display:grid;gap:12px}
.faq-item{
  border:1px solid var(--line);border-radius:16px;
  padding:18px 20px;background:rgba(255,255,255,.02)
}
.faq-item summary{
  cursor:pointer;font-weight:700;font-size:16px;color:#eaf6ff;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--brand-2);font-size:20px;flex:none}
.faq-item[open] summary::after{content:"–"}
.faq-item p{margin:12px 0 0;color:var(--muted);font-size:14px;line-height:1.6}

/* Reality-check strip */
.reality{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;background:rgba(255,255,255,.02)
}
.reality-col h4{margin:0 0 10px;font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:#9bb0c0}
.reality-col ul{margin:0;padding-left:18px;color:#d8e5ed;font-size:14px}
.reality-col ul li{margin:6px 0}

@media(max-width:920px){
  .auto-grid{grid-template-columns:1fr 1fr}
  .principles-grid{grid-template-columns:1fr 1fr}
  .offers{grid-template-columns:1fr 1fr}
  .reality{grid-template-columns:1fr}
  .flow-compare{grid-template-columns:1fr}
}
@media(max-width:640px){
  .hero{padding:66px 0 58px}
  .hero-copy{font-size:17px}
  .auto-grid,.principles-grid,.offers{grid-template-columns:1fr}
}