@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ── Reset & tokens ── */
:root{--ink:#18201f;--muted:#65706d;--paper:#f4f5f0;--line:#d9ded8;--green:#c4f05b;--dark:#18201f;--blue:#1d4a56;--orange:#f1b36d}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif;font-size:16px;line-height:1.55;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
img{max-width:100%;display:block}

/* ── Layout ── */
.container{width:min(1180px,calc(100% - 48px));margin:0 auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Header / Nav ── */
.site-header{position:sticky;top:0;z-index:10;border-bottom:1px solid rgba(217,222,216,.7);background:rgba(244,245,240,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.nav-shell{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:800;letter-spacing:-.03em;white-space:nowrap;overflow:hidden}
.brand-mark{display:grid;place-items:center;width:26px;height:26px;background:var(--ink);color:var(--green);font:500 9px/1 'DM Mono',monospace;letter-spacing:-.08em;flex-shrink:0}
.brand-dot{color:#9cbc28}
.site-nav{display:flex;align-items:center;gap:20px;font-size:12px;font-weight:700}
.site-nav>a:not(.button){color:#66716e}
.site-nav>a:not(.button):hover{color:var(--ink)}
.footer-links a{color:#66716e}
.footer-links a:hover{color:var(--ink)}

/* ── Buttons ── */
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;padding:10px 16px;font-size:12px;font-weight:800;line-height:1.2;transition:transform .2s ease,background .2s ease;-webkit-tap-highlight-color:transparent}
.button:hover{transform:translateY(-2px)}
.button-primary{background:var(--green);color:var(--ink)}
.button-primary:hover{background:#d2fa76}
.button-dark{background:var(--ink);color:#fff;padding:9px 14px}
.button-light{background:var(--green);color:var(--ink)}
.button-small{font-size:11px}
.menu-toggle{display:none;border:0;background:none;padding:8px;-webkit-tap-highlight-color:transparent}
.menu-toggle span:not(.sr-only){display:block;width:22px;height:2px;background:var(--ink);margin:4px;border-radius:1px}

/* ── Utility ── */
.text-link,.light-link{font-size:12px;font-weight:800}
.text-link{color:#4a5753}
.text-link span,.light-link span{margin-left:6px}
.text-link:hover,.light-link:hover{text-decoration:underline}
.light-link{color:#eef4ed}

/* ── Shared typography ── */
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 22px;color:#69726f;font:500 10px/1.2 'DM Mono',monospace;letter-spacing:.05em;text-transform:uppercase}
.eyebrow-line{display:inline-block;width:30px;height:1px;background:#84918c}
.hero h1 em,h2 em{font-style:normal;color:#6d8e2a}

/* ── Lead Hero — Google-style centered ── */
.lead-hero{
  min-height:calc(100vh - 52px);
  display:flex;align-items:center;justify-content:center;
  padding:20px 0 24px;
  background:var(--paper);
  background-image:
    radial-gradient(650px circle at var(--mouse-x,50%) var(--mouse-y,35%),rgba(196,240,91,.20),transparent 65%),
    linear-gradient(rgba(217,222,216,.45) 1px,transparent 1px),
    linear-gradient(90deg,rgba(217,222,216,.45) 1px,transparent 1px);
  background-size:100% 100%,80px 80px,80px 80px;
  position:relative;overflow:hidden
}
.lead-hero:before{
  content:'';display:block;position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 30%,rgba(196,240,91,.11),transparent 50%),
    linear-gradient(180deg,var(--paper) 0%,rgba(244,245,240,.92) 50%,rgba(244,245,240,.75) 100%)
}
.lead-hero .hero-grid{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  max-width:860px;margin:0 auto;width:100%;gap:0
}
.lead-hero .hero-copy{max-width:840px;margin:0 auto;text-align:center;width:100%}

/* Beacon */
.live-beacon{display:inline-flex;align-items:center;gap:6px;margin-bottom:8px;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.95);border:1px solid #d4ddd4;box-shadow:0 2px 6px rgba(24,32,31,.05);font:500 10px/1.2 'DM Mono',monospace;color:#3b4944;letter-spacing:.02em;flex-wrap:wrap;justify-content:center}
.beacon-dot{position:relative;display:inline-flex;align-items:center;justify-content:center;width:7px;height:7px;border-radius:50%;background:#6d9029;flex-shrink:0}
.beacon-ripple{position:absolute;inset:-2px;border-radius:50%;background:#6d9029;animation:beaconRipple 2s cubic-bezier(0,0,.2,1) infinite;pointer-events:none}
@keyframes beaconRipple{0%{transform:scale(.8);opacity:.85}100%{transform:scale(3.2);opacity:0}}
.beacon-divider{color:#98aba1}
.beacon-meta{color:#72837b}

/* Hero copy */
.hero-context{max-width:680px;margin:0 auto 8px;color:#3d4a46;font-size:14px;line-height:1.55;letter-spacing:-.01em;text-align:center}
.hero-context strong{color:#18201f;font-weight:700}
.lead-hero h1{max-width:820px;margin:0 auto 0;font-size:clamp(30px,4.2vw,52px);line-height:1.06;letter-spacing:-.065em;font-weight:800;text-align:center}
.lead-hero h1 em{color:#6d8e2a}

/* Pillars */
.hero-pillars{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;margin:8px auto 6px;padding:3px 6px;background:rgba(255,255,255,.94);border:1px solid #d4ddd4;box-shadow:0 2px 10px rgba(28,47,38,.04);border-radius:30px}
.pillar{border:0;background:transparent;padding:5px 12px;border-radius:16px;font:700 11px 'DM Mono',monospace;color:#55625d;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:5px;min-height:32px;-webkit-tap-highlight-color:transparent}
.pillar:hover{color:#18201f;background:rgba(0,0,0,.04)}
.pillar.is-active{background:#1c2827;color:#fff;box-shadow:0 2px 8px rgba(28,40,39,.18)}
.pillar-indicator{width:5px;height:5px;border-radius:50%;background:transparent;transition:background .2s ease}
.pillar.is-active .pillar-indicator{background:var(--green)}
.pillar-sep{color:#8fa098;font-weight:700;line-height:1}

/* Terminal */
.pillar-terminal{width:min(680px,100%);margin:0 auto 6px;background:#1c2827;color:#e5ede7;border:1px solid #2e3e3a;border-radius:8px;overflow:hidden;text-align:left;box-shadow:0 10px 24px rgba(18,30,26,.1),0 2px 4px rgba(0,0,0,.04);transition:border-color .2s ease}
.pillar-terminal:hover{border-color:#405852}
.terminal-header{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background:#141e1d;border-bottom:1px solid #283734;font:500 10px 'DM Mono',monospace;color:#8ba096;gap:8px}
.terminal-dots{display:flex;gap:5px;flex-shrink:0}
.terminal-dots span{width:8px;height:8px;border-radius:50%}
.terminal-dots span:nth-child(1){background:#e06c59}
.terminal-dots span:nth-child(2){background:#e3b04c}
.terminal-dots span:nth-child(3){background:#6da246}
.terminal-title{font-size:10px;color:#9cb1a6;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-align:center}
.terminal-badge{padding:2px 6px;background:rgba(196,240,91,.12);color:var(--green);border:1px solid rgba(196,240,91,.3);border-radius:3px;font:700 8.5px 'DM Mono',monospace;letter-spacing:.04em;flex-shrink:0}
.terminal-body{padding:8px 12px;display:grid;gap:6px;font-size:12px;line-height:1.5;transition:opacity .18s ease}
.terminal-line{display:grid;grid-template-columns:130px 1fr;align-items:start;gap:8px}
.term-tag{display:inline-block;white-space:nowrap;padding:2px 6px;border-radius:3px;font:700 8.5px 'DM Mono',monospace;letter-spacing:.04em;text-align:center}
.tag-risk{background:rgba(239,131,112,.15);color:#f79685;border:1px solid rgba(239,131,112,.3)}
.tag-fix{background:rgba(196,240,91,.12);color:var(--green);border:1px solid rgba(196,240,91,.3)}
.term-msg{color:#d1ded6;font-size:11px;font-family:'DM Mono',monospace;white-space:normal;word-break:break-word;line-height:1.45}
.line-fix .term-msg{color:#f4f7f4}

/* Tagline & tools */
.hero-tagline{max-width:620px;margin:0 auto 0;color:#596863;font-size:12.5px;line-height:1.4;font-weight:600;text-align:center}
.tool-tags{display:flex;align-items:center;justify-content:center;gap:8px;margin:6px auto 0;flex-wrap:wrap}
.tool-tags-label{font:500 9.5px 'DM Mono',monospace;color:#7b8882;text-transform:uppercase;letter-spacing:.04em}
.tool-pill-group{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.tool-pill{display:inline-block;padding:3px 9px;border-radius:5px;background:rgba(255,255,255,.8);border:1px solid #d4ded3;color:#495651;font:700 9.5px 'DM Mono',monospace;transition:all .2s ease;cursor:default}
.tool-pill:hover{background:#fff;color:#18201f;border-color:#8da47e;transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,.05)}

/* ── Hero form — compact horizontal ── */
.lead-hero .hero-lead-form{position:relative;left:0;transform:none;width:min(640px,100%);margin:12px auto 0;padding:0;background:transparent;border:0;box-shadow:none}
.hero-form-fields{display:grid;grid-template-columns:1fr 1.1fr auto;gap:8px;align-items:stretch}
.hero-form-fields input{min-width:0;height:44px;border:1px solid #c8d4c7;border-radius:7px;background:rgba(255,255,255,.98);padding:0 13px;color:var(--ink);font-size:16px;font-weight:500;outline:0}
.hero-form-fields input:focus{border-color:#7d9d46;box-shadow:0 0 0 3px rgba(196,240,91,.3)}
.hero-form-fields input::placeholder{color:#9aaa9e;font-size:13px}
.hero-form-fields .button{height:44px;min-height:44px;white-space:nowrap;border-radius:7px;background:var(--green);color:var(--ink);padding:0 18px;font-size:12px;font-weight:800;border:0;-webkit-tap-highlight-color:transparent}
.hero-form-fields .button:hover{background:#d2fa76;transform:none}
.lead-hero .hero-lead-form .checkbox-label{display:none!important}
.lead-hero .form-feedback{min-height:0;font-size:11px;text-align:center;margin-top:5px;color:#b65a46}
.lead-hero .hero-audit-link{text-align:center;margin:8px auto 0;font-size:11px;color:#606e69;line-height:1.45;max-width:620px}
.lead-hero .hero-audit-link .text-link{font-size:11px;color:#202e2a}
.lead-hero .hero-visual{display:none}

/* ── Trust row ── */
.trust-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin:10px auto 0;width:100%}
.trust-person{display:flex;align-items:center;gap:7px;padding-right:12px;border-right:1px solid #d9ded8}
.trust-avatar{width:30px;height:30px;border:2px solid #fff;box-shadow:0 0 0 1px #cdd8ce;object-fit:cover;border-radius:50%;flex-shrink:0}
.trust-person strong,.trust-person small{display:block}
.trust-person strong{color:#1b2926;font-size:10px}
.trust-person small{margin-top:1px;color:#7d8983;font:8px 'DM Mono',monospace}
.trust-stat{display:flex;align-items:center;gap:5px;padding-right:12px;border-right:1px solid #d9ded8;color:#72807a}
.trust-stat strong{color:#1b2926;font-size:14px;letter-spacing:-.04em}
.trust-stat span{font:8.5px 'DM Mono',monospace;text-transform:uppercase}
.trust-rating strong{color:#d99a2d;font-size:11px;letter-spacing:.5px}
.profile-tile{display:flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid #d9ded8;background:rgba(255,255,255,.68);color:#53615b;font:500 9px 'DM Mono',monospace;transition:border-color .2s ease,transform .2s ease,background .2s ease;-webkit-tap-highlight-color:transparent}
.profile-tile:hover{background:#fff;border-color:#9caf94;transform:translateY(-1px)}
.profile-tile>span:last-child{color:#8a9891;font-size:10px}
.profile-icon{display:grid;place-items:center;width:18px;height:18px;color:#fff;font:800 9px/1 Arial,sans-serif;flex-shrink:0}
.linkedin-icon{background:#0a66c2}
.contra-icon{background:#1f2724}

/* ── Footer ── */
.site-footer{padding:8px 0;background:#141b1a;color:#8f9c96;border-top:1px solid rgba(217,222,216,.15)}
.site-footer .container{display:flex;align-items:center;justify-content:space-between;gap:14px}
.footer-grid{display:flex;align-items:center;justify-content:space-between;width:100%;gap:14px}
.footer-grid>div:first-child{display:flex;align-items:center;gap:8px}
.footer-grid p{display:none}
.footer-links{display:flex;align-items:center;gap:14px;font-size:10px;flex-wrap:wrap}
.footer-meta{display:flex;flex-direction:row;align-items:center;gap:10px;font:9px 'DM Mono',monospace;color:#6b7872;white-space:nowrap}

/* ── Lead form (modal / request-audit page) ── */
.lead-form{display:grid;gap:14px;margin-top:24px}
.lead-form label{display:grid;gap:6px;color:#44524d;font-size:11px;font-weight:800}
.lead-form label>span:first-child{color:#da8267}
.lead-form input,.lead-form select,.lead-form textarea{width:100%;border:1px solid #ced8d0;background:#fff;padding:12px;color:var(--ink);outline:0;font-size:16px;resize:vertical}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{border-color:#7d9d46;box-shadow:0 0 0 3px rgba(196,240,91,.25)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.checkbox-label{display:flex!important;grid-template-columns:none!important;flex-direction:row;align-items:flex-start;gap:9px;color:#6e7a75!important;font-size:10px!important;font-weight:500!important;line-height:1.5}
.checkbox-label input{width:15px;height:15px;margin-top:1px;accent-color:#6e922d;flex-shrink:0}
.checkbox-label a{text-decoration:underline}
.form-feedback{min-height:16px;color:#b65a46;font-size:11px}
.form-submit{width:100%;border:0;min-height:48px;font-size:14px}
.form-submit[disabled]{opacity:.6;cursor:wait}
.form-footnote{margin:0;color:#89938d!important;text-align:center;font-size:10px!important}

/* ── Modal ── */
.modal{display:none;position:fixed;z-index:50;inset:0;align-items:center;justify-content:center;padding:16px}
.modal.is-open{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(12,21,19,.65);backdrop-filter:blur(3px)}
.modal-panel{position:relative;z-index:1;width:min(680px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#f9faf5;padding:36px 32px;box-shadow:0 25px 80px rgba(0,0,0,.25)}
.modal-close{position:absolute;right:16px;top:12px;border:0;background:none;font-size:28px;color:#75817c;line-height:1;padding:4px}
.modal-panel h2{max-width:460px;margin:0;font-size:clamp(28px,4vw,38px);line-height:1.05;letter-spacing:-.06em}
.modal-panel>p:not(.eyebrow){max-width:510px;color:#6e7a75;font-size:13px}

/* ══════════════════════════════════════
   RESPONSIVE — tablet (≤900px)
══════════════════════════════════════ */
@media(max-width:900px){
  .container{width:calc(100% - 40px)}
  /* nav */
  .menu-toggle{display:block}
  .site-nav{
    display:none;position:absolute;top:48px;left:0;right:0;
    background:rgba(244,245,240,.98);backdrop-filter:blur(8px);
    padding:16px 20px;flex-direction:column;align-items:stretch;gap:0;
    border-bottom:1px solid var(--line);z-index:100
  }
  .site-nav.is-open{display:flex}
  .site-nav>a{padding:14px 0;border-bottom:1px solid rgba(217,222,216,.5);font-size:14px}
  .site-nav>a:last-child{border-bottom:0}
  /* hero */
  .lead-hero{min-height:auto;padding:28px 0 32px}
  .lead-hero .hero-grid{max-width:640px}
  /* form goes stacked on tablet */
  .lead-hero .hero-lead-form{width:100%;margin:14px auto 0}
  .hero-form-fields{grid-template-columns:1fr;gap:10px}
  .hero-form-fields input{font-size:16px}
  .hero-form-fields .button{width:100%;height:48px;font-size:13px}
  /* trust */
  .trust-row{gap:8px}
  /* footer */
  .footer-grid{flex-direction:column;gap:6px;text-align:center}
  .footer-links{justify-content:center}
  .footer-meta{justify-content:center;text-align:center}
  /* modal form */
  .form-row{grid-template-columns:1fr}
}

/* ══════════════════════════════════════
   RESPONSIVE — mobile (≤640px)
══════════════════════════════════════ */
@media(max-width:640px){
  .container{width:calc(100% - 32px)}
  /* header */
  .nav-shell{min-height:48px}
  .brand{font-size:15px}
  /* hero */
  .lead-hero{padding:24px 0 28px}
  .lead-hero .hero-grid{gap:0}
  /* beacon — wrap gracefully */
  .live-beacon{font-size:9.5px;padding:4px 10px;max-width:100%}
  .beacon-meta{display:block;text-align:center;width:100%}
  /* context */
  .hero-context{font-size:13px;margin-bottom:6px;padding:0 4px}
  /* h1 */
  .lead-hero h1{font-size:clamp(26px,7.5vw,38px);letter-spacing:-.055em}
  /* pillars */
  .hero-pillars{gap:3px;padding:3px 5px;margin:7px auto 5px}
  .pillar{padding:4px 9px;font-size:10px;min-height:30px}
  .pillar-sep{font-size:10px}
  /* terminal */
  .pillar-terminal{margin-bottom:6px;border-radius:6px}
  .terminal-header{padding:5px 10px}
  .terminal-title{font-size:9px}
  .terminal-body{padding:7px 10px;gap:5px}
  .terminal-line{grid-template-columns:1fr;gap:3px}
  .term-tag{font-size:8px}
  .term-msg{font-size:10.5px}
  /* tagline & tools */
  .hero-tagline{font-size:12px;padding:0 4px}
  .tool-tags{gap:6px;margin-top:5px}
  .tool-tags-label{font-size:9px}
  .tool-pill{font-size:9px;padding:2.5px 7px}
  /* form — full-width stacked */
  .lead-hero .hero-lead-form{margin-top:12px}
  .hero-form-fields{gap:9px}
  .hero-form-fields input{height:48px;border-radius:8px;font-size:16px;padding:0 14px}
  .hero-form-fields .button{height:50px;border-radius:8px;font-size:14px;letter-spacing:.01em}
  /* trust row — compact */
  .trust-row{gap:8px;margin-top:8px;flex-wrap:wrap}
  .trust-person{border-right:0;border-bottom:1px solid #d9ded8;padding:0 0 7px;width:100%;justify-content:center}
  .trust-stat{padding-right:8px;font-size:11px}
  .trust-stat strong{font-size:12px}
  .profile-tile{padding:6px 10px;font-size:9px}
  /* audit link */
  .lead-hero .hero-audit-link{margin-top:8px}
  .lead-hero .hero-audit-link .text-link{font-size:11px}
  /* footer */
  .footer-links{gap:10px;font-size:9px;justify-content:center}
  .footer-meta{font-size:8.5px;flex-wrap:wrap;justify-content:center;gap:6px}
}

/* ══════════════════════════════════════
   RESPONSIVE — small phone (≤390px)
══════════════════════════════════════ */
@media(max-width:390px){
  .container{width:calc(100% - 24px)}
  .brand{font-size:12px;gap:6px}
  .brand-mark{width:22px;height:22px;font-size:8px}
  .lead-hero h1{font-size:clamp(24px,8vw,34px)}
  .hero-pillars{flex-direction:column;align-items:stretch;border-radius:10px;gap:2px}
  .pillar{justify-content:center;padding:6px 12px}
  .pillar-sep{display:none}
  .beacon-meta{font-size:8.5px}
  .hero-context{font-size:12.5px}
  .trust-stat{border-right:0;padding-right:0}
}

/* ══════════════════════════════════════
   SHORT SCREENS (landscape phones)
══════════════════════════════════════ */
@media(max-height:600px) and (max-width:900px){
  .lead-hero{min-height:auto;padding:16px 0 20px}
  .live-beacon{margin-bottom:5px}
  .hero-context{font-size:12px;margin-bottom:4px}
  .lead-hero h1{font-size:clamp(22px,5vw,32px)}
  .hero-pillars{margin:5px auto 4px}
  .pillar-terminal{margin-bottom:4px}
  .terminal-body{padding:5px 10px;gap:3px}
  .hero-tagline{font-size:11px}
  .tool-tags{margin-top:4px}
  .trust-row{margin-top:6px}
}
