/* =============================================
   AIDEN FLUX — n8n Automation Specialist
   Style: Dark Terminal / Neon Green & Charcoal
   Fonts: Space Grotesk (display) + JetBrains Mono (code) + Inter
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Inter:wght@300;400;500&display=swap');

:root {
  --bg:        #0a0c0f;
  --surface:   #0f1318;
  --surface2:  #141920;
  --surface3:  #1a2130;
  --border:    #1e2836;
  --border2:   #263346;
  --text:      #e2e8f0;
  --muted:     #64748b;
  --muted2:    #94a3b8;
  --green:     #00ff88;
  --green2:    #00cc6a;
  --green-dim: rgba(0,255,136,0.08);
  --green-glow:rgba(0,255,136,0.15);
  --orange:    #ff6b35;
  --blue:      #38bdf8;
  --purple:    #a78bfa;
  --red:       #f87171;
  --yellow:    #fbbf24;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
}

/* NOISE TEXTURE OVERLAY */
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  opacity:0.4;
}

/* ---- ANIMATIONS ---- */
@keyframes fadeUp    { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:none;} }
@keyframes fadeIn    { from{opacity:0;} to{opacity:1;} }
@keyframes blink     { 0%,100%{opacity:1;} 50%{opacity:0;} }
@keyframes marquee   { from{transform:translateX(0);} to{transform:translateX(-50%);} }
@keyframes scanline  { from{transform:translateY(-100%);} to{transform:translateY(100vh);} }
@keyframes pulse-green { 0%,100%{box-shadow:0 0 0 0 rgba(0,255,136,0.4);} 50%{box-shadow:0 0 0 8px rgba(0,255,136,0);} }
@keyframes float     { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
@keyframes nodeFlow  { 0%{stroke-dashoffset:200;} 100%{stroke-dashoffset:0;} }
@keyframes glow      { 0%,100%{text-shadow:0 0 20px rgba(0,255,136,0.5);} 50%{text-shadow:0 0 40px rgba(0,255,136,0.9), 0 0 80px rgba(0,255,136,0.3);} }

/* ---- REVEAL ---- */
.reveal { opacity:0; transform:translateY(18px); transition:opacity 0.7s cubic-bezier(.22,1,.36,1), transform 0.7s cubic-bezier(.22,1,.36,1); }
.revealed { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }
.reveal-delay-4 { transition-delay:0.4s; }

/* ---- CURSOR BLINK ---- */
.cursor::after { content:'_'; animation:blink 1s step-end infinite; color:var(--green); }

/* =============================================
   NAVIGATION
   ============================================= */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:1.2rem 3rem;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(10,12,15,0.9);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.nav-logo {
  text-decoration:none; display:flex; flex-direction:column; gap:0.1rem;
}
.nav-logo-name {
  font-family:'Space Grotesk',sans-serif; font-size:1.1rem; font-weight:700;
  color:var(--text); letter-spacing:-0.02em;
}
.nav-logo-name span { color:var(--green); }
.nav-logo-title {
  font-family:'JetBrains Mono',monospace; font-size:0.58rem;
  color:var(--muted); letter-spacing:0.1em;
}
nav ul { display:flex; gap:2rem; list-style:none; }
nav ul a {
  font-family:'JetBrains Mono',monospace; font-size:0.72rem;
  color:var(--muted); text-decoration:none; letter-spacing:0.08em;
  transition:color 0.2s; position:relative;
}
nav ul a::before { content:'./'; color:var(--green); opacity:0; transition:opacity 0.2s; }
nav ul a:hover::before, nav ul a.active::before { opacity:1; }
nav ul a:hover, nav ul a.active { color:var(--green); }
.nav-cta {
  font-family:'JetBrains Mono',monospace; font-size:0.68rem;
  border:1px solid var(--green); color:var(--green);
  padding:0.5rem 1.2rem; text-decoration:none; letter-spacing:0.1em;
  transition:all 0.2s;
}
.nav-cta:hover { background:var(--green); color:var(--bg); }

/* =============================================
   PAGE HERO (inner pages)
   ============================================= */
.page-hero {
  padding:8rem 3rem 4rem; border-bottom:1px solid var(--border);
  position:relative; overflow:hidden;
}
.page-hero-grid-bg {
  position:absolute; inset:0; opacity:0.04;
  background-image: linear-gradient(var(--green) 1px, transparent 1px), linear-gradient(90deg, var(--green) 1px, transparent 1px);
  background-size:40px 40px;
}
.page-hero-inner { position:relative; z-index:1; max-width:1300px; margin:0 auto; }
.ph-breadcrumb { font-family:'JetBrains Mono',monospace; font-size:0.65rem; color:var(--muted); margin-bottom:1rem; display:flex; gap:0.5rem; }
.ph-breadcrumb a { color:var(--green); text-decoration:none; }
.ph-breadcrumb span { color:var(--border2); }
.page-hero h1 { font-family:'Space Grotesk',sans-serif; font-size:clamp(2.5rem,5vw,4rem); font-weight:700; letter-spacing:-0.03em; color:var(--text); }
.page-hero h1 .gh { color:var(--green); }
.page-hero p { font-size:0.9rem; color:var(--muted); margin-top:0.6rem; font-family:'JetBrains Mono',monospace; }

/* =============================================
   SECTION HELPERS
   ============================================= */
.section-tag {
  font-family:'JetBrains Mono',monospace; font-size:0.62rem;
  color:var(--green); letter-spacing:0.15em; text-transform:uppercase;
  display:flex; align-items:center; gap:0.6rem; margin-bottom:0.6rem;
}
.section-tag::before { content:'//'; opacity:0.5; }
.section-title {
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(1.8rem,3.5vw,3rem);
  font-weight:700; letter-spacing:-0.03em; color:var(--text); line-height:1.1;
}
.section-title .accent { color:var(--green); }

/* =============================================
   BUTTONS
   ============================================= */
.btn-green {
  display:inline-flex; align-items:center; gap:0.6rem;
  background:var(--green); color:var(--bg);
  padding:0.85rem 2rem; font-family:'JetBrains Mono',monospace;
  font-size:0.72rem; font-weight:700; letter-spacing:0.08em;
  text-decoration:none; cursor:pointer; border:none;
  transition:all 0.2s;
}
.btn-green:hover { background:var(--green2); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,255,136,0.3); }

.btn-outline-green {
  display:inline-flex; align-items:center; gap:0.6rem;
  background:transparent; color:var(--green);
  border:1px solid var(--green);
  padding:0.85rem 2rem; font-family:'JetBrains Mono',monospace;
  font-size:0.72rem; letter-spacing:0.08em;
  text-decoration:none; cursor:pointer;
  transition:all 0.2s;
}
.btn-outline-green:hover { background:var(--green-dim); }

/* =============================================
   NODE / WORKFLOW VISUAL (SVG)
   ============================================= */
.node-box {
  background:var(--surface2); border:1px solid var(--border2);
  padding:0.6rem 1rem; display:inline-flex; align-items:center;
  gap:0.5rem; font-family:'JetBrains Mono',monospace; font-size:0.7rem;
  color:var(--text); border-radius:6px; white-space:nowrap;
}
.node-box .node-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.node-connector { width:40px; height:1px; background:var(--green); opacity:0.4; position:relative; }
.node-connector::after { content:'▶'; position:absolute; right:-5px; top:-6px; font-size:0.6rem; color:var(--green); opacity:0.6; }

/* =============================================
   SKILL BADGE
   ============================================= */
.skill-badge {
  display:inline-flex; align-items:center; gap:0.4rem;
  background:var(--surface2); border:1px solid var(--border2);
  padding:0.4rem 0.9rem; font-family:'JetBrains Mono',monospace;
  font-size:0.68rem; color:var(--muted2); transition:all 0.2s;
}
.skill-badge:hover { border-color:var(--green); color:var(--green); background:var(--green-dim); }
.skill-badge .dot { width:6px; height:6px; border-radius:50%; }

/* =============================================
   WORKFLOW CARD
   ============================================= */
.workflow-card {
  background:var(--surface); border:1px solid var(--border);
  overflow:hidden; transition:all 0.3s; position:relative;
}
.workflow-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--green), var(--blue));
  transform:scaleX(0); transform-origin:left; transition:transform 0.3s;
}
.workflow-card:hover { border-color:var(--border2); transform:translateY(-4px); box-shadow:0 16px 48px rgba(0,0,0,0.4), 0 0 0 1px var(--border2); }
.workflow-card:hover::before { transform:scaleX(1); }
.wf-preview { height:200px; background:var(--surface2); padding:1.5rem; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; position:relative; }
.wf-nodes { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
.wf-info { padding:1.5rem; }
.wf-tags { display:flex; gap:0.4rem; flex-wrap:wrap; margin-bottom:0.8rem; }
.wf-tag { font-family:'JetBrains Mono',monospace; font-size:0.6rem; padding:0.2rem 0.6rem; border:1px solid var(--border2); color:var(--muted); }
.wf-name { font-family:'Space Grotesk',sans-serif; font-size:1.1rem; font-weight:700; color:var(--text); margin-bottom:0.4rem; }
.wf-desc { font-size:0.8rem; color:var(--muted); line-height:1.65; margin-bottom:1.2rem; }
.wf-footer { display:flex; align-items:center; justify-content:space-between; padding-top:1rem; border-top:1px solid var(--border); }
.wf-stat { font-family:'JetBrains Mono',monospace; font-size:0.62rem; color:var(--muted); }
.wf-stat strong { color:var(--green); }

/* =============================================
   TERMINAL BLOCK
   ============================================= */
.terminal {
  background:#0d1117; border:1px solid var(--border2);
  font-family:'JetBrains Mono',monospace; font-size:0.78rem;
  overflow:hidden;
}
.terminal-header { background:var(--surface2); padding:0.6rem 1rem; display:flex; align-items:center; gap:0.5rem; border-bottom:1px solid var(--border); }
.t-dot { width:10px; height:10px; border-radius:50%; }
.terminal-body { padding:1.5rem; line-height:1.9; overflow-x:auto; }
.t-comment { color:var(--muted); }
.t-green { color:var(--green); }
.t-blue { color:var(--blue); }
.t-orange { color:var(--orange); }
.t-purple { color:var(--purple); }
.t-yellow { color:var(--yellow); }
.t-prompt { color:var(--green); }

/* =============================================
   MARQUEE
   ============================================= */
.marquee-strip { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:0.8rem 0; overflow:hidden; }
.marquee-track { display:flex; gap:3rem; animation:marquee 22s linear infinite; white-space:nowrap; }
.marquee-track span { font-family:'JetBrains Mono',monospace; font-size:0.65rem; color:var(--muted); letter-spacing:0.1em; }
.marquee-track .m-sep { color:var(--green); }

/* =============================================
   FORM
   ============================================= */
.form-group { display:flex; flex-direction:column; gap:0.4rem; }
.form-group label { font-family:'JetBrains Mono',monospace; font-size:0.62rem; color:var(--green); letter-spacing:0.1em; }
.form-group input, .form-group textarea, .form-group select {
  background:var(--surface2); border:1px solid var(--border2);
  padding:0.85rem 1rem; color:var(--text);
  font-family:'JetBrains Mono',monospace; font-size:0.82rem;
  outline:none; transition:border-color 0.2s; resize:none; width:100%;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color:var(--green); box-shadow:0 0 0 2px rgba(0,255,136,0.1); }
.form-group input::placeholder, .form-group textarea::placeholder { color:var(--muted); }

/* =============================================
   FOOTER
   ============================================= */
footer {
  background:var(--surface); border-top:1px solid var(--border);
  padding:4rem 3rem 2rem;
}
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; max-width:1300px; margin:0 auto 3rem; }
.footer-logo-name { font-family:'Space Grotesk',sans-serif; font-size:1.4rem; font-weight:700; color:var(--text); display:block; margin-bottom:0.2rem; }
.footer-logo-name span { color:var(--green); }
.footer-logo-sub { font-family:'JetBrains Mono',monospace; font-size:0.58rem; color:var(--muted); letter-spacing:0.1em; display:block; margin-bottom:1rem; }
.footer-brand p { font-size:0.8rem; color:var(--muted); line-height:1.8; }
.footer-col h4 { font-family:'JetBrains Mono',monospace; font-size:0.62rem; color:var(--green); letter-spacing:0.15em; text-transform:uppercase; margin-bottom:1.2rem; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:0.6rem; }
.footer-col ul a { font-size:0.8rem; color:var(--muted); text-decoration:none; font-family:'JetBrains Mono',monospace; font-size:0.72rem; transition:color 0.2s; }
.footer-col ul a:hover { color:var(--green); }
.footer-col p { font-size:0.78rem; color:var(--muted); line-height:1.9; font-family:'JetBrains Mono',monospace; font-size:0.72rem; }
.footer-rule { border:none; border-top:1px solid var(--border); max-width:1300px; margin:0 auto 1.5rem; }
.footer-bottom { max-width:1300px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-bottom p { font-family:'JetBrains Mono',monospace; font-size:0.62rem; color:var(--muted); }
.footer-bottom a { color:var(--green); text-decoration:none; }
.status-dot { display:inline-flex; align-items:center; gap:0.4rem; font-family:'JetBrains Mono',monospace; font-size:0.62rem; color:var(--green); }
.status-dot::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--green); animation:pulse-green 2s infinite; display:inline-block; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media(max-width:900px){
  nav { padding:1rem 1.5rem; }
  nav ul { display:none; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
  .page-hero { padding:6rem 1.5rem 3rem; }
}
@media(max-width:600px){
  .footer-grid { grid-template-columns:1fr; }
}