:root{--bg:#050008;--ink:#fff;--muted:rgba(255,255,255,.68);--soft:rgba(255,255,255,.08);--line:rgba(255,255,255,.12);--panel:rgba(12,16,31,.78);--panel2:rgba(8,10,20,.9);--purple:#a855f7;--pink:#ff39b7;--orange:#ff8c1a;--cyan:#28d7ff;--teal:#21f7d0;--green:#45ff6a;--yellow:#ffe600;--red:#ff4f61;--radius:14px;--shadow:0 24px 80px rgba(0,0,0,.46)}
*{box-sizing:border-box}html{background:#000;scroll-behavior:smooth}body{margin:0;min-height:100vh;color:var(--ink);font-family:Inter,Arial,sans-serif;background:radial-gradient(circle at 15% 4%,rgba(168,85,247,.18),transparent 27%),radial-gradient(circle at 80% 18%,rgba(255,57,183,.16),transparent 30%),radial-gradient(circle at 50% 80%,rgba(255,140,26,.08),transparent 35%),linear-gradient(180deg,#09000f 0%,#050008 50%,#020005 100%);overflow-x:hidden}body:before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:45px 45px;mask-image:radial-gradient(circle at center,#000,transparent 78%)}a{color:inherit;text-decoration:none}.site-shell{width:min(1580px,calc(100% - 28px));margin:10px auto 20px}.fc-header{position:sticky;top:8px;z-index:100;min-height:78px;display:flex;align-items:center;gap:18px;padding:10px 18px;border:1px solid rgba(168,85,247,.34);border-radius:12px;background:rgba(6,8,18,.9);box-shadow:0 0 30px rgba(168,85,247,.18),inset 0 0 30px rgba(255,57,183,.025);backdrop-filter:blur(18px)}.brand{display:flex;align-items:center;gap:10px;min-width:245px}.brand-mark{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 0 16px rgba(168,85,247,.55))}.brand-word{width:196px;max-height:60px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(255,57,183,.28))}.main-nav{flex:1;display:flex;justify-content:center}.nav-list{display:flex;align-items:center;justify-content:center;gap:4px;list-style:none;margin:0;padding:0}.nav-item{position:relative}.nav-link{display:inline-flex;align-items:center;min-height:52px;padding:0 13px;font-size:.95rem;font-weight:750;color:rgba(255,255,255,.82);position:relative;white-space:nowrap}.nav-link:hover,.nav-link.active{color:#fff}.nav-link.active:after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:3px;border-radius:99px;background:linear-gradient(90deg,var(--purple),var(--pink),var(--orange));box-shadow:0 0 14px rgba(255,57,183,.7)}.has-menu>.nav-link:before{content:"";position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);border:7px solid transparent;border-bottom-color:rgba(17,19,36,.98);opacity:0;transition:.14s}.dropdown{position:absolute;left:50%;top:calc(100% + 7px);min-width:215px;transform:translate(-50%,8px);opacity:0;visibility:hidden;pointer-events:none;padding:8px;border:1px solid rgba(168,85,247,.28);border-radius:13px;background:linear-gradient(145deg,rgba(14,18,34,.98),rgba(7,9,19,.98));box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 26px rgba(168,85,247,.18);transition:.15s}.dropdown.wide{min-width:270px}.dropdown a{display:block;padding:10px 12px;border-radius:9px;color:rgba(255,255,255,.78);font-size:.88rem;font-weight:650}.dropdown a:hover{color:#fff;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}.has-menu:hover .dropdown,.has-menu:focus-within .dropdown,.has-menu:hover>.nav-link:before,.has-menu:focus-within>.nav-link:before{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}.has-menu:hover>.nav-link:before,.has-menu:focus-within>.nav-link:before{transform:translateX(-50%)}.header-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}.status-button,.discord-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;border-radius:9px;padding:0 18px;font-size:.92rem;font-weight:800;white-space:nowrap}.status-button{border:1px solid rgba(69,255,106,.44);background:rgba(17,74,38,.2);color:#fff;box-shadow:0 0 20px rgba(69,255,106,.12)}.status-light{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}.status-button[data-status="partial"]{border-color:rgba(255,230,0,.5);background:rgba(255,230,0,.12)}.status-button[data-status="partial"] .status-light{background:var(--yellow);box-shadow:0 0 12px var(--yellow)}.status-button[data-status="degraded"]{border-color:rgba(255,140,26,.55);background:rgba(255,140,26,.14)}.status-button[data-status="degraded"] .status-light{background:var(--orange);box-shadow:0 0 12px var(--orange)}.status-button[data-status="offline"]{border-color:rgba(255,79,97,.55);background:rgba(255,79,97,.14)}.status-button[data-status="offline"] .status-light{background:var(--red);box-shadow:0 0 12px var(--red)}.discord-button{border:1px solid rgba(168,85,247,.72);background:linear-gradient(135deg,rgba(168,85,247,.92),rgba(96,38,186,.92));box-shadow:0 0 24px rgba(168,85,247,.26)}.discord-glyph{font-weight:900;font-size:1.15rem}.nav-toggle{display:none;margin-left:auto;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:10px;width:44px;height:42px}.nav-toggle span{display:block;width:20px;height:2px;margin:4px auto;background:#fff;border-radius:9px}.hero{position:relative;margin-top:12px;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);background:linear-gradient(145deg,rgba(11,12,28,.78),rgba(4,5,12,.88));box-shadow:var(--shadow);overflow:hidden}.home-hero{min-height:440px;display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.9fr);align-items:center}.home-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,0,14,.98) 0%,rgba(8,2,20,.88) 38%,rgba(12,4,30,.4) 64%,transparent 100%),radial-gradient(circle at 75% 40%,rgba(168,85,247,.34),transparent 35%);z-index:1}.home-hero:after{content:"";position:absolute;right:-5%;bottom:0;width:70%;height:65%;opacity:.42;background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,57,183,.3) 23px 24px),linear-gradient(to top,rgba(255,57,183,.55),transparent 70%);clip-path:polygon(0 70%,4% 55%,8% 72%,11% 45%,17% 70%,22% 50%,28% 68%,33% 35%,40% 70%,45% 56%,52% 72%,58% 42%,64% 66%,70% 31%,76% 70%,82% 48%,88% 65%,94% 40%,100% 72%,100% 100%,0 100%);z-index:0}.hero-copy{position:relative;z-index:3;padding:70px 58px}.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 14px;color:#d694ff;font-size:.85rem;font-weight:900;letter-spacing:.23em;text-transform:uppercase}.eyebrow span{width:22px;height:4px;border-radius:99px;background:linear-gradient(90deg,var(--purple),var(--pink));box-shadow:0 0 12px rgba(168,85,247,.8)}h1{margin:0;font-size:clamp(2.65rem,5.1vw,5.25rem);line-height:.98;font-weight:900;letter-spacing:-.045em;text-shadow:0 0 40px rgba(255,255,255,.12)}h1 strong{display:block;background:linear-gradient(90deg,var(--purple) 0%,var(--pink) 45%,var(--orange) 80%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-text{max-width:640px;color:rgba(255,255,255,.72);font-size:1.08rem;line-height:1.65;margin:20px 0 0}.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 22px;border-radius:9px;font-size:.95rem;font-weight:850;border:1px solid var(--line);transition:.16s;cursor:pointer}.btn:hover{transform:translateY(-2px)}.btn-primary{border-color:rgba(255,57,183,.42);background:linear-gradient(135deg,rgba(168,85,247,.95),rgba(255,57,183,.88),rgba(255,140,26,.78));box-shadow:0 0 26px rgba(255,57,183,.28);color:#fff}.btn-ghost{background:rgba(255,255,255,.055);color:#fff}.btn-small{min-height:42px;padding:0 18px;background:rgba(168,85,247,.08);border-color:rgba(168,85,247,.34);color:#e2c9ff}.hero-art{position:relative;z-index:2;min-height:440px;display:flex;align-items:center;justify-content:center;padding:15px 20px 0 0}.hero-art img{width:min(620px,110%);filter:drop-shadow(0 0 42px rgba(168,85,247,.48));transform:translateY(10px)}.network-grid,.card-grid,.server-grid,.status-page-grid{display:grid;gap:14px;margin-top:14px}.network-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.feature-card,.glass-card,.server-card,.status-card,.status-strip{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,rgba(14,19,34,.84),rgba(7,10,22,.74));box-shadow:var(--shadow),inset 0 0 28px rgba(255,255,255,.025);backdrop-filter:blur(14px)}.feature-card{padding:22px 20px;min-height:300px}.feature-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:11px;background:rgba(168,85,247,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);font-size:1.65rem;font-weight:900}.feature-card h2,.glass-card h2,.server-content h2,.status-card h2{margin:16px 0 4px;font-size:1.25rem}.feature-card p,.glass-card p,.server-card p,.status-card p{color:var(--muted);line-height:1.55}.mini{margin:.15rem 0 .9rem!important;font-weight:800;color:var(--purple)!important}.feature-card ul,.server-card ul{margin:15px 0 0;padding:0;list-style:none}.feature-card li,.server-card li{color:rgba(255,255,255,.78);font-size:.9rem;margin:.45rem 0}.feature-card li:before,.server-card li:before,.clean-list li:before{content:"⊙";color:var(--purple);margin-right:8px}.feature-card>a{display:inline-block;margin-top:18px;font-weight:850;color:#d699ff}.feature-card.pink .feature-icon,.feature-card.pink li:before{color:var(--pink)}.feature-card.pink .mini,.feature-card.pink>a{color:var(--pink)!important}.feature-card.orange .feature-icon,.feature-card.orange li:before{color:var(--orange)}.feature-card.orange .mini,.feature-card.orange>a{color:var(--orange)!important}.feature-card.cyan .feature-icon,.feature-card.cyan li:before{color:var(--cyan)}.feature-card.cyan .mini,.feature-card.cyan>a{color:var(--cyan)!important}.feature-card.teal .feature-icon,.feature-card.teal li:before{color:var(--teal)}.feature-card.teal .mini,.feature-card.teal>a{color:var(--teal)!important}.status-strip{display:grid;grid-template-columns:1.6fr repeat(5,1fr) auto;align-items:center;gap:0;margin-top:18px;padding:18px 22px}.status-strip>div{padding:0 18px;border-right:1px solid rgba(255,255,255,.08)}.status-strip h2{margin:0 0 4px;font-size:1.1rem}.status-strip p{margin:0;color:var(--muted);line-height:1.45}.status-mini span,.status-mini small{display:block;color:var(--muted);font-size:.82rem}.status-mini strong{display:block;color:var(--green);font-size:.85rem;margin:5px 0}.status-mini strong:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);margin-right:7px}.page-main{margin-top:14px}.page-hero{padding:48px;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);background:linear-gradient(145deg,rgba(13,16,31,.86),rgba(5,6,14,.88));box-shadow:var(--shadow);position:relative;overflow:hidden}.page-hero:after{content:"";position:absolute;right:-10%;top:-40%;width:50%;height:120%;background:radial-gradient(circle,rgba(168,85,247,.25),transparent 60%);pointer-events:none}.page-hero.compact h1{max-width:980px}.page-hero.compact p:not(.eyebrow){max-width:780px;color:var(--muted);line-height:1.6;font-size:1.05rem}.page-hero.split{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}.page-hero.split img{width:100%;border-radius:12px;box-shadow:0 0 38px rgba(168,85,247,.24)}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.card-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.card-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.glass-card{padding:28px}.clean-list{padding:0;margin:14px 0 0;list-style:none}.clean-list li{margin:.7rem 0;color:rgba(255,255,255,.78);line-height:1.45}.server-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.server-card{overflow:hidden}.server-card img{width:100%;height:190px;object-fit:cover;display:block}.server-placeholder{height:190px;display:grid;place-items:center;font-size:4rem;font-weight:900;background:radial-gradient(circle at center,rgba(168,85,247,.28),transparent 55%),linear-gradient(135deg,rgba(255,57,183,.18),rgba(40,215,255,.12));color:#fff;text-shadow:0 0 30px rgba(168,85,247,.8)}.server-content{padding:24px}.badge{display:inline-flex;align-items:center;border-radius:999px;padding:6px 10px;font-size:.72rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.badge.online{color:var(--green);background:rgba(69,255,106,.10);border:1px solid rgba(69,255,106,.32)}.badge.soon{color:var(--yellow);background:rgba(255,230,0,.10);border:1px solid rgba(255,230,0,.28)}dl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}dt{color:var(--muted);font-size:.75rem}dd{margin:3px 0 0;font-weight:850}.detail-list{display:grid;gap:12px}.detail-list div{display:flex;justify-content:space-between;gap:16px;padding:12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}.detail-list span{color:var(--muted)}.fc-form{display:grid;gap:12px}.fc-form label{display:grid;gap:6px;color:rgba(255,255,255,.8);font-weight:700}.fc-form input,.fc-form textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.28);color:#fff;padding:12px 13px;font:inherit}.fc-form input:focus,.fc-form textarea:focus{outline:1px solid rgba(168,85,247,.65)}.honeypot{position:absolute!important;left:-9999px!important}.form-note{min-height:22px;margin:0!important}.now-card h3{font-size:2rem;margin:6px 0 0}.now-label{color:var(--pink)!important;font-weight:900;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem}.wave{display:flex;gap:4px;height:70px;align-items:center;margin-top:22px}.wave i{display:block;width:6px;border-radius:99px;background:linear-gradient(to top,var(--pink),var(--purple));animation:pulse 1s ease-in-out infinite alternate}.wave i:nth-child(1){height:20%}.wave i:nth-child(2){height:45%;animation-delay:.07s}.wave i:nth-child(3){height:78%;animation-delay:.12s}.wave i:nth-child(4){height:32%;animation-delay:.19s}.wave i:nth-child(5){height:62%;animation-delay:.24s}.wave i:nth-child(6){height:92%;animation-delay:.28s}.wave i:nth-child(7){height:43%;animation-delay:.36s}.wave i:nth-child(8){height:70%;animation-delay:.42s}.wave i:nth-child(9){height:28%;animation-delay:.48s}.wave i:nth-child(10){height:80%;animation-delay:.54s}.wave i:nth-child(11){height:50%;animation-delay:.6s}.wave i:nth-child(12){height:35%;animation-delay:.66s}@keyframes pulse{from{transform:scaleY(.3);opacity:.5}to{transform:scaleY(1);opacity:1}}.status-page-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.status-card strong{display:inline-flex;margin-top:15px;color:var(--yellow)}.status-card.online strong{color:var(--green)}.status-card.offline strong{color:var(--red)}.status-card.online strong:before,.status-card.offline strong:before,.status-card.checking strong:before{content:"";width:9px;height:9px;border-radius:50%;margin:5px 8px 0 0;background:currentColor;box-shadow:0 0 10px currentColor}.staff-card{text-align:center}.staff-card img{width:96px;height:96px;object-fit:contain;margin:auto;filter:drop-shadow(0 0 18px rgba(168,85,247,.45))}.site-footer{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:22px;margin-top:18px;padding:18px 22px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(7,9,18,.78);color:rgba(255,255,255,.62)}.footer-brand{display:flex;align-items:center;gap:8px;font-weight:900;color:#fff}.footer-brand img{width:42px;height:42px;object-fit:contain}.footer-brand span{background:linear-gradient(90deg,#fff,var(--pink),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}.footer-links,.footer-socials{display:flex;align-items:center;gap:18px}.footer-links a:hover{color:#fff}.footer-socials a{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:rgba(255,255,255,.06);font-size:.8rem;font-weight:900}.footer-socials a:hover{background:rgba(168,85,247,.18)}
@media (max-width:1320px){.brand{min-width:220px}.brand-word{width:168px}.nav-link{padding:0 9px;font-size:.88rem}.network-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.status-strip{grid-template-columns:1fr repeat(3,1fr);gap:14px}.status-strip .btn{grid-column:1/-1}.status-strip>div{border-right:0;padding:0}}
@media (max-width:980px){.site-shell{width:min(100% - 20px,920px)}.fc-header{flex-wrap:wrap}.brand{min-width:auto}.nav-toggle{display:block}.main-nav{display:none;order:3;width:100%;justify-content:stretch}.nav-open .main-nav{display:block}.nav-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.nav-link{display:flex;justify-content:center;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.04)}.nav-link.active:after{display:none}.dropdown{position:static;transform:none!important;opacity:1;visibility:visible;pointer-events:auto;display:none;min-width:0;margin-top:6px}.submenu-open .dropdown{display:block}.has-menu>.nav-link:before{display:none}.header-actions{margin-left:auto}.home-hero,.page-hero.split{grid-template-columns:1fr}.hero-art{min-height:260px;opacity:.7}.hero-copy,.page-hero{padding:34px 24px}.two-col,.card-grid.two,.card-grid.three,.server-grid,.status-page-grid{grid-template-columns:1fr}.network-grid{grid-template-columns:1fr 1fr}.site-footer{grid-template-columns:1fr;text-align:center;justify-items:center}.footer-links{flex-wrap:wrap;justify-content:center}}
@media (max-width:640px){.brand-word{display:none}.header-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.status-button,.discord-button{padding:0 10px;font-size:.78rem}.network-grid{grid-template-columns:1fr}.status-strip{grid-template-columns:1fr}.hero-copy,.page-hero{padding:28px 18px}h1{font-size:2.4rem}.page-hero.split img{display:none}.nav-list{grid-template-columns:1fr}.feature-card{min-height:auto}}

/* Patch 01A: dropdown stability fix.
   Keeps desktop dropdowns open while moving from the nav button into the menu. */
@media (min-width: 981px) {
  .nav-item.has-menu {
    position: relative;
  }
  .nav-item.has-menu::after {
    content: "";
    position: absolute;
    left: -14px;
    right: -14px;
    top: 100%;
    height: 24px;
    display: block;
    z-index: 250;
  }
  .dropdown {
    top: calc(100% + 2px);
    z-index: 300;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }
  .dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -18px;
    height: 18px;
  }
  .has-menu.submenu-open .dropdown,
  .has-menu:hover .dropdown,
  .has-menu:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
  .has-menu.submenu-open > .nav-link::before,
  .has-menu:hover > .nav-link::before,
  .has-menu:focus-within > .nav-link::before {
    opacity: 1;
    visibility: visible;
  }
}


/* =========================================================
   FlaroCity Patch 01B - Mockup Polish
   Goal: match the wide neon network mockup more closely.
   ========================================================= */
.site-shell{
  width:min(1880px,calc(100% - 28px));
}
.fc-header{
  min-height:86px;
  padding:12px 22px;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(7,10,23,.94),rgba(4,6,15,.92));
  box-shadow:0 0 34px rgba(168,85,247,.20), inset 0 0 34px rgba(40,215,255,.025);
}
.brand{
  min-width:320px;
  gap:14px;
}
.brand-mark{
  width:58px;
  height:58px;
  padding:0;
  border-radius:8px;
  object-fit:contain;
  background:transparent;
  filter:drop-shadow(0 0 16px rgba(168,85,247,.70));
}
.brand-word{
  width:242px;
  max-height:68px;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 0 14px rgba(255,57,183,.38));
}
.main-nav{
  justify-content:center;
}
.nav-list{gap:8px;}
.nav-link{
  min-height:56px;
  padding:0 15px;
  font-size:1rem;
}
.header-actions{gap:14px;}
.status-button,.discord-button{
  min-height:48px;
  border-radius:10px;
  padding:0 22px;
}

.home-hero{
  display:block;
  min-height:432px;
  margin-top:12px;
  background:
    linear-gradient(90deg,rgba(5,0,12,.99) 0%,rgba(5,0,12,.97) 27%,rgba(7,1,17,.74) 46%,rgba(7,1,17,.22) 68%,rgba(7,1,17,.02) 100%),
    linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.15)),
    url('../img/hero-network-bg.jpg') center right / auto 100% no-repeat,
    linear-gradient(145deg,rgba(11,12,28,.82),rgba(4,5,12,.95)) !important;
  overflow:hidden;
}
.home-hero:before{
  background:
    radial-gradient(circle at 77% 36%,rgba(168,85,247,.22),transparent 32%),
    radial-gradient(circle at 86% 24%,rgba(255,57,183,.13),transparent 25%),
    linear-gradient(90deg,rgba(5,0,12,.12),transparent 62%);
  z-index:1;
}
.home-hero:after{
  right:-2%;
  width:62%;
  height:55%;
  opacity:.18;
}
.hero-copy{
  min-height:432px;
  max-width:920px;
  padding:50px 48px 48px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.home-hero .hero-art{
  display:none;
}
h1{
  max-width:900px;
  font-size:clamp(3rem,4.05vw,4.8rem);
  line-height:1.02;
  letter-spacing:-.05em;
}
h1 strong{
  display:block;
  max-width:900px;
}
.hero-text{
  max-width:680px;
  font-size:1.06rem;
  line-height:1.55;
  margin-top:20px;
}
.hero-actions{margin-top:26px;}
.btn{
  min-height:50px;
  border-radius:10px;
}
.btn-primary{
  box-shadow:0 0 30px rgba(255,57,183,.34),0 0 50px rgba(168,85,247,.16);
}

.network-grid{
  gap:14px;
  margin-top:14px;
}
.feature-card{
  min-height:292px;
  padding:24px 22px;
  position:relative;
  overflow:hidden;
}
.feature-card:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 33%),radial-gradient(circle at 18% 0%,rgba(168,85,247,.10),transparent 30%);
}
.feature-card>*{position:relative;z-index:1;}
.feature-icon{
  width:50px;
  height:50px;
  border-radius:12px;
  font-size:1.75rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 0 22px rgba(168,85,247,.12);
}
.feature-card h2{font-size:1.3rem;margin-top:18px;}
.feature-card p{font-size:.96rem;}
.status-strip{
  margin-top:22px;
  padding:24px;
}
.footer-brand{
  min-width:230px;
  gap:10px;
}
.footer-brand img:first-child{
  width:48px;
  height:48px;
  object-fit:contain;
}
.footer-brand span{display:none;}
.footer-wordmark{
  width:175px;
  max-height:52px;
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(255,57,183,.32));
}

@media (max-width:1500px){
  .site-shell{width:min(1460px,calc(100% - 28px));}
  .brand{min-width:265px;}
  .brand-word{width:185px;}
  .brand-mark{width:48px;height:48px;}
  .nav-list{gap:2px;}
  .nav-link{padding:0 11px;font-size:.92rem;}
  .status-button,.discord-button{padding:0 16px;}
  h1{font-size:clamp(2.85rem,4.6vw,4.55rem);}
  .hero-copy{max-width:780px;}
}
@media (max-width:1200px){
  .home-hero{
    background:
      linear-gradient(90deg,rgba(5,0,12,.99) 0%,rgba(5,0,12,.92) 48%,rgba(7,1,17,.45) 100%),
      url('../img/hero-network-bg.jpg') center right / cover no-repeat,
      linear-gradient(145deg,rgba(11,12,28,.82),rgba(4,5,12,.95)) !important;
  }
  .hero-copy{max-width:760px;}
}
@media (max-width:760px){
  .home-hero{min-height:auto;background:linear-gradient(145deg,rgba(11,12,28,.9),rgba(4,5,12,.96)) !important;}
  .hero-copy{min-height:0;padding:44px 24px;}
  h1{font-size:clamp(2.4rem,12vw,4rem);}
}


/* =========================================================
   FlaroCity Patch 01C - Mockup Layout Rebuild
   This is a stronger rebuild so the live page matches the mockup:
   - full-width shell like the mockup
   - hero art is a real right-side background, not a boxed logo image
   - tighter hero/cards/status spacing so more of the homepage fits on screen
   - cache-busted via site-v13.css in HTML
   ========================================================= */
html, body { min-width: 320px; }
body {
  background:
    radial-gradient(circle at 8% 0%, rgba(168,85,247,.18), transparent 26%),
    radial-gradient(circle at 88% 5%, rgba(255,57,183,.11), transparent 26%),
    linear-gradient(180deg,#03050d 0%,#040008 45%,#020005 100%) !important;
}
body::before {
  opacity: .75 !important;
}
.site-shell {
  width: min(100% - 22px, 1896px) !important;
  margin: 8px auto 18px !important;
}
.fc-header {
  min-height: 88px !important;
  padding: 10px 22px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(168,85,247,.38) !important;
  background: linear-gradient(180deg, rgba(6,10,23,.96), rgba(3,5,14,.96)) !important;
  box-shadow: 0 0 0 1px rgba(40,215,255,.035), 0 0 34px rgba(168,85,247,.22), inset 0 0 34px rgba(255,57,183,.035) !important;
}
.brand {
  flex: 0 0 335px !important;
  min-width: 335px !important;
  gap: 14px !important;
}
.brand-mark {
  width: 58px !important;
  height: 58px !important;
  border-radius: 9px !important;
  background: transparent !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 16px rgba(168,85,247,.72)) !important;
}
.brand-word {
  width: 245px !important;
  max-height: 68px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 14px rgba(255,57,183,.32)) !important;
}
.main-nav {
  flex: 1 1 auto !important;
  justify-content: center !important;
}
.nav-list { gap: 10px !important; }
.nav-link {
  min-height: 58px !important;
  padding: 0 14px !important;
  font-size: 1rem !important;
  font-weight: 750 !important;
}
.nav-link.active::after {
  bottom: 0 !important;
  height: 4px !important;
  left: 12px !important;
  right: 12px !important;
  background: linear-gradient(90deg, var(--purple), var(--pink), var(--orange)) !important;
  box-shadow: 0 0 18px rgba(255,57,183,.78) !important;
}
.header-actions { gap: 14px !important; }
.status-button, .discord-button {
  min-height: 50px !important;
  border-radius: 10px !important;
  padding: 0 22px !important;
  font-size: .96rem !important;
}
.status-button[data-status="online"] {
  background: rgba(0,255,106,.08) !important;
  border-color: rgba(0,255,106,.55) !important;
  box-shadow: 0 0 26px rgba(0,255,106,.16) !important;
}
.discord-button {
  background: linear-gradient(135deg, rgba(168,85,247,.95), rgba(126,58,242,.88)) !important;
  border-color: rgba(216,180,254,.38) !important;
  box-shadow: 0 0 26px rgba(168,85,247,.24) !important;
}

.hero.home-hero {
  display: block !important;
  position: relative !important;
  min-height: 426px !important;
  margin-top: 10px !important;
  border: 1px solid rgba(255,255,255,.085) !important;
  border-radius: 13px !important;
  box-shadow: 0 24px 78px rgba(0,0,0,.48), inset 0 0 34px rgba(255,255,255,.018) !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg,
      rgba(3,5,13,1) 0%,
      rgba(3,5,13,.99) 23%,
      rgba(4,5,15,.87) 42%,
      rgba(4,5,15,.36) 63%,
      rgba(4,5,15,.04) 100%),
    radial-gradient(circle at 74% 34%, rgba(168,85,247,.22), transparent 32%),
    url('../img/hero-network-bg.jpg') center right / auto 100% no-repeat,
    linear-gradient(145deg, rgba(8,10,22,.96), rgba(3,4,11,.98)) !important;
}
.hero.home-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 62% 18%, rgba(255,57,183,.10), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(40,215,255,.08), transparent 30%),
    linear-gradient(90deg, rgba(3,5,13,.32), transparent 58%) !important;
}
.hero.home-hero::after {
  content: "" !important;
  position: absolute !important;
  right: -4% !important;
  bottom: 0 !important;
  width: 70% !important;
  height: 54% !important;
  z-index: 0 !important;
  opacity: .16 !important;
  pointer-events: none !important;
  background:
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(255,57,183,.35) 24px 25px),
    linear-gradient(to top, rgba(255,57,183,.52), transparent 70%) !important;
  clip-path: polygon(0 76%,4% 62%,8% 74%,12% 48%,18% 76%,23% 58%,29% 73%,34% 40%,40% 76%,46% 60%,53% 75%,59% 44%,65% 71%,72% 35%,79% 77%,85% 54%,91% 70%,96% 42%,100% 74%,100% 100%,0 100%) !important;
}
.home-hero .hero-art,
.hero-art {
  display: none !important;
  visibility: hidden !important;
}
.hero-copy {
  position: relative !important;
  z-index: 3 !important;
  width: min(820px, 58%) !important;
  min-height: 426px !important;
  padding: 42px 48px 42px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.eyebrow {
  margin-bottom: 18px !important;
  font-size: .86rem !important;
  letter-spacing: .24em !important;
  color: #d894ff !important;
}
.eyebrow span {
  width: 22px !important;
  height: 4px !important;
}
h1 {
  max-width: 820px !important;
  font-size: clamp(3.2rem, 3.72vw, 4.55rem) !important;
  line-height: 1.03 !important;
  letter-spacing: -.052em !important;
}
h1 strong {
  display: block !important;
  max-width: 1020px !important;
  background: linear-gradient(90deg,#a855f7 0%,#d946ef 27%,#ff3d9a 49%,#ff7a2f 72%,#ffd38a 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
.hero-text {
  max-width: 650px !important;
  margin-top: 20px !important;
  color: rgba(255,255,255,.76) !important;
  font-size: 1.08rem !important;
  line-height: 1.58 !important;
}
.hero-actions { margin-top: 26px !important; gap: 16px !important; }
.btn {
  min-height: 50px !important;
  border-radius: 10px !important;
  padding: 0 24px !important;
}
.btn-primary {
  border-color: rgba(216,180,254,.42) !important;
  background: linear-gradient(135deg, rgba(142,72,255,.96), rgba(194,46,255,.92), rgba(255,105,41,.92)) !important;
  box-shadow: 0 0 34px rgba(168,85,247,.26), 0 0 30px rgba(255,57,183,.24) !important;
}
.btn-ghost {
  background: rgba(9,12,24,.64) !important;
  border-color: rgba(255,255,255,.18) !important;
}

.network-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 14px !important;
}
.feature-card {
  min-height: 278px !important;
  padding: 24px 22px !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, rgba(14,19,34,.90), rgba(7,10,22,.80)) !important;
  border: 1px solid rgba(255,255,255,.105) !important;
  box-shadow: 0 18px 52px rgba(0,0,0,.36), inset 0 0 28px rgba(255,255,255,.025) !important;
  overflow: hidden !important;
}
.feature-card::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), transparent 38%),
    radial-gradient(circle at 18% 0%, rgba(168,85,247,.16), transparent 34%) !important;
}
.feature-icon {
  width: 50px !important;
  height: 50px !important;
  border-radius: 12px !important;
  background: rgba(168,85,247,.11) !important;
  font-size: 1.7rem !important;
}
.feature-card h2 {
  margin: 16px 0 4px !important;
  font-size: 1.34rem !important;
}
.feature-card .mini {
  font-size: .95rem !important;
  margin: 0 0 16px !important;
}
.feature-card p:not(.mini) {
  font-size: .94rem !important;
  line-height: 1.48 !important;
  margin: 0 0 13px !important;
}
.feature-card ul {
  margin: 0 0 16px !important;
}
.feature-card li {
  font-size: .90rem !important;
  margin: 8px 0 !important;
}
.feature-card > a {
  margin-top: auto !important;
}

.status-strip {
  margin-top: 22px !important;
  padding: 22px 24px !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, rgba(12,17,30,.86), rgba(6,9,18,.80)) !important;
  border-color: rgba(255,255,255,.095) !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.34), inset 0 0 28px rgba(255,255,255,.02) !important;
}
.status-strip h2 { font-size: 1.12rem !important; }
.status-strip .btn { min-height: 48px !important; }
.site-footer {
  margin-top: 18px !important;
  border-radius: 12px !important;
}

@media (max-width: 1700px) {
  .site-shell { width: min(100% - 22px, 1600px) !important; }
  .brand { flex-basis: 292px !important; min-width: 292px !important; }
  .brand-word { width: 210px !important; }
  .brand-mark { width: 52px !important; height: 52px !important; }
  .nav-list { gap: 2px !important; }
  .nav-link { padding: 0 11px !important; font-size: .93rem !important; }
  .status-button,.discord-button { padding: 0 16px !important; }
  .hero-copy { width: min(760px, 54%) !important; }
  h1 { font-size: clamp(3rem, 4.05vw, 4.35rem) !important; }
}
@media (max-width: 1320px) {
  .site-shell { width: min(100% - 20px, 1240px) !important; }
  .brand { flex-basis: 245px !important; min-width: 245px !important; }
  .brand-word { width: 175px !important; }
  .nav-link { padding: 0 8px !important; font-size: .88rem !important; }
  .status-button,.discord-button { padding: 0 12px !important; font-size: .86rem !important; }
  .hero.home-hero {
    background:
      linear-gradient(90deg, rgba(3,5,13,1) 0%, rgba(3,5,13,.96) 38%, rgba(4,5,15,.55) 100%),
      url('../img/hero-network-bg.jpg') center right / cover no-repeat,
      linear-gradient(145deg, rgba(8,10,22,.96), rgba(3,4,11,.98)) !important;
  }
  .hero-copy { width: min(720px, 64%) !important; }
  .network-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .feature-card { min-height: 260px !important; }
}
@media (max-width: 980px) {
  .site-shell { width: min(100% - 20px, 920px) !important; }
  .brand { flex: 1 1 auto !important; min-width: 0 !important; }
  .hero.home-hero {
    min-height: auto !important;
    background:
      linear-gradient(90deg, rgba(3,5,13,.98), rgba(3,5,13,.88)),
      url('../img/hero-network-bg.jpg') center / cover no-repeat !important;
  }
  .hero-copy {
    width: 100% !important;
    min-height: auto !important;
    padding: 42px 28px !important;
  }
  .network-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  .brand-mark { width: 46px !important; height: 46px !important; }
  .brand-word { display: none !important; }
  .header-actions { grid-template-columns: 1fr 1fr !important; width: 100% !important; }
  .network-grid { grid-template-columns: 1fr !important; }
  h1 { font-size: clamp(2.45rem, 12vw, 3.8rem) !important; }
  .hero-text { font-size: 1rem !important; }
}

/* =========================================================
   FlaroCity Patch 01G - Real homepage implementation
   Replaces the screenshot-map homepage with real HTML/CSS while
   preserving the approved mockup composition.
   ========================================================= */
body[data-page="Home"] {
  background:
    radial-gradient(circle at 50% -18%, rgba(168,85,247,.20), transparent 34%),
    radial-gradient(circle at 4% 18%, rgba(255,57,183,.10), transparent 24%),
    radial-gradient(circle at 96% 18%, rgba(40,215,255,.08), transparent 26%),
    linear-gradient(180deg, #03050b 0%, #03040a 54%, #010207 100%) !important;
}
.home-shell {
  width: min(calc(100% - 20px), 1672px) !important;
  margin: 10px auto 10px !important;
}
.home-shell .fc-header {
  min-height: 78px !important;
  padding: 9px 24px !important;
  border-color: rgba(72,118,255,.22) !important;
  background: linear-gradient(180deg, rgba(7,11,23,.96), rgba(4,7,16,.96)) !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.36), inset 0 0 24px rgba(255,255,255,.025) !important;
}
.home-shell .brand {
  flex-basis: 300px !important;
  min-width: 300px !important;
}
.home-shell .brand-mark {
  width: 58px !important;
  height: 58px !important;
}
.home-shell .brand-word {
  width: 205px !important;
}
.home-shell .nav-list {
  gap: 18px !important;
}
.home-shell .nav-link {
  min-height: 58px !important;
  padding: 0 8px !important;
  font-size: 1rem !important;
  font-weight: 650 !important;
}
.home-shell .nav-link.active::after {
  left: 0 !important;
  right: 0 !important;
  bottom: -10px !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--purple), var(--pink)) !important;
}
.home-shell .status-button,
.home-shell .discord-button {
  min-height: 46px !important;
  border-radius: 8px !important;
  padding: 0 20px !important;
  font-size: .95rem !important;
}
.button-icon,
.feature-icon svg,
.status-mini svg,
.footer-socials svg,
.status-wave {
  width: 1.2em;
  height: 1.2em;
  display: block;
  fill: currentColor;
}
.home-main {
  margin-top: 0 !important;
}
.home-shell .home-hero {
  min-height: 372px !important;
  margin-top: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background:
    linear-gradient(90deg,
      rgba(3,5,13,1) 0%,
      rgba(3,5,13,.99) 22%,
      rgba(3,5,13,.88) 40%,
      rgba(3,5,13,.38) 60%,
      rgba(3,5,13,.06) 100%),
    radial-gradient(circle at 72% 35%, rgba(168,85,247,.23), transparent 30%),
    url('../img/hero-network-bg.jpg') center right / auto 100% no-repeat,
    linear-gradient(145deg, rgba(8,10,22,.96), rgba(3,4,11,.98)) !important;
}
.home-shell .home-hero::before {
  background:
    linear-gradient(90deg, rgba(3,5,13,.22), transparent 58%),
    radial-gradient(circle at 86% 18%, rgba(40,215,255,.08), transparent 30%) !important;
}
.home-shell .home-hero::after {
  display: none !important;
}
.home-shell .hero-copy {
  min-height: 372px !important;
  width: min(955px, 58%) !important;
  padding: 36px 42px !important;
}
.home-shell .eyebrow {
  margin-bottom: 16px !important;
  font-size: .82rem !important;
  letter-spacing: .25em !important;
  color: #d87cff !important;
}
.home-shell h1 {
  max-width: 955px !important;
  font-size: clamp(2.7rem, 3.05vw, 3.35rem) !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
}
.home-shell h1 strong {
  white-space: nowrap;
  background: linear-gradient(90deg, #9d4dff 0%, #d946ef 28%, #ff3d9a 50%, #ff7a2f 76%, #ffd08a 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
.home-shell .hero-text {
  max-width: 620px !important;
  margin-top: 16px !important;
  font-size: .98rem !important;
  line-height: 1.48 !important;
}
.home-shell .hero-actions {
  margin-top: 22px !important;
}
.home-shell .btn {
  min-height: 50px !important;
  min-width: 190px;
  border-radius: 8px !important;
  font-weight: 750 !important;
}
.home-shell .btn-primary {
  background: linear-gradient(135deg, #9d3dff, #7d2ee8) !important;
}
.home-shell .network-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 0 !important;
  padding: 0 20px !important;
}
.home-shell .feature-card {
  height: 250px !important;
  min-height: 250px !important;
  padding: 15px 20px 13px !important;
  border-radius: 12px !important;
  display: flex;
  flex-direction: column;
}
.home-shell .feature-icon {
  width: 38px !important;
  height: 38px !important;
  font-size: 1.65rem !important;
  color: var(--purple);
}
.home-shell .feature-icon.purple,
.home-shell .feature-card .feature-icon {
  color: var(--purple);
}
.home-shell .feature-card.pink .feature-icon { color: var(--pink); }
.home-shell .feature-card.orange .feature-icon { color: var(--orange); }
.home-shell .feature-card.cyan .feature-icon { color: #238cff; }
.home-shell .feature-card.teal .feature-icon { color: var(--cyan); }
.home-shell .feature-card h2 {
  margin: 10px 0 2px !important;
  font-size: 1.12rem !important;
  line-height: 1.1 !important;
}
.home-shell .feature-card .mini {
  margin: 0 0 8px !important;
  font-size: .78rem !important;
}
.home-shell .feature-card p:not(.mini) {
  font-size: .76rem !important;
  line-height: 1.28 !important;
  margin-bottom: 7px !important;
}
.home-shell .feature-card ul {
  margin-top: 3px !important;
  margin-bottom: 7px !important;
}
.home-shell .feature-card li {
  font-size: .72rem !important;
  margin: 2px 0 !important;
}
.feature-card li::before,
.server-card li::before,
.clean-list li::before {
  content: "" !important;
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.45);
}
.home-shell .feature-card > a {
  margin-top: 0 !important;
  font-size: .78rem !important;
}
.home-status {
  grid-template-columns: 1.35fr repeat(5, 1fr) auto !important;
  min-height: 108px;
  margin: 20px 20px 0 !important;
  padding: 18px 22px !important;
}
.status-intro {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 12px;
}
.status-wave {
  color: #d87cff;
  font-size: 1.8rem;
}
.home-status .status-mini {
  display: grid;
  grid-template-columns: 46px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 14px;
  align-items: center;
}
.home-status .status-mini svg {
  grid-row: 1 / 4;
  width: 46px;
  height: 46px;
  padding: 9px;
  color: var(--purple);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
}
.home-status .status-mini:nth-of-type(3) svg { color: var(--pink); }
.home-status .status-mini:nth-of-type(4) svg { color: var(--orange); }
.home-status .status-mini:nth-of-type(5) svg { color: var(--purple); }
.home-status .status-mini:nth-of-type(6) svg { color: var(--cyan); }
.home-status .status-mini span {
  color: #fff;
  font-size: .94rem;
  font-weight: 750;
}
.home-status .status-mini strong {
  display: block;
  margin: 3px 0 0;
  color: var(--green);
  font-size: .84rem;
}
.home-status .status-mini small {
  margin-top: 4px;
}
.home-status .status-cta {
  min-width: 170px;
}
.home-shell .site-footer {
  min-height: 66px;
  margin-top: 18px !important;
  padding: 12px 26px !important;
}
.home-shell .footer-brand {
  min-width: 210px;
}
.footer-socials a {
  color: #8b5cf6;
}
.footer-socials a:nth-child(2) { color: #ff1d25; }
.footer-socials a:nth-child(3) { color: #9146ff; }
.footer-socials a:nth-child(4) { color: #29f0ff; }
.footer-socials svg {
  width: 23px;
  height: 23px;
}
.footer-brand img.footer-wordmark {
  width: 175px !important;
  height: auto !important;
  max-height: 52px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 10px rgba(255,57,183,.32));
}
@media (max-width: 1500px) {
  .home-shell .brand {
    flex-basis: 260px !important;
    min-width: 260px !important;
  }
  .home-shell .brand-word { width: 180px !important; }
  .home-shell .nav-list { gap: 6px !important; }
  .home-shell .status-button,
  .home-shell .discord-button { padding: 0 14px !important; }
  .home-shell .hero-copy { width: min(820px, 58%) !important; }
  .home-shell h1 { font-size: clamp(2.55rem, 3.45vw, 3.45rem) !important; }
  .home-shell h1 strong { white-space: normal; }
}
@media (max-width: 1320px) {
  .home-shell .network-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .home-status {
    grid-template-columns: 1fr repeat(2, 1fr) !important;
  }
  .home-status .status-cta {
    grid-column: 1 / -1;
  }
}
@media (max-width: 980px) {
  .home-shell .brand {
    flex-basis: auto !important;
    min-width: 0 !important;
  }
  .home-shell .nav-link.active::after {
    display: none !important;
  }
  .home-shell .home-hero {
    background:
      linear-gradient(90deg, rgba(3,5,13,.98), rgba(3,5,13,.88)),
      url('../img/hero-network-bg.jpg') center / cover no-repeat !important;
  }
  .home-shell .hero-copy {
    width: 100% !important;
    min-height: 360px !important;
  }
  .home-shell h1 strong {
    white-space: normal;
  }
  .home-shell .network-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 0;
    margin-top: 14px !important;
  }
  .home-status {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
@media (max-width: 640px) {
  .home-shell {
    width: min(100% - 18px, 520px) !important;
    margin-top: 8px !important;
  }
  .home-shell .fc-header {
    padding: 8px 14px !important;
  }
  .home-shell .header-actions {
    gap: 8px !important;
  }
  .home-shell .status-button,
  .home-shell .discord-button {
    min-width: 0 !important;
    padding: 0 8px !important;
    font-size: .78rem !important;
    gap: 6px !important;
  }
  .home-shell .status-light {
    width: 9px;
    height: 9px;
  }
  .home-shell .button-icon {
    width: 1em;
    height: 1em;
  }
  .home-shell .hero-copy {
    padding: 36px 20px !important;
  }
  .home-shell .network-grid {
    grid-template-columns: 1fr !important;
  }
  .home-status {
    grid-template-columns: 1fr !important;
    padding: 18px !important;
  }
  .home-status .status-mini {
    grid-template-columns: 42px 1fr;
  }
}

/* =========================================================
   FlaroCity Patch 01H - Supplied asset integration
   Uses the provided transparent PNG assets while keeping the
   mockup card, header, and footer geometry stable.
   ========================================================= */
.discord-glyph {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: block;
  font-size: 0;
  line-height: 0;
  background: url('../img/icon-discord.svg') center / contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(139,92,246,.55));
}
.feature-icon.asset-icon {
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.10), transparent 58%),
    rgba(168,85,247,.10);
}
.feature-icon.asset-icon img {
  width: 86%;
  height: 86%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 10px currentColor);
}
.feature-icon.plex-asset img {
  width: 108%;
  height: 108%;
}
.feature-icon.gridos-asset img {
  width: 102%;
  height: 102%;
}
.home-shell .feature-icon.asset-icon img {
  width: 96%;
  height: 96%;
}
.home-shell .feature-icon.plex-asset img {
  width: 122%;
  height: 122%;
}
.home-shell .feature-icon.gridos-asset img {
  width: 114%;
  height: 114%;
}
.footer-socials a {
  overflow: hidden;
  background: transparent !important;
  box-shadow: none !important;
}
.footer-socials img {
  width: 25px;
  height: 25px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 9px currentColor);
}
.footer-socials a:first-child img {
  width: 31px;
  height: 31px;
  border-radius: 50%;
}
.page-hero.asset-hero {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(240px,360px);
  gap: 28px;
  align-items: center;
}
.page-hero.asset-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035), transparent 42%),
    radial-gradient(circle at 82% 45%, rgba(168,85,247,.24), transparent 28%);
}
.page-hero.asset-hero > * {
  position: relative;
  z-index: 1;
}
.page-hero-art {
  display: grid;
  place-items: center;
  min-height: 250px;
}
.page-hero-art img {
  max-width: min(100%, 340px);
  max-height: 310px;
  object-fit: contain;
  filter: drop-shadow(0 0 32px rgba(168,85,247,.38));
}
.page-hero-art.logo-wide img {
  max-width: min(100%, 390px);
}
.page-hero-art.icon-only img {
  max-width: min(76%, 250px);
}
@media (max-width: 980px) {
  .page-hero.asset-hero {
    grid-template-columns: 1fr;
  }
  .page-hero-art {
    min-height: 190px;
  }
}
@media (max-width: 640px) {
  .page-hero-art {
    display: none;
  }
}


/* =========================================================
   FlaroCity Patch 01U - sitewide header/footer unification
   Removes icon glow/backplates and standardizes status blink.
   ========================================================= */
.discord-glyph {
  background: url('../img/icon-discord.svg') center / 18px 18px no-repeat !important;
  filter: none !important;
}
.status-button[data-status="online"] .status-light {
  animation: fcStatusBlinkGreen 1.15s ease-in-out infinite;
}
.status-button[data-status="partial"] .status-light {
  animation: fcStatusBlinkYellow 1.35s ease-in-out infinite;
}
.status-button[data-status="degraded"] .status-light,
.status-button[data-status="offline"] .status-light {
  animation: none;
}
@keyframes fcStatusBlinkGreen {
  0%, 42%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 10px var(--green), 0 0 18px rgba(69,255,106,.34); }
  55% { opacity: .2; transform: scale(.92); box-shadow: 0 0 3px rgba(69,255,106,.2); }
}
@keyframes fcStatusBlinkYellow {
  0%, 42%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 10px var(--yellow), 0 0 18px rgba(255,230,0,.32); }
  55% { opacity: .24; transform: scale(.92); box-shadow: 0 0 3px rgba(255,230,0,.2); }
}
.site-footer .footer-socials {
  gap: 16px;
}
.site-footer .footer-socials a {
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.site-footer .footer-socials a:hover {
  background: transparent !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}
.site-footer .footer-socials img,
.site-footer .footer-socials svg {
  width: 24px !important;
  height: 24px !important;
  display: block;
  object-fit: contain;
  filter: none !important;
  box-shadow: none !important;
}
.site-footer .footer-socials a:first-child img,
.site-footer .footer-socials a:first-child svg {
  width: 22px !important;
  height: 22px !important;
  border-radius: 0 !important;
}


/* =========================================================
   FlaroCity Patch 01W - copy index.html header/footer look
   This keeps index.html unchanged and applies the index-style
   header/footer to every regular content page.
   ========================================================= */
body:not(.mockup-page-body) .site-shell{
  width:min(1920px,calc(100% - 8px)) !important;
  margin:8px auto 18px !important;
}
body:not(.mockup-page-body) .fc-header{
  min-height:82px !important;
  padding:10px 28px !important;
  gap:18px !important;
  border-radius:10px !important;
  border:1px solid rgba(168,85,247,.36) !important;
  background:
    radial-gradient(circle at 6% 50%,rgba(168,85,247,.16),transparent 24%),
    linear-gradient(180deg,rgba(7,11,24,.98),rgba(3,6,15,.96)) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.02),0 0 22px rgba(168,85,247,.12),inset 0 0 24px rgba(255,57,183,.025) !important;
  backdrop-filter:blur(18px) !important;
}
body:not(.mockup-page-body) .brand{
  min-width:330px !important;
  flex:0 0 330px !important;
  gap:10px !important;
}
body:not(.mockup-page-body) .brand-mark{
  width:58px !important;
  height:58px !important;
  filter:drop-shadow(0 0 10px rgba(168,85,247,.44)) !important;
}
body:not(.mockup-page-body) .brand-word{
  width:248px !important;
  max-height:66px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 0 7px rgba(255,57,183,.18)) !important;
}
body:not(.mockup-page-body) .main-nav{
  justify-content:center !important;
}
body:not(.mockup-page-body) .nav-list{
  gap:14px !important;
}
body:not(.mockup-page-body) .nav-link{
  min-height:58px !important;
  padding:0 7px !important;
  font-size:1.02rem !important;
  font-weight:700 !important;
  color:rgba(255,255,255,.84) !important;
}
body:not(.mockup-page-body) .nav-link:hover,
body:not(.mockup-page-body) .nav-link.active{
  color:#fff !important;
}
body:not(.mockup-page-body) .nav-link.active:after{
  left:0 !important;
  right:0 !important;
  bottom:-8px !important;
  height:4px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,#a855f7,#d946ef,#ff7a2f) !important;
  box-shadow:0 0 14px rgba(168,85,247,.62) !important;
}
body:not(.mockup-page-body) .dropdown{
  top:calc(100% + 10px) !important;
  border-radius:14px !important;
  border-color:rgba(168,85,247,.34) !important;
  background:linear-gradient(145deg,rgba(12,15,31,.985),rgba(5,7,18,.98)) !important;
  box-shadow:0 20px 52px rgba(0,0,0,.58),0 0 18px rgba(168,85,247,.16) !important;
}
body:not(.mockup-page-body) .header-actions{
  gap:14px !important;
}
body:not(.mockup-page-body) .status-button,
body:not(.mockup-page-body) .discord-button{
  min-height:48px !important;
  border-radius:8px !important;
  padding:0 22px !important;
  font-size:.98rem !important;
  font-weight:800 !important;
}
body:not(.mockup-page-body) .status-button{
  min-width:218px !important;
  border-color:rgba(69,255,106,.48) !important;
  background:rgba(5,18,14,.48) !important;
  color:#fff !important;
  box-shadow:inset 0 0 0 1px rgba(69,255,106,.06),0 0 16px rgba(69,255,106,.10) !important;
}
body:not(.mockup-page-body) .status-light{
  width:10px !important;
  height:10px !important;
  box-shadow:0 0 10px currentColor !important;
}
body:not(.mockup-page-body) .status-button[data-status="online"] .status-light{
  color:var(--green) !important;
  background:var(--green) !important;
  animation:fcIndexStatusBlinkGreen 1.15s ease-in-out infinite !important;
}
body:not(.mockup-page-body) .status-button[data-status="partial"] .status-light{
  color:var(--yellow) !important;
  background:var(--yellow) !important;
  animation:fcIndexStatusBlinkYellow 1.25s ease-in-out infinite !important;
}
body:not(.mockup-page-body) .status-button[data-status="degraded"] .status-light{
  color:var(--orange) !important;
  background:var(--orange) !important;
  animation:none !important;
}
body:not(.mockup-page-body) .status-button[data-status="offline"] .status-light{
  color:var(--red) !important;
  background:var(--red) !important;
  animation:none !important;
}
@keyframes fcIndexStatusBlinkGreen{
  0%,42%,100%{opacity:1;transform:scale(1);box-shadow:0 0 10px var(--green),0 0 18px rgba(69,255,106,.34)}
  55%{opacity:.18;transform:scale(.9);box-shadow:0 0 3px rgba(69,255,106,.20)}
}
@keyframes fcIndexStatusBlinkYellow{
  0%,42%,100%{opacity:1;transform:scale(1);box-shadow:0 0 10px var(--yellow),0 0 18px rgba(255,230,0,.34)}
  55%{opacity:.22;transform:scale(.9);box-shadow:0 0 3px rgba(255,230,0,.20)}
}
body:not(.mockup-page-body) .discord-button{
  min-width:180px !important;
  border-color:rgba(168,85,247,.78) !important;
  background:linear-gradient(135deg,rgba(168,85,247,.96),rgba(109,40,217,.96)) !important;
  box-shadow:0 0 18px rgba(168,85,247,.22) !important;
}
body:not(.mockup-page-body) .discord-glyph{
  background:url('../img/icon-discord.svg') center / 20px 20px no-repeat !important;
  filter:none !important;
}
body:not(.mockup-page-body) .site-footer{
  min-height:78px !important;
  margin-top:18px !important;
  padding:14px 30px !important;
  grid-template-columns:260px 1fr auto auto !important;
  gap:24px !important;
  border-radius:10px !important;
  border:1px solid rgba(255,255,255,.08) !important;
  background:linear-gradient(180deg,rgba(7,11,24,.94),rgba(3,6,15,.92)) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.015),inset 0 0 18px rgba(255,57,183,.015) !important;
}
body:not(.mockup-page-body) .footer-brand{
  min-width:250px !important;
  gap:10px !important;
}
body:not(.mockup-page-body) .footer-brand img:first-child{
  width:50px !important;
  height:50px !important;
  filter:none !important;
}
body:not(.mockup-page-body) .footer-brand img.footer-wordmark{
  width:165px !important;
  max-height:48px !important;
  object-fit:contain !important;
  filter:none !important;
}
body:not(.mockup-page-body) .footer-links{
  gap:30px !important;
}
body:not(.mockup-page-body) .footer-links a{
  color:rgba(255,255,255,.68) !important;
  font-size:.95rem !important;
}
body:not(.mockup-page-body) .footer-links a:hover{
  color:#fff !important;
}
body:not(.mockup-page-body) .footer-socials{
  gap:24px !important;
}
body:not(.mockup-page-body) .footer-socials a{
  width:28px !important;
  height:28px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}
body:not(.mockup-page-body) .footer-socials a:hover{
  background:transparent !important;
  box-shadow:none !important;
  transform:translateY(-1px) !important;
}
body:not(.mockup-page-body) .footer-socials img,
body:not(.mockup-page-body) .footer-socials svg{
  width:26px !important;
  height:26px !important;
  display:block !important;
  object-fit:contain !important;
  filter:none !important;
  box-shadow:none !important;
}
body:not(.mockup-page-body) .footer-socials a:first-child img,
body:not(.mockup-page-body) .footer-socials a:first-child svg{
  width:24px !important;
  height:24px !important;
  border-radius:0 !important;
}
@media(max-width:1450px){
  body:not(.mockup-page-body) .brand{min-width:300px!important;flex-basis:300px!important}
  body:not(.mockup-page-body) .brand-word{width:220px!important}
  body:not(.mockup-page-body) .nav-list{gap:9px!important}
  body:not(.mockup-page-body) .status-button{min-width:198px!important}
  body:not(.mockup-page-body) .status-button,body:not(.mockup-page-body) .discord-button{padding:0 16px!important}
}
@media(max-width:1120px){
  body:not(.mockup-page-body) .brand{min-width:0!important;flex:0 0 auto!important}
  body:not(.mockup-page-body) .brand-word{width:190px!important}
}

@media(max-width:1450px) and (min-width:981px){
  body:not(.mockup-page-body) .fc-header{
    padding:10px 18px!important;
    gap:12px!important;
  }
  body:not(.mockup-page-body) .brand{
    min-width:235px!important;
    flex-basis:235px!important;
  }
  body:not(.mockup-page-body) .brand-mark{
    width:50px!important;
    height:50px!important;
  }
  body:not(.mockup-page-body) .brand-word{
    width:170px!important;
  }
  body:not(.mockup-page-body) .nav-list{
    gap:3px!important;
  }
  body:not(.mockup-page-body) .nav-link{
    min-height:54px!important;
    padding:0 5px!important;
    font-size:.9rem!important;
  }
  body:not(.mockup-page-body) .header-actions{
    gap:8px!important;
  }
  body:not(.mockup-page-body) .status-button,
  body:not(.mockup-page-body) .discord-button{
    min-height:44px!important;
    padding:0 12px!important;
    font-size:.86rem!important;
  }
  body:not(.mockup-page-body) .status-button{
    min-width:174px!important;
  }
  body:not(.mockup-page-body) .discord-button{
    min-width:152px!important;
  }
}