/* ===================== Page hero ===================== */
.asl-hero{
  padding:64px 0 var(--section-pad-y-sm);
}
.asl-hero-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:48px;
  align-items:start;
}
.asl-hero-inner{
  max-width:none;
}
.asl-hero h1{
  font-size:clamp(2.1rem, 4.2vw, 3.1rem);
  line-height:1.1;
  font-weight:800;
  letter-spacing:-0.035em;
  margin:0 0 20px;
}
.asl-hero-lede{
  font-size:1.1rem;
  line-height:1.55;
  color:var(--text-secondary);
  margin-bottom:28px;
}
.asl-hero-lede strong{color:var(--text-primary);font-weight:600;}

.asl-hero-cta{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

/* ===================== Hero widget: the AI Security Lead preview ===================== */
/* Reuses .talk-panel/.orb-stage/.sek-*/.talk-chat-input/.talk-reply/.talk-caption
   from hero.css, so the widget matches the homepage's Sekorti agent visual
   language exactly rather than introducing a second dark-card component. */
.asl-hero-widget{
  margin-top:0;
  max-width:none;
}
.asl-live-dot{
  position:relative;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--success);
  flex-shrink:0;
}
.asl-live-dot::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  background:var(--success);
  opacity:.35;
  animation:asl-dot-ping 2.2s ease-out infinite;
}
@keyframes asl-dot-ping{
  0%{transform:scale(0.6);opacity:.5;}
  100%{transform:scale(2.2);opacity:0;}
}
.asl-widget-title{
  font-size:0.86rem;
  font-weight:700;
  color:#fff;
}
.asl-widget-badge{
  padding:2px 9px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.12);
  color:var(--text-on-navy-dim);
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  margin-left:auto;
}

.asl-widget-heading{
  text-align:center;
  color:#fff;
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:-0.015em;
  margin:0 0 4px;
}
.asl-widget-sub{
  text-align:center;
  color:var(--text-on-navy-dim);
  font-size:0.85rem;
  line-height:1.5;
  margin-bottom:18px;
}

.asl-prompt-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:16px;
}
.asl-prompt{
  padding:9px 12px;
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.05);
  border:1px solid var(--border-on-navy);
  color:#e7ecff;
  font-size:0.78rem;
  line-height:1.35;
  text-align:left;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease;
}
.asl-prompt:hover,
.asl-prompt:focus-visible{
  background:rgba(255,255,255,.1);
  border-color:rgba(148,180,255,.4);
}
.asl-prompt.is-active{
  border-color:var(--brand-secondary);
  background:rgba(93,131,255,.16);
}

.talk-reply .asl-source{
  display:flex;
  margin-top:8px;
  color:var(--text-on-navy-dim);
}
.talk-reply a{
  color:#9db4ff;
  font-weight:600;
  text-decoration:underline;
}

/* ===================== Shared section head ===================== */
.asl-section-head{
  max-width:620px;
  margin-bottom:36px;
}
.asl-section-head p{
  margin-top:14px;
  font-size:1rem;
  color:var(--text-secondary);
}

/* ===================== See it working: chat transcript ===================== */
.asl-demo{
  background:var(--surface);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.asl-transcript{
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:640px;
  margin:0 auto 22px;
}
.asl-msg{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.asl-msg-visitor{
  flex-direction:row-reverse;
  align-self:flex-end;
  max-width:78%;
}
.asl-msg-sekorti{
  align-self:flex-start;
  max-width:88%;
}
.asl-avatar{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;height:28px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--brand-primary-soft);
  color:var(--brand-primary);
}
.asl-avatar svg{width:15px;height:15px;}
.asl-msg-visitor .asl-avatar{
  background:var(--border);
  color:var(--text-secondary);
}
.asl-bubble{
  padding:12px 15px;
  border-radius:var(--radius-md);
  font-size:0.94rem;
  line-height:1.55;
}
.asl-msg-visitor .asl-bubble{
  background:var(--text-primary);
  color:#fff;
  border-bottom-right-radius:4px;
}
.asl-msg-sekorti .asl-bubble{
  background:var(--background);
  border:1px solid var(--border);
  color:var(--text-primary);
  border-bottom-left-radius:4px;
}
.asl-source{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:8px;
  font-size:0.74rem;
  font-weight:600;
  color:var(--text-tertiary);
}
.asl-source svg{width:11px;height:11px;}

.asl-transcript-note{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:0.88rem;
  color:var(--text-tertiary);
}
.asl-transcript-note a{
  font-weight:600;
  color:var(--brand-primary);
}

/* ===================== How it works: 3 steps ===================== */
.asl-steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
}
.asl-step{
  display:flex;
  flex-direction:column;
}
.asl-step-num{
  font-size:0.78rem;
  font-weight:700;
  color:var(--brand-primary);
  letter-spacing:0.04em;
  margin-bottom:14px;
}
.asl-step-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;height:46px;
  border-radius:14px;
  background:var(--brand-primary-soft);
  color:var(--brand-primary);
  margin-bottom:16px;
}
.asl-step-icon svg{width:22px;height:22px;}
.asl-step h3{
  font-size:1.05rem;
  font-weight:700;
  margin:0 0 8px;
}
.asl-step p{
  font-size:0.92rem;
  line-height:1.55;
  color:var(--text-secondary);
}

/* ===================== Why it's different ===================== */
.asl-different{
  background:var(--surface);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.asl-contrasts{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.asl-contrast{
  background:var(--background);
  padding:26px 24px;
}
.asl-contrast-not{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--text-tertiary);
  margin-bottom:12px;
}
.asl-contrast-not svg{width:13px;height:13px;color:var(--danger);}
.asl-contrast h3{
  font-size:1rem;
  font-weight:700;
  margin:0 0 8px;
}
.asl-contrast p{
  font-size:0.9rem;
  line-height:1.55;
  color:var(--text-secondary);
}

/* ===================== Capabilities ===================== */
.asl-capabilities{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px 32px;
}
.asl-cap{
  display:flex;
  gap:16px;
  padding:22px 0;
  border-top:1px solid var(--border);
}
.asl-cap:nth-of-type(1),
.asl-cap:nth-of-type(2){border-top:0;}
.asl-cap-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;height:42px;
  flex-shrink:0;
  border-radius:12px;
  background:var(--brand-primary-soft);
  color:var(--brand-primary);
}
.asl-cap-icon svg{width:20px;height:20px;}
.asl-cap h3{
  font-size:0.98rem;
  font-weight:700;
  margin:0 0 5px;
}
.asl-cap p{
  font-size:0.88rem;
  line-height:1.5;
  color:var(--text-secondary);
}

/* ===================== FAQ ===================== */
.asl-faq{
  background:var(--surface);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.asl-faq-list{
  max-width:720px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
}
.asl-faq-item{
  border-bottom:1px solid var(--border);
}
.asl-faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 4px;
  font-size:0.98rem;
  font-weight:600;
  color:var(--text-primary);
  cursor:pointer;
  list-style:none;
}
.asl-faq-item summary::-webkit-details-marker{display:none;}
.asl-faq-item summary svg{
  width:18px;height:18px;
  flex-shrink:0;
  color:var(--text-tertiary);
  transition:transform .15s ease;
}
.asl-faq-item[open] summary svg{transform:rotate(45deg);}
.asl-faq-item p{
  padding:0 4px 20px;
  max-width:620px;
  font-size:0.92rem;
  line-height:1.6;
  color:var(--text-secondary);
}

/* ===================== Try it / final CTA ===================== */
.asl-cta{
  text-align:center;
}
.asl-cta-inner{
  max-width:560px;
  margin:0 auto;
}
.asl-cta h2{
  font-size:clamp(1.7rem, 3vw, 2.2rem);
  font-weight:800;
  letter-spacing:-0.03em;
  margin:0 0 14px;
}
.asl-cta p{
  font-size:1rem;
  color:var(--text-secondary);
  margin-bottom:28px;
}
.asl-cta .domain-scanner{
  max-width:520px;
  margin:0 auto;
}
.asl-cta .field-row{padding:8px;}
.asl-cta .field-row input{font-size:1.02rem;}
.asl-cta-secondary{
  margin-top:16px;
  font-size:0.9rem;
  color:var(--text-tertiary);
}
.asl-cta-secondary a{font-weight:600;color:var(--brand-primary);}

.scan-inline-result{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  padding:12px 14px;
  border-radius:var(--radius-md);
  background:var(--brand-primary-soft);
  color:var(--text-primary);
  font-size:0.88rem;
  text-align:left;
}
.scan-inline-result svg{width:16px;height:16px;color:var(--brand-primary);flex-shrink:0;}
.scan-inline-result.error{background:var(--danger-bg);color:var(--text-primary);}
.scan-inline-result.error svg{color:var(--danger);}
.scan-inline-result .spinner{
  width:14px;height:14px;
  border-radius:50%;
  border:2px solid var(--border-strong);
  border-top-color:var(--brand-primary);
  flex-shrink:0;
  animation:asl-spin .7s linear infinite;
}
@keyframes asl-spin{to{transform:rotate(360deg);}}

/* ===================== Responsive ===================== */
@media (max-width: 980px){
  .asl-hero-grid{grid-template-columns:1fr;}
  .asl-hero-widget{max-width:520px;}
}

@media (max-width: 860px){
  .asl-steps{grid-template-columns:1fr;gap:28px;}
  .asl-prompt-grid{grid-template-columns:1fr;}
  .asl-contrasts{grid-template-columns:1fr;}
  .asl-capabilities{grid-template-columns:1fr;gap:0;}
  .asl-cap{padding:20px 0;}
  .asl-cap:nth-of-type(2){border-top:1px solid var(--border);}
  .asl-msg-visitor,.asl-msg-sekorti{max-width:92%;}
}

@media (prefers-reduced-motion: reduce){
  .scan-inline-result .spinner{animation:none;}
}