:root { color-scheme: dark; --ink:#f7fbff; --muted:rgba(231,242,250,.66); --line:rgba(106,184,255,.18); --blue:#6ab8ff; --teal:#29c7be; --purple:#9b7cff; }
* { box-sizing:border-box; }
html { background:#04090c; scroll-behavior:smooth; }
body { min-width:320px; min-height:100vh; margin:0; color:var(--ink); font-family:Inter,sans-serif; background:radial-gradient(900px 560px at 8% 0%,rgba(34,82,128,.2),transparent 68%),radial-gradient(760px 460px at 100% 100%,rgba(41,199,190,.11),transparent 70%),#04090c; }
button,a { font:inherit; }
.skip-link { position:fixed; top:12px; left:12px; z-index:20; padding:10px 14px; color:#051016; text-decoration:none; border-radius:8px; background:var(--teal); transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
.demo-header { display:flex; align-items:center; justify-content:space-between; gap:24px; width:min(100% - 48px,1280px); min-height:86px; margin:0 auto; border-bottom:1px solid var(--line); }
.demo-brand img { display:block; width:220px; height:auto; }
.demo-back { display:flex; align-items:center; gap:8px; color:rgba(231,242,250,.72); font-size:13px; font-weight:750; text-decoration:none; }
.demo-back:hover,.demo-back:focus-visible { color:var(--teal); }
.demo-back:focus-visible,.run-button:focus-visible { outline:3px solid #fff; outline-offset:4px; }
main { width:min(100% - 48px,1280px); margin:0 auto; padding:56px 0 44px; }
.demo-intro { display:grid; grid-template-columns:minmax(0,1fr) 260px; align-items:end; gap:50px; }
.demo-kicker { display:block; margin-bottom:14px; color:var(--teal); font-size:11px; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
.demo-intro h1 { margin:0; color:var(--blue); background:linear-gradient(105deg,var(--blue),var(--teal) 56%,var(--purple)); -webkit-background-clip:text; background-clip:text; font:700 clamp(48px,6vw,82px)/.98 "Space Grotesk",Inter,sans-serif; letter-spacing:-.055em; -webkit-text-fill-color:transparent; }
.demo-intro p { max-width:720px; margin:18px 0 0; color:rgba(235,244,246,.86); font-size:clamp(17px,1.6vw,21px); line-height:1.5; }
.run-button { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:72px; padding:0 22px; color:#061216; font-weight:850; cursor:pointer; border:0; border-radius:13px; background:linear-gradient(105deg,var(--blue),var(--teal)); box-shadow:0 18px 45px rgba(41,199,190,.16); }
.run-button:hover { filter:brightness(1.08); }
.run-button:disabled { cursor:progress; filter:saturate(.65); }
.run-button b { font-size:20px; }
.demo-workspace { display:grid; grid-template-columns:minmax(300px,.8fr) minmax(520px,1.45fr); gap:18px; margin-top:44px; }
.lead-panel,.timeline-panel { min-width:0; padding:28px; border:1px solid var(--line); border-radius:18px; background:radial-gradient(420px 240px at 100% 0%,rgba(106,184,255,.08),transparent 70%),linear-gradient(145deg,rgba(11,28,40,.94),rgba(10,13,27,.97)); box-shadow:0 28px 80px -38px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.045); }
.panel-topline,.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.panel-topline>span,.panel-heading>div:first-child>span { color:var(--blue); font-size:10px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.panel-topline>b { padding:7px 10px; color:rgba(235,244,246,.62); font-size:9px; border:1px solid rgba(106,184,255,.17); border-radius:999px; background:rgba(255,255,255,.025); }
.lead-person { display:flex; align-items:center; gap:15px; margin-top:24px; }
.lead-person>span { display:grid; flex:0 0 54px; width:54px; height:54px; color:#061216; font-size:15px; font-weight:900; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--teal)); place-items:center; }
.lead-person h2,.panel-heading h2 { margin:0; font:700 25px/1.05 "Space Grotesk",Inter,sans-serif; letter-spacing:-.035em; }
.lead-person p { margin:6px 0 0; color:var(--muted); font-size:13px; }
.lead-details { display:grid; gap:0; margin:26px 0 0; padding:0; border-top:1px solid rgba(106,184,255,.12); }
.lead-details>div { display:grid; grid-template-columns:1fr auto; gap:18px; padding:13px 0; border-bottom:1px solid rgba(106,184,255,.1); }
.lead-details dt,.lead-details dd { margin:0; font-size:12px; }
.lead-details dt { color:rgba(235,244,246,.5); font-weight:650; }
.lead-details dd { color:rgba(235,244,246,.86); font-weight:750; text-align:right; }
.lead-message { margin-top:22px; padding:16px; border:1px solid rgba(41,199,190,.16); border-radius:12px; background:rgba(41,199,190,.035); }
.lead-message span { color:var(--teal); font-size:9px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.lead-message p { margin:9px 0 0; color:rgba(235,244,246,.76); font-size:13px; line-height:1.55; }
.panel-heading h2 { margin-top:7px; font-size:29px; }
.automation-state { display:flex; align-items:center; gap:8px; min-width:92px; padding:9px 12px; color:rgba(235,244,246,.7); font-size:10px; font-weight:800; border:1px solid rgba(106,184,255,.16); border-radius:999px; background:rgba(255,255,255,.025); }
.automation-state i { width:8px; height:8px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 4px rgba(106,184,255,.1); }
.automation-state.is-running i { background:var(--teal); box-shadow:0 0 0 4px rgba(41,199,190,.1); animation:state-pulse 1.1s ease-in-out infinite; }
.automation-state.is-complete i { background:var(--teal); animation:none; }
.follow-timeline { display:grid; gap:9px; margin:24px 0 0; padding:0; list-style:none; }
.follow-timeline li { display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:13px; padding:14px; border:1px solid rgba(106,184,255,.11); border-radius:12px; background:rgba(255,255,255,.022); opacity:0; transform:translateY(9px); transition:border-color 260ms ease,background 260ms ease,transform 480ms cubic-bezier(.22,1,.36,1),opacity 420ms ease; }
.follow-timeline li.is-revealed { opacity:1; transform:translateY(0); }
.follow-timeline li>i { display:grid; width:38px; height:38px; color:rgba(235,244,246,.66); font-style:normal; border:1px solid rgba(106,184,255,.18); border-radius:50%; background:rgba(255,255,255,.03); place-items:center; }
.follow-timeline li>i span { font-size:11px; font-weight:900; }
.follow-timeline small,.follow-timeline strong,.follow-timeline p { display:block; }
.follow-timeline small { color:rgba(235,244,246,.46); font-size:9px; font-weight:700; }
.follow-timeline strong { margin-top:4px; color:rgba(235,244,246,.9); font-size:13px; }
.follow-timeline p { margin:5px 0 0; color:rgba(235,244,246,.55); font-size:10px; line-height:1.4; }
.follow-timeline li>b { min-width:62px; color:rgba(235,244,246,.5); font-size:9px; text-align:right; }
.follow-timeline li.is-active { border-color:rgba(41,199,190,.4); background:rgba(41,199,190,.055); box-shadow:0 12px 30px rgba(41,199,190,.06); transform:translateX(3px); }
.follow-timeline li.is-active>i,.follow-timeline li.is-complete>i { color:#061216; border-color:transparent; background:var(--teal); }
.follow-timeline li.is-active>b { color:var(--teal); }
.follow-timeline li.is-complete { border-color:rgba(41,199,190,.18); opacity:.82; }
.follow-timeline li.is-complete>i span { font-size:0; }
.follow-timeline li.is-complete>i span::after { font-size:13px; content:"\2713"; }
.follow-timeline li.is-complete>b { color:var(--teal); }
.demo-result { display:flex; align-items:center; gap:13px; margin-top:14px; padding:14px; border:1px solid rgba(41,199,190,.22); border-radius:12px; background:rgba(41,199,190,.055); opacity:0; transform:translateY(8px); transition:opacity 360ms ease,transform 360ms ease; }
.demo-result.is-visible { opacity:1; transform:translateY(0); }
.demo-result>span { display:grid; flex:0 0 36px; width:36px; height:36px; color:#061216; font-size:16px; font-weight:900; border-radius:50%; background:var(--teal); place-items:center; }
.demo-result p,.demo-result strong,.demo-result small { display:block; margin:0; }
.demo-result strong { font-size:12px; }
.demo-result small { margin-top:4px; color:rgba(235,244,246,.6); font-size:10px; line-height:1.4; }
.demo-note { margin:18px 0 0; color:rgba(235,244,246,.42); font-size:11px; text-align:center; }
@keyframes state-pulse { 50% { box-shadow:0 0 0 7px rgba(41,199,190,.03); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition-duration:.01ms!important; } }
@media (max-width:900px) { .demo-intro { grid-template-columns:1fr; gap:26px; } .run-button { width:min(100%,320px); } .demo-workspace { grid-template-columns:1fr; } }
@media (max-width:620px) {
  .demo-header,main { width:min(100% - 28px,1280px); }
  .demo-header { min-height:74px; }
  .demo-brand img { width:174px; }
  .demo-back { font-size:0; }
  .demo-back span { font-size:20px; }
  main { padding-top:38px; }
  .demo-intro h1 { font-size:clamp(43px,14vw,64px); }
  .demo-workspace { margin-top:32px; }
  .lead-panel,.timeline-panel { padding:20px; }
  .panel-heading { align-items:flex-start; }
  .panel-heading h2 { font-size:25px; }
  .automation-state { min-width:0; }
  .follow-timeline li { grid-template-columns:34px minmax(0,1fr); padding:12px; }
  .follow-timeline li>i { width:32px; height:32px; }
  .follow-timeline li>b { grid-column:2; text-align:left; }
}