:root{
    --navy:#1A3A6B; --navy-700:#142E56; --navy-900:#0E1F3C;
    --forge:#C95E0B; --forge-600:#B14F05; --forge-100:#FAE9DA;
    --teal:#0F6E56;
    --ink:#1D2430; --muted:#5B6472; --line:#E4E7EC;
    --bg:#F7F8FA; --card:#FFFFFF; --navy-050:#EEF3FA;
  }
  *{ -webkit-font-smoothing:antialiased; }
  body{ font-family:'Inter',system-ui,sans-serif; color:var(--ink); background:var(--bg); margin:0; }
  h1,h2,h3,h4,h5,.display,.navbar-brand{ font-family:'Sora',sans-serif; }
  a{ text-decoration:none; }
  .text-forge{ color:var(--forge)!important; }
  .text-navy{ color:var(--navy)!important; }
  .text-muted2{ color:var(--muted)!important; }
  .bg-navy{ background:var(--navy)!important; }
  .bg-navy-050{ background:var(--navy-050)!important; }
  .bg-forge{ background:var(--forge)!important; }
  .bg-forge-100{ background:var(--forge-100)!important; }
  .btn-forge{ background:var(--forge); border-color:var(--forge); color:#fff; font-weight:600; }
  .btn-forge:hover{ background:var(--forge-600); border-color:var(--forge-600); color:#fff; }
  .btn-navy{ background:var(--navy); border-color:var(--navy); color:#fff; font-weight:600; }
  .btn-navy:hover{ background:var(--navy-700); border-color:var(--navy-700); color:#fff; }
  .btn-outline-navy{ border-color:var(--navy); color:var(--navy); font-weight:600; }
  .btn-outline-navy:hover{ background:var(--navy); color:#fff; }
  .chip{ display:inline-block; font-size:.72rem; font-weight:600; padding:.2rem .6rem; border-radius:999px; background:var(--navy-050); color:var(--navy); }
  .chip-forge{ background:var(--forge-100); color:var(--forge-600); }
  .card{ border:1px solid var(--line); border-radius:14px; }
  .shadow-soft{ box-shadow:0 6px 24px rgba(16,31,60,.06); }
  .eyebrow{ font-family:'Sora'; letter-spacing:.14em; text-transform:uppercase; font-size:.72rem; font-weight:700; color:var(--forge); }
  section{ scroll-margin-top:80px; }

  /* Prototype navigator */
  #protoFab{ position:fixed; right:18px; bottom:18px; z-index:1080; border-radius:999px; padding:.7rem 1.1rem; box-shadow:0 8px 28px rgba(201,94,11,.4); }
  .proto-page{ display:none; }
  .proto-page.active{ display:block; animation:fade .35s ease; }
  @keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
  .nav-grp-label{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--muted); padding:.6rem .25rem .25rem; }
  .proto-link{ display:flex; align-items:center; gap:.6rem; padding:.5rem .7rem; border-radius:9px; color:var(--ink); font-size:.92rem; cursor:pointer; }
  .proto-link:hover{ background:var(--navy-050); color:var(--navy); }
  .proto-link.current{ background:var(--navy); color:#fff; }
  .proto-link i{ width:18px; text-align:center; }

  /* Public navbar */
  .site-nav{ background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
  .brand-mark{ width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,var(--navy),var(--navy-900)); display:inline-flex; align-items:center; justify-content:center; color:var(--forge); position:relative; overflow:hidden; }
  .brand-mark::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 120%, rgba(201,94,11,.55), transparent 60%); }
  .brand-mark i{ position:relative; z-index:1; }

  /* Hero */
  .hero{ background:
      radial-gradient(1000px 500px at 85% -10%, rgba(201,94,11,.12), transparent 60%),
      linear-gradient(180deg,#fff, var(--bg)); }
  .hero-badge{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:.35rem .8rem; font-size:.82rem; font-weight:600; color:var(--navy); }
  .spark{ background:linear-gradient(90deg,var(--forge),#E88B3D); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .stat-num{ font-family:'Sora'; font-weight:800; font-size:2rem; color:var(--navy); }

  /* Footer */
  .site-footer{ background:var(--navy-900); color:#C7D2E4; }
  .site-footer a{ color:#C7D2E4; }
  .site-footer a:hover{ color:#fff; }

  /* Portal / Admin shells */
  .app-shell{ display:flex; min-height:100vh; }
  .app-side{ width:250px; background:var(--navy-900); color:#C7D2E4; flex-shrink:0; padding:1rem .75rem; }
  .app-side .side-brand{ color:#fff; font-family:'Sora'; font-weight:700; }
  .side-link{ display:flex; align-items:center; gap:.7rem; padding:.6rem .8rem; border-radius:9px; color:#C7D2E4; font-size:.92rem; margin-bottom:.15rem; cursor:pointer; }
  .side-link:hover{ background:rgba(255,255,255,.08); color:#fff; }
  .side-link.active{ background:var(--forge); color:#fff; }
  .app-main{ flex:1; min-width:0; background:var(--bg); }
  .app-top{ background:#fff; border-bottom:1px solid var(--line); padding:.8rem 1.4rem; display:flex; align-items:center; justify-content:space-between; }
  .app-body{ padding:1.6rem; }
  .stat-card{ border-radius:14px; border:1px solid var(--line); background:#fff; padding:1.1rem 1.2rem; }
  .stat-card .k{ font-family:'Sora'; font-weight:800; font-size:1.7rem; color:var(--ink); }
  .avatar{ width:36px; height:36px; border-radius:50%; background:var(--navy-050); color:var(--navy); display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; }
  .badge-soft{ font-size:.72rem; font-weight:600; padding:.25rem .55rem; border-radius:6px; }
  .b-green{ background:#E4F5EA; color:#1E7B43; }
  .b-amber{ background:#FEF3D6; color:#8A5A00; }
  .b-blue{ background:#E4EEFB; color:#1F5FA8; }
  .b-red{ background:#FBE6E6; color:#A72626; }
  .b-grey{ background:#EDEFF2; color:#5B6472; }
  .table thead th{ font-size:.74rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line); font-weight:700; }
  .table td{ vertical-align:middle; }
  .form-hint{ font-size:.8rem; color:var(--muted); }
  .req-tag{ font-size:.68rem; font-weight:700; color:var(--forge); background:var(--forge-100); border-radius:5px; padding:.1rem .4rem; margin-left:.35rem; }
  .feature-ic{ width:44px; height:44px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; font-size:1.2rem; }
  .pricing-pop{ border:2px solid var(--forge)!important; position:relative; }
  .pricing-pop .ribbon{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--forge); color:#fff; font-size:.72rem; font-weight:700; padding:.2rem .7rem; border-radius:999px; }
  .timeline{ position:relative; padding-left:1.4rem; }
  .timeline::before{ content:""; position:absolute; left:5px; top:4px; bottom:4px; width:2px; background:var(--line); }
  .tl-dot{ position:absolute; left:-1.4rem; width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid var(--navy); margin-top:3px; }
  .tl-dot.done{ background:var(--teal); border-color:var(--teal); }
  .tl-dot.active{ background:var(--forge); border-color:var(--forge); }
  .accordion-button:not(.collapsed){ background:var(--navy-050); color:var(--navy); }
  .accordion-button:focus{ box-shadow:none; }
  .logo-strip span{ font-family:'Sora'; font-weight:700; color:#98A2B3; font-size:1.1rem; }
  .kbd{ font-family:monospace; background:#EDEFF2; border-radius:5px; padding:.05rem .35rem; font-size:.8rem; }
  @media (max-width:768px){ .app-side{ display:none; } }
  .nav-part-label{ font-family:'Sora'; font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    color:#fff; background:var(--navy); border-radius:7px; padding:.45rem .7rem; margin:1rem .25rem .4rem; display:flex; align-items:center; gap:.45rem; }
  .nav-part-label.mgmt{ background:var(--forge); }
  .side-grp{ font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:#6E82A0; padding:.9rem .8rem .3rem; }
  .mode-pill{ font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.2rem .6rem; border-radius:999px; }
  .mode-public{ background:var(--navy-050); color:var(--navy); }
  .mode-mgmt{ background:var(--forge-100); color:var(--forge-600); }
  .editor-label{ font-size:.8rem; font-weight:600; margin-bottom:.25rem; }
  .perm-yes{ color:#1E7B43; } .perm-no{ color:#C0C6CE; }
  .sticky-actions{ position:sticky; bottom:0; background:#fff; border-top:1px solid var(--line); padding:.9rem 0; margin-top:1.2rem; }
  .drop-zone{ border:2px dashed var(--line); border-radius:12px; padding:1.6rem; text-align:center; color:var(--muted); }

/* ── Additions for the live PHP site ───────────────────────────── */
body{ font-family:'Inter',system-ui,sans-serif; color:var(--ink); background:var(--bg); }
h1,h2,h3,h4,h5,.navbar-brand{ font-family:'Sora',sans-serif; }
.min-vh-80{ min-height:80vh; }
a{ text-decoration:none; }
.side-link.active{ background:var(--forge); color:#fff; }