/* Automations Showcase Page CSS */
.auto-main{
  max-width:1320px;
  margin:0 auto;
  padding:60px 24px 100px;
}
.auto-hero{ text-align:center; margin-bottom:64px }
.auto-hero-inner{ max-width:780px; margin:0 auto }
.auto-hero h1{
  font-size:clamp(32px, 5vw, 56px);
  letter-spacing:-0.02em;
  margin-bottom:16px;
  line-height:1.05;
}
.auto-hero h1 span{ color:var(--orange) }
.auto-hero .lead{
  color:var(--muted);
  font-size:16px;
  line-height:1.65;
}

.auto-section{ margin-bottom:72px }
.auto-section-head{ margin-bottom:28px }
.auto-section-head h2{
  font-size:clamp(22px, 3vw, 30px);
  letter-spacing:-0.01em;
  margin-bottom:8px;
}
.auto-section-head h2 span{ color:var(--orange) }
.auto-section-head p{ color:var(--muted); font-size:14px; max-width:680px; line-height:1.6 }

.auto-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(380px, 1fr));
  gap:24px;
}

/* Card */
.wf-card{
  background: linear-gradient(180deg, rgba(15,18,23,.78), rgba(12,14,18,.78));
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  overflow:hidden;
  cursor:pointer;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
}
.wf-card:hover{
  transform: translateY(-4px);
  border-color: rgba(244,127,21,.35);
  box-shadow: 0 18px 48px rgba(0,0,0,.4), 0 8px 24px rgba(244,127,21,.18);
}
.wf-preview{
  aspect-ratio: 16/9;
  background:
    radial-gradient(circle at 50% 40%, rgba(244,127,21,.05), transparent 70%),
    rgba(7,10,18,.5);
  overflow:hidden;
  position:relative;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.wf-preview .wf-svg{ width:100%; height:100%; display:block }
.wf-info{ padding:22px 24px; display:flex; flex-direction:column; flex:1 }
.wf-info .meta{
  font-size:11px;
  color:var(--orange);
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:600;
}
.wf-info h3{ font-size:18px; margin-bottom:8px; letter-spacing:-0.01em }
.wf-info p{ font-size:14px; color:var(--muted); line-height:1.55; margin-bottom:16px; flex:1 }
.wf-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:auto }
.wf-tag{
  font-size:11px;
  color:var(--orange);
  border:1px solid rgba(244,127,21,.28);
  padding:3px 10px;
  border-radius:999px;
  font-weight:600;
  letter-spacing:.03em;
}

/* Animations: pulse + flow only visible on hover */
.wf-pulse{ opacity:0; transition:opacity .3s ease }
.wf-edge-flow{ opacity:0; transition:opacity .3s ease; animation:flow 1.5s linear infinite }
.wf-card:hover .wf-pulse{ opacity:1 }
.wf-card:hover .wf-edge-flow{ opacity:1 }
@keyframes flow{ to{ stroke-dashoffset:-24 } }

/* Modal */
.modal{
  display:none;
  position:fixed; inset:0; z-index:1000;
  background:rgba(7,10,18,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:32px;
  overflow:auto;
}
.modal.open{ display:block; animation:fadeIn .3s ease }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.modal-inner{
  max-width:1680px;
  margin:0 auto;
  background: linear-gradient(180deg, rgba(15,18,23,.96), rgba(12,14,18,.96));
  border:1px solid rgba(244,127,21,.25);
  border-radius:24px;
  overflow:hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.modal-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:24px 32px;
  border-bottom:1px solid rgba(255,255,255,.08);
  gap:16px;
}
.modal-category{
  font-size:11px;
  color:var(--orange);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:600;
  margin-bottom:4px;
}
.modal-head h2{ font-size:24px; letter-spacing:-0.01em }
.modal-head h2 span{ color:var(--orange) }
.modal-close{
  background:transparent;
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
  padding:8px 18px;
  border-radius:10px;
  cursor:pointer;
  font-size:13px;
  transition:all .15s;
  flex-shrink:0;
}
.modal-close:hover{ border-color:var(--orange); color:var(--orange) }
.modal-canvas{
  padding:32px;
  background: radial-gradient(circle at 50% 50%, rgba(244,127,21,.04), transparent 70%);
  min-height:60vh;
}
.modal-canvas .wf-svg{
  width:100%;
  max-height:70vh;
  min-height:400px;
}
.modal .wf-pulse{ opacity:1 }
.modal .wf-edge-flow{ opacity:1 }
.modal-body{ padding:0 32px 32px; color:var(--muted); font-size:15px; line-height:1.75 }
.modal-stats{ display:flex; gap:32px; margin-top:24px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08); flex-wrap:wrap }
.modal-stat{ font-size:13px }
.modal-stat b{ display:block; font-size:24px; color:var(--orange); font-weight:700; margin-bottom:4px }

.auto-cta-section{
  text-align:center;
  padding:64px 24px;
  margin-top:48px;
  border-top:1px solid rgba(255,255,255,.06);
}
.auto-cta-section h3{ font-size:clamp(24px, 3vw, 32px); margin-bottom:12px; letter-spacing:-0.01em }
.auto-cta-section h3 span{ color:var(--orange) }
.auto-cta-section p{ color:var(--muted); font-size:15px; max-width:560px; margin:0 auto; line-height:1.6 }

@media (max-width: 720px){
  .auto-main{ padding:40px 18px 60px }
  .auto-grid{ grid-template-columns:1fr; gap:16px }
  .modal{ padding:12px }
  .modal-head{ padding:18px; flex-direction:column; gap:8px }
  .modal-canvas{ padding:16px; min-height:50vh }
  .modal-body{ padding:0 18px 18px }
  .modal-stats{ gap:18px }
}