@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

  :root{
    --void:#12151b;
    --panel:#1a1f27;
    --panel-2:#20262f;
    --line:#2b3340;
    --text-hi:#eef1f4;
    --text-mid:#98a2b0;
    --text-dim:#5c6673;
    --amber:#e8a33d;
    --green:#4ade80;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
    --sans: 'IBM Plex Sans', system-ui, sans-serif;
  }
  html, body{width:100%; max-width:none !important;}
  .pf-tgi-breakout{
    width:100vw !important;
    max-width:100vw !important;
    position:relative;
    left:50% !important;
    right:50% !important;
    margin-left:-50vw !important;
    margin-right:-50vw !important;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--void);
    color:var(--text-hi);
    font-family:var(--sans);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  body::before{
    content:"";
    position:fixed; inset:0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.035) 1px, transparent 0);
    background-size: 28px 28px;
    pointer-events:none;
    z-index:0;
  }
  .pf-wrap{max-width:1180px; margin:0 auto; padding:0 40px; position:relative; z-index:1;}

  /* ---- faceplate header ---- */
  header.pf-faceplate{
    border-bottom:1px solid var(--line);
    background:linear-gradient(180deg, var(--panel), var(--void));
  }
  .pf-faceplate-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 40px; max-width:1180px; margin:0 auto;
    font-family:var(--mono); font-size:13px; letter-spacing:.04em;
  }
  .pf-brand{display:flex; align-items:center; gap:10px; font-weight:600; color:var(--text-hi);}
  .pf-status{display:flex; align-items:center; gap:8px; color:var(--green);}
  .pf-led{
    width:8px; height:8px; border-radius:50%;
    background:var(--green);
    box-shadow:0 0 8px var(--green);
    animation:pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.35;}}
  @media (prefers-reduced-motion: reduce){ .pf-led{animation:none;} }

  /* ---- hero ---- */
  .pf-hero{padding:96px 0 72px;}
  .pf-eyebrow{
    font-family:var(--mono); font-size:12px; letter-spacing:.14em;
    color:var(--amber); text-transform:uppercase; margin-bottom:18px;
    display:flex; align-items:center; gap:10px;
  }
  .pf-eyebrow::before{content:"//"; color:var(--text-dim);}
  h1{
    font-family:var(--sans); font-weight:700;
    font-size:clamp(32px, 5.5vw, 52px);
    line-height:1.12; letter-spacing:-0.01em;
    color:var(--text-hi); max-width:22ch;
  }
  .pf-hero p.pf-lede{
    margin-top:24px; max-width:56ch; color:var(--text-mid); font-size:17px;
  }
  .pf-hero-links{margin-top:36px; display:flex; gap:14px; flex-wrap:wrap;}
  .pf-btn{
    font-family:var(--mono); font-size:13px; letter-spacing:.03em;
    padding:11px 18px; border-radius:3px; text-decoration:none;
    border:1px solid var(--line); color:var(--text-hi);
    transition:border-color .15s ease, color .15s ease;
  }
  .pf-btn.pf-primary{background:var(--amber); color:#1a1206; border-color:var(--amber); font-weight:600;}
  .pf-btn:not(.pf-primary):hover{border-color:var(--amber); color:var(--amber);}

  /* ---- stat readout ---- */
  .pf-readout{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
    background:var(--line); border:1px solid var(--line);
    margin-top:64px; border-radius:4px; overflow:hidden;
  }
  .pf-stat{background:var(--panel); padding:20px 16px;}
  .pf-stat .pf-num{font-family:var(--mono); font-size:26px; font-weight:600; color:var(--text-hi);}
  .pf-stat .pf-lbl{font-family:var(--mono); font-size:11px; color:var(--text-mid); margin-top:6px; letter-spacing:.03em;}
  @media (max-width:640px){ .pf-readout{grid-template-columns:repeat(2,1fr);} }

  /* ---- section label ---- */
  .pf-section-head{padding:96px 0 16px;}
  .pf-section-head .pf-eyebrow{margin-bottom:8px;}
  .pf-section-head h2{font-size:24px; font-weight:700; color:var(--text-hi);}
  .pf-section-head p{color:var(--text-mid); margin-top:8px; max-width:60ch; font-size:15px;}

  /* ---- rack modules ---- */
  .pf-rack{display:flex; flex-direction:column; gap:20px; margin-top:40px;}
  .pf-module{
    position:relative;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:4px;
    padding:28px 28px 30px 28px;
  }
  .pf-module::before, .pf-module::after{
    content:""; position:absolute; width:6px; height:6px; border-radius:50%;
    background:var(--void); border:1px solid var(--line); top:14px;
  }
  .pf-module::before{left:14px;}
  .pf-module::after{right:14px; left:auto; top:14px;}
  .pf-module .pf-unit-tag{
    display:block; font-family:var(--mono); font-size:11px;
    letter-spacing:.12em; color:var(--text-dim); margin-bottom:10px;
  }
  .pf-module h3{font-size:19px; font-weight:600; color:var(--text-hi); display:flex; align-items:center; gap:10px;}
  .pf-module h3 .pf-dot{width:6px; height:6px; border-radius:50%; background:var(--green); flex:none;}
  .pf-module p{color:var(--text-mid); margin-top:12px; font-size:15px; max-width:62ch;}
  .pf-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;}
  .pf-tag{
    font-family:var(--mono); font-size:11.5px; color:var(--amber);
    border:1px solid rgba(232,163,61,.35); background:rgba(232,163,61,.06);
    padding:4px 9px; border-radius:3px; letter-spacing:.02em;
  }

  /* ---- module media ---- */
  .pf-media{
    width:100%; margin-bottom:18px; border-radius:4px; overflow:hidden;
    border:1px solid var(--line); background:var(--void);
  }
  .pf-media img{display:block; width:100%; height:280px; object-fit:cover; cursor:zoom-in;}
  .pf-media-grid img{cursor:zoom-in;}

  /* ---- lightbox ---- */
  .pf-lightbox{
    display:none; position:fixed; inset:0; z-index:999;
    background:rgba(10,12,16,0.92);
    align-items:center; justify-content:center;
    padding:40px;
  }
  .pf-lightbox.pf-open{display:flex;}
  .pf-lightbox-frame{
    position:relative;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:6px;
    padding:14px;
    width:min(1200px, 92vw);
    height:min(820px, 88vh);
    box-shadow:0 20px 60px rgba(0,0,0,.5);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .pf-lightbox-viewport{
    width:100%; height:100%; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    touch-action:none;
  }
  .pf-lightbox-frame img{
    max-width:100%; max-height:100%;
    border-radius:2px;
    cursor:zoom-in;
    transform-origin:center center;
    user-select:none; -webkit-user-drag:none;
  }
  .pf-lightbox-frame img.pf-zoomed{cursor:grab;}
  .pf-lightbox-frame img.pf-dragging{cursor:grabbing;}
  .pf-lightbox-close{
    position:absolute; top:10px; right:10px;
    font-family:var(--mono); font-size:12px; color:var(--text-mid);
    border:1px solid var(--line); border-radius:50%; width:36px; height:36px;
    display:flex; align-items:center; justify-content:center;
    background:var(--panel-2); cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.4);
    z-index:2;
  }
  .pf-lightbox-close:hover{color:var(--amber); border-color:var(--amber);}
  .pf-lightbox-hint{
    position:absolute; bottom:-30px; left:0; right:0; text-align:center;
    font-family:var(--mono); font-size:11px; color:var(--text-dim);
  }
  .pf-media-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:18px;
  }
  .pf-media-grid img{
    display:block; width:100%; height:240px; object-fit:cover;
    border-radius:4px; border:1px solid var(--line);
  }
  @media (max-width:560px){
    .pf-media img{height:200px;}
    .pf-media-grid{grid-template-columns:1fr;}
    .pf-media-grid img{height:200px;}
  }

  /* ---- skills strip ---- */
  .pf-stack-group{margin-top:32px;}
  .pf-stack-group:first-of-type{margin-top:28px;}
  .pf-stack-group-label{
    font-family:var(--mono); font-size:11.5px; color:var(--text-dim);
    letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px;
  }
  .pf-stack{
    display:flex; flex-wrap:wrap; gap:10px;
  }
  .pf-stack span{
    font-family:var(--mono); font-size:12.5px; color:var(--text-mid);
    border:1px solid var(--line); padding:7px 12px; border-radius:3px;
  }

  /* ---- footer ---- */
  footer{
    margin-top:120px; padding:44px 0 56px; border-top:1px solid var(--line);
    font-family:var(--mono); font-size:12.5px; color:var(--text-dim);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  }
  footer a{color:var(--text-mid); text-decoration:none;}
  footer a:hover{color:var(--amber);}

  ::selection{background:var(--amber); color:#1a1206;}

.pf-module p.pf-roi {
  font-size: 13px;
  color: var(--amber);
  margin-top: 8px;
  font-family: var(--mono);
}
.pf-module p.pf-roi strong { color: var(--amber); }