/* SAFER X REDACT — storefront styling layered on Tailwind utilities */

:root{
  --ink:#050506; --ink-2:#0C0C0F; --ink-3:#131317; --line:#232329; --line-2:#2E2E36;
  --mute:#8C8C99; --soft:#BDBDC8; --text:#F2F2F5;
  --amber:#FFB547; --coral:#FF5E62; --violet:#B45CFF; --mint:#3DF5B0; --raw:#FF6B6E;
  --grad:linear-gradient(95deg,var(--amber) 0%,var(--coral) 48%,var(--violet) 100%);
  --font-sans:'Inter Tight',Inter,system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  /* legacy tokens still referenced by a few templates */
  --navy-900:var(--ink); --navy-800:var(--ink-2); --navy-700:var(--ink-3);
  --slate-700:var(--line); --slate-400:var(--mute); --slate-300:var(--soft);
  --slate-100:var(--text); --gold-500:var(--amber); --gold-400:#FFC56E; --gold-300:#FFD594;
}

html{scroll-behavior:smooth;background:var(--ink)}
body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-sans);
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:rgba(255,94,98,.35);color:#fff}
.font-mono{font-family:var(--font-mono);letter-spacing:0}
.font-serif,h1,h2,h3{font-family:var(--font-sans);font-weight:700;
  letter-spacing:-.03em;line-height:1.05}
h4,h5,h6{letter-spacing:-.018em}

/* ---------- display type ---------- */
.display{font-weight:800;letter-spacing:-.055em;line-height:.9;
  font-size:clamp(3.4rem,10vw,9.5rem)}
.display-2{font-weight:800;letter-spacing:-.045em;line-height:.95;
  font-size:clamp(2.5rem,6vw,5.25rem)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent}
.lede{font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.55;color:var(--soft)}

/* ---------- page heroes (sub-pages use .grid-bg on their header) ---------- */
.grid-bg{position:relative;overflow:hidden;isolation:isolate}
.grid-bg::before{content:"";position:absolute;inset:-40% -10% auto -10%;height:140%;
  z-index:-1;pointer-events:none;
  background:
    radial-gradient(40% 50% at 20% 30%,rgba(255,181,71,.22),transparent 70%),
    radial-gradient(35% 45% at 65% 20%,rgba(255,94,98,.18),transparent 70%),
    radial-gradient(40% 55% at 90% 40%,rgba(180,92,255,.2),transparent 70%);
  filter:blur(20px)}
.grid-bg h1{font-weight:800;letter-spacing:-.05em;line-height:.95;
  font-size:clamp(2.8rem,7vw,6rem)}
.glow{display:none}

/* ---------- aurora behind the home hero ---------- */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.aurora i{position:absolute;border-radius:50%;filter:blur(90px);
  mix-blend-mode:screen;animation:drift 22s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:52vw;height:52vw;left:-12vw;top:-18vw;background:var(--amber);opacity:.28}
.aurora i:nth-child(2){width:46vw;height:46vw;left:30vw;top:-22vw;background:var(--coral);opacity:.3;animation-duration:26s}
.aurora i:nth-child(3){width:50vw;height:50vw;right:-16vw;top:-8vw;background:var(--violet);opacity:.34;animation-duration:30s}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(4vw,6vw,0) scale(1.15)}}
.aurora::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 55%,var(--ink) 100%)}
.dots{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000 30%,transparent 80%);
  mask-image:radial-gradient(70% 60% at 50% 30%,#000 30%,transparent 80%)}

/* ---------- surfaces ---------- */
.card{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
  border:1px solid var(--line);border-radius:20px}
.card-grad{position:relative;border-radius:20px;background:var(--ink-2)}
.card-grad::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--grad);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.tile{position:relative;overflow:hidden;border-radius:24px;border:1px solid var(--line);
  background:radial-gradient(120% 120% at 100% 0%,rgba(180,92,255,.08),transparent 50%),
             linear-gradient(180deg,#101014,#0A0A0D);
  transition:border-color .25s,transform .25s}
.tile:hover{border-color:var(--line-2);transform:translateY(-2px)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;
  letter-spacing:-.01em;border-radius:999px;padding:.8rem 1.5rem;
  transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;
  cursor:pointer;text-decoration:none;white-space:nowrap}
.btn-gold{background:var(--grad);color:#0A0A0C}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 10px 40px -8px rgba(255,94,98,.55)}
.btn-ghost{border:1px solid var(--line-2);color:var(--text);background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:#55555f;background:rgba(255,255,255,.06)}
.btn-white{background:#fff;color:#0A0A0C}
.btn-white:hover{transform:translateY(-1px);box-shadow:0 10px 40px -10px rgba(255,255,255,.45)}

.eyebrow{font-size:.9rem;font-weight:600;letter-spacing:-.005em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-block}

/* ---------- live redaction demo ---------- */
.demo{border-radius:24px;border:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(20,20,26,.92),rgba(10,10,13,.96));
  box-shadow:0 40px 120px -30px rgba(180,92,255,.35),0 0 0 1px rgba(255,255,255,.02) inset;
  backdrop-filter:blur(12px)}
.demo-bar{display:flex;align-items:center;gap:.5rem;padding:.9rem 1.1rem;
  border-bottom:1px solid var(--line);font-size:.8rem;color:var(--mute)}
.demo-bar b{width:10px;height:10px;border-radius:50%;background:#2A2A31}
.demo-text{font-family:var(--font-mono);font-size:clamp(.9rem,1.4vw,1.05rem);
  line-height:1.9;color:var(--soft);min-height:7.6em}
.ent{border-radius:6px;padding:.05em .3em;transition:background .3s,color .3s,box-shadow .3s}
.ent.raw{color:var(--raw);background:rgba(255,94,98,.1)}
.ent.hit{color:#fff;background:rgba(255,94,98,.22);box-shadow:0 0 0 1px rgba(255,94,98,.6)}
.ent.scr{color:var(--amber);background:rgba(255,181,71,.12)}
.ent.safe{color:var(--mint);background:rgba(61,245,176,.1);box-shadow:0 0 0 1px rgba(61,245,176,.35)}
.caret{display:inline-block;width:.55em;height:1.1em;vertical-align:-.18em;
  background:var(--text);margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.pill{display:inline-flex;align-items:center;gap:.45rem;border-radius:999px;
  padding:.3rem .75rem;font-size:.78rem;font-weight:500;border:1px solid var(--line-2);
  color:var(--soft);background:rgba(255,255,255,.03)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 12px var(--mint)}
.dot.red{background:var(--raw);box-shadow:0 0 12px var(--raw)}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:4rem;width:max-content;animation:slide 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- misc ---------- */
.chip{display:inline-flex;align-items:center;border-radius:999px;padding:.35rem .8rem;
  font-size:.8rem;font-weight:500;border:1px solid var(--line-2);color:var(--soft);
  background:rgba(255,255,255,.025)}
.chip.hot{border-color:rgba(255,181,71,.45);color:#FFD594;background:rgba(255,181,71,.07)}
.stat{font-weight:800;letter-spacing:-.05em;line-height:1;font-size:clamp(3rem,6vw,4.75rem)}
.flow-line{height:2px;background:linear-gradient(90deg,transparent,var(--coral),var(--violet),transparent);
  background-size:200% 100%;animation:flow 3s linear infinite}
@keyframes flow{from{background-position:200% 0}to{background-position:0 0}}
.reveal{opacity:0;transform:translateY(24px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
.wordmark{font-weight:800;letter-spacing:-.06em;line-height:.8;
  font-size:clamp(3.5rem,14.5vw,15rem);white-space:nowrap;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 85%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- docs prose ---------- */
.prose-doc{color:var(--text);line-height:1.75;max-width:46rem}
.prose-doc h2{font-size:1.6rem;color:#fff;margin:2.4rem 0 .8rem}
.prose-doc h3{font-weight:600;letter-spacing:-.02em;color:#fff;margin:1.6rem 0 .5rem}
.prose-doc p,.prose-doc li{color:var(--soft)}
.prose-doc ul{list-style:disc;padding-left:1.3rem;margin:.6rem 0}
.prose-doc ol{list-style:decimal;padding-left:1.3rem;margin:.6rem 0}
.prose-doc code{font-family:var(--font-mono);font-size:.85em;
  background:var(--ink-3);border:1px solid var(--line);
  padding:.12rem .4rem;border-radius:6px;color:#FFD594}
.prose-doc pre{background:var(--ink-2);border:1px solid var(--line);
  border-radius:14px;padding:1rem 1.1rem;overflow:auto;margin:1rem 0}
.prose-doc pre code{background:none;border:0;padding:0;color:var(--text)}
.prose-doc a{color:#FFC56E;text-decoration:underline;text-underline-offset:3px}

.tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.8125rem;color:var(--soft)}
.fade-up{}

@media (prefers-reduced-motion:reduce){
  .aurora i,.marquee-track,.flow-line,.caret{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .tile,.btn{transition:none}
}

/* ---------- architecture diagram (how it works) ---------- */
.arch{display:flex;flex-direction:column;align-items:stretch;gap:0}
.arch-machine{position:relative;display:flex;flex-direction:column;align-items:stretch;
  border:1px dashed rgba(61,245,176,.35);border-radius:28px;padding:3rem 1.25rem 1.5rem;
  background:radial-gradient(80% 120% at 50% 0%,rgba(61,245,176,.05),transparent 60%)}
.arch-label{position:absolute;top:-.85rem;left:1.5rem;display:inline-flex;align-items:center;gap:.5rem;
  padding:.3rem .8rem;border-radius:999px;background:var(--ink);border:1px solid rgba(61,245,176,.35);
  font-size:.8rem;font-weight:600;color:var(--mint)}
.arch-node{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  border-radius:20px;border:1px solid var(--line);padding:1.4rem 1.4rem 1.5rem;
  background:linear-gradient(180deg,#121217,#0B0B0E)}
.arch-core{border-color:transparent;background:
  linear-gradient(#0E0E12,#0E0E12) padding-box,var(--grad) border-box;border:1px solid transparent;
  box-shadow:0 30px 80px -30px rgba(255,94,98,.45)}
.arch-cloud{border-color:rgba(180,92,255,.35)}
.arch-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  color:#fff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.arch-icon svg{width:22px;height:22px}
.arch-core .arch-icon{background:var(--grad);color:#0A0A0C;border:0}
.arch-title{margin-top:1rem;font-size:1.25rem;font-weight:700;letter-spacing:-.025em;color:#fff}
.arch-sub{margin-bottom:1rem;margin-top:.35rem;font-size:.9rem;line-height:1.45;color:var(--soft)}
.arch-chip{margin-top:auto;white-space:nowrap;display:inline-flex;align-items:center;gap:.4rem;border-radius:8px;
  padding:.3rem .6rem;font-family:var(--font-mono);font-size:.72rem;
  border:1px solid var(--line-2);color:var(--soft);background:rgba(255,255,255,.03)}
.arch-chip.raw{color:var(--raw);border-color:rgba(255,94,98,.35);background:rgba(255,94,98,.08)}
.arch-chip.safe{color:var(--mint);border-color:rgba(61,245,176,.35);background:rgba(61,245,176,.07)}
.arch-audit{display:flex;flex-direction:column;align-items:flex-start;margin-top:.25rem}
.arch-audit-line{width:1px;height:18px;margin:.4rem 0 0 1rem;
  background:linear-gradient(var(--line-2),transparent)}
.arch-audit .arch-chip{margin-top:.2rem}

/* wires: vertical on mobile, horizontal on desktop */
.arch-wire{position:relative;align-self:center;width:2px;height:48px;
  background:linear-gradient(var(--line-2),var(--line-2))}
.arch-wire .packet{position:absolute;left:50%;top:0;width:10px;height:10px;margin-left:-5px;
  border-radius:50%;animation:packet-v 2.4s cubic-bezier(.5,0,.5,1) infinite}
.packet.raw{background:var(--raw);box-shadow:0 0 14px 2px rgba(255,94,98,.8)}
.packet.safe{background:var(--mint);box-shadow:0 0 14px 2px rgba(61,245,176,.8)}
@keyframes packet-v{0%{top:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}
.arch-exit{height:72px}
.arch-exit-label{position:absolute;left:1rem;top:50%;transform:translateY(-50%);white-space:nowrap;
  font-size:.75rem;color:var(--mint)}

@media (min-width:1024px){
  .arch{flex-direction:row;align-items:center}
  .arch-machine{flex-direction:row;align-items:stretch;flex:1 1 auto;padding:3rem 1.5rem 4.75rem}
  .arch-node{flex:1 1 0;min-width:0}
  .arch-wire{width:auto;min-width:36px;flex:0 0 44px;height:2px;align-self:center}
  .arch-wire .packet{left:0;top:50%;margin-left:0;margin-top:-5px;animation-name:packet-h}
  .arch-exit{flex:0 0 150px;height:2px}
  .arch-exit-label{left:50%;top:-1.6rem;transform:translateX(-50%)}
  .arch-cloud{flex:0 0 220px}
  .arch-audit{position:absolute;left:1.4rem;top:100%;margin-top:0}
  .arch-core{margin-bottom:0}
}
@keyframes packet-h{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 10px);opacity:0}}

.stage-num{width:2.25rem;height:2.25rem;border-radius:999px;display:grid;place-items:center;
  font-weight:800;color:#0A0A0C;background:var(--grad)}

@media (prefers-reduced-motion:reduce){ .arch-wire .packet{animation:none;opacity:0} }