/* Falco Security World. Styles. */
@font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/poppins-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-latin-600-normal.woff2) format("woff2")}
html{color-scheme:dark}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: a one-screen 3D world. The canvas fills the frame, a briefing panel sits on the left
   (a bottom sheet on phones) and a layer dock runs along the bottom edge.
   Single dark look by design: this is the Falco Brand night surface. */
:root{
  color-scheme: dark;
  --night:#12002B; --indigo:#270064; --violet:#3A0A7A; --glow:#9B2FB8;
  --cyan:#6EC1E4; --lilac:#B9A6F2; --orchid:#E07BEA; --silver:#C9CCD6;
  --ink:#FFFFFF; --ink-muted:#DCD7EC; --ink-eyebrow:#DADDE6; --accent-text:#F0B7F5;
  --tile:rgba(255,255,255,.06); --tile-border:rgba(201,204,214,.3);
  --panel:rgba(22,3,54,.8); --chip:rgba(18,0,43,.72);
  --grad-text:linear-gradient(90deg,#6EC1E4 0%,#B9A6F2 55%,#E07BEA 100%);
  --grad-rule:linear-gradient(90deg,#C9CCD6,#FFFFFF);
  --font:"Poppins","Century Gothic","Futura",sans-serif;
  --r-md:15px; --r-lg:22px;
  --gl:max(16px, env(safe-area-inset-left, 0px));
  --gr:max(16px, env(safe-area-inset-right, 0px));
}
html,body{height:100%}
body{background:var(--night);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.55;overflow:hidden}
*{box-sizing:border-box}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

#app{position:relative;height:100%;min-height:480px;overflow:hidden;
  background:
    radial-gradient(900px 800px at 18% 30%, rgba(155,47,184,.75) 0%, rgba(91,26,158,0) 62%),
    radial-gradient(900px 600px at 100% 100%, rgba(110,193,228,.18) 0%, rgba(110,193,228,0) 60%),
    linear-gradient(135deg,#12002B 0%,#270064 58%,#3A0A7A 100%);}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#scene.drag{cursor:grabbing}
#scene.hit{cursor:pointer}
#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}

.lab{position:absolute;left:0;top:0;pointer-events:auto;white-space:nowrap;
  padding:6px 13px;border-radius:999px;border:1px solid var(--tile-border);background:var(--chip);
  font-size:12px;font-weight:500;color:var(--ink);will-change:transform;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lab::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:16px;background:linear-gradient(var(--silver),rgba(201,204,214,0))}
.lab:hover{border-color:var(--cyan)}
.lab[aria-pressed="true"]{border-color:var(--orchid);background:rgba(224,123,234,.22)}

.top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px var(--gr) 0 var(--gl);pointer-events:none}
.logo svg{display:block;height:30px;width:auto}
.lock{display:flex;align-items:center;gap:14px;font-size:13px;font-weight:600;color:var(--ink)}
.lock i{display:block;width:1px;height:18px;background:rgba(255,255,255,.3)}
.lock span{font-weight:300;color:var(--ink-muted)}

#panel{position:absolute;left:var(--gl);top:76px;width:min(390px, calc(100% - var(--gl) - var(--gr)));
  max-height:calc(100% - 76px - 92px);overflow:auto;padding:24px 24px 22px;
  background:var(--panel);border:1.5px solid var(--tile-border);border-radius:var(--r-lg);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
#collapse{position:absolute;right:12px;top:12px;width:44px;height:44px;display:grid;place-items:center;
  background:none;border:0;border-radius:999px;color:var(--ink-muted)}
#collapse svg{transition:transform .2s}
#panel.min #collapse svg{transform:rotate(180deg)}
#panel.min .more{display:none}
.eyebrow{display:flex;align-items:center;gap:14px;font-size:11px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-eyebrow);padding-right:44px}
.eyebrow::before{content:"";flex:none;width:44px;height:2px;background:var(--grad-rule)}
h1{margin:14px 0 0;font-size:30px;line-height:1.15;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
.gt{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{margin:12px 0 0;font-size:15px;line-height:1.5;font-weight:300;color:var(--ink-muted)}
.more{display:flex;flex-direction:column;gap:16px;margin-top:4px}
.tag{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-text)}
.risk{padding:14px 16px;border-radius:var(--r-md);background:var(--tile);border:1.5px solid var(--tile-border)}
.risk p{margin:6px 0 0;font-size:13.5px;line-height:1.5}
ul.does{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
ul.does li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;font-size:13.5px;line-height:1.45}
ul.does svg{margin-top:1px}
ol.steps{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;counter-reset:s}
ol.steps li{counter-increment:s;padding:12px 14px;border-radius:var(--r-md);background:var(--tile);border:1.5px solid var(--tile-border);font-size:12.5px;line-height:1.45;font-weight:300;color:var(--ink-muted)}
ol.steps b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
ol.steps b::before{content:counter(s) ". ";color:var(--cyan)}
.row{display:flex;flex-wrap:wrap;gap:10px}
.btn{min-height:44px;padding:0 20px;border-radius:999px;border:1.5px solid rgba(224,123,234,.7);background:rgba(224,123,234,.12);font-size:13.5px;font-weight:500}
.btn:hover{background:rgba(224,123,234,.24)}
.btn.quiet{border-color:var(--tile-border);background:var(--tile)}
.btn.quiet:hover{border-color:var(--cyan)}
.hint{margin:0;font-size:12px;font-weight:300;color:var(--ink-muted)}

#dock{position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;overflow-x:auto;
  padding:12px var(--gr) max(14px, env(safe-area-inset-bottom, 0px)) var(--gl);scrollbar-width:none}
#dock::-webkit-scrollbar{display:none}
#dock::before,#dock::after{content:"";flex:1 0 0}
.chip{flex:none;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--tile-border);background:var(--chip);
  font-size:13px;font-weight:500;white-space:nowrap;display:flex;align-items:center;gap:8px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.chip:hover{border-color:var(--cyan)}
.chip[aria-pressed="true"]{border-color:var(--orchid);background:rgba(224,123,234,.22)}
.chip.tour{border-color:rgba(110,193,228,.7)}
.sep{flex:none;width:1px;margin:10px 4px;background:rgba(255,255,255,.3)}

@media (max-width:759px){
  .lock{display:none}
  .logo svg{height:26px}
  #panel{top:auto;bottom:74px;max-height:44%;padding:18px 18px 16px;border-radius:18px}
  #collapse{right:6px;top:6px}
  h1{font-size:22px;margin-top:10px}
  .lead{font-size:13.5px;margin-top:8px}
  .lab{font-size:11px;padding:4px 10px}
  ol.steps{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){ #collapse svg{transition:none} }

.lock a{color:inherit;text-decoration:none;pointer-events:auto}
.lock a:hover{text-decoration:underline}