/* ============================================================
   BRUHN FREEMAN ADVANCED SOLUTIONS
   Shared styles for project summaries, privacy, and terms.
   Circuit-tech: glowing cyan field behind a floating dark slab.
   Matches index.html — keep the token block below in sync.
   ============================================================ */
:root{
  --deep:#050b12;
  --navy:#0a1826;
  --slab:rgba(48,53,60,.90);
  --slab-2:rgba(38,42,49,.94);
  --card:rgba(64,71,80,.52);
  --card-hi:rgba(78,86,97,.62);
  --cyan:#40d6ee;
  --cyan-hi:#8bebfa;
  --cyan-lo:#1d9cb8;
  --teal:#35e0c0;
  --ink:#f2f6f9;
  --ink-2:#c3ced8;
  --muted:#94a3b1;
  --hair:rgba(255,255,255,.085);
  --r:9px;
  --circuit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='none' stroke='%2340c9e0' stroke-width='1.2'%3E%3Cpath d='M0 60 H120 L150 90 H260 L290 60 H400'/%3E%3Cpath d='M0 160 H70 L100 130 H200 L230 160 H320 L350 190 H400'/%3E%3Cpath d='M0 262 H140 L170 292 H400'/%3E%3Cpath d='M0 340 H90 L120 310 H240 L270 340 H400'/%3E%3Cpath d='M60 0 V40 L90 70 V140'/%3E%3Cpath d='M200 0 V60 L230 90 V180 L200 210 V400'/%3E%3Cpath d='M330 0 V100 L300 130 V240'/%3E%3Cpath d='M120 400 V330'/%3E%3C/g%3E%3Cg fill='%2340c9e0'%3E%3Ccircle cx='120' cy='60' r='3.5'/%3E%3Ccircle cx='260' cy='90' r='3.5'/%3E%3Ccircle cx='100' cy='130' r='3'/%3E%3Ccircle cx='320' cy='160' r='3'/%3E%3Ccircle cx='170' cy='292' r='3.5'/%3E%3Ccircle cx='240' cy='310' r='3'/%3E%3Ccircle cx='90' cy='70' r='2.5'/%3E%3Ccircle cx='300' cy='130' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--deep);color:var(--ink);line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:var(--cyan);text-decoration:none}
a:hover{color:var(--cyan-hi);text-decoration:underline}
img{max-width:100%;display:block}

/* ---------- the scene ---------- */
.scene{position:fixed;inset:0;z-index:-3;background:linear-gradient(160deg,#0c2033 0%,#081724 42%,#050d16 100%)}
.scene::before{
  content:"";position:absolute;inset:-60px;
  background-image:var(--circuit);background-size:520px 520px;
  opacity:.20;filter:blur(.7px);
}
.scene::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle 190px at 84% 16%, rgba(64,214,238,.30), transparent 70%),
    radial-gradient(circle 130px at 12% 30%, rgba(64,214,238,.20), transparent 70%),
    radial-gradient(circle 90px  at 26% 74%, rgba(120,180,255,.18), transparent 70%),
    radial-gradient(circle 150px at 70% 86%, rgba(53,224,192,.14), transparent 70%),
    radial-gradient(1200px 800px at 50% 40%, rgba(10,24,38,.1), rgba(5,11,18,.72) 100%);
  filter:blur(6px);
}
.panes{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;filter:blur(3px)}
.panes i{position:absolute;display:block;border-radius:6px;
  background:linear-gradient(135deg,rgba(120,220,245,.10),rgba(64,214,238,.03));
  border:1px solid rgba(140,230,250,.10)}
.panes i:nth-child(1){left:-4%;top:6%;width:22%;height:34%}
.panes i:nth-child(2){left:4%;top:44%;width:14%;height:22%}
.panes i:nth-child(3){right:-3%;top:12%;width:18%;height:28%}
.panes i:nth-child(4){right:6%;bottom:8%;width:20%;height:24%}

/* ---------- masthead ---------- */
.wrap{max-width:1000px;margin:0 auto;padding:44px 24px 58px}
.masthead{text-align:center;margin-bottom:30px}
.masthead a{text-decoration:none}
/* The mark is a raster image now, so the .ring/.node/.core child selectors
   that filled the inline SVG's paths are gone -- they would style nothing.
   Glow softened from .55 to .38: the artwork carries its own light, and at
   the old strength the cyan halo fought the mark's blue-violet. */
.mark{width:74px;height:74px;margin:0 auto 12px;display:block;
  filter:drop-shadow(0 0 18px rgba(64,214,238,.38))}
.word{
  font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:clamp(1.5rem,4.2vw,2.5rem);line-height:1.04;color:#fff;margin:0;letter-spacing:.02em;
  text-shadow:0 0 26px rgba(64,214,238,.45),0 2px 20px rgba(0,0,0,.6);
}
.word-sub{
  font-family:'Orbitron',sans-serif;font-weight:700;
  font-size:clamp(.56rem,1.3vw,.76rem);letter-spacing:.42em;
  color:var(--cyan-hi);margin:10px 0 0;text-transform:uppercase;
  text-shadow:0 0 16px rgba(64,214,238,.6);
}

/* ---------- the slab ---------- */
.slab{
  position:relative;border-radius:14px;overflow:hidden;
  background:var(--slab);
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 40px 110px -30px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.35);
}
.slabnav{
  display:flex;flex-wrap:wrap;gap:6px 26px;justify-content:center;
  background:var(--slab-2);padding:15px 24px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.slabnav a{font-size:.94rem;color:var(--ink-2);position:relative;transition:color .2s}
.slabnav a:hover{color:#fff;text-decoration:none}
.slabnav a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;
  background:var(--cyan);border-radius:2px;box-shadow:0 0 8px var(--cyan);transition:right .25s ease}
.slabnav a:hover::after{right:0}

/* ---------- page hero ---------- */
.page-hero{position:relative;padding:36px 40px 26px;border-bottom:1px solid var(--hair);overflow:hidden}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--circuit);background-size:300px 300px;opacity:.14;
}
.page-hero::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(circle 260px at 88% 20%, rgba(64,214,238,.20), transparent 70%);
}
.page-hero > *{position:relative;z-index:1}
.crumbs{font-size:.72rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--cyan);text-decoration:none}
.eye{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);font-weight:600}
.page-hero h1{
  font-family:'Exo 2',sans-serif;font-weight:700;
  font-size:clamp(1.6rem,3.6vw,2.35rem);line-height:1.14;margin:10px 0 14px;color:#fff;
}
.page-hero .lede{font-size:1rem;color:var(--ink-2);max-width:760px;margin:0}
.badge-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.badge-row span{
  font-size:.7rem;letter-spacing:.03em;color:var(--ink-2);
  background:rgba(255,255,255,.05);border:1px solid var(--hair);padding:4px 11px;border-radius:5px;
}
.store-btn,.cta-block .btn{
  display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  padding:12px 22px;border-radius:var(--r);font-weight:600;font-size:.93rem;
  background:linear-gradient(135deg,#3fd3ec,#1d9cb8);color:#04222c;
  border:1px solid rgba(160,240,255,.5);
  box-shadow:0 10px 30px -12px rgba(64,214,238,.8),inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .18s ease,box-shadow .25s ease;
}
.store-btn:hover,.cta-block .btn:hover{
  text-decoration:none;color:#04222c;transform:translateY(-2px);
  box-shadow:0 16px 40px -12px rgba(64,214,238,.95),inset 0 1px 0 rgba(255,255,255,.5);
}

/* ---------- content ---------- */
.content{padding:30px 40px 40px}
.content .card{
  background:var(--card);border:1px solid var(--hair);border-radius:var(--r);
  padding:26px 28px;margin-bottom:18px;
}
.content h2{
  font-family:'Exo 2',sans-serif;font-weight:700;font-size:1.32rem;color:#fff;
  margin:6px 0 14px;padding-bottom:11px;position:relative;
}
.content h2::after{
  content:"";position:absolute;left:0;bottom:0;width:74px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--teal));box-shadow:0 0 10px rgba(64,214,238,.7);
}
.content h3{font-family:'Exo 2',sans-serif;font-weight:600;font-size:1.06rem;margin:22px 0 9px;color:#fff}
.content p{color:var(--ink-2);margin:0 0 13px;font-size:.95rem}
.content ul,.content ol{color:var(--ink-2);padding-left:22px;margin:0 0 13px;font-size:.95rem}
.content li{margin-bottom:6px}
.content li::marker{color:var(--cyan)}
.content strong{color:#fff;font-weight:600}

.meta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.meta{background:rgba(30,35,42,.5);border:1px solid var(--hair);border-radius:var(--r);padding:14px 16px}
.meta .l{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.meta .v{font-family:'Exo 2',sans-serif;font-weight:600;color:#fff;font-size:.98rem}

/* ---------- closing CTA ---------- */
.cta-block{
  position:relative;overflow:hidden;text-align:center;
  padding:34px 30px;border-radius:var(--r);
  border:1px solid rgba(64,214,238,.28);
  background:linear-gradient(140deg,rgba(18,52,72,.75),rgba(12,28,42,.75));
}
.cta-block::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--circuit);background-size:280px 280px;opacity:.20;
}
.cta-block::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle 240px at 78% 22%, rgba(64,214,238,.28), transparent 68%);
}
.cta-block > *{position:relative;z-index:1}
.cta-block h2{color:#fff;margin:12px 0 10px;padding-bottom:0}
.cta-block h2::after{display:none}
.cta-block p{color:var(--ink-2);margin-bottom:8px}

/* ---------- slab footer ---------- */
footer.site{padding:24px 40px 26px;text-align:center;border-top:1px solid var(--hair)}
.foot-row{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px 18px}
.foot-row .mono{font-size:.74rem;color:var(--muted);letter-spacing:.04em}
.foot-row a{color:var(--muted)}
.foot-row a:hover{color:var(--cyan);text-decoration:none}
.foot-links{display:flex;gap:16px;font-size:.84rem;flex-wrap:wrap;justify-content:center}

@media (max-width:760px){
  .wrap{padding:30px 14px 44px}
  .slabnav{gap:4px 16px;padding:12px 14px}
  .slabnav a{font-size:.85rem}
  .page-hero{padding:26px 20px 22px}
  .content{padding:22px 20px 30px}
  .content .card{padding:20px}
  .meta-grid{grid-template-columns:1fr}
  footer.site{padding:20px}
  .panes{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}