/* CharlieIQ — shared assets (fonts + contact form) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/inter-latin-wght-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/inter-latin-wght-italic.woff2) format('woff2');
}

/* Product hero: tool name leads (uses .prod-hero h1 display), tagline underneath */
.ph-name { margin-bottom: 12px; }
.ph-tagline {
  font-size: clamp(20px, 2.5vw, 30px); font-weight: 400; line-height: 1.3;
  letter-spacing: -0.01em; color: var(--t2, #cacada); margin: 0 0 22px; max-width: 30ch;
}
.ph-tagline .shimmer, .ph-tagline [class*="grad-text"] { font-weight: 500; }

/* Hero banner animations — muted so they sit quietly behind the copy.
   Filter keeps the iframe opaque (no bleed-through from the bright hero mesh). */
.hero-anim { filter: brightness(0.6) saturate(0.72); }
.anim-1f { filter: brightness(0.4) saturate(0.6); }   /* Aurora — very saturated blobs */
.anim-1e { filter: brightness(0.52) saturate(0.68); } /* Grid flythrough — bright lines */
.anim-1d { filter: brightness(0.5) saturate(0.72); }  /* Hex rain — dense glyphs */
.anim-1a { filter: brightness(0.58) saturate(0.72); } /* Data streams — glowing pulses */
@media (prefers-reduced-motion: reduce) { .hero-anim { filter: brightness(0.5) saturate(0.65); } }

/* Contact form (replaces the mailto: CTA) */
.contact-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.contact-form .cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-form .cf-input {
  flex: 1 1 240px; min-width: 0; height: 48px; padding: 0 16px;
  background: rgba(255,255,255,0.04); color: var(--t1, #fff);
  border: 1px solid var(--line-2, rgba(255,255,255,0.14)); border-radius: 12px;
  font: inherit; font-size: 15px; outline: none; transition: border-color .18s ease, box-shadow .18s ease;
}
.contact-form .cf-input::placeholder { color: var(--t3, #aaaabf); }
.contact-form .cf-input:focus-visible {
  border-color: rgba(255,255,255,0.55); box-shadow: 0 0 0 3px rgba(255,255,255,0.12);
}
.contact-form.is-sent .cf-input,
.contact-form.is-sent button { display: none; }
.contact-form .cf-thanks { margin: 0; color: var(--t2, #cacada); font-size: 15px; }
.contact-form.is-sent .cf-thanks { display: block; }

/* --- embedded "request a demo" box (rd) --- */
.rd-form{flex:1 1 100%;display:block;width:100%;max-width:600px;margin:0 auto;text-align:left;background:var(--card,#12122f);border:1px solid var(--line,rgba(255,255,255,.12));border-radius:18px;padding:26px 26px 28px;box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.rd-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.rd-grid{grid-template-columns:1fr}.rd-tools{grid-template-columns:1fr}}
.rd-field{display:flex;flex-direction:column;gap:7px;margin-top:16px}
.rd-grid .rd-field{margin-top:0}
.rd-field>label{font:600 12px/1.4 ui-monospace,monospace;color:var(--t3,#8686a0);letter-spacing:.06em;text-transform:uppercase}
.rd-field input[type=text],.rd-field input[type=email],.rd-field select,.rd-field textarea{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.045);border:1px solid var(--line,rgba(255,255,255,.14));color:var(--t1,#fff);font:15px/1.4 Inter,system-ui,sans-serif;outline:none;transition:border-color .15s,box-shadow .15s}
.rd-field textarea{resize:vertical;min-height:60px}
.rd-field input::placeholder,.rd-field textarea::placeholder{color:var(--t4,#606078)}
.rd-field input:focus,.rd-field select:focus,.rd-field textarea:focus{border-color:var(--violet,#8B5CF6);box-shadow:0 0 0 3px rgba(139,92,246,.18)}
.rd-tools{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rd-tools>label{display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line,rgba(255,255,255,.14));color:var(--t1,#fff);font:14px/1.2 Inter,system-ui,sans-serif;cursor:pointer;transition:border-color .15s,background .15s}
.rd-tools>label:hover{border-color:var(--violet,#8B5CF6)}
.rd-tools input{width:16px;height:16px;accent-color:var(--violet,#8B5CF6);flex:none}
.rd-form .btn{margin-top:20px;width:100%;justify-content:center}
.rd-success{flex:1 1 100%}
.rd-error{margin:12px 0 0;color:#F472B6;font:14px/1.5 Inter,system-ui,sans-serif}
.rd-success{max-width:560px;margin:0 auto;text-align:center;padding:8px}
.rd-success h3{color:var(--t1,#fff);font:600 22px/1.2 Inter,system-ui,sans-serif;margin:0 0 8px}
.rd-success p{color:var(--t2,#b0b0c8);font:15px/1.6 Inter,system-ui,sans-serif;margin:0}

/* --- product screenshots / videos (framed "browser window" look) --- */
.shot{position:relative;margin:0;border:1px solid var(--line,rgba(255,255,255,.14));border-radius:16px;overflow:hidden;background:var(--card,#12122f);box-shadow:0 28px 70px -34px rgba(0,0,0,.85),0 0 120px -14px rgba(139,92,246,.26),0 0 64px -22px rgba(34,211,197,.16);max-width:100%}
/* fake browser chrome removed — the screenshots already have their own app chrome */
.shot-bar{display:none}
.shot img,.shot video{display:block;width:100%;height:auto}
.shot-cap{margin:14px auto 0;max-width:60ch;text-align:center;color:var(--t3,#8686a0);font:13px/1.5 ui-monospace,monospace}
.shot-2up{display:grid;grid-template-columns:1fr;gap:38px;max-width:680px;margin:0 auto}
.shot-grid{display:grid;grid-template-columns:1fr;gap:44px;max-width:940px;margin:0 auto}
/* hero product shot spans full width (stacked hero) so dense UI stays legible */
.prod-hero-viz .shot{max-width:1100px;margin:0 auto}
.shot-play{position:relative;display:block;width:100%;border:0;padding:0;background:transparent;cursor:pointer}
.shot-play video{pointer-events:none}
.shot-play::after{content:"";position:absolute;inset:0;background:rgba(6,6,15,.32);transition:opacity .2s}
.shot-play .shot-playbtn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.shot-play .shot-playbtn::before{content:"";margin-left:4px;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #0d0d1c}
.shot-play.is-playing::after,.shot-play.is-playing .shot-playbtn{display:none}
.shot-play.is-playing video{pointer-events:auto}

/* ============================================================
   MOBILE NAVIGATION (hamburger) — loaded after each page's inline
   <style>, so these override the desktop "hide links on mobile" rules.
   Pure CSS: a hidden checkbox toggled by the burger <label>.
   ============================================================ */
.nav-burger{display:none}
.nav-cb{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
@media (max-width:760px){
  .nav-inner{position:relative}
  .nav-burger{
    display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:40px;padding:10px;box-sizing:border-box;flex:none;cursor:pointer;
    background:rgba(255,255,255,0.05);border:1px solid var(--line-2,rgba(255,255,255,0.16));border-radius:9px;
  }
  .nav-burger span{display:block;width:100%;height:2px;border-radius:2px;background:var(--t1,#fff);transition:transform .2s ease,opacity .2s ease}
  .nav-links{
    position:absolute;top:calc(100% + 1px);left:0;right:0;
    display:none;flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:10px 20px 18px;
    background:rgba(7,7,18,0.98);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
    border-bottom:1px solid var(--line,rgba(255,255,255,0.12));box-shadow:0 26px 50px rgba(0,0,0,0.55);
  }
  .nav-cb:checked ~ .nav-links{display:flex}
  /* defeat the desktop "hide everything on mobile" rules once the panel opens */
  .nav-cb:checked ~ .nav-links a,
  .nav-cb:checked ~ .nav-links .nav-drop{display:block}
  .nav-links a,.nav-links .nav-drop-toggle{width:100%;box-sizing:border-box;padding:12px;font-size:15px;border-radius:8px;text-align:left}
  .nav-links .nav-cta{text-align:center;margin-top:10px}
  .nav-cb:checked ~ .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-cb:checked ~ .nav-burger span:nth-child(2){opacity:0}
  .nav-cb:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* Tools submenu → inline expanded list (no hover/absolute dropdown on touch) */
  .nav-links .nav-drop{position:static}
  .nav-links .nav-drop-toggle{display:flex;justify-content:flex-start;gap:8px;pointer-events:none;color:var(--t3,#808098);font-size:11px;letter-spacing:0.14em;text-transform:uppercase}
  .nav-links .nav-drop-toggle svg{display:none}
  .nav-cb:checked ~ .nav-links .nav-drop-menu{
    position:static;opacity:1;visibility:visible;transform:none;display:flex;flex-direction:column;min-width:0;
    padding:0 0 4px 6px;margin:0;background:none;border:none;box-shadow:none;
  }
  .nav-cb:checked ~ .nav-links .nav-drop-menu a{padding:10px 12px}
}

/* ============ Responsive grid fixes (mobile) ============ */
/* feature-cards uses inline grid-template on some pages — needs !important to override */
@media (max-width:880px){ .feature-cards{grid-template-columns:1fr 1fr !important} }
@media (max-width:580px){ .feature-cards{grid-template-columns:1fr !important} }
@media (max-width:600px){ .lane{grid-template-columns:1fr !important} }
@media (max-width:560px){ .ap-phases{grid-template-columns:repeat(2,1fr)} .ap-metrics{grid-template-columns:1fr} }
@media (max-width:520px){ .grid-3,.grid-4{grid-template-columns:1fr} }
@media (max-width:480px){ .hero-stack{grid-template-columns:1fr} }
.nexus-page .badge{white-space:normal}

/* ============ Embedded demo form (.demo-embed) — used on the tool pages ============ */
    .demo-embed{
      --surface:rgba(255,255,255,0.024);
      --surface-2:rgba(255,255,255,0.045);
      --line:rgba(255,255,255,0.09);
      --line-strong:rgba(255,255,255,0.16);
      --text:#F3F3FA;
      --muted:#acacc4;
      --muted-dim:#a0a0b8;
      --cyan:#37E0CE;
      --purple:#A96BF5;
      --pink:#F0559C;
      --grad:linear-gradient(100deg,#37E0CE 0%,#A96BF5 52%,#F0559C 100%);
      --ok:#37E0CE;
      --font:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
      --mono:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
      width:100%;max-width:620px;margin:0 auto;text-align:left;
    }
    .demo-embed .card{
      position:relative;
      background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.018));
      border:1px solid var(--line);
      border-radius:20px;
      padding:30px 30px 28px;
      backdrop-filter:blur(8px);
    }
    .demo-embed .card-head{font-size:13px;color:var(--muted-dim);font-family:var(--mono);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:22px}
    .demo-embed form{display:grid;gap:18px}
    .demo-embed .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    @media(max-width:520px){.demo-embed .row{grid-template-columns:1fr}}
    .demo-embed .field{display:flex;flex-direction:column;gap:7px}
    .demo-embed label{font-size:12.5px;color:var(--muted);letter-spacing:0.01em}
    .demo-embed label .req{color:var(--pink)}
    .demo-embed input,.demo-embed select,.demo-embed textarea{
      background:rgba(0,0,0,0.28);
      border:1px solid var(--line);
      border-radius:10px;
      padding:11px 13px;
      color:var(--text);
      font-family:var(--font);font-size:14.5px;
      transition:border-color .18s, box-shadow .18s, background .18s;
      width:100%;
    }
    .demo-embed textarea{resize:vertical;min-height:78px}
    .demo-embed input::placeholder,.demo-embed textarea::placeholder{color:var(--muted-dim)}
    .demo-embed input:focus,.demo-embed select:focus,.demo-embed textarea:focus{
      outline:none;border-color:var(--purple);
      box-shadow:0 0 0 3px rgba(169,107,245,0.18);
      background:rgba(0,0,0,0.4);
    }
    .demo-embed select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%239494B0' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
    .demo-embed input.invalid,.demo-embed select.invalid{border-color:var(--pink);box-shadow:0 0 0 3px rgba(240,85,156,0.14)}
    .demo-embed .err{font-size:11.5px;color:var(--pink);min-height:0;display:none}
    .demo-embed .err.show{display:block}

    .demo-embed .tools-label{font-size:12.5px;color:var(--muted);margin-bottom:2px}
    .demo-embed .tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    @media(max-width:520px){.demo-embed .tool-grid{grid-template-columns:1fr}}
    .demo-embed .tool{
      position:relative;cursor:pointer;border:1px solid var(--line);border-radius:11px;
      padding:12px 13px;background:var(--surface);transition:all .16s;display:flex;gap:11px;align-items:flex-start;
    }
    .demo-embed .tool:hover{border-color:var(--line-strong);background:var(--surface-2)}
    .demo-embed .tool input{position:absolute;opacity:0;pointer-events:none}
    .demo-embed .tool .tick{
      width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line-strong);flex:none;margin-top:1px;
      display:grid;place-items:center;transition:all .16s;
    }
    .demo-embed .tool .tick svg{width:11px;height:11px;opacity:0;transform:scale(.6);transition:all .16s}
    .demo-embed .tool.on{border-color:var(--purple);background:rgba(169,107,245,0.09)}
    .demo-embed .tool.on .tick{background:var(--grad);border-color:transparent}
    .demo-embed .tool.on .tick svg{opacity:1;transform:scale(1)}
    .demo-embed .tool.on .t-name,.demo-embed .tool.on .t-role{color:#fff}
    .demo-embed .tool .t-name{display:block;font-size:14px;font-weight:500;line-height:1.2}
    .demo-embed .tool .t-role{display:block;font-family:var(--mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted-dim);margin-top:4px}

    .demo-embed .tool-all{
      grid-column:1 / -1;padding:16px 18px;align-items:center;
      border-color:var(--line-strong);
      background:linear-gradient(120deg,rgba(55,224,206,0.07),rgba(169,107,245,0.07) 55%,rgba(240,85,156,0.07));
    }
    .demo-embed .tool-all .tick{width:20px;height:20px}
    .demo-embed .tool-all .t-name{font-size:16px;font-weight:600;display:flex;align-items:center;gap:9px}
    .demo-embed .tool-all .t-role{font-size:10.5px}
    .demo-embed .tool-all .t-tag{
      font-family:var(--font);font-size:10px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
      color:#07070f;background:var(--grad);border-radius:100px;padding:2px 9px;line-height:1.6;
    }
    .demo-embed .tool-all.on{border-color:var(--purple);background:linear-gradient(120deg,rgba(55,224,206,0.14),rgba(169,107,245,0.16) 55%,rgba(240,85,156,0.14))}

    .demo-embed .submit{
      margin-top:4px;border:none;cursor:pointer;width:100%;
      background:var(--grad);color:#07070f;font-weight:600;font-size:15px;font-family:var(--font);
      padding:14px;border-radius:11px;letter-spacing:0.01em;
      transition:transform .12s, box-shadow .2s, opacity .2s;
      box-shadow:0 8px 30px -8px rgba(169,107,245,0.5);
    }
    .demo-embed .submit:hover{transform:translateY(-1px);box-shadow:0 12px 36px -8px rgba(169,107,245,0.62)}
    .demo-embed .submit:active{transform:translateY(0)}
    .demo-embed .fineprint{font-size:11.5px;color:var(--muted-dim);text-align:center;margin-top:-2px}
    .demo-embed .fineprint a{color:var(--muted)}

    .demo-embed .success{
      display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;
      padding:22px 8px;gap:16px;
    }
    .demo-embed .success.show{display:flex}
    .demo-embed .card.sent form, .demo-embed .card.sent .card-head{display:none}
    .demo-embed .success .ring{width:64px;height:64px}
    .demo-embed .success h3{font-size:22px;font-weight:500;letter-spacing:-0.02em}
    .demo-embed .success p{font-size:14px;color:var(--muted);max-width:34ch;line-height:1.55}
    .demo-embed .success .recap{font-family:var(--mono);font-size:11.5px;color:var(--cyan);letter-spacing:0.04em;border:1px solid var(--line);border-radius:10px;padding:10px 14px;background:var(--surface)}
    .demo-embed .success button{margin-top:6px;background:none;border:1px solid var(--line-strong);color:var(--muted);border-radius:9px;padding:9px 18px;font-family:var(--font);font-size:13px;cursor:pointer;transition:all .18s}
    .demo-embed .success button:hover{color:var(--text);border-color:var(--muted)}

/* jump-to-form lands the demo card below the sticky nav */
#demo-form{ scroll-margin-top: 90px; }
.demo-embed .tool-wide{ grid-column:1 / -1; align-items:center; }