/* Shared design system for thewiredconnection.com.
   Loaded by every page; page-specific layout stays in that page's own <style>.
   Each page may declare --acc in its own :root block to set its segment accent
   (used for hover/underline flourishes and the .gr headline color; --accent
   stays the universal action color). */

:root{
  --bg:#05070d; --bg2:#0a0e1a; --card:#0f1830; --line:#223256;
  --ink:#eaf0ff; --muted:#9fb0d0; --subtle:#6b7ea3;
  --accent:#34d399; --cyan:#38bdf8;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{background:var(--bg);color:var(--ink);font-family:"Hanken Grotesk",system-ui,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden;max-width:100vw}
a{color:inherit;text-decoration:none}
.wrap{width:min(1120px,92%);margin-inline:auto}
h1,h2,.brand{font-family:"Bricolage Grotesque",system-ui,sans-serif}

/* nav */
nav{position:sticky;top:0;z-index:30;backdrop-filter:blur(12px);background:linear-gradient(180deg,rgba(5,7,13,.85),rgba(5,7,13,.35));border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:600}
.brand svg{color:var(--accent);transform-origin:center;animation:heartbeat 1.6s ease-in-out infinite}
@keyframes heartbeat{0%,100%{transform:scale(1)}12%{transform:scale(1.18)}24%{transform:scale(1)}36%{transform:scale(1.1)}50%{transform:scale(1)}}
.pill{color:var(--muted);font-size:.92rem;font-weight:500}
.nav-links{display:flex;gap:1.7rem;align-items:center;font-size:.92rem;color:var(--muted)}
.nav-links a:not(.btn):hover{color:var(--ink)}
@media(max-width:820px){.nav-links a:not(.btn){display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:.7rem 1.3rem;font-weight:600;font-size:.95rem;cursor:pointer;border:1px solid transparent;transition:.2s}
.btn-p{background:var(--accent);color:#04231a}
.btn-p:hover{box-shadow:0 10px 30px rgba(52,211,153,.28);transform:translateY(-2px)}
.btn-g{border-color:var(--line);color:var(--ink)}
.btn-g:hover{border-color:var(--accent);color:var(--accent)}

/* hero shell */
.hero{position:relative;text-align:center;padding:clamp(3rem,8vw,6rem) 0 clamp(1.5rem,4vw,3rem);overflow:hidden}
.aura{position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(760px 420px at 70% -10%,rgba(56,189,248,.14),transparent 60%),
  radial-gradient(680px 400px at 12% 8%,rgba(52,211,153,.13),transparent 58%)}
.hero .wrap{position:relative;z-index:2}
h1{font-size:clamp(2rem,6vw,4.4rem);line-height:1.03;letter-spacing:-.02em;font-weight:600;margin-bottom:1.1rem;overflow-wrap:break-word}
.gr{color:var(--acc,var(--accent))}
.lede{max-width:640px;margin:0 auto;color:var(--muted);font-size:clamp(1.02rem,1.9vw,1.22rem)}
.cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
.facts{color:var(--muted);font-size:.85rem;margin-top:1.6rem}
.taglist{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;margin-top:1.8rem}
.taglist span{font-size:.82rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.35rem .85rem}

/* generic sections */
.sec{padding:clamp(3.5rem,8vw,6.5rem) 0}
h2{font-size:clamp(1.8rem,4vw,2.8rem);letter-spacing:-.01em;font-weight:600;margin-bottom:.6rem}
.sub{color:var(--muted);max-width:600px;font-size:1rem}

/* scroll reveal (dependency-free) */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:none}

footer{border-top:1px solid var(--line);padding:2.4rem 0;color:var(--subtle);font-size:.85rem;text-align:center}

/* qualifying form -> Calendly handoff */
.bookform{max-width:600px;margin:0 auto;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:clamp(1.6rem,4vw,2.4rem);display:flex;flex-direction:column;gap:1.1rem}
.bf-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.bookform label{display:flex;flex-direction:column;gap:.45rem;font-size:.86rem;color:var(--muted);font-weight:500}
.bookform input,.bookform textarea{font:inherit;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;color:var(--ink);font-size:.95rem}
.bookform input:focus,.bookform textarea:focus{outline:none;border-color:var(--accent)}
.bookform textarea{resize:vertical;min-height:88px}
.bookform button{align-self:flex-start;border:none}
.bf-note{color:var(--muted);font-size:.82rem;margin:0}
.bf-done{display:none;text-align:center;padding:1.4rem}
.bf-done.show{display:block}
.bf-done h3{font-size:1.2rem;margin-bottom:.5rem}
.bf-done p{color:var(--muted)}
.bookform.hide{display:none}
@media(max-width:640px){.bf-row{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){.brand svg{animation:none}.reveal{opacity:1;transform:none;transition:none}}