/* ============================================================ *
 *  Augmented Signals — sci-fi theme
 * ============================================================ */
:root{
  --bg:        #05060d;
  --bg-2:      #0a0e1c;
  --panel:     rgba(14,20,40,.72);
  --cyan:      #00f0ff;
  --magenta:   #ff2bd6;
  --violet:    #8b5cff;
  --text:      #cfe3ff;
  --text-dim:  #6f86b8;
  --line:      rgba(0,240,255,.18);
  --glow-cyan: 0 0 12px rgba(0,240,255,.55);
  --glow-mag:  0 0 14px rgba(255,43,214,.5);
}

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

html{ scroll-behavior:smooth; }

body{
  font-family:"Share Tech Mono", ui-monospace, monospace;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  position:relative;
}

#bg-canvas{ position:fixed; inset:0; z-index:-2; display:block; }

/* CRT scanline overlay */
.scanlines{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(
     to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.18) 2px 3px);
  mix-blend-mode:multiply; opacity:.5;
}

a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:"Orbitron", sans-serif; letter-spacing:.04em; }
.muted{ color:var(--text-dim); }

/* ── NAV ─────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(18px,5vw,64px);
  background:linear-gradient(180deg, rgba(5,6,13,.92), rgba(5,6,13,.4));
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:10px; font-family:"Orbitron"; font-weight:700; }
.brand-mark{ color:var(--cyan); text-shadow:var(--glow-cyan); font-size:1.2rem; }
.brand-name{ font-size:.95rem; letter-spacing:.18em; }
.nav-links{ display:flex; gap:clamp(14px,3vw,34px); font-size:.82rem; letter-spacing:.12em; }
.nav-links a{ color:var(--text-dim); transition:.2s; text-transform:uppercase; }
.nav-links a:hover{ color:var(--cyan); text-shadow:var(--glow-cyan); }

/* ── HERO ────────────────────────────────────────────── */
.hero{
  position:relative; min-height:92vh;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:80px 20px; overflow:hidden;
}
.hero-inner{ position:relative; z-index:2; max-width:900px; }
.eyebrow{ color:var(--cyan); letter-spacing:.4em; font-size:.78rem; margin-bottom:18px; opacity:.8; }
.hero-sub{ color:var(--text-dim); font-size:clamp(.95rem,2.2vw,1.25rem); margin:22px auto 36px; max-width:620px; }
.hero-cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* perspective grid floor */
.hero-grid{
  position:absolute; left:50%; bottom:-10%; transform:translateX(-50%);
  width:200%; height:60%; z-index:1;
  background-image:
     linear-gradient(var(--line) 1px, transparent 1px),
     linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:60px 60px;
  transform:translateX(-50%) perspective(420px) rotateX(64deg);
  mask-image:linear-gradient(to top, #000 5%, transparent 75%);
  -webkit-mask-image:linear-gradient(to top, #000 5%, transparent 75%);
  animation:grid-move 6s linear infinite;
  opacity:.6;
}
@keyframes grid-move{ from{ background-position:0 0; } to{ background-position:0 60px; } }

/* glitch title */
.glitch{
  position:relative; font-weight:900;
  font-size:clamp(2.1rem,9vw,6rem); line-height:.95;
  color:#eafaff; text-shadow:0 0 18px rgba(0,240,255,.35);
}
.glitch::before,.glitch::after{
  content:attr(data-text); position:absolute; inset:0; overflow:hidden;
}
.glitch::before{ color:var(--magenta); transform:translate(-2px,0); animation:glitch1 2.6s infinite steps(2); clip-path:inset(0 0 55% 0); }
.glitch::after { color:var(--cyan);    transform:translate(2px,0);  animation:glitch2 3.1s infinite steps(2); clip-path:inset(55% 0 0 0); }
@keyframes glitch1{ 0%,92%,100%{transform:translate(-2px,0)} 93%{transform:translate(-7px,-2px)} 96%{transform:translate(4px,1px)} }
@keyframes glitch2{ 0%,90%,100%{transform:translate(2px,0)} 91%{transform:translate(6px,2px)} 95%{transform:translate(-4px,-1px)} }

.glitch-soft{ position:relative; }
.glitch-soft:hover{ animation:shake .3s; text-shadow:var(--glow-cyan); }
@keyframes shake{ 25%{transform:translateX(-2px)} 75%{transform:translateX(2px)} }

/* ── BUTTONS ─────────────────────────────────────────── */
.btn{
  display:inline-block; font-family:"Orbitron"; font-weight:700;
  font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  padding:13px 26px; border:1px solid var(--cyan); border-radius:3px;
  cursor:pointer; transition:.18s; position:relative; background:transparent;
  color:var(--cyan);
}
.btn-lg{ padding:16px 34px; font-size:.9rem; }
.btn-primary{ background:linear-gradient(135deg, rgba(0,240,255,.16), rgba(255,43,214,.16)); box-shadow:var(--glow-cyan); }
.btn-primary:hover{ background:linear-gradient(135deg, rgba(0,240,255,.34), rgba(255,43,214,.32)); transform:translateY(-2px); }
.btn-ghost{ border-color:var(--text-dim); color:var(--text); }
.btn-ghost:hover{ border-color:var(--magenta); color:var(--magenta); box-shadow:var(--glow-mag); }

/* ── SECTIONS ────────────────────────────────────────── */
.section{ max-width:1040px; margin:0 auto; padding:90px clamp(18px,5vw,40px); }
.section-head{ display:flex; align-items:center; gap:18px; margin-bottom:44px; }
.sec-index{ color:var(--magenta); font-family:"Orbitron"; font-size:.9rem; text-shadow:var(--glow-mag); }
.section-head h2{ font-size:clamp(1.5rem,4vw,2.4rem); }
.sec-line{ flex:1; height:1px; background:linear-gradient(90deg,var(--cyan),transparent); }

/* ── PLUGIN CARD ─────────────────────────────────────── */
.plugin-card{
  display:grid; grid-template-columns:300px 1fr; gap:34px;
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:30px; backdrop-filter:blur(6px);
  box-shadow:0 0 40px rgba(0,240,255,.06), inset 0 0 60px rgba(139,92,255,.05);
}
.plugin-visual{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; }
.plugin-orb{
  width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--cyan), var(--violet) 45%, #11061f 75%);
  box-shadow:0 0 50px rgba(0,240,255,.4), inset 0 0 40px rgba(0,0,0,.6);
  animation:orb 6s ease-in-out infinite; position:relative;
}
.plugin-orb::after{
  content:""; position:absolute; inset:-14px; border-radius:50%;
  border:1px solid var(--magenta); opacity:.35; animation:spin 9s linear infinite;
}
@keyframes orb{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes spin{ to{ transform:rotate(360deg); } }
.plugin-tag{ font-size:.68rem; letter-spacing:.18em; color:var(--text-dim); text-align:center; }

.plugin-name{ font-size:clamp(1.4rem,4vw,2rem); color:#eafaff; }
.plugin-version{ color:var(--magenta); font-size:.8rem; margin:4px 0 14px; letter-spacing:.2em; }
.plugin-desc{ color:var(--text); margin-bottom:22px; }

.feature-grid{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:14px 22px; margin-bottom:26px; }
.feature-grid li{ border-left:2px solid var(--cyan); padding-left:12px; }
.feature-grid b{ display:block; color:var(--cyan); font-size:.86rem; letter-spacing:.05em; }
.feature-grid span{ color:var(--text-dim); font-size:.78rem; }

.plugin-actions{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.dl-counter{ font-size:.8rem; color:var(--text-dim); display:flex; align-items:center; gap:8px; }
.dl-dot{ width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:var(--glow-cyan); animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.25} }
#dl-count{ color:var(--cyan); font-weight:bold; }

/* ── SHOWCASE: real plugin wrapped in FX ─────────────── */
.showcase{ padding:40px 16px 30px; display:flex; flex-direction:column; align-items:center; perspective:1400px; }
.stage{ position:relative; width:min(820px,94vw); }
.plugin-frame{
  position:relative; border-radius:12px; overflow:hidden;
  transform-style:preserve-3d; transition:transform .15s ease-out;
  border:1px solid rgba(0,240,255,.35);
  box-shadow:0 0 60px rgba(0,240,255,.18), 0 0 120px rgba(139,92,255,.12), 0 30px 60px rgba(0,0,0,.6);
  animation:boot 1.1s ease-out both;
}
@keyframes boot{ 0%{opacity:0; filter:brightness(3) blur(8px); transform:scale(.96)} 60%{opacity:1; filter:brightness(1.2) blur(0)} 100%{filter:none} }
.frame-glow{ position:absolute; inset:-2px; border-radius:12px; z-index:3; pointer-events:none;
  background:linear-gradient(120deg, transparent 30%, rgba(0,240,255,.5), rgba(255,43,214,.5), transparent 70%);
  background-size:300% 300%; mix-blend-mode:screen; opacity:.55; animation:sweepglow 5s linear infinite; }
@keyframes sweepglow{ to{ background-position:300% 0; } }
.plugin-img{ display:block; width:100%; height:auto; position:relative; z-index:1; }
/* RGB-split glitch layers (flicker occasionally) */
.plugin-img.gl{ position:absolute; inset:0; z-index:2; mix-blend-mode:screen; opacity:0; pointer-events:none; }
.gl-r{ animation:glr 7s steps(1) infinite; }
.gl-c{ animation:glc 7s steps(1) infinite; }
@keyframes glr{ 0%,96%,100%{opacity:0;transform:translate(0,0)} 97%{opacity:.7;transform:translate(-6px,2px);filter:hue-rotate(-40deg) saturate(3)} 98.5%{opacity:.5;transform:translate(4px,-2px)} }
@keyframes glc{ 0%,95%,100%{opacity:0;transform:translate(0,0)} 96%{opacity:.6;transform:translate(6px,-2px);filter:hue-rotate(140deg) saturate(3)} 99%{opacity:.4;transform:translate(-4px,1px)} }
/* scan beam */
.scan-beam{ position:absolute; left:0; right:0; top:0; height:18%; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,240,255,.16), rgba(0,240,255,0)); animation:scanb 4.5s linear infinite; }
@keyframes scanb{ 0%{transform:translateY(-20%)} 100%{transform:translateY(560%)} }
/* HUD corners */
.frame-corners i{ position:absolute; width:18px; height:18px; z-index:4; border:2px solid var(--cy); opacity:.8; }
.frame-corners i:nth-child(1){ top:8px; left:8px; border-right:0; border-bottom:0; }
.frame-corners i:nth-child(2){ top:8px; right:8px; border-left:0; border-bottom:0; }
.frame-corners i:nth-child(3){ bottom:8px; left:8px; border-right:0; border-top:0; }
.frame-corners i:nth-child(4){ bottom:8px; right:8px; border-left:0; border-top:0; }
.stage-floor{ width:70%; height:60px; margin:-6px auto 0; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,240,255,.22), transparent 70%); filter:blur(8px); }
.stage-cap{ color:var(--text-dim); font-size:.74rem; letter-spacing:.14em; margin-top:14px; }

/* ── DOWNLOAD ────────────────────────────────────────── */
.download-box{
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:34px; backdrop-filter:blur(6px); box-shadow:0 0 40px rgba(255,43,214,.06);
}
.dl-info h3{ font-size:1.2rem; margin-bottom:8px; }
.dl-note{ color:var(--text-dim); font-size:.8rem; margin-top:10px; max-width:440px; }

/* ── CONTACT ─────────────────────────────────────────── */
.contact-intro{ color:var(--text-dim); margin-bottom:28px; max-width:560px; }
.contact-form{ display:flex; flex-direction:column; gap:18px; max-width:680px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.contact-form label{ display:flex; flex-direction:column; gap:7px; font-size:.78rem; letter-spacing:.1em; color:var(--text-dim); text-transform:uppercase; }
.contact-form input,.contact-form select,.contact-form textarea{
  background:rgba(3,6,16,.7); border:1px solid var(--line); border-radius:4px;
  color:var(--text); font-family:"Share Tech Mono", monospace; font-size:.95rem;
  padding:12px 14px; transition:.18s; resize:vertical;
}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
  outline:none; border-color:var(--cyan); box-shadow:var(--glow-cyan);
}
.contact-form .btn{ align-self:flex-start; }
.form-status{ font-size:.85rem; min-height:1.2em; }
.form-status.ok{ color:var(--cyan); }
.form-status.err{ color:var(--magenta); }

/* ── FOOTER ──────────────────────────────────────────── */
.footer{
  border-top:1px solid var(--line); margin-top:40px;
  padding:28px clamp(18px,5vw,64px);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
}
.footer-brand{ font-family:"Orbitron"; color:var(--cyan); letter-spacing:.18em; font-size:.85rem; }
.footer-meta{ display:flex; gap:22px; font-size:.78rem; }

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width:760px){
  .plugin-card{ grid-template-columns:1fr; }
  .feature-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .nav-links{ gap:14px; }
}