/* ==========================================================================
   PowerON home page refresh (home.css)
   Self-contained, additive. Remove this file + its <link> in sub/css.php and
   restore index.php / sub/top_links.php to roll back fully.
   Reuses already-loaded libs (wow.js, animate.css, owl, jquery.appear).
   ========================================================================== */

:root {
    --po-navy:   #041d56;
    --po-navy-2: #02146e;
    --po-blue:   #0f72e5;
    --po-accent: #ffc107;   /* energy gold */
    --po-ink:    #08183f;
    --po-soft:   #c8d2ee;
}

/* ---------- HERO ---------------------------------------------------------- */
#header.header { min-height: auto; }

/* neutralise the dead empty <video> and the old flat overlay (gradient handled below) */
#header video, #header .overlay { display: none !important; }

#header .hero-image {
    position: relative;
    min-height: 76vh;
    padding: 70px 0 30px;
    background: var(--po-navy);
    overflow: hidden;
}

/* rotating background images (crossfade + slow zoom) */
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0; will-change: opacity, transform;
    animation: poHeroFade 28s infinite;
}
.hero-slide:nth-child(1){ animation-delay: 0s;  }
.hero-slide:nth-child(2){ animation-delay: 7s;  }
.hero-slide:nth-child(3){ animation-delay: 14s; }
.hero-slide:nth-child(4){ animation-delay: 21s; }
@keyframes poHeroFade {
    0%   { opacity: 0; transform: scale(1.04); }
    3%   { opacity: 1; }
    22%  { opacity: 1; }
    25%  { opacity: 0; }
    100% { opacity: 0; transform: scale(1.13); }
}

/* readable gradient over the images */
#header .hero-image::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(180deg, rgba(4,18,60,.45) 0%, rgba(4,18,60,.30) 38%, rgba(4,18,60,.92) 100%),
        radial-gradient(120% 80% at 15% 30%, rgba(15,114,229,.35) 0%, rgba(4,18,60,0) 60%);
}

#header .hero-text { position: relative; z-index: 2; }

/* staggered load-in for hero content */
#header .caption-txt > * { opacity: 0; animation: poRise .85s cubic-bezier(.2,.7,.2,1) forwards; }
#header .caption-txt > *:nth-child(1){ animation-delay: .15s; }
#header .caption-txt > *:nth-child(2){ animation-delay: .28s; }
#header .caption-txt > *:nth-child(3){ animation-delay: .41s; }
#header .caption-txt > *:nth-child(4){ animation-delay: .54s; }
#header .caption-txt > *:nth-child(5){ animation-delay: .67s; }
#header .caption-txt > *:nth-child(6){ animation-delay: .80s; }
@keyframes poRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* badge */
.po-badge {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 17px; margin-bottom: 22px;
    border: 1px solid rgba(255,255,255,.25); border-radius: 50px;
    background: rgba(255,255,255,.07); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    font: 600 12px/1 'Montserrat', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #fff;
}
.po-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--po-accent); animation: poPulse 2s infinite; }
@keyframes poPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,193,7,.55); }
    70%  { box-shadow: 0 0 0 11px rgba(255,193,7,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,193,7,0); }
}

/* headline */
#header .hero-small-title { font: 500 1.4rem/1.3 'Montserrat', sans-serif; color: #dbe4ff; letter-spacing: .01em; margin: 0 0 8px; }
#header .hero-main-title  { font: 800 5rem/1.02 'Montserrat', sans-serif; color: #fff; letter-spacing: -.02em; margin: 0; text-shadow: 0 6px 34px rgba(0,0,0,.45); }
.po-accent { color: var(--po-accent); }
.po-sup    { font-size: .42em; font-weight: 700; vertical-align: super; }
.hero-sub  { font: 400 1.15rem/1.55 'Roboto', sans-serif; color: var(--po-soft); max-width: 640px; margin: 20px auto 0; }

/* hero stats row */
.po-hero-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin-top: 30px; }
.po-hstat { display: flex; flex-direction: column; align-items: center; padding: 4px 30px; border-right: 1px solid rgba(255,255,255,.22); }
.po-hstat:last-child { border-right: none; }
.po-hnum { font: 800 2.4rem/1 'Montserrat', sans-serif; color: var(--po-accent); }
.po-hlabel { font: 500 .78rem 'Roboto', sans-serif; color: var(--po-soft); text-transform: uppercase; letter-spacing: .1em; margin-top: 8px; }

/* CTAs */
.po-cta-row { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }
.po-btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 14px 32px; border-radius: 50px;
    font: 700 .95rem 'Montserrat', sans-serif; letter-spacing: .02em; text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.po-btn-primary { background: var(--po-accent); color: var(--po-ink) !important; box-shadow: 0 12px 32px rgba(255,193,7,.35); }
.po-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(255,193,7,.5); }
.po-btn-ghost { background: rgba(255,255,255,.08); color: #fff !important; border: 1.5px solid rgba(255,255,255,.55); }
.po-btn-ghost:hover { background: #fff; color: var(--po-navy) !important; transform: translateY(-3px); }
.po-presentations-link { display: inline-block; margin-top: 20px; color: #cfe0ff !important; font: 600 .9rem 'Montserrat', sans-serif; text-decoration: none; border-bottom: 1px solid rgba(207,224,255,.4); padding-bottom: 3px; }
.po-presentations-link:hover { color: var(--po-accent) !important; }

/* ---------- STATS BAND --------------------------------------------------- */
.po-stats { background: linear-gradient(135deg, #041d56 0%, #02146e 60%, #0a2a86 100%); padding: 66px 0; position: relative; }
.po-stats .po-stat { text-align: center; color: #fff; padding: 14px 0; }
.po-stats .po-num { font: 800 3.1rem/1 'Montserrat', sans-serif; color: var(--po-accent); display: inline-block; }
.po-stats .po-plus { font: 800 2rem 'Montserrat', sans-serif; color: var(--po-accent); }
.po-stats .po-stat-label { font: 500 .95rem 'Roboto', sans-serif; color: var(--po-soft); letter-spacing: .06em; text-transform: uppercase; margin-top: 8px; }
.po-stats-title { text-align: center; color: #fff; font: 800 1.7rem 'Montserrat', sans-serif; margin-bottom: 8px; }
.po-stats-sub { text-align: center; color: var(--po-soft); font: 400 1rem 'Roboto', sans-serif; margin-bottom: 34px; }

/* ---------- COOPERATION PARTNER LOGOS (original horizontal layout, fit safely) ---------- */
#cooperation { padding-top: 30px; padding-bottom: 36px; }
#cooperation .row { align-items: center; }
#cooperation .col-sm-6.col-md { padding-left: 8px; padding-right: 8px; }
#cooperation .statistic-block { margin: 0; }
#cooperation .statistic-block img.zoom { max-height: 96px; width: auto !important; max-width: 100%; }
#cooperation .statistic-block .statistic-number { font-size: 1.6rem; }
#cooperation .statistic-block .p-md { font-size: .95rem; margin: 0 !important; }

/* ---------- FLOATING ACTION BUTTONS ------------------------------------- */
.po-float { position: fixed; left: 18px; bottom: 22px; z-index: 9990; display: flex; flex-direction: column; gap: 12px; }
.po-float a { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(0,0,0,.28); transition: transform .25s ease; }
.po-float a:hover { transform: scale(1.1); }
.po-float svg { width: 26px; height: 26px; fill: #fff; }
.po-wa   { background: #25d366; }
.po-call { background: var(--po-blue); }

/* ---------- MOTION SAFETY + RESPONSIVE ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .hero-slide, #header .caption-txt > *, .po-dot, .po-soon-text::after { animation: none !important; }
    #header .caption-txt > * { opacity: 1 !important; }
    .wow { visibility: visible !important; animation: none !important; }
}

@media (max-width: 991px) {
    #header .hero-main-title { font-size: 3.6rem; }
}
@media (max-width: 767px) {
    #header .hero-image { min-height: 82vh; }
    #header .hero-main-title { font-size: 2.7rem; }
    #header .hero-small-title { font-size: 1.15rem; }
    .hero-sub { font-size: 1rem; }
    .po-cta-row .po-btn { padding: 12px 22px; font-size: .85rem; }
    .po-hstat { padding: 4px 14px; }
    .po-hnum { font-size: 1.7rem; }
}

/* ========================================================================
   WHOLE-PAGE POLISH  (about -> sponsors -> buttons -> footer)
   ======================================================================== */

/* about section heading with accent underline (NOT the sponsor tier titles) */
#content-10 h3:not(.sponsor-title) {
    font: 800 2rem/1.15 'Montserrat', sans-serif; color: var(--po-navy);
    position: relative; padding-bottom: 14px; margin-bottom: 20px;
}
#content-10 h3:not(.sponsor-title)::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px; border-radius: 4px; background: var(--po-accent); }
/* empty sponsor-tier placeholders never render a stray mark */
.sponsor-title:empty { display: none; }

/* about feature blocks as soft cards */
#content-10 .fbox-2 {
    background: #fff; border: 1px solid #eef1f7; border-radius: 14px;
    padding: 24px 26px; margin-bottom: 22px !important;
    box-shadow: 0 6px 22px rgba(8,24,63,.05);
    transition: transform .3s ease, box-shadow .3s ease;
}
#content-10 .fbox-2:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(8,24,63,.10); }
#content-10 .fbox-ico { color: var(--po-blue) !important; }
#content-10 .fbox-txt h5 { color: var(--po-navy); font-weight: 700; }

/* sponsor tier titles */
.sponsor-title {
    color: var(--po-navy) !important; font-weight: 800 !important;
    letter-spacing: .04em; text-transform: uppercase; text-align: center; margin: 34px 0 26px;
}
.sponsor-title::after { content: ""; display: block; width: 50px; height: 3px; background: var(--po-accent); margin: 12px auto 0; border-radius: 3px; }

/* primary buttons site-wide */
.btn-theme { background: var(--po-blue) !important; border-color: var(--po-blue) !important; color: #fff !important; }
.btn-theme:hover { background: var(--po-navy) !important; border-color: var(--po-navy) !important; }

/* footer: deep navy with gold hovers */
#footer-1 { background: var(--po-navy); color: var(--po-soft); padding-top: 64px; padding-bottom: 26px; margin-top: 0 !important; }
#footer-1 .h6-xl, #footer-1 h6 { color: #fff !important; }
#footer-1 p, #footer-1 li, #footer-1 a { color: var(--po-soft); }
#footer-1 a:hover { color: var(--po-accent); }
#footer-1 .footer-log img { background: #fff; border-radius: 10px; padding: 10px 14px; }
#footer-1 .bottom-footer { border-top: 1px solid rgba(255,255,255,.12); margin-top: 26px; padding-top: 20px; }

/* ========================================================================
   LAYOUT REFINEMENTS (wider container, centered cooperation + sparse sponsors)
   ======================================================================== */

/* use more of the screen width on the main content bands */
#content-10 .container, #brands-2 .container, #cooperation .container { max-width: 1400px; }

/* centre the cooperation row as one group (keep it horizontal) */
/* cooperation columns stay equal-width so logos spread across the full row */

/* centre the sparse sponsor tiers (Power Exhibitors, Lanyard Sponsors, etc.) */
#brands-2 .row { justify-content: center; }
#brands-2 [class*="col-"] { text-align: center; }
/* drop empty placeholder columns so the visible pair centres */
#brands-2 .col-sm-4:not(:has(img)), #brands-2 .col-sm-6:not(:has(img)) { display: none; }
#brands-2 .brand-logo { float: none !important; display: inline-block; vertical-align: top; margin: 8px 10px; }

/* ========================================================================
   GALLERY  (home highlights + dedicated gallery page)
   ======================================================================== */
.po-gallery-hero { background: linear-gradient(135deg, #041d56 0%, #02146e 60%, #0a2a86 100%); padding: 84px 0 70px; }
.po-gh-badge { display: inline-block; padding: 7px 18px; border: 1px solid rgba(255,255,255,.25); border-radius: 50px; color: #fff; font: 600 12px 'Montserrat', sans-serif; letter-spacing: .14em; text-transform: uppercase; background: rgba(255,255,255,.06); }
.po-gh-title { color: #fff; font: 800 3rem 'Montserrat', sans-serif; margin: 18px 0 10px; }
.po-gh-sub { color: var(--po-soft); font: 400 1.1rem 'Roboto', sans-serif; max-width: 680px; margin: 0 auto; }

.po-highlights { padding: 72px 0; background: #fff; }
.po-hl-head { margin-bottom: 42px; }
.po-hl-title { font: 800 2rem 'Montserrat', sans-serif; color: var(--po-navy); }
.po-hl-sub { color: #6b7280; font: 400 1.05rem 'Roboto', sans-serif; margin-top: 8px; }

.po-gallery-section { background: #f7f9fc; padding: 64px 0; }

/* tiles */
.po-gallery [class*="col-"] { margin-bottom: 26px; }
.po-gtile { position: relative; display: block; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px rgba(8,24,63,.10); }
.po-gtile img { width: 100%; height: 260px; object-fit: cover; display: block; transition: transform .5s ease; }
.po-gtile:hover img { transform: scale(1.08); }
.po-gtile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(4,18,60,.80)); transition: opacity .3s ease; }
.po-gtile-cap { position: absolute; left: 18px; bottom: 16px; z-index: 2; color: #fff; font: 700 1.05rem 'Montserrat', sans-serif; }
.po-gtile-ico { position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; background: var(--po-accent); color: var(--po-ink); display: flex; align-items: center; justify-content: center; font-size: 15px; transform: scale(.6); opacity: 0; transition: .3s ease; }
.po-gtile:hover .po-gtile-ico { transform: scale(1); opacity: 1; }

/* albums */
.po-albums-title { text-align: center; color: var(--po-navy); font: 800 1.5rem 'Montserrat', sans-serif; margin: 52px 0 26px; }
.po-album-link { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e6eaf2; border-radius: 12px; padding: 18px 22px; margin-bottom: 18px; color: var(--po-navy); font: 700 1rem 'Montserrat', sans-serif; text-decoration: none; box-shadow: 0 4px 14px rgba(8,24,63,.05); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.po-album-link:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(8,24,63,.12); border-color: var(--po-accent); color: var(--po-navy); }
.po-album-ico { font-size: 1.3rem; }
.po-album-name { flex: 1; }
.po-album-arrow { color: var(--po-accent); font-size: 1.2rem; }
.po-gallery-empty { text-align: center; color: #6b7280; font: 400 1.1rem 'Roboto', sans-serif; padding: 60px 0; }

/* ========================================================================
   GALLERY HUB  (multi-year x exhibition/conference, folder-driven)
   ======================================================================== */
.po-galx { background: #fff; padding: 0; }
.po-galx .container { max-width: 100%; width: 100%; padding: 0; }
.po-galx-card { background: #fff; border-radius: 0; overflow: hidden; box-shadow: none; }

/* hero + year pills (full-bleed page band; top padding clears the fixed navbar) */
.po-galx-hero { background: #041d56; padding: 116px 5% 36px; }
.po-galx-title { font: 800 2.8rem/1.05 'Montserrat', sans-serif; color: #fff; letter-spacing: -.01em; }
.po-galx-underline { width: 74px; height: 4px; border-radius: 2px; background: var(--po-accent); margin: 13px 0 24px; }
.po-years { display: flex; gap: 10px; flex-wrap: wrap; }
.po-year { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.10); color: var(--po-soft); font: 700 15px 'Roboto', sans-serif; padding: 10px 24px; border-radius: 24px; cursor: pointer; transition: .2s; }
.po-year:hover { background: rgba(255,255,255,.18); }
.po-year.is-active { background: var(--po-accent); color: var(--po-navy); border-color: var(--po-accent); }

/* year blocks (only active shown) */
.po-yearblock { display: none; }
.po-yearblock.is-active { display: block; }

/* control strip */
.po-controls { padding: 30px 5% 8px; }
.po-toggle { display: inline-flex; background: #eef1f8; border-radius: 28px; padding: 5px; gap: 2px; }
.po-cat-btn { border: none; background: transparent; color: #8a93b0; font: 700 15px 'Roboto', sans-serif; padding: 12px 30px; border-radius: 24px; cursor: pointer; transition: .2s; }
.po-cat-btn.is-active { background: var(--po-blue); color: #fff; box-shadow: 0 2px 8px rgba(15,114,229,.35); }
.po-crumb { font: 400 15px 'Roboto', sans-serif; color: #8a93b0; margin-top: 14px; }
.po-crumb .c-seg { color: var(--po-blue); font-weight: 500; cursor: pointer; }
.po-crumb .c-leaf { color: var(--po-navy); font-weight: 700; }
.po-crumb .c-sep { margin: 0 7px; color: #b6bdce; }

/* category panes (only active shown) */
.po-cat { display: none; padding: 16px 5% 56px; }
.po-cat.is-active { display: block; }

/* photo grid */
.po-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.po-galx .po-gtile img { height: 250px; }

/* conference chooser */
.po-chooser-label { font: 800 1.5rem 'Montserrat', sans-serif; color: var(--po-navy); margin-bottom: 20px; }
.po-chooser-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 20px; }
.po-cfcard { text-align: left; padding: 0; border: 1px solid #e2e7f4; border-radius: 12px; overflow: hidden; background: #fff; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; display: block; }
.po-cfcard:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(4,29,86,.14); }
.po-cfcard.is-default { border: 2px solid var(--po-accent); box-shadow: 0 8px 20px rgba(4,29,86,.12); }
.po-cfcard-cover { position: relative; display: block; height: 165px; background-size: cover; background-position: center; background-color: #0f3a8c; }
.po-cfcard-pill { position: absolute; top: 11px; left: 11px; background: var(--po-accent); color: var(--po-navy); font: 700 13px 'Roboto', sans-serif; padding: 4px 12px; border-radius: 20px; }
.po-cfcard-count { position: absolute; bottom: 11px; right: 11px; background: rgba(4,29,86,.78); color: #fff; font-size: 13px; padding: 4px 11px; border-radius: 20px; }
.po-cfcard-body { display: block; padding: 16px 17px; }
.po-cfcard-name { display: block; font: 800 1.2rem 'Montserrat', sans-serif; color: var(--po-navy); }
.po-cfcard-date { display: block; font-size: 14px; color: #8a93b0; margin-top: 4px; }
.po-chooser-help { font-size: 14px; color: #8a93b0; margin-top: 18px; }

/* edition view (rail + grids) - shown only after a card is picked */
.po-edition-view { display: none; }
.po-cat.in-edition .po-chooser { display: none; }
.po-cat.in-edition .po-edition-view { display: block; }
.po-back { border: none; background: none; color: var(--po-blue); font: 700 15px 'Roboto', sans-serif; cursor: pointer; padding: 0; margin-bottom: 16px; }
.po-rail-label { font: 700 12px 'Roboto', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8a93b0; margin-bottom: 10px; }
.po-rail { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.po-rail-pill { border: 1px solid #e2e7f4; background: #fff; color: #5f6b85; font: 500 15px 'Roboto', sans-serif; padding: 9px 18px; border-radius: 22px; cursor: pointer; transition: .2s; }
.po-rail-pill b { color: var(--po-blue); }
.po-rail-pill.is-active { background: var(--po-blue); color: #fff; font-weight: 700; box-shadow: 0 2px 8px rgba(15,114,229,.35); }
.po-rail-pill.is-active b { background: var(--po-accent); color: var(--po-navy); padding: 0 7px; border-radius: 10px; }
.po-edition { display: none; }
.po-edition.is-active { display: block; }
.po-edition-title { font: 800 2rem 'Montserrat', sans-serif; color: var(--po-navy); position: relative; padding-bottom: 14px; margin-bottom: 22px; }
.po-edition-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; border-radius: 3px; background: var(--po-accent); }

@media (max-width: 991px) {
    .po-galx-title { font-size: 2.1rem; }
}
@media (max-width: 767px) {
    .po-galx-hero { padding-top: 90px; }
    .po-galx-title { font-size: 1.7rem; }
    .po-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .po-galx .po-gtile img { height: 150px; }
    .po-edition-title { font-size: 1.5rem; }
    .po-rail { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .po-rail-pill { white-space: nowrap; }
}

@media (max-width: 767px) {
    .po-gh-title { font-size: 2.1rem; }
    .po-gtile img { height: 210px; }
}