:root{
  --df-canvas:#030105;
  --df-surface:rgba(18,8,28,.72);
  --df-surface-strong:rgba(26,11,40,.9);
  --df-line:rgba(255,255,255,.1);
  --df-line-strong:rgba(255,255,255,.18);
  --df-text:#f8f2fb;
  --df-muted:#aa9eb9;
  --df-faint:#756a83;
  --df-cyan:#29d8ea;
  --df-pink:#ff2e9a;
  --df-purple:#a855f7;
  --df-teal:#31d8b0;
  --df-yellow:#f5c451;
  --df-radius:26px;
  --df-shadow:0 30px 90px rgba(0,0,0,.35);
}

body.product-surface{
  background:
    radial-gradient(70% 55% at 78% -8%,rgba(255,46,154,.12),transparent 55%),
    radial-gradient(50% 45% at 4% 88%,rgba(124,92,255,.11),transparent 60%),
  var(--df-canvas);
}
.product-skip{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.product-skip:focus{width:auto!important;height:auto!important;clip:auto!important;margin:12px!important;padding:10px 14px!important;z-index:100!important;border-radius:8px!important;background:#fff!important;color:#08040d!important}
body.product-surface::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.28;
  background-image:radial-gradient(circle,rgba(255,255,255,.16) 0 1px,transparent 1.2px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom,black,transparent 70%);
  z-index:-1;
}
.product-surface .frame{
  border-color:rgba(255,255,255,.11);
  border-radius:30px;
  background:
    radial-gradient(70% 45% at 74% -12%,rgba(255,46,154,.13),transparent 57%),
    linear-gradient(145deg,rgba(20,8,31,.97),rgba(6,3,10,.98) 58%,rgba(13,5,20,.98));
  box-shadow:var(--df-shadow);
}
.product-surface .side{
  border-color:var(--df-line);
  background:rgba(4,2,7,.56);
}
.product-surface .brand{
  background:linear-gradient(145deg,var(--df-pink),var(--df-purple));
  box-shadow:0 12px 34px rgba(255,46,154,.24);
}
.product-surface main{padding:clamp(24px,3vw,48px)}
.product-surface .topbar{
  align-items:flex-start;
  gap:18px;
  margin:0 auto clamp(26px,4vw,58px);
  max-width:1540px;
}
.product-surface .company-mark{
  width:52px;
  height:52px;
  border-radius:17px;
  background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.025));
  box-shadow:inset 0 1px rgba(255,255,255,.08);
}
.product-surface .company-title h1{
  font:600 clamp(34px,4.5vw,72px)/.98 "Space Grotesk",system-ui,sans-serif;
  letter-spacing:-.045em;
}
.product-surface .company-meta{
  max-width:820px;
  margin-top:10px;
  font-size:clamp(11px,1vw,14px);
  line-height:1.6;
}
.product-surface .top-actions button,
.product-surface .top-actions a{
  min-height:42px;
  border-radius:999px;
  padding-inline:16px;
  backdrop-filter:blur(14px);
}
.product-surface .decision-strip{
  max-width:1540px;
  margin:0 auto clamp(24px,3vw,44px);
  border-color:rgba(255,255,255,.12);
  border-radius:var(--df-radius);
  padding:clamp(24px,3.2vw,48px);
  background:
    linear-gradient(130deg,rgba(255,46,154,.09),transparent 42%),
    rgba(9,4,14,.58);
  box-shadow:0 24px 70px rgba(0,0,0,.23);
}
.product-surface .decision-main h2{
  font:600 clamp(25px,3vw,46px)/1.05 "Space Grotesk",system-ui,sans-serif;
  letter-spacing:-.035em;
  margin-top:10px;
}
.product-surface .decision-main p{font-size:clamp(11px,1vw,14px);line-height:1.65;max-width:820px}
.product-surface .decision-cell b{font-size:clamp(16px,1.55vw,25px);white-space:normal;overflow:visible;line-height:1.08}
.product-surface .workspace-grid{
  max-width:1540px;
  margin:0 auto;
  gap:24px;
}
.product-surface .canvas-shell{
  border-radius:var(--df-radius);
  border-color:var(--df-line);
  background:rgba(6,3,10,.48);
  box-shadow:var(--df-shadow);
}
.product-surface .canvas-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  min-height:62px;
  padding:12px 18px;
  background:rgba(3,1,6,.38);
}
.product-surface .toolbar-group{display:flex;align-items:center;min-width:max-content}
.product-surface .toolbar-group,
.product-surface .filter-select{
  border-radius:999px;
  border-color:var(--df-line);
  background:rgba(255,255,255,.025);
}
.product-surface .canvas-stage{
  min-height:720px;
  padding:clamp(24px,3vw,44px);
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:76px 76px;
}
.product-surface .canvas-head h3{
  font:600 clamp(26px,3vw,46px)/1.05 "Space Grotesk",system-ui,sans-serif;
  letter-spacing:-.035em;
}
.product-surface .canvas-head p{font-size:12px;line-height:1.6;max-width:720px}
.product-surface .context-dock{background:rgba(3,1,6,.32)}
.product-surface .context-tabs{padding:14px 18px;gap:7px}
.product-surface .context-tabs button{border-radius:999px;padding:9px 14px}
.product-surface .context-body{padding:clamp(18px,2.5vw,34px)}

/* Company Intelligence Universe */
.product-explorer .workspace-grid{grid-template-columns:minmax(0,1fr)}
.product-explorer .object-grid{
  position:relative;
  inset:auto;
  display:block;
  overflow:visible;
  padding:0;
  margin-top:112px;
}
.company-universe{
  position:relative;
  min-height:430px;
  border-top:1px solid var(--df-line);
  border-bottom:1px solid var(--df-line);
  overflow:hidden;
  isolation:isolate;
}
.company-universe::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 24% 38%,rgba(255,46,154,.08),transparent 24%),
    radial-gradient(circle at 55% 55%,rgba(41,216,234,.08),transparent 25%),
    radial-gradient(circle at 80% 34%,rgba(49,216,176,.08),transparent 22%);
  z-index:-1;
}
.universe-axis{
  position:absolute;
  inset:24px 4% auto;
  display:flex;
  justify-content:space-between;
  color:var(--df-faint);
  font:8px "JetBrains Mono",monospace;
  letter-spacing:.08em;
}
.universe-axis::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:24px;
  border-top:1px solid var(--df-line);
}
.coverage-beam{
  position:absolute;
  top:var(--beam-y);
  left:var(--beam-left);
  width:var(--beam-width);
  height:1px;
  background:linear-gradient(90deg,transparent,var(--tone),transparent);
  opacity:.42;
}
.coverage-beam::before,.coverage-beam::after{
  content:"";
  position:absolute;
  top:-3px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--tone);
  box-shadow:0 0 12px var(--tone);
}
.coverage-beam::before{left:0}.coverage-beam::after{right:0}
.universe-node{
  position:absolute;
  left:var(--node-x);
  top:var(--node-y);
  width:var(--node-size);
  height:var(--node-size);
  transform:translate(-50%,-50%);
  border:0;
  border-radius:50%;
  color:var(--df-text);
  background:var(--node-ring);
  padding:5px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s;
  filter:drop-shadow(0 18px 36px rgba(0,0,0,.42));
}
.universe-node::before{
  content:"";
  position:absolute;
  inset:9px;
  border-radius:50%;
  background:radial-gradient(circle at 42% 30%,rgba(255,255,255,.13),transparent 28%),rgba(9,4,14,.95);
  border:1px solid rgba(255,255,255,.13);
}
.universe-node:hover,.universe-node:focus-visible,.universe-node.selected{
  transform:translate(-50%,-50%) scale(1.08);
  filter:drop-shadow(0 0 24px color-mix(in srgb,var(--tone) 55%,transparent));
}
.universe-node.selected::after{
  content:"";
  position:absolute;
  inset:-13px;
  border:1px solid color-mix(in srgb,var(--tone) 55%,transparent);
  border-radius:50%;
  animation:df-pulse 2.8s ease-out infinite;
}
.node-core{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  display:grid;
  place-content:center;
  text-align:center;
  padding:15px;
}
.node-core b{font:600 clamp(15px,1.45vw,23px) "Space Grotesk",sans-serif}
.node-core strong{font:600 clamp(18px,1.8vw,30px) "Space Grotesk",sans-serif;color:var(--tone)}
.node-core small{font:7px "JetBrains Mono",monospace;color:var(--df-muted);margin-top:5px}
.node-preview{
  position:absolute;
  z-index:5;
  width:220px;
  left:50%;
  top:calc(100% + 15px);
  transform:translate(-50%,8px);
  padding:12px;
  border:1px solid var(--df-line-strong);
  border-radius:13px;
  background:rgba(7,3,11,.95);
  color:var(--df-muted);
  font-size:9px;
  line-height:1.5;
  opacity:0;
  pointer-events:none;
  transition:.2s;
}
.universe-node:hover .node-preview,.universe-node:focus-visible .node-preview{opacity:1;transform:translate(-50%,0)}
.universe-legend{
  position:absolute;
  left:4%;
  right:4%;
  bottom:18px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--df-faint);
  font:8px "JetBrains Mono",monospace;
}
.timeline-explorer{margin-top:34px}
.timeline-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.timeline-toolbar h4{font:600 20px "Space Grotesk",sans-serif}
.timeline-modes{display:flex;gap:5px;padding:4px;border:1px solid var(--df-line);border-radius:999px;background:rgba(0,0,0,.2)}
.timeline-modes button{border:0;border-radius:999px;padding:8px 11px;background:transparent;color:var(--df-faint);font-size:8px}
.timeline-modes button.on{color:#fff;background:rgba(255,255,255,.08)}
.timeline-brush{display:grid;grid-template-columns:auto 150px 150px;align-items:center;gap:8px;color:var(--df-faint);font:8px "JetBrains Mono",monospace}
.timeline-brush input{width:100%;accent-color:var(--df-pink)}
.evidence-timeline{
  position:relative;
  min-height:290px;
  padding:28px 0 48px;
  border-block:1px solid var(--df-line);
  overflow:hidden;
}
.evidence-timeline::before{content:"";position:absolute;left:3%;right:3%;top:50%;height:1px;background:linear-gradient(90deg,transparent,var(--df-line-strong),transparent)}
.timeline-observation{
  position:absolute;
  left:var(--obs-x);
  top:var(--obs-y);
  width:12px;
  height:12px;
  border:3px solid #08040d;
  border-radius:50%;
  background:var(--tone);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--tone) 55%,transparent),0 0 16px color-mix(in srgb,var(--tone) 38%,transparent);
  transform:translate(-50%,-50%);
}
.timeline-observation::after{
  content:attr(data-label);
  position:absolute;
  left:50%;
  top:15px;
  width:116px;
  transform:translateX(-50%);
  color:var(--df-muted);
  font:7px/1.45 "JetBrains Mono",monospace;
  opacity:.72;
}
.timeline-observation:nth-of-type(even)::after{top:auto;bottom:15px}
.timeline-observation:hover,.timeline-observation:focus-visible{z-index:6;transform:translate(-50%,-50%) scale(1.35)}
.timeline-observation:hover::after,.timeline-observation:focus-visible::after{color:#fff;opacity:1}
.timeline-empty{padding:60px 20px;text-align:center;color:var(--df-muted)}

/* Methodology operating system */
.methodology-os{position:relative;padding:38px 0 18px}
.methodology-os::before{content:"";position:absolute;left:5%;right:5%;top:96px;height:1px;background:linear-gradient(90deg,var(--df-cyan),var(--df-pink),var(--df-yellow))}
.methodology-stage-row{display:grid;grid-template-columns:repeat(7,minmax(90px,1fr));gap:10px}
.method-stage{
  position:relative;
  min-height:142px;
  border:1px solid var(--df-line);
  border-radius:18px;
  padding:15px 12px;
  background:rgba(9,4,14,.78);
  color:var(--df-muted);
  text-align:left;
  transition:.25s;
}
.method-stage::before{content:"";position:absolute;top:48px;left:50%;width:9px;height:9px;border-radius:50%;background:var(--df-faint);transform:translate(-50%,-50%);box-shadow:0 0 0 5px #09040e}
.method-stage span{font:7px "JetBrains Mono",monospace;color:var(--df-cyan);text-transform:uppercase}
.method-stage b{display:block;margin-top:53px;font:600 12px/1.25 "Space Grotesk",sans-serif;color:#fff}
.method-stage small{display:block;margin-top:6px;font-size:8px;line-height:1.4}
.method-stage.upstream,.method-stage.downstream{border-color:rgba(41,216,234,.2)}
.method-stage.selected{transform:translateY(-7px);border-color:var(--df-pink);box-shadow:0 18px 44px rgba(255,46,154,.15)}
.method-stage.selected::before{background:var(--df-pink);box-shadow:0 0 0 5px #09040e,0 0 20px var(--df-pink)}
.method-detail{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(250px,.8fr);
  gap:18px;
  margin-top:24px;
  padding:clamp(20px,3vw,34px);
  border:1px solid var(--df-line);
  border-radius:22px;
  background:linear-gradient(135deg,rgba(255,46,154,.06),rgba(41,216,234,.025));
}
.method-detail h4{font:600 clamp(22px,2.6vw,36px) "Space Grotesk",sans-serif}
.method-detail p{margin-top:10px;color:var(--df-muted);font-size:11px;line-height:1.65}
.method-permits{display:grid;gap:10px}
.method-permits div{padding:12px;border:1px solid var(--df-line);border-radius:13px;background:rgba(0,0,0,.18)}
.method-permits span{display:block;font:7px "JetBrains Mono",monospace;text-transform:uppercase;color:var(--df-cyan)}
.method-permits div:last-child span{color:var(--df-yellow)}
.method-permits b{display:block;margin-top:6px;font-size:10px;line-height:1.45}
.method-modules{margin-top:38px}
.method-module-tabs{display:flex;gap:6px;flex-wrap:wrap}
.method-module-tabs button{border:1px solid var(--df-line);border-radius:999px;padding:9px 12px;background:rgba(255,255,255,.02);color:var(--df-faint);font-size:8px}
.method-module-tabs button.on{color:#fff;border-color:rgba(41,216,234,.35);background:rgba(41,216,234,.06)}
.method-module{margin-top:16px;padding:22px;border:1px solid var(--df-line);border-radius:20px;background:rgba(0,0,0,.17)}
.method-flowline{display:grid;grid-template-columns:repeat(var(--flow-count,4),minmax(0,1fr));gap:10px}
.method-flowline article{position:relative;padding:14px;border:1px solid var(--df-line);border-radius:14px;background:rgba(255,255,255,.025)}
.method-flowline article:not(:last-child)::after{content:"→";position:absolute;right:-10px;top:50%;color:var(--df-faint)}
.method-flowline span{font:7px "JetBrains Mono",monospace;color:var(--df-cyan);text-transform:uppercase}
.method-flowline b{display:block;margin-top:7px;font-size:11px}
.method-flowline p{margin-top:5px;font-size:8px;line-height:1.45;color:var(--df-muted)}

/* Filing evidence stream */
.filing-stream{position:relative;display:grid;gap:10px;padding:16px 0 10px}
.filing-stream::before{content:"";position:absolute;left:17px;top:0;bottom:0;width:1px;background:linear-gradient(var(--df-cyan),var(--df-pink),transparent)}
.filing-event{position:relative;display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:18px;align-items:center;margin-left:38px;padding:15px 17px;border:1px solid var(--df-line);border-radius:16px;background:rgba(255,255,255,.022);color:var(--df-text);text-align:left}
.filing-event::before{content:"";position:absolute;left:-27px;width:9px;height:9px;border-radius:50%;background:var(--tone);box-shadow:0 0 14px var(--tone)}
.filing-event.selected{border-color:var(--tone);background:color-mix(in srgb,var(--tone) 6%,rgba(0,0,0,.2))}
.filing-event time{font:8px "JetBrains Mono",monospace;color:var(--df-cyan)}
.filing-event b{font:600 12px "Space Grotesk",sans-serif}
.filing-event small{color:var(--df-muted);font-size:8px}
.filing-event strong{font:600 13px "Space Grotesk",sans-serif;color:var(--tone)}

/* The tray becomes contextual, not permanent chrome */
.product-explorer .tray,.product-detail-tray .tray{
  position:fixed;
  z-index:70;
  top:20px;
  right:20px;
  bottom:20px;
  width:min(410px,calc(100vw - 32px));
  min-height:0;
  overflow:auto;
  transform:translateX(calc(100% + 34px));
  transition:transform .32s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 32px 100px rgba(0,0,0,.68);
}
.product-explorer.investigation-open .tray,.product-detail-tray.detail-tray-open .tray{transform:translateX(0)}
.investigation-trigger{
  position:fixed;
  z-index:69;
  right:24px;
  bottom:24px;
  min-height:44px;
  border:1px solid rgba(255,46,154,.35);
  border-radius:999px;
  padding:10px 15px;
  background:rgba(12,5,19,.92);
  color:#fff;
  box-shadow:0 15px 40px rgba(0,0,0,.4);
  font-size:10px;
}
.investigation-trigger span{color:var(--df-cyan)}
.tray-close{border:0;background:transparent;color:var(--df-muted);font-size:18px}
.product-explorer.investigation-open::after,.product-detail-tray.detail-tray-open::after{
  content:"";
  position:fixed;
  z-index:60;
  inset:0;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(3px);
}
.product-detail-tray .workspace-grid{grid-template-columns:minmax(0,1fr)}
.observation-drawer{
  width:min(720px,calc(100vw - 30px));
  max-height:82vh;
  border:1px solid var(--df-line-strong);
  border-radius:24px;
  padding:0;
  background:#0b0611;
  color:var(--df-text);
  box-shadow:0 40px 120px rgba(0,0,0,.68);
}
.observation-drawer::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(6px)}
.observation-drawer header{display:flex;justify-content:space-between;gap:18px;padding:22px;border-bottom:1px solid var(--df-line)}
.observation-drawer header button{border:0;background:transparent;color:var(--df-muted);font-size:22px}
.observation-body{padding:24px}
.observation-body h3{font:600 clamp(24px,3vw,38px) "Space Grotesk",sans-serif}
.observation-body>p{margin-top:10px;color:var(--df-muted);line-height:1.65}
.observation-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px}
.observation-facts div{padding:13px;border:1px solid var(--df-line);border-radius:13px;background:rgba(255,255,255,.02)}
.observation-facts span{display:block;font:7px "JetBrains Mono",monospace;color:var(--df-faint);text-transform:uppercase}
.observation-facts b{display:block;margin-top:6px;font-size:10px;line-height:1.45}
.observation-body a{display:inline-flex;margin-top:20px;color:var(--df-cyan);font-size:10px}

/* Compare completeness matrix */
.comparison-matrix{margin-top:22px;padding:20px;border:1px solid var(--df-line);border-radius:20px;background:rgba(0,0,0,.2)}
.comparison-matrix-head{display:grid;grid-template-columns:minmax(150px,1.2fr) repeat(2,minmax(120px,.7fr));gap:8px;padding-bottom:10px;color:var(--df-faint);font:8px "JetBrains Mono",monospace;text-transform:uppercase}
.comparison-matrix-row{display:grid;grid-template-columns:minmax(150px,1.2fr) repeat(2,minmax(120px,.7fr));gap:8px;padding:11px 0;border-top:1px solid var(--df-line);font-size:9px}
.comparison-matrix-row span:nth-child(2){color:var(--df-yellow)}.comparison-matrix-row span:nth-child(3){color:var(--df-faint)}
.holding-slider{display:grid;grid-template-columns:minmax(120px,1fr) auto;gap:12px;align-items:center;min-height:44px;padding:0 13px;border:1px solid var(--df-line);border-radius:12px;background:rgba(0,0,0,.2)}
.holding-slider input{width:100%;accent-color:var(--df-pink)}
.holding-slider output{min-width:54px;color:#fff;font:9px "JetBrains Mono",monospace}

@keyframes df-pulse{0%{transform:scale(.92);opacity:.9}75%,100%{transform:scale(1.18);opacity:0}}
@media(max-width:1100px){
  .methodology-stage-row{grid-template-columns:repeat(4,minmax(120px,1fr))}
  .methodology-os::before{display:none}
  .method-stage b{margin-top:20px}
  .method-stage::before{display:none}
}
@media(max-width:760px){
  .product-surface{padding:0}
  .product-surface .frame{min-height:100vh;border:0;border-radius:0}
  .product-surface main{padding:22px 16px 90px}
  .product-surface .topbar{margin-bottom:28px}
  .product-surface .company-mark{display:none}
  .product-surface .company-title h1{font-size:40px}
  .product-surface .top-actions{width:100%;margin:10px 0 0}
  .product-surface .decision-strip{padding:22px}
  .product-surface .canvas-stage{min-height:0;padding:22px 16px;background-size:54px 54px}
  .company-universe{min-height:660px}
  .universe-node{left:50%;top:var(--mobile-y)}
  .coverage-beam{left:10%;width:80%;top:var(--mobile-beam-y)}
  .universe-axis{display:none}
  .universe-legend{display:grid;justify-content:start}
  .timeline-brush{grid-template-columns:1fr;width:100%}
  .evidence-timeline{min-height:360px;overflow-x:auto}
  .timeline-observation::after{width:82px}
  .methodology-stage-row{grid-template-columns:1fr}
  .method-detail{grid-template-columns:1fr}
  .method-flowline{grid-template-columns:1fr}
  .method-flowline article:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-13px}
  .filing-event{grid-template-columns:1fr;gap:6px}
  .comparison-matrix-head,.comparison-matrix-row{grid-template-columns:1fr 1fr}
  .comparison-matrix-head span:nth-child(3),.comparison-matrix-row span:nth-child(3){display:none}
  .observation-facts{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .universe-node,.node-preview,.product-explorer .tray{transition:none}
  .universe-node.selected::after{animation:none}
}