/* Monadnock Cyber, LLC — site stylesheet
   Locked design tokens. Do not introduce new colors or fonts without coordination. */

:root {
  --bg-primary: #0a0a0a;
  --bg-card: #141414;
  --bg-elevated: #1a1a1a;
  --fg-primary: #e8e8e8;
  --fg-muted: #b0b8c4;
  --fg-deep: #888;
  --fg-deeper: #666;
  --accent: #c9a96e;
  --accent-soft: rgba(201, 169, 110, 0.08);
  --accent-line: rgba(201, 169, 110, 0.2);
  --border-default: #2a2a2a;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --max-w: 1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg-primary);color:var(--fg-primary);min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased}
.serif{font-family:var(--font-display)}
.mono{font-family:var(--font-mono)}
.accent{color:var(--accent)}
.muted{color:var(--fg-muted)}
.deep-muted{color:var(--fg-deep)}
a{color:var(--accent);text-decoration:none;transition:opacity .2s}
a:hover{opacity:.78}
.gold-line{height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);margin:48px 0}
.divider{width:60px;height:2px;background:var(--accent);margin:0 0 24px}

/* ─── Nav ─────────────────────────────────────────────────────────────── */
nav.site-nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(10,10,10,0.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-default)}
nav .nav-inner{max-width:var(--max-w);margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px}
nav .brand{display:flex;align-items:center;gap:10px;color:var(--fg-primary);font-family:var(--font-display);font-size:1.05rem;font-weight:600;letter-spacing:0.5px}
nav .brand img{height:28px;opacity:0.92}
nav .nav-links{display:flex;align-items:center;gap:28px}
nav .nav-links a{color:var(--fg-muted);font-size:0.72rem;text-transform:uppercase;letter-spacing:2px;font-weight:500}
nav .nav-links a:hover{color:var(--accent);opacity:1}
nav .nav-links a.active{color:var(--accent)}
@media(max-width:760px){
  nav .nav-inner{height:56px}
  nav .brand{font-size:0.95rem}
  nav .nav-links{gap:16px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  nav .nav-links a{font-size:0.65rem;letter-spacing:1.5px;white-space:nowrap}
}

/* ─── Layout ──────────────────────────────────────────────────────────── */
main{padding-top:64px;min-height:calc(100vh - 280px)}
section{padding:64px 24px}
section.tight{padding:40px 24px}
.container{max-width:var(--max-w);margin:0 auto}
.container-narrow{max-width:760px;margin:0 auto}

/* ─── Hero ────────────────────────────────────────────────────────────── */
.hero{padding:120px 24px 64px;text-align:left;position:relative;border-bottom:1px solid var(--border-default)}
.hero .container{max-width:980px}
.hero .eyebrow{font-size:0.65rem;text-transform:uppercase;letter-spacing:3px;color:var(--accent);font-weight:600;margin-bottom:18px;font-family:var(--font-body)}
.hero h1{font-family:var(--font-display);font-size:clamp(2.4rem,5.4vw,4rem);font-weight:600;line-height:1.08;letter-spacing:-0.5px;margin-bottom:18px}
.hero .lede{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--fg-muted);max-width:680px;line-height:1.7;margin-bottom:36px}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ─── Buttons ─────────────────────────────────────────────────────────── */
.btn{display:inline-block;padding:13px 26px;font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:2px;border:1px solid var(--accent);color:var(--accent);background:transparent;cursor:pointer;transition:all .25s;font-family:var(--font-body);text-decoration:none}
.btn:hover{background:var(--accent);color:var(--bg-primary);opacity:1}
.btn-solid{background:var(--accent);color:var(--bg-primary)}
.btn-solid:hover{opacity:.86}
.btn-ghost{border-color:var(--border-default);color:var(--fg-muted)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:transparent}

/* ─── Headings ────────────────────────────────────────────────────────── */
h2.section-h{font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:600;letter-spacing:-0.3px;margin-bottom:8px;color:var(--fg-primary)}
h2.section-h + .section-sub{font-size:0.95rem;color:var(--fg-muted);margin-bottom:32px;max-width:640px}
h3{font-family:var(--font-display);font-size:1.25rem;font-weight:600;margin-bottom:10px}

/* ─── Cards & Grids ───────────────────────────────────────────────────── */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.grid-3,.grid-2,.grid-4{grid-template-columns:1fr}}

.card{background:var(--bg-card);border:1px solid var(--border-default);padding:28px;border-radius:2px;transition:border-color .3s, transform .3s;display:flex;flex-direction:column;gap:12px}
.card:hover{border-color:var(--accent-line);transform:translateY(-2px)}
.card .eyebrow{font-size:0.6rem;text-transform:uppercase;letter-spacing:2.5px;color:var(--accent);font-weight:600}
.card h3{font-size:1.15rem;color:var(--fg-primary)}
.card p{color:var(--fg-muted);font-size:0.92rem;line-height:1.65;flex-grow:1}
.card .card-cta{margin-top:14px;font-size:0.7rem;text-transform:uppercase;letter-spacing:1.8px;color:var(--accent);font-weight:600}
.card .card-cta::after{content:" →"}
.card .status-tag{display:inline-block;font-size:0.6rem;text-transform:uppercase;letter-spacing:2px;padding:3px 8px;border:1px solid var(--border-default);color:var(--fg-deep);font-weight:600;align-self:flex-start}
.card .status-tag.live{color:var(--accent);border-color:var(--accent-line)}
.card .status-tag.dev{color:var(--fg-deep)}

/* ─── Pull quote ──────────────────────────────────────────────────────── */
.pullquote{border-left:3px solid var(--accent);padding:8px 0 8px 24px;margin:32px 0;font-family:var(--font-display);font-style:italic;font-size:1.3rem;line-height:1.5;color:var(--fg-primary);max-width:720px}

/* ─── Prose ──────────────────────────────────────────────────────────── */
.prose{max-width:720px;color:var(--fg-primary);font-size:1rem;line-height:1.8}
.prose p{margin-bottom:18px;color:var(--fg-muted)}
.prose p:first-of-type{color:var(--fg-primary)}
.prose strong{color:var(--fg-primary)}
.prose ul, .prose ol{margin:0 0 20px 24px;color:var(--fg-muted)}
.prose ul li, .prose ol li{margin-bottom:10px}
.prose h3{margin-top:36px;margin-bottom:12px}

/* ─── Definition list ─────────────────────────────────────────────────── */
dl.kv{display:grid;grid-template-columns:max-content 1fr;column-gap:24px;row-gap:14px;font-size:0.92rem}
dl.kv dt{color:var(--fg-deep);text-transform:uppercase;letter-spacing:2px;font-size:0.65rem;font-weight:600;align-self:center}
dl.kv dd{color:var(--fg-primary)}

/* ─── Pricing strip ───────────────────────────────────────────────────── */
.pricing{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:32px 0}
@media(max-width:700px){.pricing{grid-template-columns:1fr}}
.tier{background:var(--bg-card);border:1px solid var(--border-default);padding:30px;border-radius:2px;display:flex;flex-direction:column;gap:14px}
.tier.featured{border-color:var(--accent-line);background:linear-gradient(180deg,var(--accent-soft) 0%,var(--bg-card) 60%)}
.tier .tier-name{font-family:var(--font-display);font-size:1.3rem;color:var(--fg-primary)}
.tier .tier-price{font-family:var(--font-display);font-size:2rem;color:var(--accent);font-weight:600}
.tier .tier-price .per{font-size:0.8rem;color:var(--fg-deep);font-family:var(--font-body);font-weight:400;letter-spacing:1px;margin-left:4px}
.tier .tier-desc{color:var(--fg-muted);font-size:0.92rem;line-height:1.6;flex-grow:1}
.tier ul{list-style:none;margin:0;padding:0;font-size:0.88rem;color:var(--fg-muted)}
.tier ul li{padding:6px 0;padding-left:18px;position:relative}
.tier ul li::before{content:"·";color:var(--accent);position:absolute;left:6px;font-weight:700;font-size:1.2rem;line-height:1}

/* ─── Inquiry form ────────────────────────────────────────────────────── */
.inquiry-form{background:var(--bg-card);border:1px solid var(--border-default);border-radius:4px;padding:32px;max-width:720px;margin:0 auto}
.inquiry-form .form-row{margin-bottom:18px}
.inquiry-form .form-cols-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.inquiry-form .form-cols-2{grid-template-columns:1fr}}
.inquiry-form label{display:block;font-size:0.7rem;text-transform:uppercase;letter-spacing:1.8px;color:var(--fg-deep);font-weight:600;margin-bottom:6px}
.inquiry-form .form-cols-2 label{margin-bottom:0}
.inquiry-form input[type=text], .inquiry-form input[type=email], .inquiry-form input[type=tel],
.inquiry-form select, .inquiry-form textarea{width:100%;padding:12px 14px;background:var(--bg-primary);border:1px solid var(--border-default);color:var(--fg-primary);font-family:inherit;font-size:0.95rem;border-radius:2px;margin-top:6px;transition:border-color .25s}
.inquiry-form input:focus, .inquiry-form select:focus, .inquiry-form textarea:focus{outline:none;border-color:var(--accent)}
.inquiry-form input::placeholder, .inquiry-form textarea::placeholder{color:var(--fg-deeper)}
.inquiry-form select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23c9a96e' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.inquiry-form textarea{resize:vertical;min-height:140px;font-family:inherit}
.inquiry-form .honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.inquiry-form .form-disclaimer{font-size:0.78rem;color:var(--fg-deep);line-height:1.65;padding:14px 16px;border-left:2px solid var(--accent-line);background:rgba(201,169,110,0.03);font-style:italic;margin-top:8px}
.inquiry-form button[type=submit]{margin-top:8px;cursor:pointer}
.inquiry-form button[type=submit]:disabled{opacity:0.6;cursor:default}
.form-error{display:none;margin-top:14px;padding:12px 16px;border-left:2px solid #f85149;background:rgba(248,81,73,0.06);color:#f85149;font-size:0.85rem;border-radius:2px}
.form-success{padding:32px;text-align:center}
.form-success h3{font-family:var(--font-display);font-size:1.6rem;color:var(--accent);margin-bottom:14px}
.form-fallback{max-width:720px;margin:18px auto 0;text-align:center;font-size:0.82rem;color:var(--fg-deep)}
.form-fallback a{color:var(--fg-muted)}
.form-fallback a:hover{color:var(--accent)}

/* ─── Footer ──────────────────────────────────────────────────────────── */
footer.site-footer{border-top:1px solid var(--border-default);padding:56px 24px 32px;background:var(--bg-primary);margin-top:80px}
footer .footer-inner{max-width:var(--max-w);margin:0 auto}
footer .footer-cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
@media(max-width:760px){footer .footer-cols{grid-template-columns:1fr 1fr;gap:24px}}
footer .footer-col h4{font-size:0.65rem;text-transform:uppercase;letter-spacing:2.5px;color:var(--fg-deep);font-weight:600;margin-bottom:14px;font-family:var(--font-body)}
footer .footer-col a, footer .footer-col p{display:block;color:var(--fg-muted);font-size:0.85rem;line-height:1.9;text-decoration:none}
footer .footer-col a:hover{color:var(--accent)}
footer .footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:0.72rem;color:var(--fg-deep);padding-top:24px;border-top:1px solid var(--border-default);font-family:var(--font-mono)}
footer .footer-bottom span{letter-spacing:0.5px}