/*
Theme Name: astp.ai Landing
Theme URI: https://astp.ai
Author: astp.ai
Description: A dark-hero, minimal pre-launch landing page theme for astp.ai — a coming-soon one-pager with an animated signature diagram, a waitlist form, and a bright "how it works" section.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astp-ai-landing
*/

:root{
  --ink:#14151A;
  --paper:#FAFAF8;
  --paper-dim:#F1F1EE;
  --slate:#6E7076;
  --line:#E1E1DC;
  --signal:#FF5A36;
  --signal-dark:#E2481F;
  --signal-tint:#FFE4DA;
  --void:#0A0A0C;
  --void-line: rgba(255,255,255,0.14);
  --void-text: rgba(255,255,255,0.94);
  --void-muted: rgba(255,255,255,0.52);
  --void-faint: rgba(255,255,255,0.28);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Inter', sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

a{ color:inherit; }

.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:0 32px;
}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:500;
}

/* ---------- HERO ---------- */

.hero{
  position:relative;
  background:
    radial-gradient(ellipse 900px 500px at 50% 30%, rgba(255,255,255,0.05), transparent 70%),
    var(--void);
  color:var(--void-text);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.hero-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:28px 32px 0;
}

.wordmark-img{
  height:26px;
  width:auto;
  display:block;
  opacity:0.95;
}

.hero-topbar .eyebrow{
  color:var(--void-muted);
  border:1px solid var(--void-line);
  padding:5px 12px;
  border-radius:999px;
}

.hero-body{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 24px 64px;
}

.flow-graphic{
  width:100%;
  max-width:560px;
  margin:0 auto 8px;
}

.flow-graphic svg{ width:100%; height:auto; display:block; }

.node-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  fill:var(--void-muted);
  letter-spacing:0.04em;
}

h1{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:clamp(32px, 5.4vw, 58px);
  line-height:1.06;
  letter-spacing:-0.01em;
  max-width:820px;
  margin:8px auto 18px;
  color:#fff;
}

.hero-sub{
  font-size:clamp(15px, 1.6vw, 18px);
  color:var(--void-muted);
  max-width:480px;
  margin:0 auto 34px;
}

.waitlist-form{
  display:flex;
  gap:10px;
  width:100%;
  max-width:420px;
  margin:0 auto;
}

.waitlist-form input[type="email"]{
  flex:1;
  min-width:0;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--void-line);
  color:#fff;
  font-family:'Inter', sans-serif;
  font-size:14px;
  padding:0 16px;
  height:46px;
  border-radius:999px;
  outline:none;
  transition:border-color 0.15s ease, background 0.15s ease;
}

.waitlist-form input[type="email"]::placeholder{ color:var(--void-faint); }

.waitlist-form input[type="email"]:focus{
  border-color:rgba(255,255,255,0.4);
  background:rgba(255,255,255,0.1);
}

.btn-signal{
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:14px;
  background:var(--signal);
  color:#1a0800;
  border:none;
  height:46px;
  padding:0 22px;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  transition:background 0.15s ease, transform 0.1s ease;
}

.btn-signal:hover{ background:#ff6d4d; }
.btn-signal:active{ transform:scale(0.97); }

.form-note{
  font-size:12px;
  color:var(--void-faint);
  margin-top:14px;
}

.form-success{
  display:none;
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  color:var(--signal);
  margin-top:6px;
}

.form-success.show{ display:block; }
.waitlist-form.hide{ display:none; }

/* ---------- SYSTEM SECTION ---------- */

section{ padding:96px 0; }

.section-head{
  max-width:560px;
  margin-bottom:56px;
}

.section-head .eyebrow{ color:var(--signal-dark); }

.section-head h2{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:clamp(26px, 3.4vw, 38px);
  letter-spacing:-0.01em;
  margin:12px 0 16px;
}

.section-head p{
  color:var(--slate);
  font-size:16px;
  max-width:520px;
}

.tool-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}

.tool-card{
  background:var(--paper);
  padding:36px 30px;
}

.tool-card svg{ width:34px; height:34px; margin-bottom:22px; }

.tool-card h3{
  font-family:'Space Grotesk', sans-serif;
  font-size:17px;
  font-weight:600;
  margin-bottom:10px;
}

.tool-card p{
  color:var(--slate);
  font-size:14.5px;
  line-height:1.55;
}

/* ---------- CTA SECTION ---------- */

.cta-section{
  background:var(--paper-dim);
  text-align:center;
}

.cta-section .wrap{ max-width:560px; }

.cta-section h2{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:clamp(24px, 3vw, 32px);
  letter-spacing:-0.01em;
  margin-bottom:14px;
}

.cta-section p{
  color:var(--slate);
  margin-bottom:32px;
}

.waitlist-form.light input[type="email"]{
  background:#fff;
  border:1px solid var(--line);
  color:var(--ink);
}

.waitlist-form.light input[type="email"]::placeholder{ color:#B7B6AF; }

.waitlist-form.light input[type="email"]:focus{ border-color:var(--ink); }

.form-note.dark{ color:#9A9A93; }

/* ---------- FOOTER ---------- */

footer{
  padding:48px 0;
  border-top:1px solid var(--line);
}

footer .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}

.footer-brand{
  font-family:'Space Grotesk', sans-serif;
  font-size:16px;
  font-weight:600;
}

.footer-brand span{ color:var(--signal); }

footer .footer-meta{
  font-size:13px;
  color:var(--slate);
  text-align:right;
}

/* ---------- SIGNATURE ANIMATION ---------- */

@media (prefers-reduced-motion: no-preference){
  .flow-line{
    stroke-dasharray:5 9;
    animation:flow-dash 1.4s linear infinite;
  }
  .flow-line.d2{ animation-delay:-0.3s; }
  .flow-line.d3{ animation-delay:-0.6s; }
  .hub-ring{ animation:hub-pulse 2.6s ease-in-out infinite; }
  .hub-dot{ animation:hub-dot-pulse 2.6s ease-in-out infinite; }
  .check-path{
    stroke-dasharray:28;
    stroke-dashoffset:28;
    animation:check-draw 2.6s ease-in-out infinite;
  }
}

@keyframes flow-dash{ to{ stroke-dashoffset:-28; } }

@keyframes hub-pulse{
  0%, 100%{ opacity:0.55; }
  50%{ opacity:1; }
}

@keyframes hub-dot-pulse{
  0%, 20%{ transform:scale(0.9); }
  50%{ transform:scale(1.14); }
  80%, 100%{ transform:scale(0.9); }
}

@keyframes check-draw{
  0%, 55%{ stroke-dashoffset:28; opacity:0; }
  68%{ stroke-dashoffset:0; opacity:1; }
  88%{ opacity:1; }
  96%, 100%{ opacity:0; stroke-dashoffset:28; }
}

/* ---------- BASIC BLOG/FALLBACK STYLES (index.php) ---------- */

.site-basic-header{
  padding:24px 32px;
  border-bottom:1px solid var(--line);
}

.site-basic-footer{
  padding:32px;
  text-align:center;
  color:var(--slate);
  font-size:13px;
  border-top:1px solid var(--line);
}

.basic-content{
  max-width:720px;
  margin:0 auto;
  padding:64px 32px;
}

.basic-content article{ margin-bottom:48px; }

.basic-content h2{
  font-family:'Space Grotesk', sans-serif;
  margin-bottom:12px;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width:760px){
  .tool-grid{ grid-template-columns:1fr; }
  .waitlist-form{ flex-direction:column; }
  .waitlist-form input[type="email"]{ width:100%; }
  .btn-signal{ width:100%; }
  footer .wrap{ flex-direction:column; align-items:flex-start; text-align:left; }
  footer .footer-meta{ text-align:left; }
}