/* ─── Automation Studio — family design DNA ─── */
:root { --bg:#070a12; --panel:#0e1422; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --ink:#eef1f7; --ink-2:#b9c1d3; --muted:#7f8aa1; --brand:#7c8cff; --cyan:#22d3ee; --ok:#34d399; --warn:#fbbf24; --bad:#fb7185;
  --sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:ui-monospace,Menlo,Consolas,monospace; }
*{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.55 var(--sans);overflow-x:hidden}
a{color:inherit;text-decoration:none} p{margin:0} h1,h2,h3{margin:0;letter-spacing:-.025em;line-height:1.1}
.glow{position:fixed;inset:-30% -10% auto;height:80vh;pointer-events:none;z-index:0;filter:blur(50px);
  background:radial-gradient(55% 55% at 25% 30%,rgba(124,140,255,.25),transparent 60%),radial-gradient(45% 45% at 78% 22%,rgba(34,211,238,.18),transparent 60%);
  animation:drift 20s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(-4%,5%,0) scale(1.1)}}

/* nav */
.top{position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:14px 26px;
  background:linear-gradient(180deg,rgba(7,10,18,.92),rgba(7,10,18,0))}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.mark{width:22px;height:22px;border-radius:7px;background:conic-gradient(from 210deg,#6366f1,#a855f7,#22d3ee,#6366f1);box-shadow:0 0 0 4px rgba(99,102,241,.18)}
.top-right{display:flex;gap:10px;align-items:center}
.pill-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;font-weight:650;font-size:14.5px;color:#0b0f19;
  background:linear-gradient(135deg,#8b9bff,#22d3ee);box-shadow:0 10px 30px -12px rgba(124,140,255,.9);transition:transform .15s}
.pill-btn:hover{transform:translateY(-1px)} .pill-btn.big{padding:14px 22px;font-size:16px}
.ghost{display:inline-flex;align-items:center;padding:10px 16px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink);font-weight:600;font-size:14.5px;transition:background .15s}
.ghost:hover{background:rgba(255,255,255,.05)} .ghost.big{padding:14px 22px;font-size:16px}

main{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 24px}
section{padding:72px 0}
h2{font-size:clamp(26px,4vw,36px);margin-bottom:10px}
.section-sub{color:var(--ink-2);max-width:640px;margin-bottom:36px}
.eyebrow{font:600 13px/1 var(--mono);letter-spacing:.18em;color:var(--cyan);margin-bottom:18px}
.tiny{font-size:13px;color:var(--muted);margin-top:14px}

/* hero */
.hero{padding:150px 0 80px;text-align:center}
.hero h1{font-size:clamp(38px,6.5vw,64px)}
.hero .sub{color:var(--ink-2);font-size:clamp(16px,2.2vw,19.5px);max-width:680px;margin:22px auto 30px}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.trust{margin-top:22px;color:var(--muted);font-size:14px}

/* product grid */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.card{display:flex;flex-direction:column;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px;
  transition:transform .18s,border-color .18s,box-shadow .18s}
.card:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:0 24px 50px -30px rgba(124,140,255,.55)}
.card h3{font-size:21px}
.card p{color:var(--ink-2);font-size:15.5px;flex:1}
.card-head{display:flex;justify-content:flex-start}
.badge{font:600 11px/1 var(--mono);letter-spacing:.14em;color:var(--muted);border:1px solid var(--line-2);border-radius:999px;padding:6px 10px}
.badge.original{color:var(--cyan);border-color:rgba(34,211,238,.4)}
.see{color:var(--brand);font-weight:650;font-size:14.5px}
.card:hover .see{color:var(--cyan)}

/* animated pipeline chips */
.pipe{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0 6px}
.chip{font:600 11.5px/1 var(--mono);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 10px;
  transition:color .3s,border-color .3s,background .3s;white-space:nowrap}
.chip.on{color:#0b0f19;background:linear-gradient(135deg,#8b9bff,#22d3ee);border-color:transparent}
.chip.done{color:var(--ok);border-color:rgba(52,211,153,.4)}
.pipe-arrow{color:var(--muted);font-size:11px}

/* method */
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:8px}
.step .n{font:700 13px/1 var(--mono);color:#0b0f19;background:linear-gradient(135deg,#8b9bff,#22d3ee);width:28px;height:28px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:6px}
.step h3{font-size:18px}
.step p{color:var(--ink-2);font-size:15px}

/* proof */
.proof-inner{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:36px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.proof-inner p{color:var(--ink-2);max-width:720px}
.proof-inner strong{color:var(--ink)}

/* cta */
.cta-final{text-align:center;padding-bottom:96px}
.cta-final p{color:var(--ink-2);max-width:560px;margin:14px auto 26px}

footer{position:relative;z-index:1;border-top:1px solid var(--line);padding:26px 24px;text-align:center;color:var(--muted);font-size:14px}
footer a{color:var(--ink-2)} footer a:hover{color:var(--ink)}

/* reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

@media (max-width:820px){
  .grid,.steps{grid-template-columns:1fr}
  .top{padding:12px 16px} .top .ghost{display:none}
  section{padding:52px 0} .hero{padding:120px 0 60px}
}
@media (prefers-reduced-motion:reduce){
  .glow{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .chip{transition:none}
  html{scroll-behavior:auto}
}