/* =====================================================================
   Wooblywoo — Refined enterprise-dark theme
   Compliant, on-demand secure sharing for regulated enterprises.
   Self-contained, no external fonts/assets. Multi-page marketing site.
   ===================================================================== */

:root {
  --bg:            #0b1220;   /* deep navy */
  --bg-2:          #0e1730;   /* alt section */
  --surface:       #131d36;   /* panels / cards */
  --surface-2:     #18234172; /* subtle */
  --surface-hover: #1a2748;
  --border:        #26324f;
  --border-soft:   #1b2540;
  --text:          #cbd5e1;   /* cool grey */
  --text-bright:   #f1f5f9;
  --text-muted:    #8695b3;
  --accent:        #4c7dff;   /* indigo */
  --accent-2:      #37b0a3;   /* teal */
  --accent-soft:   rgba(76, 125, 255, .12);
  --accent-line:   rgba(76, 125, 255, .28);
  --good:          #37b0a3;
  --bad:           #f2607d;
  --radius:        14px;
  --radius-sm:     9px;
  --maxw:          1160px;
  --shadow:        0 18px 48px rgba(3, 8, 20, .55);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", "SF Mono", ui-monospace, Consolas, "Liberation Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); background: var(--bg); color: var(--text);
  line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 640px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 60% at 80% -6%, rgba(76, 125, 255, .18), transparent 70%),
    radial-gradient(48% 52% at 8% 4%, rgba(55, 176, 163, .12), transparent 72%);
}
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: 920px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { color: var(--text-bright); }
code {
  font-family: var(--mono); font-size: .88em; background: var(--border-soft);
  border: 1px solid var(--border); padding: .08em .38em; border-radius: 5px; color: #d7e0f2;
}
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:-999px; top:0; z-index:200; background:var(--accent); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; }
.skip-link:focus { left:0; }

/* -------------------------- Buttons -------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:15px; line-height:1; padding:13px 22px; border-radius:var(--radius-sm);
  border:1px solid transparent; cursor:pointer; transition:.18s ease; white-space:nowrap;
}
.btn:hover { text-decoration:none; }
.btn-sm { padding:9px 15px; font-size:14px; }
.btn-primary {
  background:linear-gradient(180deg, #5a86ff, var(--accent)); color:#fff;
  border-color:rgba(255,255,255,.12); box-shadow:0 6px 18px rgba(76,125,255,.28);
}
.btn-primary:hover { filter:brightness(1.06); transform:translateY(-1px); }
.btn-ghost { background:transparent; color:var(--text-bright); border-color:var(--border); }
.btn-ghost:hover { background:var(--surface); border-color:#3a486e; transform:translateY(-1px); }

/* -------------------------- Header / nav -------------------------- */
.site-header {
  position:sticky; top:0; z-index:100; background:rgba(11,18,32,.72);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--border-soft);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; height:68px; }
.logo { display:flex; align-items:center; gap:9px; font-size:20px; font-weight:800; color:var(--text-bright); letter-spacing:-.3px; }
.logo:hover { text-decoration:none; }
.logo-accent { color:var(--accent); }
.logo-mark { flex:none; filter:drop-shadow(0 0 8px rgba(76,125,255,.4)); }
.primary-nav { display:flex; align-items:center; gap:8px; }
.primary-nav a { color:var(--text-muted); font-size:15px; font-weight:500; padding:8px 12px; border-radius:7px; }
.primary-nav a:hover { color:var(--text-bright); text-decoration:none; background:var(--surface); }
.primary-nav a.active { color:var(--text-bright); }
.primary-nav a.active:not(.btn)::after { content:""; display:block; height:2px; margin-top:5px; border-radius:2px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
.primary-nav a.btn { color:#fff; margin-left:6px; }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span { width:22px; height:2px; background:var(--text); border-radius:2px; transition:.2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* -------------------------- Sections -------------------------- */
.section { position:relative; z-index:1; padding:88px 0; border-top:1px solid var(--border-soft); }
.section-alt { background:var(--bg-2); }
.eyebrow {
  display:inline-block; font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line);
  padding:6px 12px; border-radius:999px; margin-bottom:20px;
}
.section-title { font-size:clamp(26px,3.4vw,38px); font-weight:800; letter-spacing:-.6px; text-align:center; margin:0 0 14px; }
.section-lead { max-width:760px; margin:0 auto 48px; text-align:center; font-size:18px; color:var(--text-muted); }
.grad { background:linear-gradient(92deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* -------------------------- Home hero -------------------------- */
.hero { position:relative; z-index:1; padding:76px 0 84px; }
.hero-grid { display:grid; grid-template-columns:1.06fr .94fr; gap:54px; align-items:center; }
.hero h1 { font-size:clamp(36px,5.2vw,58px); line-height:1.05; font-weight:800; letter-spacing:-1.4px; margin:0 0 22px; }
.hero-sub { font-size:19px; color:var(--text-muted); max-width:580px; margin:0 0 30px; }
.hero-sub em { color:var(--text); font-style:normal; font-weight:600; }
.hero-cta { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:28px; }
.hero-note { font-size:13.5px; color:var(--text-muted); }

/* Page hero (subpages) */
.page-hero { position:relative; z-index:1; padding:72px 0 26px; text-align:center; }
.page-hero h1 { font-size:clamp(32px,4.6vw,50px); font-weight:800; letter-spacing:-1px; margin:0 0 16px; }
.page-hero p { max-width:720px; margin:0 auto; font-size:19px; color:var(--text-muted); }

/* -------------------------- Compliance strip -------------------------- */
.compliance-strip { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px; list-style:none; padding:0; margin:0; }
.compliance-strip li {
  display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--text);
  border:1px solid var(--border); background:var(--surface); padding:8px 14px; border-radius:999px;
}
.compliance-strip li .dot { width:7px; height:7px; border-radius:50%; background:var(--accent-2); }

/* -------------------------- Grids & cards -------------------------- */
.grid { display:grid; gap:24px; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
.card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:28px;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.card:hover { transform:translateY(-4px); border-color:#33436b; background:var(--surface-hover); }
.card h3 { margin:0 0 10px; font-size:20px; }
.card p { margin:0; color:var(--text-muted); font-size:15.5px; }
.card.mini { padding:24px; }
.card.mini h3 { font-size:17px; }
.card-icon {
  width:46px; height:46px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); border:1px solid var(--accent-line); margin-bottom:16px;
}
.card-icon svg { width:24px; height:24px; }
.feature-row { display:flex; gap:18px; align-items:flex-start; }
.feature-row .card-icon { margin:2px 0 0; flex:none; }

/* Pillar cards (documents / databases / code) */
.pillar { position:relative; overflow:hidden; }
.pillar::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); opacity:.9; }
.pillar .tag { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-2); margin-bottom:10px; }

/* Industry cards */
.industry { border-left:3px solid var(--accent); }
.industry h3 { display:flex; align-items:center; gap:10px; }
.industry .use { list-style:none; padding:0; margin:14px 0 0; display:grid; gap:8px; }
.industry .use li { position:relative; padding-left:22px; font-size:14.5px; color:var(--text-muted); }
.industry .use li::before { content:"→"; position:absolute; left:0; color:var(--accent-2); font-weight:700; }

/* -------------------------- Compliance grid -------------------------- */
.frameworks { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.framework { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:20px 22px; }
.framework h4 { margin:0 0 4px; font-size:16px; color:var(--text-bright); }
.framework p { margin:0; font-size:14px; color:var(--text-muted); }

/* -------------------------- Trusted-by logo wall -------------------------- */
.trusted { padding:44px 0; border-top:1px solid var(--border-soft); position:relative; z-index:1; }
.trusted-eyebrow { text-align:center; text-transform:uppercase; letter-spacing:.14em; font-size:12.5px; font-weight:600; color:var(--text-muted); margin:0 0 28px; }
.logo-wall { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:22px 24px; align-items:center; }
.brand { display:flex; align-items:center; justify-content:center; gap:10px; color:var(--text-muted); opacity:.7; filter:grayscale(1); padding:10px 6px; transition:.2s ease; }
.brand:hover { opacity:1; color:var(--text); filter:none; transform:translateY(-2px); }
.brand svg { flex:none; }
.brand .wordmark { font-weight:700; font-size:18px; letter-spacing:-.3px; }

/* -------------------------- Flow steps -------------------------- */
.flow { display:flex; align-items:stretch; justify-content:center; gap:6px; list-style:none; padding:0; margin:0 0 8px; flex-wrap:wrap; }
.flow-step { flex:1 1 200px; max-width:250px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px 20px; }
.flow-num { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; margin-bottom:12px; background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-line); font-weight:700; }
.flow-step h3 { margin:0 0 6px; font-size:16.5px; }
.flow-step p { margin:0; font-size:14px; color:var(--text-muted); }
.flow-arrow { display:flex; align-items:center; color:#3a486e; font-size:24px; font-weight:700; flex:0 0 auto; padding:0 2px; }

/* -------------------------- Injection demo -------------------------- */
.demo { margin:0; border:1px solid var(--border); border-radius:var(--radius); background:#0a1122; box-shadow:var(--shadow); overflow:hidden; }
.demo-chrome { display:flex; align-items:center; gap:14px; padding:11px 14px; background:var(--surface); border-bottom:1px solid var(--border); }
.demo-dots { display:flex; gap:7px; }
.demo-dots span { width:11px; height:11px; border-radius:50%; background:#2c3a5c; }
.demo-file { font-family:var(--mono); font-size:12.5px; color:var(--text-muted); }
.demo-file .demo-name { color:var(--text); }
.demo-toggle { margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--text-muted); background:#0a1122; border:1px solid var(--border); border-radius:6px; padding:6px 11px; cursor:pointer; transition:.18s; }
.demo-toggle:hover { border-color:#3a486e; color:var(--text); }
.demo-toggle[aria-pressed="true"] { border-color:var(--accent-2); color:var(--accent-2); }
.demo-code { font-family:var(--mono); font-size:13px; line-height:1.9; padding:16px 4px 18px; min-height:300px; }
.code-row { display:flex; align-items:baseline; padding:0 8px; white-space:pre; }
.code-row .gutter { flex:none; width:34px; text-align:right; padding-right:14px; color:#3a486e; user-select:none; position:relative; }
.code-row .shield { position:absolute; right:-2px; top:0; font-size:10px; opacity:0; transition:opacity .3s ease .15s; cursor:help; }
.code-row.decrypted .shield { opacity:1; }
.code-row .content { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; }
.code-row .content .cipher { color:#586a92; letter-spacing:.5px; }
.code-row.decrypted .content { animation:gc-fade .45s ease-out both; }
@keyframes gc-fade { from{opacity:0; transform:translateX(-6px); filter:blur(3px);} to{opacity:1; transform:translateX(0); filter:blur(0);} }
.tok-key{color:#7aa2ff;} .tok-fn{color:#6bd6c6;} .tok-str{color:#9ecbff;} .tok-num{color:#7aa2ff;} .tok-com{color:#8695b3; font-style:italic;} .tok-punc{color:#cbd5e1;} .tok-var{color:#e0b978;}
.demo-caption { display:flex; flex-direction:column; gap:3px; padding:12px 16px 15px; border-top:1px solid var(--border); font-size:12.5px; color:var(--text-muted); background:var(--surface); }
#demo-status { color:var(--text); font-weight:500; }
.demo-note { font-size:11.5px; opacity:.8; }

/* -------------------------- Comparison table -------------------------- */
.table-wrap { overflow-x:auto; border-radius:var(--radius); border:1px solid var(--border); }
.compare { width:100%; border-collapse:collapse; background:var(--surface); min-width:720px; }
.compare th, .compare td { padding:16px 18px; text-align:left; border-bottom:1px solid var(--border); font-size:15px; vertical-align:top; }
.compare thead th { background:rgba(19,29,54,.7); font-weight:700; }
.compare tbody th { color:var(--text-bright); font-weight:600; }
.compare .col-us, .compare td.pos { color:var(--accent-2); }
.compare td.pos { font-weight:600; }
.compare td.neg { color:var(--text-muted); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom:0; }
.compare .col-us, .compare tbody td.pos { border-left:1px solid var(--accent-line); }
.compare tbody td.pos { background:rgba(76,125,255,.05); }

/* -------------------------- Pull quote / FAQ -------------------------- */
.pull-quote { max-width:820px; margin:44px auto 0; padding:26px 30px; border-left:3px solid var(--accent); background:var(--surface); border-radius:0 var(--radius) var(--radius) 0; font-size:19px; color:var(--text-bright); }
.pull-quote em { color:var(--accent); font-style:normal; }
.faq { display:grid; gap:14px; }
.faq-item { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:4px 22px; }
.faq-item summary { cursor:pointer; padding:18px 30px 18px 0; font-weight:600; font-size:16.5px; color:var(--text-bright); list-style:none; position:relative; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:2px; top:50%; transform:translateY(-50%); font-size:22px; font-weight:400; color:var(--text-muted); transition:transform .2s; }
.faq-item[open] summary::after { content:"−"; }
.faq-item p { margin:0 0 20px; color:var(--text-muted); font-size:15.5px; }

/* -------------------------- CTA band + contact form -------------------------- */
.cta-section { border-top:1px solid var(--border-soft); }
.cta-card { background:radial-gradient(120% 140% at 50% 0%, rgba(76,125,255,.14), transparent 62%), var(--surface); border:1px solid var(--border); border-radius:18px; padding:52px 44px; text-align:center; box-shadow:var(--shadow); }
.cta-card h2 { font-size:clamp(24px,3vw,32px); margin:0 0 14px; letter-spacing:-.5px; }
.cta-card > p { max-width:640px; margin:0 auto 30px; color:var(--text-muted); font-size:17px; }
.form-panel { max-width:620px; margin:0 auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:28px; text-align:left; }
#my-form-container { min-height:60px; }
.form-fallback { margin:0; }
.form-fallback .input-row { display:flex; gap:12px; }
.form-fallback input[type="email"] { flex:1; background:var(--bg); border:1px solid var(--border); padding:13px 16px; border-radius:var(--radius-sm); color:var(--text-bright); font-size:15px; font-family:var(--font); }
.form-fallback input[type="email"]::placeholder { color:#586a92; }
.form-fallback input[type="email"]:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(76,125,255,.28); }
.form-msg { min-height:20px; margin:14px 0 0; font-size:14.5px; font-weight:500; }
.form-msg.ok { color:var(--good); }
.form-msg.err { color:var(--bad); }
.cta-fineprint { margin:18px 0 0; font-size:13px; color:var(--text-muted); }

/* -------------------------- Focus -------------------------- */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* -------------------------- Footer -------------------------- */
.site-footer { border-top:1px solid var(--border-soft); padding:52px 0 40px; background:var(--bg-2); position:relative; z-index:1; }
.footer-top { display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; margin-bottom:30px; }
.footer-brand { display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:18px; color:var(--text-bright); }
.footer-brand + p { color:var(--text-muted); font-size:14.5px; max-width:340px; margin:10px 0 0; }
.footer-cols { display:flex; gap:56px; flex-wrap:wrap; }
.footer-col h5 { margin:0 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); }
.footer-col a { display:block; color:var(--text); font-size:14.5px; padding:4px 0; }
.footer-col a:hover { color:var(--accent); text-decoration:none; }
.footer-legal { border-top:1px solid var(--border-soft); padding-top:20px; color:#6c7a9c; font-size:12.5px; max-width:820px; }

/* -------------------------- Reveal -------------------------- */
.reveal, .reveal-group > * { opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; }
.reveal.in, .reveal-group.in > * { opacity:1; transform:none; }
.reveal-group.in > *:nth-child(2){ transition-delay:.08s; }
.reveal-group.in > *:nth-child(3){ transition-delay:.16s; }
.reveal-group.in > *:nth-child(4){ transition-delay:.24s; }
.reveal-group.in > *:nth-child(5){ transition-delay:.3s; }
.reveal-group.in > *:nth-child(6){ transition-delay:.36s; }

/* -------------------------- Responsive -------------------------- */
@media (max-width:920px){
  .hero-grid { grid-template-columns:1fr; gap:42px; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .frameworks { grid-template-columns:repeat(2,1fr); }
  .flow-arrow { display:none; }
  .flow-step { max-width:none; }
}
@media (max-width:760px){
  .nav-toggle { display:flex; }
  .primary-nav {
    position:absolute; top:68px; left:0; right:0; flex-direction:column; align-items:stretch; gap:2px;
    background:rgba(11,18,32,.98); backdrop-filter:blur(12px); border-bottom:1px solid var(--border);
    padding:12px 24px 20px; transform:translateY(-8px); opacity:0; pointer-events:none; transition:.2s;
  }
  .primary-nav.open { transform:none; opacity:1; pointer-events:auto; }
  .primary-nav a { padding:12px 6px; border-bottom:1px solid var(--border-soft); }
  .primary-nav a.active:not(.btn)::after { display:none; }
  .primary-nav a.btn { margin:8px 0 0; border-bottom:0; text-align:center; }
  .section { padding:64px 0; }
  .grid-2, .grid-3 { grid-template-columns:1fr; }
  .logo-wall { grid-template-columns:repeat(2,1fr); gap:16px; }
  .frameworks { grid-template-columns:1fr; }
  .cta-card { padding:38px 22px; }
  .form-fallback .input-row { flex-direction:column; }
  .pull-quote { font-size:17px; padding:22px; }
}
@media (max-width:440px){ .grid-4 { grid-template-columns:1fr; } .brand .wordmark { font-size:16px; } }

/* -------------------------- Reduced motion -------------------------- */
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal, .reveal-group > * { opacity:1; transform:none; }
  .code-row.decrypted .content { animation:none; }
}