:root{--dole-blue:#003b73;--dole-blue-2:#07559b;--dole-red:#cf202f;--dole-yellow:#f6c344;--ink:#142235;--muted:#66758a;--surface:#f5f8fc;--border:#dfe7f1;--white:#fff;--shadow:0 18px 45px rgba(18,48,84,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{font-family:Inter,sans-serif;color:var(--ink);background:#fff}.top-strip{background:var(--dole-blue);color:#dbeaff;font-size:.78rem;padding:.45rem 0}.site-header{background:rgba(255,255,255,.96);backdrop-filter:blur(14px);box-shadow:0 8px 28px rgba(16,46,80,.08)}.navbar{padding:.85rem 0}.navbar-brand strong,.navbar-brand small{display:block}.navbar-brand strong{color:var(--dole-blue);font-size:1rem}.navbar-brand small{font-size:.76rem;color:var(--muted)}.brand-seal{width:48px;height:48px;border-radius:50%;background:linear-gradient(145deg,var(--dole-blue),var(--dole-blue-2));border:3px solid var(--dole-yellow);display:grid;place-items:center;color:#fff;font-weight:800;font-size:.72rem;box-shadow:0 8px 20px rgba(0,59,115,.25)}.nav-link{font-weight:600;color:#33465d!important}.nav-link:hover{color:var(--dole-blue)!important}.btn-dole{background:linear-gradient(135deg,var(--dole-blue),var(--dole-blue-2));color:#fff;border:none;border-radius:12px;font-weight:700;padding:.75rem 1.1rem}.btn-dole:hover{color:#fff;transform:translateY(-1px)}.hero-section{position:relative;overflow:hidden;background:linear-gradient(120deg,#002f5f 0%,#07599e 65%,#0d70bb 100%);color:#fff;padding:6.5rem 0 5.5rem}.hero-pattern{position:absolute;inset:0;background-image:radial-gradient(circle at 20% 10%,rgba(255,255,255,.13),transparent 25%),linear-gradient(135deg,transparent 35%,rgba(255,255,255,.04) 35% 37%,transparent 37%);background-size:auto,80px 80px}.eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .8rem;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);font-size:.84rem;font-weight:700;margin-bottom:1.25rem}.hero-section h1{font-size:clamp(2.4rem,5vw,4.5rem);font-weight:800;line-height:1.04;letter-spacing:-.045em;max-width:780px}.hero-lead{font-size:1.1rem;line-height:1.75;color:#e6f1fb;max-width:720px;margin:1.4rem 0 1.7rem}.hero-search{max-width:760px;background:#fff;border-radius:18px;padding:.45rem;display:flex;align-items:center;box-shadow:0 20px 55px rgba(0,25,52,.28)}.hero-search .search-icon{color:var(--dole-blue);font-size:1.15rem;padding:0 .7rem}.hero-search input{min-width:0;flex:1;border:0;outline:0;padding:1rem .25rem;font-size:.98rem}.hero-search button{border:0;background:var(--dole-red);color:#fff;padding:1rem 1.35rem;border-radius:13px;font-weight:700}.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.3rem}.hero-dashboard-card{background:rgba(255,255,255,.96);color:var(--ink);border-radius:24px;padding:1.35rem;box-shadow:0 30px 70px rgba(0,25,52,.35);transform:rotate(1deg)}.dashboard-card-head{display:flex;justify-content:space-between;align-items:center;font-weight:800;padding-bottom:1rem;border-bottom:1px solid var(--border)}.live-dot{font-size:.75rem;color:#237a45;background:#eaf8ef;padding:.4rem .6rem;border-radius:999px}.live-dot i,.status-badge i{display:inline-block;width:7px;height:7px;background:#2ebd69;border-radius:50%;margin-right:.35rem}.overview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin:1rem 0}.overview-grid div{padding:1rem;background:var(--surface);border-radius:16px}.overview-grid strong,.overview-grid span{display:block}.overview-grid strong{font-size:1.65rem;color:var(--dole-blue)}.overview-grid span{font-size:.74rem;color:var(--muted)}.mini-system-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 0;border-top:1px solid #edf1f6}.mini-icon{width:40px;height:40px;border-radius:12px;background:#eaf2fb;color:var(--dole-blue);display:grid;place-items:center}.mini-system-item strong,.mini-system-item small{display:block}.mini-system-item small{color:var(--muted);font-size:.72rem}.trust-bar{background:#fff;box-shadow:0 12px 35px rgba(16,46,80,.08);position:relative;z-index:2}.trust-bar .container{padding-top:1.25rem;padding-bottom:1.25rem}.trust-bar i{color:var(--dole-red);font-size:1.2rem;margin-right:.5rem}.trust-bar span{font-weight:700;font-size:.86rem}.systems-section{padding:6rem 0;background:var(--surface)}.section-kicker{color:var(--dole-red);text-transform:uppercase;letter-spacing:.12em;font-weight:800;font-size:.74rem}.section-heading h2,.info-panel h2{font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-.035em;margin:.45rem 0}.section-heading p{color:var(--muted);margin:0}.result-count{background:#e9f1fa;color:var(--dole-blue);padding:.6rem .85rem;border-radius:999px;font-weight:700;font-size:.82rem}.category-filter{display:flex;gap:.65rem;overflow-x:auto;padding:1.5rem 0 2rem;scrollbar-width:none}.category-filter::-webkit-scrollbar{display:none}.filter-chip{white-space:nowrap;text-decoration:none;color:#40536a;background:#fff;border:1px solid var(--border);padding:.65rem 1rem;border-radius:999px;font-weight:700;font-size:.82rem}.filter-chip:hover,.filter-chip.active{background:var(--dole-blue);color:#fff;border-color:var(--dole-blue)}.system-card{background:#fff;border:1px solid var(--border);border-radius:22px;padding:1.4rem;box-shadow:0 10px 28px rgba(21,56,94,.07);transition:.25s ease;display:flex;flex-direction:column}.system-card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:#bfd1e5}.system-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.15rem}.system-icon{width:56px;height:56px;border-radius:17px;background:linear-gradient(145deg,#e5f0fb,#f7fbff);color:var(--dole-blue);display:grid;place-items:center;font-size:1.45rem;border:1px solid #d6e5f5}.status-badge{font-size:.72rem;font-weight:800;padding:.4rem .62rem;border-radius:999px;background:#edf8f1;color:#257443}.status-badge.offline,.status-badge.maintenance{background:#fff3df;color:#9b6416}.system-category{color:var(--dole-red);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800}.system-card h3{font-size:1.18rem;font-weight:800;margin:.55rem 0 .75rem}.system-card p{color:var(--muted);font-size:.9rem;line-height:1.65;flex:1}.system-card-footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;border-top:1px solid #edf1f6;padding-top:1rem;margin-top:.5rem}.system-card-footer span{font-size:.75rem;font-weight:800;color:#7a889a}.system-card-footer a{color:var(--dole-blue);font-weight:800;text-decoration:none;font-size:.83rem}.empty-state{text-align:center;padding:4rem 1.5rem;background:#fff;border:1px dashed #b9c9dc;border-radius:24px}.empty-state>i{font-size:3rem;color:#8fa5bc}.info-section{padding:5rem 0;background:#fff}.info-panel{background:linear-gradient(120deg,#002f5f,#07599e);border-radius:28px;color:#fff;padding:clamp(2rem,5vw,4rem);display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:center;box-shadow:0 25px 60px rgba(0,48,95,.22)}.info-panel p{color:#d9e9f8;line-height:1.75}.info-features{display:grid;gap:.8rem}.info-features div{display:flex;gap:.75rem;align-items:center;padding:1rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.13);border-radius:14px}.info-features i{color:var(--dole-yellow);font-size:1.2rem}.site-footer{background:#071c32;color:#fff;padding:4rem 0 6rem}.brand-seal-light{background:#fff;color:var(--dole-blue)}.site-footer h6{font-weight:800;margin-bottom:1rem}.site-footer a{display:block;color:#c4d3e1;text-decoration:none;margin:.55rem 0}.footer-copy,.site-footer p{color:#b8c9d8}.site-footer hr{border-color:rgba(255,255,255,.14);margin:2.5rem 0 1.25rem}.mobile-floating-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;width:calc(100% - 24px);max-width:430px;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);border:1px solid rgba(188,205,224,.8);box-shadow:0 12px 38px rgba(10,38,68,.22);border-radius:20px;padding:.55rem;display:grid;grid-template-columns:repeat(4,1fr);z-index:1080}.mobile-floating-nav a{text-decoration:none;color:#6b7b8f;text-align:center;font-size:.66rem;font-weight:700;padding:.4rem;border-radius:12px}.mobile-floating-nav i,.mobile-floating-nav span{display:block}.mobile-floating-nav i{font-size:1.15rem;margin-bottom:.12rem}.mobile-floating-nav a.active,.mobile-floating-nav a:hover{background:#eaf2fb;color:var(--dole-blue)}
@media(max-width:991.98px){body{padding-bottom:82px}.hero-section{padding:4.5rem 0}.hero-dashboard-card{transform:none}.info-panel{grid-template-columns:1fr}.site-footer{padding-bottom:7rem}.navbar-collapse{padding-top:1rem}.navbar-nav{align-items:stretch!important}.navbar-nav .btn{width:100%}}
@media(max-width:575.98px){.hero-section h1{font-size:2.45rem}.hero-search{display:grid;grid-template-columns:auto 1fr;padding:.35rem}.hero-search button{grid-column:1/-1;width:100%}.hero-actions .btn{width:100%}.overview-grid{gap:.4rem}.overview-grid div{padding:.8rem .55rem}.system-card-footer{align-items:flex-end}.trust-bar span{display:block;margin-top:.25rem}.info-panel{border-radius:22px}.systems-section{padding:4rem 0}}

/* Enhanced DOLE header */
.skip-link{position:fixed;left:1rem;top:-5rem;z-index:2000;background:#fff;color:var(--dole-blue);padding:.75rem 1rem;border-radius:0 0 10px 10px;font-weight:800;box-shadow:0 8px 25px rgba(0,0,0,.18)}
.skip-link:focus{top:0}
.site-header{border-bottom:1px solid rgba(208,220,234,.8)}
.government-bar{background:linear-gradient(90deg,#002f5f,#064f8f);color:#e8f2fb;font-size:.72rem;letter-spacing:.015em}
.government-bar-inner{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.government-mark,.government-meta,.portal-status{display:flex;align-items:center;gap:.55rem}
.flag-mark{position:relative;width:25px;height:15px;overflow:hidden;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.flag-mark span{position:absolute;left:0;width:100%;height:50%}
.flag-mark span:first-child{top:0;background:#174b9a}
.flag-mark span:nth-child(2){bottom:0;background:#cf202f}
.flag-mark i{position:absolute;left:0;top:0;width:0;height:0;border-top:7.5px solid transparent;border-bottom:7.5px solid transparent;border-left:0;border-right:11px solid #fff}
.status-pulse{width:7px;height:7px;border-radius:50%;background:#55d48a;box-shadow:0 0 0 4px rgba(85,212,138,.13)}
.site-header .navbar{min-height:82px;padding:.7rem 0;background:rgba(255,255,255,.97)}
.site-header .navbar-brand{display:flex;align-items:center;gap:.85rem;min-width:0;margin-right:1.5rem;padding:0;text-decoration:none}
.site-header .brand-seal{flex:0 0 54px;width:54px;height:54px;border-width:2px;position:relative;overflow:hidden}
.site-header .brand-seal:after{content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.35);border-radius:50%}
.site-header .brand-seal span{position:relative;z-index:1;font-size:.68rem;letter-spacing:.06em}
.brand-copy{min-width:0;line-height:1.15}
.brand-copy span,.brand-copy strong,.brand-copy small{display:block}
.brand-agency{color:var(--dole-red);font-size:.65rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;margin-bottom:.18rem}
.brand-copy strong{font-size:1.04rem;color:var(--dole-blue);letter-spacing:-.01em}
.brand-copy small{color:var(--muted);font-size:.72rem;margin-top:.2rem}
.site-header .navbar-nav{gap:.15rem}
.site-header .nav-link{position:relative;padding:.72rem .85rem!important;border-radius:10px;font-size:.86rem}
.site-header .nav-link:after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:.38rem;height:2px;background:var(--dole-red);transform:scaleX(0);transition:transform .2s ease}
.site-header .nav-link:hover:after,.site-header .nav-link:focus-visible:after{transform:scaleX(1)}
.nav-divider{width:1px;height:28px;background:var(--border);margin:0 .45rem}
.header-search-link,.header-icon-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:var(--dole-blue);border:1px solid var(--border);background:#fff}
.header-search-link{gap:.45rem;min-height:42px;padding:.65rem .8rem;border-radius:11px;font-size:.82rem;font-weight:700}
.header-search-link:hover,.header-icon-button:hover{background:#edf5fc;color:var(--dole-blue);border-color:#bfd3e7}
.header-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.header-icon-button,.site-header .navbar-toggler{width:42px;height:42px;border-radius:11px;padding:0}
.site-header .navbar-toggler{border:1px solid var(--border);box-shadow:none!important;background:#fff;display:grid;place-items:center}
.menu-lines{width:18px;display:grid;gap:4px}
.menu-lines i{display:block;height:2px;background:var(--dole-blue);border-radius:10px;transition:.2s ease}
.site-header .navbar-toggler[aria-expanded="true"] .menu-lines i:first-child{transform:translateY(6px) rotate(45deg)}
.site-header .navbar-toggler[aria-expanded="true"] .menu-lines i:nth-child(2){opacity:0}
.site-header .navbar-toggler[aria-expanded="true"] .menu-lines i:last-child{transform:translateY(-6px) rotate(-45deg)}

@media(max-width:991.98px){
  html{scroll-padding-top:96px}
  .government-bar{display:none}
  .site-header .navbar{min-height:72px;padding:.55rem 0}
  .site-header .brand-seal{flex-basis:46px;width:46px;height:46px}
  .brand-agency{display:none!important}
  .brand-copy strong{font-size:.93rem}
  .brand-copy small{font-size:.66rem;white-space:nowrap}
  .site-header .navbar-collapse{margin-top:.65rem;padding:.7rem;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 18px 35px rgba(16,46,80,.12)}
  .site-header .navbar-nav{gap:.25rem}
  .site-header .nav-link{display:flex;align-items:center;gap:.75rem;padding:.8rem .85rem!important;background:#f8fafc}
  .site-header .nav-link:after{display:none}
  .site-header .nav-link i{width:22px;color:var(--dole-blue);font-size:1rem}
  .site-header .navbar-nav .btn{margin-top:.35rem}
}
@media(max-width:420px){
  .site-header .navbar-brand{gap:.65rem;margin-right:.5rem}
  .site-header .brand-seal{flex-basis:42px;width:42px;height:42px}
  .brand-copy strong{font-size:.84rem}
  .brand-copy small{font-size:.59rem}
  .header-icon-button{display:none}
}

/* =========================================================
   MOVING ANIMATIONS
   ========================================================= */

/* Animated background shapes for hero */
.hero-section::before,
.hero-section::after{
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    z-index:0;
}

.hero-section::before{
    width:360px;
    height:360px;
    top:-130px;
    right:-90px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    animation:heroOrbOne 9s ease-in-out infinite alternate;
}

.hero-section::after{
    width:430px;
    height:430px;
    left:-170px;
    bottom:-220px;
    background:rgba(246,195,68,.09);
    border:1px solid rgba(246,195,68,.12);
    animation:heroOrbTwo 12s ease-in-out infinite alternate;
}

.hero-pattern{
    z-index:0;
    animation:heroPatternMove 22s linear infinite;
}

.hero-section .container{
    z-index:1;
}

/* Hero entrance animations */
.hero-section .eyebrow{
    animation:fadeSlideUp .75s ease both;
}

.hero-section h1{
    animation:fadeSlideUp .85s .08s ease both;
}

.hero-section .hero-lead{
    animation:fadeSlideUp .85s .16s ease both;
}

.hero-section .hero-search{
    animation:fadeSlideUp .85s .24s ease both;
}

.hero-section .hero-actions{
    animation:fadeSlideUp .85s .32s ease both;
}

/* Eyebrow icon pulse */
.eyebrow i{
    animation:iconPulse 2s ease-in-out infinite;
}

/* Search box breathing glow */
.hero-search{
    transition:transform .3s ease,box-shadow .3s ease;
}

.hero-search:focus-within{
    transform:translateY(-3px);
    box-shadow:
        0 26px 65px rgba(0,25,52,.34),
        0 0 0 5px rgba(246,195,68,.2);
}

/* Animated search button shine */
.hero-search button,
.btn-dole,
.hero-actions .btn{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.hero-search button::before,
.btn-dole::before,
.hero-actions .btn::before{
    content:"";
    position:absolute;
    top:-40%;
    bottom:-40%;
    left:-75%;
    width:36%;
    background:rgba(255,255,255,.28);
    transform:skewX(-20deg);
    transition:left .7s ease;
    z-index:-1;
}

.hero-search button:hover::before,
.btn-dole:hover::before,
.hero-actions .btn:hover::before{
    left:135%;
}

.hero-search button:hover,
.btn-dole:hover,
.hero-actions .btn:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 28px rgba(0,35,75,.22);
}

.hero-search button:active,
.btn-dole:active,
.hero-actions .btn:active{
    transform:translateY(0) scale(.98);
}

/* Floating dashboard card */
.hero-dashboard-card{
    animation:dashboardEnter 1s .2s ease both,
              dashboardFloat 5s 1.2s ease-in-out infinite;
    transition:box-shadow .35s ease;
}

.hero-dashboard-card:hover{
    box-shadow:0 38px 85px rgba(0,25,52,.42);
}

/* Live status pulse */
.live-dot i,
.status-badge i,
.status-pulse{
    animation:statusPulse 2s ease-out infinite;
}

/* Stats hover movement */
.overview-grid div{
    position:relative;
    overflow:hidden;
    transition:transform .3s ease,box-shadow .3s ease;
}

.overview-grid div::after{
    content:"";
    position:absolute;
    width:68px;
    height:68px;
    right:-28px;
    bottom:-28px;
    border-radius:50%;
    background:rgba(7,85,155,.07);
    transition:transform .35s ease;
}

.overview-grid div:hover{
    transform:translateY(-5px);
    box-shadow:0 12px 24px rgba(18,48,84,.12);
}

.overview-grid div:hover::after{
    transform:scale(1.5);
}

/* Mini system item slide */
.mini-system-item{
    transition:padding-left .3s ease,background .3s ease;
}

.mini-system-item:hover{
    padding-left:.4rem;
}

.mini-icon{
    transition:transform .3s ease,background .3s ease,color .3s ease;
}

.mini-system-item:hover .mini-icon{
    transform:rotate(-6deg) scale(1.08);
    background:var(--dole-blue);
    color:#fff;
}

/* Trust bar icon motion */
.trust-bar .row>div{
    transition:transform .3s ease;
}

.trust-bar .row>div:hover{
    transform:translateY(-5px);
}

.trust-bar i{
    display:inline-block;
    transition:transform .3s ease;
}

.trust-bar .row>div:hover i{
    transform:scale(1.15) rotate(-8deg);
}

/* Category chips */
.filter-chip{
    position:relative;
    overflow:hidden;
    transition:transform .25s ease,box-shadow .25s ease,color .25s ease,background .25s ease;
}

.filter-chip:hover,
.filter-chip.active{
    transform:translateY(-3px);
    box-shadow:0 10px 22px rgba(0,59,115,.18);
}

/* Staggered system card entrance */
.system-card{
    animation:cardReveal .7s ease both;
}

.systems-section .row>div:nth-child(1) .system-card{animation-delay:.04s}
.systems-section .row>div:nth-child(2) .system-card{animation-delay:.10s}
.systems-section .row>div:nth-child(3) .system-card{animation-delay:.16s}
.systems-section .row>div:nth-child(4) .system-card{animation-delay:.22s}
.systems-section .row>div:nth-child(5) .system-card{animation-delay:.28s}
.systems-section .row>div:nth-child(6) .system-card{animation-delay:.34s}
.systems-section .row>div:nth-child(7) .system-card{animation-delay:.40s}
.systems-section .row>div:nth-child(8) .system-card{animation-delay:.46s}
.systems-section .row>div:nth-child(9) .system-card{animation-delay:.52s}

/* Card glow and icon movement */
.system-card{
    position:relative;
    overflow:hidden;
}

.system-card::before{
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    top:-75px;
    right:-75px;
    border-radius:50%;
    background:rgba(7,85,155,.06);
    transition:transform .45s ease,background .3s ease;
    pointer-events:none;
}

.system-card:hover::before{
    transform:scale(1.55);
    background:rgba(7,85,155,.10);
}

.system-icon{
    transition:transform .3s ease,background .3s ease,color .3s ease,box-shadow .3s ease;
}

.system-card:hover .system-icon{
    transform:rotate(-7deg) scale(1.07);
    background:linear-gradient(145deg,var(--dole-blue),var(--dole-blue-2));
    color:#fff;
    box-shadow:0 12px 24px rgba(0,59,115,.22);
}

.system-card-footer a{
    display:inline-flex;
    align-items:center;
    gap:.3rem;
}

.system-card-footer a i{
    transition:transform .25s ease;
}

.system-card-footer a:hover i{
    transform:translate(4px,-4px);
}

/* Info panel moving shapes */
.info-panel{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.info-panel::before{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    top:-130px;
    right:-100px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    z-index:-1;
    animation:infoOrb 8s ease-in-out infinite alternate;
}

.info-panel::after{
    content:"";
    position:absolute;
    width:340px;
    height:340px;
    left:-150px;
    bottom:-180px;
    border-radius:50%;
    background:rgba(246,195,68,.08);
    z-index:-1;
}

.info-features div{
    transition:transform .3s ease,background .3s ease,border-color .3s ease;
}

.info-features div:hover{
    transform:translateX(8px);
    background:rgba(255,255,255,.16);
    border-color:rgba(255,255,255,.24);
}

.info-features i{
    transition:transform .3s ease;
}

.info-features div:hover i{
    transform:scale(1.16) rotate(-8deg);
}

/* Header logo and navigation animations */
.brand-seal{
    transition:transform .35s ease,box-shadow .35s ease;
}

.navbar-brand:hover .brand-seal{
    transform:rotate(-7deg) scale(1.06);
    box-shadow:0 14px 28px rgba(0,59,115,.32);
}

.site-header .nav-link{
    transition:transform .25s ease,color .25s ease,background .25s ease;
}

.site-header .nav-link:hover{
    transform:translateY(-2px);
}

/* Floating mobile navigation */
.mobile-floating-nav{
    animation:mobileNavEnter .7s ease both;
}

.mobile-floating-nav a{
    transition:transform .25s ease,background .25s ease,color .25s ease;
}

.mobile-floating-nav a:hover,
.mobile-floating-nav a.active{
    transform:translateY(-3px);
}

.mobile-floating-nav i{
    transition:transform .25s ease;
}

.mobile-floating-nav a:hover i,
.mobile-floating-nav a.active i{
    transform:scale(1.12);
}

/* Scroll animation helper classes */
.reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .8s ease,transform .8s ease;
}

.reveal.is-visible{
    opacity:1;
    transform:translateY(0);
}

.reveal-left{
    opacity:0;
    transform:translateX(-35px);
    transition:opacity .8s ease,transform .8s ease;
}

.reveal-right{
    opacity:0;
    transform:translateX(35px);
    transition:opacity .8s ease,transform .8s ease;
}

.reveal-left.is-visible,
.reveal-right.is-visible{
    opacity:1;
    transform:translateX(0);
}

/* Keyframes */
@keyframes fadeSlideUp{
    from{
        opacity:0;
        transform:translateY(28px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes heroOrbOne{
    from{
        transform:translate3d(0,0,0) scale(1);
    }
    to{
        transform:translate3d(-38px,28px,0) scale(1.1);
    }
}

@keyframes heroOrbTwo{
    from{
        transform:translate3d(0,0,0) scale(1);
    }
    to{
        transform:translate3d(45px,-34px,0) scale(1.12);
    }
}

@keyframes heroPatternMove{
    from{
        background-position:0 0,0 0;
    }
    to{
        background-position:60px 35px,160px 160px;
    }
}

@keyframes iconPulse{
    0%,100%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.16);
    }
}

@keyframes dashboardEnter{
    from{
        opacity:0;
        transform:translateY(42px) rotate(5deg) scale(.96);
    }
    to{
        opacity:1;
        transform:translateY(0) rotate(1deg) scale(1);
    }
}

@keyframes dashboardFloat{
    0%,100%{
        transform:translateY(0) rotate(1deg);
    }
    50%{
        transform:translateY(-10px) rotate(.2deg);
    }
}

@keyframes statusPulse{
    0%{
        box-shadow:0 0 0 0 rgba(46,189,105,.42);
    }
    75%{
        box-shadow:0 0 0 8px rgba(46,189,105,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(46,189,105,0);
    }
}

@keyframes cardReveal{
    from{
        opacity:0;
        transform:translateY(26px) scale(.98);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes infoOrb{
    from{
        transform:translate(0,0) scale(1);
    }
    to{
        transform:translate(-35px,28px) scale(1.1);
    }
}

@keyframes mobileNavEnter{
    from{
        opacity:0;
        transform:translate(-50%,28px) scale(.96);
    }
    to{
        opacity:1;
        transform:translate(-50%,0) scale(1);
    }
}

@media(max-width:991.98px){
    .hero-dashboard-card{
        animation:dashboardEnter 1s .2s ease both,
                  dashboardFloatMobile 5s 1.2s ease-in-out infinite;
    }

    @keyframes dashboardFloatMobile{
        0%,100%{
            transform:translateY(0);
        }
        50%{
            transform:translateY(-8px);
        }
    }
}

/* Respect accessibility preferences */
@media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
        scroll-behavior:auto!important;
    }
}
.hero-floating-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    padding: 1rem;
    animation: heroImageEnter 1s ease both;
}

.hero-floating-image::before,
.hero-floating-image::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.hero-floating-image::before {
    width: 290px;
    height: 290px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    animation: imageOrbOne 7s ease-in-out infinite alternate;
}

.hero-floating-image::after {
    width: 220px;
    height: 220px;
    right: 5%;
    bottom: 4%;
    background: rgba(246, 195, 68, 0.12);
    filter: blur(2px);
    animation: imageOrbTwo 9s ease-in-out infinite alternate;
}

.hero-portal-image {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    max-width: 510px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 30px 45px rgba(0, 22, 48, 0.35));
    animation: heroImageFloat 5s ease-in-out infinite;
    transition:
        transform 0.4s ease,
        filter 0.4s ease;
}

.hero-floating-image:hover .hero-portal-image {
    transform: translateY(-10px) scale(1.04) rotate(-1deg);
    filter: drop-shadow(0 40px 55px rgba(0, 22, 48, 0.45));
}

@keyframes heroImageEnter {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.94);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes heroImageFloat {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-14px) rotate(1deg);
    }
}

@keyframes imageOrbOne {
    from {
        transform: translate(-20px, 10px) scale(1);
    }

    to {
        transform: translate(25px, -20px) scale(1.12);
    }
}

@keyframes imageOrbTwo {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(-30px, -25px) scale(1.15);
    }
}

@media (max-width: 991.98px) {
    .hero-floating-image {
        min-height: 340px;
        margin-top: 2rem;
    }

    .hero-portal-image {
        max-width: 430px;
    }
}

@media (max-width: 575.98px) {
    .hero-floating-image {
        min-height: 280px;
        padding: 0;
    }

    .hero-portal-image {
        max-width: 330px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-floating-image,
    .hero-floating-image::before,
    .hero-floating-image::after,
    .hero-portal-image {
        animation: none !important;
    }
}

/* =========================================================
   SYSTEM CARD IMAGE LAYOUT
   Conflict-safe overrides for existing .system-card styles
   Use: <article class="system-card system-card-with-image h-100">
   ========================================================= */

.system-card.system-card-with-image{
    padding:0;
    overflow:hidden;
    position:relative;
    isolation:isolate;
}

/* Disable the old decorative circle so it does not overlap the image */
.system-card.system-card-with-image::before{
    display:none;
}

.system-card-with-image .system-card-image{
    position:relative;
    width:100%;
    height:190px;
    flex:0 0 190px;
    overflow:hidden;
    background:
        radial-gradient(circle at 25% 20%,rgba(255,255,255,.16),transparent 34%),
        linear-gradient(135deg,var(--dole-blue),var(--dole-blue-2));
}

.system-card-with-image .system-card-image::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:linear-gradient(
        to bottom,
        rgba(0,31,65,.02) 40%,
        rgba(0,31,65,.26) 100%
    );
}

.system-card-with-image .system-card-image img{
    position:relative;
    z-index:1;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transition:transform .55s ease,filter .55s ease;
}

.system-card-with-image:hover .system-card-image img{
    transform:scale(1.07);
    filter:brightness(.92);
}

.system-card-with-image .system-image-fallback{
    position:absolute;
    inset:0;
    z-index:0;
    display:grid;
    place-items:center;
    color:rgba(255,255,255,.96);
    font-size:4rem;
}

/* Hide fallback only when an actual image is present */
.system-card-with-image .system-card-image.has-image .system-image-fallback{
    display:none;
}

.system-card-with-image .system-card-image.image-error .system-image-fallback{
    display:grid;
}

.system-card-with-image .system-card-image .status-badge{
    position:absolute;
    top:1rem;
    right:1rem;
    z-index:4;
    margin:0;
    box-shadow:0 8px 22px rgba(0,31,65,.22);
}

.system-card-with-image .system-card-body{
    display:flex;
    flex:1 1 auto;
    flex-direction:column;
    padding:1.4rem 1.4rem 0;
}

.system-card-with-image .system-category{
    display:block;
}

.system-card-with-image h3{
    margin:.55rem 0 .75rem;
}

.system-card-with-image .system-card-body p{
    flex:1;
    margin-bottom:1rem;
}

.system-card-with-image .system-card-footer{
    margin:0 1.4rem;
    padding:1rem 0 1.4rem;
}

.system-card-with-image .system-card-footer a{
    display:inline-flex;
    align-items:center;
    gap:.3rem;
}

.system-card-with-image .system-card-footer a i{
    transition:transform .25s ease;
}

.system-card-with-image .system-card-footer a:hover i{
    transform:translate(4px,-4px);
}

@media(max-width:575.98px){
    .system-card-with-image .system-card-image{
        height:175px;
        flex-basis:175px;
    }

    .system-card-with-image .system-card-body{
        padding:1.2rem 1.2rem 0;
    }

    .system-card-with-image .system-card-footer{
        margin:0 1.2rem;
        padding:1rem 0 1.2rem;
    }
}
/* Logo image wrappers used by the updated layouts */
.brand-logo-wrapper,.footer-logo-wrapper{flex:0 0 auto;display:grid;place-items:center}
.brand-logo-image,.footer-logo-image{display:block;object-fit:contain}
.brand-logo-image{width:54px;height:54px}
.footer-logo-image{width:58px;height:58px}
@media(max-width:991.98px){.brand-logo-image{width:46px;height:46px}}
@media(max-width:420px){.brand-logo-image{width:42px;height:42px}}
/* =========================================================
   SYSTEMS-FIRST HOMEPAGE
   ========================================================= */

.portal-dashboard {
    position: relative;
    overflow: hidden;
    padding: 2.6rem 0 2.2rem;
    background:
        radial-gradient(
            circle at 92% 10%,
            rgba(246, 195, 68, 0.2),
            transparent 25%
        ),
        linear-gradient(
            125deg,
            #002f5f 0%,
            #07559b 65%,
            #0869ad 100%
        );
    color: #fff;
}

.portal-dashboard::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    right: -170px;
    bottom: -250px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
}

.portal-dashboard-header {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(440px, 1fr);
    align-items: center;
    gap: 2rem;
}

.portal-dashboard h1 {
    margin: 0.45rem 0 0.7rem;
    font-size: clamp(2rem, 4vw, 3.35rem);
    font-weight: 800;
    letter-spacing: -0.04em;
}

.portal-dashboard p {
    max-width: 700px;
    margin: 0;
    color: #dcecf9;
    line-height: 1.7;
}

.portal-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.portal-summary-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.portal-summary-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.13);
    color: var(--dole-yellow);
    font-size: 1.1rem;
}

.portal-summary-item strong,
.portal-summary-item span {
    display: block;
}

.portal-summary-item strong {
    font-size: 1.3rem;
    line-height: 1;
}

.portal-summary-item div > span {
    margin-top: 0.3rem;
    color: #d8e8f6;
    font-size: 0.7rem;
}

.systems-section-first {
    padding-top: 2rem;
}

.system-search-panel {
    position: relative;
    z-index: 5;
    margin-bottom: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(16, 46, 80, 0.1);
}

.system-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 280px) auto;
    gap: 0.75rem;
}

.system-search-field,
.system-category-select {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 52px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #f8fafc;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.system-search-field:focus-within,
.system-category-select:focus-within {
    border-color: var(--dole-blue-2);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(7, 85, 155, 0.1);
}

.system-search-field > i,
.system-category-select > i {
    flex: 0 0 auto;
    margin-left: 1rem;
    color: var(--dole-blue);
}

.system-search-field input,
.system-category-select select {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font-size: 0.9rem;
}

.system-search-field input {
    padding: 0.85rem 2.75rem 0.85rem 0.75rem;
}

.system-category-select select {
    padding: 0.85rem 2rem 0.85rem 0.7rem;
    cursor: pointer;
}

.search-clear-button {
    position: absolute;
    right: 0.8rem;
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border-radius: 9px;
    color: #6c7b8d;
    text-decoration: none;
}

.search-clear-button:hover {
    background: #e9f1fa;
    color: var(--dole-blue);
}

.system-search-button {
    min-width: 130px;
    border-radius: 14px;
}

.search-panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0.25rem 0;
    color: var(--muted);
    font-size: 0.8rem;
}

.search-result-information strong,
.search-result-information span {
    color: var(--dole-blue);
}

.clear-all-filters {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--dole-red);
    font-weight: 700;
    text-decoration: none;
}

.clear-all-filters:hover {
    color: #aa1724;
}

.category-filter {
    padding-top: 1rem;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.directory-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.4rem;
}

.directory-section-heading h2 {
    margin: 0.35rem 0 0;
    font-size: clamp(1.55rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.directory-section-heading p {
    margin: 0.45rem 0 0;
    color: var(--muted);
}

.directory-heading-note,
.directory-view-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
}

.featured-system-section {
    margin: 0.75rem 0 3rem;
    padding: 1.4rem;
    border: 1px solid var(--border);
    border-radius: 24px;
    background:
        linear-gradient(
            140deg,
            rgba(255, 255, 255, 0.98),
            rgba(235, 244, 252, 0.95)
        );
}

.featured-system-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.featured-system-item {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid #d8e5f1;
    border-radius: 16px;
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.featured-system-item:hover {
    transform: translateY(-4px);
    border-color: #b8cee3;
    color: var(--ink);
    box-shadow: 0 14px 30px rgba(20, 55, 92, 0.11);
}

.featured-system-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #eaf2fb;
    color: var(--dole-blue);
    font-size: 1.15rem;
}

.featured-system-copy {
    min-width: 0;
    flex: 1;
}

.featured-system-copy small,
.featured-system-copy strong,
.featured-system-copy span {
    display: block;
}

.featured-system-copy small {
    margin-bottom: 0.2rem;
    color: var(--dole-red);
    font-size: 0.63rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.featured-system-copy strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 0.85rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.featured-system-copy span {
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.68rem;
}

.featured-system-arrow {
    flex: 0 0 auto;
    color: var(--dole-blue);
    transition: transform 0.25s ease;
}

.featured-system-item:hover .featured-system-arrow {
    transform: translate(3px, -3px);
}

.systems-list-heading {
    margin-top: 1rem;
}

.advanced-system-card {
    min-height: 315px;
    padding: 0;
}

.system-card-accent {
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--dole-blue),
        var(--dole-blue-2),
        var(--dole-yellow)
    );
}

.advanced-system-card .system-card-top {
    margin: 0;
    padding: 1.25rem 1.25rem 0;
}

.advanced-system-card .system-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1rem 1.25rem 0;
}

.system-card-labels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.system-short-name {
    padding: 0.25rem 0.45rem;
    border-radius: 7px;
    background: #eff4f9;
    color: #6c7c8f;
    font-size: 0.62rem;
    font-weight: 800;
}

.advanced-system-card h3 {
    margin: 0.75rem 0 0.65rem;
}

.advanced-system-card p {
    margin-bottom: 1rem;
}

.advanced-system-card .system-card-footer {
    margin: 0 1.25rem;
    padding: 1rem 0 1.25rem;
}

.open-system-link {
    width: 100%;
    justify-content: space-between;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    background: #edf5fc;
}

.open-system-link:hover {
    background: var(--dole-blue);
    color: #fff;
}

.system-link-unavailable {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--muted);
    font-size: 0.8rem;
}

.advanced-empty-state {
    max-width: 760px;
    margin: 1rem auto 0;
}

.empty-state-icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    border-radius: 22px;
    background: #eaf2fb;
    color: var(--dole-blue);
    font-size: 1.8rem;
}

.portal-benefits {
    padding: 0 0 5rem;
    background: var(--surface);
}

.portal-benefits-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 2.5rem;
    padding: clamp(2rem, 5vw, 3.5rem);
    border-radius: 26px;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(246, 195, 68, 0.14),
            transparent 24%
        ),
        linear-gradient(125deg, #002f5f, #07599e);
    color: #fff;
    box-shadow: 0 25px 55px rgba(0, 48, 95, 0.2);
}

.portal-benefits-heading h2 {
    margin: 0.55rem 0 0.9rem;
    font-size: clamp(1.8rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.035em;
}

.portal-benefits-heading p {
    margin: 0;
    color: #d9e8f6;
    line-height: 1.75;
}

.portal-benefits-grid {
    display: grid;
    gap: 0.85rem;
}

.portal-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.1);
}

.portal-benefit-item > i {
    color: var(--dole-yellow);
    font-size: 1.25rem;
}

.portal-benefit-item strong,
.portal-benefit-item span {
    display: block;
}

.portal-benefit-item span {
    margin-top: 0.3rem;
    color: #dbe9f6;
    font-size: 0.8rem;
    line-height: 1.55;
}

@media (max-width: 991.98px) {
    .portal-dashboard-header {
        grid-template-columns: 1fr;
    }

    .system-search-form {
        grid-template-columns: 1fr 220px;
    }

    .system-search-button {
        grid-column: 1 / -1;
    }

    .featured-system-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portal-benefits-panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .portal-dashboard {
        padding: 2rem 0;
    }

    .portal-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .portal-summary-item {
        display: block;
        text-align: center;
    }

    .portal-summary-icon {
        margin: 0 auto 0.65rem;
    }

    .system-search-form {
        grid-template-columns: 1fr;
    }

    .system-search-button {
        grid-column: auto;
    }

    .featured-system-grid {
        grid-template-columns: 1fr;
    }

    .directory-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 575.98px) {
    .portal-dashboard h1 {
        font-size: 2rem;
    }

    .portal-summary {
        gap: 0.45rem;
    }

    .portal-summary-item {
        padding: 0.75rem 0.45rem;
    }

    .portal-summary-icon {
        width: 36px;
        height: 36px;
    }

    .portal-summary-item strong {
        font-size: 1.05rem;
    }

    .portal-summary-item div > span {
        font-size: 0.58rem;
    }

    .system-search-panel {
        padding: 0.75rem;
        border-radius: 16px;
    }

    .search-panel-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .featured-system-section {
        padding: 1rem;
    }
}
/* =========================================================
   DISABLED SYSTEM STATES
   ========================================================= */

.system-card-disabled {
    cursor: not-allowed;
    opacity: 0.72;
    filter: grayscale(0.18);
    box-shadow: none;
}

.system-card-disabled:hover {
    transform: none;
    border-color: var(--border);
    box-shadow: none;
}

.system-card-disabled .system-icon {
    background: #eef2f6;
    color: #7b8794;
}

.system-card-disabled:hover .system-icon {
    transform: none;
    background: #eef2f6;
    color: #7b8794;
    box-shadow: none;
}

.system-card-disabled .system-card-accent {
    background: linear-gradient(
        90deg,
        #9aa6b2,
        #c2cad3
    );
}

.system-unavailable-notice {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ead7a8;
    border-radius: 10px;
    background: #fff8e8;
}

.system-unavailable-notice small {
    display: block;
    margin-top: 0.35rem;
    color: #7d6a3d;
    font-size: 0.72rem;
    line-height: 1.45;
}

.system-link-unavailable {
    color: #9a6517;
    font-weight: 800;
}

.featured-system-disabled {
    cursor: not-allowed;
    opacity: 0.72;
    background: #f3f5f7;
    filter: grayscale(0.15);
}

.featured-system-disabled:hover {
    transform: none;
    border-color: #d8e5f1;
    box-shadow: none;
}

.featured-system-disabled .featured-system-icon {
    background: #e5e9ee;
    color: #7b8794;
}

.featured-system-disabled .featured-system-arrow {
    color: #8a95a1;
}

.featured-status-note {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    color: #8a6a27 !important;
    font-size: 0.68rem !important;
    line-height: 1.35;
}

/* =========================================================
   MODERN PORTAL OVERRIDES
   Compact header, advanced cards, smooth animations
   ========================================================= */

:root {
    --portal-radius-sm: 12px;
    --portal-radius-md: 18px;
    --portal-radius-lg: 26px;
    --portal-shadow-soft: 0 12px 32px rgba(11, 43, 77, 0.08);
    --portal-shadow-hover: 0 22px 52px rgba(11, 43, 77, 0.16);
    --portal-glass: rgba(255, 255, 255, 0.82);
    --portal-transition: 260ms cubic-bezier(.2, .8, .2, 1);
}

body {
    background:
        radial-gradient(circle at top right, rgba(7, 85, 155, 0.055), transparent 32rem),
        #f7f9fc;
}

/* Compact systems-first banner */
.portal-dashboard {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 1.45rem 0 1.25rem;
    background:
        radial-gradient(circle at 88% 18%, rgba(246, 195, 68, 0.16), transparent 22rem),
        linear-gradient(120deg, #002f5f 0%, #07559b 62%, #0b69ad 100%);
}

.portal-dashboard::before,
.portal-dashboard::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

.portal-dashboard::before {
    width: 220px;
    height: 220px;
    top: -115px;
    right: 8%;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.06);
    animation: portalOrbDrift 9s ease-in-out infinite alternate;
}

.portal-dashboard::after {
    width: 170px;
    height: 170px;
    left: -70px;
    bottom: -105px;
    background: rgba(246, 195, 68, 0.09);
    animation: portalOrbDriftReverse 11s ease-in-out infinite alternate;
}

.portal-dashboard-header {
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
    gap: 1.35rem;
}

.portal-dashboard .section-kicker {
    color: #ffd875;
    font-size: 0.66rem;
    letter-spacing: 0.15em;
}

.portal-dashboard h1 {
    margin: 0.25rem 0 0.4rem;
    font-size: clamp(1.55rem, 3vw, 2.35rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
    animation: portalTextIn .55s ease both;
}

.portal-dashboard p {
    max-width: 580px;
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(236, 246, 255, 0.88);
    animation: portalTextIn .65s .05s ease both;
}

.portal-summary {
    gap: 0.6rem;
}

.portal-summary-item {
    min-height: 78px;
    padding: 0.75rem;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition:
        transform var(--portal-transition),
        background var(--portal-transition),
        border-color var(--portal-transition);
    animation: portalCardIn .6s ease both;
}

.portal-summary-item:nth-child(2) { animation-delay: .06s; }
.portal-summary-item:nth-child(3) { animation-delay: .12s; }

.portal-summary-item:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.24);
}

.portal-summary-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 11px;
    transition:
        transform var(--portal-transition),
        background var(--portal-transition);
}

.portal-summary-item:hover .portal-summary-icon {
    transform: rotate(-7deg) scale(1.08);
    background: rgba(255, 255, 255, 0.19);
}

.portal-summary-item strong {
    font-size: 1.15rem;
}

.portal-summary-item div > span {
    font-size: 0.64rem;
}

/* Search and filter */
.systems-section-first {
    padding-top: 1.2rem;
    background:
        linear-gradient(180deg, rgba(255,255,255,.88), rgba(247,249,252,.98));
}

.system-search-panel {
    margin-top: -0.25rem;
    padding: 0.8rem;
    border: 1px solid rgba(210, 222, 235, 0.9);
    border-radius: var(--portal-radius-md);
    background: var(--portal-glass);
    backdrop-filter: blur(18px);
    box-shadow: var(--portal-shadow-soft);
    animation: searchPanelIn .65s ease both;
}

.system-search-field,
.system-category-select {
    min-height: 48px;
    border-radius: 13px;
    background: rgba(248, 250, 252, 0.92);
}

.system-search-button {
    min-height: 48px;
    border-radius: 13px;
    box-shadow: 0 10px 22px rgba(0, 59, 115, 0.17);
}

.system-search-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0, 59, 115, 0.23);
}

.category-filter {
    gap: 0.55rem;
    padding: 0.9rem 0 1.35rem;
}

.filter-chip {
    padding: 0.58rem 0.9rem;
    border-radius: 12px;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(12px);
    box-shadow: 0 5px 16px rgba(16, 46, 80, 0.045);
}

.filter-chip:hover,
.filter-chip.active {
    transform: translateY(-3px);
    box-shadow: 0 11px 24px rgba(0, 59, 115, 0.16);
}

/* Featured systems */
.featured-system-section {
    border-radius: var(--portal-radius-lg);
    background:
        radial-gradient(circle at 100% 0%, rgba(7,85,155,.08), transparent 18rem),
        rgba(255,255,255,.88);
    backdrop-filter: blur(18px);
    box-shadow: var(--portal-shadow-soft);
}

.featured-system-item {
    border-radius: 15px;
    box-shadow: 0 7px 18px rgba(20,55,92,.055);
}

.featured-system-item:hover {
    transform: translateY(-5px) scale(1.012);
    box-shadow: var(--portal-shadow-hover);
}

/* Modern system cards */
.system-card.advanced-system-card {
    border-radius: 21px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.99), rgba(252,253,255,.98));
    box-shadow: var(--portal-shadow-soft);
    transition:
        transform var(--portal-transition),
        box-shadow var(--portal-transition),
        border-color var(--portal-transition);
    animation: modernCardReveal .58s ease both;
}

.system-directory-grid > div:nth-child(2) .system-card { animation-delay: .05s; }
.system-directory-grid > div:nth-child(3) .system-card { animation-delay: .10s; }
.system-directory-grid > div:nth-child(4) .system-card { animation-delay: .15s; }
.system-directory-grid > div:nth-child(5) .system-card { animation-delay: .20s; }
.system-directory-grid > div:nth-child(6) .system-card { animation-delay: .25s; }

.system-card.advanced-system-card:hover {
    transform: translateY(-7px);
    border-color: rgba(7,85,155,.27);
    box-shadow: var(--portal-shadow-hover);
}

.system-card-accent {
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--dole-blue),
        #0a77c8,
        var(--dole-yellow)
    );
    background-size: 180% 100%;
    animation: accentFlow 5s linear infinite;
}

.system-icon {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.open-system-link {
    border: 1px solid rgba(7,85,155,.08);
    transition:
        transform var(--portal-transition),
        background var(--portal-transition),
        color var(--portal-transition),
        box-shadow var(--portal-transition);
}

.open-system-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0,59,115,.15);
}

/* Disabled and development states */
.system-card-disabled {
    position: relative;
    cursor: not-allowed;
    opacity: 0.76;
    filter: saturate(.78);
    box-shadow: var(--portal-shadow-soft);
}

.system-card-disabled::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 10px,
            rgba(255,255,255,.11) 10px,
            rgba(255,255,255,.11) 20px
        );
}

.system-card-disabled:hover {
    transform: none !important;
    border-color: var(--border) !important;
    box-shadow: var(--portal-shadow-soft) !important;
}

.system-card-disabled:hover .system-icon {
    transform: none;
    background: #eef2f6;
    color: #7b8794;
    box-shadow: none;
}

.system-card-disabled .system-card-accent {
    background: linear-gradient(90deg, #9aa6b2, #c2cad3);
    animation: none;
}

.system-unavailable-notice {
    width: 100%;
    padding: 0.75rem 0.8rem;
    border: 1px solid #ead7a8;
    border-radius: 11px;
    background: linear-gradient(135deg, #fff9ec, #fff4d8);
}

.system-unavailable-notice small {
    display: block;
    margin-top: 0.25rem;
    color: #7d642c;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35;
}

.system-link-unavailable {
    color: #956719;
    font-weight: 800;
}

.featured-system-disabled {
    cursor: not-allowed;
    opacity: .75;
    background: linear-gradient(135deg, #f5f7f9, #eef2f5);
}

.featured-system-disabled:hover {
    transform: none;
    border-color: #d8e5f1;
    box-shadow: none;
}

.featured-status-note {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    color: #8b6824 !important;
    font-size: 0.68rem !important;
    font-weight: 700;
    line-height: 1.35;
}

/* Benefits */
.portal-benefits-panel {
    border-radius: var(--portal-radius-lg);
    box-shadow: var(--portal-shadow-hover);
}

.portal-benefit-item {
    transition:
        transform var(--portal-transition),
        background var(--portal-transition),
        border-color var(--portal-transition);
}

.portal-benefit-item:hover {
    transform: translateX(7px);
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.22);
}

/* Animation keyframes */
@keyframes portalTextIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes portalCardIn {
    from {
        opacity: 0;
        transform: translateY(15px) scale(.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes searchPanelIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes modernCardReveal {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes accentFlow {
    from { background-position: 0 0; }
    to { background-position: 180% 0; }
}

@keyframes portalOrbDrift {
    from { transform: translate3d(0,0,0) scale(1); }
    to { transform: translate3d(-28px,22px,0) scale(1.08); }
}

@keyframes portalOrbDriftReverse {
    from { transform: translate3d(0,0,0) scale(1); }
    to { transform: translate3d(30px,-20px,0) scale(1.11); }
}

/* Responsive refinements */
@media (max-width: 991.98px) {
    .portal-dashboard-header {
        grid-template-columns: 1fr;
    }

    .portal-dashboard {
        padding: 1.25rem 0 1.15rem;
    }
}

@media (max-width: 575.98px) {
    .portal-dashboard h1 {
        font-size: 1.6rem;
    }

    .portal-dashboard p {
        font-size: 0.78rem;
    }

    .portal-summary-item {
        min-height: 70px;
        padding: 0.6rem 0.4rem;
    }

    .systems-section-first {
        padding-top: 0.9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portal-dashboard::before,
    .portal-dashboard::after,
    .portal-dashboard h1,
    .portal-dashboard p,
    .portal-summary-item,
    .system-search-panel,
    .system-card.advanced-system-card,
    .system-card-accent {
        animation: none !important;
    }
}